refactor: streamline chat operation handling and enhance workflow event management

.github/workflows/build-push.yml

@@ -8,6 +8,7 @@ on:
       - "build/**"
       - "release/e-*"
       - "hotfix/**"
+      - "feature/hitl-frontend"
     tags:
       - "*"
 

web/app/components/base/chat/chat/answer/operation.tsx

@@ -304,30 +304,28 @@ const Operation: FC<OperationProps> = ({
             <Log logItem={item} />
           </div>
         )}
-        {!isOpeningStatement && (
+        {!isOpeningStatement && !humanInputFormData && (
           <div className="ml-1 hidden items-center gap-0.5 rounded-[10px] border-[0.5px] border-components-actionbar-border bg-components-actionbar-bg p-0.5 shadow-md backdrop-blur-sm group-hover:flex">
-            {(config?.text_to_speech?.enabled) && !humanInputFormData && (
+            {(config?.text_to_speech?.enabled) && (
               <NewAudioButton
                 id={id}
                 value={content}
                 voice={config?.text_to_speech?.voice}
               />
             )}
-            {!humanInputFormData && (
-              <ActionButton onClick={() => {
-                copy(content)
-                Toast.notify({ type: 'success', message: t('common.actionMsg.copySuccessfully') })
-              }}
-              >
-                <RiClipboardLine className="h-4 w-4" />
-              </ActionButton>
-            )}
-            {!noChatInput && !humanInputFormData && (
+            <ActionButton onClick={() => {
+              copy(content)
+              Toast.notify({ type: 'success', message: t('common.actionMsg.copySuccessfully') })
+            }}
+            >
+              <RiClipboardLine className="h-4 w-4" />
+            </ActionButton>
+            {!noChatInput && (
               <ActionButton onClick={() => onRegenerate?.(item)}>
                 <RiResetLeftLine className="h-4 w-4" />
               </ActionButton>
             )}
-            {(config?.supportAnnotation && config.annotation_reply?.enabled) && !humanInputFormData && (
+            {(config?.supportAnnotation && config.annotation_reply?.enabled) && (
               <AnnotationCtrlButton
                 appId={config?.appId || ''}
                 messageId={id}

web/app/components/workflow-app/hooks/use-workflow-run.ts

@@ -21,7 +21,7 @@ import { useWorkflowUpdate } from '@/app/components/workflow/hooks/use-workflow-
 import { useWorkflowRunEvent } from '@/app/components/workflow/hooks/use-workflow-run-event/use-workflow-run-event'
 import { useWorkflowStore } from '@/app/components/workflow/store'
 import { WorkflowRunningStatus } from '@/app/components/workflow/types'
-import { handleStream, post, ssePost } from '@/service/base'
+import { handleStream, post, sseGet, ssePost } from '@/service/base'
 import { ContentType } from '@/service/fetch'
 import { useInvalidAllLastRun } from '@/service/use-workflow'
 import { stopWorkflowRun } from '@/service/workflow'
@@ -661,137 +661,145 @@ export const useWorkflowRun = () => {
       return
     }
 
+    const finalCallbacks: IOtherOptions = {
+      ...baseSseOptions,
+      getAbortController: (controller: AbortController) => {
+        abortControllerRef.current = controller
+      },
+      onWorkflowFinished: (params) => {
+        handleWorkflowFinished(params)
+
+        if (onWorkflowFinished)
+          onWorkflowFinished(params)
+        if (isInWorkflowDebug) {
+          fetchInspectVars({})
+          invalidAllLastRun()
+        }
+      },
+      onError: (params) => {
+        handleWorkflowFailed()
+
+        if (onError)
+          onError(params)
+      },
+      onNodeStarted: (params) => {
+        handleWorkflowNodeStarted(
+          params,
+          {
+            clientWidth,
+            clientHeight,
+          },
+        )
+
+        if (onNodeStarted)
+          onNodeStarted(params)
+      },
+      onNodeFinished: (params) => {
+        handleWorkflowNodeFinished(params)
+
+        if (onNodeFinished)
+          onNodeFinished(params)
+      },
+      onIterationStart: (params) => {
+        handleWorkflowNodeIterationStarted(
+          params,
+          {
+            clientWidth,
+            clientHeight,
+          },
+        )
+
+        if (onIterationStart)
+          onIterationStart(params)
+      },
+      onIterationNext: (params) => {
+        handleWorkflowNodeIterationNext(params)
+
+        if (onIterationNext)
+          onIterationNext(params)
+      },
+      onIterationFinish: (params) => {
+        handleWorkflowNodeIterationFinished(params)
+
+        if (onIterationFinish)
+          onIterationFinish(params)
+      },
+      onLoopStart: (params) => {
+        handleWorkflowNodeLoopStarted(
+          params,
+          {
+            clientWidth,
+            clientHeight,
+          },
+        )
+
+        if (onLoopStart)
+          onLoopStart(params)
+      },
+      onLoopNext: (params) => {
+        handleWorkflowNodeLoopNext(params)
+
+        if (onLoopNext)
+          onLoopNext(params)
+      },
+      onLoopFinish: (params) => {
+        handleWorkflowNodeLoopFinished(params)
+
+        if (onLoopFinish)
+          onLoopFinish(params)
+      },
+      onNodeRetry: (params) => {
+        handleWorkflowNodeRetry(params)
+
+        if (onNodeRetry)
+          onNodeRetry(params)
+      },
+      onAgentLog: (params) => {
+        handleWorkflowAgentLog(params)
+
+        if (onAgentLog)
+          onAgentLog(params)
+      },
+      onTextChunk: (params) => {
+        handleWorkflowTextChunk(params)
+      },
+      onTextReplace: (params) => {
+        handleWorkflowTextReplace(params)
+      },
+      onTTSChunk: (messageId: string, audio: string) => {
+        if (!audio || audio === '')
+          return
+        player?.playAudioWithAudio(audio, true)
+        AudioPlayerManager.getInstance().resetMsgId(messageId)
+      },
+      onTTSEnd: (messageId: string, audio: string) => {
+        player?.playAudioWithAudio(audio, false)
+      },
+      onWorkflowPaused: (params) => {
+        handleWorkflowPaused()
+        if (onWorkflowPaused)
+          onWorkflowPaused(params)
+        const url = `/workflow/${params.workflow_run_id}/events`
+        sseGet(
+          url,
+          {},
+          finalCallbacks,
+        )
+      },
+      onHumanInputRequired: (params) => {
+        handleWorkflowNodeHumanInputRequired(params)
+        if (onHumanInputRequired)
+          onHumanInputRequired(params)
+      },
+      ...restCallback,
+    }
+
     ssePost(
       url,
       {
         body: requestBody,
       },
-      {
-        ...baseSseOptions,
-        getAbortController: (controller: AbortController) => {
-          abortControllerRef.current = controller
-        },
-        onWorkflowFinished: (params) => {
-          handleWorkflowFinished(params)
-
-          if (onWorkflowFinished)
-            onWorkflowFinished(params)
-          if (isInWorkflowDebug) {
-            fetchInspectVars({})
-            invalidAllLastRun()
-          }
-        },
-        onError: (params) => {
-          handleWorkflowFailed()
-
-          if (onError)
-            onError(params)
-        },
-        onNodeStarted: (params) => {
-          handleWorkflowNodeStarted(
-            params,
-            {
-              clientWidth,
-              clientHeight,
-            },
-          )
-
-          if (onNodeStarted)
-            onNodeStarted(params)
-        },
-        onNodeFinished: (params) => {
-          handleWorkflowNodeFinished(params)
-
-          if (onNodeFinished)
-            onNodeFinished(params)
-        },
-        onIterationStart: (params) => {
-          handleWorkflowNodeIterationStarted(
-            params,
-            {
-              clientWidth,
-              clientHeight,
-            },
-          )
-
-          if (onIterationStart)
-            onIterationStart(params)
-        },
-        onIterationNext: (params) => {
-          handleWorkflowNodeIterationNext(params)
-
-          if (onIterationNext)
-            onIterationNext(params)
-        },
-        onIterationFinish: (params) => {
-          handleWorkflowNodeIterationFinished(params)
-
-          if (onIterationFinish)
-            onIterationFinish(params)
-        },
-        onLoopStart: (params) => {
-          handleWorkflowNodeLoopStarted(
-            params,
-            {
-              clientWidth,
-              clientHeight,
-            },
-          )
-
-          if (onLoopStart)
-            onLoopStart(params)
-        },
-        onLoopNext: (params) => {
-          handleWorkflowNodeLoopNext(params)
-
-          if (onLoopNext)
-            onLoopNext(params)
-        },
-        onLoopFinish: (params) => {
-          handleWorkflowNodeLoopFinished(params)
-
-          if (onLoopFinish)
-            onLoopFinish(params)
-        },
-        onNodeRetry: (params) => {
-          handleWorkflowNodeRetry(params)
-
-          if (onNodeRetry)
-            onNodeRetry(params)
-        },
-        onAgentLog: (params) => {
-          handleWorkflowAgentLog(params)
-
-          if (onAgentLog)
-            onAgentLog(params)
-        },
-        onTextChunk: (params) => {
-          handleWorkflowTextChunk(params)
-        },
-        onTextReplace: (params) => {
-          handleWorkflowTextReplace(params)
-        },
-        onTTSChunk: (messageId: string, audio: string) => {
-          if (!audio || audio === '')
-            return
-          player?.playAudioWithAudio(audio, true)
-          AudioPlayerManager.getInstance().resetMsgId(messageId)
-        },
-        onTTSEnd: (messageId: string, audio: string) => {
-          player?.playAudioWithAudio(audio, false)
-        },
-        onWorkflowPaused: (params) => {
-          handleWorkflowPaused()
-          if (onWorkflowPaused)
-            onWorkflowPaused(params)
-        },
-        onHumanInputRequired: (params) => {
-          handleWorkflowNodeHumanInputRequired(params)
-          if (onHumanInputRequired)
-            onHumanInputRequired(params)
-        },
-        ...restCallback,
-      },
+      finalCallbacks,
     )
   }, [store, doSyncWorkflowDraft, workflowStore, pathname, handleWorkflowFailed, flowId, handleWorkflowStarted, handleWorkflowFinished, fetchInspectVars, invalidAllLastRun, handleWorkflowNodeStarted, handleWorkflowNodeFinished, handleWorkflowNodeIterationStarted, handleWorkflowNodeIterationNext, handleWorkflowNodeIterationFinished, handleWorkflowNodeLoopStarted, handleWorkflowNodeLoopNext, handleWorkflowNodeLoopFinished, handleWorkflowNodeRetry, handleWorkflowAgentLog, handleWorkflowTextChunk, handleWorkflowTextReplace, handleWorkflowPaused, handleWorkflowNodeHumanInputRequired])
 

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

@@ -507,6 +507,10 @@ export const useChat = (
         },
         onHumanInputRequired: ({ data }) => {
           responseItem.humanInputFormData = data
+          const currentTracingIndex = responseItem.workflowProcess!.tracing!.findIndex(item => item.node_id === data.node_id)
+          if (currentTracingIndex > -1) {
+            responseItem.workflowProcess!.tracing[currentTracingIndex].status = NodeRunningStatus.Paused
+          }
           updateCurrentQAOnTree({
             placeholderQuestionId,
             questionItem,
@@ -514,14 +518,8 @@ export const useChat = (
             parentId: params.parent_message_id,
           })
         },
-        onWorkflowPaused: ({ data }) => {
+        onWorkflowPaused: ({ data: _data }) => {
           responseItem.workflowProcess!.status = WorkflowRunningStatus.Paused
-          data.paused_nodes.forEach((nodeId) => {
-            const currentTracingIndex = responseItem.workflowProcess!.tracing!.findIndex(item => item.node_id === nodeId)
-            if (currentTracingIndex > -1) {
-              responseItem.workflowProcess!.tracing[currentTracingIndex].status = NodeRunningStatus.Paused
-            }
-          })
           updateCurrentQAOnTree({
             placeholderQuestionId,
             questionItem,