Welcome to Vanilla Breeze
This bell pulls live notifications from /go/notify/messages — the same contract documented at /docs/concepts/service-contracts/. Static articles like this one are the no-JS / no-backend fallback.
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.
Text content
<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.
Code block in bubble
<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.
Typing indicator
<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
<chat-message>— Parent message element<chat-thread>— Scrollable message container