From 3e1963564a58a325a748c2f3310079a35baa4697 Mon Sep 17 00:00:00 2001
From: musistudio <m@musiiot.top>
Date: Wed, 6 Aug 2025 21:11:44 +0800
Subject: [PATCH] fix ui: add form validator

---
 src/utils/router.ts             |  2 +-
 ui/src/components/Providers.tsx | 21 +++++++++++++++++++--
 ui/src/locales/en.json          |  5 +++--
 ui/src/locales/zh.json          |  7 ++++---
 4 files changed, 27 insertions(+), 8 deletions(-)

diff --git a/src/utils/router.ts b/src/utils/router.ts
index d78ee95..d3683dc 100644
--- a/src/utils/router.ts
+++ b/src/utils/router.ts
@@ -69,7 +69,7 @@ const getUseModel = async (req: any, tokenCount: number, config: any) => {
       (p: any) => p.name.toLowerCase() === provider
     );
     const finalModel = finalProvider?.models?.find(
-      (m: any) => m.name.toLowerCase() === model
+      (m: any) => m.toLowerCase() === model
     );
     if (finalProvider && finalModel) {
       return `${finalProvider.name},${finalModel}`;
diff --git a/ui/src/components/Providers.tsx b/ui/src/components/Providers.tsx
index 7aba55c..6a43bd7 100644
--- a/ui/src/components/Providers.tsx
+++ b/ui/src/components/Providers.tsx
@@ -36,6 +36,7 @@ export function Providers() {
   const [isNewProvider, setIsNewProvider] = useState<boolean>(false);
   const [providerTemplates, setProviderTemplates] = useState<ProviderType[]>([]);
   const [showApiKey, setShowApiKey] = useState<Record<number, boolean>>({});
+  const [apiKeyError, setApiKeyError] = useState<string | null>(null);
   const comboInputRef = useRef<HTMLInputElement>(null);
 
   useEffect(() => {
@@ -93,11 +94,12 @@ export function Providers() {
     setEditingProviderIndex(config.Providers.length);
     setEditingProviderData(newProvider);
     setIsNewProvider(true);
-    // Reset API key visibility when adding new provider
+    // Reset API key visibility and error when adding new provider
     setShowApiKey(prev => ({
       ...prev,
       [config.Providers.length]: false
     }));
+    setApiKeyError(null);
   };
 
   const handleEditProvider = (index: number) => {
@@ -105,14 +107,24 @@ export function Providers() {
     setEditingProviderIndex(index);
     setEditingProviderData(JSON.parse(JSON.stringify(provider))); // 深拷贝
     setIsNewProvider(false);
-    // Reset API key visibility when opening edit dialog
+    // Reset API key visibility and error when opening edit dialog
     setShowApiKey(prev => ({
       ...prev,
       [index]: false
     }));
+    setApiKeyError(null);
   };
 
   const handleSaveProvider = () => {
+    // Validate API key
+    if (!editingProviderData || !editingProviderData.api_key || editingProviderData.api_key.trim() === '') {
+      setApiKeyError(t("providers.api_key_required"));
+      return;
+    }
+    
+    // Clear error if validation passes
+    setApiKeyError(null);
+    
     if (editingProviderIndex !== null && editingProviderData) {
       const newProviders = [...config.Providers];
       if (isNewProvider) {
@@ -153,6 +165,7 @@ export function Providers() {
     setEditingProviderIndex(null);
     setEditingProviderData(null);
     setIsNewProvider(false);
+    setApiKeyError(null);
   };
 
   const handleRemoveProvider = (index: number) => {
@@ -500,6 +513,7 @@ export function Providers() {
                     type={showApiKey[editingProviderIndex || 0] ? "text" : "password"} 
                     value={editingProvider.api_key || ''} 
                     onChange={(e) => handleProviderChange(editingProviderIndex, 'api_key', e.target.value)} 
+                    className={apiKeyError ? "border-red-500" : ""}
                   />
                   <Button
                     type="button"
@@ -521,6 +535,9 @@ export function Providers() {
                     )}
                   </Button>
                 </div>
+                {apiKeyError && (
+                  <p className="text-sm text-red-500">{apiKeyError}</p>
+                )}
               </div>
               <div className="space-y-2">
                 <Label htmlFor="models">{t("providers.models")}</Label>
diff --git a/ui/src/locales/en.json b/ui/src/locales/en.json
index 9cf93fa..2287218 100644
--- a/ui/src/locales/en.json
+++ b/ui/src/locales/en.json
@@ -48,7 +48,7 @@
   "providers": {
     "title": "Providers",
     "name": "Name",
-    "api_base_url": "API Base URL",
+    "api_base_url": "API Full URL",
     "api_key": "API Key",
     "models": "Models",
     "models_placeholder": "Enter model name and press Enter to add",
@@ -80,7 +80,8 @@
     "selected_transformers": "Selected Transformers",
     "import_from_template": "Import from template",
     "no_templates_found": "No templates found",
-    "select_template": "Select a template..."
+    "select_template": "Select a template...",
+    "api_key_required": "API Key is required"
 
   },
   "router": {
diff --git a/ui/src/locales/zh.json b/ui/src/locales/zh.json
index 3a4828e..6965a4d 100644
--- a/ui/src/locales/zh.json
+++ b/ui/src/locales/zh.json
@@ -48,7 +48,7 @@
   "providers": {
     "title": "供应商",
     "name": "名称",
-    "api_base_url": "API 基础地址",
+    "api_base_url": "API 完整地址",
     "api_key": "API 密钥",
     "models": "模型",
     "models_placeholder": "输入模型名称并按回车键添加",
@@ -80,7 +80,8 @@
     "selected_transformers": "已选转换器",
     "import_from_template": "从模板导入",
     "no_templates_found": "未找到模板",
-    "select_template": "选择一个模板..."
+    "select_template": "选择一个模板...",
+    "api_key_required": "API 密钥为必填项"
 
   },
   "router": {
@@ -103,4 +104,4 @@
     "save_failed": "配置保存失败",
     "save_and_restart": "保存并重启"
   }
-}
\ No newline at end of file
+}