feat(provider): mainly support moonshot / siliconflow on setup (#43)
This commit is contained in:
DigHuang
committed by
GitHub
Unverified
GitHub
parent
563fcd2f24
commit
1b508d5bde
@@ -16,8 +16,8 @@ import {
|
||||
isOpenClawPresent
|
||||
} from '../utils/paths';
|
||||
import { getSetting } from '../utils/store';
|
||||
import { getApiKey } from '../utils/secure-storage';
|
||||
import { getProviderEnvVar } from '../utils/openclaw-auth';
|
||||
import { getApiKey, getDefaultProvider, getProvider } from '../utils/secure-storage';
|
||||
import { getProviderEnvVar, getKeyableProviderTypes } from '../utils/provider-registry';
|
||||
import { GatewayEventType, JsonRpcNotification, isNotification, isResponse } from './protocol';
|
||||
import { logger } from '../utils/logger';
|
||||
import { getUvMirrorEnv } from '../utils/uv-env';
|
||||
@@ -521,10 +521,30 @@ export class GatewayManager extends EventEmitter {
|
||||
? `${binPath}${path.delimiter}${process.env.PATH || ''}`
|
||||
: process.env.PATH || '';
|
||||
|
||||
// Load provider API keys from secure storage to pass as environment variables
|
||||
// Load provider API keys from storage to pass as environment variables
|
||||
const providerEnv: Record<string, string> = {};
|
||||
const providerTypes = ['anthropic', 'openai', 'google', 'openrouter'];
|
||||
const providerTypes = getKeyableProviderTypes();
|
||||
let loadedProviderKeyCount = 0;
|
||||
|
||||
// Prefer the selected default provider key when provider IDs are instance-based.
|
||||
try {
|
||||
const defaultProviderId = await getDefaultProvider();
|
||||
if (defaultProviderId) {
|
||||
const defaultProvider = await getProvider(defaultProviderId);
|
||||
const defaultProviderType = defaultProvider?.type;
|
||||
const defaultProviderKey = await getApiKey(defaultProviderId);
|
||||
if (defaultProviderType && defaultProviderKey) {
|
||||
const envVar = getProviderEnvVar(defaultProviderType);
|
||||
if (envVar) {
|
||||
providerEnv[envVar] = defaultProviderKey;
|
||||
loadedProviderKeyCount++;
|
||||
}
|
||||
}
|
||||
}
|
||||
} catch (err) {
|
||||
logger.warn('Failed to load default provider key for environment injection:', err);
|
||||
}
|
||||
|
||||
for (const providerType of providerTypes) {
|
||||
try {
|
||||
const key = await getApiKey(providerType);
|
||||
|
||||
@@ -13,18 +13,21 @@ import {
|
||||
hasApiKey,
|
||||
saveProvider,
|
||||
getProvider,
|
||||
|
||||
deleteProvider,
|
||||
setDefaultProvider,
|
||||
getDefaultProvider,
|
||||
getAllProvidersWithKeyInfo,
|
||||
isEncryptionAvailable,
|
||||
type ProviderConfig,
|
||||
} from '../utils/secure-storage';
|
||||
import { getOpenClawStatus, getOpenClawDir, getOpenClawConfigDir, getOpenClawSkillsDir } from '../utils/paths';
|
||||
import { getOpenClawCliCommand, installOpenClawCliMac } from '../utils/openclaw-cli';
|
||||
import { getSetting } from '../utils/store';
|
||||
import { saveProviderKeyToOpenClaw, setOpenClawDefaultModel } from '../utils/openclaw-auth';
|
||||
import {
|
||||
saveProviderKeyToOpenClaw,
|
||||
removeProviderKeyFromOpenClaw,
|
||||
setOpenClawDefaultModel,
|
||||
setOpenClawDefaultModelWithOverride,
|
||||
} from '../utils/openclaw-auth';
|
||||
import { logger } from '../utils/logger';
|
||||
import {
|
||||
saveChannelConfig,
|
||||
@@ -686,11 +689,6 @@ function registerWhatsAppHandlers(mainWindow: BrowserWindow): void {
|
||||
* Provider-related IPC handlers
|
||||
*/
|
||||
function registerProviderHandlers(): void {
|
||||
// Check if encryption is available
|
||||
ipcMain.handle('provider:encryptionAvailable', () => {
|
||||
return isEncryptionAvailable();
|
||||
});
|
||||
|
||||
// Get all providers with key info
|
||||
ipcMain.handle('provider:list', async () => {
|
||||
return await getAllProvidersWithKeyInfo();
|
||||
@@ -719,13 +717,6 @@ function registerProviderHandlers(): void {
|
||||
}
|
||||
}
|
||||
|
||||
// Set the default model in OpenClaw config based on provider type
|
||||
try {
|
||||
setOpenClawDefaultModel(config.type);
|
||||
} catch (err) {
|
||||
console.warn('Failed to set OpenClaw default model:', err);
|
||||
}
|
||||
|
||||
return { success: true };
|
||||
} catch (error) {
|
||||
return { success: false, error: String(error) };
|
||||
@@ -735,7 +726,18 @@ function registerProviderHandlers(): void {
|
||||
// Delete a provider
|
||||
ipcMain.handle('provider:delete', async (_, providerId: string) => {
|
||||
try {
|
||||
const existing = await getProvider(providerId);
|
||||
await deleteProvider(providerId);
|
||||
|
||||
// Best-effort cleanup in OpenClaw auth profiles
|
||||
if (existing?.type) {
|
||||
try {
|
||||
removeProviderKeyFromOpenClaw(existing.type);
|
||||
} catch (err) {
|
||||
console.warn('Failed to remove key from OpenClaw auth-profiles:', err);
|
||||
}
|
||||
}
|
||||
|
||||
return { success: true };
|
||||
} catch (error) {
|
||||
return { success: false, error: String(error) };
|
||||
@@ -763,10 +765,78 @@ function registerProviderHandlers(): void {
|
||||
}
|
||||
});
|
||||
|
||||
// Atomically update provider config and API key
|
||||
ipcMain.handle(
|
||||
'provider:updateWithKey',
|
||||
async (
|
||||
_,
|
||||
providerId: string,
|
||||
updates: Partial<ProviderConfig>,
|
||||
apiKey?: string
|
||||
) => {
|
||||
const existing = await getProvider(providerId);
|
||||
if (!existing) {
|
||||
return { success: false, error: 'Provider not found' };
|
||||
}
|
||||
|
||||
const previousKey = await getApiKey(providerId);
|
||||
const previousProviderType = existing.type;
|
||||
|
||||
try {
|
||||
const nextConfig: ProviderConfig = {
|
||||
...existing,
|
||||
...updates,
|
||||
updatedAt: new Date().toISOString(),
|
||||
};
|
||||
|
||||
await saveProvider(nextConfig);
|
||||
|
||||
if (apiKey !== undefined) {
|
||||
const trimmedKey = apiKey.trim();
|
||||
if (trimmedKey) {
|
||||
await storeApiKey(providerId, trimmedKey);
|
||||
saveProviderKeyToOpenClaw(nextConfig.type, trimmedKey);
|
||||
} else {
|
||||
await deleteApiKey(providerId);
|
||||
removeProviderKeyFromOpenClaw(nextConfig.type);
|
||||
}
|
||||
}
|
||||
|
||||
return { success: true };
|
||||
} catch (error) {
|
||||
// Best-effort rollback to keep config/key consistent.
|
||||
try {
|
||||
await saveProvider(existing);
|
||||
if (previousKey) {
|
||||
await storeApiKey(providerId, previousKey);
|
||||
saveProviderKeyToOpenClaw(previousProviderType, previousKey);
|
||||
} else {
|
||||
await deleteApiKey(providerId);
|
||||
removeProviderKeyFromOpenClaw(previousProviderType);
|
||||
}
|
||||
} catch (rollbackError) {
|
||||
console.warn('Failed to rollback provider updateWithKey:', rollbackError);
|
||||
}
|
||||
|
||||
return { success: false, error: String(error) };
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
// Delete API key for a provider
|
||||
ipcMain.handle('provider:deleteApiKey', async (_, providerId: string) => {
|
||||
try {
|
||||
await deleteApiKey(providerId);
|
||||
|
||||
// Keep OpenClaw auth-profiles.json in sync with local key storage
|
||||
const provider = await getProvider(providerId);
|
||||
const providerType = provider?.type || providerId;
|
||||
try {
|
||||
removeProviderKeyFromOpenClaw(providerType);
|
||||
} catch (err) {
|
||||
console.warn('Failed to remove key from OpenClaw auth-profiles:', err);
|
||||
}
|
||||
|
||||
return { success: true };
|
||||
} catch (error) {
|
||||
return { success: false, error: String(error) };
|
||||
@@ -783,10 +853,42 @@ function registerProviderHandlers(): void {
|
||||
return await getApiKey(providerId);
|
||||
});
|
||||
|
||||
// Set default provider
|
||||
// Set default provider and update OpenClaw default model
|
||||
ipcMain.handle('provider:setDefault', async (_, providerId: string) => {
|
||||
try {
|
||||
await setDefaultProvider(providerId);
|
||||
|
||||
// Update OpenClaw config to use this provider's default model
|
||||
const provider = await getProvider(providerId);
|
||||
if (provider) {
|
||||
try {
|
||||
// If the provider has a user-specified model (e.g. siliconflow),
|
||||
// build the full model string: "providerType/modelId"
|
||||
const modelOverride = provider.model
|
||||
? `${provider.type}/${provider.model}`
|
||||
: undefined;
|
||||
|
||||
if (provider.type === 'custom' || provider.type === 'ollama') {
|
||||
// For runtime-configured providers, use user-entered base URL/api.
|
||||
setOpenClawDefaultModelWithOverride(provider.type, modelOverride, {
|
||||
baseUrl: provider.baseUrl,
|
||||
api: 'openai-completions',
|
||||
});
|
||||
} else {
|
||||
setOpenClawDefaultModel(provider.type, modelOverride);
|
||||
}
|
||||
|
||||
// Keep auth-profiles in sync with the default provider instance.
|
||||
// This is especially important when multiple custom providers exist.
|
||||
const providerKey = await getApiKey(providerId);
|
||||
if (providerKey) {
|
||||
saveProviderKeyToOpenClaw(provider.type, providerKey);
|
||||
}
|
||||
} catch (err) {
|
||||
console.warn('Failed to set OpenClaw default model:', err);
|
||||
}
|
||||
}
|
||||
|
||||
return { success: true };
|
||||
} catch (error) {
|
||||
return { success: false, error: String(error) };
|
||||
@@ -809,7 +911,7 @@ function registerProviderHandlers(): void {
|
||||
// This allows validation during setup when provider hasn't been saved yet
|
||||
const providerType = provider?.type || providerId;
|
||||
|
||||
console.log(`Validating API key for provider type: ${providerType}`);
|
||||
console.log(`[clawx-validate] validating provider type: ${providerType}`);
|
||||
return await validateApiKeyWithProvider(providerType, apiKey);
|
||||
} catch (error) {
|
||||
console.error('Validation error:', error);
|
||||
@@ -819,8 +921,8 @@ function registerProviderHandlers(): void {
|
||||
}
|
||||
|
||||
/**
|
||||
* Validate API key by making a real chat completion API call to the provider
|
||||
* This sends a minimal "hi" message to verify the key works
|
||||
* Validate API key using lightweight model-listing endpoints (zero token cost).
|
||||
* Falls back to accepting the key for unknown/custom provider types.
|
||||
*/
|
||||
async function validateApiKeyWithProvider(
|
||||
providerType: string,
|
||||
@@ -841,11 +943,16 @@ async function validateApiKeyWithProvider(
|
||||
return await validateGoogleKey(trimmedKey);
|
||||
case 'openrouter':
|
||||
return await validateOpenRouterKey(trimmedKey);
|
||||
case 'moonshot':
|
||||
return await validateMoonshotKey(trimmedKey);
|
||||
case 'siliconflow':
|
||||
return await validateSiliconFlowKey(trimmedKey);
|
||||
case 'ollama':
|
||||
// Ollama doesn't require API key validation
|
||||
return { valid: true };
|
||||
default:
|
||||
// For custom providers, just check the key is not empty
|
||||
console.log(`[clawx-validate] ${providerType} uses local non-empty validation only`);
|
||||
return { valid: true };
|
||||
}
|
||||
} catch (error) {
|
||||
@@ -854,265 +961,169 @@ async function validateApiKeyWithProvider(
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Parse error message from API response
|
||||
*/
|
||||
function parseApiError(data: unknown): string {
|
||||
if (!data || typeof data !== 'object') return 'Unknown error';
|
||||
function logValidationStatus(provider: string, status: number): void {
|
||||
console.log(`[clawx-validate] ${provider} HTTP ${status}`);
|
||||
}
|
||||
|
||||
// Anthropic format: { error: { message: "..." } }
|
||||
// OpenAI format: { error: { message: "..." } }
|
||||
// Google format: { error: { message: "..." } }
|
||||
const obj = data as { error?: { message?: string; type?: string }; message?: string };
|
||||
function maskSecret(secret: string): string {
|
||||
if (!secret) return '';
|
||||
if (secret.length <= 8) return `${secret.slice(0, 2)}***`;
|
||||
return `${secret.slice(0, 4)}***${secret.slice(-4)}`;
|
||||
}
|
||||
|
||||
if (obj.error?.message) return obj.error.message;
|
||||
if (obj.message) return obj.message;
|
||||
function sanitizeValidationUrl(rawUrl: string): string {
|
||||
try {
|
||||
const url = new URL(rawUrl);
|
||||
const key = url.searchParams.get('key');
|
||||
if (key) url.searchParams.set('key', maskSecret(key));
|
||||
return url.toString();
|
||||
} catch {
|
||||
return rawUrl;
|
||||
}
|
||||
}
|
||||
|
||||
return 'Unknown error';
|
||||
function sanitizeHeaders(headers: Record<string, string>): Record<string, string> {
|
||||
const next = { ...headers };
|
||||
if (next.Authorization?.startsWith('Bearer ')) {
|
||||
const token = next.Authorization.slice('Bearer '.length);
|
||||
next.Authorization = `Bearer ${maskSecret(token)}`;
|
||||
}
|
||||
if (next['x-api-key']) {
|
||||
next['x-api-key'] = maskSecret(next['x-api-key']);
|
||||
}
|
||||
return next;
|
||||
}
|
||||
|
||||
function logValidationRequest(
|
||||
provider: string,
|
||||
method: string,
|
||||
url: string,
|
||||
headers: Record<string, string>
|
||||
): void {
|
||||
console.log(
|
||||
`[clawx-validate] ${provider} request ${method} ${sanitizeValidationUrl(url)} headers=${JSON.stringify(sanitizeHeaders(headers))}`
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Validate Anthropic API key by making a minimal chat completion request
|
||||
* Helper: classify an HTTP response as valid / invalid / error.
|
||||
* 200 / 429 → valid (key works, possibly rate-limited).
|
||||
* 401 / 403 → invalid.
|
||||
* Everything else → return the API error message.
|
||||
*/
|
||||
function classifyAuthResponse(
|
||||
status: number,
|
||||
data: unknown
|
||||
): { valid: boolean; error?: string } {
|
||||
if (status >= 200 && status < 300) return { valid: true };
|
||||
if (status === 429) return { valid: true }; // rate-limited but key is valid
|
||||
if (status === 401 || status === 403) return { valid: false, error: 'Invalid API key' };
|
||||
|
||||
// Try to extract an error message
|
||||
const obj = data as { error?: { message?: string }; message?: string } | null;
|
||||
const msg = obj?.error?.message || obj?.message || `API error: ${status}`;
|
||||
return { valid: false, error: msg };
|
||||
}
|
||||
|
||||
/**
|
||||
* Validate Anthropic API key via GET /v1/models (zero cost)
|
||||
*/
|
||||
async function validateAnthropicKey(apiKey: string): Promise<{ valid: boolean; error?: string }> {
|
||||
try {
|
||||
const response = await fetch('https://api.anthropic.com/v1/messages', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'x-api-key': apiKey,
|
||||
'anthropic-version': '2023-06-01',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
model: 'claude-3-haiku-20240307',
|
||||
max_tokens: 1,
|
||||
messages: [{ role: 'user', content: 'hi' }],
|
||||
}),
|
||||
});
|
||||
|
||||
const url = 'https://api.anthropic.com/v1/models?limit=1';
|
||||
const headers = {
|
||||
'x-api-key': apiKey,
|
||||
'anthropic-version': '2023-06-01',
|
||||
};
|
||||
logValidationRequest('anthropic', 'GET', url, headers);
|
||||
const response = await fetch(url, { headers });
|
||||
logValidationStatus('anthropic', response.status);
|
||||
const data = await response.json().catch(() => ({}));
|
||||
|
||||
if (response.ok) {
|
||||
return { valid: true };
|
||||
}
|
||||
|
||||
// Authentication error
|
||||
if (response.status === 401) {
|
||||
return { valid: false, error: 'Invalid API key' };
|
||||
}
|
||||
|
||||
// Permission error (invalid key format, etc.)
|
||||
if (response.status === 403) {
|
||||
return { valid: false, error: parseApiError(data) };
|
||||
}
|
||||
|
||||
// Rate limit or overloaded - key is valid but service is busy
|
||||
if (response.status === 429 || response.status === 529) {
|
||||
return { valid: true };
|
||||
}
|
||||
|
||||
// Model not found or bad request but auth passed - key is valid
|
||||
if (response.status === 400 || response.status === 404) {
|
||||
const errorType = (data as { error?: { type?: string } })?.error?.type;
|
||||
if (errorType === 'authentication_error' || errorType === 'invalid_api_key') {
|
||||
return { valid: false, error: 'Invalid API key' };
|
||||
}
|
||||
// Other errors like invalid_request_error mean the key is valid
|
||||
return { valid: true };
|
||||
}
|
||||
|
||||
return { valid: false, error: parseApiError(data) || `API error: ${response.status}` };
|
||||
return classifyAuthResponse(response.status, data);
|
||||
} catch (error) {
|
||||
return { valid: false, error: `Connection error: ${error instanceof Error ? error.message : String(error)}` };
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Validate OpenAI API key by making a minimal chat completion request
|
||||
* Validate OpenAI API key via GET /v1/models (zero cost)
|
||||
*/
|
||||
async function validateOpenAIKey(apiKey: string): Promise<{ valid: boolean; error?: string }> {
|
||||
try {
|
||||
const response = await fetch('https://api.openai.com/v1/chat/completions', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': `Bearer ${apiKey}`,
|
||||
},
|
||||
body: JSON.stringify({
|
||||
model: 'gpt-4o-mini',
|
||||
max_tokens: 1,
|
||||
messages: [{ role: 'user', content: 'hi' }],
|
||||
}),
|
||||
});
|
||||
|
||||
const url = 'https://api.openai.com/v1/models?limit=1';
|
||||
const headers = { Authorization: `Bearer ${apiKey}` };
|
||||
logValidationRequest('openai', 'GET', url, headers);
|
||||
const response = await fetch(url, { headers });
|
||||
logValidationStatus('openai', response.status);
|
||||
const data = await response.json().catch(() => ({}));
|
||||
|
||||
if (response.ok) {
|
||||
return { valid: true };
|
||||
}
|
||||
|
||||
// Authentication error
|
||||
if (response.status === 401) {
|
||||
return { valid: false, error: 'Invalid API key' };
|
||||
}
|
||||
|
||||
// Rate limit - key is valid
|
||||
if (response.status === 429) {
|
||||
return { valid: true };
|
||||
}
|
||||
|
||||
// Model not found or bad request but auth passed - key is valid
|
||||
if (response.status === 400 || response.status === 404) {
|
||||
const errorCode = (data as { error?: { code?: string } })?.error?.code;
|
||||
if (errorCode === 'invalid_api_key') {
|
||||
return { valid: false, error: 'Invalid API key' };
|
||||
}
|
||||
return { valid: true };
|
||||
}
|
||||
|
||||
return { valid: false, error: parseApiError(data) || `API error: ${response.status}` };
|
||||
return classifyAuthResponse(response.status, data);
|
||||
} catch (error) {
|
||||
return { valid: false, error: `Connection error: ${error instanceof Error ? error.message : String(error)}` };
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Validate Google (Gemini) API key by making a minimal generate content request
|
||||
* Validate Google (Gemini) API key via GET /v1beta/models (zero cost)
|
||||
*/
|
||||
async function validateGoogleKey(apiKey: string): Promise<{ valid: boolean; error?: string }> {
|
||||
try {
|
||||
const response = await fetch(
|
||||
`https://generativelanguage.googleapis.com/v1beta/models/gemini-2.0-flash:generateContent?key=${apiKey}`,
|
||||
{
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
contents: [{ parts: [{ text: 'hi' }] }],
|
||||
generationConfig: { maxOutputTokens: 1 },
|
||||
}),
|
||||
}
|
||||
);
|
||||
|
||||
const url = `https://generativelanguage.googleapis.com/v1beta/models?pageSize=1&key=${apiKey}`;
|
||||
logValidationRequest('google', 'GET', url, {});
|
||||
const response = await fetch(url);
|
||||
logValidationStatus('google', response.status);
|
||||
const data = await response.json().catch(() => ({}));
|
||||
|
||||
if (response.ok) {
|
||||
return { valid: true };
|
||||
}
|
||||
|
||||
// Authentication error
|
||||
if (response.status === 400 || response.status === 401 || response.status === 403) {
|
||||
const errorStatus = (data as { error?: { status?: string } })?.error?.status;
|
||||
if (errorStatus === 'UNAUTHENTICATED' || errorStatus === 'PERMISSION_DENIED') {
|
||||
return { valid: false, error: 'Invalid API key' };
|
||||
}
|
||||
// Check if it's actually an auth error
|
||||
const errorMessage = parseApiError(data).toLowerCase();
|
||||
if (errorMessage.includes('api key') || errorMessage.includes('invalid') || errorMessage.includes('unauthorized')) {
|
||||
return { valid: false, error: parseApiError(data) };
|
||||
}
|
||||
// Other errors mean key is valid
|
||||
return { valid: true };
|
||||
}
|
||||
|
||||
// Rate limit - key is valid
|
||||
if (response.status === 429) {
|
||||
return { valid: true };
|
||||
}
|
||||
|
||||
return { valid: false, error: parseApiError(data) || `API error: ${response.status}` };
|
||||
return classifyAuthResponse(response.status, data);
|
||||
} catch (error) {
|
||||
return { valid: false, error: `Connection error: ${error instanceof Error ? error.message : String(error)}` };
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Validate OpenRouter API key by making a minimal chat completion request
|
||||
* Validate OpenRouter API key via GET /api/v1/models (zero cost)
|
||||
*/
|
||||
async function validateOpenRouterKey(apiKey: string): Promise<{ valid: boolean; error?: string }> {
|
||||
try {
|
||||
// Use a popular free model for validation
|
||||
const response = await fetch('https://openrouter.ai/api/v1/chat/completions', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': `Bearer ${apiKey}`,
|
||||
'HTTP-Referer': 'https://clawx.app',
|
||||
'X-Title': 'ClawX',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
model: 'meta-llama/llama-3.2-3b-instruct:free',
|
||||
max_tokens: 1,
|
||||
messages: [{ role: 'user', content: 'hi' }],
|
||||
}),
|
||||
});
|
||||
|
||||
const url = 'https://openrouter.ai/api/v1/models';
|
||||
const headers = { Authorization: `Bearer ${apiKey}` };
|
||||
logValidationRequest('openrouter', 'GET', url, headers);
|
||||
const response = await fetch(url, { headers });
|
||||
logValidationStatus('openrouter', response.status);
|
||||
const data = await response.json().catch(() => ({}));
|
||||
console.log('OpenRouter validation response:', response.status, JSON.stringify(data));
|
||||
return classifyAuthResponse(response.status, data);
|
||||
} catch (error) {
|
||||
return { valid: false, error: `Connection error: ${error instanceof Error ? error.message : String(error)}` };
|
||||
}
|
||||
}
|
||||
|
||||
// Helper to check if error message indicates auth failure
|
||||
const isAuthError = (d: unknown): boolean => {
|
||||
const errorObj = (d as { error?: { message?: string; code?: number | string; type?: string } })?.error;
|
||||
if (!errorObj) return false;
|
||||
/**
|
||||
* Validate Moonshot API key via GET /v1/models (zero cost)
|
||||
*/
|
||||
async function validateMoonshotKey(apiKey: string): Promise<{ valid: boolean; error?: string }> {
|
||||
try {
|
||||
const url = 'https://api.moonshot.cn/v1/models';
|
||||
const headers = { Authorization: `Bearer ${apiKey}` };
|
||||
logValidationRequest('moonshot', 'GET', url, headers);
|
||||
const response = await fetch(url, { headers });
|
||||
logValidationStatus('moonshot', response.status);
|
||||
const data = await response.json().catch(() => ({}));
|
||||
return classifyAuthResponse(response.status, data);
|
||||
} catch (error) {
|
||||
return { valid: false, error: `Connection error: ${error instanceof Error ? error.message : String(error)}` };
|
||||
}
|
||||
}
|
||||
|
||||
const message = (errorObj.message || '').toLowerCase();
|
||||
const code = errorObj.code;
|
||||
const type = (errorObj.type || '').toLowerCase();
|
||||
|
||||
// Check for explicit auth-related errors
|
||||
if (code === 401 || code === '401' || code === 403 || code === '403') return true;
|
||||
if (type.includes('auth') || type.includes('invalid')) return true;
|
||||
if (message.includes('invalid api key') || message.includes('invalid key') ||
|
||||
message.includes('unauthorized') || message.includes('authentication') ||
|
||||
message.includes('invalid credentials') || message.includes('api key is not valid')) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
};
|
||||
|
||||
if (response.ok) {
|
||||
return { valid: true };
|
||||
}
|
||||
|
||||
// Always check for auth errors in the response body first
|
||||
if (isAuthError(data)) {
|
||||
// Return user-friendly message instead of raw API errors like "User not found."
|
||||
return { valid: false, error: 'Invalid API key' };
|
||||
}
|
||||
|
||||
// Authentication error status codes - always return user-friendly message
|
||||
if (response.status === 401 || response.status === 403) {
|
||||
return { valid: false, error: 'Invalid API key' };
|
||||
}
|
||||
|
||||
// Rate limit - key is valid
|
||||
if (response.status === 429) {
|
||||
return { valid: true };
|
||||
}
|
||||
|
||||
// Payment required or insufficient credits - key format is valid
|
||||
if (response.status === 402) {
|
||||
return { valid: true };
|
||||
}
|
||||
|
||||
// For 400/404, we must be very careful - only consider valid if clearly not an auth issue
|
||||
if (response.status === 400 || response.status === 404) {
|
||||
// If we got here without detecting auth error, it might be a model issue
|
||||
// But be conservative - require explicit success indication
|
||||
const errorObj = (data as { error?: { message?: string; code?: number } })?.error;
|
||||
const message = (errorObj?.message || '').toLowerCase();
|
||||
|
||||
// Only consider valid if the error is clearly about the model, not the key
|
||||
if (message.includes('model') && !message.includes('key') && !message.includes('auth')) {
|
||||
return { valid: true };
|
||||
}
|
||||
|
||||
// Default to invalid for ambiguous 400/404 errors
|
||||
return { valid: false, error: parseApiError(data) || 'Invalid API key or request' };
|
||||
}
|
||||
|
||||
return { valid: false, error: parseApiError(data) || `API error: ${response.status}` };
|
||||
/**
|
||||
* Validate SiliconFlow API key via GET /v1/models (zero cost)
|
||||
*/
|
||||
async function validateSiliconFlowKey(apiKey: string): Promise<{ valid: boolean; error?: string }> {
|
||||
try {
|
||||
const url = 'https://api.siliconflow.com/v1/models';
|
||||
const headers = { Authorization: `Bearer ${apiKey}` };
|
||||
logValidationRequest('siliconflow', 'GET', url, headers);
|
||||
const response = await fetch(url, { headers });
|
||||
logValidationStatus('siliconflow', response.status);
|
||||
const data = await response.json().catch(() => ({}));
|
||||
return classifyAuthResponse(response.status, data);
|
||||
} catch (error) {
|
||||
return { valid: false, error: `Connection error: ${error instanceof Error ? error.message : String(error)}` };
|
||||
}
|
||||
|
||||
@@ -64,12 +64,12 @@ const electronAPI = {
|
||||
'env:setApiKey',
|
||||
'env:deleteApiKey',
|
||||
// Provider
|
||||
'provider:encryptionAvailable',
|
||||
'provider:list',
|
||||
'provider:get',
|
||||
'provider:save',
|
||||
'provider:delete',
|
||||
'provider:setApiKey',
|
||||
'provider:updateWithKey',
|
||||
'provider:deleteApiKey',
|
||||
'provider:hasApiKey',
|
||||
'provider:getApiKey',
|
||||
|
||||
@@ -6,6 +6,11 @@
|
||||
import { existsSync, mkdirSync, readFileSync, writeFileSync } from 'fs';
|
||||
import { join } from 'path';
|
||||
import { homedir } from 'os';
|
||||
import {
|
||||
getProviderEnvVar,
|
||||
getProviderDefaultModel,
|
||||
getProviderConfig,
|
||||
} from './provider-registry';
|
||||
|
||||
const AUTH_STORE_VERSION = 1;
|
||||
const AUTH_PROFILE_FILENAME = 'auth-profiles.json';
|
||||
@@ -29,21 +34,6 @@ interface AuthProfilesStore {
|
||||
lastGood?: Record<string, string>;
|
||||
}
|
||||
|
||||
/**
|
||||
* Provider type to environment variable name mapping
|
||||
*/
|
||||
const PROVIDER_ENV_VARS: Record<string, string> = {
|
||||
anthropic: 'ANTHROPIC_API_KEY',
|
||||
openai: 'OPENAI_API_KEY',
|
||||
google: 'GEMINI_API_KEY',
|
||||
openrouter: 'OPENROUTER_API_KEY',
|
||||
groq: 'GROQ_API_KEY',
|
||||
deepgram: 'DEEPGRAM_API_KEY',
|
||||
cerebras: 'CEREBRAS_API_KEY',
|
||||
xai: 'XAI_API_KEY',
|
||||
mistral: 'MISTRAL_API_KEY',
|
||||
};
|
||||
|
||||
/**
|
||||
* Get the path to the auth-profiles.json for a given agent
|
||||
*/
|
||||
@@ -139,10 +129,30 @@ export function saveProviderKeyToOpenClaw(
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the environment variable name for a provider type
|
||||
* Remove a provider API key from OpenClaw auth-profiles.json
|
||||
*/
|
||||
export function getProviderEnvVar(provider: string): string | undefined {
|
||||
return PROVIDER_ENV_VARS[provider];
|
||||
export function removeProviderKeyFromOpenClaw(
|
||||
provider: string,
|
||||
agentId = 'main'
|
||||
): void {
|
||||
const store = readAuthProfiles(agentId);
|
||||
const profileId = `${provider}:default`;
|
||||
|
||||
delete store.profiles[profileId];
|
||||
|
||||
if (store.order?.[provider]) {
|
||||
store.order[provider] = store.order[provider].filter((id) => id !== profileId);
|
||||
if (store.order[provider].length === 0) {
|
||||
delete store.order[provider];
|
||||
}
|
||||
}
|
||||
|
||||
if (store.lastGood?.[provider] === profileId) {
|
||||
delete store.lastGood[provider];
|
||||
}
|
||||
|
||||
writeAuthProfiles(store, agentId);
|
||||
console.log(`Removed API key for provider "${provider}" from OpenClaw auth-profiles (agent: ${agentId})`);
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -153,7 +163,7 @@ export function buildProviderEnvVars(providers: Array<{ type: string; apiKey: st
|
||||
const env: Record<string, string> = {};
|
||||
|
||||
for (const { type, apiKey } of providers) {
|
||||
const envVar = PROVIDER_ENV_VARS[type];
|
||||
const envVar = getProviderEnvVar(type);
|
||||
if (envVar && apiKey) {
|
||||
env[envVar] = apiKey;
|
||||
}
|
||||
@@ -162,46 +172,15 @@ export function buildProviderEnvVars(providers: Array<{ type: string; apiKey: st
|
||||
return env;
|
||||
}
|
||||
|
||||
/**
|
||||
* Provider type to default model mapping
|
||||
* Used to set the gateway's default model when the user selects a provider
|
||||
*/
|
||||
const PROVIDER_DEFAULT_MODELS: Record<string, string> = {
|
||||
anthropic: 'anthropic/claude-opus-4-6',
|
||||
openai: 'openai/gpt-5.2',
|
||||
google: 'google/gemini-3-pro-preview',
|
||||
openrouter: 'openrouter/anthropic/claude-opus-4.6',
|
||||
};
|
||||
|
||||
/**
|
||||
* Provider configurations needed for model resolution.
|
||||
* OpenClaw resolves models by checking cfg.models.providers[provider].
|
||||
* Without this, any model for the provider returns "Unknown model".
|
||||
*/
|
||||
const PROVIDER_CONFIGS: Record<string, { baseUrl: string; api: string; apiKeyEnv: string }> = {
|
||||
openrouter: {
|
||||
baseUrl: 'https://openrouter.ai/api/v1',
|
||||
api: 'openai-completions',
|
||||
apiKeyEnv: 'OPENROUTER_API_KEY',
|
||||
},
|
||||
openai: {
|
||||
baseUrl: 'https://api.openai.com/v1',
|
||||
api: 'openai-responses',
|
||||
apiKeyEnv: 'OPENAI_API_KEY',
|
||||
},
|
||||
google: {
|
||||
baseUrl: 'https://generativelanguage.googleapis.com/v1beta',
|
||||
api: 'google',
|
||||
apiKeyEnv: 'GEMINI_API_KEY',
|
||||
},
|
||||
// anthropic is built-in to OpenClaw's model registry, no provider config needed
|
||||
};
|
||||
|
||||
/**
|
||||
* Update the OpenClaw config to use the given provider and model
|
||||
* Writes to ~/.openclaw/openclaw.json
|
||||
*
|
||||
* @param provider - Provider type (e.g. 'anthropic', 'siliconflow')
|
||||
* @param modelOverride - Optional model string to use instead of the registry default.
|
||||
* For siliconflow this is the user-supplied model ID prefixed with "siliconflow/".
|
||||
*/
|
||||
export function setOpenClawDefaultModel(provider: string): void {
|
||||
export function setOpenClawDefaultModel(provider: string, modelOverride?: string): void {
|
||||
const configPath = join(homedir(), '.openclaw', 'openclaw.json');
|
||||
|
||||
let config: Record<string, unknown> = {};
|
||||
@@ -214,12 +193,16 @@ export function setOpenClawDefaultModel(provider: string): void {
|
||||
console.warn('Failed to read openclaw.json, creating fresh config:', err);
|
||||
}
|
||||
|
||||
const model = PROVIDER_DEFAULT_MODELS[provider];
|
||||
const model = modelOverride || getProviderDefaultModel(provider);
|
||||
if (!model) {
|
||||
console.warn(`No default model mapping for provider "${provider}"`);
|
||||
return;
|
||||
}
|
||||
|
||||
const modelId = model.startsWith(`${provider}/`)
|
||||
? model.slice(provider.length + 1)
|
||||
: model;
|
||||
|
||||
// Set the default model for the agents
|
||||
// model must be an object: { primary: "provider/model", fallbacks?: [] }
|
||||
const agents = (config.agents || {}) as Record<string, unknown>;
|
||||
@@ -228,24 +211,44 @@ export function setOpenClawDefaultModel(provider: string): void {
|
||||
agents.defaults = defaults;
|
||||
config.agents = agents;
|
||||
|
||||
// Configure models.providers for providers that need explicit registration
|
||||
// Without this, OpenClaw returns "Unknown model" because it can't resolve
|
||||
// the provider's baseUrl and API type
|
||||
const providerCfg = PROVIDER_CONFIGS[provider];
|
||||
// Configure models.providers for providers that need explicit registration.
|
||||
// For built-in providers this comes from registry; for custom/ollama-like
|
||||
// providers callers can supply runtime overrides.
|
||||
const providerCfg = getProviderConfig(provider);
|
||||
if (providerCfg) {
|
||||
const models = (config.models || {}) as Record<string, unknown>;
|
||||
const providers = (models.providers || {}) as Record<string, unknown>;
|
||||
|
||||
// Only set if not already configured
|
||||
if (!providers[provider]) {
|
||||
providers[provider] = {
|
||||
baseUrl: providerCfg.baseUrl,
|
||||
api: providerCfg.api,
|
||||
apiKey: providerCfg.apiKeyEnv,
|
||||
models: [],
|
||||
};
|
||||
console.log(`Configured models.providers.${provider} with baseUrl=${providerCfg.baseUrl}`);
|
||||
const existingProvider =
|
||||
providers[provider] && typeof providers[provider] === 'object'
|
||||
? (providers[provider] as Record<string, unknown>)
|
||||
: {};
|
||||
|
||||
const existingModels = Array.isArray(existingProvider.models)
|
||||
? (existingProvider.models as Array<Record<string, unknown>>)
|
||||
: [];
|
||||
const registryModels = (providerCfg.models ?? []).map((m) => ({ ...m })) as Array<Record<string, unknown>>;
|
||||
|
||||
// Merge model entries by id and ensure the selected/default model id exists.
|
||||
const mergedModels = [...registryModels];
|
||||
for (const item of existingModels) {
|
||||
const id = typeof item?.id === 'string' ? item.id : '';
|
||||
if (id && !mergedModels.some((m) => m.id === id)) {
|
||||
mergedModels.push(item);
|
||||
}
|
||||
}
|
||||
if (modelId && !mergedModels.some((m) => m.id === modelId)) {
|
||||
mergedModels.push({ id: modelId, name: modelId });
|
||||
}
|
||||
|
||||
providers[provider] = {
|
||||
...existingProvider,
|
||||
baseUrl: providerCfg.baseUrl,
|
||||
api: providerCfg.api,
|
||||
apiKey: providerCfg.apiKeyEnv,
|
||||
models: mergedModels,
|
||||
};
|
||||
console.log(`Configured models.providers.${provider} with baseUrl=${providerCfg.baseUrl}, model=${modelId}`);
|
||||
|
||||
models.providers = providers;
|
||||
config.models = models;
|
||||
@@ -267,3 +270,98 @@ export function setOpenClawDefaultModel(provider: string): void {
|
||||
writeFileSync(configPath, JSON.stringify(config, null, 2), 'utf-8');
|
||||
console.log(`Set OpenClaw default model to "${model}" for provider "${provider}"`);
|
||||
}
|
||||
|
||||
interface RuntimeProviderConfigOverride {
|
||||
baseUrl?: string;
|
||||
api?: string;
|
||||
apiKeyEnv?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* Update OpenClaw model + provider config using runtime config values.
|
||||
* Useful for user-configurable providers (custom/ollama-like) where
|
||||
* baseUrl/model are not in the static registry.
|
||||
*/
|
||||
export function setOpenClawDefaultModelWithOverride(
|
||||
provider: string,
|
||||
modelOverride: string | undefined,
|
||||
override: RuntimeProviderConfigOverride
|
||||
): void {
|
||||
const configPath = join(homedir(), '.openclaw', 'openclaw.json');
|
||||
|
||||
let config: Record<string, unknown> = {};
|
||||
try {
|
||||
if (existsSync(configPath)) {
|
||||
config = JSON.parse(readFileSync(configPath, 'utf-8'));
|
||||
}
|
||||
} catch (err) {
|
||||
console.warn('Failed to read openclaw.json, creating fresh config:', err);
|
||||
}
|
||||
|
||||
const model = modelOverride || getProviderDefaultModel(provider);
|
||||
if (!model) {
|
||||
console.warn(`No default model mapping for provider "${provider}"`);
|
||||
return;
|
||||
}
|
||||
|
||||
const modelId = model.startsWith(`${provider}/`)
|
||||
? model.slice(provider.length + 1)
|
||||
: model;
|
||||
|
||||
const agents = (config.agents || {}) as Record<string, unknown>;
|
||||
const defaults = (agents.defaults || {}) as Record<string, unknown>;
|
||||
defaults.model = { primary: model };
|
||||
agents.defaults = defaults;
|
||||
config.agents = agents;
|
||||
|
||||
if (override.baseUrl && override.api) {
|
||||
const models = (config.models || {}) as Record<string, unknown>;
|
||||
const providers = (models.providers || {}) as Record<string, unknown>;
|
||||
|
||||
const existingProvider =
|
||||
providers[provider] && typeof providers[provider] === 'object'
|
||||
? (providers[provider] as Record<string, unknown>)
|
||||
: {};
|
||||
|
||||
const existingModels = Array.isArray(existingProvider.models)
|
||||
? (existingProvider.models as Array<Record<string, unknown>>)
|
||||
: [];
|
||||
const mergedModels = [...existingModels];
|
||||
if (modelId && !mergedModels.some((m) => m.id === modelId)) {
|
||||
mergedModels.push({ id: modelId, name: modelId });
|
||||
}
|
||||
|
||||
const nextProvider: Record<string, unknown> = {
|
||||
...existingProvider,
|
||||
baseUrl: override.baseUrl,
|
||||
api: override.api,
|
||||
models: mergedModels,
|
||||
};
|
||||
if (override.apiKeyEnv) {
|
||||
nextProvider.apiKey = override.apiKeyEnv;
|
||||
}
|
||||
|
||||
providers[provider] = nextProvider;
|
||||
models.providers = providers;
|
||||
config.models = models;
|
||||
}
|
||||
|
||||
const gateway = (config.gateway || {}) as Record<string, unknown>;
|
||||
if (!gateway.mode) {
|
||||
gateway.mode = 'local';
|
||||
}
|
||||
config.gateway = gateway;
|
||||
|
||||
const dir = join(configPath, '..');
|
||||
if (!existsSync(dir)) {
|
||||
mkdirSync(dir, { recursive: true });
|
||||
}
|
||||
|
||||
writeFileSync(configPath, JSON.stringify(config, null, 2), 'utf-8');
|
||||
console.log(
|
||||
`Set OpenClaw default model to "${model}" for provider "${provider}" (runtime override)`
|
||||
);
|
||||
}
|
||||
|
||||
// Re-export for backwards compatibility
|
||||
export { getProviderEnvVar } from './provider-registry';
|
||||
|
||||
133
electron/utils/provider-registry.ts
Normal file
133
electron/utils/provider-registry.ts
Normal file
@@ -0,0 +1,133 @@
|
||||
/**
|
||||
* Provider Registry — single source of truth for backend provider metadata.
|
||||
* Centralizes env var mappings, default models, and OpenClaw provider configs.
|
||||
*
|
||||
* NOTE: When adding a new provider type, also update src/lib/providers.ts
|
||||
*/
|
||||
|
||||
export const BUILTIN_PROVIDER_TYPES = [
|
||||
'anthropic',
|
||||
'openai',
|
||||
'google',
|
||||
'openrouter',
|
||||
'moonshot',
|
||||
'siliconflow',
|
||||
'ollama',
|
||||
] as const;
|
||||
export type BuiltinProviderType = (typeof BUILTIN_PROVIDER_TYPES)[number];
|
||||
export type ProviderType = BuiltinProviderType | 'custom';
|
||||
|
||||
interface ProviderModelEntry extends Record<string, unknown> {
|
||||
id: string;
|
||||
name: string;
|
||||
}
|
||||
|
||||
|
||||
interface ProviderBackendMeta {
|
||||
envVar?: string;
|
||||
defaultModel?: string;
|
||||
/** OpenClaw models.providers config (omit for built-in providers like anthropic) */
|
||||
providerConfig?: {
|
||||
baseUrl: string;
|
||||
api: string;
|
||||
apiKeyEnv: string;
|
||||
models?: ProviderModelEntry[];
|
||||
};
|
||||
}
|
||||
|
||||
const REGISTRY: Record<string, ProviderBackendMeta> = {
|
||||
anthropic: {
|
||||
envVar: 'ANTHROPIC_API_KEY',
|
||||
defaultModel: 'anthropic/claude-opus-4-6',
|
||||
// anthropic is built-in to OpenClaw's model registry, no provider config needed
|
||||
},
|
||||
openai: {
|
||||
envVar: 'OPENAI_API_KEY',
|
||||
defaultModel: 'openai/gpt-5.2',
|
||||
providerConfig: {
|
||||
baseUrl: 'https://api.openai.com/v1',
|
||||
api: 'openai-responses',
|
||||
apiKeyEnv: 'OPENAI_API_KEY',
|
||||
},
|
||||
},
|
||||
google: {
|
||||
envVar: 'GEMINI_API_KEY',
|
||||
defaultModel: 'google/gemini-3-pro-preview',
|
||||
providerConfig: {
|
||||
baseUrl: 'https://generativelanguage.googleapis.com/v1beta',
|
||||
api: 'google',
|
||||
apiKeyEnv: 'GEMINI_API_KEY',
|
||||
},
|
||||
},
|
||||
openrouter: {
|
||||
envVar: 'OPENROUTER_API_KEY',
|
||||
defaultModel: 'openrouter/anthropic/claude-opus-4.6',
|
||||
providerConfig: {
|
||||
baseUrl: 'https://openrouter.ai/api/v1',
|
||||
api: 'openai-completions',
|
||||
apiKeyEnv: 'OPENROUTER_API_KEY',
|
||||
},
|
||||
},
|
||||
moonshot: {
|
||||
envVar: 'MOONSHOT_API_KEY',
|
||||
defaultModel: 'moonshot/kimi-k2.5',
|
||||
providerConfig: {
|
||||
baseUrl: 'https://api.moonshot.cn/v1',
|
||||
api: 'openai-completions',
|
||||
apiKeyEnv: 'MOONSHOT_API_KEY',
|
||||
models: [
|
||||
{
|
||||
id: 'kimi-k2.5',
|
||||
name: 'Kimi K2.5',
|
||||
reasoning: false,
|
||||
input: ['text'],
|
||||
cost: { input: 0, output: 0, cacheRead: 0, cacheWrite: 0 },
|
||||
contextWindow: 256000,
|
||||
maxTokens: 8192,
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
siliconflow: {
|
||||
envVar: 'SILICONFLOW_API_KEY',
|
||||
defaultModel: 'siliconflow/deepseek-ai/DeepSeek-V3',
|
||||
providerConfig: {
|
||||
baseUrl: 'https://api.siliconflow.com/v1',
|
||||
api: 'openai-completions',
|
||||
apiKeyEnv: 'SILICONFLOW_API_KEY',
|
||||
},
|
||||
},
|
||||
// Additional providers with env var mappings but no default model
|
||||
groq: { envVar: 'GROQ_API_KEY' },
|
||||
deepgram: { envVar: 'DEEPGRAM_API_KEY' },
|
||||
cerebras: { envVar: 'CEREBRAS_API_KEY' },
|
||||
xai: { envVar: 'XAI_API_KEY' },
|
||||
mistral: { envVar: 'MISTRAL_API_KEY' },
|
||||
};
|
||||
|
||||
/** Get the environment variable name for a provider type */
|
||||
export function getProviderEnvVar(type: string): string | undefined {
|
||||
return REGISTRY[type]?.envVar;
|
||||
}
|
||||
|
||||
/** Get the default model string for a provider type */
|
||||
export function getProviderDefaultModel(type: string): string | undefined {
|
||||
return REGISTRY[type]?.defaultModel;
|
||||
}
|
||||
|
||||
/** Get the OpenClaw provider config (baseUrl, api, apiKeyEnv, models) */
|
||||
export function getProviderConfig(
|
||||
type: string
|
||||
): { baseUrl: string; api: string; apiKeyEnv: string; models?: ProviderModelEntry[] } | undefined {
|
||||
return REGISTRY[type]?.providerConfig;
|
||||
}
|
||||
|
||||
/**
|
||||
* All provider types that have env var mappings.
|
||||
* Used by GatewayManager to inject API keys as env vars.
|
||||
*/
|
||||
export function getKeyableProviderTypes(): string[] {
|
||||
return Object.entries(REGISTRY)
|
||||
.filter(([, meta]) => meta.envVar)
|
||||
.map(([type]) => type);
|
||||
}
|
||||
@@ -1,35 +1,22 @@
|
||||
/**
|
||||
* Secure Storage Utility
|
||||
* Uses Electron's safeStorage for encrypting sensitive data like API keys
|
||||
* Provider Storage
|
||||
* Manages provider configurations and API keys.
|
||||
* Keys are stored in plain text alongside provider configs in a single electron-store.
|
||||
*/
|
||||
import { safeStorage } from 'electron';
|
||||
|
||||
// Lazy-load electron-store (ESM module)
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
let store: any = null;
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
let providerStore: any = null;
|
||||
|
||||
async function getStore() {
|
||||
if (!store) {
|
||||
const Store = (await import('electron-store')).default;
|
||||
store = new Store({
|
||||
name: 'clawx-secure',
|
||||
defaults: {
|
||||
encryptedKeys: {},
|
||||
},
|
||||
});
|
||||
}
|
||||
return store;
|
||||
}
|
||||
|
||||
async function getProviderStore() {
|
||||
if (!providerStore) {
|
||||
const Store = (await import('electron-store')).default;
|
||||
providerStore = new Store({
|
||||
name: 'clawx-providers',
|
||||
defaults: {
|
||||
providers: {},
|
||||
providers: {} as Record<string, ProviderConfig>,
|
||||
apiKeys: {} as Record<string, string>,
|
||||
defaultProvider: null as string | null,
|
||||
},
|
||||
});
|
||||
}
|
||||
@@ -42,7 +29,7 @@ async function getProviderStore() {
|
||||
export interface ProviderConfig {
|
||||
id: string;
|
||||
name: string;
|
||||
type: 'anthropic' | 'openai' | 'google' | 'openrouter' | 'ollama' | 'custom';
|
||||
type: 'anthropic' | 'openai' | 'google' | 'openrouter' | 'moonshot' | 'siliconflow' | 'ollama' | 'custom';
|
||||
baseUrl?: string;
|
||||
model?: string;
|
||||
enabled: boolean;
|
||||
@@ -50,35 +37,17 @@ export interface ProviderConfig {
|
||||
updatedAt: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if encryption is available
|
||||
*/
|
||||
export function isEncryptionAvailable(): boolean {
|
||||
return safeStorage.isEncryptionAvailable();
|
||||
}
|
||||
// ==================== API Key Storage ====================
|
||||
|
||||
/**
|
||||
* Store an API key securely
|
||||
* Store an API key
|
||||
*/
|
||||
export async function storeApiKey(providerId: string, apiKey: string): Promise<boolean> {
|
||||
try {
|
||||
const s = await getStore();
|
||||
|
||||
if (!safeStorage.isEncryptionAvailable()) {
|
||||
console.warn('Encryption not available, storing key in plain text');
|
||||
// Fallback to plain storage (not recommended for production)
|
||||
const keys = s.get('encryptedKeys') as Record<string, string>;
|
||||
keys[providerId] = Buffer.from(apiKey).toString('base64');
|
||||
s.set('encryptedKeys', keys);
|
||||
return true;
|
||||
}
|
||||
|
||||
// Encrypt the API key
|
||||
const encrypted = safeStorage.encryptString(apiKey);
|
||||
const keys = s.get('encryptedKeys') as Record<string, string>;
|
||||
keys[providerId] = encrypted.toString('base64');
|
||||
s.set('encryptedKeys', keys);
|
||||
|
||||
const s = await getProviderStore();
|
||||
const keys = (s.get('apiKeys') || {}) as Record<string, string>;
|
||||
keys[providerId] = apiKey;
|
||||
s.set('apiKeys', keys);
|
||||
return true;
|
||||
} catch (error) {
|
||||
console.error('Failed to store API key:', error);
|
||||
@@ -91,22 +60,9 @@ export async function storeApiKey(providerId: string, apiKey: string): Promise<b
|
||||
*/
|
||||
export async function getApiKey(providerId: string): Promise<string | null> {
|
||||
try {
|
||||
const s = await getStore();
|
||||
const keys = s.get('encryptedKeys') as Record<string, string>;
|
||||
const encryptedBase64 = keys[providerId];
|
||||
|
||||
if (!encryptedBase64) {
|
||||
return null;
|
||||
}
|
||||
|
||||
if (!safeStorage.isEncryptionAvailable()) {
|
||||
// Fallback for plain storage
|
||||
return Buffer.from(encryptedBase64, 'base64').toString('utf-8');
|
||||
}
|
||||
|
||||
// Decrypt the API key
|
||||
const encrypted = Buffer.from(encryptedBase64, 'base64');
|
||||
return safeStorage.decryptString(encrypted);
|
||||
const s = await getProviderStore();
|
||||
const keys = (s.get('apiKeys') || {}) as Record<string, string>;
|
||||
return keys[providerId] || null;
|
||||
} catch (error) {
|
||||
console.error('Failed to retrieve API key:', error);
|
||||
return null;
|
||||
@@ -118,10 +74,10 @@ export async function getApiKey(providerId: string): Promise<string | null> {
|
||||
*/
|
||||
export async function deleteApiKey(providerId: string): Promise<boolean> {
|
||||
try {
|
||||
const s = await getStore();
|
||||
const keys = s.get('encryptedKeys') as Record<string, string>;
|
||||
const s = await getProviderStore();
|
||||
const keys = (s.get('apiKeys') || {}) as Record<string, string>;
|
||||
delete keys[providerId];
|
||||
s.set('encryptedKeys', keys);
|
||||
s.set('apiKeys', keys);
|
||||
return true;
|
||||
} catch (error) {
|
||||
console.error('Failed to delete API key:', error);
|
||||
@@ -133,8 +89,8 @@ export async function deleteApiKey(providerId: string): Promise<boolean> {
|
||||
* Check if an API key exists for a provider
|
||||
*/
|
||||
export async function hasApiKey(providerId: string): Promise<boolean> {
|
||||
const s = await getStore();
|
||||
const keys = s.get('encryptedKeys') as Record<string, string>;
|
||||
const s = await getProviderStore();
|
||||
const keys = (s.get('apiKeys') || {}) as Record<string, string>;
|
||||
return providerId in keys;
|
||||
}
|
||||
|
||||
@@ -142,8 +98,8 @@ export async function hasApiKey(providerId: string): Promise<boolean> {
|
||||
* List all provider IDs that have stored keys
|
||||
*/
|
||||
export async function listStoredKeyIds(): Promise<string[]> {
|
||||
const s = await getStore();
|
||||
const keys = s.get('encryptedKeys') as Record<string, string>;
|
||||
const s = await getProviderStore();
|
||||
const keys = (s.get('apiKeys') || {}) as Record<string, string>;
|
||||
return Object.keys(keys);
|
||||
}
|
||||
|
||||
@@ -178,11 +134,11 @@ export async function getAllProviders(): Promise<ProviderConfig[]> {
|
||||
}
|
||||
|
||||
/**
|
||||
* Delete a provider configuration
|
||||
* Delete a provider configuration and its API key
|
||||
*/
|
||||
export async function deleteProvider(providerId: string): Promise<boolean> {
|
||||
try {
|
||||
// Delete the API key first
|
||||
// Delete the API key
|
||||
await deleteApiKey(providerId);
|
||||
|
||||
// Delete the provider config
|
||||
@@ -222,7 +178,9 @@ export async function getDefaultProvider(): Promise<string | undefined> {
|
||||
/**
|
||||
* Get provider with masked key info (for UI display)
|
||||
*/
|
||||
export async function getProviderWithKeyInfo(providerId: string): Promise<(ProviderConfig & { hasKey: boolean; keyMasked: string | null }) | null> {
|
||||
export async function getProviderWithKeyInfo(
|
||||
providerId: string
|
||||
): Promise<(ProviderConfig & { hasKey: boolean; keyMasked: string | null }) | null> {
|
||||
const provider = await getProvider(providerId);
|
||||
if (!provider) return null;
|
||||
|
||||
@@ -230,7 +188,6 @@ export async function getProviderWithKeyInfo(providerId: string): Promise<(Provi
|
||||
let keyMasked: string | null = null;
|
||||
|
||||
if (apiKey) {
|
||||
// Show first 4 and last 4 characters
|
||||
if (apiKey.length > 12) {
|
||||
keyMasked = `${apiKey.substring(0, 4)}${'*'.repeat(apiKey.length - 8)}${apiKey.substring(apiKey.length - 4)}`;
|
||||
} else {
|
||||
@@ -248,7 +205,9 @@ export async function getProviderWithKeyInfo(providerId: string): Promise<(Provi
|
||||
/**
|
||||
* Get all providers with key info (for UI display)
|
||||
*/
|
||||
export async function getAllProvidersWithKeyInfo(): Promise<Array<ProviderConfig & { hasKey: boolean; keyMasked: string | null }>> {
|
||||
export async function getAllProvidersWithKeyInfo(): Promise<
|
||||
Array<ProviderConfig & { hasKey: boolean; keyMasked: string | null }>
|
||||
> {
|
||||
const providers = await getAllProviders();
|
||||
const results: Array<ProviderConfig & { hasKey: boolean; keyMasked: string | null }> = [];
|
||||
|
||||
|
||||
@@ -22,20 +22,14 @@ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/com
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Separator } from '@/components/ui/separator';
|
||||
import { Switch } from '@/components/ui/switch';
|
||||
import { useProviderStore, type ProviderWithKeyInfo } from '@/stores/providers';
|
||||
import { useProviderStore, type ProviderConfig, type ProviderWithKeyInfo } from '@/stores/providers';
|
||||
import {
|
||||
PROVIDER_TYPE_INFO,
|
||||
type ProviderType,
|
||||
} from '@/lib/providers';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { toast } from 'sonner';
|
||||
|
||||
// Provider type definitions
|
||||
const providerTypes = [
|
||||
{ id: 'anthropic', name: 'Anthropic', icon: '🤖', placeholder: 'sk-ant-api03-...' },
|
||||
{ id: 'openai', name: 'OpenAI', icon: '💚', placeholder: 'sk-proj-...' },
|
||||
{ id: 'google', name: 'Google', icon: '🔷', placeholder: 'AIza...' },
|
||||
{ id: 'openrouter', name: 'OpenRouter', icon: '🌐', placeholder: 'sk-or-v1-...' },
|
||||
{ id: 'ollama', name: 'Ollama', icon: '🦙', placeholder: 'Not required' },
|
||||
{ id: 'custom', name: 'Custom', icon: '⚙️', placeholder: 'API key...' },
|
||||
];
|
||||
|
||||
export function ProvidersSettings() {
|
||||
const {
|
||||
providers,
|
||||
@@ -45,7 +39,7 @@ export function ProvidersSettings() {
|
||||
addProvider,
|
||||
updateProvider,
|
||||
deleteProvider,
|
||||
setApiKey,
|
||||
updateProviderWithKey,
|
||||
setDefaultProvider,
|
||||
validateApiKey,
|
||||
} = useProviderStore();
|
||||
@@ -58,14 +52,32 @@ export function ProvidersSettings() {
|
||||
fetchProviders();
|
||||
}, [fetchProviders]);
|
||||
|
||||
const handleAddProvider = async (type: string, name: string, apiKey: string) => {
|
||||
const handleAddProvider = async (
|
||||
type: ProviderType,
|
||||
name: string,
|
||||
apiKey: string,
|
||||
options?: { baseUrl?: string; model?: string }
|
||||
) => {
|
||||
// Only custom supports multiple instances.
|
||||
// Built-in providers remain singleton by type.
|
||||
const id = type === 'custom' ? `custom-${crypto.randomUUID()}` : type;
|
||||
try {
|
||||
await addProvider({
|
||||
id: `${type}-${Date.now()}`,
|
||||
type: type as 'anthropic' | 'openai' | 'google' | 'ollama' | 'custom',
|
||||
name,
|
||||
enabled: true,
|
||||
}, apiKey || undefined);
|
||||
await addProvider(
|
||||
{
|
||||
id,
|
||||
type,
|
||||
name,
|
||||
baseUrl: options?.baseUrl,
|
||||
model: options?.model,
|
||||
enabled: true,
|
||||
},
|
||||
apiKey.trim() || undefined
|
||||
);
|
||||
|
||||
// Auto-set as default if this is the first provider
|
||||
if (providers.length === 0) {
|
||||
await setDefaultProvider(id);
|
||||
}
|
||||
|
||||
setShowAddDialog(false);
|
||||
toast.success('Provider added successfully');
|
||||
@@ -140,8 +152,12 @@ export function ProvidersSettings() {
|
||||
onDelete={() => handleDeleteProvider(provider.id)}
|
||||
onSetDefault={() => handleSetDefault(provider.id)}
|
||||
onToggleEnabled={() => handleToggleEnabled(provider)}
|
||||
onUpdateKey={async (key) => {
|
||||
await setApiKey(provider.id, key);
|
||||
onSaveEdits={async (payload) => {
|
||||
await updateProviderWithKey(
|
||||
provider.id,
|
||||
payload.updates || {},
|
||||
payload.newApiKey
|
||||
);
|
||||
setEditingProvider(null);
|
||||
}}
|
||||
onValidateKey={(key) => validateApiKey(provider.id, key)}
|
||||
@@ -153,8 +169,10 @@ export function ProvidersSettings() {
|
||||
{/* Add Provider Dialog */}
|
||||
{showAddDialog && (
|
||||
<AddProviderDialog
|
||||
existingTypes={new Set(providers.map((p) => p.type))}
|
||||
onClose={() => setShowAddDialog(false)}
|
||||
onAdd={handleAddProvider}
|
||||
onValidateKey={(type, key) => validateApiKey(type, key)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
@@ -170,7 +188,7 @@ interface ProviderCardProps {
|
||||
onDelete: () => void;
|
||||
onSetDefault: () => void;
|
||||
onToggleEnabled: () => void;
|
||||
onUpdateKey: (key: string) => Promise<void>;
|
||||
onSaveEdits: (payload: { newApiKey?: string; updates?: Partial<ProviderConfig> }) => Promise<void>;
|
||||
onValidateKey: (key: string) => Promise<{ valid: boolean; error?: string }>;
|
||||
}
|
||||
|
||||
@@ -198,37 +216,78 @@ function ProviderCard({
|
||||
onDelete,
|
||||
onSetDefault,
|
||||
onToggleEnabled,
|
||||
onUpdateKey,
|
||||
onSaveEdits,
|
||||
onValidateKey,
|
||||
}: ProviderCardProps) {
|
||||
const [newKey, setNewKey] = useState('');
|
||||
const [baseUrl, setBaseUrl] = useState(provider.baseUrl || '');
|
||||
const [modelId, setModelId] = useState(provider.model || '');
|
||||
const [showKey, setShowKey] = useState(false);
|
||||
const [validating, setValidating] = useState(false);
|
||||
const [saving, setSaving] = useState(false);
|
||||
|
||||
const typeInfo = providerTypes.find((t) => t.id === provider.type);
|
||||
const typeInfo = PROVIDER_TYPE_INFO.find((t) => t.id === provider.type);
|
||||
const canEditConfig = Boolean(typeInfo?.showBaseUrl || typeInfo?.showModelId);
|
||||
|
||||
const handleSaveKey = async () => {
|
||||
if (!newKey) return;
|
||||
|
||||
setValidating(true);
|
||||
const result = await onValidateKey(newKey);
|
||||
setValidating(false);
|
||||
|
||||
if (!result.valid) {
|
||||
toast.error(result.error || 'Invalid API key');
|
||||
return;
|
||||
useEffect(() => {
|
||||
if (isEditing) {
|
||||
setNewKey('');
|
||||
setShowKey(false);
|
||||
setBaseUrl(provider.baseUrl || '');
|
||||
setModelId(provider.model || '');
|
||||
}
|
||||
}, [isEditing, provider.baseUrl, provider.model]);
|
||||
|
||||
const handleSaveEdits = async () => {
|
||||
setSaving(true);
|
||||
try {
|
||||
await onUpdateKey(newKey);
|
||||
const payload: { newApiKey?: string; updates?: Partial<ProviderConfig> } = {};
|
||||
|
||||
if (newKey.trim()) {
|
||||
setValidating(true);
|
||||
const result = await onValidateKey(newKey);
|
||||
setValidating(false);
|
||||
if (!result.valid) {
|
||||
toast.error(result.error || 'Invalid API key');
|
||||
setSaving(false);
|
||||
return;
|
||||
}
|
||||
payload.newApiKey = newKey.trim();
|
||||
}
|
||||
|
||||
if (canEditConfig) {
|
||||
if (typeInfo?.showModelId && !modelId.trim()) {
|
||||
toast.error('Model ID is required');
|
||||
setSaving(false);
|
||||
return;
|
||||
}
|
||||
|
||||
const updates: Partial<ProviderConfig> = {};
|
||||
if ((baseUrl.trim() || undefined) !== (provider.baseUrl || undefined)) {
|
||||
updates.baseUrl = baseUrl.trim() || undefined;
|
||||
}
|
||||
if ((modelId.trim() || undefined) !== (provider.model || undefined)) {
|
||||
updates.model = modelId.trim() || undefined;
|
||||
}
|
||||
if (Object.keys(updates).length > 0) {
|
||||
payload.updates = updates;
|
||||
}
|
||||
}
|
||||
|
||||
if (!payload.newApiKey && !payload.updates) {
|
||||
onCancelEdit();
|
||||
setSaving(false);
|
||||
return;
|
||||
}
|
||||
|
||||
await onSaveEdits(payload);
|
||||
setNewKey('');
|
||||
toast.success('API key updated');
|
||||
toast.success('Provider updated');
|
||||
} catch (error) {
|
||||
toast.error(`Failed to save key: ${error}`);
|
||||
toast.error(`Failed to save provider: ${error}`);
|
||||
} finally {
|
||||
setSaving(false);
|
||||
setValidating(false);
|
||||
}
|
||||
};
|
||||
|
||||
@@ -258,11 +317,37 @@ function ProviderCard({
|
||||
{/* Key row */}
|
||||
{isEditing ? (
|
||||
<div className="space-y-2">
|
||||
{canEditConfig && (
|
||||
<>
|
||||
{typeInfo?.showBaseUrl && (
|
||||
<div className="space-y-1">
|
||||
<Label className="text-xs">Base URL</Label>
|
||||
<Input
|
||||
value={baseUrl}
|
||||
onChange={(e) => setBaseUrl(e.target.value)}
|
||||
placeholder="https://api.example.com/v1"
|
||||
className="h-9 text-sm"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{typeInfo?.showModelId && (
|
||||
<div className="space-y-1">
|
||||
<Label className="text-xs">Model ID</Label>
|
||||
<Input
|
||||
value={modelId}
|
||||
onChange={(e) => setModelId(e.target.value)}
|
||||
placeholder={typeInfo.modelIdPlaceholder || 'provider/model-id'}
|
||||
className="h-9 text-sm"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
<div className="flex gap-2">
|
||||
<div className="relative flex-1">
|
||||
<Input
|
||||
type={showKey ? 'text' : 'password'}
|
||||
placeholder={typeInfo?.placeholder}
|
||||
placeholder={typeInfo?.requiresApiKey ? typeInfo?.placeholder : 'Optional: update API key'}
|
||||
value={newKey}
|
||||
onChange={(e) => setNewKey(e.target.value)}
|
||||
className="pr-10 h-9 text-sm"
|
||||
@@ -278,8 +363,17 @@ function ProviderCard({
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={handleSaveKey}
|
||||
disabled={!newKey || validating || saving}
|
||||
onClick={handleSaveEdits}
|
||||
disabled={
|
||||
validating
|
||||
|| saving
|
||||
|| (
|
||||
!newKey.trim()
|
||||
&& (baseUrl.trim() || undefined) === (provider.baseUrl || undefined)
|
||||
&& (modelId.trim() || undefined) === (provider.model || undefined)
|
||||
)
|
||||
|| Boolean(typeInfo?.showModelId && !modelId.trim())
|
||||
}
|
||||
>
|
||||
{validating || saving ? (
|
||||
<Loader2 className="h-3.5 w-3.5 animate-spin" />
|
||||
@@ -324,25 +418,75 @@ function ProviderCard({
|
||||
}
|
||||
|
||||
interface AddProviderDialogProps {
|
||||
existingTypes: Set<string>;
|
||||
onClose: () => void;
|
||||
onAdd: (type: string, name: string, apiKey: string) => Promise<void>;
|
||||
onAdd: (
|
||||
type: ProviderType,
|
||||
name: string,
|
||||
apiKey: string,
|
||||
options?: { baseUrl?: string; model?: string }
|
||||
) => Promise<void>;
|
||||
onValidateKey: (type: string, apiKey: string) => Promise<{ valid: boolean; error?: string }>;
|
||||
}
|
||||
|
||||
function AddProviderDialog({ onClose, onAdd }: AddProviderDialogProps) {
|
||||
const [selectedType, setSelectedType] = useState<string | null>(null);
|
||||
function AddProviderDialog({ existingTypes, onClose, onAdd, onValidateKey }: AddProviderDialogProps) {
|
||||
const [selectedType, setSelectedType] = useState<ProviderType | null>(null);
|
||||
const [name, setName] = useState('');
|
||||
const [apiKey, setApiKey] = useState('');
|
||||
const [baseUrl, setBaseUrl] = useState('');
|
||||
const [modelId, setModelId] = useState('');
|
||||
const [showKey, setShowKey] = useState(false);
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [validationError, setValidationError] = useState<string | null>(null);
|
||||
|
||||
const typeInfo = providerTypes.find((t) => t.id === selectedType);
|
||||
const typeInfo = PROVIDER_TYPE_INFO.find((t) => t.id === selectedType);
|
||||
|
||||
// Only custom can be added multiple times.
|
||||
const availableTypes = PROVIDER_TYPE_INFO.filter(
|
||||
(t) => t.id === 'custom' || !existingTypes.has(t.id),
|
||||
);
|
||||
|
||||
const handleAdd = async () => {
|
||||
if (!selectedType) return;
|
||||
|
||||
setSaving(true);
|
||||
setValidationError(null);
|
||||
|
||||
try {
|
||||
await onAdd(selectedType, name || typeInfo?.name || selectedType, apiKey);
|
||||
// Validate key first if the provider requires one and a key was entered
|
||||
const requiresKey = typeInfo?.requiresApiKey ?? false;
|
||||
if (requiresKey && !apiKey.trim()) {
|
||||
setValidationError('API key is required');
|
||||
setSaving(false);
|
||||
return;
|
||||
}
|
||||
if (requiresKey && apiKey) {
|
||||
const result = await onValidateKey(selectedType, apiKey);
|
||||
if (!result.valid) {
|
||||
setValidationError(result.error || 'Invalid API key');
|
||||
setSaving(false);
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
const requiresModel = typeInfo?.showModelId ?? false;
|
||||
if (requiresModel && !modelId.trim()) {
|
||||
setValidationError('Model ID is required');
|
||||
setSaving(false);
|
||||
return;
|
||||
}
|
||||
|
||||
await onAdd(
|
||||
selectedType,
|
||||
name || typeInfo?.name || selectedType,
|
||||
apiKey.trim(),
|
||||
{
|
||||
baseUrl: baseUrl.trim() || undefined,
|
||||
model: (typeInfo?.defaultModelId || modelId.trim()) || undefined,
|
||||
}
|
||||
);
|
||||
} catch {
|
||||
// error already handled via toast in parent
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
@@ -360,12 +504,14 @@ function AddProviderDialog({ onClose, onAdd }: AddProviderDialogProps) {
|
||||
<CardContent className="space-y-4">
|
||||
{!selectedType ? (
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
{providerTypes.map((type) => (
|
||||
{availableTypes.map((type) => (
|
||||
<button
|
||||
key={type.id}
|
||||
onClick={() => {
|
||||
setSelectedType(type.id);
|
||||
setName(type.name);
|
||||
setBaseUrl(type.defaultBaseUrl || '');
|
||||
setModelId(type.defaultModelId || '');
|
||||
}}
|
||||
className="p-4 rounded-lg border hover:bg-accent transition-colors text-center"
|
||||
>
|
||||
@@ -381,7 +527,12 @@ function AddProviderDialog({ onClose, onAdd }: AddProviderDialogProps) {
|
||||
<div>
|
||||
<p className="font-medium">{typeInfo?.name}</p>
|
||||
<button
|
||||
onClick={() => setSelectedType(null)}
|
||||
onClick={() => {
|
||||
setSelectedType(null);
|
||||
setValidationError(null);
|
||||
setBaseUrl('');
|
||||
setModelId('');
|
||||
}}
|
||||
className="text-sm text-muted-foreground hover:text-foreground"
|
||||
>
|
||||
Change provider
|
||||
@@ -407,7 +558,10 @@ function AddProviderDialog({ onClose, onAdd }: AddProviderDialogProps) {
|
||||
type={showKey ? 'text' : 'password'}
|
||||
placeholder={typeInfo?.placeholder}
|
||||
value={apiKey}
|
||||
onChange={(e) => setApiKey(e.target.value)}
|
||||
onChange={(e) => {
|
||||
setApiKey(e.target.value);
|
||||
setValidationError(null);
|
||||
}}
|
||||
className="pr-10"
|
||||
/>
|
||||
<button
|
||||
@@ -418,10 +572,40 @@ function AddProviderDialog({ onClose, onAdd }: AddProviderDialogProps) {
|
||||
{showKey ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
|
||||
</button>
|
||||
</div>
|
||||
{validationError && (
|
||||
<p className="text-xs text-destructive">{validationError}</p>
|
||||
)}
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Your API key will be securely encrypted and stored locally.
|
||||
Your API key is stored locally on your machine.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{typeInfo?.showBaseUrl && (
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="baseUrl">Base URL</Label>
|
||||
<Input
|
||||
id="baseUrl"
|
||||
placeholder="https://api.example.com/v1"
|
||||
value={baseUrl}
|
||||
onChange={(e) => setBaseUrl(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{typeInfo?.showModelId && (
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="modelId">Model ID</Label>
|
||||
<Input
|
||||
id="modelId"
|
||||
placeholder={typeInfo.modelIdPlaceholder || 'provider/model-id'}
|
||||
value={modelId}
|
||||
onChange={(e) => {
|
||||
setModelId(e.target.value);
|
||||
setValidationError(null);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
@@ -433,7 +617,7 @@ function AddProviderDialog({ onClose, onAdd }: AddProviderDialogProps) {
|
||||
</Button>
|
||||
<Button
|
||||
onClick={handleAdd}
|
||||
disabled={!selectedType || saving}
|
||||
disabled={!selectedType || saving || ((typeInfo?.showModelId ?? false) && modelId.trim().length === 0)}
|
||||
>
|
||||
{saving ? (
|
||||
<Loader2 className="h-4 w-4 animate-spin mr-2" />
|
||||
|
||||
30
src/components/ui/select.tsx
Normal file
30
src/components/ui/select.tsx
Normal file
@@ -0,0 +1,30 @@
|
||||
/**
|
||||
* Select Component
|
||||
* Styled native select matching shadcn/ui conventions
|
||||
*/
|
||||
import * as React from 'react';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
export type SelectProps = React.SelectHTMLAttributes<HTMLSelectElement>;
|
||||
|
||||
const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
|
||||
({ className, children, ...props }, ref) => {
|
||||
return (
|
||||
<select
|
||||
className={cn(
|
||||
'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 appearance-none bg-[length:16px_16px] bg-[right_12px_center] bg-no-repeat',
|
||||
'bg-[url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23888%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m6%209%206%206%206-6%22/%3E%3C/svg%3E")]',
|
||||
'pr-10',
|
||||
className
|
||||
)}
|
||||
ref={ref}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
</select>
|
||||
);
|
||||
}
|
||||
);
|
||||
Select.displayName = 'Select';
|
||||
|
||||
export { Select };
|
||||
74
src/lib/providers.ts
Normal file
74
src/lib/providers.ts
Normal file
@@ -0,0 +1,74 @@
|
||||
/**
|
||||
* Provider Types & UI Metadata — single source of truth for the frontend.
|
||||
*
|
||||
* NOTE: When adding a new provider type, also update
|
||||
* electron/utils/provider-registry.ts (env vars, models, configs).
|
||||
*/
|
||||
|
||||
export const PROVIDER_TYPES = [
|
||||
'anthropic',
|
||||
'openai',
|
||||
'google',
|
||||
'openrouter',
|
||||
'moonshot',
|
||||
'siliconflow',
|
||||
'ollama',
|
||||
'custom',
|
||||
] as const;
|
||||
export type ProviderType = (typeof PROVIDER_TYPES)[number];
|
||||
|
||||
export interface ProviderConfig {
|
||||
id: string;
|
||||
name: string;
|
||||
type: ProviderType;
|
||||
baseUrl?: string;
|
||||
model?: string;
|
||||
enabled: boolean;
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
}
|
||||
|
||||
export interface ProviderWithKeyInfo extends ProviderConfig {
|
||||
hasKey: boolean;
|
||||
keyMasked: string | null;
|
||||
}
|
||||
|
||||
export interface ProviderTypeInfo {
|
||||
id: ProviderType;
|
||||
name: string;
|
||||
icon: string;
|
||||
placeholder: string;
|
||||
/** Model brand name for display (e.g. "Claude", "GPT") */
|
||||
model?: string;
|
||||
requiresApiKey: boolean;
|
||||
/** Pre-filled base URL (for proxy/compatible providers like SiliconFlow) */
|
||||
defaultBaseUrl?: string;
|
||||
/** Whether the user can edit the base URL in setup */
|
||||
showBaseUrl?: boolean;
|
||||
/** Whether to show a Model ID input field (for providers where user picks the model) */
|
||||
showModelId?: boolean;
|
||||
/** Default / example model ID placeholder */
|
||||
modelIdPlaceholder?: string;
|
||||
/** Default model ID to pre-fill */
|
||||
defaultModelId?: string;
|
||||
}
|
||||
|
||||
/** All supported provider types with UI metadata */
|
||||
export const PROVIDER_TYPE_INFO: ProviderTypeInfo[] = [
|
||||
{ id: 'anthropic', name: 'Anthropic', icon: '🤖', placeholder: 'sk-ant-api03-...', model: 'Claude', requiresApiKey: true },
|
||||
{ id: 'openai', name: 'OpenAI', icon: '💚', placeholder: 'sk-proj-...', model: 'GPT', requiresApiKey: true },
|
||||
{ id: 'google', name: 'Google', icon: '🔷', placeholder: 'AIza...', model: 'Gemini', requiresApiKey: true },
|
||||
{ id: 'openrouter', name: 'OpenRouter', icon: '🌐', placeholder: 'sk-or-v1-...', model: 'Multi-Model', requiresApiKey: true },
|
||||
{ id: 'moonshot', name: 'Moonshot', icon: '🌙', placeholder: 'sk-...', model: 'Kimi', requiresApiKey: true, defaultBaseUrl: 'https://api.moonshot.cn/v1', defaultModelId: 'kimi-k2.5' },
|
||||
{ id: 'siliconflow', name: 'SiliconFlow', icon: '🌊', placeholder: 'sk-...', model: 'Multi-Model', requiresApiKey: true, defaultBaseUrl: 'https://api.siliconflow.com/v1', defaultModelId: 'moonshotai/Kimi-K2.5' },
|
||||
{ id: 'ollama', name: 'Ollama', icon: '🦙', placeholder: 'Not required', requiresApiKey: false, defaultBaseUrl: 'http://localhost:11434', showBaseUrl: true, showModelId: true, modelIdPlaceholder: 'qwen3:latest' },
|
||||
{ id: 'custom', name: 'Custom', icon: '⚙️', placeholder: 'API key...', requiresApiKey: true, showBaseUrl: true, showModelId: true, modelIdPlaceholder: 'your-provider/model-id' },
|
||||
];
|
||||
|
||||
/** Provider list shown in the Setup wizard */
|
||||
export const SETUP_PROVIDERS = PROVIDER_TYPE_INFO;
|
||||
|
||||
/** Get type info by provider type id */
|
||||
export function getProviderTypeInfo(type: ProviderType): ProviderTypeInfo | undefined {
|
||||
return PROVIDER_TYPE_INFO.find((t) => t.id === type);
|
||||
}
|
||||
@@ -7,6 +7,7 @@ import { useNavigate } from 'react-router-dom';
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
import {
|
||||
Check,
|
||||
ChevronDown,
|
||||
ChevronLeft,
|
||||
ChevronRight,
|
||||
Loader2,
|
||||
@@ -97,52 +98,45 @@ const defaultSkills: DefaultSkill[] = [
|
||||
{ id: 'terminal', name: 'Terminal', description: 'Shell command execution' },
|
||||
];
|
||||
|
||||
// Provider types
|
||||
interface Provider {
|
||||
id: string;
|
||||
name: string;
|
||||
model: string;
|
||||
icon: string;
|
||||
placeholder: string;
|
||||
}
|
||||
import { SETUP_PROVIDERS, type ProviderTypeInfo } from '@/lib/providers';
|
||||
|
||||
const providers: Provider[] = [
|
||||
{ id: 'anthropic', name: 'Anthropic', model: 'Claude', icon: '🤖', placeholder: 'sk-ant-...' },
|
||||
{ id: 'openai', name: 'OpenAI', model: 'GPT-4', icon: '💚', placeholder: 'sk-...' },
|
||||
{ id: 'google', name: 'Google', model: 'Gemini', icon: '🔷', placeholder: 'AI...' },
|
||||
{ id: 'openrouter', name: 'OpenRouter', model: 'Multi-Model', icon: '🌐', placeholder: 'sk-or-...' },
|
||||
];
|
||||
// Use the shared provider registry for setup providers
|
||||
const providers = SETUP_PROVIDERS;
|
||||
|
||||
// NOTE: Channel types moved to Settings > Channels page
|
||||
// NOTE: Skill bundles moved to Settings > Skills page - auto-install essential skills during setup
|
||||
|
||||
export function Setup() {
|
||||
const navigate = useNavigate();
|
||||
const [currentStep, setCurrentStep] = useState(0);
|
||||
const [currentStep, setCurrentStep] = useState<number>(STEP.WELCOME);
|
||||
|
||||
// Setup state
|
||||
const [selectedProvider, setSelectedProvider] = useState<string | null>(null);
|
||||
const [providerConfigured, setProviderConfigured] = useState(false);
|
||||
const [apiKey, setApiKey] = useState('');
|
||||
// Installation state for the Installing step
|
||||
const [installedSkills, setInstalledSkills] = useState<string[]>([]);
|
||||
// Runtime check status
|
||||
const [runtimeChecksPassed, setRuntimeChecksPassed] = useState(false);
|
||||
|
||||
const step = steps[currentStep];
|
||||
const isFirstStep = currentStep === 0;
|
||||
const isLastStep = currentStep === steps.length - 1;
|
||||
const safeStepIndex = Number.isInteger(currentStep)
|
||||
? Math.min(Math.max(currentStep, STEP.WELCOME), steps.length - 1)
|
||||
: STEP.WELCOME;
|
||||
const step = steps[safeStepIndex] ?? steps[STEP.WELCOME];
|
||||
const isFirstStep = safeStepIndex === STEP.WELCOME;
|
||||
const isLastStep = safeStepIndex === steps.length - 1;
|
||||
|
||||
const markSetupComplete = useSettingsStore((state) => state.markSetupComplete);
|
||||
|
||||
// Derive canProceed based on current step - computed directly to avoid useEffect
|
||||
const canProceed = useMemo(() => {
|
||||
switch (currentStep) {
|
||||
switch (safeStepIndex) {
|
||||
case STEP.WELCOME:
|
||||
return true;
|
||||
case STEP.RUNTIME:
|
||||
return runtimeChecksPassed;
|
||||
case STEP.PROVIDER:
|
||||
return selectedProvider !== null && apiKey.length > 0;
|
||||
return providerConfigured;
|
||||
case STEP.CHANNEL:
|
||||
return true; // Always allow proceeding — channel step is optional
|
||||
case STEP.INSTALLING:
|
||||
@@ -152,7 +146,7 @@ export function Setup() {
|
||||
default:
|
||||
return true;
|
||||
}
|
||||
}, [currentStep, selectedProvider, apiKey, runtimeChecksPassed]);
|
||||
}, [safeStepIndex, providerConfigured, runtimeChecksPassed]);
|
||||
|
||||
const handleNext = async () => {
|
||||
if (isLastStep) {
|
||||
@@ -193,14 +187,14 @@ export function Setup() {
|
||||
<div
|
||||
className={cn(
|
||||
'flex h-8 w-8 items-center justify-center rounded-full border-2 transition-colors',
|
||||
i < currentStep
|
||||
i < safeStepIndex
|
||||
? 'border-primary bg-primary text-primary-foreground'
|
||||
: i === currentStep
|
||||
: i === safeStepIndex
|
||||
? 'border-primary text-primary'
|
||||
: 'border-slate-600 text-slate-600'
|
||||
)}
|
||||
>
|
||||
{i < currentStep ? (
|
||||
{i < safeStepIndex ? (
|
||||
<Check className="h-4 w-4" />
|
||||
) : (
|
||||
<span className="text-sm">{i + 1}</span>
|
||||
@@ -210,7 +204,7 @@ export function Setup() {
|
||||
<div
|
||||
className={cn(
|
||||
'h-0.5 w-8 transition-colors',
|
||||
i < currentStep ? 'bg-primary' : 'bg-slate-600'
|
||||
i < safeStepIndex ? 'bg-primary' : 'bg-slate-600'
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
@@ -235,26 +229,27 @@ export function Setup() {
|
||||
|
||||
{/* Step-specific content */}
|
||||
<div className="rounded-xl bg-white/10 backdrop-blur p-8 mb-8">
|
||||
{currentStep === STEP.WELCOME && <WelcomeContent />}
|
||||
{currentStep === STEP.RUNTIME && <RuntimeContent onStatusChange={setRuntimeChecksPassed} />}
|
||||
{currentStep === STEP.PROVIDER && (
|
||||
{safeStepIndex === STEP.WELCOME && <WelcomeContent />}
|
||||
{safeStepIndex === STEP.RUNTIME && <RuntimeContent onStatusChange={setRuntimeChecksPassed} />}
|
||||
{safeStepIndex === STEP.PROVIDER && (
|
||||
<ProviderContent
|
||||
providers={providers}
|
||||
selectedProvider={selectedProvider}
|
||||
onSelectProvider={setSelectedProvider}
|
||||
apiKey={apiKey}
|
||||
onApiKeyChange={setApiKey}
|
||||
onConfiguredChange={setProviderConfigured}
|
||||
/>
|
||||
)}
|
||||
{currentStep === STEP.CHANNEL && <SetupChannelContent />}
|
||||
{currentStep === STEP.INSTALLING && (
|
||||
{safeStepIndex === STEP.CHANNEL && <SetupChannelContent />}
|
||||
{safeStepIndex === STEP.INSTALLING && (
|
||||
<InstallingContent
|
||||
skills={defaultSkills}
|
||||
onComplete={handleInstallationComplete}
|
||||
onSkip={() => setCurrentStep((i) => i + 1)}
|
||||
/>
|
||||
)}
|
||||
{currentStep === STEP.COMPLETE && (
|
||||
{safeStepIndex === STEP.COMPLETE && (
|
||||
<CompleteContent
|
||||
selectedProvider={selectedProvider}
|
||||
installedSkills={installedSkills}
|
||||
@@ -263,7 +258,7 @@ export function Setup() {
|
||||
</div>
|
||||
|
||||
{/* Navigation - hidden during installation step */}
|
||||
{currentStep !== STEP.INSTALLING && (
|
||||
{safeStepIndex !== STEP.INSTALLING && (
|
||||
<div className="flex justify-between">
|
||||
<div>
|
||||
{!isFirstStep && (
|
||||
@@ -274,12 +269,12 @@ export function Setup() {
|
||||
)}
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
{currentStep === STEP.CHANNEL && (
|
||||
{safeStepIndex === STEP.CHANNEL && (
|
||||
<Button variant="ghost" onClick={handleNext}>
|
||||
Skip this step
|
||||
</Button>
|
||||
)}
|
||||
{!isLastStep && currentStep !== STEP.RUNTIME && currentStep !== STEP.CHANNEL && (
|
||||
{!isLastStep && safeStepIndex !== STEP.RUNTIME && safeStepIndex !== STEP.CHANNEL && (
|
||||
<Button variant="ghost" onClick={handleSkip}>
|
||||
Skip Setup
|
||||
</Button>
|
||||
@@ -641,11 +636,12 @@ function RuntimeContent({ onStatusChange }: RuntimeContentProps) {
|
||||
}
|
||||
|
||||
interface ProviderContentProps {
|
||||
providers: Provider[];
|
||||
providers: ProviderTypeInfo[];
|
||||
selectedProvider: string | null;
|
||||
onSelectProvider: (id: string | null) => void;
|
||||
apiKey: string;
|
||||
onApiKeyChange: (key: string) => void;
|
||||
onConfiguredChange: (configured: boolean) => void;
|
||||
}
|
||||
|
||||
function ProviderContent({
|
||||
@@ -653,24 +649,39 @@ function ProviderContent({
|
||||
selectedProvider,
|
||||
onSelectProvider,
|
||||
apiKey,
|
||||
onApiKeyChange
|
||||
onApiKeyChange,
|
||||
onConfiguredChange,
|
||||
}: ProviderContentProps) {
|
||||
const [showKey, setShowKey] = useState(false);
|
||||
const [validating, setValidating] = useState(false);
|
||||
const [keyValid, setKeyValid] = useState<boolean | null>(null);
|
||||
const [baseUrl, setBaseUrl] = useState('');
|
||||
const [modelId, setModelId] = useState('');
|
||||
|
||||
// On mount, try to restore previously configured provider
|
||||
useEffect(() => {
|
||||
let cancelled = false;
|
||||
(async () => {
|
||||
try {
|
||||
const list = await window.electron.ipcRenderer.invoke('provider:list') as Array<{ id: string; hasKey: boolean }>;
|
||||
const list = await window.electron.ipcRenderer.invoke('provider:list') as Array<{ id: string; type: string; hasKey: boolean }>;
|
||||
const defaultId = await window.electron.ipcRenderer.invoke('provider:getDefault') as string | null;
|
||||
const preferred = (defaultId && list.find((p) => p.id === defaultId && p.hasKey)) || list.find((p) => p.hasKey);
|
||||
const setupProviderTypes = new Set<string>(providers.map((p) => p.id));
|
||||
const setupCandidates = list.filter((p) => setupProviderTypes.has(p.type));
|
||||
const preferred =
|
||||
(defaultId && setupCandidates.find((p) => p.id === defaultId))
|
||||
|| setupCandidates.find((p) => p.hasKey)
|
||||
|| setupCandidates[0];
|
||||
if (preferred && !cancelled) {
|
||||
onSelectProvider(preferred.id);
|
||||
onSelectProvider(preferred.type);
|
||||
const typeInfo = providers.find((p) => p.id === preferred.type);
|
||||
const requiresKey = typeInfo?.requiresApiKey ?? false;
|
||||
onConfiguredChange(!requiresKey || preferred.hasKey);
|
||||
const storedKey = await window.electron.ipcRenderer.invoke('provider:getApiKey', preferred.id) as string | null;
|
||||
if (storedKey) {
|
||||
onApiKeyChange(storedKey);
|
||||
}
|
||||
} else if (!cancelled) {
|
||||
onConfiguredChange(false);
|
||||
}
|
||||
} catch (error) {
|
||||
if (!cancelled) {
|
||||
@@ -679,15 +690,36 @@ function ProviderContent({
|
||||
}
|
||||
})();
|
||||
return () => { cancelled = true; };
|
||||
}, [onApiKeyChange, onSelectProvider]);
|
||||
}, [onApiKeyChange, onConfiguredChange, onSelectProvider, providers]);
|
||||
|
||||
// When provider changes, load stored key + reset base URL
|
||||
useEffect(() => {
|
||||
let cancelled = false;
|
||||
(async () => {
|
||||
if (!selectedProvider) return;
|
||||
try {
|
||||
const storedKey = await window.electron.ipcRenderer.invoke('provider:getApiKey', selectedProvider) as string | null;
|
||||
if (!cancelled && storedKey) {
|
||||
onApiKeyChange(storedKey);
|
||||
const list = await window.electron.ipcRenderer.invoke('provider:list') as Array<{ id: string; type: string; hasKey: boolean }>;
|
||||
const defaultId = await window.electron.ipcRenderer.invoke('provider:getDefault') as string | null;
|
||||
const sameType = list.filter((p) => p.type === selectedProvider);
|
||||
const preferredInstance =
|
||||
(defaultId && sameType.find((p) => p.id === defaultId))
|
||||
|| sameType.find((p) => p.hasKey)
|
||||
|| sameType[0];
|
||||
const providerIdForLoad = preferredInstance?.id || selectedProvider;
|
||||
|
||||
const savedProvider = await window.electron.ipcRenderer.invoke(
|
||||
'provider:get',
|
||||
providerIdForLoad
|
||||
) as { baseUrl?: string; model?: string } | null;
|
||||
const storedKey = await window.electron.ipcRenderer.invoke('provider:getApiKey', providerIdForLoad) as string | null;
|
||||
if (!cancelled) {
|
||||
if (storedKey) {
|
||||
onApiKeyChange(storedKey);
|
||||
}
|
||||
|
||||
const info = providers.find((p) => p.id === selectedProvider);
|
||||
setBaseUrl(savedProvider?.baseUrl || info?.defaultBaseUrl || '');
|
||||
setModelId(savedProvider?.model || info?.defaultModelId || '');
|
||||
}
|
||||
} catch (error) {
|
||||
if (!cancelled) {
|
||||
@@ -696,95 +728,177 @@ function ProviderContent({
|
||||
}
|
||||
})();
|
||||
return () => { cancelled = true; };
|
||||
}, [onApiKeyChange, selectedProvider]);
|
||||
}, [onApiKeyChange, selectedProvider, providers]);
|
||||
|
||||
const selectedProviderData = providers.find((p) => p.id === selectedProvider);
|
||||
const showBaseUrlField = selectedProviderData?.showBaseUrl ?? false;
|
||||
const showModelIdField = selectedProviderData?.showModelId ?? false;
|
||||
const requiresKey = selectedProviderData?.requiresApiKey ?? false;
|
||||
|
||||
const handleValidateKey = async () => {
|
||||
if (!apiKey || !selectedProvider) return;
|
||||
const handleValidateAndSave = async () => {
|
||||
if (!selectedProvider) return;
|
||||
|
||||
setValidating(true);
|
||||
setKeyValid(null);
|
||||
|
||||
try {
|
||||
// Call real API validation
|
||||
const result = await window.electron.ipcRenderer.invoke(
|
||||
'provider:validateKey',
|
||||
selectedProvider,
|
||||
apiKey
|
||||
) as { valid: boolean; error?: string };
|
||||
// Validate key if the provider requires one and a key was entered
|
||||
if (requiresKey && apiKey) {
|
||||
const result = await window.electron.ipcRenderer.invoke(
|
||||
'provider:validateKey',
|
||||
selectedProvider,
|
||||
apiKey
|
||||
) as { valid: boolean; error?: string };
|
||||
|
||||
setKeyValid(result.valid);
|
||||
setKeyValid(result.valid);
|
||||
|
||||
if (result.valid) {
|
||||
// Save the API key to both ClawX secure storage and OpenClaw auth-profiles
|
||||
try {
|
||||
await window.electron.ipcRenderer.invoke(
|
||||
'provider:save',
|
||||
{
|
||||
id: selectedProvider,
|
||||
name: selectedProviderData?.name || selectedProvider,
|
||||
type: selectedProvider,
|
||||
enabled: true,
|
||||
createdAt: new Date().toISOString(),
|
||||
updatedAt: new Date().toISOString(),
|
||||
},
|
||||
apiKey
|
||||
);
|
||||
} catch (saveErr) {
|
||||
console.warn('Failed to persist API key:', saveErr);
|
||||
if (!result.valid) {
|
||||
toast.error(result.error || 'Invalid API key');
|
||||
setValidating(false);
|
||||
return;
|
||||
}
|
||||
toast.success('API key validated and saved');
|
||||
} else {
|
||||
toast.error(result.error || 'Invalid API key');
|
||||
setKeyValid(true);
|
||||
}
|
||||
|
||||
const effectiveModelId =
|
||||
selectedProviderData?.defaultModelId ||
|
||||
modelId.trim() ||
|
||||
undefined;
|
||||
|
||||
// Save provider config + API key, then set as default
|
||||
const saveResult = await window.electron.ipcRenderer.invoke(
|
||||
'provider:save',
|
||||
{
|
||||
id: selectedProvider,
|
||||
name: selectedProviderData?.name || selectedProvider,
|
||||
type: selectedProvider,
|
||||
baseUrl: baseUrl.trim() || undefined,
|
||||
model: effectiveModelId,
|
||||
enabled: true,
|
||||
createdAt: new Date().toISOString(),
|
||||
updatedAt: new Date().toISOString(),
|
||||
},
|
||||
apiKey || undefined
|
||||
) as { success: boolean; error?: string };
|
||||
|
||||
if (!saveResult.success) {
|
||||
throw new Error(saveResult.error || 'Failed to save provider config');
|
||||
}
|
||||
|
||||
const defaultResult = await window.electron.ipcRenderer.invoke(
|
||||
'provider:setDefault',
|
||||
selectedProvider
|
||||
) as { success: boolean; error?: string };
|
||||
|
||||
if (!defaultResult.success) {
|
||||
throw new Error(defaultResult.error || 'Failed to set default provider');
|
||||
}
|
||||
|
||||
onConfiguredChange(true);
|
||||
toast.success('Provider configured');
|
||||
} catch (error) {
|
||||
setKeyValid(false);
|
||||
toast.error('Validation failed: ' + String(error));
|
||||
onConfiguredChange(false);
|
||||
toast.error('Configuration failed: ' + String(error));
|
||||
} finally {
|
||||
setValidating(false);
|
||||
}
|
||||
};
|
||||
|
||||
// Can the user submit?
|
||||
const canSubmit =
|
||||
selectedProvider
|
||||
&& (requiresKey ? apiKey.length > 0 : true)
|
||||
&& (showModelIdField ? modelId.trim().length > 0 : true);
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<h2 className="text-xl font-semibold mb-2">Select AI Provider</h2>
|
||||
<p className="text-slate-300">
|
||||
Choose your preferred AI model provider
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-3 gap-4">
|
||||
{providers.map((provider) => (
|
||||
<button
|
||||
key={provider.id}
|
||||
onClick={() => {
|
||||
onSelectProvider(provider.id);
|
||||
{/* Provider selector — dropdown */}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="provider">Model Provider</Label>
|
||||
<div className="relative">
|
||||
<select
|
||||
id="provider"
|
||||
value={selectedProvider || ''}
|
||||
onChange={(e) => {
|
||||
const val = e.target.value || null;
|
||||
onSelectProvider(val);
|
||||
onConfiguredChange(false);
|
||||
onApiKeyChange('');
|
||||
setKeyValid(null);
|
||||
}}
|
||||
className={cn(
|
||||
'p-4 rounded-lg bg-white/5 hover:bg-white/10 transition-all text-center',
|
||||
selectedProvider === provider.id && 'ring-2 ring-primary bg-white/10'
|
||||
'appearance-none rounded-md border border-white/10 bg-white/5 px-3 py-2 pr-8',
|
||||
'w-full text-sm text-white cursor-pointer',
|
||||
'focus:outline-none focus:ring-2 focus:ring-ring',
|
||||
)}
|
||||
>
|
||||
<span className="text-3xl">{provider.icon}</span>
|
||||
<p className="font-medium mt-2">{provider.name}</p>
|
||||
<p className="text-sm text-slate-400">{provider.model}</p>
|
||||
</button>
|
||||
))}
|
||||
<option value="" disabled className="bg-slate-800 text-slate-400">Select a provider...</option>
|
||||
{providers.map((p) => (
|
||||
<option key={p.id} value={p.id} className="bg-slate-800 text-white">
|
||||
{p.icon} {p.name}{p.model ? ` — ${p.model}` : ''}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<ChevronDown className="absolute right-2 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-slate-400 pointer-events-none" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Dynamic config fields based on selected provider */}
|
||||
{selectedProvider && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, height: 0 }}
|
||||
animate={{ opacity: 1, height: 'auto' }}
|
||||
key={selectedProvider}
|
||||
initial={{ opacity: 0, y: 8 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
className="space-y-4"
|
||||
>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="apiKey">API Key</Label>
|
||||
<div className="flex gap-2">
|
||||
<div className="relative flex-1">
|
||||
{/* Base URL field (for siliconflow, ollama, custom) */}
|
||||
{showBaseUrlField && (
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="baseUrl">Base URL</Label>
|
||||
<Input
|
||||
id="baseUrl"
|
||||
type="text"
|
||||
placeholder="https://api.example.com/v1"
|
||||
value={baseUrl}
|
||||
onChange={(e) => {
|
||||
setBaseUrl(e.target.value);
|
||||
onConfiguredChange(false);
|
||||
}}
|
||||
autoComplete="off"
|
||||
className="bg-white/5 border-white/10"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Model ID field (for siliconflow etc.) */}
|
||||
{showModelIdField && (
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="modelId">Model ID</Label>
|
||||
<Input
|
||||
id="modelId"
|
||||
type="text"
|
||||
placeholder={selectedProviderData?.modelIdPlaceholder || 'e.g. deepseek-ai/DeepSeek-V3'}
|
||||
value={modelId}
|
||||
onChange={(e) => {
|
||||
setModelId(e.target.value);
|
||||
onConfiguredChange(false);
|
||||
}}
|
||||
autoComplete="off"
|
||||
className="bg-white/5 border-white/10"
|
||||
/>
|
||||
<p className="text-xs text-slate-500">
|
||||
The model identifier from your provider (e.g. deepseek-ai/DeepSeek-V3)
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* API Key field (hidden for ollama) */}
|
||||
{requiresKey && (
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="apiKey">API Key</Label>
|
||||
<div className="relative">
|
||||
<Input
|
||||
id="apiKey"
|
||||
type={showKey ? 'text' : 'password'}
|
||||
@@ -792,6 +906,7 @@ function ProviderContent({
|
||||
value={apiKey}
|
||||
onChange={(e) => {
|
||||
onApiKeyChange(e.target.value);
|
||||
onConfiguredChange(false);
|
||||
setKeyValid(null);
|
||||
}}
|
||||
autoComplete="off"
|
||||
@@ -805,27 +920,29 @@ function ProviderContent({
|
||||
{showKey ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
|
||||
</button>
|
||||
</div>
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={handleValidateKey}
|
||||
disabled={!apiKey || validating}
|
||||
>
|
||||
{validating ? (
|
||||
<Loader2 className="h-4 w-4 animate-spin" />
|
||||
) : (
|
||||
'Validate'
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
{keyValid !== null && (
|
||||
<p className={cn('text-sm', keyValid ? 'text-green-400' : 'text-red-400')}>
|
||||
{keyValid ? '✓ API key is valid' : '✗ Invalid API key'}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<p className="text-sm text-slate-400">
|
||||
Your API key will be securely stored in the system keychain.
|
||||
{/* Validate & Save */}
|
||||
<Button
|
||||
onClick={handleValidateAndSave}
|
||||
disabled={!canSubmit || validating}
|
||||
className="w-full"
|
||||
>
|
||||
{validating ? (
|
||||
<Loader2 className="h-4 w-4 animate-spin mr-2" />
|
||||
) : null}
|
||||
{requiresKey ? 'Validate & Save' : 'Save'}
|
||||
</Button>
|
||||
|
||||
{keyValid !== null && (
|
||||
<p className={cn('text-sm text-center', keyValid ? 'text-green-400' : 'text-red-400')}>
|
||||
{keyValid ? '✓ Provider configured successfully' : '✗ Invalid API key'}
|
||||
</p>
|
||||
)}
|
||||
|
||||
<p className="text-sm text-slate-400 text-center">
|
||||
Your API key is stored locally on your machine.
|
||||
</p>
|
||||
</motion.div>
|
||||
)}
|
||||
|
||||
@@ -283,6 +283,8 @@ export const useChatStore = create<ChatState>((set, get) => ({
|
||||
set({ error: result.error || 'Failed to send message', sending: false });
|
||||
} else if (result.result?.runId) {
|
||||
set({ activeRunId: result.result.runId });
|
||||
} else {
|
||||
// No runId from gateway; keep sending state and wait for events.
|
||||
}
|
||||
} catch (err) {
|
||||
set({ error: String(err), sending: false });
|
||||
|
||||
@@ -5,6 +5,8 @@
|
||||
import { create } from 'zustand';
|
||||
import type { GatewayStatus } from '../types/gateway';
|
||||
|
||||
let gatewayInitPromise: Promise<void> | null = null;
|
||||
|
||||
interface GatewayHealth {
|
||||
ok: boolean;
|
||||
error?: string;
|
||||
@@ -39,47 +41,79 @@ export const useGatewayStore = create<GatewayState>((set, get) => ({
|
||||
|
||||
init: async () => {
|
||||
if (get().isInitialized) return;
|
||||
|
||||
try {
|
||||
// Get initial status
|
||||
const status = await window.electron.ipcRenderer.invoke('gateway:status') as GatewayStatus;
|
||||
set({ status, isInitialized: true });
|
||||
|
||||
// Listen for status changes
|
||||
window.electron.ipcRenderer.on('gateway:status-changed', (newStatus) => {
|
||||
set({ status: newStatus as GatewayStatus });
|
||||
});
|
||||
|
||||
// Listen for errors
|
||||
window.electron.ipcRenderer.on('gateway:error', (error) => {
|
||||
set({ lastError: String(error) });
|
||||
});
|
||||
|
||||
// Listen for notifications
|
||||
window.electron.ipcRenderer.on('gateway:notification', (notification) => {
|
||||
console.log('Gateway notification:', notification);
|
||||
});
|
||||
|
||||
// Listen for chat events from the gateway and forward to chat store
|
||||
window.electron.ipcRenderer.on('gateway:chat-message', (data) => {
|
||||
try {
|
||||
// Dynamic import to avoid circular dependency
|
||||
import('./chat').then(({ useChatStore }) => {
|
||||
const chatData = data as { message?: Record<string, unknown> } | Record<string, unknown>;
|
||||
const event = ('message' in chatData && typeof chatData.message === 'object')
|
||||
? chatData.message as Record<string, unknown>
|
||||
: chatData as Record<string, unknown>;
|
||||
useChatStore.getState().handleChatEvent(event);
|
||||
});
|
||||
} catch (err) {
|
||||
console.warn('Failed to forward chat event:', err);
|
||||
}
|
||||
});
|
||||
|
||||
} catch (error) {
|
||||
console.error('Failed to initialize Gateway:', error);
|
||||
set({ lastError: String(error) });
|
||||
if (gatewayInitPromise) {
|
||||
await gatewayInitPromise;
|
||||
return;
|
||||
}
|
||||
|
||||
gatewayInitPromise = (async () => {
|
||||
try {
|
||||
// Get initial status first
|
||||
const status = await window.electron.ipcRenderer.invoke('gateway:status') as GatewayStatus;
|
||||
set({ status, isInitialized: true });
|
||||
|
||||
// Listen for status changes
|
||||
window.electron.ipcRenderer.on('gateway:status-changed', (newStatus) => {
|
||||
set({ status: newStatus as GatewayStatus });
|
||||
});
|
||||
|
||||
// Listen for errors
|
||||
window.electron.ipcRenderer.on('gateway:error', (error) => {
|
||||
set({ lastError: String(error) });
|
||||
});
|
||||
|
||||
// Some Gateway builds stream chat events via generic "agent" notifications.
|
||||
// Normalize and forward them to the chat store.
|
||||
window.electron.ipcRenderer.on('gateway:notification', (notification) => {
|
||||
const payload = notification as { method?: string; params?: Record<string, unknown> } | undefined;
|
||||
if (!payload || payload.method !== 'agent' || !payload.params || typeof payload.params !== 'object') {
|
||||
return;
|
||||
}
|
||||
|
||||
const p = payload.params;
|
||||
const data = (p.data && typeof p.data === 'object') ? (p.data as Record<string, unknown>) : {};
|
||||
const normalizedEvent: Record<string, unknown> = {
|
||||
...data,
|
||||
runId: p.runId ?? data.runId,
|
||||
sessionKey: p.sessionKey ?? data.sessionKey,
|
||||
stream: p.stream ?? data.stream,
|
||||
seq: p.seq ?? data.seq,
|
||||
};
|
||||
|
||||
import('./chat')
|
||||
.then(({ useChatStore }) => {
|
||||
useChatStore.getState().handleChatEvent(normalizedEvent);
|
||||
})
|
||||
.catch((err) => {
|
||||
console.warn('Failed to forward gateway notification event:', err);
|
||||
});
|
||||
});
|
||||
|
||||
// Listen for chat events from the gateway and forward to chat store
|
||||
window.electron.ipcRenderer.on('gateway:chat-message', (data) => {
|
||||
try {
|
||||
// Dynamic import to avoid circular dependency
|
||||
import('./chat').then(({ useChatStore }) => {
|
||||
const chatData = data as { message?: Record<string, unknown> } | Record<string, unknown>;
|
||||
const event = ('message' in chatData && typeof chatData.message === 'object')
|
||||
? chatData.message as Record<string, unknown>
|
||||
: chatData as Record<string, unknown>;
|
||||
useChatStore.getState().handleChatEvent(event);
|
||||
});
|
||||
} catch (err) {
|
||||
console.warn('Failed to forward chat event:', err);
|
||||
}
|
||||
});
|
||||
|
||||
} catch (error) {
|
||||
console.error('Failed to initialize Gateway:', error);
|
||||
set({ lastError: String(error) });
|
||||
} finally {
|
||||
gatewayInitPromise = null;
|
||||
}
|
||||
})();
|
||||
|
||||
await gatewayInitPromise;
|
||||
},
|
||||
|
||||
start: async () => {
|
||||
|
||||
@@ -3,28 +3,10 @@
|
||||
* Manages AI provider configurations
|
||||
*/
|
||||
import { create } from 'zustand';
|
||||
import type { ProviderConfig, ProviderWithKeyInfo } from '@/lib/providers';
|
||||
|
||||
/**
|
||||
* Provider configuration
|
||||
*/
|
||||
export interface ProviderConfig {
|
||||
id: string;
|
||||
name: string;
|
||||
type: 'anthropic' | 'openai' | 'google' | 'openrouter' | 'ollama' | 'custom';
|
||||
baseUrl?: string;
|
||||
model?: string;
|
||||
enabled: boolean;
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* Provider with key info (for display)
|
||||
*/
|
||||
export interface ProviderWithKeyInfo extends ProviderConfig {
|
||||
hasKey: boolean;
|
||||
keyMasked: string | null;
|
||||
}
|
||||
// Re-export types for consumers that imported from here
|
||||
export type { ProviderConfig, ProviderWithKeyInfo } from '@/lib/providers';
|
||||
|
||||
interface ProviderState {
|
||||
providers: ProviderWithKeyInfo[];
|
||||
@@ -38,6 +20,11 @@ interface ProviderState {
|
||||
updateProvider: (providerId: string, updates: Partial<ProviderConfig>, apiKey?: string) => Promise<void>;
|
||||
deleteProvider: (providerId: string) => Promise<void>;
|
||||
setApiKey: (providerId: string, apiKey: string) => Promise<void>;
|
||||
updateProviderWithKey: (
|
||||
providerId: string,
|
||||
updates: Partial<ProviderConfig>,
|
||||
apiKey?: string
|
||||
) => Promise<void>;
|
||||
deleteApiKey: (providerId: string) => Promise<void>;
|
||||
setDefaultProvider: (providerId: string) => Promise<void>;
|
||||
validateApiKey: (providerId: string, apiKey: string) => Promise<{ valid: boolean; error?: string }>;
|
||||
@@ -96,8 +83,10 @@ export const useProviderStore = create<ProviderState>((set, get) => ({
|
||||
throw new Error('Provider not found');
|
||||
}
|
||||
|
||||
const { hasKey: _hasKey, keyMasked: _keyMasked, ...providerConfig } = existing;
|
||||
|
||||
const updatedConfig: ProviderConfig = {
|
||||
...existing,
|
||||
...providerConfig,
|
||||
...updates,
|
||||
updatedAt: new Date().toISOString(),
|
||||
};
|
||||
@@ -148,6 +137,26 @@ export const useProviderStore = create<ProviderState>((set, get) => ({
|
||||
}
|
||||
},
|
||||
|
||||
updateProviderWithKey: async (providerId, updates, apiKey) => {
|
||||
try {
|
||||
const result = await window.electron.ipcRenderer.invoke(
|
||||
'provider:updateWithKey',
|
||||
providerId,
|
||||
updates,
|
||||
apiKey
|
||||
) as { success: boolean; error?: string };
|
||||
|
||||
if (!result.success) {
|
||||
throw new Error(result.error || 'Failed to update provider');
|
||||
}
|
||||
|
||||
await get().fetchProviders();
|
||||
} catch (error) {
|
||||
console.error('Failed to update provider with key:', error);
|
||||
throw error;
|
||||
}
|
||||
},
|
||||
|
||||
deleteApiKey: async (providerId) => {
|
||||
try {
|
||||
const result = await window.electron.ipcRenderer.invoke('provider:deleteApiKey', providerId) as { success: boolean; error?: string };
|
||||
|
||||
Reference in New Issue
Block a user