95 lines
3.2 KiB
TypeScript
95 lines
3.2 KiB
TypeScript
import { forwardRef, useImperativeHandle, useState, useEffect } from 'react';
|
|
import { Form, InputNumber, Switch, Flex } from 'antd';
|
|
import { useTranslation } from 'react-i18next';
|
|
|
|
import type { RerankerConfig, KnowledgeGlobalConfigModalRef } from './types'
|
|
import RbModal from '@/components/RbModal'
|
|
import ModelSelect from '@/components/ModelSelect'
|
|
|
|
const FormItem = Form.Item;
|
|
|
|
interface KnowledgeGlobalConfigModalProps {
|
|
data: RerankerConfig;
|
|
refresh: (values: RerankerConfig, type: 'rerankerConfig') => void;
|
|
}
|
|
|
|
const KnowledgeGlobalConfigModal = forwardRef<KnowledgeGlobalConfigModalRef, KnowledgeGlobalConfigModalProps>(({ refresh, data }, ref) => {
|
|
const { t } = useTranslation();
|
|
const [visible, setVisible] = useState(false);
|
|
const [form] = Form.useForm<RerankerConfig>();
|
|
const values = Form.useWatch<RerankerConfig>([], form);
|
|
|
|
const handleClose = () => {
|
|
setVisible(false);
|
|
form.resetFields();
|
|
};
|
|
|
|
const handleOpen = () => {
|
|
form.setFieldsValue({ ...data, rerank_model: !!data?.reranker_id })
|
|
setVisible(true);
|
|
};
|
|
|
|
const handleSave = () => {
|
|
form.validateFields()
|
|
.then(() => {
|
|
refresh(values, 'rerankerConfig')
|
|
handleClose()
|
|
})
|
|
.catch((err) => console.log('err', err));
|
|
}
|
|
|
|
useEffect(() => {
|
|
if (values?.rerank_model) {
|
|
const { rerank_model, ...rest } = data;
|
|
form.setFieldsValue({ ...rest })
|
|
} else {
|
|
form.setFieldsValue({ reranker_id: undefined, reranker_top_k: undefined })
|
|
}
|
|
}, [values?.rerank_model])
|
|
|
|
useImperativeHandle(ref, () => ({ handleOpen }));
|
|
|
|
return (
|
|
<RbModal
|
|
title={t('application.globalConfig')}
|
|
open={visible}
|
|
onCancel={handleClose}
|
|
okText={t('common.save')}
|
|
onOk={handleSave}
|
|
>
|
|
<Form form={form} layout="vertical" size="middle">
|
|
<div className="rb:text-[#5B6167] rb:mb-6">{t('application.globalConfigDesc')}</div>
|
|
<Flex align="center" justify="space-between" className="rb:my-6!">
|
|
<div className="rb:text-[14px] rb:font-medium rb:leading-5">
|
|
{t('application.rerankModel')}
|
|
<div className="rb:mt-1 rb:text-[12px] rb:text-[#5B6167] rb:font-regular rb:leading-4">{t('application.rerankModelDesc')}</div>
|
|
</div>
|
|
<FormItem name="rerank_model" valuePropName="checked" className="rb:mb-0!">
|
|
<Switch />
|
|
</FormItem>
|
|
</Flex>
|
|
{values?.rerank_model && <>
|
|
<FormItem
|
|
name="reranker_id"
|
|
label={t('application.rearrangementModel')}
|
|
rules={[{ required: true, message: t('common.pleaseSelect') }]}
|
|
extra={t('application.rearrangementModelDesc')}
|
|
>
|
|
<ModelSelect params={{ type: 'rerank' }} className="rb:w-full!" />
|
|
</FormItem>
|
|
<FormItem
|
|
name="reranker_top_k"
|
|
label={t('application.reranker_top_k')}
|
|
rules={[{ required: true, message: t('common.pleaseEnter') }]}
|
|
extra={t('application.reranker_top_k_desc')}
|
|
>
|
|
<InputNumber style={{ width: '100%' }} min={1} max={20} onChange={(value) => form.setFieldValue('reranker_top_k', value)} />
|
|
</FormItem>
|
|
</>}
|
|
</Form>
|
|
</RbModal>
|
|
);
|
|
});
|
|
|
|
export default KnowledgeGlobalConfigModal;
|