dify

dify/web/app/components/workflow/store/__tests__/trigger-status.test.ts

@@ -0,0 +1,293 @@
+import { act, renderHook } from '@testing-library/react'
+import { useTriggerStatusStore } from '../trigger-status'
+import type { EntryNodeStatus } from '../trigger-status'
+
+describe('useTriggerStatusStore', () => {
+  beforeEach(() => {
+    // Clear the store state before each test
+    const { result } = renderHook(() => useTriggerStatusStore())
+    act(() => {
+      result.current.clearTriggerStatuses()
+    })
+  })
+
+  describe('Initial State', () => {
+    it('should initialize with empty trigger statuses', () => {
+      const { result } = renderHook(() => useTriggerStatusStore())
+
+      expect(result.current.triggerStatuses).toEqual({})
+    })
+
+    it('should return "disabled" for non-existent trigger status', () => {
+      const { result } = renderHook(() => useTriggerStatusStore())
+
+      const status = result.current.getTriggerStatus('non-existent-id')
+      expect(status).toBe('disabled')
+    })
+  })
+
+  describe('setTriggerStatus', () => {
+    it('should set trigger status for a single node', () => {
+      const { result } = renderHook(() => useTriggerStatusStore())
+
+      act(() => {
+        result.current.setTriggerStatus('node-1', 'enabled')
+      })
+
+      expect(result.current.triggerStatuses['node-1']).toBe('enabled')
+      expect(result.current.getTriggerStatus('node-1')).toBe('enabled')
+    })
+
+    it('should update existing trigger status', () => {
+      const { result } = renderHook(() => useTriggerStatusStore())
+
+      // Set initial status
+      act(() => {
+        result.current.setTriggerStatus('node-1', 'enabled')
+      })
+      expect(result.current.getTriggerStatus('node-1')).toBe('enabled')
+
+      // Update status
+      act(() => {
+        result.current.setTriggerStatus('node-1', 'disabled')
+      })
+      expect(result.current.getTriggerStatus('node-1')).toBe('disabled')
+    })
+
+    it('should handle multiple nodes independently', () => {
+      const { result } = renderHook(() => useTriggerStatusStore())
+
+      act(() => {
+        result.current.setTriggerStatus('node-1', 'enabled')
+        result.current.setTriggerStatus('node-2', 'disabled')
+      })
+
+      expect(result.current.getTriggerStatus('node-1')).toBe('enabled')
+      expect(result.current.getTriggerStatus('node-2')).toBe('disabled')
+    })
+  })
+
+  describe('setTriggerStatuses', () => {
+    it('should set multiple trigger statuses at once', () => {
+      const { result } = renderHook(() => useTriggerStatusStore())
+
+      const statuses = {
+        'node-1': 'enabled' as EntryNodeStatus,
+        'node-2': 'disabled' as EntryNodeStatus,
+        'node-3': 'enabled' as EntryNodeStatus,
+      }
+
+      act(() => {
+        result.current.setTriggerStatuses(statuses)
+      })
+
+      expect(result.current.triggerStatuses).toEqual(statuses)
+      expect(result.current.getTriggerStatus('node-1')).toBe('enabled')
+      expect(result.current.getTriggerStatus('node-2')).toBe('disabled')
+      expect(result.current.getTriggerStatus('node-3')).toBe('enabled')
+    })
+
+    it('should replace existing statuses completely', () => {
+      const { result } = renderHook(() => useTriggerStatusStore())
+
+      // Set initial statuses
+      act(() => {
+        result.current.setTriggerStatuses({
+          'node-1': 'enabled',
+          'node-2': 'disabled',
+        })
+      })
+
+      // Replace with new statuses
+      act(() => {
+        result.current.setTriggerStatuses({
+          'node-3': 'enabled',
+          'node-4': 'disabled',
+        })
+      })
+
+      expect(result.current.triggerStatuses).toEqual({
+        'node-3': 'enabled',
+        'node-4': 'disabled',
+      })
+      expect(result.current.getTriggerStatus('node-1')).toBe('disabled') // default
+      expect(result.current.getTriggerStatus('node-2')).toBe('disabled') // default
+    })
+
+    it('should handle empty object', () => {
+      const { result } = renderHook(() => useTriggerStatusStore())
+
+      // Set some initial data
+      act(() => {
+        result.current.setTriggerStatus('node-1', 'enabled')
+      })
+
+      // Clear with empty object
+      act(() => {
+        result.current.setTriggerStatuses({})
+      })
+
+      expect(result.current.triggerStatuses).toEqual({})
+      expect(result.current.getTriggerStatus('node-1')).toBe('disabled')
+    })
+  })
+
+  describe('getTriggerStatus', () => {
+    it('should return the correct status for existing nodes', () => {
+      const { result } = renderHook(() => useTriggerStatusStore())
+
+      act(() => {
+        result.current.setTriggerStatuses({
+          'enabled-node': 'enabled',
+          'disabled-node': 'disabled',
+        })
+      })
+
+      expect(result.current.getTriggerStatus('enabled-node')).toBe('enabled')
+      expect(result.current.getTriggerStatus('disabled-node')).toBe('disabled')
+    })
+
+    it('should return "disabled" as default for non-existent nodes', () => {
+      const { result } = renderHook(() => useTriggerStatusStore())
+
+      expect(result.current.getTriggerStatus('non-existent')).toBe('disabled')
+      expect(result.current.getTriggerStatus('')).toBe('disabled')
+      expect(result.current.getTriggerStatus('undefined-node')).toBe('disabled')
+    })
+  })
+
+  describe('clearTriggerStatuses', () => {
+    it('should clear all trigger statuses', () => {
+      const { result } = renderHook(() => useTriggerStatusStore())
+
+      // Set some statuses
+      act(() => {
+        result.current.setTriggerStatuses({
+          'node-1': 'enabled',
+          'node-2': 'disabled',
+          'node-3': 'enabled',
+        })
+      })
+
+      expect(Object.keys(result.current.triggerStatuses)).toHaveLength(3)
+
+      // Clear all
+      act(() => {
+        result.current.clearTriggerStatuses()
+      })
+
+      expect(result.current.triggerStatuses).toEqual({})
+      expect(result.current.getTriggerStatus('node-1')).toBe('disabled')
+      expect(result.current.getTriggerStatus('node-2')).toBe('disabled')
+      expect(result.current.getTriggerStatus('node-3')).toBe('disabled')
+    })
+
+    it('should not throw when clearing empty statuses', () => {
+      const { result } = renderHook(() => useTriggerStatusStore())
+
+      expect(() => {
+        act(() => {
+          result.current.clearTriggerStatuses()
+        })
+      }).not.toThrow()
+
+      expect(result.current.triggerStatuses).toEqual({})
+    })
+  })
+
+  describe('Store Reactivity', () => {
+    it('should notify subscribers when status changes', () => {
+      const { result } = renderHook(() => useTriggerStatusStore())
+
+      const initialTriggerStatuses = result.current.triggerStatuses
+
+      act(() => {
+        result.current.setTriggerStatus('reactive-node', 'enabled')
+      })
+
+      // The reference should change, indicating reactivity
+      expect(result.current.triggerStatuses).not.toBe(initialTriggerStatuses)
+      expect(result.current.triggerStatuses['reactive-node']).toBe('enabled')
+    })
+
+    it('should maintain immutability when updating statuses', () => {
+      const { result } = renderHook(() => useTriggerStatusStore())
+
+      act(() => {
+        result.current.setTriggerStatus('node-1', 'enabled')
+      })
+
+      const firstSnapshot = result.current.triggerStatuses
+
+      act(() => {
+        result.current.setTriggerStatus('node-2', 'disabled')
+      })
+
+      const secondSnapshot = result.current.triggerStatuses
+
+      // References should be different (immutable updates)
+      expect(firstSnapshot).not.toBe(secondSnapshot)
+      // But the first node status should remain
+      expect(secondSnapshot['node-1']).toBe('enabled')
+      expect(secondSnapshot['node-2']).toBe('disabled')
+    })
+  })
+
+  describe('Edge Cases', () => {
+    it('should handle rapid consecutive updates', () => {
+      const { result } = renderHook(() => useTriggerStatusStore())
+
+      act(() => {
+        result.current.setTriggerStatus('rapid-node', 'enabled')
+        result.current.setTriggerStatus('rapid-node', 'disabled')
+        result.current.setTriggerStatus('rapid-node', 'enabled')
+      })
+
+      expect(result.current.getTriggerStatus('rapid-node')).toBe('enabled')
+    })
+
+    it('should handle setting the same status multiple times', () => {
+      const { result } = renderHook(() => useTriggerStatusStore())
+
+      act(() => {
+        result.current.setTriggerStatus('same-node', 'enabled')
+      })
+
+      const firstSnapshot = result.current.triggerStatuses
+
+      act(() => {
+        result.current.setTriggerStatus('same-node', 'enabled')
+      })
+
+      const secondSnapshot = result.current.triggerStatuses
+
+      expect(result.current.getTriggerStatus('same-node')).toBe('enabled')
+      // Should still create new reference (Zustand behavior)
+      expect(firstSnapshot).not.toBe(secondSnapshot)
+    })
+
+    it('should handle special node ID formats', () => {
+      const { result } = renderHook(() => useTriggerStatusStore())
+
+      const specialNodeIds = [
+        'node-with-dashes',
+        'node_with_underscores',
+        'nodeWithCamelCase',
+        'node123',
+        'node-123-abc',
+      ]
+
+      act(() => {
+        specialNodeIds.forEach((nodeId, index) => {
+          const status = index % 2 === 0 ? 'enabled' : 'disabled'
+          result.current.setTriggerStatus(nodeId, status as EntryNodeStatus)
+        })
+      })
+
+      specialNodeIds.forEach((nodeId, index) => {
+        const expectedStatus = index % 2 === 0 ? 'enabled' : 'disabled'
+        expect(result.current.getTriggerStatus(nodeId)).toBe(expectedStatus)
+      })
+    })
+  })
+})

