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/pages/chat/chat-container/index.tsx

@@ -40,6 +40,7 @@ const ChatContainer = ({ controller }: IProps) => {
     handlePressEnter,
     regenerateMessage,
     removeMessageById,
+    stopOutputMessage,
   } = useSendNextMessage(controller);
 
   const { visible, hideModal, documentId, selectedChunk, clickDocumentButton } =
@@ -100,6 +101,7 @@ const ChatContainer = ({ controller }: IProps) => {
           createConversationBeforeUploadDocument={
             createConversationBeforeUploadDocument
           }
+          stopOutputMessage={stopOutputMessage}
         ></MessageInput>
       </Flex>
       <PdfDrawer

web/src/pages/chat/hooks.ts

@@ -375,6 +375,10 @@ export const useSendNextMessage = (controller: AbortController) => {
   const { setConversationIsNew, getConversationIsNew } =
     useSetChatRouteParams();
 
+  const stopOutputMessage = useCallback(() => {
+    controller.abort();
+  }, [controller]);
+
   const sendMessage = useCallback(
     async ({
       message,
@@ -490,6 +494,7 @@ export const useSendNextMessage = (controller: AbortController) => {
     ref,
     derivedMessages,
     removeMessageById,
+    stopOutputMessage,
   };
 };
 

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

@@ -37,6 +37,7 @@ const ChatContainer = () => {
     ref,
     derivedMessages,
     hasError,
+    stopOutputMessage,
   } = useSendSharedMessage();
   const sendDisabled = useSendButtonDisabled(value);
 
@@ -105,6 +106,7 @@ const ChatContainer = () => {
           sendLoading={sendLoading}
           uploadMethod="external_upload_and_parse"
           showUploadIcon={false}
+          stopOutputMessage={stopOutputMessage}
         ></MessageInput>
       </Flex>
       {visible && (

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

@@ -49,7 +49,7 @@ export const useSendSharedMessage = () => {
   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 {
@@ -144,5 +144,6 @@ export const useSendSharedMessage = () => {
     loading: false,
     derivedMessages,
     hasError,
+    stopOutputMessage,
   };
 };

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

@@ -24,6 +24,7 @@ const FlowChatBox = () => {
     ref,
     derivedMessages,
     reference,
+    stopOutputMessage,
   } = useSendNextMessage();
 
   const { visible, hideModal, documentId, selectedChunk, clickDocumentButton } =
@@ -75,6 +76,7 @@ const FlowChatBox = () => {
           conversationId=""
           onPressEnter={handlePressEnter}
           onInputChange={handleInputChange}
+          stopOutputMessage={stopOutputMessage}
         />
       </Flex>
       <PdfDrawer

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

@@ -57,7 +57,9 @@ export const useSendNextMessage = () => {
   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[] }) => {
@@ -134,5 +136,6 @@ export const useSendNextMessage = () => {
     derivedMessages,
     ref,
     removeMessageById,
+    stopOutputMessage,
   };
 };

web/src/pages/search/hooks.ts

@@ -17,7 +17,9 @@ import {
 } 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);
@@ -116,6 +118,7 @@ export const useSendQuestion = (kbIds: string[]) => {
     isFirstRender,
     selectedDocumentIds,
     isSearchStrEmpty: isEmpty(trim(searchStr)),
+    stopOutputMessage,
   };
 };
 

web/src/pages/search/index.less

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

web/src/pages/search/index.tsx

@@ -12,6 +12,7 @@ import {
 import { useGetPaginationWithRouter } from '@/hooks/logic-hooks';
 import { IReference } from '@/interfaces/database/chat';
 import {
+  Button,
   Card,
   Divider,
   Flex,
@@ -28,9 +29,11 @@ import {
   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';
@@ -64,6 +67,7 @@ const SearchPage = () => {
     isFirstRender,
     selectedDocumentIds,
     isSearchStrEmpty,
+    stopOutputMessage,
   } = useSendQuestion(checkedWithoutEmbeddingIdList);
   const { visible, hideModal, documentId, selectedChunk, clickDocumentButton } =
     useClickDrawer();
@@ -81,18 +85,35 @@ const SearchPage = () => {
     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,
+      )}
     />
   );