function MainComponent() { const [messageList, setMessageList] = React.useState([]); const [newMessage, setNewMessage] = React.useState(""); const handleSendMessage = (event)=>{ event.preventDefault(); if (newMessage.trim()) { setMessageList([ ...messageList, { author: 'user', text: newMessage } ]); setNewMessage(""); } }; const handleMessageChange = (event)=>{ setNewMessage(event.target.value); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col h-screen", __source: { fileName: "", lineNumber: 15, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-none bg-[#101010] p-4 shadow-md", __source: { fileName: "", lineNumber: 16, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-white text-3xl font-bold font-roboto", __source: { fileName: "", lineNumber: 17, columnNumber: 9 }, __self: this }, "AI Chatbot")), /*#__PURE__*/ React.createElement("div", { className: "flex-1 overflow-y-auto p-4 flex flex-col-reverse bg-[#181818]", __source: { fileName: "", lineNumber: 19, columnNumber: 7 }, __self: this }, messageList.length === 0 ? /*#__PURE__*/ React.createElement("p", { className: "text-[#ababab] font-roboto mt-auto mb-16 text-center", __source: { fileName: "", lineNumber: 21, columnNumber: 11 }, __self: this }, "No messages yet.") : messageList.map((message, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `p-3 rounded-lg m-2 ${message.author === 'user' ? 'bg-[#005fff] ml-auto message-enter' : 'bg-[#303030] mr-auto message-enter'}`, __source: { fileName: "", lineNumber: 26, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-[#e5e5e5] font-roboto", __source: { fileName: "", lineNumber: 27, columnNumber: 15 }, __self: this }, message.text)))), /*#__PURE__*/ React.createElement("div", { className: "flex-none p-4 bg-[#202020]", __source: { fileName: "", lineNumber: 32, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("form", { className: "flex", onSubmit: handleSendMessage, __source: { fileName: "", lineNumber: 33, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "message", placeholder: "Type a message...", className: "flex-1 p-3 rounded-l-lg text-black font-roboto", onChange: handleMessageChange, value: newMessage, __source: { fileName: "", lineNumber: 34, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "p-3 bg-[#005fff] text-white rounded-r-lg font-roboto", __source: { fileName: "", lineNumber: 42, columnNumber: 11 }, __self: this }, "Send"))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 50, columnNumber: 7 }, __self: this }, ` @keyframes slideIn { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .message-enter { animation: slideIn 0.3s ease-out forwards; } `)); }