function MainComponent() { const [message, setMessage] = useState(""); const [type, setType] = useState("breakup"); const [tone, setTone] = useState("firm"); const [generatedText, setGeneratedText] = useState(""); const [generatedImage, setGeneratedImage] = useState(""); const [loading, setLoading] = useState(false); const [downloadLoading, setDownloadLoading] = useState(false); const [streamingText, setStreamingText] = useState(""); const [fromName, setFromName] = useState(""); const [toName, setToName] = useState(""); const [occasion, setOccasion] = useState("breakup"); const [imageLoaded, setImageLoaded] = useState(false); useEffect(()=>{ const script = document.createElement("script"); script.src = "https://html2canvas.hertzen.com/dist/html2canvas.min.js"; script.async = true; document.body.appendChild(script); return ()=>{ document.body.removeChild(script); }; }, []); const handleStreamResponse = useHandleStreamResponse({ onChunk: setStreamingText, onFinish: (message)=>{ setGeneratedText(message); generateImage(message); } }); const generateImage = async (text)=>{ try { const response = await fetch(`/integrations/dall-e-3/?prompt=${encodeURIComponent(text)}`); const data = await response.json(); if (data.data && data.data[0]) { const img = new Image(); img.crossOrigin = "anonymous"; img.onload = ()=>{ setGeneratedImage(data.data[0].url); setImageLoaded(true); }; img.onerror = ()=>console.error("Failed to load image"); img.src = data.data[0].url; } } catch (error) { console.error("Error generating image:", error); } finally{ setLoading(false); } }; const generateMessage = async ()=>{ if (!message) return; setLoading(true); setStreamingText(""); setGeneratedText(""); setGeneratedImage(""); const nameContext = toName ? `to ${toName}` : ""; const signatureContext = fromName ? `from ${fromName}` : ""; const occasionContext = occasion !== "other" ? `regarding ${occasion}` : ""; let styleInstruction = ""; if (type === "breakup") { styleInstruction = "Write this as a clear, definitive breakup letter."; } else if (type === "rejection") { styleInstruction = "Write this as a firm but respectful rejection note."; } else if (type === "closure") { styleInstruction = "Write this as a final message seeking or providing closure."; } else if (type === "friendship") { styleInstruction = "Write this as a message ending a friendship."; } else if (type === "complaint") { styleInstruction = "Write this as a formal complaint or grievance."; } const prompt = `Create a ${tone} message ${nameContext} ${occasionContext} based on this context: ${message}. ${styleInstruction} The tone should be ${tone} but maintain dignity and respect. Keep the length appropriate for a ${type}. ${signatureContext ? `Sign it "${signatureContext}"` : ""}`; try { const response = await fetch("/integrations/chat-gpt/conversationgpt4", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: [ { role: "user", content: prompt } ], stream: true }) }); handleStreamResponse(response); } catch (error) { console.error("Error generating text:", error); setLoading(false); } }; const handleDownload = async ()=>{ try { setDownloadLoading(true); if (!imageLoaded) { throw new Error("Please wait for image to load completely"); } const element = document.getElementById("card-preview"); if (!element) { throw new Error("Card preview not found"); } await new Promise((resolve)=>setTimeout(resolve, 100)); const canvas = await html2canvas(element, { useCORS: true, allowTaint: false, logging: true, scale: 2 }); const link = document.createElement("a"); link.download = `final-message-${new Date().getTime()}.png`; link.href = canvas.toDataURL("image/png", 1.0); link.click(); } catch (error) { console.error("Download error:", error); alert(error.message); } finally{ setDownloadLoading(false); } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gradient-to-br from-[#2d1b4e] to-[#461220] p-4 md:p-8", __source: { fileName: "", lineNumber: 133, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/", className: "absolute top-4 left-4 text-white/80 hover:text-white flex items-center gap-2 transition-colors", __source: { fileName: "", lineNumber: 134, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-arrow-left", __source: { fileName: "", lineNumber: 138, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "font-crimson-text hidden md:inline", __source: { fileName: "", lineNumber: 139, columnNumber: 9 }, __self: this }, "Back")), /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto bg-black/80 backdrop-blur-sm rounded-3xl shadow-2xl p-4 md:p-10", __source: { fileName: "", lineNumber: 141, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center mb-8", __source: { fileName: "", lineNumber: 142, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-center gap-4 mb-2", __source: { fileName: "", lineNumber: 143, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-4xl md:text-5xl", __source: { fileName: "", lineNumber: 144, columnNumber: 13 }, __self: this }, "😈"), /*#__PURE__*/ React.createElement("h1", { className: "text-4xl md:text-5xl font-playfair text-[#ff1a1a]", __source: { fileName: "", lineNumber: 145, columnNumber: 13 }, __self: this }, "Anti-Cupid AI"), /*#__PURE__*/ React.createElement("span", { className: "text-4xl md:text-5xl", __source: { fileName: "", lineNumber: 148, columnNumber: 13 }, __self: this }, "😈")), /*#__PURE__*/ React.createElement("p", { className: "text-lg md:text-xl font-crimson-text text-[#cc0000] mb-6", __source: { fileName: "", lineNumber: 150, columnNumber: 11 }, __self: this }, "When Cupid's arrows miss their mark..."), /*#__PURE__*/ React.createElement("div", { className: "bg-[#1a0f2e]/80 rounded-xl p-6 max-w-2xl mx-auto", __source: { fileName: "", lineNumber: 153, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-playfair text-[#ff1a1a] mb-3", __source: { fileName: "", lineNumber: 154, columnNumber: 13 }, __self: this }, "💔 How It Works"), /*#__PURE__*/ React.createElement("ol", { className: "text-left font-crimson-text space-y-3 text-gray-300", __source: { fileName: "", lineNumber: 157, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("li", { className: "flex items-center gap-2", __source: { fileName: "", lineNumber: 158, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "bg-[#ff1a1a] text-white w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0", __source: { fileName: "", lineNumber: 159, columnNumber: 17 }, __self: this }, "1"), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 162, columnNumber: 17 }, __self: this }, "Choose your message type and tone - from firm goodbyes to final closures")), /*#__PURE__*/ React.createElement("li", { className: "flex items-center gap-2", __source: { fileName: "", lineNumber: 167, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "bg-[#ff1a1a] text-white w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0", __source: { fileName: "", lineNumber: 168, columnNumber: 17 }, __self: this }, "2"), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 171, columnNumber: 17 }, __self: this }, "Express your feelings and situation with clarity")), /*#__PURE__*/ React.createElement("li", { className: "flex items-center gap-2", __source: { fileName: "", lineNumber: 173, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "bg-[#ff1a1a] text-white w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0", __source: { fileName: "", lineNumber: 174, columnNumber: 17 }, __self: this }, "3"), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 177, columnNumber: 17 }, __self: this }, "Let AI craft a dignified message with matching dramatic artwork")), /*#__PURE__*/ React.createElement("li", { className: "flex items-center gap-2", __source: { fileName: "", lineNumber: 182, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "bg-[#ff1a1a] text-white w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0", __source: { fileName: "", lineNumber: 183, columnNumber: 17 }, __self: this }, "4"), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 186, columnNumber: 17 }, __self: this }, "Download your message or send it directly"))))), /*#__PURE__*/ React.createElement("div", { className: "space-y-4 md:space-y-6", __source: { fileName: "", lineNumber: 192, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", __source: { fileName: "", lineNumber: 193, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full", __source: { fileName: "", lineNumber: 194, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-[#ff1a1a] font-crimson-text text-base md:text-lg mb-2", __source: { fileName: "", lineNumber: 195, columnNumber: 15 }, __self: this }, "Type of Message"), /*#__PURE__*/ React.createElement("select", { value: type, onChange: (e)=>setType(e.target.value), className: "w-full p-4 rounded-xl border-2 border-[#461220] bg-black/50 text-gray-200 focus:border-[#ff1a1a] outline-none font-crimson-text text-base md:text-lg", __source: { fileName: "", lineNumber: 198, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "breakup", __source: { fileName: "", lineNumber: 203, columnNumber: 17 }, __self: this }, "Breakup Letter"), /*#__PURE__*/ React.createElement("option", { value: "rejection", __source: { fileName: "", lineNumber: 204, columnNumber: 17 }, __self: this }, "Rejection Note"), /*#__PURE__*/ React.createElement("option", { value: "closure", __source: { fileName: "", lineNumber: 205, columnNumber: 17 }, __self: this }, "Closure Message"), /*#__PURE__*/ React.createElement("option", { value: "friendship", __source: { fileName: "", lineNumber: 206, columnNumber: 17 }, __self: this }, "Friendship End"), /*#__PURE__*/ React.createElement("option", { value: "complaint", __source: { fileName: "", lineNumber: 207, columnNumber: 17 }, __self: this }, "General Complaint"))), /*#__PURE__*/ React.createElement("div", { className: "w-full", __source: { fileName: "", lineNumber: 210, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-[#ff1a1a] font-crimson-text text-base md:text-lg mb-2", __source: { fileName: "", lineNumber: 211, columnNumber: 15 }, __self: this }, "Tone"), /*#__PURE__*/ React.createElement("select", { value: tone, onChange: (e)=>setTone(e.target.value), className: "w-full p-4 rounded-xl border-2 border-[#461220] bg-black/50 text-gray-200 focus:border-[#ff1a1a] outline-none font-crimson-text text-base md:text-lg", __source: { fileName: "", lineNumber: 214, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "firm", __source: { fileName: "", lineNumber: 219, columnNumber: 17 }, __self: this }, "Firm"), /*#__PURE__*/ React.createElement("option", { value: "cold", __source: { fileName: "", lineNumber: 220, columnNumber: 17 }, __self: this }, "Cold"), /*#__PURE__*/ React.createElement("option", { value: "disappointed", __source: { fileName: "", lineNumber: 221, columnNumber: 17 }, __self: this }, "Disappointed"), /*#__PURE__*/ React.createElement("option", { value: "final", __source: { fileName: "", lineNumber: 222, columnNumber: 17 }, __self: this }, "Final"), /*#__PURE__*/ React.createElement("option", { value: "professional", __source: { fileName: "", lineNumber: 223, columnNumber: 17 }, __self: this }, "Professional"), /*#__PURE__*/ React.createElement("option", { value: "regretful", __source: { fileName: "", lineNumber: 224, columnNumber: 17 }, __self: this }, "Regretful"), /*#__PURE__*/ React.createElement("option", { value: "angry", __source: { fileName: "", lineNumber: 225, columnNumber: 17 }, __self: this }, "Angry"), /*#__PURE__*/ React.createElement("option", { value: "neutral", __source: { fileName: "", lineNumber: 226, columnNumber: 17 }, __self: this }, "Neutral"))), /*#__PURE__*/ React.createElement("div", { className: "w-full", __source: { fileName: "", lineNumber: 229, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-[#ff1a1a] font-crimson-text text-base md:text-lg mb-2", __source: { fileName: "", lineNumber: 230, columnNumber: 15 }, __self: this }, "Occasion"), /*#__PURE__*/ React.createElement("select", { value: occasion, onChange: (e)=>setOccasion(e.target.value), className: "w-full p-4 rounded-xl border-2 border-[#461220] bg-black/50 text-gray-200 focus:border-[#ff1a1a] outline-none font-crimson-text text-base md:text-lg", __source: { fileName: "", lineNumber: 233, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "breakup", __source: { fileName: "", lineNumber: 238, columnNumber: 17 }, __self: this }, "Breakup"), /*#__PURE__*/ React.createElement("option", { value: "rejection", __source: { fileName: "", lineNumber: 239, columnNumber: 17 }, __self: this }, "Rejection"), /*#__PURE__*/ React.createElement("option", { value: "ghosting", __source: { fileName: "", lineNumber: 240, columnNumber: 17 }, __self: this }, "Ghosting"), /*#__PURE__*/ React.createElement("option", { value: "moving", __source: { fileName: "", lineNumber: 241, columnNumber: 17 }, __self: this }, "Moving On"), /*#__PURE__*/ React.createElement("option", { value: "boundaries", __source: { fileName: "", lineNumber: 242, columnNumber: 17 }, __self: this }, "Boundaries"), /*#__PURE__*/ React.createElement("option", { value: "other", __source: { fileName: "", lineNumber: 243, columnNumber: 17 }, __self: this }, "Other"))), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-4", __source: { fileName: "", lineNumber: 246, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 247, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-[#ff1a1a] font-crimson-text text-base md:text-lg mb-2", __source: { fileName: "", lineNumber: 248, columnNumber: 17 }, __self: this }, "To"), /*#__PURE__*/ React.createElement("input", { type: "text", value: toName, onChange: (e)=>setToName(e.target.value), placeholder: "Their name...", className: "w-full p-4 rounded-xl border-2 border-[#461220] bg-black/50 text-gray-200 focus:border-[#ff1a1a] outline-none font-crimson-text text-base md:text-lg", __source: { fileName: "", lineNumber: 251, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 259, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-[#ff1a1a] font-crimson-text text-base md:text-lg mb-2", __source: { fileName: "", lineNumber: 260, columnNumber: 17 }, __self: this }, "From"), /*#__PURE__*/ React.createElement("input", { type: "text", value: fromName, onChange: (e)=>setFromName(e.target.value), placeholder: "Your name...", className: "w-full p-4 rounded-xl border-2 border-[#461220] bg-black/50 text-gray-200 focus:border-[#ff1a1a] outline-none font-crimson-text text-base md:text-lg", __source: { fileName: "", lineNumber: 263, columnNumber: 17 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 273, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-[#ff1a1a] font-crimson-text text-base md:text-lg mb-2", __source: { fileName: "", lineNumber: 274, columnNumber: 13 }, __self: this }, "Express your thoughts..."), /*#__PURE__*/ React.createElement("textarea", { value: message, onChange: (e)=>setMessage(e.target.value), placeholder: "Describe the situation, your feelings, and why this message is necessary...", className: "w-full p-4 h-32 md:h-40 rounded-xl border-2 border-[#461220] bg-black/50 text-gray-200 focus:border-[#ff1a1a] outline-none font-crimson-text text-base md:text-lg resize-none", __source: { fileName: "", lineNumber: 277, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: generateMessage, disabled: loading || !message, className: "w-full bg-gradient-to-r from-[#2d1b4e] to-[#461220] text-white py-4 px-8 rounded-xl font-crimson-text text-xl hover:from-[#461220] hover:to-[#2d1b4e] transition-all duration-300 flex items-center justify-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed", __source: { fileName: "", lineNumber: 284, columnNumber: 11 }, __self: this }, loading ? /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 290, columnNumber: 15 }, __self: this }, "Crafting Message...") : /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("i", { className: "fas fa-heart-broken", __source: { fileName: "", lineNumber: 293, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 294, columnNumber: 17 }, __self: this }, "Generate Message")))), (streamingText || generatedText) && /*#__PURE__*/ React.createElement("div", { className: "mt-8", __source: { fileName: "", lineNumber: 301, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { id: "card-preview", className: "relative bg-[#1a0f2e] rounded-2xl shadow-lg overflow-hidden", __source: { fileName: "", lineNumber: 302, columnNumber: 13 }, __self: this }, generatedImage && /*#__PURE__*/ React.createElement("div", { className: "w-full h-[200px] md:h-[300px] relative", __source: { fileName: "", lineNumber: 307, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: generatedImage, alt: "AI generated dramatic illustration", className: "w-full h-full object-cover", __source: { fileName: "", lineNumber: 308, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 bg-gradient-to-b from-transparent to-[#1a0f2e]/90", __source: { fileName: "", lineNumber: 313, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "p-4 md:p-8 relative", __source: { fileName: "", lineNumber: 316, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl md:text-2xl font-playfair text-[#ff1a1a] mb-4", __source: { fileName: "", lineNumber: 317, columnNumber: 17 }, __self: this }, toName ? `Dear ${toName}` : "Your Message"), /*#__PURE__*/ React.createElement("p", { className: "font-crimson-text text-base md:text-lg text-gray-300 whitespace-pre-line", __source: { fileName: "", lineNumber: 320, columnNumber: 17 }, __self: this }, streamingText || generatedText), fromName && /*#__PURE__*/ React.createElement("p", { className: "mt-4 font-playfair text-[#ff1a1a] text-right", __source: { fileName: "", lineNumber: 324, columnNumber: 19 }, __self: this }, "Sincerely, ", fromName))), /*#__PURE__*/ React.createElement("div", { className: "mt-4 mb-8 flex flex-col md:flex-row gap-4 justify-end", __source: { fileName: "", lineNumber: 331, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handleDownload, disabled: downloadLoading || !generatedImage, className: "w-full md:w-auto px-6 py-4 md:py-2 rounded-xl bg-[#461220] text-white font-crimson-text hover:bg-[#2d1b4e] transition-colors flex items-center justify-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed", __source: { fileName: "", lineNumber: 332, columnNumber: 15 }, __self: this }, downloadLoading ? /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 338, columnNumber: 19 }, __self: this }, "Creating your card...") : /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("i", { className: "fas fa-download", __source: { fileName: "", lineNumber: 341, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 342, columnNumber: 21 }, __self: this }, "Download Card"))), /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ alert("Email feature coming soon! For now, please download and send manually."); }, className: "w-full md:w-auto px-6 py-4 md:py-2 rounded-xl bg-[#461220] text-white font-crimson-text hover:bg-[#2d1b4e] transition-colors flex items-center justify-center gap-2", __source: { fileName: "", lineNumber: 346, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-envelope", __source: { fileName: "", lineNumber: 354, columnNumber: 17 }, __self: this }), "Email"))), /*#__PURE__*/ React.createElement("div", { className: "mt-8 text-center text-[#ff1a1a] font-crimson-text opacity-75", __source: { fileName: "", lineNumber: 361, columnNumber: 9 }, __self: this }, "© 2025 RADIOTOMY"))); }