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

@@ -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>