Usage

Sender context wrapper: handles avatar, name, metadata, and alignment based on sender role.

sender is required. It decides the alignment, and whether the avatar, name, and metadata slots are rendered at all: a system row is centered and ignores all three. Density comes from the surrounding ChatMessageList unless the row sets its own.

The name and metadata slots belong to the raw-content case. When the first child is a ChatMessageBubble, put the name on the bubble instead, so the name lines up with the bubble padding. The same goes for metadata on the last bubble.

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

<template>
  <ChatMessageList>
    <ChatMessage sender="user">
      <ChatMessageBubble>
        Can you review the token validation changes?
      </ChatMessageBubble>
    </ChatMessage>
    <ChatMessage sender="assistant">
      <ChatMessageBubble variant="ghost">
        Looks good — ship it.
      </ChatMessageBubble>
    </ChatMessage>
  </ChatMessageList>
</template>

Examples

Common configurations, variations, and states.

Avatar & Name

A

Agent

I reviewed the pull request. The changes look solid — clean code and good test coverage.

10:15 AM

Thanks! Merging it now.

10:16 AM·Read

A

Agent

I can run the deployment pipeline once it lands. Just let me know.

10:17 AM

Messages with avatars and sender names. Place the name on the bubble when using bubbles, or on the message wrapper for raw content.

Ghost

Here is an analysis of your production metrics from last week. Traffic peaked at 12,400 requests per second on Wednesday, with a p99 latency of 45ms. Error rate stayed below 0.1% across all endpoints.

9:45 AM·Claude Opus 4.6

That looks great. Can you compare it to the week before?

Compared to the previous week, traffic is up 8% and latency improved by 3ms. The deployment on Tuesday seems to have helped.

9:46 AM·Claude Opus 4.6

Ghost variant for messages without visible bubble boundaries. Keeps padding for alignment but renders a transparent background, useful for AI-style responses.

Multi-Bubble

I have a couple of questions about the new API.

First, how should we handle pagination?

And second, what's the rate limit?

11:00 AM·Delivered

A

Agent

Great questions! For pagination, use cursor-based with a limit parameter. The response includes a nextCursor field.

Rate limit is 100 requests per minute per API key. You'll get a 429 response with a Retry-After header if you exceed it.

11:01 AM

Grouped bubbles using the group prop for corner radius reduction. Use first, middle, and last to visually connect related bubbles from the same sender.