// Shared chat shell — top bar, message bubble, input bar, common SVG icons. const I = { swap: , mic: , send: , speak: , copy: , star: , starFilled: , sparkle: , ear: , history: , settings: , moon: , sun: , arrow: , plus: , }; window.CT_ICONS = I; // ── Top app bar ──────────────────────────────────────────────────────── function TopBar({ palette, dark, onToggleDark, showMascot = true, onSearch, onSettings, onHistory, onSaveConvo, onShare, target = 'EN', native = 'KO', onPickTarget, onPickNative }) { const c = palette; const tgt = window.CT_LANG.byCode(target); const nat = window.CT_LANG.byCode(native); return (
ConvoTrans
ConvoTrans
Live translation
{onShare && ( )} window.location.reload()} ariaLabel="refresh"> {dark ? window.CT_ICONS.sun : window.CT_ICONS.moon} {window.CT_ICONS.history} {window.CT_ICONS.settings}
{/* Two language slots — labels ALWAYS in English so a non-Korean speaker can recognize "my / other's language" even when the UI is Korean. */}
onPickTarget?.()} /> onPickNative?.()} />
); } function LangSlot({ c, role, lang, label, sub, onClick }) { const bg = c.langBtnBg ? c.langBtnBg : 'linear-gradient(180deg, #1E4D74 0%, #143A5C 100%)'; const border = c.langBtnBg ? c.langBtnBg : '#0E2F4D'; return ( ); } function LangPill({ palette, active, flag, label, sub }) { const c = palette; return (
{flag}
{label}
{sub}
); } function IconBtn({ palette, children, onClick, active, ariaLabel }) { const c = palette; return ( ); } // Header action icon — pale navy chip so the action set harmonizes with the logo. function HeaderIcon({ children, onClick, ariaLabel }) { return ( ); } // ── Message bubbles ──────────────────────────────────────────────────── // Hierarchy decision: // • What goes out the wire = ENGLISH (visible to the other person) // • My private layer = my original input (Korean OR my raw English if I made grammar mistakes) // • If I typed clean English already, there's no private note at all. function MyBubble({ msg, palette }) { const c = palette; const hasPrivate = msg.inputKind !== 'clean' && msg.orig !== msg.trans; const isFixed = msg.inputKind === 'polished'; return (
나 · 전송됨 {msg.inputKind === 'clean' && ( · 그대로 )} {isFixed && ( · ✏ 정정됨 )}
{msg.trans}
{hasPrivate && (
{isFixed ? '내가 말한 원본 · 정정됨 · 내 입력' : '내가 입력한 원문 · 내 입력'}
{msg.orig}
)}
{msg.time}
); } function TheirBubble({ msg, palette, dark, children, native = 'KO' }) { const c = palette; const nativeLang = window.CT_LANG ? window.CT_LANG.byCode(native) : { name: '한국어' }; return (
EN
상대방
{msg.orig}
{nativeLang.name} 번역 번역
{msg.trans}
{msg.time}
{children}
); } function SmallBtn({ palette, children, accent }) { const c = palette; return ( ); } // ── Input bar (bottom) ────────────────────────────────────────────────── function InputBar({ palette, dark, mode = 'mine', onModeChange }) { const c = palette; const isMine = mode === 'mine'; return (
{/* icon-only speaker toggle */}
{isMine ? '내가 말함' : '상대 말 듣기'}
{/* input row */}
); } function SpeakerTab({ palette, active, label, sub, icon, onClick }) { const c = palette; return ( ); } // ── Section label (for variations to use) ─────────────────────────────── function SectionLabel({ palette, color, children }) { return (
{children}
); } // ── Phone shell — wraps a screen in a phone-like rectangle ────────────── function PhoneShell({ palette, dark, children, width = 390, height = 800 }) { const c = palette; return (
{/* faux status bar */}
10:05 5G
{children} {/* home indicator */}
); } Object.assign(window, { TopBar, MyBubble, TheirBubble, SmallBtn, InputBar, SpeakerTab, SectionLabel, PhoneShell, IconBtn, HeaderIcon, LangSlot });