refactor: Enhance ScrollToBottom component with forwardRef for improved functionality

- Updated ScrollToBottom component to use forwardRef, allowing it to accept a ref for better integration with parent components.
- Modified MessagesView to utilize the new ref for the ScrollToBottom button, improving scrolling behavior and performance.

client/src/components/Chat/Messages/MessagesView.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useState, useRef } from 'react';
 import { useAtomValue } from 'jotai';
 import { useRecoilValue } from 'recoil';
 import { CSSTransition } from 'react-transition-group';
@@ -21,6 +21,7 @@ function MessagesViewContent({
   const { screenshotTargetRef } = useScreenshot();
   const scrollButtonPreference = useRecoilValue(store.showScrollButton);
   const [currentEditId, setCurrentEditId] = useState<number | string | null>(-1);
+  const scrollToBottomRef = useRef<HTMLButtonElement>(null);
 
   const {
     conversation,
@@ -87,8 +88,9 @@ function MessagesViewContent({
             classNames="scroll-animation"
             unmountOnExit={true}
             appear={true}
+            nodeRef={scrollToBottomRef}
           >
-            <ScrollToBottom scrollHandler={handleSmoothToRef} />
+            <ScrollToBottom ref={scrollToBottomRef} scrollHandler={handleSmoothToRef} />
           </CSSTransition>
         </div>
       </div>

client/src/components/Messages/ScrollToBottom.tsx

@@ -1,12 +1,13 @@
-import React from 'react';
+import { forwardRef } from 'react';
 
 type Props = {
   scrollHandler: React.MouseEventHandler<HTMLButtonElement>;
 };
 
-export default function ScrollToBottom({ scrollHandler }: Props) {
+const ScrollToBottom = forwardRef<HTMLButtonElement, Props>(({ scrollHandler }, ref) => {
   return (
     <button
+      ref={ref}
       onClick={scrollHandler}
       className="premium-scroll-button absolute bottom-5 right-1/2 cursor-pointer border border-border-light bg-surface-secondary"
       aria-label="Scroll to bottom"
@@ -22,4 +23,8 @@ export default function ScrollToBottom({ scrollHandler }: Props) {
       </svg>
     </button>
   );
-}
+});
+
+ScrollToBottom.displayName = 'ScrollToBottom';
+
+export default ScrollToBottom;