function MainComponent() { const [bmrResult, setBmrResult] = React.useState(null); const [loading, setLoading] = React.useState(false); const [formData, setFormData] = React.useState({ age: '', weight: '', height: '', gender: '' }); const handleInputChange = (e)=>{ const { name, value } = e.target; setFormData({ ...formData, [name]: value }); }; const calculateBMR = async ()=>{ setLoading(true); const messages = [ { role: "system", content: `Calculate BMR for a ${formData.gender} of age ${formData.age}, weight ${formData.weight} kg, height ${formData.height} cm.` }, { role: "user", content: `My age is ${formData.age}, weight ${formData.weight} kg, height ${formData.height} cm and I am a ${formData.gender}.` } ]; try { const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', body: JSON.stringify({ messages: messages, system_prompt: 'Calculate the Basal Metabolic Rate', max_tokens: 2000 }), headers: { 'Content-Type': 'application/json' } }); if (!response.ok) { throw new Error('Network response was not ok'); } const result = await response.json(); setBmrResult(result.result); } catch (error) { console.error('Failed to calculate BMR:', error); setBmrResult('Error calculating BMR'); } setLoading(false); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#f7f7f7] p-4", __source: { fileName: "", lineNumber: 56, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-semibold text-xl text-[#121212] mb-4", __source: { fileName: "", lineNumber: 57, columnNumber: 7 }, __self: this }, "BMR Calculator"), /*#__PURE__*/ React.createElement("div", { className: "bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4 flex flex-col", __source: { fileName: "", lineNumber: 59, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "-mx-3 mb-4", __source: { fileName: "", lineNumber: 60, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-bold mb-2", __source: { fileName: "", lineNumber: 61, columnNumber: 11 }, __self: this }, "Age"), /*#__PURE__*/ React.createElement("input", { className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline", type: "number", placeholder: "Age", name: "age", value: formData.age, onChange: handleInputChange, __source: { fileName: "", lineNumber: 64, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "-mx-3 mb-4", __source: { fileName: "", lineNumber: 73, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-bold mb-2", __source: { fileName: "", lineNumber: 74, columnNumber: 11 }, __self: this }, "Weight (kg)"), /*#__PURE__*/ React.createElement("input", { className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline", type: "number", placeholder: "Weight in kg", name: "weight", value: formData.weight, onChange: handleInputChange, __source: { fileName: "", lineNumber: 77, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "-mx-3 mb-4", __source: { fileName: "", lineNumber: 86, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-bold mb-2", __source: { fileName: "", lineNumber: 87, columnNumber: 11 }, __self: this }, "Height (cm)"), /*#__PURE__*/ React.createElement("input", { className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline", type: "number", placeholder: "Height in cm", name: "height", value: formData.height, onChange: handleInputChange, __source: { fileName: "", lineNumber: 90, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 99, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "block text-gray-700 text-sm font-bold mb-2", __source: { fileName: "", lineNumber: 100, columnNumber: 11 }, __self: this }, "Gender"), /*#__PURE__*/ React.createElement("div", { className: "mt-2", __source: { fileName: "", lineNumber: 103, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "inline-flex items-center", __source: { fileName: "", lineNumber: 104, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { className: "form-radio", type: "radio", name: "gender", value: "male", checked: formData.gender === 'male', onChange: handleInputChange, __source: { fileName: "", lineNumber: 105, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "ml-2", __source: { fileName: "", lineNumber: 113, columnNumber: 15 }, __self: this }, "Male")), /*#__PURE__*/ React.createElement("label", { className: "inline-flex items-center ml-6", __source: { fileName: "", lineNumber: 115, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { className: "form-radio", type: "radio", name: "gender", value: "female", checked: formData.gender === 'female', onChange: handleInputChange, __source: { fileName: "", lineNumber: 116, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "ml-2", __source: { fileName: "", lineNumber: 124, columnNumber: 15 }, __self: this }, "Female")))), /*#__PURE__*/ React.createElement("button", { className: "bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline", onClick: calculateBMR, __source: { fileName: "", lineNumber: 129, columnNumber: 9 }, __self: this }, "Calculate")), loading && /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 134, columnNumber: 19 }, __self: this }, "Calculating..."), bmrResult && /*#__PURE__*/ React.createElement("div", { className: "mt-4 bg-green-100 border-t-4 border-green-500 rounded-b text-green-900 px-4 py-3 shadow-md", role: "alert", __source: { fileName: "", lineNumber: 136, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-bold", __source: { fileName: "", lineNumber: 137, columnNumber: 11 }, __self: this }, "BMR Result"), /*#__PURE__*/ React.createElement("p", { className: "text-sm", __source: { fileName: "", lineNumber: 138, columnNumber: 11 }, __self: this }, bmrResult))); }