From e5a2d412062cb43c3d5e6a6912847e92b4b930bd Mon Sep 17 00:00:00 2001
From: Faisal Amir <urmauur@gmail.com>
Date: Mon, 16 Dec 2024 16:06:17 +0800
Subject: [PATCH] enhancement: move token speed to bottom (#4276)

---
 .../ThreadCenterPanel/TextMessage/index.tsx   | 21 +++++++++++--------
 1 file changed, 12 insertions(+), 9 deletions(-)

diff --git a/web/screens/Thread/ThreadCenterPanel/TextMessage/index.tsx b/web/screens/Thread/ThreadCenterPanel/TextMessage/index.tsx
index f65b9b967..6bca4fa8d 100644
--- a/web/screens/Thread/ThreadCenterPanel/TextMessage/index.tsx
+++ b/web/screens/Thread/ThreadCenterPanel/TextMessage/index.tsx
@@ -80,24 +80,27 @@ const MessageContainer: React.FC<
         <p className="text-xs font-medium text-gray-400">
           {displayDate(props.created)}
         </p>
-        {tokenSpeed &&
-          tokenSpeed.message === props.id &&
-          tokenSpeed.tokenSpeed > 0 && (
-            <p className="absolute right-8 text-xs font-medium text-[hsla(var(--text-secondary))]">
-              Token Speed: {Number(tokenSpeed.tokenSpeed).toFixed(2)}t/s
-            </p>
-          )}
       </div>
 
-      <div className="flex w-full flex-col">
+      <div className="flex w-full flex-col ">
         <div
           className={twMerge(
             'absolute right-0 order-1 mt-2 flex cursor-pointer items-center justify-start gap-x-2 transition-all',
             props.isCurrentMessage && !isUser
-              ? 'relative order-2 flex justify-end'
+              ? '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'
           )}
         >
+          <div>
+            {tokenSpeed &&
+              tokenSpeed.message === props.id &&
+              tokenSpeed.tokenSpeed > 0 && (
+                <p className="text-xs font-medium text-[hsla(var(--text-secondary))]">
+                  Token Speed: {Number(tokenSpeed.tokenSpeed).toFixed(2)}t/s
+                </p>
+              )}
+          </div>
+
           <MessageToolbar message={props} />
         </div>
         <div