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);