From a55414b010a1a497f33f9abe2e97ef3336f693ec Mon Sep 17 00:00:00 2001
From: Danny Avila <110412045+danny-avila@users.noreply.github.com>
Date: Thu, 18 Jan 2024 21:25:57 -0500
Subject: [PATCH] =?UTF-8?q?=F0=9F=93=9C=20refactor:=20Enhance=20Auto=20Scr?=
 =?UTF-8?q?oll=20Speed=20and=20UseEffect=20Cleanup=20(#1591)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/hooks/Messages/useMessageHelpers.ts   | 6 +++---
 client/src/hooks/Messages/useMessageScrolling.ts | 6 ++++++
 client/src/hooks/useScrollToRef.ts               | 2 +-
 3 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/client/src/hooks/Messages/useMessageHelpers.ts b/client/src/hooks/Messages/useMessageHelpers.ts
index 1ca2b74d962..eaefdb9c17d 100644
--- a/client/src/hooks/Messages/useMessageHelpers.ts
+++ b/client/src/hooks/Messages/useMessageHelpers.ts
@@ -1,5 +1,5 @@
 import copy from 'copy-to-clipboard';
-import { useEffect, useRef } from 'react';
+import { useEffect, useRef, useCallback } from 'react';
 import { useGetEndpointsQuery } from 'librechat-data-provider/react-query';
 import type { TMessage } from 'librechat-data-provider';
 import type { TMessageProps } from '~/common';
@@ -43,13 +43,13 @@ export default function useMessageHelpers(props: TMessageProps) {
   const enterEdit = (cancel?: boolean) =>
     setCurrentEditId && setCurrentEditId(cancel ? -1 : messageId);
 
-  const handleScroll = () => {
+  const handleScroll = useCallback(() => {
     if (isSubmitting) {
       setAbortScroll(true);
     } else {
       setAbortScroll(false);
     }
-  };
+  }, [isSubmitting, setAbortScroll]);
 
   const icon = Icon({
     ...conversation,
diff --git a/client/src/hooks/Messages/useMessageScrolling.ts b/client/src/hooks/Messages/useMessageScrolling.ts
index a523e0b17e4..c2f730fb201 100644
--- a/client/src/hooks/Messages/useMessageScrolling.ts
+++ b/client/src/hooks/Messages/useMessageScrolling.ts
@@ -63,6 +63,12 @@ export default function useMessageScrolling(messagesTree?: TMessage[] | null) {
     if (isSubmitting && scrollToBottom && !abortScroll) {
       scrollToBottom();
     }
+
+    return () => {
+      if (abortScroll) {
+        scrollToBottom && scrollToBottom?.cancel();
+      }
+    };
   }, [isSubmitting, messagesTree, scrollToBottom, abortScroll]);
 
   useEffect(() => {
diff --git a/client/src/hooks/useScrollToRef.ts b/client/src/hooks/useScrollToRef.ts
index 941fa5aac70..fdc2444fb66 100644
--- a/client/src/hooks/useScrollToRef.ts
+++ b/client/src/hooks/useScrollToRef.ts
@@ -17,7 +17,7 @@ export default function useScrollToRef({ targetRef, callback, smoothCallback }:
 
   // eslint-disable-next-line react-hooks/exhaustive-deps
   const scrollToRef = useCallback(
-    throttle(() => logAndScroll('instant', callback), 450, { leading: true }),
+    throttle(() => logAndScroll('instant', callback), 250, { leading: true }),
     [targetRef],
   );