dify/web/app/components/workflow/store/index.ts

@@ -0,0 +1,2 @@
+export * from './workflow'
+export * from './trigger-status'

dify/web/app/components/workflow/store/trigger-status.ts

@@ -0,0 +1,42 @@
+import { create } from 'zustand'
+import { subscribeWithSelector } from 'zustand/middleware'
+
+export type EntryNodeStatus = 'enabled' | 'disabled'
+
+type TriggerStatusState = {
+  // Map of nodeId to trigger status
+  triggerStatuses: Record<string, EntryNodeStatus>
+
+  // Actions
+  setTriggerStatus: (nodeId: string, status: EntryNodeStatus) => void
+  setTriggerStatuses: (statuses: Record<string, EntryNodeStatus>) => void
+  getTriggerStatus: (nodeId: string) => EntryNodeStatus
+  clearTriggerStatuses: () => void
+}
+
+export const useTriggerStatusStore = create<TriggerStatusState>()(
+  subscribeWithSelector((set, get) => ({
+    triggerStatuses: {},
+
+    setTriggerStatus: (nodeId: string, status: EntryNodeStatus) => {
+      set(state => ({
+        triggerStatuses: {
+          ...state.triggerStatuses,
+          [nodeId]: status,
+        },
+      }))
+    },
+
+    setTriggerStatuses: (statuses: Record<string, EntryNodeStatus>) => {
+      set({ triggerStatuses: statuses })
+    },
+
+    getTriggerStatus: (nodeId: string): EntryNodeStatus => {
+      return get().triggerStatuses[nodeId] || 'disabled'
+    },
+
+    clearTriggerStatuses: () => {
+      set({ triggerStatuses: {} })
+    },
+  })),
+)

dify/web/app/components/workflow/store/workflow/chat-variable-slice.ts

