function MainComponent() { const [report, setReport] = useState(""); const [clientName, setClientName] = useState(""); const [clientCompany, setClientCompany] = useState(""); const [language, setLanguage] = useState("en"); const [subject, setSubject] = useState(""); const [anomalies, setAnomalies] = useState(""); const [summary, setSummary] = useState(""); const [error, setError] = useState(""); const [loading, setLoading] = useState(false); const [streamingResponse, setStreamingResponse] = useState(""); const handleStreamResponse = useHandleStreamResponse({ onChunk: setStreamingResponse, onFinish: (message)=>{ setSummary(message); setStreamingResponse(""); } }); const generateSummary = async ()=>{ if (!report?.trim()) { setError("Please paste the report content first"); return; } if (!clientName?.trim()) { setError("Please enter the client's name"); return; } if (!clientCompany?.trim()) { setError("Please enter the client's company name"); return; } setError(""); setLoading(true); try { // Make the subject line format extremely strict with no room for variation const subjectResponse = await fetch("/integrations/chat-gpt/conversationgpt4", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: [ { role: "system", content: `You are a precise formatter that only outputs in this exact format with no deviation: Google Ads Report | Week X, 2025 | ${clientCompany} Rules: - Replace X with the week number from the report - No extra spaces before or after the | - No extra lines before or after - No other text or explanation - Exactly two pipe characters - No square brackets around the week number - Keep company name exactly as provided - Year must be 2025` }, { role: "user", content: `Format this exactly according to the rules:\n${report}` } ] }) }); if (!subjectResponse.ok) { throw new Error("Failed to generate subject line"); } const subjectData = await subjectResponse.json(); const generatedSubject = subjectData.message; setSubject(generatedSubject); const response = await fetch("/integrations/chat-gpt/conversationgpt4", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: [ { role: "system", content: `You are a Google Ads expert writing a weekly performance report email. Write in ${language === "en" ? "English" : "Italian"}. Follow this exact structure with proper line breaks: Dear ${clientName}, 1. 📊 Performance Overview Calculate and include the following metrics from the report data: • Total Spend: Sum all campaign costs (both £ and € amounts, convert to a single currency if needed) • Total Conversions: Sum all conversions across campaigns • Cost per Conversion: Calculate average CPA across all campaigns For each metric, calculate and show the week-over-week percentage change. Example format: • Total Spend: £1,234 (+5.2% vs last week) • Total Conversions: 45 (-2.1% vs last week) • Cost per Conversion: £27.42 (+7.5% vs last week) 2. 🎯 Campaign Performance Important: Keep all campaign names exactly as they appear in the report, do not translate them. Example format (keep these campaign names in their original form): • Dottore a Londra (Cost: £74.47, CPA: £8.27) • Branding (Cost: £73.24, CPA: £5.64) • PMax Gynaecologist (Cost: £61.31, CPA: £5.47) • Paediatrician London (Cost: £55.10, CPA: £27.55) • PMax Generic (Cost: £38.58, CPA: £5.51) • Ginecologo Londra (Cost: £31.05, CPA: £7.76) • Visita tricologica gratuita Uomini (Cost: €68.02, Conversions: 1, CPA: €68.02) • Visita tricologica gratuita Donne (Cost: €28.26, Conversions: 3, CPA: €9.42) • Pediatra Londra (Cost: £6.79, CPA: £0.00) 3. 💡 Key Insights Write this section in a more analytical, story-telling style. For example: "Our CPA increased to £45 this week mainly due to the dentist campaign's lower conversion rates, but the orthodontics campaign balanced things out with better performance. We're seeing the 35-44 age group converting particularly well. There's also been a shift in conversion types - more form fills coming in while calls have decreased slightly." 4. 🎯 Next Week's Focus • [Focus point 1] • [Focus point 2] ${anomalies ? `5. ⚠️ Special Notes\n${anomalies}\n\n` : ""} 6. 📎 ${language === "en" ? "I've attached the report in PDF. Please feel free to contact me for any further explanations." : "Ho allegato il report in PDF. Non esitare a contattarmi per ulteriori spiegazioni."} Best regards, Your Google Ads Manager` }, { role: "user", content: `Create a weekly performance summary email for ${clientName} at ${clientCompany}. Subject: ${generatedSubject} Report data: ${report} ${anomalies ? `Note these special circumstances: ${anomalies}` : ""}` } ], stream: true }) }); handleStreamResponse(response); } catch (err) { console.error(err); setError("Sorry, there was a problem generating the summary. Please try again."); } finally{ setLoading(false); } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-50 p-4 md:p-8", __source: { fileName: "", lineNumber: 156, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto", __source: { fileName: "", lineNumber: 157, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-xl shadow-lg p-6 mb-8", __source: { fileName: "", lineNumber: 158, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center mb-8", __source: { fileName: "", lineNumber: 159, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 161, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/52762e90-74d4-4be3-93af-1dc4ecc53bbc/-/format/auto/", alt: "UpMedico Healthcare Marketing", className: "h-12 md:h-16", __source: { fileName: "", lineNumber: 162, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("h1", { className: "text-2xl md:text-3xl font-bold text-gray-800 text-center", __source: { fileName: "", lineNumber: 168, columnNumber: 13 }, __self: this }, "Google Ads Report Generator")), /*#__PURE__*/ React.createElement("div", { className: "grid md:grid-cols-3 gap-6 mb-6", __source: { fileName: "", lineNumber: 173, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 174, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 font-medium mb-2", __source: { fileName: "", lineNumber: 175, columnNumber: 15 }, __self: this }, "Client Name"), /*#__PURE__*/ React.createElement("input", { type: "text", value: clientName, onChange: (e)=>setClientName(e.target.value), placeholder: "e.g. John Smith", className: "w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#FF4D00] focus:border-transparent transition duration-200", __source: { fileName: "", lineNumber: 178, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 186, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 font-medium mb-2", __source: { fileName: "", lineNumber: 187, columnNumber: 15 }, __self: this }, "Company Name"), /*#__PURE__*/ React.createElement("input", { type: "text", value: clientCompany, onChange: (e)=>setClientCompany(e.target.value), placeholder: "e.g. Acme Corp", className: "w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#FF4D00] focus:border-transparent transition duration-200", __source: { fileName: "", lineNumber: 190, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 198, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 font-medium mb-2", __source: { fileName: "", lineNumber: 199, columnNumber: 15 }, __self: this }, "Report Language"), /*#__PURE__*/ React.createElement("select", { value: language, onChange: (e)=>setLanguage(e.target.value), className: "w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#FF4D00] focus:border-transparent transition duration-200 bg-white", __source: { fileName: "", lineNumber: 202, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "en", __source: { fileName: "", lineNumber: 207, columnNumber: 17 }, __self: this }, "English"), /*#__PURE__*/ React.createElement("option", { value: "it", __source: { fileName: "", lineNumber: 208, columnNumber: 17 }, __self: this }, "Italian")))), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 213, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 font-medium mb-2", __source: { fileName: "", lineNumber: 214, columnNumber: 13 }, __self: this }, "Google Ads Report Data"), /*#__PURE__*/ React.createElement("textarea", { value: report, onChange: (e)=>setReport(e.target.value), placeholder: "Paste your Google Ads report data here...", className: "w-full h-48 p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition duration-200 font-mono text-sm", __source: { fileName: "", lineNumber: 217, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 225, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center mb-2", __source: { fileName: "", lineNumber: 226, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-8 h-8 bg-yellow-50 rounded-full flex items-center justify-center mr-2", __source: { fileName: "", lineNumber: 227, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-xl", __source: { fileName: "", lineNumber: 228, columnNumber: 17 }, __self: this }, "⚠️")), /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 font-medium", __source: { fileName: "", lineNumber: 230, columnNumber: 15 }, __self: this }, "Special Circumstances", /*#__PURE__*/ React.createElement("span", { className: "ml-2 text-sm text-blue-600 font-normal", __source: { fileName: "", lineNumber: 232, columnNumber: 17 }, __self: this }, "(optional)"))), /*#__PURE__*/ React.createElement("textarea", { value: anomalies, onChange: (e)=>setAnomalies(e.target.value), placeholder: "• Budget increased from £500 to £1,000 on June 15th • Website maintenance on June 16th (2 hours downtime) • New landing page launched for Campaign X", className: "w-full h-24 p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition duration-200", __source: { fileName: "", lineNumber: 237, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex justify-end", __source: { fileName: "", lineNumber: 245, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: generateSummary, disabled: loading || !report?.trim() || !clientName?.trim() || !clientCompany?.trim(), className: "px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:bg-gray-400 disabled:cursor-not-allowed transition duration-200 flex items-center", __source: { fileName: "", lineNumber: 246, columnNumber: 13 }, __self: this }, loading ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("svg", { className: "animate-spin -ml-1 mr-3 h-5 w-5 text-white", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", __source: { fileName: "", lineNumber: 258, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4", __source: { fileName: "", lineNumber: 264, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z", __source: { fileName: "", lineNumber: 272, columnNumber: 21 }, __self: this })), "Creating Your Email...") : /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("span", { className: "mr-2", __source: { fileName: "", lineNumber: 282, columnNumber: 19 }, __self: this }, "✨"), "Generate Friendly Email"))), error && /*#__PURE__*/ React.createElement("div", { className: "mt-4 p-4 bg-red-50 border border-red-200 rounded-lg flex items-center", __source: { fileName: "", lineNumber: 290, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-red-600 text-sm", __source: { fileName: "", lineNumber: 291, columnNumber: 15 }, __self: this }, error))), (streamingResponse || summary) && /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-xl shadow-lg p-6 mb-8", __source: { fileName: "", lineNumber: 297, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-6", __source: { fileName: "", lineNumber: 298, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 299, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-8 h-8 bg-green-50 rounded-full flex items-center justify-center mr-3", __source: { fileName: "", lineNumber: 300, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-xl", __source: { fileName: "", lineNumber: 301, columnNumber: 19 }, __self: this }, "📧")), /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold text-gray-800", __source: { fileName: "", lineNumber: 303, columnNumber: 17 }, __self: this }, "Your Client-Friendly Email"))), /*#__PURE__*/ React.createElement("div", { className: "prose max-w-none", __source: { fileName: "", lineNumber: 308, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-gray-100 p-4 rounded-lg mb-4", __source: { fileName: "", lineNumber: 309, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center", __source: { fileName: "", lineNumber: 310, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-medium", __source: { fileName: "", lineNumber: 311, columnNumber: 19 }, __self: this }, "Subject: ", subject), /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ navigator.clipboard.writeText(subject); }, className: "px-4 py-2 bg-white text-gray-700 rounded-lg hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-gray-300 transition duration-200 flex items-center text-sm", __source: { fileName: "", lineNumber: 312, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "mr-2", __source: { fileName: "", lineNumber: 318, columnNumber: 21 }, __self: this }, "📋"), "Copy Subject"))), /*#__PURE__*/ React.createElement("div", { className: "whitespace-pre-wrap font-mono bg-gray-50 p-6 rounded-lg border border-gray-100", __source: { fileName: "", lineNumber: 323, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-end mb-4", __source: { fileName: "", lineNumber: 324, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ navigator.clipboard.writeText(streamingResponse || summary); }, className: "px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-300 transition duration-200 flex items-center text-sm", __source: { fileName: "", lineNumber: 325, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "mr-2", __source: { fileName: "", lineNumber: 333, columnNumber: 21 }, __self: this }, "📋"), "Copy Email Body")), streamingResponse || summary))))); }