Message

Layout for a single conversation row — avatar, alignment, header, and footer around a message surface. Compose the visible bubble with Bubble. For the transcript scroll container, see Message Scroller.

Basic

Row layout for avatar and content. Render the surface with Bubble.

Installation

CLI

npx @sonojs/ui@latest add message

Composition

structure

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

MessageGroup
├── Message
└── Message

Usage

message.tsx

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

export function Example() {
  return (
    <Message>
      <MessageAvatar>
        <Avatar>
          <AvatarImage src="/avatar.png" alt="Oliver" />
          <AvatarFallback>OL</AvatarFallback>
        </Avatar>
      </MessageAvatar>
      <MessageContent>
        <Bubble variant="muted">
          <BubbleContent>How can I help you today?</BubbleContent>
        </Bubble>
      </MessageContent>
    </Message>
  )
}

Props

Prop	Type	Default	Description
align	"start" · "end"	"start"	On `Message` — logical side of the thread (`start` = incoming, `end` = outgoing). Mirrors with writing direction: LTR left/right, RTL right/left. Same `align` values as `Bubble`.
className	string	—	Merge extra Tailwind classes on any part.