Feat: Upload agent file #3221 (#5311)

### What problem does this PR solve?

Feat: Upload agent file #3221

### Type of change


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

web/src/pages/agent/upload-agent-dialog/upload-agent-form.tsx

@@ -0,0 +1,91 @@
+'use client';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+import { FileUploader } from '@/components/file-uploader';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form';
+import { RAGFlowSelect } from '@/components/ui/select';
+import { FileMimeType, Platform } from '@/constants/common';
+import { IModalProps } from '@/interfaces/common';
+import { TagRenameId } from '@/pages/add-knowledge/constant';
+import { useTranslation } from 'react-i18next';
+
+const options = Object.values(Platform).map((x) => ({ label: x, value: x }));
+
+export function UploadAgentForm({ hideModal, onOk }: IModalProps<any>) {
+  const { t } = useTranslation();
+  const FormSchema = z.object({
+    platform: z
+      .string()
+      .min(1, {
+        message: t('common.namePlaceholder'),
+      })
+      .trim(),
+    fileList: z.array(z.instanceof(File)),
+  });
+
+  const form = useForm<z.infer<typeof FormSchema>>({
+    resolver: zodResolver(FormSchema),
+    defaultValues: { platform: Platform.RAGFlow },
+  });
+
+  async function onSubmit(data: z.infer<typeof FormSchema>) {
+    console.log('🚀 ~ onSubmit ~ data:', data);
+    const ret = await onOk?.(data);
+    if (ret) {
+      hideModal?.();
+    }
+  }
+
+  return (
+    <Form {...form}>
+      <form
+        onSubmit={form.handleSubmit(onSubmit)}
+        className="space-y-6"
+        id={TagRenameId}
+      >
+        <FormField
+          control={form.control}
+          name="fileList"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>{t('common.name')}</FormLabel>
+              <FormControl>
+                <FileUploader
+                  value={field.value}
+                  onValueChange={field.onChange}
+                  maxFileCount={1}
+                  maxSize={4 * 1024 * 1024}
+                  accept={{ '*.json': [FileMimeType.Json] }}
+                />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <FormField
+          control={form.control}
+          name="platform"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>{t('common.name')}</FormLabel>
+              <FormControl>
+                <RAGFlowSelect {...field} options={options} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+      </form>
+    </Form>
+  );
+}