chat-bubble

Content wrapper for chat messages with typography, code block styling, and CSS-only typing dots animation.

Overview

A presentational wrapper for message content inside <chat-message>. Handles padding, border-radius, typography, and code block formatting. The bubble's background color is controlled by the parent message's data-role attribute.

Content Formatting

Place any HTML content inside the bubble. Paragraphs, inline formatting, and code blocks are all styled.

<chat-bubble> <p>Paragraph content with <strong>formatting</strong>.</p> </chat-bubble>

Code Blocks

Wrap code in <pre><code> for monospace styling with a subtle background.

<chat-bubble> <p>Here's an example:</p> <pre><code>console.log('code blocks work')</code></pre> </chat-bubble>

Typing Dots

When the parent <chat-message> has data-status="typing" and the bubble is empty, CSS renders three animated bouncing dots via ::after with radial gradients.

<chat-message data-role="agent" data-status="typing"> <chat-bubble></chat-bubble> </chat-message>

When real content arrives, populate the bubble's innerHTML and remove data-status from the parent. The same DOM node transitions from typing indicator to content — no element swap.

Reduced Motion

When prefers-reduced-motion: reduce is active, the typing animation is disabled and the dots display as a static indicator at reduced opacity.

CSS Variables

Variable Default Description
--chat-bubble-radius var(--radius-m) Bubble border radius (inherited from chat-message)

Related