fix:会话时间实时展示，立刻停止出现object

dataelement · Jul 11, 2024 · 4bdab35 · 4bdab35
1 parent f029f67
commit 4bdab35
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 25 deletions.
diff --git a/src/frontend/src/components/bs-comp/chatComponent/ChatInput.tsx b/src/frontend/src/components/bs-comp/chatComponent/ChatInput.tsx
@@ -1,15 +1,16 @@
+import { ClearIcon } from "@/components/bs-icons/clear";
 import { FormIcon } from "@/components/bs-icons/form";
 import { SendIcon } from "@/components/bs-icons/send";
+import { Button } from "@/components/bs-ui/button";
 import { Textarea } from "@/components/bs-ui/input";
 import { useToast } from "@/components/bs-ui/toast/use-toast";
 import { locationContext } from "@/contexts/locationContext";
+import { PauseIcon } from "@radix-ui/react-icons";
 import { useContext, useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { useMessageStore } from "./messageStore";
 import GuideQuestions from "./GuideQuestions";
-import { ClearIcon } from "@/components/bs-icons/clear";
-import { Button } from "@/components/bs-ui/button";
-import { PauseIcon, StopIcon } from "@radix-ui/react-icons";
+import { useMessageStore } from "./messageStore";
+import { formatDate } from "@/util/utils";
 
 export default function ChatInput({ clear, form, stop, questions, inputForm, wsUrl, onBeforSend }) {
     const { toast } = useToast()
@@ -198,6 +199,7 @@ export default function ChatInput({ clear, form, stop, questions, inputForm, wsU
     const handleWsMessage = (data) => {
         if (Array.isArray(data) && data.length) return
         if (data.type === 'start') {
+            setStoped(false)
             createWsMsg(data)
         } else if (data.type === 'stream') {
             //@ts-ignore
@@ -213,13 +215,12 @@ export default function ChatInput({ clear, form, stop, questions, inputForm, wsU
                 thought: data.intermediate_steps || '',
                 messageId: data.message_id,
                 noAccess: false,
-                liked: 0
+                liked: 0,
+                update_time: formatDate(new Date(), 'yyyy-MM-ddTHH:mm:ss')
             }, data.type === 'end_cover')
         } else if (data.type === "close") {
             setStoped(true)
             setInputLock({ locked: false, reason: '' })
-        } else if (data.type === 'begin') {
-            setStoped(false)
         }
     }
 

diff --git a/src/frontend/src/components/bs-comp/chatComponent/MessageBs.tsx b/src/frontend/src/components/bs-comp/chatComponent/MessageBs.tsx
@@ -79,8 +79,8 @@ export default function MessageBs({ data, onUnlike = () => { }, onSource }: { da
     const chatId = useMessageStore(state => state.chatId)
 
     return <div className="flex w-full">
-        <div className="w-fit max-w-[90%]">
-            <div className={`text-right hover:opacity-100 opacity-0`}>
+        <div className="w-fit group max-w-[90%]">
+            <div className={`text-right group-hover:opacity-100 opacity-0`}>
                 <span className="text-slate-400 text-sm">{formatStrTime(data.update_time, 'MM 月 dd 日 HH:mm')}</span>
             </div>
             {data.sender && <p className="text-gray-600 text-xs mb-2">{data.sender}</p>}

diff --git a/src/frontend/src/components/bs-comp/chatComponent/MessageUser.tsx b/src/frontend/src/components/bs-comp/chatComponent/MessageUser.tsx
@@ -1,9 +1,9 @@
 import { locationContext } from "@/contexts/locationContext";
 import { ChatMessageType } from "@/types/chat";
+import { formatStrTime } from "@/util/utils";
 import { MagnifyingGlassIcon, Pencil2Icon, ReloadIcon } from "@radix-ui/react-icons";
-import { useContext, useState } from "react";
+import { useContext } from "react";
 import { useMessageStore } from "./messageStore";
-import { formatStrTime } from "@/util/utils";
 
 export default function MessageUser({ useName = 'xxx', data }: { data: ChatMessageType }) {
     const msg = data.message[data.chatKey]
@@ -26,8 +26,8 @@ export default function MessageUser({ useName = 'xxx', data }: { data: ChatMessa
     }
 
     return <div className="flex justify-end w-full">
-        <div className="w-fit min-h-8 max-w-[90%]">
-            <div className={`text-right hover:opacity-100 opacity-0`}>
+        <div className="w-fit group min-h-8 max-w-[90%]">
+            <div className={`text-right group-hover:opacity-100 opacity-0`}>
                 <span className="text-slate-400 text-sm">{formatStrTime(data.update_time, 'MM 月 dd 日 HH:mm')}</span>
             </div>
             {useName && <p className="text-gray-600 text-xs mb-2 text-right">{useName}</p>}

diff --git a/src/frontend/src/components/bs-comp/chatComponent/messageStore.ts b/src/frontend/src/components/bs-comp/chatComponent/messageStore.ts
@@ -1,9 +1,8 @@
-import { message } from '@/components/bs-ui/toast/use-toast';
-import { generateUUID } from '@/components/bs-ui/utils'
-import { MessageDB, getChatHistory } from '@/controllers/API'
-import { ChatMessageType } from '@/types/chat'
-import { cloneDeep } from 'lodash'
-import { create } from 'zustand'
+import { getChatHistory } from '@/controllers/API';
+import { ChatMessageType } from '@/types/chat';
+import { cloneDeep } from 'lodash';
+import { create } from 'zustand';
+import { formatDate } from '@/util/utils';
 
 /**
  * 会话消息管理
@@ -138,7 +137,8 @@ export const useMessageStore = create<State & Actions>((set, get) => ({
                     category: '',
                     files: [],
                     end: false,
-                    user_name: ""
+                    user_name: "",
+                    update_time: formatDate(new Date(), 'yyyy-MM-ddTHH:mm:ss')
                 }]
         }))
     },

diff --git a/src/frontend/src/pages/ChatAppPage/index.tsx b/src/frontend/src/pages/ChatAppPage/index.tsx
@@ -9,7 +9,7 @@ import { captureAndAlertRequestErrorHoc } from "../../controllers/request";
 import { useDebounce } from "../../util/hook";
 import { generateUUID } from "../../utils";
 import ChatPanne from "./components/ChatPanne";
-import { formatStrTime } from "@/util/utils";
+import { formatStrTime, formatDate } from "@/util/utils";
 import { SkillIcon, AssistantIcon } from "@/components/bs-icons";
 import { useMessageStore } from "@/components/bs-comp/chatComponent/messageStore";
 
@@ -106,7 +106,7 @@ export default function SkillChatPage() {
                             </div>
                             <span className="block text-xs text-gray-600 dark:text-[#8D8D8E] mt-3 break-words truncate">{chat.latest_message?.message || ''}</span>
                             <div className="mt-6">
-                                <span className="text-gray-400 text-xs absolute bottom-2 left-2">{formatStrTime(chat.update_time, 'MM 月 dd 日')}</span>
+                                <span className="text-gray-400 text-xs absolute bottom-2 left-4">{formatStrTime(chat.update_time, 'MM 月 dd 日')}</span>
                                 <Trash2 size={14} className="absolute bottom-2 right-2 text-gray-400 hidden group-hover:block" onClick={(e) => handleDeleteChat(e, chat.chat_id)}></Trash2>
                             </div>
                         </div>
@@ -133,9 +133,11 @@ const useChatList = () => {
             const latest:any = messages[messages.length - 1]
             setChatList(chats => chats.map(chat => (chat.chat_id === chatId && chat.latest_message) 
                 ? {
-                     ...chat, latest_message: {
-                     ...chat.latest_message, 
-                     message: latest.message[latest.chatKey] || latest.message
+                     ...chat, 
+                     update_time: latest.update_time || formatDate(new Date(), 'yyyy-MM-ddTHH:mm:ss'),
+                     latest_message: {
+                        ...chat.latest_message, 
+                        message: latest.message[latest.chatKey] || latest.message
                      }
                   }
                 : chat)