Conversation

A React component in Beamline's AI & agents category.

The scrolling column of a conversation: follows new content while you are at the bottom, stops when you scroll up to read, and offers a way back; shared by the agent conversation and the people chat.

Use it for

The message column of any chat: agent conversations (with message and response) and people chat (chat-thread builds on it).

Not for

A feed of events (timeline).
A plain scrolling region (scroll-area).

Anatomy

Conversation (scroll element; role log, named by aria-label; aria-busy while an answer arrives)
ConversationContent (reading column, --conversation-width, default 720px)
ConversationScrollButton (Jump to latest)
ConversationEmptyState (title, description, icon, starter action)
useConversation() (isAtBottom, scrollToBottom)

States

following the bottom
reading history (jump button shown)
busy (an answer is streaming)
empty

Keyboard

The log scrolls with the keyboard like any scroller; Jump to latest is a button with its own name.

Motion

New content follows with a smooth scroll (instant under reduced motion); the jump button arrives in --motion-in and leaves in --motion-out, rising 6px (no rise under reduced motion).

Props

Prop	Type	Default	Description
`Conversation: busy`	`boolean`	—	aria-busy while an answer streams, so assistive tech reads it once settled.
`Conversation: …StickToBottom props`	`initial, resize, aria-label …`	—	initial/resize default to smooth (instant with reduced motion).
`ConversationScrollButton: label`	`string`	—	Default "Jump to latest".
`ConversationEmptyState: title / description / icon / action`	`ReactNode`	—
`useConversation()`	`() => { isAtBottom, scrollToBottom }`	—	Inside a Conversation: take the reader to the latest message (after they send).
`style / ref`	`CSSProperties / native Ref`	—
`classNames`	`ConversationClassNames; ConversationScrollButtonClassNames`	—

Built from

button
empty-state

Dependencies

use-stick-to-bottom, lucide-react, motion

Import

import { ConversationContent, Conversation, ConversationEmptyState, ConversationScrollButton } from "@/components/conversation/conversation";

Get it

Conversation is part of Beamline: 190 React components and screens your coding agent (Claude Code, Codex, Cursor or any MCP client) installs into your app through Beamline's MCP server, as a ready-built package or as plain React source you can change. $49 one payment (regular $200), no subscription, a year of updates, one licence for your whole team. Get Beamline · Connect your agent