feat: workflow new nodes (#4683)

Co-authored-by: Joel <iamjoel007@gmail.com>
Co-authored-by: Patryk Garstecki <patryk20120@yahoo.pl>
Co-authored-by: Sebastian.W <thiner@gmail.com>
Co-authored-by: 呆萌闷油瓶 <253605712@qq.com>
Co-authored-by: takatost <takatost@users.noreply.github.com>
Co-authored-by: rechardwang <wh_goodjob@163.com>
Co-authored-by: Nite Knite <nkCoding@gmail.com>
Co-authored-by: Chenhe Gu <guchenhe@gmail.com>
Co-authored-by: Joshua <138381132+joshua20231026@users.noreply.github.com>
Co-authored-by: Weaxs <459312872@qq.com>
Co-authored-by: Ikko Eltociear Ashimine <eltociear@gmail.com>
Co-authored-by: leejoo0 <81673835+leejoo0@users.noreply.github.com>
Co-authored-by: JzoNg <jzongcode@gmail.com>
Co-authored-by: sino <sino2322@gmail.com>
Co-authored-by: Vikey Chen <vikeytk@gmail.com>
Co-authored-by: wanghl <Wang-HL@users.noreply.github.com>
Co-authored-by: Haolin Wang-汪皓临 <haolin.wang@atlaslovestravel.com>
Co-authored-by: Zixuan Cheng <61724187+Theysua@users.noreply.github.com>
Co-authored-by: crazywoola <100913391+crazywoola@users.noreply.github.com>
Co-authored-by: Bowen Liang <bowenliang@apache.org>
Co-authored-by: Bowen Liang <liangbowen@gf.com.cn>
Co-authored-by: fanghongtai <42790567+fanghongtai@users.noreply.github.com>
Co-authored-by: wxfanghongtai <wxfanghongtai@gf.com.cn>
Co-authored-by: Matri <qjp@bithuman.io>
Co-authored-by: Benjamin <benjaminx@gmail.com>

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

@@ -3,11 +3,12 @@ import { useCallback, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 import produce from 'immer'
 import type {
-  HandleType,
   NodeDragHandler,
   NodeMouseHandler,
   OnConnect,
+  OnConnectEnd,
   OnConnectStart,
+  ResizeParamsWithDirection,
 } from 'reactflow'
 import {
   getConnectedEdges,
@@ -24,8 +25,11 @@ import type {
 import { BlockEnum } from '../types'
 import { useWorkflowStore } from '../store'
 import {
+  ITERATION_CHILDREN_Z_INDEX,
+  ITERATION_PADDING,
   NODES_INITIAL_DATA,
   NODE_WIDTH_X_OFFSET,
+  X_OFFSET,
   Y_OFFSET,
 } from '../constants'
 import {
@@ -33,8 +37,11 @@ import {
   getNodesConnectedSourceOrTargetHandleIdsMap,
   getTopLeftNodePosition,
 } from '../utils'
-import { useNodesExtraData } from './use-nodes-data'
+import type { IterationNodeType } from '../nodes/iteration/types'
+import type { VariableAssignerNodeType } from '../nodes/variable-assigner/types'
+import { useNodeIterationInteractions } from '../nodes/iteration/use-interactions'
 import { useNodesSyncDraft } from './use-nodes-sync-draft'
+import { useHelpline } from './use-helpline'
 import {
   useNodesReadOnly,
   useWorkflow,
@@ -45,15 +52,17 @@ export const useNodesInteractions = () => {
   const store = useStoreApi()
   const workflowStore = useWorkflowStore()
   const reactflow = useReactFlow()
-  const nodesExtraData = useNodesExtraData()
   const { handleSyncWorkflowDraft } = useNodesSyncDraft()
   const {
     getAfterNodesInSameBranch,
-    getTreeLeafNodes,
   } = useWorkflow()
   const { getNodesReadOnly } = useNodesReadOnly()
+  const { handleSetHelpline } = useHelpline()
+  const {
+    handleNodeIterationChildDrag,
+    handleNodeIterationChildrenCopy,
+  } = useNodeIterationInteractions()
   const dragNodeStartPosition = useRef({ x: 0, y: 0 } as { x: number; y: number })
-  const connectingNodeRef = useRef<{ nodeId: string; handleType: HandleType } | null>(null)
 
   const handleNodeDragStart = useCallback<NodeDragHandler>((_, node) => {
     workflowStore.setState({ nodeAnimation: false })
@@ -61,6 +70,9 @@ export const useNodesInteractions = () => {
     if (getNodesReadOnly())
       return
 
+    if (node.data.isIterationStart)
+      return
+
     dragNodeStartPosition.current = { x: node.position.x, y: node.position.y }
   }, [workflowStore, getNodesReadOnly])
 
@@ -68,104 +80,46 @@ export const useNodesInteractions = () => {
     if (getNodesReadOnly())
       return
 
+    if (node.data.isIterationStart)
+      return
+
     const {
       getNodes,
       setNodes,
     } = store.getState()
-    const {
-      setHelpLineHorizontal,
-      setHelpLineVertical,
-    } = workflowStore.getState()
     e.stopPropagation()
 
     const nodes = getNodes()
 
-    const showHorizontalHelpLineNodes = nodes.filter((n) => {
-      if (n.id === node.id)
-        return false
+    const { restrictPosition } = handleNodeIterationChildDrag(node)
 
-      const nY = Math.ceil(n.position.y)
-      const nodeY = Math.ceil(node.position.y)
-
-      if (nY - nodeY < 5 && nY - nodeY > -5)
-        return true
-
-      return false
-    }).sort((a, b) => a.position.x - b.position.x)
+    const {
+      showHorizontalHelpLineNodes,
+      showVerticalHelpLineNodes,
+    } = handleSetHelpline(node)
     const showHorizontalHelpLineNodesLength = showHorizontalHelpLineNodes.length
-    if (showHorizontalHelpLineNodesLength > 0) {
-      const first = showHorizontalHelpLineNodes[0]
-      const last = showHorizontalHelpLineNodes[showHorizontalHelpLineNodesLength - 1]
-
-      const helpLine = {
-        top: first.position.y,
-        left: first.position.x,
-        width: last.position.x + last.width! - first.position.x,
-      }
-
-      if (node.position.x < first.position.x) {
-        helpLine.left = node.position.x
-        helpLine.width = first.position.x + first.width! - node.position.x
-      }
-
-      if (node.position.x > last.position.x)
-        helpLine.width = node.position.x + node.width! - first.position.x
-
-      setHelpLineHorizontal(helpLine)
-    }
-    else {
-      setHelpLineHorizontal()
-    }
-
-    const showVerticalHelpLineNodes = nodes.filter((n) => {
-      if (n.id === node.id)
-        return false
-
-      const nX = Math.ceil(n.position.x)
-      const nodeX = Math.ceil(node.position.x)
-
-      if (nX - nodeX < 5 && nX - nodeX > -5)
-        return true
-
-      return false
-    }).sort((a, b) => a.position.x - b.position.x)
     const showVerticalHelpLineNodesLength = showVerticalHelpLineNodes.length
 
-    if (showVerticalHelpLineNodesLength > 0) {
-      const first = showVerticalHelpLineNodes[0]
-      const last = showVerticalHelpLineNodes[showVerticalHelpLineNodesLength - 1]
-
-      const helpLine = {
-        top: first.position.y,
-        left: first.position.x,
-        height: last.position.y + last.height! - first.position.y,
-      }
-
-      if (node.position.y < first.position.y) {
-        helpLine.top = node.position.y
-        helpLine.height = first.position.y + first.height! - node.position.y
-      }
-
-      if (node.position.y > last.position.y)
-        helpLine.height = node.position.y + node.height! - first.position.y
-
-      setHelpLineVertical(helpLine)
-    }
-    else {
-      setHelpLineVertical()
-    }
-
     const newNodes = produce(nodes, (draft) => {
       const currentNode = draft.find(n => n.id === node.id)!
 
-      currentNode.position = {
-        x: showVerticalHelpLineNodesLength > 0 ? showVerticalHelpLineNodes[0].position.x : node.position.x,
-        y: showHorizontalHelpLineNodesLength > 0 ? showHorizontalHelpLineNodes[0].position.y : node.position.y,
-      }
+      if (showVerticalHelpLineNodesLength > 0)
+        currentNode.position.x = showVerticalHelpLineNodes[0].position.x
+      else if (restrictPosition.x !== undefined)
+        currentNode.position.x = restrictPosition.x
+      else
+        currentNode.position.x = node.position.x
+
+      if (showHorizontalHelpLineNodesLength > 0)
+        currentNode.position.y = showHorizontalHelpLineNodes[0].position.y
+      else if (restrictPosition.y !== undefined)
+        currentNode.position.y = restrictPosition.y
+      else
+        currentNode.position.y = node.position.y
     })
 
     setNodes(newNodes)
-  }, [store, workflowStore, getNodesReadOnly])
+  }, [store, getNodesReadOnly, handleSetHelpline, handleNodeIterationChildDrag])
 
   const handleNodeDragStop = useCallback<NodeDragHandler>((_, node) => {
     const {
@@ -195,20 +149,35 @@ export const useNodesInteractions = () => {
       setEdges,
     } = store.getState()
     const nodes = getNodes()
+    const {
+      connectingNodePayload,
+      setEnteringNodePayload,
+    } = workflowStore.getState()
 
-    if (connectingNodeRef.current && connectingNodeRef.current.nodeId !== node.id) {
-      const connectingNode: Node = nodes.find(n => n.id === connectingNodeRef.current!.nodeId)!
-      const handleType = connectingNodeRef.current.handleType
-      const currentNodeIndex = nodes.findIndex(n => n.id === node.id)
-      const availablePrevNodes = nodesExtraData[connectingNode.data.type].availablePrevNodes
-      const availableNextNodes = nodesExtraData[connectingNode.data.type].availableNextNodes
-      const availableNodes = handleType === 'source' ? availableNextNodes : [...availablePrevNodes, BlockEnum.Start]
+    if (connectingNodePayload) {
+      if (connectingNodePayload.nodeId === node.id)
+        return
+      const connectingNode: Node = nodes.find(n => n.id === connectingNodePayload.nodeId)!
+      const sameLevel = connectingNode.parentId === node.parentId
 
-      const newNodes = produce(nodes, (draft) => {
-        if (!availableNodes.includes(draft[currentNodeIndex].data.type))
-          draft[currentNodeIndex].data._isInvalidConnection = true
-      })
-      setNodes(newNodes)
+      if (sameLevel) {
+        setEnteringNodePayload({
+          nodeId: node.id,
+        })
+        const fromType = connectingNodePayload.handleType
+
+        const newNodes = produce(nodes, (draft) => {
+          draft.forEach((n) => {
+            if (n.id === node.id && fromType === 'source' && (node.data.type === BlockEnum.VariableAssigner || node.data.type === BlockEnum.VariableAggregator)) {
+              if (!node.data.advanced_settings?.group_enabled)
+                n.data._isEntering = true
+            }
+            if (n.id === node.id && fromType === 'target' && (connectingNode.data.type === BlockEnum.VariableAssigner || connectingNode.data.type === BlockEnum.VariableAggregator) && node.data.type !== BlockEnum.IfElse && node.data.type !== BlockEnum.QuestionClassifier)
+              n.data._isEntering = true
+          })
+        })
+        setNodes(newNodes)
+      }
     }
     const newEdges = produce(edges, (draft) => {
       const connectedEdges = getConnectedEdges([node], edges)
@@ -220,12 +189,16 @@ export const useNodesInteractions = () => {
       })
     })
     setEdges(newEdges)
-  }, [store, nodesExtraData, getNodesReadOnly])
+  }, [store, workflowStore, getNodesReadOnly])
 
   const handleNodeLeave = useCallback<NodeMouseHandler>(() => {
     if (getNodesReadOnly())
       return
 
+    const {
+      setEnteringNodePayload,
+    } = workflowStore.getState()
+    setEnteringNodePayload(undefined)
     const {
       getNodes,
       setNodes,
@@ -234,7 +207,7 @@ export const useNodesInteractions = () => {
     } = store.getState()
     const newNodes = produce(getNodes(), (draft) => {
       draft.forEach((node) => {
-        node.data._isInvalidConnection = false
+        node.data._isEntering = false
       })
     })
     setNodes(newNodes)
@@ -244,7 +217,7 @@ export const useNodesInteractions = () => {
       })
     })
     setEdges(newEdges)
-  }, [store, getNodesReadOnly])
+  }, [store, workflowStore, getNodesReadOnly])
 
   const handleNodeSelect = useCallback((nodeId: string, cancelSelection?: boolean) => {
     const {
@@ -315,16 +288,18 @@ export const useNodesInteractions = () => {
     } = store.getState()
     const nodes = getNodes()
     const targetNode = nodes.find(node => node.id === target!)
-    if (targetNode && targetNode?.data.type === BlockEnum.VariableAssigner) {
-      const treeNodes = getTreeLeafNodes(target!)
+    const sourceNode = nodes.find(node => node.id === source!)
+
+    if (targetNode?.parentId !== sourceNode?.parentId)
+      return
+
+    if (targetNode?.data.isIterationStart)
+      return
 
-      if (!treeNodes.find(treeNode => treeNode.id === source))
-        return
-    }
     const needDeleteEdges = edges.filter((edge) => {
       if (
         (edge.source === source && edge.sourceHandle === sourceHandle)
-        || (edge.target === target && edge.targetHandle === targetHandle)
+        || (edge.target === target && edge.targetHandle === targetHandle && targetNode?.data.type !== BlockEnum.VariableAssigner && targetNode?.data.type !== BlockEnum.VariableAggregator)
       )
         return true
 
@@ -332,7 +307,7 @@ export const useNodesInteractions = () => {
     })
     const needDeleteEdgesIds = needDeleteEdges.map(edge => edge.id)
     const newEdge = {
-      id: `${source}-${target}`,
+      id: `${source}-${sourceHandle}-${target}-${targetHandle}`,
       type: 'custom',
       source: source!,
       target: target!,
@@ -341,7 +316,10 @@ export const useNodesInteractions = () => {
       data: {
         sourceType: nodes.find(node => node.id === source)!.data.type,
         targetType: nodes.find(node => node.id === target)!.data.type,
+        isInIteration: !!targetNode?.parentId,
+        iteration_id: targetNode?.parentId,
       },
+      zIndex: targetNode?.parentId ? ITERATION_CHILDREN_Z_INDEX : 0,
     }
     const nodesConnectedSourceOrTargetHandleIdsMap = getNodesConnectedSourceOrTargetHandleIdsMap(
       [
@@ -370,20 +348,126 @@ export const useNodesInteractions = () => {
     })
     setEdges(newEdges)
     handleSyncWorkflowDraft()
-  }, [store, handleSyncWorkflowDraft, getNodesReadOnly, getTreeLeafNodes])
+  }, [store, handleSyncWorkflowDraft, getNodesReadOnly])
+
+  const handleNodeConnectStart = useCallback<OnConnectStart>((_, { nodeId, handleType, handleId }) => {
+    if (getNodesReadOnly())
+      return
 
-  const handleNodeConnectStart = useCallback<OnConnectStart>((_, { nodeId, handleType }) => {
     if (nodeId && handleType) {
-      connectingNodeRef.current = {
-        nodeId,
-        handleType,
+      const { setConnectingNodePayload } = workflowStore.getState()
+      const { getNodes } = store.getState()
+      const node = getNodes().find(n => n.id === nodeId)!
+
+      if (!node.data.isIterationStart) {
+        setConnectingNodePayload({
+          nodeId,
+          nodeType: node.data.type,
+          handleType,
+          handleId,
+        })
       }
     }
-  }, [])
+  }, [store, workflowStore, getNodesReadOnly])
 
-  const handleNodeConnectEnd = useCallback(() => {
-    connectingNodeRef.current = null
-  }, [])
+  const handleNodeConnectEnd = useCallback<OnConnectEnd>((e: any) => {
+    if (getNodesReadOnly())
+      return
+
+    const {
+      connectingNodePayload,
+      setConnectingNodePayload,
+      enteringNodePayload,
+      setEnteringNodePayload,
+    } = workflowStore.getState()
+    if (connectingNodePayload && enteringNodePayload) {
+      const {
+        setShowAssignVariablePopup,
+        hoveringAssignVariableGroupId,
+      } = workflowStore.getState()
+      const { screenToFlowPosition } = reactflow
+      const {
+        getNodes,
+        setNodes,
+      } = store.getState()
+      const nodes = getNodes()
+      const fromHandleType = connectingNodePayload.handleType
+      const fromHandleId = connectingNodePayload.handleId
+      const fromNode = nodes.find(n => n.id === connectingNodePayload.nodeId)!
+      const fromNodeParent = nodes.find(n => n.id === fromNode.parentId)
+      const toNode = nodes.find(n => n.id === enteringNodePayload.nodeId)!
+      const toParentNode = nodes.find(n => n.id === toNode.parentId)
+
+      if (fromNode.parentId !== toNode.parentId)
+        return
+
+      const { x, y } = screenToFlowPosition({ x: e.x, y: e.y })
+
+      if (fromHandleType === 'source' && (toNode.data.type === BlockEnum.VariableAssigner || toNode.data.type === BlockEnum.VariableAggregator)) {
+        const groupEnabled = toNode.data.advanced_settings?.group_enabled
+
+        if (
+          (groupEnabled && hoveringAssignVariableGroupId)
+          || !groupEnabled
+        ) {
+          const newNodes = produce(nodes, (draft) => {
+            draft.forEach((node) => {
+              if (node.id === toNode.id) {
+                node.data._showAddVariablePopup = true
+                node.data._holdAddVariablePopup = true
+              }
+            })
+          })
+          setNodes(newNodes)
+          setShowAssignVariablePopup({
+            nodeId: fromNode.id,
+            nodeData: fromNode.data,
+            variableAssignerNodeId: toNode.id,
+            variableAssignerNodeData: toNode.data,
+            variableAssignerNodeHandleId: hoveringAssignVariableGroupId || 'target',
+            parentNode: toParentNode,
+            x: x - toNode.positionAbsolute!.x,
+            y: y - toNode.positionAbsolute!.y,
+          })
+          handleNodeConnect({
+            source: fromNode.id,
+            sourceHandle: fromHandleId,
+            target: toNode.id,
+            targetHandle: hoveringAssignVariableGroupId || 'target',
+          })
+        }
+      }
+      if (fromHandleType === 'target' && (fromNode.data.type === BlockEnum.VariableAssigner || fromNode.data.type === BlockEnum.VariableAggregator) && toNode.data.type !== BlockEnum.IfElse && toNode.data.type !== BlockEnum.QuestionClassifier) {
+        const newNodes = produce(nodes, (draft) => {
+          draft.forEach((node) => {
+            if (node.id === toNode.id) {
+              node.data._showAddVariablePopup = true
+              node.data._holdAddVariablePopup = true
+            }
+          })
+        })
+        setNodes(newNodes)
+        setShowAssignVariablePopup({
+          nodeId: toNode.id,
+          nodeData: toNode.data,
+          variableAssignerNodeId: fromNode.id,
+          variableAssignerNodeData: fromNode.data,
+          variableAssignerNodeHandleId: fromHandleId || 'target',
+          parentNode: fromNodeParent,
+          x: x - toNode.positionAbsolute!.x,
+          y: y - toNode.positionAbsolute!.y,
+        })
+        handleNodeConnect({
+          source: toNode.id,
+          sourceHandle: 'source',
+          target: fromNode.id,
+          targetHandle: fromHandleId,
+        })
+      }
+    }
+    setConnectingNodePayload(undefined)
+    setEnteringNodePayload(undefined)
+  }, [store, handleNodeConnect, getNodesReadOnly, workflowStore, reactflow])
 
   const handleNodeDelete = useCallback((nodeId: string) => {
     if (getNodesReadOnly())
@@ -398,8 +482,45 @@ export const useNodesInteractions = () => {
 
     const nodes = getNodes()
     const currentNodeIndex = nodes.findIndex(node => node.id === nodeId)
-    if (nodes[currentNodeIndex].data.type === BlockEnum.Start)
+    const currentNode = nodes[currentNodeIndex]
+
+    if (!currentNode)
       return
+
+    if (currentNode.data.type === BlockEnum.Start)
+      return
+
+    if (currentNode.data.type === BlockEnum.Iteration) {
+      const iterationChildren = nodes.filter(node => node.parentId === currentNode.id)
+
+      if (iterationChildren.length) {
+        if (currentNode.data._isBundled) {
+          iterationChildren.forEach((child) => {
+            handleNodeDelete(child.id)
+          })
+          return handleNodeDelete(nodeId)
+        }
+        else {
+          const { setShowConfirm, showConfirm } = workflowStore.getState()
+
+          if (!showConfirm) {
+            setShowConfirm({
+              title: t('workflow.nodes.iteration.deleteTitle'),
+              desc: t('workflow.nodes.iteration.deleteDesc') || '',
+              onConfirm: () => {
+                iterationChildren.forEach((child) => {
+                  handleNodeDelete(child.id)
+                })
+                handleNodeDelete(nodeId)
+                handleSyncWorkflowDraft()
+                setShowConfirm(undefined)
+              },
+            })
+            return
+          }
+        }
+      }
+    }
     const connectedEdges = getConnectedEdges([{ id: nodeId } as Node], edges)
     const nodesConnectedSourceOrTargetHandleIdsMap = getNodesConnectedSourceOrTargetHandleIdsMap(connectedEdges.map(edge => ({ type: 'remove', edge })), nodes)
     const newNodes = produce(nodes, (draft: Node[]) => {
@@ -410,6 +531,15 @@ export const useNodesInteractions = () => {
             ...nodesConnectedSourceOrTargetHandleIdsMap[node.id],
           }
         }
+
+        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)
     })
@@ -419,7 +549,7 @@ export const useNodesInteractions = () => {
     })
     setEdges(newEdges)
     handleSyncWorkflowDraft()
-  }, [store, handleSyncWorkflowDraft, getNodesReadOnly])
+  }, [store, handleSyncWorkflowDraft, getNodesReadOnly, workflowStore, t])
 
   const handleNodeAdd = useCallback<OnNodeAdd>((
     {
@@ -438,9 +568,6 @@ export const useNodesInteractions = () => {
     if (getNodesReadOnly())
       return
 
-    if (nodeType === BlockEnum.VariableAssigner)
-      targetHandle = 'varNotSet'
-
     const {
       getNodes,
       setNodes,
@@ -455,6 +582,8 @@ export const useNodesInteractions = () => {
         title: nodesWithSameType.length > 0 ? `${t(`workflow.blocks.${nodeType}`)} ${nodesWithSameType.length + 1}` : t(`workflow.blocks.${nodeType}`),
         ...(toolDefaultValue || {}),
         selected: true,
+        _showAddVariablePopup: (nodeType === BlockEnum.VariableAssigner || nodeType === BlockEnum.VariableAggregator) && !!prevNodeId,
+        _holdAddVariablePopup: false,
       },
       position: {
         x: 0,
@@ -470,12 +599,19 @@ export const useNodesInteractions = () => {
       newNode.data._connectedTargetHandleIds = [targetHandle]
       newNode.data._connectedSourceHandleIds = []
       newNode.position = {
-        x: lastOutgoer ? lastOutgoer.position.x : prevNode.position.x + NODE_WIDTH_X_OFFSET,
+        x: lastOutgoer ? lastOutgoer.position.x : prevNode.position.x + prevNode.width! + X_OFFSET,
         y: lastOutgoer ? lastOutgoer.position.y + lastOutgoer.height! + Y_OFFSET : prevNode.position.y,
       }
+      newNode.parentId = prevNode.parentId
+      newNode.extent = prevNode.extent
+      if (prevNode.parentId) {
+        newNode.data.isInIteration = true
+        newNode.data.iteration_id = prevNode.parentId
+        newNode.zIndex = ITERATION_CHILDREN_Z_INDEX
+      }
 
-      const newEdge = {
-        id: `${prevNodeId}-${newNode.id}`,
+      const newEdge: Edge = {
+        id: `${prevNodeId}-${prevNodeSourceHandle}-${newNode.id}-${targetHandle}`,
         type: 'custom',
         source: prevNodeId,
         sourceHandle: prevNodeSourceHandle,
@@ -484,8 +620,11 @@ export const useNodesInteractions = () => {
         data: {
           sourceType: prevNode.data.type,
           targetType: newNode.data.type,
+          isInIteration: !!prevNode.parentId,
+          iteration_id: prevNode.parentId,
           _connectedNodeIsSelected: true,
         },
+        zIndex: prevNode.parentId ? ITERATION_CHILDREN_Z_INDEX : 0,
       }
       const nodesConnectedSourceOrTargetHandleIdsMap = getNodesConnectedSourceOrTargetHandleIdsMap(
         [
@@ -503,10 +642,27 @@ export const useNodesInteractions = () => {
               ...nodesConnectedSourceOrTargetHandleIdsMap[node.id],
             }
           }
+
+          if (node.data.type === BlockEnum.Iteration && prevNode.parentId === node.id)
+            node.data._children?.push(newNode.id)
         })
         draft.push(newNode)
       })
       setNodes(newNodes)
+      if (newNode.data.type === BlockEnum.VariableAssigner || newNode.data.type === BlockEnum.VariableAggregator) {
+        const { setShowAssignVariablePopup } = workflowStore.getState()
+
+        setShowAssignVariablePopup({
+          nodeId: prevNode.id,
+          nodeData: prevNode.data,
+          variableAssignerNodeId: newNode.id,
+          variableAssignerNodeData: (newNode.data as VariableAssignerNodeType),
+          variableAssignerNodeHandleId: targetHandle,
+          parentNode: nodes.find(node => node.id === newNode.parentId),
+          x: -25,
+          y: 44,
+        })
+      }
       const newEdges = produce(edges, (draft) => {
         draft.forEach((item) => {
           item.data = {
@@ -528,12 +684,21 @@ export const useNodesInteractions = () => {
         x: nextNode.position.x,
         y: nextNode.position.y,
       }
+      newNode.parentId = nextNode.parentId
+      newNode.extent = nextNode.extent
+      if (nextNode.parentId) {
+        newNode.data.isInIteration = true
+        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}-${nextNodeId}`,
+          id: `${newNode.id}-${sourceHandle}-${nextNodeId}-${nextNodeTargetHandle}`,
           type: 'custom',
           source: newNode.id,
           sourceHandle,
@@ -542,8 +707,11 @@ export const useNodesInteractions = () => {
           data: {
             sourceType: newNode.data.type,
             targetType: nextNode.data.type,
+            isInIteration: !!nextNode.parentId,
+            iteration_id: nextNode.parentId,
             _connectedNodeIsSelected: true,
           },
+          zIndex: nextNode.parentId ? ITERATION_CHILDREN_Z_INDEX : 0,
         }
       }
 
@@ -572,6 +740,17 @@ export const useNodesInteractions = () => {
               ...nodesConnectedSourceOrTargetHandleIdsMap[node.id],
             }
           }
+
+          if (node.data.type === BlockEnum.Iteration && nextNode.parentId === node.id)
+            node.data._children?.push(newNode.id)
+
+          if (node.data.type === BlockEnum.Iteration && node.data.start_node_id === nextNodeId) {
+            node.data.start_node_id = newNode.id
+            node.data.startNodeType = newNode.data.type
+          }
+
+          if (node.id === nextNodeId && node.data.isIterationStart)
+            node.data.isIterationStart = false
         })
         draft.push(newNode)
       })
@@ -599,10 +778,17 @@ export const useNodesInteractions = () => {
         x: nextNode.position.x,
         y: nextNode.position.y,
       }
+      newNode.parentId = prevNode.parentId
+      newNode.extent = prevNode.extent
+      if (prevNode.parentId) {
+        newNode.data.isInIteration = true
+        newNode.data.iteration_id = prevNode.parentId
+        newNode.zIndex = ITERATION_CHILDREN_Z_INDEX
+      }
 
       const currentEdgeIndex = edges.findIndex(edge => edge.source === prevNodeId && edge.target === nextNodeId)
       const newPrevEdge = {
-        id: `${prevNodeId}-${newNode.id}`,
+        id: `${prevNodeId}-${prevNodeSourceHandle}-${newNode.id}-${targetHandle}`,
         type: 'custom',
         source: prevNodeId,
         sourceHandle: prevNodeSourceHandle,
@@ -611,13 +797,16 @@ export const useNodesInteractions = () => {
         data: {
           sourceType: prevNode.data.type,
           targetType: newNode.data.type,
+          isInIteration: !!prevNode.parentId,
+          iteration_id: prevNode.parentId,
           _connectedNodeIsSelected: true,
         },
+        zIndex: prevNode.parentId ? ITERATION_CHILDREN_Z_INDEX : 0,
       }
       let newNextEdge: Edge | null = null
       if (nodeType !== BlockEnum.IfElse && nodeType !== BlockEnum.QuestionClassifier) {
         newNextEdge = {
-          id: `${newNode.id}-${nextNodeId}`,
+          id: `${newNode.id}-${sourceHandle}-${nextNodeId}-${nextNodeTargetHandle}`,
           type: 'custom',
           source: newNode.id,
           sourceHandle,
@@ -626,8 +815,11 @@ export const useNodesInteractions = () => {
           data: {
             sourceType: newNode.data.type,
             targetType: nextNode.data.type,
+            isInIteration: !!nextNode.parentId,
+            iteration_id: nextNode.parentId,
             _connectedNodeIsSelected: true,
           },
+          zIndex: nextNode.parentId ? ITERATION_CHILDREN_Z_INDEX : 0,
         }
       }
       const nodesConnectedSourceOrTargetHandleIdsMap = getNodesConnectedSourceOrTargetHandleIdsMap(
@@ -653,10 +845,27 @@ export const useNodesInteractions = () => {
           }
           if (afterNodesInSameBranchIds.includes(node.id))
             node.position.x += NODE_WIDTH_X_OFFSET
+
+          if (node.data.type === BlockEnum.Iteration && prevNode.parentId === node.id)
+            node.data._children?.push(newNode.id)
         })
         draft.push(newNode)
       })
       setNodes(newNodes)
+      if (newNode.data.type === BlockEnum.VariableAssigner || newNode.data.type === BlockEnum.VariableAggregator) {
+        const { setShowAssignVariablePopup } = workflowStore.getState()
+
+        setShowAssignVariablePopup({
+          nodeId: prevNode.id,
+          nodeData: prevNode.data,
+          variableAssignerNodeId: newNode.id,
+          variableAssignerNodeData: newNode.data as VariableAssignerNodeType,
+          variableAssignerNodeHandleId: targetHandle,
+          parentNode: nodes.find(node => node.id === newNode.parentId),
+          x: -25,
+          y: 44,
+        })
+      }
       const newEdges = produce(edges, (draft) => {
         draft.splice(currentEdgeIndex, 1)
         draft.forEach((item) => {
@@ -673,7 +882,7 @@ export const useNodesInteractions = () => {
       setEdges(newEdges)
     }
     handleSyncWorkflowDraft()
-  }, [store, handleSyncWorkflowDraft, getAfterNodesInSameBranch, getNodesReadOnly, t])
+  }, [store, workflowStore, handleSyncWorkflowDraft, getAfterNodesInSameBranch, getNodesReadOnly, t])
 
   const handleNodeChange = useCallback((
     currentNodeId: string,
@@ -702,11 +911,17 @@ export const useNodesInteractions = () => {
         _connectedSourceHandleIds: [],
         _connectedTargetHandleIds: [],
         selected: currentNode.data.selected,
+        isInIteration: currentNode.data.isInIteration,
+        iteration_id: currentNode.data.iteration_id,
+        isIterationStart: currentNode.data.isIterationStart,
       },
       position: {
         x: currentNode.position.x,
         y: currentNode.position.y,
       },
+      parentId: currentNode.parentId,
+      extent: currentNode.extent,
+      zIndex: currentNode.zIndex,
     })
     const nodesConnectedSourceOrTargetHandleIdsMap = getNodesConnectedSourceOrTargetHandleIdsMap(
       [
@@ -724,6 +939,14 @@ 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)
 
@@ -801,7 +1024,7 @@ export const useNodesInteractions = () => {
     } = store.getState()
 
     const nodes = getNodes()
-    const bundledNodes = nodes.filter(node => node.data._isBundled && node.data.type !== BlockEnum.Start)
+    const bundledNodes = nodes.filter(node => node.data._isBundled && node.data.type !== BlockEnum.Start && !node.data.isInIteration)
 
     if (bundledNodes.length) {
       setClipboardElements(bundledNodes)
@@ -860,51 +1083,43 @@ export const useNodesInteractions = () => {
             x: nodeToPaste.position.x + offsetX,
             y: nodeToPaste.position.y + offsetY,
           },
+          extent: nodeToPaste.extent,
+          zIndex: nodeToPaste.zIndex,
         })
         newNode.id = newNode.id + index
+
+        let newChildren: Node[] = []
+        if (nodeToPaste.data.type === BlockEnum.Iteration) {
+          newNode.data._children = [];
+          (newNode.data as IterationNodeType).start_node_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
+          })
+        }
+
         nodesToPaste.push(newNode)
+
+        if (newChildren.length)
+          nodesToPaste.push(...newChildren)
       })
 
       setNodes([...nodes, ...nodesToPaste])
       handleSyncWorkflowDraft()
     }
-  }, [t, getNodesReadOnly, store, workflowStore, handleSyncWorkflowDraft, reactflow])
+  }, [t, getNodesReadOnly, store, workflowStore, handleSyncWorkflowDraft, reactflow, handleNodeIterationChildrenCopy])
 
   const handleNodesDuplicate = useCallback(() => {
     if (getNodesReadOnly())
       return
 
-    const {
-      getNodes,
-      setNodes,
-    } = store.getState()
-    const nodes = getNodes()
-
-    const selectedNode = nodes.find(node => node.data.selected && node.data.type !== BlockEnum.Start)
-
-    if (selectedNode) {
-      const nodeType = selectedNode.data.type
-      const nodesWithSameType = nodes.filter(node => node.data.type === nodeType)
-
-      const newNode = generateNewNode({
-        data: {
-          ...NODES_INITIAL_DATA[nodeType as BlockEnum],
-          ...selectedNode.data,
-          selected: false,
-          _isBundled: false,
-          _connectedSourceHandleIds: [],
-          _connectedTargetHandleIds: [],
-          title: nodesWithSameType.length > 0 ? `${t(`workflow.blocks.${nodeType}`)} ${nodesWithSameType.length + 1}` : t(`workflow.blocks.${nodeType}`),
-        },
-        position: {
-          x: selectedNode.position.x + selectedNode.width! + 10,
-          y: selectedNode.position.y,
-        },
-      })
-
-      setNodes([...nodes, newNode])
-    }
-  }, [store, t, getNodesReadOnly])
+    handleNodesCopy()
+    handleNodesPaste()
+  }, [getNodesReadOnly, handleNodesCopy, handleNodesPaste])
 
   const handleNodesDelete = useCallback(() => {
     if (getNodesReadOnly())
@@ -928,6 +1143,7 @@ export const useNodesInteractions = () => {
 
     if (bundledNodes.length) {
       bundledNodes.forEach(node => handleNodeDelete(node.id))
+
       return
     }
 
@@ -941,6 +1157,61 @@ export const useNodesInteractions = () => {
       handleNodeDelete(selectedNode.id)
   }, [store, workflowStore, getNodesReadOnly, handleNodeDelete])
 
+  const handleNodeResize = useCallback((nodeId: string, params: ResizeParamsWithDirection) => {
+    if (getNodesReadOnly())
+      return
+
+    const {
+      getNodes,
+      setNodes,
+    } = store.getState()
+    const { x, y, width, height } = params
+
+    const nodes = getNodes()
+    const currentNode = nodes.find(n => n.id === nodeId)!
+    const childrenNodes = nodes.filter(n => currentNode.data._children?.includes(n.id))
+    let rightNode: Node
+    let bottomNode: Node
+
+    childrenNodes.forEach((n) => {
+      if (rightNode) {
+        if (n.position.x + n.width! > rightNode.position.x + rightNode.width!)
+          rightNode = n
+      }
+      else {
+        rightNode = n
+      }
+      if (bottomNode) {
+        if (n.position.y + n.height! > bottomNode.position.y + bottomNode.height!)
+          bottomNode = n
+      }
+      else {
+        bottomNode = n
+      }
+    })
+
+    if (rightNode! && bottomNode!) {
+      if (width < rightNode!.position.x + rightNode.width! + ITERATION_PADDING.right)
+        return
+      if (height < bottomNode.position.y + bottomNode.height! + ITERATION_PADDING.bottom)
+        return
+    }
+    const newNodes = produce(nodes, (draft) => {
+      draft.forEach((n) => {
+        if (n.id === nodeId) {
+          n.data.width = width
+          n.data.height = height
+          n.width = width
+          n.height = height
+          n.position.x = x
+          n.position.y = y
+        }
+      })
+    })
+    setNodes(newNodes)
+    handleSyncWorkflowDraft()
+  }, [store, getNodesReadOnly, handleSyncWorkflowDraft])
+
   return {
     handleNodeDragStart,
     handleNodeDrag,
@@ -962,5 +1233,6 @@ export const useNodesInteractions = () => {
     handleNodesPaste,
     handleNodesDuplicate,
     handleNodesDelete,
+    handleNodeResize,
   }
 }