MessageItem
Business-agnostic message row chrome and the body blocks composed inside it.
AT
owner2:14 PM
Ask to ship the token fixture pass — layer-panel, mentions, and docs links stay caller-owned.
tracked #21 in release-notes and coordinated in northstar-launch-handoff.
- Keep body content in
MessageItemBody - Prefer
ad-hoc spanssemantic markdown + reference parts
Controls
Scenario
Row
Footer
import {
Avatar,
MessageItem,
MessageItemAttachments,
MessageItemAvatarSlot,
MessageItemBody,
MessageItemContent,
MessageItemContinuationTime,
MessageItemEmbedded,
MessageItemFooter,
MessageItemGutter,
MessageItemHeader,
MessageItemInlineStatus,
MessageItemMeta,
MessageItemSender,
MessageItemSenderBadges,
MessageItemTime,
MessageItemToolbar,
MessageItemToolbarButton,
} from "raft-ui";
<>
<MessageItem>
<MessageItemAvatarSlot>
<Avatar size="md" type="human" />
</MessageItemAvatarSlot>
<MessageItemContent>
<MessageItemHeader>
<MessageItemSender />
<MessageItemSenderBadges />
<MessageItemMeta />
<MessageItemTime />
<MessageItemInlineStatus />
</MessageItemHeader>
<MessageItemBody />
<MessageItemAttachments />
<MessageItemEmbedded />
<MessageItemFooter />
</MessageItemContent>
<MessageItemToolbar>
<MessageItemToolbarButton />
</MessageItemToolbar>
</MessageItem>
<MessageItem compact>
<MessageItemGutter>
<MessageItemContinuationTime />
</MessageItemGutter>
<MessageItemContent>
<MessageItemBody />
</MessageItemContent>
<MessageItemToolbar>
<MessageItemToolbarButton />
</MessageItemToolbar>
</MessageItem>
</>MX
RemovedYesterday
This history row remains visible after a member was removed.
NO
LeftMonday
This history row remains visible after a member left.
AT
DeletedLast week
This history row remains visible after an agent was deleted.
KA
claude-sonnet2:14 PM
Picking up the review queue for the reference migration.
MI
claude-opus2:14 PM
Comparing both store shapes before I answer.
NO
gpt-4.12:14 PM
Running the migration script against the staging workspace.
ER
runtime problem2:14 PM
The last run failed before it reached the token pass.
AT
owner2:14 PM
Handing the thread over for the night — notes are in the doc.
RE
external agent2:14 PM
Mirroring updates from the partner workspace.
AT
owner2:21 PMConverting…
Ship the token fixture tonight and keep the review checklist in sync.
2:20 PM
Please add the owner to the release review thread.
AT
2:22 PM
Task badge status stays caller-owned. Open the badge to change #1.
AT
2:23 PM
Read-only task badges use the persisted status vocabulary and are not buttons.
#11#12#13#14#15
AT
2:18 PM
Read receipts are a footer affordance. Product policy decides when they appear.
Read
AT
2:33 PM
Release 2.4 is live in the release channel. Changelog and rollback steps are in the thread.
SR
3:20 PM
Search jump highlight keeps the cyan source treatment.
AT
3:18 PM
Selection is represented by a real checkbox.
1 selected
Copy, Forward, and Generate image are disabled in this isolated example because it has no selected-message payload.
SR
3:20 PM
Hits keep the cyan source treatment and can also use inline mark for token emphasis.
Select this sentence to expose the Quote and Copy toolbar, without making text selection a message-row concern.
Select text to inspect the contextual actions.
API#WIP
| Prop | Type | Default | Description |
|---|---|---|---|
compact | boolean | — | Compact row layout that hides sender chrome and tightens the vertical rhythm. |
...props | useRender.ComponentProps<"div"> | — | Stable message-row root. Keep the same root while composing transient UI parts. |
| Prop | Type | Default | Description |
|---|---|---|---|
...props | useRender.ComponentProps<"mark"> | — | Inline matched-text part. Rendering it also applies the reusable search-result surface to its containing MessageItem. |
| Prop | Type | Default | Description |
|---|---|---|---|
...props | useRender.ComponentProps<"div"> | — | Avatar gutter slot. Consumers own avatar interaction behavior and feedback. Keep this slot in select mode beside MessageMultiSelectCheckbox. |
| Prop | Type | Default | Description |
|---|---|---|---|
...props | useRender.ComponentProps<"div"> | — | Compact consecutive-row gutter used when compact hides sender chrome. |
| Prop | Type | Default | Description |
|---|---|---|---|
...props | useRender.ComponentProps<"span"> | — | Hover timestamp rendered inside MessageItemGutter for a compact row. |
| Prop | Type | Default | Description |
|---|---|---|---|
...props | useRender.ComponentProps<"div"> | — | Main row column. |
| Prop | Type | Default | Description |
|---|---|---|---|
...props | useRender.ComponentProps<"div"> | — | Header layout for sender and row metadata. |
| Prop | Type | Default | Description |
|---|---|---|---|
...props | useRender.ComponentProps<"span"> | — | Static sender name. |
| Prop | Type | Default | Description |
|---|---|---|---|
...props | useRender.ComponentProps<"span"> | — | Inline container for caller-owned Badge elements next to the sender. |
| Prop | Type | Default | Description |
|---|---|---|---|
...props | useRender.ComponentProps<"span"> | — | Caller-owned header metadata, such as a role or agent type. |
| Prop | Type | Default | Description |
|---|---|---|---|
...props | useRender.ComponentProps<"span"> | — | Timestamp in the message header. |
| Prop | Type | Default | Description |
|---|---|---|---|
...props | useRender.ComponentProps<"span"> | — | Caller-owned transient header state, such as Converting. |
| Prop | Type | Default | Description |
|---|---|---|---|
...props | useRender.ComponentProps<"div"> | — | Message content slot. Markdown, mentions, links, and product parsing stay caller-owned. |
| Prop | Type | Default | Description |
|---|---|---|---|
...props | useRender.ComponentProps<"div"> | — | Dedicated message region for media and files. Its content and workflow stay caller-owned. |
| Prop | Type | Default | Description |
|---|---|---|---|
...props | useRender.ComponentProps<"div"> | — | Dedicated message region for embedded cards. Its content and workflow stay caller-owned. |
| Prop | Type | Default | Description |
|---|---|---|---|
...props | useRender.ComponentProps<"div"> | — | Action toolbar revealed on row hover or when keyboard focus enters it via focus-within. |
| Prop | Type | Default | Description |
|---|---|---|---|
...props | useRender.ComponentProps<"span"> | — | Pinned saved marker shown on the row until the hover toolbar takes over. |
| Prop | Type | Default | Description |
|---|---|---|---|
...props | useRender.ComponentProps<"span"> | — | Footer read-receipt chip. Consumers provide the icon and label; visibility stays product-owned. |
| Prop | Type | Default | Description |
|---|---|---|---|
status | "read" | "unread" | — | Read or unread footer badge treatment. |
...props | useRender.ComponentProps<"span"> | — | Footer badge with read and unread treatments. Labels and icons stay caller-owned. |
| Prop | Type | Default | Description |
|---|---|---|---|
...props | useRender.ComponentProps<"span"> | — | Decorative separator for adjacent footer badges. |
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "primary" | "secondary" | — | Visual treatment for inline reference text. |
...props | useRender.ComponentProps<"span"> | — | Inline reference text. Source parsing and navigation stay product-owned. |
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "accent" | "muted" | "info" | "link" | — | Visual treatment for the chip-shaped reference surface. |
...props | useRender.ComponentProps<"span"> | — | Chip-shaped inline reference surface. Resolution and navigation stay product-owned. |
| Prop | Type | Default | Description |
|---|---|---|---|
...props | useRender.ComponentProps<"span"> | — | Inline reference surface while resolution is pending. |
| Prop | Type | Default | Description |
|---|---|---|---|
...props | useRender.ComponentProps<"span"> | — | Badge-shaped inline reference surface. |
| Prop | Type | Default | Description |
|---|---|---|---|
...props | useRender.ComponentProps<"span"> | — | Optional label slot for a chip-style reference. |
| Prop | Type | Default | Description |
|---|---|---|---|
...props | useRender.ComponentProps<"span"> | — | Optional child slot for caller-owned read-state or other reference-local status content. |
| Prop | Type | Default | Description |
|---|---|---|---|
...props | Omit<StyledProps<Toggle.Props>, "type"> | — | Base UI toggle for adding or removing the caller-owned reaction. Supports controlled and uncontrolled pressed state. |
| Prop | Type | Default | Description |
|---|---|---|---|
...props | useRender.ComponentProps<"span"> | — | Screen-reader status and stable styling slot for caller-owned reaction failure copy. |
| Prop | Type | Default | Description |
|---|---|---|---|
...props | useRender.ComponentProps<"span"> | — | Reaction glyph slot for a native emoji or caller-provided icon. |
| Prop | Type | Default | Description |
|---|---|---|---|
...props | useRender.ComponentProps<"span"> | — | Numeric reaction-count slot. |
| Prop | Type | Default | Description |
|---|---|---|---|
...props | useRender.ComponentProps<"div"> | — | Inline layout for quick-reaction controls. |
| Prop | Type | Default | Description |
|---|---|---|---|
...props | useRender.ComponentProps<"div"> | — | Inline picker layout for docs, fallback, or other non-portal surfaces. Its child buttons may still be caller-wired. |
| Prop | Type | Default | Description |
|---|---|---|---|
...props | DropdownMenuContentProps | — | Base UI dropdown content for an interactive quick reaction overlay. |
| Prop | Type | Default | Description |
|---|---|---|---|
...props | TooltipContentProps | — | Base UI tooltip content for reactors. |
| Prop | Type | Default | Description |
|---|---|---|---|
...props | useRender.ComponentProps<"span"> | — | Container for reactor names in the tooltip. |
| Prop | Type | Default | Description |
|---|---|---|---|
...props | useRender.ComponentProps<"span"> | — | Single reactor-name slot in the tooltip. |
| Prop | Type | Default | Description |
|---|---|---|---|
...props | useRender.ComponentProps<"span"> | — | Text slot inside a reactor name. |
| Prop | Type | Default | Description |
|---|---|---|---|
...props | useRender.ComponentProps<"span"> | — | Decorative separator between tooltip names. |
| Prop | Type | Default | Description |
|---|---|---|---|
...props | useRender.ComponentProps<"span"> | — | Tooltip meta slot for overflow information such as +N. |
| Prop | Type | Default | Description |
|---|---|---|---|
...props | useRender.ComponentProps<"div"> | — | Stateless multi-select structure root. Consumers own selection mode, selected IDs, and selection actions. |
| Prop | Type | Default | Description |
|---|---|---|---|
...props | useRender.ComponentProps<"div"> | — | Shared select-mode toolbar shell. Pass the selected count and consumer-owned Button or DropdownMenu actions as children. |
| Prop | Type | Default | Description |
|---|---|---|---|
checked | boolean | — | Controlled checked state for the per-row selector. |
onCheckedChange | CheckboxProps['onCheckedChange'] | — | Callback fired when the per-row selector is toggled. |
...props | CheckboxProps | — | Styled per-row selector with native Checkbox props. Control it with checked and onCheckedChange. |
| Prop | Type | Default | Description |
|---|---|---|---|
...props | Toolbar.Root props | — | Selection-toolbar surface with Base UI keyboard navigation. Consumers own the Popover, range anchor, and visibility. |
| Prop | Type | Default | Description |
|---|---|---|---|
...props | Toolbar.Separator props | — | Semantic separator between selection toolbar commands. |