@geminilight/mindos 0.6.63 → 0.6.65

package/app/components/settings/CustomProviderFields.tsx

@@ -0,0 +1,121 @@
+'use client';
+
+import { Field, Select, Input, PasswordInput } from './Primitives';
+import { PROVIDER_PRESETS, ALL_PROVIDER_IDS, type ProviderId } from '@/lib/agent/providers';
+import ModelInput from '@/components/shared/ModelInput';
+import type { CustomProviderFormState } from './useCustomProviderForm';
+import type { AiTabProps } from './types';
+
+interface CustomProviderFieldsProps {
+  form: CustomProviderFormState;
+  t: AiTabProps['t'];
+  locale: string;
+  /** "compact" = inline in AiTab (name+protocol side by side), "full" = modal layout */
+  layout?: 'compact' | 'full';
+}
+
+/**
+ * Shared form fields for provider editing.
+ * Renders: Name, Protocol, Base URL, API Key, Model.
+ */
+export default function CustomProviderFields({
+  form, t, locale, layout = 'full',
+}: CustomProviderFieldsProps) {
+  const basePreset = PROVIDER_PRESETS[form.protocol];
+
+  const nameLabel = locale === 'zh' ? '名称' : 'Name';
+  const protocolLabel = locale === 'zh' ? '协议' : 'Protocol';
+  const namePlaceholder = locale === 'zh' ? '输入名称' : 'Enter name';
+
+  const nameHint = form.isDuplicateName
+    ? (locale === 'zh' ? '名称已存在' : 'Name already exists')
+    : undefined;
+
+  return (
+    <div className="space-y-3">
+      {/* Name + Protocol */}
+      {layout === 'compact' ? (
+        <div className="grid grid-cols-2 gap-3">
+          <Field label={nameLabel} hint={nameHint} hintError={form.isDuplicateName}>
+            <Input
+              value={form.name}
+              onChange={e => form.setName(e.target.value)}
+              placeholder={namePlaceholder}
+              autoFocus
+            />
+          </Field>
+          <Field label={protocolLabel}>
+            <Select
+              value={form.protocol}
+              onChange={e => form.setProtocol(e.target.value as ProviderId)}
+            >
+              {ALL_PROVIDER_IDS.map(id => (
+                <option key={id} value={id}>
+                  {locale === 'zh' ? PROVIDER_PRESETS[id].nameZh : PROVIDER_PRESETS[id].name}
+                </option>
+              ))}
+            </Select>
+          </Field>
+        </div>
+      ) : (
+        <>
+          <Field label={nameLabel} hint={nameHint} hintError={form.isDuplicateName}>
+            <Input
+              value={form.name}
+              onChange={e => form.setName(e.target.value)}
+              placeholder={namePlaceholder}
+            />
+          </Field>
+          <Field label={protocolLabel}>
+            <Select
+              value={form.protocol}
+              onChange={e => form.setProtocol(e.target.value as ProviderId)}
+            >
+              {ALL_PROVIDER_IDS.map(id => (
+                <option key={id} value={id}>
+                  {locale === 'zh' ? PROVIDER_PRESETS[id].nameZh : PROVIDER_PRESETS[id].name}
+                </option>
+              ))}
+            </Select>
+          </Field>
+        </>
+      )}
+
+      {/* Base URL */}
+      <Field label="Base URL">
+        <Input
+          value={form.baseUrl}
+          onChange={e => form.setBaseUrl(e.target.value)}
+          placeholder={basePreset.fixedBaseUrl || 'https://api.example.com/v1'}
+        />
+      </Field>
+
+      {/* API Key */}
+      <Field
+        label={<>API Key <span className="text-muted-foreground/50 font-normal">{locale === 'zh' ? '(可选)' : '(optional)'}</span></>}
+      >
+        <PasswordInput
+          value={form.apiKey}
+          onChange={form.setApiKey}
+          placeholder="sk-..."
+        />
+      </Field>
+
+      {/* Model */}
+      <Field label={locale === 'zh' ? '模型' : 'Model'}>
+        <ModelInput
+          value={form.model}
+          onChange={form.setModel}
+          placeholder={basePreset.defaultModel}
+          provider={form.protocol}
+          apiKey={form.apiKey}
+          baseUrl={form.baseUrl}
+          supportsListModels={!!form.baseUrl.trim()}
+          allowNoKey
+          browseLabel={t.settings.ai.listModels}
+          noModelsLabel={t.settings.ai.noModelsFound}
+        />
+      </Field>
+    </div>
+  );
+}

