fix(chat): fix autoscrolling (Issues #501, #500) (#801)

apps/chat/src/components/Chat/Chat.tsx

@@ -3,7 +3,6 @@ import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'next-i18next';
 
 import { clearStateForMessages } from '@/src/utils/app/clear-messages-state';
-import { throttle } from '@/src/utils/data/throttle';
 
 import { OpenAIEntityModelID } from '../../types/openai';
 import {
@@ -53,11 +52,13 @@ import { PlaybackControls } from './Playback/PlaybackControls';
 import { PlaybackEmptyInfo } from './Playback/PlaybackEmptyInfo';
 
 import { Feature } from '@epam/ai-dial-shared';
+import throttle from 'lodash/throttle';
 
 const scrollThrottlingTimeout = 250;
 
 export const ChatView = memo(() => {
   const dispatch = useAppDispatch();
+
   const appName = useAppSelector(SettingsSelectors.selectAppName);
   const models = useAppSelector(ModelsSelectors.selectModels);
   const modelsMap = useAppSelector(ModelsSelectors.selectModelsMap);
@@ -83,7 +84,6 @@ export const ChatView = memo(() => {
   const enabledFeatures = useAppSelector(
     SettingsSelectors.selectEnabledFeatures,
   );
-
   const isReplay = useAppSelector(
     ConversationsSelectors.selectIsReplaySelectedConversations,
   );
@@ -93,7 +93,6 @@ export const ChatView = memo(() => {
   const isExternal = useAppSelector(
     ConversationsSelectors.selectAreSelectedConversationsExternal,
   );
-
   const isPlayback = useAppSelector(
     ConversationsSelectors.selectIsPlaybackSelectedConversations,
   );
@@ -113,8 +112,8 @@ export const ChatView = memo(() => {
   const nextMessageBoxRef = useRef<HTMLDivElement | null>(null);
   const [inputHeight, setInputHeight] = useState<number>(142);
   const [notAllowedType, setNotAllowedType] = useState<EntityType | null>(null);
-  const isSentRef = useRef(false);
   const disableAutoScrollTimeoutRef = useRef<ReturnType<typeof setTimeout>>();
+  const lastScrollTop = useRef(0);
 
   const showReplayControls = useMemo(() => {
     return isReplay && !messageIsStreaming && isReplayPaused;
@@ -194,10 +193,7 @@ export const ChatView = memo(() => {
     textareaRef.current?.focus();
   }, [scrollDown]);
 
-  const throttledScrollDown = throttle<boolean, typeof scrollDown>(
-    scrollDown,
-    scrollThrottlingTimeout,
-  );
+  const throttledScrollDown = throttle(scrollDown, scrollThrottlingTimeout);
 
   useEffect(() => {
     throttledScrollDown();
@@ -211,17 +207,23 @@ export const ChatView = memo(() => {
     if (chatContainerRef.current) {
       const { scrollTop, scrollHeight, clientHeight } =
         chatContainerRef.current;
-      const bottomTolerance = 30;
+      const bottomTolerance = 25;
 
-      if (scrollTop + clientHeight < scrollHeight - bottomTolerance) {
+      if (lastScrollTop.current > scrollTop) {
+        setAutoScrollEnabled(false);
+        setShowScrollDownButton(true);
+      } else if (scrollTop + clientHeight < scrollHeight - bottomTolerance) {
         clearTimeout(disableAutoScrollTimeoutRef.current);
+
         disableAutoScrollTimeoutRef.current = setTimeout(() => {
           setAutoScrollEnabled(false);
           setShowScrollDownButton(true);
         }, scrollThrottlingTimeout);
       } else {
         setAutoScroll();
       }
+
+      lastScrollTop.current = scrollTop;
     }
   }, []);
 
@@ -253,11 +255,6 @@ export const ChatView = memo(() => {
     setIsShowChatSettings(false);
 
     if (selectedConversations.length > 0) {
-      if (isSentRef.current) {
-        handleScroll();
-        isSentRef.current = false;
-      }
-
       const mergedMessages: MergedMessages[] = [];
       for (let i = 0; i < selectedConversations[0].messages.length; i++) {
         if (selectedConversations[0].messages[i].role === Role.System) continue;
@@ -270,6 +267,8 @@ export const ChatView = memo(() => {
           ]),
         );
       }
+
+      handleScroll();
       setMergedMessages([...mergedMessages]);
     }
 
@@ -466,7 +465,6 @@ export const ChatView = memo(() => {
           activeReplayIndex: 0,
         }),
       );
-      isSentRef.current = true;
     },
     [dispatch, selectedConversations],
   );
@@ -484,7 +482,13 @@ export const ChatView = memo(() => {
         activeReplayIndex: 0,
       }),
     );
-    isSentRef.current = true;
+
+    if (chatContainerRef.current) {
+      chatContainerRef.current.scrollTo({
+        top: chatContainerRef.current.scrollHeight,
+        behavior: 'smooth',
+      });
+    }
   }, [dispatch, selectedConversations]);
 
   const onEditMessage = useCallback(
@@ -498,7 +502,6 @@ export const ChatView = memo(() => {
           activeReplayIndex: 0,
         }),
       );
-      isSentRef.current = true;
     },
     [dispatch, selectedConversations],
   );