MessageScroller

MessageScroller is the transport-neutral scroll container behind ChatTranscript: it follows new content by default, stops following when the reader scrolls away, and exposes a jump button without coupling the UI to a Gateway or streaming client.

import { MessageScroller } from "smithers-orchestrator/ui";

<MessageScroller streaming={pending} firstItemKey={messages[0]?.id}>
  {messages.map((message) => <article key={message.id}>{message.text}</article>)}
</MessageScroller>

Props

Prop	Type	Default	Description
`stickToBottom`	`boolean`	`true`	Follow content growth while the reader stays at bottom.
`streaming`	`boolean`	`false`	Exposes streaming state through `data-streaming`.
`bottomThreshold`	`number`	`24`	Pixel distance treated as bottom.
`firstItemKey`	`string \| number`	Not set	Compensates scroll position when older history is prepended.
`fade`	`boolean`	`true`	Enables token-free mask fades at scrollable edges.
`hideJumpToLatest`	`boolean`	`false`	Hides the jump affordance while away from bottom.
`jumpToLatestLabel`	`string`	`"Jump to latest"`	Accessible jump-button label.
`onFollowChange`	`(following: boolean) => void`	Not set	Fires only when follow state transitions, never on mount.
`contentClassName`	`string`	Not set	Class applied to the inner content element.

The forwarded MessageScrollerHandle provides scrollToBottom(behavior?) and isFollowing(). stickToBottom={false} disables all automatic scrolling while retaining fades and one-shot jump behavior.

UI Component Library

Bubble

Overview

Core API

Runtime

Types & errors

Gateway RPC

Props

​Props

Props