fix file double click and file format

app/src/components/Markdown.tsx

@@ -16,10 +16,21 @@ type MarkdownProps = {
 
 function Markdown({ children, className }: MarkdownProps) {
   useEffect(() => {
-    document.querySelectorAll(".file-instance").forEach((e) => {
-      e.addEventListener("click", () => {
-        const filename = e.getAttribute("file") as string;
-        const data = e.getAttribute("content") as string;
+    document.querySelectorAll(".file-instance").forEach((el) => {
+      el.removeEventListener("click", () => {});
+      el.addEventListener("click", (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        // prevent double click
+        // @ts-ignore
+        if (window.hasOwnProperty("file") && window.file + 250 > new Date().getTime()) {
+          return;
+        } else {
+          // @ts-ignore
+          window.file = new Date().getTime();
+        }
+        const filename = el.getAttribute("file") as string;
+        const data = el.getAttribute("content") as string;
         if (data) {
           saveAsFile(filename, data);
         }

app/src/components/Message.tsx

@@ -14,7 +14,7 @@ import {
   ContextMenuItem,
   ContextMenuTrigger,
 } from "./ui/context-menu.tsx";
-import { copyClipboard, saveAsFile, useInputValue } from "../utils.ts";
+import {copyClipboard, filterMessage, saveAsFile, useInputValue} from "../utils.ts";
 import { useTranslation } from "react-i18next";
 import {
   Tooltip,
@@ -56,18 +56,18 @@ function MessageSegment({ message }: MessageProps) {
         </div>
       </ContextMenuTrigger>
       <ContextMenuContent>
-        <ContextMenuItem onClick={() => copyClipboard(message.content)}>
+        <ContextMenuItem onClick={() => copyClipboard(filterMessage(message.content))}>
           <Copy className={`h-4 w-4 mr-2`} /> {t("message.copy")}
         </ContextMenuItem>
         <ContextMenuItem
           onClick={() =>
-            saveAsFile(`message-${message.role}.txt`, message.content)
+            saveAsFile(`message-${message.role}.txt`, filterMessage(message.content))
           }
         >
           <File className={`h-4 w-4 mr-2`} /> {t("message.save")}
         </ContextMenuItem>
         <ContextMenuItem
-          onClick={() => useInputValue("input", message.content)}
+          onClick={() => useInputValue("input", filterMessage(message.content))}
         >
           <MousePointerSquare className={`h-4 w-4 mr-2`} /> {t("message.use")}
         </ContextMenuItem>

app/src/routes/Home.tsx

@@ -30,7 +30,7 @@ import {
   updateConversationList,
 } from "../conversation/history.ts";
 import React, { useEffect, useRef, useState } from "react";
-import {formatMessage, mobile, useAnimation, useEffectAsync} from "../utils.ts";
+import {filterMessage, formatMessage, mobile, useAnimation, useEffectAsync} from "../utils.ts";
 import { useToast } from "../components/ui/use-toast.ts";
 import { ConversationInstance, Message } from "../conversation/types.ts";
 import {
@@ -122,7 +122,7 @@ function SideBar() {
                 }}
               >
                 <MessageSquare className={`h-4 w-4 mr-1`} />
-                <div className={`title`}>{conversation.name}</div>
+                <div className={`title`}>{filterMessage(conversation.name)}</div>
                 <div className={`id`}>{conversation.id}</div>
                 <AlertDialog>
                   <AlertDialogTrigger asChild>
@@ -136,7 +136,7 @@ function SideBar() {
                       <AlertDialogDescription>
                         {t("conversation.remove-description")}
                         <strong className={`conversation-name`}>
-                          {conversation.name}
+                          {filterMessage(conversation.name)}
                         </strong>
                         {t("end")}
                       </AlertDialogDescription>

app/src/utils.ts

@@ -157,6 +157,21 @@ ${message}`;
   }
 }
 
+export function filterMessage(message: string): string {
+  /**
+   * remove file block
+   * :::file
+   * [[<filename>]]
+   * <file content>
+   * :::
+   */
+
+  return message.replace(
+    /:::file\n\[\[.*]]\n[\s\S]*?\n:::\n\n/g,
+    "",
+  );
+}
+
 export function useDraggableInput(
   t: any,
   toast: any,