Feat: Convert the inputs parameter of the begin operator #3221 (#8081)

### What problem does this PR solve?

Feat: Convert the inputs parameter of the begin operator #3221

### Type of change


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

web/src/pages/agent/constant.tsx

 import { CodeTemplateStrMap, ProgrammingLanguage } from '@/constants/agent';
 
 export enum AgentDialogueMode {
-  Conversational = 'Conversational',
-  Task = 'Task',
+  Conversational = 'conversational',
+  Task = 'task',
 }
 
 import {
   [Operator.IterationStart]: [Operator.Begin],
   [Operator.Code]: [Operator.Begin],
   [Operator.WaitingDialogue]: [Operator.Begin],
+  [Operator.Agent]: [Operator.Begin],
 };
 
 export const NodeMap = {

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

 import { buildSelectOptions } from '@/utils/component-util';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { Plus } from 'lucide-react';
-import { useCallback } from 'react';
 import { useForm, useWatch } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { z } from 'zod';
 import { AgentDialogueMode } from '../../constant';
-import { useWatchFormChange } from '../../hooks/use-watch-form-change';
 import { INextOperatorForm } from '../../interface';
 import { ParameterDialog } from './parameter-dialog';
 import { QueryTable } from './query-table';
 import { useEditQueryRecord } from './use-edit-query';
 import { useValues } from './use-values';
+import { useWatchFormChange } from './use-watch-change';
 
 const ModeOptions = buildSelectOptions([
   AgentDialogueMode.Conversational,
     node,
   });
 
-  const handleParameterDialogSubmit = useCallback(
-    (values: any) => {
-      ok(values);
-    },
-    [ok],
-  );
-
   return (
     <section className="px-5 space-y-5">
       <Form {...form}>
           <ParameterDialog
             hideModal={hideModal}
             initialValue={currentRecord}
-            onOk={ok}
             otherThanCurrentQuery={otherThanCurrentQuery}
-            submit={handleParameterDialogSubmit}
+            submit={ok}
           ></ParameterDialog>
         )}
       </Form>

web/src/pages/agent/form/begin-form/use-edit-query.ts

 import { useSetSelectedRecord } from '@/hooks/logic-hooks';
 import { useCallback, useMemo, useState } from 'react';
 import { BeginQuery, INextOperatorForm } from '../../interface';
-import useGraphStore from '../../store';
-
-export function useUpdateQueryToNodeForm({ form, node }: INextOperatorForm) {
-  const updateNodeForm = useGraphStore((state) => state.updateNodeForm);
-
-  const update = useCallback(
-    (inputs: BeginQuery[]) => {
-      const values = form.getValues();
-      const nextValues = { ...values, inputs };
-      if (node?.id) {
-        updateNodeForm(node.id, nextValues);
-      }
-    },
-    [form, node?.id, updateNodeForm],
-  );
-
-  return { update };
-}
 
 export const useEditQueryRecord = ({ form, node }: INextOperatorForm) => {
   const { setRecord, currentRecord } = useSetSelectedRecord<BeginQuery>();
   const { visible, hideModal, showModal } = useSetModalState();
   const [index, setIndex] = useState(-1);
-  const { update } = useUpdateQueryToNodeForm({ form, node });
 
   const otherThanCurrentQuery = useMemo(() => {
     const inputs: BeginQuery[] = form?.getValues('inputs') || [];
         shouldTouch: true,
       });
 
-      update(nextQuery);
-
       hideModal();
     },
-    [form, hideModal, index, update],
+    [form, hideModal, index],
   );
 
   const handleShowModal = useCallback(
       );
 
       form.setValue('inputs', nextQuery, { shouldDirty: true });
-
-      update(nextQuery);
     },
-    [form, update],
+    [form],
   );
 
   return {

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

 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { AgentDialogueMode } from '../../constant';
+import { BeginQuery } from '../../interface';
 
 export function useValues(node?: RAGFlowNodeType) {
   const { t } = useTranslation();
       return defaultValues;
     }
 
-    return formData;
+    const inputs = Object.entries(formData?.inputs || {}).reduce<BeginQuery[]>(
+      (pre, [key, value]) => {
+        pre.push({ ...(value || {}), key });
+
+        return pre;
+      },
+      [],
+    );
+
+    return { ...(formData || {}), inputs };
   }, [defaultValues, node?.data?.form]);
 
   return values;

web/src/pages/agent/form/begin-form/use-watch-change.ts

+import { omit } from 'lodash';
+import { useEffect } from 'react';
+import { UseFormReturn, useWatch } from 'react-hook-form';
+import { BeginQuery } from '../../interface';
+import useGraphStore from '../../store';
+
+function transferInputsArrayToObject(inputs: BeginQuery[] = []) {
+  return inputs.reduce<Record<string, Omit<BeginQuery, 'key'>>>((pre, cur) => {
+    pre[cur.key] = omit(cur, 'key');
+
+    return pre;
+  }, {});
+}
+
+export function useWatchFormChange(id?: string, form?: UseFormReturn) {
+  let values = useWatch({ control: form?.control });
+  const updateNodeForm = useGraphStore((state) => state.updateNodeForm);
+
+  useEffect(() => {
+    if (id && form?.formState.isDirty) {
+      values = form?.getValues();
+
+      const nextValues = {
+        ...values,
+        inputs: transferInputsArrayToObject(values.inputs),
+      };
+
+      updateNodeForm(id, nextValues);
+    }
+  }, [form?.formState.isDirty, id, updateNodeForm, values]);
+}