fix: webapp stop chat & citation (#2376)

web/app/components/app/chat/citation/popup.tsx

@@ -32,7 +32,7 @@ const Popup: FC<PopupProps> = ({
 }) => {
   const { t } = useTranslation()
   const [open, setOpen] = useState(false)
-  const fileType = data.dataSourceType === 'upload_file'
+  const fileType = data.dataSourceType !== 'notion'
     ? (/\.([^.]*)$/g.exec(data.documentName)?.[1] || '')
     : 'notion'
 
@@ -65,22 +65,24 @@ const Popup: FC<PopupProps> = ({
               data.sources.map((source, index) => (
                 <Fragment key={index}>
                   <div className='group py-3'>
-                    {
+                    <div className='flex items-center justify-between mb-2'>
-                      showHitInfo && (
+                      <div className='flex items-center px-1.5 h-5 border border-gray-200 rounded-md'>
-                        <div className='flex items-center justify-between mb-2'>
+                        <Hash02 className='mr-0.5 w-3 h-3 text-gray-400' />
-                          <div className='flex items-center px-1.5 h-5 border border-gray-200 rounded-md'>
+                        <div className='text-[11px] font-medium text-gray-500'>
-                            <Hash02 className='mr-0.5 w-3 h-3 text-gray-400' />
+                          {source.segment_position || index + 1}
-                            <div className='text-[11px] font-medium text-gray-500'>{source.segment_position}</div>
+                        </div>
-                          </div>
+                      </div>
+                      {
+                        showHitInfo && (
                           <Link
                             href={`/datasets/${source.dataset_id}/documents/${source.document_id}`}
                             className='hidden items-center h-[18px] text-xs text-primary-600 group-hover:flex'>
                             {t('common.chat.citation.linkToDataset')}
                             <ArrowUpRight className='ml-1 w-3 h-3' />
                           </Link>
-                        </div>
+                        )
-                      )
+                      }
-                    }
+                    </div>
                     <div className='text-[13px] text-gray-800'>{source.content}</div>
                     {
                       showHitInfo && (

web/app/components/app/configuration/debug/debug-with-single-model/index.tsx

@@ -54,11 +54,7 @@ const DebugWithSingleModel = forwardRef<DebugWithSingleModelRefType, DebugWithSi
     handleAnnotationEdited,
     handleAnnotationRemoved,
   } = useChat(
-    {
+    config,
-      ...config,
-      supportAnnotation: true,
-      appId,
-    },
     {
       inputs,
       promptVariables: modelConfig.configs.prompt_variables,

web/app/components/app/configuration/debug/hooks.tsx

@@ -126,6 +126,7 @@ export const useConfigFromDebugContext = () => {
 
     supportAnnotation: true,
     appId,
+    supportCitationHitInfo: true,
   }
 
   return config

web/app/components/base/chat/chat-with-history/chat-wrapper.tsx

@@ -11,6 +11,7 @@ import ConfigPanel from './config-panel'
 import {
   fetchSuggestedQuestions,
   getUrl,
+  stopChatMessageResponding,
 } from '@/service/share'
 
 const ChatWrapper = () => {
@@ -47,6 +48,7 @@ const ChatWrapper = () => {
     appConfig,
     undefined,
     appPrevChatList,
+    taskId => stopChatMessageResponding('', taskId, isInstalledApp, appId),
   )
 
   useEffect(() => {

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

@@ -97,7 +97,7 @@ const Answer: FC<AnswerProps> = ({
             <SuggestedQuestions item={item} />
             {
               !!citation?.length && config?.retriever_resource?.enabled && !responsing && (
-                <Citation data={citation} showHitInfo />
+                <Citation data={citation} showHitInfo={config.supportCitationHitInfo} />
               )
             }
           </div>

web/app/components/base/chat/chat/hooks.ts

@@ -87,7 +87,6 @@ export const useChat = (
   const chatListRef = useRef<ChatItem[]>(prevChatList || [])
   const taskIdRef = useRef('')
   const [suggestedQuestions, setSuggestQuestions] = useState<string[]>([])
-  const abortControllerRef = useRef<AbortController | null>(null)
   const conversationMessagesAbortControllerRef = useRef<AbortController | null>(null)
   const suggestedQuestionsAbortControllerRef = useRef<AbortController | null>(null)
   const checkPromptVariables = useCheckPromptVariables()
@@ -131,8 +130,6 @@ export const useChat = (
     handleResponsing(false)
     if (stopChat && taskIdRef.current)
       stopChat(taskIdRef.current)
-    if (abortControllerRef.current)
-      abortControllerRef.current.abort()
     if (conversationMessagesAbortControllerRef.current)
       conversationMessagesAbortControllerRef.current.abort()
     if (suggestedQuestionsAbortControllerRef.current)
@@ -192,6 +189,8 @@ export const useChat = (
     }: SendCallback,
   ) => {
     setSuggestQuestions([])
+    if (!data.query || !data.query.trim())
+      return
     if (isResponsingRef.current) {
       notify({ type: 'info', message: t('appDebug.errorMessage.waitForResponse') })
       return false
@@ -257,9 +256,6 @@ export const useChat = (
       },
       {
         isPublicAPI,
-        getAbortController: (abortController) => {
-          abortControllerRef.current = abortController
-        },
         onData: (message: string, isFirstMessage: boolean, { conversationId: newConversationId, messageId, taskId }: any) => {
           if (!isAgentMode) {
             responseItem.content = responseItem.content + message

web/app/components/base/chat/types.ts

@@ -45,6 +45,7 @@ export type ChatConfig = Omit<ModelConfig, 'model'> & {
   supportAnnotation?: boolean
   appId?: string
   supportFeedback?: boolean
+  supportCitationHitInfo?: boolean
 }
 
 export type ChatItem = IChatItem