📜 refactor: Enhance Auto Scroll Speed and UseEffect Cleanup (#1591)

Author: danny-avila

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,

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(() => {

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],
   );