message-scroller/virtualization

MessageScroller virtualization with react-virtual

Virtualization is intentionally left outside the primitive because MessageScroller renders real DOM rows and stays fast well into thousands of turns. When a transcript is large enough to need virtualization, use MessageScrollerViewport as the scroll element and let the virtualizer own the rows. Example using @tanstack/react-virtual: const viewportRef = React.useRef<HTMLDivElement>(null); const virtualizer = useVirtualizer({ count: messages.length, getScrollElement: () => viewportRef.current, estimateSize: () => 86, getItemKey: (index) => messages[index]?.id ?? index, overscan: 8, }); Then wrap in MessageScrollerProvider with MessageScrollerViewport ref={viewportRef} containing MessageScrollerContent with virtualized items.