function MainComponent() { const [messages, setMessages] = React.useState([ { text: "Hello! How can I help you?", sender: "bot" }, { text: "I need assistance.", sender: "user" } ]); const [input, setInput] = React.useState(""); const handleSend = ()=>{ if (input.trim() !== "") { setMessages([ ...messages, { text: input, sender: "user" } ]); setInput(""); } }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col h-screen", __source: { fileName: "", lineNumber: 16, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center p-4 bg-gray-800 text-white font-roboto", __source: { fileName: "", lineNumber: 17, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-xl", __source: { fileName: "", lineNumber: 18, columnNumber: 9 }, __self: this }, "Chat App"), /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-4", __source: { fileName: "", lineNumber: 19, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-user-circle text-2xl", __source: { fileName: "", lineNumber: 20, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col flex-1 overflow-y-auto p-6 space-y-4 bg-gray-100 font-roboto", __source: { fileName: "", lineNumber: 23, columnNumber: 7 }, __self: this }, messages.map((message, index)=>{ const justifyClass = message.sender === "user" ? "justify-end" : "justify-start"; const bgColorClass = message.sender === "user" ? "bg-green-500" : "bg-blue-500"; return /*#__PURE__*/ React.createElement("div", { key: index, className: `flex items-center ${justifyClass}`, __source: { fileName: "", lineNumber: 29, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `${bgColorClass} text-white p-3 rounded-full`, __source: { fileName: "", lineNumber: 30, columnNumber: 15 }, __self: this }, message.text)); })), /*#__PURE__*/ React.createElement("div", { className: "flex p-4 bg-gray-800", __source: { fileName: "", lineNumber: 37, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { className: "flex-1 p-2 rounded-lg border border-gray-400", type: "text", name: "message", placeholder: "Type your message...", value: input, onChange: (e)=>setInput(e.target.value), __source: { fileName: "", lineNumber: 38, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "ml-2 p-2 bg-blue-500 text-white rounded-lg", onClick: handleSend, __source: { fileName: "", lineNumber: 46, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-paper-plane", __source: { fileName: "", lineNumber: 47, columnNumber: 11 }, __self: this })))); }