function MainComponent() { const [darkMode, setDarkMode] = React.useState(false); const [textSize, setTextSize] = React.useState("base"); const [currentPage, setCurrentPage] = React.useState("home"); const [loading, setLoading] = React.useState(false); const [messages, setMessages] = React.useState([]); const [messageContent, setMessageContent] = React.useState(''); const [selectedChatIndex, setSelectedChatIndex] = React.useState(0); const toggleDarkMode = ()=>setDarkMode(!darkMode); const toggleTextSize = ()=>setTextSize(textSize === "base" ? "xl" : "base"); const navigateToPage = (page)=>setCurrentPage(page); const chatList = [ { name: "Peter", active: true, lastMessage: "last message sent" }, { name: "Rajneesh", active: false, lastMessage: "last message sent" }, { name: "Kishan", active: true, lastMessage: "How was the geography quiz?" }, { name: "Katie", active: true, lastMessage: "Can you explain this further?" }, { name: "Auguste", active: false, lastMessage: "I'll submit my answer tomorrow." } ]; const sendMessage = async ()=>{ if (!messageContent.trim()) return; setLoading(true); const newMessage = { role: "user", content: messageContent }; const requestBody = { messages: [ ...messages, newMessage ], system_prompt: 'Please assist with the inquiry' }; try { const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', body: JSON.stringify(requestBody), headers: { 'Content-Type': 'application/json' } }); const data = await response.json(); if (data.status) { setMessages([ ...messages, newMessage, { role: 'assistant', content: data.result } ]); } } catch (error) { console.error('Error sending message:', error); } setLoading(false); setMessageContent(''); }; const handleKeyPress = (event)=>{ if (event.key === 'Enter') { sendMessage(); } }; const selectChat = (index)=>{ setSelectedChatIndex(index); navigateToPage('messages'); }; const chatComponents = chatList.map((chat, index)=>/*#__PURE__*/ React.createElement("div", { key: chat.name, onClick: ()=>selectChat(index), className: `p-4 flex justify-between items-center cursor-pointer ${selectedChatIndex === index ? 'bg-purple-200' : 'bg-white'}`, __source: { fileName: "", lineNumber: 68, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 69, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `h-2 w-2 rounded-full mr-2 ${chat.active ? 'bg-green-500' : 'bg-red-500'}`, __source: { fileName: "", lineNumber: 70, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: `font-roboto ${textSize}`, __source: { fileName: "", lineNumber: 71, columnNumber: 9 }, __self: this }, chat.name)), /*#__PURE__*/ React.createElement("p", { className: `text-xs font-roboto truncate w-1/2 ${textSize === 'xl' ? 'text-base' : 'text-xs'}`, __source: { fileName: "", lineNumber: 73, columnNumber: 7 }, __self: this }, chat.lastMessage))); let currentDisplay; switch(currentPage){ case "home": currentDisplay = /*#__PURE__*/ React.createElement("div", { className: "flex flex-col justify-center items-center", __source: { fileName: "", lineNumber: 81, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>navigateToPage('quiz'), className: "p-4 m-2 bg-purple-500 text-white font-roboto rounded-md", __source: { fileName: "", lineNumber: 82, columnNumber: 11 }, __self: this }, "Random Quiz"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>navigateToPage('messages'), className: "p-4 m-2 bg-purple-500 text-white font-roboto rounded-md", __source: { fileName: "", lineNumber: 83, columnNumber: 11 }, __self: this }, "Your last quiz - Spanish Pronouns - continue?"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>navigateToPage('mind-map'), className: "p-4 m-2 bg-purple-500 text-white font-roboto rounded-md", __source: { fileName: "", lineNumber: 84, columnNumber: 11 }, __self: this }, "Categories (mind map)")); break; case "messages": currentDisplay = /*#__PURE__*/ React.createElement("div", { className: "flex", __source: { fileName: "", lineNumber: 90, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-1/3 bg-gray-200", __source: { fileName: "", lineNumber: 91, columnNumber: 11 }, __self: this }, chatComponents), /*#__PURE__*/ React.createElement("div", { className: "w-2/3 flex flex-col bg-white", __source: { fileName: "", lineNumber: 94, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-grow", __source: { fileName: "", lineNumber: 95, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "p-2", __source: { fileName: "", lineNumber: 98, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "message", placeholder: "Enter message", value: messageContent, onChange: (e)=>setMessageContent(e.target.value), onKeyPress: handleKeyPress, className: `${textSize} p-2 border-2 border-gray-300 rounded-md w-full`, __source: { fileName: "", lineNumber: 99, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: sendMessage, disabled: loading, className: "p-2 bg-purple-500 text-white font-roboto rounded-md", __source: { fileName: "", lineNumber: 108, columnNumber: 15 }, __self: this }, loading ? "Sending..." : "Send"))), /*#__PURE__*/ React.createElement("div", { className: "w-1/3 bg-gray-100", __source: { fileName: "", lineNumber: 113, columnNumber: 11 }, __self: this })); break; // Additional cases would be added here for "forum", "leaderboard", "quiz", "profile", "quiz-maker", "mind-map", and "privacy" default: currentDisplay = /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 122, columnNumber: 24 }, __self: this }); } return /*#__PURE__*/ React.createElement("div", { className: `${darkMode ? "bg-black text-white" : "bg-white text-black"}`, __source: { fileName: "", lineNumber: 126, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: `p-4 ${darkMode ? "bg-gray-800" : "bg-gray-100"} shadow-md`, __source: { fileName: "", lineNumber: 127, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center", __source: { fileName: "", lineNumber: 128, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>navigateToPage('home'), className: "text-lg font-bold font-roboto", __source: { fileName: "", lineNumber: 129, columnNumber: 11 }, __self: this }, "Home"), /*#__PURE__*/ React.createElement("button", { onClick: toggleDarkMode, className: "text-2xl", __source: { fileName: "", lineNumber: 130, columnNumber: 11 }, __self: this }, darkMode ? "🌞" : "🌙"), /*#__PURE__*/ React.createElement("button", { onClick: toggleTextSize, className: "text-2xl", __source: { fileName: "", lineNumber: 133, columnNumber: 11 }, __self: this }, textSize === "base" ? "🔡" : "🔠"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>navigateToPage('messages'), className: "text-lg font-semibold font-roboto", __source: { fileName: "", lineNumber: 136, columnNumber: 11 }, __self: this }, "Messages"))), currentDisplay, /*#__PURE__*/ React.createElement("footer", { className: `p-4 ${darkMode ? "bg-gray-800" : "bg-gray-100"} mt-4 border-t`, __source: { fileName: "", lineNumber: 140, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>navigateToPage('privacy'), className: "underline font-roboto", __source: { fileName: "", lineNumber: 141, columnNumber: 9 }, __self: this }, "Privacy & Legislative Notices"))); }