dify

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

@@ -0,0 +1,15 @@
+export * from './use-workflow-started'
+export * from './use-workflow-finished'
+export * from './use-workflow-failed'
+export * from './use-workflow-node-started'
+export * from './use-workflow-node-finished'
+export * from './use-workflow-node-iteration-started'
+export * from './use-workflow-node-iteration-next'
+export * from './use-workflow-node-iteration-finished'
+export * from './use-workflow-node-loop-started'
+export * from './use-workflow-node-loop-next'
+export * from './use-workflow-node-loop-finished'
+export * from './use-workflow-node-retry'
+export * from './use-workflow-text-chunk'
+export * from './use-workflow-text-replace'
+export * from './use-workflow-agent-log'

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

@@ -0,0 +1,50 @@
+import { useCallback } from 'react'
+import { produce } from 'immer'
+import type { AgentLogResponse } from '@/types/workflow'
+import { useWorkflowStore } from '@/app/components/workflow/store'
+
+export const useWorkflowAgentLog = () => {
+  const workflowStore = useWorkflowStore()
+
+  const handleWorkflowAgentLog = useCallback((params: AgentLogResponse) => {
+    const { data } = params
+    const {
+      workflowRunningData,
+      setWorkflowRunningData,
+    } = workflowStore.getState()
+
+    setWorkflowRunningData(produce(workflowRunningData!, (draft) => {
+      const currentIndex = draft.tracing!.findIndex(item => item.node_id === data.node_id)
+      if (currentIndex > -1) {
+        const current = draft.tracing![currentIndex]
+
+        if (current.execution_metadata) {
+          if (current.execution_metadata.agent_log) {
+            const currentLogIndex = current.execution_metadata.agent_log.findIndex(log => log.message_id === data.message_id)
+            if (currentLogIndex > -1) {
+              current.execution_metadata.agent_log[currentLogIndex] = {
+                ...current.execution_metadata.agent_log[currentLogIndex],
+                ...data,
+              }
+            }
+            else {
+              current.execution_metadata.agent_log.push(data)
+            }
+          }
+          else {
+            current.execution_metadata.agent_log = [data]
+          }
+        }
+        else {
+          current.execution_metadata = {
+            agent_log: [data],
+          } as any
+        }
+      }
+    }))
+  }, [workflowStore])
+
+  return {
+    handleWorkflowAgentLog,
+  }
+}

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

@@ -0,0 +1,26 @@
+import { useCallback } from 'react'
+import { produce } from 'immer'
+import { useWorkflowStore } from '@/app/components/workflow/store'
+import { WorkflowRunningStatus } from '@/app/components/workflow/types'
+
+export const useWorkflowFailed = () => {
+  const workflowStore = useWorkflowStore()
+
+  const handleWorkflowFailed = useCallback(() => {
+    const {
+      workflowRunningData,
+      setWorkflowRunningData,
+    } = workflowStore.getState()
+
+    setWorkflowRunningData(produce(workflowRunningData!, (draft) => {
+      draft.result = {
+        ...draft.result,
+        status: WorkflowRunningStatus.Failed,
+      }
+    }))
+  }, [workflowStore])
+
+  return {
+    handleWorkflowFailed,
+  }
+}

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

@@ -0,0 +1,35 @@
+import { useCallback } from 'react'
+import { produce } from 'immer'
+import type { WorkflowFinishedResponse } from '@/types/workflow'
+import { useWorkflowStore } from '@/app/components/workflow/store'
+import { getFilesInLogs } from '@/app/components/base/file-uploader/utils'
+
+export const useWorkflowFinished = () => {
+  const workflowStore = useWorkflowStore()
+
+  const handleWorkflowFinished = useCallback((params: WorkflowFinishedResponse) => {
+    const { data } = params
+    const {
+      workflowRunningData,
+      setWorkflowRunningData,
+    } = workflowStore.getState()
+
+    const isStringOutput = data.outputs && Object.keys(data.outputs).length === 1 && typeof data.outputs[Object.keys(data.outputs)[0]] === 'string'
+
+    setWorkflowRunningData(produce(workflowRunningData!, (draft) => {
+      draft.result = {
+        ...draft.result,
+        ...data,
+        files: getFilesInLogs(data.outputs),
+      } as any
+      if (isStringOutput) {
+        draft.resultTabActive = true
+        draft.resultText = data.outputs[Object.keys(data.outputs)[0]]
+      }
+    }))
+  }, [workflowStore])
+
+  return {
+    handleWorkflowFinished,
+  }
+}

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

