data-autoscrolling attribute for styling transitions
The root and viewport expose data-autoscrolling while programmatic scroll to the latest message runs, allowing conditional styling during the transition.
shadcn/ui · Components · all subjects
message-scroller/props
7 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
MessageScrollerProvider scrollPreviousItemPeek prop
The scrollPreviousItemPeek prop on MessageScrollerProvider keeps a slice of the previous item visible above the anchor when a new turn starts. Pass a pixel value like scrollPreviousItemPeek={64} to keep that many pixels of the previous turn visible above the newly anchored row, so the reader keeps their context instead of feeling like the conversation restarted on a blank page.
MessageScrollerProvider autoScroll prop
The autoScroll prop on MessageScrollerProvider keeps streamed replies in view as they grow when the reader is at the live edge. Scrolling away from the live edge by wheel, touch, keyboard scroll keys, dragging the scrollbar, or explicit message jump releases follow-output. New chunks can then arrive without moving the reader. autoScroll composes with turn anchoring: when a new turn anchors near the top, the view stays put while the reply streams into the room below it.
MessageScrollerProvider defaultScrollPosition prop values
The defaultScrollPosition prop on MessageScrollerProvider controls where saved threads reopen. Use 'last-anchor' to show the last meaningful turn like the user's latest message with the reply below it, giving the reader an immediate place in the thread. Use 'start' to resume at the beginning of a conversation, or 'end' for the absolute latest message. 'last-anchor' is keyed on scrollAnchor, not message role; if no anchor exists or the last anchored turn already fits in the viewport, it falls back to 'end'.
MessageScrollerViewport preserveScrollOnPrepend behavior
MessageScrollerViewport has preserveScrollOnPrepend enabled by default. When older rows are prepended above the current transcript, the viewport preserves the visible row so the reader stays in the same place while history loads above them. Use stable messageId values for message rows to give the scroller a specific row to preserve instead of guessing from whichever pixel happens to sit at the viewport edge.
MessageScrollerItem messageId prop usage
MessageScrollerItem accepts a messageId prop with stable values for message rows. This gives the scroller a specific row to preserve when prepending history instead of guessing from pixels. The messageId is also used by scrollToMessage and useMessageScrollerVisibility hooks to target specific rows.
MessageScroller data attributes
MessageScroller tracks scroll position and state through data-* attributes. The root and viewport expose data-autoscrolling while programmatic scroll to the latest message runs for conditional styling during the transition. For styling the scroller based on scrollability, use the data-scrollable attribute. MessageScrollerButton exposes data-active="false" when there is nothing to scroll toward.