@@ -0,0 +1,39 @@
+import type { StateCreator } from 'zustand'
+import type { ConversationVariable } from '@/app/components/workflow/types'
+
+export type ChatVariableSliceShape = {
+  showChatVariablePanel: boolean
+  setShowChatVariablePanel: (showChatVariablePanel: boolean) => void
+  showGlobalVariablePanel: boolean
+  setShowGlobalVariablePanel: (showGlobalVariablePanel: boolean) => void
+  conversationVariables: ConversationVariable[]
+  setConversationVariables: (conversationVariables: ConversationVariable[]) => void
+}
+
+export const createChatVariableSlice: StateCreator<ChatVariableSliceShape> = (set) => {
+  const hideAllPanel = {
+    showDebugAndPreviewPanel: false,
+    showEnvPanel: false,
+    showChatVariablePanel: false,
+    showGlobalVariablePanel: false,
+  }
+
+  return ({
+    showChatVariablePanel: false,
+    setShowChatVariablePanel: showChatVariablePanel => set(() => {
+      if (showChatVariablePanel)
+        return { ...hideAllPanel, showChatVariablePanel: true }
+      else
+        return { showChatVariablePanel: false }
+    }),
+    showGlobalVariablePanel: false,
+    setShowGlobalVariablePanel: showGlobalVariablePanel => set(() => {
+      if (showGlobalVariablePanel)
+        return { ...hideAllPanel, showGlobalVariablePanel: true }
+      else
+        return { showGlobalVariablePanel: false }
+    }),
+    conversationVariables: [],
+    setConversationVariables: conversationVariables => set(() => ({ conversationVariables })),
+  })
+}

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

@@ -0,0 +1,142 @@
+import type { StateCreator } from 'zustand'
+import { produce } from 'immer'
+import type { NodeWithVar, VarInInspect } from '@/types/workflow'
+import type { ValueSelector } from '../../../types'
+
+type InspectVarsState = {
+  currentFocusNodeId: string | null
+  nodesWithInspectVars: NodeWithVar[] // the nodes have data
+  conversationVars: VarInInspect[]
+}
+
+type InspectVarsActions = {
+  setCurrentFocusNodeId: (nodeId: string | null) => void
+  setNodesWithInspectVars: (payload: NodeWithVar[]) => void
+  deleteAllInspectVars: () => void
+  setNodeInspectVars: (nodeId: string, payload: VarInInspect[]) => void
+  deleteNodeInspectVars: (nodeId: string) => void
+  setInspectVarValue: (nodeId: string, name: string, value: any) => void
+  resetToLastRunVar: (nodeId: string, varId: string, value: any) => void
+  renameInspectVarName: (nodeId: string, varId: string, selector: ValueSelector) => void
+  deleteInspectVar: (nodeId: string, varId: string) => void
+}
+
+export type InspectVarsSliceShape = InspectVarsState & InspectVarsActions
+
+export const createInspectVarsSlice: StateCreator<InspectVarsSliceShape> = (set) => {
+  return ({
+    currentFocusNodeId: null,
+    nodesWithInspectVars: [],
+    conversationVars: [],
+    setCurrentFocusNodeId: (nodeId) => {
+      set(() => ({
+        currentFocusNodeId: nodeId,
+      }))
+    },
+    setNodesWithInspectVars: (payload) => {
+      set(() => ({
+        nodesWithInspectVars: payload,
+      }))
+    },
+    deleteAllInspectVars: () => {
+      set(() => ({
+        nodesWithInspectVars: [],
+      }))
+    },
+    setNodeInspectVars: (nodeId, payload) => {
+      set((state) => {
+        const prevNodes = state.nodesWithInspectVars
+        const nodes = produce(prevNodes, (draft) => {
+          const index = prevNodes.findIndex(node => node.nodeId === nodeId)
+          if (index !== -1) {
+            draft[index].vars = payload
+            draft[index].isValueFetched = true
+          }
+        })
+
+        return {
+          nodesWithInspectVars: nodes,
+        }
+      })
+    },
+    deleteNodeInspectVars: (nodeId) => {
+      set((state: InspectVarsSliceShape) => {
+        const nodes = state.nodesWithInspectVars.filter(node => node.nodeId !== nodeId)
+        return {
+          nodesWithInspectVars: nodes,
+        }
+      },
+      )
+    },
+    setInspectVarValue: (nodeId, varId, value) => {
+      set((state: InspectVarsSliceShape) => {
+        const nodes = produce(state.nodesWithInspectVars, (draft) => {
+          const targetNode = draft.find(node => node.nodeId === nodeId)
+          if (!targetNode)
+            return
+          const targetVar = targetNode.vars.find(varItem => varItem.id === varId)
+          if (!targetVar)
+            return
+          targetVar.value = value
+          targetVar.edited = true
+        },
+        )
+        return {
+          nodesWithInspectVars: nodes,
+        }
+      })
+    },
+    resetToLastRunVar: (nodeId, varId, value) => {
+      set((state: InspectVarsSliceShape) => {
+        const nodes = produce(state.nodesWithInspectVars, (draft) => {
+          const targetNode = draft.find(node => node.nodeId === nodeId)
+          if (!targetNode)
+            return
+          const targetVar = targetNode.vars.find(varItem => varItem.id === varId)
+          if (!targetVar)
+            return
+          targetVar.value = value
+          targetVar.edited = false
+        },
+        )
+        return {
+          nodesWithInspectVars: nodes,
+        }
+      })
+    },
+    renameInspectVarName: (nodeId, varId, selector) => {
+      set((state: InspectVarsSliceShape) => {
+        const nodes = produce(state.nodesWithInspectVars, (draft) => {
+          const targetNode = draft.find(node => node.nodeId === nodeId)
+          if (!targetNode)
+            return
+          const targetVar = targetNode.vars.find(varItem => varItem.id === varId)
+          if (!targetVar)
+            return
+          targetVar.name = selector[1]
+          targetVar.selector = selector
+        },
+        )
+        return {
+          nodesWithInspectVars: nodes,
+        }
+      })
+    },
+    deleteInspectVar: (nodeId, varId) => {
+      set((state: InspectVarsSliceShape) => {
+        const nodes = produce(state.nodesWithInspectVars, (draft) => {
+          const targetNode = draft.find(node => node.nodeId === nodeId)
+          if (!targetNode)
+            return
+          const needChangeVarIndex = targetNode.vars.findIndex(varItem => varItem.id === varId)
+          if (needChangeVarIndex !== -1)
+            targetNode.vars.splice(needChangeVarIndex, 1)
+        },
+        )
+        return {
+          nodesWithInspectVars: nodes,
+        }
+      })
+    },
+  })
+}

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

