function MainComponent() { const [isLoading, setIsLoading] = React.useState(false); const [messages, setMessages] = React.useState([]); const [inputValue, setInputValue] = React.useState(""); const [whitePlayer, setWhitePlayer] = React.useState(''); const [blackPlayer, setBlackPlayer] = React.useState(''); const [currentTurn, setCurrentTurn] = React.useState('white'); const switchPlayer = ()=>{ setCurrentTurn(currentTurn === 'white' ? 'black' : 'white'); }; const sendMessageToChatGPT = async ()=>{ if (!inputValue.trim()) return; const userMessage = { role: currentTurn, content: inputValue }; setIsLoading(true); try { const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ ...messages, userMessage ], system_prompt: `${whitePlayer} (${currentTurn === 'white' ? 'White' : 'Black'})'s move: ${inputValue}` }) }); const data = await response.json(); setIsLoading(false); if (data.status) { setMessages((prevMessages)=>[ ...prevMessages, userMessage, { role: 'assistant', content: data.result } ]); } else { setMessages((prevMessages)=>[ ...prevMessages, userMessage, { role: 'system', content: 'An error occurred' } ]); } } catch (error) { setMessages((prevMessages)=>[ ...prevMessages, userMessage, { role: 'system', content: 'An error occurred while sending the message' } ]); } finally{ switchPlayer(); setInputValue(''); } }; const handleInputChange = (event)=>{ setInputValue(event.target.value); }; const handleKeyPress = (event)=>{ if (event.key === 'Enter' && !isLoading) { sendMessageToChatGPT(); } }; const playerNameChange = (player, value)=>{ if (player === 'white') { setWhitePlayer(value); } else { setBlackPlayer(value); } }; const messageList = messages.map((message, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `p-2 my-2 rounded-lg ${message.role === 'user' || message.role === 'white' ? 'bg-blue-300 ml-auto' : message.role === 'black' ? 'bg-red-600 text-white' : 'bg-green-200'}`, __source: { fileName: "", lineNumber: 59, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto", __source: { fileName: "", lineNumber: 60, columnNumber: 7 }, __self: this }, message.content))); return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#f0f0f0] p-4", __source: { fileName: "", lineNumber: 64, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-3xl bg-white shadow-lg rounded-lg", __source: { fileName: "", lineNumber: 65, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-4 space-y-4", __source: { fileName: "", lineNumber: 66, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-center text-2xl font-bold font-roboto", __source: { fileName: "", lineNumber: 67, columnNumber: 11 }, __self: this }, "Chess Game Chat with AI"), /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 68, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", className: "w-full p-2 border border-gray-300 rounded-lg focus:outline-none", placeholder: "White player name...", value: whitePlayer, onChange: (e)=>playerNameChange('white', e.target.value), name: "whitePlayerInput", disabled: isLoading, __source: { fileName: "", lineNumber: 69, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", className: "w-full p-2 border border-gray-300 rounded-lg focus:outline-none", placeholder: "Black player name...", value: blackPlayer, onChange: (e)=>playerNameChange('black', e.target.value), name: "blackPlayerInput", disabled: isLoading, __source: { fileName: "", lineNumber: 70, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-2", __source: { fileName: "", lineNumber: 71, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: `w-full p-2 text-white rounded-lg ${currentTurn === 'white' ? 'bg-blue-500' : 'bg-gray-400'}`, onClick: sendMessageToChatGPT, disabled: currentTurn !== 'white' || isLoading, __source: { fileName: "", lineNumber: 72, columnNumber: 15 }, __self: this }, isLoading && currentTurn === 'white' ? 'Thinking...' : 'White Move'), /*#__PURE__*/ React.createElement("button", { className: `w-full p-2 text-white rounded-lg ${currentTurn === 'black' ? 'bg-red-500' : 'bg-gray-400'}`, onClick: sendMessageToChatGPT, disabled: currentTurn !== 'black' || isLoading, __source: { fileName: "", lineNumber: 75, columnNumber: 15 }, __self: this }, isLoading && currentTurn === 'black' ? 'Thinking...' : 'Black Move')), /*#__PURE__*/ React.createElement("input", { type: "text", className: "w-full p-2 border border-gray-300 rounded-lg focus:outline-none", placeholder: "Enter your move...", value: inputValue, onChange: handleInputChange, onKeyPress: handleKeyPress, disabled: isLoading, name: "moveInput", __source: { fileName: "", lineNumber: 79, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "h-[500px] overflow-auto bg-gray-100 p-4", __source: { fileName: "", lineNumber: 81, columnNumber: 11 }, __self: this }, messageList)))); }