snapshot of https://github.com/shadcn-ui/ui.git (main, 2026-09-15; blobs > 131072B omitted)
This commit is contained in:
upstream-mirror
246
apps/v4/content/docs/components/radix/message.mdx
Normal file
246
apps/v4/content/docs/components/radix/message.mdx
Normal file
@@ -0,0 +1,246 @@
|
||||
---
|
||||
title: Message
|
||||
description: Displays a message in a conversation, with optional avatar, header, footer, and alignment.
|
||||
base: radix
|
||||
component: true
|
||||
---
|
||||
|
||||
<ComponentPreview
|
||||
styleName="radix-rhea"
|
||||
name="message-demo"
|
||||
previewClassName="h-auto theme-blue"
|
||||
/>
|
||||
|
||||
The `Message` component lays out a single message in a conversation. It handles the avatar, alignment, header, and footer around the message surface.
|
||||
|
||||
For AI apps, you can render reasoning steps, tool calls and assistant messages using the `Message` component.
|
||||
|
||||
## Installation
|
||||
|
||||
<CodeTabs>
|
||||
|
||||
<TabsList>
|
||||
<TabsTrigger value="cli">Command</TabsTrigger>
|
||||
<TabsTrigger value="manual">Manual</TabsTrigger>
|
||||
</TabsList>
|
||||
<TabsContent value="cli">
|
||||
|
||||
```bash
|
||||
npx shadcn@latest add message
|
||||
```
|
||||
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="manual">
|
||||
|
||||
<Steps className="mb-0 pt-2">
|
||||
|
||||
<Step>Copy and paste the following code into your project.</Step>
|
||||
|
||||
<ComponentSource
|
||||
name="message"
|
||||
title="components/ui/message.tsx"
|
||||
styleName="radix-rhea"
|
||||
/>
|
||||
|
||||
<Step>Update the import paths to match your project setup.</Step>
|
||||
|
||||
</Steps>
|
||||
|
||||
</TabsContent>
|
||||
|
||||
</CodeTabs>
|
||||
|
||||
## Usage
|
||||
|
||||
```tsx showLineNumbers
|
||||
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
|
||||
import { Bubble, BubbleContent } from "@/components/ui/bubble"
|
||||
import { Message, MessageAvatar, MessageContent } from "@/components/ui/message"
|
||||
```
|
||||
|
||||
```tsx showLineNumbers
|
||||
<Message>
|
||||
<MessageAvatar>
|
||||
<Avatar>
|
||||
<AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
|
||||
<AvatarFallback>CN</AvatarFallback>
|
||||
</Avatar>
|
||||
</MessageAvatar>
|
||||
<MessageContent>
|
||||
<Bubble>
|
||||
<BubbleContent>How can I help you today?</BubbleContent>
|
||||
</Bubble>
|
||||
</MessageContent>
|
||||
</Message>
|
||||
```
|
||||
|
||||
**Note:** `Message` owns the row layout—avatar, alignment, header, and footer.
|
||||
Render the visible message surface inside it with
|
||||
[`Bubble`](/docs/components/bubble). For the scroll container around a
|
||||
conversation, use [`MessageScroller`](/docs/components/message-scroller).
|
||||
|
||||
## Composition
|
||||
|
||||
Use the following composition to build a message:
|
||||
|
||||
```text
|
||||
Message
|
||||
├── MessageAvatar
|
||||
└── MessageContent
|
||||
├── MessageHeader
|
||||
├── Bubble
|
||||
└── MessageFooter
|
||||
```
|
||||
|
||||
Use `MessageGroup` to stack consecutive messages from the same sender:
|
||||
|
||||
```text
|
||||
MessageGroup
|
||||
├── Message
|
||||
└── Message
|
||||
```
|
||||
|
||||
## Features
|
||||
|
||||
- Start and end alignment for sender and receiver rows via the `align` prop
|
||||
- Avatar slot that anchors to the bottom of the message and stays clear of the footer
|
||||
- Header and footer slots for sender names, status, and message actions
|
||||
- Footer follows the message side; actions stay aligned on `align="end"` rows
|
||||
- Group wrapper for stacking consecutive messages from the same sender
|
||||
- Customizable styling through the `className` prop on every part
|
||||
|
||||
## Avatar
|
||||
|
||||
Use `MessageAvatar` to render an avatar next to the message. Set `align="end"` on the message to align the avatar to the end of the message.
|
||||
|
||||
<ComponentPreview
|
||||
styleName="radix-rhea"
|
||||
name="message-avatar"
|
||||
previewClassName="h-auto theme-blue"
|
||||
/>
|
||||
|
||||
| align | Description |
|
||||
| ------- | --------------------------------------------------- |
|
||||
| `start` | Align the message to the start of the conversation. |
|
||||
| `end` | Align the message to the end of the conversation. |
|
||||
|
||||
## Group
|
||||
|
||||
Use `MessageGroup` to stack consecutive messages from the same sender. Render an empty `MessageAvatar` on the earlier messages to keep them aligned with the avatar on the last one.
|
||||
|
||||
<ComponentPreview
|
||||
styleName="radix-rhea"
|
||||
name="message-group"
|
||||
previewClassName="h-auto theme-blue"
|
||||
/>
|
||||
|
||||
## Header and Footer
|
||||
|
||||
Use `MessageHeader` for a sender name and `MessageFooter` for metadata such as a delivery or read status.
|
||||
|
||||
<ComponentPreview
|
||||
styleName="radix-rhea"
|
||||
name="message-header-footer"
|
||||
previewClassName="h-auto theme-blue"
|
||||
/>
|
||||
|
||||
## Actions
|
||||
|
||||
Place message-level actions in `MessageFooter`, such as copy, retry, or feedback buttons.
|
||||
|
||||
<ComponentPreview
|
||||
styleName="radix-rhea"
|
||||
name="message-actions"
|
||||
previewClassName="h-auto theme-blue"
|
||||
/>
|
||||
|
||||
## Attachment
|
||||
|
||||
<ComponentPreview
|
||||
styleName="radix-rhea"
|
||||
name="message-attachment"
|
||||
previewClassName="h-auto theme-blue"
|
||||
/>
|
||||
|
||||
## Accessibility
|
||||
|
||||
`Message` is a presentational layout wrapper. Accessibility comes from the content you place inside it.
|
||||
|
||||
### Label icon-only actions
|
||||
|
||||
Action buttons in `MessageFooter` are usually icon-only, so give each one an `aria-label`.
|
||||
|
||||
```tsx showLineNumbers
|
||||
<MessageFooter>
|
||||
<Button variant="ghost" size="icon" aria-label="Copy">
|
||||
<CopyIcon />
|
||||
</Button>
|
||||
</MessageFooter>
|
||||
```
|
||||
|
||||
### Status updates
|
||||
|
||||
For in-progress messages, use a [`Marker`](/docs/components/marker) with `role="status"` so assistive tech announces the update as it appears.
|
||||
|
||||
```tsx showLineNumbers
|
||||
<Message>
|
||||
<Marker role="status">
|
||||
<MarkerIcon>
|
||||
<Spinner />
|
||||
</MarkerIcon>
|
||||
<MarkerContent>Checking the logs...</MarkerContent>
|
||||
</Marker>
|
||||
</Message>
|
||||
```
|
||||
|
||||
## API Reference
|
||||
|
||||
### Message
|
||||
|
||||
The message row wrapper.
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
| ----------- | ------------------ | --------- | ------------------------------------------------- |
|
||||
| `align` | `"start" \| "end"` | `"start"` | The alignment of the message in the conversation. |
|
||||
| `className` | `string` | - | Additional classes to apply to the row. |
|
||||
|
||||
### MessageGroup
|
||||
|
||||
Groups consecutive messages from the same sender.
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
| ----------- | -------- | ------- | ---------------------------------------------- |
|
||||
| `className` | `string` | - | Additional classes to apply to the group root. |
|
||||
|
||||
### MessageAvatar
|
||||
|
||||
The avatar slot, aligned to the bottom of the message. When the message has a `MessageFooter`, the avatar shifts up to stay aligned with the message surface instead of the footer.
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
| ----------- | -------- | ------- | ----------------------------------------------- |
|
||||
| `className` | `string` | - | Additional classes to apply to the avatar slot. |
|
||||
|
||||
### MessageContent
|
||||
|
||||
Wraps the header, message surface, and footer.
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
| ----------- | -------- | ------- | ------------------------------------------------ |
|
||||
| `className` | `string` | - | Additional classes to apply to the content slot. |
|
||||
|
||||
### MessageHeader
|
||||
|
||||
Displays content above the message, such as a sender name. Stays aligned to the start regardless of `align`.
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
| ----------- | -------- | ------- | ------------------------------------------ |
|
||||
| `className` | `string` | - | Additional classes to apply to the header. |
|
||||
|
||||
### MessageFooter
|
||||
|
||||
Displays content below the message, such as status or actions. Aligns to the message side.
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
| ----------- | -------- | ------- | ------------------------------------------ |
|
||||
| `className` | `string` | - | Additional classes to apply to the footer. |
|
||||
Reference in New Issue
Block a user