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