feat: last run frontend (#21369)

The frontend of feat: Persist Variables for Enhanced Debugging Workflow (#20699).

Co-authored-by: jZonG <jzongcode@gmail.com>

web/app/components/workflow-app/hooks/use-fetch-workflow-inspect-vars.ts

@@ -0,0 +1,68 @@
+import type { NodeWithVar, VarInInspect } from '@/types/workflow'
+import { useWorkflowStore } from '../../workflow/store'
+import { useStoreApi } from 'reactflow'
+import type { Node } from '@/app/components/workflow/types'
+import { fetchAllInspectVars } from '@/service/workflow'
+import { useInvalidateConversationVarValues, useInvalidateSysVarValues } from '@/service/use-workflow'
+import { useNodesInteractionsWithoutSync } from '../../workflow/hooks/use-nodes-interactions-without-sync'
+const useSetWorkflowVarsWithValue = () => {
+  const workflowStore = useWorkflowStore()
+  const { setNodesWithInspectVars, appId } = workflowStore.getState()
+  const store = useStoreApi()
+  const invalidateConversationVarValues = useInvalidateConversationVarValues(appId)
+  const invalidateSysVarValues = useInvalidateSysVarValues(appId)
+  const { handleCancelAllNodeSuccessStatus } = useNodesInteractionsWithoutSync()
+
+  const setInspectVarsToStore = (inspectVars: VarInInspect[]) => {
+    const { getNodes } = store.getState()
+    const nodeArr = getNodes()
+    const nodesKeyValue: Record<string, Node> = {}
+    nodeArr.forEach((node) => {
+      nodesKeyValue[node.id] = node
+    })
+
+    const withValueNodeIds: Record<string, boolean> = {}
+    inspectVars.forEach((varItem) => {
+      const nodeId = varItem.selector[0]
+
+      const node = nodesKeyValue[nodeId]
+      if (!node)
+        return
+      withValueNodeIds[nodeId] = true
+    })
+    const withValueNodes = Object.keys(withValueNodeIds).map((nodeId) => {
+      return nodesKeyValue[nodeId]
+    })
+
+    const res: NodeWithVar[] = withValueNodes.map((node) => {
+      const nodeId = node.id
+      const varsUnderTheNode = inspectVars.filter((varItem) => {
+        return varItem.selector[0] === nodeId
+      })
+      const nodeWithVar = {
+        nodeId,
+        nodePayload: node.data,
+        nodeType: node.data.type,
+        title: node.data.title,
+        vars: varsUnderTheNode,
+        isSingRunRunning: false,
+        isValueFetched: false,
+      }
+      return nodeWithVar
+    })
+    setNodesWithInspectVars(res)
+  }
+
+  const fetchInspectVars = async () => {
+    invalidateConversationVarValues()
+    invalidateSysVarValues()
+    const data = await fetchAllInspectVars(appId)
+    setInspectVarsToStore(data)
+    handleCancelAllNodeSuccessStatus() // to make sure clear node output show the unset status
+  }
+  return {
+    fetchInspectVars,
+  }
+}
+
+export default useSetWorkflowVarsWithValue

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

@@ -17,7 +17,6 @@ import {
 } from '@/service/workflow'
 import type { FetchWorkflowDraftResponse } from '@/types/workflow'
 import { useWorkflowConfig } from '@/service/use-workflow'
-
 export const useWorkflowInit = () => {
   const workflowStore = useWorkflowStore()
   const {

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

@@ -19,6 +19,8 @@ import { AudioPlayerManager } from '@/app/components/base/audio-btn/audio.player
 import type { VersionHistory } from '@/types/workflow'
 import { noop } from 'lodash-es'
 import { useNodesSyncDraft } from './use-nodes-sync-draft'
+import { useInvalidAllLastRun } from '@/service/use-workflow'
+import useSetWorkflowVarsWithValue from './use-fetch-workflow-inspect-vars'
 
 export const useWorkflowRun = () => {
   const store = useStoreApi()
@@ -28,6 +30,9 @@ export const useWorkflowRun = () => {
   const { doSyncWorkflowDraft } = useNodesSyncDraft()
   const { handleUpdateWorkflowCanvas } = useWorkflowUpdate()
   const pathname = usePathname()
+  const appId = useAppStore.getState().appDetail?.id
+  const invalidAllLastRun = useInvalidAllLastRun(appId as string)
+  const { fetchInspectVars } = useSetWorkflowVarsWithValue()
 
   const {
     handleWorkflowStarted,
@@ -140,11 +145,13 @@ export const useWorkflowRun = () => {
       clientHeight,
     } = workflowContainer!
 
+    const isInWorkflowDebug = appDetail?.mode === 'workflow'
+
     let url = ''
     if (appDetail?.mode === 'advanced-chat')
       url = `/apps/${appDetail.id}/advanced-chat/workflows/draft/run`
 
-    if (appDetail?.mode === 'workflow')
+    if (isInWorkflowDebug)
       url = `/apps/${appDetail.id}/workflows/draft/run`
 
     const {
@@ -189,6 +196,10 @@ export const useWorkflowRun = () => {
 
           if (onWorkflowFinished)
             onWorkflowFinished(params)
+          if (isInWorkflowDebug) {
+            fetchInspectVars()
+            invalidAllLastRun()
+          }
         },
         onError: (params) => {
           handleWorkflowFailed()
@@ -292,26 +303,7 @@ export const useWorkflowRun = () => {
         ...restCallback,
       },
     )
-  }, [
-    store,
-    workflowStore,
-    doSyncWorkflowDraft,
-    handleWorkflowStarted,
-    handleWorkflowFinished,
-    handleWorkflowFailed,
-    handleWorkflowNodeStarted,
-    handleWorkflowNodeFinished,
-    handleWorkflowNodeIterationStarted,
-    handleWorkflowNodeIterationNext,
-    handleWorkflowNodeIterationFinished,
-    handleWorkflowNodeLoopStarted,
-    handleWorkflowNodeLoopNext,
-    handleWorkflowNodeLoopFinished,
-    handleWorkflowNodeRetry,
-    handleWorkflowTextChunk,
-    handleWorkflowTextReplace,
-    handleWorkflowAgentLog,
-    pathname],
+  }, [store, doSyncWorkflowDraft, workflowStore, pathname, handleWorkflowStarted, handleWorkflowFinished, fetchInspectVars, invalidAllLastRun, handleWorkflowFailed, handleWorkflowNodeStarted, handleWorkflowNodeFinished, handleWorkflowNodeIterationStarted, handleWorkflowNodeIterationNext, handleWorkflowNodeIterationFinished, handleWorkflowNodeLoopStarted, handleWorkflowNodeLoopNext, handleWorkflowNodeLoopFinished, handleWorkflowNodeRetry, handleWorkflowAgentLog, handleWorkflowTextChunk, handleWorkflowTextReplace],
   )
 
   const handleStopRun = useCallback((taskId: string) => {