/* Conversations workspace — the platform's centerpiece.
3-pane: inbox left · thread center · contact / account / AI copilot right (tabbed) */
const { useState: useStateConv, useRef: useRefConv, useEffect: useEffectConv } = React;
function PageConversations({ initialConversationId, onNavigate }) {
const [activeId, setActiveId] = useStateConv(initialConversationId || CONVERSATIONS[0]?.id || null);
const [folder, setFolder] = useStateConv("all"); /* all | unread | mine | drafts */
const [conversations, setConversations] = useStateConv(CONVERSATIONS);
const active = conversations.find(c => c.id === activeId) || conversations[0] || null;
/* Empty state — no conversations data is currently available. The
conversations service isn't wired to a live backend endpoint yet,
so this list stays empty until that ships. */
if (conversations.length === 0) {
return (
<>
No conversations yet
Conversations will appear here once the backend ships a /conversations endpoint.
Sample messages, AI summaries, and touchpoint timelines were removed when the static seed was cleared.
);
}
/* Filter inbox by folder, then sort by most recent activity */
const inboxList = conversations.filter(c => {
if (folder === "unread") return c.unread;
if (folder === "mine") return true;
if (folder === "drafts") return c.messages.some(m => m.status === "draft");
return true;
}).slice().sort((a, b) => new Date(b.lastActivityAt) - new Date(a.lastActivityAt));
return (
<>
: null}
/>
{/* AI Summary trigger — opens a side drawer with the full summary
and the AI insight list. The inline summary card was moved out
of the thread so the message feed gets the full vertical space. */}
{/* Thread — yields to the composer when expanded so the textarea
can grow upward instead of pushing the header off-screen. */}
{/* Composer */}
setComposerOpen(true)}
channel={composerChannel}
onChannel={setComposerChannel}
availableChannels={conversation.channels.filter(c => c !== "manual_note")}
text={composerText}
onText={setComposerText}
onSend={handleSend}
hasDraft={!!draft}
expanded={composerExpanded}
onExpandedChange={setComposerExpanded}
/>
{/* AI summary drawer — opened by the "AI summary" button in the
header. Renders the full account summary plus any AI insights and
the touchpoint timeline. */}
setSummaryOpen(false)}
conversation={conversation}
contact={contact}
company={company}
/>
);
}
/* ConversationSummaryDrawer — side drawer with the AI-generated account
summary, AI insights, relationship summary, and touchpoint timeline.
Replaces the old sticky summary card that lived inside the thread. */
function ConversationSummaryDrawer({ open, onClose, conversation, contact, company }) {
if (!conversation) return null;
const insights = conversation.aiInsights || [];
const touchpoints = conversation.touchpoints || [];
const insightToneOf = (type) => ({
weak_signal: "blue", buying_signal: "green",
recommended_action: "violet", risk: "red", note: "neutral",
})[type] || "neutral";
const insightLabelOf = (type) => ({
weak_signal: "Weak signal", buying_signal: "Buying signal",
recommended_action: "Recommended action", risk: "Risk", note: "Note",
})[type] || type;
return (
AI summarygenerated · 2h ago
}
subtitle={contact ? `${contact.firstName} ${contact.lastName} · ${company?.name || ""}` : conversation.title}
footer={
<>
}
>
{/* Headline summary */}
Account summary
{conversation.aiSummary || "No summary generated yet."}
);
}
/* ConversationActions — channel chips + phone/calendar/more.
Rendered in the PageHeader (top-right) for whichever conversation is active. */
function ConversationActions({ conversation }) {
/* Channel color map mirrors the one in in primitives.jsx —
when we change the chip variant from "tinted bg + colored icon" to
"filled colored bg + white icon", we need the same lookup. */
const CHANNEL_BG = {
blue: "var(--blue)", green: "var(--green)", warm: "var(--warm)",
violet: "var(--accent)", neutral: "var(--ink-2)",
};
const Chip = ({ bg, icon, title, onClick, fg = "#fff" }) => (
);
return (
{conversation.channels.map(ch => {
const meta = CHANNEL_META[ch];
/* manual_note (Internal note) gets a yellow chip with black icon
— same colour theme as the Internal-note badge in the message feed,
and the yellow + black gives much better contrast than warm + white. */
if (ch === "manual_note") {
return (
);
}
return (
);
})}
);
}
function groupByDay(messages) {
const groups = {};
messages.forEach(m => {
const k = m.at.slice(0, 10);
(groups[k] = groups[k] || []).push(m);
});
return Object.keys(groups).sort().map(day => ({ day, messages: groups[day] }));
}
function DayGroup({ day, messages }) {
return (
);
}
function MessageBubble({ m }) {
if (m.direction === "system") {
return (
{m.body} · {fmtTime(m.at)}
);
}
if (m.direction === "internal") {
const user = getUser(m.from);
/* Match the yellow chip in the topbar — soft yellow card with a slightly
darker yellow dashed border, and a darkened title color for contrast. */
return (
);
}
function Composer({ contact, open, onOpen, channel, onChannel, availableChannels, text, onText, onSend, hasDraft, expanded, onExpandedChange }) {
/* Composer textarea has two sizes: compact (default) and expanded.
When expanded, the outer container takes flex:1 so it grows UPWARD
into the thread region rather than pushing the header off-screen. */
const setExpanded = onExpandedChange;
if (!open) {
return (
);
}
return (
{/* Channel switcher — fixed height to match the inbox folder tabs
strip on the left pane exactly. */}