feat: init has value vars

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-vars.ts

@@ -0,0 +1,52 @@
+import type { NodeWithVar, VarInInspect } from '@/types/workflow'
+import { useWorkflowStore } from '../../workflow/store'
+import { useWorkflowVars as useDoFetchWorkflowVars } from '@/service/use-workflow'
+import { useStoreApi } from 'reactflow'
+import type { Node } from '@/app/components/workflow/types'
+
+const useWorkflowVars = () => {
+  const workflowStore = useWorkflowStore()
+  const { setNodesWithInspectVars, appId } = workflowStore.getState()
+  const store = useStoreApi()
+
+  const addNodeInfo = (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,
+        nodeType: node.data.type,
+        title: node.data.title,
+        vars: varsUnderTheNode,
+      }
+      return nodeWithVar
+    })
+    setNodesWithInspectVars(res)
+    console.log(res)
+  }
+  useDoFetchWorkflowVars(appId, 1, addNodeInfo)
+}
+
+export default useWorkflowVars

web/app/components/workflow/index.tsx

@@ -82,6 +82,7 @@ import Confirm from '@/app/components/base/confirm'
 import DatasetsDetailProvider from './datasets-detail-store/provider'
 import { HooksStoreContextProvider } from './hooks-store'
 import type { Shape as HooksStoreShape } from './hooks-store'
+import useWorkflowVars from '../workflow-app/hooks/use-workflow-vars'
 
 const nodeTypes = {
   [CUSTOM_NODE]: CustomNode,
@@ -273,6 +274,7 @@ export const Workflow: FC<WorkflowProps> = memo(({
   })
 
   useShortcuts()
+  useWorkflowVars()
 
   const store = useStoreApi()
   if (process.env.NODE_ENV === 'development') {

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

@@ -1,7 +1,6 @@
 import type { StateCreator } from 'zustand'
 import produce from 'immer'
-import { type NodeWithVar, type VarInInspect, VarInInspectType } from '@/types/workflow'
+import type { NodeWithVar, VarInInspect } from '@/types/workflow'
-import { BlockEnum, VarType } from '../../../types'
 
 type InspectVarsState = {
   currentFocusNodeId: string | null
@@ -11,8 +10,9 @@ type InspectVarsState = {
 
 type InspectVarsActions = {
   setCurrentFocusNodeId: (nodeId: string | null) => void
-  getAllInspectVars: () => NodeWithVar[]
+  setNodesWithInspectVars: (payload: NodeWithVar[]) => void
   clearInspectVars: () => void
+  getAllInspectVars: () => NodeWithVar[]
   setNodeInspectVars: (nodeId: string, payload: NodeWithVar) => void
   clearNodeInspectVars: (nodeId: string) => void
   getNodeInspectVars: (nodeId: string) => NodeWithVar | undefined
@@ -26,31 +26,18 @@ export type InspectVarsSliceShape = InspectVarsState & InspectVarsActions
 export const createInspectVarsSlice: StateCreator<InspectVarsSliceShape> = (set, get) => {
   return ({
     currentFocusNodeId: null,
-    nodesWithInspectVars: [
+    nodesWithInspectVars: [],
-      {
-        nodeId: '1745476079387',
-        nodeType: BlockEnum.LLM,
-        title: 'llm 2',
-        vars: [
-          {
-            id: 'xxx',
-            type: VarInInspectType.node,
-            name: 'llm 2',
-            description: '',
-            selector: ['1745476079387', 'text'],
-            value_type: VarType.string,
-            value: 'text value...',
-            edited: false,
-          },
-        ],
-      },
-    ],
     conversationVars: [],
     setCurrentFocusNodeId: (nodeId) => {
       set(() => ({
         currentFocusNodeId: nodeId,
       }))
     },
+    setNodesWithInspectVars: (payload) => {
+      set(() => ({
+        nodesWithInspectVars: payload,
+      }))
+    },
     getAllInspectVars: () => {
       return get().nodesWithInspectVars
     },

web/app/components/workflow/store/workflow/debug/mock-data.ts

@@ -0,0 +1,16 @@
+import { VarType } from '../../../types'
+import type { VarInInspect } from '@/types/workflow'
+import { VarInInspectType } from '@/types/workflow'
+
+export const vars: VarInInspect[] = [
+  {
+    id: 'xxx',
+    type: VarInInspectType.node,
+    name: 'llm 2',
+    description: '',
+    selector: ['1745476079387', 'text'],
+    value_type: VarType.string,
+    value: 'text value...',
+    edited: false,
+  },
+]

web/service/use-workflow.ts

@@ -7,11 +7,13 @@ import type {
   NodeTracing,
   PublishWorkflowParams,
   UpdateWorkflowParams,
+  VarInInspect,
   WorkflowConfigResponse,
 } from '@/types/workflow'
 import type { CommonResponse } from '@/models/common'
 import { useReset } from './use-base'
 import { sleep } from '@/utils'
+import { vars } from '@/app/components/workflow/store/workflow/debug/mock-data'
 
 const NAME_SPACE = 'workflow'
 
@@ -123,3 +125,20 @@ export const useLastRun = (appID: string, nodeId: string, enabled: boolean) => {
     },
   })
 }
+
+export const useWorkflowVars = (appId: string, pageAt: number, onSuccess: (data: VarInInspect[]) => void) => {
+  return useQuery({
+    queryKey: [NAME_SPACE, 'variables', appId, pageAt],
+    queryFn: async () => {
+      // TODO: mock data. and need to get the rest data if has more data
+      await sleep(1000)
+      const data = await Promise.resolve({
+        items: vars,
+        total: 1,
+      })
+      onSuccess(data.items)
+
+      return data
+    },
+  })
+}