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

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

web/app/components/app/configuration/toolbox/annotation/annotation-ctrl-btn/index.tsx

@@ -73,7 +73,7 @@ const CacheCtrlBtn: FC<Props> = ({
     setShowModal(false)
   }
   return (
-    <div className={cn(className, 'inline-block')}>
+    <div className={cn('inline-block', className)}>
       <div className='inline-flex p-0.5 space-x-0.5 rounded-lg bg-white border border-gray-100 shadow-md text-gray-500 cursor-pointer'>
         {cached
           ? (
@@ -101,7 +101,6 @@ const CacheCtrlBtn: FC<Props> = ({
             ? (
               <Tooltip
                 popupContent={t('appDebug.feature.annotation.add')}
-                needsDelay
               >
                 <div
                   className='p-1 rounded-md hover:bg-[#EEF4FF] hover:text-[#444CE7] cursor-pointer'
@@ -115,7 +114,6 @@ const CacheCtrlBtn: FC<Props> = ({
         }
         <Tooltip
           popupContent={t('appDebug.feature.annotation.edit')}
-          needsDelay
         >
           <div
             className='p-1 cursor-pointer rounded-md hover:bg-black/5'

web/app/components/app/log/list.tsx

@@ -338,7 +338,7 @@ function DetailPanel<T extends ChatConversationFullDetailResponse | CompletionCo
   return (
     <div ref={ref} className='rounded-xl border-[0.5px] border-gray-200 h-full flex flex-col overflow-auto'>
       {/* Panel Header */}
-      <div className='border-b border-gray-100 py-4 px-6 flex items-center justify-between'>
+      <div className='border-b border-gray-100 py-4 px-6 flex items-center justify-between bg-components-panel-bg'>
         <div>
           <div className='text-gray-500 text-[10px] leading-[14px]'>{isChatMode ? t('appLog.detail.conversationId') : t('appLog.detail.time')}</div>
           {isChatMode && (
@@ -725,7 +725,7 @@ const ConversationList: FC<IConversationList> = ({ logs, appDetail, onRefresh })
         onClose={onCloseDrawer}
         mask={isMobile}
         footer={null}
-        panelClassname='mt-16 mx-2 sm:mr-2 mb-4 !p-0 !max-w-[640px] rounded-xl'
+        panelClassname='mt-16 mx-2 sm:mr-2 mb-4 !p-0 !max-w-[640px] rounded-xl bg-background-gradient-bg-fill-chat-bg-1'
       >
         <DrawerContext.Provider value={{
           onClose: onCloseDrawer,

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 {
+  const getContainerWidth = () => {
-    config: chatContextConfig,
+    if (containerRef.current)
-  } = useChatContext()
+      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 />}
-          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' />
-          responding && (
+          </div>
-            <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={`
+            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')}
-              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'
             >