From eacbda7c34e4019d31a305d718a5bd2bf5734a9e Mon Sep 17 00:00:00 2001
From: H0llyW00dzZ <priv8@btz.pm>
Date: Mon, 12 Feb 2024 19:17:07 +0700
Subject: [PATCH] Improve [UI/UX] [Front End] [Chat] Scrolling (#274)

- [+] feat(chat.tsx): enhance chat scrolling functionality

  - Add check for user manually scrolling to disable auto-scroll
  - Enable auto-scroll only if config.autoScrollMessage is true and user is not at top or bottom edge
  - Update message render index only when auto-scroll is enabled
  - Determine if user has scrolled to the bottom of the chat
---
 app/components/chat.tsx | 33 +++++++++++++++++++++++----------
 1 file changed, 23 insertions(+), 10 deletions(-)

diff --git a/app/components/chat.tsx b/app/components/chat.tsx
index 9f339e5eaf3..a8961348b82 100644
--- a/app/components/chat.tsx
+++ b/app/components/chat.tsx
@@ -1176,23 +1176,36 @@ function _Chat() {
     const bottomHeight = target.scrollTop + target.clientHeight;
     const edgeThreshold = target.clientHeight;
 
+    // Determine if the user is at the top or bottom edge of the chat.
     const isTouchTopEdge = target.scrollTop <= edgeThreshold;
     const isTouchBottomEdge = bottomHeight >= target.scrollHeight - edgeThreshold;
-    const isHitBottom = bottomHeight >= target.scrollHeight - (isMobileScreen ? 4 : 10);
 
-    // Calculate page indices directly inside the function
-    const nextPageMsgIndex = msgRenderIndex + CHAT_PAGE_SIZE;
-    const prevPageMsgIndex = msgRenderIndex - CHAT_PAGE_SIZE;
+    // If the user is manually scrolling, disable auto-scroll.
+    if (isTouchTopEdge || isTouchBottomEdge) {
+      setAutoScroll(false);
+    } else {
+      // Only enable auto-scroll if the `config.autoScrollMessage` is true
+      // and the user has not manually scrolled to the top or bottom edge.
+      if (config.autoScrollMessage) {
+        setAutoScroll(true);
+      }
+    }
 
-    if (isTouchTopEdge && !isTouchBottomEdge) {
-      setMsgRenderIndex(prevPageMsgIndex);
-    } else if (isTouchBottomEdge) {
-      setMsgRenderIndex(nextPageMsgIndex);
+    // Update the message render index only if auto-scroll is enabled.
+    if (config.autoScrollMessage) {
+      const nextPageMsgIndex = msgRenderIndex + CHAT_PAGE_SIZE;
+      const prevPageMsgIndex = msgRenderIndex - CHAT_PAGE_SIZE;
+
+      if (isTouchTopEdge && !isTouchBottomEdge) {
+        setMsgRenderIndex(prevPageMsgIndex);
+      } else if (isTouchBottomEdge) {
+        setMsgRenderIndex(nextPageMsgIndex);
+      }
     }
 
+    // Determine if the user has scrolled to the bottom of the chat.
+    const isHitBottom = bottomHeight >= target.scrollHeight - (isMobileScreen ? 4 : 10);
     setHitBottom(isHitBottom);
-    let isAutoScrollEnabled: boolean = config.autoScrollMessage;
-    setAutoScroll(isAutoScrollEnabled);
   }, [
     setHitBottom, 
     setAutoScroll,