function MainComponent() { const [messages, setMessages] = React.useState([]); const [inputValue, setInputValue] = React.useState(""); const [isConnected, setIsConnected] = React.useState(false); const [loading, setLoading] = React.useState(false); const fetchReply = (userMessage)=>{ setLoading(true); fetch('/nekto/chat/conversation', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { "role": "user", "content": userMessage } ], mode: 'random' }) }).then((response)=>response.json()).then((data)=>{ const replyMessage = { id: Math.random(), text: data.choices[0].message.content, sender: "random" }; setMessages((currentMessages)=>[ ...currentMessages, replyMessage ]); }).finally(()=>setLoading(false)); }; const sendMessage = (e)=>{ if (e.key === "Enter" && inputValue.trim() !== "") { const newMessage = { id: Math.random(), text: inputValue, sender: "user" }; setMessages([ ...messages, newMessage ]); fetchReply(inputValue); setInputValue(""); } }; const toggleConnection = ()=>{ setIsConnected(!isConnected); if (!isConnected) { setMessages([]); } }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col h-screen", __source: { fileName: "", lineNumber: 44, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#3700B3] p-4 flex justify-between items-center", __source: { fileName: "", lineNumber: 45, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-white font-roboto text-xl", __source: { fileName: "", lineNumber: 46, columnNumber: 9 }, __self: this }, "Chat with a Random Stranger"), /*#__PURE__*/ React.createElement("button", { onClick: toggleConnection, className: `text-white font-roboto px-4 py-2 rounded-md transition-colors ${isConnected ? "bg-[#CF6679]" : "bg-[#03DAC6]"}`, __source: { fileName: "", lineNumber: 47, columnNumber: 9 }, __self: this }, isConnected ? "Disconnect" : "Connect")), /*#__PURE__*/ React.createElement("div", { className: `flex-grow overflow-auto p-2 ${!isConnected && "bg-gray-100"}`, __source: { fileName: "", lineNumber: 54, columnNumber: 7 }, __self: this }, isConnected ? messages.map((message)=>/*#__PURE__*/ React.createElement("div", { key: message.id, className: `m-2 p-2 text-white w-1/2 ${message.sender === "user" ? "bg-[#6200EE] rounded-lg" : "bg-[#03DAC5] ml-auto rounded-lg"}`, __source: { fileName: "", lineNumber: 57, columnNumber: 13 }, __self: this }, message.text)) : /*#__PURE__*/ React.createElement("div", { className: "text-center mt-10 text-[#6200EE] font-roboto", __source: { fileName: "", lineNumber: 62, columnNumber: 11 }, __self: this }, "Connect to chat with a random stranger!"), loading && /*#__PURE__*/ React.createElement("div", { className: "text-center text-white", __source: { fileName: "", lineNumber: 66, columnNumber: 21 }, __self: this }, "🤔 Thinking...")), isConnected && /*#__PURE__*/ React.createElement("div", { className: "p-2", __source: { fileName: "", lineNumber: 69, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "message", placeholder: "Type a message...", value: inputValue, onChange: (e)=>setInputValue(e.target.value), onKeyPress: (e)=>sendMessage(e), className: "w-full p-2 border-2 border-[#6200EE] rounded-md", __source: { fileName: "", lineNumber: 70, columnNumber: 11 }, __self: this }))); }