From c627e5edec568f3c0ff0298199d65c7cc14c2aff Mon Sep 17 00:00:00 2001
From: Zhang Minghan <zmh13054618081@dingtalk.com>
Date: Mon, 29 Jan 2024 16:51:34 +0800
Subject: [PATCH] feat: support file viewer

---
 adapter/chatgpt/image.go            |  4 +-
 app/src/components/FileViewer.tsx   | 87 +++++++++++++++++++++++++++++
 app/src/components/Markdown.tsx     | 38 +++++++++----
 app/src/components/plugins/file.tsx |  9 ++-
 app/src/resources/i18n/cn.json      |  1 +
 app/src/resources/i18n/en.json      |  3 +-
 app/src/resources/i18n/ja.json      |  3 +-
 app/src/resources/i18n/ru.json      |  3 +-
 docker-compose.yaml                 |  4 ++
 manager/connection.go               |  2 -
 manager/manager.go                  |  1 +
 11 files changed, 135 insertions(+), 20 deletions(-)
 create mode 100644 app/src/components/FileViewer.tsx

diff --git a/adapter/chatgpt/image.go b/adapter/chatgpt/image.go
index 1cca870..ea4ad81 100644
--- a/adapter/chatgpt/image.go
+++ b/adapter/chatgpt/image.go
@@ -32,14 +32,14 @@ func (c *ChatInstance) CreateImageRequest(props ImageProps) (string, error) {
 			N: 1,
 		})
 	if err != nil || res == nil {
-		return "", fmt.Errorf("chatgpt error: %s", err.Error())
+		return "", fmt.Errorf(err.Error())
 	}
 
 	data := utils.MapToStruct[ImageResponse](res)
 	if data == nil {
 		return "", fmt.Errorf("chatgpt error: cannot parse response")
 	} else if data.Error.Message != "" {
-		return "", fmt.Errorf("chatgpt error: %s", data.Error.Message)
+		return "", fmt.Errorf(data.Error.Message)
 	}
 
 	return data.Data[0].Url, nil
