function MainComponent() { const [messages, setMessages] = React.useState([ { id: 1, text: "Hello! How can I help you today?", sender: "agent" }, { id: 2, text: "I am looking for information about your services.", sender: "user" }, { id: 3, text: "We offer a variety of services including...", sender: "agent" } ]); const [inputMessage, setInputMessage] = React.useState(""); const handleMessageChange = (event)=>{ setInputMessage(event.target.value); }; const handleSendMessage = (event)=>{ event.preventDefault(); if (!inputMessage.trim()) return; const newMessage = { id: messages.length + 1, text: inputMessage, sender: "user" }; setMessages([ ...messages, newMessage ]); setInputMessage(""); }; return /*#__PURE__*/ React.createElement("div", { className: "fixed bottom-0 right-0 mb-4 mr-4 flex flex-col items-end", __source: { fileName: "", lineNumber: 27, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#0078FF] p-4 rounded-t-lg", __source: { fileName: "", lineNumber: 28, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-comments text-white text-xl", __source: { fileName: "", lineNumber: 29, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "bg-white w-[320px] h-[400px] rounded-lg shadow-xl", __source: { fileName: "", lineNumber: 31, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 32, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-4", __source: { fileName: "", lineNumber: 33, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-roboto", __source: { fileName: "", lineNumber: 34, columnNumber: 13 }, __self: this }, "Messages"), /*#__PURE__*/ React.createElement("button", { __source: { fileName: "", lineNumber: 35, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-times text-[#333333]", __source: { fileName: "", lineNumber: 36, columnNumber: 15 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "h-[300px] overflow-y-auto", __source: { fileName: "", lineNumber: 39, columnNumber: 11 }, __self: this }, messages.map((message)=>/*#__PURE__*/ React.createElement("div", { key: message.id, className: `mb-3 ${message.sender === "user" ? "self-end" : ""}`, __source: { fileName: "", lineNumber: 41, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `p-2 rounded-lg ${message.sender === "user" ? "bg-[#0078FF] text-white" : "bg-[#f0f0f0]"}`, __source: { fileName: "", lineNumber: 42, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-sm", __source: { fileName: "", lineNumber: 43, columnNumber: 19 }, __self: this }, message.text))))), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSendMessage, __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "message", className: "w-full p-2 border rounded-lg", placeholder: "Type your message here...", value: inputMessage, onChange: handleMessageChange, __source: { fileName: "", lineNumber: 49, columnNumber: 13 }, __self: this }))))); }