dify

dify/web/app/components/workflow-app/hooks/index.ts

@@ -0,0 +1,13 @@
+export * from './use-workflow-init'
+export * from './use-workflow-template'
+export * from './use-nodes-sync-draft'
+export * from './use-workflow-run'
+export * from './use-workflow-start-run'
+export * from './use-is-chat-mode'
+export * from './use-available-nodes-meta-data'
+export * from './use-workflow-refresh-draft'
+export * from './use-get-run-and-trace-url'
+export * from './use-DSL'
+export * from '../../workflow/hooks/use-fetch-workflow-inspect-vars'
+export * from './use-inspect-vars-crud'
+export * from './use-configs-map'

dify/web/app/components/workflow-app/hooks/use-DSL.ts

@@ -0,0 +1,82 @@
+import {
+  useCallback,
+  useState,
+} from 'react'
+import { useTranslation } from 'react-i18next'
+import {
+  DSL_EXPORT_CHECK,
+} from '@/app/components/workflow/constants'
+import { useNodesSyncDraft } from './use-nodes-sync-draft'
+import { useEventEmitterContextContext } from '@/context/event-emitter'
+import { fetchWorkflowDraft } from '@/service/workflow'
+import { exportAppConfig } from '@/service/apps'
+import { useToastContext } from '@/app/components/base/toast'
+import { useStore as useAppStore } from '@/app/components/app/store'
+
+export const useDSL = () => {
+  const { t } = useTranslation()
+  const { notify } = useToastContext()
+  const { eventEmitter } = useEventEmitterContextContext()
+  const [exporting, setExporting] = useState(false)
+  const { doSyncWorkflowDraft } = useNodesSyncDraft()
+
+  const appDetail = useAppStore(s => s.appDetail)
+
+  const handleExportDSL = useCallback(async (include = false, workflowId?: string) => {
+    if (!appDetail)
+      return
+
+    if (exporting)
+      return
+
+    try {
+      setExporting(true)
+      await doSyncWorkflowDraft()
+      const { data } = await exportAppConfig({
+        appID: appDetail.id,
+        include,
+        workflowID: workflowId,
+      })
+      const a = document.createElement('a')
+      const file = new Blob([data], { type: 'application/yaml' })
+      const url = URL.createObjectURL(file)
+      a.href = url
+      a.download = `${appDetail.name}.yml`
+      a.click()
+      URL.revokeObjectURL(url)
+    }
+    catch {
+      notify({ type: 'error', message: t('app.exportFailed') })
+    }
+    finally {
+      setExporting(false)
+    }
+  }, [appDetail, notify, t, doSyncWorkflowDraft, exporting])
+
+  const exportCheck = useCallback(async () => {
+    if (!appDetail)
+      return
+    try {
+      const workflowDraft = await fetchWorkflowDraft(`/apps/${appDetail?.id}/workflows/draft`)
+      const list = (workflowDraft.environment_variables || []).filter(env => env.value_type === 'secret')
+      if (list.length === 0) {
+        handleExportDSL()
+        return
+      }
+      eventEmitter?.emit({
+        type: DSL_EXPORT_CHECK,
+        payload: {
+          data: list,
+        },
+      } as any)
+    }
+    catch {
+      notify({ type: 'error', message: t('app.exportFailed') })
+    }
+  }, [appDetail, eventEmitter, handleExportDSL, notify, t])
+
+  return {
+    exportCheck,
+    handleExportDSL,
+  }
+}

dify/web/app/components/workflow-app/hooks/use-auto-onboarding.ts

@@ -0,0 +1,68 @@
+import { useCallback, useEffect } from 'react'
+import { useStoreApi } from 'reactflow'
+import { useWorkflowStore } from '@/app/components/workflow/store'
+
+export const useAutoOnboarding = () => {
+  const store = useStoreApi()
+  const workflowStore = useWorkflowStore()
+
+  const checkAndShowOnboarding = useCallback(() => {
+    const { getNodes } = store.getState()
+    const {
+      showOnboarding,
+      hasShownOnboarding,
+      notInitialWorkflow,
+      setShowOnboarding,
+      setHasShownOnboarding,
+      setShouldAutoOpenStartNodeSelector,
+    } = workflowStore.getState()
+
+    // Skip if already showing onboarding or it's the initial workflow creation
+    if (showOnboarding || notInitialWorkflow)
+      return
+
+    const nodes = getNodes()
+
+    // Check if canvas is completely empty (no nodes at all)
+    // Only trigger onboarding when canvas is completely blank to avoid data loss
+    const isCompletelyEmpty = nodes.length === 0
+
+    // Show onboarding only if canvas is completely empty and we haven't shown it before in this session
+    if (isCompletelyEmpty && !hasShownOnboarding) {
+      setShowOnboarding?.(true)
+      setHasShownOnboarding?.(true)
+      setShouldAutoOpenStartNodeSelector?.(true)
+    }
+  }, [store, workflowStore])
+
+  const handleOnboardingClose = useCallback(() => {
+    const {
+      setShowOnboarding,
+      setHasShownOnboarding,
+      setShouldAutoOpenStartNodeSelector,
+      hasSelectedStartNode,
+      setHasSelectedStartNode,
+    } = workflowStore.getState()
+    setShowOnboarding?.(false)
+    setHasShownOnboarding?.(true)
+    if (hasSelectedStartNode)
+      setHasSelectedStartNode?.(false)
+    else
+      setShouldAutoOpenStartNodeSelector?.(false)
+  }, [workflowStore])
+
+  // Check on mount and when nodes change
+  useEffect(() => {
+    // Small delay to ensure the workflow data is loaded
+    const timer = setTimeout(() => {
+      checkAndShowOnboarding()
+    }, 500)
+
+    return () => clearTimeout(timer)
+  }, [checkAndShowOnboarding])
+
+  return {
+    checkAndShowOnboarding,
+    handleOnboardingClose,
+  }
+}

dify/web/app/components/workflow-app/hooks/use-available-nodes-meta-data.ts

@@ -0,0 +1,78 @@
+import { useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useDocLink } from '@/context/i18n'
+import StartDefault from '@/app/components/workflow/nodes/start/default'
+import TriggerWebhookDefault from '@/app/components/workflow/nodes/trigger-webhook/default'
+import TriggerScheduleDefault from '@/app/components/workflow/nodes/trigger-schedule/default'
+import TriggerPluginDefault from '@/app/components/workflow/nodes/trigger-plugin/default'
+import EndDefault from '@/app/components/workflow/nodes/end/default'
+import AnswerDefault from '@/app/components/workflow/nodes/answer/default'
+import { WORKFLOW_COMMON_NODES } from '@/app/components/workflow/constants/node'
+import type { AvailableNodesMetaData } from '@/app/components/workflow/hooks-store/store'
+import { useIsChatMode } from './use-is-chat-mode'
+import { BlockEnum } from '@/app/components/workflow/types'
+
+export const useAvailableNodesMetaData = () => {
+  const { t } = useTranslation()
+  const isChatMode = useIsChatMode()
+  const docLink = useDocLink()
+
+  const startNodeMetaData = useMemo(() => ({
+    ...StartDefault,
+    metaData: {
+      ...StartDefault.metaData,
+      isUndeletable: isChatMode, // start node is undeletable in chat mode, @use-nodes-interactions: handleNodeDelete function
+    },
+  }), [isChatMode])
+
+  const mergedNodesMetaData = useMemo(() => [
+    ...WORKFLOW_COMMON_NODES,
+    startNodeMetaData,
+    ...(
+      isChatMode
+        ? [AnswerDefault]
+        : [
+          EndDefault,
+          TriggerWebhookDefault,
+          TriggerScheduleDefault,
+          TriggerPluginDefault,
+        ]
+    ),
+  ], [isChatMode, startNodeMetaData])
+
+  const availableNodesMetaData = useMemo(() => mergedNodesMetaData.map((node) => {
+    const { metaData } = node
+    const title = t(`workflow.blocks.${metaData.type}`)
+    const description = t(`workflow.blocksAbout.${metaData.type}`)
+    const helpLinkPath = `guides/workflow/node/${metaData.helpLinkUri}`
+    return {
+      ...node,
+      metaData: {
+        ...metaData,
+        title,
+        description,
+        helpLinkUri: docLink(helpLinkPath),
+      },
+      defaultValue: {
+        ...node.defaultValue,
+        type: metaData.type,
+        title,
+      },
+    }
+  }), [mergedNodesMetaData, t, docLink])
+
+  const availableNodesMetaDataMap = useMemo(() => availableNodesMetaData.reduce((acc, node) => {
+    acc![node.metaData.type] = node
+    return acc
+  }, {} as AvailableNodesMetaData['nodesMap']), [availableNodesMetaData])
+
+  return useMemo(() => {
+    return {
+      nodes: availableNodesMetaData,
+      nodesMap: {
+        ...availableNodesMetaDataMap,
+        [BlockEnum.VariableAssigner]: availableNodesMetaDataMap?.[BlockEnum.VariableAggregator],
+      },
+    }
+  }, [availableNodesMetaData, availableNodesMetaDataMap])
+}

