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

@@ -30,8 +30,8 @@ import { ReactComponent as YahooFinanceIcon } from '@/assets/svg/yahoo-finance.s
 import { CodeTemplateStrMap, ProgrammingLanguage } from '@/constants/agent';
 
 export enum AgentDialogueMode {
-  Conversational = 'Conversational',
-  Task = 'Task',
+  Conversational = 'conversational',
+  Task = 'task',
 }
 
 import {
@@ -781,6 +781,7 @@ export const RestrictedUpstreamMap = {
   [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

@@ -15,17 +15,16 @@ import { FormTooltip } from '@/components/ui/tooltip';
 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,
@@ -83,13 +82,6 @@ const BeginForm = ({ node }: INextOperatorForm) => {
     node,
   });
 
-  const handleParameterDialogSubmit = useCallback(
-    (values: any) => {
-      ok(values);
-    },
-    [ok],
-  );
-
   return (
     <section className="px-5 space-y-5">
       <Form {...form}>
@@ -187,9 +179,8 @@ const BeginForm = ({ node }: INextOperatorForm) => {
           <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

@@ -2,30 +2,11 @@ import { useSetModalState } from '@/hooks/common-hooks';
 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') || [];
@@ -45,11 +26,9 @@ export const useEditQueryRecord = ({ form, node }: INextOperatorForm) => {
         shouldTouch: true,
       });
 
-      update(nextQuery);
-
       hideModal();
     },
-    [form, hideModal, index, update],
+    [form, hideModal, index],
   );
 
   const handleShowModal = useCallback(
@@ -69,10 +48,8 @@ export const useEditQueryRecord = ({ form, node }: INextOperatorForm) => {
       );
 
       form.setValue('inputs', nextQuery, { shouldDirty: true });
-
-      update(nextQuery);
     },
-    [form, update],
+    [form],
   );
 
   return {

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

@@ -3,6 +3,7 @@ import { isEmpty } from 'lodash';
 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();
@@ -24,7 +25,16 @@ export function useValues(node?: RAGFlowNodeType) {
       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

@@ -0,0 +1,31 @@
+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]);
+}