@geminilight/mindos 0.6.61 → 0.6.65

package/_standalone/components/settings/TestButton.tsx

@@ -0,0 +1,64 @@
+'use client';
+
+import { AlertCircle, Loader2, Check, Zap } from 'lucide-react';
+import type { TestResult, ErrorCode } from './useCustomProviderForm';
+import type { AiTabProps } from './types';
+
+function errorMessage(t: AiTabProps['t'], code?: ErrorCode): string {
+  switch (code) {
+    case 'auth_error': return t.settings.ai.testKeyAuthError;
+    case 'model_not_found': return t.settings.ai.testKeyModelNotFound;
+    case 'rate_limited': return t.settings.ai.testKeyRateLimited;
+    case 'network_error': return t.settings.ai.testKeyNetworkError;
+    default: return t.settings.ai.testKeyUnknown;
+  }
+}
+
+/**
+ * Shared test-connection button used by both built-in and custom provider forms.
+ * Shows contextual icon + text based on test result state (idle/testing/ok/error).
+ */
+export function TestButton({
+  result, disabled, onTest, t,
+}: {
+  result: TestResult;
+  disabled: boolean;
+  onTest: () => void;
+  t: AiTabProps['t'];
+}) {
+  const isTesting = result.state === 'testing';
+  const isOk = result.state === 'ok';
+  const isError = result.state === 'error';
+
+  return (
+    <button
+      type="button"
+      disabled={disabled || isTesting}
+      onClick={onTest}
+      className={`inline-flex items-center gap-1.5 px-3.5 py-1.5 text-sm font-medium rounded-lg transition-all duration-200 disabled:cursor-not-allowed ${
+        isOk
+          ? 'bg-success/10 text-success border border-success/20'
+          : isError
+            ? 'bg-destructive/8 text-destructive border border-destructive/20 hover:bg-destructive/12'
+            : 'border border-border text-muted-foreground hover:text-foreground hover:border-foreground/20 disabled:opacity-40'
+      }`}
+    >
+      {isTesting ? (
+        <Loader2 size={13} className="animate-spin" />
+      ) : isOk ? (
+        <Check size={13} />
+      ) : isError ? (
+        <AlertCircle size={13} />
+      ) : (
+        <Zap size={13} />
+      )}
+      {isTesting
+        ? t.settings.ai.testKeyTesting
+        : isOk && result.latency != null
+          ? t.settings.ai.testKeyOk(result.latency)
+          : isError
+            ? errorMessage(t, result.code)
+            : t.settings.ai.testKey}
+    </button>
+  );
+}

package/_standalone/components/settings/types.ts

@@ -1,16 +1,10 @@
 import type { Locale, Messages } from '@/lib/i18n';
 import type React from 'react';