dify/web/app/components/workflow-app/hooks/use-configs-map.ts

@@ -0,0 +1,16 @@
+import { useMemo } from 'react'
+import { useStore } from '@/app/components/workflow/store'
+import { FlowType } from '@/types/common'
+import { useFeatures } from '@/app/components/base/features/hooks'
+
+export const useConfigsMap = () => {
+  const appId = useStore(s => s.appId)
+  const fileSettings = useFeatures(s => s.features.file)
+  return useMemo(() => {
+    return {
+      flowId: appId!,
+      flowType: FlowType.appFlow,
+      fileSettings,
+    }
+  }, [appId])
+}

dify/web/app/components/workflow-app/hooks/use-get-run-and-trace-url.ts

@@ -0,0 +1,18 @@
+import { useCallback } from 'react'
+import { useWorkflowStore } from '@/app/components/workflow/store'
+
+export const useGetRunAndTraceUrl = () => {
+  const workflowStore = useWorkflowStore()
+  const getWorkflowRunAndTraceUrl = useCallback((runId: string) => {
+    const { appId } = workflowStore.getState()
+
+    return {
+      runUrl: `/apps/${appId}/workflow-runs/${runId}`,
+      traceUrl: `/apps/${appId}/workflow-runs/${runId}/node-executions`,
+    }
+  }, [workflowStore])
+
+  return {
+    getWorkflowRunAndTraceUrl,
+  }
+}

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

@@ -0,0 +1,13 @@
+import { useInspectVarsCrudCommon } from '../../workflow/hooks/use-inspect-vars-crud-common'
+import { useConfigsMap } from './use-configs-map'
+
+export const useInspectVarsCrud = () => {
+  const configsMap = useConfigsMap()
+  const apis = useInspectVarsCrudCommon({
+    ...configsMap,
+  })
+
+  return {
+    ...apis,
+  }
+}

dify/web/app/components/workflow-app/hooks/use-is-chat-mode.ts

@@ -0,0 +1,8 @@
+import { useStore as useAppStore } from '@/app/components/app/store'
+import { AppModeEnum } from '@/types/app'
+
+export const useIsChatMode = () => {
+  const appDetail = useAppStore(s => s.appDetail)
+
+  return appDetail?.mode === AppModeEnum.ADVANCED_CHAT
+}

dify/web/app/components/workflow-app/hooks/use-nodes-sync-draft.ts

@@ -0,0 +1,135 @@
+import { useCallback } from 'react'
+import { produce } from 'immer'
+import { useStoreApi } from 'reactflow'
+import { useWorkflowStore } from '@/app/components/workflow/store'
+import { useNodesReadOnly } from '@/app/components/workflow/hooks/use-workflow'
+import { useSerialAsyncCallback } from '@/app/components/workflow/hooks/use-serial-async-callback'
+import { syncWorkflowDraft } from '@/service/workflow'
+import { useFeaturesStore } from '@/app/components/base/features/hooks'
+import { API_PREFIX } from '@/config'
+import { useWorkflowRefreshDraft } from '.'
+
+export const useNodesSyncDraft = () => {
+  const store = useStoreApi()
+  const workflowStore = useWorkflowStore()
+  const featuresStore = useFeaturesStore()
+  const { getNodesReadOnly } = useNodesReadOnly()
+  const { handleRefreshWorkflowDraft } = useWorkflowRefreshDraft()
+
+  const getPostParams = useCallback(() => {
+    const {
+      getNodes,
+      edges,
+      transform,
+    } = store.getState()
+    const nodes = getNodes().filter(node => !node.data?._isTempNode)
+    const [x, y, zoom] = transform
+    const {
+      appId,
+      conversationVariables,
+      environmentVariables,
+      syncWorkflowDraftHash,
+      isWorkflowDataLoaded,
+    } = workflowStore.getState()
+
+    if (!appId || !isWorkflowDataLoaded)
+      return null
+
+    const features = featuresStore!.getState().features
+    const producedNodes = produce(nodes, (draft) => {
+      draft.forEach((node) => {
+        Object.keys(node.data).forEach((key) => {
+          if (key.startsWith('_'))
+            delete node.data[key]
+        })
+      })
+    })
+    const producedEdges = produce(edges.filter(edge => !edge.data?._isTemp), (draft) => {
+      draft.forEach((edge) => {
+        Object.keys(edge.data).forEach((key) => {
+          if (key.startsWith('_'))
+            delete edge.data[key]
+        })
+      })
+    })
+    const viewport = { x, y, zoom }
+
+    return {
+      url: `/apps/${appId}/workflows/draft`,
+      params: {
+        graph: {
+          nodes: producedNodes,
+          edges: producedEdges,
+          viewport,
+        },
+        features: {
+          opening_statement: features.opening?.enabled ? (features.opening?.opening_statement || '') : '',
+          suggested_questions: features.opening?.enabled ? (features.opening?.suggested_questions || []) : [],
+          suggested_questions_after_answer: features.suggested,
+          text_to_speech: features.text2speech,
+          speech_to_text: features.speech2text,
+          retriever_resource: features.citation,
+          sensitive_word_avoidance: features.moderation,
+          file_upload: features.file,
+        },
+        environment_variables: environmentVariables,
+        conversation_variables: conversationVariables,
+        hash: syncWorkflowDraftHash,
+      },
+    }
+  }, [store, featuresStore, workflowStore])
+
+  const syncWorkflowDraftWhenPageClose = useCallback(() => {
+    if (getNodesReadOnly())
+      return
+    const postParams = getPostParams()
+
+    if (postParams)
+      navigator.sendBeacon(`${API_PREFIX}${postParams.url}`, JSON.stringify(postParams.params))
+  }, [getPostParams, getNodesReadOnly])
+
+  const performSync = useCallback(async (
+    notRefreshWhenSyncError?: boolean,
+    callback?: {
+      onSuccess?: () => void
+      onError?: () => void
+      onSettled?: () => void
+    },
+  ) => {
+    if (getNodesReadOnly())
+      return
+    const postParams = getPostParams()
+
+    if (postParams) {
+      const {
+        setSyncWorkflowDraftHash,
+        setDraftUpdatedAt,
+      } = workflowStore.getState()
+      try {
+        const res = await syncWorkflowDraft(postParams)
+        setSyncWorkflowDraftHash(res.hash)
+        setDraftUpdatedAt(res.updated_at)
+        callback?.onSuccess?.()
+      }
+      catch (error: any) {
+        if (error && error.json && !error.bodyUsed) {
+          error.json().then((err: any) => {
+            if (err.code === 'draft_workflow_not_sync' && !notRefreshWhenSyncError)
+              handleRefreshWorkflowDraft()
+          })
+        }
+        callback?.onError?.()
+      }
+      finally {
+        callback?.onSettled?.()
+      }
+    }
+  }, [workflowStore, getPostParams, getNodesReadOnly, handleRefreshWorkflowDraft])
+
+  const doSyncWorkflowDraft = useSerialAsyncCallback(performSync, getNodesReadOnly)
+
+  return {
+    doSyncWorkflowDraft,
+    syncWorkflowDraftWhenPageClose,
+  }
+}

dify/web/app/components/workflow-app/hooks/use-workflow-init.ts

