How to stop chat autoscroll when AI message streams

[james-pratama]

I am building an AI tool that has a chat feature. I am using Vercel's RSC SDK to stream messages, and showing those messages on the client from the array provided by useUIState. I feed UIState messages into Tanstack Virtual, and return message.component in each row, which is a StreamableValue.

https://sdk.vercel.ai/examples/next-app/state-management/ai-ui-states

Everything works fine, except when a new message is being streamed and it is visible on the screen, the list continuously autoscrolls to the bottom until the message stops streaming. Anytime a new message is streamed, it will autoscroll user to bottom unless the user is scrolled above past the current message being streamed.

Tried adding overflowAnchor: "none" but does not work. The autoscroll occurs even when I don't implement any scroll function of my own or use scrollToIndex, on both Safari and Chrome.

Is this a known issue that it autoscrolls when content is being streamed?

Scroll.mov

const parentRef = useRef<HTMLDivElement>();

const count = messages.length;

const rowVirtualizer = useVirtualizer({
  count,
  getScrollElement: () => parentRef.current,
  estimateSize: () => 1000,
  overscan: 5,
});

const items = rowVirtualizer.getVirtualItems();

<div
          ref={parentRef}
          className={`w-full bg-Brown8/5 max-w-full h-full overflow-y-auto relative pb-[30px] mb-[100px] pt-[16px] scrollbar-rounded-xl scrollbar-thin scrollbar-thumb-Brown15 scrollbar-track-transparent overscroll-none overflow-x-hidden scrollbar-none ${noSelectClass}`}
          style={{
            height: "100%",
            width: "100%",
            overflowY: "auto",
            contain: "strict",
            display: "flex",
            flexDirection: "column",
            alignItems: "center",
            justifyContent: "start",
            padding: "40px 20px",
            overflowAnchor: "none",
            overflow: "auto",
          }}
        >
          <div
            style={{
              height: `${rowVirtualizer.getTotalSize()}px`,
              width: "100%",
              position: "relative",
              minWidth: "200px",
              maxWidth: "740px",
              padding: "0 16px",
              overflowAnchor: "none",
            }}
          >
            <div
              style={{
                position: "absolute",
                top: 0,
                left: 0,
                width: "100%",
                transform: `translateY(${items[0]?.start ?? 0}px)`,
                overflowAnchor: "none",
              }}
            >
              {rowVirtualizer.getVirtualItems().map((virtualRow) => {
                const message = messages[virtualRow.index];

                return (
                  <div
                    key={virtualRow.key}
                    data-index={virtualRow.index}
                    ref={rowVirtualizer.measureElement}
                    className={
                      virtualRow.index % 2 ? "ListItemOdd" : "ListItemEven"
                    }
                    style={{
                      padding: "10px 0",
                      overflowAnchor: "none",
                      overflow: "auto",
                    }}
                  >
                    {message.component}
                  </div>
                );
              })}
            </div>
          </div>

[piecyk]

@james-pratama you can controll it via shouldAdjustScrollPositionOnItemSizeChange,

one options is to disbale the scroll adjustment when receiving messages, or enable it only when scrolling backward, something like

const rowVirtualizer = useVirtualizer({
  count,
  getScrollElement: () => parentRef.current,
  estimateSize: () => 1000,
  overscan: 5,
});

rowVirtualizer.shouldAdjustScrollPositionOnItemSizeChange = (item, _, instance) => {
  return item.start < instance.scrollOffset && instance.scrollDirection === 'backward'
}

[james-pratama]

@piecyk Thank you Damian! Really appreciate the help.

Now it does not autoscroll when streaming, however, there is a slight lag when i scroll up and the stream is expanding. Any ideas why thats happening?

In addition, the way I'm anchoring to the bottom when user loads a new page is simply using a scrollToIndex in a useEffect. Is that the cleanest approach available?

Scroll.mov

[james-pratama]

Hey @piecyk , hope you've been great. Still haven't found a solution for this myself, is there anything obvious I might be missing?