MessageItem

Business-agnostic message row chrome and the body blocks composed inside it.

Preview#

AT
Atlasowner2: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 spans semantic markdown + reference parts
Controls
Scenario
Row
Footer

Anatomy#

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>
</>

Usage#

Sender state#

MX
Mx. ChenRemovedYesterday
This history row remains visible after a member was removed.
NO
NoahLeftMonday
This history row remains visible after a member left.
AT
AtlasDeletedLast week
This history row remains visible after an agent was deleted.

Avatar status#

KA
Kaiclaude-sonnet2:14 PM
Picking up the review queue for the reference migration.
MI
Miraclaude-opus2:14 PM
Comparing both store shapes before I answer.
NO
Novagpt-4.12:14 PM
Running the migration script against the staging workspace.
ER
Erisruntime problem2:14 PM
The last run failed before it reached the token pass.
AT
Atlasowner2:14 PM
Handing the thread over for the night — notes are in the doc.
RE
Relayexternal agent2:14 PM
Mirroring updates from the partner workspace.

Converting#

AT
Atlasowner2:21 PMConverting…
Ship the token fixture tonight and keep the review checklist in sync.

Interactive sender#

2:20 PM
Please add the owner to the release review thread.

Task badge#

AT
Atlas2:22 PM
Task badge status stays caller-owned. Open the badge to change #1.
AT
Atlas2:23 PM
Read-only task badges use the persisted status vocabulary and are not buttons.
#11#12#13#14#15

Read receipt#

AT
Atlas2:18 PM
Read receipts are a footer affordance. Product policy decides when they appear.
Read

Reactions#

AT
Atlas2:33 PM
Release 2.4 is live in the release channel. Changelog and rollback steps are in the thread.

Context menu#

AT
Atlasowner2:14 PM
Right-click opens the shared ContextMenu composition.
4 replies1 new

Row chrome#

SR
Search result3:20 PM
Search jump highlight keeps the cyan source treatment.

Selection#

AT
Selected row3: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.

Search match + mark#

SR
Search result3:20 PM

Hits keep the cyan source treatment and can also use inline mark for token emphasis.

Text selection#

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

MessageItem#

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.

MessageItemSearchMatch#

...props
useRender.ComponentProps<"mark">
Inline matched-text part. Rendering it also applies the reusable search-result surface to its containing MessageItem.

MessageItemAvatarSlot#

...props
useRender.ComponentProps<"div">
Avatar gutter slot. Consumers own avatar interaction behavior and feedback. Keep this slot in select mode beside MessageMultiSelectCheckbox.

MessageItemGutter#

...props
useRender.ComponentProps<"div">
Compact consecutive-row gutter used when compact hides sender chrome.

MessageItemContinuationTime#

...props
useRender.ComponentProps<"span">
Hover timestamp rendered inside MessageItemGutter for a compact row.

MessageItemContent#

...props
useRender.ComponentProps<"div">
Main row column.

MessageItemHeader#

...props
useRender.ComponentProps<"div">
Header layout for sender and row metadata.

MessageItemSender#

...props
useRender.ComponentProps<"span">
Static sender name.

MessageItemSenderButton#

...props
useRender.ComponentProps<"button">
Interactive sender action with the sender-name visual treatment.

MessageItemSenderBadges#

...props
useRender.ComponentProps<"span">
Inline container for caller-owned Badge elements next to the sender.

MessageItemMeta#

...props
useRender.ComponentProps<"span">
Caller-owned header metadata, such as a role or agent type.

MessageItemTime#

...props
useRender.ComponentProps<"span">
Timestamp in the message header.

MessageItemInlineStatus#

...props
useRender.ComponentProps<"span">
Caller-owned transient header state, such as Converting.

MessageItemBody#

...props
useRender.ComponentProps<"div">
Message content slot. Markdown, mentions, links, and product parsing stay caller-owned.

MessageItemAttachments#

...props
useRender.ComponentProps<"div">
Dedicated message region for media and files. Its content and workflow stay caller-owned.

MessageItemEmbedded#

...props
useRender.ComponentProps<"div">
Dedicated message region for embedded cards. Its content and workflow stay caller-owned.

MessageItemToolbar#

...props
useRender.ComponentProps<"div">
Action toolbar revealed on row hover or when keyboard focus enters it via focus-within.

MessageItemToolbarButton#

active
boolean
Drives data-active styling on the toolbar button.
...props
useRender.ComponentProps<"button">
Toolbar action button. active drives data-active styling; popup triggers receive Base UI state attributes through render composition.

