Bubble

Container Chat draft Gen UI part

One chat message. Holds text, one card, or one carousel.

Examples

HTML and CSS

Framework-free reference. Styles live in system/components/bubble.css and read only tokens. Wrap markup in .v-root.

Rendered markup of the anatomy example

Props and slots

The component API. Gen UI JSON uses these names, and the Flutter widget should mirror them.

Props

Prop	Values	Default
`role *`	user \| bot \| friend \| system
`text`	string
`author`	string
`avatar`	part
`wide`	boolean

* required.

Slot rules

children: Card, Carousel, Text, Progress. Exactly one child, or use text. Progress only as the dots variant (typing).

avatar: Avatar.

In Gen UI

How VelioBot uses this part. The bot returns JSON; the validator checks it; the renderer draws it.

JSON node

Every node may also carry id, grow, attribution, privateOnly and fallbackText.

Rules that name this part

bubble A message bubble holds text, or exactly one Card, Carousel or Text (or Progress dots while typing).

Usage in recipes

3 of the original cards use it. After V1. Priority table

Bot functions: Bill split and payments, Bookings, Bot foundation, Onboarding and profile, Plan capture, Plan day and live ETA, Suggestions, Trust and vouches, all functions.