@@ -0,0 +1,90 @@
+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: 'text00',
+    description: '',
+    selector: ['1745476079387', 'text'],
+    value_type: VarType.string,
+    value: 'text value...',
+    edited: false,
+    visible: true,
+    is_truncated: false,
+    full_content: { size_bytes: 0, download_url: '' },
+  },
+  {
+    id: 'fdklajljgldjglkagjlk',
+    type: VarInInspectType.node,
+    name: 'text',
+    description: '',
+    selector: ['1712386917734', 'text'],
+    value_type: VarType.string,
+    value: 'made zhizhang',
+    edited: false,
+    visible: true,
+    is_truncated: false,
+    full_content: { size_bytes: 0, download_url: '' },
+  },
+]
+
+export const conversationVars: VarInInspect[] = [
+  {
+    id: 'con1',
+    type: VarInInspectType.conversation,
+    name: 'conversationVar 1',
+    description: '',
+    selector: ['conversation', 'var1'],
+    value_type: VarType.string,
+    value: 'conversation var value...',
+    edited: false,
+    visible: true,
+    is_truncated: false,
+    full_content: { size_bytes: 0, download_url: '' },
+  },
+  {
+    id: 'con2',
+    type: VarInInspectType.conversation,
+    name: 'conversationVar 2',
+    description: '',
+    selector: ['conversation', 'var2'],
+    value_type: VarType.number,
+    value: 456,
+    edited: false,
+    visible: true,
+    is_truncated: false,
+    full_content: { size_bytes: 0, download_url: '' },
+  },
+]
+
+export const systemVars: VarInInspect[] = [
+  {
+    id: 'sys1',
+    type: VarInInspectType.system,
+    name: 'query',
+    description: '',
+    selector: ['sys', 'query'],
+    value_type: VarType.string,
+    value: 'Hello robot!',
+    edited: false,
+    visible: true,
+    is_truncated: false,
+    full_content: { size_bytes: 0, download_url: '' },
+  },
+  {
+    id: 'sys2',
+    type: VarInInspectType.system,
+    name: 'user_id',
+    description: '',
+    selector: ['sys', 'user_id'],
+    value_type: VarType.string,
+    value: 'djflakjerlkjdlksfjslakjsdfl',
+    edited: false,
+    visible: true,
+    is_truncated: false,
+    full_content: { size_bytes: 0, download_url: '' },
+  },
+]

dify/web/app/components/workflow/store/workflow/env-variable-slice.ts

@@ -0,0 +1,33 @@
+import type { StateCreator } from 'zustand'
+import type { EnvironmentVariable } from '@/app/components/workflow/types'
+
+export type EnvVariableSliceShape = {
+  showEnvPanel: boolean
+  setShowEnvPanel: (showEnvPanel: boolean) => void
+  environmentVariables: EnvironmentVariable[]
+  setEnvironmentVariables: (environmentVariables: EnvironmentVariable[]) => void
+  envSecrets: Record<string, string>
+  setEnvSecrets: (envSecrets: Record<string, string>) => void
+}
+
+export const createEnvVariableSlice: StateCreator<EnvVariableSliceShape> = (set) => {
+  const hideAllPanel = {
+    showDebugAndPreviewPanel: false,
+    showEnvPanel: false,
+    showChatVariablePanel: false,
+    showGlobalVariablePanel: false,
+  }
+  return ({
+    showEnvPanel: false,
+    setShowEnvPanel: showEnvPanel => set(() => {
+      if (showEnvPanel)
+        return { ...hideAllPanel, showEnvPanel: true }
+      else
+        return { showEnvPanel: false }
+    }),
+    environmentVariables: [],
+    setEnvironmentVariables: environmentVariables => set(() => ({ environmentVariables })),
+    envSecrets: {},
+    setEnvSecrets: envSecrets => set(() => ({ envSecrets })),
+  })
+}

dify/web/app/components/workflow/store/workflow/form-slice.ts

@@ -0,0 +1,18 @@
+import type { StateCreator } from 'zustand'
+import type {
+  RunFile,
+} from '@/app/components/workflow/types'
+
+export type FormSliceShape = {
+  inputs: Record<string, string | number | boolean>
+  setInputs: (inputs: Record<string, string | number | boolean>) => void
+  files: RunFile[]
+  setFiles: (files: RunFile[]) => void
+}
+
+export const createFormSlice: StateCreator<FormSliceShape> = set => ({
+  inputs: {},
+  setInputs: inputs => set(() => ({ inputs })),
+  files: [],
+  setFiles: files => set(() => ({ files })),
+})

dify/web/app/components/workflow/store/workflow/help-line-slice.ts

@@ -0,0 +1,19 @@
+import type { StateCreator } from 'zustand'
+import type {
+  HelpLineHorizontalPosition,
+  HelpLineVerticalPosition,
+} from '@/app/components/workflow/help-line/types'
+
+export type HelpLineSliceShape = {
+  helpLineHorizontal?: HelpLineHorizontalPosition
+  setHelpLineHorizontal: (helpLineHorizontal?: HelpLineHorizontalPosition) => void
+  helpLineVertical?: HelpLineVerticalPosition
+  setHelpLineVertical: (helpLineVertical?: HelpLineVerticalPosition) => void
+}
+
+export const createHelpLineSlice: StateCreator<HelpLineSliceShape> = set => ({
+  helpLineHorizontal: undefined,
+  setHelpLineHorizontal: helpLineHorizontal => set(() => ({ helpLineHorizontal })),
+  helpLineVertical: undefined,
+  setHelpLineVertical: helpLineVertical => set(() => ({ helpLineVertical })),
+})

dify/web/app/components/workflow/store/workflow/history-slice.ts

@@ -0,0 +1,25 @@
+import type { StateCreator } from 'zustand'
+import type {
+  HistoryWorkflowData,
+} from '@/app/components/workflow/types'
+import type {
+  VersionHistory,
+} from '@/types/workflow'
+
+export type HistorySliceShape = {
+  historyWorkflowData?: HistoryWorkflowData
+  setHistoryWorkflowData: (historyWorkflowData?: HistoryWorkflowData) => void
+  showRunHistory: boolean
+  setShowRunHistory: (showRunHistory: boolean) => void
+  versionHistory: VersionHistory[]
+  setVersionHistory: (versionHistory: VersionHistory[]) => void
+}
+
+export const createHistorySlice: StateCreator<HistorySliceShape> = set => ({
+  historyWorkflowData: undefined,
+  setHistoryWorkflowData: historyWorkflowData => set(() => ({ historyWorkflowData })),
+  showRunHistory: false,
+  setShowRunHistory: showRunHistory => set(() => ({ showRunHistory })),
+  versionHistory: [],
+  setVersionHistory: versionHistory => set(() => ({ versionHistory })),
+})

