Feat: Allow operators inside the loop operator to reference the output parameters of external operators #3221 (#8498)

### What problem does this PR solve?

Feat: Allow operators inside the loop operator to reference the output
parameters of external operators #3221

### Type of change


- [x] New Feature (non-breaking change which adds functionality)

web/src/pages/agent/hooks/use-add-node.ts

@@ -28,6 +28,7 @@ import {
   initialGoogleScholarValues,
   initialGoogleValues,
   initialInvokeValues,
+  initialIterationStartValues,
   initialIterationValues,
   initialJin10Values,
   initialKeywordExtractValues,
@@ -99,7 +100,7 @@ export const useInitializeOperatorParams = () => {
       [Operator.Template]: initialTemplateValues,
       [Operator.Email]: initialEmailValues,
       [Operator.Iteration]: initialIterationValues,
-      [Operator.IterationStart]: initialIterationValues,
+      [Operator.IterationStart]: initialIterationStartValues,
       [Operator.Code]: initialCodeValues,
       [Operator.WaitingDialogue]: initialWaitingDialogueValues,
       [Operator.Agent]: { ...initialAgentValues, llm_id: llmId },
@@ -237,6 +238,34 @@ function isBottomSubAgent(type: string, position: Position) {
   );
 }
 
+function useResizeIterationNode() {
+  const { getNode, nodes, updateNode } = useGraphStore((state) => state);
+
+  const resizeIterationNode = useCallback(
+    (type: string, position: Position, parentId?: string) => {
+      const parentNode = getNode(parentId);
+      if (parentNode && !isBottomSubAgent(type, position)) {
+        const MoveRightDistance = 310;
+        const childNodeList = nodes.filter((x) => x.parentId === parentId);
+        const maxX = Math.max(...childNodeList.map((x) => x.position.x));
+        if (maxX + MoveRightDistance > parentNode.position.x) {
+          updateNode({
+            ...parentNode,
+            width: (parentNode.width || 0) + MoveRightDistance,
+            position: {
+              x: parentNode.position.x + MoveRightDistance / 2,
+              y: parentNode.position.y,
+            },
+          });
+        }
+      }
+    },
+    [getNode, nodes, updateNode],
+  );
+
+  return { resizeIterationNode };
+}
+
 export function useAddNode(reactFlowInstance?: ReactFlowInstance<any, any>) {
   const { edges, nodes, addEdge, addNode, getNode, updateNode } = useGraphStore(
     (state) => state,
@@ -246,6 +275,7 @@ export function useAddNode(reactFlowInstance?: ReactFlowInstance<any, any>) {
   const { calculateNewlyBackChildPosition } = useCalculateNewlyChildPosition();
   const { addChildEdge } = useAddChildEdge();
   const { addToolNode } = useAddToolNode();
+  const { resizeIterationNode } = useResizeIterationNode();
   //   const [reactFlowInstance, setReactFlowInstance] =
   //     useState<ReactFlowInstance<any, any>>();
 
@@ -298,15 +328,7 @@ export function useAddNode(reactFlowInstance?: ReactFlowInstance<any, any>) {
           newNode.extent = 'parent';
           const parentNode = getNode(node.parentId);
           if (parentNode && !isBottomSubAgent(type, params.position)) {
-            const MoveRightDistance = 310;
-            updateNode({
-              ...parentNode,
-              width: (parentNode.width || 0) + MoveRightDistance,
-              position: {
-                x: parentNode.position.x + MoveRightDistance / 2,
-                y: parentNode.position.y,
-              },
-            });
+            resizeIterationNode(type, params.position, node.parentId);
           }
         }
 
@@ -321,7 +343,7 @@ export function useAddNode(reactFlowInstance?: ReactFlowInstance<any, any>) {
             data: {
               label: Operator.IterationStart,
               name: Operator.IterationStart,
-              form: {},
+              form: initialIterationStartValues,
             },
             parentId: newNode.id,
             extent: 'parent',