fix: typing delay (#2200)

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

@@ -43,6 +43,7 @@ const IconWrapper: FC<{ children: React.ReactNode | string }> = ({ children }) =
 }
 export type IAnswerProps = {
   item: IChatItem
+  index: number
   feedbackDisabled: boolean
   isHideFeedbackEdit: boolean
   onQueryChange: (query: string) => void
@@ -59,14 +60,15 @@ export type IAnswerProps = {
   supportAnnotation?: boolean
   appId?: string
   question: string
-  onAnnotationEdited?: (question: string, answer: string) => void
-  onAnnotationAdded?: (annotationId: string, authorName: string, question: string, answer: string) => void
-  onAnnotationRemoved?: () => void
+  onAnnotationEdited?: (question: string, answer: string, index: number) => void
+  onAnnotationAdded?: (annotationId: string, authorName: string, question: string, answer: string, index: number) => void
+  onAnnotationRemoved?: (index: number) => void
   allToolIcons?: Record<string, string | Emoji>
 }
 // The component needs to maintain its own state to control whether to display input component
 const Answer: FC<IAnswerProps> = ({
   item,
+  index,
   onQueryChange,
   feedbackDisabled = false,
   isHideFeedbackEdit = false,
@@ -340,9 +342,9 @@ const Answer: FC<IAnswerProps> = ({
                     cached={hasAnnotation}
                     query={question}
                     answer={content}
-                    onAdded={(id, authorName) => onAnnotationAdded?.(id, authorName, question, content)}
+                    onAdded={(id, authorName) => onAnnotationAdded?.(id, authorName, question, content, index)}
                     onEdit={() => setIsShowReplyModal(true)}
-                    onRemoved={onAnnotationRemoved!}
+                    onRemoved={() => onAnnotationRemoved!(index)}
                   />
                 )}
 
@@ -351,8 +353,8 @@ const Answer: FC<IAnswerProps> = ({
                   onHide={() => setIsShowReplyModal(false)}
                   query={question}
                   answer={content}
-                  onEdited={onAnnotationEdited!}
-                  onAdded={onAnnotationAdded!}
+                  onEdited={(editedQuery, editedAnswer) => onAnnotationEdited!(editedQuery, editedAnswer, index)}
+                  onAdded={(annotationId, authorName, editedQuery, editedAnswer) => onAnnotationAdded!(annotationId, authorName, editedQuery, editedAnswer, index)}
                   appId={appId!}
                   messageId={id}
                   annotationId={annotation?.id || ''}

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

 'use client'
 import type { FC, ReactNode } from 'react'
-import React, { useEffect, useLayoutEffect, useRef, useState } from 'react'
+import React, { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react'
 import Textarea from 'rc-textarea'
 import { useContext } from 'use-context-selector'
 import cn from 'classnames'
@@ -197,38 +197,11 @@ const Chat: FC<IChatProps> = ({
       logError(t('common.voiceInput.notAllow'))
     })
   }
-
-  return (
-    <div className={cn('px-3.5', 'h-full')}>
-      {isShowConfigElem && (configElem || null)}
-      {/* Chat List */}
-      <div className={cn((isShowConfigElem && configElem) ? 'h-0' : 'h-full', 'space-y-[30px]')}>
-        {chatList.map((item, index) => {
-          if (item.isAnswer) {
-            const isLast = item.id === chatList[chatList.length - 1].id
-            const citation = item.citation
-            return <Answer
-              key={item.id}
-              item={item}
-              onQueryChange={(val) => {
+  const handleQueryChangeFromAnswer = useCallback((val: string) => {
     onQueryChange(val)
     handleSend(val)
-              }}
-              feedbackDisabled={feedbackDisabled}
-              isHideFeedbackEdit={isHideFeedbackEdit}
-              onFeedback={onFeedback}
-              displayScene={displayScene ?? 'web'}
-              isResponsing={isResponsing && isLast}
-              answerIcon={answerIcon}
-              citation={citation}
-              dataSets={dataSets}
-              isShowCitation={isShowCitation}
-              isShowCitationHitInfo={isShowCitationHitInfo}
-              isShowTextToSpeech={isShowTextToSpeech}
-              supportAnnotation={supportAnnotation}
-              appId={appId}
-              question={chatList[index - 1]?.content}
-              onAnnotationEdited={(query, answer) => {
+  }, [])
+  const handleAnnotationEdited = useCallback((query: string, answer: string, index: number) => {
     onChatListChange?.(chatList.map((item, i) => {
       if (i === index - 1) {
         return {
@@ -248,8 +221,8 @@ const Chat: FC<IChatProps> = ({
       }
       return item
     }))
-              }}
-              onAnnotationAdded={(annotationId, authorName, query, answer) => {
+  }, [])
+  const handleAnnotationAdded = useCallback((annotationId: string, authorName: string, query: string, answer: string, index: number) => {
     onChatListChange?.(chatList.map((item, i) => {
       if (i === index - 1) {
         return {
@@ -278,8 +251,8 @@ const Chat: FC<IChatProps> = ({
       }
       return item
     }))
-              }}
-              onAnnotationRemoved={() => {
+  }, [])
+  const handleAnnotationRemoved = useCallback((index: number) => {
     onChatListChange?.(chatList.map((item, i) => {
       if (i === index) {
         return {
@@ -293,7 +266,39 @@ const Chat: FC<IChatProps> = ({
       }
       return item
     }))
-              }}
+  }, [])
+
+  return (
+    <div className={cn('px-3.5', 'h-full')}>
+      {isShowConfigElem && (configElem || null)}
+      {/* Chat List */}
+      <div className={cn((isShowConfigElem && configElem) ? 'h-0' : 'h-full', 'space-y-[30px]')}>
+        {chatList.map((item, index) => {
+          if (item.isAnswer) {
+            const isLast = item.id === chatList[chatList.length - 1].id
+            const citation = item.citation
+            return <Answer
+              key={item.id}
+              item={item}
+              index={index}
+              onQueryChange={handleQueryChangeFromAnswer}
+              feedbackDisabled={feedbackDisabled}
+              isHideFeedbackEdit={isHideFeedbackEdit}
+              onFeedback={onFeedback}
+              displayScene={displayScene ?? 'web'}
+              isResponsing={isResponsing && isLast}
+              answerIcon={answerIcon}
+              citation={citation}
+              dataSets={dataSets}
+              isShowCitation={isShowCitation}
+              isShowCitationHitInfo={isShowCitationHitInfo}
+              isShowTextToSpeech={isShowTextToSpeech}
+              supportAnnotation={supportAnnotation}
+              appId={appId}
+              question={chatList[index - 1]?.content}
+              onAnnotationEdited={handleAnnotationEdited}
+              onAnnotationAdded={handleAnnotationAdded}
+              onAnnotationRemoved={handleAnnotationRemoved}
               allToolIcons={allToolIcons}
             />
           }
@@ -307,8 +312,6 @@ const Chat: FC<IChatProps> = ({
               item={item}
               isShowPromptLog={isShowPromptLog}
               isResponsing={isResponsing}
-              // ['https://placekitten.com/360/360', 'https://placekitten.com/360/640']
-              imgSrcs={(item.message_files && item.message_files?.length > 0) ? item.message_files.map(item => item.url) : []}
             />
           )
         })}

web/app/components/app/chat/question/index.tsx

@@ -13,14 +13,14 @@ import ImageGallery from '@/app/components/base/image-gallery'
 type IQuestionProps = Pick<IChatItem, 'id' | 'content' | 'more' | 'useCurrentUserAvatar'> & {
   isShowPromptLog?: boolean
   item: IChatItem
-  imgSrcs?: string[]
   isResponsing?: boolean
 }
 
-const Question: FC<IQuestionProps> = ({ id, content, imgSrcs, more, useCurrentUserAvatar, isShowPromptLog, item, isResponsing }) => {
+const Question: FC<IQuestionProps> = ({ id, content, more, useCurrentUserAvatar, isShowPromptLog, item, isResponsing }) => {
   const { userProfile } = useContext(AppContext)
   const userName = userProfile?.name
   const ref = useRef(null)
+  const imgSrcs = item.message_files?.map(item => item.url)
 
   return (
     <div className={`flex items-start justify-end ${isShowPromptLog && 'first-of-type:pt-[14px]'}`} key={id} ref={ref}>

web/app/components/share/chat/hooks/use-conversation.ts

-import { useState } from 'react'
+import { useCallback, useState } from 'react'
 import produce from 'immer'
 import { useGetState } from 'ahooks'
 import type { ConversationItem } from '@/models/share'
@@ -11,7 +11,7 @@ function useConversation() {
   const [pinnedConversationList, setPinnedConversationList] = useState<ConversationItem[]>([])
   const [currConversationId, doSetCurrConversationId, getCurrConversationId] = useGetState<string>('-1')
   // when set conversation id, we do not have set appId
-  const setCurrConversationId = (id: string, appId: string, isSetToLocalStroge = true, newConversationName = '') => {
+  const setCurrConversationId = useCallback((id: string, appId: string, isSetToLocalStroge = true, newConversationName = '') => {
     doSetCurrConversationId(id)
     if (isSetToLocalStroge && id !== '-1') {
       // conversationIdInfo: {[appId1]: conversationId1, [appId2]: conversationId2}
@@ -19,7 +19,7 @@ function useConversation() {
       conversationIdInfo[appId] = id
       globalThis.localStorage?.setItem(storageConversationIdKey, JSON.stringify(conversationIdInfo))
     }
-  }
+  }, [doSetCurrConversationId])
 
   const getConversationIdFromStorage = (appId: string) => {
     const conversationIdInfo = globalThis.localStorage?.getItem(storageConversationIdKey) ? JSON.parse(globalThis.localStorage?.getItem(storageConversationIdKey) || '') : {}

web/app/components/share/chat/sidebar/index.tsx

-import React, { useEffect, useState } from 'react'
+import React, { useCallback, useEffect, useState } from 'react'
 import type { FC } from 'react'
 import { useTranslation } from 'react-i18next'
 import {
@@ -76,6 +76,13 @@ const Sidebar: FC<ISidebarProps> = ({
       checkHasPinned()
   }, [controlUpdateList])
 
+  const handleUnpin = useCallback((id: string) => {
+    onUnpin(id)
+  }, [onUnpin])
+  const handlePin = useCallback((id: string) => {
+    onPin(id)
+  }, [onPin])
+
   const maxListHeight = (isInstalledApp) ? 'max-h-[30vh]' : 'max-h-[40vh]'
 
   return (
@@ -119,7 +126,7 @@ const Sidebar: FC<ISidebarProps> = ({
               onMoreLoaded={onPinnedMoreLoaded}
               isNoMore={isPinnedNoMore}
               isPinned={true}
-              onPinChanged={id => onUnpin(id)}
+              onPinChanged={handleUnpin}
               controlUpdate={controlUpdateList + 1}
               onDelete={onDelete}
             />
@@ -142,7 +149,7 @@ const Sidebar: FC<ISidebarProps> = ({
             onMoreLoaded={onMoreLoaded}
             isNoMore={isNoMore}
             isPinned={false}
-            onPinChanged={id => onPin(id)}
+            onPinChanged={handlePin}
             controlUpdate={controlUpdateList + 1}
             onDelete={onDelete}
           />