function MainComponent() { const [isVisible, setIsVisible] = React.useState(false); const [message, setMessage] = React.useState(''); const [conversation, setConversation] = React.useState([ { id: 1, text: "Hello human! What's your query today?", user: 'ai' } ]); const [userInput, setUserInput] = React.useState(''); React.useEffect(()=>{ const timeout = setTimeout(()=>{ setIsVisible(true); setMessage('Hello, I\'m watching you 👀'); }, 3000); return ()=>clearTimeout(timeout); }, []); const handleUserInput = (event)=>{ setUserInput(event.target.value); }; const handleSubmit = (event)=>{ event.preventDefault(); const newMessage = { id: conversation.length + 1, text: userInput, user: 'human' }; setConversation([ ...conversation, newMessage ]); setUserInput(''); setTimeout(()=>{ const aiResponse = { id: conversation.length + 2, text: "Interesting... Tell me more.", user: 'ai' }; setConversation([ ...conversation, newMessage, aiResponse ]); }, 1000); }; return /*#__PURE__*/ React.createElement("div", { className: "font-roboto bg-[#36393f] min-h-screen relative", __source: { fileName: "", lineNumber: 35, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-[#202225] py-4 shadow-md", __source: { fileName: "", lineNumber: 36, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto flex justify-between items-center px-4", __source: { fileName: "", lineNumber: 37, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-xl text-white font-bold", __source: { fileName: "", lineNumber: 38, columnNumber: 11 }, __self: this }, "AI", /*#__PURE__*/ React.createElement("span", { className: "text-[#fe2c55]", __source: { fileName: "", lineNumber: 38, columnNumber: 58 }, __self: this }, "Chat"), "Server"), /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-4", __source: { fileName: "", lineNumber: 39, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-sm text-gray-400", __source: { fileName: "", lineNumber: 40, columnNumber: 13 }, __self: this }, "Your AI companion"), /*#__PURE__*/ React.createElement("i", { className: "fas fa-robot text-2xl text-[#fe2c55]", __source: { fileName: "", lineNumber: 41, columnNumber: 13 }, __self: this })))), /*#__PURE__*/ React.createElement("main", { className: "container mx-auto py-8 px-4", __source: { fileName: "", lineNumber: 45, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#40444b] rounded-md p-4 shadow-md", __source: { fileName: "", lineNumber: 46, columnNumber: 9 }, __self: this }, conversation.map((msg)=>/*#__PURE__*/ React.createElement("div", { className: `p-2 ${msg.user === 'ai' ? 'text-left' : 'text-right'}`, key: msg.id, __source: { fileName: "", lineNumber: 48, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: `inline-block text-sm rounded-lg px-4 py-2 ${msg.user === 'ai' ? 'bg-[#5865F2] text-white' : 'bg-[#57F287]'}`, __source: { fileName: "", lineNumber: 49, columnNumber: 15 }, __self: this }, msg.text)))), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "mt-4 flex", __source: { fileName: "", lineNumber: 55, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { className: "flex-grow p-2 rounded-l-md focus:outline-none", onChange: handleUserInput, value: userInput, placeholder: "Say something...", name: "userInput", __source: { fileName: "", lineNumber: 56, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "bg-[#5865F2] text-white py-2 px-4 rounded-r-md", type: "submit", __source: { fileName: "", lineNumber: 62, columnNumber: 11 }, __self: this }, "Send"))), isVisible && /*#__PURE__*/ React.createElement("div", { className: "fixed top-1/4 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-[#202225] p-4 rounded-lg shadow-xl z-50", __source: { fileName: "", lineNumber: 66, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-white text-lg", __source: { fileName: "", lineNumber: 67, columnNumber: 11 }, __self: this }, message), /*#__PURE__*/ React.createElement("button", { className: "mt-4 bg-[#5865F2] text-white py-2 px-4 rounded-lg", onClick: ()=>setIsVisible(false), __source: { fileName: "", lineNumber: 68, columnNumber: 11 }, __self: this }, "Close"))); }