fix: multiple model configuration clear conversation by rerender (#2286)

web/app/components/base/chat/chat/answer/agent-content.tsx

@@ -14,7 +14,10 @@ type AgentContentProps = {
 const AgentContent: FC<AgentContentProps> = ({
   item,
 }) => {
-  const { allToolIcons } = useChatContext()
+  const {
+    allToolIcons,
+    isResponsing,
+  } = useChatContext()
   const {
     annotation,
     agent_thoughts,
@@ -42,7 +45,7 @@ const AgentContent: FC<AgentContentProps> = ({
             <Thought
               thought={thought}
               allToolIcons={allToolIcons || {}}
-              isFinished={!!thought.observation}
+              isFinished={!!thought.observation || !isResponsing}
             />
           )}
 

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

@@ -15,9 +15,13 @@ import { EditTitle } from '@/app/components/app/annotation/edit-annotation-modal
 
 type AnswerProps = {
   item: ChatItem
+  question: string
+  index: number
 }
 const Answer: FC<AnswerProps> = ({
   item,
+  question,
+  index,
 }) => {
   const { t } = useTranslation()
   const {
@@ -56,7 +60,15 @@ const Answer: FC<AnswerProps> = ({
         <div className='relative pr-10'>
           <AnswerTriangle className='absolute -left-2 top-0 w-2 h-3 text-gray-100' />
           <div className='group relative inline-block px-4 py-3 max-w-full bg-gray-100 rounded-b-2xl rounded-tr-2xl text-sm text-gray-900'>
-            <Operation item={item} />
+            {
+              !responsing && (
+                <Operation
+                  item={item}
+                  question={question}
+                  index={index}
+                />
+              )
+            }
             {
               responsing && !content && !hasAgentThoughts && (
                 <div className='flex items-center justify-center w-6 h-5'>
@@ -75,7 +87,7 @@ const Answer: FC<AnswerProps> = ({
               )
             }
             {
-              annotation?.id && !annotation?.logAnnotation && (
+              annotation?.id && annotation.authorName && (
                 <EditTitle
                   className='mt-1'
                   title={t('appAnnotation.editBy', { author: annotation.authorName })}

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

@@ -1,24 +1,39 @@
 import type { FC } from 'react'
+import { useState } from 'react'
 import type { ChatItem } from '../../types'
 import { useCurrentAnswerIsResponsing } from '../hooks'
 import { useChatContext } from '../context'
 import CopyBtn from '@/app/components/app/chat/copy-btn'
 import { MessageFast } from '@/app/components/base/icons/src/vender/solid/communication'
 import AudioBtn from '@/app/components/base/audio-btn'
+import AnnotationCtrlBtn from '@/app/components/app/configuration/toolbox/annotation/annotation-ctrl-btn'
+import EditReplyModal from '@/app/components/app/annotation/edit-annotation-modal'
 
 type OperationProps = {
   item: ChatItem
+  question: string
+  index: number
 }
 const Operation: FC<OperationProps> = ({
   item,
+  question,
+  index,
 }) => {
-  const { config } = useChatContext()
+  const {
+    config,
+    onAnnotationAdded,
+    onAnnotationEdited,
+    onAnnotationRemoved,
+  } = useChatContext()
+  const [isShowReplyModal, setIsShowReplyModal] = useState(false)
   const responsing = useCurrentAnswerIsResponsing(item.id)
   const {
+    id,
     isOpeningStatement,
     content,
     annotation,
   } = item
+  const hasAnnotation = !!annotation?.id
 
   return (
     <div className='absolute top-[-14px] right-[-14px] flex justify-end gap-1'>
@@ -36,6 +51,34 @@ const Operation: FC<OperationProps> = ({
           className='hidden group-hover:block'
         />
       )}
+      {(!isOpeningStatement && config?.supportAnnotation && config.annotation_reply?.enabled) && (
+        <AnnotationCtrlBtn
+          appId={config?.appId || ''}
+          messageId={id}
+          annotationId={annotation?.id || ''}
+          className='hidden group-hover:block ml-1 shrink-0'
+          cached={hasAnnotation}
+          query={question}
+          answer={content}
+          onAdded={(id, authorName) => onAnnotationAdded?.(id, authorName, question, content, index)}
+          onEdit={() => setIsShowReplyModal(true)}
+          onRemoved={() => onAnnotationRemoved?.(index)}
+        />
+      )}
+
+      <EditReplyModal
+        isShow={isShowReplyModal}
+        onHide={() => setIsShowReplyModal(false)}
+        query={question}
+        answer={content}
+        onEdited={(editedQuery, editedAnswer) => onAnnotationEdited?.(editedQuery, editedAnswer, index)}
+        onAdded={(annotationId, authorName, editedQuery, editedAnswer) => onAnnotationAdded?.(annotationId, authorName, editedQuery, editedAnswer, index)}
+        appId={config?.appId || ''}
+        messageId={id}
+        annotationId={annotation?.id || ''}
+        createdAt={annotation?.created_at}
+        onRemove={() => onAnnotationRemoved?.(index)}
+      />
       {
         annotation?.id && (
           <div