// Thread (conversation) view // ----- Toast system (shared across a single ConvoApp instance via window event bus) ----- const showToast = (msg) => { const ev = new CustomEvent("convo:toast", { detail: { msg } }); window.dispatchEvent(ev); }; // ----- AnimatedMount: keeps children mounted through an exit animation, then removes. // Renders
and unmounts after // `duration` ms when toggled off. Pair with CSS keyframes on .baseClass.in / .out. const AnimatedMount = ({ show, baseClass, duration = 220, style, children }) => { const [render, setRender] = useState(show); useEffect(() => { if (show) { setRender(true); return undefined; } const t = setTimeout(() => setRender(false), duration); return () => clearTimeout(t); }, [show, duration]); if (!render) return null; return (
{children}
); }; const ToastHost = () => { const [toasts, setToasts] = useState([]); useEffect(() => { const onToast = (e) => { const id = Math.random().toString(36).slice(2); setToasts((t) => [...t, { id, msg: e.detail.msg }]); setTimeout(() => setToasts((t) => t.filter((x) => x.id !== id)), 2600); }; window.addEventListener("convo:toast", onToast); return () => window.removeEventListener("convo:toast", onToast); }, []); return (
{toasts.map((t) =>
{t.msg}
)}
); }; window.ToastHost = ToastHost; // ----- Header with 3-dot menu ----- // The first item flips with the conversation's own state — you can only mark // an unread conversation read, and vice versa. const headerMenuItems = (isUnread) => [ { id: isUnread ? "markRead" : "markUnread", label: isUnread ? "Mark as read" : "Mark as unread", icon: I.email, toast: isUnread ? "Marked as read" : "Marked as unread" }, { id: "export", label: "Export Chat", icon: I.download, toast: "Chat exported" }, { id: "archive", label: "Archive", icon: I.archive, toast: "Conversation archived" }, { divider: true }, { id: "dnm", label: "Add to DNM", icon: I.messageSquareOff, toast: "Added to DNM list" }, { id: "dnc", label: "Add to DNC", icon: I.phoneOff, toast: "Added to DNC list" }, { id: "blacklist", label: "Add to Blacklist", icon: I.chatBan, toast: "Added to blacklist" }, { id: "delete", label: "Delete", icon: I.trash, toast: "Conversation deleted", destructive: true }]; // Contact-detail header 3-dot menu — quieter, contact-scoped actions const CONTACT_MENU_ITEMS = [ { id: "dialer", label: "Add to Sales Dialer", icon: I.dialer, toast: "Added to Sales Dialer" }, { id: "dnm", label: "Mark as DNM", icon: I.ban, toast: "Marked as DNM (do not message)" }, { id: "blacklist", label: "Blacklist contact", icon: I.userX, toast: "Contact blacklisted", destructive: true }]; window.CONTACT_MENU_ITEMS = CONTACT_MENU_ITEMS; // Header AI button — replaces the old header call button. Click recalls // the floating AI summary widget when it's been dismissed; while visible, // the button shows an "active" purple state and clicking it does nothing // (the widget is already on screen). const HeaderAIButton = ({ thread }) => { const [hover, setHover] = useState(false); const [visible, setVisible] = useState( typeof window !== "undefined" ? !!window.__aiSummaryWidgetVisible : true ); useEffect(() => { const onState = (e) => setVisible(!!(e.detail && e.detail.visible)); window.addEventListener("aiSummaryWidget:state", onState); setVisible(!!window.__aiSummaryWidgetVisible); return () => window.removeEventListener("aiSummaryWidget:state", onState); }, [thread.id]); const onClick = () => { if (visible) { window.dispatchEvent(new CustomEvent("convo:hideAISummary")); } else { window.dispatchEvent(new CustomEvent("convo:showAISummary")); } }; return (
setHover(true)} onMouseLeave={() => setHover(false)}> {hover &&
{visible ? "Hide AI summary" : "Show AI summary"}
Toggle the floating insights widget
}
); }; /* `chrome` says which of the header's controls this host wants. Everything is on unless said otherwise, so the Conversations app passes nothing and is unchanged. The campaign queue's thread column asks for almost none of it: the agent is inside a call, not triaging an inbox, so there is nothing to assign, nothing to close, and no summary to recall — and the one control it does want is the contact sheet, which takes the 3-dot menu's place because that is where a control for "what else is on screen" belongs. */ const ThreadHeader = ({ thread, permission, onCloseConversation, onToggleContact, showContact, currentUser, onToggleRead, chrome }) => { const canEdit = permission === "full"; const isClosed = thread.status === "closed"; const isUnread = thread.unread > 0 || !!thread.__dotUnread; const [menuOpen, setMenuOpen] = useState(false); const menuRef = useRef(null); const [assignOpen, setAssignOpen] = useState(false); const [assignQuery, setAssignQuery] = useState(""); const assignRef = useRef(null); const ch = chrome || {}; const show = (k) => ch[k] !== false; const agents = window.AGENTS || []; const initialAssignee = thread.assignee ? agents.find((a) => a.id === thread.assignee.id) || { id: thread.assignee.id, name: thread.assignee.name, initials: (thread.assignee.name || "?").split(" ").map((w) => w[0]).join("").slice(0, 2), color: "#667085" } : null; const [assignee, setAssignee] = useState(initialAssignee); useEffect(() => { const next = thread.assignee ? agents.find((a) => a.id === thread.assignee.id) || null : null; setAssignee(next); }, [thread.id]); useEffect(() => { if (!menuOpen) return; const close = (e) => {if (menuRef.current && !menuRef.current.contains(e.target)) setMenuOpen(false);}; document.addEventListener("mousedown", close); return () => document.removeEventListener("mousedown", close); }, [menuOpen]); useEffect(() => { if (!assignOpen) return; const close = (e) => {if (assignRef.current && !assignRef.current.contains(e.target)) {setAssignOpen(false);setAssignQuery("");}}; document.addEventListener("mousedown", close); return () => document.removeEventListener("mousedown", close); }, [assignOpen]); const filteredAgents = agents.filter((a) => a.name.toLowerCase().includes(assignQuery.toLowerCase())); const assigneeLabel = assignee ? currentUser && assignee.id === currentUser.id ? `${assignee.name.split(" ")[0]} (You)` : assignee.name : "Unassigned"; return (
{e.currentTarget.style.background = "#F9FAFB";}} onMouseLeave={(e) => {e.currentTarget.style.background = "transparent";}}>
{thread.avatar}
{thread.isContact ? <>
{thread.name}
{thread.phone}
:
{thread.phone || thread.name}
}
{/* 1. AI sparkle button — recalls the floating AI summary widget */} {show("ai") && } {/* 2. Assign dropdown */} {show("assign") &&
{assignOpen &&
setAssignQuery(e.target.value)} placeholder="Search agents..." style={{ flex: 1, border: "none", outline: "none", background: "transparent", fontSize: 12, color: "#101828" }} />
{filteredAgents.map((a) => { const active = assignee && a.id === assignee.id; const isYou = currentUser && a.id === currentUser.id; const statusColors = { available: "#12B76A", oncall: "#004CE6", away: "#F79009", offline: "#98A2B3" }; return ( ); })} {filteredAgents.length === 0 &&
No agents match
}
}
} {/* 3. Close / Closed — the same control both ways round. Once closed it reads its new state and offers the reverse action on hover. */} {show("close") && (canEdit ? :
View only
)} {/* 4. The 3-dot menu — or, where a host asks for it, the control that shows and hides the contact sheet beside this column. One slot: both answer "what else can be on screen", and a host that wants the sheet toggle has no use for mark-as-unread and delete. */} {ch.contactToggle ? : show("menu") &&
{menuOpen &&
{headerMenuItems(isUnread).map((item, i) => { if (item.divider) return (
); const IconC = item.icon; return ( ); })}
}
}
); }; const headerIconBtn = { width: 32, height: 32, display: "inline-flex", alignItems: "center", justifyContent: "center", borderRadius: 4, border: "1px solid #E4E7EC", background: "#FFFFFF", cursor: "pointer", padding: 0 }; // Thread event markers — what happened to the conversation, as opposed to what // was said in it. Assignment, open/close and campaign membership all land here. // // `m.at` is the full timestamp; it is shown on hover through the shared // [data-jc-tip] tooltip rather than printed on the marker, so the resting state // stays to one quiet line. Styling lives in styles/event-marker.css. const EVENT_ICON = { assigned: I.user, unassigned: I.userX, closed: I.checkCircle, reopened: I.refresh, campaign: I.megaphone }; const eventBody = (m) => { const who = {m.actor}; switch (m.event) { case "assigned":return <>Conversation assigned to {who}; case "unassigned":return <>Conversation unassigned; case "closed":return <>Conversation closed by {who}; case "reopened":return <>Conversation reopened by {who}; case "campaign":return <>Contact added to campaign {m.campaign}; default:return null;} }; // Markers raised by a live action carry a real timestamp, in the same shape as // the seeded ones ("Apr 28, 2026 7:33 PM"). const _EV_MONTHS = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]; const eventStamp = () => { const d = new Date(); const mins = String(d.getMinutes()).padStart(2, "0"); const ampm = d.getHours() >= 12 ? "PM" : "AM"; const h = d.getHours() % 12 || 12; return `${_EV_MONTHS[d.getMonth()]} ${d.getDate()}, ${d.getFullYear()} ${h}:${mins} ${ampm}`; }; // Drops a marker into a thread through the same channel messages use, so it // lands in the stream and scrolls into view like anything else. const appendEvent = (threadId, ev) => { if (!threadId) return; window.dispatchEvent(new CustomEvent("convo:appendMessage", { detail: { threadId, message: { kind: "event", at: eventStamp(), ...ev } } })); }; const EventMarker = ({ m }) => { const Ic = EVENT_ICON[m.event] || I.info; const body = eventBody(m); if (!body) return null; return (
{body}
); }; const DateChip = ({ label }) =>
{label}
; // Renders message text with real URLs turned into links — brand blue, with a // dotted underline on hover. Validated with the URL constructor so stray words // like "e.g." or "3.5" don't become links. const URL_RE = /((?:https?:\/\/|www\.)[^\s<>()]+[^\s<>().,!?;:'"])/gi; const LinkedText = ({ text }) => { if (!text || typeof text !== "string") return text || null; const parts = text.split(URL_RE); return ( <> {parts.map((part, i) => { if (i % 2 === 0) return part; const href = part.startsWith("http") ? part : `https://${part}`; let valid = false; try {const u = new URL(href);valid = !!u.hostname && u.hostname.includes(".");} catch (_) {valid = false;} if (!valid) return part; return ( {e.currentTarget.style.textDecoration = "underline dotted";e.currentTarget.style.textUnderlineOffset = "2px";}} onMouseLeave={(e) => {e.currentTarget.style.textDecoration = "none";}}> {part} ); })} ); }; // The channel mark that opens the bubble footer. const MsgChanIcon = ({ isWA }) => isWA ? : ; // Where a message came from when nobody typed it: an automation, a campaign // blast, or the scheduler. Raw SVGs rather than I.* because the shared Icon // wrapper pins itself to 16px inline, which a stylesheet can't scale down. const SRC_ICONS = { workflow: , campaign: , scheduled: }; const SRC_ARROW = ; // `nav` is the sidebar id the name links to. A source with no destination has // no tip and no `nav`, and renders as plain text. const SRC_META = { workflow: { label: "Workflow", tip: "View workflow", nav: "wf-voice" }, campaign: { label: "Campaign", tip: "View campaign", nav: "wf-bulk" }, // Nowhere to send a scheduled message — the thread is where it lives. scheduled: { label: "Scheduled" } }; // The header strip above a source-tagged bubble: icon, type, then the thing it // came from. A workflow or a campaign is somewhere you can go, so its name is a // link out; a scheduled send has no destination — the thread is the only place // it exists — so its stamp is plain text with nothing to click. const MsgSource = ({ source, bg, ink }) => { const meta = SRC_META[source.type]; if (!meta) return null; return (
{SRC_ICONS[source.type]} {meta.label} · {meta.tip ? : {source.name} }
); }; const Bubble = ({ m, user, thread }) => { const out = m.dir === "out"; const isWA = m.channel === "whatsapp"; const initials = out ? user.initials : (m.author || "?").split(" ").map((w) => w[0]).join("").slice(0, 2); // WhatsApp messages get a green-tinted bubble + a small brand mark in the // time row so the channel is legible without a heavy channel header. // SMS keeps the original light blue (out) / light grey (in) combo. const bubbleBg = isWA ? out ? "#E9F4E0" : "#F2F6EF" : out ? "#EAF2FE" : "#F4F5F8"; // Meta ink is tuned per tint so the line name sits on the bubble rather than // floating on it. The body colour and timestamp are left alone. const metaInk = isWA ? out ? "#4E7141" : "#5B7C4F" : out ? "#4B6490" : "#646F7E"; // Source header tints — one step deeper than the body so the strip reads as // part of the same bubble rather than a card stuck on top of it. const srcBg = isWA ? out ? "#DAECC6" : "#E4EEDB" : out ? "#DAE8FC" : "#E7EAF0"; const srcInk = isWA ? out ? "#3E5F31" : "#4A6A3E" : out ? "#39548A" : "#4A5566"; const isScheduled = !!m.scheduled || !!(m.source && m.source.type === "scheduled"); // Which number the message went out on / came in on. const lineName = m.line || thread && thread.line || ""; const lineNumber = (window.PHONE_LINES || []).find((l) => l.name === lineName); const channelLabel = isWA ? "WhatsApp" : "SMS"; const tip = `${out ? "Sent over" : "Received over"} ${channelLabel}` + ( lineNumber ? ` ${out ? "from" : "on"} ${lineNumber.phone}` : ""); return (
{initials}
{m.source && } {m.attachment && {if (!m.attachment.url) e.preventDefault();}} style={{ display: "flex", alignItems: "center", gap: 10, textDecoration: "none", background: "#FFFFFF", border: "1px solid #D0D5DD", borderRadius: 10, padding: "8px 10px", marginTop: 2, width: 250, height: 50, boxSizing: "border-box" }}> PDF {m.attachment.name} {m.attachment.size} } {/* Footer — channel + phone line on the left, timestamp on the right. The timestamp keeps exactly the treatment it had. */}
{lineName && <> | {lineName} } {/* A scheduled message hasn't been sent, so there is no send time to stamp and nothing to tick — the header strip already carries the only time it has. */} {!isScheduled && {m.time} {out && } }
); }; // Topic auto-extraction for connected calls. Picks 2–4 topics deterministically // per call message — keyword-matches against the summary first, then falls back // to a hash of m.id so each card has a stable, varied tag cloud. const CALL_TOPIC_LIBRARY = [ { label: "Pricing", match: /pric|cost|quote|tier|plan/i }, { label: "Renewal", match: /renew|contract|term/i }, { label: "Cancellation", match: /cancel|churn/i }, { label: "Billing issue", match: /bill|invoic|charge|refund/i }, { label: "Onboarding", match: /onboard|setup|get started|kick.?off/i }, { label: "Integration help", match: /integrat|webhook|api|sso/i }, { label: "Feature request", match: /feature|request|wishlist/i }, { label: "Bug report", match: /bug|broken|error|issue/i }, { label: "Demo request", match: /demo|walk.?through|trial/i }, { label: "Competitor", match: /competitor|vendor|alternative|compar/i }, { label: "Transcription", match: /transcrip|recording|note/i }, { label: "Pooled minutes", match: /pooled|minute|usage/i }, { label: "CTO review", match: /cto|tech review/i }, { label: "Procurement", match: /procurement|legal|sign.?off/i }]; const pickCallTopics = (m) => { const text = `${m.summary || ""} ${m.title || ""}`; const matched = CALL_TOPIC_LIBRARY. filter((t) => t.match.test(text)). map((t) => t.label); if (matched.length >= 2) return matched.slice(0, 4); // Fall back to deterministic pick from id so every card still gets a cloud const id = String(m.id || m.time || ""); let seed = 0; for (let i = 0; i < id.length; i++) seed = seed * 31 + id.charCodeAt(i) >>> 0; const pool = ["Pricing", "Renewal", "Onboarding", "Integration help", "Feature request", "Demo request", "Billing issue", "Competitor", "Transcription"]; const out = new Set(matched); let i = 0; while (out.size < 3 && i < 12) { out.add(pool[(seed + i) % pool.length]); i++; } return [...out].slice(0, 4); }; // ----- Call card with alignment, collapsible details + AI summary ----- // ----- Call card — three rows, no expanded drawer ----- // Ported from the Layout B prototype: row 1 says what happened, row 2 whether // you can hear it and where the record lives, row 3 what was said. Colours and // type sizes are mapped onto this project's palette and scale. const CC_PHONE_PATH = "M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2Z"; const CallGlyph = ({ variant }) => ; const CC_ICONS = { play: , pause: , chev: , ext: , bldg: , spark: , lock: , doc: , dots: }; // Only one recording plays at a time across the whole thread — starting a // second stops the first, which the source prototype handled with a module // global. Same idea here, via a tiny subscription. const ccPlayers = new Set(); const ccStopOthers = (me) => ccPlayers.forEach((stop) => stop !== me && stop()); const CallCard = ({ m, thread, user }) => { const missed = m.status === "missed"; const transferred = m.status === "transferred" || !!m.transferTo; /* A call that has not finished. It is the outbound card with three things taken out, because none of them exist yet: a length, a recording to play and a summary of what was said. What it gains is a clock that runs. The campaign queue puts one of these at the foot of the thread for the call the agent is on while they read it. */ const ongoing = m.status === "ongoing"; const out = m.dir === "out"; // The glyph carries the state at full strength; the duration badge echoes it // in the matching soft tint. The player stays neutral either way. const tone = transferred ? { accent: "#7A5AF8", bg: "#F4F3FF", fg: "#5925DC" } : missed ? { accent: "#D92D20", bg: "#FEF3F2", fg: "#B42318" } : ongoing ? { accent: "#12B76A", bg: "#ECFDF3", fg: "#067647" } : out ? { accent: "#004CE6", bg: "#EFF8FF", fg: "#175CD3" } : { accent: "#12B76A", bg: "#ECFDF3", fg: "#067647" }; const accent = tone.accent; const variant = transferred ? "fwd" : missed ? "missed" : out ? "out" : "in"; const kind = transferred ? "Transferred call" : missed ? "Missed call" : ongoing ? "Ongoing call" : out ? "Outbound call" : "Inbound call"; /* The clock the card runs while the call does. It counts from the second the card was mounted rather than from a timestamp, so it agrees with the dock's own timer to within the tick it started on. */ const [live, setLive] = useState(0); useEffect(() => { if (!ongoing) return; const id = setInterval(() => setLive((n) => n + 1), 1000); return () => clearInterval(id); }, [ongoing]); // The subtitle carries the outcome, so the status rarely repeats itself. const author = m.author || (user && user.name) || "—"; const who = transferred ? `${author} → ${m.transferTo || "Priya Shah"}` : missed ? "No one answered" : // Same line the finished outbound card carries: the author is the agent, so // "on the line with You" was addressing them about themselves. ongoing ? `Dialled by ${author}` : out ? `Dialled by ${author}` : `${author} answered`; const [open, setOpen] = useState(false); const [playing, setPlaying] = useState(false); const [pos, setPos] = useState(0); // seconds const [speed, setSpeed] = useState(1); const [speedOpen, setSpeedOpen] = useState(false); const [speedAt, setSpeedAt] = useState({ x: 0, y: 0 }); const trackRef = useRef(null); const speedRef = useRef(null); const totalSec = (() => { if (!m.duration) return 0; const [mm, ss] = String(m.duration).split(":").map(Number); return Math.max(1, (mm || 0) * 60 + (ss || 0)); })(); const fmt = (s) => `${Math.floor(s / 60)}:${String(Math.round(s) % 60).padStart(2, "0")}`; // Normalise "03:58" to "3:58" so the badge and playhead read the same way. const durLabel = m.duration ? fmt(totalSec) : null; // One time value only: total at rest, playhead while playing. const timeLabel = playing || pos > 0 ? fmt(pos) : durLabel || "0:00"; const stop = () => {setPlaying(false);setPos(0);}; useEffect(() => { ccPlayers.add(stop); return () => ccPlayers.delete(stop); }, []); useEffect(() => { if (!playing) return; const id = setInterval(() => { setPos((p) => { const next = p + totalSec / 180 * speed; if (next >= totalSec) {setPlaying(false);return 0;} return next; }); }, 100); return () => clearInterval(id); }, [playing, speed, totalSec]); useEffect(() => { if (!speedOpen) return; const away = (e) => {if (speedRef.current && !speedRef.current.contains(e.target)) setSpeedOpen(false);}; const esc = (e) => {if (e.key === "Escape") setSpeedOpen(false);}; document.addEventListener("mousedown", away); document.addEventListener("keydown", esc); return () => { document.removeEventListener("mousedown", away); document.removeEventListener("keydown", esc); }; }, [speedOpen]); const togglePlay = () => { if (playing) {setPlaying(false);return;} ccStopOthers(stop); setPlaying(true); }; const seek = (e) => { if (!trackRef.current) return; const r = trackRef.current.getBoundingClientRect(); setPos(Math.min(1, Math.max(0, (e.clientX - r.left) / r.width)) * totalSec); }; const pct = totalSec ? Math.min(100, pos / totalSec * 100) : 0; const lines = m.lines || [thread && thread.line].filter(Boolean); // Deterministic so a card keeps the same reference between renders. const logId = m.log || (() => { const src = `${thread && thread.id || ""}${m.time || ""}${m.duration || ""}`; let s = 0; for (let i = 0; i < src.length; i++) s = s * 31 + src.charCodeAt(i) >>> 0; return 600000 + s % 400000; })(); const topics = pickCallTopics(m); const brief = m.summary || (missed ? "No voicemail left. Nothing was spoken on this call." : "No summary generated for this call."); // Free plan gets one faded line and no topics. const freePlan = !!(window.__TWEAKS && window.__TWEAKS.callSummaryPlan === "free"); // Side and avatar follow whoever initiated the call, matching the message // bubbles either side of it. const initials = out ? user && user.initials || "ME" : thread && thread.avatar || (m.author || "?").split(" ").map((w) => w[0]).join("").slice(0, 2); return (
{initials}
{/* row 1 — what happened, how long, who took it */}
{kind} {/* Ring time on a missed call stays in the log entry, not here — nothing was spoken, so there's no length to report. An ongoing call has no final length either; it has a clock. */} {ongoing ? {fmt(live)} : durLabel && !missed && {durLabel}}
{who}
 {m.time}
{/* row 2 — playback, or a plain rule when there's nothing to hear */}
{missed || ongoing ?
:
{timeLabel} {/* Fixed to the viewport: the card clips its own overflow, so an absolutely-positioned menu would be cut off inside it. */} {speedOpen && {[0.5, 0.75, 1, 1.25, 2].map((r) => )} }
} {/* where the record lives — muted until hover, which is the only signal that they're clickable */}
{lines.map((l, i) => {i > 0 && →} )}
{/* row 3 — what was said, collapsed so a run of calls stays scannable. Nothing has been said yet on a call still running. */} {!ongoing &&
{open &&
{freePlan ? <>

{brief}

: <>

{brief}

{topics.length > 0 &&
{topics.map((t) => {t})}
} }
}
}
); }; // ----- Voice note — chat-bubble shaped, with waveform + duration ----- const VoiceNote = ({ m, thread, user }) => { const out = m.dir === "out"; const [open, setOpen] = useState(false); const initials = out ? user && user.initials || "ME" : thread && thread.avatar || (m.author || "?").split(" ").map((w) => w[0]).join("").slice(0, 2); const avatarBg = out ? "#EEF4FF" : "#EEF1F6"; const avatarFg = out ? "#3538CD" : "#475467"; const bubbleBg = out ? "#EAF2FE" : "#F4F5F8"; const accent = out ? "#3538CD" : "#475467"; // Deterministic waveform bars from id/time so it stays stable across renders. const seedSrc = String(m.time || m.author || "v") + (out ? "o" : "i"); let s = 0;for (let i = 0; i < seedSrc.length; i++) s = s * 31 + seedSrc.charCodeAt(i) >>> 0; const bars = Array.from({ length: 28 }, (_, i) => { s = s * 1664525 + 1013904223 >>> 0; return 4 + s % 16; // 4–19px }); return (
{initials}
{bars.map((h, i) => )}
{m.duration}
{m.transcript && } {open && m.transcript &&
"{m.transcript}"
} {m.time}
); }; const NoteCard = ({ m, user }) => { // Notes sit on the right like any outbound bubble — they're written by the // team, not the contact. The head names the author; the footer says who can // see it. const mine = m.author === user.name; const author = mine ? user.name || "You" : m.author || "Teammate"; const initials = (author || "?").split(" ").map((w) => w[0]).join("").slice(0, 2).toUpperCase(); return (
{/* Same avatar treatment as every other bubble — a note is still a message from the team, not a different species. */}
{initials}
{author}
{/* Body matches the SMS bubble exactly — same size, same leading. */}
Internal Note {m.time}
); }; // ----- From-line pop-out picker ----- const FromLinePicker = ({ thread }) => { const lines = window.PHONE_LINES || []; const initial = lines.find((l) => l.name === thread.line) || lines[0] || { name: thread.line, phone: "", flag: "🇺🇸" }; const [selected, setSelected] = useState(initial); const [open, setOpen] = useState(false); const ref = useRef(null); useEffect(() => { if (!open) return; const close = (e) => {if (ref.current && !ref.current.contains(e.target)) setOpen(false);}; document.addEventListener("mousedown", close); return () => document.removeEventListener("mousedown", close); }, [open]); // Re-sync when thread changes useEffect(() => { const next = lines.find((l) => l.name === thread.line); if (next) setSelected(next); }, [thread.id]); return (
{open &&
Send from
{lines.map((l) => { const active = l.id === selected.id; return ( ); })}
}
); }; const Composer = ({ permission, thread, persona }) => { // tab: null (idle — neither Message nor Note selected, primary Call shown) // | "message" | "note" const [tab, setTab] = useState(null); // Sub-channel for the Message tab const [msgChannel, setMsgChannel] = useState("sms"); const [msgOpen, setMsgOpen] = useState(false); const msgRef = useRef(null); const [text, setText] = useState(""); const canEdit = permission === "full"; const canNote = canEdit || persona === "admin"; // AI Summary widget visibility — when the user dismisses the floating widget // via its "x", the composer's sparkle button morphs into an "AI Summary" // pill so they can bring it back. const [aiSummaryDismissed, setAiSummaryDismissed] = useState(false); useEffect(() => { const onState = (e) => setAiSummaryDismissed(!!(e.detail && e.detail.dismissed)); window.addEventListener("convo:aiSummaryDismissed", onState); return () => window.removeEventListener("convo:aiSummaryDismissed", onState); }, []); // Reset on thread change (the widget itself resets, so this stays in sync) useEffect(() => {setAiSummaryDismissed(false);}, [thread.id]); // Listen for AI-generated draft injections from the conversation summary widget useEffect(() => { const onDraft = (e) => { const { text: draftText, channel } = e.detail || {}; if (!draftText) return; if (channel === "note") { if (!canNote) return; setTab("note"); } else { if (!canEdit) return; setTab("message"); if (channel === "sms" || channel === "whatsapp" || channel === "email") { setMsgChannel(channel); } } setText(draftText); if (window.showAppToast) window.showAppToast("Draft ready — review before sending"); }; window.addEventListener("convo:draft", onDraft); return () => window.removeEventListener("convo:draft", onDraft); }, [canEdit, canNote]); useEffect(() => { if (!msgOpen) return; const onDown = (e) => {if (msgRef.current && !msgRef.current.contains(e.target)) setMsgOpen(false);}; document.addEventListener("mousedown", onDown); return () => document.removeEventListener("mousedown", onDown); }, [msgOpen]); const MSG_CHANNELS = [ { id: "sms", label: "SMS", icon: I.sms, desc: "Standard text message" }, { id: "whatsapp", label: "WhatsApp", icon: I.whatsapp, desc: "Via WhatsApp Business" }, { id: "email", label: "Email", icon: I.email, desc: "Send via connected mailbox" }]; const currentMsg = MSG_CHANNELS.find((c) => c.id === msgChannel) || MSG_CHANNELS[0]; if (!canEdit && !canNote) { return (
You have read-only access to this conversation
); } const isNote = tab === "note"; const MsgIcon = currentMsg.icon; // (Call-only threads previously used a voice-only composer; we now // show the same interaction container for every thread for consistency.) const isMessageTab = tab === "message"; const showEditor = tab === "message" || tab === "note"; // Pill button styles for the new layout const pillBase = { display: "inline-flex", alignItems: "center", gap: 6, height: 36, padding: "0 14px", borderRadius: 8, border: "1px solid #E4E7EC", background: "#FFFFFF", cursor: "pointer", fontSize: 13, fontWeight: 500, color: "#344054", fontFamily: "inherit", lineHeight: 1 }; const pillActive = { ...pillBase, background: "#EFF8FF", border: "1px solid #B2DDFF", color: "#004CE6", fontWeight: 600 }; const pillDisabled = { ...pillBase, color: "#D0D5DD", cursor: "not-allowed", borderColor: "#F2F4F7" }; return (
{/* Top bar: from-line | divider | Message + chevron | Note | spacer | Call */}
{/* From-line picker (left) */} {/* Vertical divider */}
{/* Message button — sub-channel chevron in same pill when active */}
{isMessageTab && } {msgOpen &&
Channel
{MSG_CHANNELS.map((c) => { const active = c.id === msgChannel; const IconC = c.icon; return ( ); })}
}
{/* Note button */}
{/* Call button — primary green, right-aligned */}
{/* Editor — only mounted when Message or Note tab is active */}