ChatMessageBubble

The chat bubble — a styled content container that reads sender from an ancestor ChatMessage to auto-style its background and text color. var-ui does zero markdown parsing; pass plain text or your own rendered tree as children.

Examples

Default

There is no @var-ui/astro ChatMessageBubble — Astro and HTML previews use the core bubble recipe (pass sender explicitly).

import { ChatMessage, ChatMessageBubble } from '@var-ui/react';

<ChatMessage sender="assistant" name="Navi">
  <ChatMessageBubble group="first">First part of a multi-part reply.</ChatMessageBubble>
  <ChatMessageBubble group="last">Second part.</ChatMessageBubble>
</ChatMessage>

Use group when rendering several consecutive bubbles from the same sender, to tighten the corners between them.

Props

Accessibility

Content is rendered as-is — wire your own markdown renderer with accessible semantics if needed.