MCP Agent - AI Expense Tracker

'use client' import { useStore } from '@/store' import Messages from './Messages' import ScrollToBottom from '@/components/chat/ChatArea/ScrollToBottom' import { StickToBottom } from 'use-stick-to-bottom' const MessageArea = () => { const { messages } = useStore() return ( <StickToBottom className="relative mb-4 flex max-h-[calc(100vh-64px)] min-h-0 flex-grow flex-col" resize="smooth" initial="smooth" > <StickToBottom.Content className="flex min-h-full flex-col justify-center"> <div className="mx-auto w-full max-w-2xl space-y-9 px-4 pb-4"> <Messages messages={messages} /> </div> </StickToBottom.Content> <ScrollToBottom /> </StickToBottom> ) } export default MessageArea