feat: fix WXT setup — install @wxt-dev/module-react, fix sandbox imports, clean build (closes #1)

2026-03-06 13:11:19 +08:00
parent b04076081c
commit c35ef08531
5 changed files with 2573 additions and 300 deletions
--- a/entrypoints/options/Options.tsx
+++ b/entrypoints/options/Options.tsx
@@ -1,18 +1,165 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { createRoot } from 'react-dom/client';

+// ─── Provider config ──────────────────────────────────────────────────────────
+
 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'] },
+  {
+    id: 'openai',
+    name: 'OpenAI',
+    placeholder: 'sk-...',
+    models: ['gpt-4o', 'gpt-4o-mini', 'gpt-3.5-turbo'],
+    docsUrl: 'https://platform.openai.com/api-keys',
+  },
+  {
+    id: 'anthropic',
+    name: 'Anthropic (Claude)',
+    placeholder: 'sk-ant-...',
+    models: ['claude-3-5-sonnet-20241022', 'claude-3-5-haiku-20241022', 'claude-3-opus-20240229'],
+    docsUrl: 'https://console.anthropic.com/keys',
+  },
+  {
+    id: 'groq',
+    name: 'Groq (Free tier)',
+    placeholder: 'gsk_...',
+    models: ['llama-3.3-70b-versatile', 'llama-3.1-8b-instant', 'mixtral-8x7b-32768'],
+    docsUrl: 'https://console.groq.com/keys',
+  },
+  {
+    id: 'openrouter',
+    name: 'OpenRouter (100+ models)',
+    placeholder: 'sk-or-...',
+    models: ['openai/gpt-4o-mini', 'anthropic/claude-3-5-haiku', 'meta-llama/llama-3.3-70b-instruct:free'],
+    docsUrl: 'https://openrouter.ai/keys',
+  },
 ];

+// ─── Styles ───────────────────────────────────────────────────────────────────
+
+const styles = {
+  page: {
+    minHeight: '100vh',
+    background: 'linear-gradient(135deg, #1e1e2e 0%, #181825 100%)',
+    display: 'flex',
+    alignItems: 'flex-start',
+    justifyContent: 'center',
+    padding: '40px 20px',
+    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: '16px',
+    padding: '32px',
+    width: '100%',
+    maxWidth: '480px',
+    boxShadow: '0 8px 48px rgba(0,0,0,0.4)',
+    color: '#cdd6f4',
+  } as React.CSSProperties,
+  logoRow: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: '10px',
+    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: '28px',
+    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: '20px',
+  } 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: '12px',
+    borderRadius: '10px',
+    border: 'none',
+    fontSize: '15px',
+    fontWeight: '700',
+    cursor: 'pointer',
+    transition: 'all 0.2s ease',
+    marginTop: '8px',
+  } as React.CSSProperties,
+  divider: {
+    borderTop: '1px solid rgba(205,214,244,0.08)',
+    margin: '24px 0',
+  } as React.CSSProperties,
+  statusBadge: {
+    display: 'inline-flex',
+    alignItems: 'center',
+    gap: '6px',
+    fontSize: '12px',
+    padding: '4px 10px',
+    borderRadius: '6px',
+    marginTop: '12px',
+  } as React.CSSProperties,
+};
+
+// ─── Component ────────────────────────────────────────────────────────────────
+
 function OptionsPage() {
  const [provider, setProvider] = useState('openai');
  const [apiKey, setApiKey] = useState('');
  const [model, setModel] = useState('gpt-4o-mini');
-  const [saved, setSaved] = useState(false);
+  const [saveStatus, setSaveStatus] = useState<'idle' | 'saving' | 'saved' | 'error'>('idle');
+  const [showKey, setShowKey] = useState(false);
+  const apiKeyRef = useRef<HTMLInputElement>(null);

  useEffect(() => {
    chrome.storage.local.get(['provider', 'apiKey', 'model'], (result) => {
@@ -22,75 +169,152 @@ function OptionsPage() {
    });
  }, []);

+  const currentProvider = PROVIDERS.find((p) => p.id === provider) ?? PROVIDERS[0];
+
+  const handleProviderChange = (newProvider: string) => {
+    setProvider(newProvider);
+    const p = PROVIDERS.find((p) => p.id === newProvider);
+    if (p) setModel(p.models[0]);
+  };
+
  const handleSave = () => {
-    chrome.storage.local.set({ provider, apiKey, model }, () => {
-      setSaved(true);
-      setTimeout(() => setSaved(false), 2000);
+    if (!apiKey.trim()) {
+      apiKeyRef.current?.focus();
+      return;
+    }
+    setSaveStatus('saving');
+    chrome.storage.local.set({ provider, apiKey: apiKey.trim(), model }, () => {
+      if (chrome.runtime.lastError) {
+        setSaveStatus('error');
+        setTimeout(() => setSaveStatus('idle'), 3000);
+      } else {
+        setSaveStatus('saved');
+        setTimeout(() => setSaveStatus('idle'), 2500);
+      }
    });
  };

-  const currentProvider = PROVIDERS.find((p) => p.id === provider);
+  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={{ 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.
+    <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 stored locally and never shared.
        </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 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 */}
+        <div style={styles.formGroup}>
+          <label style={styles.label}>Model</label>
+          <select
+            style={styles.select}
+            value={model}
+            onChange={(e) => setModel(e.target.value)}
+          >
+            {currentProvider.models.map((m) => (
+              <option key={m} value={m}>{m}</option>
+            ))}
+          </select>
+        </div>
+
+        {/* API Key */}
+        <div style={styles.formGroup}>
+          <label style={styles.label}>API Key</label>
+          <div style={{ position: 'relative' }}>
+            <input
+              ref={apiKeyRef}
+              type={showKey ? 'text' : 'password'}
+              value={apiKey}
+              onChange={(e) => setApiKey(e.target.value)}
+              placeholder={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>🔒 Stored only 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, or Expand</li>
+            <li>Accept or replace the suggestion</li>
+          </ol>
+        </div>
+      </div>
    </div>
  );
 }