Feat: Convert the arguments parameter of the code operator to a dictionary #3221 (#8623)

### What problem does this PR solve?

Feat: Convert the arguments parameter of the code operator to a
dictionary #3221

### Type of change


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

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

@@ -4,7 +4,7 @@ import { UseFormReturn, useWatch } from 'react-hook-form';
 import { BeginQuery } from '../../interface';
 import useGraphStore from '../../store';
 
-function transferInputsArrayToObject(inputs: BeginQuery[] = []) {
+export function transferInputsArrayToObject(inputs: BeginQuery[] = []) {
   return inputs.reduce<Record<string, Omit<BeginQuery, 'key'>>>((pre, cur) => {
     pre[cur.key] = omit(cur, 'key');
 

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

@@ -1,27 +1,25 @@
-import { CodeTemplateStrMap, ProgrammingLanguage } from '@/constants/agent';
 import { RAGFlowNodeType } from '@/interfaces/database/flow';
 import { isEmpty } from 'lodash';
 import { useMemo } from 'react';
+import { initialCodeValues } from '../../constant';
+
+function convertToArray(args: Record<string, string>) {
+  return Object.entries(args).map(([key, value]) => ({
+    name: key,
+    component_id: value,
+  }));
+}
 
 export function useValues(node?: RAGFlowNodeType) {
-  const defaultValues = useMemo(
-    () => ({
-      lang: ProgrammingLanguage.Python,
-      script: CodeTemplateStrMap[ProgrammingLanguage.Python],
-      arguments: [],
-    }),
-    [],
-  );
-
   const values = useMemo(() => {
     const formData = node?.data?.form;
 
     if (isEmpty(formData)) {
-      return defaultValues;
+      return initialCodeValues;
     }
 
-    return formData;
-  }, [defaultValues, node?.data?.form]);
+    return { ...formData, arguments: convertToArray(formData.arguments) };
+  }, [node?.data?.form]);
 
   return values;
 }

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

@@ -3,6 +3,14 @@ import { useCallback, useEffect } from 'react';
 import { UseFormReturn, useWatch } from 'react-hook-form';
 import useGraphStore from '../../store';
 
+function convertToObject(list: Array<{ name: string; component_id: string }>) {
+  return list.reduce<Record<string, string>>((pre, cur) => {
+    pre[cur.name] = cur.component_id;
+
+    return pre;
+  }, {});
+}
+
 export function useWatchFormChange(id?: string, form?: UseFormReturn) {
   let values = useWatch({ control: form?.control });
   const updateNodeForm = useGraphStore((state) => state.updateNodeForm);
@@ -11,7 +19,10 @@ export function useWatchFormChange(id?: string, form?: UseFormReturn) {
     // Manually triggered form updates are synchronized to the canvas
     if (id) {
       values = form?.getValues() || {};
-      let nextValues: any = values;
+      let nextValues: any = {
+        ...values,
+        arguments: convertToObject(values.arguments),
+      };
 
       updateNodeForm(id, nextValues);
     }

web/src/pages/agent/form/components/prompt-editor/variable-node.tsx

@@ -37,7 +37,7 @@ export class VariableNode extends DecoratorNode<ReactNode> {
     let content: ReactNode = (
       <span className="text-blue-600">{this.__label}</span>
     );
-    if (this.__value.startsWith(prefix)) {
+    if (this.__value?.startsWith(prefix)) {
       content = (
         <div>
           <span>{i18n.t(`flow.begin`)}</span> / {content}

web/src/pages/agent/form/components/prompt-editor/variable-picker-plugin.tsx

@@ -220,6 +220,10 @@ export default function VariablePickerMenuPlugin({
       }
 
       $getRoot().clear().append(paragraph);
+
+      if ($isRangeSelection($getSelection())) {
+        $getRoot().selectEnd();
+      }
     },
     [findLabelByValue],
   );