MessageItemSavedIndicator#

elevation
"none" | "xs" | "sm"
Shadow elevation. Default "none" renders the passive state-marker form (white surface + border, no shadow); "xs"/"sm" opt into shadow-raft-xs/shadow-raft-sm.
iconOnly
boolean
Square icon-only affordance; replaces the old data-icon-only attribute contract with an explicit prop.
...props
useRender.ComponentProps<"span">
Pinned saved marker shown on the row until the hover toolbar takes over.

MessageItemReadReceipt#

...props
useRender.ComponentProps<"span">
Footer read-receipt chip. Consumers provide the icon and label; visibility stays product-owned.

MessageItemBadge#

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.

MessageItemBadgeSeparator#

...props
useRender.ComponentProps<"span">
Decorative separator for adjacent footer badges.

MessageReferenceText#

variant
"primary" | "secondary"
Visual treatment for inline reference text.
...props
useRender.ComponentProps<"span">
Inline reference text. Source parsing and navigation stay product-owned.

MessageReferenceChip#

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.

MessageReferencePending#

...props
useRender.ComponentProps<"span">
Inline reference surface while resolution is pending.

MessageReferenceUnavailable#

...props
useRender.ComponentProps<"span">
Inline reference surface when the target is unavailable.

MessageReferenceLabel#

...props
useRender.ComponentProps<"span">
Optional label slot for a chip-style reference.

MessageReferenceIndicator#

...props
useRender.ComponentProps<"span">
Optional child slot for caller-owned read-state or other reference-local status content.

MessageReactionChip#

...props
Omit<StyledProps<Toggle.Props>, "type">
Base UI toggle for adding or removing the caller-owned reaction. Supports controlled and uncontrolled pressed state.

MessageReactionErrorIndicator#

...props
useRender.ComponentProps<"span">
Screen-reader status and stable styling slot for caller-owned reaction failure copy.

MessageReactionGlyph#

...props
useRender.ComponentProps<"span">
Reaction glyph slot for a native emoji or caller-provided icon.

MessageReactionCount#

...props
useRender.ComponentProps<"span">
Numeric children bump for 180ms when their value changes, never on mount. Respects reduced motion. Non-numeric children remain static; native props, refs, and render substitution are preserved.

MessageReactionAddButton#

...props
useRender.ComponentProps<"button">
Add-reaction affordance. Selection state and mutation stay caller-owned.

MessageReactionQuickRow#

...props
useRender.ComponentProps<"div">
Inline layout for quick-reaction controls.

MessageReactionQuickButton#

...props
useRender.ComponentProps<"button">
Quick-reaction control. Selection state and mutation stay caller-owned.

MessageReactionPickerStatic#

...props
useRender.ComponentProps<"div">
Inline picker layout for docs, fallback, or other non-portal surfaces. Its child buttons may still be caller-wired.

MessageReactionPickerContent#

...props
DropdownMenuContentProps
Base UI dropdown content for an interactive quick reaction overlay.

MessageReactionTooltipContent#

...props
TooltipContentProps
Base UI tooltip content for reactors.

MessageReactionTooltipNames#

...props
useRender.ComponentProps<"span">
Container for reactor names in the tooltip.

MessageReactionTooltipName#

...props
useRender.ComponentProps<"span">
Single reactor-name slot in the tooltip.

MessageReactionTooltipNameText#

...props
useRender.ComponentProps<"span">
Text slot inside a reactor name.

MessageReactionTooltipSeparator#

...props
useRender.ComponentProps<"span">
Decorative separator between tooltip names.

MessageReactionTooltipMeta#

...props
useRender.ComponentProps<"span">
Tooltip meta slot for overflow information such as +N.

MessageMultiSelect#

...props
useRender.ComponentProps<"div">
Stateless multi-select structure root. Consumers own selection mode, selected IDs, and selection actions.

MessageMultiSelectToolbar#

...props
useRender.ComponentProps<"div">
Shared select-mode toolbar shell. Pass the selected count and consumer-owned Button or DropdownMenu actions as children.

MessageMultiSelectCheckbox#

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.

MessageTextSelectionToolbar#

...props
Toolbar.Root props
Selection-toolbar surface with Base UI keyboard navigation. Consumers own the Popover, range anchor, and visibility.

MessageTextSelectionToolbarButton#

...props
Toolbar.Button props
Selection command button with toolbar focus behavior. Its command remains caller-owned.

MessageTextSelectionToolbarSeparator#

...props
Toolbar.Separator props
Semantic separator between selection toolbar commands.