@@ -0,0 +1,154 @@
+import {
+  useCallback,
+  useEffect,
+  useState,
+} from 'react'
+import {
+  useStore,
+  useWorkflowStore,
+} from '@/app/components/workflow/store'
+import { useWorkflowTemplate } from './use-workflow-template'
+import { useStore as useAppStore } from '@/app/components/app/store'
+import {
+  fetchNodesDefaultConfigs,
+  fetchPublishedWorkflow,
+  fetchWorkflowDraft,
+  syncWorkflowDraft,
+} from '@/service/workflow'
+import type { FetchWorkflowDraftResponse } from '@/types/workflow'
+import { useWorkflowConfig } from '@/service/use-workflow'
+import type { FileUploadConfigResponse } from '@/models/common'
+import type { Edge, Node } from '@/app/components/workflow/types'
+import { BlockEnum } from '@/app/components/workflow/types'
+import { AppModeEnum } from '@/types/app'
+
+const hasConnectedUserInput = (nodes: Node[] = [], edges: Edge[] = []): boolean => {
+  const startNodeIds = nodes
+    .filter(node => node?.data?.type === BlockEnum.Start)
+    .map(node => node.id)
+
+  if (!startNodeIds.length)
+    return false
+
+  return edges.some(edge => startNodeIds.includes(edge.source))
+}
+export const useWorkflowInit = () => {
+  const workflowStore = useWorkflowStore()
+  const {
+    nodes: nodesTemplate,
+    edges: edgesTemplate,
+  } = useWorkflowTemplate()
+  const appDetail = useAppStore(state => state.appDetail)!
+  const setSyncWorkflowDraftHash = useStore(s => s.setSyncWorkflowDraftHash)
+  const [data, setData] = useState<FetchWorkflowDraftResponse>()
+  const [isLoading, setIsLoading] = useState(true)
+  useEffect(() => {
+    workflowStore.setState({ appId: appDetail.id, appName: appDetail.name })
+  }, [appDetail.id, workflowStore])
+
+  const handleUpdateWorkflowFileUploadConfig = useCallback((config: FileUploadConfigResponse) => {
+    const { setFileUploadConfig } = workflowStore.getState()
+    setFileUploadConfig(config)
+  }, [workflowStore])
+  const {
+    data: fileUploadConfigResponse,
+    isLoading: isFileUploadConfigLoading,
+  } = useWorkflowConfig('/files/upload', handleUpdateWorkflowFileUploadConfig)
+
+  const handleGetInitialWorkflowData = useCallback(async () => {
+    try {
+      const res = await fetchWorkflowDraft(`/apps/${appDetail.id}/workflows/draft`)
+      setData(res)
+      workflowStore.setState({
+        envSecrets: (res.environment_variables || []).filter(env => env.value_type === 'secret').reduce((acc, env) => {
+          acc[env.id] = env.value
+          return acc
+        }, {} as Record<string, string>),
+        environmentVariables: res.environment_variables?.map(env => env.value_type === 'secret' ? { ...env, value: '[__HIDDEN__]' } : env) || [],
+        conversationVariables: res.conversation_variables || [],
+        isWorkflowDataLoaded: true,
+      })
+      setSyncWorkflowDraftHash(res.hash)
+      setIsLoading(false)
+    }
+    catch (error: any) {
+      if (error && error.json && !error.bodyUsed && appDetail) {
+        error.json().then((err: any) => {
+          if (err.code === 'draft_workflow_not_exist') {
+            const isAdvancedChat = appDetail.mode === AppModeEnum.ADVANCED_CHAT
+            workflowStore.setState({
+              notInitialWorkflow: true,
+              showOnboarding: !isAdvancedChat,
+              shouldAutoOpenStartNodeSelector: !isAdvancedChat,
+              hasShownOnboarding: false,
+            })
+            const nodesData = isAdvancedChat ? nodesTemplate : []
+            const edgesData = isAdvancedChat ? edgesTemplate : []
+
+            syncWorkflowDraft({
+              url: `/apps/${appDetail.id}/workflows/draft`,
+              params: {
+                graph: {
+                  nodes: nodesData,
+                  edges: edgesData,
+                },
+                features: {
+                  retriever_resource: { enabled: true },
+                },
+                environment_variables: [],
+                conversation_variables: [],
+              },
+            }).then((res) => {
+              workflowStore.getState().setDraftUpdatedAt(res.updated_at)
+              handleGetInitialWorkflowData()
+            })
+          }
+        })
+      }
+    }
+  }, [appDetail, nodesTemplate, edgesTemplate, workflowStore, setSyncWorkflowDraftHash])
+
+  useEffect(() => {
+    handleGetInitialWorkflowData()
+  }, [])
+
+  const handleFetchPreloadData = useCallback(async () => {
+    try {
+      const nodesDefaultConfigsData = await fetchNodesDefaultConfigs(`/apps/${appDetail?.id}/workflows/default-workflow-block-configs`)
+      const publishedWorkflow = await fetchPublishedWorkflow(`/apps/${appDetail?.id}/workflows/publish`)
+      workflowStore.setState({
+        nodesDefaultConfigs: nodesDefaultConfigsData.reduce((acc, block) => {
+          if (!acc[block.type])
+            acc[block.type] = { ...block.config }
+          return acc
+        }, {} as Record<string, any>),
+      })
+      workflowStore.getState().setPublishedAt(publishedWorkflow?.created_at)
+      const graph = publishedWorkflow?.graph
+      workflowStore.getState().setLastPublishedHasUserInput(
+        hasConnectedUserInput(graph?.nodes, graph?.edges),
+      )
+    }
+    catch (e) {
+      console.error(e)
+      workflowStore.getState().setLastPublishedHasUserInput(false)
+    }
+  }, [workflowStore, appDetail])
+
+  useEffect(() => {
+    handleFetchPreloadData()
+  }, [handleFetchPreloadData])
+
+  useEffect(() => {
+    if (data) {
+      workflowStore.getState().setDraftUpdatedAt(data.updated_at)
+      workflowStore.getState().setToolPublished(data.tool_published)
+    }
+  }, [data, workflowStore])
+
+  return {
+    data,
+    isLoading: isLoading || isFileUploadConfigLoading,
+    fileUploadConfigResponse,
+  }
+}

dify/web/app/components/workflow-app/hooks/use-workflow-refresh-draft.ts

@@ -0,0 +1,61 @@
+import { useCallback } from 'react'
+import { useWorkflowStore } from '@/app/components/workflow/store'
+import { fetchWorkflowDraft } from '@/service/workflow'
+import type { WorkflowDataUpdater } from '@/app/components/workflow/types'
+import { useWorkflowUpdate } from '@/app/components/workflow/hooks'
+
+export const useWorkflowRefreshDraft = () => {
+  const workflowStore = useWorkflowStore()
+  const { handleUpdateWorkflowCanvas } = useWorkflowUpdate()
+
+  const handleRefreshWorkflowDraft = useCallback(() => {
+    const {
+      appId,
+      setSyncWorkflowDraftHash,
+      setIsSyncingWorkflowDraft,
+      setEnvironmentVariables,
+      setEnvSecrets,
+      setConversationVariables,
+      setIsWorkflowDataLoaded,
+      isWorkflowDataLoaded,
+      debouncedSyncWorkflowDraft,
+    } = workflowStore.getState()
+
+    if (debouncedSyncWorkflowDraft && typeof (debouncedSyncWorkflowDraft as any).cancel === 'function')
+      (debouncedSyncWorkflowDraft as any).cancel()
+
+    const wasLoaded = isWorkflowDataLoaded
+    if (wasLoaded)
+      setIsWorkflowDataLoaded(false)
+    setIsSyncingWorkflowDraft(true)
+    fetchWorkflowDraft(`/apps/${appId}/workflows/draft`)
+      .then((response) => {
+        // Ensure we have a valid workflow structure with viewport
+        const workflowData: WorkflowDataUpdater = {
+          nodes: response.graph?.nodes || [],
+          edges: response.graph?.edges || [],
+          viewport: response.graph?.viewport || { x: 0, y: 0, zoom: 1 },
+        }
+        handleUpdateWorkflowCanvas(workflowData)
+        setSyncWorkflowDraftHash(response.hash)
+        setEnvSecrets((response.environment_variables || []).filter(env => env.value_type === 'secret').reduce((acc, env) => {
+          acc[env.id] = env.value
+          return acc
+        }, {} as Record<string, string>))
+        setEnvironmentVariables(response.environment_variables?.map(env => env.value_type === 'secret' ? { ...env, value: '[__HIDDEN__]' } : env) || [])
+        setConversationVariables(response.conversation_variables || [])
+        setIsWorkflowDataLoaded(true)
+      })
+      .catch(() => {
+        if (wasLoaded)
+          setIsWorkflowDataLoaded(true)
+      })
+      .finally(() => {
+        setIsSyncingWorkflowDraft(false)
+      })
+  }, [handleUpdateWorkflowCanvas, workflowStore])
+
+  return {
+    handleRefreshWorkflowDraft,
+  }
+}

