added autoscroll

client/src/components/chat/MessagesArea.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { socket } from "../../socket/socket.tsx";
 
 type ChatMessages = {
@@ -11,6 +11,7 @@ type ChatMessages = {
 
 function MessagesArea() {
   const [messages, setMessages] = useState<ChatMessages[]>([]);
+  const messagesEndRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
     const messageHandler = (msg: ChatMessages) => {
@@ -39,6 +40,11 @@ function MessagesArea() {
       socket.off("historical");
     };
   }, []);
+
+  useEffect(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+  }, [messages]);
+
   const messageList = messages.map((msg) => (
     <li key={msg.message_id}>
       {msg.message_id} {msg.sender}: {msg.message}
@@ -49,6 +55,7 @@ function MessagesArea() {
     <>
       <div className="flex flex-col">
         <ul className="flex-grow-1 list-none">{messageList}</ul>
+        <div ref={messagesEndRef}></div>
       </div>
     </>
   );