Feat: Fixed the issue where the page would refresh continuously when opening the sheet on the right side of the canvas #3221 (#7756)

### What problem does this PR solve?

Feat: Fixed the issue where the page would refresh continuously when
opening the sheet on the right side of the canvas #3221

### Type of change


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

web/src/pages/agent/form-sheet/next.tsx

@@ -85,6 +85,7 @@ const FormSheet = ({
         const formData = node?.data?.form;
         if (isPlainObject(formData)) {
           //   form.setFieldsValue({ ...formData, items });
+          console.info('xxx');
           form.reset({ ...formData, items });
         }
       } else {

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

@@ -137,9 +137,11 @@ export function useFormConfigMap() {
         message_history_window_size: 6,
       },
       schema: z.object({
-        llm_id: z.string(),
-        message_history_window_size: z.number(),
-        language: z.string(),
+        script: z.string(),
+        arguments: z
+          .array(z.object({ name: z.string(), component_id: z.string() }))
+          .optional(),
+        lang: z.string(),
       }),
     },
     [Operator.Baidu]: {

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

@@ -1,6 +1,5 @@
 import Editor, { loader } from '@monaco-editor/react';
 import { INextOperatorForm } from '../../interface';
-import { DynamicInputVariable } from './dynamic-input-variable';
 
 import {
   Form,
@@ -13,7 +12,7 @@ import {
 import { RAGFlowSelect } from '@/components/ui/select';
 import { ProgrammingLanguage } from '@/constants/agent';
 import { ICodeForm } from '@/interfaces/database/flow';
-import { useTranslation } from 'react-i18next';
+import { DynamicInputVariable } from './next-variable';
 
 loader.config({ paths: { vs: '/vs' } });
 
@@ -24,7 +23,6 @@ const options = [
 
 const CodeForm = ({ form, node }: INextOperatorForm) => {
   const formData = node?.data.form as ICodeForm;
-  const { t } = useTranslation();
 
   // useEffect(() => {
   //   setTimeout(() => {
@@ -47,12 +45,9 @@ const CodeForm = ({ form, node }: INextOperatorForm) => {
             <FormLabel>
               <FormField
                 control={form.control}
-                name="channel"
+                name="lang"
                 render={({ field }) => (
                   <FormItem>
-                    <FormLabel tooltip={t('channelTip')}>
-                      {t('channel')}
-                    </FormLabel>
                     <FormControl>
                       <RAGFlowSelect {...field} options={options} />
                     </FormControl>

web/src/pages/agent/form/code-form/next-variable.tsx

@@ -0,0 +1,113 @@
+'use client';
+
+import { SideDown } from '@/assets/icon/Icon';
+import { Button } from '@/components/ui/button';
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from '@/components/ui/collapsible';
+import {
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormMessage,
+} from '@/components/ui/form';
+import { Input } from '@/components/ui/input';
+import { RAGFlowSelect } from '@/components/ui/select';
+import { RAGFlowNodeType } from '@/interfaces/database/flow';
+import { Plus, Trash2 } from 'lucide-react';
+import { useFieldArray, useFormContext } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { useBuildComponentIdSelectOptions } from '../../hooks/use-get-begin-query';
+
+interface IProps {
+  node?: RAGFlowNodeType;
+  name?: string;
+}
+
+export function DynamicVariableForm({ node, name = 'arguments' }: IProps) {
+  const { t } = useTranslation();
+  const form = useFormContext();
+
+  const { fields, remove, append } = useFieldArray({
+    name: name,
+    control: form.control,
+  });
+
+  const valueOptions = useBuildComponentIdSelectOptions(
+    node?.id,
+    node?.parentId,
+  );
+
+  return (
+    <div>
+      {fields.map((field, index) => {
+        const typeField = `${name}.${index}.name`;
+        return (
+          <div key={field.id} className="flex items-center gap-1">
+            <FormField
+              control={form.control}
+              name={typeField}
+              render={({ field }) => (
+                <FormItem className="w-2/5">
+                  <FormDescription />
+                  <FormControl>
+                    <Input placeholder={t('common.pleaseInput')} {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name={`${name}.${index}.component_id`}
+              render={({ field }) => (
+                <FormItem className="flex-1">
+                  <FormDescription />
+                  <FormControl>
+                    <RAGFlowSelect
+                      placeholder={t('common.pleaseSelect')}
+                      options={valueOptions}
+                      {...field}
+                    ></RAGFlowSelect>
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <Trash2
+              className="cursor-pointer mx-3 size-4 text-colors-text-functional-danger"
+              onClick={() => remove(index)}
+            />
+          </div>
+        );
+      })}
+      <Button onClick={append} className="mt-4" variant={'outline'} size={'sm'}>
+        <Plus />
+        {t('flow.addVariable')}
+      </Button>
+    </div>
+  );
+}
+
+export function DynamicInputVariable({ node }: IProps) {
+  const { t } = useTranslation();
+
+  return (
+    <Collapsible defaultOpen className="group/collapsible">
+      <CollapsibleTrigger className="flex justify-between w-full pb-2">
+        <span className="font-bold text-2xl text-colors-text-neutral-strong">
+          {t('flow.input')}
+        </span>
+        <Button variant={'icon'} size={'icon'}>
+          <SideDown />
+        </Button>
+      </CollapsibleTrigger>
+      <CollapsibleContent>
+        <DynamicVariableForm node={node}></DynamicVariableForm>
+      </CollapsibleContent>
+    </Collapsible>
+  );
+}

web/src/pages/agent/hooks.tsx

@@ -320,7 +320,10 @@ export const useHandleFormValuesChange = (
             category_description: buildCategorizeObjectFromList(value.items),
           };
         }
-        updateNodeForm(id, nextValues);
+        if (type) {
+          // Manually triggered form updates are synchronized to the canvas
+          updateNodeForm(id, nextValues);
+        }
       }
     });
     return () => subscription?.unsubscribe();