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/constant.tsx

@@ -646,7 +646,16 @@ export const initialEmailValues = {
 export const initialIterationValues = {
   items_ref: '',
 };
-export const initialIterationStartValues = {};
+export const initialIterationStartValues = {
+  outputs: {
+    item: {
+      type: 'unkown',
+    },
+    index: {
+      type: 'integer',
+    },
+  },
+};
 
 export const initialCodeValues = {
   lang: 'python',

web/src/pages/agent/form-sheet/use-form-config-map.tsx

@@ -1,6 +1,5 @@
 import { LlmSettingSchema } from '@/components/llm-setting-items/next';
 import { CodeTemplateStrMap, ProgrammingLanguage } from '@/constants/agent';
-import IterationStartForm from '@/pages/flow/form/iteration-start-from';
 import { useTranslation } from 'react-i18next';
 import { z } from 'zod';
 import { Operator } from '../constant';
@@ -25,6 +24,7 @@ import GoogleForm from '../form/google-form';
 import GoogleScholarForm from '../form/google-scholar-form';
 import InvokeForm from '../form/invoke-form';
 import IterationForm from '../form/iteration-form';
+import IterationStartForm from '../form/iteration-start-from';
 import Jin10Form from '../form/jin10-form';
 import KeywordExtractForm from '../form/keyword-extract-form';
 import MessageForm from '../form/message-form';

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',

web/src/pages/agent/hooks/use-get-begin-query.tsx

@@ -139,13 +139,14 @@ export function useBuildBeginVariableOptions() {
   return options;
 }
 
-export const useBuildVariableOptions = (nodeId?: string) => {
+export const useBuildVariableOptions = (nodeId?: string, parentId?: string) => {
   const nodeOutputOptions = useBuildNodeOutputOptions(nodeId);
+  const parentNodeOutputOptions = useBuildNodeOutputOptions(parentId);
   const beginOptions = useBuildBeginVariableOptions();
 
   const options = useMemo(() => {
-    return [...beginOptions, ...nodeOutputOptions];
-  }, [beginOptions, nodeOutputOptions]);
+    return [...beginOptions, ...nodeOutputOptions, ...parentNodeOutputOptions];
+  }, [beginOptions, nodeOutputOptions, parentNodeOutputOptions]);
 
   return options;
 };
@@ -153,7 +154,7 @@ export const useBuildVariableOptions = (nodeId?: string) => {
 export function useBuildQueryVariableOptions() {
   const { data } = useFetchAgent();
   const node = useContext(AgentFormContext);
-  const options = useBuildVariableOptions(node?.id);
+  const options = useBuildVariableOptions(node?.id, node?.parentId);
 
   const nextOptions = useMemo(() => {
     const globals = data?.dsl?.globals ?? {};

web/src/pages/flow/constant.tsx

@@ -639,16 +639,7 @@ export const initialEmailValues = {
 export const initialIterationValues = {
   delimiter: ',',
 };
-export const initialIterationStartValues = {
-  outputs: {
-    item: {
-      type: 'unkown',
-    },
-    index: {
-      type: 'integer',
-    },
-  },
-};
+export const initialIterationStartValues = {};
 
 export const initialCodeValues = {
   lang: 'python',