Feat: Interrupt streaming #6515 (#6723)

### What problem does this PR solve?

Feat: Interrupt streaming #6515
### Type of change


- [x] New Feature (non-breaking change which adds functionality)

web/src/components/message-input/index.tsx

   UploadProps,
 } from 'antd';
 import get from 'lodash/get';
+import { CircleStop } from 'lucide-react';
 import {
   ChangeEventHandler,
   memo,
   isShared?: boolean;
   showUploadIcon?: boolean;
   createConversationBeforeUploadDocument?(message: string): Promise<any>;
+  stopOutputMessage?(): void;
 }
 
 const getBase64 = (file: FileType): Promise<string> =>
   showUploadIcon = true,
   createConversationBeforeUploadDocument,
   uploadMethod = 'upload_and_parse',
+  stopOutputMessage,
 }: IProps) => {
   const { t } = useTranslate('chat');
   const { removeDocument } = useRemoveNextDocument();
       event.preventDefault();
       handlePressEnter();
     },
-    [fileList, onPressEnter, isUploadingFile],
+    [sendDisabled, isUploadingFile, sendLoading, handlePressEnter],
   );
 
   const handlePressEnter = useCallback(async () => {
     [removeDocument, deleteDocument, isShared],
   );
 
+  const handleStopOutputMessage = useCallback(() => {
+    stopOutputMessage?.();
+  }, [stopOutputMessage]);
+
   const getDocumentInfoById = useCallback(
     (id: string) => {
       return documentInfos.find((x) => x.id === id);
               </Button>
             </Upload>
           )}
-          <Button
-            type="primary"
-            onClick={handlePressEnter}
-            loading={sendLoading}
-            disabled={sendDisabled || isUploadingFile || sendLoading}
-          >
-            <SendOutlined />
-          </Button>
+          {sendLoading ? (
+            <Button onClick={handleStopOutputMessage}>
+              <CircleStop />
+            </Button>
+          ) : (
+            <Button
+              type="primary"
+              onClick={handlePressEnter}
+              loading={sendLoading}
+              disabled={sendDisabled || isUploadingFile || sendLoading}
+            >
+              <SendOutlined />
+            </Button>
+          )}
         </Flex>
       </Flex>
     </Flex>

web/src/hooks/logic-hooks.ts

   const [answer, setAnswer] = useState<IAnswer>({} as IAnswer);
   const [done, setDone] = useState(true);
   const timer = useRef<any>();
+  const sseRef = useRef<AbortController>();
+
+  const initializeSseRef = useCallback(() => {
+    sseRef.current = new AbortController();
+  }, []);
 
   const resetAnswer = useCallback(() => {
     if (timer.current) {
       body: any,
       controller?: AbortController,
     ): Promise<{ response: Response; data: ResponseType } | undefined> => {
+      initializeSseRef();
       try {
         setDone(false);
         const response = await fetch(url, {
             'Content-Type': 'application/json',
           },
           body: JSON.stringify(body),
-          signal: controller?.signal,
+          signal: controller?.signal || sseRef.current?.signal,
         });
 
         const res = response.clone().json();
         console.warn(e);
       }
     },
-    [url, resetAnswer],
+    [initializeSseRef, url, resetAnswer],
   );
 
-  return { send, answer, done, setDone, resetAnswer };
+  const stopOutputMessage = useCallback(() => {
+    sseRef.current?.abort();
+  }, []);
+
+  return { send, answer, done, setDone, resetAnswer, stopOutputMessage };
 };
 
 export const useSpeechWithSse = (url: string = api.tts) => {

web/src/pages/chat/chat-container/index.tsx

     handlePressEnter,
     regenerateMessage,
     removeMessageById,
+    stopOutputMessage,
   } = useSendNextMessage(controller);
 
   const { visible, hideModal, documentId, selectedChunk, clickDocumentButton } =
           createConversationBeforeUploadDocument={
             createConversationBeforeUploadDocument
           }
+          stopOutputMessage={stopOutputMessage}
         ></MessageInput>
       </Flex>
       <PdfDrawer

web/src/pages/chat/hooks.ts

   const { setConversationIsNew, getConversationIsNew } =
     useSetChatRouteParams();
 
+  const stopOutputMessage = useCallback(() => {
+    controller.abort();
+  }, [controller]);
+
   const sendMessage = useCallback(
     async ({
       message,
     ref,
     derivedMessages,
     removeMessageById,
+    stopOutputMessage,
   };
 };
 

web/src/pages/chat/share/large.tsx

     ref,
     derivedMessages,
     hasError,
+    stopOutputMessage,
   } = useSendSharedMessage();
   const sendDisabled = useSendButtonDisabled(value);
 
           sendLoading={sendLoading}
           uploadMethod="external_upload_and_parse"
           showUploadIcon={false}
