消息

在对话中显示一条消息，可选包含头像、头部、底部和对齐方式。

Base UI Radix UI

Deploying to prod real quick.

It's 4:55 PM. On a Friday.

It's a one-line change.

Delivered

It's always a one-line change 😭.

Alright, let me take a look.

👍

Oliver is typing...

import {
  Avatar,
  AvatarFallback,

Message 组件用于在对话中布局单条消息。它会处理消息表面的头像、对齐方式、头部和底部。

对于 AI 应用，你可以使用 Message 组件来渲染推理步骤、工具调用和助手消息。

安装


pnpm dlx shadcn@latest add message

用法

import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Bubble, BubbleContent } from "@/components/ui/bubble"
import { Message, MessageAvatar, MessageContent } from "@/components/ui/message"

<Message>
  <MessageAvatar>
    <Avatar>
      <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
      <AvatarFallback>CN</AvatarFallback>
    </Avatar>
  </MessageAvatar>
  <MessageContent>
    <Bubble>
      <BubbleContent>我今天能帮你什么？</BubbleContent>
    </Bubble>
  </MessageContent>
</Message>

注意： Message 负责行布局——头像、对齐、头部和底部。可见的消息表面内容应在其中使用 Bubble 渲染。对于会话周围的滚动容器，请使用 MessageScroller。

组合

使用以下组合来构建消息：

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

使用 MessageGroup 来堆叠来自同一发送者的连续消息：

MessageGroup
├── Message
└── Message

特性

通过 align 属性为发送方和接收方行设置起始和结束对齐
头像插槽锚定在消息底部，并保持与页脚分离
用于发送者名称、状态和消息操作的页眉和页脚插槽
页脚跟随消息侧边；在 align="end" 行中，操作保持对齐
用于堆叠来自同一发送者的连续消息的分组包装器
通过每个部分上的 className 属性实现可自定义样式

示例

头像

使用 MessageAvatar 在消息旁边渲染头像。在消息上设置 align="end" 以将头像对齐到消息末尾。

The build failed during dependency installation.

Can you share the exact error?

Here's the error from the logs

Something went wrong with the build. The libraries are not installed correctly. Try running the build again.

import {
  Avatar,
  AvatarFallback,

align	描述
`start`	将消息对齐到会话的开头。
`end`	将消息对齐到会话的末尾。

分组

使用 MessageGroup 将来自同一发送者的连续消息堆叠在一起。在较早的消息上渲染一个空的 MessageAvatar，以使它们与最后一条消息上的头像对齐。

I checked the registry addresses.

The component and example JSON now live under the UI registry.

import {
  Avatar,
  AvatarFallback,

头部和底部

使用 MessageHeader 显示发送者名称，使用 MessageFooter 显示元数据，例如送达或已读状态。

Olivia

I already checked the logs.

Send the report to the team. Ping @shadcn if you need help.

Read Yesterday

import { Bubble, BubbleContent } from "@/components/ui/bubble"
import {
  Message,

操作

将消息级操作放在 MessageFooter 中，例如复制、重试或反馈按钮。

The install failure is coming from the workspace package.

Okay drop me a link. Taking a look...

Failed to send

import {
  CopyIcon,
  RefreshCcwIcon,

附件

Here's the image. Can you add it to the PDF? Use it for the cover page.

Done. Here's the PDF with the image added as the cover page.

sales-dashboard.pdfPDF · 2.4 MB

Thanks. Looks good.

"use client"

import { DownloadIcon, FileTextIcon } from "lucide-react"

无障碍

Message 是一个展示型布局包装器。无障碍性来自你放入其中的内容。

为仅图标操作添加标签

MessageFooter 中的操作按钮通常只有图标，因此请为每个按钮添加一个 aria-label。

<MessageFooter>
  <Button variant="ghost" size="icon" aria-label="复制">
    <CopyIcon />
  </Button>
</MessageFooter>

状态更新

对于进行中的消息，请使用带有 role="status" 的 Marker，这样辅助技术就会在更新出现时播报它。

<Message>
  <Marker role="status">
    <MarkerIcon>
      <Spinner />
    </MarkerIcon>
    <MarkerContent>正在检查日志...</MarkerContent>
  </Marker>
</Message>

API 参考

Message

消息行包装器。

Prop	Type	Default	Description
`align`	`"start" \| "end"`	`"start"`	消息在对话中的对齐方式。
`className`	`string`	-	应用于该行的附加类。

MessageGroup

将来自同一发送者的连续消息分组。

Prop	Type	Default	Description
`className`	`string`	-	应用于组根节点的附加类。

MessageAvatar

头像槽，位于消息底部对齐。当消息包含 MessageFooter 时，头像会上移以与消息主体而不是页脚保持对齐。

Prop	Type	Default	Description
`className`	`string`	-	应用于头像槽的附加类。

MessageContent

包裹头部、消息主体和页脚。

Prop	Type	Default	Description
`className`	`string`	-	应用于内容槽的附加类。

MessageHeader

显示消息上方的内容，例如发送者名称。无论 align 如何，都保持与起始端对齐。

Prop	Type	Default	Description
`className`	`string`	-	应用于头部的附加类。

MessageFooter

显示消息下方的内容，例如状态或操作。与消息侧边对齐。

Prop	Type	Default	Description
`className`	`string`	-	应用于页脚的附加类。

菜单栏消息滚动器