AssistantMessage

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

import * as Storybook from 'sentry/stories';

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

The AssistantMessage renders the content region for an agent's response. Unlike the sender's own messages — which are bubbled with UserMessage — an agent response is not bubbled: it renders as full-width, left-aligned content so rich output like markdown, tables, and code reads naturally.

Usage

Shown here in a conversation for context; on its own it is just the agent's content region.

<Storybook.Demo align="stretch"> <Stack width="100%"> <MessageRow from="user"> <UserMessage>How many errors happened in the last 24 hours?</UserMessage> </MessageRow> <MessageRow from="assistant"> <AssistantMessage> There were 1,204 errors in the last 24 hours — a 32% jump from the previous day, mostly TypeErrors from the checkout flow. The spike began around 2pm UTC and has been trending down since the latest deploy. </AssistantMessage> </MessageRow> </Stack> </Storybook.Demo>

<AssistantMessage>
  There were 1,204 errors in the last 24 hours — a 32% jump from the previous day, mostly
  TypeErrors from the checkout flow. The spike began around 2pm UTC and has been trending
  down since the latest deploy.
</AssistantMessage>

Wide block content (tables, code) is kept from forcing the row wider, so it scrolls within the region instead of overflowing the conversation.