Feat: Add IterationNode component #3221 (#8461)

### What problem does this PR solve?

Feat: Add IterationNode component #3221
### Type of change


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

web/src/pages/agent/form/agent-form/index.tsx

@@ -10,15 +10,17 @@ import {
   FormItem,
   FormLabel,
 } from '@/components/ui/form';
+import { Textarea } from '@/components/ui/textarea';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { Position } from '@xyflow/react';
 import { useContext, useMemo } from 'react';
 import { useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { z } from 'zod';
-import { Operator, initialAgentValues } from '../../constant';
+import { NodeHandleId, Operator, initialAgentValues } from '../../constant';
 import { AgentInstanceContext } from '../../context';
 import { INextOperatorForm } from '../../interface';
+import useGraphStore from '../../store';
 import { Output } from '../components/output';
 import { PromptEditor } from '../components/prompt-editor';
 import { AgentTools } from './agent-tools';
@@ -27,6 +29,7 @@ import { useWatchFormChange } from './use-watch-change';
 
 const FormSchema = z.object({
   sys_prompt: z.string(),
+  description: z.string().optional(),
   prompts: z.string().optional(),
   // prompts: z
   //   .array(
@@ -49,9 +52,17 @@ const FormSchema = z.object({
 
 const AgentForm = ({ node }: INextOperatorForm) => {
   const { t } = useTranslation();
+  const { edges } = useGraphStore((state) => state);
 
   const defaultValues = useValues(node);
 
+  const isSubAgent = useMemo(() => {
+    const edge = edges.find(
+      (x) => x.target === node?.id && x.targetHandle === NodeHandleId.AgentTop,
+    );
+    return !!edge;
+  }, [edges, node?.id]);
+
   const outputList = useMemo(() => {
     return [
       { title: 'content', type: initialAgentValues.outputs.content.type },
@@ -76,6 +87,20 @@ const AgentForm = ({ node }: INextOperatorForm) => {
         }}
       >
         <FormContainer>
+          {isSubAgent && (
+            <FormField
+              control={form.control}
+              name={`description`}
+              render={({ field }) => (
+                <FormItem className="flex-1">
+                  <FormLabel>Description</FormLabel>
+                  <FormControl>
+                    <Textarea {...field}></Textarea>
+                  </FormControl>
+                </FormItem>
+              )}
+            />
+          )}
           <LargeModelFormField></LargeModelFormField>
           <FormField
             control={form.control}
@@ -95,23 +120,28 @@ const AgentForm = ({ node }: INextOperatorForm) => {
           />
           <MessageHistoryWindowSizeFormField></MessageHistoryWindowSizeFormField>
         </FormContainer>
-        <FormContainer>
-          {/* <DynamicPrompt></DynamicPrompt> */}
-          <FormField
-            control={form.control}
-            name={`prompts`}
-            render={({ field }) => (
-              <FormItem className="flex-1">
-                <FormLabel>User Prompt</FormLabel>
-                <FormControl>
-                  <section>
-                    <PromptEditor {...field} showToolbar={false}></PromptEditor>
-                  </section>
-                </FormControl>
-              </FormItem>
-            )}
-          />
-        </FormContainer>
+        {isSubAgent || (
+          <FormContainer>
+            {/* <DynamicPrompt></DynamicPrompt> */}
+            <FormField
+              control={form.control}
+              name={`prompts`}
+              render={({ field }) => (
+                <FormItem className="flex-1">
+                  <FormLabel>User Prompt</FormLabel>
+                  <FormControl>
+                    <section>
+                      <PromptEditor
+                        {...field}
+                        showToolbar={false}
+                      ></PromptEditor>
+                    </section>
+                  </FormControl>
+                </FormItem>
+              )}
+            />
+          </FormContainer>
+        )}
         <FormContainer>
           <AgentTools></AgentTools>
           <BlockButton

web/src/pages/agent/form/components/query-variable.tsx

@@ -10,7 +10,9 @@ import { useFormContext } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { useBuildQueryVariableOptions } from '../../hooks/use-get-begin-query';
 
-export function QueryVariable() {
+type QueryVariableProps = { name?: string };
+
+export function QueryVariable({ name = 'query' }: QueryVariableProps) {
   const { t } = useTranslation();
   const form = useFormContext();
 
@@ -19,7 +21,7 @@ export function QueryVariable() {
   return (
     <FormField
       control={form.control}
-      name="query"
+      name={name}
       render={({ field }) => (
         <FormItem>
           <FormLabel tooltip={t('chat.modelTip')}>{t('flow.query')}</FormLabel>

web/src/pages/agent/form/iteration-form/index.tsx

@@ -0,0 +1,61 @@
+import { FormContainer } from '@/components/form-container';
+import { Form } from '@/components/ui/form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useMemo } from 'react';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+import { initialRetrievalValues } from '../../constant';
+import { useWatchFormChange } from '../../hooks/use-watch-form-change';
+import { INextOperatorForm } from '../../interface';
+import { Output } from '../components/output';
+import { QueryVariable } from '../components/query-variable';
+import { useValues } from './use-values';
+
+const FormSchema = z.object({
+  query: z.string().optional(),
+  similarity_threshold: z.coerce.number(),
+  keywords_similarity_weight: z.coerce.number(),
+  top_n: z.coerce.number(),
+  top_k: z.coerce.number(),
+  kb_ids: z.array(z.string()),
+  rerank_id: z.string(),
+  empty_response: z.string(),
+});
+
+const IterationForm = ({ node }: INextOperatorForm) => {
+  const outputList = useMemo(() => {
+    return [
+      {
+        title: 'formalized_content',
+        type: initialRetrievalValues.outputs.formalized_content.type,
+      },
+    ];
+  }, []);
+
+  const defaultValues = useValues(node);
+
+  const form = useForm({
+    defaultValues: defaultValues,
+    resolver: zodResolver(FormSchema),
+  });
+
+  useWatchFormChange(node?.id, form);
+
+  return (
+    <Form {...form}>
+      <form
+        className="space-y-6 p-4"
+        onSubmit={(e) => {
+          e.preventDefault();
+        }}
+      >
+        <FormContainer>
+          <QueryVariable name="items_ref"></QueryVariable>
+        </FormContainer>
+        <Output list={outputList}></Output>
+      </form>
+    </Form>
+  );
+};
+
+export default IterationForm;

web/src/pages/agent/form/iteration-form/use-values.ts

@@ -0,0 +1,25 @@
+import { RAGFlowNodeType } from '@/interfaces/database/flow';
+import { isEmpty } from 'lodash';
+import { useMemo } from 'react';
+import { initialIterationValues } from '../../constant';
+
+export function useValues(node?: RAGFlowNodeType) {
+  const defaultValues = useMemo(
+    () => ({
+      ...initialIterationValues,
+    }),
+    [],
+  );
+
+  const values = useMemo(() => {
+    const formData = node?.data?.form;
+
+    if (isEmpty(formData)) {
+      return defaultValues;
+    }
+
+    return formData;
+  }, [defaultValues, node?.data?.form]);
+
+  return values;
+}

web/src/pages/agent/form/iteration-from/index.tsx

@@ -1,94 +0,0 @@
-import { CommaIcon, SemicolonIcon } from '@/assets/icon/Icon';
-import { Form, Select } from 'antd';
-import {
-  CornerDownLeft,
-  IndentIncrease,
-  Minus,
-  Slash,
-  Underline,
-} from 'lucide-react';
-import { useMemo } from 'react';
-import { useTranslation } from 'react-i18next';
-import { IOperatorForm } from '../../interface';
-import DynamicInputVariable from '../components/dynamic-input-variable';
-
-const optionList = [
-  {
-    value: ',',
-    icon: CommaIcon,
-    text: 'comma',
-  },
-  {
-    value: '\n',
-    icon: CornerDownLeft,
-    text: 'lineBreak',
-  },
-  {
-    value: 'tab',
-    icon: IndentIncrease,
-    text: 'tab',
-  },
-  {
-    value: '_',
-    icon: Underline,
-    text: 'underline',
-  },
-  {
-    value: '/',
-    icon: Slash,
-    text: 'diagonal',
-  },
-  {
-    value: '-',
-    icon: Minus,
-    text: 'minus',
-  },
-  {
-    value: ';',
-    icon: SemicolonIcon,
-    text: 'semicolon',
-  },
-];
-
-const IterationForm = ({ onValuesChange, form, node }: IOperatorForm) => {
-  const { t } = useTranslation();
-
-  const options = useMemo(() => {
-    return optionList.map((x) => {
-      let Icon = x.icon;
-
-      return {
-        value: x.value,
-        label: (
-          <div className="flex items-center gap-2">
-            <Icon className={'size-4'}></Icon>
-            {t(`flow.delimiterOptions.${x.text}`)}
-          </div>
-        ),
-      };
-    });
-  }, [t]);
-
-  return (
-    <Form
-      name="basic"
-      autoComplete="off"
-      form={form}
-      onValuesChange={onValuesChange}
-      layout={'vertical'}
-    >
-      <DynamicInputVariable node={node}></DynamicInputVariable>
-      <Form.Item
-        name={['delimiter']}
-        label={t('knowledgeDetails.delimiter')}
-        initialValue={`\\n!?;。；！？`}
-        rules={[{ required: true }]}
-        tooltip={t('flow.delimiterTip')}
-      >
-        <Select options={options}></Select>
-      </Form.Item>
-    </Form>
-  );
-};
-
-export default IterationForm;