Components / agents

Conversation

The message thread: a scrollable log that follows the newest message.

import { Conversation } from '@basiiik/ui';

The snippet an agent gets

From get_component_snippet, with the required props filled in from the spec. Every snippet is type-checked against the library before it is shipped.

import { Conversation, ChatMessage } from '@basiiik/ui';

<Conversation><ChatMessage from="user">Hello</ChatMessage></Conversation>

• Latest versus Scrolled up follows the reader: scrolling away from the bottom stops auto-follow and shows Jump to latest; pressing it (or reaching the bottom) follows again.
• Compose with: button, chat-message, tool-call.
• Storybook: Agents/Conversation.

Props

States. Latest versus Scrolled up follows the reader: scrolling away from the bottom stops auto-follow and shows Jump to latest; pressing it (or reaching the bottom) follows again.

Native attributes such as className, id and data-* are forwarded to the root element.

Use it when

• The thread of an agent or assistant chat: messages, reasoning and tool calls in order
• Any ordered stream of messages that grows over time

Do not use it when

• A static list of items (use List)
• One-off notifications (use Toast or Alert)

Rules for agents

• Put ChatMessages directly inside; put Reasoning and ToolCall inside the assistant message they belong to
• Give it a bounded height (maxHeight, or a flex or grid parent with a fixed height) so it scrolls instead of growing the page
• Place the PromptInput below it, outside the log
• Do not add your own scroll-to-bottom code or aria-live: the log already does both

Avoid

• A div with overflow and a hand-written scroll-to-bottom effect
• aria-live on the message that is streaming, which makes a screen reader read every token
• Putting the PromptInput inside the log

Writing the content

• Name the log for what it holds: "Conversation with the assistant" or "Support chat"

Keyboard

• Tab focuses the log so the arrow keys, Page Up and Page Down and Home and End scroll it
• Tab reaches the Jump to latest button when it is shown

Accessibility

• role="log" is a polite live region: a new message is announced without taking focus
• A message that is still streaming is aria-busy (set by ChatMessage), so it is read once when complete, not token by token
• The log is named by aria-label ("Conversation" by default); give it a more specific name if the page has more than one

Colour tokens it reads

Related

• Chat Message
• Prompt Input
• Reasoning
• Tool Call

agents 2 Figma variants Try it in the live demo