dify/web/app/components/workflow/store/workflow/index.ts

@@ -0,0 +1,97 @@
+import { useContext } from 'react'
+import type {
+  StateCreator,
+} from 'zustand'
+import {
+  useStore as useZustandStore,
+} from 'zustand'
+import { createStore } from 'zustand/vanilla'
+import type { ChatVariableSliceShape } from './chat-variable-slice'
+import { createChatVariableSlice } from './chat-variable-slice'
+import type { EnvVariableSliceShape } from './env-variable-slice'
+import { createEnvVariableSlice } from './env-variable-slice'
+import type { FormSliceShape } from './form-slice'
+import { createFormSlice } from './form-slice'
+import type { HelpLineSliceShape } from './help-line-slice'
+import { createHelpLineSlice } from './help-line-slice'
+import type { HistorySliceShape } from './history-slice'
+import { createHistorySlice } from './history-slice'
+import type { NodeSliceShape } from './node-slice'
+import { createNodeSlice } from './node-slice'
+import type { PanelSliceShape } from './panel-slice'
+import { createPanelSlice } from './panel-slice'
+import type { ToolSliceShape } from './tool-slice'
+import { createToolSlice } from './tool-slice'
+import type { VersionSliceShape } from './version-slice'
+import { createVersionSlice } from './version-slice'
+import type { WorkflowDraftSliceShape } from './workflow-draft-slice'
+import { createWorkflowDraftSlice } from './workflow-draft-slice'
+import type { WorkflowSliceShape } from './workflow-slice'
+import { createWorkflowSlice } from './workflow-slice'
+import type { InspectVarsSliceShape } from './debug/inspect-vars-slice'
+import { createInspectVarsSlice } from './debug/inspect-vars-slice'
+
+import { WorkflowContext } from '@/app/components/workflow/context'
+import type { LayoutSliceShape } from './layout-slice'
+import { createLayoutSlice } from './layout-slice'
+import type { WorkflowSliceShape as WorkflowAppSliceShape } from '@/app/components/workflow-app/store/workflow/workflow-slice'
+import type { RagPipelineSliceShape } from '@/app/components/rag-pipeline/store'
+
+export type SliceFromInjection
+  = Partial<WorkflowAppSliceShape>
+  & Partial<RagPipelineSliceShape>
+
+export type Shape
+  = ChatVariableSliceShape
+  & EnvVariableSliceShape
+  & FormSliceShape
+  & HelpLineSliceShape
+  & HistorySliceShape
+  & NodeSliceShape
+  & PanelSliceShape
+  & ToolSliceShape
+  & VersionSliceShape
+  & WorkflowDraftSliceShape
+  & WorkflowSliceShape
+  & InspectVarsSliceShape
+  & LayoutSliceShape
+  & SliceFromInjection
+
+export type InjectWorkflowStoreSliceFn = StateCreator<SliceFromInjection>
+
+type CreateWorkflowStoreParams = {
+  injectWorkflowStoreSliceFn?: InjectWorkflowStoreSliceFn
+}
+
+export const createWorkflowStore = (params: CreateWorkflowStoreParams) => {
+  const { injectWorkflowStoreSliceFn } = params || {}
+
+  return createStore<Shape>((...args) => ({
+    ...createChatVariableSlice(...args),
+    ...createEnvVariableSlice(...args),
+    ...createFormSlice(...args),
+    ...createHelpLineSlice(...args),
+    ...createHistorySlice(...args),
+    ...createNodeSlice(...args),
+    ...createPanelSlice(...args),
+    ...createToolSlice(...args),
+    ...createVersionSlice(...args),
+    ...createWorkflowDraftSlice(...args),
+    ...createWorkflowSlice(...args),
+    ...createInspectVarsSlice(...args),
+    ...createLayoutSlice(...args),
+    ...(injectWorkflowStoreSliceFn?.(...args) || {} as SliceFromInjection),
+  }))
+}
+
+export function useStore<T>(selector: (state: Shape) => T): T {
+  const store = useContext(WorkflowContext)
+  if (!store)
+    throw new Error('Missing WorkflowContext.Provider in the tree')
+
+  return useZustandStore(store, selector)
+}
+
+export const useWorkflowStore = () => {
+  return useContext(WorkflowContext)!
+}

dify/web/app/components/workflow/store/workflow/layout-slice.ts

