// Start-new-conversation modal. Triggered by the "Start New" button in the
// conversation list header.
//
// One field does the work: type a name to search contacts and teammates, or
// type a number to reach someone who is not a contact yet. Both resolve to the
// same recipient, and the footer offers the only two things you can do with
// one — message or call. The footer does not exist until there is a recipient,
// so the modal never shows an action that cannot fire.
//
// The body is a single slot with five states:
//
// empty the hint — what this field accepts
// too short search waits for two characters rather than matching on one
// searching skeleton rows, so the list does not flash in and out
// results contacts, then teammates. A typed number leads the list as
// "not in contacts", because that is the one row search cannot
// confirm and the one the user most needs offered
// keypad the dialpad, replacing the list — you are dialling, not
// searching, so a stale result list underneath would only lie
//
// Keyboard: up/down move the cursor, Enter messages, Cmd/Ctrl+Enter calls, Esc
// closes — the audio popover first when that is open, so one Esc never does two
// things. With the keypad open, physical digits light the on-screen key, so the
// two ways in don't feel like two different modals.
//
// The From line is a text link rather than a boxed select: it is set correctly
// almost every time, and a full-width field at the top of the modal reads as
// the first thing to fill in when the recipient is.
const StartNewModal = ({ open, onClose, onMessage, onCall }) => {
const lines = window.PHONE_LINES || [];
// Search waits for two characters — one matches most of the book, so the
// first keystroke would render a list that is never the answer.
const MIN_Q = 2;
const SEARCH_MS = 280;
// Contacts come from the inbox and teammates from the agent list — the same
// records the rest of Conversations shows, so a name picked here looks the
// same once the thread opens.
const contacts = (window.THREADS || []).map((t) => ({
name: t.name, sub: t.phone, avatar: t.avatar,
tag: (t.tags && t.tags[0]) || null
}));
const team = (window.AGENTS || []).map((a) => ({
name: a.name, sub: a.role, avatar: a.initials, team: true
}));
const [lineIdx, setLineIdx] = useState(0);
const [linePop, setLinePop] = useState(false);
const [q, setQ] = useState("");
const [sel, setSel] = useState(null);
const [cur, setCur] = useState(0);
const [pad, setPad] = useState(false);
const [loading, setLoading] = useState(false);
const [settings, setSettings] = useState(false);
const [audio, setAudio] = useState({ mic: 0, spk: 0, ring: 0 });
const [flash, setFlash] = useState(null);
const inputRef = useRef(null);
// Reset on each open — a half-typed number from last time is never what the
// next conversation starts from.
useEffect(() => {
if (!open) return;
setLineIdx(0); setLinePop(false); setQ(""); setSel(null); setCur(0);
setPad(false); setLoading(false); setSettings(false); setFlash(null);
}, [open]);
// The skeleton is on a timer rather than tied to real work: it exists so the
// list settles once instead of rewriting itself on every keystroke. Whether
// it is showing is set as the query changes, not in an effect afterwards —
// an effect renders one frame of results first and the list visibly flickers.
useEffect(() => {
if (!loading) return;
const t = setTimeout(() => setLoading(false), SEARCH_MS);
return () => clearTimeout(t);
}, [loading, q]);
useEffect(() => {
if (open && !sel && inputRef.current) inputRef.current.focus();
}, [open, sel, pad]);
const digits = (v) => String(v || "").replace(/\D/g, "");
const isNum = (v) => /[0-9]/.test(v) && digits(v).length >= 3;
// Name match on the substring, number match on digits only, so "(415) 555"
// and "415555" are the same query.
const match = (list, s) => {
const k = s.trim().toLowerCase();
const d = digits(k);
return list.filter((p) =>
p.name.toLowerCase().includes(k) || (!!d && digits(p.sub).includes(d)));
};
const query = q.trim();
const items = pad || sel || loading || query.length < MIN_Q ? [] : [
...(isNum(query) ? [{ raw: true, name: query, sub: "Not in contacts — start a new thread" }] : []),
...match(contacts, query),
...match(team, query)
];
// What Enter would act on: an explicit pick, else the number on the keypad,
// else whatever the cursor is sitting on.
const recipient = sel ? sel :
pad ? isNum(q) ? { raw: true, name: q, sub: q } : null :
items[cur] || null;
const line = lines[lineIdx] || null;
const initials = (n) =>
String(n).replace(/\(.*\)/, "").trim().split(/\s+/).slice(0, 2)
.map((w) => w[0]).join("").toUpperCase();
const commit = (mode) => {
if (!recipient) return;
const payload = { to: recipient.name, line };
if (mode === "call") onCall(payload); else onMessage(payload);
};
const setQuery = (v) => {
setQ(v); setCur(0); setSel(null);
setLoading(!pad && v.trim().length >= MIN_Q);
};
// A physical digit lights the matching on-screen key. The character still
// reaches the input — this only makes the keypad look connected to the
// keyboard rather than decorative.
const flashKey = (k) => {
setFlash(k);
setTimeout(() => setFlash((f) => (f === k ? null : f)), 160);
};
// Escape has to clear the popovers before it closes the modal, or a stray
// Esc loses everything typed just to dismiss a menu.
useEffect(() => {
if (!open) return;
const onKey = (e) => {
if (e.key === "Escape") {
if (settings) { setSettings(false); return; }
if (linePop) { setLinePop(false); return; }
onClose();
return;
}
if (pad && /^[0-9*#]$/.test(e.key)) flashKey(e.key);
const n = items.length;
if (e.key === "ArrowDown" && n) { e.preventDefault(); setCur((c) => (c + 1) % n); }
if (e.key === "ArrowUp" && n) { e.preventDefault(); setCur((c) => (c - 1 + n) % n); }
if (e.key === "Enter" && recipient) {
e.preventDefault();
commit(e.metaKey || e.ctrlKey ? "call" : "message");
}
};
document.addEventListener("keydown", onKey);
return () => document.removeEventListener("keydown", onKey);
}, [open, settings, linePop, pad, items.length, recipient, cur, lineIdx]);
// Any click outside an open popover closes it — including a click on the
// modal's own body, which is where people aim when they mean "never mind".
useEffect(() => {
if (!open || (!linePop && !settings)) return;
const onDown = (e) => {
if (linePop && !e.target.closest("[data-snm-line]")) setLinePop(false);
if (settings && !e.target.closest("[data-snm-audio]")) setSettings(false);
};
document.addEventListener("mousedown", onDown);
return () => document.removeEventListener("mousedown", onDown);
}, [open, linePop, settings]);
if (!open) return null;
const C = {
brand: "#004CE6", brandHover: "#003BB3", brandSoft: "#EFF8FF", brandLine: "#B2DDFF",
ink: "#101828", ink2: "#344054", muted: "#667085", faint: "#98A2B3",
line: "#E4E7EC", line2: "#D0D5DD", soft: "#F2F4F7", canvas: "#F9FAFB",
rawBg: "#FFFAEB", rawFg: "#B54708"
};
const KEYS = [
["1", ""], ["2", "ABC"], ["3", "DEF"],
["4", "GHI"], ["5", "JKL"], ["6", "MNO"],
["7", "PQRS"], ["8", "TUV"], ["9", "WXYZ"],
["*", ""], ["0", "+"], ["#", ""]];
const DEVICES = {
mic: ["Default — MacBook Pro Microphone (Built-in)", "Jabra Evolve2 65", "AirPods Pro", "Studio Display Microphone"],
spk: ["Default — MacBook Pro Speakers (Built-in)", "Jabra Evolve2 65", "AirPods Pro", "Studio Display Speakers"],
ring: ["Default — MacBook Pro Speakers (Built-in)", "Jabra Evolve2 65", "AirPods Pro", "Studio Display Speakers"]
};
const kbd = {
fontFamily: "inherit", fontSize: 11, border: `1px solid ${C.line}`,
borderBottomWidth: 2, borderRadius: 5, padding: "1px 5px",
background: "#FFFFFF", color: C.muted
};
const toolBtn = (on) => ({
width: 32, height: 32, borderRadius: 8, flex: "0 0 32px",
border: `1px solid ${on ? C.brandLine : C.line}`,
background: on ? C.brandSoft : "#FFFFFF",
color: on ? C.brand : C.muted,
display: "grid", placeItems: "center", cursor: "pointer", padding: 0
});
const hint = (text) =>
{if (e.target === e.currentTarget) onClose();}}
style={{
position: "fixed", inset: 0, zIndex: 200,
// No dimming or blur — the modal sits over the app undimmed, so the
// conversation you were reading stays legible behind it. The layer is
// still here, just transparent: it is what catches a click-outside,
// and it is what centres the card.
background: "transparent",
display: "flex", alignItems: "center", justifyContent: "center",
padding: 24
}}>
e.stopPropagation()}
style={{
position: "relative", width: 440, boxSizing: "border-box",
background: "#FFFFFF", borderRadius: 16,
// With nothing dimmed behind it the card has to draw its own edge: a
// real border rather than the 4% ring that was only ever legible
// against a darkened app. The shadow still does the lifting.
border: `1px solid ${C.line}`,
boxShadow: "0 24px 64px -12px rgba(16,24,40,0.30)",
fontFamily: "Inter, sans-serif",
overflow: linePop || settings ? "visible" : "hidden",
animation: "snmPop .22s cubic-bezier(.2,.9,.3,1)"
}}>
{/* Header — title, and the audio settings the call will use */}
{/* Body — hint, skeleton, results, empty, or the keypad */}
{sel ? null :
pad ?
{sep}
{KEYS.map(([k, sub]) =>
)}
:
!query.length ?
hint("Search your contacts by name, or type a full number to start a new thread.") :
query.length < MIN_Q ?
hint(`Keep typing — search starts at ${MIN_Q} characters.`) :
loading ?
{sep}
{[0, 1, 2].map((r) =>
)}
:
!items.length ?
{sep}
No contact matches “{query}”. Enter a full phone number to reach someone new.
:
{sep}
{items.map((p, i) => )}
}
{/* Footer — only once there is someone to reach */}
{recipient &&