Message
对话中的一轮发言：发言人、发言内容，以及下方的一行附注。
安装
# once per project: where @zzzui items come frompnpm dlx shadcn@latest registry add @zzzui=https://zzzui.catforest.dev/r/{name}.jsonpnpm dlx shadcn@latest add @zzzui/message示例
两轮发言
import { Avatar, AvatarFallback, AvatarImage } from "@/components/zero/avatar";import { Bubble, BubbleContent } from "@/components/zero/bubble";import { Message, MessageAvatar, MessageContent, MessageFooter, MessageGroup, MessageHeader,} from "@/components/zero/message";export default function MessageTurns() { return ( <MessageGroup className="w-full max-w-md"> <Message> <MessageAvatar> <Avatar size="sm"> <AvatarImage src="/samples/portrait-a.svg" alt="" /> <AvatarFallback>MK</AvatarFallback> </Avatar> </MessageAvatar> <MessageContent> <MessageHeader> <strong>Mara</strong> 21:04 </MessageHeader> <Bubble variant="secondary"> <BubbleContent>Gate 4 is shut. Taking the canal.</BubbleContent> </Bubble> </MessageContent> </Message> <Message align="end"> <MessageContent> <Bubble> <BubbleContent>Copy. Sign for it at the north gate.</BubbleContent> </Bubble> <MessageFooter>Read 21:05</MessageFooter> </MessageContent> </Message> </MessageGroup> );}行为
头部以斜体显示发言人（将名字置于 strong 中），旁边是时间；内容区可放置 Bubble、附件或其他任意内容；底部是一行淡色文字。align="end" 将这一轮发言置于另一侧，用于己方发言。MessageAvatar 放置一个 Avatar，与该轮发言的最后一行对齐。
属性
Message
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| align | "start" | "end" | "start" | 发言位于哪一侧。 |