---
title: Message
description: Lays out a conversation message with optional avatar, header, footer, grouping, and alignment.
icon: message-square
author:
  name: shadcn
  url: https://github.com/shadcn
sidebar:
  badge: New
---

<ComponentPreview name="message-demo" />

<PoweredBy packages={[
  { name: 'Shadcn UI', url: 'https://ui.shadcn.com/docs/components/base/message' },
]} />

## Installation

```package-install
npx 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.

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

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

## Anatomy

```text
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.

<ComponentPreview name="chat-agent-demo" bigScreen />

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](/docs/chat).

### 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.

```tsx
<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](https://ui.shadcn.com/docs/components/base/message) component.