mirror of
https://github.com/infiniflow/ragflow.git
synced 2026-01-19 11:45:10 +08:00
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
This commit is contained in:
balibabu
GitHub
@ -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 values = await form.validateFields();
|
||||
const { t: tc } = useCommonTranslation();
|
||||
|
||||
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);
|
||||
};
|
||||
|
||||
const handleKeyDown = async (e: React.KeyboardEvent) => {
|
||||
if (e.key === 'Enter') {
|
||||
await handleOk();
|
||||
}
|
||||
await onOk?.(data);
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal
|
||||
title={<LLMHeader name={llmFactory} />}
|
||||
open={visible}
|
||||
onOk={handleOk}
|
||||
onCancel={hideModal}
|
||||
okButtonProps={{ loading }}
|
||||
open={visible || false}
|
||||
onOpenChange={(open) => !open && hideModal?.()}
|
||||
maskClosable={false}
|
||||
footer={<div className="p-4"></div>}
|
||||
>
|
||||
<Form form={form}>
|
||||
<Form.Item<FieldType>
|
||||
label={t('modelType')}
|
||||
name="model_type"
|
||||
initialValue={'chat'}
|
||||
rules={[{ required: true, message: t('modelTypeMessage') }]}
|
||||
>
|
||||
<Select placeholder={t('modelTypeMessage')}>
|
||||
<Option value="chat">chat</Option>
|
||||
<Option value="image2text">image2text</Option>
|
||||
</Select>
|
||||
</Form.Item>
|
||||
<Form.Item<FieldType>
|
||||
label={t('modelID')}
|
||||
name="llm_name"
|
||||
rules={[{ required: true, message: t('GoogleModelIDMessage') }]}
|
||||
>
|
||||
<Input
|
||||
placeholder={t('GoogleModelIDMessage')}
|
||||
onKeyDown={handleKeyDown}
|
||||
<DynamicForm.Root
|
||||
fields={fields}
|
||||
onSubmit={() => {
|
||||
// Form submission is handled by SavingButton
|
||||
}}
|
||||
defaultValues={
|
||||
{
|
||||
model_type: 'chat',
|
||||
} as FieldValues
|
||||
}
|
||||
labelClassName="font-normal"
|
||||
>
|
||||
<div className="absolute bottom-0 right-0 left-0 flex items-center justify-end w-full gap-2 py-6 px-6">
|
||||
<DynamicForm.CancelButton
|
||||
handleCancel={() => {
|
||||
hideModal?.();
|
||||
}}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item<FieldType>
|
||||
label={t('addGoogleProjectID')}
|
||||
name="google_project_id"
|
||||
rules={[{ required: true, message: t('GoogleProjectIDMessage') }]}
|
||||
>
|
||||
<Input
|
||||
placeholder={t('GoogleProjectIDMessage')}
|
||||
onKeyDown={handleKeyDown}
|
||||
<DynamicForm.SavingButton
|
||||
submitLoading={loading || false}
|
||||
buttonText={tc('ok')}
|
||||
submitFunc={(values: FieldValues) => {
|
||||
handleOk(values);
|
||||
}}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item<FieldType>
|
||||
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>
|
||||
</div>
|
||||
</DynamicForm.Root>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
@ -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 omit from 'lodash/omit';
|
||||
import { FieldValues } from 'react-hook-form';
|
||||
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 values = await form.validateFields();
|
||||
const modelType =
|
||||
values.model_type === 'chat' && values.vision
|
||||
? 'image2text'
|
||||
: values.model_type;
|
||||
const fields: FormFieldConfig[] = [
|
||||
{
|
||||
name: 'hunyuan_sid',
|
||||
label: t('addHunyuanSID'),
|
||||
type: FormFieldType.Text,
|
||||
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']),
|
||||
model_type: modelType,
|
||||
hunyuan_sid: values.hunyuan_sid as string,
|
||||
hunyuan_sk: values.hunyuan_sk as string,
|
||||
llm_factory: llmFactory,
|
||||
};
|
||||
console.info(data);
|
||||
} as unknown as IAddLlmRequestBody;
|
||||
|
||||
onOk?.(data);
|
||||
};
|
||||
|
||||
const handleKeyDown = async (e: React.KeyboardEvent) => {
|
||||
if (e.key === 'Enter') {
|
||||
await handleOk();
|
||||
}
|
||||
await onOk?.(data);
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal
|
||||
title={<LLMHeader name={llmFactory} />}
|
||||
open={visible}
|
||||
onOk={handleOk}
|
||||
onCancel={hideModal}
|
||||
okButtonProps={{ loading }}
|
||||
confirmLoading={loading}
|
||||
open={visible || false}
|
||||
onOpenChange={(open) => !open && hideModal?.()}
|
||||
maskClosable={false}
|
||||
footer={<div className="p-4"></div>}
|
||||
className="max-w-[600px]"
|
||||
>
|
||||
<Form
|
||||
name="basic"
|
||||
style={{ maxWidth: 600 }}
|
||||
autoComplete="off"
|
||||
layout={'vertical'}
|
||||
form={form}
|
||||
<DynamicForm.Root
|
||||
fields={fields}
|
||||
onSubmit={() => {}}
|
||||
labelClassName="font-normal"
|
||||
>
|
||||
<Form.Item<FieldType>
|
||||
label={t('addHunyuanSID')}
|
||||
name="hunyuan_sid"
|
||||
rules={[{ required: true, message: t('HunyuanSIDMessage') }]}
|
||||
>
|
||||
<Input
|
||||
placeholder={t('HunyuanSIDMessage')}
|
||||
onKeyDown={handleKeyDown}
|
||||
<div className="absolute bottom-0 right-0 left-0 flex items-center justify-end w-full gap-2 py-6 px-6">
|
||||
<DynamicForm.CancelButton
|
||||
handleCancel={() => {
|
||||
hideModal?.();
|
||||
}}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item<FieldType>
|
||||
label={t('addHunyuanSK')}
|
||||
name="hunyuan_sk"
|
||||
rules={[{ required: true, message: t('HunyuanSKMessage') }]}
|
||||
>
|
||||
<Input
|
||||
placeholder={t('HunyuanSKMessage')}
|
||||
onKeyDown={handleKeyDown}
|
||||
<DynamicForm.SavingButton
|
||||
submitLoading={loading || false}
|
||||
buttonText={tc('ok')}
|
||||
submitFunc={(values: FieldValues) => {
|
||||
handleOk(values);
|
||||
}}
|
||||
/>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</div>
|
||||
</DynamicForm.Root>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
@ -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 omit from 'lodash/omit';
|
||||
import { FieldValues } from 'react-hook-form';
|
||||
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 }) => {
|
||||
const [form] = Form.useForm<FieldType>();
|
||||
|
||||
}: IModalProps<Omit<IAddLlmRequestBody, 'max_tokens'>> & {
|
||||
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,
|
||||
};
|
||||
console.info(data);
|
||||
} as Omit<IAddLlmRequestBody, 'max_tokens'>;
|
||||
|
||||
onOk?.(data);
|
||||
};
|
||||
|
||||
const handleKeyDown = async (e: React.KeyboardEvent) => {
|
||||
if (e.key === 'Enter') {
|
||||
await handleOk();
|
||||
}
|
||||
await onOk?.(data);
|
||||
};
|
||||
|
||||
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://cloud.tencent.com/document/api/1093/37823`}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
{t('TencentCloudLink')}
|
||||
</a>
|
||||
<Space>{originNode}</Space>
|
||||
</Flex>
|
||||
);
|
||||
}}
|
||||
confirmLoading={loading}
|
||||
open={visible || false}
|
||||
onOpenChange={(open) => !open && hideModal?.()}
|
||||
maskClosable={false}
|
||||
footer={null}
|
||||
>
|
||||
<Form>
|
||||
<Form.Item<FieldType>
|
||||
label={t('modelType')}
|
||||
name="model_type"
|
||||
initialValue={'speech2text'}
|
||||
rules={[{ required: true, message: t('modelTypeMessage') }]}
|
||||
>
|
||||
<Select placeholder={t('modelTypeMessage')}>
|
||||
<Option value="speech2text">speech2text</Option>
|
||||
</Select>
|
||||
</Form.Item>
|
||||
<Form.Item<FieldType>
|
||||
label={t('modelName')}
|
||||
name="llm_name"
|
||||
initialValue={'16k_zh'}
|
||||
rules={[{ required: true, message: t('SparkModelNameMessage') }]}
|
||||
>
|
||||
<Select placeholder={t('modelTypeMessage')}>
|
||||
<Option value="16k_zh">16k_zh</Option>
|
||||
<Option value="16k_zh_large">16k_zh_large</Option>
|
||||
<Option value="16k_multi_lang">16k_multi_lang</Option>
|
||||
<Option value="16k_zh_dialect">16k_zh_dialect</Option>
|
||||
<Option value="16k_en">16k_en</Option>
|
||||
<Option value="16k_yue">16k_yue</Option>
|
||||
<Option value="16k_zh-PY">16k_zh-PY</Option>
|
||||
<Option value="16k_ja">16k_ja</Option>
|
||||
<Option value="16k_ko">16k_ko</Option>
|
||||
<Option value="16k_vi">16k_vi</Option>
|
||||
<Option value="16k_ms">16k_ms</Option>
|
||||
<Option value="16k_id">16k_id</Option>
|
||||
<Option value="16k_fil">16k_fil</Option>
|
||||
<Option value="16k_th">16k_th</Option>
|
||||
<Option value="16k_pt">16k_pt</Option>
|
||||
<Option value="16k_tr">16k_tr</Option>
|
||||
<Option value="16k_ar">16k_ar</Option>
|
||||
<Option value="16k_es">16k_es</Option>
|
||||
<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>
|
||||
<DynamicForm.Root
|
||||
fields={fields}
|
||||
onSubmit={() => {}}
|
||||
defaultValues={
|
||||
{
|
||||
model_type: 'speech2text',
|
||||
llm_name: '16k_zh',
|
||||
} as FieldValues
|
||||
}
|
||||
labelClassName="font-normal"
|
||||
>
|
||||
<div className="absolute bottom-0 right-0 left-0 flex items-center justify-between w-full py-6 px-6">
|
||||
<a
|
||||
href="https://cloud.tencent.com/document/api/1093/37823"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="text-primary hover:underline"
|
||||
>
|
||||
{t('TencentCloudLink')}
|
||||
</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>
|
||||
);
|
||||
};
|
||||
|
||||
@ -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);
|
||||
};
|
||||
|
||||
const handleKeyDown = async (e: React.KeyboardEvent) => {
|
||||
if (e.key === 'Enter') {
|
||||
await handleOk();
|
||||
}
|
||||
await onOk?.(data as IAddLlmRequestBody);
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal
|
||||
title={<LLMHeader name={llmFactory} />}
|
||||
open={visible}
|
||||
onOk={handleOk}
|
||||
onCancel={hideModal}
|
||||
okButtonProps={{ loading }}
|
||||
confirmLoading={loading}
|
||||
open={visible || false}
|
||||
onOpenChange={(open) => !open && hideModal?.()}
|
||||
maskClosable={false}
|
||||
footer={<div className="p-4"></div>}
|
||||
>
|
||||
<Form>
|
||||
<Form.Item<FieldType>
|
||||
label={t('modelType')}
|
||||
name="model_type"
|
||||
initialValue={'chat'}
|
||||
rules={[{ required: true, message: t('modelTypeMessage') }]}
|
||||
>
|
||||
<Select placeholder={t('modelTypeMessage')}>
|
||||
<Option value="chat">chat</Option>
|
||||
<Option value="tts">tts</Option>
|
||||
</Select>
|
||||
</Form.Item>
|
||||
<Form.Item<FieldType>
|
||||
label={t('modelName')}
|
||||
name="llm_name"
|
||||
rules={[{ required: true, message: t('SparkModelNameMessage') }]}
|
||||
>
|
||||
<Input
|
||||
placeholder={t('modelNameMessage')}
|
||||
onKeyDown={handleKeyDown}
|
||||
<DynamicForm.Root
|
||||
fields={fields}
|
||||
onSubmit={(data) => {
|
||||
console.log(data);
|
||||
}}
|
||||
defaultValues={
|
||||
{
|
||||
model_type: 'chat',
|
||||
vision: false,
|
||||
} as FieldValues
|
||||
}
|
||||
labelClassName="font-normal"
|
||||
>
|
||||
<div className="absolute bottom-0 right-0 left-0 flex items-center justify-end w-full gap-2 py-6 px-6">
|
||||
<DynamicForm.CancelButton
|
||||
handleCancel={() => {
|
||||
hideModal?.();
|
||||
}}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item<FieldType>
|
||||
label={t('addSparkAPIPassword')}
|
||||
name="spark_api_password"
|
||||
rules={[{ required: true, message: t('SparkAPIPasswordMessage') }]}
|
||||
>
|
||||
<Input
|
||||
placeholder={t('SparkAPIPasswordMessage')}
|
||||
onKeyDown={handleKeyDown}
|
||||
<DynamicForm.SavingButton
|
||||
submitLoading={loading || false}
|
||||
buttonText={tc('ok')}
|
||||
submitFunc={(values: FieldValues) => {
|
||||
handleOk(values);
|
||||
}}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item noStyle dependencies={['model_type']}>
|
||||
{({ 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>
|
||||
</div>
|
||||
</DynamicForm.Root>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
@ -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;
|
||||
Reference in New Issue
Block a user