OOratiq

Message Scroller

Ready

Virtualised, stick-to-bottom message list.

Message 1
Message 2
Message 3
Message 4
Message 5
Message 6
Message 7
Message 8
Message 9
Message 10

Installation

$ npx @oratiq-js/ui add message-scroller

Copies the component and everything it depends on into your project, then lists the npm packages to install. The code is yours after this.

Usage

import
import { MessageScroller } from "@/components/ui/message-scroller";

Stick to bottom

Add a message while scrolled to the bottom and it follows. Scroll up first and it stays put — with a button to jump back.

Message 1
Message 2
Message 3
Message 4
Message 5
Message 6
Message 7
Message 8
Message 9
Message 10
Message 11
Message 12

The one behaviour chat UIs get wrong

Auto-scrolling on every new message yanks the user away mid-sentence when they're reading history. This only follows while they were already at the bottom, and surfaces a jump button otherwise.

Props

PropTypeDefaultDescription
dependencyunknown—Changing this triggers the stick-to-bottom check. Usually the message count.
thresholdnumber80Distance from the bottom, in px, still counted as 'at the bottom'.

View source on GitHub → components/ui/message-scroller.tsx