brand-ui — Conversation

import { Conversation } from "@elabs-ai/components-ai";

Install

npm install @elabs-ai/components-tokens @elabs-ai/components-ui @elabs-ai/components-ai

Skipping the @source line is the most common first failure: Tailwind does not scan node_modules, so every component renders unstyled. The one-time wiring

Prompt for your coding agent

Paste it into Claude Code, Cursor, Codex or any other coding agent. Text in [brackets] is yours to fill in.

Add the brand-ui Conversation component (from @elabs-ai/components-ai) to this project.

1. Read https://elabs-ai.com/llms.txt first: it maps every package and the rules. If you can use MCP servers, connect https://elabs-ai.com/mcp and use its search, docs and tokens tools. If not, run the same lookups in the terminal: `npx -y @elabs-ai/components-cli search "<what you need>"` and `npx -y @elabs-ai/components-cli docs <Component>`.
2. Look Conversation up before writing code: `npx -y @elabs-ai/components-cli docs Conversation` prints its real props, variants, what it pairs with and what to avoid.
3. If @elabs-ai/components-ai is not installed yet: `pnpm add @elabs-ai/components-tokens @elabs-ai/components-ui @elabs-ai/components-ai` (or `npm install @elabs-ai/components-tokens @elabs-ai/components-ui @elabs-ai/components-ai`). If this is the first brand-ui package in the project, wire it once: import `@elabs-ai/components-tokens/styles.css` plus the `themes/light.css` and `themes/dark.css` stylesheets in the CSS entry, add one Tailwind `@source` line per installed @elabs-ai package (Tailwind does not scan node_modules, so without it everything renders unstyled), and wrap the app root in `ThemeProvider` from `@elabs-ai/components-tokens`.
4. Use it here: [the screen or file, and what it should show]
5. Rules: use only @elabs-ai/components-* components and the semantic tokens — no raw colours, no raw font sizes, no arbitrary Tailwind values. Look up each component's real props with the docs tool before you use it; never guess a prop.
6. Done means: the typecheck passes, `npx -y @elabs-ai/components-cli audit src --strict` reports nothing, and you have opened the app and looked at every screen you touched in the light and the dark theme.

Avoid

Reaching for it in a console transcript — the console scrolling transcript region is TerminalSurface.
Giving Conversation no sized flex parent — it needs a bounded, flex parent to stick to bottom.
Rendering [] with no ConversationEmptyState — every list needs a real empty state.
Driving scroll position by hand — Conversation owns stick-to-bottom; ConversationScrollButton is the escape hatch.

Works with

Contains

ConversationContent
ConversationEmptyState
ConversationScrollButton
Message

Examples

3 live examples

Streaming

`isStreaming` suppresses the live-region chatter while tokens are still arriving (`aria-live="off"` + `aria-busy`) — see the prop's doc on `ConversationProps` for why a `"polite"` region would otherwise announce every incoming token.

Empty State Centering

**Layout lock (#72).** With zero messages, `ConversationEmptyState` must render vertically centred in the conversation canvas — not pinned to the top with a gap of empty space below (the original bug: `ConversationContent` never grew past its shrink-wrapped content size, so the canvas's extra height sat unused below it). This can only be verified with real CSS layout (`getBoundingClientRect`), never a class-string assertion — jsdom performs no layout, and asserting a class name would have passed on the buggy `size-full` markup verbatim (`size-full` was always present; it just had nothing to fill). Per `.claude/rules/component-api.md` § "Regression locks with observable side effects", this runs in the ordinary full-suite invocation, not only isolated. We deliberately measure `ConversationEmptyState`'s OWN rendered box against the outer canvas (`role="log"`'s parent), not against `ConversationContent`'s box — the empty state is `size-full` inside `ConversationContent`, so comparing it to its immediate parent is tautological (it always exactly fills it, bug or not). Comparing against the fixed-height canvas is what actually distinguishes "pinned to the top of a tall canvas" from "filling — and centred within — the canvas".

API

`Conversation`

Prop	Type	Description
`isStreaming`	`boolean`	The assistant response is still arriving (loading-states.md `isStreaming`). `role="log"` otherwise announces every incoming token to assistive tech as it streams in — deafening. While `true`, `aria-live` is suppressed (`"off"`) and `aria-busy` is set; once streaming ends, `aria-live` returns to `"polite"` so the settled content is what actually gets announced. @default false

Also accepts: ComponentProps<typeof StickToBottom>

`ConversationContent`

Also accepts: ComponentProps<typeof StickToBottom.Content>

`ConversationDownload`

Prop	Type	Description
`messages`required	`UIMessage[]`
`filename`	`string`
`formatMessage`	`(message: UIMessage, index: number) => string`

Also accepts: Omit<ComponentProps<typeof Button>, "onClick">

`ConversationEmptyState`

Prop	Type	Description
`title`	`string`
`description`	`string`
`icon`	`React.ReactNode`
`actions`	`React.ReactNode`	Primary / secondary action(s) below the description (e.g. suggested prompts).

Also accepts: ComponentProps<"div">

`ConversationScrollButton`

Also accepts: ComponentProps<typeof Button>

`Message`

Prop	Type	Description
`from`required	`UIMessage["role"]`

Also accepts: HTMLAttributes<HTMLDivElement>