function MainComponent() { const [plantName, setPlantName] = React.useState(''); const [carePlan, setCarePlan] = React.useState([]); const [loading, setLoading] = React.useState(false); const [plants, setPlants] = React.useState([]); const handleAddPlant = async ()=>{ setLoading(true); try { const response = await fetch('/api/plants', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ name: plantName }) }); const newPlant = await response.json(); setPlants([ ...plants, newPlant ]); setPlantName(''); await generateCarePlan(); } finally{ setLoading(false); } }; const generateCarePlan = async ()=>{ setLoading(true); try { const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: plants.map((plant)=>({ role: 'user', content: `How do I care for my ${plant.name} based on my location?` })), system_prompt: 'Generate a care plan for these plants based on the location.' }) }); const { result } = await response.json(); setCarePlan(result.split('\n')); // Assuming API returns newline-separated tasks } finally{ setLoading(false); } }; React.useEffect(()=>{ async function fetchPlants() { setLoading(true); try { const response = await fetch('/api/plants'); const plantsData = await response.json(); setPlants(plantsData); await generateCarePlan(); } finally{ setLoading(false); } } fetchPlants(); }, []); const plantInput = /*#__PURE__*/ React.createElement("div", { className: "flex justify-between", __source: { fileName: "", lineNumber: 61, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "plant_name", placeholder: "Enter plant name", className: "border p-2 w-full mr-4 rounded-md text-[#121212] font-roboto", value: plantName, onChange: (e)=>setPlantName(e.target.value), disabled: loading, __source: { fileName: "", lineNumber: 62, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: handleAddPlant, className: "border px-6 py-2 bg-[#4CAF50] text-white rounded-md font-roboto disabled:opacity-50", disabled: loading, __source: { fileName: "", lineNumber: 71, columnNumber: 7 }, __self: this }, loading ? 'Adding...' : 'Add to Calendar')); const carePlanList = /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4", __source: { fileName: "", lineNumber: 81, columnNumber: 5 }, __self: this }, carePlan.map((task, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "bg-[#E8F5E9] p-4 rounded-md fade-in", __source: { fileName: "", lineNumber: 83, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-roboto font-semibold", __source: { fileName: "", lineNumber: 84, columnNumber: 11 }, __self: this }, "Task ", index + 1), /*#__PURE__*/ React.createElement("p", { className: "font-roboto", __source: { fileName: "", lineNumber: 85, columnNumber: 11 }, __self: this }, task)))); return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen p-4 bg-[#f0f0f0]", __source: { fileName: "", lineNumber: 91, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold text-[#121212] mb-8", __source: { fileName: "", lineNumber: 92, columnNumber: 7 }, __self: this }, "Plant Care Calendar"), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-3xl bg-white shadow-lg rounded-lg p-6", __source: { fileName: "", lineNumber: 93, columnNumber: 7 }, __self: this }, plantInput, /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 95, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold text-[#121212] mb-2", __source: { fileName: "", lineNumber: 96, columnNumber: 11 }, __self: this }, "My Plants"), /*#__PURE__*/ React.createElement("ul", { className: "list-disc pl-5", __source: { fileName: "", lineNumber: 97, columnNumber: 11 }, __self: this }, plants.map((plant, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "mb-1 font-roboto", __source: { fileName: "", lineNumber: 99, columnNumber: 15 }, __self: this }, plant.name)))), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 103, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold text-[#121212] mb-2", __source: { fileName: "", lineNumber: 104, columnNumber: 11 }, __self: this }, "Monthly Care Plan"), loading ? /*#__PURE__*/ React.createElement("p", { className: "font-roboto", __source: { fileName: "", lineNumber: 105, columnNumber: 22 }, __self: this }, "Generating care plan...") : carePlanList)), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 108, columnNumber: 7 }, __self: this }, ` @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .fade-in { animation: fadeIn 1s ease-in; } `)); }