Feat: Create empty agent #3221 (#8054)

### What problem does this PR solve?

Feat: Create empty agent #3221

### Type of change


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

web/src/pages/agent/debug-content/index.less

@@ -1,5 +0,0 @@
-.formWrapper {
-  :global(.ant-form-item-label) {
-    font-weight: 600 !important;
-  }
-}

web/src/pages/agent/debug-content/index.tsx

@@ -23,6 +23,21 @@ import { z } from 'zod';
 import { BeginQueryType } from '../constant';
 import { BeginQuery } from '../interface';
 
+export const BeginQueryComponentMap = {
+  [BeginQueryType.Line]: 'string',
+  [BeginQueryType.Paragraph]: 'string',
+  [BeginQueryType.Options]: 'string',
+  [BeginQueryType.File]: 'file',
+  [BeginQueryType.Integer]: 'number',
+  [BeginQueryType.Boolean]: 'boolean',
+};
+
+const StringFields = [
+  BeginQueryType.Line,
+  BeginQueryType.Paragraph,
+  BeginQueryType.Options,
+];
+
 interface IProps {
   parameters: BeginQuery[];
   ok(parameters: any[]): void;
@@ -44,9 +59,27 @@ const DebugContent = ({
 
   const FormSchema = useMemo(() => {
     const obj = parameters.reduce((pre, cur, idx) => {
-      pre[idx] = z.string().optional();
+      const type = cur.type;
+      let fieldSchema;
+      if (StringFields.some((x) => x === type)) {
+        fieldSchema = z.string();
+      } else if (type === BeginQueryType.Boolean) {
+        fieldSchema = z.boolean();
+      } else if (type === BeginQueryType.Integer) {
+        fieldSchema = z.coerce.number();
+      } else {
+        fieldSchema = z.instanceof(File);
+      }
+
+      if (cur.optional) {
+        fieldSchema.optional();
+      }
+
+      pre[idx.toString()] = fieldSchema;
+
       return pre;
     }, {});
+
     return z.object(obj);
   }, [parameters]);
 
@@ -61,6 +94,7 @@ const DebugContent = ({
     switchVisible,
     showModal: showPopover,
   } = useSetModalState();
+
   const { setRecord, currentRecord } = useSetSelectedRecord<number>();
   // const { submittable } = useHandleSubmittable(form);
   const submittable = true;
@@ -226,29 +260,10 @@ const DebugContent = ({
     [form, t],
   );
 
-  const onOk = useCallback(async () => {
-    // const values = await form.validateFields();
-    const nextValues = Object.entries(values).map(([key, value]) => {
-      const item = parameters[Number(key)];
-      let nextValue = value;
-      if (Array.isArray(value)) {
-        nextValue = ``;
-
-        value.forEach((x) => {
-          nextValue +=
-            x?.originFileObj instanceof File
-              ? `${x.name}\n${x.response?.data}\n----\n`
-              : `${x.url}\n${x.result}\n----\n`;
-        });
-      }
-      return { ...item, value: nextValue };
-    });
-
-    ok(nextValues);
-  }, [ok, parameters]);
-
   const onSubmit = useCallback(
     (values: z.infer<typeof FormSchema>) => {
+      console.log('🚀 ~ values:', values);
+      return values;
       const nextValues = Object.entries(values).map(([key, value]) => {
         const item = parameters[Number(key)];
         let nextValue = value;
@@ -274,20 +289,21 @@ const DebugContent = ({
     <>
       <section>
         <Form {...form}>
-          <form onSubmit={form.handleSubmit(onSubmit)}>
+          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
             {parameters.map((x, idx) => {
               return <div key={idx}>{renderWidget(x, idx.toString())}</div>;
             })}
+            <ButtonLoading
+              type="submit"
+              loading={loading}
+              disabled={!submittable || isUploading || submitButtonDisabled}
+              className="w-full"
+            >
+              {t(isNext ? 'common.next' : 'flow.run')}
+            </ButtonLoading>
           </form>
         </Form>
       </section>
-      <ButtonLoading
-        onClick={onOk}
-        loading={loading}
-        disabled={!submittable || isUploading || submitButtonDisabled}
-      >
-        {t(isNext ? 'common.next' : 'flow.run')}
-      </ButtonLoading>
     </>
   );
 };

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

@@ -191,7 +191,6 @@ const BeginForm = ({ node }: INextOperatorForm) => {
 
         {visible && (
           <ParameterDialog
-            visible={visible}
             hideModal={hideModal}
             initialValue={currentRecord}
             onOk={ok}

web/src/pages/agent/form/begin-form/parameter-dialog.tsx

@@ -19,6 +19,7 @@ import { RAGFlowSelect, RAGFlowSelectOptionType } from '@/components/ui/select';
 import { Switch } from '@/components/ui/switch';
 import { IModalProps } from '@/interfaces/common';
 import { zodResolver } from '@hookform/resolvers/zod';
+import { isEmpty } from 'lodash';
 import { useEffect, useMemo } from 'react';
 import { useForm, useWatch } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
@@ -60,11 +61,13 @@ function ParameterForm({
 
   const form = useForm<z.infer<typeof FormSchema>>({
     resolver: zodResolver(FormSchema),
+    mode: 'onChange',
     defaultValues: {
       type: BeginQueryType.Line,
       optional: false,
       key: '',
       name: '',
+      options: [],
     },
   });
 
@@ -98,10 +101,12 @@ function ParameterForm({
   });
 
   useEffect(() => {
-    form.reset({
-      ...initialValue,
-      options: initialValue.options?.map((x) => ({ value: x })),
-    });
+    if (!isEmpty(initialValue)) {
+      form.reset({
+        ...initialValue,
+        options: initialValue.options?.map((x) => ({ value: x })),
+      });
+    }
   }, [form, initialValue]);
 
   function onSubmit(data: z.infer<typeof FormSchema>) {

web/src/pages/agent/hooks/use-save-graph.ts

@@ -1,4 +1,8 @@
-import { useFetchFlow, useResetFlow, useSetFlow } from '@/hooks/flow-hooks';
+import {
+  useFetchAgent,
+  useResetAgent,
+  useSetAgent,
+} from '@/hooks/use-agent-request';
 import { RAGFlowNodeType } from '@/interfaces/database/flow';
 import { useDebounceEffect } from 'ahooks';
 import dayjs from 'dayjs';
@@ -8,20 +12,20 @@ import useGraphStore from '../store';
 import { useBuildDslData } from './use-build-dsl';
 
 export const useSaveGraph = () => {
-  const { data } = useFetchFlow();
-  const { setFlow, loading } = useSetFlow();
+  const { data } = useFetchAgent();
+  const { setAgent, loading } = useSetAgent();
   const { id } = useParams();
   const { buildDslData } = useBuildDslData();
 
   const saveGraph = useCallback(
     async (currentNodes?: RAGFlowNodeType[]) => {
-      return setFlow({
+      return setAgent({
         id,
         title: data.title,
         dsl: buildDslData(currentNodes),
       });
     },
-    [setFlow, id, data.title, buildDslData],
+    [setAgent, id, data.title, buildDslData],
   );
 
   return { saveGraph, loading };
@@ -29,21 +33,21 @@ export const useSaveGraph = () => {
 
 export const useSaveGraphBeforeOpeningDebugDrawer = (show: () => void) => {
   const { saveGraph, loading } = useSaveGraph();
-  const { resetFlow } = useResetFlow();
+  const { resetAgent } = useResetAgent();
 
   const handleRun = useCallback(
     async (nextNodes?: RAGFlowNodeType[]) => {
       const saveRet = await saveGraph(nextNodes);
       if (saveRet?.code === 0) {
         // Call the reset api before opening the run drawer each time
-        const resetRet = await resetFlow();
+        const resetRet = await resetAgent();
         // After resetting, all previous messages will be cleared.
         if (resetRet?.code === 0) {
           show();
         }
       }
     },
-    [saveGraph, resetFlow, show],
+    [saveGraph, resetAgent, show],
   );
 
   return { handleRun, loading };
@@ -54,7 +58,7 @@ export const useWatchAgentChange = (chatDrawerVisible: boolean) => {
   const nodes = useGraphStore((state) => state.nodes);
   const edges = useGraphStore((state) => state.edges);
   const { saveGraph } = useSaveGraph();
-  const { data: flowDetail } = useFetchFlow();
+  const { data: flowDetail } = useFetchAgent();
 
   const setSaveTime = useCallback((updateTime: number) => {
     setTime(dayjs(updateTime).format('YYYY-MM-DD HH:mm:ss'));