fix: chat agent mode content copy (#2418)

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

@@ -1,23 +1,24 @@
 import type { FC } from 'react'
+import { memo } from 'react'
 import type {
   ChatItem,
   VisionFile,
 } from '../../types'
-import { useChatContext } from '../context'
 import { Markdown } from '@/app/components/base/markdown'
 import Thought from '@/app/components/app/chat/thought'
 import ImageGallery from '@/app/components/base/image-gallery'
+import type { Emoji } from '@/app/components/tools/types'
 
 type AgentContentProps = {
   item: ChatItem
+  responsing?: boolean
+  allToolIcons?: Record<string, string | Emoji>
 }
 const AgentContent: FC<AgentContentProps> = ({
   item,
+  responsing,
+  allToolIcons,
 }) => {
-  const {
-    allToolIcons,
-    isResponsing,
-  } = useChatContext()
   const {
     annotation,
     agent_thoughts,
@@ -45,7 +46,7 @@ const AgentContent: FC<AgentContentProps> = ({
             <Thought
               thought={thought}
               allToolIcons={allToolIcons || {}}
-              isFinished={!!thought.observation || !isResponsing}
+              isFinished={!!thought.observation || !responsing}
             />
           )}
 
@@ -58,4 +59,4 @@ const AgentContent: FC<AgentContentProps> = ({
   )
 }
 
-export default AgentContent
+export default memo(AgentContent)

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

@@ -1,4 +1,5 @@
 import type { FC } from 'react'
+import { memo } from 'react'
 import type { ChatItem } from '../../types'
 import { Markdown } from '@/app/components/base/markdown'
 
@@ -19,4 +20,4 @@ const BasicContent: FC<BasicContentProps> = ({
   return <Markdown content={content} />
 }
 
-export default BasicContent
+export default memo(BasicContent)

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

@@ -1,8 +1,13 @@
-import type { FC } from 'react'
+import type {
+  FC,
+  ReactNode,
+} from 'react'
+import { memo } from 'react'
 import { useTranslation } from 'react-i18next'
-import type { ChatItem } from '../../types'
-import { useChatContext } from '../context'
-import { useCurrentAnswerIsResponsing } from '../hooks'
+import type {
+  ChatConfig,
+  ChatItem,
+} from '../../types'
 import Operation from './operation'
 import AgentContent from './agent-content'
 import BasicContent from './basic-content'
@@ -12,23 +17,27 @@ import { AnswerTriangle } from '@/app/components/base/icons/src/vender/solid/gen
 import LoadingAnim from '@/app/components/app/chat/loading-anim'
 import Citation from '@/app/components/app/chat/citation'
 import { EditTitle } from '@/app/components/app/annotation/edit-annotation-modal/edit-item'
+import type { Emoji } from '@/app/components/tools/types'
 
 type AnswerProps = {
   item: ChatItem
   question: string
   index: number
+  config?: ChatConfig
+  answerIcon?: ReactNode
+  responsing?: boolean
+  allToolIcons?: Record<string, string | Emoji>
 }
 const Answer: FC<AnswerProps> = ({
   item,
   question,
   index,
+  config,
+  answerIcon,
+  responsing,
+  allToolIcons,
 }) => {
   const { t } = useTranslation()
-  const {
-    config,
-    answerIcon,
-  } = useChatContext()
-  const responsing = useCurrentAnswerIsResponsing(item.id)
   const {
     content,
     citation,
@@ -83,7 +92,11 @@ const Answer: FC<AnswerProps> = ({
             }
             {
               hasAgentThoughts && (
-                <AgentContent item={item} />
+                <AgentContent
+                  item={item}
+                  responsing={responsing}
+                  allToolIcons={allToolIcons}
+                />
               )
             }
             {
@@ -108,4 +121,4 @@ const Answer: FC<AnswerProps> = ({
   )
 }
 
-export default Answer
+export default memo(Answer)

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

@@ -1,4 +1,5 @@
 import type { FC } from 'react'
+import { memo } from 'react'
 import { useTranslation } from 'react-i18next'
 import type { ChatItem } from '../../types'
 import { formatNumber } from '@/utils/format'
@@ -42,4 +43,4 @@ const More: FC<MoreProps> = ({
   )
 }
 
-export default More
+export default memo(More)

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

@@ -1,8 +1,11 @@
 import type { FC } from 'react'
-import { useState } from 'react'
+import {
+  memo,
+  useMemo,
+  useState,
+} from 'react'
 import { useTranslation } from 'react-i18next'
 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'
@@ -34,17 +37,24 @@ const Operation: FC<OperationProps> = ({
     onFeedback,
   } = useChatContext()
   const [isShowReplyModal, setIsShowReplyModal] = useState(false)
-  const responsing = useCurrentAnswerIsResponsing(item.id)
   const {
     id,
     isOpeningStatement,
-    content,
+    content: messageContent,
     annotation,
     feedback,
+    agent_thoughts,
   } = item
   const hasAnnotation = !!annotation?.id
   const [localFeedback, setLocalFeedback] = useState(feedback)
 
+  const content = useMemo(() => {
+    if (agent_thoughts?.length)
+      return agent_thoughts.reduce((acc, cur) => acc + cur.thought, '')
+
+    return messageContent
+  }, [agent_thoughts, messageContent])
+
   const handleFeedback = async (rating: 'like' | 'dislike' | null) => {
     if (!config?.supportFeedback || !onFeedback)
       return
@@ -56,7 +66,7 @@ const Operation: FC<OperationProps> = ({
   return (
     <div className='absolute top-[-14px] right-[-14px] flex justify-end gap-1'>
       {
-        !isOpeningStatement && !responsing && (
+        !isOpeningStatement && (
           <CopyBtn
             value={content}
             className='hidden group-hover:block'
@@ -159,4 +169,4 @@ const Operation: FC<OperationProps> = ({
   )
 }
 
-export default Operation
+export default memo(Operation)

web/app/components/base/chat/chat/answer/suggested-questions.tsx

@@ -1,4 +1,5 @@
 import type { FC } from 'react'
+import { memo } from 'react'
 import type { ChatItem } from '../../types'
 import { useChatContext } from '../context'
 
@@ -32,4 +33,4 @@ const SuggestedQuestions: FC<SuggestedQuestionsProps> = ({
   )
 }
 
-export default SuggestedQuestions
+export default memo(SuggestedQuestions)