Fix: operation postion of answer in logs (#8411)

Co-authored-by: Yi <yxiaoisme@gmail.com>

web/app/components/base/chat/chat/answer/index.tsx

@@ -8,7 +8,6 @@ import type {
   ChatConfig,
   ChatItem,
 } from '../../types'
-import { useChatContext } from '../context'
 import Operation from './operation'
 import AgentContent from './agent-content'
 import BasicContent from './basic-content'
@@ -16,13 +15,13 @@ import SuggestedQuestions from './suggested-questions'
 import More from './more'
 import WorkflowProcess from './workflow-process'
 import { AnswerTriangle } from '@/app/components/base/icons/src/vender/solid/general'
-import { MessageFast } from '@/app/components/base/icons/src/vender/solid/communication'
 import LoadingAnim from '@/app/components/base/chat/chat/loading-anim'
 import Citation from '@/app/components/base/chat/chat/citation'
 import { EditTitle } from '@/app/components/app/annotation/edit-annotation-modal/edit-item'
 import type { Emoji } from '@/app/components/tools/types'
 import type { AppData } from '@/models/share'
 import AnswerIcon from '@/app/components/base/answer-icon'
+import cn from '@/utils/classnames'
 
 type AnswerProps = {
   item: ChatItem
@@ -61,26 +60,24 @@ const Answer: FC<AnswerProps> = ({
   } = item
   const hasAgentThoughts = !!agent_thoughts?.length
 
-  const [containerWidth] = useState(0)
+  const [containerWidth, setContainerWidth] = useState(0)
   const [contentWidth, setContentWidth] = useState(0)
   const containerRef = useRef<HTMLDivElement>(null)
   const contentRef = useRef<HTMLDivElement>(null)
 
-  const {
-    config: chatContextConfig,
-  } = useChatContext()
+  const getContainerWidth = () => {
+    if (containerRef.current)
+      setContainerWidth(containerRef.current?.clientWidth + 16)
+  }
+  useEffect(() => {
+    getContainerWidth()
+  }, [])
 
-  const voiceRef = useRef(chatContextConfig?.text_to_speech?.voice)
   const getContentWidth = () => {
     if (contentRef.current)
       setContentWidth(contentRef.current?.clientWidth)
   }
 
-  useEffect(() => {
-    voiceRef.current = chatContextConfig?.text_to_speech?.voice
-  }
-  , [chatContextConfig?.text_to_speech?.voice])
-
   useEffect(() => {
     if (!responding)
       getContentWidth()
@@ -89,36 +86,20 @@ const Answer: FC<AnswerProps> = ({
   return (
     <div className='flex mb-2 last:mb-0'>
       <div className='shrink-0 relative w-10 h-10'>
-        {
-          answerIcon || <AnswerIcon />
-        }
-        {
-          responding && (
-            <div className='absolute -top-[3px] -left-[3px] pl-[6px] flex items-center w-4 h-4 bg-white rounded-full shadow-xs border-[0.5px] border-gray-50'>
-              <LoadingAnim type='avatar' />
-            </div>
-          )
-        }
+        {answerIcon || <AnswerIcon />}
+        {responding && (
+          <div className='absolute -top-[3px] -left-[3px] pl-[6px] flex items-center w-4 h-4 bg-white rounded-full shadow-xs border-[0.5px] border-gray-50'>
+            <LoadingAnim type='avatar' />
+          </div>
+        )}
       </div>
       <div className='chat-answer-container group grow w-0 ml-4' ref={containerRef}>
-        <div className={`group relative pr-10 ${chatAnswerContainerInner}`}>
+        <div className={cn('group relative pr-10', chatAnswerContainerInner)}>
           <AnswerTriangle className='absolute -left-2 top-0 w-2 h-3 text-gray-100' />
           <div
             ref={contentRef}
-            className={`
-              relative inline-block px-4 py-3 max-w-full bg-gray-100 rounded-b-2xl rounded-tr-2xl text-sm text-gray-900
-              ${workflowProcess && 'w-full'}
-            `}
+            className={cn('relative inline-block px-4 py-3 max-w-full bg-gray-100 rounded-b-2xl rounded-tr-2xl text-sm text-gray-900', workflowProcess && 'w-full')}
           >
-            {annotation?.id && (
-              <div
-                className='absolute -top-3.5 -right-3.5 box-border flex items-center justify-center h-7 w-7 p-0.5 rounded-lg bg-white cursor-pointer text-[#444CE7] shadow-md group-hover:hidden'
-              >
-                <div className='p-1 rounded-lg bg-[#EEF4FF] '>
-                  <MessageFast className='w-4 h-4' />
-                </div>
-              </div>
-            )}
             {
               !responding && (
                 <Operation

web/app/components/base/chat/chat/answer/operation.tsx

@@ -149,7 +149,7 @@ const Operation: FC<OperationProps> = ({
           />
         )}
         {
-          !positionRight && annotation?.id && (
+          annotation?.id && (
             <div
               className='relative box-border flex items-center justify-center h-7 w-7 p-0.5 rounded-lg bg-white cursor-pointer text-[#444CE7] shadow-md group-hover:hidden'
             >