e.stopPropagation()}>
Assign to
{TEAM_MEMBERS.map(m => (
assignTo(m.id)}
>
{m.initials}
{m.name}
{activeChat.assigneeId===m.id &&
))}
assignTo(null)}
>
Unassigned
{!activeChat.assigneeId &&
e.stopPropagation()}>
Message Templates
{filtered.length}
Sending to {activeChat.name} · {activeChat.phone || '+1 234 567 890'}
{Object.entries(CATEGORY_META).map(([k, m]) => (
setCategory(k)}
style={category === k ? { borderColor: m.color, color: m.color } : undefined}
>
{m.label}
))}
{filtered.length === 0 ? (
No templates match your search
) : filtered.map(t => {
const meta = CATEGORY_META[t.category] || CATEGORY_META.UTILITY;
return (
onSend(t)}>
{t.name}
{meta.label}
{t.body}
Send
);
})}
{/* ===== Col 1 — Nav Rail ===== */}
{/* ===== Col 2 — Filter Sidebar ===== */}
{/* VIEWS */}
{T('views')}
{VIEWS.map(v => (
setActiveView(v.k)}
>
{v.label}
{v.count != null && (
{v.count>99?'99+':v.count}
)}
))}
{/* DEPARTMENTS */}
setDeptsOpen(v=>!v)}>
{T('departments')}
{DEPARTMENTS.map(d => (
setActiveView(`dept:${d.id}`)}
>
{d.name}
{d.count}
))}
{/* LABELS */}
setLabelsOpen(v=>!v)} style={{flex:1}}>{T('labels')}
e.stopPropagation()}>
setLabelsOpen(v=>!v)}/>
{LABELS.map(l => (
setActiveView(`label:${l.id}`)}
>
{l.name}
{l.count}
))}
setActiveView('archived')}>
{T('archived')}
42
setActiveView('blocked')}>
{T('blocked')}
setActiveView('trash')}>
{T('trash')}
{/* ===== Col 3 — Chat list ===== */}
{/* Active Number Pill (replaces workspace header) */}
setNumPopOpen(v=>!v)}>
{combinedView ? (
<>
{T('allNumbers')}
{NUMBERS.length} numbers · {NUMBERS.reduce((s,n)=>s+n.unread,0)} unread
) : (
<>
{activeNum.flag}
{activeNum.phone}
{activeNum.name} · {activeNum.unread} unread
)}
{othersUnread > 0 && !combinedView && (
{othersUnread}
)}
⌘K
{T('allChats')}
{T('search')}
⇧ F
{filteredChats.length === 0 && (
No chats in this view
Try a different filter on the left.
)}
{filteredChats.map((c, idx) => {
// Vary which number each chat belongs to when showing combined view
const chatNum = NUMBERS[idx % NUMBERS.length];
return (
setSelectedChatId(c.id)}>
{c.name}
{c.flags.includes('pin') &&
{combinedView && (
{chatNum.flag}
{chatNum.cc}
)}
{c.time}
{c.typing ? {T('typing')}
: typeof c.preview === 'string' ? c.preview
: c.preview?.type === 'mtype' ? {c.preview.icon && }{c.preview.text}
: null}
{c.unread > 0 && {c.unread>99?'99+':c.unread} }
{c.labels.length > 0 && (
{c.labels.map((l,i) => (
{l.n}
))}
)}
);})}
{/* ===== Col 3 — Conversation pane ===== */}
{activeChat.initials}
{activeChat.name}
{T('clickEdit')}
{ e.stopPropagation(); setAssignSource(s => s==='head' ? null : 'head'); }}
title={activeAssignee ? `Assigned to ${activeAssignee.name}` : 'Unassigned — click to assign'}
>
{activeAssignee ? (
<>
{activeAssignee.initials}
{activeAssignee.name}
) : (
<>
Assign
)}
{assignSource === 'head' &&
}
{T('banner')}
{activeChat.messages.length === 0 ? (
24h window closed
This customer hasn't messaged you in the last 24 hours.
setTemplatesPanelOpen(true)}>
) : (
<>
{activeChat.messages.map((m, i) => {
if (m.t === 'sys') {
if (m.kind === 'missedCall') {
return
;
}
return
{m.text}
;
}
if (m.t === 'note') {
return (
{m.text}
{m.time}
);
}
if (m.t === 'audio') {
return (
{m.time} {m.tick && {m.tick} }
);
}
const isOut = m.t === 'out';
return (
{m.quote && (
{m.quote.qa}
{m.quote.text}
)}
{m.textHtml
?
: m.text}
{m.time}{isOut && m.tick && <> {m.tick} }
{m.reactions && (
{m.reactions}
)}
);
})}
)}
{[
{k:'reply', l:T('reply')},
{k:'note', l:T('note')},
{k:'templates', l:T('templates')},
{k:'quick', l:T('quickReplies')},
{k:'scheduled', l:T('scheduled'), c:'9+'},
].map(t => (
{
setCtab(t.k);
if (t.k === 'templates') setTemplatesPanelOpen(true);
}}
>
{t.l}{t.c && {t.c} }
))}
setComposerMenuOpen(v => !v)}
>
{composerMenuOpen && (
{T('emoji')} {T('bold')} {T('italic')} {T('quote')} {T('strike')}
{T('media')} {T('contact')} {T('document')} {T('location')}
)}
⌘ +Enter {T('toSend')}
{/* Templates side panel — absolute-positioned overlay, does not shift layout */}
{templatesPanelOpen && (
<>
setTemplatesPanelOpen(false)}/>
setTemplatesPanelOpen(false)}
onSend={sendTemplate}
activeChat={activeChat}
/>
)}
{/* ===== Col 4 — Customer Profile Panel ===== */}
{activeChat.initials}
{activeChat.name}
{V.active.phone}
{/* Information accordion */}
setOpenAcc(s=>({...s,info:!s.info}))}>
{T('information')}
{T('lastMessage')} 2m ago
{T('personal')}
{T('country')} {V.active.flag} {V.active.country}
{T('languages')} {V.active.languages}
{T('currency')} {V.active.currency}
{T('localTime')} 10:34
{T('status')} {T('active')}
{T('assignedTo')}
{ e.stopPropagation(); setAssignSource(s => s==='profile' ? null : 'profile'); }}
>
{activeAssignee ? (
<>
{activeAssignee.initials}
{activeAssignee.name}
) : (
<>
{assignSource === 'profile' && {T('auto')} · 2m ago
{T('department')} {V.active.department}
15 Jan 2026
2m ago
{/* Booking accordion (hospitality only) */}
{V.booking && (
Booking
Listing {V.booking.listing}
{V.booking.dates}
{V.booking.guests}
{V.booking.total}
Check-in {V.booking.checkIn}
Check-out {V.booking.checkOut}
)}
{/* Labels accordion */}
setOpenAcc(s=>({...s,labels:!s.labels}))}>
{T('labels')}
{ e.stopPropagation(); setLabelPickerOpen(o=>!o); }}
title={T('createLabel')}
>
{activeChat.labels.length === 0 && !labelPickerOpen && (
No labels yet — click + to add.
)}
{activeChat.labels.map((lbl, i) => (
{lbl.n}
{ e.stopPropagation(); toggleLabel(lbl.n, lbl.c); }}
title="Remove"
>
))}
{labelPickerOpen && (
e.stopPropagation()}>
Labels
{LABELS.map(l => {
const color = `rgb(${l.rgb})`;
const checked = activeChat.labels.some(x => x.n === l.name);
return (
toggleLabel(l.name, color)}
>
{l.name}
{checked &&
);
})}
)}
{/* Notes accordion */}
setOpenAcc(s=>({...s,notes:!s.notes}))}>
{T('notes')}
{T('lastUpdateBy')} Alex Morgan 15m ago
{ if(id==='combined'){ setCombinedView(true); } else { setActiveNumId(id); setCombinedView(false); } setNumPopOpen(false); }}
onClose={()=>setNumPopOpen(false)}
/>
)}
{cmdkOpen && setCmdkOpen(false)} numbers={NUMBERS} activeId={activeNumId} onPick={(id)=>{ if(id==='combined'){setCombinedView(true);} else {setActiveNumId(id); setCombinedView(false);} setCmdkOpen(false); }} />}
);
};
// ===== Numbers Popover =====
const NumbersPopover = ({ numbers, activeId, combined, onPick, onClose, anchorRect }) => {
const ref = React.useRef(null);
React.useEffect(() => {
const h = (e) => {
if (ref.current && !ref.current.contains(e.target) && !e.target.closest('.v2-numpill')) {
onClose();
}
};
const t = setTimeout(() => document.addEventListener('mousedown', h), 100);
return () => { clearTimeout(t); document.removeEventListener('mousedown', h); };
}, []);
const style = anchorRect ? { top: anchorRect.bottom + 4, left: anchorRect.left } : {};
return (
e.stopPropagation()}>
⌘K
{numbers.map((n, i) => (
onPick(n.id)}
>
{n.flag}
{n.phone}
{n.muted &&
{n.name} · {STATUS_LABEL[n.status]}
{n.unread > 0 &&
{n.unread} }
⌘{i+1}
))}
onPick('combined')}>
{T('allNumbers')}
{T('combinedView')} · {numbers.reduce((s,n)=>s+n.unread,0)} {T('unreadTotal')}
⌘0
{T('connectNumber')}
{T('manageNumbers')}
);
};
// ===== Command Palette =====
const CommandPalette = ({ onClose, numbers, activeId, onPick }) => {
const [sel, setSel] = React.useState(0);
return (
e.stopPropagation()}>
Esc
Numbers
{numbers.filter(n=>n.id!==activeId).slice(0,3).map((n,i)=>(
setSel(i)} onClick={()=>onPick(n.id)}>
{n.flag}
Switch to {n.phone} · {n.name}
⌘{numbers.findIndex(x=>x.id===n.id)+1}
))}
setSel(3)} onClick={()=>onPick('combined')}>
Switch to All Numbers · combined view
⌘0
Chats
Marcus Johnson — 2m ago ↵
Sarah Chen — 12m ago ↵
Actions
Resolve current chat ⌘⇧R
New message ⌘N
Search contacts ⇧F
Connect new number
Navigate
Go to Dashboard
Go to Analytics
Go to Settings
);
};
window.InboxV2 = InboxV2;