autoscrolling

math-tutor/frontend/src/components/Chat/MessageList.tsx

+import { useEffect, useRef } from "react";
 import MessageBubble from "./MessageBubble";
 
 export type ChatMessage = {
@@ -11,8 +12,16 @@ type MessageListProps = {
 };
 
 export default function MessageList({ messages }: MessageListProps) {
+  const listRef = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    if (listRef.current) {
+      listRef.current.scrollTop = listRef.current.scrollHeight;
+    }
+  }, [messages.length]);
+
   return (
-    <div className="message-list">
+    <div className="message-list" ref={listRef}>
       {messages.map((message) => (
         <MessageBubble
           key={message.id}