Message

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#

pnpmnpmyarnbun
pnpm dlx FlowbyAr@latest add message
Copy

Usage#

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/FlowbyAr.png" alt="@FlowbyAr" />
      <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. For the scroll container around a conversation, use MessageScroller.

Composition#

Use the following composition to build a message:

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

Use MessageGroup to stack consecutive messages from the same sender:

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.

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.

Header and Footer#

Use MessageHeader for a sender name and MessageFooter for metadata such as a delivery or read status.

Actions#

Place message-level actions in MessageFooter, such as copy, retry, or feedback buttons.

Attachment#

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.

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.

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

Status updates#

For in-progress messages, use a Marker with role="status" so assistive tech announces the update as it appears.

<Message>
  <Marker role="status">
    <MarkerIcon>
      <Spinner />
    </MarkerIcon>
    <MarkerContent>Checking the logs...</MarkerContent>
  </Marker>
</Message>

API Reference#

Message#

The message row wrapper.

MessageGroup#

Groups consecutive messages from the same sender.

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.

MessageContent#

Wraps the header, message surface, and footer.

MessageHeader#

Displays content above the message, such as a sender name. Stays aligned to the start regardless of align.

MessageFooter#

Displays content below the message, such as status or actions. Aligns to the message side.