@@ -0,0 +1,72 @@
+import { useCallback } from 'react'
+import { useStoreApi } from 'reactflow'
+import { produce } from 'immer'
+import type { NodeFinishedResponse } from '@/types/workflow'
+import {
+  BlockEnum,
+  NodeRunningStatus,
+} from '@/app/components/workflow/types'
+import { ErrorHandleTypeEnum } from '@/app/components/workflow/nodes/_base/components/error-handle/types'
+import { useWorkflowStore } from '@/app/components/workflow/store'
+
+export const useWorkflowNodeFinished = () => {
+  const store = useStoreApi()
+  const workflowStore = useWorkflowStore()
+
+  const handleWorkflowNodeFinished = useCallback((params: NodeFinishedResponse) => {
+    const { data } = params
+    const {
+      workflowRunningData,
+      setWorkflowRunningData,
+    } = workflowStore.getState()
+    const {
+      getNodes,
+      setNodes,
+      edges,
+      setEdges,
+    } = store.getState()
+    const nodes = getNodes()
+    setWorkflowRunningData(produce(workflowRunningData!, (draft) => {
+      const currentIndex = draft.tracing!.findIndex(item => item.id === data.id)
+      if (currentIndex > -1) {
+        draft.tracing![currentIndex] = {
+          ...draft.tracing![currentIndex],
+          ...data,
+        }
+      }
+    }))
+
+    const newNodes = produce(nodes, (draft) => {
+      const currentNode = draft.find(node => node.id === data.node_id)!
+      currentNode.data._runningStatus = data.status
+      if (data.status === NodeRunningStatus.Exception) {
+        if (data.execution_metadata?.error_strategy === ErrorHandleTypeEnum.failBranch)
+          currentNode.data._runningBranchId = ErrorHandleTypeEnum.failBranch
+      }
+      else {
+        if (data.node_type === BlockEnum.IfElse)
+          currentNode.data._runningBranchId = data?.outputs?.selected_case_id
+
+        if (data.node_type === BlockEnum.QuestionClassifier)
+          currentNode.data._runningBranchId = data?.outputs?.class_id
+      }
+    })
+    setNodes(newNodes)
+    const newEdges = produce(edges, (draft) => {
+      const incomeEdges = draft.filter((edge) => {
+        return edge.target === data.node_id
+      })
+      incomeEdges.forEach((edge) => {
+        edge.data = {
+          ...edge.data,
+          _targetRunningStatus: data.status,
+        }
+      })
+    })
+    setEdges(newEdges)
+  }, [store, workflowStore])
+
+  return {
+    handleWorkflowNodeFinished,
+  }
+}

dify/web/app/components/workflow/hooks/use-workflow-run-event/use-workflow-node-iteration-finished.ts

@@ -0,0 +1,60 @@
+import { useCallback } from 'react'
+import { useStoreApi } from 'reactflow'
+import { produce } from 'immer'
+import type { IterationFinishedResponse } from '@/types/workflow'
+import { useWorkflowStore } from '@/app/components/workflow/store'
+import { DEFAULT_ITER_TIMES } from '@/app/components/workflow/constants'
+
+export const useWorkflowNodeIterationFinished = () => {
+  const store = useStoreApi()
+  const workflowStore = useWorkflowStore()
+
+  const handleWorkflowNodeIterationFinished = useCallback((params: IterationFinishedResponse) => {
+    const { data } = params
+    const {
+      workflowRunningData,
+      setWorkflowRunningData,
+      setIterTimes,
+    } = workflowStore.getState()
+    const {
+      getNodes,
+      setNodes,
+      edges,
+      setEdges,
+    } = store.getState()
+    const nodes = getNodes()
+    setWorkflowRunningData(produce(workflowRunningData!, (draft) => {
+      const currentIndex = draft.tracing!.findIndex(item => item.id === data.id)
+
+      if (currentIndex > -1) {
+        draft.tracing![currentIndex] = {
+          ...draft.tracing![currentIndex],
+          ...data,
+        }
+      }
+    }))
+    setIterTimes(DEFAULT_ITER_TIMES)
+    const newNodes = produce(nodes, (draft) => {
+      const currentNode = draft.find(node => node.id === data.node_id)!
+
+      currentNode.data._runningStatus = data.status
+    })
+    setNodes(newNodes)
+    const newEdges = produce(edges, (draft) => {
+      const incomeEdges = draft.filter((edge) => {
+        return edge.target === data.node_id
+      })
+      incomeEdges.forEach((edge) => {
+        edge.data = {
+          ...edge.data,
+          _targetRunningStatus: data.status,
+        }
+      })
+    })
+    setEdges(newEdges)
+  }, [workflowStore, store])
+
+  return {
+    handleWorkflowNodeIterationFinished,
+  }
+}

