From 612abd6d891f4d018c43c58997f9455d9a732ac3 Mon Sep 17 00:00:00 2001
From: balibabu <cike8899@users.noreply.github.com>
Date: Thu, 3 Jul 2025 13:31:39 +0800
Subject: [PATCH] Feat: Display the iteration operator toolbar #3221 (#8645)

### What problem does this PR solve?

Feat: Display the iteration operator toolbar #3221
### Type of change


- [x] New Feature (non-breaking change which adds functionality)
---
 web/src/components/xyflow/tooltip-node.tsx    |  3 +-
 .../agent/canvas/node/iteration-node.tsx      | 81 +++++++++----------
 web/src/pages/agent/constant.tsx              |  1 +
 3 files changed, 43 insertions(+), 42 deletions(-)

diff --git a/web/src/components/xyflow/tooltip-node.tsx b/web/src/components/xyflow/tooltip-node.tsx
index b53c67617..8acb80b06 100644
--- a/web/src/components/xyflow/tooltip-node.tsx
+++ b/web/src/components/xyflow/tooltip-node.tsx
@@ -40,6 +40,7 @@ export const TooltipNode = forwardRef<HTMLDivElement, TooltipNodeProps>(
           onBlur={hideTooltip}
           tabIndex={0}
           selected={selected}
+          className="h-full bg-transparent"
         >
           {children}
         </BaseNode>
@@ -65,7 +66,7 @@ export const TooltipContent = forwardRef<HTMLDivElement, TooltipContentProps>(
       <div ref={ref}>
         <NodeToolbar
           isVisible={isTooltipVisible}
-          className=" bg-transparent  text-primary-foreground  "
+          className=" bg-transparent  text-primary-foreground"
           tabIndex={1}
           position={position}
           offset={0}
diff --git a/web/src/pages/agent/canvas/node/iteration-node.tsx b/web/src/pages/agent/canvas/node/iteration-node.tsx
index d5a93cadd..d41b8417e 100644
--- a/web/src/pages/agent/canvas/node/iteration-node.tsx
+++ b/web/src/pages/agent/canvas/node/iteration-node.tsx
@@ -56,48 +56,47 @@ export function InnerIterationNode({
   // const { theme } = useTheme();
 
   return (
-    <section
-      className={cn('h-full bg-transparent rounded-b-md relative', {
-        [styles.selectedHeader]: selected,
-      })}
-    >
-      <ToolBar selected={selected} id={id} label={data.label}>
-        <div className="h-full w-full"></div>
-      </ToolBar>
-      <NodeResizeControl style={controlStyle} minWidth={100} minHeight={50}>
-        <ResizeIcon />
-      </NodeResizeControl>
-      <CommonHandle
-        id={NodeHandleId.End}
-        type="target"
-        position={Position.Left}
-        isConnectable={isConnectable}
-        className={styles.handle}
-        nodeId={id}
-      ></CommonHandle>
-      <CommonHandle
-        id={NodeHandleId.Start}
-        type="source"
-        position={Position.Right}
-        isConnectable={isConnectable}
-        className={styles.handle}
-        nodeId={id}
-      ></CommonHandle>
+    <ToolBar selected={selected} id={id} label={data.label}>
+      <section
+        className={cn('h-full bg-transparent rounded-b-md ', {
+          [styles.selectedHeader]: selected,
+        })}
+      >
+        <NodeResizeControl style={controlStyle} minWidth={100} minHeight={50}>
+          <ResizeIcon />
+        </NodeResizeControl>
+        <CommonHandle
+          id={NodeHandleId.End}
+          type="target"
+          position={Position.Left}
+          isConnectable={isConnectable}
+          className={styles.handle}
+          nodeId={id}
+        ></CommonHandle>
+        <CommonHandle
+          id={NodeHandleId.Start}
+          type="source"
+          position={Position.Right}
+          isConnectable={isConnectable}
+          className={styles.handle}
+          nodeId={id}
+        ></CommonHandle>
 
-      <NodeHeader
-        id={id}
-        name={data.name}
-        label={data.label}
-        wrapperClassName={cn(
-          'bg-background-header-bar p-2 rounded-t-[10px] absolute w-full top-[-44px] left-[-0.3px]',
-          // styles.iterationHe ader,
-          {
-            // [`${styles.dark} text-white`]: theme === 'dark',
-            [styles.selectedHeader]: selected,
-          },
-        )}
-      ></NodeHeader>
-    </section>
+        <NodeHeader
+          id={id}
+          name={data.name}
+          label={data.label}
+          wrapperClassName={cn(
+            'bg-background-header-bar p-2 rounded-t-[10px] absolute w-full top-[-44px] left-[-0.3px]',
+            // styles.iterationHe ader,
+            {
+              // [`${styles.dark} text-white`]: theme === 'dark',
+              [styles.selectedHeader]: selected,
+            },
+          )}
+        ></NodeHeader>
+      </section>
+    </ToolBar>
   );
 }
 
diff --git a/web/src/pages/agent/constant.tsx b/web/src/pages/agent/constant.tsx
index bbb44966f..022a2742b 100644
--- a/web/src/pages/agent/constant.tsx
+++ b/web/src/pages/agent/constant.tsx
@@ -667,6 +667,7 @@ export const initialCodeValues = {
     arg1: '',
     arg2: '',
   },
+  outputs: { result: { value: '', type: 'string' } },
 };
 
 export const initialWaitingDialogueValues = {};