/* page-messages.jsx — agency-internal Messages. Closes GAP-C2. Threaded DM + group chat for managers and reps. Lives alongside the broadcast tool (Admin) and the notifications panel. Two-column layout: • Left — thread list (DMs + groups), sorted by lastMessageAt desc. • Right — selected thread's message stream + composer. Reads from window.AppData.{THREADS, THREAD_MEMBERS, MESSAGES} which data.jsx hydrates from public.{threads, thread_members, messages}. Writes through window.AppData.mutate.{threadEnsure, messagePost}. */ (function () { const fmtTime = (iso) => { if (!iso) return ""; const d = new Date(iso), now = Date.now(), m = Math.round((now - d) / 60000); if (m < 1) return "now"; if (m < 60) return `${m}m`; if (m < 1440) return `${Math.round(m / 60)}h`; return d.toLocaleDateString([], { month: "short", day: "numeric" }); }; function PageMessages({ role = "rep" }) { const [, force] = React.useState(0); React.useEffect(() => { const fn = () => force(n => n + 1); window.addEventListener("data:hydrated", fn); window.addEventListener("data:mutated", fn); window.addEventListener("data:realtime", fn); return () => { window.removeEventListener("data:hydrated", fn); window.removeEventListener("data:mutated", fn); window.removeEventListener("data:realtime", fn); }; }, []); const meIdent = (typeof window !== "undefined" && window.me && window.me()) || null; const myHandle = meIdent?.handle || (AppData.REPS && AppData.REPS[0] && AppData.REPS[0].handle) || "(self)"; const reps = AppData.REPS || []; const repByHandle = (h) => reps.find(r => r.handle === h); const allThreads = AppData.THREADS || []; const allMembers = AppData.THREAD_MEMBERS || []; const allMessages = AppData.MESSAGES || []; // Threads I'm a member of (or empty list when realtime hasn't seeded any) const myThreadIds = new Set(allMembers.filter(m => m.member === myHandle).map(m => m.threadId)); const myThreads = allThreads .filter(t => myThreadIds.has(t.id)) .sort((a, b) => new Date(b.lastMessageAt || 0) - new Date(a.lastMessageAt || 0)); const [activeId, setActiveId] = React.useState(myThreads[0]?.id || null); const [composer, setComposer] = React.useState(""); const [composeOpen, setComposeOpen] = React.useState(false); const streamRef = React.useRef(null); // Auto-pick the first thread on first render once myThreads resolves React.useEffect(() => { if (!activeId && myThreads.length) setActiveId(myThreads[0].id); }, [myThreads.length, activeId]); // Auto-scroll stream to bottom on new messages const activeMessages = React.useMemo(() => { if (!activeId) return []; return allMessages .filter(m => m.threadId === activeId) .sort((a, b) => new Date(a.createdAt) - new Date(b.createdAt)); }, [activeId, allMessages.length]); React.useEffect(() => { if (streamRef.current) streamRef.current.scrollTop = streamRef.current.scrollHeight; }, [activeMessages.length, activeId]); const activeThread = myThreads.find(t => t.id === activeId); const activeOtherMembers = allMembers .filter(m => m.threadId === activeId && m.member !== myHandle) .map(m => repByHandle(m.member) || { handle: m.member, name: m.member }); const threadLabel = (t) => { if (t.subject) return t.subject; const others = allMembers .filter(m => m.threadId === t.id && m.member !== myHandle) .map(m => repByHandle(m.member)?.name || m.member); return others.length === 0 ? "(only you)" : others.join(", "); }; const threadPreview = (t) => { const last = allMessages.filter(m => m.threadId === t.id).sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt))[0]; return last ? (last.sender === myHandle ? `You: ${last.body}` : last.body) : "(no messages yet)"; }; const send = async () => { const body = composer.trim(); if (!body || !activeId) return; setComposer(""); try { await window.AppData.mutate.messagePost({ threadId: activeId, body }); } catch (_e) {} }; const onComposerKey = (e) => { if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); send(); } }; const startNewDm = async (handle) => { if (!handle || handle === myHandle) return; try { const t = await window.AppData.mutate.threadEnsure({ memberHandles: [myHandle, handle], kind: "dm" }); setActiveId(t.id); setComposeOpen(false); } catch (_e) {} }; return (
Messages
{myThreads.length} thread{myThreads.length === 1 ? "" : "s"} · DMs + group chats
{/* ── Thread list ─────────────────────────────────────────── */}
Threads
{myThreads.length === 0 && (
No threads yet.
)} {myThreads.map(t => { const active = t.id === activeId; const KindIcon = t.kind === "group" ? Icons.Users : Icons.MessageSquare; return (
setActiveId(t.id)} style={{ padding: "10px 12px", cursor: "pointer", borderBottom: "1px solid var(--border-subtle)", background: active ? "var(--bg-raised)" : "transparent", }}>
{threadLabel(t)} {fmtTime(t.lastMessageAt)}
{threadPreview(t)}
); })}
{/* ── Active thread ───────────────────────────────────────── */}
{!activeThread && (
Select a thread or start a new one.
)} {activeThread && (() => { const HeadIcon = activeThread.kind === "group" ? Icons.Users : Icons.MessageSquare; return ( <>
{threadLabel(activeThread)}
{activeOtherMembers.length === 0 ? "just you" : activeOtherMembers.map(m => m.name).join(" · ")}
{activeMessages.length === 0 && (
No messages yet — say something.
)} {activeMessages.map((m, i) => { const mine = m.sender === myHandle; const senderRep = repByHandle(m.sender); const showHeader = i === 0 || activeMessages[i - 1].sender !== m.sender; return (
{showHeader && (
{mine ? "You" : (senderRep?.name || m.sender)} · {fmtTime(m.createdAt)}
)}
{m.body}
); })}