function MainComponent() { const [habits, setHabits] = React.useState([]); const [editIndex, setEditIndex] = React.useState(-1); const [behavior, setBehavior] = React.useState(""); const [motivation, setMotivation] = React.useState(""); const [loading, setLoading] = React.useState(false); const fetchGPTData = async (newHabit)=>{ setLoading(true); try { const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { "role": "user", "content": `Behavior: ${newHabit.behavior}, Motivation: ${newHabit.motivation}` } ], system_prompt: 'Generate possible abilities and prompts for the following habit' }) }); const data = await response.json(); if (data.choices && data.choices.length > 0) { return data.choices[0].message.content; } return 'No generation available'; } catch (error) { console.error('Error fetching GPT data:', error); return 'Error during generation'; } finally{ setLoading(false); } }; const handleSubmit = async (e)=>{ e.preventDefault(); const newHabit = { behavior, motivation, id: Date.now() }; const generation = await fetchGPTData(newHabit); const habitWithGeneration = { ...newHabit, generation }; if (editIndex >= 0) { const updatedHabits = habits.map((habit, index)=>index === editIndex ? habitWithGeneration : habit); setHabits(updatedHabits); setEditIndex(-1); } else { setHabits([ ...habits, habitWithGeneration ]); } setBehavior(""); setMotivation(""); }; const handleEdit = (index)=>{ setEditIndex(index); setBehavior(habits[index].behavior); setMotivation(habits[index].motivation); }; const handleDelete = (index)=>{ const filteredHabits = habits.filter((_, i)=>i !== index); setHabits(filteredHabits); }; return /*#__PURE__*/ React.createElement("div", { className: "w-full min-h-screen bg-[#F3F4F6] flex justify-center items-start pt-10", __source: { fileName: "", lineNumber: 67, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-[600px] bg-white shadow-md rounded-lg p-5", __source: { fileName: "", lineNumber: 68, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-xl font-semibold text-[#121212] mb-6", __source: { fileName: "", lineNumber: 69, columnNumber: 9 }, __self: this }, "Habit Tracker"), /*#__PURE__*/ React.createElement("form", { className: "flex flex-col gap-4", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 70, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 71, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "behavior", className: "block text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 72, columnNumber: 13 }, __self: this }, "Behavior"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "behavior", id: "behavior", value: behavior, onChange: (e)=>setBehavior(e.target.value), className: "mt-1 block w-full px-3 py-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-[#4F46E5] focus:border-[#4F46E5]", __source: { fileName: "", lineNumber: 73, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 75, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "motivation", className: "block text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 76, columnNumber: 13 }, __self: this }, "Motivation"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "motivation", id: "motivation", value: motivation, onChange: (e)=>setMotivation(e.target.value), className: "mt-1 block w-full px-3 py-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-[#4F46E5] focus:border-[#4F46E5]", __source: { fileName: "", lineNumber: 77, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: `w-full py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-[#4F46E5] hover:bg-[#3730A3] ${loading ? 'opacity-50 cursor-not-allowed' : ''}`, disabled: loading, __source: { fileName: "", lineNumber: 79, columnNumber: 11 }, __self: this }, loading ? 'Generating...' : 'Generate Abilities & Prompts')), /*#__PURE__*/ React.createElement("ul", { className: "mt-10", __source: { fileName: "", lineNumber: 83, columnNumber: 9 }, __self: this }, habits.map((habit, index)=>/*#__PURE__*/ React.createElement("li", { key: habit.id, className: "mb-4 flex flex-col justify-between bg-gray-100 p-3 rounded-md", __source: { fileName: "", lineNumber: 85, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 86, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-medium text-[#121212]", __source: { fileName: "", lineNumber: 87, columnNumber: 17 }, __self: this }, habit.behavior), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-700", __source: { fileName: "", lineNumber: 88, columnNumber: 17 }, __self: this }, habit.motivation), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-600 mt-2", __source: { fileName: "", lineNumber: 89, columnNumber: 17 }, __self: this }, habit.generation)), /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-2 mt-2", __source: { fileName: "", lineNumber: 91, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "text-blue-500 hover:text-blue-700", onClick: ()=>handleEdit(index), __source: { fileName: "", lineNumber: 92, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-edit", __source: { fileName: "", lineNumber: 93, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("button", { className: "text-red-500 hover:text-red-700", onClick: ()=>handleDelete(index), __source: { fileName: "", lineNumber: 95, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-trash-alt", __source: { fileName: "", lineNumber: 96, columnNumber: 19 }, __self: this })))))))); }