feat: initial LexAI Chrome extension scaffold

- WXT + React 18 + TypeScript setup - Background service worker (LLM API proxy) - Content script (floating toolbar + text selection) - Options page (provider/model/API key config) - Popup UI - Gitea Actions workflows (CI, preview, release) - Vitest unit tests + Playwright E2E setup - Supports: OpenAI, Anthropic, Groq, OpenRouter
2026-03-06 09:34:15 +08:00
commit b04076081c
20 changed files with 6254 additions and 0 deletions
--- a/entrypoints/options/Options.tsx
+++ b/entrypoints/options/Options.tsx
@@ -0,0 +1,98 @@
+import React, { useEffect, useState } from 'react';
+import { createRoot } from 'react-dom/client';
+
+const PROVIDERS = [
+  { id: 'openai', name: 'OpenAI', models: ['gpt-4o', 'gpt-4o-mini', 'gpt-3.5-turbo'] },
+  { id: 'anthropic', name: 'Anthropic', models: ['claude-3-5-sonnet-20241022', 'claude-3-5-haiku-20241022'] },
+  { id: 'groq', name: 'Groq (Free tier)', models: ['llama-3.3-70b-versatile', 'mixtral-8x7b-32768'] },
+  { id: 'openrouter', name: 'OpenRouter', models: ['auto'] },
+];
+
+function OptionsPage() {
+  const [provider, setProvider] = useState('openai');
+  const [apiKey, setApiKey] = useState('');
+  const [model, setModel] = useState('gpt-4o-mini');
+  const [saved, setSaved] = useState(false);
+
+  useEffect(() => {
+    chrome.storage.local.get(['provider', 'apiKey', 'model'], (result) => {
+      if (result.provider) setProvider(result.provider);
+      if (result.apiKey) setApiKey(result.apiKey);
+      if (result.model) setModel(result.model);
+    });
+  }, []);
+
+  const handleSave = () => {
+    chrome.storage.local.set({ provider, apiKey, model }, () => {
+      setSaved(true);
+      setTimeout(() => setSaved(false), 2000);
+    });
+  };
+
+  const currentProvider = PROVIDERS.find((p) => p.id === provider);
+
+  return (
+    <div style={{ maxWidth: 480, margin: '40px auto', fontFamily: 'system-ui, sans-serif', color: '#1e1e2e' }}>
+      <h1 style={{ fontSize: 24, marginBottom: 4 }}>⚡ LexAI Settings</h1>
+      <p style={{ color: '#6c6f85', marginBottom: 32 }}>Configure your own LLM provider and API key</p>
+
+      <div style={{ marginBottom: 20 }}>
+        <label style={{ display: 'block', fontWeight: 600, marginBottom: 6 }}>LLM Provider</label>
+        <select
+          value={provider}
+          onChange={(e) => { setProvider(e.target.value); setModel(''); }}
+          style={{ width: '100%', padding: '8px 12px', borderRadius: 8, border: '1px solid #cdd6f4', fontSize: 14 }}
+        >
+          {PROVIDERS.map((p) => (
+            <option key={p.id} value={p.id}>{p.name}</option>
+          ))}
+        </select>
+      </div>
+
+      <div style={{ marginBottom: 20 }}>
+        <label style={{ display: 'block', fontWeight: 600, marginBottom: 6 }}>Model</label>
+        <select
+          value={model}
+          onChange={(e) => setModel(e.target.value)}
+          style={{ width: '100%', padding: '8px 12px', borderRadius: 8, border: '1px solid #cdd6f4', fontSize: 14 }}
+        >
+          {(currentProvider?.models || []).map((m) => (
+            <option key={m} value={m}>{m}</option>
+          ))}
+        </select>
+      </div>
+
+      <div style={{ marginBottom: 28 }}>
+        <label style={{ display: 'block', fontWeight: 600, marginBottom: 6 }}>API Key</label>
+        <input
+          type="password"
+          value={apiKey}
+          onChange={(e) => setApiKey(e.target.value)}
+          placeholder="sk-..."
+          style={{ width: '100%', padding: '8px 12px', borderRadius: 8, border: '1px solid #cdd6f4', fontSize: 14, boxSizing: 'border-box' }}
+        />
+        <p style={{ fontSize: 12, color: '#6c6f85', marginTop: 6 }}>
+          🔒 Stored locally on your device only. Never sent anywhere except the LLM provider.
+        </p>
+      </div>
+
+      <button
+        onClick={handleSave}
+        style={{
+          background: saved ? '#a6e3a1' : '#89b4fa',
+          color: '#1e1e2e',
+          border: 'none',
+          borderRadius: 8,
+          padding: '10px 28px',
+          fontSize: 15,
+          fontWeight: 600,
+          cursor: 'pointer',
+        }}
+      >
+        {saved ? '✓ Saved!' : 'Save Settings'}
+      </button>
+    </div>
+  );
+}
+
+createRoot(document.getElementById('app')!).render(<OptionsPage />);