{sparkleIcon} AI

{list.map((s, i) => ( ))}

); } // ═══════════════════════════════════════════════════════════════════════ // V2 — NUMBERED STACK (the "loud" one) // Big violet tray + chunky numbered cards. Highest visual priority. // ═══════════════════════════════════════════════════════════════════════ function SuggNumberedStack({ palette, suggestions, dark, max = 3, onPick }) { const c = palette; const list = suggestions.slice(0, max); return (

{sparkleIcon} AI 제안 · 번호로 빠른 선택

{list.map((s, i) => ( ))}

); } // ═══════════════════════════════════════════════════════════════════════ // V3 — CARD DECK (one at a time) // One large card visible. Prev/next arrows + page dots. Like Tinder. // ═══════════════════════════════════════════════════════════════════════ function SuggCardDeck({ palette, suggestions, dark, max = 3, onPick, pickedIdx = null, locked = false, native = 'KO' }) { const c = palette; // TappableText restores tap-a-word → translation on the card (essential). const TT = window.TappableText || (({ text }) => {text}); const list = suggestions.slice(0, max); // Start the carousel on the picked card if there is one. const [idx, setIdx] = React.useState(typeof pickedIdx === 'number' ? pickedIdx : 0); const s = list[idx]; const isPicked = pickedIdx === idx; const anyPicked = typeof pickedIdx === 'number'; // Swipe to navigate. Selection is via the bottom button (NOT tap), so that a // tap on a word goes to the word-translation popup instead of selecting. const drag = React.useRef(null); function goPrev() { setIdx(i => Math.max(0, i - 1)); } function goNext() { setIdx(i => Math.min(list.length - 1, i + 1)); } function onCardDown(e) { const p = e.touches ? e.touches[0] : e; drag.current = { x: p.clientX, y: p.clientY }; } function onCardUp(e) { if (!drag.current) return; const p = e.changedTouches ? e.changedTouches[0] : e; const dx = p.clientX - drag.current.x; const dy = p.clientY - drag.current.y; drag.current = null; if (Math.abs(dx) > 45 && Math.abs(dx) > Math.abs(dy)) { if (dx < 0) goNext(); else goPrev(); // horizontal swipe = navigate } } // Selected card uses cyan (mine) color; unselected use AI deep-navy. const cardBg = isPicked ? c.mine : c.ai; const cardInk = isPicked ? (c.mineInk || '#002854') : (c.aiInk || '#fff'); return (

{sparkleIcon} {window.t('aiSuggestion')} · {idx + 1}/{list.length} {anyPicked && · {window.t('selected')}}

{list.map((_, i) => (

{idx < list.length - 1 && (

)}

{isPicked && (

{window.t('myChosenReply')}

)}

{/* Speaker button — plays the target-language (en) sentence. */}

{/* control row */}

); } // ═══════════════════════════════════════════════════════════════════════ // V4 — SPEECH BALLOONS (Character) // Mascot on the left "saying" each option as a speech bubble with a TAIL. // ═══════════════════════════════════════════════════════════════════════ function SuggSpeechBalloons({ palette, suggestions, dark, max = 3, onPick }) { const c = palette; const list = suggestions.slice(0, max); return ( {sparkleIcon} AI 제안 {list.map((s, i) => { const tt = toneTint(s.tone, dark); return ( ); })} ); } // ═══════════════════════════════════════════════════════════════════════ // V5 — 3-CELL TILE GRID // 3 equal squares side by side. Most "tap-it-now" feel. Minimal text per tile. // ═══════════════════════════════════════════════════════════════════════ function SuggTileGrid({ palette, suggestions, dark, max = 3, onPick }) { const c = palette; const list = suggestions.slice(0, Math.min(max, 3)); // grid works best with 3 return ( {sparkleIcon} 3가지 방향 · 하나만 탭하세요 {list.map((s, i) => { const tt = toneTint(s.tone, dark); return ( ); })} ); } // ═══════════════════════════════════════════════════════════════════════ // V6 — BRANCH PATHS (Conversation Tree) // Visual fork: one root → 3 diverging branches. Emphasizes that // each choice leads the conversation in a different direction. // ═══════════════════════════════════════════════════════════════════════ function SuggBranchPaths({ palette, suggestions, dark, max = 3, onPick }) { const c = palette; const list = suggestions.slice(0, max); return ( {sparkleIcon} 대화가 갈라지는 3가지 길 {/* The fork visual */} {/* root node */} {/* branches */} {list.map((s, i) => { const tt = toneTint(s.tone, dark); return ( {/* branch line */} ); })} ); } // Router function SuggestionDisplay({ variant, palette, suggestions, dark, max = 3, onPick, pickedIdx = null, locked = false, native = 'KO' }) { if (!suggestions || !suggestions.length) return null; const map = { chips: SuggKeyboardStrip, numbered: SuggNumberedStack, carousel: SuggCardDeck, mascot: SuggSpeechBalloons, sticky: SuggTileGrid, tabbed: SuggBranchPaths, }; const Cmp = map[variant] || SuggCardDeck; return ; } Object.assign(window, { SuggKeyboardStrip, SuggNumberedStack, SuggCardDeck, SuggSpeechBalloons, SuggTileGrid, SuggBranchPaths, SuggestionDisplay, toneTint, });