function MainComponent() { const [mode, setMode] = React.useState('standard'); const [input, setInput] = React.useState(''); const [loading, setLoading] = React.useState(false); const [response, setResponse] = React.useState(''); const [graphEquation, setGraphEquation] = React.useState(''); const handleInputChange = (e)=>{ setInput(e.target.value); }; const handleGraphInputChange = (e)=>{ setGraphEquation(e.target.value); }; const handleCalculate = async ()=>{ setLoading(true); let prompt; if (mode === 'graphing') { prompt = `Please graph the following equation: ${graphEquation}.`; } else { prompt = `Please calculate the following expression in ${mode} mode: ${input}.`; } try { const body = JSON.stringify({ messages: [ { role: 'user', content: mode === 'graphing' ? graphEquation : input } ], system_prompt: prompt, max_tokens: 200 }); const res = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: body }); const data = await res.json(); setResponse(data.status ? data.result : 'Error: Could not compute the expression.'); } catch (error) { setResponse('Error: Network problem.'); } setLoading(false); }; const renderSpinner = ()=>/*#__PURE__*/ React.createElement("div", { className: "animate-spin rounded-full h-[50px] w-[50px] border-b-2 border-white", __source: { fileName: "", lineNumber: 49, columnNumber: 5 }, __self: this }); const renderStandardMode = ()=>/*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 53, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "input", className: "w-full p-2 text-right border border-gray-200 rounded bg-[#121212] text-white placeholder-gray-400", value: input, onChange: handleInputChange, placeholder: "Enter expression", __source: { fileName: "", lineNumber: 54, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("button", { name: "calculate", onClick: handleCalculate, className: "w-full p-2 mt-2 bg-blue-600 rounded text-white", disabled: loading, __source: { fileName: "", lineNumber: 62, columnNumber: 7 }, __self: this }, loading ? renderSpinner() : 'Calculate')); const renderGraphingMode = ()=>/*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 74, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "graphEquation", className: "w-full p-2 text-right border border-gray-200 rounded bg-[#121212] text-white placeholder-gray-400", value: graphEquation, onChange: handleGraphInputChange, placeholder: "Enter equation y = mx + b for linear, y = ax^2 + bx + c for quadratic", __source: { fileName: "", lineNumber: 75, columnNumber: 8 }, __self: this }), /*#__PURE__*/ React.createElement("button", { name: "graph", onClick: handleCalculate, className: "w-full p-2 mt-2 bg-green-500 rounded text-white", disabled: loading, __source: { fileName: "", lineNumber: 83, columnNumber: 7 }, __self: this }, loading ? renderSpinner() : 'Graph')); const renderScientificMode = ()=>/*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 95, columnNumber: 5 }, __self: this }); const renderSettingsMode = ()=>/*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 101, columnNumber: 5 }, __self: this }); const renderMode = ()=>{ switch(mode){ case 'standard': return renderStandardMode(); case 'graphing': return renderGraphingMode(); case 'scientific': return renderScientificMode(); case 'settings': return renderSettingsMode(); } }; const handleModeChange = (newMode)=>{ setMode(newMode); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#121212]", __source: { fileName: "", lineNumber: 124, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-row mb-4", __source: { fileName: "", lineNumber: 125, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { name: "standardMode", onClick: ()=>handleModeChange('standard'), className: `px-4 py-2 m-2 rounded shadow text-white ${mode === 'standard' ? 'bg-blue-600' : 'bg-blue-500'}`, __source: { fileName: "", lineNumber: 126, columnNumber: 9 }, __self: this }, "Standard"), /*#__PURE__*/ React.createElement("button", { name: "graphingMode", onClick: ()=>handleModeChange('graphing'), className: `px-4 py-2 m-2 rounded shadow text-white ${mode === 'graphing' ? 'bg-green-600' : 'bg-green-500'}`, __source: { fileName: "", lineNumber: 133, columnNumber: 9 }, __self: this }, "Graphing"), /*#__PURE__*/ React.createElement("button", { name: "scientificMode", onClick: ()=>handleModeChange('scientific'), className: `px-4 py-2 m-2 rounded shadow text-white ${mode === 'scientific' ? 'bg-purple-600' : 'bg-purple-500'}`, __source: { fileName: "", lineNumber: 140, columnNumber: 9 }, __self: this }, "Scientific"), /*#__PURE__*/ React.createElement("button", { name: "settingsMode", onClick: ()=>handleModeChange('settings'), className: `px-4 py-2 m-2 rounded shadow text-white ${mode === 'settings' ? 'bg-gray-600' : 'bg-gray-500'}`, __source: { fileName: "", lineNumber: 147, columnNumber: 9 }, __self: this }, "Settings")), /*#__PURE__*/ React.createElement("div", { className: "p-4 bg-[#1c1c1c] rounded shadow w-full max-w-[600px]", __source: { fileName: "", lineNumber: 155, columnNumber: 7 }, __self: this }, renderMode()), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 158, columnNumber: 7 }, __self: this }, ` @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .spinner { animation: spin 1s linear infinite; } `)); }