fix(i18n): add i18n support for custom model feature in ModelSelector (#172)

* feat(models): add custom model name input with provider selector

- Add custom model input field at bottom of model selector modal
- Add provider dropdown to specify target provider for custom model
- Track custom models in app store and display with CUSTOM badge
- Merge custom model into provider group list
- Fix custom provider models being overwritten by API response (keep both)

* Upload screenshot

* fix(i18n): add i18n support for custom model feature in ModelSelector

Replace hardcoded English strings (CUSTOM badge, placeholder, hint) with
vue-i18n t() calls and add corresponding translation keys to all 8 locales
(en, zh, ja, ko, fr, es, de, pt).

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

---------

Co-authored-by: toller892 <892@users.noreply.github.com>
Co-authored-by: Tony <125938283+toller892@users.noreply.github.com>
Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>

packages/client/src/components/layout/ModelSelector.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref, computed } from 'vue'
-import { NModal, NInput } from 'naive-ui'
+import { NModal, NInput, NSelect } from 'naive-ui'
 import { useAppStore } from '@/stores/hermes/app'
 import { useI18n } from 'vue-i18n'
 
@@ -10,11 +10,37 @@ const appStore = useAppStore()
 const showModal = ref(false)
 const searchQuery = ref('')
 const collapsedGroups = ref<Record<string, boolean>>({})
