fix(agent-stream): prevent visible scroll animation on initial load

When loading an agent chat with existing messages, the ScrollView would render at the top and then animate scrolling to the bottom, creating a jarring user experience.

Now the initial scroll to bottom happens instantly (no animation), and only subsequent auto-scrolls (when new messages arrive) are animated. This provides a smooth loading experience while maintaining smooth animations for new content.

Changes:
- Add hasScrolledInitially ref to track first scroll
- Use animated: false for initial scroll, animated: true for subsequent scrolls
- Remove debug console.log from scroll handler

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Mohamed Boudra
2025-10-26 15:05:11 +01:00
parent d47019919e
commit e82a7410e7

View File

@@ -40,11 +40,14 @@ export function AgentStreamView({
const [selectedToolCall, setSelectedToolCall] =
useState<SelectedToolCall | null>(null);
const [isNearBottom, setIsNearBottom] = useState(true);
const hasScrolledInitially = useRef(false);
// Auto-scroll to bottom when new items arrive, but only if user is already at bottom
// Scroll to bottom immediately on initial load, then animate for new messages
useEffect(() => {
if (isNearBottom) {
scrollViewRef.current?.scrollToEnd({ animated: true });
const shouldAnimate = hasScrolledInitially.current;
scrollViewRef.current?.scrollToEnd({ animated: shouldAnimate });
hasScrolledInitially.current = true;
}
}, [streamItems, isNearBottom]);
@@ -66,14 +69,6 @@ export function AgentStreamView({
contentSize.height - contentOffset.y - layoutMeasurement.height;
// Consider user "at bottom" if within 10px of the end
const nearBottom = distanceFromBottom < 10;
console.log('[AgentStreamView] Scroll:', {
contentHeight: contentSize.height,
scrollY: contentOffset.y,
layoutHeight: layoutMeasurement.height,
distanceFromBottom,
nearBottom,
currentIsNearBottom: isNearBottom
});
setIsNearBottom(nearBottom);
}