dify/web/app/components/workflow-app/hooks/use-workflow-run.ts

@@ -0,0 +1,764 @@
+import { useCallback, useRef } from 'react'
+import {
+  useReactFlow,
+  useStoreApi,
+} from 'reactflow'
+import { produce } from 'immer'
+import { v4 as uuidV4 } from 'uuid'
+import { usePathname } from 'next/navigation'
+import { useWorkflowStore } from '@/app/components/workflow/store'
+import type { Node } from '@/app/components/workflow/types'
+import { WorkflowRunningStatus } from '@/app/components/workflow/types'
+import { useWorkflowUpdate } from '@/app/components/workflow/hooks/use-workflow-interactions'
+import { useWorkflowRunEvent } from '@/app/components/workflow/hooks/use-workflow-run-event/use-workflow-run-event'
+import { useStore as useAppStore } from '@/app/components/app/store'
+import type { IOtherOptions } from '@/service/base'
+import Toast from '@/app/components/base/toast'
+import { handleStream, ssePost } from '@/service/base'
+import { stopWorkflowRun } from '@/service/workflow'
+import { useFeaturesStore } from '@/app/components/base/features/hooks'
+import { AudioPlayerManager } from '@/app/components/base/audio-btn/audio.player.manager'
+import type AudioPlayer from '@/app/components/base/audio-btn/audio'
+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 '../../workflow/hooks/use-fetch-workflow-inspect-vars'
+import { useConfigsMap } from './use-configs-map'
+import { post } from '@/service/base'
+import { ContentType } from '@/service/fetch'
+import { TriggerType } from '@/app/components/workflow/header/test-run-menu'
+import { AppModeEnum } from '@/types/app'
+
+type HandleRunMode = TriggerType
+type HandleRunOptions = {
+  mode?: HandleRunMode
+  scheduleNodeId?: string
+  webhookNodeId?: string
+  pluginNodeId?: string
+  allNodeIds?: string[]
+}
+
+type DebuggableTriggerType = Exclude<TriggerType, TriggerType.UserInput>
+
+const controllerKeyMap: Record<DebuggableTriggerType, string> = {
+  [TriggerType.Webhook]: '__webhookDebugAbortController',
+  [TriggerType.Plugin]: '__pluginDebugAbortController',
+  [TriggerType.All]: '__allTriggersDebugAbortController',
+  [TriggerType.Schedule]: '__scheduleDebugAbortController',
+}
+
+const debugLabelMap: Record<DebuggableTriggerType, string> = {
+  [TriggerType.Webhook]: 'Webhook',
+  [TriggerType.Plugin]: 'Plugin',
+  [TriggerType.All]: 'All',
+  [TriggerType.Schedule]: 'Schedule',
+}
+
+export const useWorkflowRun = () => {
+  const store = useStoreApi()
+  const workflowStore = useWorkflowStore()
+  const reactflow = useReactFlow()
+  const featuresStore = useFeaturesStore()
+  const { doSyncWorkflowDraft } = useNodesSyncDraft()
+  const { handleUpdateWorkflowCanvas } = useWorkflowUpdate()
+  const pathname = usePathname()
+  const configsMap = useConfigsMap()
+  const { flowId, flowType } = configsMap
+  const invalidAllLastRun = useInvalidAllLastRun(flowType, flowId)
+
+  const { fetchInspectVars } = useSetWorkflowVarsWithValue({
+    ...configsMap,
+  })
+
+  const abortControllerRef = useRef<AbortController | null>(null)
+
+  const {
+    handleWorkflowStarted,
+    handleWorkflowFinished,
+    handleWorkflowFailed,
+    handleWorkflowNodeStarted,
+    handleWorkflowNodeFinished,
+    handleWorkflowNodeIterationStarted,
+    handleWorkflowNodeIterationNext,
+    handleWorkflowNodeIterationFinished,
+    handleWorkflowNodeLoopStarted,
+    handleWorkflowNodeLoopNext,
+    handleWorkflowNodeLoopFinished,
+    handleWorkflowNodeRetry,
+    handleWorkflowAgentLog,
+    handleWorkflowTextChunk,
+    handleWorkflowTextReplace,
+  } = useWorkflowRunEvent()
+
+  const handleBackupDraft = useCallback(() => {
+    const {
+      getNodes,
+      edges,
+    } = store.getState()
+    const { getViewport } = reactflow
+    const {
+      backupDraft,
+      setBackupDraft,
+      environmentVariables,
+    } = workflowStore.getState()
+    const { features } = featuresStore!.getState()
+
+    if (!backupDraft) {
+      setBackupDraft({
+        nodes: getNodes(),
+        edges,
+        viewport: getViewport(),
+        features,
+        environmentVariables,
+      })
+      doSyncWorkflowDraft()
+    }
+  }, [reactflow, workflowStore, store, featuresStore, doSyncWorkflowDraft])
+
+  const handleLoadBackupDraft = useCallback(() => {
+    const {
+      backupDraft,
+      setBackupDraft,
+      setEnvironmentVariables,
+    } = workflowStore.getState()
+
+    if (backupDraft) {
+      const {
+        nodes,
+        edges,
+        viewport,
+        features,
+        environmentVariables,
+      } = backupDraft
+      handleUpdateWorkflowCanvas({
+        nodes,
+        edges,
+        viewport,
+      })
+      setEnvironmentVariables(environmentVariables)
+      featuresStore!.setState({ features })
+      setBackupDraft(undefined)
+    }
+  }, [handleUpdateWorkflowCanvas, workflowStore, featuresStore])
+
+  const handleRun = useCallback(async (
+    params: any,
+    callback?: IOtherOptions,
+    options?: HandleRunOptions,
+  ) => {
+    const runMode: HandleRunMode = options?.mode ?? TriggerType.UserInput
+    const resolvedParams = params ?? {}
+    const {
+      getNodes,
+      setNodes,
+    } = store.getState()
+    const newNodes = produce(getNodes(), (draft: Node[]) => {
+      draft.forEach((node) => {
+        node.data.selected = false
+        node.data._runningStatus = undefined
+      })
+    })
+    setNodes(newNodes)
+    await doSyncWorkflowDraft()
+
+    const {
+      onWorkflowStarted,
+      onWorkflowFinished,
+      onNodeStarted,
+      onNodeFinished,
+      onIterationStart,
+      onIterationNext,
+      onIterationFinish,
+      onLoopStart,
+      onLoopNext,
+      onLoopFinish,
+      onNodeRetry,
+      onAgentLog,
+      onError,
+      onCompleted,
+      ...restCallback
+    } = callback || {}
+    workflowStore.setState({ historyWorkflowData: undefined })
+    const appDetail = useAppStore.getState().appDetail
+    const workflowContainer = document.getElementById('workflow-container')
+
+    const {
+      clientWidth,
+      clientHeight,
+    } = workflowContainer!
+
+    const isInWorkflowDebug = appDetail?.mode === AppModeEnum.WORKFLOW
+
+    let url = ''
+    if (runMode === TriggerType.Plugin || runMode === TriggerType.Webhook || runMode === TriggerType.Schedule) {
+      if (!appDetail?.id) {
+        console.error('handleRun: missing app id for trigger plugin run')
+        return
+      }
+      url = `/apps/${appDetail.id}/workflows/draft/trigger/run`
+    }
+    else if (runMode === TriggerType.All) {
+      if (!appDetail?.id) {
+        console.error('handleRun: missing app id for trigger run all')
+        return
+      }
+      url = `/apps/${appDetail.id}/workflows/draft/trigger/run-all`
+    }
+    else if (appDetail?.mode === AppModeEnum.ADVANCED_CHAT) {
+      url = `/apps/${appDetail.id}/advanced-chat/workflows/draft/run`
+    }
+    else if (isInWorkflowDebug && appDetail?.id) {
+      url = `/apps/${appDetail.id}/workflows/draft/run`
+    }
+
+    let requestBody = {}
+
+    if (runMode === TriggerType.Schedule)
+      requestBody = { node_id: options?.scheduleNodeId }
+
+    else if (runMode === TriggerType.Webhook)
+      requestBody = { node_id: options?.webhookNodeId }
+
+    else if (runMode === TriggerType.Plugin)
+      requestBody = { node_id: options?.pluginNodeId }
+
+    else if (runMode === TriggerType.All)
+      requestBody = { node_ids: options?.allNodeIds }
+
+    else
+      requestBody = resolvedParams
+
+    if (!url)
+      return
+
+    if (runMode === TriggerType.Schedule && !options?.scheduleNodeId) {
+      console.error('handleRun: schedule trigger run requires node id')
+      return
+    }
+
+    if (runMode === TriggerType.Webhook && !options?.webhookNodeId) {
+      console.error('handleRun: webhook trigger run requires node id')
+      return
+    }
+
+    if (runMode === TriggerType.Plugin && !options?.pluginNodeId) {
+      console.error('handleRun: plugin trigger run requires node id')
+      return
+    }
+
+    if (runMode === TriggerType.All && !options?.allNodeIds && options?.allNodeIds?.length === 0) {
+      console.error('handleRun: all trigger run requires node ids')
+      return
+    }
+
+    abortControllerRef.current?.abort()
+    abortControllerRef.current = null
+
+    const {
+      setWorkflowRunningData,
+      setIsListening,
+      setShowVariableInspectPanel,
+      setListeningTriggerType,
+      setListeningTriggerNodeIds,
+      setListeningTriggerIsAll,
+      setListeningTriggerNodeId,
+    } = workflowStore.getState()
+
+    if (
+      runMode === TriggerType.Webhook
+      || runMode === TriggerType.Plugin
+      || runMode === TriggerType.All
+      || runMode === TriggerType.Schedule
+    ) {
+      setIsListening(true)
+      setShowVariableInspectPanel(true)
+      setListeningTriggerIsAll(runMode === TriggerType.All)
+      if (runMode === TriggerType.All)
+        setListeningTriggerNodeIds(options?.allNodeIds ?? [])
+      else if (runMode === TriggerType.Webhook && options?.webhookNodeId)
+        setListeningTriggerNodeIds([options.webhookNodeId])
+      else if (runMode === TriggerType.Schedule && options?.scheduleNodeId)
+        setListeningTriggerNodeIds([options.scheduleNodeId])
+      else if (runMode === TriggerType.Plugin && options?.pluginNodeId)
+        setListeningTriggerNodeIds([options.pluginNodeId])
+      else
+        setListeningTriggerNodeIds([])
+      setWorkflowRunningData({
+        result: {
+          status: WorkflowRunningStatus.Running,
+          inputs_truncated: false,
+          process_data_truncated: false,
+          outputs_truncated: false,
+        },
+        tracing: [],
+        resultText: '',
+      })
+    }
+    else {
+      setIsListening(false)
+      setListeningTriggerType(null)
+      setListeningTriggerNodeId(null)
+      setListeningTriggerNodeIds([])
+      setListeningTriggerIsAll(false)
+      setWorkflowRunningData({
+        result: {
+          status: WorkflowRunningStatus.Running,
+          inputs_truncated: false,
+          process_data_truncated: false,
+          outputs_truncated: false,
+        },
+        tracing: [],
+        resultText: '',
+      })
+    }
+
+    let ttsUrl = ''
+    let ttsIsPublic = false
+    if (resolvedParams.token) {
+      ttsUrl = '/text-to-audio'
+      ttsIsPublic = true
+    }
+    else if (resolvedParams.appId) {
+      if (pathname.search('explore/installed') > -1)
+        ttsUrl = `/installed-apps/${resolvedParams.appId}/text-to-audio`
+      else
+        ttsUrl = `/apps/${resolvedParams.appId}/text-to-audio`
+    }
+    // Lazy initialization: Only create AudioPlayer when TTS is actually needed
+    // This prevents opening audio channel unnecessarily
+    let player: AudioPlayer | null = null
+    const getOrCreatePlayer = () => {
+      if (!player)
+        player = AudioPlayerManager.getInstance().getAudioPlayer(ttsUrl, ttsIsPublic, uuidV4(), 'none', 'none', noop)
+
+      return player
+    }
+
+    const clearAbortController = () => {
+      abortControllerRef.current = null
+      delete (window as any).__webhookDebugAbortController
+      delete (window as any).__pluginDebugAbortController
+      delete (window as any).__scheduleDebugAbortController
+      delete (window as any).__allTriggersDebugAbortController
+    }
+
+    const clearListeningState = () => {
+      const state = workflowStore.getState()
+      state.setIsListening(false)
+      state.setListeningTriggerType(null)
+      state.setListeningTriggerNodeId(null)
+      state.setListeningTriggerNodeIds([])
+      state.setListeningTriggerIsAll(false)
+    }
+
+    const wrappedOnError = (params: any) => {
+      clearAbortController()
+      handleWorkflowFailed()
+      clearListeningState()
+
+      if (onError)
+        onError(params)
+    }
+
+    const wrappedOnCompleted: IOtherOptions['onCompleted'] = async (hasError?: boolean, errorMessage?: string) => {
+      clearAbortController()
+      clearListeningState()
+      if (onCompleted)
+        onCompleted(hasError, errorMessage)
+    }
+
+    const baseSseOptions: IOtherOptions = {
+      ...restCallback,
+      onWorkflowStarted: (params) => {
+        const state = workflowStore.getState()
+        if (state.workflowRunningData) {
+          state.setWorkflowRunningData(produce(state.workflowRunningData, (draft) => {
+            draft.resultText = ''
+          }))
+        }
+        handleWorkflowStarted(params)
+
+        if (onWorkflowStarted)
+          onWorkflowStarted(params)
+      },
+      onWorkflowFinished: (params) => {
+        clearListeningState()
+        handleWorkflowFinished(params)
+
+        if (onWorkflowFinished)
+          onWorkflowFinished(params)
+        if (isInWorkflowDebug) {
+          fetchInspectVars({})
+          invalidAllLastRun()
+        }
+      },
+      onNodeStarted: (params) => {
+        handleWorkflowNodeStarted(
+          params,
+          {
+            clientWidth,
+            clientHeight,
+          },
+        )
+
+        if (onNodeStarted)
+          onNodeStarted(params)
+      },
+      onNodeFinished: (params) => {
+        handleWorkflowNodeFinished(params)
+
+        if (onNodeFinished)
+          onNodeFinished(params)
+      },
+      onIterationStart: (params) => {
+        handleWorkflowNodeIterationStarted(
+          params,
+          {
+            clientWidth,
+            clientHeight,
+          },
+        )
+
+        if (onIterationStart)
+          onIterationStart(params)
+      },
+      onIterationNext: (params) => {
+        handleWorkflowNodeIterationNext(params)
+
+        if (onIterationNext)
+          onIterationNext(params)
+      },
+      onIterationFinish: (params) => {
+        handleWorkflowNodeIterationFinished(params)
+
+        if (onIterationFinish)
+          onIterationFinish(params)
+      },
+      onLoopStart: (params) => {
+        handleWorkflowNodeLoopStarted(
+          params,
+          {
+            clientWidth,
+            clientHeight,
+          },
+        )
+
+        if (onLoopStart)
+          onLoopStart(params)
+      },
+      onLoopNext: (params) => {
+        handleWorkflowNodeLoopNext(params)
+
+        if (onLoopNext)
+          onLoopNext(params)
+      },
+      onLoopFinish: (params) => {
+        handleWorkflowNodeLoopFinished(params)
+
+        if (onLoopFinish)
+          onLoopFinish(params)
+      },
+      onNodeRetry: (params) => {
+        handleWorkflowNodeRetry(params)
+
+        if (onNodeRetry)
+          onNodeRetry(params)
+      },
+      onAgentLog: (params) => {
+        handleWorkflowAgentLog(params)
+
+        if (onAgentLog)
+          onAgentLog(params)
+      },
+      onTextChunk: (params) => {
+        handleWorkflowTextChunk(params)
+      },
+      onTextReplace: (params) => {
+        handleWorkflowTextReplace(params)
+      },
+      onTTSChunk: (messageId: string, audio: string) => {
+        if (!audio || audio === '')
+          return
+        const audioPlayer = getOrCreatePlayer()
+        if (audioPlayer) {
+          audioPlayer.playAudioWithAudio(audio, true)
+          AudioPlayerManager.getInstance().resetMsgId(messageId)
+        }
+      },
+      onTTSEnd: (messageId: string, audio: string) => {
+        const audioPlayer = getOrCreatePlayer()
+        if (audioPlayer)
+          audioPlayer.playAudioWithAudio(audio, false)
+      },
+      onError: wrappedOnError,
+      onCompleted: wrappedOnCompleted,
+    }
+
+    const waitWithAbort = (signal: AbortSignal, delay: number) => new Promise<void>((resolve) => {
+      const timer = window.setTimeout(resolve, delay)
+      signal.addEventListener('abort', () => {
+        clearTimeout(timer)
+        resolve()
+      }, { once: true })
+    })
+
+    const runTriggerDebug = async (debugType: DebuggableTriggerType) => {
+      const controller = new AbortController()
+      abortControllerRef.current = controller
+
+      const controllerKey = controllerKeyMap[debugType]
+
+        ; (window as any)[controllerKey] = controller
+
+      const debugLabel = debugLabelMap[debugType]
+
+      const poll = async (): Promise<void> => {
+        try {
+          const response = await post<Response>(url, {
+            body: requestBody,
+            signal: controller.signal,
+          }, {
+            needAllResponseContent: true,
+          })
+
+          if (controller.signal.aborted)
+            return
+
+          if (!response) {
+            const message = `${debugLabel} debug request failed`
+            Toast.notify({ type: 'error', message })
+            clearAbortController()
+            return
+          }
+
+          const contentType = response.headers.get('content-type') || ''
+
+          if (contentType.includes(ContentType.json)) {
+            let data: any = null
+            try {
+              data = await response.json()
+            }
+            catch (jsonError) {
+              console.error(`handleRun: ${debugLabel.toLowerCase()} debug response parse error`, jsonError)
+              Toast.notify({ type: 'error', message: `${debugLabel} debug request failed` })
+              clearAbortController()
+              clearListeningState()
+              return
+            }
+
+            if (controller.signal.aborted)
+              return
+
+            if (data?.status === 'waiting') {
+              const delay = Number(data.retry_in) || 2000
+              await waitWithAbort(controller.signal, delay)
+              if (controller.signal.aborted)
+                return
+              await poll()
+              return
+            }
+
+            const errorMessage = data?.message || `${debugLabel} debug failed`
+            Toast.notify({ type: 'error', message: errorMessage })
+            clearAbortController()
+            setWorkflowRunningData({
+              result: {
+                status: WorkflowRunningStatus.Failed,
+                error: errorMessage,
+                inputs_truncated: false,
+                process_data_truncated: false,
+                outputs_truncated: false,
+              },
+              tracing: [],
+            })
+            clearListeningState()
+            return
+          }
+
+          clearListeningState()
+          handleStream(
+            response,
+            baseSseOptions.onData ?? noop,
+            baseSseOptions.onCompleted,
+            baseSseOptions.onThought,
+            baseSseOptions.onMessageEnd,
+            baseSseOptions.onMessageReplace,
+            baseSseOptions.onFile,
+            baseSseOptions.onWorkflowStarted,
+            baseSseOptions.onWorkflowFinished,
+            baseSseOptions.onNodeStarted,
+            baseSseOptions.onNodeFinished,
+            baseSseOptions.onIterationStart,
+            baseSseOptions.onIterationNext,
+            baseSseOptions.onIterationFinish,
+            baseSseOptions.onLoopStart,
+            baseSseOptions.onLoopNext,
+            baseSseOptions.onLoopFinish,
+            baseSseOptions.onNodeRetry,
+            baseSseOptions.onParallelBranchStarted,
+            baseSseOptions.onParallelBranchFinished,
+            baseSseOptions.onTextChunk,
+            baseSseOptions.onTTSChunk,
+            baseSseOptions.onTTSEnd,
+            baseSseOptions.onTextReplace,
+            baseSseOptions.onAgentLog,
+            baseSseOptions.onDataSourceNodeProcessing,
+            baseSseOptions.onDataSourceNodeCompleted,
+            baseSseOptions.onDataSourceNodeError,
+          )
+        }
+        catch (error) {
+          if (controller.signal.aborted)
+            return
+          if (error instanceof Response) {
+            const data = await error.clone().json() as Record<string, any>
+            const { error: respError } = data || {}
+            Toast.notify({ type: 'error', message: respError })
+            clearAbortController()
+            setWorkflowRunningData({
+              result: {
+                status: WorkflowRunningStatus.Failed,
+                error: respError,
+                inputs_truncated: false,
+                process_data_truncated: false,
+                outputs_truncated: false,
+              },
+              tracing: [],
+            })
+          }
+          clearListeningState()
+        }
+      }
+
+      await poll()
+    }
+
+    if (runMode === TriggerType.Schedule) {
+      await runTriggerDebug(TriggerType.Schedule)
+      return
+    }
+
+    if (runMode === TriggerType.Webhook) {
+      await runTriggerDebug(TriggerType.Webhook)
+      return
+    }
+
+    if (runMode === TriggerType.Plugin) {
+      await runTriggerDebug(TriggerType.Plugin)
+      return
+    }
+
+    if (runMode === TriggerType.All) {
+      await runTriggerDebug(TriggerType.All)
+      return
+    }
+
+    ssePost(
+      url,
+      {
+        body: requestBody,
+      },
+      {
+        ...baseSseOptions,
+        getAbortController: (controller: AbortController) => {
+          abortControllerRef.current = controller
+        },
+      },
+    )
+  }, [store, doSyncWorkflowDraft, workflowStore, pathname, handleWorkflowStarted, handleWorkflowFinished, fetchInspectVars, invalidAllLastRun, handleWorkflowFailed, handleWorkflowNodeStarted, handleWorkflowNodeFinished, handleWorkflowNodeIterationStarted, handleWorkflowNodeIterationNext, handleWorkflowNodeIterationFinished, handleWorkflowNodeLoopStarted, handleWorkflowNodeLoopNext, handleWorkflowNodeLoopFinished, handleWorkflowNodeRetry, handleWorkflowAgentLog, handleWorkflowTextChunk, handleWorkflowTextReplace],
+  )
+
+  const handleStopRun = useCallback((taskId: string) => {
+    const setStoppedState = () => {
+      const {
+        setWorkflowRunningData,
+        setIsListening,
+        setShowVariableInspectPanel,
+        setListeningTriggerType,
+        setListeningTriggerNodeId,
+      } = workflowStore.getState()
+
+      setWorkflowRunningData({
+        result: {
+          status: WorkflowRunningStatus.Stopped,
+          inputs_truncated: false,
+          process_data_truncated: false,
+          outputs_truncated: false,
+        },
+        tracing: [],
+        resultText: '',
+      })
+      setIsListening(false)
+      setListeningTriggerType(null)
+      setListeningTriggerNodeId(null)
+      setShowVariableInspectPanel(true)
+    }
+
+    if (taskId) {
+      const appId = useAppStore.getState().appDetail?.id
+      stopWorkflowRun(`/apps/${appId}/workflow-runs/tasks/${taskId}/stop`)
+      setStoppedState()
+      return
+    }
+
+    // Try webhook debug controller from global variable first
+    const webhookController = (window as any).__webhookDebugAbortController
+    if (webhookController)
+      webhookController.abort()
+
+    const pluginController = (window as any).__pluginDebugAbortController
+    if (pluginController)
+      pluginController.abort()
+
+    const scheduleController = (window as any).__scheduleDebugAbortController
+    if (scheduleController)
+      scheduleController.abort()
+
+    const allTriggerController = (window as any).__allTriggersDebugAbortController
+    if (allTriggerController)
+      allTriggerController.abort()
+
+    // Also try the ref
+    if (abortControllerRef.current)
+      abortControllerRef.current.abort()
+
+    abortControllerRef.current = null
+    setStoppedState()
+  }, [workflowStore])
+
+  const handleRestoreFromPublishedWorkflow = useCallback((publishedWorkflow: VersionHistory) => {
+    const nodes = publishedWorkflow.graph.nodes.map(node => ({ ...node, selected: false, data: { ...node.data, selected: false } }))
+    const edges = publishedWorkflow.graph.edges
+    const viewport = publishedWorkflow.graph.viewport!
+    handleUpdateWorkflowCanvas({
+      nodes,
+      edges,
+      viewport,
+    })
+    const mappedFeatures = {
+      opening: {
+        enabled: !!publishedWorkflow.features.opening_statement || !!publishedWorkflow.features.suggested_questions.length,
+        opening_statement: publishedWorkflow.features.opening_statement,
+        suggested_questions: publishedWorkflow.features.suggested_questions,
+      },
+      suggested: publishedWorkflow.features.suggested_questions_after_answer,
+      text2speech: publishedWorkflow.features.text_to_speech,
+      speech2text: publishedWorkflow.features.speech_to_text,
+      citation: publishedWorkflow.features.retriever_resource,
+      moderation: publishedWorkflow.features.sensitive_word_avoidance,
+      file: publishedWorkflow.features.file_upload,
+    }
+
+    featuresStore?.setState({ features: mappedFeatures })
+    workflowStore.getState().setEnvironmentVariables(publishedWorkflow.environment_variables || [])
+  }, [featuresStore, handleUpdateWorkflowCanvas, workflowStore])
+
+  return {
+    handleBackupDraft,
+    handleLoadBackupDraft,
+    handleRun,
+    handleStopRun,
+    handleRestoreFromPublishedWorkflow,
+  }
+}

