function MainComponent() { const [messages, setMessages] = React.useState([ { from: "user", text: "Hello, how are you?" }, { from: "friend", text: "I'm good, thanks! How about you?" }, { from: "user", text: "Doing well, thank you!" } ]); const [inputValue, setInputValue] = React.useState(""); const handleInputChange = (e)=>{ setInputValue(e.target.value); }; const handleSendMessage = ()=>{ if (inputValue.trim() !== "") { setMessages([ ...messages, { from: "user", text: inputValue } ]); setInputValue(""); } }; React.useEffect(()=>{ const messageEnd = document.getElementById("messageEnd"); if (messageEnd) { messageEnd.scrollIntoView({ behavior: "smooth" }); } }, [ messages ]); return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col h-screen bg-gray-100", __source: { fileName: "", lineNumber: 29, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between px-4 py-2 bg-teal-500 text-white", __source: { fileName: "", lineNumber: 30, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 31, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-arrow-left text-xl", __source: { fileName: "", lineNumber: 32, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("img", { src: "./profile.jpg", alt: "Friend's profile", className: "w-10 h-10 rounded-full ml-3", __source: { fileName: "", lineNumber: 33, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "ml-3", __source: { fileName: "", lineNumber: 38, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-lg font-roboto", __source: { fileName: "", lineNumber: 39, columnNumber: 13 }, __self: this }, "Friend's Name"), /*#__PURE__*/ React.createElement("div", { className: "text-sm text-gray-300", __source: { fileName: "", lineNumber: 40, columnNumber: 13 }, __self: this }, "last seen today at 12:05 PM"))), /*#__PURE__*/ React.createElement("i", { className: "fas fa-ellipsis-v text-xl", __source: { fileName: "", lineNumber: 43, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex-1 overflow-y-auto p-4 space-y-4", __source: { fileName: "", lineNumber: 46, columnNumber: 7 }, __self: this }, messages.map((msg, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `flex ${msg.from === "user" ? "justify-end" : "justify-start"}`, __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `max-w-[75%] p-2 rounded-lg ${msg.from === "user" ? "bg-teal-500 text-white" : "bg-white text-black"}`, __source: { fileName: "", lineNumber: 52, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-roboto", __source: { fileName: "", lineNumber: 57, columnNumber: 15 }, __self: this }, msg.text)))), /*#__PURE__*/ React.createElement("div", { id: "messageEnd", __source: { fileName: "", lineNumber: 61, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex items-center p-4 bg-white", __source: { fileName: "", lineNumber: 64, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-smile text-2xl text-gray-500", __source: { fileName: "", lineNumber: 65, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", name: "message", value: inputValue, onChange: handleInputChange, className: "flex-1 mx-4 p-2 border rounded-lg bg-gray-100 focus:outline-none", placeholder: "Type a message", __source: { fileName: "", lineNumber: 66, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: handleSendMessage, __source: { fileName: "", lineNumber: 74, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-paper-plane text-2xl text-teal-500", __source: { fileName: "", lineNumber: 75, columnNumber: 11 }, __self: this })))); }