Feat: Add agent advanced settings form #3221 (#8592)

### What problem does this PR solve?

Feat: Add agent advanced settings form #3221

### Type of change


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

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

@@ -1,3 +1,4 @@
+import { Collapse } from '@/components/collapse';
 import { FormContainer } from '@/components/form-container';
 import { LargeModelFormField } from '@/components/large-model-form-field';
 import { LlmSettingSchema } from '@/components/llm-setting-items/next';
@@ -9,22 +10,32 @@ import {
   FormItem,
   FormLabel,
 } from '@/components/ui/form';
+import { Input, NumberInput } from '@/components/ui/input';
+import { RAGFlowSelect } from '@/components/ui/select';
+import { buildOptions } from '@/utils/form';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useMemo } from 'react';
 import { useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { z } from 'zod';
-import { initialAgentValues } from '../../constant';
+import {
+  AgentExceptionMethod,
+  VariableType,
+  initialAgentValues,
+} from '../../constant';
 import { INextOperatorForm } from '../../interface';
 import useGraphStore from '../../store';
 import { isBottomSubAgent } from '../../utils';
 import { DescriptionField } from '../components/description-field';
 import { Output } from '../components/output';
 import { PromptEditor } from '../components/prompt-editor';
+import { QueryVariable } from '../components/query-variable';
 import { AgentTools, Agents } from './agent-tools';
 import { useValues } from './use-values';
 import { useWatchFormChange } from './use-watch-change';
 
+const exceptionMethodOptions = buildOptions(AgentExceptionMethod);
+
 const FormSchema = z.object({
   sys_prompt: z.string(),
   description: z.string().optional(),
@@ -46,6 +57,13 @@ const FormSchema = z.object({
     )
     .optional(),
   ...LlmSettingSchema,
+  max_retries: z.coerce.number(),
+  delay_after_error: z.coerce.number().optional(),
+  visual_files_var: z.string().optional(),
+  max_rounds: z.coerce.number().optional(),
+  exception_method: z.string().nullable(),
+  exception_comment: z.string().optional(),
+  exception_goto: z.string().optional(),
 });
 
 const AgentForm = ({ node }: INextOperatorForm) => {
@@ -64,7 +82,7 @@ const AgentForm = ({ node }: INextOperatorForm) => {
     ];
   }, []);
 
-  const form = useForm({
+  const form = useForm<z.infer<typeof FormSchema>>({
     defaultValues: defaultValues,
     resolver: zodResolver(FormSchema),
   });
@@ -122,10 +140,87 @@ const AgentForm = ({ node }: INextOperatorForm) => {
             />
           </FormContainer>
         )}
+
         <FormContainer>
           <AgentTools></AgentTools>
           <Agents node={node}></Agents>
         </FormContainer>
+        <Collapse title={<div>Advanced Settings</div>}>
+          <FormContainer>
+            <QueryVariable
+              name="visual_files_var"
+              label="Visual files var"
+            ></QueryVariable>
+            <FormField
+              control={form.control}
+              name={`max_retries`}
+              render={({ field }) => (
+                <FormItem className="flex-1">
+                  <FormLabel>Max retries</FormLabel>
+                  <FormControl>
+                    <NumberInput {...field} max={8}></NumberInput>
+                  </FormControl>
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name={`delay_after_error`}
+              render={({ field }) => (
+                <FormItem className="flex-1">
+                  <FormLabel>Delay after error</FormLabel>
+                  <FormControl>
+                    <NumberInput {...field} max={5} step={0.1}></NumberInput>
+                  </FormControl>
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name={`max_rounds`}
+              render={({ field }) => (
+                <FormItem className="flex-1">
+                  <FormLabel>Max rounds</FormLabel>
+                  <FormControl>
+                    <NumberInput {...field}></NumberInput>
+                  </FormControl>
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name={`exception_method`}
+              render={({ field }) => (
+                <FormItem className="flex-1">
+                  <FormLabel>Exception method</FormLabel>
+                  <FormControl>
+                    <RAGFlowSelect
+                      {...field}
+                      options={exceptionMethodOptions}
+                    />
+                  </FormControl>
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name={`exception_comment`}
+              render={({ field }) => (
+                <FormItem className="flex-1">
+                  <FormLabel>Exception comment</FormLabel>
+                  <FormControl>
+                    <Input {...field} />
+                  </FormControl>
+                </FormItem>
+              )}
+            />
+            <QueryVariable
+              name="exception_goto"
+              label="Exception goto"
+              type={VariableType.File}
+            ></QueryVariable>
+          </FormContainer>
+        </Collapse>
         <Output list={outputList}></Output>
       </form>
     </Form>