@@ -0,0 +1,48 @@
+import type { StateCreator } from 'zustand'
+
+export type LayoutSliceShape = {
+  workflowCanvasWidth?: number
+  workflowCanvasHeight?: number
+  setWorkflowCanvasWidth: (width: number) => void
+  setWorkflowCanvasHeight: (height: number) => void
+  // rightPanelWidth - otherPanelWidth = nodePanelWidth
+  rightPanelWidth?: number
+  setRightPanelWidth: (width: number) => void
+  nodePanelWidth: number
+  setNodePanelWidth: (width: number) => void
+  previewPanelWidth: number
+  setPreviewPanelWidth: (width: number) => void
+  otherPanelWidth: number
+  setOtherPanelWidth: (width: number) => void
+  bottomPanelWidth: number // min-width = 400px; default-width = auto || 480px;
+  setBottomPanelWidth: (width: number) => void
+  bottomPanelHeight: number
+  setBottomPanelHeight: (height: number) => void
+  variableInspectPanelHeight: number // min-height = 120px; default-height = 320px;
+  setVariableInspectPanelHeight: (height: number) => void
+  maximizeCanvas: boolean
+  setMaximizeCanvas: (maximize: boolean) => void
+}
+
+export const createLayoutSlice: StateCreator<LayoutSliceShape> = set => ({
+  workflowCanvasWidth: undefined,
+  workflowCanvasHeight: undefined,
+  setWorkflowCanvasWidth: width => set(() => ({ workflowCanvasWidth: width })),
+  setWorkflowCanvasHeight: height => set(() => ({ workflowCanvasHeight: height })),
+  rightPanelWidth: undefined,
+  setRightPanelWidth: width => set(() => ({ rightPanelWidth: width })),
+  nodePanelWidth: localStorage.getItem('workflow-node-panel-width') ? Number.parseFloat(localStorage.getItem('workflow-node-panel-width')!) : 400,
+  setNodePanelWidth: width => set(() => ({ nodePanelWidth: width })),
+  previewPanelWidth: localStorage.getItem('debug-and-preview-panel-width') ? Number.parseFloat(localStorage.getItem('debug-and-preview-panel-width')!) : 400,
+  setPreviewPanelWidth: width => set(() => ({ previewPanelWidth: width })),
+  otherPanelWidth: 400,
+  setOtherPanelWidth: width => set(() => ({ otherPanelWidth: width })),
+  bottomPanelWidth: 480,
+  setBottomPanelWidth: width => set(() => ({ bottomPanelWidth: width })),
+  bottomPanelHeight: 324,
+  setBottomPanelHeight: height => set(() => ({ bottomPanelHeight: height })),
+  variableInspectPanelHeight: localStorage.getItem('workflow-variable-inpsect-panel-height') ? Number.parseFloat(localStorage.getItem('workflow-variable-inpsect-panel-height')!) : 320,
+  setVariableInspectPanelHeight: height => set(() => ({ variableInspectPanelHeight: height })),
+  maximizeCanvas: localStorage.getItem('workflow-canvas-maximize') === 'true',
+  setMaximizeCanvas: maximize => set(() => ({ maximizeCanvas: maximize })),
+})

dify/web/app/components/workflow/store/workflow/node-slice.ts

@@ -0,0 +1,83 @@
+import type { StateCreator } from 'zustand'
+import type {
+  Node,
+} from '@/app/components/workflow/types'
+import type {
+  VariableAssignerNodeType,
+} from '@/app/components/workflow/nodes/variable-assigner/types'
+import type {
+  NodeTracing,
+} from '@/types/workflow'
+
+export type NodeSliceShape = {
+  showSingleRunPanel: boolean
+  setShowSingleRunPanel: (showSingleRunPanel: boolean) => void
+  nodeAnimation: boolean
+  setNodeAnimation: (nodeAnimation: boolean) => void
+  candidateNode?: Node
+  setCandidateNode: (candidateNode?: Node) => void
+  nodeMenu?: {
+    top: number
+    left: number
+    nodeId: string
+  }
+  setNodeMenu: (nodeMenu: NodeSliceShape['nodeMenu']) => void
+  showAssignVariablePopup?: {
+    nodeId: string
+    nodeData: Node['data']
+    variableAssignerNodeId: string
+    variableAssignerNodeData: VariableAssignerNodeType
+    variableAssignerNodeHandleId: string
+    parentNode?: Node
+    x: number
+    y: number
+  }
+  setShowAssignVariablePopup: (showAssignVariablePopup: NodeSliceShape['showAssignVariablePopup']) => void
+  hoveringAssignVariableGroupId?: string
+  setHoveringAssignVariableGroupId: (hoveringAssignVariableGroupId?: string) => void
+  connectingNodePayload?: { nodeId: string; nodeType: string; handleType: string; handleId: string | null }
+  setConnectingNodePayload: (startConnectingPayload?: NodeSliceShape['connectingNodePayload']) => void
+  enteringNodePayload?: {
+    nodeId: string
+    nodeData: VariableAssignerNodeType
+  }
+  setEnteringNodePayload: (enteringNodePayload?: NodeSliceShape['enteringNodePayload']) => void
+  iterTimes: number
+  setIterTimes: (iterTimes: number) => void
+  loopTimes: number
+  setLoopTimes: (loopTimes: number) => void
+  iterParallelLogMap: Map<string, Map<string, NodeTracing[]>>
+  setIterParallelLogMap: (iterParallelLogMap: Map<string, Map<string, NodeTracing[]>>) => void
+  pendingSingleRun?: {
+    nodeId: string
+    action: 'run' | 'stop'
+  }
+  setPendingSingleRun: (payload?: NodeSliceShape['pendingSingleRun']) => void
+}
+
+export const createNodeSlice: StateCreator<NodeSliceShape> = set => ({
+  showSingleRunPanel: false,
+  setShowSingleRunPanel: showSingleRunPanel => set(() => ({ showSingleRunPanel })),
+  nodeAnimation: false,
+  setNodeAnimation: nodeAnimation => set(() => ({ nodeAnimation })),
+  candidateNode: undefined,
+  setCandidateNode: candidateNode => set(() => ({ candidateNode })),
+  nodeMenu: undefined,
+  setNodeMenu: nodeMenu => set(() => ({ nodeMenu })),
+  showAssignVariablePopup: undefined,
+  setShowAssignVariablePopup: showAssignVariablePopup => set(() => ({ showAssignVariablePopup })),
+  hoveringAssignVariableGroupId: undefined,
+  setHoveringAssignVariableGroupId: hoveringAssignVariableGroupId => set(() => ({ hoveringAssignVariableGroupId })),
+  connectingNodePayload: undefined,
+  setConnectingNodePayload: connectingNodePayload => set(() => ({ connectingNodePayload })),
+  enteringNodePayload: undefined,
+  setEnteringNodePayload: enteringNodePayload => set(() => ({ enteringNodePayload })),
+  iterTimes: 1,
+  setIterTimes: iterTimes => set(() => ({ iterTimes })),
+  loopTimes: 1,
+  setLoopTimes: loopTimes => set(() => ({ loopTimes })),
+  iterParallelLogMap: new Map<string, Map<string, NodeTracing[]>>(),
+  setIterParallelLogMap: iterParallelLogMap => set(() => ({ iterParallelLogMap })),
+  pendingSingleRun: undefined,
+  setPendingSingleRun: payload => set(() => ({ pendingSingleRun: payload })),
+})

dify/web/app/components/workflow/store/workflow/panel-slice.ts

