feat: save message to memo (#1940)

* feat: implment backend function

* feat: implment frontend component

* stash

* eslint

* eslint

* eslint

* delete node

* stash

* refactor the style

* eslint

* eslint

* eslint

* fix build error

* stash

* add dep

* feat: save message as memos

* eslint

* eslint

* Update web/src/components/MemosChat/MemosChatMessage.tsx
Co-authored-by: boojack <stevenlgtm@gmail.com>

* stash

* eslint

* eslint

* chore: change translate

---------
Co-authored-by: boojack <stevenlgtm@gmail.com>

web/src/components/MemoChat/ChatMessage.tsx

 import { Message } from "@/store/zustand/message";
 import { marked } from "@/labs/marked";
 import Icon from "@/components/Icon";
+import Dropdown from "../kit/Dropdown";
+import { useMemoStore } from "@/store/module";
+import toast from "react-hot-toast";
+import { useTranslate } from "@/utils/i18n";
 
 interface MessageProps {
   index: number;
@@ -8,6 +12,19 @@ interface MessageProps {
 }
 
 const ChatMessage = ({ index, message }: MessageProps) => {
+  const memoStore = useMemoStore();
+  const t = useTranslate();
+
+  const handleSaveAsMemos = async () => {
+    await memoStore.createMemo({
+      content: message.content,
+      visibility: "PRIVATE",
+      resourceIdList: [],
+      relationList: [],
+    });
+    toast.success(t("memo-chat.save-as-memo-success"));
+  };
+
   return (
     <div key={index} className="w-full flex flex-col justify-start items-start space-y-2">
       {message.role === "user" ? (
@@ -22,6 +39,18 @@ const ChatMessage = ({ index, message }: MessageProps) => {
           <div className="memo-content-wrapper !w-auto flex flex-col justify-start items-start shadow rounded-lg rounded-tl-none px-3 py-2 bg-white dark:bg-zinc-800">
             <div className="memo-content-text">{marked(message.content)}</div>
           </div>
+          <Dropdown
+            actions={
+              <>
+                <button
+                  className="w-full m-auto text-left text-sm whitespace-nowrap leading-6 py-1 px-3 cursor-pointer rounded hover:bg-gray-100 dark:hover:bg-zinc-600"
+                  onClick={() => handleSaveAsMemos()}
+                >
+                  {t("memo-chat.save-as-memo")}
+                </button>
+              </>
+            }
+          />
         </div>
       )}
     </div>

web/src/locales/en.json

@@ -391,6 +391,8 @@
   },
   "memo-chat": {
     "title": "Memo Chat",
+    "save-as-memo": "Save as memo",
+    "save-as-memo-success": "Saved as memo successfully.",
     "not-enabled": "You have not set up your OpenAI API key.",
     "go-to-settings": "Go to settings",
     "placeholder": "Ask anything…",

web/src/locales/zh-Hans.json

@@ -98,6 +98,8 @@
   },
   "memo-chat": {
     "go-to-settings": "前往设置",
+    "save-as-memo": "保存为 Memo",
+    "save-as-memo-success": "保存为 Memo 成功",
     "not-enabled": "您尚未设置 OpenAI API 密钥。",
     "placeholder": "随便问",
     "title": "问 AI",