Feat: Edit the output data of the code operator #3221 (#8649)

### What problem does this PR solve?

Feat: Edit the output data of the code operator #3221

### Type of change


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

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

@@ -13,16 +13,18 @@ import {
 import { Input } from '@/components/ui/input';
 import { RAGFlowSelect } from '@/components/ui/select';
 import { ProgrammingLanguage } from '@/constants/agent';
-import { ICodeForm } from '@/interfaces/database/flow';
+import { ICodeForm } from '@/interfaces/database/agent';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
-import { z } from 'zod';
+import { buildOutputList } from '../../utils/build-output-list';
+import { Output } from '../components/output';
 import {
   DynamicInputVariable,
   TypeOptions,
   VariableTitle,
 } from './next-variable';
+import { FormSchema, FormSchemaType } from './schema';
 import { useValues } from './use-values';
 import {
   useHandleLanguageChange,
@@ -36,26 +38,14 @@ const options = [
   ProgrammingLanguage.Javascript,
 ].map((x) => ({ value: x, label: x }));
 
+const DynamicFieldName = 'outputs';
+
 const CodeForm = ({ node }: INextOperatorForm) => {
   const formData = node?.data.form as ICodeForm;
   const { t } = useTranslation();
   const values = useValues(node);
 
-  const FormSchema = z.object({
-    lang: z.string(),
-    script: z.string(),
-    arguments: z.array(
-      z.object({ name: z.string(), component_id: z.string() }),
-    ),
-    return: z.union([
-      z
-        .array(z.object({ name: z.string(), component_id: z.string() }))
-        .optional(),
-      z.object({ name: z.string(), component_id: z.string() }),
-    ]),
-  });
-
-  const form = useForm({
+  const form = useForm<FormSchemaType>({
     defaultValues: values,
     resolver: zodResolver(FormSchema),
   });
@@ -75,6 +65,7 @@ const CodeForm = ({ node }: INextOperatorForm) => {
         <DynamicInputVariable
           node={node}
           title={t('flow.input')}
+          isOutputs={false}
         ></DynamicInputVariable>
         <FormField
           control={form.control}
@@ -124,7 +115,8 @@ const CodeForm = ({ node }: INextOperatorForm) => {
           <DynamicInputVariable
             node={node}
             title={'Return Values'}
-            name={'return'}
+            name={DynamicFieldName}
+            isOutputs
           ></DynamicInputVariable>
         ) : (
           <div>
@@ -132,7 +124,7 @@ const CodeForm = ({ node }: INextOperatorForm) => {
             <FormContainer className="space-y-5">
               <FormField
                 control={form.control}
-                name={'return.name'}
+                name={`${DynamicFieldName}.name`}
                 render={({ field }) => (
                   <FormItem>
                     <FormLabel>Name</FormLabel>
@@ -148,7 +140,7 @@ const CodeForm = ({ node }: INextOperatorForm) => {
               />
               <FormField
                 control={form.control}
-                name={`return.component_id`}
+                name={`${DynamicFieldName}.type`}
                 render={({ field }) => (
                   <FormItem className="flex-1">
                     <FormLabel>Type</FormLabel>
@@ -167,6 +159,9 @@ const CodeForm = ({ node }: INextOperatorForm) => {
           </div>
         )}
       </form>
+      <div className="p-5">
+        <Output list={buildOutputList(formData.outputs)}></Output>
+      </div>
     </Form>
   );
 };