diff --git a/web/app/components/workflow-app/components/workflow-main.tsx b/web/app/components/workflow-app/components/workflow-main.tsx
index 6be190c897..c0747d43cd 100644
--- a/web/app/components/workflow-app/components/workflow-main.tsx
+++ b/web/app/components/workflow-app/components/workflow-main.tsx
@@ -8,6 +8,7 @@ import type { WorkflowProps } from '@/app/components/workflow'
 import WorkflowChildren from './workflow-children'
 import {
   useNodesSyncDraft,
+  useSetWorkflowVarsWithValue,
   useWorkflowRefreshDraft,
   useWorkflowRun,
   useWorkflowStartRun,
@@ -61,6 +62,7 @@ const WorkflowMain = ({
     handleWorkflowStartRunInChatflow,
     handleWorkflowStartRunInWorkflow,
   } = useWorkflowStartRun()
+  const { fetchInspectVars } = useSetWorkflowVarsWithValue()
 
   const hooksStore = useMemo(() => {
     return {
@@ -75,6 +77,7 @@ const WorkflowMain = ({
       handleStartWorkflowRun,
       handleWorkflowStartRunInChatflow,
       handleWorkflowStartRunInWorkflow,
+      fetchInspectVars,
     }
   }, [
     syncWorkflowDraftWhenPageClose,
@@ -88,6 +91,7 @@ const WorkflowMain = ({
     handleStartWorkflowRun,
     handleWorkflowStartRunInChatflow,
     handleWorkflowStartRunInWorkflow,
+    fetchInspectVars,
   ])
 
   return (
diff --git a/web/app/components/workflow-app/hooks/index.ts b/web/app/components/workflow-app/hooks/index.ts
index 6373a8591c..1b2d9bee97 100644
--- a/web/app/components/workflow-app/hooks/index.ts
+++ b/web/app/components/workflow-app/hooks/index.ts
@@ -5,3 +5,4 @@ export * from './use-workflow-run'
 export * from './use-workflow-start-run'
 export * from './use-is-chat-mode'
 export * from './use-workflow-refresh-draft'
+export * from './use-fetch-workflow-inspect-vars'
diff --git a/web/app/components/workflow-app/hooks/use-fetch-workflow-inspect-vars.ts b/web/app/components/workflow-app/hooks/use-fetch-workflow-inspect-vars.ts
index 9d3ff84929..222f32b215 100644
--- a/web/app/components/workflow-app/hooks/use-fetch-workflow-inspect-vars.ts
+++ b/web/app/components/workflow-app/hooks/use-fetch-workflow-inspect-vars.ts
@@ -1,11 +1,12 @@
 import type { NodeWithVar, VarInInspect } from '@/types/workflow'
-import { useWorkflowStore } from '../../workflow/store'
+import { useWorkflowStore } from '@/app/components/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 = () => {
+import { useNodesInteractionsWithoutSync } from '@/app/components/workflow/hooks/use-nodes-interactions-without-sync'
+
+export const useSetWorkflowVarsWithValue = () => {
   const workflowStore = useWorkflowStore()
   const { setNodesWithInspectVars, appId } = workflowStore.getState()
   const store = useStoreApi()
@@ -64,5 +65,3 @@ const useSetWorkflowVarsWithValue = () => {
     fetchInspectVars,
   }
 }
-
-export default useSetWorkflowVarsWithValue
diff --git a/web/app/components/workflow-app/hooks/use-workflow-run.ts b/web/app/components/workflow-app/hooks/use-workflow-run.ts
index 99b88238f1..361d6375c1 100644
--- a/web/app/components/workflow-app/hooks/use-workflow-run.ts
+++ b/web/app/components/workflow-app/hooks/use-workflow-run.ts
@@ -20,7 +20,7 @@ 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'
+import { useSetWorkflowVarsWithValue } from '@/app/components/workflow/hooks/use-set-workflow-vars-with-value'
 
 export const useWorkflowRun = () => {
   const store = useStoreApi()
diff --git a/web/app/components/workflow/hooks-store/store.ts b/web/app/components/workflow/hooks-store/store.ts
index 9f5e1a6650..e775afcc00 100644
--- a/web/app/components/workflow/hooks-store/store.ts
+++ b/web/app/components/workflow/hooks-store/store.ts
@@ -7,6 +7,7 @@ import {
 } from 'zustand'
 import { createStore } from 'zustand/vanilla'
 import { HooksStoreContext } from './provider'
+import type { IOtherOptions } from '@/service/base'
 
 type CommonHooksFnMap = {
   doSyncWorkflowDraft: (
@@ -22,11 +23,12 @@ type CommonHooksFnMap = {
   handleBackupDraft: () => void
   handleLoadBackupDraft: () => void
   handleRestoreFromPublishedWorkflow: (...args: any[]) => void
-  handleRun: (...args: any[]) => void
+  handleRun: (params: any, callback?: IOtherOptions,) => void
   handleStopRun: (...args: any[]) => void
   handleStartWorkflowRun: () => void
   handleWorkflowStartRunInWorkflow: () => void
   handleWorkflowStartRunInChatflow: () => void
+  fetchInspectVars: () => Promise<void>
 }
 
 export type Shape = {
@@ -45,6 +47,7 @@ export const createHooksStore = ({
   handleStartWorkflowRun = noop,
   handleWorkflowStartRunInWorkflow = noop,
   handleWorkflowStartRunInChatflow = noop,
+  fetchInspectVars = async () => noop(),
 }: Partial<Shape>) => {
   return createStore<Shape>(set => ({
     refreshAll: props => set(state => ({ ...state, ...props })),
@@ -59,6 +62,7 @@ export const createHooksStore = ({
     handleStartWorkflowRun,
     handleWorkflowStartRunInWorkflow,
     handleWorkflowStartRunInChatflow,
+    fetchInspectVars,
   }))
 }
 
diff --git a/web/app/components/workflow/hooks/index.ts b/web/app/components/workflow/hooks/index.ts
index fda0f50aa6..c2eebb0533 100644
--- a/web/app/components/workflow/hooks/index.ts
+++ b/web/app/components/workflow/hooks/index.ts
@@ -17,3 +17,5 @@ export * from './use-workflow-interactions'
 export * from './use-workflow-mode'
 export * from './use-format-time-from-now'
 export * from './use-workflow-refresh-draft'
+export * from './use-inspect-vars-crud'
+export * from './use-set-workflow-vars-with-value'
diff --git a/web/app/components/workflow/hooks/use-set-workflow-vars-with-value.ts b/web/app/components/workflow/hooks/use-set-workflow-vars-with-value.ts
new file mode 100644
index 0000000000..83147e7610
--- /dev/null
+++ b/web/app/components/workflow/hooks/use-set-workflow-vars-with-value.ts
@@ -0,0 +1,9 @@
+import { useHooksStore } from '@/app/components/workflow/hooks-store'
+
+export const useSetWorkflowVarsWithValue = () => {
+  const fetchInspectVars = useHooksStore(s => s.doSyncWorkflowDraft)
+
+  return {
+    fetchInspectVars,
+  }
+}
diff --git a/web/app/components/workflow/index.tsx b/web/app/components/workflow/index.tsx
index 429d07853d..8631eb58e3 100644
--- a/web/app/components/workflow/index.tsx
+++ b/web/app/components/workflow/index.tsx
@@ -42,6 +42,7 @@ import {
   useNodesSyncDraft,
   usePanelInteractions,
   useSelectionInteractions,
+  useSetWorkflowVarsWithValue,
   useShortcuts,
   useWorkflow,
   useWorkflowReadOnly,
@@ -82,7 +83,6 @@ 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 useSetWorkflowVarsWithValue from '../workflow-app/hooks/use-fetch-workflow-inspect-vars'
 
 const nodeTypes = {
   [CUSTOM_NODE]: CustomNode,
diff --git a/web/app/components/workflow/panel/debug-and-preview/hooks.ts b/web/app/components/workflow/panel/debug-and-preview/hooks.ts
index 8464d04425..26d604ef11 100644
--- a/web/app/components/workflow/panel/debug-and-preview/hooks.ts
+++ b/web/app/components/workflow/panel/debug-and-preview/hooks.ts
@@ -8,7 +8,10 @@ import {
 import { useTranslation } from 'react-i18next'
 import { produce, setAutoFreeze } from 'immer'
 import { uniqBy } from 'lodash-es'
-import { useWorkflowRun } from '../../hooks'
+import {
+  useSetWorkflowVarsWithValue,
+  useWorkflowRun,
+} from '../../hooks'
 import { NodeRunningStatus, WorkflowRunningStatus } from '../../types'
 import { useWorkflowStore } from '../../store'
 import { DEFAULT_ITER_TIMES, DEFAULT_LOOP_TIMES } from '../../constants'
@@ -32,7 +35,6 @@ import type { FileEntity } from '@/app/components/base/file-uploader/types'
 import { getThreadMessages } from '@/app/components/base/chat/utils'
 import { useInvalidAllLastRun } from '@/service/use-workflow'
 import { useParams } from 'next/navigation'
-import useSetWorkflowVarsWithValue from '@/app/components/workflow-app/hooks/use-fetch-workflow-inspect-vars'
 
 type GetAbortController = (abortController: AbortController) => void
 type SendCallback = {
@@ -499,7 +501,7 @@ export const useChat = (
         },
       },
     )
-  }, [threadMessages, chatTree.length, updateCurrentQAOnTree, handleResponding, formSettings?.inputsForm, handleRun, notify, t, config?.suggested_questions_after_answer?.enabled])
+  }, [threadMessages, chatTree.length, updateCurrentQAOnTree, handleResponding, formSettings?.inputsForm, handleRun, notify, t, config?.suggested_questions_after_answer?.enabled, fetchInspectVars, invalidAllLastRun])
 
   return {
     conversationId: conversationId.current,