function MainComponent() { const [symptom, setSymptom] = React.useState(''); const [results, setResults] = React.useState([]); const [loading, setLoading] = React.useState(false); const fetchDiagnosis = async (symptom)=>{ setLoading(true); try { const response = await fetch('/integrations/groq/', { method: 'POST', body: JSON.stringify({ messages: [ { "role": "user", "content": `symptom: ${symptom}` } ] }), headers: { 'Content-Type': 'application/json' } }); const data = await response.json(); const message = JSON.parse(data.choices[0].message.content); setResults(message.results || [ { diagnosis: 'No diagnosis could be found. Please consult a healthcare provider.', treatment: '' } ]); } catch (error) { setResults([ { diagnosis: 'Failed to fetch diagnosis. Please try again.', treatment: '' } ]); } setLoading(false); }; const handleSymptomChange = (e)=>{ setSymptom(e.target.value); }; const handleSubmit = async (e)=>{ e.preventDefault(); fetchDiagnosis(symptom); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#f0f2f5] flex flex-col items-center justify-center p-4", __source: { fileName: "", lineNumber: 40, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-semibold text-[#333] mb-8", __source: { fileName: "", lineNumber: 41, columnNumber: 7 }, __self: this }, "Symptom Checker"), /*#__PURE__*/ React.createElement("form", { className: "w-full max-w-lg", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 42, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 43, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "symptom", className: "block text-sm font-medium text-[#333] mb-2", __source: { fileName: "", lineNumber: 44, columnNumber: 11 }, __self: this }, "Enter your symptom"), /*#__PURE__*/ React.createElement("input", { id: "symptom", name: "symptom", placeholder: "Describe your symptom...", value: symptom, onChange: handleSymptomChange, className: "shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border-gray-300 rounded-md", __source: { fileName: "", lineNumber: 47, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center", __source: { fileName: "", lineNumber: 56, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "submit", disabled: loading, className: `inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white ${loading ? 'bg-gray-400' : 'bg-[#4f46e5] hover:bg-[#4338ca]'} focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500`, __source: { fileName: "", lineNumber: 57, columnNumber: 11 }, __self: this }, loading ? 'Checking...' : 'Check Diagnosis'))), /*#__PURE__*/ React.createElement("div", { className: "mt-6 text-center", __source: { fileName: "", lineNumber: 66, columnNumber: 7 }, __self: this }, results.map((result, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "mb-4", __source: { fileName: "", lineNumber: 68, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm font-medium text-[#333]", __source: { fileName: "", lineNumber: 69, columnNumber: 13 }, __self: this }, "Diagnosis: ", result.diagnosis), /*#__PURE__*/ React.createElement("p", { className: "text-sm font-medium text-[#333]", __source: { fileName: "", lineNumber: 70, columnNumber: 13 }, __self: this }, "Treatment: ", result.treatment))))); }