-import type { ProviderId } from '@/lib/agent/providers';
-
-export interface ProviderConfig {
-  apiKey: string;
-  model: string;
-  baseUrl?: string;
-}
+import type { Provider } from '@/lib/custom-endpoints';
 
 export interface AiSettings {
-  provider: ProviderId;
-  providers: Partial<Record<ProviderId, ProviderConfig>>;
+  activeProvider: string;
+  providers: Provider[];
 }
 
 export interface AgentSettings {

package/_standalone/components/settings/useCustomProviderForm.ts

@@ -0,0 +1,132 @@
+'use client';
+
+import { useState, useCallback } from 'react';
+import { type ProviderId } from '@/lib/agent/providers';
+import { type Provider, generateProviderId } from '@/lib/custom-endpoints';
+
+export type TestState = 'idle' | 'testing' | 'ok' | 'error';
+export type ErrorCode = 'auth_error' | 'model_not_found' | 'rate_limited' | 'network_error' | 'unknown';
+
+export interface TestResult {
+  state: TestState;
+  latency?: number;
+  error?: string;
+  code?: ErrorCode;
+}
+
+export interface CustomProviderFormState {
+  name: string;
+  setName: (v: string) => void;
+  protocol: ProviderId;
+  setProtocol: (v: ProviderId) => void;
+  apiKey: string;
+  setApiKey: (v: string) => void;
+  model: string;
+  setModel: (v: string) => void;
+  baseUrl: string;
+  setBaseUrl: (v: string) => void;
+  testResult: TestResult;
+  canSave: boolean;
+  isDuplicateName: boolean;
+  handleTest: () => Promise<void>;
+  handleSave: () => void;
+}
+
+/**
+ * Shared form state + test/save logic for provider forms.
+ * Used by both the inline form (AiTab) and the modal (ProviderModal).
+ */
+export function useCustomProviderForm({
+  initial,
+  onSave,
+  locale,
+  existingNames,
+}: {
+  initial?: Provider;
+  onSave: (provider: Provider) => void;
+  locale: string;
+  existingNames?: string[];
+}): CustomProviderFormState {
+  const [name, setName] = useState(initial?.name ?? '');
+  const [protocol, setProtocol] = useState<ProviderId>(initial?.protocol ?? 'openai');
+  const [apiKey, setApiKey] = useState(initial?.apiKey ?? '');
+  const [model, setModel] = useState(initial?.model ?? '');
+  const [baseUrl, setBaseUrl] = useState(initial?.baseUrl ?? '');
+  const [testResult, setTestResult] = useState<TestResult>({ state: 'idle' });
+
+  // Check for duplicate name (exclude the provider being edited)
+  const trimmedName = name.trim();
+  const isDuplicateName = !!(trimmedName && existingNames?.some(
+    n => n.toLowerCase() === trimmedName.toLowerCase(),
+  ));
+
+  const canSave = !!(trimmedName && baseUrl.trim() && model.trim() && !isDuplicateName);
+
+  const handleTest = useCallback(async () => {
+    if (!canSave) {
+      setTestResult({
+        state: 'error',
+        error: locale === 'zh' ? '名称、接口地址和模型为必填' : 'Name, base URL, and model are required',
+      });
+      return;
+    }
+    setTestResult({ state: 'testing' });
+    try {
+      const res = await fetch('/api/settings/test-key', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(
+          initial?.id
+            ? { provider: initial.id, apiKey, model, baseUrl }
+            : { protocol, apiKey, model, baseUrl },
+        ),
+      });
+      const json = await res.json();
+      if (json.ok) {
+        setTestResult({ state: 'ok', latency: json.latency });
+      } else {
+        setTestResult({ state: 'error', error: json.error || 'Test failed', code: json.code });
+      }
+    } catch {
+      setTestResult({ state: 'error', code: 'network_error', error: 'Network error' });
+    }
+  }, [canSave, apiKey, model, baseUrl, protocol, locale, initial?.id]);
+
+  const handleSave = useCallback(() => {
+    if (isDuplicateName) {
+      setTestResult({
+        state: 'error',
+        error: locale === 'zh' ? '名称已存在，请使用其他名称' : 'Name already exists, please use a different name',
+      });
+      return;
+    }
+    if (!canSave) {
+      setTestResult({
+        state: 'error',
+        error: locale === 'zh' ? '名称、接口地址和模型为必填' : 'Name, base URL, and model are required',
+      });
+      return;
+    }
+    onSave({
+      id: initial?.id || generateProviderId(),
+      name: name.trim(),
+      protocol,
+      apiKey,
+      model: model.trim(),
+      baseUrl: baseUrl.trim(),
+    });
+  }, [canSave, isDuplicateName, name, protocol, apiKey, model, baseUrl, initial?.id, onSave, locale]);
+
+  return {
+    name, setName,
+    protocol, setProtocol,
+    apiKey, setApiKey,
+    model, setModel,
+    baseUrl, setBaseUrl,
+    testResult,
+    canSave,
+    isDuplicateName,
+    handleTest,
+    handleSave,
+  };
+}

package/_standalone/components/setup/StepAI.tsx

@@ -2,11 +2,12 @@
 
 import { useState, useEffect } from 'react';
 import { ChevronDown, ChevronRight, Copy, ExternalLink } from 'lucide-react';
-import { Field, Input, ApiKeyInput } from '@/components/settings/Primitives';
+import { Field, Input, PasswordInput } from '@/components/settings/Primitives';
 import type { SetupState, SetupMessages, PortStatus, ProviderSetupConfig } from './types';
 import type { ProviderId } from '@/lib/agent/providers';
 import { PROVIDER_PRESETS, isProviderId, getApiKeyEnvVar, getDefaultBaseUrl } from '@/lib/agent/providers';
 import ProviderSelect from '@/components/shared/ProviderSelect';
+import ModelInput from '@/components/shared/ModelInput';
 import StepPorts from './StepPorts';
 import { useLocale } from '@/lib/stores/locale-store';
 
