feat: Added More Settings section with risk warnings in model type configuration (#2560)
* feat: add "More Settings" option in multiple languages and enhance model type selection UI * feat: add "More Settings" option with warnings and confirmation prompts in multiple languages * fix: improve modal close handling and reset model type visibility
This commit is contained in:
Asurada
GitHub
parent
31078b8ec5
commit
feefaaf3e3
@ -741,6 +741,10 @@
|
||||
"models.translate_model_description": "Model used for translation service",
|
||||
"models.translate_model_prompt_message": "Please enter the translate model prompt",
|
||||
"models.translate_model_prompt_title": "Translate Model Prompt",
|
||||
"moresetting": "More Settings",
|
||||
"moresetting.warn": "Risk Warning",
|
||||
"moresetting.check.warn": "Please be cautious when selecting this option. Incorrect selection may cause the model to malfunction!",
|
||||
"moresetting.check.confirm": "Confirm Selection",
|
||||
"provider": {
|
||||
"add.name": "Provider Name",
|
||||
"add.name.placeholder": "Example: OpenAI",
|
||||
|
||||
@ -741,6 +741,10 @@
|
||||
"models.translate_model_description": "翻訳サービスに使用されるモデル",
|
||||
"models.translate_model_prompt_message": "翻訳モデルのプロンプトを入力してください",
|
||||
"models.translate_model_prompt_title": "翻訳モデルのプロンプト",
|
||||
"moresetting": "詳細設定",
|
||||
"moresetting.warn": "リスク警告",
|
||||
"moresetting.check.warn": "このオプションを選択する際は慎重に行ってください。誤った選択はモデルの誤動作を引き起こす可能性があります！",
|
||||
"moresetting.check.confirm": "選択を確認",
|
||||
"provider": {
|
||||
"add.name": "プロバイダー名",
|
||||
"add.name.placeholder": "例：OpenAI",
|
||||
|
||||
@ -741,6 +741,10 @@
|
||||
"models.translate_model_description": "Модель, используемая для сервиса перевода",
|
||||
"models.translate_model_prompt_message": "Введите модель перевода",
|
||||
"models.translate_model_prompt_title": "Модель перевода",
|
||||
"moresetting": "Дополнительные настройки",
|
||||
"moresetting.warn": "Предупреждение о риске",
|
||||
"moresetting.check.warn": "Пожалуйста, будьте осторожны при выборе этой опции. Неправильный выбор может привести к сбою в работе модели!",
|
||||
"moresetting.check.confirm": "Подтвердить выбор",
|
||||
"provider": {
|
||||
"add.name": "Имя провайдера",
|
||||
"add.name.placeholder": "Пример: OpenAI",
|
||||
|
||||
@ -741,6 +741,10 @@
|
||||
"models.translate_model_description": "翻译服务使用的模型",
|
||||
"models.translate_model_prompt_message": "请输入翻译模型提示词",
|
||||
"models.translate_model_prompt_title": "翻译模型提示词",
|
||||
"moresetting": "更多设置",
|
||||
"moresetting.warn": "风险警告",
|
||||
"moresetting.check.warn": "请慎重勾选此选项，勾选错误会导致模型无法正常使用！！！",
|
||||
"moresetting.check.confirm": "确认勾选",
|
||||
"provider": {
|
||||
"add.name": "提供商名称",
|
||||
"add.name.placeholder": "例如 OpenAI",
|
||||
|
||||
@ -741,6 +741,10 @@
|
||||
"models.translate_model_description": "翻譯服務使用的模型",
|
||||
"models.translate_model_prompt_message": "請輸入翻譯模型提示詞",
|
||||
"models.translate_model_prompt_title": "翻譯模型提示詞",
|
||||
"moresetting": "更多設置",
|
||||
"moresetting.warn": "風險警告",
|
||||
"moresetting.check.warn": "請謹慎勾選此選項，勾選錯誤會導致模型無法正常使用！！！",
|
||||
"moresetting.check.confirm": "確認勾選",
|
||||
"provider": {
|
||||
"add.name": "提供者名稱",
|
||||
"add.name.placeholder": "例如：OpenAI",
|
||||
|
||||
@ -1,11 +1,13 @@
|
||||
import {
|
||||
CheckOutlined,
|
||||
DownOutlined,
|
||||
EditOutlined,
|
||||
ExportOutlined,
|
||||
LoadingOutlined,
|
||||
MinusCircleOutlined,
|
||||
PlusOutlined,
|
||||
SettingOutlined
|
||||
SettingOutlined,
|
||||
UpOutlined
|
||||
} from '@ant-design/icons'
|
||||
import { HStack } from '@renderer/components/Layout'
|
||||
import ModelTags from '@renderer/components/ModelTags'
|
||||
@ -62,7 +64,7 @@ interface ModelEditContentProps {
|
||||
const ModelEditContent: FC<ModelEditContentProps> = ({ model, onUpdateModel, open, onClose }) => {
|
||||
const [form] = Form.useForm()
|
||||
const { t } = useTranslation()
|
||||
|
||||
const [showModelTypes, setShowModelTypes] = useState(false)
|
||||
const onFinish = (values: any) => {
|
||||
const updatedModel = {
|
||||
...model,
|
||||
@ -71,20 +73,26 @@ const ModelEditContent: FC<ModelEditContentProps> = ({ model, onUpdateModel, ope
|
||||
group: values.group || model.group
|
||||
}
|
||||
onUpdateModel(updatedModel)
|
||||
setShowModelTypes(false)
|
||||
onClose()
|
||||
}
|
||||
const handleClose = () => {
|
||||
setShowModelTypes(false)
|
||||
onClose()
|
||||
}
|
||||
|
||||
return (
|
||||
<Modal
|
||||
title={t('models.edit')}
|
||||
open={open}
|
||||
onCancel={onClose}
|
||||
onCancel={handleClose}
|
||||
footer={null}
|
||||
maskClosable={false}
|
||||
centered
|
||||
afterOpenChange={(visible) => {
|
||||
if (visible) {
|
||||
form.getFieldInstance('id')?.focus()
|
||||
} else {
|
||||
setShowModelTypes(false)
|
||||
}
|
||||
}}>
|
||||
<Form
|
||||
@ -128,48 +136,83 @@ const ModelEditContent: FC<ModelEditContentProps> = ({ model, onUpdateModel, ope
|
||||
<Input placeholder={t('settings.models.add.group_name.placeholder')} spellCheck={false} />
|
||||
</Form.Item>
|
||||
<Form.Item style={{ marginBottom: 15, textAlign: 'center' }}>
|
||||
<Button type="primary" htmlType="submit" size="middle">
|
||||
{t('common.save')}
|
||||
</Button>
|
||||
<Flex justify="center" align="center" style={{ position: 'relative' }}>
|
||||
<div>
|
||||
<Button type="primary" htmlType="submit" size="middle">
|
||||
{t('common.save')}
|
||||
</Button>
|
||||
</div>
|
||||
<MoreSettingsRow
|
||||
onClick={() => setShowModelTypes(!showModelTypes)}
|
||||
style={{ position: 'absolute', right: 0 }}>
|
||||
{t('settings.moresetting')}
|
||||
<ExpandIcon>{showModelTypes ? <UpOutlined /> : <DownOutlined />}</ExpandIcon>
|
||||
</MoreSettingsRow>
|
||||
</Flex>
|
||||
</Form.Item>
|
||||
<Divider style={{ margin: '0 0 15px 0' }} />
|
||||
<div>
|
||||
<TypeTitle>{t('models.type.select')}:</TypeTitle>
|
||||
{(() => {
|
||||
const defaultTypes = [
|
||||
...(isVisionModel(model) ? ['vision'] : []),
|
||||
...(isEmbeddingModel(model) ? ['embedding'] : []),
|
||||
...(isReasoningModel(model) ? ['reasoning'] : [])
|
||||
] as ModelType[]
|
||||
{showModelTypes && (
|
||||
<div>
|
||||
<TypeTitle>{t('models.type.select')}:</TypeTitle>
|
||||
{(() => {
|
||||
const defaultTypes = [
|
||||
...(isVisionModel(model) ? ['vision'] : []),
|
||||
...(isEmbeddingModel(model) ? ['embedding'] : []),
|
||||
...(isReasoningModel(model) ? ['reasoning'] : [])
|
||||
] as ModelType[]
|
||||
|
||||
// 合并现有选择和默认类型
|
||||
const selectedTypes = [...new Set([...(model.type || []), ...defaultTypes])]
|
||||
// 合并现有选择和默认类型
|
||||
const selectedTypes = [...new Set([...(model.type || []), ...defaultTypes])]
|
||||
|
||||
return (
|
||||
<Checkbox.Group
|
||||
value={selectedTypes}
|
||||
onChange={(types) => onUpdateModel({ ...model, type: types as ModelType[] })}
|
||||
options={[
|
||||
{
|
||||
label: t('models.type.vision'),
|
||||
value: 'vision',
|
||||
disabled: isVisionModel(model) && !selectedTypes.includes('vision')
|
||||
},
|
||||
{
|
||||
label: t('models.type.embedding'),
|
||||
value: 'embedding',
|
||||
disabled: isEmbeddingModel(model) && !selectedTypes.includes('embedding')
|
||||
},
|
||||
{
|
||||
label: t('models.type.reasoning'),
|
||||
value: 'reasoning',
|
||||
disabled: isReasoningModel(model) && !selectedTypes.includes('reasoning')
|
||||
}
|
||||
]}
|
||||
/>
|
||||
)
|
||||
})()}
|
||||
</div>
|
||||
const showTypeConfirmModal = (type: string) => {
|
||||
Modal.confirm({
|
||||
title: t('settings.moresetting.warn'),
|
||||
content: t('settings.moresetting.check.warn'),
|
||||
okText: t('settings.moresetting.check.confirm'),
|
||||
cancelText: t('common.cancel'),
|
||||
okButtonProps: { danger: true },
|
||||
cancelButtonProps: { type: 'primary' },
|
||||
onOk: () => onUpdateModel({ ...model, type: [...selectedTypes, type] as ModelType[] }),
|
||||
onCancel: () => {},
|
||||
centered: true
|
||||
})
|
||||
}
|
||||
|
||||
const handleTypeChange = (types: string[]) => {
|
||||
const newType = types.find((type) => !selectedTypes.includes(type as ModelType))
|
||||
|
||||
if (newType) {
|
||||
showTypeConfirmModal(newType)
|
||||
} else {
|
||||
onUpdateModel({ ...model, type: types as ModelType[] })
|
||||
}
|
||||
}
|
||||
return (
|
||||
<Checkbox.Group
|
||||
value={selectedTypes}
|
||||
onChange={handleTypeChange}
|
||||
options={[
|
||||
{
|
||||
label: t('models.type.vision'),
|
||||
value: 'vision',
|
||||
disabled: isVisionModel(model) && !selectedTypes.includes('vision')
|
||||
},
|
||||
{
|
||||
label: t('models.type.embedding'),
|
||||
value: 'embedding',
|
||||
disabled: isEmbeddingModel(model) && !selectedTypes.includes('embedding')
|
||||
},
|
||||
{
|
||||
label: t('models.type.reasoning'),
|
||||
value: 'reasoning',
|
||||
disabled: isReasoningModel(model) && !selectedTypes.includes('reasoning')
|
||||
}
|
||||
]}
|
||||
/>
|
||||
)
|
||||
})()}
|
||||
</div>
|
||||
)}
|
||||
</Form>
|
||||
</Modal>
|
||||
)
|
||||
@ -540,4 +583,26 @@ const TypeTitle = styled.div`
|
||||
font-weight: 600;
|
||||
`
|
||||
|
||||
const ExpandIcon = styled.div`
|
||||
font-size: 12px;
|
||||
color: var(--color-text-3);
|
||||
`
|
||||
|
||||
const MoreSettingsRow = styled.div`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
color: var(--color-text-3);
|
||||
cursor: pointer;
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
max-width: 150px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--color-background-soft);
|
||||
}
|
||||
`
|
||||
|
||||
export default ProviderSetting
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user