refactor: Consolidate Message Scrolling & other Logic to Custom Hooks 🔄 (#1257)

* refactor: remove unnecessary drilling/invoking of ScrollToBottom
- feat: useMessageScrolling: consolidates all scrolling logic to hook
- feat: useMessageHelpers: creates message utilities and consolidates logic from UI component

* fix: ensure automatic scrolling is triggered by messagesTree re-render and is throttled

client/src/hooks/useScrollToRef.ts

@@ -8,29 +8,22 @@ type TUseScrollToRef = {
 };
 
 export default function useScrollToRef({ targetRef, callback, smoothCallback }: TUseScrollToRef) {
+  const logAndScroll = (behavior: 'instant' | 'smooth', callbackFn: () => void) => {
+    // Debugging:
+    // console.log(`Scrolling with behavior: ${behavior}, Time: ${new Date().toISOString()}`);
+    targetRef.current?.scrollIntoView({ behavior });
+    callbackFn();
+  };
+
   // eslint-disable-next-line react-hooks/exhaustive-deps
   const scrollToRef = useCallback(
-    throttle(
-      () => {
-        targetRef.current?.scrollIntoView({ behavior: 'instant' });
-        callback();
-      },
-      450,
-      { leading: true },
-    ),
+    throttle(() => logAndScroll('instant', callback), 450, { leading: true }),
     [targetRef],
   );
 
   // eslint-disable-next-line react-hooks/exhaustive-deps
   const scrollToRefSmooth = useCallback(
-    throttle(
-      () => {
-        targetRef.current?.scrollIntoView({ behavior: 'smooth' });
-        smoothCallback();
-      },
-      750,
-      { leading: true },
-    ),
+    throttle(() => logAndScroll('smooth', smoothCallback), 750, { leading: true }),
     [targetRef],
   );