npm - @nextclaw/ui - Versions diffs - 0.5.41 → 0.5.43 - Mend

@nextclaw/ui 0.5.41 → 0.5.43

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (32) hide show

package/dist/index.html CHANGED Viewed

@@ -6,9 +6,9 @@
   <link rel="icon" type="image/svg+xml" href="/logo.svg" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>NextClaw - 系统配置</title>
-  <script type="module" crossorigin src="/assets/index-C8UPX5Q7.js"></script>
-  <link rel="modulepreload" crossorigin href="/assets/vendor-DN_iJQc4.js">
-  <link rel="stylesheet" crossorigin href="/assets/index-DMEuanmd.css">
+  <script type="module" crossorigin src="/assets/index-CT15pXtn.js"></script>
+  <link rel="modulepreload" crossorigin href="/assets/vendor-CHxMoJ93.js">
+  <link rel="stylesheet" crossorigin href="/assets/index-c0vY8dDm.css">
 </head>
 <body>

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@nextclaw/ui",
-  "version": "0.5.41",
+  "version": "0.5.43",
   "private": false,
   "type": "module",
   "license": "MIT",

package/src/components/chat/ChatPage.tsx CHANGED Viewed

@@ -104,6 +104,7 @@ export function ChatPage() {
   const { confirm, ConfirmDialog } = useConfirmDialog();
   const threadRef = useRef<HTMLDivElement | null>(null);
+  const isUserScrollingRef = useRef(false);
   const streamRunIdRef = useRef(0);
   const queueIdRef = useRef(0);
   const selectedSessionKeyRef = useRef<string | null>(selectedSessionKey);
@@ -200,15 +201,39 @@ export function ChatPage() {
   useEffect(() => {
     selectedSessionKeyRef.current = selectedSessionKey;
+    // Reset scroll state when switching sessions
+    isUserScrollingRef.current = false;
   }, [selectedSessionKey]);
+  // Check if user is near bottom (within 50px)
+  const isNearBottom = useCallback(() => {
+    const element = threadRef.current;
+    if (!element) return true;
+    const threshold = 50;
+    return element.scrollHeight - element.scrollTop - element.clientHeight < threshold;
+  }, []);
+  // Handle scroll events to detect user scrolling up
+  const handleScroll = useCallback(() => {
+    if (isNearBottom()) {
+      isUserScrollingRef.current = false;
+    } else {
+      isUserScrollingRef.current = true;
+    }
+  }, [isNearBottom]);
+  // Auto-scroll to bottom only if user hasn't scrolled up
   useEffect(() => {
     const element = threadRef.current;
     if (!element) {
       return;
     }
+    // Don't auto-scroll if user has scrolled up
+    if (isUserScrollingRef.current) {
+      return;
+    }
     element.scrollTop = element.scrollHeight;
-  }, [mergedEvents, isSending, selectedSessionKey]);
+  }, [mergedEvents, isSending]);
   useEffect(() => {
     return () => {
@@ -532,7 +557,7 @@ export function ChatPage() {
             </div>
           </div>
-          <div ref={threadRef} className="flex-1 min-h-0 overflow-y-auto custom-scrollbar px-5 py-5">
+          <div ref={threadRef} onScroll={handleScroll} className="flex-1 min-h-0 overflow-y-auto custom-scrollbar px-5 py-5">
             {!selectedSessionKey ? (
               <div className="h-full flex items-center justify-center">
                 <div className="text-center text-gray-500">

package/src/components/common/MaskedInput.tsx CHANGED Viewed

@@ -3,26 +3,51 @@ import { Input } from '@/components/ui/input';
 import { Button } from '@/components/ui/button';
 import { Eye, EyeOff } from 'lucide-react';
 import { cn } from '@/lib/utils';
-import { t } from '@/lib/i18n';
 interface MaskedInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
   maskedValue?: string;
   isSet?: boolean;
 }
-export function MaskedInput({ maskedValue, isSet, className, ...props }: MaskedInputProps) {
+export function MaskedInput({ maskedValue, isSet, className, value, onChange, placeholder, ...props }: MaskedInputProps) {
   const [showKey, setShowKey] = useState(false);
+  const [isEditing, setIsEditing] = useState(false);
+  const hasUserInput = typeof value === 'string' && value.length > 0;
+  // Determine what to display
+  const showMaskedDots = isSet && !hasUserInput && !isEditing;
   return (
     <div className="relative">
-      <Input
-        type={showKey ? 'text' : 'password'}
-        className={cn('pr-20', className)}
-        placeholder={isSet ? `${t('apiKeySet')} (${t('unchanged')})` : ''}
-        {...props}
-      />
+      {showMaskedDots ? (
+        // Show masked state - clickable to edit
+        <div
+          onClick={() => setIsEditing(true)}
+          className={cn(
+            'flex h-9 w-full rounded-xl border border-gray-200/80 bg-white px-3.5 py-2 text-sm text-gray-500 cursor-text items-center pr-12',
+            className
+          )}
+        >
+          ••••••••••••
+        </div>
+      ) : (
+        <Input
+          type={showKey ? 'text' : 'password'}
+          className={cn('pr-12', className)}
+          value={value}
+          onChange={onChange}
+          onBlur={() => {
+            if (!hasUserInput) {
+              setIsEditing(false);
+            }
+          }}
+          placeholder={placeholder}
+          autoFocus={isEditing}
+          {...props}
+        />
+      )}
       <div className="absolute right-2 top-1/2 -translate-y-1/2 flex gap-1">
-        {(isSet || maskedValue) && (
+        {(isSet || hasUserInput) && (
           <Button
             type="button"
             variant="ghost"

package/src/components/config/ProviderForm.tsx CHANGED Viewed

@@ -17,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, Trash2 } from 'lucide-react';
+import { CircleDotDashed, Plus, X, Trash2, ChevronDown, Settings2 } from 'lucide-react';
 import { toast } from 'sonner';
 import { CONFIG_DETAIL_CARD_CLASS, CONFIG_EMPTY_DETAIL_CARD_CLASS } from './config-layout';
@@ -152,6 +152,8 @@ export function ProviderForm({ providerName, onProviderDeleted }: ProviderFormPr
   const [models, setModels] = useState<string[]>([]);
   const [modelDraft, setModelDraft] = useState('');
   const [providerDisplayName, setProviderDisplayName] = useState('');
+  const [showAdvanced, setShowAdvanced] = useState(false);
+  const [showModelInput, setShowModelInput] = useState(false);
   const providerSpec = meta?.providers.find((p) => p.name === providerName);
   const providerConfig = providerName ? config?.providers[providerName] : null;
@@ -382,22 +384,31 @@ export function ProviderForm({ providerName, onProviderDeleted }: ProviderFormPr
   return (
     <div className={CONFIG_DETAIL_CARD_CLASS}>
-      <div className="border-b border-gray-100 px-6 py-5">
-        <div className="flex flex-wrap items-center justify-between gap-3">
-          <div className="min-w-0">
-            <h3 className="truncate text-lg font-semibold text-gray-900">{providerTitle}</h3>
-            <p className="mt-1 text-sm text-gray-500">{t('providerFormDescription')}</p>
+      <div className="border-b border-gray-100 px-6 py-4">
+        <div className="flex items-center justify-between">
+          <h3 className="truncate text-lg font-semibold text-gray-900">{providerTitle}</h3>
+          <div className="flex items-center gap-3">
+            {isCustomProvider && (
+              <button
+                type="button"
+                onClick={handleDeleteProvider}
+                disabled={deleteProvider.isPending}
+                className="text-gray-400 hover:text-red-500 transition-colors"
+                title={t('providerDelete')}
+              >
+                <Trash2 className="h-4 w-4" />
+              </button>
+            )}
+            <StatusDot status={providerConfig.apiKeySet ? 'ready' : 'setup'} label={statusLabel} />
           </div>
-          <StatusDot status={providerConfig.apiKeySet ? 'ready' : 'setup'} label={statusLabel} />
         </div>
       </div>
       <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">
+        <div className="min-h-0 flex-1 space-y-5 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" />
+            <div className="space-y-2">
+              <Label htmlFor="providerDisplayName" className="text-sm font-medium text-gray-900">
                 {t('providerDisplayName')}
               </Label>
               <Input
@@ -408,13 +419,12 @@ export function ProviderForm({ providerName, onProviderDeleted }: ProviderFormPr
                 placeholder={defaultDisplayName || t('providerDisplayNamePlaceholder')}
                 className="rounded-xl"
               />
-              <p className="text-xs text-gray-500">{t('providerDisplayNameHelp')}</p>
+              <p className="text-xs text-gray-500">{t('providerDisplayNameHelpShort')}</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" />
+          <div className="space-y-2">
+            <Label htmlFor="apiKey" className="text-sm font-medium text-gray-900">
               {apiKeyHint?.label ?? t('apiKey')}
             </Label>
             <MaskedInput
@@ -422,15 +432,14 @@ export function ProviderForm({ providerName, onProviderDeleted }: ProviderFormPr
               value={apiKey}
               isSet={providerConfig.apiKeySet}
               onChange={(e) => setApiKey(e.target.value)}
-              placeholder={providerConfig.apiKeySet ? t('apiKeySet') : apiKeyHint?.placeholder ?? t('enterApiKey')}
+              placeholder={apiKeyHint?.placeholder ?? t('enterApiKey')}
               className="rounded-xl"
             />
             <p className="text-xs text-gray-500">{t('leaveBlankToKeepUnchanged')}</p>
           </div>
-          <div className="space-y-2.5">
-            <Label htmlFor="apiBase" className="flex items-center gap-2 text-sm font-medium text-gray-900">
-              <Globe className="h-3.5 w-3.5 text-gray-500" />
+          <div className="space-y-2">
+            <Label htmlFor="apiBase" className="text-sm font-medium text-gray-900">
               {apiBaseHint?.label ?? t('apiBase')}
             </Label>
             <Input
@@ -441,70 +450,66 @@ export function ProviderForm({ providerName, onProviderDeleted }: ProviderFormPr
               placeholder={defaultApiBase || apiBaseHint?.placeholder || 'https://api.example.com'}
               className="rounded-xl"
             />
-            <p className="text-xs text-gray-500">{apiBaseHelpText}</p>
-            {isCustomProvider && <p className="text-xs text-gray-500">{t('providerOpenAICompatHint')}</p>}
+            <p className="text-xs text-gray-500">{t('providerApiBaseHelpShort')}</p>
           </div>
-          {providerSpec.supportsWireApi && (
-            <div className="space-y-2.5">
-              <Label htmlFor="wireApi" className="flex items-center gap-2 text-sm font-medium text-gray-900">
-                <Hash className="h-3.5 w-3.5 text-gray-500" />
-                {wireApiHint?.label ?? t('wireApi')}
+          <div className="space-y-2">
+            <div className="flex items-center justify-between">
+              <Label className="text-sm font-medium text-gray-900">
+                {t('providerModelsTitle')}
               </Label>
-              <Select value={wireApi} onValueChange={(v) => setWireApi(v as WireApiType)}>
-                <SelectTrigger className="rounded-xl">
-                  <SelectValue />
-                </SelectTrigger>
-                <SelectContent>
-                  {(providerSpec.wireApiOptions || ['auto', 'chat', 'responses']).map((option) => (
-                    <SelectItem key={option} value={option}>
-                      {option === 'chat' ? t('wireApiChat') : option === 'responses' ? t('wireApiResponses') : t('wireApiAuto')}
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-              {wireApiHint?.help && <p className="text-xs text-gray-500">{wireApiHint.help}</p>}
+              {!showModelInput && (
+                <button
+                  type="button"
+                  onClick={() => setShowModelInput(true)}
+                  className="text-xs text-primary hover:text-primary/80 font-medium flex items-center gap-1"
+                >
+                  <Plus className="h-3 w-3" />
+                  {t('providerAddModel')}
+                </button>
+              )}
             </div>
-          )}
-          <div className="space-y-2.5">
-            <Label className="flex items-center gap-2 text-sm font-medium text-gray-900">
-              <Hash className="h-3.5 w-3.5 text-gray-500" />
-              {extraHeadersHint?.label ?? t('extraHeaders')}
-            </Label>
-            <KeyValueEditor value={extraHeaders} onChange={setExtraHeaders} />
-            <p className="text-xs text-gray-500">{extraHeadersHint?.help || t('providerExtraHeadersHelp')}</p>
-          </div>
-          <div className="space-y-2.5">
-            <Label className="flex items-center gap-2 text-sm font-medium text-gray-900">
-              <Sparkles className="h-3.5 w-3.5 text-gray-500" />
-              {t('providerModelsTitle')}
-            </Label>
-            <div className="flex items-center gap-2">
-              <Input
-                value={modelDraft}
-                onChange={(event) => setModelDraft(event.target.value)}
-                onKeyDown={(event) => {
-                  if (event.key === 'Enter') {
-                    event.preventDefault();
-                    handleAddModel();
-                  }
-                }}
-                placeholder={t('providerModelInputPlaceholder')}
-                className="flex-1"
-              />
-              <Button type="button" variant="outline" onClick={handleAddModel} disabled={modelDraft.trim().length === 0}>
-                <Plus className="mr-1.5 h-4 w-4" />
-                {t('providerAddModel')}
-              </Button>
-            </div>
-            <p className="text-xs text-gray-500">{t('providerModelInputHint')}</p>
+            {showModelInput && (
+              <div className="flex items-center gap-2">
+                <Input
+                  value={modelDraft}
+                  onChange={(event) => setModelDraft(event.target.value)}
+                  onKeyDown={(event) => {
+                    if (event.key === 'Enter') {
+                      event.preventDefault();
+                      handleAddModel();
+                    }
+                    if (event.key === 'Escape') {
+                      setShowModelInput(false);
+                      setModelDraft('');
+                    }
+                  }}
+                  placeholder={t('providerModelInputPlaceholder')}
+                  className="flex-1 rounded-xl"
+                  autoFocus
+                />
+                <Button type="button" size="sm" onClick={handleAddModel} disabled={modelDraft.trim().length === 0}>
+                  {t('add')}
+                </Button>
+                <Button type="button" size="sm" variant="ghost" onClick={() => { setShowModelInput(false); setModelDraft(''); }}>
+                  <X className="h-4 w-4" />
+                </Button>
+              </div>
+            )}
             {models.length === 0 ? (
-              <div className="rounded-xl border border-dashed border-gray-200 bg-gray-50 px-3 py-2 text-xs text-gray-500">
-                {t('providerModelsEmpty')}
+              <div className="rounded-xl border border-dashed border-gray-200 bg-gray-50 px-4 py-6 text-center">
+                <p className="text-sm text-gray-500">{t('providerModelsEmptyShort')}</p>
+                {!showModelInput && (
+                  <button
+                    type="button"
+                    onClick={() => setShowModelInput(true)}
+                    className="mt-2 text-sm text-primary hover:text-primary/80 font-medium"
+                  >
+                    {t('providerAddFirstModel')}
+                  </button>
+                )}
               </div>
             ) : (
               <div className="flex flex-wrap gap-2">
@@ -526,32 +531,61 @@ export function ProviderForm({ providerName, onProviderDeleted }: ProviderFormPr
                 ))}
               </div>
             )}
-            <p className="text-xs text-gray-500">{t('providerModelsHelp')}</p>
           </div>
-        </div>
-        <div className="flex flex-wrap items-center justify-between gap-3 border-t border-gray-100 px-6 py-4">
-          <div className="flex flex-wrap items-center gap-2">
-            <Button type="button" variant="outline" onClick={resetToDefault}>
-              <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>
+          {/* Advanced Settings - Collapsible */}
+          <div className="border-t border-gray-100 pt-4">
+            <button
+              type="button"
+              onClick={() => setShowAdvanced(!showAdvanced)}
+              className="flex w-full items-center justify-between text-sm text-gray-600 hover:text-gray-900 transition-colors"
+            >
+              <span className="flex items-center gap-1.5">
+                <Settings2 className="h-3.5 w-3.5" />
+                {t('providerAdvancedSettings')}
+              </span>
+              <ChevronDown className={`h-4 w-4 transition-transform ${showAdvanced ? 'rotate-180' : ''}`} />
+            </button>
+            {showAdvanced && (
+              <div className="mt-4 space-y-5">
+                {providerSpec.supportsWireApi && (
+                  <div className="space-y-2">
+                    <Label htmlFor="wireApi" className="text-sm font-medium text-gray-900">
+                      {wireApiHint?.label ?? t('wireApi')}
+                    </Label>
+                    <Select value={wireApi} onValueChange={(v) => setWireApi(v as WireApiType)}>
+                      <SelectTrigger className="rounded-xl">
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {(providerSpec.wireApiOptions || ['auto', 'chat', 'responses']).map((option) => (
+                          <SelectItem key={option} value={option}>
+                            {option === 'chat' ? t('wireApiChat') : option === 'responses' ? t('wireApiResponses') : t('wireApiAuto')}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                )}
+                <div className="space-y-2">
+                  <Label className="text-sm font-medium text-gray-900">
+                    {extraHeadersHint?.label ?? t('extraHeaders')}
+                  </Label>
+                  <KeyValueEditor value={extraHeaders} onChange={setExtraHeaders} />
+                  <p className="text-xs text-gray-500">{t('providerExtraHeadersHelpShort')}</p>
+                </div>
+              </div>
             )}
-            <Button type="button" variant="outline" onClick={handleTestConnection} disabled={testProviderConnection.isPending}>
-              <CircleDotDashed className="mr-2 h-4 w-4" />
-              {testProviderConnection.isPending ? t('providerTestingConnection') : t('providerTestConnection')}
-            </Button>
           </div>
+        </div>
+        <div className="flex items-center justify-between border-t border-gray-100 px-6 py-4">
+          <Button type="button" variant="outline" size="sm" onClick={handleTestConnection} disabled={testProviderConnection.isPending}>
+            <CircleDotDashed className="mr-1.5 h-4 w-4" />
+            {testProviderConnection.isPending ? t('providerTestingConnection') : t('providerTestConnection')}
+          </Button>
           <Button type="submit" disabled={updateProvider.isPending || !hasChanges}>
             {updateProvider.isPending ? t('saving') : hasChanges ? t('save') : t('unchanged')}
           </Button>

package/src/components/ui/input.tsx CHANGED Viewed

@@ -9,7 +9,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
       <input
         type={type}
         className={cn(
-          'flex h-9 w-full rounded-xl border border-gray-200/80 bg-white px-3.5 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-gray-400 focus:outline-none focus:ring-1 focus:ring-primary/40 focus:border-primary/40 transition-colors disabled:cursor-not-allowed disabled:opacity-50',
+          'flex h-9 w-full rounded-xl border border-gray-200/80 bg-white px-3.5 py-2 text-sm text-gray-900 file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-gray-300 placeholder:font-normal focus:outline-none focus:ring-1 focus:ring-primary/40 focus:border-primary/40 transition-colors disabled:cursor-not-allowed disabled:opacity-50',
           className
         )}
         ref={ref}

package/src/lib/i18n.ts CHANGED Viewed

@@ -243,6 +243,12 @@ export const LABELS: Record<string, { zh: string; en: string }> = {
     zh: '系统会先填充预置模型；你可以在这里新增或删除。请填写当前提供商自己的模型 ID（不带当前 provider 前缀）；若输入带当前 provider 前缀会自动去除，但会保留后续路径（如 openai/gpt-5）。',
     en: 'Built-in models are prefilled and can be added or removed here. Enter provider-local model ids without the current provider prefix; if prefixed input is entered, only the current provider prefix is removed while the remaining path is preserved (for example, openai/gpt-5).'
   },
+  providerModelsEmptyShort: { zh: '暂无可用模型', en: 'No models available' },
+  providerAddFirstModel: { zh: '添加第一个模型', en: 'Add first model' },
+  providerDisplayNameHelpShort: { zh: '便于区分多个自定义提供商', en: 'Helps distinguish multiple custom providers' },
+  providerApiBaseHelpShort: { zh: '一般只需填写域名，系统自动补全路径', en: 'Usually just the domain; path auto-appended' },
+  providerExtraHeadersHelpShort: { zh: '可选，用于自定义鉴权等场景', en: 'Optional, for custom auth etc.' },
+  providerAdvancedSettings: { zh: '高级设置', en: 'Advanced Settings' },
   resetToDefault: { zh: '恢复默认', en: 'Reset to Default' },
   leaveBlankToKeepUnchanged: { zh: '留空则保持不变', en: 'Leave blank to keep unchanged' },

package/dist/assets/ProvidersList-BvtEBIdN.js DELETED Viewed

@@ -1 +0,0 @@

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