{ "name": "ChatMessage", "package": "@magicblocksai/ui", "file": "packages/ui/src/components/ChatMessage.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": "One conversation bubble — agent / user / system. The atom that\n`` arranges into a stack.", "useClient": true, "interactivity": "interactive", "namedExports": [ { "name": "ChatMessage", "isPrincipal": true, "isType": false }, { "name": "ChatMessageProps", "isPrincipal": false, "isType": true }, { "name": "ChatMessageFrom", "isPrincipal": false, "isType": false }, { "name": "ChatMessageStatus", "isPrincipal": false, "isType": false }, { "name": "ChatMessageConfidence", "isPrincipal": false, "isType": false }, { "name": "ChatReaction", "isPrincipal": false, "isType": false } ], "importStatement": "import { ChatMessage } from \"@magicblocksai/ui\";", "props": [ { "name": "from", "optional": false, "type": "ChatMessageFrom", "doc": "Which side of the conversation." }, { "name": "name", "optional": true, "type": "ReactNode", "doc": "Sender display name." }, { "name": "avatar", "optional": true, "type": "ReactNode", "doc": "Avatar slot — letter/initials, image, or rendered element." }, { "name": "timestamp", "optional": true, "type": "ReactNode", "doc": "Timestamp text — pre-formatted by the consumer." }, { "name": "reactions", "optional": true, "type": "ChatReaction[]", "doc": "Reaction chips rendered beneath the bubble. Pass an empty array to render no reactions and no slot." }, { "name": "actions", "optional": true, "type": "ReactNode", "doc": "Hover-revealed action slot (top-right of the bubble). Typically a `` + copy / more icons. Stays visible on touch / coarse pointers." }, { "name": "status", "optional": true, "type": "ChatMessageStatus", "doc": "Streaming / failed / sent state. `streaming` adds an animated cursor after the body; `failed` paints a red rail and adds an alert role." }, { "name": "confidence", "optional": true, "type": "ChatMessageConfidence", "doc": "Optional confidence dot rendered next to the timestamp — kit colour coding: high = success, medium = warning, low = error." }, { "name": "density", "optional": true, "type": "\"comfortable\" | \"compact\"", "doc": "Compact density (used inside dense inboxes or sidebar previews)." }, { "name": "children", "optional": true, "type": "ReactNode", "doc": "Message body." } ], "classesUsed": [ "alert", "chat-msg", "chat-msg-actions", "chat-msg-avatar", "chat-msg-body", "chat-msg-bubble", "chat-msg-bubble-wrap", "chat-msg-caret", "chat-msg-confidence", "chat-msg-failed-note", "chat-msg-human", "chat-msg-meta", "chat-msg-name", "chat-msg-reaction", "chat-msg-reaction-count", "chat-msg-reaction-emoji", "chat-msg-reactions", "chat-msg-stack", "chat-msg-system-line", "chat-msg-system-time", "chat-msg-time", "title" ], "examples": { "react": null, "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": ".alert {\n display: flex; gap: var(--s-3);\n padding: var(--s-4);\n background: var(--bg-paper);\n border: 1px solid var(--hair);\n border-left: 3px solid var(--success);\n border-radius: var(--r-md);\n}\n\n.chat-msg {\n display: grid;\n /* minmax(0, 1fr) (not 1fr) so the bubble track can shrink below its\n content's min-content — otherwise word-break:break-word collapses the\n bubble to one character per line in a narrow container (e.g. a ~340px\n test rail). */\n grid-template-columns: 32px minmax(0, 1fr);\n gap: var(--s-3);\n margin: 0;\n padding: 0 var(--s-4);\n}\n\n.chat-msg-actions {\n position: absolute;\n top: -8px;\n right: 4px;\n display: inline-flex;\n align-items: center;\n gap: 2px;\n padding: 2px;\n background: var(--bg-paper);\n border: 1px solid var(--hair);\n border-radius: 999px;\n box-shadow: 0 2px 8px color-mix(in oklab, var(--ink) 10%, transparent);\n opacity: 0;\n transition: opacity var(--dur-2) var(--ease);\n}\n\n.chat-msg-avatar {\n width: 32px;\n height: 32px;\n border-radius: 999px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n background: var(--bg-warm);\n color: var(--fg);\n font: 600 12px/1 var(--f-mono);\n flex-shrink: 0;\n overflow: hidden;\n}\n\n.chat-msg-body { white-space: pre-wrap; }\n\n.chat-msg-bubble {\n padding: 10px 14px;\n font: 400 14px/1.5 var(--f-body);\n background: var(--bg-warm);\n color: var(--fg);\n border-radius: 16px 16px 16px 4px;\n word-break: break-word;\n position: relative;\n}\n\n.chat-msg-bubble-wrap {\n position: relative;\n display: inline-flex;\n max-width: min(560px, 80%);\n}\n\n.chat-msg-caret {\n display: inline-block;\n width: 2px;\n height: 1em;\n background: currentColor;\n margin-left: 2px;\n vertical-align: text-bottom;\n animation: chat-msg-caret-blink 1s steps(2, end) infinite;\n}\n\n.chat-msg-confidence {\n width: 8px;\n height: 8px;\n border-radius: 999px;\n background: var(--fg-faint);\n display: inline-block;\n}\n\n.chat-msg-failed-note {\n font: 400 11.5px/1.3 var(--f-body);\n color: var(--error-text, #8B2417);\n margin-top: 2px;\n}\n\n.chat-msg-human {\n font: 600 11px/1 var(--f-body);\n color: var(--accent);\n background: color-mix(in oklab, var(--accent) 12%, transparent);\n padding: 2px 6px;\n border-radius: 999px;\n letter-spacing: 0.02em;\n}\n\n.chat-msg-meta {\n display: inline-flex;\n align-items: baseline;\n gap: 6px;\n color: var(--fg-soft);\n font: 400 11.5px/1 var(--f-body);\n}\n\n.chat-msg-name {\n font: 500 12.5px/1 var(--f-body);\n color: var(--fg);\n}\n\n.chat-msg-reaction {\n appearance: none;\n display: inline-flex;\n align-items: center;\n gap: 4px;\n padding: 2px 8px;\n border-radius: 999px;\n background: var(--bg-paper);\n border: 1px solid var(--hair);\n font: 500 11.5px/1 var(--f-body);\n color: var(--fg);\n cursor: pointer;\n transition: background var(--dur-2) var(--ease),\n border-color var(--dur-2) var(--ease);\n}\n\n.chat-msg-reaction-count { font-variant-numeric: tabular-nums; }\n\n.chat-msg-reaction-emoji { line-height: 1; font-size: 13px; }\n\n.chat-msg-reactions {\n display: inline-flex;\n flex-wrap: wrap;\n gap: 4px;\n margin-top: 2px;\n}\n\n.chat-msg-stack {\n display: flex;\n flex-direction: column;\n gap: 4px;\n min-width: 0;\n}\n\n.chat-msg-system-line {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 4px 10px;\n border-radius: 999px;\n background: var(--bg-warm);\n font: 400 11.5px/1.3 var(--f-body);\n color: var(--fg-soft);\n}\n\n.chat-msg-system-time {\n font: 400 10.5px/1 var(--f-mono);\n color: var(--fg-faint);\n margin-left: 4px;\n}\n\n.chat-msg-time {\n font: 400 11px/1 var(--f-mono);\n color: var(--fg-faint);\n font-variant-numeric: tabular-nums;\n}\n\n.title { font: 700 32px/1.15 var(--f-display); letter-spacing: -0.015em; margin: 0; }" } }