feat: add scroll

app/conversations/[conversationId]/components/Body.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import MessageBox from "./MessageBox";
 import { Message, User } from "@prisma/client";
 import { pusherClient } from "@/app/libs/pusher";
@@ -12,16 +12,19 @@ interface BodyProps {
 }
 
 const Body: React.FC<BodyProps> = ({ initialMessages = [] }) => {
+  const bottomRef = useRef<HTMLDivElement>(null);
   const [messages, setMessages] = useState(initialMessages);
   const params = useParams();
   const { conversationId } = params;
 
   useEffect(() => {
     pusherClient.subscribe(conversationId)
+    bottomRef?.current?.scrollIntoView();
 
     const messageHandler = (message: Message & { sender: User }) => {
       axios.post(`/api/conversations/${conversationId}/seen`);
       setMessages((current) => [...current, message]);
+      bottomRef?.current?.scrollIntoView();
     }
 
     pusherClient.bind('conversation-message', messageHandler)
@@ -38,8 +41,9 @@ const Body: React.FC<BodyProps> = ({ initialMessages = [] }) => {
       {messages.map((message) => (
         <MessageBox key={message.id} data={message} />
       ))}
+      <div className="pt-24" ref={bottomRef} />
     </div>
-   );
+  );
 }
 
 export default Body;