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

src/renderer/src/i18n/locales/en-us.json

@@ -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",

src/renderer/src/i18n/locales/ja-jp.json

@@ -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",

src/renderer/src/i18n/locales/ru-ru.json

@@ -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",

src/renderer/src/i18n/locales/zh-cn.json

@@ -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",

src/renderer/src/i18n/locales/zh-tw.json

@@ -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",

src/renderer/src/pages/settings/ProviderSettings/ProviderSetting.tsx

@@ -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">
+          <Flex justify="center" align="center" style={{ position: 'relative' }}>
-            {t('common.save')}
+            <div>
-          </Button>
+              <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>
+        {showModelTypes && (
-          <TypeTitle>{t('models.type.select')}:</TypeTitle>
+          <div>
-          {(() => {
+            <TypeTitle>{t('models.type.select')}:</TypeTitle>
-            const defaultTypes = [
+            {(() => {
-              ...(isVisionModel(model) ? ['vision'] : []),
+              const defaultTypes = [
-              ...(isEmbeddingModel(model) ? ['embedding'] : []),
+                ...(isVisionModel(model) ? ['vision'] : []),
-              ...(isReasoningModel(model) ? ['reasoning'] : [])
+                ...(isEmbeddingModel(model) ? ['embedding'] : []),
-            ] as ModelType[]
+                ...(isReasoningModel(model) ? ['reasoning'] : [])
+              ] as ModelType[]
 
-            // 合并现有选择和默认类型
+              // 合并现有选择和默认类型
-            const selectedTypes = [...new Set([...(model.type || []), ...defaultTypes])]
+              const selectedTypes = [...new Set([...(model.type || []), ...defaultTypes])]
 
-            return (
+              const showTypeConfirmModal = (type: string) => {
-              <Checkbox.Group
+                Modal.confirm({
-                value={selectedTypes}
+                  title: t('settings.moresetting.warn'),
-                onChange={(types) => onUpdateModel({ ...model, type: types as ModelType[] })}
+                  content: t('settings.moresetting.check.warn'),
-                options={[
+                  okText: t('settings.moresetting.check.confirm'),
-                  {
+                  cancelText: t('common.cancel'),
-                    label: t('models.type.vision'),
+                  okButtonProps: { danger: true },
-                    value: 'vision',
+                  cancelButtonProps: { type: 'primary' },
-                    disabled: isVisionModel(model) && !selectedTypes.includes('vision')
+                  onOk: () => onUpdateModel({ ...model, type: [...selectedTypes, type] as ModelType[] }),
-                  },
+                  onCancel: () => {},
-                  {
+                  centered: true
-                    label: t('models.type.embedding'),
+                })
-                    value: 'embedding',
+              }
-                    disabled: isEmbeddingModel(model) && !selectedTypes.includes('embedding')
+
-                  },
+              const handleTypeChange = (types: string[]) => {
-                  {
+                const newType = types.find((type) => !selectedTypes.includes(type as ModelType))
-                    label: t('models.type.reasoning'),
+
-                    value: 'reasoning',
+                if (newType) {
-                    disabled: isReasoningModel(model) && !selectedTypes.includes('reasoning')
+                  showTypeConfirmModal(newType)
-                  }
+                } else {
-                ]}
+                  onUpdateModel({ ...model, type: types as ModelType[] })
-              />
+                }
-            )
+              }
-          })()}
+              return (
-        </div>
+                <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