From 33eec7cb09fe1d914df08447ec4fefca797f21b2 Mon Sep 17 00:00:00 2001
From: Hiep Le <69354317+hieptl@users.noreply.github.com>
Date: Mon, 1 Dec 2025 11:23:48 -0500
Subject: [PATCH] feat(frontend): automatically scroll to bottom of container
 on plan content update (#11808)

Co-authored-by: amanape <83104063+amanape@users.noreply.github.com>
---
 frontend/src/routes/planner-tab.tsx | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/frontend/src/routes/planner-tab.tsx b/frontend/src/routes/planner-tab.tsx
index fee7c9efc8..2e5af229ef 100644
--- a/frontend/src/routes/planner-tab.tsx
+++ b/frontend/src/routes/planner-tab.tsx
@@ -1,19 +1,28 @@
+import React from "react";
 import { useTranslation } from "react-i18next";
 import { I18nKey } from "#/i18n/declaration";
 import LessonPlanIcon from "#/icons/lesson-plan.svg?react";
 import { useConversationStore } from "#/state/conversation-store";
+import { useScrollToBottom } from "#/hooks/use-scroll-to-bottom";
 import { MarkdownRenderer } from "#/components/features/markdown/markdown-renderer";
 import { useHandlePlanClick } from "#/hooks/use-handle-plan-click";
 
 function PlannerTab() {
   const { t } = useTranslation();
+  const { scrollRef: scrollContainerRef, onChatBodyScroll } = useScrollToBottom(
+    React.useRef<HTMLDivElement>(null),
+  );
 
   const { planContent } = useConversationStore();
   const { handlePlanClick } = useHandlePlanClick();
 
   if (planContent !== null && planContent !== undefined) {
     return (
-      <div className="flex flex-col w-full h-full p-4 overflow-auto">
+      <div
+        ref={scrollContainerRef}
+        onScroll={(e) => onChatBodyScroll(e.currentTarget)}
+        className="flex flex-col w-full h-full p-4 overflow-auto"
+      >
         <MarkdownRenderer includeStandard includeHeadings>
           {planContent}
         </MarkdownRenderer>