Refactor: Refactor FishAudioModal and BedrockModal using shadcn. #1036 (#12449)

### What problem does this PR solve?

Refactor: Refactor FishAudioModal and BedrockModal using shadcn. #1036

### Type of change

- [x] Refactoring

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

@@ -1,16 +1,17 @@
-import { useTranslate } from '@/hooks/common-hooks';
+import { SelectWithSearch } from '@/components/originui/select-with-search';
+import { RAGFlowFormItem } from '@/components/ragflow-form';
+import { ButtonLoading } from '@/components/ui/button';
+import { Form } from '@/components/ui/form';
+import { Input } from '@/components/ui/input';
+import { Modal } from '@/components/ui/modal/modal';
+import { Segmented } from '@/components/ui/segmented';
+import { useCommonTranslation, useTranslate } from '@/hooks/common-hooks';
 import { IModalProps } from '@/interfaces/common';
 import { IAddLlmRequestBody } from '@/interfaces/request/llm';
-import {
-  Form,
-  Input,
-  InputNumber,
-  Modal,
-  Segmented,
-  Select,
-  Typography,
-} from 'antd';
-import { useMemo, useState } from 'react';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useMemo } from 'react';
+import { useForm, useWatch } from 'react-hook-form';
+import { z } from 'zod';
 import { LLMHeader } from '../../components/llm-header';
 import { BedrockRegionList } from '../../constant';
 
@@ -22,30 +23,84 @@ type FieldType = IAddLlmRequestBody & {
   aws_role_arn?: string;
 };
 
