diff --git a/web/app/components/workflow-app/hooks/use-workflow-init.ts b/web/app/components/workflow-app/hooks/use-workflow-init.ts index e1c4c25a4e..6d16dc5c44 100644 --- a/web/app/components/workflow-app/hooks/use-workflow-init.ts +++ b/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 { diff --git a/web/app/components/workflow-app/hooks/use-workflow-vars.ts b/web/app/components/workflow-app/hooks/use-workflow-vars.ts new file mode 100644 index 0000000000..6dc6d37158 --- /dev/null +++ b/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 = {} + nodeArr.forEach((node) => { + nodesKeyValue[node.id] = node + }) + + const withValueNodeIds: Record = {} + 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 diff --git a/web/app/components/workflow/index.tsx b/web/app/components/workflow/index.tsx index 6263e4b399..a981da1d73 100644 --- a/web/app/components/workflow/index.tsx +++ b/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 = memo(({ }) useShortcuts() + useWorkflowVars() const store = useStoreApi() if (process.env.NODE_ENV === 'development') { diff --git a/web/app/components/workflow/store/workflow/debug/inspect-vars-slice.ts b/web/app/components/workflow/store/workflow/debug/inspect-vars-slice.ts index 9fd185fb5d..85a2f1d234 100644 --- a/web/app/components/workflow/store/workflow/debug/inspect-vars-slice.ts +++ b/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 { BlockEnum, VarType } from '../../../types' +import type { NodeWithVar, VarInInspect } from '@/types/workflow' 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 = (set, get) => { return ({ currentFocusNodeId: null, - 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, - }, - ], - }, - ], + nodesWithInspectVars: [], conversationVars: [], setCurrentFocusNodeId: (nodeId) => { set(() => ({ currentFocusNodeId: nodeId, })) }, + setNodesWithInspectVars: (payload) => { + set(() => ({ + nodesWithInspectVars: payload, + })) + }, getAllInspectVars: () => { return get().nodesWithInspectVars }, diff --git a/web/app/components/workflow/store/workflow/debug/mock-data.ts b/web/app/components/workflow/store/workflow/debug/mock-data.ts new file mode 100644 index 0000000000..ef78c29753 --- /dev/null +++ b/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, + }, +] diff --git a/web/service/use-workflow.ts b/web/service/use-workflow.ts index a118e5f3b8..309d940dc2 100644 --- a/web/service/use-workflow.ts +++ b/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 + }, + }) +}