dify/web/app/components/workflow/hooks/use-workflow-run-event/use-workflow-node-iteration-next.ts

@@ -0,0 +1,35 @@
+import { useCallback } from 'react'
+import { useStoreApi } from 'reactflow'
+import { produce } from 'immer'
+import type { IterationNextResponse } from '@/types/workflow'
+import { useWorkflowStore } from '@/app/components/workflow/store'
+
+export const useWorkflowNodeIterationNext = () => {
+  const store = useStoreApi()
+  const workflowStore = useWorkflowStore()
+
+  const handleWorkflowNodeIterationNext = useCallback((params: IterationNextResponse) => {
+    const {
+      iterTimes,
+      setIterTimes,
+    } = workflowStore.getState()
+
+    const { data } = params
+    const {
+      getNodes,
+      setNodes,
+    } = store.getState()
+
+    const nodes = getNodes()
+    const newNodes = produce(nodes, (draft) => {
+      const currentNode = draft.find(node => node.id === data.node_id)!
+      currentNode.data._iterationIndex = iterTimes
+      setIterTimes(iterTimes + 1)
+    })
+    setNodes(newNodes)
+  }, [workflowStore, store])
+
+  return {
+    handleWorkflowNodeIterationNext,
+  }
+}

dify/web/app/components/workflow/hooks/use-workflow-run-event/use-workflow-node-iteration-started.ts

@@ -0,0 +1,85 @@
+import { useCallback } from 'react'
+import {
+  useReactFlow,
+  useStoreApi,
+} from 'reactflow'
+import { produce } from 'immer'
+import { useWorkflowStore } from '@/app/components/workflow/store'
+import type { IterationStartedResponse } from '@/types/workflow'
+import { NodeRunningStatus } from '@/app/components/workflow/types'
+import { DEFAULT_ITER_TIMES } from '@/app/components/workflow/constants'
+
+export const useWorkflowNodeIterationStarted = () => {
+  const store = useStoreApi()
+  const reactflow = useReactFlow()
+  const workflowStore = useWorkflowStore()
+
+  const handleWorkflowNodeIterationStarted = useCallback((
+    params: IterationStartedResponse,
+    containerParams: {
+      clientWidth: number,
+      clientHeight: number,
+    },
+  ) => {
+    const { data } = params
+    const {
+      workflowRunningData,
+      setWorkflowRunningData,
+      setIterTimes,
+    } = workflowStore.getState()
+    const {
+      getNodes,
+      setNodes,
+      edges,
+      setEdges,
+      transform,
+    } = store.getState()
+    const nodes = getNodes()
+    setWorkflowRunningData(produce(workflowRunningData!, (draft) => {
+      draft.tracing!.push({
+        ...data,
+        status: NodeRunningStatus.Running,
+      })
+    }))
+    setIterTimes(DEFAULT_ITER_TIMES)
+
+    const {
+      setViewport,
+    } = reactflow
+    const currentNodeIndex = nodes.findIndex(node => node.id === data.node_id)
+    const currentNode = nodes[currentNodeIndex]
+    const position = currentNode.position
+    const zoom = transform[2]
+
+    if (!currentNode.parentId) {
+      setViewport({
+        x: (containerParams.clientWidth - 400 - currentNode.width! * zoom) / 2 - position.x * zoom,
+        y: (containerParams.clientHeight - currentNode.height! * zoom) / 2 - position.y * zoom,
+        zoom: transform[2],
+      })
+    }
+    const newNodes = produce(nodes, (draft) => {
+      draft[currentNodeIndex].data._runningStatus = NodeRunningStatus.Running
+      draft[currentNodeIndex].data._iterationLength = data.metadata.iterator_length
+      draft[currentNodeIndex].data._waitingRun = false
+    })
+    setNodes(newNodes)
+    const newEdges = produce(edges, (draft) => {
+      const incomeEdges = draft.filter(edge => edge.target === data.node_id)
+
+      incomeEdges.forEach((edge) => {
+        edge.data = {
+          ...edge.data,
+          _sourceRunningStatus: nodes.find(node => node.id === edge.source)!.data._runningStatus,
+          _targetRunningStatus: NodeRunningStatus.Running,
+          _waitingRun: false,
+        }
+      })
+    })
+    setEdges(newEdges)
+  }, [workflowStore, store, reactflow])
+
+  return {
+    handleWorkflowNodeIterationStarted,
+  }
+}