dify/web/app/components/workflow-app/hooks/use-workflow-start-run.tsx

@@ -0,0 +1,302 @@
+import { useCallback } from 'react'
+import { useStoreApi } from 'reactflow'
+import { useWorkflowStore } from '@/app/components/workflow/store'
+import {
+  BlockEnum,
+  WorkflowRunningStatus,
+} from '@/app/components/workflow/types'
+import { useWorkflowInteractions } from '@/app/components/workflow/hooks'
+import { useFeaturesStore } from '@/app/components/base/features/hooks'
+import {
+  useIsChatMode,
+  useNodesSyncDraft,
+  useWorkflowRun,
+} from '.'
+import { TriggerType } from '@/app/components/workflow/header/test-run-menu'
+
+export const useWorkflowStartRun = () => {
+  const store = useStoreApi()
+  const workflowStore = useWorkflowStore()
+  const featuresStore = useFeaturesStore()
+  const isChatMode = useIsChatMode()
+  const { handleCancelDebugAndPreviewPanel } = useWorkflowInteractions()
+  const { handleRun } = useWorkflowRun()
+  const { doSyncWorkflowDraft } = useNodesSyncDraft()
+
+  const handleWorkflowStartRunInWorkflow = useCallback(async () => {
+    const {
+      workflowRunningData,
+    } = workflowStore.getState()
+
+    if (workflowRunningData?.result.status === WorkflowRunningStatus.Running)
+      return
+
+    const { getNodes } = store.getState()
+    const nodes = getNodes()
+    const startNode = nodes.find(node => node.data.type === BlockEnum.Start)
+    const startVariables = startNode?.data.variables || []
+    const fileSettings = featuresStore!.getState().features.file
+    const {
+      showDebugAndPreviewPanel,
+      setShowDebugAndPreviewPanel,
+      setShowInputsPanel,
+      setShowEnvPanel,
+      setShowGlobalVariablePanel,
+    } = workflowStore.getState()
+
+    setShowEnvPanel(false)
+    setShowGlobalVariablePanel(false)
+
+    if (showDebugAndPreviewPanel) {
+      handleCancelDebugAndPreviewPanel()
+      return
+    }
+
+    if (!startVariables.length && !fileSettings?.image?.enabled) {
+      await doSyncWorkflowDraft()
+      handleRun({ inputs: {}, files: [] })
+      setShowDebugAndPreviewPanel(true)
+      setShowInputsPanel(false)
+    }
+    else {
+      setShowDebugAndPreviewPanel(true)
+      setShowInputsPanel(true)
+    }
+  }, [store, workflowStore, featuresStore, handleCancelDebugAndPreviewPanel, handleRun, doSyncWorkflowDraft])
+
+  const handleWorkflowTriggerScheduleRunInWorkflow = useCallback(async (nodeId?: string) => {
+    if (!nodeId)
+      return
+
+    const {
+      workflowRunningData,
+      showDebugAndPreviewPanel,
+      setShowDebugAndPreviewPanel,
+      setShowInputsPanel,
+      setShowEnvPanel,
+      setShowGlobalVariablePanel,
+      setListeningTriggerType,
+      setListeningTriggerNodeId,
+      setListeningTriggerNodeIds,
+      setListeningTriggerIsAll,
+    } = workflowStore.getState()
+
+    if (workflowRunningData?.result.status === WorkflowRunningStatus.Running)
+      return
+
+    const { getNodes } = store.getState()
+    const nodes = getNodes()
+    const scheduleNode = nodes.find(node => node.id === nodeId && node.data.type === BlockEnum.TriggerSchedule)
+
+    if (!scheduleNode) {
+      console.warn('handleWorkflowTriggerScheduleRunInWorkflow: schedule node not found', nodeId)
+      return
+    }
+
+    setShowEnvPanel(false)
+    setShowGlobalVariablePanel(false)
+
+    if (showDebugAndPreviewPanel) {
+      handleCancelDebugAndPreviewPanel()
+      return
+    }
+
+    setListeningTriggerType(BlockEnum.TriggerSchedule)
+    setListeningTriggerNodeId(nodeId)
+    setListeningTriggerNodeIds([nodeId])
+    setListeningTriggerIsAll(false)
+
+    await doSyncWorkflowDraft()
+    handleRun(
+      {},
+      undefined,
+      {
+        mode: TriggerType.Schedule,
+        scheduleNodeId: nodeId,
+      },
+    )
+    setShowDebugAndPreviewPanel(true)
+    setShowInputsPanel(false)
+  }, [store, workflowStore, handleCancelDebugAndPreviewPanel, handleRun, doSyncWorkflowDraft])
+
+  const handleWorkflowTriggerWebhookRunInWorkflow = useCallback(async ({ nodeId }: { nodeId: string }) => {
+    if (!nodeId)
+      return
+
+    const {
+      workflowRunningData,
+      showDebugAndPreviewPanel,
+      setShowDebugAndPreviewPanel,
+      setShowInputsPanel,
+      setShowEnvPanel,
+      setShowGlobalVariablePanel,
+      setListeningTriggerType,
+      setListeningTriggerNodeId,
+      setListeningTriggerNodeIds,
+      setListeningTriggerIsAll,
+    } = workflowStore.getState()
+
+    if (workflowRunningData?.result.status === WorkflowRunningStatus.Running)
+      return
+
+    const { getNodes } = store.getState()
+    const nodes = getNodes()
+    const webhookNode = nodes.find(node => node.id === nodeId && node.data.type === BlockEnum.TriggerWebhook)
+
+    if (!webhookNode) {
+      console.warn('handleWorkflowTriggerWebhookRunInWorkflow: webhook node not found', nodeId)
+      return
+    }
+
+    setShowEnvPanel(false)
+    setShowGlobalVariablePanel(false)
+
+    if (!showDebugAndPreviewPanel)
+      setShowDebugAndPreviewPanel(true)
+
+    setShowInputsPanel(false)
+    setListeningTriggerType(BlockEnum.TriggerWebhook)
+    setListeningTriggerNodeId(nodeId)
+    setListeningTriggerNodeIds([nodeId])
+    setListeningTriggerIsAll(false)
+
+    await doSyncWorkflowDraft()
+    handleRun(
+      { node_id: nodeId },
+      undefined,
+      {
+        mode: TriggerType.Webhook,
+        webhookNodeId: nodeId,
+      },
+    )
+  }, [store, workflowStore, handleRun, doSyncWorkflowDraft])
+
+  const handleWorkflowTriggerPluginRunInWorkflow = useCallback(async (nodeId?: string) => {
+    if (!nodeId)
+      return
+    const {
+      workflowRunningData,
+      showDebugAndPreviewPanel,
+      setShowDebugAndPreviewPanel,
+      setShowInputsPanel,
+      setShowEnvPanel,
+      setShowGlobalVariablePanel,
+      setListeningTriggerType,
+      setListeningTriggerNodeId,
+      setListeningTriggerNodeIds,
+      setListeningTriggerIsAll,
+    } = workflowStore.getState()
+
+    if (workflowRunningData?.result.status === WorkflowRunningStatus.Running)
+      return
+
+    const { getNodes } = store.getState()
+    const nodes = getNodes()
+    const pluginNode = nodes.find(node => node.id === nodeId && node.data.type === BlockEnum.TriggerPlugin)
+
+    if (!pluginNode) {
+      console.warn('handleWorkflowTriggerPluginRunInWorkflow: plugin node not found', nodeId)
+      return
+    }
+
+    setShowEnvPanel(false)
+    setShowGlobalVariablePanel(false)
+
+    if (!showDebugAndPreviewPanel)
+      setShowDebugAndPreviewPanel(true)
+
+    setShowInputsPanel(false)
+    setListeningTriggerType(BlockEnum.TriggerPlugin)
+    setListeningTriggerNodeId(nodeId)
+    setListeningTriggerNodeIds([nodeId])
+    setListeningTriggerIsAll(false)
+
+    await doSyncWorkflowDraft()
+    handleRun(
+      { node_id: nodeId },
+      undefined,
+      {
+        mode: TriggerType.Plugin,
+        pluginNodeId: nodeId,
+      },
+    )
+  }, [store, workflowStore, handleRun, doSyncWorkflowDraft])
+
+  const handleWorkflowRunAllTriggersInWorkflow = useCallback(async (nodeIds: string[]) => {
+    if (!nodeIds.length)
+      return
+    const {
+      workflowRunningData,
+      showDebugAndPreviewPanel,
+      setShowDebugAndPreviewPanel,
+      setShowInputsPanel,
+      setShowEnvPanel,
+      setShowGlobalVariablePanel,
+      setListeningTriggerIsAll,
+      setListeningTriggerNodeIds,
+      setListeningTriggerNodeId,
+    } = workflowStore.getState()
+
+    if (workflowRunningData?.result.status === WorkflowRunningStatus.Running)
+      return
+
+    setShowEnvPanel(false)
+    setShowGlobalVariablePanel(false)
+    setShowInputsPanel(false)
+    setListeningTriggerIsAll(true)
+    setListeningTriggerNodeIds(nodeIds)
+    setListeningTriggerNodeId(null)
+
+    if (!showDebugAndPreviewPanel)
+      setShowDebugAndPreviewPanel(true)
+
+    await doSyncWorkflowDraft()
+    handleRun(
+      { node_ids: nodeIds },
+      undefined,
+      {
+        mode: TriggerType.All,
+        allNodeIds: nodeIds,
+      },
+    )
+  }, [store, workflowStore, handleRun, doSyncWorkflowDraft])
+
+  const handleWorkflowStartRunInChatflow = useCallback(async () => {
+    const {
+      showDebugAndPreviewPanel,
+      setShowDebugAndPreviewPanel,
+      setHistoryWorkflowData,
+      setShowEnvPanel,
+      setShowChatVariablePanel,
+      setShowGlobalVariablePanel,
+    } = workflowStore.getState()
+
+    setShowEnvPanel(false)
+    setShowChatVariablePanel(false)
+    setShowGlobalVariablePanel(false)
+
+    if (showDebugAndPreviewPanel)
+      handleCancelDebugAndPreviewPanel()
+    else
+      setShowDebugAndPreviewPanel(true)
+
+    setHistoryWorkflowData(undefined)
+  }, [workflowStore, handleCancelDebugAndPreviewPanel])
+
+  const handleStartWorkflowRun = useCallback(() => {
+    if (!isChatMode)
+      handleWorkflowStartRunInWorkflow()
+    else
+      handleWorkflowStartRunInChatflow()
+  }, [isChatMode, handleWorkflowStartRunInWorkflow, handleWorkflowStartRunInChatflow])
+
+  return {
+    handleStartWorkflowRun,
+    handleWorkflowStartRunInWorkflow,
+    handleWorkflowStartRunInChatflow,
+    handleWorkflowTriggerScheduleRunInWorkflow,
+    handleWorkflowTriggerWebhookRunInWorkflow,
+    handleWorkflowTriggerPluginRunInWorkflow,
+    handleWorkflowRunAllTriggersInWorkflow,
+  }
+}

