feat:会话列表展示优化，内容消息时间展示

dataelement · Jul 4, 2024 · da1cf77 · da1cf77
1 parent 3ea2105
commit da1cf77
Show file tree

Hide file tree

Showing 6 changed files with 52 additions and 19 deletions.
diff --git a/src/frontend/src/components/bs-comp/chatComponent/MessageBs.tsx b/src/frontend/src/components/bs-comp/chatComponent/MessageBs.tsx
@@ -3,14 +3,15 @@ import { LoadIcon } from "@/components/bs-icons/loading";
 import { CodeBlock } from "@/modals/formModal/chatMessage/codeBlock";
 import { ChatMessageType } from "@/types/chat";
 import { copyText } from "@/utils";
-import { useMemo, useRef } from "react";
+import { useMemo, useRef, useState } from "react";
 import ReactMarkdown from "react-markdown";
 import rehypeMathjax from "rehype-mathjax";
 import remarkGfm from "remark-gfm";
 import remarkMath from "remark-math";
 import MessageButtons from "./MessageButtons";
 import SourceEntry from "./SourceEntry";
 import { useMessageStore } from "./messageStore";
+import { isSameDay } from "@/util/utils";
 
 // 颜色列表
 const colorList = [
@@ -76,11 +77,17 @@ export default function MessageBs({ data, onUnlike = () => { }, onSource }: { da
     }
 
     const chatId = useMessageStore(state => state.chatId)
+    const [show, setShow] = useState(false)
 
-    return <div className="flex w-full py-1">
+    return <div className="flex w-full">
         <div className="w-fit max-w-[90%]">
+            <div className={`text-right ${show ? 'opacity-100' : 'opacity-0'}`}>
+                <span className="text-slate-400 text-sm">{isSameDay(data.update_time, new Date())}</span>
+            </div>
             {data.sender && <p className="text-gray-600 text-xs mb-2">{data.sender}</p>}
-            <div className="min-h-8 px-6 py-4 rounded-2xl bg-[#F5F6F8] dark:bg-[#313336]">
+            <div className="min-h-8 px-6 py-4 rounded-2xl bg-[#F5F6F8] dark:bg-[#313336]"
+                onMouseEnter={(e) => setShow(true)}
+                onMouseLeave={(e) => setShow(false)}>
                 <div className="flex gap-2">
                     <div className="w-6 h-6 min-w-6 flex justify-center items-center rounded-full" style={{ background: avatarColor }} ><AvatarIcon /></div>
                     {data.message.toString() ?

diff --git a/src/frontend/src/components/bs-comp/chatComponent/MessageUser.tsx b/src/frontend/src/components/bs-comp/chatComponent/MessageUser.tsx
@@ -1,8 +1,9 @@
 import { locationContext } from "@/contexts/locationContext";
 import { ChatMessageType } from "@/types/chat";
 import { MagnifyingGlassIcon, Pencil2Icon, ReloadIcon } from "@radix-ui/react-icons";
-import { useContext } from "react";
+import { useContext, useState } from "react";
 import { useMessageStore } from "./messageStore";
+import { isSameDay } from "@/util/utils";
 
 export default function MessageUser({ useName, data }: { data: ChatMessageType }) {
     const msg = data.message[data.chatKey]
@@ -24,10 +25,17 @@ export default function MessageUser({ useName, data }: { data: ChatMessageType }
         document.dispatchEvent(myEvent);
     }
 
-    return <div className="flex justify-end w-full py-1">
+    const [show, setShow] = useState(false)
+
+    return <div className="flex justify-end w-full">
         <div className="w-fit min-h-8 max-w-[90%]">
+            <div className={`text-right ${show ? 'opacity-100' : 'opacity-0'}`}>
+                <span className="text-slate-400 text-sm">{isSameDay(data.update_time, new Date())}</span>
+            </div>
             {useName && <p className="text-gray-600 text-xs mb-2 text-right">{useName}</p>}
-            <div className="rounded-2xl px-6 py-4 bg-[#EEF2FF] dark:bg-[#333A48]">
+            <div className="rounded-2xl px-6 py-4 bg-[#EEF2FF] dark:bg-[#333A48]"
+                onMouseEnter={(e) => setShow(true)}
+                onMouseLeave={(e) => setShow(false)}>
                 <div className="flex gap-2 ">
                     <div className="text-[#0D1638] dark:text-[#CFD5E8] text-sm break-all whitespace-break-spaces">{msg}</div>
                     <div className="w-6 h-6 min-w-6"><img src={__APP_ENV__.BASE_URL + '/user.png'} alt="" /></div>

diff --git a/src/frontend/src/pages/ChatAppPage/index.tsx b/src/frontend/src/pages/ChatAppPage/index.tsx
@@ -1,4 +1,6 @@
 import SkillChatSheet from "@/components/bs-comp/sheets/SkillChatSheet";
+import { PlusBoxIcon, PlusBoxIconDark } from "@/components/bs-icons/plusBox";
+import { bsConfirm } from "@/components/bs-ui/alertDialog/useConfirm";
 import { Trash2 } from "lucide-react";
 import { useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -7,9 +9,8 @@ import { captureAndAlertRequestErrorHoc } from "../../controllers/request";
 import { useDebounce } from "../../util/hook";
 import { generateUUID } from "../../utils";
 import ChatPanne from "./components/ChatPanne";
-import { PlusBoxIcon, PlusBoxIconDark } from "@/components/bs-icons/plusBox";
-import { gradients } from "@/components/bs-comp/cardComponent";
-import { bsConfirm } from "@/components/bs-ui/alertDialog/useConfirm";
+import { isSameDay } from "@/util/utils";
+import { SkillIcon, AssistantIcon } from "@/components/bs-icons";
 
 export default function SkillChatPage() {
 
@@ -66,7 +67,6 @@ export default function SkillChatPage() {
         setChatId(chat.chat_id)
     }, 100, false)
 
-
     // del
     const handleDeleteChat = (e, id) => {
         e.stopPropagation();
@@ -80,7 +80,6 @@ export default function SkillChatPage() {
         })
     }
 
-
     return <div className="flex h-full">
         <div className="h-full w-[220px] relative border-r">
             <div className="absolute flex top-0 w-full bg-background-main-content z-10 p-2">
@@ -96,14 +95,19 @@ export default function SkillChatPage() {
                 {
                     chatList.map((chat, i) => (
                         <div key={chat.chat_id}
-                            className={` group item w-full rounded-lg mt-2 p-4 relative  hover:bg-[#EDEFF6] cursor-pointer dark:hover:bg-[#34353A] ${chatId === chat.chat_id ? 'bg-[#EDEFF6] dark:bg-[#34353A]' : 'bg-[#f9f9fc] dark:bg-[#212122]'}`}
+                            className={`group item w-full rounded-lg mt-2 p-4 relative  hover:bg-[#EDEFF6] cursor-pointer dark:hover:bg-[#34353A] ${chatId === chat.chat_id ? 'bg-[#EDEFF6] dark:bg-[#34353A]' : 'bg-[#f9f9fc] dark:bg-[#212122]'}`}
                             onClick={() => handleSelectChat(chat)}>
-                            <p className="break-words text-sm font-bold text-gray-950 dark:text-[#F2F2F2] leading-6">
-                                <span className={`relative top-[-1px] inline-block w-2 h-2 mr-2 ${chat.flow_type === 'flow' ? 'bg-[#111]' : 'bg-primary'}`}></span>
-                                {chat.flow_name}
-                            </p>
-                            <span className="block text-xs text-gray-600 dark:text-[#8D8D8E] mt-3 break-words truncate-multiline">{chat.flow_description}</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 className="flex place-items-center space-x-3">
+                                <div className=" inline-block bg-purple-500 rounded-md">
+                                    {chat.flow_type === 'assistant' ? <AssistantIcon/> : <SkillIcon/>}
+                                </div>
+                                <p className="truncate text-sm font-bold text-gray-950 dark:text-[#F2F2F2] leading-6">{chat.flow_name}</p>
+                            </div>
+                            <span className="block text-xs text-gray-600 dark:text-[#8D8D8E] mt-3 break-words truncate">{chat.flow_description}</span>
+                            <div className="mt-6">
+                                <span className="text-gray-400 text-xs absolute bottom-2 left-2">{isSameDay(chat.update_time, new Date())}</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>
                     ))
                 }

diff --git a/src/frontend/src/pages/DiffFlowPage/index.tsx b/src/frontend/src/pages/DiffFlowPage/index.tsx
@@ -45,7 +45,7 @@ export default function index(params) {
                 添加版本({mulitVersionFlow.length}/4)
             </Button>
         </div>
-
+        
         {/* content */}
         <div className="h-full pt-14 overflow-y-auto">
             {/* comps */}

diff --git a/src/frontend/src/types/chat/index.ts b/src/frontend/src/types/chat/index.ts
@@ -22,4 +22,6 @@ export type ChatMessageType = {
   receiver?: any;
   liked?: boolean;
   extra?: string;
+  create_time: string;
+  update_time: string;
 };
diff --git a/src/frontend/src/util/utils.ts b/src/frontend/src/util/utils.ts
@@ -91,6 +91,18 @@ export function formatDate(date: Date, format: string): string {
     return format.replace(/yyyy|MM|dd|HH|mm|ss/g, (match) => replacements[match])
 } 
 
+// string类型和Date对比是否同一天
+export function isSameDay(time: string, date: Date): string {
+    if(!time) return '暂无时间'
+    const newTime = time.substring(0, time.indexOf('T')).split('-')
+    const arrayTime = newTime.map(t => Number(t))
+    const [year, month, day] = [date.getFullYear(), date.getMonth() + 1, date.getDay()]
+    if(year === arrayTime[0] && month === arrayTime[1] && day === arrayTime[2]) {
+        return time.substring(time.indexOf('T') + 1, time.length - 3)
+    }
+    return `${newTime[1]}月${newTime[2]}日`
+}
+
 export function toTitleCase(str: string | undefined): string {
     if (!str) return "";
     let result = str