From a4368cf26e60f4f0a7384c4feef7cfe40350bdb8 Mon Sep 17 00:00:00 2001
From: Faisal Amir <urmauur@gmail.com>
Date: Wed, 26 Feb 2025 09:42:31 +0700
Subject: [PATCH] enhancement: improve chat thread (#4736)

* enhancement: improve chat thread

* chore: fix linter

* fix: linter

* chore: fix linter

* fix: chore failed test
---
 web/containers/Providers/ModelHandler.tsx     |  2 +
 .../ThreadCenterPanel/TextMessage/index.tsx   | 41 ++++++++-----------
 web/utils/datetime.test.ts                    |  1 -
 web/utils/datetime.ts                         |  2 -
 4 files changed, 20 insertions(+), 26 deletions(-)

diff --git a/web/containers/Providers/ModelHandler.tsx b/web/containers/Providers/ModelHandler.tsx
index 42ef8afbc..786dbd4f0 100644
--- a/web/containers/Providers/ModelHandler.tsx
+++ b/web/containers/Providers/ModelHandler.tsx
@@ -233,6 +233,7 @@ export default function ModelHandler() {
             tokenSpeed: averageTokenSpeed,
             tokenCount: totalTokenCount,
             message: message.id,
+            model: activeModelRef.current?.name,
           }
         })
         return
@@ -285,6 +286,7 @@ export default function ModelHandler() {
       message.metadata = {
         ...message.metadata,
         token_speed: tokenSpeedRef.current?.tokenSpeed,
+        model: activeModelRef.current?.name,
       }
 
       if (message.status === MessageStatus.Error) {
diff --git a/web/screens/Thread/ThreadCenterPanel/TextMessage/index.tsx b/web/screens/Thread/ThreadCenterPanel/TextMessage/index.tsx
index 94d923906..684f1b0e4 100644
--- a/web/screens/Thread/ThreadCenterPanel/TextMessage/index.tsx
+++ b/web/screens/Thread/ThreadCenterPanel/TextMessage/index.tsx
@@ -24,6 +24,7 @@ import {
   tokenSpeedAtom,
 } from '@/helpers/atoms/ChatMessage.atom'
 
+import { selectedModelAtom } from '@/helpers/atoms/Model.atom'
 import { chatWidthAtom } from '@/helpers/atoms/Setting.atom'
 
 const MessageContainer: React.FC<
@@ -35,6 +36,7 @@ const MessageContainer: React.FC<
   const activeAssistant = useAtomValue(activeAssistantAtom)
   const tokenSpeed = useAtomValue(tokenSpeedAtom)
   const chatWidth = useAtomValue(chatWidthAtom)
+  const selectedModel = useAtomValue(selectedModelAtom)
 
   const text = useMemo(
     () =>
@@ -74,27 +76,11 @@ const MessageContainer: React.FC<
     >
       <div
         className={twMerge(
-          'mb-2 flex items-center justify-start gap-x-2',
-          !isUser && 'mt-2'
+          'mb-2 flex items-center justify-start',
+          !isUser && 'mt-2 gap-x-2'
         )}
       >
         {!isUser && !isSystem && <LogoMark width={28} />}
-        {isUser && (
-          <div className="flex h-8 w-8 items-center justify-center rounded-full border border-[hsla(var(--app-border))] last:border-none">
-            <svg
-              width="12"
-              height="16"
-              viewBox="0 0 12 16"
-              fill="none"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M6 0.497864C4.34315 0.497864 3 1.84101 3 3.49786C3 5.15472 4.34315 6.49786 6 6.49786C7.65685 6.49786 9 5.15472 9 3.49786C9 1.84101 7.65685 0.497864 6 0.497864ZM9.75 7.99786L2.24997 7.99787C1.00734 7.99787 0 9.00527 0 10.2479C0 11.922 0.688456 13.2633 1.81822 14.1701C2.93013 15.0625 4.42039 15.4979 6 15.4979C7.57961 15.4979 9.06987 15.0625 10.1818 14.1701C11.3115 13.2633 12 11.922 12 10.2479C12 9.00522 10.9926 7.99786 9.75 7.99786Z"
-                fill="#9CA3AF"
-              />
-            </svg>
-          </div>
-        )}
 
         <div
           className={twMerge(
@@ -102,10 +88,17 @@ const MessageContainer: React.FC<
             isUser && 'text-gray-500'
           )}
         >
-          {isUser
-            ? props.role
-            : (activeAssistant?.assistant_name ?? props.role)}
+          {!isUser && (
+            <>
+              {props.metadata && 'model' in props.metadata
+                ? (props.metadata?.model as string)
+                : props.isCurrentMessage
+                  ? selectedModel?.name
+                  : (activeAssistant?.assistant_name ?? props.role)}
+            </>
+          )}
         </div>
+
         <p className="text-xs font-medium text-gray-400">
           {props.created_at &&
             displayDate(props.created_at ?? Date.now() / 1000)}
@@ -116,9 +109,11 @@ const MessageContainer: React.FC<
         <div
           className={twMerge(
             'absolute right-0 order-1 mt-2 flex cursor-pointer items-center justify-start gap-x-2 transition-all',
+            isUser &&
+              'hidden group-hover:absolute group-hover:right-4 group-hover:top-4 group-hover:flex',
             props.isCurrentMessage && !isUser
               ? 'relative left-0 order-2 flex w-full justify-between'
-              : 'hidden group-hover:absolute group-hover:right-4 group-hover:top-4 group-hover:flex'
+              : 'relative left-0 order-2 hidden w-full justify-between group-hover:flex'
           )}
         >
           <div>
@@ -142,7 +137,7 @@ const MessageContainer: React.FC<
         </div>
         <div
           className={twMerge(
-            'order-2 w-full',
+            'order-1 w-full',
             !isUser && !text.includes(' ') && 'break-all',
             props.isCurrentMessage && !isUser && 'order-1'
           )}
diff --git a/web/utils/datetime.test.ts b/web/utils/datetime.test.ts
index 605f98d24..24774be18 100644
--- a/web/utils/datetime.test.ts
+++ b/web/utils/datetime.test.ts
@@ -7,7 +7,6 @@ test("should return only time for today's timestamp", () => {
   const expectedTime = `${today.toLocaleTimeString(undefined, {
     hour: '2-digit',
     minute: '2-digit',
-    second: '2-digit',
     hour12: true,
   })}`
   expect(displayDate(timestamp / 1000)).toBe(expectedTime)
diff --git a/web/utils/datetime.ts b/web/utils/datetime.ts
index f5fdf8226..796ad0149 100644
--- a/web/utils/datetime.ts
+++ b/web/utils/datetime.ts
@@ -21,7 +21,6 @@ export const displayDate = (timestamp?: string | number | Date) => {
   })}, ${date.toLocaleTimeString(undefined, {
     hour: '2-digit',
     minute: '2-digit',
-    second: '2-digit',
     hour12: true,
   })}`
 
@@ -29,7 +28,6 @@ export const displayDate = (timestamp?: string | number | Date) => {
     displayDate = date.toLocaleTimeString(undefined, {
       hour: '2-digit',
       minute: '2-digit',
-      second: '2-digit',
       hour12: true,
     })
   }