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 and MessageBubble.Content sub-components.

Usage

import { MessageBubble } from '@harnessio/ui/components'

return (
  <MessageBubble.Root role="user">
    <MessageBubble.Content>
      <MessageBubble.Text>
        Your message here
      </MessageBubble.Text>
    </MessageBubble.Content>
  </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>