Message

Displays a message in a conversation, with optional avatar, header, footer, and alignment.

The Message component lays out a single message in a conversation. It handles the avatar, alignment, header, and footer around the message surface. Render the visible surface with Bubble.

How can I help you today?

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

Summarize the latest deploy notes.

Delivered

It's always a one-line change.

Alright, let me take a look.

❤️

Oliver is typing...

<Message>
  <MessageAvatar>...</MessageAvatar>
  <MessageContent>
    <Bubble variant="secondary">
      <BubbleContent>How can I help you today?</BubbleContent>
    </Bubble>
    <MessageFooter>It's 4:55 PM. On a Friday.</MessageFooter>
  </MessageContent>
</Message>
<Marker role="status">
  <MarkerContent className="shimmer">
    <span className="font-medium">Oliver</span> is typing...
  </MarkerContent>
</Marker>

Installation

pnpm dlx cubix@latest add message --base aria

Usage

Import

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

Example

<Message>
  <MessageAvatar>
    <Avatar>
      <AvatarImage src="https://github.com/vercel.png" alt="@cx" />
      <AvatarFallback>CX</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.

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
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 row.

The build failed during dependency installation.

Can you share the exact error?

Here's the error from the logs

Deploy failed

Timeout after 30s while reaching the API.

<Bubble variant="destructive">
  <BubbleContent className="flex items-start gap-2">
    <CircleAlertIcon className="mt-0.5 size-4 shrink-0" />
    <div className="min-w-0 space-y-0.5">
      <p className="font-medium leading-snug">Deploy failed</p>
      <p className="text-sm leading-snug opacity-80">
        Timeout after 30s while reaching the API.
      </p>
    </div>
  </BubbleContent>
</Bubble>

align	Description
start	Align the message to the start of the conversation.
end	Align the message to the end of the conversation.

Group

Use MessageGroup to stack consecutive messages from the same sender. Render an empty MessageAvatar on earlier messages to keep them aligned with the avatar on the last one.

I checked the registry addresses.

They look correct. Want me to retry the install?

Yes, please retry it.

<MessageGroup>
  <Message>
    <MessageAvatar />
    <MessageContent>
      <Bubble variant="secondary">
        <BubbleContent>I checked the registry addresses.</BubbleContent>
      </Bubble>
    </MessageContent>
  </Message>
  <Message>
    <MessageAvatar>...</MessageAvatar>
    <MessageContent>
      <Bubble variant="secondary">
        <BubbleContent>They look correct. Want me to retry the install?</BubbleContent>
      </Bubble>
    </MessageContent>
  </Message>
</MessageGroup>

Header and Footer

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

Oliver

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

Delivered

<Message>
  <MessageAvatar>...</MessageAvatar>
  <MessageContent>
    <MessageHeader>Oliver</MessageHeader>
    <Bubble variant="secondary">
      <BubbleContent>Send the report to the team.</BubbleContent>
    </Bubble>
    <MessageFooter>Delivered</MessageFooter>
  </MessageContent>
</Message>

Actions

Place message-level actions in MessageFooter, such as copy, retry, or feedback buttons. Give icon-only actions an aria-label. For a failed send, show Failed to send in text-destructive with a retry control.

The install failure is coming from the workspace package.

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

Failed to send

<Message align="end">
  <MessageContent>
    <Bubble>
      <BubbleContent>Okay drop me a link. Taking a look...</BubbleContent>
    </Bubble>
    <MessageFooter className="gap-2">
      <span className="font-normal text-destructive">Failed to send</span>
      <Button variant="ghost" size="icon-xs" aria-label="Retry">
        <RefreshCwIcon />
      </Button>
    </MessageFooter>
  </MessageContent>
</Message>

Attachment

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

sales-dashboard.pdfPDF · 2.4 MB

<Attachment state="done">
  <AttachmentMedia>
    <FileTextIcon />
  </AttachmentMedia>
  <AttachmentContent>
    <AttachmentTitle>sales-dashboard.pdf</AttachmentTitle>
    <AttachmentDescription>PDF · 2.4 MB</AttachmentDescription>
  </AttachmentContent>
  <AttachmentActions>
    <AttachmentAction
      type="button"
      aria-label="Download"
      size="icon-sm"
      variant="secondary"
    >
      <DownloadIcon />
    </AttachmentAction>
  </AttachmentActions>
</Attachment>

Status

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

Checking the deploy logs now.

Oliver is typing...

Checking the logs...

<Marker role="status">
  <MarkerContent className="shimmer">
    <span className="font-medium">Oliver</span> is typing...
  </MarkerContent>
</Marker>

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

Reactions

Place BubbleReactions inside a Bubble to show emoji reactions on the message surface. Use aria-label to describe the reactions.

Deploy shipped with the new message layout.

Alright, let me take a look.

❤️

<Bubble variant="muted">
  <BubbleContent>Alright, let me take a look.</BubbleContent>
  <BubbleReactions aria-label="Reactions: heart">
    <span>❤️</span>
  </BubbleReactions>
</Bubble>

API Reference

Message

The message row wrapper.

Prop	Type	Default	Description
align	"start" \| "end"	"start"	The alignment of the message in the conversation.
className	string	-	Additional classes to apply to the row.

MessageGroup

Groups consecutive messages from the same sender.

Prop	Type	Default	Description
className	string	-	Additional classes to apply to the group root.

MessageAvatar

The avatar slot, aligned to the bottom of the message.

Prop	Type	Default	Description
className	string	-	Additional classes to apply to the avatar slot. Aligns to the bottom of the message surface.

MessageContent

Wraps the header, message surface, and footer.

Prop	Type	Default	Description
className	string	-	Additional classes to apply to the content slot.

MessageHeader

Prop	Type	Default	Description
className	string	-	Additional classes to apply to the header. Stays aligned to the start regardless of align.

MessageFooter

Prop	Type	Default	Description
className	string	-	Additional classes to apply to the footer. Aligns to the message side.