Bubble

A chat message, from the user or an assistant, with room for an avatar, a header and a footer.

Basic

Set content to the message text and placement to end for the user's own messages.

Avatar and header

Pass avatar and header to show who sent the message above and beside it.

Variants

Set variant to solid, filled, outlined, shadow or borderless to change how the bubble stands out from the page.

Color

Set color to primary, a status or a color name, and filled tints the background with it, outlined the border and solid the whole bubble.

Shape

Set shape to squircle for smooth corners, corner for a speech-bubble corner on the sender's side, or round for a pill.

Loading

Set loading while the reply is on its way, to show a typing indicator instead of the content.
Pass footer for actions under the message, and footerPlacement to put them inside the bubble or align them to its other edge.

Extra slot

Pass extra to place a control on the side opposite the avatar, like an edit or copy button beside the message.

Editable

Set editable with editing: true to edit a text message in place, and read the new text in onEditConfirm.

Typing effect

Set typing to reveal the text a few characters at a time, with effect choosing between typing and fade-in.

Streaming

Set streaming while the content is still arriving in chunks, so the bubble keeps animating until the reply is complete.

Custom content

Pass an object as content and draw it with contentRender, like a book card with a cover, a title and an author.

Custom loading

Pass loadingRender to replace the typing dots with your own indicator, like a spinner and a short status.

System message

Use Bubble.System for notices from the app rather than a sender, like someone joining or a message being deleted.

Divider

Use Bubble.Divider to split a conversation by day, and dividerProps to style the line, here a wave with a plain label.

Conversation

Use Bubble.List with items and a role map to render a whole conversation, styled per sender.

Scroll control

Call scrollTo on the list's ref to jump to the top, the bottom or a message by its key.

In context

The component inside real screens, with the components it usually sits beside.

Reply actions

A conversation where each reply has copy and feedback buttons, drawn by a footer function in the assistant's role.

Support chat

A support chat widget with the agent's avatar, quick-reply prompts and a typing indicator while the answer is on its way.

Team thread

A team thread where people and an assistant reply side by side, with names and times in each header and a divider per day.

File analysis

A spreadsheet sent in a message, answered with collapsed reasoning, a short summary, tags for each finding and a copy button.