function MainComponent() { const [message, setMessage] = React.useState(''); const [conversation, setConversation] = React.useState([ { role: 'system', content: 'Game Chat Initialized' }, { role: 'assistant', content: 'Hello, Player! Ready to start the game?' } ]); const [isLoading, setIsLoading] = React.useState(false); const handleMessageChange = (event)=>{ setMessage(event.target.value); }; const handleSendMessage = async (event)=>{ event.preventDefault(); if (!message.trim()) return; const updatedConversation = [ ...conversation, { role: 'user', content: message } ]; setConversation(updatedConversation); setMessage(''); setIsLoading(true); try { const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: updatedConversation.filter(({ role })=>role === 'user' || role === 'assistant').map(({ role, content })=>({ role, content })), system_prompt: 'Continue the game', max_tokens: 2000 }) }); const data = await response.json(); if (data.status) { setConversation((prevConversation)=>[ ...prevConversation, { role: 'assistant', content: data.result } ]); } } catch (error) { setConversation((prevConversation)=>[ ...prevConversation, { role: 'system', content: 'Error processing your message. Please try again.' } ]); } finally{ setIsLoading(false); } }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center h-screen bg-[#121212]", __source: { fileName: "", lineNumber: 52, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 53, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-roboto text-[#FFFFFF] mb-8", __source: { fileName: "", lineNumber: 54, columnNumber: 9 }, __self: this }, "Game Chat with AI"), /*#__PURE__*/ React.createElement("div", { className: "bg-[#FFFFFF] rounded-lg p-6 flex flex-col space-y-4 max-w-lg w-full", __source: { fileName: "", lineNumber: 55, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-1 overflow-auto", __source: { fileName: "", lineNumber: 56, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("ul", { className: "space-y-2", __source: { fileName: "", lineNumber: 57, columnNumber: 13 }, __self: this }, conversation.map((entry, index)=>/*#__PURE__*/ React.createElement("li", { className: `${entry.role !== 'user' ? 'text-right' : 'text-left'}`, key: index, __source: { fileName: "", lineNumber: 59, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm font-roboto text-[#000000]", __source: { fileName: "", lineNumber: 60, columnNumber: 19 }, __self: this }, entry.role === 'user' ? 'You' : entry.role === 'assistant' ? 'AI' : 'System', ": ", /*#__PURE__*/ React.createElement("span", { className: "font-light", __source: { fileName: "", lineNumber: 60, columnNumber: 149 }, __self: this }, entry.content)))))), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSendMessage, className: "pt-4", __source: { fileName: "", lineNumber: 65, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "message", value: message, onChange: handleMessageChange, className: "border p-2 w-full font-roboto text-sm", placeholder: "Type your message...", disabled: isLoading, __source: { fileName: "", lineNumber: 66, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full bg-[#F50057] mt-4 p-2 text-white font-roboto rounded", disabled: isLoading, __source: { fileName: "", lineNumber: 75, columnNumber: 13 }, __self: this }, isLoading ? 'Sending...' : 'Send'))))); }