Message

Lays out a conversation message with optional avatar, header, footer, grouping, and alignment.

Installation

npx shadcn@latest add @redpanda/message

pnpm dlx shadcn@latest add @redpanda/message

yarn dlx shadcn@latest add @redpanda/message

bunx shadcn@latest add @redpanda/message

nubx shadcn@latest add @redpanda/message

aube dlx shadcn@latest add @redpanda/message

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

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.

For a runnable streaming example with stop, retry, visible failures, and attachments, see Chat with useChat.

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.