Message Bubble

A composable chat message bubble with avatar, content, and timestamp sub-components. Role-aware layout for user and assistant messages.

Ask me anything

Start a conversation to see messages here.

Today

Hey! Can you explain how compound components work in React?

10:41 AM

Sure! Compound components is a pattern where a parent component shares implicit state with its children via React Context. You export multiple sub-components that only make sense together — the parent owns the state, and children consume it without requiring you to thread props manually.

10:41 AM

That's clean. What's the main benefit over prop drilling?

10:42 AM

The API stays flexible without exploding the parent's prop surface. Consumers can reorder, omit, or swap sub-components freely. shadcn/ui is built almost entirely on this pattern.

10:42 AM

This has been super helpful. Any recommended reading?

10:43 AM

Kent C. Dodds wrote the canonical article on his blog. The Radix UI source is also excellent reading — every primitive is a compound component with a clean context boundary.

10:43 AM

Installation

Usage

import {
  MessageBubble,
  MessageBubbleAvatar,
  MessageBubbleContent,
  MessageBubbleTimestamp,
} from '@/components/odysseyui/message-bubble';

export default function Page() {
  return (
    <MessageBubble role="user">
      <MessageBubbleAvatar src="https://github.com/shadcn.png" />
      <MessageBubbleContent>
        Hey! Can you explain compound components?
        <MessageBubbleTimestamp>10:41 AM</MessageBubbleTimestamp>
      </MessageBubbleContent>
    </MessageBubble>
  );
}

Used with Chat Container

MessageBubble is designed to be composed inside ChatContainerMessage:

import {
  ChatContainer,
  ChatContainerContent,
  ChatContainerMessage,
  ChatContainerDivider,
} from '@/components/odysseyui/chat-container';
import {
  MessageBubble,
  MessageBubbleAvatar,
  MessageBubbleContent,
  MessageBubbleTimestamp,
} from '@/components/odysseyui/message-bubble';

export default function Page() {
  return (
    <ChatContainer className="h-[500px] w-full max-w-2xl">
      <ChatContainerContent>
        <ChatContainerDivider label="Today" />
        <ChatContainerMessage>
          <MessageBubble role="user">
            <MessageBubbleAvatar src="https://github.com/shadcn.png" />
            <MessageBubbleContent>
              Hello!
              <MessageBubbleTimestamp>10:41 AM</MessageBubbleTimestamp>
            </MessageBubbleContent>
          </MessageBubble>
        </ChatContainerMessage>
        <ChatContainerMessage>
          <MessageBubble role="assistant">
            <MessageBubbleAvatar />
            <MessageBubbleContent>
              Hi there! How can I help?
              <MessageBubbleTimestamp>10:41 AM</MessageBubbleTimestamp>
            </MessageBubbleContent>
          </MessageBubble>
        </ChatContainerMessage>
      </ChatContainerContent>
    </ChatContainer>
  );
}

How It Works

MessageBubble accepts a role prop ("user" or "assistant") and provides it to all children via React Context.
role="user" reverses the flex row so the avatar appears on the right; role="assistant" keeps it on the left.
MessageBubbleAvatar automatically picks a UserIcon or BotIcon fallback based on the role. Pass src to use a custom image.
MessageBubbleContent applies different background and text colours per role — bg-primary for user, bg-muted for assistant — and rounds corners asymmetrically to create a tail effect.
MessageBubbleTimestamp aligns right and uses a reduced opacity colour matching the bubble's role.