Chat thread

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

People talking to people: messages grouped by person and day, reactions, delivery and read receipts that glide to the newest message read, who is typing, and a composer with files; it scrolls on the same scroller as the agent conversation.

Use it for

Person-to-person or team chat inside a product: deal rooms, support handoffs, DMs.
Threads where delivery, read state and reactions matter.

Not for

Talking to an agent (conversation + message + response).
Comments attached to a document or record (comment-thread).
A feed of system events (timeline).

Anatomy

root (surface)
log (Conversation scroller, role log, named)
day divider (Marker)
group header: avatar, name, time
bubble (mine: accent, right; others: surface, left)
add-reaction button (hover/focus)
reactions (toggle buttons with counts)
attachments
delivery status of my newest message (Sending, Sent, Delivered, Read)
read-by avatars under the last message each person read
failed line with reason and Retry
typing line (status)
jump-to-latest button
composer: attach, field, send

Variants

composer: on (default), off (read-only, archived)

States

empty (emptyLabel)
sending
sent / delivered / read
failed with Retry
someone typing
reading history (jump button)
files attached to the draft
controlled draft retained on rejection
composer pending
missing handler disabled

Keyboard

Enter sends, Shift+Enter starts a new line
Tab reaches each message's reactions and add-reaction button; the picker is a popover (Escape closes, focus returns)
The log scrolls with the keyboard; Jump to latest is a button
Sending always takes the thread to the latest message

Motion

Read-by avatars glide to the newest message read on the smooth spring (instant with reduced motion); the jump button arrives in --motion-in; typing dots pulse only while someone types (still under reduced motion); new messages follow with the conversation's smooth scroll.

Props

Prop	Type	Default	Description
`participants / currentUserId` (required)	`ChatParticipant[] / string`	—	{ id, name, avatar?, status? }
`messages / defaultMessages / onMessagesChange`	`ChatMessage[]`	—	{ id, authorId, text, createdAt, attachments?, reactions?, status?, error?, edited? }, oldest first.
`onSend`	`(draft: { text, files }) => void \| Promise`	—	A promise shows Sending, then Sent, or the failure with Retry (uncontrolled).
`onRetry`	`(messageId) => void \| Promise`	—	Without it, locally sent records retry their original text and File objects through onSend. Preloaded messages have text only; supply onRetry to recover their files.
`onReact / reactions`	`(messageId, emoji) => void / string[]`	—
`typing / readBy`	`string[] / Record<participantId, messageId>`	—
`composer / allowAttachments / accept / placeholder`	`boolean / string`	—
`groupWindow / locale / label / emptyLabel`	`number / string / ReactNode`	—
`classNames`	`ChatThreadClassNames`	—
`style / ref`	`CSSProperties / native Ref`	—
`composerClassNames`	`ChatComposerClassNames`	—
`ChatComposer fieldRef`	`Ref<HTMLTextAreaElement>`	—

Built from

conversation
avatar
attachment
marker
popover
button

Dependencies

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

Import

import { ChatThread, ChatComposer } from "@/components/chat-thread/chat-thread";

Get it

Chat thread 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