function MainComponent() { const [messages, setMessages] = React.useState([]); const [inputMessage, setInputMessage] = React.useState(""); const handleInputChange = (event)=>{ setInputMessage(event.target.value); }; const handleFormSubmit = (event)=>{ event.preventDefault(); if (inputMessage.trim() !== "") { const newMessage = { id: Date.now(), text: inputMessage, sender: "user" }; setMessages((prevMessages)=>[ ...prevMessages, newMessage ]); setInputMessage(""); } }; const renderMessages = messages.map((message)=>/*#__PURE__*/ React.createElement("div", { key: message.id, className: `flex ${message.sender === 'user' ? 'justify-end' : 'justify-start'}`, __source: { fileName: "", lineNumber: 20, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#F1F0F0] rounded-xl p-3 max-w-[60%] break-words font-roboto", __source: { fileName: "", lineNumber: 24, columnNumber: 7 }, __self: this }, message.text))); const chatInterface = /*#__PURE__*/ React.createElement("div", { className: "flex flex-col h-screen", __source: { fileName: "", lineNumber: 30, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-[#4A90E2] p-4 text-white text-xl md:text-2xl lg:text-3xl font-bold font-roboto", __source: { fileName: "", lineNumber: 31, columnNumber: 7 }, __self: this }, "Chatgpt5"), /*#__PURE__*/ React.createElement("div", { className: "flex-grow overflow-y-auto p-4 space-y-2", __source: { fileName: "", lineNumber: 32, columnNumber: 7 }, __self: this }, renderMessages), /*#__PURE__*/ React.createElement("div", { className: "flex-shrink-0 p-4", __source: { fileName: "", lineNumber: 35, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("form", { className: "flex gap-2", onSubmit: handleFormSubmit, __source: { fileName: "", lineNumber: 36, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", placeholder: "Type your message...", className: "flex-grow p-2 border border-[#DDDDDD] rounded-lg outline-none focus:border-[#4A90E2] font-roboto", name: "message", value: inputMessage, onChange: handleInputChange, __source: { fileName: "", lineNumber: 37, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-[#4A90E2] text-white rounded-lg px-6 font-roboto", __source: { fileName: "", lineNumber: 45, columnNumber: 11 }, __self: this }, "Send")))); return /*#__PURE__*/ React.createElement("div", { className: "container mx-auto px-4", __source: { fileName: "", lineNumber: 56, columnNumber: 5 }, __self: this }, chatInterface); }