@nextclaw/ui 0.5.38 → 0.5.40

package/src/api/config.ts

@@ -8,6 +8,9 @@ import type {
   ProviderConfigUpdate,
   ProviderConnectionTestRequest,
   ProviderConnectionTestResult,
+  ProviderCreateRequest,
+  ProviderCreateResult,
+  ProviderDeleteResult,
   RuntimeConfigUpdate,
   SecretsConfigUpdate,
   SecretsView,
@@ -81,6 +84,31 @@ export async function updateProvider(
   return response.data;
 }
 
+// POST /api/config/providers
+export async function createProvider(
+  data: ProviderCreateRequest = {}
+): Promise<ProviderCreateResult> {
+  const response = await api.post<ProviderCreateResult>(
+    '/api/config/providers',
+    data
+  );
+  if (!response.ok) {
+    throw new Error(response.error.message);
+  }
+  return response.data;
+}
+
+// DELETE /api/config/providers/:provider
+export async function deleteProvider(provider: string): Promise<ProviderDeleteResult> {
+  const response = await api.delete<ProviderDeleteResult>(
+    `/api/config/providers/${provider}`
+  );
+  if (!response.ok) {
+    throw new Error(response.error.message);
+  }
+  return response.data;
+}
+
 // POST /api/config/providers/:provider/test
 export async function testProviderConnection(
   provider: string,

package/src/api/types.ts

@@ -10,6 +10,7 @@ export type ApiResponse<T> =
   | { ok: false; error: ApiError };
 
 export type ProviderConfigView = {
+  displayName?: string;
   apiKeySet: boolean;
   apiKeyMasked?: string;
   apiBase?: string | null;
@@ -19,6 +20,7 @@ export type ProviderConfigView = {
 };
 
 export type ProviderConfigUpdate = {
+  displayName?: string | null;
   apiKey?: string | null;
   apiBase?: string | null;
   extraHeaders?: Record<string, string> | null;
@@ -30,6 +32,18 @@ export type ProviderConnectionTestRequest = ProviderConfigUpdate & {
   model?: string | null;
 };
 
+export type ProviderCreateRequest = ProviderConfigUpdate;
+
+export type ProviderCreateResult = {
+  name: string;
+  provider: ProviderConfigView;
+};
+
+export type ProviderDeleteResult = {
+  deleted: boolean;
+  provider: string;
+};
+
 export type ProviderConnectionTestErrorCode =
   | 'API_KEY_REQUIRED'
   | 'MODEL_REQUIRED'
@@ -325,6 +339,7 @@ export type ConfigView = {
 export type ProviderSpecView = {
   name: string;
   displayName?: string;
+  isCustom?: boolean;
   modelPrefix?: string;
   keywords: string[];
   envKey: string;

package/src/components/config/ModelConfig.tsx

@@ -100,9 +100,10 @@ export function ModelConfig() {
         (config?.providers?.[provider.name]?.models ?? []).map((model) => toProviderLocalModel(model, aliases))
       );
       const allModels = normalizeStringList([...defaultModels, ...customModels]);
+      const configDisplayName = config?.providers?.[provider.name]?.displayName?.trim();
       return {
         name: provider.name,
-        displayName: provider.displayName || provider.name,
+        displayName: configDisplayName || provider.displayName || provider.name,
         prefix,
         aliases,
         models: allModels

package/src/components/config/ProviderForm.tsx

@@ -1,5 +1,12 @@
 import { useEffect, useMemo, useState } from 'react';
-import { useConfig, useConfigMeta, useConfigSchema, useTestProviderConnection, useUpdateProvider } from '@/hooks/useConfig';
+import {
+  useConfig,
+  useConfigMeta,
+  useConfigSchema,
+  useDeleteProvider,
+  useTestProviderConnection,
+  useUpdateProvider
+} from '@/hooks/useConfig';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
@@ -10,7 +17,7 @@ import { StatusDot } from '@/components/ui/status-dot';
 import { t } from '@/lib/i18n';
 import { hintForPath } from '@/lib/config-hints';
 import type { ProviderConfigUpdate, ProviderConnectionTestRequest } from '@/api/types';
-import { KeyRound, Globe, Hash, RotateCcw, CircleDotDashed, Sparkles, Plus, X } from 'lucide-react';
+import { KeyRound, Globe, Hash, RotateCcw, CircleDotDashed, Sparkles, Plus, X, Trash2 } from 'lucide-react';
 import { toast } from 'sonner';
 import { CONFIG_DETAIL_CARD_CLASS, CONFIG_EMPTY_DETAIL_CARD_CLASS } from './config-layout';
 
@@ -18,6 +25,7 @@ type WireApiType = 'auto' | 'chat' | 'responses';
 
 type ProviderFormProps = {
   providerName?: string;
+  onProviderDeleted?: (providerName: string) => void;
 };
 
 function normalizeHeaders(input: Record<string, string> | null | undefined): Record<string, string> | null {
@@ -129,11 +137,12 @@ function serializeModelsForSave(models: string[], defaultModels: string[]): stri
   return models;
 }
 
-export function ProviderForm({ providerName }: ProviderFormProps) {
+export function ProviderForm({ providerName, onProviderDeleted }: ProviderFormProps) {
   const { data: config } = useConfig();
   const { data: meta } = useConfigMeta();
   const { data: schema } = useConfigSchema();
   const updateProvider = useUpdateProvider();
+  const deleteProvider = useDeleteProvider();
   const testProviderConnection = useTestProviderConnection();
 
   const [apiKey, setApiKey] = useState('');
@@ -142,17 +151,22 @@ export function ProviderForm({ providerName }: ProviderFormProps) {
   const [wireApi, setWireApi] = useState<WireApiType>('auto');
   const [models, setModels] = useState<string[]>([]);
   const [modelDraft, setModelDraft] = useState('');
+  const [providerDisplayName, setProviderDisplayName] = useState('');
 
   const providerSpec = meta?.providers.find((p) => p.name === providerName);
   const providerConfig = providerName ? config?.providers[providerName] : null;
   const uiHints = schema?.uiHints;
+  const isCustomProvider = Boolean(providerSpec?.isCustom);
 
   const apiKeyHint = providerName ? hintForPath(`providers.${providerName}.apiKey`, uiHints) : undefined;
   const apiBaseHint = providerName ? hintForPath(`providers.${providerName}.apiBase`, uiHints) : undefined;
   const extraHeadersHint = providerName ? hintForPath(`providers.${providerName}.extraHeaders`, uiHints) : undefined;
   const wireApiHint = providerName ? hintForPath(`providers.${providerName}.wireApi`, uiHints) : undefined;
+  const defaultDisplayName = providerSpec?.displayName || providerName || '';
+  const currentDisplayName = (providerConfig?.displayName || '').trim();
+  const effectiveDisplayName = currentDisplayName || defaultDisplayName;
 
-  const providerTitle = providerSpec?.displayName || providerName || t('providersSelectPlaceholder');
+  const providerTitle = providerDisplayName.trim() || effectiveDisplayName || providerName || t('providersSelectPlaceholder');
   const providerModelPrefix = providerSpec?.modelPrefix || providerName || '';
   const providerModelAliases = useMemo(
     () => normalizeModelList([providerModelPrefix, providerName || '']),
@@ -180,6 +194,9 @@ export function ProviderForm({ providerName }: ProviderFormProps) {
     () => resolveEditableModels(defaultModels, currentModels),
     [defaultModels, currentModels]
   );
+  const apiBaseHelpText = providerName === 'minimax'
+    ? t('providerApiBaseHelpMinimax')
+    : (apiBaseHint?.help || t('providerApiBaseHelp'));
 
   useEffect(() => {
     if (!providerName) {
@@ -189,6 +206,7 @@ export function ProviderForm({ providerName }: ProviderFormProps) {
       setWireApi('auto');
       setModels([]);
       setModelDraft('');
+      setProviderDisplayName('');
       return;
     }
 
@@ -198,7 +216,8 @@ export function ProviderForm({ providerName }: ProviderFormProps) {
     setWireApi(currentWireApi);
     setModels(currentEditableModels);
     setModelDraft('');
-  }, [providerName, currentApiBase, providerConfig?.extraHeaders, currentWireApi, currentEditableModels]);
+    setProviderDisplayName(effectiveDisplayName);
+  }, [providerName, currentApiBase, providerConfig?.extraHeaders, currentWireApi, currentEditableModels, effectiveDisplayName]);
 
   const hasChanges = useMemo(() => {
     if (!providerName) {
@@ -209,10 +228,16 @@ export function ProviderForm({ providerName }: ProviderFormProps) {
     const headersChanged = !headersEqual(extraHeaders, currentHeaders);
     const wireApiChanged = providerSpec?.supportsWireApi ? wireApi !== currentWireApi : false;
     const modelsChanged = !modelListsEqual(models, currentEditableModels);
+    const displayNameChanged = isCustomProvider
+      ? providerDisplayName.trim() !== effectiveDisplayName
+      : false;
 
-    return apiKeyChanged || apiBaseChanged || headersChanged || wireApiChanged || modelsChanged;
+    return apiKeyChanged || apiBaseChanged || headersChanged || wireApiChanged || modelsChanged || displayNameChanged;
   }, [
     providerName,
+    isCustomProvider,
+    providerDisplayName,
+    effectiveDisplayName,
     apiKey,
     apiBase,
     currentApiBase,
@@ -232,6 +257,7 @@ export function ProviderForm({ providerName }: ProviderFormProps) {
     setWireApi((providerSpec?.defaultWireApi || 'auto') as WireApiType);
     setModels(defaultModels);
     setModelDraft('');
+    setProviderDisplayName(defaultDisplayName);
   };
 
   const handleAddModel = () => {
@@ -258,6 +284,11 @@ export function ProviderForm({ providerName }: ProviderFormProps) {
     const trimmedApiKey = apiKey.trim();
     const trimmedApiBase = apiBase.trim();
     const normalizedHeaders = normalizeHeaders(extraHeaders);
+    const trimmedDisplayName = providerDisplayName.trim();
+
+    if (isCustomProvider && trimmedDisplayName !== effectiveDisplayName) {
+      payload.displayName = trimmedDisplayName.length > 0 ? trimmedDisplayName : null;
+    }
 
     if (trimmedApiKey.length > 0) {
       payload.apiKey = trimmedApiKey;
@@ -286,10 +317,12 @@ export function ProviderForm({ providerName }: ProviderFormProps) {
       return;
     }
 
+    const preferredModel = models.find((modelName) => modelName.trim().length > 0) ?? '';
+    const testModel = toProviderLocalModelId(preferredModel, providerModelAliases);
     const payload: ProviderConnectionTestRequest = {
       apiBase: apiBase.trim(),
       extraHeaders: normalizeHeaders(extraHeaders),
-      model: config?.agents.defaults.model ?? null
+      model: testModel || null
     };
     if (apiKey.trim().length > 0) {
       payload.apiKey = apiKey.trim();
@@ -318,6 +351,22 @@ export function ProviderForm({ providerName }: ProviderFormProps) {
     }
   };
 
+  const handleDeleteProvider = async () => {
+    if (!providerName || !isCustomProvider) {
+      return;
+    }
+    const confirmed = window.confirm(t('providerDeleteConfirm'));
+    if (!confirmed) {
+      return;
+    }
+    try {
+      await deleteProvider.mutateAsync({ provider: providerName });
+      onProviderDeleted?.(providerName);
+    } catch {
+      // toast handled by mutation hook
+    }
+  };
+
   if (!providerName || !providerSpec || !providerConfig) {
     return (
       <div className={CONFIG_EMPTY_DETAIL_CARD_CLASS}>
@@ -345,6 +394,24 @@ export function ProviderForm({ providerName }: ProviderFormProps) {
 
       <form onSubmit={handleSubmit} className="flex min-h-0 flex-1 flex-col">
         <div className="min-h-0 flex-1 space-y-6 overflow-y-auto px-6 py-5">
+          {isCustomProvider && (
+            <div className="space-y-2.5">
+              <Label htmlFor="providerDisplayName" className="flex items-center gap-2 text-sm font-medium text-gray-900">
+                <Hash className="h-3.5 w-3.5 text-gray-500" />
+                {t('providerDisplayName')}
+              </Label>
+              <Input
+                id="providerDisplayName"
+                type="text"
+                value={providerDisplayName}
+                onChange={(e) => setProviderDisplayName(e.target.value)}
+                placeholder={defaultDisplayName || t('providerDisplayNamePlaceholder')}
+                className="rounded-xl"
+              />
+              <p className="text-xs text-gray-500">{t('providerDisplayNameHelp')}</p>
+            </div>
+          )}
+
           <div className="space-y-2.5">
             <Label htmlFor="apiKey" className="flex items-center gap-2 text-sm font-medium text-gray-900">
               <KeyRound className="h-3.5 w-3.5 text-gray-500" />
@@ -374,7 +441,8 @@ export function ProviderForm({ providerName }: ProviderFormProps) {
               placeholder={defaultApiBase || apiBaseHint?.placeholder || 'https://api.example.com'}
               className="rounded-xl"
             />
-            <p className="text-xs text-gray-500">{apiBaseHint?.help || t('providerApiBaseHelp')}</p>
+            <p className="text-xs text-gray-500">{apiBaseHelpText}</p>
+            {isCustomProvider && <p className="text-xs text-gray-500">{t('providerOpenAICompatHint')}</p>}
           </div>
 
           {providerSpec.supportsWireApi && (
@@ -468,6 +536,17 @@ export function ProviderForm({ providerName }: ProviderFormProps) {
               <RotateCcw className="mr-2 h-4 w-4" />
               {t('resetToDefault')}
             </Button>
+            {isCustomProvider && (
+              <Button
+                type="button"
+                variant="outline"
+                onClick={handleDeleteProvider}
+                disabled={deleteProvider.isPending}
+              >
+                <Trash2 className="mr-2 h-4 w-4" />
+                {deleteProvider.isPending ? t('saving') : t('providerDelete')}
+              </Button>
+            )}
             <Button type="button" variant="outline" onClick={handleTestConnection} disabled={testProviderConnection.isPending}>
               <CircleDotDashed className="mr-2 h-4 w-4" />
               {testProviderConnection.isPending ? t('providerTestingConnection') : t('providerTestConnection')}

package/src/components/config/ProvidersList.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useMemo, useState } from 'react';
-import { useConfig, useConfigMeta, useConfigSchema } from '@/hooks/useConfig';
-import { Search, KeyRound } from 'lucide-react';
+import { useConfig, useConfigMeta, useConfigSchema, useCreateProvider } from '@/hooks/useConfig';
+import { Search, KeyRound, Plus } from 'lucide-react';
 import { ProviderForm } from './ProviderForm';
 import { cn } from '@/lib/utils';
 import { Tabs } from '@/components/ui/tabs-custom';
@@ -11,6 +11,7 @@ import { StatusDot } from '@/components/ui/status-dot';
 import { t } from '@/lib/i18n';
 import { PageLayout, PageHeader } from '@/components/layout/page-layout';
 import { Input } from '@/components/ui/input';
+import { Button } from '@/components/ui/button';
 import { CONFIG_SIDEBAR_CARD_CLASS, CONFIG_SPLIT_GRID_CLASS } from './config-layout';
 
 function formatBasePreview(base?: string | null): string | null {
@@ -30,6 +31,7 @@ export function ProvidersList() {
   const { data: config } = useConfig();
   const { data: meta } = useConfigMeta();
   const { data: schema } = useConfigSchema();
+  const createProvider = useCreateProvider();
 
   const [activeTab, setActiveTab] = useState('installed');
   const [selectedProvider, setSelectedProvider] = useState<string | undefined>();
@@ -60,7 +62,8 @@ export function ProvidersList() {
         if (!keyword) {
           return true;
         }
-        const display = (provider.displayName || provider.name).toLowerCase();
+        const configDisplayName = baseConfig[provider.name]?.displayName?.trim();
+        const display = (configDisplayName || provider.displayName || provider.name).toLowerCase();
         return display.includes(keyword) || provider.name.toLowerCase().includes(keyword);
       });
   }, [meta, config, activeTab, query]);
@@ -79,6 +82,17 @@ export function ProvidersList() {
 
   const selectedName = selectedProvider;
 
+  const handleCreateCustomProvider = async () => {
+    try {
+      const result = await createProvider.mutateAsync({ data: {} });
+      setActiveTab('all');
+      setQuery('');
+      setSelectedProvider(result.name);
+    } catch {
+      // toast handled in hook
+    }
+  };
+
   if (!config || !meta) {
     return <div className="p-8">{t('providersLoading')}</div>;
   }
@@ -89,8 +103,18 @@ export function ProvidersList() {
 
       <div className={CONFIG_SPLIT_GRID_CLASS}>
         <section className={CONFIG_SIDEBAR_CARD_CLASS}>
-          <div className="border-b border-gray-100 px-4 pt-4">
+          <div className="border-b border-gray-100 px-4 pt-4 pb-3 space-y-3">
             <Tabs tabs={tabs} activeTab={activeTab} onChange={setActiveTab} className="mb-0" />
+            <Button
+              type="button"
+              variant="outline"
+              className="w-full justify-center"
+              onClick={handleCreateCustomProvider}
+              disabled={createProvider.isPending}
+            >
+              <Plus className="mr-2 h-4 w-4" />
+              {createProvider.isPending ? t('saving') : t('providerAddCustom')}
+            </Button>
           </div>
 
           <div className="border-b border-gray-100 px-4 py-3">
@@ -110,6 +134,7 @@ export function ProvidersList() {
               const providerConfig = config.providers[provider.name];
               const isReady = Boolean(providerConfig?.apiKeySet);
               const isActive = selectedName === provider.name;
+              const providerLabel = providerConfig?.displayName?.trim() || provider.displayName || provider.name;
               const providerHint = hintForPath(`providers.${provider.name}`, uiHints);
               const resolvedBase = providerConfig?.apiBase || provider.defaultApiBase || '';
               const basePreview = formatBasePreview(resolvedBase);
@@ -140,7 +165,7 @@ export function ProvidersList() {
                         fallback={<span className="text-sm font-semibold uppercase text-gray-500">{provider.name[0]}</span>}
                       />
                       <div className="min-w-0">
-                        <p className="truncate text-sm font-semibold text-gray-900">{provider.displayName || provider.name}</p>
+                        <p className="truncate text-sm font-semibold text-gray-900">{providerLabel}</p>
                         <p className="line-clamp-1 text-[11px] text-gray-500">{description}</p>
                       </div>
                     </div>
@@ -165,7 +190,14 @@ export function ProvidersList() {
           </div>
         </section>
 
-        <ProviderForm providerName={selectedName} />
+        <ProviderForm
+          providerName={selectedName}
+          onProviderDeleted={(deletedProvider) => {
+            if (deletedProvider === selectedProvider) {
+              setSelectedProvider(undefined);
+            }
+          }}
+        />
       </div>
     </PageLayout>
   );

package/src/hooks/useConfig.ts

@@ -4,6 +4,8 @@ import {
   fetchConfigMeta,
   fetchConfigSchema,
   updateModel,
+  createProvider,
+  deleteProvider,
   updateProvider,
   testProviderConnection,
   updateChannel,
@@ -71,6 +73,40 @@ export function useUpdateProvider() {
       updateProvider(provider, data as Parameters<typeof updateProvider>[1]),
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ['config'] });
+      queryClient.invalidateQueries({ queryKey: ['config-meta'] });
+      toast.success(t('configSaved'));
+    },
+    onError: (error: Error) => {
+      toast.error(t('configSaveFailed') + ': ' + error.message);
+    }
+  });
+}
+
+export function useCreateProvider() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: ({ data }: { data?: unknown }) =>
+      createProvider((data ?? {}) as Parameters<typeof createProvider>[0]),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['config'] });
+      queryClient.invalidateQueries({ queryKey: ['config-meta'] });
+      toast.success(t('configSaved'));
+    },
+    onError: (error: Error) => {
+      toast.error(t('configSaveFailed') + ': ' + error.message);
+    }
+  });
+}
+
+export function useDeleteProvider() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: ({ provider }: { provider: string }) => deleteProvider(provider),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['config'] });
+      queryClient.invalidateQueries({ queryKey: ['config-meta'] });
       toast.success(t('configSaved'));
     },
     onError: (error: Error) => {

package/src/lib/i18n.ts

@@ -184,6 +184,9 @@ export const LABELS: Record<string, { zh: string; en: string }> = {
   providersTabAll: { zh: '全部提供商', en: 'All Providers' },
   providersFilterPlaceholder: { zh: '搜索提供商', en: 'Search providers' },
   providersNoMatch: { zh: '没有匹配的提供商', en: 'No matching providers' },
+  providerAddCustom: { zh: '新增自定义提供商', en: 'Add Custom Provider' },
+  providerDelete: { zh: '删除该提供商', en: 'Delete Provider' },
+  providerDeleteConfirm: { zh: '确认删除这个自定义提供商吗？删除后不可恢复。', en: 'Delete this custom provider? This action cannot be undone.' },
   providersSelectPlaceholder: { zh: '选择提供商', en: 'Select Provider' },
   providersSelectTitle: { zh: '选择左侧提供商开始配置', en: 'Select a provider from the left to configure' },
   providersSelectDescription: { zh: '你可以连续切换多个提供商并逐个保存配置。', en: 'Switch between providers continuously and save each configuration.' },
@@ -202,8 +205,22 @@ export const LABELS: Record<string, { zh: string; en: string }> = {
   showKey: { zh: '显示密钥', en: 'Show Key' },
   hideKey: { zh: '隐藏密钥', en: 'Hide Key' },
   providerFormDescription: { zh: '配置 AI 提供商的 API 密钥与参数', en: 'Configure API keys and parameters for AI provider' },
+  providerDisplayName: { zh: '自定义名称', en: 'Custom Name' },
+  providerDisplayNamePlaceholder: { zh: '例如：中转站 A', en: 'For example: Relay A' },
+  providerDisplayNameHelp: {
+    zh: '仅用于界面展示，便于区分多个自定义 Provider。',
+    en: 'Display-only label to distinguish multiple custom providers.'
+  },
   enterApiKey: { zh: '请输入 API 密钥', en: 'Enter API Key' },
   providerApiBaseHelp: { zh: '留空或恢复默认即可使用预置 API Base。', en: 'Leave empty or reset to use the default API base.' },
+  providerApiBaseHelpMinimax: {
+    zh: 'MiniMax 中国区请使用 https://api.minimaxi.com/v1；海外请使用 https://api.minimax.io/v1。',
+    en: 'Use https://api.minimaxi.com/v1 for Mainland China accounts, and https://api.minimax.io/v1 for overseas accounts.'
+  },
+  providerOpenAICompatHint: {
+    zh: '自定义提供商默认按 OpenAI 兼容 API 格式接入（Chat Completions / Responses）。',
+    en: 'Custom providers use OpenAI-compatible API format by default (Chat Completions / Responses).'
+  },
   providerExtraHeadersHelp: { zh: '用于自定义请求头（可选）。', en: 'Optional custom request headers.' },
   providerTestConnection: { zh: '测试连接', en: 'Test Connection' },
   providerTestingConnection: { zh: '测试中...', en: 'Testing...' },

package/dist/assets/ModelConfig-CwxXYqME.js

@@ -1 +0,0 @@
-import{j as e,r as c,F as Q,g as V,m as X,s as Z,J as H,O as ee,U as se}from"./vendor-DN_iJQc4.js";import{P as te,a as ae,B as re}from"./page-layout-D8MW2vP-.js";import{C as _}from"./card-Bq6uwDJQ.js";import{I as q,u as ne,a as le,b as oe,c as ie}from"./useConfig-tR_KAfMV.js";import{L as $}from"./label-Cq1vSfWg.js";import{c as B,t as d,S as ce,a as de,b as me,d as xe,e as ue,D as he,f as fe}from"./index-wB2uPrKu.js";import{h as A}from"./config-hints-CApS3K_7.js";function u({className:a,...n}){return e.jsx("div",{className:B("animate-pulse rounded-md bg-slate-200",a),...n})}function pe(a){const n=new Set;for(const r of a){const l=r.trim();l.length>0&&n.add(l)}return[...n]}function ge({id:a,value:n,onChange:r,options:l,placeholder:m,className:j,inputClassName:x,emptyText:C,createText:b,maxItems:S=Number.POSITIVE_INFINITY,onEnter:k}){const[v,h]=c.useState(!1),N=c.useMemo(()=>pe(l),[l]),i=n.trim().toLowerCase(),f=c.useMemo(()=>{const t=N.map((o,w)=>({option:o,index:w}));i.length>0&&t.sort((o,w)=>{const y=o.option.toLowerCase(),M=w.option.toLowerCase(),I=y===i?0:y.startsWith(i)?1:y.includes(i)?2:3,L=M===i?0:M.startsWith(i)?1:M.includes(i)?2:3;return I!==L?I-L:o.index-w.index});const g=t.map(o=>o.option);return Number.isFinite(S)?g.slice(0,Math.max(1,S)):g},[N,i,S]),P=n.trim().length>0&&N.some(t=>t===n.trim());return e.jsxs("div",{className:B("relative",j),onBlur:()=>{setTimeout(()=>h(!1),120)},children:[e.jsx(q,{id:a,value:n,onFocus:()=>h(!0),onChange:t=>{r(t.target.value),v||h(!0)},onKeyDown:t=>{t.key==="Enter"&&(k&&(t.preventDefault(),k()),h(!1))},placeholder:m,className:B("pr-10",x)}),e.jsx("button",{type:"button",onMouseDown:t=>t.preventDefault(),onClick:()=>h(t=>!t),className:"absolute inset-y-0 right-0 inline-flex w-10 items-center justify-center text-gray-400 hover:text-gray-600","aria-label":"toggle model options",children:e.jsx(Q,{className:"h-4 w-4"})}),v&&e.jsx("div",{className:"absolute z-20 mt-1 w-full overflow-hidden rounded-xl border border-gray-200 bg-white shadow-lg",children:e.jsxs("div",{className:"max-h-60 overflow-y-auto py-1",children:[!P&&n.trim().length>0&&e.jsxs("button",{type:"button",onMouseDown:t=>t.preventDefault(),onClick:()=>{r(n.trim()),h(!1)},className:"flex w-full items-center gap-2 px-3 py-2 text-left text-sm hover:bg-gray-50",children:[e.jsx(V,{className:"h-4 w-4 text-transparent"}),e.jsx("span",{className:"truncate text-gray-700",children:b?b.replace("{value}",n.trim()):n.trim()})]}),f.map(t=>e.jsxs("button",{type:"button",onMouseDown:g=>g.preventDefault(),onClick:()=>{r(t),h(!1)},className:"flex w-full items-center gap-2 px-3 py-2 text-left text-sm hover:bg-gray-50",children:[e.jsx(V,{className:B("h-4 w-4",t===n.trim()?"text-primary":"text-transparent")}),e.jsx("span",{className:"truncate text-gray-700",children:t})]},t)),f.length===0&&n.trim().length===0&&e.jsx("div",{className:"px-3 py-2 text-sm text-gray-500",children:C??"No models available"})]})})]})}function z(a){if(!a||a.length===0)return[];const n=new Set;for(const r of a){const l=r.trim();l&&n.add(l)}return[...n]}function je(a,n){const r=a.trim(),l=n.trim();if(!r||!l)return r;const m=`${l}/`;return r.startsWith(m)?r.slice(m.length):r}function T(a,n){let r=a.trim();if(!r)return"";for(const l of n)r=je(r,l);return r.trim()}function Ne(a,n){const r=a.trim();if(!r)return null;let l=null;for(const m of n)for(const j of m.aliases){const x=j.trim();x&&(r===x||r.startsWith(`${x}/`))&&(!l||x.length>l.score)&&(l={name:m.name,score:x.length})}return(l==null?void 0:l.name)??null}function ke(){const{data:a,isLoading:n}=ne(),{data:r}=le(),{data:l}=oe(),m=ie(),[j,x]=c.useState(""),[C,b]=c.useState(""),[S,k]=c.useState(""),[v,h]=c.useState(8192),N=l==null?void 0:l.uiHints,i=A("agents.defaults.model",N),f=A("agents.defaults.workspace",N),P=A("agents.defaults.maxTokens",N),t=c.useMemo(()=>((r==null?void 0:r.providers)??[]).map(s=>{var D,R;const O=(s.modelPrefix||s.name||"").trim(),p=z([s.modelPrefix||"",s.name||""]),U=z((s.defaultModels??[]).map(W=>T(W,p))),F=z((((R=(D=a==null?void 0:a.providers)==null?void 0:D[s.name])==null?void 0:R.models)??[]).map(W=>T(W,p))),E=z([...U,...F]);return{name:s.name,displayName:s.displayName||s.name,prefix:O,aliases:p,models:E}}),[r,a]),g=c.useMemo(()=>new Map(t.map(s=>[s.name,s])),[t]),o=g.get(j)??t[0],w=(o==null?void 0:o.name)??"",y=c.useMemo(()=>(o==null?void 0:o.aliases)??[],[o]),M=c.useMemo(()=>(o==null?void 0:o.models)??[],[o]);c.useEffect(()=>{j||t.length===0||x(t[0].name)},[j,t]),c.useEffect(()=>{var F,E,D;if(!((F=a==null?void 0:a.agents)!=null&&F.defaults))return;const s=(a.agents.defaults.model||"").trim(),p=Ne(s,t)??((E=t[0])==null?void 0:E.name)??"",U=((D=g.get(p))==null?void 0:D.aliases)??[];x(p),b(T(s,U)),k(a.agents.defaults.workspace||""),h(a.agents.defaults.maxTokens||8192)},[a,t,g]);const I=c.useMemo(()=>{const s=new Set;for(const O of M){const p=O.trim();p&&s.add(p)}return[...s]},[M]),L=c.useMemo(()=>{const s=T(C,y);return s?!o||!o.prefix?s:`${o.prefix}/${s}`:""},[C,o,y]),G=(i==null?void 0:i.help)??"",J=s=>{x(s),b("")},K=s=>{b(T(s,y))},Y=s=>{s.preventDefault(),m.mutate({model:L,maxTokens:v})};return n?e.jsxs("div",{className:"max-w-2xl space-y-6",children:[e.jsxs("div",{className:"space-y-2",children:[e.jsx(u,{className:"h-8 w-32"}),e.jsx(u,{className:"h-4 w-48"})]}),e.jsxs(_,{className:"rounded-2xl border-gray-200 p-6",children:[e.jsxs("div",{className:"flex items-center gap-4 mb-6",children:[e.jsx(u,{className:"h-12 w-12 rounded-xl"}),e.jsxs("div",{className:"space-y-2",children:[e.jsx(u,{className:"h-5 w-24"}),e.jsx(u,{className:"h-3 w-32"})]})]}),e.jsx(u,{className:"h-4 w-20 mb-2"}),e.jsx(u,{className:"h-10 w-full rounded-xl"})]}),e.jsxs(_,{className:"rounded-2xl border-gray-200 p-6",children:[e.jsx(u,{className:"h-5 w-24 mb-2"}),e.jsx(u,{className:"h-3 w-40 mb-6"}),e.jsx("div",{className:"space-y-6",children:e.jsxs("div",{children:[e.jsx(u,{className:"h-4 w-28 mb-3"}),e.jsx(u,{className:"h-2 w-full rounded-full"})]})})]})]}):e.jsxs(te,{children:[e.jsx(ae,{title:d("modelPageTitle"),description:d("modelPageDescription")}),e.jsxs("form",{onSubmit:Y,className:"space-y-8",children:[e.jsxs("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-8",children:[e.jsxs("div",{className:"p-8 rounded-2xl bg-white border border-gray-200 shadow-card",children:[e.jsxs("div",{className:"flex items-center gap-4 mb-8",children:[e.jsx("div",{className:"h-10 w-10 rounded-xl bg-primary flex items-center justify-center text-white",children:e.jsx(X,{className:"h-5 w-5"})}),e.jsx("h3",{className:"text-lg font-bold text-gray-900",children:d("defaultModel")})]}),e.jsxs("div",{className:"space-y-2",children:[e.jsx($,{htmlFor:"model",className:"text-xs font-semibold text-gray-500 uppercase tracking-wider",children:(i==null?void 0:i.label)??"Model Name"}),e.jsxs("div",{className:"flex flex-col gap-2 sm:flex-row sm:items-center",children:[e.jsx("div",{className:"sm:w-[38%] sm:min-w-[170px]",children:e.jsxs(ce,{value:w,onValueChange:J,children:[e.jsx(de,{className:"h-10 w-full rounded-xl",children:e.jsx(me,{placeholder:d("providersSelectPlaceholder")})}),e.jsx(xe,{children:t.map(s=>e.jsx(ue,{value:s.name,children:s.displayName},s.name))})]})}),e.jsx("span",{className:"hidden h-10 items-center justify-center leading-none text-lg font-semibold text-gray-300 sm:inline-flex",children:"/"}),e.jsx(ge,{id:"model",value:C,onChange:K,options:I,placeholder:(i==null?void 0:i.placeholder)??"gpt-5.1",className:"sm:flex-1",inputClassName:"h-10 rounded-xl",emptyText:d("modelPickerNoOptions"),createText:d("modelPickerUseCustom")},w)]}),e.jsx("p",{className:"text-xs text-gray-400",children:G}),e.jsx("p",{className:"text-xs text-gray-500",children:d("modelInputCustomHint")}),e.jsxs("a",{href:`${he}/guide/model-selection`,className:"inline-flex items-center gap-1.5 text-xs text-primary hover:text-primary-hover transition-colors",children:[e.jsx(Z,{className:"h-3.5 w-3.5"}),d("channelsGuideTitle")]})]})]}),e.jsxs("div",{className:"p-8 rounded-2xl bg-white border border-gray-200 shadow-card",children:[e.jsxs("div",{className:"flex items-center gap-4 mb-8",children:[e.jsx("div",{className:"h-10 w-10 rounded-xl bg-primary flex items-center justify-center text-white",children:e.jsx(H,{className:"h-5 w-5"})}),e.jsx("h3",{className:"text-lg font-bold text-gray-900",children:d("workspace")})]}),e.jsxs("div",{className:"space-y-2",children:[e.jsx($,{htmlFor:"workspace",className:"text-xs font-semibold text-gray-500 uppercase tracking-wider",children:(f==null?void 0:f.label)??"Default Path"}),e.jsx(q,{id:"workspace",value:S,onChange:s=>k(s.target.value),placeholder:(f==null?void 0:f.placeholder)??"/path/to/workspace",className:"rounded-xl"})]})]})]}),e.jsxs("div",{className:"p-8 rounded-2xl bg-white border border-gray-200 shadow-card",children:[e.jsxs("div",{className:"flex items-center gap-4 mb-10",children:[e.jsx("div",{className:"h-10 w-10 rounded-xl bg-primary flex items-center justify-center text-white",children:e.jsx(ee,{className:"h-5 w-5"})}),e.jsx("h3",{className:"text-lg font-bold text-gray-900",children:d("generationParameters")})]}),e.jsx("div",{className:"grid grid-cols-1 gap-12",children:e.jsxs("div",{className:"space-y-4",children:[e.jsxs("div",{className:"flex justify-between items-center mb-2",children:[e.jsx($,{className:"text-xs font-semibold text-gray-500 uppercase tracking-wider",children:(P==null?void 0:P.label)??d("maxTokens")}),e.jsx("span",{className:"text-sm font-semibold text-gray-900",children:fe(v)})]}),e.jsx("input",{type:"range",min:"1000",max:"32000",step:"1000",value:v,onChange:s=>h(parseInt(s.target.value)),className:"w-full h-1 bg-gray-200 rounded-full appearance-none cursor-pointer accent-primary"})]})})]}),e.jsx("div",{className:"flex justify-end pt-4",children:e.jsx(re,{type:"submit",disabled:m.isPending,size:"lg",children:m.isPending?e.jsx(se,{className:"h-5 w-5 animate-spin"}):d("saveChanges")})})]})]})}export{ke as ModelConfig};

package/dist/assets/ProvidersList-D4oaYHpJ.js

@@ -1 +0,0 @@
-import{r as p,j as e,aa as xe,ab as he,a8 as pe,a6 as te,K as ae,a1 as fe,ac as ee,m as ye,ad as ge,ae as je,af as be,ag as V,a0 as we}from"./vendor-DN_iJQc4.js";import{I as D,u as re,a as ne,b as le,g as Ne,h as ve}from"./useConfig-tR_KAfMV.js";import{B as L,P as Ae,a as Ce}from"./page-layout-D8MW2vP-.js";import{L as F}from"./label-Cq1vSfWg.js";import{t as a,c as G,S as Pe,a as Se,b as Ee,d as Le,e as Me}from"./index-wB2uPrKu.js";import{C as Te,a as Ke,S as ie,b as De,c as Be,L as $e,g as ke}from"./logos-BKBMs40Q.js";import{h as _}from"./config-hints-CApS3K_7.js";import{T as Ie}from"./tabs-custom-N4olWJSw.js";function Fe({maskedValue:s,isSet:t,className:n,...i}){const[x,g]=p.useState(!1);return e.jsxs("div",{className:"relative",children:[e.jsx(D,{type:x?"text":"password",className:G("pr-20",n),placeholder:t?`${a("apiKeySet")} (${a("unchanged")})`:"",...i}),e.jsx("div",{className:"absolute right-2 top-1/2 -translate-y-1/2 flex gap-1",children:(t||s)&&e.jsx(L,{type:"button",variant:"ghost",size:"icon",className:"h-7 w-7",onClick:()=>g(!x),children:x?e.jsx(xe,{className:"h-4 w-4"}):e.jsx(he,{className:"h-4 w-4"})})})]})}function _e({value:s,onChange:t,className:n}){const i=s?Object.entries(s):[],x=(m,f,j)=>{const y=[...i];y[m]=[f,j],t(Object.fromEntries(y))},g=()=>{t({...s,"":""})},h=m=>{const f=i.filter((j,y)=>y!==m);t(Object.fromEntries(f))};return e.jsxs("div",{className:G("space-y-2",n),children:[i.map(([m,f],j)=>e.jsxs("div",{className:"flex gap-2",children:[e.jsx(D,{type:"text",value:m,onChange:y=>x(j,y.target.value,f),placeholder:a("headerName"),className:"flex-1"}),e.jsx(D,{type:"text",value:f,onChange:y=>x(j,m,y.target.value),placeholder:a("headerValue"),className:"flex-1"}),e.jsx(L,{type:"button",variant:"ghost",size:"icon",onClick:()=>h(j),children:e.jsx(pe,{className:"h-4 w-4 text-red-500"})})]},j)),e.jsxs(L,{type:"button",variant:"outline",size:"sm",onClick:g,children:[e.jsx(te,{className:"h-4 w-4 mr-2"}),a("add")]})]})}function O(s){if(!s)return null;const t=Object.entries(s).map(([n,i])=>[n.trim(),i]).filter(([n])=>n.length>0);return t.length===0?null:Object.fromEntries(t)}function se(s,t){const n=O(s),i=O(t);if(n===null&&i===null)return!0;if(!n||!i)return!1;const x=Object.entries(n).sort(([h],[m])=>h.localeCompare(m)),g=Object.entries(i).sort(([h],[m])=>h.localeCompare(m));return x.length!==g.length?!1:x.every(([h,m],f)=>h===g[f][0]&&m===g[f][1])}function q(s){if(!s||s.length===0)return[];const t=new Set;for(const n of s){const i=n.trim();i&&t.add(i)}return[...t]}function Oe(s,t){const n=s.trim();if(!n||!t.trim())return n;const i=`${t.trim()}/`;return n.startsWith(i)?n.slice(i.length):n}function U(s,t){let n=s.trim();if(!n)return"";for(const i of t){const x=i.trim();x&&(n=Oe(n,x))}return n.trim()}function Q(s,t){return s.length!==t.length?!1:s.every((n,i)=>n===t[i])}function Re(s,t){const n=[...s];for(const i of t)n.includes(i)||n.push(i);return n}function We(s,t){return t.length===0?s:t.every(i=>!s.includes(i))?Re(s,t):t}function ze(s,t){return Q(s,t)?[]:s}function Ge({providerName:s}){const{data:t}=re(),{data:n}=ne(),{data:i}=le(),x=Ne(),g=ve(),[h,m]=p.useState(""),[f,j]=p.useState(""),[y,M]=p.useState(null),[A,T]=p.useState("auto"),[b,C]=p.useState([]),[d,u]=p.useState(""),r=n==null?void 0:n.providers.find(l=>l.name===s),c=s?t==null?void 0:t.providers[s]:null,w=i==null?void 0:i.uiHints,P=s?_(`providers.${s}.apiKey`,w):void 0,v=s?_(`providers.${s}.apiBase`,w):void 0,S=s?_(`providers.${s}.extraHeaders`,w):void 0,E=s?_(`providers.${s}.wireApi`,w):void 0,ce=(r==null?void 0:r.displayName)||s||a("providersSelectPlaceholder"),X=(r==null?void 0:r.modelPrefix)||s||"",B=p.useMemo(()=>q([X,s||""]),[X,s]),R=(r==null?void 0:r.defaultApiBase)||"",$=(c==null?void 0:c.apiBase)||R,H=O((c==null?void 0:c.extraHeaders)||null),k=(c==null?void 0:c.wireApi)||(r==null?void 0:r.defaultWireApi)||"auto",W=p.useMemo(()=>q(((r==null?void 0:r.defaultModels)??[]).map(l=>U(l,B))),[r==null?void 0:r.defaultModels,B]),Y=p.useMemo(()=>q(((c==null?void 0:c.models)??[]).map(l=>U(l,B))),[c==null?void 0:c.models,B]),I=p.useMemo(()=>We(W,Y),[W,Y]);p.useEffect(()=>{if(!s){m(""),j(""),M(null),T("auto"),C([]),u("");return}m(""),j($),M((c==null?void 0:c.extraHeaders)||null),T(k),C(I),u("")},[s,$,c==null?void 0:c.extraHeaders,k,I]);const J=p.useMemo(()=>{if(!s)return!1;const l=h.trim().length>0,o=f.trim()!==$.trim(),N=!se(y,H),K=r!=null&&r.supportsWireApi?A!==k:!1,z=!Q(b,I);return l||o||N||K||z},[s,h,f,$,y,H,r==null?void 0:r.supportsWireApi,A,k,b,I]),oe=()=>{m(""),j(R),M(null),T((r==null?void 0:r.defaultWireApi)||"auto"),C(W),u("")},Z=()=>{const l=U(d,B);if(l){if(b.includes(l)){u("");return}C(o=>[...o,l]),u("")}},de=l=>{if(l.preventDefault(),!s)return;const o={},N=h.trim(),K=f.trim(),z=O(y);N.length>0&&(o.apiKey=N),K!==$.trim()&&(o.apiBase=K.length>0&&K!==R?K:null),se(z,H)||(o.extraHeaders=z),r!=null&&r.supportsWireApi&&A!==k&&(o.wireApi=A),Q(b,I)||(o.models=ze(b,W)),x.mutate({provider:s,data:o})},me=async()=>{if(!s)return;const l={apiBase:f.trim(),extraHeaders:O(y),model:(t==null?void 0:t.agents.defaults.model)??null};h.trim().length>0&&(l.apiKey=h.trim()),r!=null&&r.supportsWireApi&&(l.wireApi=A);try{const o=await g.mutateAsync({provider:s,data:l});if(o.success){V.success(`${a("providerTestConnectionSuccess")} (${o.latencyMs}ms)`);return}const N=[`provider=${o.provider}`,`latency=${o.latencyMs}ms`];o.model&&N.push(`model=${o.model}`),V.error(`${a("providerTestConnectionFailed")}: ${o.message} | ${N.join(" | ")}`)}catch(o){const N=o instanceof Error?o.message:String(o);V.error(`${a("providerTestConnectionFailed")}: ${N}`)}};if(!s||!r||!c)return e.jsx("div",{className:Te,children:e.jsxs("div",{children:[e.jsx("h3",{className:"text-base font-semibold text-gray-900",children:a("providersSelectTitle")}),e.jsx("p",{className:"mt-2 text-sm text-gray-500",children:a("providersSelectDescription")})]})});const ue=c.apiKeySet?a("statusReady"):a("statusSetup");return e.jsxs("div",{className:Ke,children:[e.jsx("div",{className:"border-b border-gray-100 px-6 py-5",children:e.jsxs("div",{className:"flex flex-wrap items-center justify-between gap-3",children:[e.jsxs("div",{className:"min-w-0",children:[e.jsx("h3",{className:"truncate text-lg font-semibold text-gray-900",children:ce}),e.jsx("p",{className:"mt-1 text-sm text-gray-500",children:a("providerFormDescription")})]}),e.jsx(ie,{status:c.apiKeySet?"ready":"setup",label:ue})]})}),e.jsxs("form",{onSubmit:de,className:"flex min-h-0 flex-1 flex-col",children:[e.jsxs("div",{className:"min-h-0 flex-1 space-y-6 overflow-y-auto px-6 py-5",children:[e.jsxs("div",{className:"space-y-2.5",children:[e.jsxs(F,{htmlFor:"apiKey",className:"flex items-center gap-2 text-sm font-medium text-gray-900",children:[e.jsx(ae,{className:"h-3.5 w-3.5 text-gray-500"}),(P==null?void 0:P.label)??a("apiKey")]}),e.jsx(Fe,{id:"apiKey",value:h,isSet:c.apiKeySet,onChange:l=>m(l.target.value),placeholder:c.apiKeySet?a("apiKeySet"):(P==null?void 0:P.placeholder)??a("enterApiKey"),className:"rounded-xl"}),e.jsx("p",{className:"text-xs text-gray-500",children:a("leaveBlankToKeepUnchanged")})]}),e.jsxs("div",{className:"space-y-2.5",children:[e.jsxs(F,{htmlFor:"apiBase",className:"flex items-center gap-2 text-sm font-medium text-gray-900",children:[e.jsx(fe,{className:"h-3.5 w-3.5 text-gray-500"}),(v==null?void 0:v.label)??a("apiBase")]}),e.jsx(D,{id:"apiBase",type:"text",value:f,onChange:l=>j(l.target.value),placeholder:R||(v==null?void 0:v.placeholder)||"https://api.example.com",className:"rounded-xl"}),e.jsx("p",{className:"text-xs text-gray-500",children:(v==null?void 0:v.help)||a("providerApiBaseHelp")})]}),r.supportsWireApi&&e.jsxs("div",{className:"space-y-2.5",children:[e.jsxs(F,{htmlFor:"wireApi",className:"flex items-center gap-2 text-sm font-medium text-gray-900",children:[e.jsx(ee,{className:"h-3.5 w-3.5 text-gray-500"}),(E==null?void 0:E.label)??a("wireApi")]}),e.jsxs(Pe,{value:A,onValueChange:l=>T(l),children:[e.jsx(Se,{className:"rounded-xl",children:e.jsx(Ee,{})}),e.jsx(Le,{children:(r.wireApiOptions||["auto","chat","responses"]).map(l=>e.jsx(Me,{value:l,children:l==="chat"?a("wireApiChat"):l==="responses"?a("wireApiResponses"):a("wireApiAuto")},l))})]}),(E==null?void 0:E.help)&&e.jsx("p",{className:"text-xs text-gray-500",children:E.help})]}),e.jsxs("div",{className:"space-y-2.5",children:[e.jsxs(F,{className:"flex items-center gap-2 text-sm font-medium text-gray-900",children:[e.jsx(ee,{className:"h-3.5 w-3.5 text-gray-500"}),(S==null?void 0:S.label)??a("extraHeaders")]}),e.jsx(_e,{value:y,onChange:M}),e.jsx("p",{className:"text-xs text-gray-500",children:(S==null?void 0:S.help)||a("providerExtraHeadersHelp")})]}),e.jsxs("div",{className:"space-y-2.5",children:[e.jsxs(F,{className:"flex items-center gap-2 text-sm font-medium text-gray-900",children:[e.jsx(ye,{className:"h-3.5 w-3.5 text-gray-500"}),a("providerModelsTitle")]}),e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx(D,{value:d,onChange:l=>u(l.target.value),onKeyDown:l=>{l.key==="Enter"&&(l.preventDefault(),Z())},placeholder:a("providerModelInputPlaceholder"),className:"flex-1"}),e.jsxs(L,{type:"button",variant:"outline",onClick:Z,disabled:d.trim().length===0,children:[e.jsx(te,{className:"mr-1.5 h-4 w-4"}),a("providerAddModel")]})]}),e.jsx("p",{className:"text-xs text-gray-500",children:a("providerModelInputHint")}),b.length===0?e.jsx("div",{className:"rounded-xl border border-dashed border-gray-200 bg-gray-50 px-3 py-2 text-xs text-gray-500",children:a("providerModelsEmpty")}):e.jsx("div",{className:"flex flex-wrap gap-2",children:b.map(l=>e.jsxs("div",{className:"group inline-flex max-w-full items-center gap-1 rounded-full border border-gray-200 bg-white px-3 py-1.5",children:[e.jsx("span",{className:"max-w-[180px] truncate text-sm text-gray-800 sm:max-w-[240px]",children:l}),e.jsx("button",{type:"button",onClick:()=>C(o=>o.filter(N=>N!==l)),className:"inline-flex h-5 w-5 items-center justify-center rounded-full text-gray-400 transition-opacity hover:bg-gray-100 hover:text-gray-600 opacity-100 md:opacity-0 md:group-hover:opacity-100 md:group-focus-within:opacity-100","aria-label":a("remove"),children:e.jsx(ge,{className:"h-3 w-3"})})]},l))}),e.jsx("p",{className:"text-xs text-gray-500",children:a("providerModelsHelp")})]})]}),e.jsxs("div",{className:"flex flex-wrap items-center justify-between gap-3 border-t border-gray-100 px-6 py-4",children:[e.jsxs("div",{className:"flex flex-wrap items-center gap-2",children:[e.jsxs(L,{type:"button",variant:"outline",onClick:oe,children:[e.jsx(je,{className:"mr-2 h-4 w-4"}),a("resetToDefault")]}),e.jsxs(L,{type:"button",variant:"outline",onClick:me,disabled:g.isPending,children:[e.jsx(be,{className:"mr-2 h-4 w-4"}),g.isPending?a("providerTestingConnection"):a("providerTestConnection")]})]}),e.jsx(L,{type:"submit",disabled:x.isPending||!J,children:x.isPending?a("saving"):J?a("save"):a("unchanged")})]})]})]})}function He(s){if(!s)return null;try{const t=new URL(s),n=t.pathname&&t.pathname!=="/"?t.pathname:"";return`${t.host}${n}`}catch{return s.replace(/^https?:\/\//,"")}}function es(){const{data:s}=re(),{data:t}=ne(),{data:n}=le(),[i,x]=p.useState("installed"),[g,h]=p.useState(),[m,f]=p.useState(""),j=n==null?void 0:n.uiHints,y=(t==null?void 0:t.providers)??[],M=(s==null?void 0:s.providers)??{},A=y.filter(d=>{var u;return(u=M[d.name])==null?void 0:u.apiKeySet}).length,T=[{id:"installed",label:a("providersTabConfigured"),count:A},{id:"all",label:a("providersTabAll"),count:y.length}],b=p.useMemo(()=>{const d=(t==null?void 0:t.providers)??[],u=(s==null?void 0:s.providers)??{},r=m.trim().toLowerCase();return d.filter(c=>{var w;return i==="installed"?!!((w=u[c.name])!=null&&w.apiKeySet):!0}).filter(c=>r?(c.displayName||c.name).toLowerCase().includes(r)||c.name.toLowerCase().includes(r):!0)},[t,s,i,m]);p.useEffect(()=>{if(b.length===0){h(void 0);return}b.some(u=>u.name===g)||h(b[0].name)},[b,g]);const C=g;return!s||!t?e.jsx("div",{className:"p-8",children:a("providersLoading")}):e.jsxs(Ae,{children:[e.jsx(Ce,{title:a("providersPageTitle"),description:a("providersPageDescription")}),e.jsxs("div",{className:De,children:[e.jsxs("section",{className:Be,children:[e.jsx("div",{className:"border-b border-gray-100 px-4 pt-4",children:e.jsx(Ie,{tabs:T,activeTab:i,onChange:x,className:"mb-0"})}),e.jsx("div",{className:"border-b border-gray-100 px-4 py-3",children:e.jsxs("div",{className:"relative",children:[e.jsx(we,{className:"pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-400"}),e.jsx(D,{value:m,onChange:d=>f(d.target.value),placeholder:a("providersFilterPlaceholder"),className:"h-10 rounded-xl pl-9"})]})}),e.jsxs("div",{className:"min-h-0 flex-1 space-y-2 overflow-y-auto p-3",children:[b.map(d=>{const u=s.providers[d.name],r=!!(u!=null&&u.apiKeySet),c=C===d.name,w=_(`providers.${d.name}`,j),P=(u==null?void 0:u.apiBase)||d.defaultApiBase||"",S=He(P)||(w==null?void 0:w.help)||a("providersDefaultDescription");return e.jsx("button",{type:"button",onClick:()=>h(d.name),className:G("w-full rounded-xl border p-2.5 text-left transition-all",c?"border-primary/30 bg-primary-50/40 shadow-sm":"border-gray-200/70 bg-white hover:border-gray-300 hover:bg-gray-50/70"),children:e.jsxs("div",{className:"flex items-start justify-between gap-3",children:[e.jsxs("div",{className:"flex min-w-0 items-center gap-3",children:[e.jsx($e,{name:d.name,src:ke(d.name),className:G("h-10 w-10 rounded-lg border",r?"border-primary/30 bg-white":"border-gray-200/70 bg-white"),imgClassName:"h-5 w-5 object-contain",fallback:e.jsx("span",{className:"text-sm font-semibold uppercase text-gray-500",children:d.name[0]})}),e.jsxs("div",{className:"min-w-0",children:[e.jsx("p",{className:"truncate text-sm font-semibold text-gray-900",children:d.displayName||d.name}),e.jsx("p",{className:"line-clamp-1 text-[11px] text-gray-500",children:S})]})]}),e.jsx(ie,{status:r?"ready":"setup",label:r?a("statusReady"):a("statusSetup"),className:"min-w-[56px] justify-center"})]})},d.name)}),b.length===0&&e.jsxs("div",{className:"flex h-full min-h-[220px] flex-col items-center justify-center rounded-xl border border-dashed border-gray-200 bg-gray-50/70 py-10 text-center",children:[e.jsx("div",{className:"mb-3 flex h-10 w-10 items-center justify-center rounded-lg bg-white",children:e.jsx(ae,{className:"h-5 w-5 text-gray-300"})}),e.jsx("p",{className:"text-sm font-medium text-gray-700",children:a("providersNoMatch")})]})]})]}),e.jsx(Ge,{providerName:C})]})]})}export{es as ProvidersList};