function MainComponent() { const [goal, setGoal] = useState(""); const [plan, setPlan] = useState(null); const [error, setError] = useState(null); const [streamingMessage, setStreamingMessage] = useState(""); const handleStreamResponse = useHandleStreamResponse({ onChunk: setStreamingMessage, onFinish: (message)=>{ setPlan(message); setStreamingMessage(""); } }); const generatePlan = async ()=>{ if (!goal.trim()) return; setPlan(null); setError(null); try { const response = await fetch("/integrations/chat-gpt/conversationgpt4", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: [ { role: "user", content: `Create a detailed 30-day action plan for the following goal: ${goal}. Format as a daily checklist with: □ Day 1: • Main task: • Daily subtasks: - [ ] Task 1 - [ ] Task 2 - [ ] Task 3 • Today's tip: (Repeat for each day from 1-30, using bullet points and checkboxes)` } ], stream: true }) }); if (!response.ok) { throw new Error("Failed to generate plan"); } handleStreamResponse(response); } catch (err) { console.error(err); setError("Failed to generate plan. Please try again."); } }; const handlePrint = ()=>{ window.print(); }; return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("head", { __source: { fileName: "", lineNumber: 59, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("link", { rel: "icon", type: "image/png", href: "https://ucarecdn.com/65b1484f-8165-4c28-ad2c-3f29136c4949/-/format/auto/", __source: { fileName: "", lineNumber: 60, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-black p-4 md:p-8", __source: { fileName: "", lineNumber: 66, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto", __source: { fileName: "", lineNumber: 67, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/8d39a9ed-27c0-4f4e-b389-1beed1b0fb50/-/format/auto/", alt: "Five Stars App Solutions Logo", className: "mx-auto mb-8 max-w-[200px] w-full", __source: { fileName: "", lineNumber: 68, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("h1", { className: "text-4xl md:text-5xl font-bold text-[#39FF14] mb-8 neon-text-glow", __source: { fileName: "", lineNumber: 73, columnNumber: 11 }, __self: this }, "30-Day Goal Planner"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col md:flex-row gap-4 mb-8", __source: { fileName: "", lineNumber: 76, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", value: goal, onChange: (e)=>setGoal(e.target.value), placeholder: "Enter your goal", className: "flex-1 p-3 border-2 border-[#39FF14] rounded-md text-white bg-black placeholder-gray-400 focus:border-[#50FF2E] focus:outline-none neon-glow", __source: { fileName: "", lineNumber: 77, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: generatePlan, disabled: !goal.trim(), className: "px-6 py-3 bg-[#39FF14] text-black rounded-md hover:bg-[#50FF2E] transition-colors font-inter disabled:opacity-50 disabled:hover:bg-[#39FF14] neon-glow", __source: { fileName: "", lineNumber: 84, columnNumber: 13 }, __self: this }, "Generate Plan")), error && /*#__PURE__*/ React.createElement("div", { className: "text-[#39FF14] mb-4", __source: { fileName: "", lineNumber: 93, columnNumber: 21 }, __self: this }, error), (streamingMessage || plan) && /*#__PURE__*/ React.createElement("div", { className: "print:mx-0", __source: { fileName: "", lineNumber: 96, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-end mb-4 print:hidden", __source: { fileName: "", lineNumber: 97, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handlePrint, className: "px-6 py-3 border-2 border-[#39FF14] text-[#39FF14] rounded-md hover:border-[#50FF2E] hover:text-[#50FF2E] transition-colors font-inter neon-glow", __source: { fileName: "", lineNumber: 98, columnNumber: 17 }, __self: this }, "Print Plan")), /*#__PURE__*/ React.createElement("div", { className: "prose max-w-none bg-black p-6 rounded-lg border-2 border-[#39FF14] text-[#39FF14] neon-glow", __source: { fileName: "", lineNumber: 105, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "space-y-8 whitespace-pre-line", __source: { fileName: "", lineNumber: 106, columnNumber: 17 }, __self: this }, streamingMessage || plan))), !streamingMessage && !plan && !error && /*#__PURE__*/ React.createElement("div", { className: "text-center p-8 border-2 border-[#39FF14] rounded-lg neon-glow", __source: { fileName: "", lineNumber: 114, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-[#39FF14]", __source: { fileName: "", lineNumber: 115, columnNumber: 15 }, __self: this }, "Enter your goal and click Generate Plan to create your personalized 30-day action plan"))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 123, columnNumber: 9 }, __self: this }, ` @media print { body * { visibility: hidden; } .prose, .prose * { visibility: visible; color: black !important; background: white !important; border-color: black !important; } .prose { position: absolute; left: 0; top: 0; width: 100%; padding: 2rem !important; } input[type="checkbox"] { -webkit-print-color-adjust: exact; color-adjust: exact; print-color-adjust: exact; } } .neon-glow { box-shadow: 0 0 10px #39FF14, 0 0 20px #39FF14; } .neon-text-glow { text-shadow: 0 0 10px #39FF14; } .prose { line-height: 1.8; } .prose > div > div { padding-bottom: 2rem; margin-bottom: 2rem; border-bottom: 1px solid rgba(57, 255, 20, 0.2); } .prose > div > div:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; } input[type="checkbox"] { accent-color: #39FF14; width: 1.2em; height: 1.2em; margin-right: 0.5em; } `))); }