@@ -0,0 +1,47 @@
+import type { StateCreator } from 'zustand'
+
+export type PanelSliceShape = {
+  panelWidth: number
+  showFeaturesPanel: boolean
+  setShowFeaturesPanel: (showFeaturesPanel: boolean) => void
+  showWorkflowVersionHistoryPanel: boolean
+  setShowWorkflowVersionHistoryPanel: (showWorkflowVersionHistoryPanel: boolean) => void
+  showInputsPanel: boolean
+  setShowInputsPanel: (showInputsPanel: boolean) => void
+  showDebugAndPreviewPanel: boolean
+  setShowDebugAndPreviewPanel: (showDebugAndPreviewPanel: boolean) => void
+  panelMenu?: {
+    top: number
+    left: number
+  }
+  setPanelMenu: (panelMenu: PanelSliceShape['panelMenu']) => void
+  selectionMenu?: {
+    top: number
+    left: number
+  }
+  setSelectionMenu: (selectionMenu: PanelSliceShape['selectionMenu']) => void
+  showVariableInspectPanel: boolean
+  setShowVariableInspectPanel: (showVariableInspectPanel: boolean) => void
+  initShowLastRunTab: boolean
+  setInitShowLastRunTab: (initShowLastRunTab: boolean) => void
+}
+
+export const createPanelSlice: StateCreator<PanelSliceShape> = set => ({
+  panelWidth: localStorage.getItem('workflow-node-panel-width') ? Number.parseFloat(localStorage.getItem('workflow-node-panel-width')!) : 420,
+  showFeaturesPanel: false,
+  setShowFeaturesPanel: showFeaturesPanel => set(() => ({ showFeaturesPanel })),
+  showWorkflowVersionHistoryPanel: false,
+  setShowWorkflowVersionHistoryPanel: showWorkflowVersionHistoryPanel => set(() => ({ showWorkflowVersionHistoryPanel })),
+  showInputsPanel: false,
+  setShowInputsPanel: showInputsPanel => set(() => ({ showInputsPanel })),
+  showDebugAndPreviewPanel: false,
+  setShowDebugAndPreviewPanel: showDebugAndPreviewPanel => set(() => ({ showDebugAndPreviewPanel })),
+  panelMenu: undefined,
+  setPanelMenu: panelMenu => set(() => ({ panelMenu })),
+  selectionMenu: undefined,
+  setSelectionMenu: selectionMenu => set(() => ({ selectionMenu })),
+  showVariableInspectPanel: false,
+  setShowVariableInspectPanel: showVariableInspectPanel => set(() => ({ showVariableInspectPanel })),
+  initShowLastRunTab: false,
+  setInitShowLastRunTab: initShowLastRunTab => set(() => ({ initShowLastRunTab })),
+})

dify/web/app/components/workflow/store/workflow/tool-slice.ts

@@ -0,0 +1,24 @@
+import type { StateCreator } from 'zustand'
+import type { ToolWithProvider } from '../../types'
+
+export type ToolSliceShape = {
+  toolPublished: boolean
+  setToolPublished: (toolPublished: boolean) => void
+  lastPublishedHasUserInput: boolean
+  setLastPublishedHasUserInput: (hasUserInput: boolean) => void
+  buildInTools?: ToolWithProvider[]
+  customTools?: ToolWithProvider[]
+  workflowTools?: ToolWithProvider[]
+  mcpTools?: ToolWithProvider[]
+}
+
+export const createToolSlice: StateCreator<ToolSliceShape> = set => ({
+  toolPublished: false,
+  setToolPublished: toolPublished => set(() => ({ toolPublished })),
+  lastPublishedHasUserInput: false,
+  setLastPublishedHasUserInput: hasUserInput => set(() => ({ lastPublishedHasUserInput: hasUserInput })),
+  buildInTools: undefined,
+  customTools: undefined,
+  workflowTools: undefined,
+  mcpTools: undefined,
+})

dify/web/app/components/workflow/store/workflow/use-nodes.ts

@@ -0,0 +1,7 @@
+import {
+  useStore,
+} from '@/app/components/workflow/store'
+
+const useWorkflowNodes = () => useStore(s => s.nodes)
+
+export default useWorkflowNodes

dify/web/app/components/workflow/store/workflow/version-slice.ts

@@ -0,0 +1,26 @@
+import type { StateCreator } from 'zustand'
+import type {
+  VersionHistory,
+} from '@/types/workflow'
+
+export type VersionSliceShape = {
+  draftUpdatedAt: number
+  setDraftUpdatedAt: (draftUpdatedAt: number) => void
+  publishedAt: number
+  setPublishedAt: (publishedAt: number) => void
+  currentVersion: VersionHistory | null
+  setCurrentVersion: (currentVersion: VersionHistory) => void
+  isRestoring: boolean
+  setIsRestoring: (isRestoring: boolean) => void
+}
+
+export const createVersionSlice: StateCreator<VersionSliceShape> = set => ({
+  draftUpdatedAt: 0,
+  setDraftUpdatedAt: draftUpdatedAt => set(() => ({ draftUpdatedAt: draftUpdatedAt ? draftUpdatedAt * 1000 : 0 })),
+  publishedAt: 0,
+  setPublishedAt: publishedAt => set(() => ({ publishedAt: publishedAt ? publishedAt * 1000 : 0 })),
+  currentVersion: null,
+  setCurrentVersion: currentVersion => set(() => ({ currentVersion })),
+  isRestoring: false,
+  setIsRestoring: isRestoring => set(() => ({ isRestoring })),
+})

dify/web/app/components/workflow/store/workflow/workflow-draft-slice.ts

