# antuikit / Bubble

> Bubble, a chat message, with `Bubble.List`, `Bubble.System` and `Bubble.Divider` attached. Adds a `solid` variant, a `color` prop, a `squircle` shape, and the kit's Divider inside `Bubble.Divider`.

Docs: https://antuikit.com/docs/components/bubble

## Install

npx antuikit@latest init
npx antuikit@latest add bubble

## Import

import { Bubble } from "@/components/ui/bubble";

## Demos

- [Basic](https://ui.antuikit.com/embed/bubble/basic.md): Set `content` to the message text and `placement` to `end` for the user's own messages.
- [Avatar and header](https://ui.antuikit.com/embed/bubble/avatar.md): Pass `avatar` and `header` to show who sent the message above and beside it.
- [Variants](https://ui.antuikit.com/embed/bubble/variants.md): Set `variant` to `solid`, `filled`, `outlined`, `shadow` or `borderless` to change how the bubble stands out from the page.
- [Color](https://ui.antuikit.com/embed/bubble/colors.md): 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](https://ui.antuikit.com/embed/bubble/shapes.md): Set `shape` to `squircle` for smooth corners, `corner` for a speech-bubble corner on the sender's side, or `round` for a pill.
- [Loading](https://ui.antuikit.com/embed/bubble/loading.md): Set `loading` while the reply is on its way, to show a typing indicator instead of the content.
- [Footer](https://ui.antuikit.com/embed/bubble/footer.md): Pass `footer` for actions under the message, and `footerPlacement` to put them inside the bubble or align them to its other edge.
- [Extra slot](https://ui.antuikit.com/embed/bubble/extra.md): Pass `extra` to place a control on the side opposite the avatar, like an edit or copy button beside the message.
- [Editable](https://ui.antuikit.com/embed/bubble/editable.md): Set `editable` with `editing: true` to edit a text message in place, and read the new text in `onEditConfirm`.
- [Typing effect](https://ui.antuikit.com/embed/bubble/typing.md): Set `typing` to reveal the text a few characters at a time, with `effect` choosing between `typing` and `fade-in`.
- [Streaming](https://ui.antuikit.com/embed/bubble/streaming.md): Set `streaming` while the content is still arriving in chunks, so the bubble keeps animating until the reply is complete.
- [Custom content](https://ui.antuikit.com/embed/bubble/custom-content.md): Pass an object as `content` and draw it with `contentRender`, like a book card with a cover, a title and an author.
- [Custom loading](https://ui.antuikit.com/embed/bubble/custom-loading.md): Pass `loadingRender` to replace the typing dots with your own indicator, like a spinner and a short status.
- [System message](https://ui.antuikit.com/embed/bubble/system.md): Use `Bubble.System` for notices from the app rather than a sender, like someone joining or a message being deleted.
- [Divider](https://ui.antuikit.com/embed/bubble/divider.md): Use `Bubble.Divider` to split a conversation by day, and `dividerProps` to style the line, here a wave with a plain label.
- [Conversation](https://ui.antuikit.com/embed/bubble/list.md): Use `Bubble.List` with `items` and a `role` map to render a whole conversation, styled per sender.
- [Scroll control](https://ui.antuikit.com/embed/bubble/scroll.md): Call `scrollTo` on the list's `ref` to jump to the top, the bottom or a message by its `key`.
- [Reply actions](https://ui.antuikit.com/embed/bubble/list-actions.md): A conversation where each reply has copy and feedback buttons, drawn by a `footer` function in the assistant's `role`.
- [Support chat](https://ui.antuikit.com/embed/bubble/support-widget.md): 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](https://ui.antuikit.com/embed/bubble/team-thread.md): 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](https://ui.antuikit.com/embed/bubble/file-analysis.md): A spreadsheet sent in a message, answered with collapsed reasoning, a short summary, tags for each finding and a copy button.

## Rules

- antuikit components are COPIED into a project from a registry. There is no
  `antuikit` package to import components from at runtime.
- Import from `@/components/ui/bubble`, never from `antd`. antd stays for
  `theme`, `App`, the `message` / `notification` statics and type-only imports.
- Do not nest a bare `<ConfigProvider theme>` to re-theme a region. Use
  `<ThemeScope theme={...}>`, which also carries the cssVar key class that
  non-antd descendants inherit their tokens from.
- Colors, radii and spacing come from the token contract, not from hardcoded
  values: write `rounded-lg`, `px-xxs`, `bg-warning`, not the raw `var(--ant-*)`.
- `Bubble` takes every Ant Design v6 prop of the same component. The
  wrapper never narrows that surface, so anything antd documents also works here.