Message lays out one row of a conversation with an optional avatar and a role-aware content column; compound parts add reactions, a hover-reveal action row, a typing indicator, tight grouping, and open marker rows for status notes or separators.
Found the issue — the retry loop was swallowing the timeout error.
4:32 PM
Pushed a fix, re-running the job now.
4:35 PM
Today
Here is a quick summary of the latest deployment. Three services updated cleanly and no errors were reported.
10:14 AM
Thanks, can you also check the staging environment?
10:15 AM
API
Message
Prop
Description
Type
Default
align
Which side of the conversation the row belongs to.
MessageAlign
'start'
avatar
Optional avatar node rendered at the row's outer edge and anchored to the lower edge of the direct Message.Content surface. Message.Meta and Message.Actions flow below without changing that anchor.
ReactNode
—
children
Row content, typically Message.Content and Message.Meta.
ReactNode
—
...divProps
Standard <div> attributes forwarded to the row.
ComponentProps<'div'>
—
Message.Content
Prop
Description
Type
Default
variant
'solid' for a strong primary fill, 'subtle' for a soft secondary fill, 'default' for a bordered neutral surface, 'ghost' for bare text with no surface. Matches Button's variant vocabulary.
MessageContentVariant
'default'
...divProps
Standard <div> attributes forwarded to the content block.
ComponentProps<'div'>
—
Message.Meta
Prop
Description
Type
Default
...divProps
Standard <div> attributes forwarded to the meta line. With an avatar, the meta line flows below the message surface without changing the avatar anchor.
ComponentProps<'div'>
—
Message.Reactions
Overlaps the bottom (or top) corner of Message.Content — render it as a child of Message.Content, which is position: relative for exactly this. Defaults role="img" so a screen reader announces the whole row once from a single aria-label, rather than reading each emoji individually — pass a descriptive aria-label summarizing the reactions.
Prop
Description
Type
Default
align
Which corner of the content block the reactions hang off. Match the row's own align.
MessageReactionsAlign
'start'
side
Which edge of the content block the reactions anchor to.
MessageReactionsSide
'bottom'
...divProps
Standard <div> attributes forwarded to the reactions row.
ComponentProps<'div'>
—
Message.TypeIndicator
Prop
Description
Type
Default
label
Text announced to screen readers via a visually-hidden span.
string
'Assistant is typing'
...divProps
Standard <div> attributes forwarded to the root.
ComponentProps<'div'>
—
Message.Group
Stacks consecutive Message rows from the same sender. Avatar-collapse (keeping text columns flush across the group) is a caller convention — pass an empty same-sized placeholder as avatar on every message but the last, not a prop on Message.Group itself. The final avatar anchors to the visible message surface; metadata remains below it.
Prop
Description
Type
Default
children
Consecutive Message rows from the same sender.
ReactNode
—
...divProps
Standard <div> attributes forwarded to the group root.
ComponentProps<'div'>
—
Message.Marker
Prop
Description
Type
Default
separator
Adds a hairline on either side of the marker's children.
boolean
false
...divProps
Standard <div> attributes forwarded to the marker row.
ComponentProps<'div'>
—
Message.Actions
Prop
Description
Type
Default
revealOnHover
Hides the action row until the message is hovered or focused within.
boolean
false
children
Action controls, typically icon buttons.
ReactNode
—
...divProps
Standard <div> attributes forwarded to the action row.