+const customInput = ref('')
+const customProvider = ref('')
+
+const providerOptions = computed(() => {
+  const current = appStore.selectedProvider
+  customProvider.value = current
+  return appStore.modelGroups.map(g => ({ label: g.label, value: g.provider }))
+})
+
+const modelGroupsWithCustom = computed(() =>
+  appStore.modelGroups.map(g => ({
+    ...g,
+    models: [
+      ...g.models,
+      ...(appStore.customModels[g.provider] || []).filter(m => !g.models.includes(m)),
+    ],
+  }))
+)
+
+const customModelSet = computed(() => {
+  const set = new Set<string>()
+  for (const models of Object.values(appStore.customModels)) {
+    models.forEach(m => set.add(m))
+  }
+  return set
+})
 
 const filteredGroups = computed(() => {
   const q = searchQuery.value.toLowerCase().trim()
-  if (!q) return appStore.modelGroups
+  if (!q) return modelGroupsWithCustom.value
-  return appStore.modelGroups
+  return modelGroupsWithCustom.value
     .map(g => ({
       ...g,
       models: g.models.filter(m => m.toLowerCase().includes(q)),
@@ -36,9 +62,20 @@ function handleSelect(model: string, provider: string) {
   searchQuery.value = ''
 }
 
+function handleCustomSubmit() {
+  const model = customInput.value.trim()
+  if (!model || !customProvider.value) return
+  appStore.switchModel(model, customProvider.value)
+  showModal.value = false
+  searchQuery.value = ''
+  customInput.value = ''
+}
+
 function openModal() {
   collapsedGroups.value = {}
   searchQuery.value = ''
+  customInput.value = ''
+  customProvider.value = appStore.selectedProvider
   showModal.value = true
 }
 </script>
@@ -89,6 +126,7 @@ function openModal() {
               @click="handleSelect(model, group.provider)"
             >
               <span class="model-item-name">{{ model }}</span>
+              <span v-if="customModelSet.has(model)" class="model-badge-custom">{{ t('models.customBadge') }}</span>
               <svg v-if="model === appStore.selectedModel && group.provider === appStore.selectedProvider" class="model-check" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
                 <polyline points="20 6 9 17 4 12" />
               </svg>
@@ -98,6 +136,26 @@ function openModal() {
         <div v-if="filteredGroups.length === 0" class="model-empty">
           {{ searchQuery ? 'No results' : 'No models' }}
         </div>
+        <div class="model-custom">
+          <div class="model-custom-row">
+            <NSelect
+              v-model:value="customProvider"
+              :options="providerOptions"
+              size="small"
+              class="model-custom-provider"
+            />
+            <NInput
+              v-model:value="customInput"
+              :placeholder="t('models.customModelPlaceholder')"
+              size="small"
+              class="model-custom-input"
+              @keydown.enter="handleCustomSubmit"
+            />
+          </div>
+          <div class="model-custom-hint">
+            {{ t('models.customModelHint') }}
+          </div>
+        </div>
       </div>
     </NModal>
   </div>
@@ -243,10 +301,48 @@ function openModal() {
   color: $accent-primary;
 }
 
+.model-badge-custom {
+  flex-shrink: 0;
+  font-size: 9px;
+  font-weight: 600;
+  color: #fff;
+  background: $accent-primary;
+  padding: 1px 5px;
+  border-radius: 3px;
+  margin-right: 4px;
+  letter-spacing: 0.03em;
+}
+
 .model-empty {
   padding: 24px 0;
   text-align: center;
   font-size: 13px;
   color: $text-muted;
 }
+
+.model-custom {
+  margin-top: 12px;
+  padding-top: 12px;
+  border-top: 1px solid $border-color;
+}
+
+.model-custom-row {
+  display: flex;
+  gap: 8px;
+}
+
+.model-custom-provider {
+  width: 160px;
+  flex-shrink: 0;
+}
+
+.model-custom-input {
+  flex: 1;
+}
+
+.model-custom-hint {
+  margin-top: 6px;
+  font-size: 11px;
+  color: $text-muted;
+}
 </style>

packages/client/src/i18n/locales/de.ts

@@ -252,6 +252,9 @@ export default {
     nousApproved: 'Login erfolgreich',
     nousDenied: 'Autorisierung wurde abgelehnt',
     nousExpired: 'Autorisierung abgelaufen',
+    customBadge: 'BENUTZERDEF.',
+    customModelPlaceholder: 'Benutzerdefinierter Modellname',
+    customModelHint: 'Enter zum Laden',
     noProviders: 'Keine Anbieter gefunden. Fugen Sie einen benutzerdefinierten Anbieter hinzu, um zu beginnen.',
     builtIn: 'Integriert',
     customType: 'Benutzerdefiniert',

packages/client/src/i18n/locales/en.ts

@@ -277,6 +277,9 @@ export default {
     nousApproved: 'Login successful',
     nousDenied: 'Authorization was denied. Please try again.',
     nousExpired: 'Authorization expired. Please try again.',
+    customBadge: 'CUSTOM',
+    customModelPlaceholder: 'Custom model name',
+    customModelHint: 'Enter to load',
     noProviders: 'No providers found. Add a custom provider to get started.',
     builtIn: 'Built-in',
     customType: 'Custom',

packages/client/src/i18n/locales/es.ts

@@ -252,6 +252,9 @@ export default {
     nousApproved: 'Inicio de sesión exitoso',
     nousDenied: 'Autorización denegada',
     nousExpired: 'Autorización expirada',
+    customBadge: 'PERSONALIZADO',
+    customModelPlaceholder: 'Nombre del modelo personalizado',
+    customModelHint: 'Enter para cargar',
     noProviders: 'No se encontraron proveedores. Anade un proveedor personalizado para comenzar.',
     builtIn: 'Integrado',
     customType: 'Personalizado',

packages/client/src/i18n/locales/fr.ts

@@ -252,6 +252,9 @@ export default {
     nousApproved: 'Connexion réussie',
     nousDenied: 'Autorisation refusée',
     nousExpired: 'Autorisation expirée',
+    customBadge: 'PERSONNALISÉ',
+    customModelPlaceholder: 'Nom du modèle personnalisé',
+    customModelHint: 'Entrée pour charger',
     noProviders: 'Aucun fournisseur trouve. Ajoutez un fournisseur personnalise pour commencer.',
     builtIn: 'Integre',
     customType: 'Personnalise',

packages/client/src/i18n/locales/ja.ts

@@ -252,6 +252,9 @@ export default {
     nousApproved: 'ログイン成功',
     nousDenied: '認証が拒否されました',
     nousExpired: '認証の有効期限が切れました',
+    customBadge: 'カスタム',
+    customModelPlaceholder: 'カスタムモデル名',
+    customModelHint: 'Enterで読み込み',
     noProviders: 'プロバイダーがありません。カスタムプロバイダーを追加して始めましょう。',
     builtIn: '組み込み',
     customType: 'カスタム',

packages/client/src/i18n/locales/ko.ts

@@ -252,6 +252,9 @@ export default {
     nousApproved: '로그인 성공',
     nousDenied: '인증이 거부되었습니다',
     nousExpired: '인증이 만료되었습니다',
+    customBadge: '커스텀',
+    customModelPlaceholder: '사용자 지정 모델 이름',
+    customModelHint: 'Enter로 불러오기',
     noProviders: 'Provider가 없습니다. 사용자 지정 Provider를 추가하여 시작하세요.',
     builtIn: '내장',
     customType: '사용자 지정',

packages/client/src/i18n/locales/pt.ts

@@ -252,6 +252,9 @@ export default {
     nousApproved: 'Login bem-sucedido',
     nousDenied: 'Autorização negada',
     nousExpired: 'Autorização expirada',
+    customBadge: 'PERSONALIZADO',
+    customModelPlaceholder: 'Nome do modelo personalizado',
+    customModelHint: 'Enter para carregar',
     noProviders: 'Nenhum provedor encontrado. Adicione um provedor personalizado para comecar.',
     builtIn: 'Integrado',
     customType: 'Personalizado',

packages/client/src/i18n/locales/zh.ts

@@ -277,6 +277,9 @@ export default {
     nousApproved: '登录成功',
     nousDenied: '授权被拒绝，请重试。',
     nousExpired: '授权已过期，请重试。',
+    customBadge: '自定义',
+    customModelPlaceholder: '自定义模型名称',
+    customModelHint: '按回车加载',
     noProviders: '暂无 Provider，添加一个开始吧。',
     builtIn: '内置',
     customType: '自定义',

packages/client/src/stores/hermes/app.ts

@@ -19,6 +19,7 @@ export const useAppStore = defineStore('app', () => {
   const modelGroups = ref<AvailableModelGroup[]>([])
   const selectedModel = ref('')
   const selectedProvider = ref('')
+  const customModels = ref<Record<string, string[]>>({})
   const healthPollTimer = ref<ReturnType<typeof setInterval>>()
   const nodeVersion = ref('')
 
@@ -73,6 +74,13 @@ export const useAppStore = defineStore('app', () => {
       await updateDefaultModel({ default: modelId, provider })
       selectedModel.value = modelId
       selectedProvider.value = provider || ''
+      // Track as custom if not already in the server-fetched list
+      if (provider && !modelGroups.value.find(g => g.provider === provider)?.models.includes(modelId)) {
+        if (!customModels.value[provider]) customModels.value[provider] = []
+        if (!customModels.value[provider].includes(modelId)) {
+          customModels.value[provider] = [...customModels.value[provider], modelId]
+        }
+      }
     } catch (err: any) {
       console.error('Failed to switch model:', err)
     }
@@ -122,6 +130,7 @@ export const useAppStore = defineStore('app', () => {
     updating,
     doUpdate,
     modelGroups,
+    customModels,
     selectedModel,
     selectedProvider,
     streamEnabled,

packages/server/src/controllers/hermes/models.ts

@@ -83,7 +83,7 @@ export async function getAvailable(ctx: any) {
         const builtinPreset = PROVIDER_PRESETS.find(p => p.value === bareKey)
         let models = builtinPreset?.models?.length ? [...builtinPreset.models] : [cp.model]
         if (cp.api_key) {
-          try { const fetched = await fetchProviderModels(baseUrl, cp.api_key); if (fetched.length > 0) models = fetched } catch { }
+          try { const fetched = await fetchProviderModels(baseUrl, cp.api_key); if (fetched.length > 0) models = [...new Set([cp.model, ...fetched])] } catch { }
         }
         const label = builtinPreset?.label || cp.name
         const presetBaseUrl = builtinPreset?.base_url || ''