Feat: Solved the problem that BeginForm would get stuck when modifying data #3221 (#8080)

### What problem does this PR solve?

Feat: Solved the problem that BeginForm would get stuck when modifying
data #3221
### Type of change


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

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

@@ -39,15 +39,9 @@ const BeginForm = ({ node }: INextOperatorForm) => {
 
   const FormSchema = z.object({
     enablePrologue: z.boolean().optional(),
-    prologue: z
-      .string()
-      .min(1, {
-        message: t('common.namePlaceholder'),
-      })
-      .trim()
-      .optional(),
+    prologue: z.string().trim().optional(),
     mode: z.string(),
-    query: z
+    inputs: z
       .array(
         z.object({
           key: z.string(),
@@ -68,7 +62,7 @@ const BeginForm = ({ node }: INextOperatorForm) => {
 
   useWatchFormChange(node?.id, form);
 
-  const query = useWatch({ control: form.control, name: 'query' });
+  const inputs = useWatch({ control: form.control, name: 'inputs' });
   const mode = useWatch({ control: form.control, name: 'mode' });
 
   const enablePrologue = useWatch({
@@ -160,7 +154,7 @@ const BeginForm = ({ node }: INextOperatorForm) => {
         {/* Create a hidden field to make Form instance record this */}
         <FormField
           control={form.control}
-          name={'query'}
+          name={'inputs'}
           render={() => <div></div>}
         />
         <Collapse
@@ -183,7 +177,7 @@ const BeginForm = ({ node }: INextOperatorForm) => {
           }
         >
           <QueryTable
-            data={query}
+            data={inputs}
             showModal={showModal}
             deleteRecord={handleDeleteRecord}
           ></QueryTable>

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

@@ -8,9 +8,9 @@ export function useUpdateQueryToNodeForm({ form, node }: INextOperatorForm) {
   const updateNodeForm = useGraphStore((state) => state.updateNodeForm);
 
   const update = useCallback(
-    (query: BeginQuery[]) => {
+    (inputs: BeginQuery[]) => {
       const values = form.getValues();
-      const nextValues = { ...values, query };
+      const nextValues = { ...values, inputs };
       if (node?.id) {
         updateNodeForm(node.id, nextValues);
       }
@@ -28,19 +28,19 @@ export const useEditQueryRecord = ({ form, node }: INextOperatorForm) => {
   const { update } = useUpdateQueryToNodeForm({ form, node });
 
   const otherThanCurrentQuery = useMemo(() => {
-    const query: BeginQuery[] = form?.getValues('query') || [];
-    return query.filter((item, idx) => idx !== index);
+    const inputs: BeginQuery[] = form?.getValues('inputs') || [];
+    return inputs.filter((item, idx) => idx !== index);
   }, [form, index]);
 
   const handleEditRecord = useCallback(
     (record: BeginQuery) => {
-      const query: BeginQuery[] = form?.getValues('query') || [];
-      console.log('🚀 ~ useEditQueryRecord ~ query:', query);
+      const inputs: BeginQuery[] = form?.getValues('inputs') || [];
+      console.log('🚀 ~ useEditQueryRecord ~ inputs:', inputs);
 
       const nextQuery: BeginQuery[] =
-        index > -1 ? query.toSpliced(index, 1, record) : [...query, record];
+        index > -1 ? inputs.toSpliced(index, 1, record) : [...inputs, record];
 
-      form.setValue('query', nextQuery, {
+      form.setValue('inputs', nextQuery, {
         shouldDirty: true,
         shouldTouch: true,
       });
@@ -63,12 +63,12 @@ export const useEditQueryRecord = ({ form, node }: INextOperatorForm) => {
 
   const handleDeleteRecord = useCallback(
     (idx: number) => {
-      const query = form?.getValues('query') || [];
-      const nextQuery = query.filter(
+      const inputs = form?.getValues('inputs') || [];
+      const nextQuery = inputs.filter(
         (item: BeginQuery, index: number) => index !== idx,
       );
 
-      form.setValue('query', nextQuery, { shouldDirty: true });
+      form.setValue('inputs', nextQuery, { shouldDirty: true });
 
       update(nextQuery);
     },

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

@@ -12,6 +12,7 @@ export function useValues(node?: RAGFlowNodeType) {
       enablePrologue: true,
       prologue: t('chat.setAnOpenerInitial'),
       mode: AgentDialogueMode.Conversational,
+      inputs: [],
     }),
     [t],
   );