/* global React, ReactDOM, window, document, localStorage */
const { useState, useEffect, useRef, useMemo, useCallback } = React;
const LEVELS = ["A1", "A2", "B1", "B2", "C1", "C2"];
const LEVEL_COLOR = {
A1: "var(--lvl-a1)", A2: "var(--lvl-a2)", B1: "var(--lvl-b1)",
B2: "var(--lvl-b2)", C1: "var(--lvl-c1)", C2: "var(--lvl-c2)",
};
const STORE_KEY = "lexicon.words.v1";
/* ---------------- icons ---------------- */
const Icon = {
search: (p) => (),
x: (p) => (),
speaker: (p) => (),
bookmark: (filled) => (p) => (),
chev: (p) => (),
external: (p) => (),
spark: (p) => (),
loader: (p) => (),
plus: (p) => (),
upload: (p) => (),
trash: (p) => (),
};
/* ---------------- storage + dedupe ---------------- */
// Two entries are "the same word" when headword + part of speech match.
// (e.g. about/adverb and about/preposition stay separate — that's correct —
// but two abandon/verb rows get merged into one.)
function wordKey(w) {
return (w.word || "").trim().toLowerCase() + "|" + (w.pos || "").trim().toLowerCase();
}
function dedupeWords(list) {
const map = new Map();
for (const w of list) {
const k = wordKey(w);
const ex = map.get(k);
if (!ex) {
map.set(k, { ...w });
} else {
// merge duplicates: keep total collect count, richest content
ex.fav = (ex.fav || 0) + (w.fav || 0);
if (!ex.def && w.def) ex.def = w.def;
if (!ex.ai && w.ai) ex.ai = w.ai;
if (!LEVELS.includes(ex.level) && LEVELS.includes(w.level)) ex.level = w.level;
if (!ex.audioUrl && w.audioUrl) ex.audioUrl = w.audioUrl;
if ((!ex.defUrl || /undefined/.test(ex.defUrl)) && w.defUrl) ex.defUrl = w.defUrl;
}
}
return [...map.values()];
}
function loadWords() {
try {
const raw = localStorage.getItem(STORE_KEY);
if (raw) return dedupeWords(JSON.parse(raw)); // clean up any existing duplicates
} catch (e) {}
// first run: seed with a few pre-collected words so Favorites is populated
const presets = { abandon: 3, ubiquitous: 2, accommodate: 1 };
return dedupeWords((window.SEED_WORDS || []).map((w) => ({
...w, fav: presets[w.word] || 0, ai: null,
})));
}
/* ---------------- audio ---------------- */
function useAudio() {
const [playing, setPlaying] = useState(null);
const ref = useRef(null);
const play = useCallback((word) => {
if (ref.current) { try { ref.current.pause(); } catch (e) {} ref.current = null; }
setPlaying(word.id);
const done = () => setPlaying((p) => (p === word.id ? null : p));
const speak = () => {
try {
window.speechSynthesis.cancel();
const u = new SpeechSynthesisUtterance(word.word);
u.lang = "en-US"; u.rate = 0.92;
u.onend = done; u.onerror = done;
window.speechSynthesis.speak(u);
} catch (e) { done(); }
};
if (word.audioUrl) {
const a = new Audio(word.audioUrl);
ref.current = a;
a.onended = done;
a.onerror = () => { ref.current = null; speak(); };
a.play().catch(() => { ref.current = null; speak(); });
} else {
speak();
}
}, []);
return { playing, play };
}
/* ---------------- CEFR badge ---------------- */
function Cefr({ level }) {
const known = LEVELS.includes(level);
return {known ? level : "?"};
}
/* ---------------- one dictionary entry ---------------- */
const Entry = React.memo(function Entry({ w, isPlaying, onPlay, onCollect, onOpenReader, active }) {
return (
onOpenReader(w)}>
{w.word}
{w.pos}
{w.fav > 0 && (<>·collected ×{w.fav})}
e.stopPropagation()}>
);
});
/* ---------------- AI explain prompt (friend-style, EN explains EN) ---------------- */
function buildExplainPrompt(word, pos, attempt, previous) {
let p =
"You are explaining the English word \"" + word + "\" (used as a " + pos + ") to an English learner, " +
"like a close friend chatting over coffee — warm, casual, and encouraging. " +
"VERY IMPORTANT: reply ONLY in English. Never use Chinese or any other language. Explain English with English. " +
"Use the simplest, most common everyday words a beginner already knows. " +
"Return STRICT JSON only, no extra text, exactly these keys: " +
"{\"meaning\":\"one short sentence of plain, everyday English (no hard words)\"," +
"\"example\":\"one natural sentence from daily life that uses the word\"," +
"\"tip\":\"a short friendly note: when/where people use it, its feeling/tone, or a common word it pairs with\"," +
"\"level\":\"your best guess of its CEFR level, one of A1 A2 B1 B2 C1 C2\"}.";
if (attempt > 0) {
p += " The learner did NOT understand the previous explanation — it was too complex or used words that were too hard. " +
"Try a COMPLETELY different way this time: even simpler, shorter words, a fresh everyday example, and do not reuse the same phrasing. ";
if (previous && previous.meaning) p += "Avoid repeating this earlier wording: \"" + previous.meaning + "\". ";
if (attempt >= 2) p += "Imagine you are explaining to a young child now — be as plain as you possibly can. ";
}
return p;
}
function parseExplain(res) {
let parsed = null;
try { parsed = JSON.parse(res); }
catch (e) { const m = res && res.match(/\{[\s\S]*\}/); if (m) { try { parsed = JSON.parse(m[0]); } catch (e2) {} } }
if (parsed && parsed.meaning) return { meaning: parsed.meaning, example: parsed.example || "", tip: parsed.tip || "", level: parsed.level || "" };
return { meaning: (res || "").trim().slice(0, 240), example: "", tip: "", level: "" };
}
/* ---------------- Tokenized text: every word is an independent token ---------------- */
function Tokenized({ text, onWord, current }) {
if (!text) return null;
const parts = String(text).split(/([A-Za-z][A-Za-z'’-]*)/);
return parts.map((p, i) => {
if (/^[A-Za-z][A-Za-z'’-]*$/.test(p)) {
const isCur = current && p.toLowerCase() === current.toLowerCase();
return (
{ e.stopPropagation(); onWord(p.toLowerCase(), e.currentTarget); }}
>{p}
);
}
return {p};
});
}
/* ---------------- Reader panel (loads content directly) ---------------- */
function Reader({ word, audio, onCollect, onRecollect, onUncollect, onAi, onLookup, onClose }) {
const [loading, setLoading] = useState(false);
const [embed, setEmbed] = useState(false); // optional Oxford iframe
const [embedFailed, setEmbedFailed] = useState(false);
const embedLoaded = useRef(false);
const attemptRef = useRef(0);
const fetchExplain = useCallback(async (attempt, previous) => {
setLoading(true);
try {
const res = await window.claude.complete(buildExplainPrompt(word.word, word.pos, attempt, previous));
return parseExplain(res);
} catch (e) {
return { meaning: "Could not reach the AI tutor right now. Tap “Explain it differently” to try again.", example: "", tip: "" };
} finally {
setLoading(false);
}
}, [word && word.id]);
// Auto-fetch the friendly explanation the moment a word opens (if not cached).
useEffect(() => {
if (!word) return;
setEmbed(false); setEmbedFailed(false); embedLoaded.current = false;
attemptRef.current = 0;
if (word.ai && word.ai.meaning) return; // re-fetch if missing or old format
let alive = true;
(async () => {
const ai = await fetchExplain(0, null);
if (alive) onAi(word.id, ai);
})();
return () => { alive = false; };
}, [word && word.id]);
if (!word) return null;
const playing = audio.playing === word.id;
// Each word in the panel text is an independent token; clicking it offers lookup.
const onWordClick = (w, el) => {
if (!onLookup) return;
if (w === word.word.toLowerCase()) { onLookup(null); return; }
const rect = el.getBoundingClientRect();
onLookup({ word: w, rect: { left: rect.left, top: rect.top, bottom: rect.bottom, right: rect.right } });
};
// Each press tries a fresh, simpler phrasing.
const regen = async () => {
attemptRef.current += 1;
const ai = await fetchExplain(attemptRef.current, word.ai);
onAi(word.id, ai);
};
return (
<>