function MainComponent() { const [messages, setMessages] = React.useState([ { text: "Hi there! How are you?", time: "10:00 AM", sender: "other" }, { text: "Hello! I'm good, thanks!", time: "10:01 AM", sender: "me" } ]); const [input, setInput] = React.useState(""); const handleSend = ()=>{ if (input.trim() === "") return; const newMessage = { text: input, time: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }), sender: "me" }; setMessages([ ...messages, newMessage ]); setTimeout(()=>{ const responseMessage = { text: "This is an automated response.", time: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }), sender: "other" }; setMessages((prevMessages)=>[ ...prevMessages, responseMessage ]); }, 1000); setInput(""); }; return /*#__PURE__*/ React.createElement("div", { className: "font-roboto p-4", __source: { fileName: "", lineNumber: 29, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-md mx-auto bg-white shadow-md rounded-lg p-4", __source: { fileName: "", lineNumber: 30, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "h-96 overflow-y-auto", __source: { fileName: "", lineNumber: 31, columnNumber: 9 }, __self: this }, messages.map((message, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `mb-4 flex ${message.sender === "me" ? "justify-end" : ""}`, __source: { fileName: "", lineNumber: 33, columnNumber: 13 }, __self: this }, message.sender === "other" && /*#__PURE__*/ React.createElement("div", { className: "w-10 h-10 bg-gray-300 rounded-full flex-shrink-0", __source: { fileName: "", lineNumber: 35, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: `ml-3 ${message.sender === "me" ? "mr-3" : ""}`, __source: { fileName: "", lineNumber: 37, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: `p-2 rounded-lg ${message.sender === "me" ? "text-white bg-blue-500" : "text-gray-800"}`, __source: { fileName: "", lineNumber: 38, columnNumber: 17 }, __self: this }, message.text), /*#__PURE__*/ React.createElement("p", { className: `text-sm text-gray-500 ${message.sender === "me" ? "text-right" : ""}`, __source: { fileName: "", lineNumber: 41, columnNumber: 17 }, __self: this }, message.time)), message.sender === "me" && /*#__PURE__*/ React.createElement("div", { className: "w-10 h-10 bg-blue-500 rounded-full flex-shrink-0", __source: { fileName: "", lineNumber: 46, columnNumber: 17 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { className: "mt-4 flex", __source: { fileName: "", lineNumber: 51, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "message", className: "w-full px-4 py-2 border rounded-lg focus:outline-none", placeholder: "Type a message...", value: input, onChange: (e)=>setInput(e.target.value), __source: { fileName: "", lineNumber: 52, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "bg-blue-500 text-white px-4 py-2 rounded-lg ml-2", onClick: handleSend, __source: { fileName: "", lineNumber: 60, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-paper-plane", __source: { fileName: "", lineNumber: 63, columnNumber: 13 }, __self: this }))))); }