{ "name": "EmailThread", "package": "@magicblocksai/ui", "file": "packages/ui/src/components/EmailThread.tsx", "chapterTag": "16 Pipeline & CRM", "chapter": "16-app-pipeline.html", "sectionId": "email-thread", "elName": "Two-message thread, latest expanded", "demoUrl": "https://brand.magicblocks.ai/components/16-app-pipeline#email-thread", "hasLiveDemo": false, "description": "Email thread viewer — full-width rows (no chat bubbles), per-message\nheader with sender + Details toggle, latest-expanded with older messages\ncollapsed inline. Quoted history auto-collapses behind a \"Show trimmed\ncontent\" chevron (Gmail pattern). Attachment chips render at the bottom\nof each expanded body.", "useClient": true, "interactivity": "interactive", "namedExports": [ { "name": "EmailThread", "isPrincipal": true, "isType": false }, { "name": "EmailThreadProps", "isPrincipal": false, "isType": true }, { "name": "EmailMessageData", "isPrincipal": false, "isType": false }, { "name": "EmailParty", "isPrincipal": false, "isType": false }, { "name": "EmailAttachment", "isPrincipal": false, "isType": false }, { "name": "EmailDefaultExpanded", "isPrincipal": false, "isType": false } ], "importStatement": "import { EmailThread } from \"@magicblocksai/ui\";", "props": [ { "name": "subject", "optional": true, "type": "ReactNode", "doc": "Subject line rendered above the messages." }, { "name": "messages", "optional": false, "type": "EmailMessageData[]", "doc": "Messages in DISPLAY ORDER (oldest first). The latest is the last entry." }, { "name": "defaultExpanded", "optional": true, "type": "EmailDefaultExpanded", "doc": "Which messages to expand on first render. Default `\"latest\"` matches Gmail / Front behaviour (latest expanded, all older messages collapsed to a one-line summary). Pass `\"all\"` for an open thread, an array of ids for specific messages, or a single id string." }, { "name": "onReply", "optional": true, "type": "(latest: EmailMessageData) => void", "doc": "Reply / Reply all / Forward action handlers. When omitted, the action bar at the bottom is hidden." }, { "name": "onReplyAll", "optional": true, "type": "(latest: EmailMessageData) => void", "doc": "" }, { "name": "onForward", "optional": true, "type": "(latest: EmailMessageData) => void", "doc": "" }, { "name": "renderComposer", "optional": true, "type": "(latest: EmailMessageData) => ReactNode", "doc": "Optional render slot for an inline reply composer below the thread. Receives the latest message so the composer can pre-populate quoted history etc. Sticky positioning is the consumer's call." } ], "classesUsed": [ "av", "btn", "btn-secondary", "email-message-attachment", "email-message-attachment-icon", "email-message-attachment-name", "email-message-attachment-size", "email-message-attachments", "email-message-body", "email-message-collapse-button", "email-message-collapsed", "email-message-collapsed-from", "email-message-collapsed-preview", "email-message-collapsed-time", "email-message-details", "email-message-details-toggle", "email-message-expanded", "email-message-from", "email-message-from-email", "email-message-head", "email-message-head-body", "email-message-head-line", "email-message-head-meta", "email-message-head-side", "email-message-quoted", "email-message-quoted-body", "email-message-quoted-toggle", "email-message-time", "email-message-to", "email-message-tracking", "email-message-tracking-count", "email-message-tracking-icon", "email-thread", "email-thread-actions", "email-thread-composer", "email-thread-messages", "email-thread-subject" ], "examples": { "react": " openReplyComposer(latest)}\n onForward={(latest) => openForwardComposer(latest)}\n />", "html": "
\n
\n
Re: Renewal proposal — BlueRock Health
\n
\n \n
\n
\n JS\n
\n
\n Jay Stockwell\n <jay@magicblocks.ai>\n \n
\n
\n to alicia@bluerock.health\n
\n
\n
\n just now\n
\n
\n
\n

Hi Alicia — attaching the updated renewal proposal. Three things changed since our last conversation: pricing is locked for the full term, the SLA is tightened to 99.9%, and the implementation week is fully scoped.

\n

Happy to walk through any of it on a call — otherwise let me know if the terms work.

\n
\n
\n
\n \n \n \n bluerock-renewal.pdf\n 248 KB\n
\n
\n
\n
\n
\n \n \n
\n
\n
", "css": ".av {\n width: 32px; height: 32px; border-radius: 50%;\n display: inline-flex; align-items: center; justify-content: center;\n font: 600 12px/1 var(--f-display); letter-spacing: 0.02em;\n flex-shrink: 0;\n overflow: hidden; /* clip image children cleanly */\n /* v1.12.0 (R11-2): default fill so initials are legible without consumers\n having to think about background. Pre-1.12.0 `.av` was background-less;\n on a same-tone page wash (e.g. warm-1) initials rendered invisible.\n Image children cover this fill via `overflow: hidden` clipping. */\n background: var(--bg-warm);\n color: var(--fg-soft);\n}\n\n.btn {\n display: inline-flex; align-items: center; justify-content: center;\n gap: var(--s-2);\n font: 600 14.5px/1 var(--f-display);\n letter-spacing: -0.005em;\n padding: 11px var(--s-5);\n border: 1px solid transparent;\n border-radius: var(--r-md);\n cursor: pointer;\n text-decoration: none;\n transition: background var(--dur-2) var(--ease),\n border-color var(--dur-2) var(--ease),\n transform var(--dur-2) var(--ease),\n box-shadow var(--dur-2) var(--ease),\n color var(--dur-2) var(--ease);\n user-select: none;\n white-space: nowrap;\n appearance: none; -webkit-appearance: none;\n}\n.btn { padding: 11px var(--s-5); font-size: 14.5px; }\n\n.btn-secondary {\n background: var(--bg-paper);\n color: var(--fg);\n border-color: var(--hair);\n}\n\n.email-message-attachment {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 6px 10px;\n background: var(--bg-warm);\n border: 1px solid var(--hair-soft);\n border-radius: var(--r-sm);\n font: 500 12.5px/1 var(--f-mono);\n color: var(--fg);\n text-decoration: none;\n transition: border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);\n}\n\n.email-message-attachment-icon {\n display: inline-flex;\n align-items: center;\n color: var(--fg-dim);\n}\n\n.email-message-attachment-name { color: var(--fg); }\n\n.email-message-attachment-size { color: var(--fg-faint); font-size: 11.5px; }\n\n.email-message-attachments {\n display: flex;\n flex-wrap: wrap;\n gap: var(--s-2);\n}\n\n.email-message-body {\n font: 400 14px/1.6 var(--f-body);\n color: var(--fg);\n}\n\n.email-message-collapse-button {\n appearance: none;\n background: transparent;\n border: 1px solid transparent;\n padding: 4px;\n border-radius: var(--r-sm);\n cursor: pointer;\n color: var(--fg-dim);\n display: inline-flex;\n align-items: center;\n transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);\n}\n\n.email-message-collapsed {\n appearance: none;\n background: transparent;\n border: 0;\n border-bottom: 1px solid var(--hair-soft);\n padding: var(--s-3) var(--s-5);\n cursor: pointer;\n display: grid;\n grid-template-columns: 32px auto 1fr auto auto;\n align-items: center;\n gap: var(--s-3);\n text-align: left;\n transition: background var(--dur-1) var(--ease);\n font: inherit;\n color: var(--fg);\n}\n\n.email-message-collapsed-from {\n font: 600 13px/1.3 var(--f-body);\n color: var(--fg);\n white-space: nowrap;\n}\n\n.email-message-collapsed-preview {\n font: 400 13px/1.3 var(--f-body);\n color: var(--fg-dim);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n min-width: 0;\n}\n\n.email-message-collapsed-time {\n font: 400 11.5px/1 var(--f-mono);\n color: var(--fg-faint);\n white-space: nowrap;\n}\n\n.email-message-details {\n margin: var(--s-2) 0 0;\n display: grid;\n grid-template-columns: 64px 1fr;\n gap: 4px var(--s-3);\n font: 400 12px/1.4 var(--f-mono);\n padding: var(--s-3);\n background: var(--bg-warm);\n border: 1px solid var(--hair-soft);\n border-radius: var(--r-sm);\n}\n\n.email-message-details-toggle {\n appearance: none;\n background: transparent;\n border: 0;\n padding: 2px 4px;\n border-radius: var(--r-xs);\n cursor: pointer;\n color: var(--fg-dim);\n display: inline-flex;\n align-items: center;\n transition: background var(--dur-1) var(--ease), color var" } }