import { Box, useTheme } from "@mui/material"; import Grid from "@mui/material/Unstable_Grid2"; import { useEffect, useRef } from "react"; import MessageBubble from "../messageBubble"; export default function ChatInterface({ messages }) { const theme = useTheme(); const scrollRef = useRef(null); useEffect(() => { if (scrollRef.current) { scrollRef.current.scrollTop = scrollRef.current.scrollHeight; } }, [messages]); return ( <> {messages.map((message, index) => ( ))} ); }