消息

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

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

消息行包装器。

属性	类型	默认值	描述
`align`	`"start" \| "end"`	`"start"`	消息在对话中的对齐方式。
`className`	`string`	-	要应用到该行的附加类。

MessageGroup

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

属性	类型	默认值	描述
`className`	`string`	-	要应用到分组根元素的附加类。

MessageAvatar

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

属性	类型	默认值	描述
`className`	`string`	-	要应用到头像插槽的附加类。

MessageContent

包裹标题、消息主体和页脚。

属性	类型	默认值	描述
`className`	`string`	-	要应用到内容插槽的附加类。

MessageHeader

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

属性	类型	默认值	描述
`className`	`string`	-	要应用到页眉的附加类。

MessageFooter

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

属性	类型	默认值	描述
`className`	`string`	-	要应用到页脚的附加类。

菜单栏消息滚动器