@nextclaw/ui 0.9.6 → 0.9.8

package/src/components/config/ProvidersList.tsx

@@ -39,7 +39,10 @@ export function ProvidersList() {
   const uiHints = schema?.uiHints;
   const providers = meta?.providers ?? [];
   const providersConfig = config?.providers ?? {};
-  const configuredCount = providers.filter((provider) => providersConfig[provider.name]?.apiKeySet).length;
+  const configuredCount = providers.filter((provider) => {
+    const current = providersConfig[provider.name];
+    return current?.enabled !== false && current?.apiKeySet;
+  }).length;
 
   const tabs = [
     { id: 'installed', label: t('providersTabConfigured'), count: configuredCount },
@@ -53,7 +56,8 @@ export function ProvidersList() {
     return baseProviders
       .filter((provider) => {
         if (activeTab === 'installed') {
-          return Boolean(baseConfig[provider.name]?.apiKeySet);
+          const current = baseConfig[provider.name];
+          return Boolean(current?.enabled !== false && current?.apiKeySet);
         }
         return true;
       })
@@ -131,7 +135,8 @@ export function ProvidersList() {
           <div className="min-h-0 flex-1 space-y-2 overflow-y-auto p-3">
             {filteredProviders.map((provider) => {
               const providerConfig = config.providers[provider.name];
-              const isReady = Boolean(providerConfig?.apiKeySet);
+              const isEnabled = providerConfig?.enabled !== false;
+              const isReady = Boolean(isEnabled && providerConfig?.apiKeySet);
               const isActive = selectedName === provider.name;
               const providerLabel = providerConfig?.displayName?.trim() || provider.displayName || provider.name;
               const providerHint = hintForPath(`providers.${provider.name}`, uiHints);
@@ -169,8 +174,8 @@ export function ProvidersList() {
                       </div>
                     </div>
                     <StatusDot
-                      status={isReady ? 'ready' : 'setup'}
-                      label={isReady ? t('statusReady') : t('statusSetup')}
+                      status={isEnabled ? (isReady ? 'ready' : 'setup') : 'inactive'}
+                      label={isEnabled ? (isReady ? t('statusReady') : t('statusSetup')) : t('disabled')}
                       className="min-w-[56px] justify-center"
                     />
                   </div>

package/src/components/config/provider-advanced-settings-section.tsx

@@ -0,0 +1,92 @@
+import { KeyValueEditor } from '@/components/common/KeyValueEditor';
+import { Label } from '@/components/ui/label';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { t } from '@/lib/i18n';
+import { ChevronDown, Settings2 } from 'lucide-react';
+import { ProviderPillSelector } from './provider-pill-selector';
+
+type WireApiType = 'auto' | 'chat' | 'responses';
+
+type ProviderAdvancedSettingsSectionProps = {
+  showAdvanced: boolean;
+  onShowAdvancedChange: (value: boolean) => void;
+  supportsWireApi: boolean;
+  wireApiLabel: string;
+  wireApi: WireApiType;
+  onWireApiChange: (value: WireApiType) => void;
+  shouldUseWireApiPills: boolean;
+  wireApiSelectOptions: Array<{ value: string; label: string }>;
+  extraHeadersLabel: string;
+  extraHeaders: Record<string, string> | null;
+  onExtraHeadersChange: (value: Record<string, string> | null) => void;
+};
+
+export function ProviderAdvancedSettingsSection(props: ProviderAdvancedSettingsSectionProps) {
+  const {
+    showAdvanced,
+    onShowAdvancedChange,
+    supportsWireApi,
+    wireApiLabel,
+    wireApi,
+    onWireApiChange,
+    shouldUseWireApiPills,
+    wireApiSelectOptions,
+    extraHeadersLabel,
+    extraHeaders,
+    onExtraHeadersChange
+  } = props;
+
+  return (
+    <div className="border-t border-gray-100 pt-4">
+      <button
+        type="button"
+        onClick={() => onShowAdvancedChange(!showAdvanced)}
+        className="flex w-full items-center justify-between text-sm text-gray-600 transition-colors hover:text-gray-900"
+      >
+        <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">
+          {supportsWireApi ? (
+            <div className="space-y-2">
+              <Label htmlFor="wireApi" className="text-sm font-medium text-gray-900">
+                {wireApiLabel}
+              </Label>
+              {shouldUseWireApiPills ? (
+                <ProviderPillSelector
+                  value={wireApi}
+                  onChange={(value) => onWireApiChange(value as WireApiType)}
+                  options={wireApiSelectOptions}
+                />
+              ) : (
+                <Select value={wireApi} onValueChange={(value) => onWireApiChange(value as WireApiType)}>
+                  <SelectTrigger className="rounded-xl">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {wireApiSelectOptions.map((option) => (
+                      <SelectItem key={option.value} value={option.value}>
+                        {option.label}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              )}
+            </div>
+          ) : null}
+
+          <div className="space-y-2">
+            <Label className="text-sm font-medium text-gray-900">{extraHeadersLabel}</Label>
+            <KeyValueEditor value={extraHeaders} onChange={onExtraHeadersChange} />
+            <p className="text-xs text-gray-500">{t('providerExtraHeadersHelpShort')}</p>
+          </div>
+        </div>
+      ) : null}
+    </div>
+  );
+}

package/src/components/config/provider-auth-section.tsx

@@ -0,0 +1,113 @@
+import { Button } from '@/components/ui/button';
+import { Label } from '@/components/ui/label';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { t } from '@/lib/i18n';
+import type { ProviderSpecView } from '@/api/types';
+import { ProviderPillSelector } from './provider-pill-selector';
+
+type ProviderAuthSectionProps = {
+  providerAuth: ProviderSpecView['auth'];
+  providerAuthNote: string;
+  providerAuthMethodOptions: Array<{ value: string; label: string }>;
+  providerAuthMethodsCount: number;
+  selectedAuthMethodHint: string;
+  shouldUseAuthMethodPills: boolean;
+  resolvedAuthMethodId: string;
+  onAuthMethodChange: (value: string) => void;
+  onStartProviderAuth: () => void;
+  onImportProviderAuthFromCli: () => void;
+  startPending: boolean;
+  importPending: boolean;
+  authSessionId: string | null;
+  authStatusMessage: string;
+};
+
+export function ProviderAuthSection(props: ProviderAuthSectionProps) {
+  const {
+    providerAuth,
+    providerAuthNote,
+    providerAuthMethodOptions,
+    providerAuthMethodsCount,
+    selectedAuthMethodHint,
+    shouldUseAuthMethodPills,
+    resolvedAuthMethodId,
+    onAuthMethodChange,
+    onStartProviderAuth,
+    onImportProviderAuthFromCli,
+    startPending,
+    importPending,
+    authSessionId,
+    authStatusMessage
+  } = props;
+
+  if (providerAuth?.kind !== 'device_code') {
+    return null;
+  }
+
+  return (
+    <div className="space-y-2 rounded-xl border border-primary/20 bg-primary-50/50 p-3">
+      <Label className="text-sm font-medium text-gray-900">
+        {providerAuth.displayName || t('providerAuthSectionTitle')}
+      </Label>
+      {providerAuthNote ? <p className="text-xs text-gray-600">{providerAuthNote}</p> : null}
+      {providerAuthMethodsCount > 1 ? (
+        <div className="space-y-2">
+          <Label className="text-xs font-medium text-gray-700">{t('providerAuthMethodLabel')}</Label>
+          {shouldUseAuthMethodPills ? (
+            <ProviderPillSelector
+              value={resolvedAuthMethodId}
+              onChange={onAuthMethodChange}
+              options={providerAuthMethodOptions}
+            />
+          ) : (
+            <Select value={resolvedAuthMethodId} onValueChange={onAuthMethodChange}>
+              <SelectTrigger className="h-8 rounded-lg bg-white">
+                <SelectValue placeholder={t('providerAuthMethodPlaceholder')} />
+              </SelectTrigger>
+              <SelectContent>
+                {providerAuthMethodOptions.map((method) => (
+                  <SelectItem key={method.value} value={method.value}>
+                    {method.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          )}
+          {selectedAuthMethodHint ? <p className="text-xs text-gray-500">{selectedAuthMethodHint}</p> : null}
+        </div>
+      ) : null}
+      <div className="flex flex-wrap items-center gap-2">
+        <Button
+          type="button"
+          variant="outline"
+          size="sm"
+          onClick={onStartProviderAuth}
+          disabled={startPending || Boolean(authSessionId)}
+        >
+          {startPending
+            ? t('providerAuthStarting')
+            : authSessionId
+              ? t('providerAuthAuthorizing')
+              : t('providerAuthAuthorizeInBrowser')}
+        </Button>
+        {providerAuth.supportsCliImport ? (
+          <Button
+            type="button"
+            variant="outline"
+            size="sm"
+            onClick={onImportProviderAuthFromCli}
+            disabled={importPending}
+          >
+            {importPending ? t('providerAuthImporting') : t('providerAuthImportFromCli')}
+          </Button>
+        ) : null}
+        {authSessionId ? (
+          <span className="text-xs text-gray-500">
+            {t('providerAuthSessionLabel')}: {authSessionId.slice(0, 8)}…
+          </span>
+        ) : null}
+      </div>
+      {authStatusMessage ? <p className="text-xs text-gray-600">{authStatusMessage}</p> : null}
+    </div>
+  );
+}

package/src/components/config/provider-enabled-field.tsx

@@ -0,0 +1,20 @@
+import { Label } from '@/components/ui/label';
+import { Switch } from '@/components/ui/switch';
+import { t } from '@/lib/i18n';
+
+type ProviderEnabledFieldProps = {
+  enabled: boolean;
+  onChange: (enabled: boolean) => void;
+};
+
+export function ProviderEnabledField(props: ProviderEnabledFieldProps) {
+  return (
+    <div className="flex items-center justify-between rounded-xl border border-gray-200 bg-gray-50 px-4 py-3">
+      <Label className="text-sm font-medium text-gray-900">{t('enabled')}</Label>
+      <div className="flex items-center gap-3">
+        <span className="text-xs text-gray-500">{props.enabled ? t('enabled') : t('disabled')}</span>
+        <Switch checked={props.enabled} onCheckedChange={props.onChange} />
+      </div>
+    </div>
+  );
+}

package/src/components/config/provider-form-support.ts

@@ -0,0 +1,344 @@
+import { getLanguage, t } from '@/lib/i18n';
+import type { ProviderConfigUpdate, ProviderConfigView, ThinkingLevel } from '@/api/types';
+
+type WireApiType = 'auto' | 'chat' | 'responses';
+type ModelThinkingConfig = Record<string, { supported: ThinkingLevel[]; default?: ThinkingLevel | null }>;
+type ProviderAuthMethodOption = {
+  id: string;
+};
+
+const EMPTY_PROVIDER_CONFIG: ProviderConfigView = {
+  enabled: true,
+  displayName: '',
+  apiKeySet: false,
+  apiKeyMasked: undefined,
+  apiBase: null,
+  extraHeaders: null,
+  wireApi: null,
+  models: [],
+  modelThinking: {}
+};
+
+const THINKING_LEVELS: ThinkingLevel[] = ['off', 'minimal', 'low', 'medium', 'high', 'adaptive', 'xhigh'];
+const THINKING_LEVEL_SET = new Set<string>(THINKING_LEVELS);
+
+function normalizeHeaders(input: Record<string, string> | null | undefined): Record<string, string> | null {
+  if (!input) {
+    return null;
+  }
+  const entries = Object.entries(input)
+    .map(([key, value]) => [key.trim(), value] as const)
+    .filter(([key]) => key.length > 0);
+  if (entries.length === 0) {
+    return null;
+  }
+  return Object.fromEntries(entries);
+}
+
+function headersEqual(
+  left: Record<string, string> | null | undefined,
+  right: Record<string, string> | null | undefined
+): boolean {
+  const a = normalizeHeaders(left);
+  const b = normalizeHeaders(right);
+  if (a === null && b === null) {
+    return true;
+  }
+  if (!a || !b) {
+    return false;
+  }
+  const aEntries = Object.entries(a).sort(([ak], [bk]) => ak.localeCompare(bk));
+  const bEntries = Object.entries(b).sort(([ak], [bk]) => ak.localeCompare(bk));
+  if (aEntries.length !== bEntries.length) {
+    return false;
+  }
+  return aEntries.every(([key, value], index) => key === bEntries[index][0] && value === bEntries[index][1]);
+}
+
+function normalizeModelList(input: string[] | null | undefined): string[] {
+  if (!input || input.length === 0) {
+    return [];
+  }
+  const deduped = new Set<string>();
+  for (const item of input) {
+    const trimmed = item.trim();
+    if (trimmed) {
+      deduped.add(trimmed);
+    }
+  }
+  return [...deduped];
+}
+
+function stripProviderPrefix(model: string, prefix: string): string {
+  const trimmed = model.trim();
+  if (!trimmed || !prefix.trim()) {
+    return trimmed;
+  }
+  const fullPrefix = `${prefix.trim()}/`;
+  if (trimmed.startsWith(fullPrefix)) {
+    return trimmed.slice(fullPrefix.length);
+  }
+  return trimmed;
+}
+
+function toProviderLocalModelId(model: string, aliases: string[]): string {
+  let normalized = model.trim();
+  if (!normalized) {
+    return '';
+  }
+  for (const alias of aliases) {
+    const cleanAlias = alias.trim();
+    if (!cleanAlias) {
+      continue;
+    }
+    normalized = stripProviderPrefix(normalized, cleanAlias);
+  }
+  return normalized.trim();
+}
+
+function modelListsEqual(left: string[], right: string[]): boolean {
+  if (left.length !== right.length) {
+    return false;
+  }
+  return left.every((item, index) => item === right[index]);
+}
+
+function mergeModelLists(base: string[], extra: string[]): string[] {
+  const merged = [...base];
+  for (const item of extra) {
+    if (!merged.includes(item)) {
+      merged.push(item);
+    }
+  }
+  return merged;
+}
+
+function resolveEditableModels(defaultModels: string[], savedModels: string[]): string[] {
+  if (savedModels.length === 0) {
+    return defaultModels;
+  }
+  const looksLikeLegacyCustomList = savedModels.every((model) => !defaultModels.includes(model));
+  if (looksLikeLegacyCustomList) {
+    return mergeModelLists(defaultModels, savedModels);
+  }
+  return savedModels;
+}
+
+function serializeModelsForSave(models: string[], defaultModels: string[]): string[] {
+  if (modelListsEqual(models, defaultModels)) {
+    return [];
+  }
+  return models;
+}
+
+function applyEnabledPatch(payload: ProviderConfigUpdate, enabled: boolean, currentEnabled: boolean): void {
+  if (enabled !== currentEnabled) {
+    payload.enabled = enabled;
+  }
+}
+
+function parseThinkingLevel(value: unknown): ThinkingLevel | null {
+  if (typeof value !== 'string') {
+    return null;
+  }
+  const normalized = value.trim().toLowerCase();
+  if (!normalized) {
+    return null;
+  }
+  return THINKING_LEVEL_SET.has(normalized) ? (normalized as ThinkingLevel) : null;
+}
+
+function normalizeThinkingLevels(values: unknown): ThinkingLevel[] {
+  if (!Array.isArray(values)) {
+    return [];
+  }
+  const deduped: ThinkingLevel[] = [];
+  for (const value of values) {
+    const level = parseThinkingLevel(value);
+    if (!level || deduped.includes(level)) {
+      continue;
+    }
+    deduped.push(level);
+  }
+  return deduped;
+}
+
+function normalizeModelThinkingConfig(
+  input: ProviderConfigView['modelThinking'],
+  aliases: string[]
+): ModelThinkingConfig {
+  if (!input) {
+    return {};
+  }
+  const normalized: ModelThinkingConfig = {};
+  for (const [rawModel, rawValue] of Object.entries(input)) {
+    const model = toProviderLocalModelId(rawModel, aliases);
+    if (!model) {
+      continue;
+    }
+    const supported = normalizeThinkingLevels(rawValue?.supported);
+    if (supported.length === 0) {
+      continue;
+    }
+    const defaultLevel = parseThinkingLevel(rawValue?.default);
+    normalized[model] =
+      defaultLevel && supported.includes(defaultLevel)
+        ? { supported, default: defaultLevel }
+        : { supported };
+  }
+  return normalized;
+}
+
+function normalizeModelThinkingForModels(modelThinking: ModelThinkingConfig, models: string[]): ModelThinkingConfig {
+  const modelSet = new Set(models.map((item) => item.trim()).filter(Boolean));
+  const normalized: ModelThinkingConfig = {};
+  for (const [model, entry] of Object.entries(modelThinking)) {
+    if (!modelSet.has(model)) {
+      continue;
+    }
+    const supported = normalizeThinkingLevels(entry.supported);
+    if (supported.length === 0) {
+      continue;
+    }
+    const defaultLevel = parseThinkingLevel(entry.default);
+    normalized[model] =
+      defaultLevel && supported.includes(defaultLevel)
+        ? { supported, default: defaultLevel }
+        : { supported };
+  }
+  return normalized;
+}
+
+function modelThinkingEqual(left: ModelThinkingConfig, right: ModelThinkingConfig): boolean {
+  const leftKeys = Object.keys(left).sort();
+  const rightKeys = Object.keys(right).sort();
+  if (leftKeys.length !== rightKeys.length) {
+    return false;
+  }
+  for (let index = 0; index < leftKeys.length; index += 1) {
+    const key = leftKeys[index];
+    if (key !== rightKeys[index]) {
+      return false;
+    }
+    const leftEntry = left[key];
+    const rightEntry = right[key];
+    if (!leftEntry || !rightEntry) {
+      return false;
+    }
+    const leftSupported = [...leftEntry.supported].sort();
+    const rightSupported = [...rightEntry.supported].sort();
+    if (!modelListsEqual(leftSupported, rightSupported)) {
+      return false;
+    }
+    if ((leftEntry.default ?? null) !== (rightEntry.default ?? null)) {
+      return false;
+    }
+  }
+  return true;
+}
+
+function formatThinkingLevelLabel(level: ThinkingLevel): string {
+  if (level === 'off') {
+    return t('chatThinkingLevelOff');
+  }
+  if (level === 'minimal') {
+    return t('chatThinkingLevelMinimal');
+  }
+  if (level === 'low') {
+    return t('chatThinkingLevelLow');
+  }
+  if (level === 'medium') {
+    return t('chatThinkingLevelMedium');
+  }
+  if (level === 'high') {
+    return t('chatThinkingLevelHigh');
+  }
+  if (level === 'adaptive') {
+    return t('chatThinkingLevelAdaptive');
+  }
+  return t('chatThinkingLevelXhigh');
+}
+
+function resolvePreferredAuthMethodId(params: {
+  providerName?: string;
+  methods: ProviderAuthMethodOption[];
+  defaultMethodId?: string;
+  language: ReturnType<typeof getLanguage>;
+}): string {
+  const { providerName, methods, defaultMethodId, language } = params;
+  if (methods.length === 0) {
+    return '';
+  }
+
+  const methodIdMap = new Map<string, string>();
+  for (const method of methods) {
+    const methodId = method.id.trim();
+    if (methodId) {
+      methodIdMap.set(methodId.toLowerCase(), methodId);
+    }
+  }
+
+  const pick = (...candidates: string[]): string | undefined => {
+    for (const candidate of candidates) {
+      const resolved = methodIdMap.get(candidate.toLowerCase());
+      if (resolved) {
+        return resolved;
+      }
+    }
+    return undefined;
+  };
+
+  const normalizedDefault = defaultMethodId?.trim();
+  if (providerName === 'minimax-portal') {
+    if (language === 'zh') {
+      return pick('cn', 'china-mainland') ?? pick(normalizedDefault ?? '') ?? methods[0]?.id ?? '';
+    }
+    if (language === 'en') {
+      return pick('global', 'intl', 'international') ?? pick(normalizedDefault ?? '') ?? methods[0]?.id ?? '';
+    }
+  }
+
+  if (normalizedDefault) {
+    const matchedDefault = pick(normalizedDefault);
+    if (matchedDefault) {
+      return matchedDefault;
+    }
+  }
+
+  if (language === 'zh') {
+    return pick('cn') ?? methods[0]?.id ?? '';
+  }
+  if (language === 'en') {
+    return pick('global') ?? methods[0]?.id ?? '';
+  }
+
+  return methods[0]?.id ?? '';
+}
+
+function shouldUsePillSelector(params: {
+  required: boolean;
+  hasDefault: boolean;
+  optionCount: number;
+}): boolean {
+  return params.required && params.hasDefault && params.optionCount > 1 && params.optionCount <= 3;
+}
+
+export type { ModelThinkingConfig, ProviderAuthMethodOption, WireApiType };
+export {
+  applyEnabledPatch,
+  EMPTY_PROVIDER_CONFIG,
+  formatThinkingLevelLabel,
+  headersEqual,
+  modelListsEqual,
+  modelThinkingEqual,
+  normalizeHeaders,
+  normalizeModelList,
+  normalizeModelThinkingConfig,
+  normalizeModelThinkingForModels,
+  resolveEditableModels,
+  resolvePreferredAuthMethodId,
+  serializeModelsForSave,
+  shouldUsePillSelector,
+  THINKING_LEVELS,
+  toProviderLocalModelId
+};