@@ -0,0 +1,44 @@
+import type { StateCreator } from 'zustand'
+import { debounce } from 'lodash-es'
+import type { Viewport } from 'reactflow'
+import type {
+  Edge,
+  EnvironmentVariable,
+  Node,
+} from '@/app/components/workflow/types'
+
+export type WorkflowDraftSliceShape = {
+  backupDraft?: {
+    nodes: Node[]
+    edges: Edge[]
+    viewport: Viewport
+    features?: Record<string, any>
+    environmentVariables: EnvironmentVariable[]
+  }
+  setBackupDraft: (backupDraft?: WorkflowDraftSliceShape['backupDraft']) => void
+  debouncedSyncWorkflowDraft: (fn: () => void) => void
+  syncWorkflowDraftHash: string
+  setSyncWorkflowDraftHash: (hash: string) => void
+  isSyncingWorkflowDraft: boolean
+  setIsSyncingWorkflowDraft: (isSyncingWorkflowDraft: boolean) => void
+  isWorkflowDataLoaded: boolean
+  setIsWorkflowDataLoaded: (loaded: boolean) => void
+  nodes: Node[]
+  setNodes: (nodes: Node[]) => void
+}
+
+export const createWorkflowDraftSlice: StateCreator<WorkflowDraftSliceShape> = set => ({
+  backupDraft: undefined,
+  setBackupDraft: backupDraft => set(() => ({ backupDraft })),
+  debouncedSyncWorkflowDraft: debounce((syncWorkflowDraft) => {
+    syncWorkflowDraft()
+  }, 5000),
+  syncWorkflowDraftHash: '',
+  setSyncWorkflowDraftHash: syncWorkflowDraftHash => set(() => ({ syncWorkflowDraftHash })),
+  isSyncingWorkflowDraft: false,
+  setIsSyncingWorkflowDraft: isSyncingWorkflowDraft => set(() => ({ isSyncingWorkflowDraft })),
+  isWorkflowDataLoaded: false,
+  setIsWorkflowDataLoaded: loaded => set(() => ({ isWorkflowDataLoaded: loaded })),
+  nodes: [],
+  setNodes: nodes => set(() => ({ nodes })),
+})

dify/web/app/components/workflow/store/workflow/workflow-slice.ts

@@ -0,0 +1,81 @@
+import type { StateCreator } from 'zustand'
+import type {
+  Node,
+  TriggerNodeType,
+  WorkflowRunningData,
+} from '@/app/components/workflow/types'
+import type { FileUploadConfigResponse } from '@/models/common'
+
+type PreviewRunningData = WorkflowRunningData & {
+  resultTabActive?: boolean
+  resultText?: string
+}
+
+export type WorkflowSliceShape = {
+  workflowRunningData?: PreviewRunningData
+  setWorkflowRunningData: (workflowData: PreviewRunningData) => void
+  isListening: boolean
+  setIsListening: (listening: boolean) => void
+  listeningTriggerType: TriggerNodeType | null
+  setListeningTriggerType: (triggerType: TriggerNodeType | null) => void
+  listeningTriggerNodeId: string | null
+  setListeningTriggerNodeId: (nodeId: string | null) => void
+  listeningTriggerNodeIds: string[]
+  setListeningTriggerNodeIds: (nodeIds: string[]) => void
+  listeningTriggerIsAll: boolean
+  setListeningTriggerIsAll: (isAll: boolean) => void
+  clipboardElements: Node[]
+  setClipboardElements: (clipboardElements: Node[]) => void
+  selection: null | { x1: number; y1: number; x2: number; y2: number }
+  setSelection: (selection: WorkflowSliceShape['selection']) => void
+  bundleNodeSize: { width: number; height: number } | null
+  setBundleNodeSize: (bundleNodeSize: WorkflowSliceShape['bundleNodeSize']) => void
+  controlMode: 'pointer' | 'hand'
+  setControlMode: (controlMode: WorkflowSliceShape['controlMode']) => void
+  mousePosition: { pageX: number; pageY: number; elementX: number; elementY: number }
+  setMousePosition: (mousePosition: WorkflowSliceShape['mousePosition']) => void
+  showConfirm?: { title: string; desc?: string; onConfirm: () => void }
+  setShowConfirm: (showConfirm: WorkflowSliceShape['showConfirm']) => void
+  controlPromptEditorRerenderKey: number
+  setControlPromptEditorRerenderKey: (controlPromptEditorRerenderKey: number) => void
+  showImportDSLModal: boolean
+  setShowImportDSLModal: (showImportDSLModal: boolean) => void
+  fileUploadConfig?: FileUploadConfigResponse
+  setFileUploadConfig: (fileUploadConfig: FileUploadConfigResponse) => void
+}
+
+export const createWorkflowSlice: StateCreator<WorkflowSliceShape> = set => ({
+  workflowRunningData: undefined,
+  setWorkflowRunningData: workflowRunningData => set(() => ({ workflowRunningData })),
+  isListening: false,
+  setIsListening: listening => set(() => ({ isListening: listening })),
+  listeningTriggerType: null,
+  setListeningTriggerType: triggerType => set(() => ({ listeningTriggerType: triggerType })),
+  listeningTriggerNodeId: null,
+  setListeningTriggerNodeId: nodeId => set(() => ({ listeningTriggerNodeId: nodeId })),
+  listeningTriggerNodeIds: [],
+  setListeningTriggerNodeIds: nodeIds => set(() => ({ listeningTriggerNodeIds: nodeIds })),
+  listeningTriggerIsAll: false,
+  setListeningTriggerIsAll: isAll => set(() => ({ listeningTriggerIsAll: isAll })),
+  clipboardElements: [],
+  setClipboardElements: clipboardElements => set(() => ({ clipboardElements })),
+  selection: null,
+  setSelection: selection => set(() => ({ selection })),
+  bundleNodeSize: null,
+  setBundleNodeSize: bundleNodeSize => set(() => ({ bundleNodeSize })),
+  controlMode: localStorage.getItem('workflow-operation-mode') === 'pointer' ? 'pointer' : 'hand',
+  setControlMode: (controlMode) => {
+    set(() => ({ controlMode }))
+    localStorage.setItem('workflow-operation-mode', controlMode)
+  },
+  mousePosition: { pageX: 0, pageY: 0, elementX: 0, elementY: 0 },
+  setMousePosition: mousePosition => set(() => ({ mousePosition })),
+  showConfirm: undefined,
+  setShowConfirm: showConfirm => set(() => ({ showConfirm })),
+  controlPromptEditorRerenderKey: 0,
+  setControlPromptEditorRerenderKey: controlPromptEditorRerenderKey => set(() => ({ controlPromptEditorRerenderKey })),
+  showImportDSLModal: false,
+  setShowImportDSLModal: showImportDSLModal => set(() => ({ showImportDSLModal })),
+  fileUploadConfig: undefined,
+  setFileUploadConfig: fileUploadConfig => set(() => ({ fileUploadConfig })),
+})