stop workflow run

web/app/components/workflow/panel/debug-and-preview/chat-wrapper.tsx

@@ -9,16 +9,11 @@ import { useChat } from './hooks'
 import Chat from '@/app/components/base/chat/chat'
 import type { OnSend } from '@/app/components/base/chat/types'
 import { useFeaturesStore } from '@/app/components/base/features/hooks'
+import { fetchConvesationMessages } from '@/service/debug'
+import { useStore as useAppStore } from '@/app/components/app/store'
+import { stopWorkflowRun } from '@/service/workflow'
 
 const ChatWrapper = () => {
-  const {
-    conversationId,
-    chatList,
-    handleStop,
-    isResponding,
-    suggestedQuestions,
-    handleSend,
-  } = useChat()
   const workflowStore = useWorkflowStore()
   const featuresStore = useFeaturesStore()
   const features = featuresStore!.getState().features
@@ -35,15 +30,41 @@ const ChatWrapper = () => {
     }
   }, [features])
 
+  const {
+    conversationId,
+    chatList,
+    handleStop,
+    isResponding,
+    suggestedQuestions,
+    handleSend,
+  } = useChat(config)
+
   const doSend = useCallback<OnSend>((query, files) => {
-    handleSend({
-      query,
-      files,
-      inputs: workflowStore.getState().inputs,
-      conversationId,
-    })
+    const appId = useAppStore.getState().appDetail?.id
+
+    if (appId) {
+      handleSend(
+        {
+          query,
+          files,
+          inputs: workflowStore.getState().inputs,
+          conversationId,
+        },
+        {
+          onGetSuggestedQuestions: (conversationId, getAbortController) => fetchConvesationMessages(appId, conversationId, getAbortController),
+        },
+      )
+    }
   }, [conversationId, handleSend, workflowStore])
 
+  const doStop = useCallback(() => {
+    const appId = useAppStore.getState().appDetail?.id
+    const taskId = workflowStore.getState().taskId
+
+    handleStop()
+    stopWorkflowRun(`/apps/${appId}/workflow-runs/tasks/${taskId}/stop`)
+  }, [handleStop, workflowStore])
+
   return (
     <Chat
       config={config as any}
@@ -54,7 +75,7 @@ const ChatWrapper = () => {
       chatFooterClassName='px-4 rounded-bl-2xl'
       chatFooterInnerClassName='pb-4'
       onSend={doSend}
-      onStopResponding={handleStop}
+      onStopResponding={doStop}
       chatNode={<UserInput />}
       allToolIcons={{}}
       suggestedQuestions={suggestedQuestions}

web/app/components/workflow/panel/debug-and-preview/hooks.ts

@@ -12,7 +12,12 @@ import { useToastContext } from '@/app/components/base/toast'
 import { TransferMethod } from '@/types/app'
 import type { VisionFile } from '@/types/app'
 
+type GetAbortController = (abortController: AbortController) => void
+type SendCallback = {
+  onGetSuggestedQuestions?: (responseItemId: string, getAbortController: GetAbortController) => Promise<any>
+}
 export const useChat = (
+  config: any,
   prevChatList?: ChatItem[],
 ) => {
   const { t } = useTranslation()
@@ -20,13 +25,11 @@ export const useChat = (
   const { handleRun } = useWorkflowRun()
   const hasStopResponded = useRef(false)
   const connversationId = useRef('')
-  const taskIdRef = useRef('')
   const [chatList, setChatList] = useState<ChatItem[]>(prevChatList || [])
   const chatListRef = useRef<ChatItem[]>(prevChatList || [])
   const [isResponding, setIsResponding] = useState(false)
   const isRespondingRef = useRef(false)
   const [suggestedQuestions, setSuggestQuestions] = useState<string[]>([])
-  const stopAbortControllerRef = useRef<AbortController | null>(null)
   const suggestedQuestionsAbortControllerRef = useRef<AbortController | null>(null)
 
   useEffect(() => {
@@ -49,6 +52,9 @@ export const useChat = (
   const handleStop = useCallback(() => {
     hasStopResponded.current = true
     handleResponding(false)
+
+    if (suggestedQuestionsAbortControllerRef.current)
+      suggestedQuestionsAbortControllerRef.current.abort()
   }, [handleResponding])
 
   const updateCurrentQA = useCallback(({
@@ -73,7 +79,12 @@ export const useChat = (
     handleUpdateChatList(newListWithAnswer)
   }, [handleUpdateChatList])
 
-  const handleSend = useCallback((params: any) => {
+  const handleSend = useCallback((
+    params: any,
+    {
+      onGetSuggestedQuestions,
+    }: SendCallback,
+  ) => {
     if (isRespondingRef.current) {
       notify({ type: 'info', message: t('appDebug.errorMessage.waitForResponse') })
       return false
@@ -129,7 +140,7 @@ export const useChat = (
     handleRun(
       params,
       {
-        onData: (message: string, isFirstMessage: boolean, { conversationId: newConversationId, messageId, taskId }: any) => {
+        onData: (message: string, isFirstMessage: boolean, { conversationId: newConversationId, messageId }: any) => {
           responseItem.content = responseItem.content + message
 
           if (messageId && !hasSetResponseId) {
@@ -140,7 +151,6 @@ export const useChat = (
           if (isFirstMessage && newConversationId)
             connversationId.current = newConversationId
 
-          taskIdRef.current = taskId
           if (messageId)
             responseItem.id = messageId
 
@@ -153,6 +163,17 @@ export const useChat = (
         },
         async onCompleted(hasError?: boolean) {
           handleResponding(false)
+
+          if (hasError)
+            return
+
+          if (config?.suggested_questions_after_answer?.enabled && !hasStopResponded.current && onGetSuggestedQuestions) {
+            const { data }: any = await onGetSuggestedQuestions(
+              responseItem.id,
+              newAbortController => suggestedQuestionsAbortControllerRef.current = newAbortController,
+            )
+            setSuggestQuestions(data)
+          }
         },
         onMessageEnd: (messageEnd) => {
           responseItem.citation = messageEnd.metadata?.retriever_resources || []
@@ -179,7 +200,7 @@ export const useChat = (
         },
       },
     )
-  }, [handleRun, handleResponding, handleUpdateChatList, notify, t, updateCurrentQA])
+  }, [handleRun, handleResponding, handleUpdateChatList, notify, t, updateCurrentQA, config.suggested_questions_after_answer?.enabled])
 
   return {
     conversationId: connversationId.current,

web/service/workflow.ts

@@ -30,3 +30,7 @@ export const singleNodeRun = (appId: string, nodeId: string, params: object) =>
 export const publishWorkflow = (url: string) => {
   return post<CommonResponse>(url)
 }
+
+export const stopWorkflowRun = (url: string) => {
+  return post<CommonResponse>(url)
+}