dify/web/app/components/workflow/hooks/use-workflow-run-event/use-workflow-node-loop-finished.ts

@@ -0,0 +1,57 @@
+import { useCallback } from 'react'
+import { useStoreApi } from 'reactflow'
+import { produce } from 'immer'
+import type { LoopFinishedResponse } from '@/types/workflow'
+import { useWorkflowStore } from '@/app/components/workflow/store'
+
+export const useWorkflowNodeLoopFinished = () => {
+  const store = useStoreApi()
+  const workflowStore = useWorkflowStore()
+
+  const handleWorkflowNodeLoopFinished = useCallback((params: LoopFinishedResponse) => {
+    const { data } = params
+    const {
+      workflowRunningData,
+      setWorkflowRunningData,
+    } = workflowStore.getState()
+    const {
+      getNodes,
+      setNodes,
+      edges,
+      setEdges,
+    } = store.getState()
+    const nodes = getNodes()
+    setWorkflowRunningData(produce(workflowRunningData!, (draft) => {
+      const currentIndex = draft.tracing!.findIndex(item => item.id === data.id)
+
+      if (currentIndex > -1) {
+        draft.tracing![currentIndex] = {
+          ...draft.tracing![currentIndex],
+          ...data,
+        }
+      }
+    }))
+    const newNodes = produce(nodes, (draft) => {
+      const currentNode = draft.find(node => node.id === data.node_id)!
+
+      currentNode.data._runningStatus = data.status
+    })
+    setNodes(newNodes)
+    const newEdges = produce(edges, (draft) => {
+      const incomeEdges = draft.filter((edge) => {
+        return edge.target === data.node_id
+      })
+      incomeEdges.forEach((edge) => {
+        edge.data = {
+          ...edge.data,
+          _targetRunningStatus: data.status,
+        }
+      })
+    })
+    setEdges(newEdges)
+  }, [workflowStore, store])
+
+  return {
+    handleWorkflowNodeLoopFinished,
+  }
+}

dify/web/app/components/workflow/hooks/use-workflow-run-event/use-workflow-node-loop-next.ts

@@ -0,0 +1,35 @@
+import { useCallback } from 'react'
+import { useStoreApi } from 'reactflow'
+import { produce } from 'immer'
+import type { LoopNextResponse } from '@/types/workflow'
+import { NodeRunningStatus } from '@/app/components/workflow/types'
+
+export const useWorkflowNodeLoopNext = () => {
+  const store = useStoreApi()
+
+  const handleWorkflowNodeLoopNext = useCallback((params: LoopNextResponse) => {
+    const { data } = params
+    const {
+      getNodes,
+      setNodes,
+    } = store.getState()
+
+    const nodes = getNodes()
+    const newNodes = produce(nodes, (draft) => {
+      const currentNode = draft.find(node => node.id === data.node_id)!
+      currentNode.data._loopIndex = data.index
+
+      draft.forEach((node) => {
+        if (node.parentId === data.node_id) {
+          node.data._waitingRun = true
+          node.data._runningStatus = NodeRunningStatus.Waiting
+        }
+      })
+    })
+    setNodes(newNodes)
+  }, [store])
+
+  return {
+    handleWorkflowNodeLoopNext,
+  }
+}

dify/web/app/components/workflow/hooks/use-workflow-run-event/use-workflow-node-loop-started.ts

