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/hooks/use-agent-request.ts

@@ -54,6 +54,7 @@ export const enum AgentApiAction {
   SetAgentSetting = 'setAgentSetting',
   FetchPrompt = 'fetchPrompt',
   CancelDataflow = 'cancelDataflow',
+  CancelCanvas = 'cancelCanvas',
 }
 
 export const EmptyDsl = {
@@ -734,3 +735,20 @@ export const useCancelDataflow = () => {
 
 //   return { list: data, loading };
 // };
+
+export function useCancelConversation() {
+  const {
+    data,
+    isPending: loading,
+    mutateAsync,
+  } = useMutation({
+    mutationKey: [AgentApiAction.CancelCanvas],
+    mutationFn: async (taskId: string) => {
+      const ret = await agentService.cancelCanvas(taskId);
+
+      return ret?.data?.code;
+    },
+  });
+
+  return { data, loading, cancelConversation: mutateAsync };
+}

web/src/locales/zh.ts

@@ -674,7 +674,6 @@ General：实体和关系提取提示来自 GitHub - microsoft/graphrag：基于
       chatSetting: '聊天设置',
       avatarHidden: '隐藏头像',
       locale: '地区',
-      tocEnhance: '目录增强',
       tocEnhanceTip: `解析文档时生成了目录信息（见General方法的‘启用目录抽取’），让大模型返回和用户问题相关的目录项，从而利用目录项拿到相关chunk，对这些chunk在排序中进行加权。这种方法来源于模仿人类查询书本中知识的行为逻辑`,
     },
     setting: {

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

web/src/services/agent-service.ts

@@ -29,6 +29,7 @@ const {
   fetchExternalAgentInputs,
   prompt,
   cancelDataflow,
+  cancelCanvas,
 } = api;
 
 const methods = {
@@ -120,6 +121,10 @@ const methods = {
     url: cancelDataflow,
     method: 'put',
   },
+  cancelCanvas: {
+    url: cancelCanvas,
+    method: 'put',
+  },
 } as const;
 
 const agentService = registerNextServer<keyof typeof methods>(methods);

web/src/utils/api.ts

@@ -174,6 +174,7 @@ export default {
   debug: `${api_host}/canvas/debug`,
   uploadCanvasFile: `${api_host}/canvas/upload`,
   trace: `${api_host}/canvas/trace`,
+  cancelCanvas: (taskId: string) => `${api_host}/canvas/cancel/${taskId}`, // cancel conversation
   // agent
   inputForm: `${api_host}/canvas/input_form`,
   fetchVersionList: (id: string) => `${api_host}/canvas/getlistversion/${id}`,