package/app/components/settings/CustomProvidersCard.tsx

@@ -3,7 +3,7 @@
 import { useState, useCallback, useMemo, useRef } from 'react';
 import { Trash2, Edit2, Layers } from 'lucide-react';
 import { useLocale } from '@/lib/stores/locale-store';
-import { type CustomProvider, generateCustomProviderId, isValidCustomProvider } from '@/lib/custom-endpoints';
+import { type CustomProvider, generateCustomProviderId, isValidProvider } from '@/lib/custom-endpoints';
 import { SettingCard } from './Primitives';
 import ProviderModal from './ProviderModal';
 
@@ -76,7 +76,7 @@ export default function CustomProvidersCard({
                 <div className="flex-1 min-w-0">
                   <div className="font-medium text-sm">{provider.name}</div>
                   <div className="text-xs text-muted-foreground mt-1">
-                    {provider.baseProviderId} · {provider.model}
+                    {provider.protocol} · {provider.model}
                   </div>
                   <div className="text-2xs text-muted-foreground/60 mt-1 truncate font-mono">
                     {provider.baseUrl}

package/app/components/settings/KnowledgeTab.tsx

@@ -4,7 +4,7 @@ import { useState, useEffect, useCallback, useSyncExternalStore, useRef } from '
 import { Copy, Check, RefreshCw, Trash2, Sparkles, ChevronDown, ChevronRight, Loader2, Cpu, Zap, Database as DatabaseIcon, HardDrive, RotateCcw, FlaskConical } from 'lucide-react';
 import { toast } from '@/lib/toast';
 import type { KnowledgeTabProps } from './types';
-import { Field, Input, EnvBadge, SectionLabel, Toggle, SettingCard, SettingRow } from './Primitives';
+import { Field, Input, EnvBadge, SectionLabel, Toggle, SettingCard, SettingRow, PasswordInput } from './Primitives';
 import { ConfirmDialog } from '@/components/agents/AgentsPrimitives';
 import { apiFetch } from '@/lib/api';
 import { copyToClipboard } from '@/lib/clipboard';
@@ -103,9 +103,6 @@ export function KnowledgeTab({ data, setData, t }: KnowledgeTabProps) {
     () => 'http://localhost',
   );
 
-  const [showPassword, setShowPassword] = useState(false);
-  const isPasswordMasked = data.webPassword === '***set***';
-
   const [resetting, setResetting] = useState(false);
   // revealed holds the plaintext token after regenerate, until user navigates away
   const [revealedToken, setRevealedToken] = useState<string | null>(null);
@@ -198,22 +195,11 @@ export function KnowledgeTab({ data, setData, t }: KnowledgeTabProps) {
         title={k.securityTitle ?? 'Security'}
       >
         <Field label={k.webPassword} hint={k.webPasswordHint}>
-          <div className="flex gap-2">
-            <Input
-              type={showPassword ? 'text' : 'password'}
-              value={isPasswordMasked ? '••••••••' : (data.webPassword ?? '')}
-              onChange={e => setData(d => d ? { ...d, webPassword: e.target.value } : d)}
-              onFocus={() => { if (isPasswordMasked) setData(d => d ? { ...d, webPassword: '' } : d); }}
-              placeholder={k.passwordPlaceholder ?? 'Leave empty to disable'}
-            />
-            <button
-              type="button"
-              onClick={() => setShowPassword(v => !v)}
-              className="px-3 py-2 text-sm rounded-lg border border-border text-muted-foreground hover:text-foreground hover:bg-muted transition-colors shrink-0"
-            >
-              {showPassword ? (k.passwordHide ?? 'Hide') : (k.passwordShow ?? 'Show')}
-            </button>
-          </div>
+          <PasswordInput
+            value={data.webPassword ?? ''}
+            onChange={v => setData(d => d ? { ...d, webPassword: v } : d)}
+            placeholder={k.passwordPlaceholder ?? 'Leave empty to disable'}
+          />
         </Field>
 
         <Field

package/app/components/settings/McpAgentInstall.tsx

@@ -6,6 +6,7 @@ import CustomSelect from '@/components/CustomSelect';
 import { apiFetch } from '@/lib/api';
 import { copyToClipboard } from '@/lib/clipboard';
 import { toast } from '@/lib/toast';
+import { PasswordInput } from './Primitives';
 import type { AgentInfo, McpAgentInstallProps } from './types';
 
 /* ── Agent Install ─────────────────────────────────────────────── */
@@ -177,8 +178,12 @@ export default function AgentInstall({ agents, t, onRefresh, mode = 'mcp', activ
           </div>
           <div className="space-y-1">
             <label className="text-muted-foreground">{m?.httpToken ?? 'Auth Token'}</label>
-            <input type="password" value={httpToken} onChange={e => setHttpToken(e.target.value)} placeholder="Bearer token"
-              className="w-full px-2.5 py-1.5 text-xs rounded-md border border-border bg-background font-mono text-foreground outline-none focus-visible:ring-1 focus-visible:ring-ring" />
+            <PasswordInput
+              value={httpToken}
+              onChange={setHttpToken}
+              placeholder="Bearer token"
+              size="sm"
+            />
           </div>
         </div>
       )}

package/app/components/settings/Primitives.tsx

@@ -1,18 +1,18 @@
 'use client';
 
 import React, { useState, useRef, useEffect, useCallback, useMemo, useId } from 'react';
-import { ChevronDown, Check } from 'lucide-react';
+import { ChevronDown, Check, Eye, EyeOff } from 'lucide-react';
 
 export function SectionLabel({ children }: { children: React.ReactNode }) {
   return <p className="text-xs font-medium text-muted-foreground uppercase tracking-wider mb-3">{children}</p>;
 }
 
-export function Field({ label, hint, children }: { label: React.ReactNode; hint?: string; children: React.ReactNode }) {
+export function Field({ label, hint, hintError, children }: { label: React.ReactNode; hint?: string; hintError?: boolean; children: React.ReactNode }) {
   return (
     <div className="space-y-1.5">
       <label className="text-sm text-foreground font-medium">{label}</label>
       {children}
-      {hint && <p className="text-xs text-muted-foreground">{hint}</p>}
+      {hint && <p className={`text-xs ${hintError ? 'text-destructive' : 'text-muted-foreground'}`}>{hint}</p>}
     </div>
   );
 }
@@ -26,6 +26,51 @@ export function Input({ className = '', ...props }: React.InputHTMLAttributes<HT
   );
 }
 
+/**
+ * Password/secret input with inline eye toggle.
+ * Eye only shows when input has content. Icon sits inside the border.
+ */
+export function PasswordInput({ value, onChange, placeholder, disabled, className = '', size = 'md' }: {
+  value: string;
+  onChange: (v: string) => void;
+  placeholder?: string;
+  disabled?: boolean;
+  className?: string;
+  size?: 'sm' | 'md';
+}) {
+  const [show, setShow] = useState(false);
+  const sm = size === 'sm';
+  return (
+    <div className={`flex items-center border border-border rounded-lg bg-background focus-within:ring-1 focus-within:ring-ring overflow-hidden ${className}`}>
+      <input
+        type={show ? 'text' : 'password'}
+        value={value}
+        onChange={e => onChange(e.target.value)}
+        placeholder={placeholder ?? '••••••••'}
+        disabled={disabled}
+        className={`flex-1 bg-transparent text-foreground placeholder:text-muted-foreground outline-none disabled:opacity-50 ${
+          sm ? 'px-2.5 py-1.5 text-xs font-mono' : 'px-3 py-2 text-sm'
+        }`}
+      />
+      {!!value && (
+        <button
+          type="button"
+          tabIndex={-1}
+          onMouseDown={e => e.preventDefault()}
+          onClick={() => setShow(v => !v)}
+          disabled={disabled}
+          className={`shrink-0 text-muted-foreground hover:text-foreground transition-colors disabled:opacity-50 ${
+            sm ? 'p-1.5' : 'p-2'
+          }`}
+          title={show ? 'Hide' : 'Show'}
+        >
+          {show ? <EyeOff size={sm ? 14 : 16} /> : <Eye size={sm ? 14 : 16} />}
+        </button>
+      )}
+    </div>
+  );
+}
+
 interface SelectOption { value: string; label: string }
 
 export function Select({ value, onChange, children, className = '', disabled }: {
@@ -195,107 +240,6 @@ export function Toggle({ checked, onChange, size = 'md', disabled, title, onClic
   );
 }
 
-export function ApiKeyInput({ value, onChange, placeholder, disabled, labels }: {
-  value: string;
-  onChange: (v: string) => void;
-  placeholder?: string;
-  disabled?: boolean;
-  labels?: { change?: string; cancel?: string };
-}) {
-  const isMasked = value === '***set***';
-  const [editing, setEditing] = useState(false);
-  const [draft, setDraft] = useState('');
-  const inputRef = useRef<HTMLInputElement>(null);
-  const prevValueRef = useRef(value);
-
-  // Reset editing when the masked value identity changes (e.g. provider switch)
-  useEffect(() => {
-    if (prevValueRef.current !== value) {
-      prevValueRef.current = value;
-      setEditing(false);
-      setDraft('');
-    }
-  }, [value]);
-
-  const commitDraft = useCallback(() => {
-    if (draft.trim()) {
-      onChange(draft);
-    }
-    setEditing(false);
-    setDraft('');
-  }, [draft, onChange]);
-
-  const cancelEdit = useCallback(() => {
-    setEditing(false);
-    setDraft('');
-  }, []);
-
-  const changeLabel = labels?.change ?? 'Change';
-  const cancelLabel = labels?.cancel ?? 'Cancel';
-
-  // Masked state: show dots + "Change" button. No clearing on click.
-  if (isMasked && !editing) {
-    return (
-      <div className="flex items-center gap-2">
-        <div className="flex-1 px-3 py-2 text-sm bg-muted/50 border border-border rounded-lg text-muted-foreground select-none tracking-widest">
-          ••••••••••••
-        </div>
-        <button
-          type="button"
-          onClick={() => {
-            setDraft('');
-            setEditing(true);
-            requestAnimationFrame(() => inputRef.current?.focus());
-          }}
-          disabled={disabled}
-          className="shrink-0 px-3 py-2 text-xs font-medium rounded-lg border border-border text-muted-foreground hover:text-foreground hover:bg-muted transition-colors disabled:opacity-50"
-        >
-          {changeLabel}
-        </button>
-      </div>
-    );
-  }
-
-  // Edit mode (replacing masked key) — uses local draft, commits on Enter/blur
-  if (editing) {
-    return (
-      <div className="flex items-center gap-2">
-        <input
-          ref={inputRef}
-          type="password"
-          value={draft}
-          onChange={e => setDraft(e.target.value)}
-          onKeyDown={e => { if (e.key === 'Enter') commitDraft(); }}
-          onBlur={commitDraft}
-          placeholder={placeholder ?? 'sk-...'}
-          disabled={disabled}
-          className="flex-1 px-3 py-2 text-sm bg-background border border-border rounded-lg text-foreground placeholder:text-muted-foreground outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:opacity-50"
-        />
-        <button
-          type="button"
-          onMouseDown={e => e.preventDefault()}
-          onClick={cancelEdit}
-          className="shrink-0 px-3 py-2 text-xs font-medium rounded-lg border border-border text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"
-        >
-          {cancelLabel}
-        </button>
-      </div>
-    );
-  }
-
-  // Normal (no masked key) — direct editing
-  return (
-    <input
-      type="password"
-      value={value}
-      onChange={e => onChange(e.target.value)}
-      placeholder={placeholder ?? 'sk-...'}
-      disabled={disabled}
-      className="w-full px-3 py-2 text-sm bg-background border border-border rounded-lg text-foreground placeholder:text-muted-foreground outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:opacity-50"
-    />
-  );
-}
-
 /**
  * 💡 SUGGESTION #10: Unified primary button primitive for amber actions
  * Replaces inline `style={{ background: 'var(--amber)', color: 'var(--amber-foreground)' }}` pattern