Chat·component·@astryxdesign/core

Chat Message Bubble

Styled content container for the chat "bubble." Reads sender from parent ChatMessage context to auto-style the background. Use filled for standard messages and ghost when content needs alignment without a visible boundary. Supports name/metadata slots aligned with bubble padding, and multi-bubble grouping via the group prop for consecutive messages from the same sender.

Open in Playground @astryxdesign/core/Chat

Showcases and examples

6 documented examples

Chat Message Bubble

Grouped user bubbles with filled styling and a ghost-variant agent response, with timestamps and delivery status.

Open Playground ↗

Preview loads on approachPreview loads on approach

Exact source · chat-message-bubble-showcase

// Copyright (c) Meta Platforms, Inc. and affiliates.

'use client';

import {
  ChatMessageList,
  ChatMessage,
  ChatMessageBubble,
  ChatMessageMetadata,
} from '@astryxdesign/core/Chat';
import {Timestamp} from '@astryxdesign/core/Timestamp';

export default function ChatMessageBubbleShowcase() {
  return (
    <ChatMessageList style={{maxWidth: 600}}>
      <ChatMessage sender="user">
        <ChatMessageBubble group="first">
          I just pushed the latest changes to the feature branch.
        </ChatMessageBubble>
        <ChatMessageBubble
          group="last"
          metadata={
            <ChatMessageMetadata
              timestamp={
                <Timestamp value="2026-04-10T09:15:00" format="time" />
              }
              status="read"
            />
          }>
          Can you review when you get a chance?
        </ChatMessageBubble>
      </ChatMessage>
      <ChatMessage sender="assistant">
        <ChatMessageBubble
          variant="ghost"
          metadata={
            <ChatMessageMetadata
              timestamp={
                <Timestamp value="2026-04-10T09:16:00" format="time" />
              }
            />
          }>
          The changes look great. Ship it!
        </ChatMessageBubble>
      </ChatMessage>
    </ChatMessageList>
  );
}

Usage

Typed props

Prop	Type and behavior
`children`	`ReactNode` · required Bubble content: text, Markdown, or any ReactNode.
`variant`	`'filled' \| 'ghost'` · default 'filled' Visual variant. 'filled' renders sender-colored background (default). 'ghost' renders transparent background but keeps padding for alignment.
`name`	`ReactNode` Sender name rendered above the bubble, aligned with bubble text padding. Use on the first bubble in a message. Non-rendering scalar values (null, undefined, booleans, and the empty string) omit the aligned wrapper; numeric 0 remains aligned. If the first content is raw (no bubble), use ChatMessage's `name` prop instead.
`metadata`	`ReactNode` Metadata content rendered below the bubble, aligned with bubble text padding. Use on the last bubble in a message. Non-rendering scalar values (null, undefined, booleans, and the empty string) omit the aligned wrapper; numeric 0 remains aligned. If the last content is raw (no bubble), use ChatMessage's `metadata` prop instead. Slot: Text
`group`	`'first' \| 'middle' \| 'last'` Position within a multi-bubble group. Controls corner radius reduction on the sender side. Leave unset for standalone bubbles (full radius).
`width`	`SizeValue` Width of the bubble (number = pixels, string = used as-is). When set, replaces the default max(80%, 280px) width cap. Combine with variant="ghost" to let custom content (an artifact card, attachments) span the full message column.