From 98919d15ae02a09daca3490bc2fdce08947c336b Mon Sep 17 00:00:00 2001
From: George Balch <george089@revature.net>
Date: Wed, 27 Mar 2024 11:42:02 -0700
Subject: [PATCH] Scroll to bottom of messages on new messages state change
 (#230)

Co-authored-by: George Balch <george.balch@proton.me>
---
 frontend/src/components/ChatInterface.tsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/ChatInterface.tsx b/frontend/src/components/ChatInterface.tsx
index 577a4a8c8d..eb2c709fe7 100644
--- a/frontend/src/components/ChatInterface.tsx
+++ b/frontend/src/components/ChatInterface.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { useSelector } from "react-redux";
 import "./ChatInterface.css";
 import userAvatar from "../assets/user-avatar.png";
@@ -7,8 +7,13 @@ import { RootState } from "../store";
 import { sendChatMessage } from "../services/chatService";
 
 function MessageList(): JSX.Element {
+  const messagesEndRef = useRef<HTMLDivElement>(null);
   const { messages } = useSelector((state: RootState) => state.chat);
 
+  useEffect(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+  }, [messages]);
+
   return (
     <div className="message-list">
       {messages.map((msg, index) => (
@@ -25,6 +30,7 @@ function MessageList(): JSX.Element {
           </div>
         </div>
       ))}
+      <div ref={messagesEndRef} />
     </div>
   );
 }