Update with non-deprecated APIs -.-

components/AutomaticScroller.tsx

@@ -0,0 +1,37 @@
+'use client';
+
+import React, { useEffect, useRef } from 'react';
+
+type Props = {
+  children: React.ReactNode;
+  className?: string;
+};
+
+export default function AutomaticScroller({ children, className }: Props) {
+  const ref = useRef<null | HTMLDivElement>(null);
+
+  useEffect(() => {
+    const mutationObserver = new MutationObserver(async () => {
+      if (ref.current) {
+        ref.current.scroll({ behavior: 'smooth', top: ref.current.scrollHeight });
+      }
+    });
+
+    if (ref.current) {
+      mutationObserver.observe(ref.current, {
+        childList: true,
+        subtree: true,
+      });
+
+      return () => {
+        mutationObserver.disconnect();
+      };
+    }
+  }, [ref]);
+
+  return (
+    <div ref={ref} className={className}>
+      {children}
+    </div>
+  );
+}

components/message-box/MessageBox.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { getCurrentUser } from '@/lib/getCurrentUser';
 import { getMessages } from '@/lib/getMessages';
-import DomNodeListener from '../DomNodeListener';
+import AutomaticScroller from '../AutomaticScroller';
 import MessageDisplay from './MessageDisplay';
 import MessageInput from './MessageInput';
 
@@ -13,12 +13,12 @@ export default async function MessageBox() {
     <div className="flex w-full flex-col shadow-xl sm:w-[400px]">
       <h1 className="bg-slate-500 p-6 text-lg text-white">Messages</h1>
       <div className="grid border-x border-b border-gray-300">
-        <DomNodeListener className="grid h-80 content-start gap-4 overflow-auto p-4">
+        <AutomaticScroller className="grid h-80 content-start gap-4 overflow-auto p-4">
           {messages.length === 0 && <span className="text-center text-gray-500">No messages</span>}
           {messages.map(message => {
             return <MessageDisplay userId={user.id} key={message.id} message={message} />;
           })}
-        </DomNodeListener>
+        </AutomaticScroller>
         <MessageInput userId={user.id} />
       </div>
     </div>