Message Bubble

The MessageBubble component is a compound component for displaying conversational messages in AI and chat interfaces. It supports both user and assistant messages with different styling and layouts.

Usage

The MessageBubble component uses a compound pattern with MessageBubble.Root, MessageBubble.Content, and MessageBubble.Footer sub-components.

Import

import {
  MessageBubble,
  CopyButton,
  Button,
  IconV2,
  Text,
} from "@harnessio/ui/components";

Basic Usage

<MessageBubble.Root role="user">
  <MessageBubble.Content>
    <MessageBubble.Text>
      Your message here
    </MessageBubble.Text>
  </MessageBubble.Content>
</MessageBubble.Root>

With Footer Actions

<MessageBubble.Root role="user">
  <MessageBubble.Content>
    <MessageBubble.Text>Your message here</MessageBubble.Text>
  </MessageBubble.Content>
  <MessageBubble.Footer>
    <CopyButton name="Your message here" buttonVariant="ghost" size="sm" />
    <Button iconOnly variant="ghost" size="sm" onClick={handleEdit}>
      <IconV2 name="edit" />
    </Button>
    <Text variant="caption-normal" color="foreground-3">
      {formatTime(timestamp)}
    </Text>
  </MessageBubble.Footer>
</MessageBubble.Root>

Component Structure

MessageBubble.Root

The root container that defines the message role and layout.

Props:

• role: "user" | "assistant" - Determines the message role and styling
• Extends HTMLAttributes<HTMLDivElement>

MessageBubble.Content

The content wrapper with role-based styling.

Props:

• children: React node - The message content
• Extends HTMLAttributes<HTMLDivElement>

MessageBubble.Footer

A flexible container for actions like copy, edit buttons, and timestamps.

Props:

• children: React node - Action buttons, timestamps, or any custom content
• Extends HTMLAttributes<HTMLDivElement>