feat: Parallel Execution of Nodes in Workflows (#8192)

Co-authored-by: StyleZhang <jasonapring2015@outlook.com>
Co-authored-by: Yi <yxiaoisme@gmail.com>
Co-authored-by: -LAN- <laipz8200@outlook.com>

web/app/components/workflow/nodes/iteration/add-block.tsx

@@ -2,87 +2,49 @@ import {
   memo,
   useCallback,
 } from 'react'
-import produce from 'immer'
 import {
   RiAddLine,
 } from '@remixicon/react'
-import { useStoreApi } from 'reactflow'
 import { useTranslation } from 'react-i18next'
 import {
-  generateNewNode,
-} from '../../utils'
-import {
-  WorkflowHistoryEvent,
   useAvailableBlocks,
+  useNodesInteractions,
   useNodesReadOnly,
-  useWorkflowHistory,
 } from '../../hooks'
-import { NODES_INITIAL_DATA } from '../../constants'
-import InsertBlock from './insert-block'
 import type { IterationNodeType } from './types'
 import cn from '@/utils/classnames'
 import BlockSelector from '@/app/components/workflow/block-selector'
-import { IterationStart } from '@/app/components/base/icons/src/vender/workflow'
 import type {
   OnSelectBlock,
 } from '@/app/components/workflow/types'
 import {
   BlockEnum,
 } from '@/app/components/workflow/types'
-import Tooltip from '@/app/components/base/tooltip'
 
 type AddBlockProps = {
   iterationNodeId: string
   iterationNodeData: IterationNodeType
 }
 const AddBlock = ({
-  iterationNodeId,
   iterationNodeData,
 }: AddBlockProps) => {
   const { t } = useTranslation()
-  const store = useStoreApi()
   const { nodesReadOnly } = useNodesReadOnly()
+  const { handleNodeAdd } = useNodesInteractions()
   const { availableNextBlocks } = useAvailableBlocks(BlockEnum.Start, true)
-  const { availablePrevBlocks } = useAvailableBlocks(iterationNodeData.startNodeType, true)
-  const { saveStateToHistory } = useWorkflowHistory()
 
   const handleSelect = useCallback<OnSelectBlock>((type, toolDefaultValue) => {
-    const {
-      getNodes,
-      setNodes,
-    } = store.getState()
-    const nodes = getNodes()
-    const nodesWithSameType = nodes.filter(node => node.data.type === type)
-    const newNode = generateNewNode({
-      data: {
-        ...NODES_INITIAL_DATA[type],
-        title: nodesWithSameType.length > 0 ? `${t(`workflow.blocks.${type}`)} ${nodesWithSameType.length + 1}` : t(`workflow.blocks.${type}`),
-        ...(toolDefaultValue || {}),
-        isIterationStart: true,
-        isInIteration: true,
-        iteration_id: iterationNodeId,
+    handleNodeAdd(
+      {
+        nodeType: type,
+        toolDefaultValue,
       },
-      position: {
-        x: 117,
-        y: 85,
+      {
+        prevNodeId: iterationNodeData.start_node_id,
+        prevNodeSourceHandle: 'source',
       },
-      zIndex: 1001,
-      parentId: iterationNodeId,
-      extent: 'parent',
-    })
-    const newNodes = produce(nodes, (draft) => {
-      draft.forEach((node) => {
-        if (node.id === iterationNodeId) {
-          node.data._children = [newNode.id]
-          node.data.start_node_id = newNode.id
-          node.data.startNodeType = newNode.data.type
-        }
-      })
-      draft.push(newNode)
-    })
-    setNodes(newNodes)
-    saveStateToHistory(WorkflowHistoryEvent.NodeAdd)
-  }, [store, t, iterationNodeId, saveStateToHistory])
+    )
+  }, [handleNodeAdd, iterationNodeData.start_node_id])
 
   const renderTriggerElement = useCallback((open: boolean) => {
     return (
@@ -98,35 +60,18 @@ const AddBlock = ({
   }, [nodesReadOnly, t])
 
   return (
-    <div className='absolute top-12 left-6 flex items-center h-8 z-10'>
-      <Tooltip popupContent={t('workflow.blocks.iteration-start')}>
-        <div className='flex items-center justify-center w-6 h-6 rounded-full border-[0.5px] border-black/[0.02] shadow-md bg-primary-500'>
-          <IterationStart className='w-4 h-4 text-white' />
-        </div>
-      </Tooltip>
+    <div className='absolute top-7 left-14 flex items-center h-8 z-10'>
       <div className='group/insert relative w-16 h-0.5 bg-gray-300'>
-        {
-          iterationNodeData.startNodeType && (
-            <InsertBlock
-              startNodeId={iterationNodeData.start_node_id}
-              availableBlocksTypes={availablePrevBlocks}
-            />
-          )
-        }
         <div className='absolute right-0 top-1/2 -translate-y-1/2 w-0.5 h-2 bg-primary-500'></div>
       </div>
-      {
-        !iterationNodeData.startNodeType && (
-          <BlockSelector
-            disabled={nodesReadOnly}
-            onSelect={handleSelect}
-            trigger={renderTriggerElement}
-            triggerInnerClassName='inline-flex'
-            popupClassName='!min-w-[256px]'
-            availableBlocksTypes={availableNextBlocks}
-          />
-        )
-      }
+      <BlockSelector
+        disabled={nodesReadOnly}
+        onSelect={handleSelect}
+        trigger={renderTriggerElement}
+        triggerInnerClassName='inline-flex'
+        popupClassName='!min-w-[256px]'
+        availableBlocksTypes={availableNextBlocks}
+      />
     </div>
   )
 }

web/app/components/workflow/nodes/iteration/default.ts

@@ -9,6 +9,7 @@ const nodeDefault: NodeDefault<IterationNodeType> = {
     start_node_id: '',
     iterator_selector: [],
     output_selector: [],
+    _children: [],
   },
   getAvailablePrevNodes(isChatMode: boolean) {
     const nodes = isChatMode

web/app/components/workflow/nodes/iteration/insert-block.tsx

@@ -1,61 +0,0 @@
-import {
-  memo,
-  useCallback,
-  useState,
-} from 'react'
-import { useNodesInteractions } from '../../hooks'
-import type {
-  BlockEnum,
-  OnSelectBlock,
-} from '../../types'
-import BlockSelector from '../../block-selector'
-import cn from '@/utils/classnames'
-
-type InsertBlockProps = {
-  startNodeId: string
-  availableBlocksTypes: BlockEnum[]
-}
-const InsertBlock = ({
-  startNodeId,
-  availableBlocksTypes,
-}: InsertBlockProps) => {
-  const [open, setOpen] = useState(false)
-  const { handleNodeAdd } = useNodesInteractions()
-
-  const handleOpenChange = useCallback((v: boolean) => {
-    setOpen(v)
-  }, [])
-  const handleInsert = useCallback<OnSelectBlock>((nodeType, toolDefaultValue) => {
-    handleNodeAdd(
-      {
-        nodeType,
-        toolDefaultValue,
-      },
-      {
-        nextNodeId: startNodeId,
-        nextNodeTargetHandle: 'target',
-      },
-    )
-  }, [startNodeId, handleNodeAdd])
-
-  return (
-    <div
-      className={cn(
-        'nopan nodrag',
-        'hidden group-hover/insert:block absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2',
-        open && '!block',
-      )}
-    >
-      <BlockSelector
-        open={open}
-        onOpenChange={handleOpenChange}
-        asChild
-        onSelect={handleInsert}
-        availableBlocksTypes={availableBlocksTypes}
-        triggerClassName={() => 'hover:scale-125 transition-all'}
-      />
-    </div>
-  )
-}
-
-export default memo(InsertBlock)

web/app/components/workflow/nodes/iteration/node.tsx

@@ -8,6 +8,7 @@ import {
   useNodesInitialized,
   useViewport,
 } from 'reactflow'
+import { IterationStartNodeDumb } from '../iteration-start'
 import { useNodeIterationInteractions } from './use-interactions'
 import type { IterationNodeType } from './types'
 import AddBlock from './add-block'
@@ -29,7 +30,7 @@ const Node: FC<NodeProps<IterationNodeType>> = ({
 
   return (
     <div className={cn(
-      'relative min-w-[258px] min-h-[118px] w-full h-full rounded-2xl bg-[#F0F2F7]/90',
+      'relative min-w-[240px] min-h-[90px] w-full h-full rounded-2xl bg-[#F0F2F7]/90',
     )}>
       <Background
         id={`iteration-background-${id}`}
@@ -38,10 +39,19 @@ const Node: FC<NodeProps<IterationNodeType>> = ({
         size={2 / zoom}
         color='#E4E5E7'
       />
-      <AddBlock
-        iterationNodeId={id}
-        iterationNodeData={data}
-      />
+      {
+        data._isCandidate && (
+          <IterationStartNodeDumb />
+        )
+      }
+      {
+        data._children!.length === 1 && (
+          <AddBlock
+            iterationNodeId={id}
+            iterationNodeData={data}
+          />
+        )
+      }
     </div>
   )
 }

web/app/components/workflow/nodes/iteration/use-interactions.ts

@@ -11,6 +11,7 @@ import {
   ITERATION_PADDING,
   NODES_INITIAL_DATA,
 } from '../../constants'
+import { CUSTOM_ITERATION_START_NODE } from '../iteration-start/constants'
 
 export const useNodeIterationInteractions = () => {
   const { t } = useTranslation()
@@ -107,12 +108,12 @@ export const useNodeIterationInteractions = () => {
   const handleNodeIterationChildrenCopy = useCallback((nodeId: string, newNodeId: string) => {
     const { getNodes } = store.getState()
     const nodes = getNodes()
-    const childrenNodes = nodes.filter(n => n.parentId === nodeId)
+    const childrenNodes = nodes.filter(n => n.parentId === nodeId && n.type !== CUSTOM_ITERATION_START_NODE)
 
     return childrenNodes.map((child, index) => {
       const childNodeType = child.data.type as BlockEnum
       const nodesWithSameType = nodes.filter(node => node.data.type === childNodeType)
-      const newNode = generateNewNode({
+      const { newNode } = generateNewNode({
         data: {
           ...NODES_INITIAL_DATA[childNodeType],
           ...child.data,
@@ -121,6 +122,7 @@ export const useNodeIterationInteractions = () => {
           _connectedSourceHandleIds: [],
           _connectedTargetHandleIds: [],
           title: nodesWithSameType.length > 0 ? `${t(`workflow.blocks.${childNodeType}`)} ${nodesWithSameType.length + 1}` : t(`workflow.blocks.${childNodeType}`),
+          iteration_id: newNodeId,
         },
         position: child.position,
         positionAbsolute: child.positionAbsolute,