From 3d3aef58acc19504bab1bfd2fdfd5a2c176f87a0 Mon Sep 17 00:00:00 2001
From: Zamil Majdy <zamil.majdy@agpt.co>
Date: Wed, 15 Apr 2026 20:19:41 +0700
Subject: [PATCH] fix(frontend/copilot): add rootMargin prop to
 LoadMoreSentinel for bottom pagination

The bottom sentinel (forward pagination) needs rootMargin "0px 0px 200px 0px"
to pre-trigger loading 200px before the user hits the absolute bottom.
The top sentinel (backward pagination) keeps its "200px 0px 0px 0px" default.
---
 .../ChatMessagesContainer/ChatMessagesContainer.tsx    | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/autogpt_platform/frontend/src/app/(platform)/copilot/components/ChatMessagesContainer/ChatMessagesContainer.tsx b/autogpt_platform/frontend/src/app/(platform)/copilot/components/ChatMessagesContainer/ChatMessagesContainer.tsx
index eebe16db89..dfd702534c 100644
--- a/autogpt_platform/frontend/src/app/(platform)/copilot/components/ChatMessagesContainer/ChatMessagesContainer.tsx
+++ b/autogpt_platform/frontend/src/app/(platform)/copilot/components/ChatMessagesContainer/ChatMessagesContainer.tsx
@@ -131,11 +131,16 @@ function LoadMoreSentinel({
   isLoading,
   messageCount,
   onLoadMore,
+  rootMargin = "200px 0px 0px 0px",
 }: {
   hasMore: boolean;
   isLoading: boolean;
   messageCount: number;
   onLoadMore: () => void;
+  /** IntersectionObserver rootMargin. Top sentinel uses "200px 0px 0px 0px"
+   *  (pre-trigger when approaching from above); bottom sentinel should use
+   *  "0px 0px 200px 0px" (pre-trigger when approaching from below). */
+  rootMargin?: string;
 }) {
   const sentinelRef = useRef<HTMLDivElement>(null);
   const onLoadMoreRef = useRef(onLoadMore);
@@ -170,11 +175,11 @@ function LoadMoreSentinel({
         }
         onLoadMoreRef.current();
       },
-      { rootMargin: "200px 0px 0px 0px" },
+      { rootMargin },
     );
     observer.observe(sentinelRef.current);
     return () => observer.disconnect();
-  }, [hasMore, isLoading, scrollRef]);
+  }, [hasMore, isLoading, rootMargin, scrollRef]);
 
   // After React commits new DOM nodes (prepended messages), adjust
   // scrollTop so the user stays at the same visual position.
@@ -453,6 +458,7 @@ export function ChatMessagesContainer({
             isLoading={!!isLoadingMore}
             messageCount={messages.length}
             onLoadMore={onLoadMore}
+            rootMargin="0px 0px 200px 0px"
           />
         )}
       </ConversationContent>