Message

Displays a chat message with avatar, header, footer, and content — pairs with Bubble for the message body.

👤

Bat

Hi, how can I help you?

10:30 AM

"use client"
import { Message, MessageAvatar, MessageContent, MessageHeader, MessageFooter, Bubble, BubbleContent } from "uilab-core"

export function MessagePreview() {
  return (

Usage

import { Message, MessageAvatar, MessageContent, MessageHeader, MessageFooter } from "uilab-core"

<Message align="start">
  <MessageAvatar>👤</MessageAvatar>
  <MessageContent>
    <MessageHeader>Bat</MessageHeader>
    <Bubble>
      <BubbleContent>Hello!</BubbleContent>
    </Bubble>
    <MessageFooter>10:30 AM</MessageFooter>
  </MessageContent>
</Message>

Examples

Align

Use align="start" or align="end" to position the message and its avatar.

👤

Received message (start)

10:28 AM

Sent message (end)

10:30 AM

"use client"
import { Message, MessageAvatar, MessageContent, MessageFooter, Bubble, BubbleContent } from "uilab-core"

export function MessageAlignExample() {
  return (

Group

Use MessageGroup to group consecutive messages from the same sender.

👤

John Doe

First message

Second message (same sender)

10:31 AM

"use client"
import { MessageGroup, Message, MessageAvatar, MessageContent, MessageHeader, MessageFooter, Bubble, BubbleContent } from "uilab-core"

export function MessageGroupExample() {
  return (

Action

Place message-level actions in MessageFooter, such as copy, retry, or feedback buttons. Give each icon-only button an aria-label.

🤖

Task completed successfully.

"use client"
import {
  Message,
  MessageAvatar,
  MessageContent,

With Attachment

Combine Message, Bubble, and Attachment to build a realistic conversation with file sharing.

Can this image be added to the PDF? Please use it on the cover page.

Got it. The image has been added to the PDF on the cover page.

sales-dashboard.pdfPDF · 2.4 MB

Thank you, it looks great.

"use client"
import { DownloadIcon, FileTextIcon } from "lucide-react"
import {
  Attachment,
  AttachmentAction,