Feat: Call the interface to stop the output of the large model #10997 (#11164)

### What problem does this PR solve?

Feat: Call the interface to stop the output of the large model #10997

### Type of change


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

web/src/pages/agent/canvas/index.tsx

@@ -45,6 +45,7 @@ import {
   useShowDrawer,
   useShowLogSheet,
 } from '../hooks/use-show-drawer';
+import { useStopMessageUnmount } from '../hooks/use-stop-message';
 import { LogSheet } from '../log-sheet';
 import RunSheet from '../run-sheet';
 import { ButtonEdge } from './edge';
@@ -154,8 +155,11 @@ function AgentCanvas({ drawerVisible, hideDrawer }: IProps) {
     currentEventListWithoutMessageById,
     clearEventList,
     currentMessageId,
+    currentTaskId,
   } = useCacheChatLog();
 
+  const { stopMessage } = useStopMessageUnmount(chatVisible, currentTaskId);
+
   const { showLogSheet, logSheetVisible, hideLogSheet } = useShowLogSheet({
     setCurrentMessageId,
   });
@@ -171,9 +175,11 @@ function AgentCanvas({ drawerVisible, hideDrawer }: IProps) {
 
   useEffect(() => {
     if (!chatVisible) {
+      stopMessage(currentTaskId);
       clearEventList();
     }
-  }, [chatVisible, clearEventList]);
+  }, [chatVisible, clearEventList, currentTaskId, stopMessage]);
+
   const setLastSendLoadingFunc = (loading: boolean, messageId: string) => {
     if (messageId === currentMessageId) {
       setLastSendLoading(loading);

web/src/pages/agent/chat/use-send-agent-message.ts

@@ -35,6 +35,7 @@ import {
   useIsTaskMode,
   useSelectBeginNodeDataInputs,
 } from '../hooks/use-get-begin-query';
+import { useStopMessage } from '../hooks/use-stop-message';
 import { BeginQuery } from '../interface';
 import useGraphStore from '../store';
 import { receiveMessageError } from '../utils';
@@ -243,6 +244,14 @@ export const useSendAgentMessage = ({
     fileList,
   } = useSetUploadResponseData();
 
+  const { stopMessage } = useStopMessage();
+
+  const stopConversation = useCallback(() => {
+    const taskId = answerList.at(0)?.task_id;
+    stopOutputMessage();
+    stopMessage(taskId);
+  }, [answerList, stopMessage, stopOutputMessage]);
+
   const sendMessage = useCallback(
     async ({
       message,
@@ -321,7 +330,7 @@ export const useSendAgentMessage = ({
 
   // reset session
   const resetSession = useCallback(() => {
-    stopOutputMessage();
+    stopConversation();
     resetAnswerList();
     setSessionId(null);
     if (isTaskMode) {
@@ -330,7 +339,7 @@ export const useSendAgentMessage = ({
       removeAllMessagesExceptFirst();
     }
   }, [
-    stopOutputMessage,
+    stopConversation,
     resetAnswerList,
     isTaskMode,
     removeAllMessages,
@@ -432,7 +441,7 @@ export const useSendAgentMessage = ({
     handlePressEnter,
     handleInputChange,
     removeMessageById,
-    stopOutputMessage,
+    stopOutputMessage: stopConversation,
     send,
     sendFormMessage,
     resetSession,

web/src/pages/agent/hooks/use-cache-chat-log.ts

@@ -73,6 +73,10 @@ export function useCacheChatLog() {
     [messageIdPool],
   );
 
+  const currentTaskId = useMemo(() => {
+    return eventList.at(-1)?.task_id;
+  }, [eventList]);
+
   return {
     eventList,
     currentEventListWithoutMessage,
@@ -84,5 +88,6 @@ export function useCacheChatLog() {
     filterEventListByMessageId,
     setCurrentMessageId,
     currentMessageId,
+    currentTaskId,
   };
 }

web/src/pages/agent/hooks/use-stop-message.ts

@@ -0,0 +1,36 @@
+import { useCancelConversation } from '@/hooks/use-agent-request';
+import { useCallback, useEffect } from 'react';
+
+export function useStopMessage() {
+  const { cancelConversation } = useCancelConversation();
+
+  const stopMessage = useCallback(
+    (taskId?: string) => {
+      if (taskId) {
+        cancelConversation(taskId);
+      }
+    },
+    [cancelConversation],
+  );
+
+  return { stopMessage };
+}
+
+export function useStopMessageUnmount(chatVisible: boolean, taskId?: string) {
+  const { stopMessage } = useStopMessage();
+
+  const handleBeforeUnload = useCallback(() => {
+    if (chatVisible) {
+      stopMessage(taskId);
+    }
+  }, [chatVisible, stopMessage, taskId]);
+
+  useEffect(() => {
+    window.addEventListener('beforeunload', handleBeforeUnload);
+    return () => {
+      window.removeEventListener('beforeunload', handleBeforeUnload);
+    };
+  }, [handleBeforeUnload]);
+
+  return { stopMessage };
+}