dify/web/app/components/workflow-app/hooks/use-workflow-template.ts

@@ -0,0 +1,86 @@
+import { useTranslation } from 'react-i18next'
+import { generateNewNode } from '@/app/components/workflow/utils'
+import {
+  NODE_WIDTH_X_OFFSET,
+  START_INITIAL_POSITION,
+} from '@/app/components/workflow/constants'
+import { useIsChatMode } from './use-is-chat-mode'
+import type { StartNodeType } from '@/app/components/workflow/nodes/start/types'
+import startDefault from '@/app/components/workflow/nodes/start/default'
+import llmDefault from '@/app/components/workflow/nodes/llm/default'
+import answerDefault from '@/app/components/workflow/nodes/answer/default'
+
+export const useWorkflowTemplate = () => {
+  const isChatMode = useIsChatMode()
+  const { t } = useTranslation()
+
+  const { newNode: startNode } = generateNewNode({
+    data: {
+      ...startDefault.defaultValue as StartNodeType,
+      type: startDefault.metaData.type,
+      title: t(`workflow.blocks.${startDefault.metaData.type}`),
+    },
+    position: START_INITIAL_POSITION,
+  })
+
+  if (isChatMode) {
+    const { newNode: llmNode } = generateNewNode({
+      id: 'llm',
+      data: {
+        ...llmDefault.defaultValue,
+        memory: {
+          window: { enabled: false, size: 10 },
+          query_prompt_template: '{{#sys.query#}}\n\n{{#sys.files#}}',
+        },
+        selected: true,
+        type: llmDefault.metaData.type,
+        title: t(`workflow.blocks.${llmDefault.metaData.type}`),
+      },
+      position: {
+        x: START_INITIAL_POSITION.x + NODE_WIDTH_X_OFFSET,
+        y: START_INITIAL_POSITION.y,
+      },
+    } as any)
+
+    const { newNode: answerNode } = generateNewNode({
+      id: 'answer',
+      data: {
+        ...answerDefault.defaultValue,
+        answer: `{{#${llmNode.id}.text#}}`,
+        type: answerDefault.metaData.type,
+        title: t(`workflow.blocks.${answerDefault.metaData.type}`),
+      },
+      position: {
+        x: START_INITIAL_POSITION.x + NODE_WIDTH_X_OFFSET * 2,
+        y: START_INITIAL_POSITION.y,
+      },
+    } as any)
+
+    const startToLlmEdge = {
+      id: `${startNode.id}-${llmNode.id}`,
+      source: startNode.id,
+      sourceHandle: 'source',
+      target: llmNode.id,
+      targetHandle: 'target',
+    }
+
+    const llmToAnswerEdge = {
+      id: `${llmNode.id}-${answerNode.id}`,
+      source: llmNode.id,
+      sourceHandle: 'source',
+      target: answerNode.id,
+      targetHandle: 'target',
+    }
+
+    return {
+      nodes: [startNode, llmNode, answerNode],
+      edges: [startToLlmEdge, llmToAnswerEdge],
+    }
+  }
+  else {
+    return {
+      nodes: [startNode],
+      edges: [],
+    }
+  }
+}