Feat: Switching the programming language of the code operator will switch the corresponding language template #3221 (#7770)

### What problem does this PR solve?

Feat: Switching the programming language of the code operator will
switch the corresponding language template #3221

### Type of change


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

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

@@ -10,8 +10,9 @@ import {
   FormMessage,
 } from '@/components/ui/form';
 import { RAGFlowSelect } from '@/components/ui/select';
-import { ProgrammingLanguage } from '@/constants/agent';
+import { CodeTemplateStrMap, ProgrammingLanguage } from '@/constants/agent';
 import { ICodeForm } from '@/interfaces/database/flow';
+import { useEffect } from 'react';
 import { DynamicInputVariable } from './next-variable';
 
 loader.config({ paths: { vs: '/vs' } });
@@ -24,15 +25,13 @@ const options = [
 const CodeForm = ({ form, node }: INextOperatorForm) => {
   const formData = node?.data.form as ICodeForm;
 
-  // useEffect(() => {
-  //   setTimeout(() => {
-  //     // TODO: Direct operation zustand is more elegant
-  //     form?.setFieldValue(
-  //       'script',
-  //       CodeTemplateStrMap[formData.lang as ProgrammingLanguage],
-  //     );
-  //   }, 0);
-  // }, [form, formData.lang]);
+  useEffect(() => {
+    // TODO: Direct operation zustand is more elegant
+    form?.setValue(
+      'script',
+      CodeTemplateStrMap[formData.lang as ProgrammingLanguage],
+    );
+  }, [form, formData.lang]);
 
   return (
     <Form {...form}>

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

@@ -54,7 +54,10 @@ export function DynamicVariableForm({ node, name = 'arguments' }: IProps) {
                 <FormItem className="w-2/5">
                   <FormDescription />
                   <FormControl>
-                    <Input placeholder={t('common.pleaseInput')} {...field} />
+                    <Input
+                      {...field}
+                      placeholder={t('common.pleaseInput')}
+                    ></Input>
                   </FormControl>
                   <FormMessage />
                 </FormItem>
@@ -84,7 +87,12 @@ export function DynamicVariableForm({ node, name = 'arguments' }: IProps) {
           </div>
         );
       })}
-      <Button onClick={append} className="mt-4" variant={'outline'} size={'sm'}>
+      <Button
+        onClick={() => append({ name: '', component_id: undefined })}
+        className="mt-4"
+        variant={'outline'}
+        size={'sm'}
+      >
         <Plus />
         {t('flow.addVariable')}
       </Button>