@@ -0,0 +1,82 @@
+import { useCallback } from 'react'
+import {
+  useReactFlow,
+  useStoreApi,
+} from 'reactflow'
+import { produce } from 'immer'
+import { useWorkflowStore } from '@/app/components/workflow/store'
+import type { LoopStartedResponse } from '@/types/workflow'
+import { NodeRunningStatus } from '@/app/components/workflow/types'
+
+export const useWorkflowNodeLoopStarted = () => {
+  const store = useStoreApi()
+  const reactflow = useReactFlow()
+  const workflowStore = useWorkflowStore()
+
+  const handleWorkflowNodeLoopStarted = useCallback((
+    params: LoopStartedResponse,
+    containerParams: {
+      clientWidth: number,
+      clientHeight: number,
+    },
+  ) => {
+    const { data } = params
+    const {
+      workflowRunningData,
+      setWorkflowRunningData,
+    } = workflowStore.getState()
+    const {
+      getNodes,
+      setNodes,
+      edges,
+      setEdges,
+      transform,
+    } = store.getState()
+    const nodes = getNodes()
+    setWorkflowRunningData(produce(workflowRunningData!, (draft) => {
+      draft.tracing!.push({
+        ...data,
+        status: NodeRunningStatus.Running,
+      })
+    }))
+
+    const {
+      setViewport,
+    } = reactflow
+    const currentNodeIndex = nodes.findIndex(node => node.id === data.node_id)
+    const currentNode = nodes[currentNodeIndex]
+    const position = currentNode.position
+    const zoom = transform[2]
+
+    if (!currentNode.parentId) {
+      setViewport({
+        x: (containerParams.clientWidth - 400 - currentNode.width! * zoom) / 2 - position.x * zoom,
+        y: (containerParams.clientHeight - currentNode.height! * zoom) / 2 - position.y * zoom,
+        zoom: transform[2],
+      })
+    }
+    const newNodes = produce(nodes, (draft) => {
+      draft[currentNodeIndex].data._runningStatus = NodeRunningStatus.Running
+      draft[currentNodeIndex].data._loopLength = data.metadata.loop_length
+      draft[currentNodeIndex].data._waitingRun = false
+    })
+    setNodes(newNodes)
+    const newEdges = produce(edges, (draft) => {
+      const incomeEdges = draft.filter(edge => edge.target === data.node_id)
+
+      incomeEdges.forEach((edge) => {
+        edge.data = {
+          ...edge.data,
+          _sourceRunningStatus: nodes.find(node => node.id === edge.source)!.data._runningStatus,
+          _targetRunningStatus: NodeRunningStatus.Running,
+          _waitingRun: false,
+        }
+      })
+    })
+    setEdges(newEdges)
+  }, [workflowStore, store, reactflow])
+
+  return {
+    handleWorkflowNodeLoopStarted,
+  }
+}

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

@@ -0,0 +1,39 @@
+import { useCallback } from 'react'
+import { useStoreApi } from 'reactflow'
+import { produce } from 'immer'
+import type {
+  NodeFinishedResponse,
+} from '@/types/workflow'
+import { useWorkflowStore } from '@/app/components/workflow/store'
+
+export const useWorkflowNodeRetry = () => {
+  const store = useStoreApi()
+  const workflowStore = useWorkflowStore()
+
+  const handleWorkflowNodeRetry = useCallback((params: NodeFinishedResponse) => {
+    const { data } = params
+    const {
+      workflowRunningData,
+      setWorkflowRunningData,
+    } = workflowStore.getState()
+    const {
+      getNodes,
+      setNodes,
+    } = store.getState()
+
+    const nodes = getNodes()
+    setWorkflowRunningData(produce(workflowRunningData!, (draft) => {
+      draft.tracing!.push(data)
+    }))
+    const newNodes = produce(nodes, (draft) => {
+      const currentNode = draft.find(node => node.id === data.node_id)!
+
+      currentNode.data._retryIndex = data.retry_index
+    })
+    setNodes(newNodes)
+  }, [workflowStore, store])
+
+  return {
+    handleWorkflowNodeRetry,
+  }
+}

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

