From a1ec45fdd1fcafc61bf09014a0fca535a9863377 Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Thu, 21 Mar 2024 17:47:01 +0800
Subject: [PATCH] fix style of message log operation

---
 web/app/components/app/chat/answer/index.tsx           | 8 ++++----
 web/app/components/app/chat/log/index.tsx              | 6 +++---
 web/app/components/base/chat/chat/answer/index.tsx     | 2 +-
 web/app/components/base/chat/chat/answer/operation.tsx | 4 ++--
 4 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/web/app/components/app/chat/answer/index.tsx b/web/app/components/app/chat/answer/index.tsx
index 124f32b913..561c9d3b9e 100644
--- a/web/app/components/app/chat/answer/index.tsx
+++ b/web/app/components/app/chat/answer/index.tsx
@@ -248,8 +248,8 @@ const Answer: FC<IAnswerProps> = ({
             </div>
           )
         }
-        <div className={cn(s.answerWrapWrap, 'chat-answer-container group')}>
-          <div className={s.answerWrap}>
+        <div className={cn(s.answerWrapWrap, 'chat-answer-container')}>
+          <div className={cn(s.answerWrap, 'group')}>
             <div className={`${s.answer} relative text-sm text-gray-900`}>
               <div className={'ml-2 py-3 px-4 bg-gray-100 rounded-tr-2xl rounded-b-2xl'}>
                 {(isResponding && (isAgentMode ? (!content && (agent_thoughts || []).filter(item => !!item.thought || !!item.tool).length === 0) : !content))
@@ -311,7 +311,7 @@ const Answer: FC<IAnswerProps> = ({
                   )
                 }
               </div>
-              <div className='absolute top-[-14px] right-[-14px] flex flex-row justify-end gap-1'>
+              <div className='absolute top-[-14px] left-[-6px] flex flex-row justify-end gap-1'>
                 {!item.isOpeningStatement && (
                   <CopyBtn
                     value={content}
@@ -319,7 +319,7 @@ const Answer: FC<IAnswerProps> = ({
                   />
                 )}
                 {((isShowPromptLog && !isResponding) || (!item.isOpeningStatement && isShowTextToSpeech)) && (
-                  <div className='hidden group-hover:flex items-center h-[28px] p-0.5 rounded-lg bg-white border-[0.5px] border-gray-100 shadow-md'>
+                  <div className='hidden group-hover:flex items-center w-max h-[28px] p-0.5 rounded-lg bg-white border-[0.5px] border-gray-100 shadow-md'>
                     {isShowPromptLog && !isResponding && (
                       <Log logItem={item} />
                     )}
diff --git a/web/app/components/app/chat/log/index.tsx b/web/app/components/app/chat/log/index.tsx
index 1c32c62fdc..34b8440add 100644
--- a/web/app/components/app/chat/log/index.tsx
+++ b/web/app/components/app/chat/log/index.tsx
@@ -16,7 +16,7 @@ const Log: FC<LogProps> = ({
 
   return (
     <div
-      className='p-1 flex items-center justify-center rounded-[6px] hover:bg-gray-50 cursor-pointer'
+      className='shrink-0 p-1 flex items-center justify-center rounded-[6px] font-medium text-gray-500 hover:bg-gray-50 cursor-pointer hover:text-gray-700'
       onClick={(e) => {
         e.stopPropagation()
         e.nativeEvent.stopImmediatePropagation()
@@ -27,8 +27,8 @@ const Log: FC<LogProps> = ({
           setShowPromptLogModal(true)
       }}
     >
-      <File02 className='mr-1 w-4 h-4 text-gray-500' />
-      <div className='text-xs leading-4 text-gray-500'>{runID ? t('appLog.viewLog') : t('appLog.promptLog')}</div>
+      <File02 className='mr-1 w-4 h-4' />
+      <div className='text-xs leading-4'>{runID ? t('appLog.viewLog') : t('appLog.promptLog')}</div>
     </div>
   )
 }
diff --git a/web/app/components/base/chat/chat/answer/index.tsx b/web/app/components/base/chat/chat/answer/index.tsx
index 39737df555..8c75a1bde6 100644
--- a/web/app/components/base/chat/chat/answer/index.tsx
+++ b/web/app/components/base/chat/chat/answer/index.tsx
@@ -69,7 +69,7 @@ const Answer: FC<AnswerProps> = ({
           )
         }
       </div>
-      <div className='chat-answer-container grow w-0 group ml-4'>
+      <div className='chat-answer-container grow w-0 ml-4'>
         <div className='relative pr-10'>
           <AnswerTriangle className='absolute -left-2 top-0 w-2 h-3 text-gray-100' />
           <div
diff --git a/web/app/components/base/chat/chat/answer/operation.tsx b/web/app/components/base/chat/chat/answer/operation.tsx
index ae2a5284a7..f37a41702d 100644
--- a/web/app/components/base/chat/chat/answer/operation.tsx
+++ b/web/app/components/base/chat/chat/answer/operation.tsx
@@ -67,7 +67,7 @@ const Operation: FC<OperationProps> = ({
   }
 
   return (
-    <div className='absolute top-[-14px] right-[-14px] flex justify-end gap-1'>
+    <div className='absolute top-[-14px] left-[-14px] flex justify-end gap-1'>
       {!isOpeningStatement && (
         <CopyBtn
           value={content}
@@ -76,7 +76,7 @@ const Operation: FC<OperationProps> = ({
       )}
 
       {!isOpeningStatement && (
-        <div className='hidden group-hover:flex items-center h-[28px] p-0.5 rounded-lg bg-white border-[0.5px] border-gray-100 shadow-md'>
+        <div className='hidden group-hover:flex items-center w-max h-[28px] p-0.5 rounded-lg bg-white border-[0.5px] border-gray-100 shadow-md'>
           {showPromptLog && (
             <Log logItem={item} />
           )}