function MainComponent() { const [bingoNumbers, setBingoNumbers] = React.useState([]); const [currentNumber, setCurrentNumber] = React.useState(null); const [isGameStarted, setGameStarted] = React.useState(false); const [isLoading, setLoading] = React.useState(false); const [chatHistory, setChatHistory] = React.useState([]); const handleStartGame = async ()=>{ setLoading(true); setGameStarted(true); const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: chatHistory, system_prompt: 'Start Bingo game.' }) }); const data = await response.json(); setLoading(false); if (data.status) { setCurrentNumber(data.result); } }; const handleNextNumber = async ()=>{ setLoading(true); const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ ...chatHistory, { role: 'user', content: currentNumber } ], system_prompt: 'Call the next Bingo number.', max_tokens: 5 }) }); const data = await response.json(); setLoading(false); if (data.status) { setCurrentNumber(data.result); setChatHistory((prevHistory)=>[ ...prevHistory, { role: 'system', content: data.result } ]); setBingoNumbers((prevNumbers)=>[ ...prevNumbers, data.result ]); } }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#f4f4f4] font-roboto", __source: { fileName: "", lineNumber: 53, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold text-[#333] mb-8", __source: { fileName: "", lineNumber: 54, columnNumber: 7 }, __self: this }, "Bingo for Seniors"), !isGameStarted ? /*#__PURE__*/ React.createElement("button", { className: "px-6 py-2 bg-[#007bff] text-white rounded font-bold text-xl", onClick: handleStartGame, __source: { fileName: "", lineNumber: 56, columnNumber: 9 }, __self: this }, "Start Game") : /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center", __source: { fileName: "", lineNumber: 63, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-6xl font-bold text-[#555] mb-4", __source: { fileName: "", lineNumber: 64, columnNumber: 11 }, __self: this }, "Number: ", currentNumber), /*#__PURE__*/ React.createElement("button", { className: `px-6 py-2 bg-[#28a745] text-white rounded font-bold text-xl ${isLoading && 'opacity-50 cursor-not-allowed'}`, onClick: handleNextNumber, disabled: isLoading, __source: { fileName: "", lineNumber: 65, columnNumber: 11 }, __self: this }, isLoading ? 'Loading...' : 'Next Number')), /*#__PURE__*/ React.createElement("ul", { className: "mt-8 max-w-md w-full", __source: { fileName: "", lineNumber: 74, columnNumber: 7 }, __self: this }, bingoNumbers.map((number, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "bg-white shadow rounded p-3 my-2 flex justify-between items-center", __source: { fileName: "", lineNumber: 76, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 77, columnNumber: 13 }, __self: this }, "Number ", index + 1, ":"), /*#__PURE__*/ React.createElement("span", { className: "font-bold text-[#555]", __source: { fileName: "", lineNumber: 78, columnNumber: 13 }, __self: this }, number))))); }