Refactor: Replace Ant Design with shadcn in SparkModal, TencentCloudModal, HunyuanModal, and GoogleModal. #1036 (#12510)

### What problem does this PR solve?

Refactor: Replace Ant Design with shadcn in SparkModal,
TencentCloudModal, HunyuanModal, and GoogleModal. #1036
### Type of change

- [x] Refactoring

web/src/pages/user-setting/setting-model/modal/google-modal/index.tsx

@@ -1,17 +1,15 @@
-import { useTranslate } from '@/hooks/common-hooks';
+import {
+  DynamicForm,
+  FormFieldConfig,
+  FormFieldType,
+} from '@/components/dynamic-form';
+import { Modal } from '@/components/ui/modal/modal';
+import { useCommonTranslation, useTranslate } from '@/hooks/common-hooks';
 import { IModalProps } from '@/interfaces/common';
 import { IAddLlmRequestBody } from '@/interfaces/request/llm';
-import { Form, Input, InputNumber, Modal, Select } from 'antd';
+import { FieldValues } from 'react-hook-form';
 import { LLMHeader } from '../../components/llm-header';
 
-type FieldType = IAddLlmRequestBody & {
-  google_project_id: string;
-  google_region: string;
-  google_service_account_key: string;
-};
-
-const { Option } = Select;
-
 const GoogleModal = ({
   visible,
   hideModal,
@@ -19,114 +17,137 @@ const GoogleModal = ({
   loading,
   llmFactory,
 }: IModalProps<IAddLlmRequestBody> & { llmFactory: string }) => {
-  const [form] = Form.useForm<FieldType>();
-
   const { t } = useTranslate('setting');
-  const handleOk = async () => {
+  const { t: tc } = useCommonTranslation();
-    const values = await form.validateFields();
+
+  const fields: FormFieldConfig[] = [
+    {
+      name: 'model_type',
+      label: t('modelType'),
+      type: FormFieldType.Select,
+      required: true,
+      options: [
+        { label: 'chat', value: 'chat' },
+        { label: 'image2text', value: 'image2text' },
+      ],
+      defaultValue: 'chat',
+      validation: {
+        message: t('modelTypeMessage'),
+      },
+    },
+    {
+      name: 'llm_name',
+      label: t('modelID'),
+      type: FormFieldType.Text,
+      required: true,
+      placeholder: t('GoogleModelIDMessage'),
+      validation: {
+        message: t('GoogleModelIDMessage'),
+      },
+    },
+    {
+      name: 'google_project_id',
+      label: t('addGoogleProjectID'),
+      type: FormFieldType.Text,
+      required: true,
+      placeholder: t('GoogleProjectIDMessage'),
+      validation: {
+        message: t('GoogleProjectIDMessage'),
+      },
+    },
+    {
+      name: 'google_region',
+      label: t('addGoogleRegion'),
+      type: FormFieldType.Text,
+      required: true,
+      placeholder: t('GoogleRegionMessage'),
+      validation: {
+        message: t('GoogleRegionMessage'),
+      },
+    },
+    {
+      name: 'google_service_account_key',
+      label: t('addGoogleServiceAccountKey'),
+      type: FormFieldType.Text,
+      required: true,
+      placeholder: t('GoogleServiceAccountKeyMessage'),
+      validation: {
+        message: t('GoogleServiceAccountKeyMessage'),
+      },
+    },
+    {
+      name: 'max_tokens',
+      label: t('maxTokens'),
+      type: FormFieldType.Number,
+      required: true,
+      placeholder: t('maxTokensTip'),
+      validation: {
+        min: 0,
+        message: t('maxTokensMinMessage'),
+      },
+      customValidate: (value: any) => {
+        if (value === undefined || value === null || value === '') {
+          return t('maxTokensMessage');
+        }
+        if (value < 0) {
+          return t('maxTokensMinMessage');
+        }
+        return true;
+      },
+    },
+  ];
+
+  const handleOk = async (values?: FieldValues) => {
+    if (!values) return;
 
     const data = {
-      ...values,
       llm_factory: llmFactory,
+      model_type: values.model_type,
+      llm_name: values.llm_name,
+      google_project_id: values.google_project_id,
+      google_region: values.google_region,
+      google_service_account_key: values.google_service_account_key,
       max_tokens: values.max_tokens,
-    };
+    } as IAddLlmRequestBody;
 
-    onOk?.(data);
+    await onOk?.(data);
-  };
-
-  const handleKeyDown = async (e: React.KeyboardEvent) => {
-    if (e.key === 'Enter') {
-      await handleOk();
-    }
   };
 
   return (
     <Modal
       title={<LLMHeader name={llmFactory} />}
-      open={visible}
+      open={visible || false}
-      onOk={handleOk}
+      onOpenChange={(open) => !open && hideModal?.()}
-      onCancel={hideModal}
+      maskClosable={false}
-      okButtonProps={{ loading }}
+      footer={<div className="p-4"></div>}
     >
-      <Form form={form}>
+      <DynamicForm.Root
-        <Form.Item<FieldType>
+        fields={fields}
-          label={t('modelType')}
+        onSubmit={() => {
-          name="model_type"
+          // Form submission is handled by SavingButton
-          initialValue={'chat'}
+        }}
-          rules={[{ required: true, message: t('modelTypeMessage') }]}
+        defaultValues={
-        >
+          {
-          <Select placeholder={t('modelTypeMessage')}>
+            model_type: 'chat',
-            <Option value="chat">chat</Option>
+          } as FieldValues
-            <Option value="image2text">image2text</Option>
+        }
-          </Select>
+        labelClassName="font-normal"
-        </Form.Item>
+      >
-        <Form.Item<FieldType>
+        <div className="absolute bottom-0 right-0 left-0 flex items-center justify-end w-full gap-2 py-6 px-6">
-          label={t('modelID')}
+          <DynamicForm.CancelButton
-          name="llm_name"
+            handleCancel={() => {
-          rules={[{ required: true, message: t('GoogleModelIDMessage') }]}
+              hideModal?.();
-        >
+            }}
-          <Input
-            placeholder={t('GoogleModelIDMessage')}
-            onKeyDown={handleKeyDown}
           />
-        </Form.Item>
+          <DynamicForm.SavingButton
-        <Form.Item<FieldType>
+            submitLoading={loading || false}
-          label={t('addGoogleProjectID')}
+            buttonText={tc('ok')}
-          name="google_project_id"
+            submitFunc={(values: FieldValues) => {
-          rules={[{ required: true, message: t('GoogleProjectIDMessage') }]}
+              handleOk(values);
-        >
+            }}
-          <Input
-            placeholder={t('GoogleProjectIDMessage')}
-            onKeyDown={handleKeyDown}
           />
-        </Form.Item>
+        </div>
-        <Form.Item<FieldType>
+      </DynamicForm.Root>
-          label={t('addGoogleRegion')}
-          name="google_region"
-          rules={[{ required: true, message: t('GoogleRegionMessage') }]}
-        >
-          <Input
-            placeholder={t('GoogleRegionMessage')}
-            onKeyDown={handleKeyDown}
-          />
-        </Form.Item>
-        <Form.Item<FieldType>
-          label={t('addGoogleServiceAccountKey')}
-          name="google_service_account_key"
-          rules={[
-            { required: true, message: t('GoogleServiceAccountKeyMessage') },
-          ]}
-        >
-          <Input
-            placeholder={t('GoogleServiceAccountKeyMessage')}
-            onKeyDown={handleKeyDown}
-          />
-        </Form.Item>
-        <Form.Item<FieldType>
-          label={t('maxTokens')}
-          name="max_tokens"
-          rules={[
-            { required: true, message: t('maxTokensMessage') },
-            {
-              type: 'number',
-              message: t('maxTokensInvalidMessage'),
-            },
-            ({}) => ({
-              validator(_, value) {
-                if (value < 0) {
-                  return Promise.reject(new Error(t('maxTokensMinMessage')));
-                }
-                return Promise.resolve();
-              },
-            }),
-          ]}
-        >
-          <InputNumber
-            placeholder={t('maxTokensTip')}
-            style={{ width: '100%' }}
-          />
-        </Form.Item>
-      </Form>
     </Modal>
   );
 };

web/src/pages/user-setting/setting-model/modal/hunyuan-modal/index.tsx

@@ -1,16 +1,15 @@
-import { useTranslate } from '@/hooks/common-hooks';
+import {
+  DynamicForm,
+  FormFieldConfig,
+  FormFieldType,
+} from '@/components/dynamic-form';
+import { Modal } from '@/components/ui/modal/modal';
+import { useCommonTranslation, useTranslate } from '@/hooks/common-hooks';
 import { IModalProps } from '@/interfaces/common';
 import { IAddLlmRequestBody } from '@/interfaces/request/llm';
-import { Form, Input, Modal } from 'antd';
+import { FieldValues } from 'react-hook-form';
-import omit from 'lodash/omit';
 import { LLMHeader } from '../../components/llm-header';
 
-type FieldType = IAddLlmRequestBody & {
-  vision: boolean;
-  hunyuan_sid: string;
-  hunyuan_sk: string;
-};
-
 const HunyuanModal = ({
   visible,
   hideModal,
@@ -18,70 +17,73 @@ const HunyuanModal = ({
   loading,
   llmFactory,
 }: IModalProps<IAddLlmRequestBody> & { llmFactory: string }) => {
-  const [form] = Form.useForm<FieldType>();
-
   const { t } = useTranslate('setting');
+  const { t: tc } = useCommonTranslation();
 
-  const handleOk = async () => {
+  const fields: FormFieldConfig[] = [
-    const values = await form.validateFields();
+    {
-    const modelType =
+      name: 'hunyuan_sid',
-      values.model_type === 'chat' && values.vision
+      label: t('addHunyuanSID'),
-        ? 'image2text'
+      type: FormFieldType.Text,
-        : values.model_type;
+      required: true,
+      placeholder: t('HunyuanSIDMessage'),
+      validation: {
+        message: t('HunyuanSIDMessage'),
+      },
+    },
+    {
+      name: 'hunyuan_sk',
+      label: t('addHunyuanSK'),
+      type: FormFieldType.Text,
+      required: true,
+      placeholder: t('HunyuanSKMessage'),
+      validation: {
+        message: t('HunyuanSKMessage'),
+      },
+    },
+  ];
+
+  const handleOk = async (values?: FieldValues) => {
+    if (!values) return;
 
     const data = {
-      ...omit(values, ['vision']),
+      hunyuan_sid: values.hunyuan_sid as string,
-      model_type: modelType,
+      hunyuan_sk: values.hunyuan_sk as string,
       llm_factory: llmFactory,
-    };
+    } as unknown as IAddLlmRequestBody;
-    console.info(data);
 
-    onOk?.(data);
+    await onOk?.(data);
-  };
-
-  const handleKeyDown = async (e: React.KeyboardEvent) => {
-    if (e.key === 'Enter') {
-      await handleOk();
-    }
   };
 
   return (
     <Modal
       title={<LLMHeader name={llmFactory} />}
-      open={visible}
+      open={visible || false}
-      onOk={handleOk}
+      onOpenChange={(open) => !open && hideModal?.()}
-      onCancel={hideModal}
+      maskClosable={false}
-      okButtonProps={{ loading }}
+      footer={<div className="p-4"></div>}
-      confirmLoading={loading}
+      className="max-w-[600px]"
     >
-      <Form
+      <DynamicForm.Root
-        name="basic"
+        fields={fields}
-        style={{ maxWidth: 600 }}
+        onSubmit={() => {}}
-        autoComplete="off"
+        labelClassName="font-normal"
-        layout={'vertical'}
-        form={form}
       >
-        <Form.Item<FieldType>
+        <div className="absolute bottom-0 right-0 left-0 flex items-center justify-end w-full gap-2 py-6 px-6">
-          label={t('addHunyuanSID')}
+          <DynamicForm.CancelButton
-          name="hunyuan_sid"
+            handleCancel={() => {
-          rules={[{ required: true, message: t('HunyuanSIDMessage') }]}
+              hideModal?.();
-        >
+            }}
-          <Input
-            placeholder={t('HunyuanSIDMessage')}
-            onKeyDown={handleKeyDown}
           />
-        </Form.Item>
+          <DynamicForm.SavingButton
-        <Form.Item<FieldType>
+            submitLoading={loading || false}
-          label={t('addHunyuanSK')}
+            buttonText={tc('ok')}
-          name="hunyuan_sk"
+            submitFunc={(values: FieldValues) => {
-          rules={[{ required: true, message: t('HunyuanSKMessage') }]}
+              handleOk(values);
-        >
+            }}
-          <Input
-            placeholder={t('HunyuanSKMessage')}
-            onKeyDown={handleKeyDown}
           />
-        </Form.Item>
+        </div>
-      </Form>
+      </DynamicForm.Root>
     </Modal>
   );
 };

web/src/pages/user-setting/setting-model/modal/next-tencent-modal/index.tsx

@@ -1,135 +1,155 @@
-import { useTranslate } from '@/hooks/common-hooks';
+import {
+  DynamicForm,
+  FormFieldConfig,
+  FormFieldType,
+} from '@/components/dynamic-form';
+import { Modal } from '@/components/ui/modal/modal';
+import { useCommonTranslation, useTranslate } from '@/hooks/common-hooks';
 import { IModalProps } from '@/interfaces/common';
 import { IAddLlmRequestBody } from '@/interfaces/request/llm';
-import { Flex, Form, Input, Modal, Select, Space } from 'antd';
+import { FieldValues } from 'react-hook-form';
-import omit from 'lodash/omit';
 import { LLMHeader } from '../../components/llm-header';
 
-type FieldType = IAddLlmRequestBody & {
-  TencentCloud_sid: string;
-  TencentCloud_sk: string;
-};
-
-const { Option } = Select;
-
 const TencentCloudModal = ({
   visible,
   hideModal,
   onOk,
   loading,
   llmFactory,
-}: IModalProps<IAddLlmRequestBody> & { llmFactory: string }) => {
+}: IModalProps<Omit<IAddLlmRequestBody, 'max_tokens'>> & {
-  const [form] = Form.useForm<FieldType>();
+  llmFactory: string;
-
+}) => {
   const { t } = useTranslate('setting');
+  const { t: tc } = useCommonTranslation();
+
+  const fields: FormFieldConfig[] = [
+    {
+      name: 'model_type',
+      label: t('modelType'),
+      type: FormFieldType.Select,
+      required: true,
+      options: [{ label: 'speech2text', value: 'speech2text' }],
+      defaultValue: 'speech2text',
+      validation: {
+        message: t('modelTypeMessage'),
+      },
+    },
+    {
+      name: 'llm_name',
+      label: t('modelName'),
+      type: FormFieldType.Select,
+      required: true,
+      options: [
+        { label: '16k_zh', value: '16k_zh' },
+        { label: '16k_zh_large', value: '16k_zh_large' },
+        { label: '16k_multi_lang', value: '16k_multi_lang' },
+        { label: '16k_zh_dialect', value: '16k_zh_dialect' },
+        { label: '16k_en', value: '16k_en' },
+        { label: '16k_yue', value: '16k_yue' },
+        { label: '16k_zh-PY', value: '16k_zh-PY' },
+        { label: '16k_ja', value: '16k_ja' },
+        { label: '16k_ko', value: '16k_ko' },
+        { label: '16k_vi', value: '16k_vi' },
+        { label: '16k_ms', value: '16k_ms' },
+        { label: '16k_id', value: '16k_id' },
+        { label: '16k_fil', value: '16k_fil' },
+        { label: '16k_th', value: '16k_th' },
+        { label: '16k_pt', value: '16k_pt' },
+        { label: '16k_tr', value: '16k_tr' },
+        { label: '16k_ar', value: '16k_ar' },
+        { label: '16k_es', value: '16k_es' },
+        { label: '16k_hi', value: '16k_hi' },
+        { label: '16k_fr', value: '16k_fr' },
+        { label: '16k_zh_medical', value: '16k_zh_medical' },
+        { label: '16k_de', value: '16k_de' },
+      ],
+      defaultValue: '16k_zh',
+      validation: {
+        message: t('SparkModelNameMessage'),
+      },
+    },
+    {
+      name: 'TencentCloud_sid',
+      label: t('addTencentCloudSID'),
+      type: FormFieldType.Text,
+      required: true,
+      placeholder: t('TencentCloudSIDMessage'),
+      validation: {
+        message: t('TencentCloudSIDMessage'),
+      },
+    },
+    {
+      name: 'TencentCloud_sk',
+      label: t('addTencentCloudSK'),
+      type: FormFieldType.Text,
+      required: true,
+      placeholder: t('TencentCloudSKMessage'),
+      validation: {
+        message: t('TencentCloudSKMessage'),
+      },
+    },
+  ];
+
+  const handleOk = async (values?: FieldValues) => {
+    if (!values) return;
 
-  const handleOk = async () => {
-    const values = await form.validateFields();
     const modelType = values.model_type;
 
     const data = {
-      ...omit(values),
       model_type: modelType,
+      llm_name: values.llm_name as string,
+      TencentCloud_sid: values.TencentCloud_sid as string,
+      TencentCloud_sk: values.TencentCloud_sk as string,
       llm_factory: llmFactory,
-      max_tokens: 16000,
+    } as Omit<IAddLlmRequestBody, 'max_tokens'>;
-    };
-    console.info(data);
 
-    onOk?.(data);
+    await onOk?.(data);
-  };
-
-  const handleKeyDown = async (e: React.KeyboardEvent) => {
-    if (e.key === 'Enter') {
-      await handleOk();
-    }
   };
 
   return (
     <Modal
       title={<LLMHeader name={llmFactory} />}
-      open={visible}
+      open={visible || false}
-      onOk={handleOk}
+      onOpenChange={(open) => !open && hideModal?.()}
-      onCancel={hideModal}
+      maskClosable={false}
-      okButtonProps={{ loading }}
+      footer={null}
-      footer={(originNode: React.ReactNode) => {
-        return (
-          <Flex justify={'space-between'}>
-            <a
-              href={`https://cloud.tencent.com/document/api/1093/37823`}
-              target="_blank"
-              rel="noreferrer"
-            >
-              {t('TencentCloudLink')}
-            </a>
-            <Space>{originNode}</Space>
-          </Flex>
-        );
-      }}
-      confirmLoading={loading}
     >
-      <Form>
+      <DynamicForm.Root
-        <Form.Item<FieldType>
+        fields={fields}
-          label={t('modelType')}
+        onSubmit={() => {}}
-          name="model_type"
+        defaultValues={
-          initialValue={'speech2text'}
+          {
-          rules={[{ required: true, message: t('modelTypeMessage') }]}
+            model_type: 'speech2text',
-        >
+            llm_name: '16k_zh',
-          <Select placeholder={t('modelTypeMessage')}>
+          } as FieldValues
-            <Option value="speech2text">speech2text</Option>
+        }
-          </Select>
+        labelClassName="font-normal"
-        </Form.Item>
+      >
-        <Form.Item<FieldType>
+        <div className="absolute bottom-0 right-0 left-0 flex items-center justify-between w-full py-6 px-6">
-          label={t('modelName')}
+          <a
-          name="llm_name"
+            href="https://cloud.tencent.com/document/api/1093/37823"
-          initialValue={'16k_zh'}
+            target="_blank"
-          rules={[{ required: true, message: t('SparkModelNameMessage') }]}
+            rel="noreferrer"
-        >
+            className="text-primary hover:underline"
-          <Select placeholder={t('modelTypeMessage')}>
+          >
-            <Option value="16k_zh">16k_zh</Option>
+            {t('TencentCloudLink')}
-            <Option value="16k_zh_large">16k_zh_large</Option>
+          </a>
-            <Option value="16k_multi_lang">16k_multi_lang</Option>
+          <div className="flex gap-2">
-            <Option value="16k_zh_dialect">16k_zh_dialect</Option>
+            <DynamicForm.CancelButton
-            <Option value="16k_en">16k_en</Option>
+              handleCancel={() => {
-            <Option value="16k_yue">16k_yue</Option>
+                hideModal?.();
-            <Option value="16k_zh-PY">16k_zh-PY</Option>
+              }}
-            <Option value="16k_ja">16k_ja</Option>
+            />
-            <Option value="16k_ko">16k_ko</Option>
+            <DynamicForm.SavingButton
-            <Option value="16k_vi">16k_vi</Option>
+              submitLoading={loading || false}
-            <Option value="16k_ms">16k_ms</Option>
+              buttonText={tc('ok')}
-            <Option value="16k_id">16k_id</Option>
+              submitFunc={(values: FieldValues) => {
-            <Option value="16k_fil">16k_fil</Option>
+                handleOk(values);
-            <Option value="16k_th">16k_th</Option>
+              }}
-            <Option value="16k_pt">16k_pt</Option>
+            />
-            <Option value="16k_tr">16k_tr</Option>
+          </div>
-            <Option value="16k_ar">16k_ar</Option>
+        </div>
-            <Option value="16k_es">16k_es</Option>
+      </DynamicForm.Root>
-            <Option value="16k_hi">16k_hi</Option>
-            <Option value="16k_fr">16k_fr</Option>
-            <Option value="16k_zh_medical">16k_zh_medical</Option>
-            <Option value="16k_de">16k_de</Option>
-          </Select>
-        </Form.Item>
-        <Form.Item<FieldType>
-          label={t('addTencentCloudSID')}
-          name="TencentCloud_sid"
-          rules={[{ required: true, message: t('TencentCloudSIDMessage') }]}
-        >
-          <Input
-            placeholder={t('TencentCloudSIDMessage')}
-            onKeyDown={handleKeyDown}
-          />
-        </Form.Item>
-        <Form.Item<FieldType>
-          label={t('addTencentCloudSK')}
-          name="TencentCloud_sk"
-          rules={[{ required: true, message: t('TencentCloudSKMessage') }]}
-        >
-          <Input
-            placeholder={t('TencentCloudSKMessage')}
-            onKeyDown={handleKeyDown}
-          />
-        </Form.Item>
-      </Form>
     </Modal>
   );
 };

web/src/pages/user-setting/setting-model/modal/spark-modal/index.tsx

@@ -1,20 +1,16 @@
-import { useTranslate } from '@/hooks/common-hooks';
+import {
+  DynamicForm,
+  FormFieldConfig,
+  FormFieldType,
+} from '@/components/dynamic-form';
+import { Modal } from '@/components/ui/modal/modal';
+import { useCommonTranslation, useTranslate } from '@/hooks/common-hooks';
 import { IModalProps } from '@/interfaces/common';
 import { IAddLlmRequestBody } from '@/interfaces/request/llm';
-import { Form, Input, InputNumber, Modal, Select } from 'antd';
 import omit from 'lodash/omit';
+import { FieldValues } from 'react-hook-form';
 import { LLMHeader } from '../../components/llm-header';
 
-type FieldType = IAddLlmRequestBody & {
-  vision: boolean;
-  spark_api_password: string;
-  spark_app_id: string;
-  spark_api_secret: string;
-  spark_api_key: string;
-};
-
-const { Option } = Select;
-
 const SparkModal = ({
   visible,
   hideModal,
@@ -22,12 +18,102 @@ const SparkModal = ({
   loading,
   llmFactory,
 }: IModalProps<IAddLlmRequestBody> & { llmFactory: string }) => {
-  const [form] = Form.useForm<FieldType>();
-
   const { t } = useTranslate('setting');
+  const { t: tc } = useCommonTranslation();
+
+  const fields: FormFieldConfig[] = [
+    {
+      name: 'model_type',
+      label: t('modelType'),
+      type: FormFieldType.Select,
+      required: true,
+      options: [
+        { label: 'chat', value: 'chat' },
+        { label: 'tts', value: 'tts' },
+      ],
+      defaultValue: 'chat',
+      validation: {
+        message: t('modelTypeMessage'),
+      },
+    },
+    {
+      name: 'llm_name',
+      label: t('modelName'),
+      type: FormFieldType.Text,
+      required: true,
+      placeholder: t('modelNameMessage'),
+      validation: {
+        message: t('SparkModelNameMessage'),
+      },
+    },
+    {
+      name: 'spark_api_password',
+      label: t('addSparkAPIPassword'),
+      type: FormFieldType.Text,
+      required: true,
+      placeholder: t('SparkAPIPasswordMessage'),
+      validation: {
+        message: t('SparkAPIPasswordMessage'),
+      },
+    },
+    {
+      name: 'spark_app_id',
+      label: t('addSparkAPPID'),
+      type: FormFieldType.Text,
+      required: true,
+      placeholder: t('SparkAPPIDMessage'),
+      validation: {
+        message: t('SparkAPPIDMessage'),
+      },
+      dependencies: ['model_type'],
+      shouldRender: (formValues: any) => {
+        return formValues?.model_type === 'tts';
+      },
+    },
+    {
+      name: 'spark_api_secret',
+      label: t('addSparkAPISecret'),
+      type: FormFieldType.Text,
+      required: true,
+      placeholder: t('SparkAPISecretMessage'),
+      validation: {
+        message: t('SparkAPISecretMessage'),
+      },
+      dependencies: ['model_type'],
+      shouldRender: (formValues: any) => {
+        return formValues?.model_type === 'tts';
+      },
+    },
+    {
+      name: 'spark_api_key',
+      label: t('addSparkAPIKey'),
+      type: FormFieldType.Text,
+      required: true,
+      placeholder: t('SparkAPIKeyMessage'),
+      validation: {
+        message: t('SparkAPIKeyMessage'),
+      },
+      dependencies: ['model_type'],
+      shouldRender: (formValues: any) => {
+        return formValues?.model_type === 'tts';
+      },
+    },
+    {
+      name: 'max_tokens',
+      label: t('maxTokens'),
+      type: FormFieldType.Number,
+      required: true,
+      placeholder: t('maxTokensTip'),
+      validation: {
+        min: 0,
+        message: t('maxTokensInvalidMessage'),
+      },
+    },
+  ];
+
+  const handleOk = async (values?: FieldValues) => {
+    if (!values) return;
 
-  const handleOk = async () => {
-    const values = await form.validateFields();
     const modelType =
       values.model_type === 'chat' && values.vision
         ? 'image2text'
@@ -39,124 +125,46 @@ const SparkModal = ({
       llm_factory: llmFactory,
       max_tokens: values.max_tokens,
     };
-    console.info(data);
 
-    onOk?.(data);
+    await onOk?.(data as IAddLlmRequestBody);
-  };
-
-  const handleKeyDown = async (e: React.KeyboardEvent) => {
-    if (e.key === 'Enter') {
-      await handleOk();
-    }
   };
 
   return (
     <Modal
       title={<LLMHeader name={llmFactory} />}
-      open={visible}
+      open={visible || false}
-      onOk={handleOk}
+      onOpenChange={(open) => !open && hideModal?.()}
-      onCancel={hideModal}
+      maskClosable={false}
-      okButtonProps={{ loading }}
+      footer={<div className="p-4"></div>}
-      confirmLoading={loading}
     >
-      <Form>
+      <DynamicForm.Root
-        <Form.Item<FieldType>
+        fields={fields}
-          label={t('modelType')}
+        onSubmit={(data) => {
-          name="model_type"
+          console.log(data);
-          initialValue={'chat'}
+        }}
-          rules={[{ required: true, message: t('modelTypeMessage') }]}
+        defaultValues={
-        >
+          {
-          <Select placeholder={t('modelTypeMessage')}>
+            model_type: 'chat',
-            <Option value="chat">chat</Option>
+            vision: false,
-            <Option value="tts">tts</Option>
+          } as FieldValues
-          </Select>
+        }
-        </Form.Item>
+        labelClassName="font-normal"
-        <Form.Item<FieldType>
+      >
-          label={t('modelName')}
+        <div className="absolute bottom-0 right-0 left-0 flex items-center justify-end w-full gap-2 py-6 px-6">
-          name="llm_name"
+          <DynamicForm.CancelButton
-          rules={[{ required: true, message: t('SparkModelNameMessage') }]}
+            handleCancel={() => {
-        >
+              hideModal?.();
-          <Input
+            }}
-            placeholder={t('modelNameMessage')}
-            onKeyDown={handleKeyDown}
           />
-        </Form.Item>
+          <DynamicForm.SavingButton
-        <Form.Item<FieldType>
+            submitLoading={loading || false}
-          label={t('addSparkAPIPassword')}
+            buttonText={tc('ok')}
-          name="spark_api_password"
+            submitFunc={(values: FieldValues) => {
-          rules={[{ required: true, message: t('SparkAPIPasswordMessage') }]}
+              handleOk(values);
-        >
+            }}
-          <Input
-            placeholder={t('SparkAPIPasswordMessage')}
-            onKeyDown={handleKeyDown}
           />
-        </Form.Item>
+        </div>
-        <Form.Item noStyle dependencies={['model_type']}>
+      </DynamicForm.Root>
-          {({ getFieldValue }) =>
-            getFieldValue('model_type') === 'tts' && (
-              <Form.Item<FieldType>
-                label={t('addSparkAPPID')}
-                name="spark_app_id"
-                rules={[{ required: true, message: t('SparkAPPIDMessage') }]}
-              >
-                <Input placeholder={t('SparkAPPIDMessage')} />
-              </Form.Item>
-            )
-          }
-        </Form.Item>
-        <Form.Item noStyle dependencies={['model_type']}>
-          {({ getFieldValue }) =>
-            getFieldValue('model_type') === 'tts' && (
-              <Form.Item<FieldType>
-                label={t('addSparkAPISecret')}
-                name="spark_api_secret"
-                rules={[
-                  { required: true, message: t('SparkAPISecretMessage') },
-                ]}
-              >
-                <Input placeholder={t('SparkAPISecretMessage')} />
-              </Form.Item>
-            )
-          }
-        </Form.Item>
-        <Form.Item noStyle dependencies={['model_type']}>
-          {({ getFieldValue }) =>
-            getFieldValue('model_type') === 'tts' && (
-              <Form.Item<FieldType>
-                label={t('addSparkAPIKey')}
-                name="spark_api_key"
-                rules={[{ required: true, message: t('SparkAPIKeyMessage') }]}
-              >
-                <Input placeholder={t('SparkAPIKeyMessage')} />
-              </Form.Item>
-            )
-          }
-        </Form.Item>
-        <Form.Item<FieldType>
-          label={t('maxTokens')}
-          name="max_tokens"
-          rules={[
-            { required: true, message: t('maxTokensMessage') },
-            {
-              type: 'number',
-              message: t('maxTokensInvalidMessage'),
-            },
-            ({}) => ({
-              validator(_, value) {
-                if (value < 0) {
-                  return Promise.reject(new Error(t('maxTokensMinMessage')));
-                }
-                return Promise.resolve();
-              },
-            }),
-          ]}
-        >
-          <InputNumber
-            placeholder={t('maxTokensTip')}
-            style={{ width: '100%' }}
-          />
-        </Form.Item>
-      </Form>
     </Modal>
   );
 };

web/src/pages/user-setting/setting-model/modal/system-model-setting-modal/index.tsx

@@ -1,132 +0,0 @@
-import { IModalManagerChildrenProps } from '@/components/modal-manager';
-import { LlmModelType } from '@/constants/knowledge';
-import { useTranslate } from '@/hooks/common-hooks';
-import {
-  ISystemModelSettingSavingParams,
-  useComposeLlmOptionsByModelTypes,
-} from '@/hooks/use-llm-request';
-import { Form, Modal, Select } from 'antd';
-import { useEffect } from 'react';
-import { useFetchSystemModelSettingOnMount } from '../../hooks';
-
-interface IProps extends Omit<IModalManagerChildrenProps, 'showModal'> {
-  loading: boolean;
-  onOk: (
-    payload: Omit<ISystemModelSettingSavingParams, 'tenant_id' | 'name'>,
-  ) => void;
-}
-
-const SystemModelSettingModal = ({
-  visible,
-  hideModal,
-  onOk,
-  loading,
-}: IProps) => {
-  const [form] = Form.useForm();
-  const { systemSetting: initialValues, allOptions } =
-    useFetchSystemModelSettingOnMount();
-  const { t } = useTranslate('setting');
-
-  const handleOk = async () => {
-    const values = await form.validateFields();
-    onOk({
-      ...values,
-      asr_id: values.asr_id ?? '',
-      embd_id: values.embd_id ?? '',
-      img2txt_id: values.img2txt_id ?? '',
-      llm_id: values.llm_id ?? '',
-    });
-  };
-
-  useEffect(() => {
-    if (visible) {
-      form.setFieldsValue(initialValues);
-    }
-  }, [form, initialValues, visible]);
-
-  const onFormLayoutChange = () => {};
-
-  const modelOptions = useComposeLlmOptionsByModelTypes([
-    LlmModelType.Chat,
-    LlmModelType.Image2text,
-  ]);
-
-  return (
-    <Modal
-      title={t('systemModelSettings')}
-      open={visible}
-      onOk={handleOk}
-      onCancel={hideModal}
-      okButtonProps={{ loading }}
-      confirmLoading={loading}
-    >
-      <Form form={form} onValuesChange={onFormLayoutChange} layout={'vertical'}>
-        <Form.Item
-          label={t('chatModel')}
-          name="llm_id"
-          tooltip={t('chatModelTip')}
-        >
-          <Select options={modelOptions} allowClear showSearch />
-        </Form.Item>
-        <Form.Item
-          label={t('embeddingModel')}
-          name="embd_id"
-          tooltip={t('embeddingModelTip')}
-        >
-          <Select
-            options={allOptions[LlmModelType.Embedding]}
-            allowClear
-            showSearch
-          />
-        </Form.Item>
-        <Form.Item
-          label={t('img2txtModel')}
-          name="img2txt_id"
-          tooltip={t('img2txtModelTip')}
-        >
-          <Select
-            options={allOptions[LlmModelType.Image2text]}
-            allowClear
-            showSearch
-          />
-        </Form.Item>
-
-        <Form.Item
-          label={t('sequence2txtModel')}
-          name="asr_id"
-          tooltip={t('sequence2txtModelTip')}
-        >
-          <Select
-            options={allOptions[LlmModelType.Speech2text]}
-            allowClear
-            showSearch
-          />
-        </Form.Item>
-        <Form.Item
-          label={t('rerankModel')}
-          name="rerank_id"
-          tooltip={t('rerankModelTip')}
-        >
-          <Select
-            options={allOptions[LlmModelType.Rerank]}
-            allowClear
-            showSearch
-          />
-        </Form.Item>
-        <Form.Item
-          label={t('ttsModel')}
-          name="tts_id"
-          tooltip={t('ttsModelTip')}
-        >
-          <Select
-            options={allOptions[LlmModelType.TTS]}
-            allowClear
-            showSearch
-          />
-        </Form.Item>
-      </Form>
-    </Modal>
-  );
-};
-
-export default SystemModelSettingModal;