04a4a2dc99
- Uninstall zustand, tailwindcss, autoprefixer, tweetnacl-util (all unused); README no longer advertises Tailwind/Zustand. - Fix stale 'Tone' -> 'Explain' copy in Options. - Add .nvmrc/engines/packageManager (Node 22 to match CI). - wxt.config.ts reads manifest version from package.json so the two can never drift. - Ignore *.zip build artifacts. - Skip the two e2e specs with literal [EXTENSION_ID] placeholders (cannot pass; TODO references the e2e-ID-resolution task). Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
511 lines
17 KiB
TypeScript
511 lines
17 KiB
TypeScript
import React, { useEffect, useRef, useState } from 'react';
|
|
import { createRoot } from 'react-dom/client';
|
|
import nacl from 'tweetnacl';
|
|
|
|
// ─── Provider config ──────────────────────────────────────────────────────────
|
|
|
|
// Model lists are fetched live per provider (see loadModels) — no static lists here.
|
|
const PROVIDERS = [
|
|
{
|
|
id: 'openai',
|
|
name: 'OpenAI',
|
|
placeholder: 'sk-...',
|
|
docsUrl: 'https://platform.openai.com/api-keys',
|
|
},
|
|
{
|
|
id: 'anthropic',
|
|
name: 'Anthropic (Claude)',
|
|
placeholder: 'sk-ant-...',
|
|
docsUrl: 'https://console.anthropic.com/keys',
|
|
},
|
|
{
|
|
id: 'groq',
|
|
name: 'Groq (Free tier)',
|
|
placeholder: 'gsk_...',
|
|
docsUrl: 'https://console.groq.com/keys',
|
|
},
|
|
{
|
|
id: 'openrouter',
|
|
name: 'OpenRouter (100+ models)',
|
|
placeholder: 'sk-or-...',
|
|
docsUrl: 'https://openrouter.ai/keys',
|
|
},
|
|
];
|
|
|
|
// ─── Encryption helpers ───────────────────────────────────────────────────────
|
|
|
|
async function getOrCreateEncKey(): Promise<Uint8Array> {
|
|
return new Promise((resolve) => {
|
|
chrome.storage.local.get(['encKey'], (result) => {
|
|
if (result.encKey) {
|
|
resolve(Uint8Array.from(atob(result.encKey as string), c => c.charCodeAt(0)));
|
|
} else {
|
|
const key = nacl.randomBytes(32);
|
|
const keyB64 = btoa(String.fromCharCode(...key));
|
|
chrome.storage.local.set({ encKey: keyB64 });
|
|
resolve(key);
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
// ─── Styles ───────────────────────────────────────────────────────────────────
|
|
|
|
const styles = {
|
|
page: {
|
|
minHeight: '100vh',
|
|
background: 'linear-gradient(135deg, #1e1e2e 0%, #181825 100%)',
|
|
display: 'flex',
|
|
alignItems: 'flex-start',
|
|
justifyContent: 'center',
|
|
padding: '16px 12px',
|
|
fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
|
|
} as React.CSSProperties,
|
|
card: {
|
|
background: 'rgba(30,30,46,0.95)',
|
|
border: '1px solid rgba(205,214,244,0.12)',
|
|
borderRadius: '12px',
|
|
padding: '16px',
|
|
width: '100%',
|
|
maxWidth: '420px',
|
|
boxShadow: '0 8px 48px rgba(0,0,0,0.4)',
|
|
color: '#cdd6f4',
|
|
} as React.CSSProperties,
|
|
logoRow: {
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
gap: '8px',
|
|
marginBottom: '4px',
|
|
} as React.CSSProperties,
|
|
logo: {
|
|
fontSize: '28px',
|
|
} as React.CSSProperties,
|
|
title: {
|
|
fontSize: '22px',
|
|
fontWeight: '800',
|
|
color: '#89b4fa',
|
|
margin: 0,
|
|
} as React.CSSProperties,
|
|
subtitle: {
|
|
fontSize: '13px',
|
|
color: '#6c7086',
|
|
marginBottom: '14px',
|
|
marginTop: '4px',
|
|
} as React.CSSProperties,
|
|
label: {
|
|
display: 'block',
|
|
fontSize: '13px',
|
|
fontWeight: '600',
|
|
color: '#a6adc8',
|
|
marginBottom: '6px',
|
|
textTransform: 'uppercase' as const,
|
|
letterSpacing: '0.04em',
|
|
} as React.CSSProperties,
|
|
select: {
|
|
width: '100%',
|
|
padding: '10px 14px',
|
|
borderRadius: '9px',
|
|
border: '1px solid rgba(205,214,244,0.15)',
|
|
background: 'rgba(49,50,68,0.7)',
|
|
color: '#cdd6f4',
|
|
fontSize: '14px',
|
|
outline: 'none',
|
|
cursor: 'pointer',
|
|
marginBottom: '0',
|
|
} as React.CSSProperties,
|
|
input: {
|
|
width: '100%',
|
|
padding: '10px 14px',
|
|
borderRadius: '9px',
|
|
border: '1px solid rgba(205,214,244,0.15)',
|
|
background: 'rgba(49,50,68,0.7)',
|
|
color: '#cdd6f4',
|
|
fontSize: '14px',
|
|
outline: 'none',
|
|
boxSizing: 'border-box' as const,
|
|
} as React.CSSProperties,
|
|
formGroup: {
|
|
marginBottom: '12px',
|
|
} as React.CSSProperties,
|
|
hint: {
|
|
fontSize: '12px',
|
|
color: '#6c7086',
|
|
marginTop: '6px',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
gap: '4px',
|
|
} as React.CSSProperties,
|
|
docsLink: {
|
|
color: '#89b4fa',
|
|
textDecoration: 'none',
|
|
fontSize: '12px',
|
|
} as React.CSSProperties,
|
|
saveBtn: {
|
|
width: '100%',
|
|
padding: '10px',
|
|
borderRadius: '10px',
|
|
border: 'none',
|
|
fontSize: '15px',
|
|
fontWeight: '700',
|
|
cursor: 'pointer',
|
|
transition: 'all 0.2s ease',
|
|
marginTop: '4px',
|
|
} as React.CSSProperties,
|
|
divider: {
|
|
borderTop: '1px solid rgba(205,214,244,0.08)',
|
|
margin: '12px 0',
|
|
} as React.CSSProperties,
|
|
statusBadge: {
|
|
display: 'inline-flex',
|
|
alignItems: 'center',
|
|
gap: '6px',
|
|
fontSize: '12px',
|
|
padding: '4px 10px',
|
|
borderRadius: '6px',
|
|
marginTop: '12px',
|
|
} as React.CSSProperties,
|
|
};
|
|
|
|
// ─── Safe chrome storage wrappers ────────────────────────────────────────────
|
|
|
|
function safeStorageGet(keys: string[], callback: (result: Record<string, string>) => void) {
|
|
try {
|
|
if (typeof chrome === 'undefined' || !chrome.runtime?.id) return;
|
|
chrome.storage.local.get(keys, callback);
|
|
} catch (err) {
|
|
console.warn('LexAI: Extension context invalidated', err);
|
|
}
|
|
}
|
|
|
|
function safeStorageSet(data: Record<string, string>, callback?: () => void) {
|
|
try {
|
|
if (typeof chrome === 'undefined' || !chrome.runtime?.id) return;
|
|
if (callback) {
|
|
chrome.storage.local.set(data, callback);
|
|
} else {
|
|
chrome.storage.local.set(data);
|
|
}
|
|
} catch (err) {
|
|
console.warn('LexAI: Extension context invalidated', err);
|
|
}
|
|
}
|
|
|
|
async function safeSendMessage(message: Record<string, unknown>): Promise<any> {
|
|
try {
|
|
if (typeof chrome === 'undefined' || !chrome.runtime?.id) return null;
|
|
return await chrome.runtime.sendMessage(message);
|
|
} catch (err) {
|
|
console.warn('LexAI: sendMessage failed', err);
|
|
return null;
|
|
}
|
|
}
|
|
|
|
// ─── Component ────────────────────────────────────────────────────────────────
|
|
|
|
function OptionsPage() {
|
|
const [provider, setProvider] = useState('openai');
|
|
const [apiKey, setApiKey] = useState('');
|
|
const [model, setModel] = useState('');
|
|
const [models, setModels] = useState<string[]>([]);
|
|
const [modelsStatus, setModelsStatus] = useState<'idle' | 'loading' | 'error'>('idle');
|
|
const [modelsError, setModelsError] = useState('');
|
|
const [saveStatus, setSaveStatus] = useState<'idle' | 'saving' | 'saved' | 'error'>('idle');
|
|
const [showKey, setShowKey] = useState(false);
|
|
const [isEncrypted, setIsEncrypted] = useState(false);
|
|
const apiKeyRef = useRef<HTMLInputElement>(null);
|
|
|
|
// Fetch the live model list from the provider (via the background worker, which
|
|
// owns key decryption). Uses a freshly typed key if present, else the stored key.
|
|
const loadModels = async (providerOverride?: string, keyOverride?: string) => {
|
|
const prov = providerOverride ?? provider;
|
|
const inlineKey = keyOverride ?? (apiKey.trim() || undefined);
|
|
setModelsStatus('loading');
|
|
setModelsError('');
|
|
|
|
const response = await safeSendMessage({ type: 'LIST_MODELS', provider: prov, apiKey: inlineKey });
|
|
|
|
if (!response) {
|
|
setModels([]);
|
|
setModelsStatus('error');
|
|
setModelsError('No response from the extension. Try reloading the page.');
|
|
return;
|
|
}
|
|
if (response.error) {
|
|
setModels([]);
|
|
setModelsStatus('error');
|
|
setModelsError(response.error);
|
|
return;
|
|
}
|
|
|
|
const list: string[] = Array.isArray(response.models) ? response.models : [];
|
|
setModels(list);
|
|
setModelsStatus('idle');
|
|
// Keep the current selection if it's still valid; otherwise force a re-pick.
|
|
setModel((prev) => (prev && list.includes(prev) ? prev : ''));
|
|
};
|
|
|
|
useEffect(() => {
|
|
safeStorageGet(['provider', 'apiKey', 'apiKeyEnc', 'encKey', 'model'], (result) => {
|
|
const prov = result.provider || 'openai';
|
|
if (result.provider) setProvider(result.provider);
|
|
if (result.model) setModel(result.model);
|
|
|
|
// Show placeholder if encrypted key exists
|
|
if (result.apiKeyEnc && result.encKey) {
|
|
setIsEncrypted(true);
|
|
setApiKey(''); // don't show encrypted blob — show empty for re-entry or leave as is
|
|
} else if (result.apiKey) {
|
|
setApiKey(result.apiKey);
|
|
setIsEncrypted(false);
|
|
}
|
|
|
|
// If a key is already configured, pull the live model list on open.
|
|
if (result.apiKeyEnc || result.apiKey || prov === 'openrouter') {
|
|
loadModels(prov);
|
|
}
|
|
});
|
|
}, []);
|
|
|
|
const currentProvider = PROVIDERS.find((p) => p.id === provider) ?? PROVIDERS[0];
|
|
|
|
const handleProviderChange = (newProvider: string) => {
|
|
setProvider(newProvider);
|
|
setModel('');
|
|
setModels([]);
|
|
setModelsStatus('idle');
|
|
setModelsError('');
|
|
loadModels(newProvider);
|
|
};
|
|
|
|
const handleSave = async () => {
|
|
// Require an explicit model choice — prevents sending a stale/mismatched model
|
|
// id to a provider (the root cause of the OpenRouter failures).
|
|
if (!model) {
|
|
setModelsError('Please load and select a model before saving.');
|
|
return;
|
|
}
|
|
// If key is blank and we already have an encrypted key, don't overwrite
|
|
if (!apiKey.trim() && !isEncrypted) {
|
|
apiKeyRef.current?.focus();
|
|
return;
|
|
}
|
|
if (!apiKey.trim() && isEncrypted) {
|
|
// Only saving provider/model changes — preserve existing encrypted key
|
|
setSaveStatus('saving');
|
|
safeStorageSet({ provider, model }, () => {
|
|
if (chrome.runtime.lastError) {
|
|
setSaveStatus('error');
|
|
setTimeout(() => setSaveStatus('idle'), 3000);
|
|
} else {
|
|
setSaveStatus('saved');
|
|
setTimeout(() => setSaveStatus('idle'), 2500);
|
|
}
|
|
});
|
|
return;
|
|
}
|
|
|
|
setSaveStatus('saving');
|
|
|
|
try {
|
|
const key = await getOrCreateEncKey();
|
|
const nonce = nacl.randomBytes(24);
|
|
const encoded = new TextEncoder().encode(apiKey.trim());
|
|
const encrypted = nacl.secretbox(encoded, nonce, key);
|
|
const combined = new Uint8Array(nonce.length + encrypted.length);
|
|
combined.set(nonce);
|
|
combined.set(encrypted, nonce.length);
|
|
const apiKeyEncB64 = btoa(String.fromCharCode(...combined));
|
|
|
|
safeStorageSet({ apiKeyEnc: apiKeyEncB64, provider, model }, () => {
|
|
if (chrome.runtime.lastError) {
|
|
setSaveStatus('error');
|
|
setTimeout(() => setSaveStatus('idle'), 3000);
|
|
} else {
|
|
// Remove plaintext key if it existed
|
|
chrome.storage.local.remove('apiKey');
|
|
setIsEncrypted(true);
|
|
setApiKey('');
|
|
setSaveStatus('saved');
|
|
setTimeout(() => setSaveStatus('idle'), 2500);
|
|
}
|
|
});
|
|
} catch (err) {
|
|
console.error('LexAI: Encryption failed', err);
|
|
setSaveStatus('error');
|
|
setTimeout(() => setSaveStatus('idle'), 3000);
|
|
}
|
|
};
|
|
|
|
const saveBtnStyle: React.CSSProperties = {
|
|
...styles.saveBtn,
|
|
background: saveStatus === 'saved'
|
|
? '#a6e3a1'
|
|
: saveStatus === 'error'
|
|
? '#f38ba8'
|
|
: 'linear-gradient(135deg, #89b4fa 0%, #b4befe 100%)',
|
|
color: '#1e1e2e',
|
|
};
|
|
|
|
return (
|
|
<div style={styles.page}>
|
|
<div style={styles.card}>
|
|
{/* Header */}
|
|
<div style={styles.logoRow}>
|
|
<span style={styles.logo}>⚡</span>
|
|
<h1 style={styles.title}>LexAI Settings</h1>
|
|
</div>
|
|
<p style={styles.subtitle}>
|
|
Configure your LLM provider and API key. Your key is encrypted and stored locally.
|
|
</p>
|
|
|
|
<div style={styles.divider} />
|
|
|
|
{/* Provider */}
|
|
<div style={styles.formGroup}>
|
|
<label style={styles.label}>LLM Provider</label>
|
|
<select
|
|
style={styles.select}
|
|
value={provider}
|
|
onChange={(e) => handleProviderChange(e.target.value)}
|
|
>
|
|
{PROVIDERS.map((p) => (
|
|
<option key={p.id} value={p.id}>{p.name}</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
|
|
{/* Model — fetched live from the selected provider */}
|
|
<div style={styles.formGroup}>
|
|
<label style={styles.label}>Model</label>
|
|
<div style={{ display: 'flex', gap: '8px' }}>
|
|
<select
|
|
style={{ ...styles.select, flex: 1, opacity: models.length === 0 ? 0.6 : 1 }}
|
|
value={model}
|
|
onChange={(e) => setModel(e.target.value)}
|
|
disabled={modelsStatus === 'loading' || models.length === 0}
|
|
>
|
|
{modelsStatus === 'loading' && <option value="">Loading models…</option>}
|
|
{modelsStatus !== 'loading' && models.length === 0 && (
|
|
<option value="">
|
|
{modelsStatus === 'error' ? 'Failed to load — see below' : 'Load models to choose'}
|
|
</option>
|
|
)}
|
|
{models.length > 0 && <option value="">— Select a model —</option>}
|
|
{models.map((m) => (
|
|
<option key={m} value={m}>{m}</option>
|
|
))}
|
|
</select>
|
|
<button
|
|
type="button"
|
|
onClick={() => loadModels()}
|
|
disabled={modelsStatus === 'loading'}
|
|
title="Fetch the current model list from your provider"
|
|
style={{
|
|
background: 'rgba(137,180,250,0.15)',
|
|
color: '#89b4fa',
|
|
border: '1px solid rgba(137,180,250,0.3)',
|
|
borderRadius: '9px',
|
|
padding: '0 12px',
|
|
fontSize: '13px',
|
|
fontWeight: 600,
|
|
cursor: modelsStatus === 'loading' ? 'not-allowed' : 'pointer',
|
|
whiteSpace: 'nowrap',
|
|
flexShrink: 0,
|
|
}}
|
|
>
|
|
{modelsStatus === 'loading' ? '⏳' : '↻ Load'}
|
|
</button>
|
|
</div>
|
|
{modelsStatus === 'error' && modelsError && (
|
|
<div style={{ ...styles.hint, color: '#f38ba8' }}>⚠ {modelsError}</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* API Key */}
|
|
<div style={styles.formGroup}>
|
|
<label style={styles.label}>
|
|
API Key{' '}
|
|
{isEncrypted && (
|
|
<span
|
|
title="API key is encrypted with TweetNaCl secretbox"
|
|
style={{ fontSize: '14px', marginLeft: '4px', verticalAlign: 'middle' }}
|
|
>
|
|
🔒
|
|
</span>
|
|
)}
|
|
</label>
|
|
<div style={{ position: 'relative' }}>
|
|
<input
|
|
ref={apiKeyRef}
|
|
type={showKey ? 'text' : 'password'}
|
|
value={apiKey}
|
|
onChange={(e) => {
|
|
setApiKey(e.target.value);
|
|
if (isEncrypted && e.target.value) setIsEncrypted(false);
|
|
}}
|
|
placeholder={isEncrypted ? '••••••• (encrypted — enter new key to change)' : currentProvider.placeholder}
|
|
style={{ ...styles.input, paddingRight: '42px' }}
|
|
onKeyDown={(e) => e.key === 'Enter' && handleSave()}
|
|
/>
|
|
<button
|
|
onClick={() => setShowKey((s) => !s)}
|
|
style={{
|
|
position: 'absolute',
|
|
right: '10px',
|
|
top: '50%',
|
|
transform: 'translateY(-50%)',
|
|
background: 'none',
|
|
border: 'none',
|
|
color: '#6c7086',
|
|
cursor: 'pointer',
|
|
fontSize: '14px',
|
|
padding: '4px',
|
|
}}
|
|
title={showKey ? 'Hide key' : 'Show key'}
|
|
>
|
|
{showKey ? '🙈' : '👁'}
|
|
</button>
|
|
</div>
|
|
<div style={styles.hint}>
|
|
<span>🔒 Encrypted with TweetNaCl on your device.</span>
|
|
<span>·</span>
|
|
<a
|
|
href={currentProvider.docsUrl}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
style={styles.docsLink}
|
|
>
|
|
Get API key →
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Save */}
|
|
<button style={saveBtnStyle} onClick={handleSave} disabled={saveStatus === 'saving'}>
|
|
{saveStatus === 'saving'
|
|
? '⏳ Saving…'
|
|
: saveStatus === 'saved'
|
|
? '✓ Settings Saved!'
|
|
: saveStatus === 'error'
|
|
? '✕ Save Failed — Try Again'
|
|
: '💾 Save Settings'}
|
|
</button>
|
|
|
|
<div style={styles.divider} />
|
|
|
|
{/* Info */}
|
|
<div style={{ fontSize: '12px', color: '#6c7086', lineHeight: '1.6' }}>
|
|
<strong style={{ color: '#a6adc8' }}>How to use LexAI:</strong>
|
|
<ol style={{ margin: '8px 0 0 16px', padding: 0 }}>
|
|
<li>Select any text on a webpage</li>
|
|
<li>Click Fix, Rephrase, Shorten, Expand, or Explain</li>
|
|
<li>Accept or replace the suggestion</li>
|
|
</ol>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
createRoot(document.getElementById('app')!).render(<OptionsPage />);
|