Message

Message is the layout of one turn. It owns the author, avatar, timestamp, metadata and alignment; MessageContent is the column between the avatar and the row's edge; a Bubble is always a child and is never built here. The data slots the row carried before — reasoning, tool calls, citations, streaming — stay as props on MessageContent and paint outside the bubble surface.

InstallationCopy Anchor Link

nub add @gpuixui/components

UsageCopy Anchor Link

import {
  Bubble,
  BubbleContent,
  Message,
  MessageActions,
  MessageAvatar,
  MessageContent,
  MessageFooter,
  MessageHeader,
} from "@gpuixui/components";

<Message variant="assistant" timestamp="09:42">
  <MessageAvatar />
  <MessageContent
    reasoning={message.reasoning}
    toolCalls={message.tools}
    sources={message.sources}
    streaming={message.streaming}
  >
    <MessageHeader />
    <Bubble>
      <BubbleContent>{message.body}</BubbleContent>
    </Bubble>
    <MessageFooter>
      <MessageActions onCopy={copy} onRetry={retry} />
    </MessageFooter>
  </MessageContent>
</Message>;

CompositionCopy Anchor Link

Message
├── MessageAvatar
└── MessageContent
    ├── MessageHeader
    ├── Bubble
    │   └── BubbleContent
    └── MessageFooter
        └── MessageActions

MessageGroup stacks consecutive rows from one sender.

Author and timestampCopy Anchor Link

Message reads the author once and shares it with MessageHeader and MessageAvatar, so a row cannot publish two different names. variant selects the default author (You, Assistant, System) and the default side (end for a user, start otherwise); author, timestamp and meta override what the header paints. A timestamp is the caller's formatted string; no locale is applied.

Data slotsCopy Anchor Link

Reasoning, tool calls, citations and the streaming marker are data, not markup: presence is the only switch, and a restored record's absent slot paints nothing. They sit outside the bubble, so a trace can be read without being painted into the reply.

ActionsCopy Anchor Link

MessageActions renders nothing when no handler can serve a control. Put it in MessageFooter; the footer follows the row's side.

APICopy Anchor Link

Breaking changeCopy Anchor Link

MessageRoot is now Message. The old root built the bubble itself; the new one does not. Every row must place a Bubble inside MessageContent, and actions move from MessageContent to MessageFooter. This is the shadcn structure the component is modelled on; the split is what lets a bubble be quoted, grouped or reused on its own.

Edit this page on GitHubpackages/components/docs/message.mdx