function MainComponent() { const [messages, setMessages] = React.useState([ { id: 1, text: "Hello, how can I assist you today? 👋", sender: "bot" } ]); const [userMessage, setUserMessage] = React.useState(""); const handleSendMessage = (event)=>{ event.preventDefault(); if (!userMessage.trim()) return; const newMessage = { id: Date.now(), text: userMessage, sender: "user" }; setMessages((prevMessages)=>[ ...prevMessages, newMessage ]); setUserMessage(""); }; const handleUserMessageChange = (event)=>{ setUserMessage(event.target.value); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#f7f9fa] p-4", __source: { fileName: "", lineNumber: 20, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-xl bg-white rounded-lg shadow-md p-6", __source: { fileName: "", lineNumber: 21, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center border-b border-gray-200 pb-4", __source: { fileName: "", lineNumber: 22, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fab fa-twitter text-3xl text-[#1da1f2]", __source: { fileName: "", lineNumber: 23, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("h1", { className: "font-roboto ml-4 text-xl font-bold text-gray-900", __source: { fileName: "", lineNumber: 24, columnNumber: 11 }, __self: this }, "Chatbot")), /*#__PURE__*/ React.createElement("div", { className: "mt-4 overflow-auto", style: { height: "400px" }, __source: { fileName: "", lineNumber: 26, columnNumber: 9 }, __self: this }, messages.map((message)=>/*#__PURE__*/ React.createElement("div", { key: message.id, className: `my-2 p-4 rounded-lg ${message.sender === "bot" ? "bg-[#f0f4f8] text-right" : "bg-[#ebeff3] self-end text-left"} `, __source: { fileName: "", lineNumber: 28, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-roboto text-sm text-gray-900", __source: { fileName: "", lineNumber: 29, columnNumber: 15 }, __self: this }, message.text)))), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 33, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("form", { className: "flex", onSubmit: handleSendMessage, __source: { fileName: "", lineNumber: 34, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement(React.Fragment, null), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "px-4 bg-[#1da1f2] text-white rounded-r-lg", __source: { fileName: "", lineNumber: 36, columnNumber: 13 }, __self: this }, "Send"))))); }