function MainComponent() { const [messages, setMessages] = React.useState([ { id: 1, text: "Hello, how are you?", sender: "other" }, { id: 2, text: "I'm fine, thanks! And you?", sender: "me" } ]); const [message, setMessage] = React.useState(""); const handleSendMessage = (event)=>{ event.preventDefault(); if (!message.trim()) return; const newMessage = { id: messages.length + 1, text: message, sender: "me" }; setMessages([ ...messages, newMessage ]); setMessage(""); }; const handleChange = (event)=>{ setMessage(event.target.value); }; const renderMessageBubble = (message)=>{ const isMe = message.sender === "me"; return /*#__PURE__*/ React.createElement("div", { className: `flex ${isMe ? "justify-end" : "justify-start"} items-end`, key: message.id, __source: { fileName: "", lineNumber: 27, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `max-w-xs lg:max-w-md p-3 rounded-lg ${isMe ? "bg-[#80CBC4] text-white" : "bg-[#E0F2F1] text-[#263238]"}`, __source: { fileName: "", lineNumber: 28, columnNumber: 9 }, __self: this }, message.text)); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col h-screen", __source: { fileName: "", lineNumber: 36, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-4 bg-[#00897B] text-white font-roboto", __source: { fileName: "", lineNumber: 37, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-xl", __source: { fileName: "", lineNumber: 38, columnNumber: 9 }, __self: this }, "Flutter Chat")), /*#__PURE__*/ React.createElement("div", { className: "flex-grow p-4 overflow-auto space-y-4", __source: { fileName: "", lineNumber: 40, columnNumber: 7 }, __self: this }, messages.map((message)=>renderMessageBubble(message))), /*#__PURE__*/ React.createElement("div", { className: "p-4 bg-white", __source: { fileName: "", lineNumber: 45, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: handleSendMessage, className: "flex items-center space-x-2", __source: { fileName: "", lineNumber: 46, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { onChange: handleChange, value: message, name: "message", className: "flex-grow p-2 border-2 border-[#E0E0E0] rounded-md", placeholder: "Type a message", type: "text", __source: { fileName: "", lineNumber: 47, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "p-2 text-white bg-[#00897B] rounded-md", __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this }, "📩")))); }