fix: improve scroll lock behavior while maintaining memory efficiency

- Use dynamic increaseViewportBy bottom value based on scroll position
- When at bottom, use larger value (10,000px) to maintain scroll lock
- When scrolled up, use smaller value (1,000px) for memory efficiency
- Add followOutput='smooth' for better scroll behavior
- Fixes scroll lock issues introduced in PR #6697
This commit is contained in:
hannesrudolph 2025-08-06 11:48:08 -07:00
parent 2b647ed9a1
commit 93db12935b

View file

@ -1887,7 +1887,12 @@ const ChatViewComponent: React.ForwardRefRenderFunction<ChatViewRef, ChatViewPro
ref={virtuosoRef}
key={task.ts}
className="scrollable grow overflow-y-scroll mb-1"
increaseViewportBy={{ top: 3_000, bottom: 1000 }}
increaseViewportBy={{
top: 3_000,
// Use a dynamic bottom value: larger when at bottom to maintain scroll lock,
// smaller when scrolled up to preserve memory efficiency
bottom: isAtBottom ? 10_000 : 1000,
}}
data={groupedMessages}
itemContent={itemContent}
atBottomStateChange={(isAtBottom: boolean) => {
@ -1899,6 +1904,7 @@ const ChatViewComponent: React.ForwardRefRenderFunction<ChatViewRef, ChatViewPro
}}
atBottomThreshold={10}
initialTopMostItemIndex={groupedMessages.length - 1}
followOutput="smooth"
/>
</div>
<div className={`flex-initial min-h-0 ${!areButtonsVisible ? "mb-1" : ""}`}>