diff --git a/app/src/components/FileViewer.tsx b/app/src/components/FileViewer.tsx
new file mode 100644
index 0000000..c82e606
--- /dev/null
+++ b/app/src/components/FileViewer.tsx
@@ -0,0 +1,87 @@
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "./ui/dialog";
+import { useTranslation } from "react-i18next";
+import React from "react";
+import { Heading2, Paperclip, Text } from "lucide-react";
+import { Textarea } from "@/components/ui/textarea.tsx";
+import { CodeMarkdown } from "@/components/Markdown.tsx";
+import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group.tsx";
+
+type FileViewerProps = {
+  filename: string;
+  content: string;
+  children: React.ReactNode;
+  asChild?: boolean;
+};
+
+enum viewerType {
+  Text = "text",
+  Image = "image",
+}
+
+function FileViewer({ filename, content, children, asChild }: FileViewerProps) {
+  const { t } = useTranslation();
+
+  const [renderedType, setRenderedType] = React.useState(viewerType.Text);
+
+  return (
+    <Dialog>
+      <DialogTrigger asChild={asChild}>{children}</DialogTrigger>
+      <DialogContent className={`flex-dialog`}>
+        <DialogHeader>
+          <DialogTitle className={`flex flex-row items-center select-none`}>
+            <Paperclip className={`h-4 w-4 mr-2`} />
+            {filename ?? t("file.file")}
+          </DialogTitle>
+        </DialogHeader>
+        <div className={`file-viewer-action`}>
+          <ToggleGroup
+            variant={`outline`}
+            type={`single`}
+            value={renderedType}
+            onValueChange={console.log}
+          >
+            <ToggleGroupItem
+              value={viewerType.Text}
+              onClick={() => setRenderedType(viewerType.Text)}
+            >
+              <Text className={`h-4 w-4`} />
+            </ToggleGroupItem>
+            <ToggleGroupItem
+              value={viewerType.Image}
+              onClick={() => setRenderedType(viewerType.Image)}
+            >
+              <Heading2 className={`h-4 w-4`} />
+            </ToggleGroupItem>
+          </ToggleGroup>
+        </div>
+        <div className={`file-viewer-content`}>
+          {renderedType === viewerType.Text ? (
+            <Textarea
+              className={`file-viewer-textarea thin-scrollbar`}
+              value={content}
+              rows={15}
+              readOnly
+            />
+          ) : (
+            <div>
+              <CodeMarkdown
+                filename={filename}
+                codeStyle={`overflow-auto max-h-[60vh] thin-scrollbar`}
+              >
+                {content}
+              </CodeMarkdown>
+            </div>
+          )}
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+export default FileViewer;
diff --git a/app/src/components/Markdown.tsx b/app/src/components/Markdown.tsx
index f15ffdc..fb159da 100644
--- a/app/src/components/Markdown.tsx
+++ b/app/src/components/Markdown.tsx
@@ -31,6 +31,7 @@ type MarkdownProps = {
   children: string;
   className?: string;
   acceptHtml?: boolean;
+  codeStyle?: string;
 };
 
 function doAction(dispatch: AppDispatch, url: string): boolean {
@@ -72,7 +73,12 @@ function getSocialIcon(url: string) {
   }
 }
 
-function MarkdownContent({ children, className, acceptHtml }: MarkdownProps) {
+function MarkdownContent({
+  children,
+  className,
+  acceptHtml,
+  codeStyle,
+}: MarkdownProps) {
   const dispatch = useDispatch();
   const { t } = useTranslation();
   const { toast } = useToast();
@@ -144,11 +150,11 @@ function MarkdownContent({ children, className, acceptHtml }: MarkdownProps) {
                 PreTag="div"
                 wrapLongLines={true}
                 wrapLines={true}
-                className={`code-block`}
+                className={cn("code-block", codeStyle)}
               />
             </div>
           ) : (
-            <code className={`code-inline ${className}`} {...props}>
+            <code className={cn("code-inline", className)} {...props}>
               {children}
             </code>
           );
@@ -158,17 +164,27 @@ function MarkdownContent({ children, className, acceptHtml }: MarkdownProps) {
   );
 }
 
-function Markdown(props: MarkdownProps) {
+function Markdown({ children, ...props }: MarkdownProps) {
   // memoize the component
-  const { children, className, acceptHtml } = props;
   return useMemo(
-    () => (
-      <MarkdownContent className={className} acceptHtml={acceptHtml}>
-        {children}
-      </MarkdownContent>
-    ),
-    [props.children, props.className, props.acceptHtml],
+    () => <MarkdownContent {...props}>{children}</MarkdownContent>,
+    [props, children],
   );
 }
 
+type CodeMarkdownProps = MarkdownProps & {
+  filename: string;
+};
+
+export function CodeMarkdown({ filename, ...props }: CodeMarkdownProps) {
+  const suffix = filename.includes(".") ? filename.split(".").pop() : "";
+  const children = useMemo(() => {
+    const content = props.children.toString();
+
+    return `\`\`\`${suffix}\n${content}\n\`\`\``;
+  }, [props.children]);
+
+  return <Markdown {...props}>{children}</Markdown>;
+}
+
 export default Markdown;
diff --git a/app/src/components/plugins/file.tsx b/app/src/components/plugins/file.tsx
index ce11d7a..721f271 100644
--- a/app/src/components/plugins/file.tsx
+++ b/app/src/components/plugins/file.tsx
@@ -1,7 +1,8 @@
-import { Download, File } from "lucide-react";
+import { Download, Eye, File } from "lucide-react";
 import { saveAsFile, saveBlobAsFile } from "@/utils/dom.ts";
 import { useMemo } from "react";
 import { Button } from "@/components/ui/button.tsx";
+import FileViewer from "@/components/FileViewer.tsx";
 
 /**
  * file format:
@@ -37,7 +38,7 @@ export function parseFile(data: string, acceptDownload?: boolean) {
         <File className={`mr-1`} />
         <span className={`name`}>{filename}</span>
         <div className={`grow`} />
-        {image && (
+        {image ? (
           <Button
             variant={`ghost`}
             size={`icon`}
@@ -49,6 +50,10 @@ export function parseFile(data: string, acceptDownload?: boolean) {
           >
             <Download className={`cursor-pointer`} />
           </Button>
+        ) : (
+          <FileViewer filename={filename} content={content}>
+            <Eye className={`cursor-pointer`} />
+          </FileViewer>
         )}
       </div>
       {image && <img src={image} className={`file-image`} alt={""} />}
diff --git a/app/src/resources/i18n/cn.json b/app/src/resources/i18n/cn.json
index c036a08..84ef26b 100644
--- a/app/src/resources/i18n/cn.json
+++ b/app/src/resources/i18n/cn.json
@@ -241,6 +241,7 @@
   "confirm": "确认",
   "percent": "{{cent}}折",
   "file": {
+    "file": "文件",
     "upload": "上传文件",
     "type": "支持 pdf, docx, pptx, xlsx, 图像, 文本等格式",
     "drop": "拖拽文件到此处或点击上传",
diff --git a/app/src/resources/i18n/en.json b/app/src/resources/i18n/en.json
index e808696..8f822a1 100644
--- a/app/src/resources/i18n/en.json
+++ b/app/src/resources/i18n/en.json
@@ -207,7 +207,8 @@
     "empty-file": "Empty File",
     "empty-file-prompt": "File content is empty, has been automatically ignored",
     "large-file-success": "Parsing Successful",
-    "large-file-success-prompt": "Large file parsed successfully in {{time}} seconds"
+    "large-file-success-prompt": "Large file parsed successfully in {{time}} seconds",
+    "file": "Files"
   },
   "generate": {
     "title": "AI Project Generator",
diff --git a/app/src/resources/i18n/ja.json b/app/src/resources/i18n/ja.json
index 9b3674d..da8cadc 100644
--- a/app/src/resources/i18n/ja.json
+++ b/app/src/resources/i18n/ja.json
@@ -207,7 +207,8 @@
     "empty-file": "コンテンツファイルがありません",
     "empty-file-prompt": "ファイルの内容が空で、自動的に無視されます",
     "large-file-success": "解析に成功しました",
-    "large-file-success-prompt": "{{time}}秒で大きなファイルが正常に解析されました"
+    "large-file-success-prompt": "{{time}}秒で大きなファイルが正常に解析されました",
+    "file": "ファイル"
   },
   "generate": {
     "title": "AIプロジェクトビルダー",
diff --git a/app/src/resources/i18n/ru.json b/app/src/resources/i18n/ru.json
index 025452c..77e2c70 100644
--- a/app/src/resources/i18n/ru.json
+++ b/app/src/resources/i18n/ru.json
@@ -207,7 +207,8 @@
     "empty-file": "Пустой файл",
     "empty-file-prompt": "Содержимое файла пустое, автоматически проигнорировано",
     "large-file-success": "Синтаксический анализ успешно завершен",
-    "large-file-success-prompt": "Большой файл успешно проанализирован за {{time}} секунды"
+    "large-file-success-prompt": "Большой файл успешно проанализирован за {{time}} секунды",
+    "file": "Документ"
   },
   "generate": {
     "title": "Генератор AI проектов",
diff --git a/docker-compose.yaml b/docker-compose.yaml
index d873685..d83a484 100644
--- a/docker-compose.yaml
+++ b/docker-compose.yaml
@@ -39,6 +39,10 @@ services:
       links:
           - mysql
           - redis
+      ulimits:
+        nofile:
+          soft: 65535
+          hard: 65535
       environment:
           MYSQL_HOST: mysql
           MYSQL_USER: chatnio
diff --git a/manager/connection.go b/manager/connection.go
index c8630ee..94821b4 100644
--- a/manager/connection.go
+++ b/manager/connection.go
@@ -147,8 +147,6 @@ func (c *Connection) Process(handler func(*conversation.FormMessage) error) {
 }
 
 func (c *Connection) Handle(handler func(*conversation.FormMessage) error) {
-	defer c.conn.DeferClose()
-
 	go c.Process(handler)
 	c.ReadWorker()
 }
diff --git a/manager/manager.go b/manager/manager.go
index b67c44e..7d9b9af 100644
--- a/manager/manager.go
+++ b/manager/manager.go
@@ -58,6 +58,7 @@ func ChatAPI(c *gin.Context) {
 	if conn = utils.NewWebsocket(c, false); conn == nil {
 		return
 	}
+	defer conn.DeferClose()
 
 	db := utils.GetDBFromContext(c)