Chat Container

1"use client";
2import { cn } from "@/lib/utils";
3import { useEffect, useRef } from "react";
4 
5export default function ChatContainer({
6  children,
7  className,
8}: {
9  children: React.ReactNode;
10  className?: string;
11}) {
12  const chatRef = useRef<HTMLDivElement>(null);
13 
14  useEffect(() => {
15    if (!chatRef.current) return;
16 
17    const observer = new MutationObserver(() => {
18      if (chatRef.current) {
19        chatRef.current.scrollTo({
20          top: chatRef.current.scrollHeight,
21          behavior: "smooth",
22        });
23      }
24    });
25 
26    observer.observe(chatRef.current, { childList: true, subtree: true });
27    return () => observer.disconnect();
28  }, []);
29 
30  return (
31    <div className={cn("flex flex-col", className)}>
32      <div
33        ref={chatRef}
34        className="space-y-5 flex-1 overflow-auto px-10 py-4 rounded"
35      >
36        {children}
37      </div>
38    </div>
39  );
40}