feat: iteration support parallel

web/app/components/workflow/candidate-node.tsx

@@ -14,6 +14,7 @@ import {
 } from './store'
 import { WorkflowHistoryEvent, useNodesInteractions, useWorkflowHistory } from './hooks'
 import { CUSTOM_NODE } from './constants'
+import { getIterationStartNode } from './utils'
 import CustomNode from './nodes'
 import CustomNoteNode from './note-node'
 import { CUSTOM_NOTE_NODE } from './note-node/constants'
@@ -52,6 +53,7 @@ const CandidateNode = () => {
             y,
           },
         })
+        draft.push(getIterationStartNode(candidateNode.id))
       })
       setNodes(newNodes)
       if (candidateNode.type === CUSTOM_NOTE_NODE)

web/app/components/workflow/constants.ts

@@ -15,6 +15,7 @@ import VariableAssignerDefault from './nodes/variable-assigner/default'
 import AssignerDefault from './nodes/assigner/default'
 import EndNodeDefault from './nodes/end/default'
 import IterationDefault from './nodes/iteration/default'
+import IterationStartDefault from './nodes/iteration-start/default'
 
 type NodesExtraData = {
   author: string
@@ -89,6 +90,15 @@ export const NODES_EXTRA_DATA: Record<BlockEnum, NodesExtraData> = {
     getAvailableNextNodes: IterationDefault.getAvailableNextNodes,
     checkValid: IterationDefault.checkValid,
   },
+  [BlockEnum.IterationStart]: {
+    author: 'Dify',
+    about: '',
+    availablePrevNodes: [],
+    availableNextNodes: [],
+    getAvailablePrevNodes: IterationStartDefault.getAvailablePrevNodes,
+    getAvailableNextNodes: IterationStartDefault.getAvailableNextNodes,
+    checkValid: IterationStartDefault.checkValid,
+  },
   [BlockEnum.Code]: {
     author: 'Dify',
     about: '',
@@ -222,6 +232,12 @@ export const NODES_INITIAL_DATA = {
     desc: '',
     ...IterationDefault.defaultValue,
   },
+  [BlockEnum.IterationStart]: {
+    type: BlockEnum.IterationStart,
+    title: '',
+    desc: '',
+    ...IterationStartDefault.defaultValue,
+  },
   [BlockEnum.Code]: {
     type: BlockEnum.Code,
     title: '',
@@ -305,7 +321,7 @@ export const AUTO_LAYOUT_OFFSET = {
 export const ITERATION_NODE_Z_INDEX = 1
 export const ITERATION_CHILDREN_Z_INDEX = 1002
 export const ITERATION_PADDING = {
-  top: 85,
+  top: 65,
   right: 16,
   bottom: 20,
   left: 16,
@@ -412,4 +428,5 @@ export const PARAMETER_EXTRACTOR_COMMON_STRUCT: Var[] = [
 
 export const WORKFLOW_DATA_UPDATE = 'WORKFLOW_DATA_UPDATE'
 export const CUSTOM_NODE = 'custom'
+export const CUSTOM_EDGE = 'custom'
 export const DSL_EXPORT_CHECK = 'DSL_EXPORT_CHECK'

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

@@ -26,6 +26,7 @@ import type {
 import { BlockEnum } from '../types'
 import { useWorkflowStore } from '../store'
 import {
+  CUSTOM_EDGE,
   ITERATION_CHILDREN_Z_INDEX,
   ITERATION_PADDING,
   NODES_INITIAL_DATA,
@@ -41,6 +42,7 @@ import {
 } from '../utils'
 import { CUSTOM_NOTE_NODE } from '../note-node/constants'
 import type { IterationNodeType } from '../nodes/iteration/types'
+import { CUSTOM_ITERATION_START_NODE } from '../nodes/iteration-start/constants'
 import type { VariableAssignerNodeType } from '../nodes/variable-assigner/types'
 import { useNodeIterationInteractions } from '../nodes/iteration/use-interactions'
 import { useWorkflowHistoryStore } from '../workflow-history-store'
@@ -80,7 +82,7 @@ export const useNodesInteractions = () => {
     if (getNodesReadOnly())
       return
 
-    if (node.data.isIterationStart || node.type === CUSTOM_NOTE_NODE)
+    if (node.type === CUSTOM_ITERATION_START_NODE || node.type === CUSTOM_NOTE_NODE)
       return
 
     dragNodeStartPosition.current = { x: node.position.x, y: node.position.y }
@@ -90,7 +92,7 @@ export const useNodesInteractions = () => {
     if (getNodesReadOnly())
       return
 
-    if (node.data.isIterationStart)
+    if (node.type === CUSTOM_ITERATION_START_NODE)
       return
 
     const {
@@ -157,7 +159,7 @@ export const useNodesInteractions = () => {
     if (getNodesReadOnly())
       return
 
-    if (node.type === CUSTOM_NOTE_NODE)
+    if (node.type === CUSTOM_NOTE_NODE || node.type === CUSTOM_ITERATION_START_NODE)
       return
 
     const {
@@ -228,7 +230,7 @@ export const useNodesInteractions = () => {
     if (getNodesReadOnly())
       return
 
-    if (node.type === CUSTOM_NOTE_NODE)
+    if (node.type === CUSTOM_NOTE_NODE || node.type === CUSTOM_ITERATION_START_NODE)
       return
 
     const {
@@ -303,6 +305,8 @@ export const useNodesInteractions = () => {
   }, [store, handleSyncWorkflowDraft])
 
   const handleNodeClick = useCallback<NodeMouseHandler>((_, node) => {
+    if (node.type === CUSTOM_ITERATION_START_NODE)
+      return
     handleNodeSelect(node.id)
   }, [handleNodeSelect])
 
@@ -338,7 +342,7 @@ export const useNodesInteractions = () => {
 
     const newEdge = {
       id: `${source}-${sourceHandle}-${target}-${targetHandle}`,
-      type: 'custom',
+      type: CUSTOM_EDGE,
       source: source!,
       target: target!,
       sourceHandle,
@@ -511,6 +515,12 @@ export const useNodesInteractions = () => {
           return handleNodeDelete(nodeId)
         }
         else {
+          if (iterationChildren.length === 1) {
+            handleNodeDelete(iterationChildren[0].id)
+            handleNodeDelete(nodeId)
+
+            return
+          }
           const { setShowConfirm, showConfirm } = workflowStore.getState()
 
           if (!showConfirm) {
@@ -542,14 +552,8 @@ export const useNodesInteractions = () => {
           }
         }
 
-        if (node.id === currentNode.parentId) {
+        if (node.id === currentNode.parentId)
           node.data._children = node.data._children?.filter(child => child !== nodeId)
-
-          if (currentNode.id === (node as Node<IterationNodeType>).data.start_node_id) {
-            (node as Node<IterationNodeType>).data.start_node_id = '';
-            (node as Node<IterationNodeType>).data.startNodeType = undefined
-          }
-        }
       })
       draft.splice(currentNodeIndex, 1)
     })
@@ -560,7 +564,7 @@ export const useNodesInteractions = () => {
     setEdges(newEdges)
     handleSyncWorkflowDraft()
 
-    if (currentNode.type === 'custom-note')
+    if (currentNode.type === CUSTOM_NOTE_NODE)
       saveStateToHistory(WorkflowHistoryEvent.NoteDelete)
 
     else
@@ -592,7 +596,10 @@ export const useNodesInteractions = () => {
     } = store.getState()
     const nodes = getNodes()
     const nodesWithSameType = nodes.filter(node => node.data.type === nodeType)
-    const newNode = generateNewNode({
+    const {
+      newNode,
+      newIterationStartNode,
+    } = generateNewNode({
       data: {
         ...NODES_INITIAL_DATA[nodeType],
         title: nodesWithSameType.length > 0 ? `${t(`workflow.blocks.${nodeType}`)} ${nodesWithSameType.length + 1}` : t(`workflow.blocks.${nodeType}`),
@@ -628,7 +635,7 @@ export const useNodesInteractions = () => {
 
       const newEdge: Edge = {
         id: `${prevNodeId}-${prevNodeSourceHandle}-${newNode.id}-${targetHandle}`,
-        type: 'custom',
+        type: CUSTOM_EDGE,
         source: prevNodeId,
         sourceHandle: prevNodeSourceHandle,
         target: newNode.id,
@@ -663,6 +670,8 @@ export const useNodesInteractions = () => {
             node.data._children?.push(newNode.id)
         })
         draft.push(newNode)
+        if (newIterationStartNode)
+          draft.push(newIterationStartNode)
       })
       setNodes(newNodes)
       if (newNode.data.type === BlockEnum.VariableAssigner || newNode.data.type === BlockEnum.VariableAggregator) {
@@ -707,15 +716,13 @@ export const useNodesInteractions = () => {
         newNode.data.iteration_id = nextNode.parentId
         newNode.zIndex = ITERATION_CHILDREN_Z_INDEX
       }
-      if (nextNode.data.isIterationStart)
-        newNode.data.isIterationStart = true
 
       let newEdge
 
       if ((nodeType !== BlockEnum.IfElse) && (nodeType !== BlockEnum.QuestionClassifier)) {
         newEdge = {
           id: `${newNode.id}-${sourceHandle}-${nextNodeId}-${nextNodeTargetHandle}`,
-          type: 'custom',
+          type: CUSTOM_EDGE,
           source: newNode.id,
           sourceHandle,
           target: nextNodeId,
@@ -769,6 +776,8 @@ export const useNodesInteractions = () => {
             node.data.isIterationStart = false
         })
         draft.push(newNode)
+        if (newIterationStartNode)
+          draft.push(newIterationStartNode)
       })
       setNodes(newNodes)
       if (newEdge) {
@@ -805,7 +814,7 @@ export const useNodesInteractions = () => {
       const currentEdgeIndex = edges.findIndex(edge => edge.source === prevNodeId && edge.target === nextNodeId)
       const newPrevEdge = {
         id: `${prevNodeId}-${prevNodeSourceHandle}-${newNode.id}-${targetHandle}`,
-        type: 'custom',
+        type: CUSTOM_EDGE,
         source: prevNodeId,
         sourceHandle: prevNodeSourceHandle,
         target: newNode.id,
@@ -823,7 +832,7 @@ export const useNodesInteractions = () => {
       if (nodeType !== BlockEnum.IfElse && nodeType !== BlockEnum.QuestionClassifier) {
         newNextEdge = {
           id: `${newNode.id}-${sourceHandle}-${nextNodeId}-${nextNodeTargetHandle}`,
-          type: 'custom',
+          type: CUSTOM_EDGE,
           source: newNode.id,
           sourceHandle,
           target: nextNodeId,
@@ -866,6 +875,8 @@ export const useNodesInteractions = () => {
             node.data._children?.push(newNode.id)
         })
         draft.push(newNode)
+        if (newIterationStartNode)
+          draft.push(newIterationStartNode)
       })
       setNodes(newNodes)
       if (newNode.data.type === BlockEnum.VariableAssigner || newNode.data.type === BlockEnum.VariableAggregator) {
@@ -920,7 +931,10 @@ export const useNodesInteractions = () => {
     const currentNode = nodes.find(node => node.id === currentNodeId)!
     const connectedEdges = getConnectedEdges([currentNode], edges)
     const nodesWithSameType = nodes.filter(node => node.data.type === nodeType)
-    const newCurrentNode = generateNewNode({
+    const {
+      newNode: newCurrentNode,
+      newIterationStartNode,
+    } = generateNewNode({
       data: {
         ...NODES_INITIAL_DATA[nodeType],
         title: nodesWithSameType.length > 0 ? `${t(`workflow.blocks.${nodeType}`)} ${nodesWithSameType.length + 1}` : t(`workflow.blocks.${nodeType}`),
@@ -930,7 +944,6 @@ export const useNodesInteractions = () => {
         selected: currentNode.data.selected,
         isInIteration: currentNode.data.isInIteration,
         iteration_id: currentNode.data.iteration_id,
-        isIterationStart: currentNode.data.isIterationStart,
       },
       position: {
         x: currentNode.position.x,
@@ -956,18 +969,12 @@ export const useNodesInteractions = () => {
             ...nodesConnectedSourceOrTargetHandleIdsMap[node.id],
           }
         }
-        if (node.id === currentNode.parentId && currentNode.data.isIterationStart) {
-          node.data._children = [
-            newCurrentNode.id,
-            ...(node.data._children || []),
-          ].filter(child => child !== currentNodeId)
-          node.data.start_node_id = newCurrentNode.id
-          node.data.startNodeType = newCurrentNode.data.type
-        }
       })
       const index = draft.findIndex(node => node.id === currentNodeId)
 
       draft.splice(index, 1, newCurrentNode)
+      if (newIterationStartNode)
+        draft.push(newIterationStartNode)
     })
     setNodes(newNodes)
     const newEdges = produce(edges, (draft) => {
@@ -1012,7 +1019,7 @@ export const useNodesInteractions = () => {
   }, [store])
 
   const handleNodeContextMenu = useCallback((e: MouseEvent, node: Node) => {
-    if (node.type === CUSTOM_NOTE_NODE)
+    if (node.type === CUSTOM_NOTE_NODE || node.type === CUSTOM_ITERATION_START_NODE)
       return
 
     e.preventDefault()
@@ -1042,7 +1049,7 @@ export const useNodesInteractions = () => {
 
     if (nodeId) {
       // If nodeId is provided, copy that specific node
-      const nodeToCopy = nodes.find(node => node.id === nodeId && node.data.type !== BlockEnum.Start)
+      const nodeToCopy = nodes.find(node => node.id === nodeId && node.data.type !== BlockEnum.Start && node.type !== CUSTOM_ITERATION_START_NODE)
       if (nodeToCopy)
         setClipboardElements([nodeToCopy])
     }
@@ -1088,7 +1095,10 @@ export const useNodesInteractions = () => {
       clipboardElements.forEach((nodeToPaste, index) => {
         const nodeType = nodeToPaste.data.type
 
-        const newNode = generateNewNode({
+        const {
+          newNode,
+          newIterationStartNode,
+        } = generateNewNode({
           type: nodeToPaste.type,
           data: {
             ...NODES_INITIAL_DATA[nodeType],
@@ -1107,24 +1117,18 @@ export const useNodesInteractions = () => {
           zIndex: nodeToPaste.zIndex,
         })
         newNode.id = newNode.id + index
-
         // If only the iteration start node is copied, remove the isIterationStart flag
         // This new node is movable and can be placed anywhere
-        if (clipboardElements.length === 1 && newNode.data.isIterationStart)
-          newNode.data.isIterationStart = false
-
         let newChildren: Node[] = []
         if (nodeToPaste.data.type === BlockEnum.Iteration) {
-          newNode.data._children = [];
+          newIterationStartNode!.parentId = newNode.id;
-          (newNode.data as IterationNodeType).start_node_id = ''
+          (newNode.data as IterationNodeType).start_node_id = newIterationStartNode!.id
 
           newChildren = handleNodeIterationChildrenCopy(nodeToPaste.id, newNode.id)
-
           newChildren.forEach((child) => {
             newNode.data._children?.push(child.id)
-            if (child.data.isIterationStart)
-              (newNode.data as IterationNodeType).start_node_id = child.id
           })
+          newChildren.push(newIterationStartNode!)
         }
 
         nodesToPaste.push(newNode)

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

@@ -10,13 +10,13 @@ export const useWorkflowTemplate = () => {
   const isChatMode = useIsChatMode()
   const nodesInitialData = useNodesInitialData()
 
-  const startNode = generateNewNode({
+  const { newNode: startNode } = generateNewNode({
     data: nodesInitialData.start,
     position: START_INITIAL_POSITION,
   })
 
   if (isChatMode) {
-    const llmNode = generateNewNode({
+    const { newNode: llmNode } = generateNewNode({
       id: 'llm',
       data: {
         ...nodesInitialData.llm,
@@ -31,7 +31,7 @@ export const useWorkflowTemplate = () => {
       },
     } as any)
 
-    const answerNode = generateNewNode({
+    const { newNode: answerNode } = generateNewNode({
       id: 'answer',
       data: {
         ...nodesInitialData.answer,

web/app/components/workflow/index.tsx

@@ -55,6 +55,8 @@ import Header from './header'
 import CustomNode from './nodes'
 import CustomNoteNode from './note-node'
 import { CUSTOM_NOTE_NODE } from './note-node/constants'
+import CustomIterationStartNode from './nodes/iteration-start'
+import { CUSTOM_ITERATION_START_NODE } from './nodes/iteration-start/constants'
 import Operator from './operator'
 import CustomEdge from './custom-edge'
 import CustomConnectionLine from './custom-connection-line'
@@ -92,6 +94,7 @@ import Confirm from '@/app/components/base/confirm'
 const nodeTypes = {
   [CUSTOM_NODE]: CustomNode,
   [CUSTOM_NOTE_NODE]: CustomNoteNode,
+  [CUSTOM_ITERATION_START_NODE]: CustomIterationStartNode,
 }
 const edgeTypes = {
   [CUSTOM_NODE]: CustomEdge,

web/app/components/workflow/nodes/_base/components/node-resizer.tsx

@@ -28,8 +28,8 @@ const NodeResizer = ({
   nodeId,
   nodeData,
   icon = <Icon />,
-  minWidth = 272,
+  minWidth = 258,
-  minHeight = 176,
+  minHeight = 152,
   maxWidth,
 }: NodeResizerProps) => {
   const { handleNodeResize } = useNodesInteractions()

web/app/components/workflow/nodes/iteration-start/constants.ts

@@ -0,0 +1 @@
+export const CUSTOM_ITERATION_START_NODE = 'custom-iteration-start'

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

@@ -0,0 +1,21 @@
+import type { NodeDefault } from '../../types'
+import type { IterationStartNodeType } from './types'
+import { ALL_CHAT_AVAILABLE_BLOCKS, ALL_COMPLETION_AVAILABLE_BLOCKS } from '@/app/components/workflow/constants'
+
+const nodeDefault: NodeDefault<IterationStartNodeType> = {
+  defaultValue: {},
+  getAvailablePrevNodes() {
+    return []
+  },
+  getAvailableNextNodes(isChatMode: boolean) {
+    const nodes = isChatMode ? ALL_CHAT_AVAILABLE_BLOCKS : ALL_COMPLETION_AVAILABLE_BLOCKS
+    return nodes
+  },
+  checkValid() {
+    return {
+      isValid: true,
+    }
+  },
+}
+
+export default nodeDefault

web/app/components/workflow/nodes/iteration-start/index.tsx

@@ -0,0 +1,42 @@
+import { memo } from 'react'
+import { useTranslation } from 'react-i18next'
+import type { NodeProps } from 'reactflow'
+import { RiHome5Fill } from '@remixicon/react'
+import Tooltip from '@/app/components/base/tooltip'
+import { NodeSourceHandle } from '@/app/components/workflow/nodes/_base/components/node-handle'
+
+const IterationStartNode = ({ id, data }: NodeProps) => {
+  const { t } = useTranslation()
+
+  return (
+    <div className='group flex nodrag items-center justify-center w-11 h-11 rounded-2xl border border-workflow-block-border bg-white'>
+      <Tooltip popupContent={t('workflow.blocks.iteration-start')} asChild={false}>
+        <div className='flex items-center justify-center w-6 h-6 rounded-full border-[0.5px] border-components-panel-border-subtle bg-util-colors-blue-brand-blue-brand-500'>
+          <RiHome5Fill className='w-3 h-3 text-text-primary-on-surface' />
+        </div>
+      </Tooltip>
+      <NodeSourceHandle
+        id={id}
+        data={data}
+        handleClassName='!top-1/2 !-right-[9px] !-translate-y-1/2'
+        handleId='source'
+      />
+    </div>
+  )
+}
+
+export const IterationStartNodeDumb = () => {
+  const { t } = useTranslation()
+
+  return (
+    <div className='relative left-[17px] top-[21px] flex nodrag items-center justify-center w-11 h-11 rounded-2xl border border-workflow-block-border bg-white z-[11]'>
+      <Tooltip popupContent={t('workflow.blocks.iteration-start')} asChild={false}>
+        <div className='flex items-center justify-center w-6 h-6 rounded-full border-[0.5px] border-components-panel-border-subtle bg-util-colors-blue-brand-blue-brand-500'>
+          <RiHome5Fill className='w-3 h-3 text-text-primary-on-surface' />
+        </div>
+      </Tooltip>
+    </div>
+  )
+}
+
+export default memo(IterationStartNode)

web/app/components/workflow/nodes/iteration-start/types.ts

@@ -0,0 +1,3 @@
+import type { CommonNodeType } from '@/app/components/workflow/types'
+
+export type IterationStartNodeType = CommonNodeType

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 {
+    handleNodeAdd(
-      getNodes,
+      {
-      setNodes,
+        nodeType: type,
-    } = store.getState()
+        toolDefaultValue,
-    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,
       },
-      position: {
+      {
-        x: 117,
+        prevNodeId: iterationNodeData.start_node_id,
-        y: 85,
+        prevNodeSourceHandle: 'source',
       },
-      zIndex: 1001,
+    )
-      parentId: iterationNodeId,
+  }, [handleNodeAdd, iterationNodeData.start_node_id])
-      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])
 
   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'>
+    <div className='absolute top-7 left-14 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='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>
-      {
+      <BlockSelector
-        !iterationNodeData.startNodeType && (
+        disabled={nodesReadOnly}
-          <BlockSelector
+        onSelect={handleSelect}
-            disabled={nodesReadOnly}
+        trigger={renderTriggerElement}
-            onSelect={handleSelect}
+        triggerInnerClassName='inline-flex'
-            trigger={renderTriggerElement}
+        popupClassName='!min-w-[256px]'
-            triggerInnerClassName='inline-flex'
+        availableBlocksTypes={availableNextBlocks}
-            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}
+        data._isCandidate && (
-        iterationNodeData={data}
+          <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,

web/app/components/workflow/operator/add-block.tsx

@@ -55,7 +55,7 @@ const AddBlock = ({
     } = store.getState()
     const nodes = getNodes()
     const nodesWithSameType = nodes.filter(node => node.data.type === type)
-    const newNode = generateNewNode({
+    const { newNode } = generateNewNode({
       data: {
         ...NODES_INITIAL_DATA[type],
         title: nodesWithSameType.length > 0 ? `${t(`workflow.blocks.${type}`)} ${nodesWithSameType.length + 1}` : t(`workflow.blocks.${type}`),

web/app/components/workflow/operator/hooks.ts

@@ -11,7 +11,7 @@ export const useOperator = () => {
   const { userProfile } = useAppContext()
 
   const handleAddNote = useCallback(() => {
-    const newNode = generateNewNode({
+    const { newNode } = generateNewNode({
       type: CUSTOM_NOTE_NODE,
       data: {
         title: '',

web/app/components/workflow/types.ts

@@ -26,6 +26,7 @@ export enum BlockEnum {
   Tool = 'tool',
   ParameterExtractor = 'parameter-extractor',
   Iteration = 'iteration',
+  IterationStart = 'iteration-start',
   Assigner = 'assigner', // is now named as VariableAssigner
 }
 
@@ -55,8 +56,6 @@ export type CommonNodeType<T = {}> = {
   _iterationLength?: number
   _iterationIndex?: number
   _inParallelHovering?: boolean
-  start_node_in_iteration?: boolean
-  isIterationStart?: boolean
   isInIteration?: boolean
   iteration_id?: string
   selected?: boolean

web/app/components/workflow/utils.ts

@@ -19,14 +19,17 @@ import type {
 import { BlockEnum } from './types'
 import {
   CUSTOM_NODE,
+  ITERATION_CHILDREN_Z_INDEX,
   ITERATION_NODE_Z_INDEX,
   NODE_WIDTH_X_OFFSET,
   START_INITIAL_POSITION,
 } from './constants'
+import { CUSTOM_ITERATION_START_NODE } from './nodes/iteration-start/constants'
 import type { QuestionClassifierNodeType } from './nodes/question-classifier/types'
 import type { IfElseNodeType } from './nodes/if-else/types'
 import { branchNameCorrect } from './nodes/if-else/utils'
 import type { ToolNodeType } from './nodes/tool/types'
+import type { IterationNodeType } from './nodes/iteration/types'
 import { CollectionType } from '@/app/components/tools/types'
 import { toolParametersToFormSchemas } from '@/app/components/tools/utils/to-form-schema'
 
@@ -84,9 +87,129 @@ const getCycleEdges = (nodes: Node[], edges: Edge[]) => {
   return cycleEdges
 }
 
+export function getIterationStartNode(iterationId: string): Node {
+  return generateNewNode({
+    id: `${iterationId}start`,
+    type: CUSTOM_ITERATION_START_NODE,
+    data: {
+      title: '',
+      desc: '',
+      type: BlockEnum.IterationStart,
+    },
+    position: {
+      x: 24,
+      y: 68,
+    },
+    zIndex: ITERATION_CHILDREN_Z_INDEX,
+    parentId: iterationId,
+    selectable: false,
+    draggable: false,
+  }).newNode
+}
+
+export function generateNewNode({ data, position, id, zIndex, type, ...rest }: Omit<Node, 'id'> & { id?: string }): {
+  newNode: Node
+  newIterationStartNode?: Node
+} {
+  const newNode = {
+    id: id || `${Date.now()}`,
+    type: type || CUSTOM_NODE,
+    data,
+    position,
+    targetPosition: Position.Left,
+    sourcePosition: Position.Right,
+    zIndex: data.type === BlockEnum.Iteration ? ITERATION_NODE_Z_INDEX : zIndex,
+    ...rest,
+  } as Node
+
+  if (data.type === BlockEnum.Iteration) {
+    const newIterationStartNode = getIterationStartNode(newNode.id);
+    (newNode.data as IterationNodeType).start_node_id = newIterationStartNode.id;
+    (newNode.data as IterationNodeType)._children = [newIterationStartNode.id]
+    return {
+      newNode,
+      newIterationStartNode,
+    }
+  }
+
+  return {
+    newNode,
+  }
+}
+
+export const preprocessNodesAndEdges = (nodes: Node[], edges: Edge[]) => {
+  const hasIterationNode = nodes.some(node => node.data.type === BlockEnum.Iteration)
+
+  if (!hasIterationNode) {
+    return {
+      nodes,
+      edges,
+    }
+  }
+  const nodesMap = nodes.reduce((prev, next) => {
+    prev[next.id] = next
+    return prev
+  }, {} as Record<string, Node>)
+  const iterationNodesWithStartNode = []
+  const iterationNodesWithoutStartNode = []
+
+  for (let i = 0; i < nodes.length; i++) {
+    const currentNode = nodes[i] as Node<IterationNodeType>
+
+    if (currentNode.data.type === BlockEnum.Iteration) {
+      if (currentNode.data.start_node_id) {
+        if (nodesMap[currentNode.data.start_node_id]?.type !== CUSTOM_ITERATION_START_NODE)
+          iterationNodesWithStartNode.push(currentNode)
+      }
+      else {
+        iterationNodesWithoutStartNode.push(currentNode)
+      }
+    }
+  }
+  const newIterationStartNodesMap = {} as Record<string, Node>
+  const newIterationStartNodes = [...iterationNodesWithStartNode, ...iterationNodesWithoutStartNode].map((iterationNode, index) => {
+    const newNode = getIterationStartNode(iterationNode.id)
+    newNode.id = newNode.id + index
+    newIterationStartNodesMap[iterationNode.id] = newNode
+    return newNode
+  })
+  const newEdges = iterationNodesWithStartNode.map((iterationNode) => {
+    const newNode = newIterationStartNodesMap[iterationNode.id]
+    const startNode = nodesMap[iterationNode.data.start_node_id]
+    const source = newNode.id
+    const sourceHandle = 'source'
+    const target = startNode.id
+    const targetHandle = 'target'
+    return {
+      id: `${source}-${sourceHandle}-${target}-${targetHandle}`,
+      type: 'custom',
+      source,
+      sourceHandle,
+      target,
+      targetHandle,
+      data: {
+        sourceType: newNode.data.type,
+        targetType: startNode.data.type,
+        isInIteration: true,
+        iteration_id: startNode.parentId,
+        _connectedNodeIsSelected: true,
+      },
+      zIndex: ITERATION_CHILDREN_Z_INDEX,
+    }
+  })
+  nodes.forEach((node) => {
+    if (node.data.type === BlockEnum.Iteration && newIterationStartNodesMap[node.id])
+      (node.data as IterationNodeType).start_node_id = newIterationStartNodesMap[node.id].id
+  })
+
+  return {
+    nodes: [...nodes, ...newIterationStartNodes],
+    edges: [...edges, ...newEdges],
+  }
+}
+
 export const initialNodes = (originNodes: Node[], originEdges: Edge[]) => {
-  const nodes = cloneDeep(originNodes)
+  const { nodes, edges } = preprocessNodesAndEdges(cloneDeep(originNodes), cloneDeep(originEdges))
-  const edges = cloneDeep(originEdges)
   const firstNode = nodes[0]
 
   if (!firstNode?.position) {
@@ -148,8 +271,7 @@ export const initialNodes = (originNodes: Node[], originEdges: Edge[]) => {
 }
 
 export const initialEdges = (originEdges: Edge[], originNodes: Node[]) => {
-  const nodes = cloneDeep(originNodes)
+  const { nodes, edges } = preprocessNodesAndEdges(cloneDeep(originNodes), cloneDeep(originEdges))
-  const edges = cloneDeep(originEdges)
   let selectedNode: Node | null = null
   const nodesMap = nodes.reduce((acc, node) => {
     acc[node.id] = node
@@ -291,19 +413,6 @@ export const getNodesConnectedSourceOrTargetHandleIdsMap = (changes: ConnectedSo
   return nodesConnectedSourceOrTargetHandleIdsMap
 }
 
-export const generateNewNode = ({ data, position, id, zIndex, type, ...rest }: Omit<Node, 'id'> & { id?: string }) => {
-  return {
-    id: id || `${Date.now()}`,
-    type: type || CUSTOM_NODE,
-    data,
-    position,
-    targetPosition: Position.Left,
-    sourcePosition: Position.Right,
-    zIndex: data.type === BlockEnum.Iteration ? ITERATION_NODE_Z_INDEX : zIndex,
-    ...rest,
-  } as Node
-}
-
 export const genNewNodeTitleFromOld = (oldTitle: string) => {
   const regex = /^(.+?)\s*\((\d+)\)\s*$/
   const match = oldTitle.match(regex)