feat: vars in node updated call api

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

@@ -1,3 +1,4 @@
+import { fetchNodeInspectVars } from '@/service/workflow'
 import { useWorkflowStore } from '../store'
 import type { ValueSelector, VarType } from '../types'
 import {
@@ -16,6 +17,7 @@ const useInspectVarsCrud = () => {
   const {
     appId,
     nodesWithInspectVars,
+    setNodeInspectVars,
     getInspectVar,
     setInspectVarValue,
     renameInspectVarName: renameInspectVarNameInStore,
@@ -36,12 +38,21 @@ const useInspectVarsCrud = () => {
 
   const { mutate: doEditInspectorVar } = useEditInspectorVar(appId)
 
-  const fetchInspectVarValue = (selector: ValueSelector) => {
+  const fetchInspectVarValue = async (selector: ValueSelector) => {
     const nodeId = selector[0]
     const isSystemVar = selector[1] === 'sys'
     const isConversationVar = selector[1] === 'conversation'
     console.log(nodeId, isSystemVar, isConversationVar)
-    // fetch values under nodeId. system var and conversation var has different fetch method
+    if (isSystemVar) {
+      invalidateSysVarValues()
+      return
+    }
+    if (isConversationVar) {
+      invalidateConversationVarValues()
+      return
+    }
+    const vars = await fetchNodeInspectVars(appId, nodeId)
+    setNodeInspectVars(nodeId, vars)
   }
 
   const deleteInspectVar = async (nodeId: string, varId: string) => {

web/app/components/workflow/nodes/_base/hooks/use-one-step-run.ts

@@ -13,7 +13,7 @@ import type { CommonNodeType, InputVar, ValueSelector, Var, Variable } from '@/a
 import { BlockEnum, InputVarType, NodeRunningStatus, VarType } from '@/app/components/workflow/types'
 import { useStore as useAppStore } from '@/app/components/app/store'
 import { useStore, useWorkflowStore } from '@/app/components/workflow/store'
-import { getIterationSingleNodeRunUrl, getLoopSingleNodeRunUrl, singleNodeRun } from '@/service/workflow'
+import { fetchNodeInspectVars, getIterationSingleNodeRunUrl, getLoopSingleNodeRunUrl, singleNodeRun } from '@/service/workflow'
 import Toast from '@/app/components/base/toast'
 import LLMDefault from '@/app/components/workflow/nodes/llm/default'
 import KnowledgeRetrievalDefault from '@/app/components/workflow/nodes/knowledge-retrieval/default'
@@ -33,7 +33,6 @@ import { ssePost } from '@/service/base'
 import { noop } from 'lodash-es'
 import { getInputVars as doGetInputVars } from '@/app/components/base/prompt-editor/constants'
 import type { NodeRunResult, NodeTracing } from '@/types/workflow'
-import { getNodeWithVar } from '../../../utils/debug'
 const { checkValid: checkLLMValid } = LLMDefault
 const { checkValid: checkKnowledgeRetrievalValid } = KnowledgeRetrievalDefault
 const { checkValid: checkIfElseValid } = IfElseDefault
@@ -48,7 +47,9 @@ const { checkValid: checkParameterExtractorValid } = ParameterExtractorDefault
 const { checkValid: checkIterationValid } = IterationDefault
 const { checkValid: checkDocumentExtractorValid } = DocumentExtractorDefault
 const { checkValid: checkLoopValid } = LoopDefault
-
+import {
+  useStoreApi,
+} from 'reactflow'
 // eslint-disable-next-line ts/no-unsafe-function-type
 const checkValidFns: Record<BlockEnum, Function> = {
   [BlockEnum.LLM]: checkLLMValid,
@@ -154,24 +155,23 @@ const useOneStepRun = <T>({
   const iterationTimes = iteratorInputKey ? runInputData[iteratorInputKey].length : 0
   const loopTimes = loopInputKey ? runInputData[loopInputKey].length : 0
 
+  const store = useStoreApi()
   const workflowStore = useWorkflowStore()
   const {
+
     setLastRunNodeInfo,
-    setNodeInspectVars,
+    appendNodeInspectVars,
     setShowSingleRunPanel,
   } = workflowStore.getState()
   const [runResult, doSetRunResult] = useState<NodeRunResult | null>(null)
-  const nodeData = data
-  const setRunResult = useCallback((data: NodeRunResult | null) => {
+  const setRunResult = useCallback(async (data: NodeRunResult | null) => {
     doSetRunResult(data)
     setLastRunNodeInfo(id, data!)
-    setNodeInspectVars(id, getNodeWithVar({
-      nodeId: id,
-      nodeType: nodeData.type,
-      title: nodeData.title,
-      values: data?.outputs || {},
-    }))
-  }, [nodeData, id, setLastRunNodeInfo, setNodeInspectVars])
+    const vars = await fetchNodeInspectVars(appId!, data!.id)
+    const { getNodes } = store.getState()
+    const nodes = getNodes()
+    appendNodeInspectVars(id, vars, nodes)
+  }, [setLastRunNodeInfo, id, appId, store, appendNodeInspectVars])
 
   const { handleNodeDataUpdate }: { handleNodeDataUpdate: (data: any) => void } = useNodeDataUpdate()
   const [canShowSingleRun, setCanShowSingleRun] = useState(false)

web/app/components/workflow/store/workflow/debug/inspect-vars-slice.ts

@@ -2,6 +2,7 @@ import type { StateCreator } from 'zustand'
 import produce from 'immer'
 import type { NodeWithVar, VarInInspect } from '@/types/workflow'
 import type { ValueSelector } from '../../../types'
+import type { Node } from '@/app/components/workflow/types'
 
 type InspectVarsState = {
   currentFocusNodeId: string | null
@@ -14,7 +15,8 @@ type InspectVarsActions = {
   setNodesWithInspectVars: (payload: NodeWithVar[]) => void
   deleteAllInspectVars: () => void
   getAllInspectVars: () => NodeWithVar[]
-  setNodeInspectVars: (nodeId: string, payload: NodeWithVar) => void
+  setNodeInspectVars: (nodeId: string, payload: VarInInspect[]) => void
+  appendNodeInspectVars: (nodeId: string, payload: VarInInspect[], allNodes: Node[]) => void
   deleteNodeInspectVars: (nodeId: string) => void
   getNodeInspectVars: (nodeId: string) => NodeWithVar | undefined
   hasNodeInspectVars: (nodeId: string) => boolean
@@ -55,9 +57,7 @@ export const createInspectVarsSlice: StateCreator<InspectVarsSliceShape> = (set,
         const nodes = produce(prevNodes, (draft) => {
           const index = prevNodes.findIndex(node => node.nodeId === nodeId)
           if (index === -1)
-            draft.push(payload)
-          else
-            draft[index] = payload
+            draft[index].vars = payload
         })
 
         return {
@@ -65,6 +65,23 @@ export const createInspectVarsSlice: StateCreator<InspectVarsSliceShape> = (set,
         }
       })
     },
+    appendNodeInspectVars: (nodeId, payload, allNodes) => {
+      set((state) => {
+        const nodes = state.nodesWithInspectVars
+        const nodeInfo = allNodes.find(node => node.id === nodeId)
+        if (nodeInfo) {
+          nodes.push({
+            nodeId,
+            nodeType: nodeInfo.data.type,
+            title: nodeInfo.data.title,
+            vars: payload,
+          })
+        }
+        return {
+          nodesWithInspectVars: nodes,
+        }
+      })
+    },
     deleteNodeInspectVars: (nodeId) => {
       set(produce((state: InspectVarsSliceShape) => {
         const nodes = state.nodesWithInspectVars.filter(node => node.nodeId !== nodeId)

web/app/components/workflow/utils/debug.ts

@@ -1,6 +1,5 @@
-import type { NodeWithVar, VarInInspect } from '@/types/workflow'
+import type { VarInInspect } from '@/types/workflow'
 import { VarInInspectType } from '@/types/workflow'
-import type { BlockEnum } from '../types'
 import { VarType } from '../types'
 
 type OutputToVarInInspectParams = {
@@ -24,33 +23,3 @@ export const outputToVarInInspect = ({
     edited: false,
   }
 }
-
-type NodeWithVarParams = {
-  nodeId: string
-  nodeType: BlockEnum
-  title: string
-  values: Record<string, any>
-}
-export const getNodeWithVar = ({
-  nodeId,
-  nodeType,
-  title,
-  values,
-}: NodeWithVarParams): NodeWithVar => {
-  const res: NodeWithVar = {
-    nodeId,
-    nodeType,
-    title,
-    vars: [],
-  }
-
-  res.vars = Object.entries(values).map(([key, value]) => {
-    return outputToVarInInspect({
-      nodeId,
-      name: key,
-      value,
-    })
-  })
-
-  return res
-}

web/service/workflow.ts

@@ -85,3 +85,9 @@ export const fetchAllInspectVars = async (appId: string): Promise<VarInInspect[]
 
   return res
 }
+
+export const fetchNodeInspectVars = async (appId: string, nodeId: string): Promise<VarInInspect[]> => {
+  // TODO
+  console.log('fetchNodeInspectVars', appId, nodeId)
+  return []
+}