66 lines
2.2 KiB
TypeScript
66 lines
2.2 KiB
TypeScript
import React, { useEffect, useState } from 'react';
|
|
import { createRoot } from 'react-dom/client';
|
|
|
|
function Popup() {
|
|
const [configured, setConfigured] = useState(false);
|
|
const [provider, setProvider] = useState('');
|
|
const [model, setModel] = useState('');
|
|
|
|
useEffect(() => {
|
|
chrome.storage.local.get(["provider", "apiKey", "model"], (result: Record<string, string>) => {
|
|
if (result.apiKey) {
|
|
setConfigured(true);
|
|
setProvider(result.provider || 'openai');
|
|
setModel(result.model || '');
|
|
}
|
|
});
|
|
}, []);
|
|
|
|
const openSettings = () => chrome.runtime.openOptionsPage();
|
|
|
|
return (
|
|
<div style={{ padding: 16, fontFamily: 'system-ui, sans-serif', color: '#1e1e2e' }}>
|
|
<div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 12 }}>
|
|
<span style={{ fontSize: 20 }}>⚡</span>
|
|
<span style={{ fontSize: 16, fontWeight: 700 }}>LexAI</span>
|
|
</div>
|
|
|
|
{configured ? (
|
|
<div>
|
|
<div style={{ background: '#e8f5e9', borderRadius: 8, padding: '8px 12px', marginBottom: 12 }}>
|
|
<div style={{ fontSize: 12, color: '#388e3c', fontWeight: 600 }}>✓ Active</div>
|
|
<div style={{ fontSize: 12, color: '#555', marginTop: 2 }}>{provider} / {model}</div>
|
|
</div>
|
|
<p style={{ fontSize: 12, color: '#6c6f85', marginBottom: 12 }}>
|
|
Select any text on a webpage to see LexAI options appear.
|
|
</p>
|
|
</div>
|
|
) : (
|
|
<div style={{ background: '#fff3e0', borderRadius: 8, padding: '8px 12px', marginBottom: 12 }}>
|
|
<div style={{ fontSize: 12, color: '#e65100', fontWeight: 600 }}>⚠ Setup Required</div>
|
|
<div style={{ fontSize: 12, color: '#555', marginTop: 2 }}>Add your API key to get started</div>
|
|
</div>
|
|
)}
|
|
|
|
<button
|
|
onClick={openSettings}
|
|
style={{
|
|
width: '100%',
|
|
background: '#89b4fa',
|
|
color: '#1e1e2e',
|
|
border: 'none',
|
|
borderRadius: 8,
|
|
padding: '8px',
|
|
fontSize: 13,
|
|
fontWeight: 600,
|
|
cursor: 'pointer',
|
|
}}
|
|
>
|
|
⚙ Open Settings
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
createRoot(document.getElementById('app')!).render(<Popup />);
|