acea99d7ad
Some checks failed
CI — Test & Build / Test & Build (push) Failing after 39s
- Added a new "Prompt Builder" tab in the Popup for generating AI prompts with customizable parameters. - Introduced new state variables for managing prompt styles, personas, formats, and models. - Enhanced the Options page to fetch and display models based on the provided API key. - Updated the actions and types to include the new 'prompt' action and its associated parameters. - Implemented migration logic for legacy plaintext API keys to encrypted storage. - Updated the getSystemPrompt function to incorporate prompt parameters for better instruction generation. - Added tests for the new functionality, including context menu entries and prompt generation logic.
598 lines
19 KiB
TypeScript
598 lines
19 KiB
TypeScript
import React, { useEffect, useRef, useState } from 'react';
|
|
import { createRoot } from 'react-dom/client';
|
|
import { safeSendMessage, safeStorageGet, safeStorageSet } from '@lib/messaging';
|
|
|
|
import { WRITING_STYLES, PROMPT_STYLES, PROMPT_PERSONAS, PROMPT_FORMATS, resolvePromptPersona } from '@lib/actions';
|
|
import type { PromptParams } from '@lib/types';
|
|
|
|
// ─── Types ───────────────────────────────────────────────────────────────────
|
|
|
|
type Action = 'fix' | 'rephrase' | 'shorten' | 'expand' | 'prompt';
|
|
|
|
// ─── Styles ──────────────────────────────────────────────────────────────────
|
|
|
|
const S = {
|
|
root: {
|
|
fontFamily: 'system-ui, -apple-system, sans-serif',
|
|
background: '#1e1e2e',
|
|
color: '#cdd6f4',
|
|
padding: '0',
|
|
minWidth: '420px',
|
|
maxHeight: '600px',
|
|
overflowY: 'auto' as const,
|
|
},
|
|
header: {
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'space-between',
|
|
padding: '12px 16px',
|
|
borderBottom: '1px solid rgba(205,214,244,0.1)',
|
|
},
|
|
headerLeft: {
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
gap: '6px',
|
|
fontSize: '16px',
|
|
fontWeight: 700,
|
|
},
|
|
settingsBtn: {
|
|
background: 'none',
|
|
border: '1px solid rgba(205,214,244,0.2)',
|
|
borderRadius: '6px',
|
|
color: '#a6adc8',
|
|
cursor: 'pointer',
|
|
fontSize: '12px',
|
|
padding: '4px 10px',
|
|
},
|
|
section: {
|
|
padding: '14px 16px',
|
|
},
|
|
tabBar: {
|
|
display: 'flex',
|
|
borderBottom: '1px solid rgba(205,214,244,0.1)',
|
|
},
|
|
tab: {
|
|
flex: 1,
|
|
background: 'none',
|
|
border: 'none',
|
|
borderBottom: '2px solid transparent',
|
|
color: '#6c7086',
|
|
cursor: 'pointer',
|
|
fontSize: '13px',
|
|
fontWeight: 600,
|
|
padding: '10px 0',
|
|
},
|
|
tabActive: {
|
|
color: '#89b4fa',
|
|
borderBottom: '2px solid #89b4fa',
|
|
},
|
|
divider: {
|
|
borderTop: '1px solid rgba(205,214,244,0.1)',
|
|
},
|
|
textarea: {
|
|
width: '100%',
|
|
minHeight: '100px',
|
|
background: 'rgba(49,50,68,0.95)',
|
|
border: '1px solid rgba(205,214,244,0.15)',
|
|
borderRadius: '8px',
|
|
color: '#cdd6f4',
|
|
fontSize: '13px',
|
|
lineHeight: '1.5',
|
|
padding: '10px 12px',
|
|
resize: 'vertical' as const,
|
|
outline: 'none',
|
|
boxSizing: 'border-box' as const,
|
|
fontFamily: 'inherit',
|
|
},
|
|
styleRow: {
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
gap: '8px',
|
|
marginTop: '10px',
|
|
marginBottom: '2px',
|
|
},
|
|
styleLabel: {
|
|
fontSize: '12px',
|
|
color: '#a6adc8',
|
|
flexShrink: 0,
|
|
},
|
|
styleSelect: {
|
|
background: 'rgba(49,50,68,0.95)',
|
|
border: '1px solid rgba(205,214,244,0.2)',
|
|
borderRadius: '6px',
|
|
color: '#cdd6f4',
|
|
fontSize: '12px',
|
|
padding: '4px 8px',
|
|
cursor: 'pointer',
|
|
flex: 1,
|
|
outline: 'none',
|
|
},
|
|
actionsRow: {
|
|
display: 'flex',
|
|
flexWrap: 'wrap' as const,
|
|
gap: '8px',
|
|
marginTop: '10px',
|
|
},
|
|
actionBtn: {
|
|
background: 'linear-gradient(135deg, #cba6f7, #89b4fa)',
|
|
border: 'none',
|
|
borderRadius: '6px',
|
|
color: '#1e1e2e',
|
|
cursor: 'pointer',
|
|
fontSize: '12px',
|
|
fontWeight: 600,
|
|
padding: '6px 12px',
|
|
},
|
|
actionBtnDisabled: {
|
|
background: 'rgba(203,166,247,0.3)',
|
|
border: 'none',
|
|
borderRadius: '6px',
|
|
color: '#a6adc8',
|
|
cursor: 'not-allowed',
|
|
fontSize: '12px',
|
|
fontWeight: 600,
|
|
padding: '6px 12px',
|
|
},
|
|
processingBadge: {
|
|
fontSize: '12px',
|
|
color: '#a6adc8',
|
|
marginTop: '8px',
|
|
},
|
|
resultSection: {
|
|
padding: '0 16px 14px',
|
|
},
|
|
resultLabel: {
|
|
fontSize: '12px',
|
|
color: '#a6adc8',
|
|
marginBottom: '6px',
|
|
fontWeight: 600,
|
|
},
|
|
resultBox: {
|
|
background: 'rgba(49,50,68,0.8)',
|
|
border: '1px solid rgba(205,214,244,0.1)',
|
|
borderRadius: '8px',
|
|
color: '#cdd6f4',
|
|
fontSize: '13px',
|
|
lineHeight: '1.5',
|
|
padding: '10px 12px',
|
|
whiteSpace: 'pre-wrap' as const,
|
|
wordBreak: 'break-word' as const,
|
|
},
|
|
copyBtn: {
|
|
marginTop: '8px',
|
|
background: 'rgba(137,180,250,0.15)',
|
|
border: '1px solid rgba(137,180,250,0.3)',
|
|
borderRadius: '6px',
|
|
color: '#89b4fa',
|
|
cursor: 'pointer',
|
|
fontSize: '12px',
|
|
fontWeight: 600,
|
|
padding: '6px 14px',
|
|
},
|
|
warningBox: {
|
|
background: 'rgba(243,139,168,0.1)',
|
|
border: '1px solid rgba(243,139,168,0.3)',
|
|
borderRadius: '8px',
|
|
color: '#f38ba8',
|
|
fontSize: '12px',
|
|
padding: '10px 12px',
|
|
marginBottom: '12px',
|
|
},
|
|
errorBox: {
|
|
background: 'rgba(243,139,168,0.1)',
|
|
border: '1px solid rgba(243,139,168,0.3)',
|
|
borderRadius: '8px',
|
|
color: '#f38ba8',
|
|
fontSize: '12px',
|
|
padding: '10px 12px',
|
|
marginTop: '8px',
|
|
},
|
|
};
|
|
|
|
// ─── Component ────────────────────────────────────────────────────────────────
|
|
|
|
function Popup() {
|
|
const [configured, setConfigured] = useState(false);
|
|
const [provider, setProvider] = useState('');
|
|
const [model, setModel] = useState('');
|
|
const [inputText, setInputText] = useState('');
|
|
const [result, setResult] = useState('');
|
|
const [error, setError] = useState('');
|
|
const [processing, setProcessing] = useState(false);
|
|
const [copied, setCopied] = useState(false);
|
|
const [writingStyle, setWritingStyle] = useState('Default');
|
|
// Prompt Builder parameters — persisted so they survive popup close/open.
|
|
const [promptStyle, setPromptStyle] = useState('Auto');
|
|
const [promptPersona, setPromptPersona] = useState('Auto');
|
|
const [customPersona, setCustomPersona] = useState('');
|
|
const [promptFormat, setPromptFormat] = useState('Auto');
|
|
// Model used for building the prompt ('' = the configured default model).
|
|
const [promptModel, setPromptModel] = useState('');
|
|
const [promptModels, setPromptModels] = useState<string[]>([]);
|
|
const [modelsHint, setModelsHint] = useState('');
|
|
const modelsRequested = useRef(false);
|
|
const [tab, setTab] = useState<'writing' | 'prompt'>('writing');
|
|
const sessionRestored = useRef(false);
|
|
|
|
// Load config + restore session input + load writing style
|
|
useEffect(() => {
|
|
safeStorageGet(
|
|
['provider', 'apiKey', 'apiKeyEnc', 'model', 'writingStyle', 'promptStyle', 'promptPersona', 'customPersona', 'promptFormat', 'promptModel', 'popupTab'],
|
|
(result) => {
|
|
if (result.apiKey || result.apiKeyEnc) {
|
|
setConfigured(true);
|
|
setProvider(result.provider || 'openai');
|
|
setModel(result.model || '');
|
|
}
|
|
if (result.writingStyle) {
|
|
setWritingStyle(result.writingStyle);
|
|
}
|
|
if (result.promptStyle) setPromptStyle(result.promptStyle);
|
|
if (result.promptPersona) setPromptPersona(result.promptPersona);
|
|
if (result.customPersona) setCustomPersona(result.customPersona);
|
|
if (result.promptFormat) setPromptFormat(result.promptFormat);
|
|
if (result.promptModel) setPromptModel(result.promptModel);
|
|
if (result.popupTab === 'prompt' || result.popupTab === 'writing') setTab(result.popupTab);
|
|
},
|
|
);
|
|
|
|
if (!sessionRestored.current) {
|
|
sessionRestored.current = true;
|
|
safeStorageGet(['lexai_popup_input'], (res) => {
|
|
if (res.lexai_popup_input) {
|
|
setInputText(res.lexai_popup_input);
|
|
}
|
|
}, chrome.storage.session);
|
|
}
|
|
}, []);
|
|
|
|
// Persist input to session storage on change
|
|
const handleInputChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
|
|
const val = e.target.value;
|
|
setInputText(val);
|
|
safeStorageSet({ lexai_popup_input: val }, undefined, chrome.storage.session);
|
|
};
|
|
|
|
// Save writing style on change
|
|
const handleStyleChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
|
|
const val = e.target.value;
|
|
setWritingStyle(val);
|
|
safeStorageSet({ writingStyle: val });
|
|
};
|
|
|
|
const openSettings = () => {
|
|
try {
|
|
if (typeof chrome !== 'undefined' && chrome.runtime?.id) {
|
|
chrome.runtime.openOptionsPage();
|
|
}
|
|
} catch (err) {
|
|
console.warn('LexAI: Extension context invalidated', err);
|
|
}
|
|
};
|
|
|
|
// Resolve the Prompt Builder selections into message params. 'Custom…'
|
|
// uses the free-text persona (falls back to Auto when left empty).
|
|
const resolvePromptParams = (): PromptParams => ({
|
|
promptStyle,
|
|
persona: resolvePromptPersona(promptPersona, customPersona),
|
|
format: promptFormat,
|
|
});
|
|
|
|
const runAction = async (action: Action) => {
|
|
const text = inputText.trim();
|
|
if (!text || processing) return;
|
|
|
|
setProcessing(true);
|
|
setResult('');
|
|
setError('');
|
|
|
|
const response = await safeSendMessage({
|
|
type: 'ANALYZE_TEXT',
|
|
payload: {
|
|
text,
|
|
action,
|
|
style: writingStyle,
|
|
...(action === 'prompt'
|
|
? {
|
|
promptParams: resolvePromptParams(),
|
|
...(promptModel ? { model: promptModel } : {}),
|
|
}
|
|
: {}),
|
|
},
|
|
});
|
|
|
|
setProcessing(false);
|
|
|
|
if (!response) {
|
|
setError('No response from extension. Try reloading.');
|
|
return;
|
|
}
|
|
if (response.error) {
|
|
setError(response.error);
|
|
return;
|
|
}
|
|
if (response.result) {
|
|
setResult(response.result);
|
|
}
|
|
};
|
|
|
|
const copyResult = async () => {
|
|
if (!result) return;
|
|
try {
|
|
await navigator.clipboard.writeText(result);
|
|
setCopied(true);
|
|
setTimeout(() => setCopied(false), 1500);
|
|
} catch {
|
|
// fallback
|
|
}
|
|
};
|
|
|
|
const actions: { label: string; id: Action }[] = [
|
|
{ label: 'Fix Grammar', id: 'fix' },
|
|
{ label: 'Rephrase', id: 'rephrase' },
|
|
{ label: 'Shorten', id: 'shorten' },
|
|
{ label: 'Expand', id: 'expand' },
|
|
];
|
|
|
|
// Persist one Prompt Builder param alongside its state update.
|
|
const setParam = (key: string, value: string, setter: (v: string) => void) => {
|
|
setter(value);
|
|
safeStorageSet({ [key]: value });
|
|
};
|
|
|
|
const switchTab = (t: 'writing' | 'prompt') => {
|
|
setTab(t);
|
|
safeStorageSet({ popupTab: t });
|
|
};
|
|
|
|
// Fetch the provider's model list the first time the Prompt Builder tab is
|
|
// shown (background worker resolves the stored key). Failure is non-fatal —
|
|
// the picker just stays on the default model.
|
|
useEffect(() => {
|
|
if (tab !== 'prompt' || !configured || modelsRequested.current) return;
|
|
modelsRequested.current = true;
|
|
(async () => {
|
|
const res = await safeSendMessage({ type: 'LIST_MODELS', provider });
|
|
if (res?.models && Array.isArray(res.models)) {
|
|
setPromptModels(res.models);
|
|
} else {
|
|
setModelsHint(res?.error || 'Could not load the model list — using the default model.');
|
|
}
|
|
})();
|
|
}, [tab, configured, provider]);
|
|
|
|
return (
|
|
<div style={S.root}>
|
|
{/* Header */}
|
|
<div style={S.header}>
|
|
<div style={S.headerLeft}>
|
|
<span>⚡</span>
|
|
<span>LexAI</span>
|
|
</div>
|
|
<button style={S.settingsBtn} onClick={openSettings}>
|
|
⚙ Settings
|
|
</button>
|
|
</div>
|
|
|
|
{/* Not configured warning */}
|
|
{!configured && (
|
|
<div style={S.section}>
|
|
<div style={S.warningBox}>
|
|
<strong>⚠ Setup Required</strong>
|
|
<br />
|
|
Add your API key in Settings to use LexAI.
|
|
</div>
|
|
<button
|
|
onClick={openSettings}
|
|
style={{
|
|
...S.actionBtn,
|
|
width: '100%',
|
|
fontSize: '13px',
|
|
padding: '8px',
|
|
}}
|
|
>
|
|
⚙ Open Settings
|
|
</button>
|
|
</div>
|
|
)}
|
|
|
|
{/* Main input area — only when configured */}
|
|
{configured && (
|
|
<>
|
|
{/* Tabs: quick writing actions vs. the Prompt Builder */}
|
|
<div style={S.tabBar}>
|
|
<button
|
|
style={tab === 'writing' ? { ...S.tab, ...S.tabActive } : S.tab}
|
|
onClick={() => switchTab('writing')}
|
|
>
|
|
✍ Writing
|
|
</button>
|
|
<button
|
|
style={tab === 'prompt' ? { ...S.tab, ...S.tabActive } : S.tab}
|
|
onClick={() => switchTab('prompt')}
|
|
>
|
|
🪄 Prompt Builder
|
|
</button>
|
|
</div>
|
|
|
|
<div style={S.section}>
|
|
{/* Provider badge */}
|
|
<div style={{ fontSize: '11px', color: '#a6adc8', marginBottom: '8px' }}>
|
|
✓ {provider}
|
|
{/* Model shown only on the Writing tab — the Prompt Builder has its own Model field */}
|
|
{tab === 'writing' && model ? ` / ${model}` : ''}
|
|
</div>
|
|
|
|
{/* Textarea */}
|
|
<textarea
|
|
style={S.textarea}
|
|
placeholder="Paste your text here..."
|
|
value={inputText}
|
|
onChange={handleInputChange}
|
|
disabled={processing}
|
|
rows={4}
|
|
/>
|
|
|
|
{/* Writing tab: style + quick actions */}
|
|
{tab === 'writing' && (
|
|
<>
|
|
<div style={S.styleRow}>
|
|
<span style={S.styleLabel}>Style:</span>
|
|
<select
|
|
style={S.styleSelect}
|
|
value={writingStyle}
|
|
onChange={handleStyleChange}
|
|
disabled={processing}
|
|
>
|
|
{WRITING_STYLES.map(s => (
|
|
<option key={s} value={s}>{s}</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
|
|
<div style={S.actionsRow}>
|
|
{actions.map(({ label, id }) => (
|
|
<button
|
|
key={id}
|
|
style={processing ? S.actionBtnDisabled : S.actionBtn}
|
|
disabled={processing || !inputText.trim()}
|
|
onClick={() => runAction(id)}
|
|
>
|
|
{label}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</>
|
|
)}
|
|
|
|
{/* Prompt Builder tab: dedicated parameters + model + Make Prompt */}
|
|
{tab === 'prompt' && (
|
|
<>
|
|
<div style={{ fontSize: '11px', color: '#6c7086', margin: '8px 0 2px' }}>
|
|
Turns the text above into an engineered AI prompt. "Auto" lets it decide from your input.
|
|
</div>
|
|
|
|
<div style={{ ...S.styleRow, marginTop: '6px' }}>
|
|
<span style={{ ...S.styleLabel, width: '64px' }}>Style:</span>
|
|
<select
|
|
style={S.styleSelect}
|
|
value={promptStyle}
|
|
onChange={(e) => setParam('promptStyle', e.target.value, setPromptStyle)}
|
|
disabled={processing}
|
|
>
|
|
{PROMPT_STYLES.map((s) => (
|
|
<option key={s} value={s}>{s}</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
|
|
<div style={{ ...S.styleRow, marginTop: '6px' }}>
|
|
<span style={{ ...S.styleLabel, width: '64px' }}>Persona:</span>
|
|
<select
|
|
style={S.styleSelect}
|
|
value={promptPersona}
|
|
onChange={(e) => setParam('promptPersona', e.target.value, setPromptPersona)}
|
|
disabled={processing}
|
|
>
|
|
{PROMPT_PERSONAS.map((p) => (
|
|
<option key={p} value={p}>{p}</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
|
|
{promptPersona === 'Custom…' && (
|
|
<div style={{ ...S.styleRow, marginTop: '6px' }}>
|
|
<span style={{ ...S.styleLabel, width: '64px' }} />
|
|
<input
|
|
type="text"
|
|
style={{ ...S.styleSelect, cursor: 'text' }}
|
|
placeholder="e.g. senior UX researcher who writes usability reports"
|
|
value={customPersona}
|
|
onChange={(e) => setParam('customPersona', e.target.value, setCustomPersona)}
|
|
disabled={processing}
|
|
/>
|
|
</div>
|
|
)}
|
|
|
|
<div style={{ ...S.styleRow, marginTop: '6px' }}>
|
|
<span style={{ ...S.styleLabel, width: '64px' }}>Format:</span>
|
|
<select
|
|
style={S.styleSelect}
|
|
value={promptFormat}
|
|
onChange={(e) => setParam('promptFormat', e.target.value, setPromptFormat)}
|
|
disabled={processing}
|
|
>
|
|
{PROMPT_FORMATS.map((f) => (
|
|
<option key={f} value={f}>{f}</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
|
|
<div style={{ ...S.styleRow, marginTop: '6px' }}>
|
|
<span style={{ ...S.styleLabel, width: '64px' }}>Model:</span>
|
|
<select
|
|
style={S.styleSelect}
|
|
value={promptModel}
|
|
onChange={(e) => setParam('promptModel', e.target.value, setPromptModel)}
|
|
disabled={processing}
|
|
>
|
|
<option value="">Default</option>
|
|
{promptModels.map((m) => (
|
|
<option key={m} value={m}>{m}</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
{modelsHint && (
|
|
<div style={{ fontSize: '11px', color: '#6c7086', marginTop: '4px' }}>
|
|
⚠ {modelsHint}
|
|
</div>
|
|
)}
|
|
|
|
<div style={S.actionsRow}>
|
|
<button
|
|
style={{
|
|
...(processing ? S.actionBtnDisabled : S.actionBtn),
|
|
...(processing ? {} : { background: 'linear-gradient(135deg, #f9e2af, #fab387)' }),
|
|
width: '100%',
|
|
padding: '8px',
|
|
fontSize: '13px',
|
|
}}
|
|
disabled={processing || !inputText.trim()}
|
|
onClick={() => runAction('prompt')}
|
|
>
|
|
🪄 Make Prompt
|
|
</button>
|
|
</div>
|
|
</>
|
|
)}
|
|
|
|
{/* Processing state */}
|
|
{processing && (
|
|
<div style={S.processingBadge}>⏳ Processing...</div>
|
|
)}
|
|
|
|
{/* Error */}
|
|
{error && <div style={S.errorBox}>⚠ {error}</div>}
|
|
</div>
|
|
|
|
{/* Result area */}
|
|
{result && (
|
|
<>
|
|
<div style={S.divider} />
|
|
<div style={S.resultSection}>
|
|
<div style={S.resultLabel}>Result:</div>
|
|
<div style={S.resultBox}>{result}</div>
|
|
<button style={S.copyBtn} onClick={copyResult}>
|
|
{copied ? '✓ Copied!' : '⎘ Copy Result'}
|
|
</button>
|
|
</div>
|
|
</>
|
|
)}
|
|
</>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
createRoot(document.getElementById('app')!).render(<Popup />);
|