refactor(setting): split model dialogs into separate components
This commit is contained in:
306
src/pages/setting/components/Dialog/SystemModelDialog.tsx
Normal file
306
src/pages/setting/components/Dialog/SystemModelDialog.tsx
Normal file
@@ -0,0 +1,306 @@
|
||||
import React, { useEffect, useMemo } from 'react';
|
||||
import {
|
||||
Dialog,
|
||||
DialogTitle,
|
||||
DialogContent,
|
||||
DialogActions,
|
||||
Button,
|
||||
FormControl,
|
||||
InputLabel,
|
||||
Select,
|
||||
MenuItem,
|
||||
Box,
|
||||
Typography,
|
||||
CircularProgress,
|
||||
ListSubheader,
|
||||
} from '@mui/material';
|
||||
import { useForm, Controller } from 'react-hook-form';
|
||||
import { LlmSvgIcon } from '@/components/AppSvgIcon';
|
||||
import { IconMap, type LLMFactory } from '@/constants/llm';
|
||||
import type { ITenantInfo } from '@/interfaces/database/knowledge';
|
||||
import type { LlmModelType } from '@/constants/knowledge';
|
||||
import type { IMyLlmModel, IThirdOAIModel } from '@/interfaces/database/llm';
|
||||
|
||||
interface AllModelOptionItem {
|
||||
label: string;
|
||||
options: {
|
||||
value: string;
|
||||
label: string;
|
||||
disabled: boolean;
|
||||
model: IThirdOAIModel
|
||||
}[];
|
||||
}
|
||||
|
||||
// 导出接口供其他文件使用
|
||||
export interface SystemModelFormData extends Partial<ITenantInfo> { }
|
||||
|
||||
// 系统默认模型设置对话框
|
||||
export interface SystemModelDialogProps {
|
||||
open: boolean;
|
||||
onClose: () => void;
|
||||
loading: boolean;
|
||||
editMode?: boolean;
|
||||
onSubmit: (data: SystemModelFormData) => Promise<void>;
|
||||
initialData?: Partial<ITenantInfo>;
|
||||
allModelOptions: Record<string, AllModelOptionItem[]>;
|
||||
}
|
||||
|
||||
|
||||
export interface ModelOption {
|
||||
value: string;
|
||||
label: string;
|
||||
disabled: boolean;
|
||||
model: IThirdOAIModel;
|
||||
}
|
||||
export interface ModelGroup {
|
||||
label: string;
|
||||
options: ModelOption[];
|
||||
}
|
||||
|
||||
/**
|
||||
* 系统默认模型设置对话框
|
||||
*/
|
||||
function SystemModelDialog({
|
||||
open,
|
||||
onClose,
|
||||
onSubmit,
|
||||
loading,
|
||||
initialData,
|
||||
editMode = false,
|
||||
allModelOptions
|
||||
}: SystemModelDialogProps) {
|
||||
const { control, handleSubmit, reset, formState: { errors } } = useForm<ITenantInfo>({
|
||||
defaultValues: {}
|
||||
});
|
||||
|
||||
// 获取工厂图标名称
|
||||
const getFactoryIconName = (factoryName: LLMFactory) => {
|
||||
return IconMap[factoryName] || 'default';
|
||||
};
|
||||
|
||||
// all model options 包含了全部的 options
|
||||
const llmOptions = useMemo(() => allModelOptions?.llmOptions || [], [allModelOptions]);
|
||||
const embdOptions = useMemo(() => allModelOptions?.embeddingOptions || [], [allModelOptions]);
|
||||
const img2txtOptions = useMemo(() => allModelOptions?.image2textOptions || [], [allModelOptions]);
|
||||
const asrOptions = useMemo(() => allModelOptions?.speech2textOptions || [], [allModelOptions]);
|
||||
const ttsOptions = useMemo(() => allModelOptions?.ttsOptions || [], [allModelOptions]);
|
||||
const rerankOptions = useMemo(() => allModelOptions?.rerankOptions || [], [allModelOptions]);
|
||||
|
||||
useEffect(() => {
|
||||
if (open && initialData) {
|
||||
reset(initialData);
|
||||
} else if (open) {
|
||||
reset({
|
||||
llm_id: '',
|
||||
embd_id: '',
|
||||
img2txt_id: '',
|
||||
asr_id: '',
|
||||
tts_id: '',
|
||||
rerank_id: '',
|
||||
});
|
||||
}
|
||||
}, [open, initialData, reset]);
|
||||
|
||||
const handleFormSubmit = async (data: ITenantInfo) => {
|
||||
try {
|
||||
await onSubmit(data);
|
||||
onClose();
|
||||
} catch (error) {
|
||||
console.error('提交失败:', error);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog open={open} onClose={onClose} maxWidth="sm" fullWidth>
|
||||
<DialogTitle>
|
||||
设置默认模型
|
||||
</DialogTitle>
|
||||
<DialogContent>
|
||||
<Box component="form" sx={{ mt: 2 }}>
|
||||
<Controller
|
||||
name="llm_id"
|
||||
control={control}
|
||||
rules={{ required: '聊天模型是必填项' }}
|
||||
render={({ field }) => (
|
||||
<FormControl fullWidth margin="normal" error={!!errors.llm_id}>
|
||||
<InputLabel>聊天模型</InputLabel>
|
||||
<Select {...field} label="聊天模型">
|
||||
{llmOptions.map((group) => [
|
||||
<ListSubheader key={group.label}>{group.label}</ListSubheader>,
|
||||
...group.options.map((option) => (
|
||||
<MenuItem key={option.value} value={option.value} disabled={option.disabled}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
||||
<LlmSvgIcon
|
||||
name={getFactoryIconName(group.label as LLMFactory)}
|
||||
sx={{ width: 20, height: 20, color: 'primary.main' }}
|
||||
/>
|
||||
{option.label}
|
||||
</Box>
|
||||
</MenuItem>
|
||||
))
|
||||
])}
|
||||
</Select>
|
||||
{errors.llm_id && (
|
||||
<Typography variant="caption" color="error" sx={{ mt: 1, ml: 2 }}>
|
||||
{errors.llm_id.message}
|
||||
</Typography>
|
||||
)}
|
||||
</FormControl>
|
||||
)}
|
||||
/>
|
||||
|
||||
<Controller
|
||||
name="embd_id"
|
||||
control={control}
|
||||
rules={{ required: '嵌入模型是必填项' }}
|
||||
render={({ field }) => (
|
||||
<FormControl fullWidth margin="normal" error={!!errors.embd_id}>
|
||||
<InputLabel>嵌入模型</InputLabel>
|
||||
<Select {...field} label="嵌入模型">
|
||||
{embdOptions.map((group) => [
|
||||
<ListSubheader key={group.label}>{group.label}</ListSubheader>,
|
||||
...group.options.map((option) => (
|
||||
<MenuItem key={option.value} value={option.value} disabled={option.disabled}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
||||
<LlmSvgIcon
|
||||
name={getFactoryIconName(group.label as LLMFactory)}
|
||||
sx={{ width: 20, height: 20, color: 'primary.main' }}
|
||||
/>
|
||||
{option.label}
|
||||
</Box>
|
||||
</MenuItem>
|
||||
))
|
||||
])}
|
||||
</Select>
|
||||
{errors.embd_id && (
|
||||
<Typography variant="caption" color="error" sx={{ mt: 1, ml: 2 }}>
|
||||
{errors.embd_id.message}
|
||||
</Typography>
|
||||
)}
|
||||
</FormControl>
|
||||
)}
|
||||
/>
|
||||
|
||||
<Controller
|
||||
name="img2txt_id"
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<FormControl fullWidth margin="normal">
|
||||
<InputLabel>Img2txt模型</InputLabel>
|
||||
<Select {...field} label="Img2txt模型">
|
||||
{img2txtOptions.map((group) => [
|
||||
<ListSubheader key={group.label}>{group.label}</ListSubheader>,
|
||||
...group.options.map((option) => (
|
||||
<MenuItem key={option.value} value={option.value} disabled={option.disabled}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
||||
<LlmSvgIcon
|
||||
name={getFactoryIconName(group.label as LLMFactory)}
|
||||
sx={{ width: 20, height: 20, color: 'primary.main' }}
|
||||
/>
|
||||
{option.label}
|
||||
</Box>
|
||||
</MenuItem>
|
||||
))
|
||||
])}
|
||||
</Select>
|
||||
</FormControl>
|
||||
)}
|
||||
/>
|
||||
|
||||
<Controller
|
||||
name="asr_id"
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<FormControl fullWidth margin="normal">
|
||||
<InputLabel>Speech2txt模型</InputLabel>
|
||||
<Select {...field} label="Speech2txt模型">
|
||||
{asrOptions.map((group) => [
|
||||
<ListSubheader key={group.label}>{group.label}</ListSubheader>,
|
||||
...group.options.map((option) => (
|
||||
<MenuItem key={option.value} value={option.value} disabled={option.disabled}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
||||
<LlmSvgIcon
|
||||
name={getFactoryIconName(group.label as LLMFactory)}
|
||||
sx={{ width: 20, height: 20, color: 'primary.main' }}
|
||||
/>
|
||||
{option.label}
|
||||
</Box>
|
||||
</MenuItem>
|
||||
))
|
||||
])}
|
||||
</Select>
|
||||
</FormControl>
|
||||
)}
|
||||
/>
|
||||
|
||||
<Controller
|
||||
name="rerank_id"
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<FormControl fullWidth margin="normal">
|
||||
<InputLabel>Rerank模型</InputLabel>
|
||||
<Select {...field} label="Rerank模型">
|
||||
{rerankOptions.map((group) => [
|
||||
<ListSubheader key={group.label}>{group.label}</ListSubheader>,
|
||||
...group.options.map((option) => (
|
||||
<MenuItem key={option.value} value={option.value} disabled={option.disabled}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
||||
<LlmSvgIcon
|
||||
name={getFactoryIconName(group.label as LLMFactory)}
|
||||
sx={{ width: 20, height: 20, color: 'primary.main' }}
|
||||
/>
|
||||
{option.label}
|
||||
</Box>
|
||||
</MenuItem>
|
||||
))
|
||||
])}
|
||||
</Select>
|
||||
</FormControl>
|
||||
)}
|
||||
/>
|
||||
|
||||
<Controller
|
||||
name="tts_id"
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<FormControl fullWidth margin="normal">
|
||||
<InputLabel>TTS模型</InputLabel>
|
||||
<Select {...field} label="TTS模型">
|
||||
{ttsOptions.map((group) => [
|
||||
<ListSubheader key={group.label}>{group.label}</ListSubheader>,
|
||||
...group.options.map((option) => (
|
||||
<MenuItem key={option.value} value={option.value} disabled={option.disabled}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
||||
<LlmSvgIcon
|
||||
name={getFactoryIconName(group.label as LLMFactory)}
|
||||
sx={{ width: 20, height: 20, color: 'primary.main' }}
|
||||
/>
|
||||
{option.label}
|
||||
</Box>
|
||||
</MenuItem>
|
||||
))
|
||||
])}
|
||||
</Select>
|
||||
</FormControl>
|
||||
)}
|
||||
/>
|
||||
</Box>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={onClose} disabled={loading}>
|
||||
取消
|
||||
</Button>
|
||||
<Button
|
||||
onClick={handleSubmit(handleFormSubmit)}
|
||||
variant="contained"
|
||||
disabled={loading}
|
||||
startIcon={loading ? <CircularProgress size={20} /> : null}
|
||||
>
|
||||
确定
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
);
|
||||
};
|
||||
|
||||
export default SystemModelDialog;
|
||||
Reference in New Issue
Block a user