From 9cb14eef522da26dadd6d01150fd44ca42347eab Mon Sep 17 00:00:00 2001
From: SiYue-ZO <2835601846@qq.com>
Date: Wed, 6 May 2026 18:11:38 +0800
Subject: [PATCH] fix(web): add credential warning for catalog imports from
 remote providers

When importing models from a catalog entry whose provider requires an API
key, a yellow warning banner now informs users that credentials will need
to be configured after import.
---
 .../src/components/models/catalog-dialog.tsx  | 67 +++++++++++--------
 web/frontend/src/i18n/locales/en.json         |  3 +-
 web/frontend/src/i18n/locales/zh.json         |  5 +-
 3 files changed, 43 insertions(+), 32 deletions(-)

diff --git a/web/frontend/src/components/models/catalog-dialog.tsx b/web/frontend/src/components/models/catalog-dialog.tsx
index 6fabb0fad..9fe7283c4 100644
--- a/web/frontend/src/components/models/catalog-dialog.tsx
+++ b/web/frontend/src/components/models/catalog-dialog.tsx
@@ -28,6 +28,7 @@ import { Input } from "@/components/ui/input"
 import { refreshGatewayState } from "@/store/gateway"
 
 import { getProviderLabel } from "./provider-label"
+import { PROVIDER_MAP } from "./provider-registry"
 
 interface CatalogDialogProps {
   open: boolean
@@ -89,7 +90,9 @@ export function CatalogDialog({
       const next = new Map(prev)
       const current = next.get(catalogId) || new Set()
       const filtered = filter
-        ? models.filter((m) => m.id.toLowerCase().includes(filter.toLowerCase()))
+        ? models.filter((m) =>
+            m.id.toLowerCase().includes(filter.toLowerCase()),
+          )
         : models
       if (filtered.every((m) => current.has(m.id))) {
         next.set(catalogId, new Set())
@@ -159,14 +162,14 @@ export function CatalogDialog({
 
         <div className="space-y-3">
           {loading && (
-            <div className="flex items-center justify-center gap-2 py-8 text-muted-foreground">
+            <div className="text-muted-foreground flex items-center justify-center gap-2 py-8">
               <IconLoader2 className="size-5 animate-spin" />
               <span>{t("models.catalog.loading")}</span>
             </div>
           )}
 
           {!loading && entries.length === 0 && (
-            <div className="py-8 text-center text-sm text-muted-foreground">
+            <div className="text-muted-foreground py-8 text-center text-sm">
               {t("models.catalog.empty")}
             </div>
           )}
@@ -189,27 +192,27 @@ export function CatalogDialog({
               return (
                 <div
                   key={entry.id}
-                  className="rounded-lg border bg-card text-card-foreground"
+                  className="bg-card text-card-foreground rounded-lg border"
                 >
                   <div
-                    className="flex cursor-pointer items-center gap-3 px-3 py-2.5 hover:bg-accent/50"
+                    className="hover:bg-accent/50 flex cursor-pointer items-center gap-3 px-3 py-2.5"
                     onClick={() => toggleExpand(entry.id)}
                   >
                     {isExpanded ? (
-                      <IconChevronDown className="size-4 shrink-0 text-muted-foreground" />
+                      <IconChevronDown className="text-muted-foreground size-4 shrink-0" />
                     ) : (
-                      <IconChevronRight className="size-4 shrink-0 text-muted-foreground" />
+                      <IconChevronRight className="text-muted-foreground size-4 shrink-0" />
                     )}
                     <div className="min-w-0 flex-1">
                       <div className="flex items-center gap-2">
                         <span className="text-sm font-medium">
                           {getProviderLabel(entry.provider)}
                         </span>
-                        <span className="font-mono text-xs text-muted-foreground">
+                        <span className="text-muted-foreground font-mono text-xs">
                           {entry.api_key_mask}
                         </span>
                       </div>
-                      <div className="flex items-center gap-2 text-xs text-muted-foreground">
+                      <div className="text-muted-foreground flex items-center gap-2 text-xs">
                         <span>
                           {entry.models.length} {t("models.catalog.models")}
                         </span>
@@ -234,7 +237,7 @@ export function CatalogDialog({
                       <Button
                         variant="ghost"
                         size="icon"
-                        className="size-7 text-destructive"
+                        className="text-destructive size-7"
                         onClick={(e) => {
                           e.stopPropagation()
                           handleDelete(entry.id)
@@ -248,7 +251,7 @@ export function CatalogDialog({
 
                   {isExpanded && (
                     <div className="border-t px-3 py-2">
-                      <div className="mb-1.5 flex items-center justify-between text-xs text-muted-foreground">
+                      <div className="text-muted-foreground mb-1.5 flex items-center justify-between text-xs">
                         <span>
                           {t("models.catalog.found", {
                             count: filteredModels.length,
@@ -259,9 +262,7 @@ export function CatalogDialog({
                           onClick={() => toggleAll(entry.id, entry.models)}
                           className="text-primary hover:underline"
                         >
-                          {filteredModels.every((m) =>
-                            entrySelected.has(m.id),
-                          )
+                          {filteredModels.every((m) => entrySelected.has(m.id))
                             ? t("models.catalog.deselectAll")
                             : t("models.catalog.selectAll")}
                         </button>
@@ -270,7 +271,7 @@ export function CatalogDialog({
                         {filteredModels.map((m) => (
                           <label
                             key={m.id}
-                            className="flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-sm hover:bg-accent"
+                            className="hover:bg-accent flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-sm"
                           >
                             <input
                               type="checkbox"
@@ -280,7 +281,7 @@ export function CatalogDialog({
                             />
                             <span className="font-mono text-xs">{m.id}</span>
                             {m.owned_by && (
-                              <span className="ml-auto text-xs text-muted-foreground">
+                              <span className="text-muted-foreground ml-auto text-xs">
                                 {m.owned_by}
                               </span>
                             )}
@@ -288,19 +289,27 @@ export function CatalogDialog({
                         ))}
                       </div>
                       {entrySelected.size > 0 && (
-                        <div className="mt-2 flex justify-end">
-                          <Button
-                            size="sm"
-                            onClick={() => handleAddSelected(entry)}
-                            disabled={adding}
-                          >
-                            {adding && (
-                              <IconLoader2 className="mr-1 size-3 animate-spin" />
-                            )}
-                            {t("models.catalog.addSelected", {
-                              count: entrySelected.size,
-                            })}
-                          </Button>
+                        <div className="mt-2 space-y-2">
+                          {PROVIDER_MAP.get(entry.provider)?.requiresApiKey !==
+                            false && (
+                            <div className="rounded-lg border border-yellow-500/30 bg-yellow-500/10 p-2 text-xs text-yellow-700 dark:text-yellow-400">
+                              {t("models.catalog.needApiKey")}
+                            </div>
+                          )}
+                          <div className="flex justify-end">
+                            <Button
+                              size="sm"
+                              onClick={() => handleAddSelected(entry)}
+                              disabled={adding}
+                            >
+                              {adding && (
+                                <IconLoader2 className="mr-1 size-3 animate-spin" />
+                              )}
+                              {t("models.catalog.addSelected", {
+                                count: entrySelected.size,
+                              })}
+                            </Button>
+                          </div>
                         </div>
                       )}
                     </div>
diff --git a/web/frontend/src/i18n/locales/en.json b/web/frontend/src/i18n/locales/en.json
index 61b1eb55e..d6335d6dc 100644
--- a/web/frontend/src/i18n/locales/en.json
+++ b/web/frontend/src/i18n/locales/en.json
@@ -345,7 +345,8 @@
       "selectAll": "Select All",
       "deselectAll": "Deselect All",
       "addSelected": "Add {{count}} Selected",
-      "addSuccess": "Added {{count}} model(s) to configuration."
+      "addSuccess": "Added {{count}} model(s) to configuration.",
+      "needApiKey": "These models require an API key. You'll need to configure credentials after import."
     },
     "test": {
       "title": "Test Model Connectivity",
diff --git a/web/frontend/src/i18n/locales/zh.json b/web/frontend/src/i18n/locales/zh.json
index 727587d89..f9e733a50 100644
--- a/web/frontend/src/i18n/locales/zh.json
+++ b/web/frontend/src/i18n/locales/zh.json
@@ -347,7 +347,8 @@
       "selectAll": "全选",
       "deselectAll": "取消全选",
       "addSelected": "添加 {{count}} 个选中模型",
-      "addSuccess": "已添加 {{count}} 个模型到配置中。"
+      "addSuccess": "已添加 {{count}} 个模型到配置中。",
+      "needApiKey": "这些模型需要 API Key。导入后需要配置凭证才能使用。"
     },
     "test": {
       "title": "测试模型连通性",
@@ -828,4 +829,4 @@
       "description": "需要更多帮助？点击右上角的文档按钮，查看详细的使用文档和配置指南。"
     }
   }
-}
\ No newline at end of file
+}