Message

Powered by

Shadcn UI

Installation

Usage

Message owns row layout. Render the visible message surface with Bubble, and wrap the conversation in MessageScroller when scroll behavior is needed.

import {
  Message,
  MessageAvatar,
  MessageContent,
  MessageFooter,
  MessageGroup,
  MessageHeader,
} from "@/components/redpanda-ui/components/message"

<Message align="end">
  <MessageAvatar><Avatar /></MessageAvatar>
  <MessageContent>
    <MessageHeader>You · now</MessageHeader>
    <Bubble align="end"><BubbleContent>Hello</BubbleContent></Bubble>
    <MessageFooter>Delivered</MessageFooter>
  </MessageContent>
</Message>

Anatomy

MessageGroup
└── Message
    ├── MessageAvatar
    └── MessageContent
        ├── MessageHeader
        ├── Bubble
        └── MessageFooter

Alignment and grouping

Use align="start" for received or assistant messages and align="end" for the current sender. MessageGroup stacks consecutive rows from the same sender. The avatar anchors to the bottom of the message surface and stays clear of the footer.

Agent conversation pattern

This installable composition combines the chat primitives with patterns used in operational agent interfaces: a reconstructed-history boundary, tool activity, a generated file, and response actions with run metadata.

Keep transport, streaming state, persistence, and rich-content rendering in the application. The chat components own conversation layout and interaction rather than the agent protocol.

Response actions and metadata

Place copy, retry, and feedback actions in MessageFooter beside concise operational metadata. Generic children keep the layout flexible for timestamps, token counts, latency, model names, or run identifiers without coupling Message to one AI SDK.

<MessageFooter className="flex-wrap gap-1.5">
  <span>1,248 input · 286 output tokens</span>
  <span aria-hidden="true">·</span>
  <code className="font-mono">run_7f3a</code>
  <span className="ml-auto flex items-center gap-0.5">
    <CopyButton
      aria-label="Copy assistant message"
      className="size-6"
      content={message.text}
      size="icon"
      variant="ghost"
    />
    <Button aria-label="Retry response" onClick={retry} size="icon-xs" variant="ghost">
      <RotateCcwIcon />
    </Button>
    <Button aria-label="Helpful response" onClick={markHelpful} size="icon-xs" variant="ghost">
      <ThumbsUpIcon />
    </Button>
  </span>
</MessageFooter>

Label every icon-only action. Keep actions as siblings of message and attachment triggers so interactive elements are never nested.

Credits

• Based on the Shadcn UI Message component.