Refactor to use hooks (#436)

components/custom/use-scroll-to-bottom.ts

@@ -0,0 +1,29 @@
+import { useEffect, useRef, RefObject } from "react";
+
+export function useScrollToBottom<T extends HTMLElement>(): [
+  RefObject<T>,
+  RefObject<T>,
+] {
+  const containerRef = useRef<T>(null);
+  const endRef = useRef<T>(null);
+
+  useEffect(() => {
+    const container = containerRef.current;
+    const end = endRef.current;
+
+    if (container && end) {
+      const observer = new MutationObserver(() => {
+        end.scrollIntoView({ behavior: "instant", block: "end" });
+      });
+
+      observer.observe(container, {
+        childList: true,
+        subtree: true,
+      });
+
+      return () => observer.disconnect();
+    }
+  }, []);
+
+  return [containerRef, endRef];
+}