feat: add toggle to show unvalidated models in model selector (#413)

* feat: add toggle to show unvalidated models in model selector Add a toggle switch in the model configuration dialog to allow users to display models that haven't been validated. This helps users who work with model providers that have disabled their verification endpoints. Changes: - Add showUnvalidatedModels field to MultiModelConfig type - Add setShowUnvalidatedModels method to useModelConfig hook - Add Switch toggle in model-config-dialog footer - Update model-selector to filter based on showUnvalidatedModels setting - Add warning icon for unvalidated models in the selector - Add i18n translations for en/zh/ja Closes #410 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com> * fix: wrap AlertTriangle in span for title attribute The AlertTriangle icon from lucide-react doesn't support the title prop directly. Wrapped it in a span element to properly display the tooltip. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-02 22:32:27 +08:00 · 2025-12-26 11:19:59 +08:00
parent 067d309927
commit 31644dbcd8
9 changed files with 79 additions and 17 deletions
--- a/components/chat-input.tsx
+++ b/components/chat-input.tsx
@@ -162,6 +162,7 @@ interface ChatInputProps {
    models?: FlattenedModel[]
    selectedModelId?: string
    onModelSelect?: (modelId: string | undefined) => void
+    showUnvalidatedModels?: boolean
    onConfigureModels?: () => void
 }

@@ -183,6 +184,7 @@ export function ChatInput({
    models = [],
    selectedModelId,
    onModelSelect = () => {},
+    showUnvalidatedModels = false,
    onConfigureModels = () => {},
 }: ChatInputProps) {
    const dict = useDictionary()
@@ -482,6 +484,7 @@ export function ChatInput({
                            onSelect={onModelSelect}
                            onConfigure={onConfigureModels}
                            disabled={isDisabled}
+                            showUnvalidatedModels={showUnvalidatedModels}
                        />

                        <div className="w-px h-5 bg-border mx-1" />
--- a/components/chat-panel.tsx
+++ b/components/chat-panel.tsx
@@ -1071,6 +1071,7 @@ export default function ChatPanel({
                    models={modelConfig.models}
                    selectedModelId={modelConfig.selectedModelId}
                    onModelSelect={modelConfig.setSelectedModelId}
+                    showUnvalidatedModels={modelConfig.showUnvalidatedModels}
                    onConfigureModels={() => setShowModelConfigDialog(true)}
                />
            </footer>
--- a/components/model-config-dialog.tsx
+++ b/components/model-config-dialog.tsx
@@ -50,6 +50,7 @@ import {
    SelectTrigger,
    SelectValue,
 } from "@/components/ui/select"
+import { Switch } from "@/components/ui/switch"
 import { useDictionary } from "@/hooks/use-dictionary"
 import type { UseModelConfigReturn } from "@/hooks/use-model-config"
 import { formatMessage } from "@/lib/i18n/utils"
@@ -1447,10 +1448,23 @@ export function ModelConfigDialog({

                {/* Footer */}
                <div className="px-6 py-3 border-t border-border-subtle bg-surface-1/30 shrink-0">
-                    <p className="text-xs text-muted-foreground text-center flex items-center justify-center gap-1.5">
-                        <Key className="h-3 w-3" />
-                        {dict.modelConfig.apiKeyStored}
-                    </p>
+                    <div className="flex items-center justify-between">
+                        <div className="flex items-center gap-2">
+                            <Switch
+                                checked={modelConfig.showUnvalidatedModels}
+                                onCheckedChange={
+                                    modelConfig.setShowUnvalidatedModels
+                                }
+                            />
+                            <Label className="text-xs text-muted-foreground cursor-pointer">
+                                {dict.modelConfig.showUnvalidatedModels}
+                            </Label>
+                        </div>
+                        <p className="text-xs text-muted-foreground flex items-center gap-1.5">
+                            <Key className="h-3 w-3" />
+                            {dict.modelConfig.apiKeyStored}
+                        </p>
+                    </div>
                </div>
            </DialogContent>

--- a/components/model-selector.tsx
+++ b/components/model-selector.tsx
@@ -1,6 +1,13 @@
 "use client"

-import { Bot, Check, ChevronDown, Server, Settings2 } from "lucide-react"
+import {
+    AlertTriangle,
+    Bot,
+    Check,
+    ChevronDown,
+    Server,
+    Settings2,
+} from "lucide-react"
 import { useMemo, useState } from "react"
 import {
    ModelSelectorContent,
@@ -26,6 +33,7 @@ interface ModelSelectorProps {
    onSelect: (modelId: string | undefined) => void
    onConfigure: () => void
    disabled?: boolean
+    showUnvalidatedModels?: boolean
 }

 // Map our provider names to models.dev logo names
@@ -67,17 +75,20 @@ export function ModelSelector({
    onSelect,
    onConfigure,
    disabled = false,
+    showUnvalidatedModels = false,
 }: ModelSelectorProps) {
    const dict = useDictionary()
    const [open, setOpen] = useState(false)
-    // Only show validated models in the selector
-    const validatedModels = useMemo(
-        () => models.filter((m) => m.validated === true),
-        [models],
-    )
+    // Filter models based on showUnvalidatedModels setting
+    const displayModels = useMemo(() => {
+        if (showUnvalidatedModels) {
+            return models
+        }
+        return models.filter((m) => m.validated === true)
+    }, [models, showUnvalidatedModels])
    const groupedModels = useMemo(
-        () => groupModelsByProvider(validatedModels),
-        [validatedModels],
+        () => groupModelsByProvider(displayModels),
+        [displayModels],
    )

    // Find selected model for display
@@ -126,7 +137,7 @@ export function ModelSelector({
                />
                <ModelSelectorList className="[&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]">
                    <ModelSelectorEmpty>
-                        {validatedModels.length === 0 && models.length > 0
+                        {displayModels.length === 0 && models.length > 0
                            ? dict.modelConfig.noVerifiedModels
                            : dict.modelConfig.noModelsFound}
                    </ModelSelectorEmpty>
@@ -191,6 +202,16 @@ export function ModelSelector({
                                        <ModelSelectorName>
                                            {model.modelId}
                                        </ModelSelectorName>
+                                        {model.validated !== true && (
+                                            <span
+                                                title={
+                                                    dict.modelConfig
+                                                        .unvalidatedModelWarning
+                                                }
+                                            >
+                                                <AlertTriangle className="ml-auto h-3 w-3 text-warning" />
+                                            </span>
+                                        )}
                                    </ModelSelectorItem>
                                ))}
                            </ModelSelectorGroup>
@@ -213,7 +234,9 @@ export function ModelSelector({
                    </ModelSelectorGroup>
                    {/* Info text */}
                    <div className="px-3 py-2 text-xs text-muted-foreground border-t">
-                        {dict.modelConfig.onlyVerifiedShown}
+                        {showUnvalidatedModels
+                            ? dict.modelConfig.allModelsShown
+                            : dict.modelConfig.onlyVerifiedShown}
                    </div>
                </ModelSelectorList>
            </ModelSelectorContent>
--- a/hooks/use-model-config.ts
+++ b/hooks/use-model-config.ts
@@ -109,9 +109,11 @@ export interface UseModelConfigReturn {
    models: FlattenedModel[]
    selectedModel: FlattenedModel | undefined
    selectedModelId: string | undefined
+    showUnvalidatedModels: boolean

    // Actions
    setSelectedModelId: (modelId: string | undefined) => void
+    setShowUnvalidatedModels: (show: boolean) => void
    addProvider: (provider: ProviderName) => ProviderConfig
    updateProvider: (
        providerId: string,
@@ -160,6 +162,13 @@ export function useModelConfig(): UseModelConfigReturn {
        }))
    }, [])

+    const setShowUnvalidatedModels = useCallback((show: boolean) => {
+        setConfig((prev) => ({
+            ...prev,
+            showUnvalidatedModels: show,
+        }))
+    }, [])
+
    const addProvider = useCallback(
        (provider: ProviderName): ProviderConfig => {
            const newProvider = createProviderConfig(provider)
@@ -278,7 +287,9 @@ export function useModelConfig(): UseModelConfigReturn {
        models,
        selectedModel,
        selectedModelId: config.selectedModelId,
+        showUnvalidatedModels: config.showUnvalidatedModels ?? false,
        setSelectedModelId,
+        setShowUnvalidatedModels,
        addProvider,
        updateProvider,
        deleteProvider,
--- a/lib/i18n/dictionaries/en.json
+++ b/lib/i18n/dictionaries/en.json
@@ -243,6 +243,9 @@
        "default": "Default",
        "serverDefault": "Server Default",
        "configureModels": "Configure Models...",
-        "onlyVerifiedShown": "Only verified models are shown"
+        "onlyVerifiedShown": "Only verified models are shown",
+        "showUnvalidatedModels": "Show unvalidated models",
+        "allModelsShown": "All models are shown (including unvalidated)",
+        "unvalidatedModelWarning": "This model has not been validated"
    }
 }
--- a/lib/i18n/dictionaries/ja.json
+++ b/lib/i18n/dictionaries/ja.json
@@ -243,6 +243,9 @@
        "default": "デフォルト",
        "serverDefault": "サーバーデフォルト",
        "configureModels": "モデルを設定...",
-        "onlyVerifiedShown": "検証済みのモデルのみ表示"
+        "onlyVerifiedShown": "検証済みのモデルのみ表示",
+        "showUnvalidatedModels": "未検証のモデルを表示",
+        "allModelsShown": "すべてのモデルを表示（未検証を含む）",
+        "unvalidatedModelWarning": "このモデルは検証されていません"
    }
 }
--- a/lib/i18n/dictionaries/zh.json
+++ b/lib/i18n/dictionaries/zh.json
@@ -243,6 +243,9 @@
        "default": "默认",
        "serverDefault": "服务器默认",
        "configureModels": "配置模型...",
-        "onlyVerifiedShown": "仅显示已验证的模型"
+        "onlyVerifiedShown": "仅显示已验证的模型",
+        "showUnvalidatedModels": "显示未验证的模型",
+        "allModelsShown": "显示所有模型（包括未验证的）",
+        "unvalidatedModelWarning": "此模型尚未验证"
    }
 }
--- a/lib/types/model-config.ts
+++ b/lib/types/model-config.ts
@@ -40,6 +40,7 @@ export interface MultiModelConfig {
    version: 1
    providers: ProviderConfig[]
    selectedModelId?: string // Currently selected model's UUID
+    showUnvalidatedModels?: boolean // Show models that haven't been validated
 }

 // Flattened model for dropdown display