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

constrowVirtualizer=useVirtualizer({
count,getScrollElement: ()=>parentRef.current,estimateSize: ()=>1000,overscan: 5,});rowVirtualizer.shouldAdjustScrollPositionOnItemSizeChange=(item,_,instance)=>{returnitem.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?

[Rohan-FE-Solytics]

Hey @james-pratama, Hope you are well, did you got any workaround for this ?

[chidam333]

any update ?

[piecyk]

Planning to add a proper “chat-style / message thread” demo to make this pattern clearer and to see where the edge cases are.

[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

constrowVirtualizer=useVirtualizer({
count,getScrollElement: ()=>parentRef.current,estimateSize: ()=>1000,overscan: 5,});rowVirtualizer.shouldAdjustScrollPositionOnItemSizeChange=(item,_,instance)=>{returnitem.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?

[Rohan-FE-Solytics]

Hey @james-pratama, Hope you are well, did you got any workaround for this ?

[chidam333]

any update ?

[piecyk]

Planning to add a proper “chat-style / message thread” demo to make this pattern clearer and to see where the edge cases are.

[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

constrowVirtualizer=useVirtualizer({
count,getScrollElement: ()=>parentRef.current,estimateSize: ()=>1000,overscan: 5,});rowVirtualizer.shouldAdjustScrollPositionOnItemSizeChange=(item,_,instance)=>{returnitem.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?

[Rohan-FE-Solytics]

Hey @james-pratama, Hope you are well, did you got any workaround for this ?

[chidam333]

any update ?

[piecyk]

Planning to add a proper “chat-style / message thread” demo to make this pattern clearer and to see where the edge cases are.

[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

constrowVirtualizer=useVirtualizer({
count,getScrollElement: ()=>parentRef.current,estimateSize: ()=>1000,overscan: 5,});rowVirtualizer.shouldAdjustScrollPositionOnItemSizeChange=(item,_,instance)=>{returnitem.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?

[Rohan-FE-Solytics]

Hey @james-pratama, Hope you are well, did you got any workaround for this ?

[chidam333]

any update ?

[piecyk]

Planning to add a proper “chat-style / message thread” demo to make this pattern clearer and to see where the edge cases are.

[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

constrowVirtualizer=useVirtualizer({
count,getScrollElement: ()=>parentRef.current,estimateSize: ()=>1000,overscan: 5,});rowVirtualizer.shouldAdjustScrollPositionOnItemSizeChange=(item,_,instance)=>{returnitem.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?

[Rohan-FE-Solytics]

Hey @james-pratama, Hope you are well, did you got any workaround for this ?

[chidam333]

any update ?

[piecyk]

Planning to add a proper “chat-style / message thread” demo to make this pattern clearer and to see where the edge cases are.

[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

constrowVirtualizer=useVirtualizer({
count,getScrollElement: ()=>parentRef.current,estimateSize: ()=>1000,overscan: 5,});rowVirtualizer.shouldAdjustScrollPositionOnItemSizeChange=(item,_,instance)=>{returnitem.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?

[Rohan-FE-Solytics]

Hey @james-pratama, Hope you are well, did you got any workaround for this ?

[chidam333]

any update ?

[piecyk]

Planning to add a proper “chat-style / message thread” demo to make this pattern clearer and to see where the edge cases are.

[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

constrowVirtualizer=useVirtualizer({
count,getScrollElement: ()=>parentRef.current,estimateSize: ()=>1000,overscan: 5,});rowVirtualizer.shouldAdjustScrollPositionOnItemSizeChange=(item,_,instance)=>{returnitem.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?

[Rohan-FE-Solytics]

Hey @james-pratama, Hope you are well, did you got any workaround for this ?

[chidam333]

any update ?

[piecyk]

Planning to add a proper “chat-style / message thread” demo to make this pattern clearer and to see where the edge cases are.

[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

constrowVirtualizer=useVirtualizer({
count,getScrollElement: ()=>parentRef.current,estimateSize: ()=>1000,overscan: 5,});rowVirtualizer.shouldAdjustScrollPositionOnItemSizeChange=(item,_,instance)=>{returnitem.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?

[Rohan-FE-Solytics]

Hey @james-pratama, Hope you are well, did you got any workaround for this ?

[chidam333]

any update ?

[piecyk]

Planning to add a proper “chat-style / message thread” demo to make this pattern clearer and to see where the edge cases are.