{ "name": "SessionPage", "package": "@magicblocksai/ui", "file": "packages/ui/src/components/SessionPage.tsx", "chapterTag": "16 Pipeline & CRM", "chapter": "16-app-pipeline.html", "sectionId": "session-page", "elName": "SessionPage", "demoUrl": "https://brand.magicblocks.ai/components/16-app-pipeline#session-page", "hasLiveDemo": false, "description": "A completed session — summary-led, consistent with the contact overview. A hero\n(identity · channel · agent · Goals chips · stat row), then the ``,\nthen the transcript + per-message traces collapsed below. Composes the summary band\n(KeyFactGrid + MemoryList + HandoverOutcome) and ``; the transcript is\npassed in as a composed `` so the page stays a thin shell.", "useClient": true, "interactivity": "interactive", "namedExports": [ { "name": "SessionPage", "isPrincipal": true, "isType": false }, { "name": "SessionPageProps", "isPrincipal": false, "isType": true }, { "name": "SessionGoal", "isPrincipal": false, "isType": false }, { "name": "SessionStat", "isPrincipal": false, "isType": false } ], "importStatement": "import { SessionPage } from \"@magicblocksai/ui\";", "props": [ { "name": "contactName", "optional": false, "type": "ReactNode", "doc": "" }, { "name": "initials", "optional": true, "type": "string", "doc": "" }, { "name": "company", "optional": true, "type": "ReactNode", "doc": "" }, { "name": "sentiment", "optional": true, "type": "SessionSentiment", "doc": "" }, { "name": "channel", "optional": false, "type": "SessionChannel", "doc": "" }, { "name": "agent", "optional": true, "type": "ReactNode", "doc": "\"Sage agent · v2.3\"." }, { "name": "startedAt", "optional": true, "type": "ReactNode", "doc": "" }, { "name": "sessionId", "optional": true, "type": "ReactNode", "doc": "" }, { "name": "status", "optional": true, "type": "ReactNode; // outcome goals?: SessionGoal[]", "doc": "Status pill. Default \"Completed\"." }, { "name": "stats", "optional": true, "type": "SessionStat[]; // mode /** `\"completed\"` (default) → summary-led. `\"live\"` → renders the `console` slot (a ``) in place of the summary band + transcript, under the same shared hero. */ mode?: \"completed\" | \"live\"", "doc": "" }, { "name": "console", "optional": true, "type": "ReactNode; // summary band (completed mode) summary?: ReactNode", "doc": "Live-mode body — a composed ``. Shown when `mode=\"live\"`." }, { "name": "summaryTag", "optional": true, "type": "ReactNode", "doc": "" }, { "name": "keyFacts", "optional": true, "type": "KeyFact[]", "doc": "" }, { "name": "memories", "optional": true, "type": "Memory[]", "doc": "" }, { "name": "handover", "optional": true, "type": "OutcomeEvent[]; // transcript (a composed , collapsed by default) transcript?: ReactNode", "doc": "" }, { "name": "transcriptCount", "optional": true, "type": "ReactNode", "doc": "" }, { "name": "transcriptOpen", "optional": true, "type": "boolean", "doc": "" }, { "name": "defaultTranscriptOpen", "optional": true, "type": "boolean", "doc": "" }, { "name": "onTranscriptToggle", "optional": true, "type": "(open: boolean) => void; // nav backHref?: string", "doc": "" }, { "name": "onPrev", "optional": true, "type": "() => void", "doc": "" }, { "name": "onNext", "optional": true, "type": "() => void", "doc": "" } ], "classesUsed": [ "channel-chip", "session-page", "sp-avatar", "sp-back", "sp-band", "sp-company", "sp-goal", "sp-goals", "sp-goals-chips", "sp-goals-k", "sp-hero", "sp-hero-foot", "sp-hero-id", "sp-hero-top", "sp-meta", "sp-name", "sp-nav", "sp-navbtn", "sp-sdot", "sp-stat", "sp-stat-k", "sp-stat-v", "sp-stats", "sp-status", "sp-tcollapse", "sp-tcollapse-chevron", "sp-tcollapse-count", "sp-topbar", "sp-transcript", "sp-transcript-body", "ssb-expand" ], "examples": { "react": "{messages}} transcriptCount=\"18\"\n/>", "html": "
\n
‹ Sessions
\n
\n
\n SK\n
\n

Sarah Kim · Skyhook

\n
WebchatSage agent · v2.3Apr 28, 9:15 AM#S-4821
\n
\n Completed\n
\n
\n
Goals achieved
QualifiedMeeting booked
\n
Duration
4m 12s
Messages
18
Sentiment
Positive
\n
\n
\n
\n
\n
AI summarySAGE
\n

Sarah from Skyhook asked about 5-seat volume pricing for a CS team moving handoffs to Slack. Sage confirmed the Scale plan, qualified the use case, and booked a walkthrough.

\n
\n
\n
\n
Key facts
\n
\n
seats5
\n
planScale
\n
handoffSlack
\n
\n
\n
\n
Memories
\n
\n
Prefers Slack for team handoffs
this sessionhigh
\n
Evaluating for a 5-person CS team
this sessionhigh
\n
\n \n
\n
\n
Handover & outcome
\n
\n
CRM lead createdPOST crm.acme.com/leads
200
\n
Handed to journey blockPost-demo nurture
\n
\n
\n
\n
\n
\n
", "css": ".channel-chip { display: inline-flex; align-items: center; gap: var(--s-1); font: 600 10px/1 var(--f-mono); text-transform: uppercase; letter-spacing: 0.04em; padding: 5px 9px; border-radius: var(--r-sm); background: var(--bg-sunk); color: var(--fg-dim); }\n\n.session-page { display: flex; flex-direction: column; gap: var(--s-4); }\n\n.sp-avatar { width: 44px; height: 44px; border-radius: 50%; flex: none; background: var(--accent-soft); color: var(--accent-text); display: inline-flex; align-items: center; justify-content: center; font: 700 15px var(--f-display); }\n\n.sp-back { font: 500 12px/1 var(--f-body); color: var(--fg-dim); text-decoration: none; }\n\n.sp-band { margin: 0; }\n\n.sp-company { font-weight: 400; color: var(--fg-faint); font-size: 14px; }\n\n.sp-goal { display: inline-flex; align-items: center; gap: 6px; font: 600 12px/1 var(--f-body); color: var(--success-text); background: var(--success-soft); border-radius: var(--r-pill); padding: 6px 11px; }\n\n.sp-goals { display: flex; flex-direction: column; }\n\n.sp-goals-chips { display: flex; gap: var(--s-2); flex-wrap: wrap; margin-top: 6px; }\n\n.sp-goals-k { font: 600 9.5px/1 var(--f-mono); text-transform: uppercase; letter-spacing: 0.05em; color: var(--fg-faint); }\n\n.sp-hero { position: relative; overflow: hidden; background: var(--bg-paper); border: 1px solid var(--hair); border-radius: var(--r-lg); padding: var(--s-5); box-shadow: var(--sh-1); }\n\n.sp-hero-foot { display: flex; align-items: center; gap: var(--s-5); flex-wrap: wrap; margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--hair-soft); position: relative; }\n\n.sp-hero-id { min-width: 0; flex: 1; }\n\n.sp-hero-top { display: flex; align-items: flex-start; gap: var(--s-3); position: relative; }\n\n.sp-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-3); margin-top: 5px; font: 500 11.5px/1 var(--f-body); color: var(--fg-faint); }\n\n.sp-name { margin: 0; font: 700 17px/1.2 var(--f-display); color: var(--fg); display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }\n\n.sp-nav { margin-left: auto; display: flex; gap: var(--s-2); }\n\n.sp-navbtn { font: 500 12px/1 var(--f-body); color: var(--fg-dim); background: var(--bg-paper); border: 1px solid var(--hair); border-radius: var(--r-sm); padding: 6px 10px; cursor: pointer; }\n\n.sp-sdot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--fg-faint); }\n\n.sp-stat { display: flex; flex-direction: column; gap: 3px; }\n\n.sp-stat-k { font: 600 9.5px/1 var(--f-mono); text-transform: uppercase; letter-spacing: 0.05em; color: var(--fg-faint); }\n\n.sp-stat-v { font: 700 15px/1 var(--f-display); color: var(--fg); margin-top: 3px; }\n\n.sp-stats { margin-left: auto; display: flex; gap: var(--s-5); flex-wrap: wrap; }\n\n.sp-status { margin-left: auto; font: 600 11px/1 var(--f-mono); text-transform: uppercase; letter-spacing: 0.04em; background: var(--bg-sunk); color: var(--fg-dim); padding: 5px 10px; border-radius: var(--r-pill); white-space: nowrap; }\n\n.sp-tcollapse { display: flex; align-items: center; gap: var(--s-2); width: 100%; font: 600 13px/1 var(--f-body); color: var(--fg); background: var(--bg-warm); border: 1px solid var(--hair); border-radius: var(--r-lg); padding: var(--s-4); cursor: pointer; }\n\n.sp-tcollapse-chevron { width: 9px; height: 9px; flex: none; position: relative; color: var(--fg-faint); }\n\n.sp-tcollapse-count { margin-left: auto; font: 600 11px/1 var(--f-mono); color: var(--fg-faint); }\n\n.sp-topbar { display: flex; align-items: center; gap: var(--s-3); }\n\n.sp-transcript { display: flex; flex-direction: column; }\n\n.sp-transcript-body { margin-top: var(--s-3); }\n\n.ssb-expand { margin-top: var(--s-3); width: 100%; font: 600 11.5px/1 var(--f-body); color: var(--accent-text); background: var(--accent-soft); border: none; padding: 8px; border-radius: var(--r-sm); cursor: pointer; }" } }