Message

Inert message layout — avatar, header, content, footer, hover actions and bubbles, aligned to either side of a conversation.

1<Flex direction="column" gap={5} style={{ width: 440 }}>
2  <Message>
3    <Message.Avatar>
4      <Avatar size={3} radius="full" fallback="A" color="indigo" />
5    </Message.Avatar>
6    <Message.Header>Assistant</Message.Header>
7    <Message.Content>
8      <Message.Bubble variant="outline">
9        Here's the summary you asked for.
10      </Message.Bubble>
11    </Message.Content>
12    <Message.Footer>1:52 AM</Message.Footer>
13  </Message>
14  <Message align="end">
15    <Message.Content>

Anatomy

1import { Message } from '@raystack/apsara'
2

3<Message align="end">
4  <Message.Avatar>{/* Avatar */}</Message.Avatar>
5  <Message.Header>Ana</Message.Header>
6  <Message.Content>
7    <Message.Bubble>Hi there!</Message.Bubble>
8  </Message.Content>
9  <Message.Footer>1:52 AM</Message.Footer>
10  <Message.Actions>{/* copy / edit */}</Message.Actions>
11</Message>

Message is pure layout — no context, no effects, no chat coupling. It works anywhere: inside a Chat scroller, a comment thread, or a standalone transcript. Scroll behavior (visibility tracking, turn anchoring) belongs to Chat — wrap a message in Chat.Item to opt in.

Usage

Message anatomy

Avatar, header, footer and hover-revealed actions around the content column.

1<Flex direction="column" gap={5} style={{ width: 440 }}>
2  <Message>
3    <Message.Avatar>
4      <Avatar size={3} radius="full" fallback="A" color="indigo" />
5    </Message.Avatar>
6    <Message.Header>Assistant</Message.Header>
7    <Message.Content>
8      <Message.Bubble variant="outline">Hover me for actions.</Message.Bubble>
9    </Message.Content>
10    <Message.Footer>1:52 AM</Message.Footer>
11    <Message.Actions>
12      <IconButton size={1} aria-label="Copy message">
13        ⧉
14      </IconButton>
15    </Message.Actions>

Grouped messages

Consecutive messages from one sender share a group; the avatar and timestamp appear once.

1<Flex direction="column" gap={5} style={{ width: 440 }}>
2  <Message.Group>
3    <Message>
4      <Message.Header>Ana</Message.Header>
5      <Message.Content>
6        <Message.Bubble variant="outline">Pushed the fix.</Message.Bubble>
7      </Message.Content>
8    </Message>
9    <Message>
10      <Message.Content>
11        <Message.Bubble variant="outline">CI is green again.</Message.Bubble>
12      </Message.Content>
13    </Message>
14    <Message>
15      <Message.Avatar>

Bubble variants

variant picks the surface treatment (solid, outline or ghost) and color the palette (neutral, accent or danger).

1<Flex direction="column" gap={3} align="start">
2  <Message.Bubble>The default: solid neutral.</Message.Bubble>
3  <Message.Bubble color="accent">High-emphasis accent bubble.</Message.Bubble>
4  <Message.Bubble color="danger">Something went wrong.</Message.Bubble>
5</Flex>

Ghost bubbles

variant="ghost" removes the surface — no background, border or padding — and the bubble runs the full width of the message row instead of shrink-wrapping. It renders as plain body copy (Text at size="small"), which is the conventional treatment for assistant replies: the reader's own messages keep a bubble, the assistant's read as page content.

1<Flex direction="column" gap={5} style={{ width: 440 }}>
2  <Message align="end">
3    <Message.Content>
4      <Message.Bubble>Summarise the release notes for me.</Message.Bubble>
5    </Message.Content>
6  </Message>
7  <Message>
8    <Message.Avatar>
9      <Avatar size={3} radius="full" fallback="A" color="indigo" />
10    </Message.Avatar>
11    <Message.Header>Assistant</Message.Header>
12    <Message.Content>
13      <Message.Bubble variant="ghost">
14        Three things shipped: the timeline renderer, the AI element set, and a
15        rewrite of the token docs. The ghost bubble spans the whole row, so long

API Reference

Message

One message. align drives which side everything sits on.

Prop

Type

Sub-parts are layout slots: Message.Avatar (bottom-aligned beside the message), Message.Header (sender line), Message.Content (the body column), Message.Footer (timestamp line) and Message.Actions (hover-revealed controls beside the bubble; always visible on touch devices).

Message.Group

A flex column that pulls consecutive messages from the same sender closer together. Render the avatar and footer once — typically on the group's last message.

Message.Bubble

The message surface.

Prop

Type

Accessibility

  • Message.Actions reveal on hover and on focus-within, and stay visible on touch devices, so keyboard and touch users are not locked out.
  • Message bodies are regular document content — screen readers announce them in reading order with no extra semantics to configure.