MessageRow

import {MessageRow, UserMessage} from '@sentry/scraps/chat'; import {Container} from '@sentry/scraps/layout';

import * as Storybook from 'sentry/stories';

export const documentation = import('!!type-loader!@sentry/scraps/chat/messageRow');

The MessageRow lays out a single message turn within a conversation. It is presentation only — it owns alignment and the consistent gutter around a turn, while the bubble or content is the caller's responsibility.

Alignment

Set from="user" for the sender's own messages and from="assistant" for the agent's responses, so the two sides sit opposite each other. The row owns the role-to-side mapping — callers express whose turn it is, not the layout.

<Storybook.Demo align="stretch"> <Container width="100%" background="secondary" radius="md"> <MessageRow from="user"> <UserMessage>Which of my issues are getting worse?</UserMessage> </MessageRow> <MessageRow from="assistant"> Here are the three escalating issues I found. </MessageRow> </Container> </Storybook.Demo>

<MessageRow from="user">
  <UserMessage>Which of my issues are getting worse?</UserMessage>
</MessageRow>
<MessageRow from="assistant">Here are the three escalating issues I found.</MessageRow>

Density

density sets the row's vertical breathing room. It defaults to default, the spacing for a full message turn. Use compact for sub-turn connective content — tool calls, reasoning — or on a surface that stacks turns directly and reads too airy at the default spacing. The row owns the token-to-pixel mapping, so callers express intent, not spacing.

<Storybook.Demo align="stretch"> <Container width="100%" background="secondary" radius="md"> <MessageRow from="user" density="compact"> <UserMessage>Which of my issues are getting worse?</UserMessage> </MessageRow> <MessageRow from="assistant" density="compact"> Here are the three escalating issues I found. </MessageRow> </Container> </Storybook.Demo>

<MessageRow from="user" density="compact">
  <UserMessage>Which of my issues are getting worse?</UserMessage>
</MessageRow>
<MessageRow from="assistant" density="compact">
  Here are the three escalating issues I found.
</MessageRow>