@@ -57,7 +58,7 @@ export default function StepAI({ state, update, s, onCopyToken, webPortStatus, m
     <div className="space-y-5">
       <ProviderSelect
         value={state.provider}
-        onChange={id => update('provider', id)}
+        onChange={id => update('provider', id as ProviderId | 'skip')}
         showSkip
         compact
         configuredProviders={configuredProviders}
@@ -67,7 +68,7 @@ export default function StepAI({ state, update, s, onCopyToken, webPortStatus, m
         <div className="space-y-4 pt-2">
           {/* API Key */}
           <Field label={s.apiKey}>
-            <ApiKeyInput
+            <PasswordInput
               value={currentConfig.apiKey}
               onChange={v => patchConfig({ apiKey: v })}
               placeholder={currentConfig.apiKeyMask || `${getApiKeyEnvVar(currentProvider as ProviderId) ?? 'API Key'}...`}
@@ -106,10 +107,16 @@ export default function StepAI({ state, update, s, onCopyToken, webPortStatus, m
 
           {/* Model */}
           <Field label={s.model}>
-            <Input
+            <ModelInput
               value={currentConfig.model}
-              onChange={e => patchConfig({ model: e.target.value })}
+              onChange={v => patchConfig({ model: v })}
               placeholder={currentPreset.defaultModel}
+              provider={currentProvider}
+              apiKey={currentConfig.apiKey}
+              baseUrl={currentConfig.baseUrl}
+              supportsListModels={currentPreset.supportsListModels}
+              browseLabel={s.listModels}
+              noModelsLabel={s.noModelsFound}
             />
           </Field>
         </div>

package/_standalone/components/shared/ModelInput.tsx

@@ -0,0 +1,220 @@
+'use client';
+
+import { useState, useRef, useCallback, useEffect, useMemo, type CSSProperties } from 'react';
+import { ChevronDown, Loader2 } from 'lucide-react';
+import { Input } from '@/components/settings/Primitives';
+import { type ProviderId, PROVIDER_PRESETS } from '@/lib/agent/providers';
+
+export interface ModelInputProps {
+  value: string;
+  onChange: (v: string) => void;
+  placeholder: string;
+  provider: ProviderId;
+  apiKey: string;
+  envKey?: boolean;
+  baseUrl?: string;
+  supportsListModels: boolean;
+  allowNoKey?: boolean;
+  browseLabel?: string;
+  noModelsLabel?: string;
+}
+
+export default function ModelInput({
+  value, onChange, placeholder, provider, apiKey, envKey, baseUrl,
+  supportsListModels, allowNoKey,
+  browseLabel = 'Browse',
+  noModelsLabel = 'No models found',
+}: ModelInputProps) {
+  const [models, setModels] = useState<string[] | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [open, setOpen] = useState(false);
+  const [error, setError] = useState('');
+  const [focused, setFocused] = useState(false);
+  const [highlightIdx, setHighlightIdx] = useState(-1);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const inputRowRef = useRef<HTMLDivElement>(null);
+  const listRef = useRef<HTMLDivElement>(null);
+  const [dropdownStyle, setDropdownStyle] = useState<CSSProperties>({});
+  const fetchedRef = useRef(false);
+  const fetchVersionRef = useRef(0);
+  const loadingRef = useRef(false);
+
+  const hasKey = allowNoKey || !!apiKey || !!envKey || !!PROVIDER_PRESETS[provider]?.apiKeyFallback;
+
+  useEffect(() => {
+    fetchedRef.current = false;
+    fetchVersionRef.current++;
+    setModels(null);
+  }, [provider, apiKey, baseUrl]);
+
+  const fetchModels = useCallback(async (silent = false) => {
+    if (loadingRef.current) return;
+    loadingRef.current = true;
+    setLoading(true);
+    if (!silent) setError('');
+    const version = fetchVersionRef.current;
+    try {
+      const body: Record<string, string> = { provider };
+      if (apiKey) body.apiKey = apiKey;
+      if (baseUrl) body.baseUrl = baseUrl;
+
+      const res = await fetch('/api/settings/list-models', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(body),
+      });
+      if (version !== fetchVersionRef.current) return;
+      const json = await res.json();
+      if (version !== fetchVersionRef.current) return;
+      if (json.ok && Array.isArray(json.models)) {
+        setModels(json.models);
+        fetchedRef.current = true;
+        if (!silent) setOpen(true);
+      } else if (!silent) {
+        setError(json.error || 'Failed to fetch models');
+      }
+    } catch {
+      if (version !== fetchVersionRef.current) return;
+      if (!silent) setError('Network error');
+    } finally {
+      loadingRef.current = false;
+      setLoading(false);
+    }
+  }, [provider, apiKey, baseUrl]);
+
+  const handleFocus = useCallback(() => {
+    setFocused(true);
+    if (!fetchedRef.current && supportsListModels && hasKey && !loadingRef.current) {
+      fetchModels(true);
+    }
+  }, [supportsListModels, hasKey, fetchModels]);
+
+  const filtered = useMemo(() => {
+    if (!models) return [];
+    if (!value.trim()) return models;
+    const q = value.toLowerCase();
+    return [...models].sort((a, b) => {
+      const al = a.toLowerCase(), bl = b.toLowerCase();
+      const aMatch = al.includes(q), bMatch = bl.includes(q);
+      if (aMatch !== bMatch) return aMatch ? -1 : 1;
+      if (aMatch && bMatch) {
+        const aPrefix = al.startsWith(q), bPrefix = bl.startsWith(q);
+        if (aPrefix !== bPrefix) return aPrefix ? -1 : 1;
+        const aExact = al === q, bExact = bl === q;
+        if (aExact !== bExact) return aExact ? -1 : 1;
+      }
+      return a.localeCompare(b);
+    });
+  }, [models, value]);
+
+  const showDropdown = open || (focused && models !== null && value.trim().length > 0 && filtered.length > 0);
+
+  // Compute fixed position for dropdown so it escapes overflow:auto ancestors
+  useEffect(() => {
+    if (!showDropdown || !inputRowRef.current) return;
+    const rect = inputRowRef.current.getBoundingClientRect();
+    setDropdownStyle({
+      position: 'fixed',
+      top: rect.bottom + 4,
+      left: rect.left,
+      width: rect.width,
+    });
+  }, [showDropdown]);
+
+  useEffect(() => { setHighlightIdx(-1); }, [filtered]);
+
+  useEffect(() => {
+    if (highlightIdx < 0 || !listRef.current) return;
+    const items = listRef.current.querySelectorAll('[data-model-item]');
+    items[highlightIdx]?.scrollIntoView({ block: 'nearest' });
+  }, [highlightIdx]);
+
+  const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
+    const items = showDropdown ? filtered : [];
+    if (!items.length) return;
+
+    if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      setHighlightIdx(i => (i + 1) % items.length);
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault();
+      setHighlightIdx(i => (i - 1 + items.length) % items.length);
+    } else if (e.key === 'Enter' && highlightIdx >= 0 && highlightIdx < items.length) {
+      e.preventDefault();
+      onChange(items[highlightIdx]);
+      setOpen(false);
+      setFocused(false);
+    } else if (e.key === 'Escape') {
+      setOpen(false);
+      setFocused(false);
+    }
+  }, [showDropdown, filtered, highlightIdx, onChange]);
+
+  useEffect(() => {
+    if (!showDropdown) return;
+    function handleClickOutside(e: MouseEvent) {
+      if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
+        setOpen(false);
+        setFocused(false);
+      }
+    }
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, [showDropdown]);
+
+  return (
+    <div ref={containerRef} className="relative">
+      <div ref={inputRowRef} className="flex gap-1.5">
+        <Input
+          value={value}
+          onChange={e => { onChange(e.target.value); if (!open) setFocused(true); }}
+          onFocus={handleFocus}
+          onKeyDown={handleKeyDown}
+          placeholder={placeholder}
+          className="flex-1"
+          autoComplete="off"
+        />
+        {supportsListModels && (
+          <button
+            type="button"
+            disabled={!hasKey || loading}
+            onClick={() => fetchModels(false)}
+            title={browseLabel}
+            className="inline-flex items-center gap-1.5 px-3 py-1.5 text-sm rounded-lg border border-border text-muted-foreground hover:text-foreground hover:border-foreground/20 transition-colors disabled:opacity-40 disabled:cursor-not-allowed shrink-0"
+          >
+            {loading ? <Loader2 size={12} className="animate-spin" /> : <ChevronDown size={12} />}
+            {browseLabel}
+          </button>
+        )}
+      </div>
+      {error && <p className="text-xs text-error mt-1">{error}</p>}
+      {showDropdown && filtered.length > 0 && (
+        <div ref={listRef} style={dropdownStyle} className="fixed z-[9999] max-h-48 overflow-y-auto rounded-lg border border-border bg-popover shadow-lg">
+          {filtered.map((m, i) => {
+            const isMatch = !value.trim() || m.toLowerCase().includes(value.toLowerCase());
+            return (
+              <button
+                key={m}
+                type="button"
+                data-model-item
+                className={`w-full text-left px-3 py-1.5 text-sm transition-colors ${
+                  m === value ? 'bg-accent/60 font-medium'
+                  : i === highlightIdx ? 'bg-accent'
+                  : 'hover:bg-accent'
+                } ${!isMatch ? 'opacity-50' : ''}`}
+                onClick={() => { onChange(m); setOpen(false); setFocused(false); }}
+              >
+                {m}
+              </button>
+            );
+          })}
+        </div>
+      )}
+      {open && filtered.length === 0 && (
+        <div style={dropdownStyle} className="fixed z-[9999] rounded-lg border border-border bg-popover shadow-lg px-3 py-2 text-xs text-muted-foreground">
+          {noModelsLabel}
+        </div>
+      )}
+    </div>
+  );
+}