Styled Box - Copy this React, Mui Component to your project

Generate llm chat ui something like this with header containing sessions and content and then input <Box sx={{ height: '100%', // Full height of the parent container width: '100%', // Full width of the parent container }} > {/* Chat Header at the top */} <Box sx={{ position: 'fixed', }}> <ChatHeader sessions={sessions} selectedSession={selectedSession} setSelectedSession={setSelectedSession} /> </Box> {/* Chat History in the middle, scrollable */} <Box sx={{ flex: 1, overflowY: 'auto', // Enables scrolling padding: '64px', // Optional padding for better visuals }} > <ChatHistory history={history} loading={loading} /> </Box> {/* Chat Input at the bottom */} <Box sx={{ position: 'fixed', bottom: 0, width: '80%', p: 2 }}> <ChatInput newMessage={newMessage} setNewMessage={setNewMessage} sendMessage={sendMessage} loading={loading} /> </Box> </Box> );