@@ -0,0 +1,92 @@
+import { useCallback } from 'react'
+import {
+  useReactFlow,
+  useStoreApi,
+} from 'reactflow'
+import { produce } from 'immer'
+import type { NodeStartedResponse } from '@/types/workflow'
+import { NodeRunningStatus } from '@/app/components/workflow/types'
+import { useWorkflowStore } from '@/app/components/workflow/store'
+
+export const useWorkflowNodeStarted = () => {
+  const store = useStoreApi()
+  const workflowStore = useWorkflowStore()
+  const reactflow = useReactFlow()
+
+  const handleWorkflowNodeStarted = useCallback((
+    params: NodeStartedResponse,
+    containerParams: {
+      clientWidth: number,
+      clientHeight: number,
+    },
+  ) => {
+    const { data } = params
+    const {
+      workflowRunningData,
+      setWorkflowRunningData,
+    } = workflowStore.getState()
+    const {
+      getNodes,
+      setNodes,
+      edges,
+      setEdges,
+      transform,
+    } = store.getState()
+    const nodes = getNodes()
+    setWorkflowRunningData(produce(workflowRunningData!, (draft) => {
+      draft.tracing!.push({
+        ...data,
+        status: NodeRunningStatus.Running,
+      })
+    }))
+
+    const {
+      setViewport,
+    } = reactflow
+    const currentNodeIndex = nodes.findIndex(node => node.id === data.node_id)
+    const currentNode = nodes[currentNodeIndex]
+    const position = currentNode.position
+    const zoom = transform[2]
+
+    if (!currentNode.parentId) {
+      setViewport({
+        x: (containerParams.clientWidth - 400 - currentNode.width! * zoom) / 2 - position.x * zoom,
+        y: (containerParams.clientHeight - currentNode.height! * zoom) / 2 - position.y * zoom,
+        zoom: transform[2],
+      })
+    }
+    const newNodes = produce(nodes, (draft) => {
+      draft[currentNodeIndex].data._runningStatus = NodeRunningStatus.Running
+      draft[currentNodeIndex].data._waitingRun = false
+    })
+    setNodes(newNodes)
+    const newEdges = produce(edges, (draft) => {
+      const incomeEdges = draft.filter((edge) => {
+        return edge.target === data.node_id
+      })
+
+      incomeEdges.forEach((edge) => {
+        const incomeNode = nodes.find(node => node.id === edge.source)!
+        if (!incomeNode || !('data' in incomeNode))
+          return
+
+        if (
+          (!incomeNode.data._runningBranchId && edge.sourceHandle === 'source')
+          || (incomeNode.data._runningBranchId && edge.sourceHandle === incomeNode.data._runningBranchId)
+        ) {
+          edge.data = {
+            ...edge.data,
+            _sourceRunningStatus: incomeNode.data._runningStatus,
+            _targetRunningStatus: NodeRunningStatus.Running,
+            _waitingRun: false,
+          }
+        }
+      })
+    })
+    setEdges(newEdges)
+  }, [workflowStore, store, reactflow])
+
+  return {
+    handleWorkflowNodeStarted,
+  }
+}

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

@@ -0,0 +1,53 @@
+import {
+  useWorkflowAgentLog,
+  useWorkflowFailed,
+  useWorkflowFinished,
+  useWorkflowNodeFinished,
+  useWorkflowNodeIterationFinished,
+  useWorkflowNodeIterationNext,
+  useWorkflowNodeIterationStarted,
+  useWorkflowNodeLoopFinished,
+  useWorkflowNodeLoopNext,
+  useWorkflowNodeLoopStarted,
+  useWorkflowNodeRetry,
+  useWorkflowNodeStarted,
+  useWorkflowStarted,
+  useWorkflowTextChunk,
+  useWorkflowTextReplace,
+} from '.'
+
+export const useWorkflowRunEvent = () => {
+  const { handleWorkflowStarted } = useWorkflowStarted()
+  const { handleWorkflowFinished } = useWorkflowFinished()
+  const { handleWorkflowFailed } = useWorkflowFailed()
+  const { handleWorkflowNodeStarted } = useWorkflowNodeStarted()
+  const { handleWorkflowNodeFinished } = useWorkflowNodeFinished()
+  const { handleWorkflowNodeIterationStarted } = useWorkflowNodeIterationStarted()
+  const { handleWorkflowNodeIterationNext } = useWorkflowNodeIterationNext()
+  const { handleWorkflowNodeIterationFinished } = useWorkflowNodeIterationFinished()
+  const { handleWorkflowNodeLoopStarted } = useWorkflowNodeLoopStarted()
+  const { handleWorkflowNodeLoopNext } = useWorkflowNodeLoopNext()
+  const { handleWorkflowNodeLoopFinished } = useWorkflowNodeLoopFinished()
+  const { handleWorkflowNodeRetry } = useWorkflowNodeRetry()
+  const { handleWorkflowTextChunk } = useWorkflowTextChunk()
+  const { handleWorkflowTextReplace } = useWorkflowTextReplace()
+  const { handleWorkflowAgentLog } = useWorkflowAgentLog()
+
+  return {
+    handleWorkflowStarted,
+    handleWorkflowFinished,
+    handleWorkflowFailed,
+    handleWorkflowNodeStarted,
+    handleWorkflowNodeFinished,
+    handleWorkflowNodeIterationStarted,
+    handleWorkflowNodeIterationNext,
+    handleWorkflowNodeIterationFinished,
+    handleWorkflowNodeLoopStarted,
+    handleWorkflowNodeLoopNext,
+    handleWorkflowNodeLoopFinished,
+    handleWorkflowNodeRetry,
+    handleWorkflowTextChunk,
+    handleWorkflowTextReplace,
+    handleWorkflowAgentLog,
+  }
+}

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

