1275 lines
57 KiB
TypeScript
1275 lines
57 KiB
TypeScript
/**
|
|
* Providers Settings Component
|
|
* Manage AI provider configurations and API keys
|
|
*/
|
|
import React, { useEffect, useMemo, useState } from 'react';
|
|
import {
|
|
Plus,
|
|
Trash2,
|
|
Edit,
|
|
Eye,
|
|
EyeOff,
|
|
Check,
|
|
X,
|
|
Loader2,
|
|
Key,
|
|
ExternalLink,
|
|
Copy,
|
|
XCircle,
|
|
ChevronDown,
|
|
} from 'lucide-react';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Input } from '@/components/ui/input';
|
|
import { Label } from '@/components/ui/label';
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
|
import { Separator } from '@/components/ui/separator';
|
|
import {
|
|
useProviderStore,
|
|
type ProviderAccount,
|
|
type ProviderConfig,
|
|
type ProviderVendorInfo,
|
|
} from '@/stores/providers';
|
|
import {
|
|
PROVIDER_TYPE_INFO,
|
|
type ProviderType,
|
|
getProviderIconUrl,
|
|
resolveProviderApiKeyForSave,
|
|
resolveProviderModelForSave,
|
|
shouldShowProviderModelId,
|
|
shouldInvertInDark,
|
|
} from '@/lib/providers';
|
|
import {
|
|
buildProviderAccountId,
|
|
buildProviderListItems,
|
|
hasConfiguredCredentials,
|
|
type ProviderListItem,
|
|
} from '@/lib/provider-accounts';
|
|
import { cn } from '@/lib/utils';
|
|
import { toast } from 'sonner';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { invokeIpc } from '@/lib/api-client';
|
|
import { useSettingsStore } from '@/stores/settings';
|
|
import { hostApiFetch } from '@/lib/host-api';
|
|
import { subscribeHostEvent } from '@/lib/host-events';
|
|
|
|
const inputClasses = 'h-[44px] rounded-xl font-mono text-[13px] bg-[#eeece3] dark:bg-[#151514] border-black/10 dark:border-white/10 focus-visible:ring-2 focus-visible:ring-blue-500/50 focus-visible:border-blue-500 shadow-sm transition-all text-foreground placeholder:text-foreground/40';
|
|
const labelClasses = 'text-[14px] text-foreground/80 font-bold';
|
|
|
|
function normalizeFallbackProviderIds(ids?: string[]): string[] {
|
|
return Array.from(new Set((ids ?? []).filter(Boolean)));
|
|
}
|
|
|
|
function fallbackProviderIdsEqual(a?: string[], b?: string[]): boolean {
|
|
const left = normalizeFallbackProviderIds(a).sort();
|
|
const right = normalizeFallbackProviderIds(b).sort();
|
|
return left.length === right.length && left.every((id, index) => id === right[index]);
|
|
}
|
|
|
|
function normalizeFallbackModels(models?: string[]): string[] {
|
|
return Array.from(new Set((models ?? []).map((model) => model.trim()).filter(Boolean)));
|
|
}
|
|
|
|
function fallbackModelsEqual(a?: string[], b?: string[]): boolean {
|
|
const left = normalizeFallbackModels(a);
|
|
const right = normalizeFallbackModels(b);
|
|
return left.length === right.length && left.every((model, index) => model === right[index]);
|
|
}
|
|
|
|
function getAuthModeLabel(
|
|
authMode: ProviderAccount['authMode'],
|
|
t: (key: string) => string
|
|
): string {
|
|
switch (authMode) {
|
|
case 'api_key':
|
|
return t('aiProviders.authModes.apiKey');
|
|
case 'oauth_device':
|
|
return t('aiProviders.authModes.oauthDevice');
|
|
case 'oauth_browser':
|
|
return t('aiProviders.authModes.oauthBrowser');
|
|
case 'local':
|
|
return t('aiProviders.authModes.local');
|
|
default:
|
|
return authMode;
|
|
}
|
|
}
|
|
|
|
export function ProvidersSettings() {
|
|
const { t } = useTranslation('settings');
|
|
const devModeUnlocked = useSettingsStore((state) => state.devModeUnlocked);
|
|
const {
|
|
statuses,
|
|
accounts,
|
|
vendors,
|
|
defaultAccountId,
|
|
loading,
|
|
refreshProviderSnapshot,
|
|
createAccount,
|
|
removeAccount,
|
|
updateAccount,
|
|
setDefaultAccount,
|
|
validateAccountApiKey,
|
|
} = useProviderStore();
|
|
|
|
const [showAddDialog, setShowAddDialog] = useState(false);
|
|
const [editingProvider, setEditingProvider] = useState<string | null>(null);
|
|
const vendorMap = new Map(vendors.map((vendor) => [vendor.id, vendor]));
|
|
const existingVendorIds = new Set(accounts.map((account) => account.vendorId));
|
|
const displayProviders = useMemo(
|
|
() => buildProviderListItems(accounts, statuses, vendors, defaultAccountId),
|
|
[accounts, statuses, vendors, defaultAccountId],
|
|
);
|
|
|
|
// Fetch providers on mount
|
|
useEffect(() => {
|
|
refreshProviderSnapshot();
|
|
}, [refreshProviderSnapshot]);
|
|
|
|
const handleAddProvider = async (
|
|
type: ProviderType,
|
|
name: string,
|
|
apiKey: string,
|
|
options?: { baseUrl?: string; model?: string; authMode?: ProviderAccount['authMode']; apiProtocol?: ProviderAccount['apiProtocol'] }
|
|
) => {
|
|
const vendor = vendorMap.get(type);
|
|
const id = buildProviderAccountId(type, null, vendors);
|
|
const effectiveApiKey = resolveProviderApiKeyForSave(type, apiKey);
|
|
try {
|
|
await createAccount({
|
|
id,
|
|
vendorId: type,
|
|
label: name,
|
|
authMode: options?.authMode || vendor?.defaultAuthMode || (type === 'ollama' ? 'local' : 'api_key'),
|
|
baseUrl: options?.baseUrl,
|
|
apiProtocol: options?.apiProtocol,
|
|
model: options?.model,
|
|
enabled: true,
|
|
isDefault: false,
|
|
createdAt: new Date().toISOString(),
|
|
updatedAt: new Date().toISOString(),
|
|
}, effectiveApiKey);
|
|
|
|
// Auto-set as default if no default is currently configured
|
|
if (!defaultAccountId) {
|
|
await setDefaultAccount(id);
|
|
}
|
|
|
|
setShowAddDialog(false);
|
|
toast.success(t('aiProviders.toast.added'));
|
|
} catch (error) {
|
|
toast.error(`${t('aiProviders.toast.failedAdd')}: ${error}`);
|
|
}
|
|
};
|
|
|
|
const handleDeleteProvider = async (providerId: string) => {
|
|
try {
|
|
await removeAccount(providerId);
|
|
toast.success(t('aiProviders.toast.deleted'));
|
|
} catch (error) {
|
|
toast.error(`${t('aiProviders.toast.failedDelete')}: ${error}`);
|
|
}
|
|
};
|
|
|
|
const handleSetDefault = async (providerId: string) => {
|
|
try {
|
|
await setDefaultAccount(providerId);
|
|
toast.success(t('aiProviders.toast.defaultUpdated'));
|
|
} catch (error) {
|
|
toast.error(`${t('aiProviders.toast.failedDefault')}: ${error}`);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<div className="flex items-center justify-between">
|
|
<h2 className="text-3xl font-serif text-foreground font-normal tracking-tight" style={{ fontFamily: 'Georgia, Cambria, "Times New Roman", Times, serif' }}>
|
|
{t('aiProviders.title', 'AI Providers')}
|
|
</h2>
|
|
<Button onClick={() => setShowAddDialog(true)} className="rounded-full px-5 h-9 bg-black/5 dark:bg-white/5 hover:bg-black/10 dark:hover:bg-white/10 text-foreground border border-transparent shadow-none font-medium text-[13px]">
|
|
<Plus className="h-4 w-4 mr-2" />
|
|
{t('aiProviders.add')}
|
|
</Button>
|
|
</div>
|
|
|
|
{loading ? (
|
|
<div className="flex items-center justify-center py-12 text-muted-foreground bg-black/5 dark:bg-white/5 rounded-3xl border border-transparent border-dashed">
|
|
<Loader2 className="h-6 w-6 animate-spin" />
|
|
</div>
|
|
) : displayProviders.length === 0 ? (
|
|
<div className="flex flex-col items-center justify-center py-20 text-muted-foreground bg-black/5 dark:bg-white/5 rounded-3xl border border-transparent border-dashed">
|
|
<Key className="h-12 w-12 mb-4 opacity-50" />
|
|
<h3 className="text-[15px] font-medium mb-1 text-foreground">{t('aiProviders.empty.title')}</h3>
|
|
<p className="text-[13px] text-center mb-6 max-w-sm">
|
|
{t('aiProviders.empty.desc')}
|
|
</p>
|
|
<Button onClick={() => setShowAddDialog(true)} className="rounded-full px-6 h-10 bg-[#0a84ff] hover:bg-[#007aff] text-white">
|
|
<Plus className="h-4 w-4 mr-2" />
|
|
{t('aiProviders.empty.cta')}
|
|
</Button>
|
|
</div>
|
|
) : (
|
|
<div className="space-y-3">
|
|
{displayProviders.map((item) => (
|
|
<ProviderCard
|
|
key={item.account.id}
|
|
item={item}
|
|
allProviders={displayProviders}
|
|
isDefault={item.account.id === defaultAccountId}
|
|
isEditing={editingProvider === item.account.id}
|
|
onEdit={() => setEditingProvider(item.account.id)}
|
|
onCancelEdit={() => setEditingProvider(null)}
|
|
onDelete={() => handleDeleteProvider(item.account.id)}
|
|
onSetDefault={() => handleSetDefault(item.account.id)}
|
|
onSaveEdits={async (payload) => {
|
|
const updates: Partial<ProviderAccount> = {};
|
|
if (payload.updates) {
|
|
if (payload.updates.baseUrl !== undefined) updates.baseUrl = payload.updates.baseUrl;
|
|
if (payload.updates.apiProtocol !== undefined) updates.apiProtocol = payload.updates.apiProtocol;
|
|
if (payload.updates.model !== undefined) updates.model = payload.updates.model;
|
|
if (payload.updates.fallbackModels !== undefined) updates.fallbackModels = payload.updates.fallbackModels;
|
|
if (payload.updates.fallbackProviderIds !== undefined) {
|
|
updates.fallbackAccountIds = payload.updates.fallbackProviderIds;
|
|
}
|
|
}
|
|
await updateAccount(
|
|
item.account.id,
|
|
updates,
|
|
payload.newApiKey
|
|
);
|
|
setEditingProvider(null);
|
|
}}
|
|
onValidateKey={(key, options) => validateAccountApiKey(item.account.id, key, options)}
|
|
devModeUnlocked={devModeUnlocked}
|
|
/>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{/* Add Provider Dialog */}
|
|
{showAddDialog && (
|
|
<AddProviderDialog
|
|
existingVendorIds={existingVendorIds}
|
|
vendors={vendors}
|
|
onClose={() => setShowAddDialog(false)}
|
|
onAdd={handleAddProvider}
|
|
onValidateKey={(type, key, options) => validateAccountApiKey(type, key, options)}
|
|
devModeUnlocked={devModeUnlocked}
|
|
/>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
interface ProviderCardProps {
|
|
item: ProviderListItem;
|
|
allProviders: ProviderListItem[];
|
|
isDefault: boolean;
|
|
isEditing: boolean;
|
|
onEdit: () => void;
|
|
onCancelEdit: () => void;
|
|
onDelete: () => void;
|
|
onSetDefault: () => void;
|
|
onSaveEdits: (payload: { newApiKey?: string; updates?: Partial<ProviderConfig> }) => Promise<void>;
|
|
onValidateKey: (
|
|
key: string,
|
|
options?: { baseUrl?: string; apiProtocol?: string }
|
|
) => Promise<{ valid: boolean; error?: string }>;
|
|
devModeUnlocked: boolean;
|
|
}
|
|
|
|
|
|
|
|
function ProviderCard({
|
|
item,
|
|
allProviders,
|
|
isDefault,
|
|
isEditing,
|
|
onEdit,
|
|
onCancelEdit,
|
|
onDelete,
|
|
onSetDefault,
|
|
onSaveEdits,
|
|
onValidateKey,
|
|
devModeUnlocked,
|
|
}: ProviderCardProps) {
|
|
const { t } = useTranslation('settings');
|
|
const { account, vendor, status } = item;
|
|
const [newKey, setNewKey] = useState('');
|
|
const [baseUrl, setBaseUrl] = useState(account.baseUrl || '');
|
|
const [apiProtocol, setApiProtocol] = useState<ProviderAccount['apiProtocol']>(account.apiProtocol || 'openai-completions');
|
|
const [modelId, setModelId] = useState(account.model || '');
|
|
const [fallbackModelsText, setFallbackModelsText] = useState(
|
|
normalizeFallbackModels(account.fallbackModels).join('\n')
|
|
);
|
|
const [fallbackProviderIds, setFallbackProviderIds] = useState<string[]>(
|
|
normalizeFallbackProviderIds(account.fallbackAccountIds)
|
|
);
|
|
const [showKey, setShowKey] = useState(false);
|
|
const [showFallback, setShowFallback] = useState(false);
|
|
const [validating, setValidating] = useState(false);
|
|
const [saving, setSaving] = useState(false);
|
|
|
|
const typeInfo = PROVIDER_TYPE_INFO.find((t) => t.id === account.vendorId);
|
|
const showModelIdField = shouldShowProviderModelId(typeInfo, devModeUnlocked);
|
|
const canEditModelConfig = Boolean(typeInfo?.showBaseUrl || showModelIdField);
|
|
|
|
useEffect(() => {
|
|
if (isEditing) {
|
|
setNewKey('');
|
|
setShowKey(false);
|
|
setBaseUrl(account.baseUrl || '');
|
|
setApiProtocol(account.apiProtocol || 'openai-completions');
|
|
setModelId(account.model || '');
|
|
setFallbackModelsText(normalizeFallbackModels(account.fallbackModels).join('\n'));
|
|
setFallbackProviderIds(normalizeFallbackProviderIds(account.fallbackAccountIds));
|
|
}
|
|
}, [isEditing, account.baseUrl, account.fallbackModels, account.fallbackAccountIds, account.model, account.apiProtocol]);
|
|
|
|
const fallbackOptions = allProviders.filter((candidate) => candidate.account.id !== account.id);
|
|
|
|
const toggleFallbackProvider = (providerId: string) => {
|
|
setFallbackProviderIds((current) => (
|
|
current.includes(providerId)
|
|
? current.filter((id) => id !== providerId)
|
|
: [...current, providerId]
|
|
));
|
|
};
|
|
|
|
const handleSaveEdits = async () => {
|
|
setSaving(true);
|
|
try {
|
|
const payload: { newApiKey?: string; updates?: Partial<ProviderConfig> } = {};
|
|
const normalizedFallbackModels = normalizeFallbackModels(fallbackModelsText.split('\n'));
|
|
|
|
if (newKey.trim()) {
|
|
setValidating(true);
|
|
const result = await onValidateKey(newKey, {
|
|
baseUrl: baseUrl.trim() || undefined,
|
|
apiProtocol: (account.vendorId === 'custom' || account.vendorId === 'ollama') ? apiProtocol : undefined,
|
|
});
|
|
setValidating(false);
|
|
if (!result.valid) {
|
|
toast.error(result.error || t('aiProviders.toast.invalidKey'));
|
|
setSaving(false);
|
|
return;
|
|
}
|
|
payload.newApiKey = newKey.trim();
|
|
}
|
|
|
|
{
|
|
if (showModelIdField && !modelId.trim()) {
|
|
toast.error(t('aiProviders.toast.modelRequired'));
|
|
setSaving(false);
|
|
return;
|
|
}
|
|
|
|
const updates: Partial<ProviderConfig> = {};
|
|
if (typeInfo?.showBaseUrl && (baseUrl.trim() || undefined) !== (account.baseUrl || undefined)) {
|
|
updates.baseUrl = baseUrl.trim() || undefined;
|
|
}
|
|
if ((account.vendorId === 'custom' || account.vendorId === 'ollama') && apiProtocol !== account.apiProtocol) {
|
|
updates.apiProtocol = apiProtocol;
|
|
}
|
|
if (showModelIdField && (modelId.trim() || undefined) !== (account.model || undefined)) {
|
|
updates.model = modelId.trim() || undefined;
|
|
}
|
|
if (!fallbackModelsEqual(normalizedFallbackModels, account.fallbackModels)) {
|
|
updates.fallbackModels = normalizedFallbackModels;
|
|
}
|
|
if (!fallbackProviderIdsEqual(fallbackProviderIds, account.fallbackAccountIds)) {
|
|
updates.fallbackProviderIds = normalizeFallbackProviderIds(fallbackProviderIds);
|
|
}
|
|
if (Object.keys(updates).length > 0) {
|
|
payload.updates = updates;
|
|
}
|
|
}
|
|
|
|
// Keep Ollama key optional in UI, but persist a placeholder when
|
|
// editing legacy configs that have no stored key.
|
|
if (account.vendorId === 'ollama' && !status?.hasKey && !payload.newApiKey) {
|
|
payload.newApiKey = resolveProviderApiKeyForSave(account.vendorId, '') as string;
|
|
}
|
|
|
|
if (!payload.newApiKey && !payload.updates) {
|
|
onCancelEdit();
|
|
setSaving(false);
|
|
return;
|
|
}
|
|
|
|
await onSaveEdits(payload);
|
|
setNewKey('');
|
|
toast.success(t('aiProviders.toast.updated'));
|
|
} catch (error) {
|
|
toast.error(`${t('aiProviders.toast.failedUpdate')}: ${error}`);
|
|
} finally {
|
|
setSaving(false);
|
|
setValidating(false);
|
|
}
|
|
};
|
|
|
|
const currentInputClasses = isDefault
|
|
? "h-[40px] rounded-xl font-mono text-[13px] bg-white dark:bg-[#1a1a19] border-black/10 dark:border-white/10 focus-visible:ring-2 focus-visible:ring-blue-500/50 shadow-sm"
|
|
: inputClasses;
|
|
|
|
const currentLabelClasses = isDefault ? "text-[13px] text-muted-foreground" : labelClasses;
|
|
const currentSectionLabelClasses = isDefault ? "text-[14px] font-bold text-foreground/80" : labelClasses;
|
|
|
|
return (
|
|
<div
|
|
className={cn(
|
|
"group flex flex-col p-4 rounded-2xl transition-all relative overflow-hidden",
|
|
isDefault
|
|
? "bg-white dark:bg-accent border border-black/10 dark:border-white/10 shadow-sm"
|
|
: "bg-transparent border border-black/10 dark:border-white/10"
|
|
)}
|
|
>
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center gap-4">
|
|
<div className={cn("h-[42px] w-[42px] shrink-0 flex items-center justify-center text-foreground border border-black/5 dark:border-white/10 rounded-full shadow-sm group-hover:scale-105 transition-transform", isDefault ? "bg-black/5 dark:bg-white/5" : "bg-white dark:bg-accent")}>
|
|
{getProviderIconUrl(account.vendorId) ? (
|
|
<img src={getProviderIconUrl(account.vendorId)} alt={typeInfo?.name || account.vendorId} className={cn('h-5 w-5', shouldInvertInDark(account.vendorId) && 'dark:invert')} />
|
|
) : (
|
|
<span className="text-xl">{vendor?.icon || typeInfo?.icon || '⚙️'}</span>
|
|
)}
|
|
</div>
|
|
<div>
|
|
<div className="flex items-center gap-2">
|
|
<span className="font-semibold text-[15px]">{account.label}</span>
|
|
{isDefault && (
|
|
<span className="flex items-center gap-1 text-[11px] font-medium text-blue-600 dark:text-blue-400 bg-blue-500/10 px-2 py-0.5 rounded-full border border-blue-500/20">
|
|
<Check className="h-3 w-3" />
|
|
Default
|
|
</span>
|
|
)}
|
|
</div>
|
|
<div className="flex items-center gap-2 mt-0.5 text-[13px] text-muted-foreground">
|
|
<span className="capitalize">{vendor?.name || account.vendorId}</span>
|
|
<span className="w-1 h-1 rounded-full bg-black/20 dark:bg-white/20" />
|
|
<span>{getAuthModeLabel(account.authMode, t)}</span>
|
|
{account.model && (
|
|
<>
|
|
<span className="w-1 h-1 rounded-full bg-black/20 dark:bg-white/20" />
|
|
<span className="truncate max-w-[200px]">{account.model}</span>
|
|
</>
|
|
)}
|
|
<span className="w-1 h-1 rounded-full bg-black/20 dark:bg-white/20" />
|
|
<span className="flex items-center gap-1">
|
|
{hasConfiguredCredentials(account, status) ? (
|
|
<><div className="w-1.5 h-1.5 rounded-full bg-green-500" /> {t('aiProviders.card.configured')}</>
|
|
) : (
|
|
<><div className="w-1.5 h-1.5 rounded-full bg-red-500" /> {t('aiProviders.dialog.apiKeyMissing')}</>
|
|
)}
|
|
</span>
|
|
{((account.fallbackModels?.length ?? 0) > 0 || (account.fallbackAccountIds?.length ?? 0) > 0) && (
|
|
<>
|
|
<span className="w-1 h-1 rounded-full bg-black/20 dark:bg-white/20" />
|
|
<span className="truncate max-w-[150px]" title={t('aiProviders.sections.fallback')}>
|
|
{t('aiProviders.sections.fallback')}: {[
|
|
...normalizeFallbackModels(account.fallbackModels),
|
|
...normalizeFallbackProviderIds(account.fallbackAccountIds)
|
|
.map((fallbackId) => allProviders.find((candidate) => candidate.account.id === fallbackId)?.account.label)
|
|
.filter(Boolean),
|
|
].join(', ')}
|
|
</span>
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{!isEditing && (
|
|
<div className="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
|
|
{!isDefault && (
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className="h-8 w-8 rounded-full text-muted-foreground hover:text-blue-600 hover:bg-white dark:hover:bg-[#1a1a19] shadow-sm"
|
|
onClick={onSetDefault}
|
|
title={t('aiProviders.card.setDefault')}
|
|
>
|
|
<Check className="h-4 w-4" />
|
|
</Button>
|
|
)}
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className="h-8 w-8 rounded-full text-muted-foreground hover:text-foreground hover:bg-white dark:hover:bg-[#1a1a19] shadow-sm"
|
|
onClick={onEdit}
|
|
title={t('aiProviders.card.editKey')}
|
|
>
|
|
<Edit className="h-4 w-4" />
|
|
</Button>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className="h-8 w-8 rounded-full text-muted-foreground hover:text-destructive hover:bg-white dark:hover:bg-[#1a1a19] shadow-sm"
|
|
onClick={onDelete}
|
|
title={t('aiProviders.card.delete')}
|
|
>
|
|
<Trash2 className="h-4 w-4" />
|
|
</Button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{isEditing && (
|
|
<div className="space-y-6 mt-4 pt-4 border-t border-black/5 dark:border-white/5">
|
|
{canEditModelConfig && (
|
|
<div className="space-y-3">
|
|
<p className={currentSectionLabelClasses}>{t('aiProviders.sections.model')}</p>
|
|
{typeInfo?.showBaseUrl && (
|
|
<div className="space-y-1.5">
|
|
<Label className={currentLabelClasses}>{t('aiProviders.dialog.baseUrl')}</Label>
|
|
<Input
|
|
value={baseUrl}
|
|
onChange={(e) => setBaseUrl(e.target.value)}
|
|
placeholder={apiProtocol === 'anthropic-messages' ? "https://api.example.com/anthropic" : "https://api.example.com/v1"}
|
|
className={currentInputClasses}
|
|
/>
|
|
</div>
|
|
)}
|
|
{showModelIdField && (
|
|
<div className="space-y-1.5 pt-2">
|
|
<Label className={currentLabelClasses}>{t('aiProviders.dialog.modelId')}</Label>
|
|
<Input
|
|
value={modelId}
|
|
onChange={(e) => setModelId(e.target.value)}
|
|
placeholder={typeInfo?.modelIdPlaceholder || 'provider/model-id'}
|
|
className={currentInputClasses}
|
|
/>
|
|
</div>
|
|
)}
|
|
{account.vendorId === 'custom' && (
|
|
<div className="space-y-1.5 pt-2">
|
|
<Label className={currentLabelClasses}>{t('aiProviders.dialog.protocol', 'Protocol')}</Label>
|
|
<div className="flex gap-2 text-[13px]">
|
|
<button
|
|
type="button"
|
|
onClick={() => setApiProtocol('openai-completions')}
|
|
className={cn("flex-1 py-1.5 px-3 rounded-lg border transition-colors", apiProtocol === 'openai-completions' ? "bg-white dark:bg-[#1a1a19] border-black/20 dark:border-white/20 shadow-sm font-medium" : "border-transparent bg-black/5 dark:bg-white/5 text-muted-foreground hover:bg-black/10 dark:hover:bg-white/10")}
|
|
>
|
|
{t('aiProviders.protocols.openai', 'OpenAI')}
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => setApiProtocol('anthropic-messages')}
|
|
className={cn("flex-1 py-1.5 px-3 rounded-lg border transition-colors", apiProtocol === 'anthropic-messages' ? "bg-white dark:bg-[#1a1a19] border-black/20 dark:border-white/20 shadow-sm font-medium" : "border-transparent bg-black/5 dark:bg-white/5 text-muted-foreground hover:bg-black/10 dark:hover:bg-white/10")}
|
|
>
|
|
{t('aiProviders.protocols.anthropic', 'Anthropic')}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
<div className="space-y-3">
|
|
<button
|
|
onClick={() => setShowFallback(!showFallback)}
|
|
className="flex items-center justify-between w-full text-[14px] font-bold text-foreground/80 hover:text-foreground transition-colors"
|
|
>
|
|
<span>{t('aiProviders.sections.fallback')}</span>
|
|
<ChevronDown className={cn("h-4 w-4 transition-transform", showFallback && "rotate-180")} />
|
|
</button>
|
|
{showFallback && (
|
|
<div className="space-y-3 pt-2">
|
|
<div className="space-y-1.5">
|
|
<Label className={currentLabelClasses}>{t('aiProviders.dialog.fallbackModelIds')}</Label>
|
|
<textarea
|
|
value={fallbackModelsText}
|
|
onChange={(e) => setFallbackModelsText(e.target.value)}
|
|
placeholder={t('aiProviders.dialog.fallbackModelIdsPlaceholder')}
|
|
className={isDefault
|
|
? "min-h-24 w-full rounded-xl border border-black/10 dark:border-white/10 bg-white dark:bg-[#1a1a19] px-3 py-2 text-[13px] font-mono outline-none focus-visible:ring-2 focus-visible:ring-blue-500/50 shadow-sm"
|
|
: "min-h-24 w-full rounded-xl border border-black/10 dark:border-white/10 bg-[#eeece3] dark:bg-[#151514] px-3 py-2 text-[13px] font-mono outline-none focus-visible:ring-2 focus-visible:ring-blue-500/50 focus-visible:border-blue-500 shadow-sm transition-all text-foreground placeholder:text-foreground/40"}
|
|
/>
|
|
<p className="text-[12px] text-muted-foreground">
|
|
{t('aiProviders.dialog.fallbackModelIdsHelp')}
|
|
</p>
|
|
</div>
|
|
<div className="space-y-2 pt-1">
|
|
<Label className={currentLabelClasses}>{t('aiProviders.dialog.fallbackProviders')}</Label>
|
|
{fallbackOptions.length === 0 ? (
|
|
<p className="text-[13px] text-muted-foreground">{t('aiProviders.dialog.noFallbackOptions')}</p>
|
|
) : (
|
|
<div className={cn("space-y-2 rounded-xl border border-black/10 dark:border-white/10 p-3 shadow-sm", isDefault ? "bg-white dark:bg-[#1a1a19]" : "bg-[#eeece3] dark:bg-[#151514]")}>
|
|
{fallbackOptions.map((candidate) => (
|
|
<label key={candidate.account.id} className="flex items-center gap-3 text-[13px] cursor-pointer group/label">
|
|
<input
|
|
type="checkbox"
|
|
checked={fallbackProviderIds.includes(candidate.account.id)}
|
|
onChange={() => toggleFallbackProvider(candidate.account.id)}
|
|
className="rounded border-black/20 dark:border-white/20 text-blue-500 focus:ring-blue-500/50"
|
|
/>
|
|
<span className="font-medium group-hover/label:text-blue-500 transition-colors">{candidate.account.label}</span>
|
|
<span className="text-[12px] text-muted-foreground">
|
|
{candidate.account.model || candidate.vendor?.name || candidate.account.vendorId}
|
|
</span>
|
|
</label>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div className="space-y-3">
|
|
<div className="flex items-center justify-between gap-3">
|
|
<div className="space-y-0.5">
|
|
<Label className={currentSectionLabelClasses}>{t('aiProviders.dialog.apiKey')}</Label>
|
|
<p className="text-[12px] text-muted-foreground">
|
|
{hasConfiguredCredentials(account, status)
|
|
? t('aiProviders.dialog.apiKeyConfigured')
|
|
: t('aiProviders.dialog.apiKeyMissing')}
|
|
</p>
|
|
</div>
|
|
{hasConfiguredCredentials(account, status) ? (
|
|
<div className="flex items-center gap-1.5 text-[11px] font-medium text-green-600 dark:text-green-500 bg-green-500/10 px-2 py-1 rounded-md">
|
|
<div className="w-1.5 h-1.5 rounded-full bg-current" />
|
|
{t('aiProviders.card.configured')}
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
{typeInfo?.apiKeyUrl && (
|
|
<div className="flex justify-start">
|
|
<a
|
|
href={typeInfo.apiKeyUrl}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="text-[13px] text-blue-500 hover:text-blue-600 hover:underline flex items-center gap-1"
|
|
tabIndex={-1}
|
|
>
|
|
{t('aiProviders.oauth.getApiKey')} <ExternalLink className="h-3 w-3" />
|
|
</a>
|
|
</div>
|
|
)}
|
|
<div className="space-y-1.5 pt-1">
|
|
<Label className={currentLabelClasses}>{t('aiProviders.dialog.replaceApiKey')}</Label>
|
|
<div className="flex gap-2">
|
|
<div className="relative flex-1">
|
|
<Input
|
|
type={showKey ? 'text' : 'password'}
|
|
placeholder={typeInfo?.requiresApiKey ? typeInfo?.placeholder : (typeInfo?.id === 'ollama' ? t('aiProviders.notRequired') : t('aiProviders.card.editKey'))}
|
|
value={newKey}
|
|
onChange={(e) => setNewKey(e.target.value)}
|
|
className={cn(currentInputClasses, 'pr-10')}
|
|
/>
|
|
<button
|
|
type="button"
|
|
onClick={() => setShowKey(!showKey)}
|
|
className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
|
|
>
|
|
{showKey ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
|
|
</button>
|
|
</div>
|
|
<Button
|
|
variant="outline"
|
|
onClick={handleSaveEdits}
|
|
className={cn(
|
|
"rounded-xl px-4 border-black/10 dark:border-white/10",
|
|
isDefault
|
|
? "h-[40px] bg-white dark:bg-[#1a1a19] hover:bg-black/5 dark:hover:bg-white/10"
|
|
: "h-[44px] bg-[#eeece3] dark:bg-[#151514] hover:bg-black/5 dark:hover:bg-white/10 shadow-sm"
|
|
)}
|
|
disabled={
|
|
validating
|
|
|| saving
|
|
|| (
|
|
!newKey.trim()
|
|
&& (baseUrl.trim() || undefined) === (account.baseUrl || undefined)
|
|
&& (modelId.trim() || undefined) === (account.model || undefined)
|
|
&& fallbackModelsEqual(normalizeFallbackModels(fallbackModelsText.split('\n')), account.fallbackModels)
|
|
&& fallbackProviderIdsEqual(fallbackProviderIds, account.fallbackAccountIds)
|
|
)
|
|
|| Boolean(showModelIdField && !modelId.trim())
|
|
}
|
|
>
|
|
{validating || saving ? (
|
|
<Loader2 className="h-4 w-4 animate-spin" />
|
|
) : (
|
|
<Check className="h-4 w-4 text-green-500" />
|
|
)}
|
|
</Button>
|
|
<Button
|
|
variant="ghost"
|
|
onClick={onCancelEdit}
|
|
className={cn(
|
|
"p-0 rounded-xl",
|
|
isDefault
|
|
? "h-[40px] w-[40px] hover:bg-black/5 dark:hover:bg-white/10"
|
|
: "h-[44px] w-[44px] bg-[#eeece3] dark:bg-[#151514] border border-black/10 dark:border-white/10 hover:bg-black/5 dark:hover:bg-white/10 shadow-sm text-muted-foreground hover:text-foreground"
|
|
)}
|
|
>
|
|
<X className="h-4 w-4" />
|
|
</Button>
|
|
</div>
|
|
<p className="text-[12px] text-muted-foreground">
|
|
{t('aiProviders.dialog.replaceApiKeyHelp')}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
interface AddProviderDialogProps {
|
|
existingVendorIds: Set<string>;
|
|
vendors: ProviderVendorInfo[];
|
|
onClose: () => void;
|
|
onAdd: (
|
|
type: ProviderType,
|
|
name: string,
|
|
apiKey: string,
|
|
options?: { baseUrl?: string; model?: string; authMode?: ProviderAccount['authMode']; apiProtocol?: ProviderAccount['apiProtocol'] }
|
|
) => Promise<void>;
|
|
onValidateKey: (
|
|
type: string,
|
|
apiKey: string,
|
|
options?: { baseUrl?: string; apiProtocol?: string }
|
|
) => Promise<{ valid: boolean; error?: string }>;
|
|
devModeUnlocked: boolean;
|
|
}
|
|
|
|
function AddProviderDialog({
|
|
existingVendorIds,
|
|
vendors,
|
|
onClose,
|
|
onAdd,
|
|
onValidateKey,
|
|
devModeUnlocked,
|
|
}: AddProviderDialogProps) {
|
|
const { t } = useTranslation('settings');
|
|
const [selectedType, setSelectedType] = useState<ProviderType | null>(null);
|
|
const [name, setName] = useState('');
|
|
const [apiKey, setApiKey] = useState('');
|
|
const [baseUrl, setBaseUrl] = useState('');
|
|
const [modelId, setModelId] = useState('');
|
|
const [apiProtocol, setApiProtocol] = useState<ProviderAccount['apiProtocol']>('openai-completions');
|
|
const [showKey, setShowKey] = useState(false);
|
|
const [saving, setSaving] = useState(false);
|
|
const [validationError, setValidationError] = useState<string | null>(null);
|
|
|
|
// OAuth Flow State
|
|
const [oauthFlowing, setOauthFlowing] = useState(false);
|
|
const [oauthData, setOauthData] = useState<{
|
|
verificationUri: string;
|
|
userCode: string;
|
|
expiresIn: number;
|
|
} | null>(null);
|
|
const [oauthError, setOauthError] = useState<string | null>(null);
|
|
// For providers that support both OAuth and API key, let the user choose.
|
|
// Default to the vendor's declared auth mode instead of hard-coding OAuth.
|
|
const [authMode, setAuthMode] = useState<'oauth' | 'apikey'>('apikey');
|
|
|
|
const typeInfo = PROVIDER_TYPE_INFO.find((t) => t.id === selectedType);
|
|
const showModelIdField = shouldShowProviderModelId(typeInfo, devModeUnlocked);
|
|
const isOAuth = typeInfo?.isOAuth ?? false;
|
|
const supportsApiKey = typeInfo?.supportsApiKey ?? false;
|
|
const vendorMap = new Map(vendors.map((vendor) => [vendor.id, vendor]));
|
|
const selectedVendor = selectedType ? vendorMap.get(selectedType) : undefined;
|
|
const preferredOAuthMode = selectedVendor?.supportedAuthModes.includes('oauth_browser')
|
|
? 'oauth_browser'
|
|
: (selectedVendor?.supportedAuthModes.includes('oauth_device')
|
|
? 'oauth_device'
|
|
: (selectedType === 'google' ? 'oauth_browser' : null));
|
|
// Effective OAuth mode: pure OAuth providers, or dual-mode with oauth selected
|
|
const useOAuthFlow = isOAuth && (!supportsApiKey || authMode === 'oauth');
|
|
|
|
useEffect(() => {
|
|
if (!selectedVendor || !isOAuth || !supportsApiKey) {
|
|
return;
|
|
}
|
|
setAuthMode(selectedVendor.defaultAuthMode === 'api_key' ? 'apikey' : 'oauth');
|
|
}, [selectedVendor, isOAuth, supportsApiKey]);
|
|
|
|
// Keep refs to the latest values so event handlers see the current dialog state.
|
|
const latestRef = React.useRef({ selectedType, typeInfo, onAdd, onClose, t });
|
|
const pendingOAuthRef = React.useRef<{ accountId: string; label: string } | null>(null);
|
|
useEffect(() => {
|
|
latestRef.current = { selectedType, typeInfo, onAdd, onClose, t };
|
|
});
|
|
|
|
// Manage OAuth events
|
|
useEffect(() => {
|
|
const handleCode = (data: unknown) => {
|
|
setOauthData(data as { verificationUri: string; userCode: string; expiresIn: number });
|
|
setOauthError(null);
|
|
};
|
|
|
|
const handleSuccess = async (data: unknown) => {
|
|
setOauthFlowing(false);
|
|
setOauthData(null);
|
|
setValidationError(null);
|
|
|
|
const { onClose: close, t: translate } = latestRef.current;
|
|
const payload = (data as { accountId?: string } | undefined) || undefined;
|
|
const accountId = payload?.accountId || pendingOAuthRef.current?.accountId;
|
|
|
|
// device-oauth.ts already saved the provider config to the backend,
|
|
// including the dynamically resolved baseUrl for the region (e.g. CN vs Global).
|
|
// If we call add() here with undefined baseUrl, it will overwrite and erase it!
|
|
// So we just fetch the latest list from the backend to update the UI.
|
|
try {
|
|
const store = useProviderStore.getState();
|
|
await store.refreshProviderSnapshot();
|
|
|
|
// Auto-set as default if no default is currently configured
|
|
if (!store.defaultAccountId && accountId) {
|
|
await store.setDefaultAccount(accountId);
|
|
}
|
|
} catch (err) {
|
|
console.error('Failed to refresh providers after OAuth:', err);
|
|
}
|
|
|
|
pendingOAuthRef.current = null;
|
|
close();
|
|
toast.success(translate('aiProviders.toast.added'));
|
|
};
|
|
|
|
const handleError = (data: unknown) => {
|
|
setOauthError((data as { message: string }).message);
|
|
setOauthData(null);
|
|
pendingOAuthRef.current = null;
|
|
};
|
|
|
|
const offCode = subscribeHostEvent('oauth:code', handleCode);
|
|
const offSuccess = subscribeHostEvent('oauth:success', handleSuccess);
|
|
const offError = subscribeHostEvent('oauth:error', handleError);
|
|
|
|
return () => {
|
|
offCode();
|
|
offSuccess();
|
|
offError();
|
|
};
|
|
}, []);
|
|
|
|
const handleStartOAuth = async () => {
|
|
if (!selectedType) return;
|
|
|
|
if (selectedType === 'minimax-portal' && existingVendorIds.has('minimax-portal-cn')) {
|
|
toast.error(t('aiProviders.toast.minimaxConflict'));
|
|
return;
|
|
}
|
|
if (selectedType === 'minimax-portal-cn' && existingVendorIds.has('minimax-portal')) {
|
|
toast.error(t('aiProviders.toast.minimaxConflict'));
|
|
return;
|
|
}
|
|
|
|
setOauthFlowing(true);
|
|
setOauthData(null);
|
|
setOauthError(null);
|
|
|
|
try {
|
|
const vendor = vendorMap.get(selectedType);
|
|
const supportsMultipleAccounts = vendor?.supportsMultipleAccounts ?? selectedType === 'custom';
|
|
const accountId = supportsMultipleAccounts ? `${selectedType}-${crypto.randomUUID()}` : selectedType;
|
|
const label = name || (typeInfo?.id === 'custom' ? t('aiProviders.custom') : typeInfo?.name) || selectedType;
|
|
pendingOAuthRef.current = { accountId, label };
|
|
await hostApiFetch('/api/providers/oauth/start', {
|
|
method: 'POST',
|
|
body: JSON.stringify({ provider: selectedType, accountId, label }),
|
|
});
|
|
} catch (e) {
|
|
setOauthError(String(e));
|
|
setOauthFlowing(false);
|
|
pendingOAuthRef.current = null;
|
|
}
|
|
};
|
|
|
|
const handleCancelOAuth = async () => {
|
|
setOauthFlowing(false);
|
|
setOauthData(null);
|
|
setOauthError(null);
|
|
pendingOAuthRef.current = null;
|
|
await hostApiFetch('/api/providers/oauth/cancel', {
|
|
method: 'POST',
|
|
});
|
|
};
|
|
|
|
const availableTypes = PROVIDER_TYPE_INFO.filter((type) => {
|
|
const vendor = vendorMap.get(type.id);
|
|
if (!vendor) {
|
|
return !existingVendorIds.has(type.id) || type.id === 'custom';
|
|
}
|
|
return vendor.supportsMultipleAccounts || !existingVendorIds.has(type.id);
|
|
});
|
|
|
|
const handleAdd = async () => {
|
|
if (!selectedType) return;
|
|
|
|
if (selectedType === 'minimax-portal' && existingVendorIds.has('minimax-portal-cn')) {
|
|
toast.error(t('aiProviders.toast.minimaxConflict'));
|
|
return;
|
|
}
|
|
if (selectedType === 'minimax-portal-cn' && existingVendorIds.has('minimax-portal')) {
|
|
toast.error(t('aiProviders.toast.minimaxConflict'));
|
|
return;
|
|
}
|
|
|
|
setSaving(true);
|
|
setValidationError(null);
|
|
|
|
try {
|
|
// Validate key first if the provider requires one and a key was entered
|
|
const requiresKey = typeInfo?.requiresApiKey ?? false;
|
|
if (requiresKey && !apiKey.trim()) {
|
|
setValidationError(t('aiProviders.toast.invalidKey')); // reusing invalid key msg or should add 'required' msg? null checks
|
|
setSaving(false);
|
|
return;
|
|
}
|
|
if (requiresKey && apiKey) {
|
|
const result = await onValidateKey(selectedType, apiKey, {
|
|
baseUrl: baseUrl.trim() || undefined,
|
|
apiProtocol: (selectedType === 'custom' || selectedType === 'ollama') ? apiProtocol : undefined,
|
|
});
|
|
if (!result.valid) {
|
|
setValidationError(result.error || t('aiProviders.toast.invalidKey'));
|
|
setSaving(false);
|
|
return;
|
|
}
|
|
}
|
|
|
|
const requiresModel = showModelIdField;
|
|
if (requiresModel && !modelId.trim()) {
|
|
setValidationError(t('aiProviders.toast.modelRequired'));
|
|
setSaving(false);
|
|
return;
|
|
}
|
|
|
|
await onAdd(
|
|
selectedType,
|
|
name || (typeInfo?.id === 'custom' ? t('aiProviders.custom') : typeInfo?.name) || selectedType,
|
|
apiKey.trim(),
|
|
{
|
|
baseUrl: baseUrl.trim() || undefined,
|
|
apiProtocol: (selectedType === 'custom' || selectedType === 'ollama') ? apiProtocol : undefined,
|
|
model: resolveProviderModelForSave(typeInfo, modelId, devModeUnlocked),
|
|
authMode: useOAuthFlow ? (preferredOAuthMode || 'oauth_device') : selectedType === 'ollama'
|
|
? 'local'
|
|
: (isOAuth && supportsApiKey && authMode === 'apikey')
|
|
? 'api_key'
|
|
: vendorMap.get(selectedType)?.defaultAuthMode || 'api_key',
|
|
}
|
|
);
|
|
} catch {
|
|
// error already handled via toast in parent
|
|
} finally {
|
|
setSaving(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="fixed inset-0 z-50 bg-black/50 flex items-center justify-center p-4">
|
|
<Card className="w-full max-w-2xl max-h-[90vh] flex flex-col rounded-3xl border-0 shadow-2xl bg-[#f3f1e9] dark:bg-[#1a1a19] overflow-hidden">
|
|
<CardHeader className="relative pb-2 shrink-0">
|
|
<CardTitle className="text-2xl font-serif font-normal">{t('aiProviders.dialog.title')}</CardTitle>
|
|
<CardDescription className="text-[15px] mt-1 text-foreground/70">
|
|
{t('aiProviders.dialog.desc')}
|
|
</CardDescription>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className="absolute right-4 top-4 rounded-full h-8 w-8 -mr-2 -mt-2 text-muted-foreground hover:text-foreground hover:bg-black/5 dark:hover:bg-white/5"
|
|
onClick={onClose}
|
|
>
|
|
<X className="h-4 w-4" />
|
|
</Button>
|
|
</CardHeader>
|
|
<CardContent className="overflow-y-auto flex-1 p-6">
|
|
{!selectedType ? (
|
|
<div className="grid grid-cols-2 md:grid-cols-3 gap-3">
|
|
{availableTypes.map((type) => (
|
|
<button
|
|
key={type.id}
|
|
onClick={() => {
|
|
setSelectedType(type.id);
|
|
setName(type.id === 'custom' ? t('aiProviders.custom') : type.name);
|
|
setBaseUrl(type.defaultBaseUrl || '');
|
|
setModelId(type.defaultModelId || '');
|
|
}}
|
|
className="p-4 rounded-2xl border border-black/5 dark:border-white/5 hover:bg-black/5 dark:hover:bg-white/5 transition-colors text-center group"
|
|
>
|
|
<div className="h-12 w-12 mx-auto mb-3 flex items-center justify-center bg-white dark:bg-[#1a1a19] rounded-xl shadow-sm border border-black/5 dark:border-white/5 group-hover:scale-105 transition-transform">
|
|
{getProviderIconUrl(type.id) ? (
|
|
<img src={getProviderIconUrl(type.id)} alt={type.name} className={cn('h-6 w-6', shouldInvertInDark(type.id) && 'dark:invert')} />
|
|
) : (
|
|
<span className="text-2xl">{type.icon}</span>
|
|
)}
|
|
</div>
|
|
<p className="font-medium text-[13px]">{type.id === 'custom' ? t('aiProviders.custom') : type.name}</p>
|
|
</button>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<div className="space-y-6">
|
|
<div className="flex items-center gap-3 p-4 rounded-2xl bg-white dark:bg-[#1a1a19] border border-black/5 dark:border-white/5 shadow-sm">
|
|
<div className="h-10 w-10 shrink-0 flex items-center justify-center bg-black/5 dark:bg-white/5 rounded-xl">
|
|
{getProviderIconUrl(selectedType!) ? (
|
|
<img src={getProviderIconUrl(selectedType!)} alt={typeInfo?.name} className={cn('h-6 w-6', shouldInvertInDark(selectedType!) && 'dark:invert')} />
|
|
) : (
|
|
<span className="text-xl">{typeInfo?.icon}</span>
|
|
)}
|
|
</div>
|
|
<div>
|
|
<p className="font-semibold text-[15px]">{typeInfo?.id === 'custom' ? t('aiProviders.custom') : typeInfo?.name}</p>
|
|
<button
|
|
onClick={() => {
|
|
setSelectedType(null);
|
|
setValidationError(null);
|
|
setBaseUrl('');
|
|
setModelId('');
|
|
}}
|
|
className="text-[13px] text-blue-500 hover:text-blue-600 font-medium"
|
|
>
|
|
{t('aiProviders.dialog.change')}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-6 bg-transparent p-0">
|
|
<div className="space-y-2.5">
|
|
<Label htmlFor="name" className={labelClasses}>{t('aiProviders.dialog.displayName')}</Label>
|
|
<Input
|
|
id="name"
|
|
placeholder={typeInfo?.id === 'custom' ? t('aiProviders.custom') : typeInfo?.name}
|
|
value={name}
|
|
onChange={(e) => setName(e.target.value)}
|
|
className={inputClasses}
|
|
/>
|
|
</div>
|
|
|
|
{/* Auth mode toggle for providers supporting both */}
|
|
{isOAuth && supportsApiKey && (
|
|
<div className="flex rounded-xl border border-black/10 dark:border-white/10 overflow-hidden text-[13px] font-medium shadow-sm bg-[#eeece3] dark:bg-[#151514] p-1 gap-1">
|
|
<button
|
|
onClick={() => setAuthMode('oauth')}
|
|
className={cn(
|
|
'flex-1 py-2 px-3 rounded-lg transition-colors',
|
|
authMode === 'oauth' ? 'bg-black/5 dark:bg-white/10 text-foreground' : 'text-muted-foreground hover:bg-black/5 dark:hover:bg-white/5'
|
|
)}
|
|
>
|
|
{t('aiProviders.oauth.loginMode')}
|
|
</button>
|
|
<button
|
|
onClick={() => setAuthMode('apikey')}
|
|
className={cn(
|
|
'flex-1 py-2 px-3 rounded-lg transition-colors',
|
|
authMode === 'apikey' ? 'bg-black/5 dark:bg-white/10 text-foreground' : 'text-muted-foreground hover:bg-black/5 dark:hover:bg-white/5'
|
|
)}
|
|
>
|
|
{t('aiProviders.oauth.apikeyMode')}
|
|
</button>
|
|
</div>
|
|
)}
|
|
|
|
{/* API Key input — shown for non-OAuth providers or when apikey mode is selected */}
|
|
{(!isOAuth || (supportsApiKey && authMode === 'apikey')) && (
|
|
<div className="space-y-2.5">
|
|
<div className="flex items-center justify-between">
|
|
<Label htmlFor="apiKey" className={labelClasses}>{t('aiProviders.dialog.apiKey')}</Label>
|
|
{typeInfo?.apiKeyUrl && (
|
|
<a
|
|
href={typeInfo.apiKeyUrl}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="text-[13px] text-blue-500 hover:text-blue-600 font-medium flex items-center gap-1"
|
|
tabIndex={-1}
|
|
>
|
|
{t('aiProviders.oauth.getApiKey')} <ExternalLink className="h-3 w-3" />
|
|
</a>
|
|
)}
|
|
</div>
|
|
<div className="relative">
|
|
<Input
|
|
id="apiKey"
|
|
type={showKey ? 'text' : 'password'}
|
|
placeholder={typeInfo?.id === 'ollama' ? t('aiProviders.notRequired') : typeInfo?.placeholder}
|
|
value={apiKey}
|
|
onChange={(e) => {
|
|
setApiKey(e.target.value);
|
|
setValidationError(null);
|
|
}}
|
|
className={inputClasses}
|
|
/>
|
|
<button
|
|
type="button"
|
|
onClick={() => setShowKey(!showKey)}
|
|
className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
|
|
>
|
|
{showKey ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
|
|
</button>
|
|
</div>
|
|
{validationError && (
|
|
<p className="text-[13px] text-red-500 font-medium">{validationError}</p>
|
|
)}
|
|
<p className="text-[12px] text-muted-foreground">
|
|
{t('aiProviders.dialog.apiKeyStored')}
|
|
</p>
|
|
</div>
|
|
)}
|
|
|
|
{typeInfo?.showBaseUrl && (
|
|
<div className="space-y-2.5">
|
|
<Label htmlFor="baseUrl" className={labelClasses}>{t('aiProviders.dialog.baseUrl')}</Label>
|
|
<Input
|
|
id="baseUrl"
|
|
placeholder={apiProtocol === 'anthropic-messages' ? "https://api.example.com/anthropic" : "https://api.example.com/v1"}
|
|
value={baseUrl}
|
|
onChange={(e) => setBaseUrl(e.target.value)}
|
|
className={inputClasses}
|
|
/>
|
|
</div>
|
|
)}
|
|
|
|
{showModelIdField && (
|
|
<div className="space-y-2.5">
|
|
<Label htmlFor="modelId" className={labelClasses}>{t('aiProviders.dialog.modelId')}</Label>
|
|
<Input
|
|
id="modelId"
|
|
placeholder={typeInfo?.modelIdPlaceholder || 'provider/model-id'}
|
|
value={modelId}
|
|
onChange={(e) => {
|
|
setModelId(e.target.value);
|
|
setValidationError(null);
|
|
}}
|
|
className={inputClasses}
|
|
/>
|
|
</div>
|
|
)}
|
|
{selectedType === 'custom' && (
|
|
<div className="space-y-2.5">
|
|
<Label className={labelClasses}>{t('aiProviders.dialog.protocol', 'Protocol')}</Label>
|
|
<div className="flex gap-2 text-[13px]">
|
|
<button
|
|
type="button"
|
|
onClick={() => setApiProtocol('openai-completions')}
|
|
className={cn("flex-1 py-1.5 px-3 rounded-lg border transition-colors", apiProtocol === 'openai-completions' ? "bg-white dark:bg-[#1a1a19] border-black/20 dark:border-white/20 shadow-sm font-medium" : "border-transparent bg-black/5 dark:bg-white/5 text-muted-foreground hover:bg-black/10 dark:hover:bg-white/10")}
|
|
>
|
|
{t('aiProviders.protocols.openai', 'OpenAI')}
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => setApiProtocol('anthropic-messages')}
|
|
className={cn("flex-1 py-1.5 px-3 rounded-lg border transition-colors", apiProtocol === 'anthropic-messages' ? "bg-white dark:bg-[#1a1a19] border-black/20 dark:border-white/20 shadow-sm font-medium" : "border-transparent bg-black/5 dark:bg-white/5 text-muted-foreground hover:bg-black/10 dark:hover:bg-white/10")}
|
|
>
|
|
{t('aiProviders.protocols.anthropic', 'Anthropic')}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
{/* Device OAuth Trigger — only shown when in OAuth mode */}
|
|
{useOAuthFlow && (
|
|
<div className="space-y-4 pt-2">
|
|
<div className="rounded-xl bg-blue-500/10 border border-blue-500/20 p-5 text-center">
|
|
<p className="text-[13px] font-medium text-blue-600 dark:text-blue-400 mb-4 block">
|
|
{t('aiProviders.oauth.loginPrompt')}
|
|
</p>
|
|
<Button
|
|
onClick={handleStartOAuth}
|
|
disabled={oauthFlowing}
|
|
className="w-full rounded-full h-[42px] font-semibold bg-[#0a84ff] hover:bg-[#007aff] text-white shadow-sm"
|
|
>
|
|
{oauthFlowing ? (
|
|
<><Loader2 className="h-4 w-4 mr-2 animate-spin" />{t('aiProviders.oauth.waiting')}</>
|
|
) : (
|
|
t('aiProviders.oauth.loginButton')
|
|
)}
|
|
</Button>
|
|
</div>
|
|
|
|
{/* OAuth Active State Modal / Inline View */}
|
|
{oauthFlowing && (
|
|
<div className="mt-4 p-5 border border-black/10 dark:border-white/10 rounded-2xl bg-white dark:bg-[#1a1a19] shadow-sm relative overflow-hidden">
|
|
{/* Background pulse effect */}
|
|
<div className="absolute inset-0 bg-blue-500/5 animate-pulse" />
|
|
|
|
<div className="relative z-10 flex flex-col items-center justify-center text-center space-y-5">
|
|
{oauthError ? (
|
|
<div className="text-red-500 space-y-3">
|
|
<XCircle className="h-10 w-10 mx-auto" />
|
|
<p className="font-semibold text-[15px]">{t('aiProviders.oauth.authFailed')}</p>
|
|
<p className="text-[13px] opacity-80">{oauthError}</p>
|
|
<Button variant="outline" size="sm" onClick={handleCancelOAuth} className="mt-2 rounded-full px-6 h-9">
|
|
Try Again
|
|
</Button>
|
|
</div>
|
|
) : !oauthData ? (
|
|
<div className="space-y-4 py-6">
|
|
<Loader2 className="h-10 w-10 animate-spin text-blue-500 mx-auto" />
|
|
<p className="text-[13px] font-medium text-muted-foreground animate-pulse">{t('aiProviders.oauth.requestingCode')}</p>
|
|
</div>
|
|
) : (
|
|
<div className="space-y-5 w-full">
|
|
<div className="space-y-2">
|
|
<h3 className="font-semibold text-[16px] text-foreground">{t('aiProviders.oauth.approveLogin')}</h3>
|
|
<div className="text-[13px] text-muted-foreground text-left mt-2 space-y-1.5 bg-black/5 dark:bg-white/5 p-4 rounded-xl">
|
|
<p>1. {t('aiProviders.oauth.step1')}</p>
|
|
<p>2. {t('aiProviders.oauth.step2')}</p>
|
|
<p>3. {t('aiProviders.oauth.step3')}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center justify-center gap-3 p-4 bg-[#eeece3] dark:bg-[#151514] border border-black/5 dark:border-white/5 rounded-xl shadow-inner">
|
|
<code className="text-3xl font-mono tracking-[0.2em] font-bold text-foreground">
|
|
{oauthData.userCode}
|
|
</code>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className="h-10 w-10 rounded-full hover:bg-black/5 dark:hover:bg-white/10"
|
|
onClick={() => {
|
|
navigator.clipboard.writeText(oauthData.userCode);
|
|
toast.success(t('aiProviders.oauth.codeCopied'));
|
|
}}
|
|
>
|
|
<Copy className="h-5 w-5" />
|
|
</Button>
|
|
</div>
|
|
|
|
<Button
|
|
variant="secondary"
|
|
className="w-full rounded-full h-[42px] font-semibold"
|
|
onClick={() => invokeIpc('shell:openExternal', oauthData.verificationUri)}
|
|
>
|
|
<ExternalLink className="h-4 w-4 mr-2" />
|
|
{t('aiProviders.oauth.openLoginPage')}
|
|
</Button>
|
|
|
|
<div className="flex items-center justify-center gap-2 text-[13px] font-medium text-muted-foreground pt-2">
|
|
<Loader2 className="h-4 w-4 animate-spin text-blue-500" />
|
|
<span>{t('aiProviders.oauth.waitingApproval')}</span>
|
|
</div>
|
|
|
|
<Button variant="ghost" className="w-full rounded-full h-[42px] font-semibold text-muted-foreground" onClick={handleCancelOAuth}>
|
|
Cancel
|
|
</Button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<Separator className="bg-black/10 dark:bg-white/10" />
|
|
|
|
<div className="flex justify-end gap-3">
|
|
<Button
|
|
onClick={handleAdd}
|
|
className={cn("rounded-full px-8 h-[42px] text-[13px] font-semibold bg-[#0a84ff] hover:bg-[#007aff] text-white shadow-sm", useOAuthFlow && "hidden")}
|
|
disabled={!selectedType || saving || (showModelIdField && modelId.trim().length === 0)}
|
|
>
|
|
{saving ? (
|
|
<Loader2 className="h-4 w-4 animate-spin mr-2" />
|
|
) : null}
|
|
{t('aiProviders.dialog.add')}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
);
|
|
} |