function MainComponent() { const [landingPage, setLandingPage] = useState(""); const [location, setLocation] = useState(""); const [searchTerms, setSearchTerms] = useState(""); const [results, setResults] = useState(null); const [loading, setLoading] = useState(false); const [error, setError] = useState(""); const [streamingMessage, setStreamingMessage] = useState(""); const handleStreamResponse = useHandleStreamResponse({ onChunk: setStreamingMessage, onFinish: (message)=>{ try { const parsedResults = JSON.parse(message); setResults(parsedResults); setStreamingMessage(""); setLoading(false); } catch (e) { setError("Failed to parse analysis results"); setLoading(false); } } }); const analyzeSearchTerms = async ()=>{ if (!landingPage || !location || !searchTerms) { setError("Please fill in all fields"); return; } const terms = searchTerms.split("\n").filter((term)=>term.trim()); if (terms.length > 100) { setError("Please enter no more than 100 search terms"); return; } setLoading(true); setError(""); setResults(null); try { const response = await fetch("/integrations/chat-gpt/conversationgpt4", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: [ { role: "system", content: "You are an expert in medical procedures, terminology, and Google Ads analysis. Analyze the provided search terms in the context of the landing page and location." }, { role: "user", content: `Please analyze these search terms for a medical campaign: Landing Page: ${landingPage} Location: ${location} Search Terms: ${terms.join(", ")} For each term, provide: 1. Search Intent (Informational/Navigational/Commercial/Transactional) 2. Relevance percentage to the advertised service 3. Explanation of the relevance 4. Negative keyword recommendation (None/Broad/Phrase/Exact)` } ], json_schema: { name: "search_term_analysis", schema: { type: "object", properties: { analysis: { type: "array", items: { type: "object", properties: { searchTerm: { type: "string" }, intent: { type: "string", enum: [ "Informational", "Navigational", "Commercial", "Transactional" ] }, relevancePercentage: { type: "number" }, relevanceExplanation: { type: "string" }, negativeKeywordRecommendation: { type: "string", enum: [ "None", "Broad", "Phrase", "Exact" ] } }, required: [ "searchTerm", "intent", "relevancePercentage", "relevanceExplanation", "negativeKeywordRecommendation" ], additionalProperties: false } } }, required: [ "analysis" ], additionalProperties: false } }, stream: true }) }); handleStreamResponse(response); } catch (err) { setError("Failed to analyze search terms"); setLoading(false); } }; const getRelevanceColor = (percentage)=>{ if (percentage < 25) return "text-red-500"; if (percentage < 75) return "text-orange-500"; return "text-green-500"; }; const getNegativeKeywordColor = (recommendation)=>{ return recommendation === "None" ? "text-green-500" : "text-red-500"; }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-50 p-8", __source: { fileName: "", lineNumber: 130, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-6xl mx-auto", __source: { fileName: "", lineNumber: 131, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between mb-8", __source: { fileName: "", lineNumber: 132, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/77adf552-91ba-4976-80d5-daa8f4069410/-/format/auto/", alt: "UpMedico Healthcare Marketing Logo", className: "h-16", __source: { fileName: "", lineNumber: 133, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold mb-8 text-gray-800", __source: { fileName: "", lineNumber: 140, columnNumber: 9 }, __self: this }, "Medical Campaign Search Term Analyzer"), /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow p-6 mb-8", __source: { fileName: "", lineNumber: 144, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 145, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 font-medium mb-2", __source: { fileName: "", lineNumber: 146, columnNumber: 13 }, __self: this }, "Landing Page URL"), /*#__PURE__*/ React.createElement("input", { type: "text", value: landingPage, onChange: (e)=>setLandingPage(e.target.value), className: "w-full p-2 border rounded", placeholder: "Paste your landing page URL", name: "landingPage", __source: { fileName: "", lineNumber: 149, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 159, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 font-medium mb-2", __source: { fileName: "", lineNumber: 160, columnNumber: 13 }, __self: this }, "Location"), /*#__PURE__*/ React.createElement("input", { type: "text", value: location, onChange: (e)=>setLocation(e.target.value), className: "w-full p-2 border rounded", placeholder: "Enter location", name: "location", __source: { fileName: "", lineNumber: 163, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 173, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 font-medium mb-2", __source: { fileName: "", lineNumber: 174, columnNumber: 13 }, __self: this }, "Search Terms (One per line, max 100)"), /*#__PURE__*/ React.createElement("textarea", { value: searchTerms, onChange: (e)=>setSearchTerms(e.target.value), className: "w-full p-2 border rounded h-40", placeholder: "Enter search terms (one per line)", name: "searchTerms", __source: { fileName: "", lineNumber: 177, columnNumber: 13 }, __self: this })), error && /*#__PURE__*/ React.createElement("div", { className: "mb-6 p-4 bg-red-100 text-red-700 rounded", __source: { fileName: "", lineNumber: 187, columnNumber: 13 }, __self: this }, error), /*#__PURE__*/ React.createElement("button", { onClick: analyzeSearchTerms, disabled: loading, className: "bg-blue-600 text-white px-6 py-2 rounded hover:bg-blue-700 disabled:bg-blue-300", __source: { fileName: "", lineNumber: 192, columnNumber: 11 }, __self: this }, loading ? "Analyzing..." : "Analyze Search Terms")), loading && streamingMessage && /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow p-6 mb-8", __source: { fileName: "", lineNumber: 202, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "animate-pulse", __source: { fileName: "", lineNumber: 203, columnNumber: 13 }, __self: this }, "Analyzing... Please wait...")), results && results.analysis && /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow overflow-x-auto", __source: { fileName: "", lineNumber: 208, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("table", { className: "min-w-full", __source: { fileName: "", lineNumber: 209, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { __source: { fileName: "", lineNumber: 210, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { className: "bg-gray-50", __source: { fileName: "", lineNumber: 211, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("th", { className: "px-6 py-3 text-left text-gray-700 font-medium", __source: { fileName: "", lineNumber: 212, columnNumber: 19 }, __self: this }, "Search Term"), /*#__PURE__*/ React.createElement("th", { className: "px-6 py-3 text-left text-gray-700 font-medium", __source: { fileName: "", lineNumber: 215, columnNumber: 19 }, __self: this }, "Intent"), /*#__PURE__*/ React.createElement("th", { className: "px-6 py-3 text-left text-gray-700 font-medium", __source: { fileName: "", lineNumber: 218, columnNumber: 19 }, __self: this }, "Relevance"), /*#__PURE__*/ React.createElement("th", { className: "px-6 py-3 text-left text-gray-700 font-medium", __source: { fileName: "", lineNumber: 221, columnNumber: 19 }, __self: this }, "Explanation"), /*#__PURE__*/ React.createElement("th", { className: "px-6 py-3 text-left text-gray-700 font-medium", __source: { fileName: "", lineNumber: 224, columnNumber: 19 }, __self: this }, "Negative Keyword"))), /*#__PURE__*/ React.createElement("tbody", { __source: { fileName: "", lineNumber: 229, columnNumber: 15 }, __self: this }, results.analysis.map((item, index)=>/*#__PURE__*/ React.createElement("tr", { key: index, className: "border-t", __source: { fileName: "", lineNumber: 231, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "px-6 py-4", __source: { fileName: "", lineNumber: 232, columnNumber: 21 }, __self: this }, item.searchTerm), /*#__PURE__*/ React.createElement("td", { className: "px-6 py-4", __source: { fileName: "", lineNumber: 233, columnNumber: 21 }, __self: this }, item.intent), /*#__PURE__*/ React.createElement("td", { className: `px-6 py-4 ${getRelevanceColor(item.relevancePercentage)}`, __source: { fileName: "", lineNumber: 234, columnNumber: 21 }, __self: this }, item.relevancePercentage, "%"), /*#__PURE__*/ React.createElement("td", { className: "px-6 py-4", __source: { fileName: "", lineNumber: 239, columnNumber: 21 }, __self: this }, item.relevanceExplanation), /*#__PURE__*/ React.createElement("td", { className: `px-6 py-4 ${getNegativeKeywordColor(item.negativeKeywordRecommendation)}`, __source: { fileName: "", lineNumber: 240, columnNumber: 21 }, __self: this }, item.negativeKeywordRecommendation)))))))); }