From 33fd2a16e60677570bcdaa854d90d99bb05f0cad Mon Sep 17 00:00:00 2001
From: "dayuan.jiang" <jdy.toh@gmail.com>
Date: Mon, 22 Dec 2025 21:57:02 +0900
Subject: [PATCH] fix: improve duplicate model ID notifications

- Add toast notification when trying to add duplicate model
- Allow free typing when editing model ID, validate on blur
- Show warning toast instead of blocking input
---
 components/model-config-dialog.tsx | 44 ++++++++++++++++++------------
 1 file changed, 27 insertions(+), 17 deletions(-)

diff --git a/components/model-config-dialog.tsx b/components/model-config-dialog.tsx
index 0fd28c3..99db30d 100644
--- a/components/model-config-dialog.tsx
+++ b/components/model-config-dialog.tsx
@@ -21,6 +21,7 @@ import {
     Zap,
 } from "lucide-react"
 import { useCallback, useEffect, useRef, useState } from "react"
+import { toast } from "sonner"
 import {
     AlertDialog,
     AlertDialogAction,
@@ -264,7 +265,8 @@ export function ModelConfigDialog({
         if (!selectedProviderId || !selectedProvider) return
         // Prevent duplicate model IDs
         if (existingModelIds.includes(modelId)) {
-            return // Model already exists, don't add
+            toast.warning(`Model "${modelId}" already exists in this provider`)
+            return
         }
         addModel(selectedProviderId, modelId)
     }
@@ -1189,11 +1191,28 @@ export function ModelConfigDialog({
                                                                             }
                                                                             onChange={(
                                                                                 e,
+                                                                            ) => {
+                                                                                // Allow free typing - validation happens on blur
+                                                                                updateModel(
+                                                                                    selectedProviderId!,
+                                                                                    model.id,
+                                                                                    {
+                                                                                        modelId:
+                                                                                            e
+                                                                                                .target
+                                                                                                .value,
+                                                                                        validated:
+                                                                                            undefined,
+                                                                                        validationError:
+                                                                                            undefined,
+                                                                                    },
+                                                                                )
+                                                                            }}
+                                                                            onBlur={(
+                                                                                e,
                                                                             ) => {
                                                                                 const newModelId =
-                                                                                    e
-                                                                                        .target
-                                                                                        .value
+                                                                                    e.target.value.trim()
                                                                                 // Check if new ID would be duplicate (excluding current model)
                                                                                 const otherModelIds =
                                                                                     selectedProvider?.models
@@ -1212,24 +1231,15 @@ export function ModelConfigDialog({
                                                                                         ) ||
                                                                                     []
                                                                                 if (
+                                                                                    newModelId &&
                                                                                     otherModelIds.includes(
                                                                                         newModelId,
                                                                                     )
                                                                                 ) {
-                                                                                    return // Don't allow duplicate
+                                                                                    toast.warning(
+                                                                                        `Model "${newModelId}" already exists. Please use a unique ID.`,
+                                                                                    )
                                                                                 }
-                                                                                updateModel(
-                                                                                    selectedProviderId!,
-                                                                                    model.id,
-                                                                                    {
-                                                                                        modelId:
-                                                                                            newModelId,
-                                                                                        validated:
-                                                                                            undefined,
-                                                                                        validationError:
-                                                                                            undefined,
-                                                                                    },
-                                                                                )
                                                                             }}
                                                                             className="flex-1 min-w-0 font-mono text-sm h-8 border-0 bg-transparent focus-visible:bg-background focus-visible:ring-1"
                                                                         />