Revert "Udpate for model setting design" (#1302)

src/i18n/locales/en-us/setting.json

@@ -165,8 +165,6 @@
   "reset-success": "Reset successfully!",
   "reset-failed": "Reset failed!",
   "select-default-model": "Select Default Model",
-  "api-key-expired-or-invalid": "API key is expired or invalid. Please reconfigure.",
-  "model-disconnected-or-invalid": "Model is disconnected or not responding. Please check your connection.",
 
   "browser-login": "Browser Login",
   "browser-login-description": "Open a Chrome browser to log in to your accounts. Your login data will be saved locally in a secure profile.",

src/i18n/locales/zh-Hans/setting.json

@@ -164,8 +164,6 @@
   "reset": "重置",
   "reset-success": "重置成功！",
   "reset-failed": "重置失败！",
-  "api-key-expired-or-invalid": "API 密钥已过期或无效，请重新配置。",
-  "model-disconnected-or-invalid": "模型已断开连接或无响应，请检查连接。",
 
   "browser-login": "浏览器登录",
   "browser-login-description": "打开 Chrome 浏览器以登录您的账户。您的登录数据将安全地保存在本地配置文件中。",

src/pages/Setting/Models.tsx

@@ -46,7 +46,6 @@ import { INIT_PROVODERS } from '@/lib/llm';
 import { useAuthStore } from '@/store/authStore';
 import { Provider } from '@/types';
 import {
-  AlertCircle,
   Check,
   ChevronDown,
   ChevronUp,
@@ -126,12 +125,6 @@ export default function SettingModels() {
     res?.detail?.error?.message ??
     res?.error?.message ??
     t('setting.validate-failed');
-  const apiKeyInvalidText = t('setting.api-key-expired-or-invalid', {
-    defaultValue: t('setting.validate-failed'),
-  });
-  const localModelInvalidText = t('setting.model-disconnected-or-invalid', {
-    defaultValue: t('setting.validate-failed'),
-  });
   const [items, _setItems] = useState<Provider[]>(
     INIT_PROVODERS.filter((p) => p.id !== 'local')
   );
@@ -189,7 +182,6 @@ export default function SettingModels() {
   const [localProviderIds, setLocalProviderIds] = useState<
     Record<string, number | undefined>
   >({});
-  const [localIsValid, setLocalIsValid] = useState<Record<string, boolean>>({});
   const [localVerifying, setLocalVerifying] = useState(false);
   const [localError, setLocalError] = useState<string | null>(null);
   const [localInputError, setLocalInputError] = useState(false);
@@ -279,7 +271,6 @@ export default function SettingModels() {
         const endpoints: Record<string, string> = {};
         const types: Record<string, string> = {};
         const providerIds: Record<string, number | undefined> = {};
-        const isValidMap: Record<string, boolean> = {};
 
         localProviders.forEach((local: any) => {
           const platform =
@@ -290,7 +281,6 @@ export default function SettingModels() {
             (platform === 'ollama' ? DEFAULT_OLLAMA_ENDPOINT : '');
           types[platform] = local.encrypted_config?.model_type || '';
           providerIds[platform] = local.id;
-          isValidMap[platform] = !!local.is_valid;
 
           // Set prefer state if any local model is preferred
           if (local.prefer) {
@@ -302,7 +292,6 @@ export default function SettingModels() {
         setLocalEndpoints(endpoints);
         setLocalTypes(types);
         setLocalProviderIds(providerIds);
-        setLocalIsValid(isValidMap);
 
         // Fetch Ollama models if ollama endpoint is set
         const ollamaEndpoint = endpoints['ollama'] || DEFAULT_OLLAMA_ENDPOINT;
@@ -396,10 +385,10 @@ export default function SettingModels() {
     }
     if (category === 'custom') {
       const idx = items.findIndex((item) => item.id === modelId);
-      return idx !== -1 && !!form[idx]?.provider_id && !!form[idx]?.is_valid;
+      return idx !== -1 && !!form[idx]?.provider_id;
     }
     if (category === 'local') {
-      return !!localProviderIds[modelId] && !!localIsValid[modelId];
+      return !!localProviderIds[modelId];
     }
     return false;
   };
@@ -570,7 +559,7 @@ export default function SettingModels() {
       provider_name: item.id,
       api_key: form[idx].apiKey,
       endpoint_url: form[idx].apiHost,
-      is_valid: true,
+      is_valid: form[idx].is_valid,
       model_type: form[idx].model_type,
     };
     if (externalConfig) {
@@ -770,10 +759,6 @@ export default function SettingModels() {
       );
       if (local) {
         setLocalProviderIds((prev) => ({ ...prev, [localPlatform]: local.id }));
-        setLocalIsValid((prev) => ({
-          ...prev,
-          [localPlatform]: !!local.is_valid,
-        }));
         setLocalPrefer(local.prefer ?? false);
 
         // Check if this was a pending default model selection
@@ -905,7 +890,6 @@ export default function SettingModels() {
       }));
       setLocalTypes((prev) => ({ ...prev, [localPlatform]: '' }));
       setLocalProviderIds((prev) => ({ ...prev, [localPlatform]: undefined }));
-      setLocalIsValid((prev) => ({ ...prev, [localPlatform]: false }));
       // Reset prefer state only if this platform was the preferred one
       if (localPrefer) {
         setLocalPrefer(false);
@@ -1047,15 +1031,13 @@ export default function SettingModels() {
   };
 
   // Helper to render sidebar tab item
-  // isConfigured: provider exists, isError: configured but invalid/expired
   const renderSidebarItem = (
     tabId: SidebarTab,
     label: string,
     modelId: string | null,
     isActive: boolean,
     isSubItem: boolean = false,
-    isConfigured: boolean = false,
-    isError: boolean = false
+    isConfigured: boolean = false
   ) => {
     const modelImage = getModelImage(modelId);
     const fallbackIcon =
@@ -1096,11 +1078,9 @@ export default function SettingModels() {
             {label}
           </span>
         </div>
-        {isConfigured && isError ? (
-          <AlertCircle className="m-0.5 h-3 w-3 text-text-error" />
-        ) : isConfigured ? (
+        {isConfigured && (
           <div className="m-1 h-2 w-2 rounded-full bg-text-success" />
-        ) : null}
+        )}
       </button>
     );
   };
@@ -1289,8 +1269,7 @@ export default function SettingModels() {
       if (idx === -1) return null;
 
       const item = items[idx];
-      const isConfigured = !!form[idx].provider_id;
-      const canSwitch = isConfigured && !!form[idx].is_valid;
+      const canSwitch = !!form[idx].provider_id;
 
       return (
         <div className="flex w-full flex-col rounded-2xl bg-surface-tertiary">
@@ -1316,23 +1295,12 @@ export default function SettingModels() {
                         : 'inline-flex items-center gap-1.5'
                     }
                   >
-                    {!isConfigured || !form[idx].is_valid
+                    {!canSwitch
                       ? t('setting.not-configured')
                       : t('setting.set-as-default')}
                   </Button>
                 )}
-                {form[idx].provider_id && !form[idx].is_valid ? (
-                  <Tooltip>
-                    <TooltipTrigger asChild>
-                      <span>
-                        <AlertCircle className="h-3 w-3 shrink-0 text-text-error" />
-                      </span>
-                    </TooltipTrigger>
-                    <TooltipContent side="top">
-                      {apiKeyInvalidText}
-                    </TooltipContent>
-                  </Tooltip>
-                ) : form[idx].provider_id ? (
+                {form[idx].provider_id ? (
                   <div className="h-2 w-2 shrink-0 rounded-full bg-text-success" />
                 ) : (
                   <div className="h-2 w-2 shrink-0 rounded-full bg-text-label opacity-10" />
@@ -1521,7 +1489,6 @@ export default function SettingModels() {
       const currentEndpoint = localEndpoints[platform] || '';
       const currentType = localTypes[platform] || '';
       const isConfigured = !!localProviderIds[platform];
-      const canSwitch = isConfigured && !!localIsValid[platform];
       const isPreferred = localPrefer && localPlatform === platform;
 
       return (
@@ -1552,32 +1519,21 @@ export default function SettingModels() {
                   <Button
                     variant="ghost"
                     size="xs"
-                    disabled={!canSwitch}
+                    disabled={!isConfigured}
                     onClick={() => handleLocalSwitch(true)}
                     className={
-                      canSwitch
+                      isConfigured
                         ? 'rounded-full bg-button-transparent-fill-hover !text-text-label shadow-none'
                         : ''
                     }
                   >
-                    {!canSwitch
+                    {!isConfigured
                       ? t('setting.not-configured')
                       : t('setting.set-as-default')}
                   </Button>
                 )}
               </div>
-              {isConfigured && !localIsValid[platform] ? (
-                <Tooltip>
-                  <TooltipTrigger asChild>
-                    <span>
-                      <AlertCircle className="h-3 w-3 text-text-error" />
-                    </span>
-                  </TooltipTrigger>
-                  <TooltipContent side="top">
-                    {localModelInvalidText}
-                  </TooltipContent>
-                </Tooltip>
-              ) : isConfigured ? (
+              {isConfigured ? (
                 <div className="h-2 w-2 rounded-full bg-text-success" />
               ) : (
                 <div className="h-2 w-2 rounded-full bg-text-label opacity-10" />
@@ -1751,7 +1707,7 @@ export default function SettingModels() {
       {/* Content Section */}
       <div className="mb-8 flex flex-col gap-6">
         {/* Default Model Cascading Dropdown */}
-        <div className="flex w-full flex-col items-end justify-start gap-4 rounded-2xl bg-surface-secondary px-6 py-4">
+        <div className="flex w-full flex-row items-center justify-between gap-4 rounded-2xl bg-surface-secondary px-6 py-4">
           <div className="flex w-full flex-col items-start justify-center gap-1">
             <div className="text-body-base font-bold text-text-heading">
               {t('setting.models-default-setting-title')}
@@ -1763,7 +1719,7 @@ export default function SettingModels() {
           <DropdownMenu>
             <DropdownMenuTrigger asChild>
               <button className="flex w-fit items-center justify-between gap-2 rounded-lg border-[0.5px] border-solid border-border-success bg-surface-success px-3 py-1 font-semibold text-text-success transition-colors hover:opacity-70 active:opacity-90">
-                <span className="break-words text-left text-body-sm">
+                <span className="whitespace-nowrap text-body-sm">
                   {getDefaultModelDisplayText()}
                 </span>
                 <ChevronDown className="h-4 w-4 flex-shrink-0 text-text-success" />
@@ -1845,17 +1801,12 @@ export default function SettingModels() {
                           {!isConfigured && (
                             <div className="h-2 w-2 rounded-full bg-text-label opacity-10" />
                           )}
-                          {isConfigured && !form[idx]?.is_valid && (
-                            <AlertCircle className="h-3 w-3 text-text-error" />
-                          )}
                           {isPreferred && (
                             <Check className="h-4 w-4 text-text-success" />
                           )}
-                          {isConfigured &&
-                            form[idx]?.is_valid &&
-                            !isPreferred && (
-                              <div className="h-2 w-2 rounded-full bg-text-success" />
-                            )}
+                          {isConfigured && !isPreferred && (
+                            <div className="h-2 w-2 rounded-full bg-text-success" />
+                          )}
                         </div>
                       </DropdownMenuItem>
                     );
@@ -1911,17 +1862,12 @@ export default function SettingModels() {
                           {!isConfigured && (
                             <div className="h-2 w-2 rounded-full bg-text-label opacity-10" />
                           )}
-                          {isConfigured && !localIsValid[model.id] && (
-                            <AlertCircle className="h-3 w-3 text-text-error" />
-                          )}
                           {isPreferred && (
                             <Check className="h-4 w-4 text-text-success" />
                           )}
-                          {isConfigured &&
-                            localIsValid[model.id] &&
-                            !isPreferred && (
-                              <div className="h-2 w-2 rounded-full bg-text-success" />
-                            )}
+                          {isConfigured && !isPreferred && (
+                            <div className="h-2 w-2 rounded-full bg-text-success" />
+                          )}
                         </div>
                       </DropdownMenuItem>
                     );
@@ -1986,8 +1932,7 @@ export default function SettingModels() {
                         item.id,
                         selectedTab === `byok-${item.id}`,
                         true,
-                        !!form[idx].provider_id,
-                        !!form[idx].provider_id && !form[idx].is_valid
+                        !!form[idx].provider_id
                       )
                     )}
                   </div>
@@ -2021,8 +1966,7 @@ export default function SettingModels() {
                       'local-ollama',
                       selectedTab === 'local-ollama',
                       true,
-                      !!localProviderIds['ollama'],
-                      !!localProviderIds['ollama'] && !localIsValid['ollama']
+                      !!localProviderIds['ollama']
                     )}
                     {renderSidebarItem(
                       'local-vllm',
@@ -2030,8 +1974,7 @@ export default function SettingModels() {
                       'local-vllm',
                       selectedTab === 'local-vllm',
                       true,
-                      !!localProviderIds['vllm'],
-                      !!localProviderIds['vllm'] && !localIsValid['vllm']
+                      !!localProviderIds['vllm']
                     )}
                     {renderSidebarItem(
                       'local-sglang',
@@ -2039,8 +1982,7 @@ export default function SettingModels() {
                       'local-sglang',
                       selectedTab === 'local-sglang',
                       true,
-                      !!localProviderIds['sglang'],
-                      !!localProviderIds['sglang'] && !localIsValid['sglang']
+                      !!localProviderIds['sglang']
                     )}
                     {renderSidebarItem(
                       'local-lmstudio',
@@ -2048,9 +1990,7 @@ export default function SettingModels() {
                       'local-lmstudio',
                       selectedTab === 'local-lmstudio',
                       true,
-                      !!localProviderIds['lmstudio'],
-                      !!localProviderIds['lmstudio'] &&
-                        !localIsValid['lmstudio']
+                      !!localProviderIds['lmstudio']
                     )}
                   </div>
                 </div>