function MainComponent() { const [input, setInput] = React.useState(''); const [isGenerating, setIsGenerating] = React.useState(false); const [chatBotResponse, setChatBotResponse] = React.useState(''); const [errorMessage, setErrorMessage] = React.useState(''); const handleGenerateClick = async ()=>{ if (!input) { setErrorMessage('Please enter some input to proceed.'); return; } setIsGenerating(true); setErrorMessage(''); try { const chatBotResponse = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { "role": "user", "content": input } ], system_prompt: 'Create a game plan', max_tokens: 2000 }) }).then((res)=>res.json()).then((data)=>data.result); setChatBotResponse(chatBotResponse); } catch (error) { setErrorMessage(error.toString()); } finally{ setIsGenerating(false); } }; const handleErrorClose = ()=>{ setErrorMessage(''); }; const handleInputChange = (event)=>{ setInput(event.target.value); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#F3F4F6] p-4", __source: { fileName: "", lineNumber: 46, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-lg p-6 bg-white shadow-md rounded-lg", __source: { fileName: "", lineNumber: 47, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 48, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-xl font-semibold text-gray-800", __source: { fileName: "", lineNumber: 49, columnNumber: 11 }, __self: this }, "AI Game Generator"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600", __source: { fileName: "", lineNumber: 50, columnNumber: 11 }, __self: this }, "Enter your ideas and the AI will help you create a game:")), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 52, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { name: "input", value: input, onChange: handleInputChange, className: "w-full p-2 text-sm text-gray-700 border rounded-lg focus:outline-none focus:border-blue-500", placeholder: "Type your idea or concept here", rows: 4, __source: { fileName: "", lineNumber: 53, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: handleGenerateClick, disabled: isGenerating, className: `w-full p-2 text-white bg-blue-500 rounded-lg font-semibold transition duration-200 ${isGenerating ? 'opacity-50 cursor-not-allowed' : 'hover:bg-blue-600'}`, __source: { fileName: "", lineNumber: 62, columnNumber: 9 }, __self: this }, "Generate")), errorMessage && /*#__PURE__*/ React.createElement("div", { className: "mt-4 w-full max-w-lg p-4 bg-red-100 text-red-700 border border-red-400 rounded", __source: { fileName: "", lineNumber: 71, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("strong", { className: "font-bold", __source: { fileName: "", lineNumber: 72, columnNumber: 11 }, __self: this }, "Error!"), /*#__PURE__*/ React.createElement("span", { className: "block sm:inline", __source: { fileName: "", lineNumber: 73, columnNumber: 11 }, __self: this }, " ", errorMessage), /*#__PURE__*/ React.createElement("span", { onClick: handleErrorClose, className: "float-right cursor-pointer", __source: { fileName: "", lineNumber: 74, columnNumber: 11 }, __self: this }, "✖")), chatBotResponse && /*#__PURE__*/ React.createElement("div", { className: "mt-4 w-full max-w-lg p-4 bg-green-100 text-green-700 border border-green-400 rounded", __source: { fileName: "", lineNumber: 78, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("strong", { className: "font-bold", __source: { fileName: "", lineNumber: 79, columnNumber: 11 }, __self: this }, "AI Response:"), /*#__PURE__*/ React.createElement("p", { className: "break-all", __source: { fileName: "", lineNumber: 80, columnNumber: 11 }, __self: this }, chatBotResponse)), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 83, columnNumber: 7 }, __self: this }, ` @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .fade-in { animation: fadeIn 1s ease-in; } `)); }