Feature/newnew workflow loop node (#14863)

Co-authored-by: arkunzz <4873204@qq.com>

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

@@ -6,6 +6,9 @@ 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'

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

@@ -0,0 +1,46 @@
+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'
+import { DEFAULT_LOOP_TIMES } from '@/app/components/workflow/constants'
+
+export const useWorkflowNodeLoopFinished = () => {
+  const store = useStoreApi()
+  const workflowStore = useWorkflowStore()
+
+  const handleWorkflowNodeLoopFinished = useCallback((params: LoopFinishedResponse) => {
+    const { data } = params
+    const {
+      workflowRunningData,
+      setWorkflowRunningData,
+      setLoopTimes,
+    } = workflowStore.getState()
+    const {
+      getNodes,
+      setNodes,
+    } = 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,
+        }
+      }
+    }))
+    setLoopTimes(DEFAULT_LOOP_TIMES)
+    const newNodes = produce(nodes, (draft) => {
+      const currentNode = draft.find(node => node.id === data.node_id)!
+
+      currentNode.data._runningStatus = data.status
+    })
+    setNodes(newNodes)
+  }, [workflowStore, store])
+
+  return {
+    handleWorkflowNodeLoopFinished,
+  }
+}

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 { useWorkflowStore } from '@/app/components/workflow/store'
+
+export const useWorkflowNodeLoopNext = () => {
+  const store = useStoreApi()
+  const workflowStore = useWorkflowStore()
+
+  const handleWorkflowNodeLoopNext = useCallback((params: LoopNextResponse) => {
+    const {
+      loopTimes,
+      setLoopTimes,
+    } = 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._loopIndex = loopTimes
+      setLoopTimes(loopTimes + 1)
+    })
+    setNodes(newNodes)
+  }, [workflowStore, store])
+
+  return {
+    handleWorkflowNodeLoopNext,
+  }
+}

web/app/components/workflow/hooks/use-workflow-run-event/use-workflow-node-loop-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 { LoopStartedResponse } from '@/types/workflow'
+import { NodeRunningStatus } from '@/app/components/workflow/types'
+import { DEFAULT_LOOP_TIMES } from '@/app/components/workflow/constants'
+
+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,
+      setLoopTimes,
+    } = workflowStore.getState()
+    const {
+      getNodes,
+      setNodes,
+      edges,
+      setEdges,
+      transform,
+    } = store.getState()
+    const nodes = getNodes()
+    setWorkflowRunningData(produce(workflowRunningData!, (draft) => {
+      draft.tracing!.push({
+        ...data,
+        status: NodeRunningStatus.Running,
+      })
+    }))
+    setLoopTimes(DEFAULT_LOOP_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._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,
+  }
+}

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

@@ -6,6 +6,9 @@ import {
   useWorkflowNodeIterationFinished,
   useWorkflowNodeIterationNext,
   useWorkflowNodeIterationStarted,
+  useWorkflowNodeLoopFinished,
+  useWorkflowNodeLoopNext,
+  useWorkflowNodeLoopStarted,
   useWorkflowNodeRetry,
   useWorkflowNodeStarted,
   useWorkflowStarted,
@@ -22,6 +25,9 @@ export const useWorkflowRunEvent = () => {
   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()
@@ -36,6 +42,9 @@ export const useWorkflowRunEvent = () => {
     handleWorkflowNodeIterationStarted,
     handleWorkflowNodeIterationNext,
     handleWorkflowNodeIterationFinished,
+    handleWorkflowNodeLoopStarted,
+    handleWorkflowNodeLoopNext,
+    handleWorkflowNodeLoopFinished,
     handleWorkflowNodeRetry,
     handleWorkflowTextChunk,
     handleWorkflowTextReplace,