+          stopOutputMessage={stopOutputMessage}
         ></MessageInput>
       </Flex>
       {visible && (

web/src/pages/chat/shared-hooks.ts

   const { createSharedConversation: setConversation } =
     useCreateNextSharedConversation();
   const { handleInputChange, value, setValue } = useHandleMessageInputChange();
-  const { send, answer, done } = useSendMessageWithSse(
+  const { send, answer, done, stopOutputMessage } = useSendMessageWithSse(
     `/api/v1/${from === SharedFrom.Agent ? 'agentbots' : 'chatbots'}/${conversationId}/completions`,
   );
   const {
     loading: false,
     derivedMessages,
     hasError,
+    stopOutputMessage,
   };
 };

web/src/pages/flow/chat/box.tsx

     ref,
     derivedMessages,
     reference,
+    stopOutputMessage,
   } = useSendNextMessage();
 
   const { visible, hideModal, documentId, selectedChunk, clickDocumentButton } =
           conversationId=""
           onPressEnter={handlePressEnter}
           onInputChange={handleInputChange}
+          stopOutputMessage={stopOutputMessage}
         />
       </Flex>
       <PdfDrawer

web/src/pages/flow/chat/hooks.ts

   const { handleInputChange, value, setValue } = useHandleMessageInputChange();
   const { refetch } = useFetchFlow();
 
-  const { send, answer, done } = useSendMessageWithSse(api.runCanvas);
+  const { send, answer, done, stopOutputMessage } = useSendMessageWithSse(
+    api.runCanvas,
+  );
 
   const sendMessage = useCallback(
     async ({ message }: { message: Message; messages?: Message[] }) => {
     derivedMessages,
     ref,
     removeMessageById,
+    stopOutputMessage,
   };
 };

web/src/pages/search/hooks.ts

 } from 'react';
 
 export const useSendQuestion = (kbIds: string[]) => {
-  const { send, answer, done } = useSendMessageWithSse(api.ask);
+  const { send, answer, done, stopOutputMessage } = useSendMessageWithSse(
+    api.ask,
+  );
   const { testChunk, loading } = useTestChunkRetrieval();
   const [sendingLoading, setSendingLoading] = useState(false);
   const [currentAnswer, setCurrentAnswer] = useState({} as IAnswer);
     isFirstRender,
     selectedDocumentIds,
     isSearchStrEmpty: isEmpty(trim(searchStr)),
+    stopOutputMessage,
   };
 };
 

web/src/pages/search/index.less

   .input();
 }
 
+.searchInput {
+  :global(.ant-input-search-button) {
+    display: none;
+  }
+}
+
 .appIcon {
   display: inline-block;
   vertical-align: middle;

web/src/pages/search/index.tsx

 import { useGetPaginationWithRouter } from '@/hooks/logic-hooks';
 import { IReference } from '@/interfaces/database/chat';
 import {
+  Button,
   Card,
   Divider,
   Flex,
   Tag,
   Tooltip,
 } from 'antd';
+import classNames from 'classnames';
 import DOMPurify from 'dompurify';
 import { isEmpty } from 'lodash';
-import { useMemo, useState } from 'react';
+import { CircleStop, SendHorizontal } from 'lucide-react';
+import { useCallback, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import MarkdownContent from '../chat/markdown-content';
 import { useSendQuestion, useShowMindMapDrawer } from './hooks';
     isFirstRender,
     selectedDocumentIds,
     isSearchStrEmpty,
+    stopOutputMessage,
   } = useSendQuestion(checkedWithoutEmbeddingIdList);
   const { visible, hideModal, documentId, selectedChunk, clickDocumentButton } =
     useClickDrawer();
     handleTestChunk(selectedDocumentIds, pageNumber, pageSize);
   };
 
+  const handleSearch = useCallback(() => {
+    sendQuestion(searchStr);
+  }, [searchStr, sendQuestion]);
+
   const InputSearch = (
     <Search
       value={searchStr}
       onChange={handleSearchStrChange}
       placeholder={t('header.search')}
       allowClear
-      enterButton
+      addonAfter={
+        sendingLoading ? (
+          <Button onClick={stopOutputMessage}>
+            <CircleStop />
+          </Button>
+        ) : (
+          <Button onClick={handleSearch}>
+            <SendHorizontal className="size-5 text-blue-500" />
+          </Button>
+        )
+      }
       onSearch={sendQuestion}
       size="large"
       loading={sendingLoading}
       disabled={checkedWithoutEmbeddingIdList.length === 0}
-      className={isFirstRender ? styles.globalInput : styles.partialInput}
+      className={classNames(
+        styles.searchInput,
+        isFirstRender ? styles.globalInput : styles.partialInput,
+      )}
     />
   );