);
}
// ─── Linkified composer input ───
// A contentEditable that renders detected URLs in primary blue with a dotted
// underline on hover. Behaves like a plain textarea to the caller.
const URL_RE = /((?:https?:\/\/|www\.)[^\s<>"']+|[a-z0-9][a-z0-9-]*(?:\.[a-z0-9-]+)*\.(?:com|net|org|io|co|ai|dev|app|me|in|us|uk|xyz|link|site)(?:\/[^\s<>"']*)?)/gi;
if (!document.getElementById("composer-linkify-css")) {
const st = document.createElement("style");
st.id = "composer-linkify-css";
st.textContent =
".cmp-input{white-space:pre-wrap;word-break:break-word;overflow-wrap:anywhere}" +
".cmp-input:empty:before{content:attr(data-placeholder);color:#98A2B3;pointer-events:none}" +
".cmp-input .cmp-url{color:#004CE6;text-decoration:none;border-bottom:1px dotted transparent}" +
".cmp-input .cmp-url:hover{border-bottom-color:#004CE6;cursor:text}";
document.head.appendChild(st);
}
function escapeHTML(s) {
return s.replace(/&/g, "&").replace(//g, ">");
}
function linkifyHTML(text) {
URL_RE.lastIndex = 0;
let out = "",last = 0,m;
while (m = URL_RE.exec(text)) {
out += escapeHTML(text.slice(last, m.index));
out += '' + escapeHTML(m[0]) + "";
last = m.index + m[0].length;
}
out += escapeHTML(text.slice(last));
return out;
}
function caretOffset(el) {
const sel = window.getSelection();
if (!sel || sel.rangeCount === 0) return null;
const r = sel.getRangeAt(0);
if (!el.contains(r.startContainer)) return null;
const pre = r.cloneRange();
pre.selectNodeContents(el);
pre.setEnd(r.startContainer, r.startOffset);
return pre.toString().length;
}
function placeCaret(el, offset) {
const walker = document.createTreeWalker(el, NodeFilter.SHOW_TEXT, null);
let n,count = 0,range = document.createRange();
while (n = walker.nextNode()) {
const len = n.nodeValue.length;
if (count + len >= offset) {
range.setStart(n, Math.max(0, offset - count));
range.collapse(true);
const sel = window.getSelection();
sel.removeAllRanges();sel.addRange(range);
return;
}
count += len;
}
range.selectNodeContents(el);
range.collapse(false);
const sel = window.getSelection();
sel.removeAllRanges();sel.addRange(range);
}
function LinkifyInput({ value, onChange, placeholder, minHeight = 56, style }) {
const ref = useRef(null);
useEffect(() => {
const el = ref.current;
if (!el) return;
if (el.dataset.hl === value) return;
const focused = document.activeElement === el;
const off = focused ? caretOffset(el) : null;
el.innerHTML = value ? linkifyHTML(value) : "";
el.dataset.hl = value;
if (off != null) placeCaret(el, Math.min(off, value.length));
}, [value]);
return (
onChange(e.currentTarget.textContent)}
onPaste={(e) => {
e.preventDefault();
const t = (e.clipboardData || window.clipboardData).getData("text/plain");
document.execCommand("insertText", false, t);
}}
style={{
width: "100%", border: "none", outline: "none",
fontFamily: "inherit", fontSize: 13, lineHeight: 1.5, color: "#333",
background: "transparent", minHeight, ...style
}} />);
}
// ═══════════════════════════════════════════════
// V2 — SEGMENTED CONTROL COMPOSER
// ═══════════════════════════════════════════════
// `composeMode` runs the composer for a conversation that doesn't exist yet:
// Note is off the table until there's a thread to attach it to, interactions
// are blocked until `canInteract`, and the first Call/SMS/WhatsApp is handed
// to `onFirstInteraction` instead of being appended to a thread.
/* `omitModes` drops modes the host has no business offering. The campaign
queue's thread column is the first: the agent is already on the call it
would start, and a Call tab there would offer to place a second one. The
mode the composer opens on is whichever is left first, so removing Call
lands it on SMS rather than on a tab that is not there. */
function ComposerV2({ thread, permission, persona, composeMode = false, canInteract = true, onFirstInteraction, omitModes = [] }) {
const lines = buildLines();
const initialLine = (() => {
if (thread && thread.line) {
const match = lines.find((l) => l.label === thread.line);
if (match) return match.id;
}
const smsCapable = lines.find((l) => l.sms);
return smsCapable ? smsCapable.id : lines[0] && lines[0].id;
})();
// Only one call can be up at a time — app/call-experience.js owns that and
// says so on cx:active / cx:idle. Starting a second would silently replace
// the first, so Start Call closes while one is running.
const [callUp, setCallUp] = useState(!!window.__cxCallActive);
useEffect(() => {
const on = () => setCallUp(true);
const off = () => setCallUp(false);
window.addEventListener("cx:active", on);
window.addEventListener("cx:idle", off);
return () => {
window.removeEventListener("cx:active", on);
window.removeEventListener("cx:idle", off);
};
}, []);
const modes = modesConfig.filter((m) => omitModes.indexOf(m.id) < 0);
const firstMode = (modes[0] && modes[0].id) || "sms";
const [mode, setMode] = useState(firstMode);
const [selectedLine, setSelectedLine] = useState(initialLine);
const [lineDropOpen, setLineDropOpen] = useState(false);
const [scheduleOpen, setScheduleOpen] = useState(false);
// "Pick a time..." swaps the preset list for a datetime field in place.
const [pickerOpen, setPickerOpen] = useState(false);
const [pickerValue, setPickerValue] = useState("");
const [msgText, setMsgText] = useState("");
const [noteText, setNoteText] = useState("");
const [attachment, setAttachment] = useState(null);
// Call-mode tip strip visibility — driven by the Tweaks panel (default:
// hidden, so Call mode stays focused on the Start Call action; a host can
// bring it back with __TWEAKS.showCallTip = true).
const readTipTweak = () => !!(window.__TWEAKS && window.__TWEAKS.showCallTip === true);
const [showCallTip, setShowCallTip] = useState(readTipTweak);
useEffect(() => {
const h = () => setShowCallTip(readTipTweak());
window.addEventListener("convo:tweaksChanged", h);
return () => window.removeEventListener("convo:tweaksChanged", h);
}, []);
const lineRef = useRef(null);
const schedRef = useRef(null);
useOutsideClick(lineRef, () => setLineDropOpen(false));
useOutsideClick(schedRef, () => {setScheduleOpen(false);setPickerOpen(false);});
// Reset draft state when thread changes
useEffect(() => {
setMsgText("");
setNoteText("");
setAttachment(null);
setMode(firstMode);
setLineDropOpen(false);
setScheduleOpen(false);
setPickerOpen(false);
const next = (() => {
if (thread && thread.line) {
const match = lines.find((l) => l.label === thread.line);
if (match) return match.id;
}
const smsCapable = lines.find((l) => l.sms);
return smsCapable ? smsCapable.id : lines[0] && lines[0].id;
})();
setSelectedLine(next);
}, [thread && thread.id]);
// The new-conversation modal asks for a channel up front ("Send SMS"), so
// the composer opens on that mode rather than its Call default.
useEffect(() => {
const onMode = (e) => {
const m = e.detail && e.detail.mode;
if (!m || m === "note") return;
setMode(m);
setLineDropOpen(false);
setScheduleOpen(false);
setPickerOpen(false);
};
window.addEventListener("convo:composeMode", onMode);
return () => window.removeEventListener("convo:composeMode", onMode);
}, []);
// Listen for AI-driven draft injections (same contract V1 honors)
useEffect(() => {
const onDraft = (e) => {
const { text: draftText, channel, attachment: att } = e.detail || {};
if (!draftText) return;
if (channel === "note") {
setMode("note");
setNoteText(draftText);
} else {
setMode(channel === "whatsapp" ? "whatsapp" : "sms");
setMsgText(draftText);
setAttachment(att || null);
}
if (window.showAppToast) window.showAppToast("Draft ready — review before sending");
};
window.addEventListener("convo:draft", onDraft);
return () => window.removeEventListener("convo:draft", onDraft);
}, []);
const canEdit = permission === "full";
if (!canEdit) {
return (
🔒 You have read-only access to this conversation
);
}
const line = lines.find((l) => l.id === selectedLine) || lines[0];
const smsLines = lines.filter((l) => l.sms);
const voiceOnly = lines.filter((l) => !l.sms);
const waLines = lines.filter((l) => l.wa);
const notWaLines = lines.filter((l) => !l.wa);
const isWa = mode === "whatsapp";
const isMsg = mode === "sms" || isWa;
const currentMode = modes.find((m) => m.id === mode);
// Outside WhatsApp's 24-hour reply window the composer can't send free text
// — only a template Meta has approved. The prototype pins that state to one
// line (Support — US) so it can be demonstrated on demand rather than
// depending on a real clock.
const waGated = isWa && selectedLine === WA_GATED_LINE;
const [tplOpen, setTplOpen] = useState(false);
// Leaving WhatsApp (or switching to an ungated line) closes the picker with it.
useEffect(() => {if (!waGated) setTplOpen(false);}, [waGated]);
// Send needs somewhere to send to *and* something to say — a recipient
// alone shouldn't light the button up.
const canSend = canInteract && msgText.trim().length > 0 && !waGated;
const canDial = canInteract && !callUp;
// Which lines the picker offers for the current mode, and which it greys out.
const pickerLines = isWa ? waLines : isMsg ? smsLines : lines;
const pickerGreyed = isWa ? notWaLines : isMsg ? voiceOnly : null;
// Keep the selected line valid for the mode — WhatsApp only runs on the
// numbers registered for it, which is a narrower set than SMS.
useEffect(() => {
if (!line) return;
if (isWa && !line.wa) {
const f = waLines[0];
if (f) setSelectedLine(f.id);
} else if (isMsg && !isWa && !line.sms) {
const f = smsLines[0];
if (f) setSelectedLine(f.id);
}
}, [mode]);
const getPillLeft = () => {
let left = 3;
for (const m of modes) {
if (m.id === mode) break;
left += iconW + segGap;
}
return left;
};
const bodyH = 130;
const fmtClock = (d) => {
let h = d.getHours();
const m = String(d.getMinutes()).padStart(2, "0");
const ampm = h >= 12 ? "PM" : "AM";
h = h % 12 || 12;
return `${h}:${m} ${ampm}`;
};
const fmtTime = () => fmtClock(new Date());
// Delivery stamp for a scheduled send. Today needs no date qualifier;
// anything further out does, or "9:00 AM" on its own reads as today.
const SCHED_MONTHS = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
const SCHED_DAYS = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
// Header stamp for the scheduled bubble — the full "when", spelled out the
// way the strip shows it: "Mon, 5 May · 7:52 pm".
const fmtScheduleStamp = (d) =>
`${SCHED_DAYS[d.getDay()]}, ${d.getDate()} ${SCHED_MONTHS[d.getMonth()]} · ${fmtClock(d).toLowerCase()}`;
const fmtDelivery = (d) => {
const now = new Date();
const tomorrow = new Date(now);
tomorrow.setDate(now.getDate() + 1);
const clock = fmtClock(d);
if (d.toDateString() === now.toDateString()) return clock;
if (d.toDateString() === tomorrow.toDateString()) return `Tomorrow, ${clock}`;
return `${SCHED_MONTHS[d.getMonth()]} ${d.getDate()}, ${clock}`;
};
// Menu label -> the moment the message actually goes out.
const SCHEDULE_PRESETS = [
{ label: "In 30 minutes", at: () => {const d = new Date();d.setMinutes(d.getMinutes() + 30);return d;} },
{ label: "In 1 hour", at: () => {const d = new Date();d.setHours(d.getHours() + 1);return d;} },
{ label: "Tomorrow 9:00 AM", at: () => {const d = new Date();d.setDate(d.getDate() + 1);d.setHours(9, 0, 0, 0);return d;} }];
const appendMessage = (msg) => {
// In compose mode there is no thread yet — hand the message up so the
// conversation can be created around it.
if (composeMode) {
if (onFirstInteraction) onFirstInteraction(msg, line);
return;
}
window.dispatchEvent(new CustomEvent("convo:appendMessage", {
detail: { threadId: thread && thread.id, message: msg }
}));
};
const sendMessage = () => {
if (!msgText.trim() || !canInteract) return;
appendMessage({
kind: "sms",
dir: "out",
text: msgText.trim(),
attachment: attachment,
time: fmtTime(),
author: persona === "admin" ? "You" : "You",
channel: mode // "sms" | "whatsapp"
});
setMsgText("");
setAttachment(null);
if (window.showAppToast) window.showAppToast(mode === "whatsapp" ? "WhatsApp sent" : "SMS sent");
};
// Scheduling takes the draft out of the composer the same way sending does
// — it is queued to go out, not still waiting to be written — and drops a
// bubble in the thread stamped with when it will be delivered, not now.
// SMS/MMS only: WhatsApp has no schedule affordance.
const scheduleMessage = (at) => {
if (!canSend || isWa) return;
const deliverAt = fmtDelivery(at);
setScheduleOpen(false);
setPickerOpen(false);
appendMessage({
kind: "sms",
dir: "out",
text: msgText.trim(),
attachment: attachment,
// The bubble's stamp is the delivery time, not the send time. The
// header strip carries the full date; the footer just the clock.
time: fmtClock(at).toLowerCase(),
scheduled: true,
source: { type: "scheduled", name: fmtScheduleStamp(at) },
author: "You",
channel: "sms"
});
setMsgText("");
setAttachment(null);
window.dispatchEvent(new CustomEvent("convo:toast", {
detail: { msg: `SMS scheduled — ${deliverAt}` }
}));
};
// Templates go out as a normal outbound WhatsApp bubble. Placeholders are
// resolved against the contact the same way the real send would.
const sendTemplate = (tpl) => {
// {{1}} name, {{2}} who they're seeing, {{3}} when — the three the
// seeded templates use. Anything else is left visible rather than
// silently blanked, so an unfilled variable is obvious.
const fill = (s) => s.
replace(/\{\{1\}\}/g, thread && thread.name ? String(thread.name).split(" ")[0] : "there").
replace(/\{\{2\}\}/g, "your mentor").
replace(/\{\{3\}\}/g, "Thursday at 5:30 pm");
appendMessage({
kind: "sms",
dir: "out",
text: [tpl.header, fill(tpl.body)].filter(Boolean).join("\n"),
time: fmtTime(),
author: "You",
channel: "whatsapp"
});
setTplOpen(false);
window.dispatchEvent(new CustomEvent("convo:toast", { detail: { msg: `Template “${tpl.name}” sent` } }));
};
const saveNote = () => {
if (!noteText.trim()) return;
const userName = window.CURRENT_USERS && window.CURRENT_USERS[persona] && window.CURRENT_USERS[persona].name || "You";
appendMessage({
kind: "note",
dir: "out",
text: noteText.trim(),
time: fmtTime(),
author: userName
});
setNoteText("");
if (window.showAppToast) window.showAppToast("Internal note saved");
};
const startCall = () => {
if (!canInteract || window.__cxCallActive) return;
const card = {
kind: "call",
dir: "out",
status: "connected",
duration: "00:00",
time: fmtTime(),
author: window.CURRENT_USERS && window.CURRENT_USERS[persona] && window.CURRENT_USERS[persona].name || "You",
summary: "Call started from composer."
};
// Compose mode: the thread has to exist before the dialer can open on it.
if (composeMode) {
appendMessage(card);
return;
}
// Trigger the floating dummy dialer (call-widget.jsx listens for this)
if (window.startCall) {
window.startCall(thread);
} else {
window.dispatchEvent(new CustomEvent("convo:call", { detail: { thread } }));
}
/* No card appended here. This used to add `card` "for continuity",
because the thread had no other sign that a call was going out. The
thread draws the live call itself now — the ongoing card in
convo-app.jsx — so appending this one would show the same call twice,
and the copy of it that is a finished 00:00 call is the one that never
happened. The compose-mode branch above still appends, because there
is no call to draw: that path has no thread for the dialer to open on
yet, so the card is all there is. */
};
return (
/* The strip the composer's card sits on. `--cmp-surface` so a host can
make it continue whatever the thread above it is on — the campaign
queue sets it to the scroller's own #FAFBFC, where a white band
across the bottom read as a separate surface. A variable rather than
an override, because this background is an inline style and only
!important would beat it from outside. */
{/* ═══ HEADER ═══ */}
{/* Segmented control */}
{modes.map((m) => {
const isActive = mode === m.id;
// A note is an annotation on an existing conversation — there's
// nothing to annotate until the first real interaction happens.
const isDisabled = composeMode && m.id === "note";
const tint = isDisabled ? C.faint : isActive ? m.color : C.muted;
return (
);
})}
{/* Line selector — Call, SMS, WhatsApp */}
{(mode === "call" || isMsg) && line &&
{/* Tip strip + Start Call — inline row, tip fills available space */}
{!showCallTip && }
{showCallTip &&
TIP
{(() => {
const first = thread && thread.name ? thread.name.split(" ")[0] : "them";
const isNew = !!(thread && thread.__isNew);
const contextTips = [
`Follow up on the showcase tape ${first} mentioned last week — has it gone out yet?`,
`${first}'s daughter had a tournament this weekend — ask how it went before getting into logistics.`,
`${first} said they'd send the updated roster by Friday — gentle reminder if it's still pending.`,
`Ask ${first} how the new training schedule is landing with the team.`,
`${first} flagged a scheduling conflict last call — confirm it's resolved before booking the next session.`];
// For brand-new conversations (or when there's no prior
// context to mine), fall back to a generic behavioural
// opener — small talk before getting into business.
const genericTips = [
`Open with something light — ask how their week is going before getting into the ask.`,
`Mention the weather where they are; quick rapport-builder before the main topic.`,
`Ask what they're working on this week — it's a low-pressure way to start the thread.`,
`Lead with a friendly intro and your name; keep the first message short and human.`,
`Find one personal detail to ask about (weekend plans, hometown team) before pitching anything.`];
const tips = isNew ? genericTips : contextTips;
const idx = thread && thread.id ?
Math.abs([...thread.id].reduce((a, c) => a + c.charCodeAt(0), 0)) % tips.length : 0;
return `"${tips[idx]}"`;
})()}
}
{/* Calls are instant only — scheduling lives on the message
composer, where a queued send is the useful action. */}
{/* ═══ BODY — SMS / WHATSAPP ═══ */}
{waGated ?
/* Past the 24-hour window the input and its toolbar are replaced
wholesale — there is nothing free-text to send. */
setTplOpen(true)} /> :
<>
{attachment &&
PDF
{attachment.name}
{attachment.size}
}
{[ClipIcon, EmojiIcon, SparkIcon].map((I, i) =>
)}
{msgText.length}/1600
{/* Send now, or queue it — the caret opens the schedule menu.
WhatsApp has no caret: scheduling is SMS/MMS only, so its
Send button keeps the plain full-radius shape. Both halves
need something to send, so the caret follows canSend. */}