> ## Documentation Index
> Fetch the complete documentation index at: https://smithers.sh/llms.txt
> Use this file to discover all available pages before exploring further.

# Bubble

> User, assistant, and system message surfaces with alignment and long-content clamp disclosure.

`Bubble` renders a standalone chat message surface. Its optional collapse mode
clamps: content stays mounted for selection and accessibility while the
surface clips it visually.

```tsx theme={"theme":{"light":"github-light","dark":"github-dark"}}
import { Bubble } from "smithers-orchestrator/ui";

<Bubble variant="assistant" collapsible collapsedHeight={320}>
  {longResponse}
</Bubble>
```

## Props

| Prop                           | Type                                | Default                      | Description                                  |
| ------------------------------ | ----------------------------------- | ---------------------------- | -------------------------------------------- |
| `variant`                      | `"user" \| "assistant" \| "system"` | `"assistant"`                | Surface and text treatment.                  |
| `align`                        | `"start" \| "end" \| "center"`      | derived                      | User ends, assistant starts, system centers. |
| `collapsible`                  | `boolean`                           | `false`                      | Enables measured long-content clamping.      |
| `collapsedHeight`              | `number`                            | `320`                        | Clamp height in pixels.                      |
| `expanded`, `defaultExpanded`  | `boolean`                           | `false`                      | Controlled or initial expansion state.       |
| `onExpandedChange`             | `(expanded: boolean) => void`       | Not set                      | Receives expansion requests.                 |
| `expandLabel`, `collapseLabel` | `string`                            | `"Show more"`, `"Show less"` | Visible disclosure labels.                   |

Use `bubbleVariants({ variant })` for other elements needing the same variant
classes.