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

@@ -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}

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>
   );
 }
 

web/src/pages/agent/constant.tsx

@@ -667,6 +667,7 @@ export const initialCodeValues = {
     arg1: '',
     arg2: '',
   },
+  outputs: { result: { value: '', type: 'string' } },
 };
 
 export const initialWaitingDialogueValues = {};