From 20db2394d26b00e404442bef2e1888bfcb44f34f Mon Sep 17 00:00:00 2001
From: Danny Avila <danny@librechat.ai>
Date: Fri, 12 Dec 2025 20:15:33 -0500
Subject: [PATCH] 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 |  6 ++++--
 client/src/components/Messages/ScrollToBottom.tsx    | 11 ++++++++---
 2 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/client/src/components/Chat/Messages/MessagesView.tsx b/client/src/components/Chat/Messages/MessagesView.tsx
index bea6554ff1..c6d0a7e84f 100644
--- a/client/src/components/Chat/Messages/MessagesView.tsx
+++ b/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>
diff --git a/client/src/components/Messages/ScrollToBottom.tsx b/client/src/components/Messages/ScrollToBottom.tsx
index bb67cfe3df..0b99df0a61 100644
--- a/client/src/components/Messages/ScrollToBottom.tsx
+++ b/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;