Fix: Improve scroll lock behavior while maintaining memory efficiency

[hannesrudolph]

Problem

PR #6697 fixed a memory leak by reducing the increaseViewportBy bottom value from Number.MAX_SAFE_INTEGER to 1000, but this caused scroll lock issues where the chat view doesn't always stay pinned to the bottom when it should.

Solution

This PR implements a dynamic approach that balances both memory efficiency and proper scroll behavior:

• When scrolled to bottom: Uses a larger viewport buffer (10,000px) to ensure smooth scroll lock behavior
• When scrolled up: Uses the smaller buffer (1,000px) to preserve memory efficiency
• Added followOutput='smooth': Improves the scrolling animation when new content arrives

Technical Details

The key change is making the increaseViewportBy.bottom value dynamic based on the isAtBottom state:

increaseViewportBy={{top: 3_000,// Use a dynamic bottom value: larger when at bottom to maintain scroll lock,// smaller when scrolled up to preserve memory efficiencybottom: isAtBottom ? 10_000 : 1000}}

This approach ensures:

1. ✅ Memory efficiency is maintained when users scroll up to review messages
2. ✅ Scroll stays locked to bottom when new messages arrive (when already at bottom)
3. ✅ No unbounded memory growth from rendering all messages

Testing

• All existing tests pass
• Manual testing confirms scroll lock behavior is restored
• Memory usage remains bounded

Fixes the scroll lock regression introduced in #6697 while preserving the memory leak fix.

---

Important

Dynamic viewport buffer adjustment in ChatView.tsx to fix scroll lock issues while maintaining memory efficiency.

• Behavior:
  • Dynamic increaseViewportBy.bottom in ChatView.tsx based on isAtBottom state: 10,000px when at bottom, 1,000px when scrolled up.
  • Adds followOutput='smooth' for smoother scrolling when new content arrives.
• State Management:
  • Introduces debouncedIsAtBottom state to prevent rapid viewport buffer changes.
  • Updates atBottomStateChange to manage scroll lock and visibility of scroll-to-bottom button.
• Constants:
  • Defines VIEWPORT_BUFFER_AT_BOTTOM, VIEWPORT_BUFFER_SCROLLED_UP, and VIEWPORT_BUFFER_TOP for viewport buffer management.

^{This description was created by for d368697. You can customize this summary. It will automatically update as commits are pushed.}

[Copilot]

Pull Request Overview

This PR fixes scroll lock behavior issues that were introduced when fixing a memory leak in PR #6697. The solution implements a dynamic viewport buffer approach that maintains both memory efficiency and proper scroll behavior.

• Implements dynamic increaseViewportBy.bottom values based on scroll position
• Adds smooth scrolling animation with followOutput='smooth'
• Preserves memory efficiency while restoring scroll lock functionality

[ghost]

Thank you for your contribution! I've reviewed the changes and have some suggestions for improvement. The dynamic viewport approach is clever and should effectively address the scroll lock issue while maintaining memory efficiency.

[ghost]

Good addition! The smooth scrolling should improve UX. Could you add a comment explaining how this relates to the scroll lock fix? This would help future maintainers understand the complete solution.

[daniel-lxs]

Fixed by #6780