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,
   };
 };