function MainComponent() { const [messages, setMessages] = React.useState([ { id: 1, text: "Hello! How can I assist you today?", sender: "bot" }, { id: 2, text: "I would like to know more about your services.", sender: "user" } ]); const [message, setMessage] = React.useState(""); const handleMessageChange = (e)=>{ setMessage(e.target.value); }; const handleSendMessage = (e)=>{ e.preventDefault(); if (!message.trim()) return; const newMessage = { id: Date.now(), text: message.trim(), sender: "user" }; setMessages([ ...messages, newMessage ]); setMessage(""); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col h-screen", __source: { fileName: "", lineNumber: 25, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-4 bg-[#010101] text-white font-roboto", __source: { fileName: "", lineNumber: 26, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl", __source: { fileName: "", lineNumber: 27, columnNumber: 9 }, __self: this }, "Chat UI")), /*#__PURE__*/ React.createElement("div", { className: "flex-grow p-4 overflow-y-auto", __source: { fileName: "", lineNumber: 29, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col gap-4", __source: { fileName: "", lineNumber: 30, columnNumber: 9 }, __self: this }, messages.map((message)=>/*#__PURE__*/ React.createElement("div", { key: message.id, className: `self-${message.sender === "user" ? 'end' : 'start'}`, __source: { fileName: "", lineNumber: 32, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `max-w-xs md:max-w-md lg:max-w-lg xl:max-w-xl 2xl:max-w-2xl ${message.sender === "user" ? 'bg-[#blue] text-white' : 'bg-[#f0f0f0] text-black'} p-4 rounded-lg`, __source: { fileName: "", lineNumber: 33, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 34, columnNumber: 17 }, __self: this }, message.text)))))), /*#__PURE__*/ React.createElement("div", { className: "p-4 bg-[#f0f0f0]", __source: { fileName: "", lineNumber: 40, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: handleSendMessage, __source: { fileName: "", lineNumber: 41, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "message", value: message, onChange: handleMessageChange, placeholder: "Type your message here...", className: "w-full p-3 rounded-lg", __source: { fileName: "", lineNumber: 42, columnNumber: 11 }, __self: this })))); }