PRD-2153: Allow user to scroll up while response is generating

[Tomass673]

Task: https://app.clickup.com/t/24336023/PRD-2022

[veliseev93]

Without this condition, the chat starts rendering from top to bottom, could you please fix it?

[Tomass673]

Fixed

[veliseev93]

@Tomass673 I left a few suggestions on how to improve gesture interception during auto-scrolling at the bottom - could you please check them out?

[veliseev93]

Suggested change

	const isNearBottomRef = useRef(true);
	const shouldAutoscrollToBottomRef = useRef(true);
	const touchStartY = useRef(0);

[veliseev93]

Suggested change

	if (isNearBottomRef.current && listRef.current && messages?.length > 0) {
	if (shouldAutoscrollToBottomRef.current) {
	requestAnimationFrame(() => {
	listRef.current?.scrollToEnd({ animated: true });
	});
	}

[veliseev93]

Suggested change

	ref={listRef}
	onTouchStart={(e) => {
	touchStartY.current = e.nativeEvent.pageY;
	shouldAutoscrollToBottomRef.current = false;
	}}
	onTouchEnd={(e) => {
	const deltaY = e.nativeEvent.pageY - touchStartY.current;
	if (deltaY < 20) {
	shouldAutoscrollToBottomRef.current = true;
	}
	}}

[Tomass673]

@Tomass673 I left a few suggestions on how to improve gesture interception during auto-scrolling at the bottom - could you please check them out?

It works mostly fine on iOS (though still a bit flaky), but it doesn’t work on Android at all.

When the user scrolls up during response generation and then scrolls back down to the bottom, shouldAutoscrollToBottomRef never switches back to true.

Your suggested approach relies on onTouchStart and onTouchEnd events, but they are not triggered reliably on Android

[veliseev93]

@Tomass673 I left a few suggestions on how to improve gesture interception during auto-scrolling at the bottom - could you please check them out?

It works mostly fine on iOS (though still a bit flaky), but it doesn’t work on Android at all.

When the user scrolls up during response generation and then scrolls back down to the bottom, shouldAutoscrollToBottomRef never switches back to true.

Your suggested approach relies on onTouchStart and onTouchEnd events, but they are not triggered reliably on Android

We can use similar callbacks like this:

        onTouchStart={(e) => {
          if (isResponseGenerating) {
            shouldAutoscrollToBottomRef.current = false;
            previousTouchY.current = e.nativeEvent.pageY;
          }
        }}
        onTouchMove={(e) => {
          const currentY = e.nativeEvent.pageY;
          const deltaY = currentY - previousTouchY.current;

          previousTouchY.current = currentY;
          shouldAutoscrollToBottomRef.current = deltaY < 0;
        }}

It works on both platforms:

Test.mov

[Tomass673]

@Tomass673 I left a few suggestions on how to improve gesture interception during auto-scrolling at the bottom - could you please check them out?

It works mostly fine on iOS (though still a bit flaky), but it doesn’t work on Android at all.
When the user scrolls up during response generation and then scrolls back down to the bottom, shouldAutoscrollToBottomRef never switches back to true.
Your suggested approach relies on onTouchStart and onTouchEnd events, but they are not triggered reliably on Android

We can use similar callbacks like this:

        onTouchStart={(e) => {
          if (isResponseGenerating) {
            shouldAutoscrollToBottomRef.current = false;
            previousTouchY.current = e.nativeEvent.pageY;
          }
        }}
        onTouchMove={(e) => {
          const currentY = e.nativeEvent.pageY;
          const deltaY = currentY - previousTouchY.current;

          previousTouchY.current = currentY;
          shouldAutoscrollToBottomRef.current = deltaY < 0;
        }}

It works on both platforms:

Test.mov

@Tomass673 I left a few suggestions on how to improve gesture interception during auto-scrolling at the bottom - could you please check them out?

It works mostly fine on iOS (though still a bit flaky), but it doesn’t work on Android at all.
When the user scrolls up during response generation and then scrolls back down to the bottom, shouldAutoscrollToBottomRef never switches back to true.
Your suggested approach relies on onTouchStart and onTouchEnd events, but they are not triggered reliably on Android

We can use similar callbacks like this:

        onTouchStart={(e) => {
          if (isResponseGenerating) {
            shouldAutoscrollToBottomRef.current = false;
            previousTouchY.current = e.nativeEvent.pageY;
          }
        }}
        onTouchMove={(e) => {
          const currentY = e.nativeEvent.pageY;
          const deltaY = currentY - previousTouchY.current;

          previousTouchY.current = currentY;
          shouldAutoscrollToBottomRef.current = deltaY < 0;
        }}

It works on both platforms:

Test.mov

Now it works fine on both platforms indeed. Thank you!