Usage

Styled content container for the chat "bubble." Reads sender from parent ChatMessage context to auto-style the background. Use filled for standard messages and ghost when content needs alignment without a visible boundary. Supports name/metadata slots aligned with bubble padding, and multi-bubble grouping via the group prop for consecutive messages from the same sender.

The sender is not a prop: the bubble reads it from the surrounding ChatMessage, so it colors and aligns itself. Outside a ChatMessage it falls back to the assistant side. A bubble whose only child is a code block, or an element with class astryx-chat-card, drops its own padding and background so the card lines up with the bubble edges.

<script setup lang="ts">
import { ChatMessage, ChatMessageBubble } from '@astryx-vue/core/Chat'
</script>

<template>
  <ChatMessage sender="user">
    <ChatMessageBubble>
      Can you review the token validation changes?
    </ChatMessageBubble>
  </ChatMessage>
</template>

Examples

Common configurations, variations, and states.

Custom Content

Can you pull up the Q3 report?

Navi

Sure, here is the artifact from last quarter.

Q3 Performance Report

12 pages · updated 2 days ago

9:45 AM·Claude Opus 4.6

Custom in-message content aligned to the bubble text column. An artifact card is wrapped in a ghost bubble with width="100%", so its left edge matches the bubble text and it spans the full message column instead of the default bubble width cap; the timestamp rides the bubble metadata slot.

Density

Compact

The build completed in 4.2 seconds.

Ship it to staging.

Balanced

The build completed in 4.2 seconds.

Ship it to staging.

Spacious

The build completed in 4.2 seconds.

Ship it to staging.

Compact, balanced, and spacious density modes side by side. Density controls bubble padding, corner radius, and spacing between grouped bubbles.

Grouping

A

Agent

I reviewed the three files you shared.

The data model looks solid, but the API handler has a race condition on concurrent writes.

I can draft a fix if you want.

10:45 AM

Yes please!

Also add a test for the concurrent case.

10:46 AM·Delivered

Multi-bubble messages using first, middle, and last group positions. Grouped bubbles tighten corner radius on the sender side for a continuous visual flow.

Metadata

A

Agent

Your deployment finished successfully. All 14 checks passed.

9:15 AM·Claude Opus 4.6

Great, can you send me the production URL?

9:16 AM·Read

Bubbles with name and metadata slots aligned to bubble padding. Put name on the first bubble and metadata on the last bubble in a message.

Variants

Filled — sender-colored background (default)

Can you summarize the latest deployment logs?

Ghost — transparent background, keeps alignment padding

The last deploy completed at 2:41 PM with zero errors across all three regions.

Filled and ghost bubble variants for both user and assistant senders. Use filled for standard messages and ghost when content needs alignment without a visual boundary.