@@ -0,0 +1,58 @@
+import { useCallback } from 'react'
+import { useStoreApi } from 'reactflow'
+import { produce } from 'immer'
+import type { WorkflowStartedResponse } from '@/types/workflow'
+import { WorkflowRunningStatus } from '@/app/components/workflow/types'
+import { useWorkflowStore } from '@/app/components/workflow/store'
+
+export const useWorkflowStarted = () => {
+  const store = useStoreApi()
+  const workflowStore = useWorkflowStore()
+
+  const handleWorkflowStarted = useCallback((params: WorkflowStartedResponse) => {
+    const { task_id, data } = params
+    const {
+      workflowRunningData,
+      setWorkflowRunningData,
+      setIterParallelLogMap,
+    } = workflowStore.getState()
+    const {
+      getNodes,
+      setNodes,
+      edges,
+      setEdges,
+    } = store.getState()
+    setIterParallelLogMap(new Map())
+    setWorkflowRunningData(produce(workflowRunningData!, (draft) => {
+      draft.task_id = task_id
+      draft.result = {
+        ...draft?.result,
+        ...data,
+        status: WorkflowRunningStatus.Running,
+      }
+    }))
+    const nodes = getNodes()
+    const newNodes = produce(nodes, (draft) => {
+      draft.forEach((node) => {
+        node.data._waitingRun = true
+        node.data._runningBranchId = undefined
+      })
+    })
+    setNodes(newNodes)
+    const newEdges = produce(edges, (draft) => {
+      draft.forEach((edge) => {
+        edge.data = {
+          ...edge.data,
+          _sourceRunningStatus: undefined,
+          _targetRunningStatus: undefined,
+          _waitingRun: true,
+        }
+      })
+    })
+    setEdges(newEdges)
+  }, [workflowStore, store])
+
+  return {
+    handleWorkflowStarted,
+  }
+}

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

@@ -0,0 +1,25 @@
+import { useCallback } from 'react'
+import { produce } from 'immer'
+import type { TextChunkResponse } from '@/types/workflow'
+import { useWorkflowStore } from '@/app/components/workflow/store'
+
+export const useWorkflowTextChunk = () => {
+  const workflowStore = useWorkflowStore()
+
+  const handleWorkflowTextChunk = useCallback((params: TextChunkResponse) => {
+    const { data: { text } } = params
+    const {
+      workflowRunningData,
+      setWorkflowRunningData,
+    } = workflowStore.getState()
+
+    setWorkflowRunningData(produce(workflowRunningData!, (draft) => {
+      draft.resultTabActive = true
+      draft.resultText += text
+    }))
+  }, [workflowStore])
+
+  return {
+    handleWorkflowTextChunk,
+  }
+}

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

@@ -0,0 +1,23 @@
+import { useCallback } from 'react'
+import { produce } from 'immer'
+import type { TextReplaceResponse } from '@/types/workflow'
+import { useWorkflowStore } from '@/app/components/workflow/store'
+
+export const useWorkflowTextReplace = () => {
+  const workflowStore = useWorkflowStore()
+
+  const handleWorkflowTextReplace = useCallback((params: TextReplaceResponse) => {
+    const { data: { text } } = params
+    const {
+      workflowRunningData,
+      setWorkflowRunningData,
+    } = workflowStore.getState()
+    setWorkflowRunningData(produce(workflowRunningData!, (draft) => {
+      draft.resultText = text
+    }))
+  }, [workflowStore])
+
+  return {
+    handleWorkflowTextReplace,
+  }
+}