-const { Option } = Select;
-const { Text } = Typography;
-
 const BedrockModal = ({
-  visible,
+  visible = false,
   hideModal,
   onOk,
   loading,
   llmFactory,
 }: IModalProps<IAddLlmRequestBody> & { llmFactory: string }) => {
-  const [form] = Form.useForm<FieldType>();
-  const [authMode, setAuthMode] =
-    useState<FieldType['auth_mode']>('access_key_secret');
-
   const { t } = useTranslate('setting');
+  const { t: ct } = useCommonTranslation();
+
+  const FormSchema = z
+    .object({
+      model_type: z.enum(['chat', 'embedding'], {
+        required_error: t('modelTypeMessage'),
+      }),
+      llm_name: z.string().min(1, { message: t('bedrockModelNameMessage') }),
+      bedrock_region: z.string().min(1, { message: t('bedrockRegionMessage') }),
+      max_tokens: z
+        .number({
+          required_error: t('maxTokensMessage'),
+          invalid_type_error: t('maxTokensInvalidMessage'),
+        })
+        .nonnegative({ message: t('maxTokensMinMessage') }),
+      auth_mode: z
+        .enum(['access_key_secret', 'iam_role', 'assume_role'])
+        .default('access_key_secret'),
+      bedrock_ak: z.string().optional(),
+      bedrock_sk: z.string().optional(),
+      aws_role_arn: z.string().optional(),
+    })
+    .superRefine((data, ctx) => {
+      if (data.auth_mode === 'access_key_secret') {
+        if (!data.bedrock_ak || data.bedrock_ak.trim() === '') {
+          ctx.addIssue({
+            code: z.ZodIssueCode.custom,
+            message: t('bedrockAKMessage'),
+            path: ['bedrock_ak'],
+          });
+        }
+        if (!data.bedrock_sk || data.bedrock_sk.trim() === '') {
+          ctx.addIssue({
+            code: z.ZodIssueCode.custom,
+            message: t('bedrockSKMessage'),
+            path: ['bedrock_sk'],
+          });
+        }
+      }
+
+      if (data.auth_mode === 'iam_role') {
+        if (!data.aws_role_arn || data.aws_role_arn.trim() === '') {
+          ctx.addIssue({
+            code: z.ZodIssueCode.custom,
+            message: t('awsRoleArnMessage'),
+            path: ['aws_role_arn'],
+          });
+        }
+      }
+    });
+
+  const form = useForm<FieldType>({
+    resolver: zodResolver(FormSchema),
+    defaultValues: {
+      model_type: 'chat',
+      auth_mode: 'access_key_secret',
+    },
+  });
+
+  const authMode = useWatch({
+    control: form.control,
+    name: 'auth_mode',
+  });
+
   const options = useMemo(
     () => BedrockRegionList.map((x) => ({ value: x, label: t(x) })),
     [t],
   );
 
-  const handleOk = async () => {
-    const values = await form.validateFields();
-
-    // Only submit fields related to the active auth mode.
+  const handleOk = async (values: FieldType) => {
     const cleanedValues: Record<string, any> = { ...values };
 
     const fieldsByMode: Record<string, string[]> = {
@@ -75,145 +130,140 @@ const BedrockModal = ({
 
   return (
     <Modal
-      title={
-        <div>
-          <LLMHeader name={llmFactory} />
+      title={<LLMHeader name={llmFactory} />}
+      open={visible}
+      onOpenChange={(open) => !open && hideModal?.()}
+      maskClosable={false}
+      footer={
+        <div className="flex justify-end gap-2">
+          <button
+            type="button"
+            onClick={hideModal}
+            className="px-2 py-1 border border-border-button rounded-md hover:bg-bg-card"
+          >
+            {t('cancel')}
+          </button>
+          <ButtonLoading type="submit" form="bedrock-form" loading={loading}>
+            {ct('ok')}
+          </ButtonLoading>
         </div>
       }
-      open={visible}
-      onOk={handleOk}
-      onCancel={hideModal}
-      okButtonProps={{ loading }}
     >
-      <Form
-        name="basic"
-        style={{ maxWidth: 600 }}
-        autoComplete="off"
-        layout={'vertical'}
-        form={form}
-      >
-        <Form.Item<FieldType>
-          label={t('modelType')}
-          name="model_type"
-          initialValue={'chat'}
-          rules={[{ required: true, message: t('modelTypeMessage') }]}
+      <Form {...form}>
+        <form
+          onSubmit={form.handleSubmit(handleOk)}
+          className="space-y-6"
+          id="bedrock-form"
         >
-          <Select placeholder={t('modelTypeMessage')}>
-            <Option value="chat">chat</Option>
-            <Option value="embedding">embedding</Option>
-          </Select>
-        </Form.Item>
-        <Form.Item<FieldType>
-          label={t('modelName')}
-          name="llm_name"
-          rules={[{ required: true, message: t('bedrockModelNameMessage') }]}
-        >
-          <Input placeholder={t('bedrockModelNameMessage')} />
-        </Form.Item>
+          <RAGFlowFormItem name="model_type" label={t('modelType')} required>
+            {(field) => (
+              <SelectWithSearch
+                value={field.value}
+                onChange={field.onChange}
+                options={[
+                  { label: 'chat', value: 'chat' },
+                  { label: 'embedding', value: 'embedding' },
+                ]}
+                placeholder={t('modelTypeMessage')}
+              />
+            )}
+          </RAGFlowFormItem>
 
-        {/* AWS Credential Mode Switch (AK/SK section only) */}
-        <Form.Item>
-          <Segmented
-            block
-            value={authMode}
-            onChange={(v) => {
-              const next = v as FieldType['auth_mode'];
-              setAuthMode(next);
-              // Clear non-active fields so they won't be validated/submitted by accident.
-              if (next !== 'access_key_secret') {
-                form.setFieldsValue({ bedrock_ak: '', bedrock_sk: '' } as any);
-              }
-              if (next !== 'iam_role') {
-                form.setFieldsValue({ aws_role_arn: '' } as any);
-              }
-              if (next !== 'assume_role') {
-                form.setFieldsValue({ role_arn: '' } as any);
-              }
-            }}
-            options={[
-              {
-                label: t('awsAuthModeAccessKeySecret'),
-                value: 'access_key_secret',
-              },
-              { label: t('awsAuthModeIamRole'), value: 'iam_role' },
-              { label: t('awsAuthModeAssumeRole'), value: 'assume_role' },
-            ]}
-          />
-        </Form.Item>
+          <RAGFlowFormItem name="llm_name" label={t('modelName')} required>
+            <Input placeholder={t('bedrockModelNameMessage')} />
+          </RAGFlowFormItem>
 
-        {authMode === 'access_key_secret' && (
-          <>
-            <Form.Item<FieldType>
-              label={t('awsAccessKeyId')}
-              name="bedrock_ak"
-              rules={[{ required: true, message: t('bedrockAKMessage') }]}
+          <div className="mb-4">
+            <RAGFlowFormItem name="auth_mode">
+              {(field) => (
+                <Segmented
+                  value={field.value}
+                  onChange={(value) => {
+                    // Clear non-active fields so they won't be validated/submitted by accident.
+                    if (value !== 'access_key_secret') {
+                      form.setValue('bedrock_ak', '');
+                      form.setValue('bedrock_sk', '');
+                    }
+                    if (value !== 'iam_role') {
+                      form.setValue('aws_role_arn', '');
+                    }
+                    field.onChange(value);
+                  }}
+                  options={[
+                    {
+                      label: t('awsAuthModeAccessKeySecret'),
+                      value: 'access_key_secret',
+                    },
+                    { label: t('awsAuthModeIamRole'), value: 'iam_role' },
+                    { label: t('awsAuthModeAssumeRole'), value: 'assume_role' },
+                  ]}
+                />
+              )}
+            </RAGFlowFormItem>
+          </div>
+
+          {authMode === 'access_key_secret' && (
+            <>
+              <RAGFlowFormItem
+                name="bedrock_ak"
+                label={t('awsAccessKeyId')}
+                required
+              >
+                <Input placeholder={t('bedrockAKMessage')} />
+              </RAGFlowFormItem>
+              <RAGFlowFormItem
+                name="bedrock_sk"
+                label={t('awsSecretAccessKey')}
+                required
+              >
+                <Input placeholder={t('bedrockSKMessage')} />
+              </RAGFlowFormItem>
+            </>
+          )}
+
+          {authMode === 'iam_role' && (
+            <RAGFlowFormItem
+              name="aws_role_arn"
+              label={t('awsRoleArn')}
+              required
             >
-              <Input placeholder={t('bedrockAKMessage')} />
-            </Form.Item>
-            <Form.Item<FieldType>
-              label={t('awsSecretAccessKey')}
-              name="bedrock_sk"
-              rules={[{ required: true, message: t('bedrockSKMessage') }]}
-            >
-              <Input placeholder={t('bedrockSKMessage')} />
-            </Form.Item>
-          </>
-        )}
+              <Input placeholder={t('awsRoleArnMessage')} />
+            </RAGFlowFormItem>
+          )}
 
-        {authMode === 'iam_role' && (
-          <Form.Item<FieldType>
-            label={t('awsRoleArn')}
-            name="aws_role_arn"
-            rules={[{ required: true, message: t('awsRoleArnMessage') }]}
+          {authMode === 'assume_role' && (
+            <div className="text-sm text-text-secondary mt-2 mb-4">
+              {t('awsAssumeRoleTip')}
+            </div>
+          )}
+
+          <RAGFlowFormItem
+            name="bedrock_region"
+            label={t('bedrockRegion')}
+            required
           >
-            <Input placeholder={t('awsRoleArnMessage')} />
-          </Form.Item>
-        )}
+            {(field) => (
+              <SelectWithSearch
+                value={field.value}
+                onChange={field.onChange}
+                options={options}
+                placeholder={t('bedrockRegionMessage')}
+                allowClear
+              />
+            )}
+          </RAGFlowFormItem>
 
-        {authMode === 'assume_role' && (
-          <Form.Item
-            style={{ marginTop: -8, marginBottom: 16 }}
-            // keep layout consistent with other modes
-          >
-            <Text type="secondary">{t('awsAssumeRoleTip')}</Text>
-          </Form.Item>
-        )}
-
-        <Form.Item<FieldType>
-          label={t('bedrockRegion')}
-          name="bedrock_region"
-          rules={[{ required: true, message: t('bedrockRegionMessage') }]}
-        >
-          <Select
-            placeholder={t('bedrockRegionMessage')}
-            options={options}
-            allowClear
-          ></Select>
-        </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>
+          <RAGFlowFormItem name="max_tokens" label={t('maxTokens')} required>
+            {(field) => (
+              <Input
+                type="number"
+                placeholder={t('maxTokensTip')}
+                value={field.value}
+                onChange={(e) => field.onChange(Number(e.target.value))}
+              />
+            )}
+          </RAGFlowFormItem>
+        </form>
       </Form>
     </Modal>
   );

web/src/pages/user-setting/setting-model/modal/fish-audio-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 { Flex, Form, Input, InputNumber, Modal, Select, Space } from 'antd';
-import omit from 'lodash/omit';
+import { FieldValues } from 'react-hook-form';
 import { LLMHeader } from '../../components/llm-header';
 
-type FieldType = IAddLlmRequestBody & {
-  fish_audio_ak: string;
-  fish_audio_refid: string;
-};
-
-const { Option } = Select;
-
 const FishAudioModal = ({
   visible,
   hideModal,
@@ -19,107 +17,106 @@ const FishAudioModal = ({
   loading,
   llmFactory,
 }: IModalProps<IAddLlmRequestBody> & { llmFactory: string }) => {
-  const [form] = Form.useForm<FieldType>();
-
   const { t } = useTranslate('setting');
+  const { t: tc } = useCommonTranslation();
 
-  const handleOk = async () => {
-    const values = await form.validateFields();
-    const modelType = values.model_type;
+  const fields: FormFieldConfig[] = [
+    {
+      name: 'model_type',
+      label: t('modelType'),
+      type: FormFieldType.Select,
+      required: true,
+      options: [{ label: 'tts', value: 'tts' }],
+      defaultValue: 'tts',
+      validation: { message: t('modelTypeMessage') },
+    },
+    {
+      name: 'llm_name',
+      label: t('modelName'),
+      type: FormFieldType.Text,
+      required: true,
+      placeholder: t('FishAudioModelNameMessage'),
+      validation: { message: t('FishAudioModelNameMessage') },
+    },
+    {
+      name: 'fish_audio_ak',
+      label: t('addFishAudioAK'),
+      type: FormFieldType.Text,
+      required: true,
+      placeholder: t('FishAudioAKMessage'),
+      validation: { message: t('FishAudioAKMessage') },
+    },
+    {
+      name: 'fish_audio_refid',
+      label: t('addFishAudioRefID'),
+      type: FormFieldType.Text,
+      required: true,
+      placeholder: t('FishAudioRefIDMessage'),
+      validation: { message: t('FishAudioRefIDMessage') },
+    },
+    {
+      name: 'max_tokens',
+      label: t('maxTokens'),
+      type: FormFieldType.Number,
+      required: true,
+      placeholder: t('maxTokensTip'),
+      validation: {
+        min: 0,
+        message: t('maxTokensInvalidMessage'),
+      },
+    },
+  ];
 
-    const data = {
-      ...omit(values),
-      model_type: modelType,
+  const handleOk = async (values?: FieldValues) => {
+    if (!values) return;
+
+    const data: Record<string, any> = {
       llm_factory: llmFactory,
-      max_tokens: values.max_tokens,
+      llm_name: values.llm_name as string,
+      model_type: values.model_type,
+      fish_audio_ak: values.fish_audio_ak,
+      fish_audio_refid: values.fish_audio_refid,
+      max_tokens: values.max_tokens as number,
     };
-    console.info(data);
 
-    onOk?.(data);
+    console.info(data);
+    await onOk?.(data as IAddLlmRequestBody);
   };
 
   return (
     <Modal
       title={<LLMHeader name={llmFactory} />}
-      open={visible}
-      onOk={handleOk}
-      onCancel={hideModal}
-      okButtonProps={{ loading }}
-      footer={(originNode: React.ReactNode) => {
-        return (
-          <Flex justify={'space-between'}>
-            <a href={`https://fish.audio`} target="_blank" rel="noreferrer">
-              {t('FishAudioLink')}
-            </a>
-            <Space>{originNode}</Space>
-          </Flex>
-        );
-      }}
-      confirmLoading={loading}
+      open={visible || false}
+      onOpenChange={(open) => !open && hideModal?.()}
+      maskClosable={false}
+      footerClassName="py-1"
+      footer={<div className="py-0"></div>}
     >
-      <Form
-        name="basic"
-        style={{ maxWidth: 600 }}
-        autoComplete="off"
-        layout={'vertical'}
-        form={form}
+      <DynamicForm.Root
+        fields={fields}
+        onSubmit={(data) => console.log(data)}
+        defaultValues={{ model_type: 'tts' }}
+        labelClassName="font-normal"
       >
-        <Form.Item<FieldType>
-          label={t('modelType')}
-          name="model_type"
-          initialValue={'tts'}
-          rules={[{ required: true, message: t('modelTypeMessage') }]}
-        >
-          <Select placeholder={t('modelTypeMessage')}>
-            <Option value="tts">tts</Option>
-          </Select>
-        </Form.Item>
-        <Form.Item<FieldType>
-          label={t('modelName')}
-          name="llm_name"
-          rules={[{ required: true, message: t('FishAudioModelNameMessage') }]}
-        >
-          <Input placeholder={t('FishAudioModelNameMessage')} />
-        </Form.Item>
-        <Form.Item<FieldType>
-          label={t('addFishAudioAK')}
-          name="fish_audio_ak"
-          rules={[{ required: true, message: t('FishAudioAKMessage') }]}
-        >
-          <Input placeholder={t('FishAudioAKMessage')} />
-        </Form.Item>
-        <Form.Item<FieldType>
-          label={t('addFishAudioRefID')}
-          name="fish_audio_refid"
-          rules={[{ required: true, message: t('FishAudioRefIDMessage') }]}
-        >
-          <Input placeholder={t('FishAudioRefIDMessage')} />
-        </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>
+        <div className="flex items-center justify-between w-full">
+          <a
+            href="https://fish.audio"
+            target="_blank"
+            rel="noreferrer"
+            className="text-sm text-text-secondary hover:text-primary"
+          >
+            {t('FishAudioLink')}
+          </a>
+          <div className="flex gap-2">
+            <DynamicForm.CancelButton handleCancel={() => hideModal?.()} />
+            <DynamicForm.SavingButton
+              submitLoading={loading || false}
+              buttonText={tc('ok')}
+              submitFunc={(values: FieldValues) => handleOk(values)}
+            />
+          </div>
+        </div>
+      </DynamicForm.Root>
     </Modal>
   );
 };