function MainComponent() { const [jsonLog, setJsonLog] = React.useState(""); const [analysis, setAnalysis] = React.useState(""); const [loading, setLoading] = React.useState(false); const [error, setError] = React.useState(""); const handleAnalyze = React.useCallback(async ()=>{ if (!jsonLog.trim()) { setError("Please paste a JSON log to analyze"); return; } setLoading(true); setError(""); setAnalysis(""); try { const response = await fetch("/api/analyze", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ jsonLog: jsonLog.trim() }) }); if (!response.ok) { throw new Error(`Request failed with status ${response.status}`); } const result = await response.json(); if (result.error) { setError(result.error); } else { setAnalysis(result.analysis); } } catch (err) { console.error("Analysis error:", err); setError("Failed to analyze the JSON log. Please try again."); } finally{ setLoading(false); } }, [ jsonLog ]); const handleCopyToClipboard = React.useCallback(async ()=>{ try { await navigator.clipboard.writeText(analysis); // Could add a toast notification here } catch (err) { console.error("Failed to copy to clipboard:", err); } }, [ analysis ]); const renderMarkdown = (text)=>{ // Enhanced markdown rendering with emojis and better styling return text.split("\n").map((line, index)=>{ // Handle main headings with emojis if (line.startsWith("### ")) { const content = line.substring(4); let emoji = ""; if (content.includes("Internal Research") || content.includes("Query Fan-Out")) emoji = "🔍 "; if (content.includes("Tool Usage") || content.includes("Workflow")) emoji = "🛠️ "; if (content.includes("Structure") || content.includes("Format")) emoji = "📋 "; if (content.includes("Sourcing") || content.includes("Citation")) emoji = "📚 "; if (content.includes("SEO") || content.includes("Content Strategy")) emoji = "📈 "; if (content.includes("Executive Summary") || content.includes("Insights")) emoji = "💡 "; return /*#__PURE__*/ React.createElement("h3", { key: index, className: "text-xl font-bold text-cyan-400 mt-8 mb-4 border-b border-cyan-400/30 pb-2", __source: { fileName: "", lineNumber: 81, columnNumber: 11 }, __self: this }, emoji, content); } if (line.startsWith("## ")) { const content = line.substring(3); return /*#__PURE__*/ React.createElement("h2", { key: index, className: "text-2xl font-bold text-cyan-300 mt-10 mb-6 border-b-2 border-cyan-300/40 pb-3", __source: { fileName: "", lineNumber: 94, columnNumber: 11 }, __self: this }, content); } if (line.startsWith("# ")) { const content = line.substring(2); return /*#__PURE__*/ React.createElement("h1", { key: index, className: "text-3xl font-bold text-white mt-12 mb-8 text-center", __source: { fileName: "", lineNumber: 106, columnNumber: 11 }, __self: this }, content); } // Handle bullet points with better styling if (line.trim().startsWith("* ") || line.trim().startsWith("- ")) { const content = line.trim().substring(4); return /*#__PURE__*/ React.createElement("li", { key: index, className: "text-gray-300 ml-6 mb-3 pl-2 border-l-2 border-cyan-500/30 list-none relative", __source: { fileName: "", lineNumber: 119, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "absolute -left-4 text-cyan-400", __source: { fileName: "", lineNumber: 123, columnNumber: 13 }, __self: this }, "•"), content); } // Handle bold text with better styling if (line.includes("**")) { const parts = line.split("**"); const rendered = parts.map((part, i)=>i % 2 === 1 ? /*#__PURE__*/ React.createElement("strong", { key: i, className: "font-bold text-cyan-300 bg-cyan-900/20 px-1 rounded", __source: { fileName: "", lineNumber: 134, columnNumber: 13 }, __self: this }, part) : part); return /*#__PURE__*/ React.createElement("p", { key: index, className: "text-gray-300 mb-4 leading-relaxed", __source: { fileName: "", lineNumber: 145, columnNumber: 11 }, __self: this }, rendered); } // Regular paragraph with better spacing if (line.trim()) { return /*#__PURE__*/ React.createElement("p", { key: index, className: "text-gray-300 mb-4 leading-relaxed", __source: { fileName: "", lineNumber: 154, columnNumber: 11 }, __self: this }, line); } // Empty line return /*#__PURE__*/ React.createElement("div", { key: index, className: "mb-2", __source: { fileName: "", lineNumber: 161, columnNumber: 14 }, __self: this }); }); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gradient-to-br from-slate-900 via-blue-900 to-purple-900", __source: { fileName: "", lineNumber: 166, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto px-6 py-12 max-w-4xl", __source: { fileName: "", lineNumber: 167, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center mb-16", __source: { fileName: "", lineNumber: 169, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-5xl font-bold text-cyan-400 mb-4", __source: { fileName: "", lineNumber: 170, columnNumber: 11 }, __self: this }, "GPT DeepSearch"), /*#__PURE__*/ React.createElement("div", { className: "w-16 h-1 bg-cyan-400 mx-auto mb-6", __source: { fileName: "", lineNumber: 173, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "text-gray-300 text-lg max-w-2xl mx-auto leading-relaxed", __source: { fileName: "", lineNumber: 174, columnNumber: 11 }, __self: this }, "Analyze AI interaction logs to reveal SEO insights, query fan-out patterns, and content strategy implications")), /*#__PURE__*/ React.createElement("div", { className: "bg-slate-800/50 backdrop-blur-sm rounded-2xl p-8 mb-12 border border-slate-700/50", __source: { fileName: "", lineNumber: 181, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center mb-6", __source: { fileName: "", lineNumber: 182, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-3 h-3 bg-cyan-400 rounded-full mr-3", __source: { fileName: "", lineNumber: 183, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold text-white", __source: { fileName: "", lineNumber: 184, columnNumber: 13 }, __self: this }, "JSON Log Input")), /*#__PURE__*/ React.createElement("textarea", { value: jsonLog, onChange: (e)=>setJsonLog(e.target.value), placeholder: "Paste the full JSON log from your AI interaction here...", className: "w-full h-64 p-6 bg-slate-900/80 border border-slate-600/50 rounded-xl text-gray-100 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-cyan-400/50 focus:border-cyan-400/50 resize-none font-mono text-sm leading-relaxed", disabled: loading, __source: { fileName: "", lineNumber: 187, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex justify-end mt-6", __source: { fileName: "", lineNumber: 195, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handleAnalyze, disabled: loading || !jsonLog.trim(), className: "bg-slate-600 hover:bg-slate-500 disabled:bg-slate-700 disabled:opacity-50 text-white font-medium py-3 px-8 rounded-lg transition-all duration-200 disabled:cursor-not-allowed", __source: { fileName: "", lineNumber: 196, columnNumber: 13 }, __self: this }, loading ? /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 202, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "animate-spin rounded-full h-4 w-4 border-b-2 border-white mr-2", __source: { fileName: "", lineNumber: 203, columnNumber: 19 }, __self: this }), "Analyzing...") : "Analyze")), error && /*#__PURE__*/ React.createElement("div", { className: "mt-6 bg-red-900/30 border border-red-500/50 text-red-200 px-6 py-4 rounded-lg", __source: { fileName: "", lineNumber: 213, columnNumber: 13 }, __self: this }, error)), /*#__PURE__*/ React.createElement("div", { className: "bg-slate-800/50 backdrop-blur-sm rounded-2xl border border-slate-700/50 min-h-[400px]", __source: { fileName: "", lineNumber: 220, columnNumber: 9 }, __self: this }, loading ? /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center h-96", __source: { fileName: "", lineNumber: 222, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-16 h-16 border-4 border-cyan-400/30 border-t-cyan-400 rounded-full animate-spin mb-6", __source: { fileName: "", lineNumber: 223, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "text-gray-400 text-lg", __source: { fileName: "", lineNumber: 224, columnNumber: 15 }, __self: this }, "Processing your analysis...")) : analysis ? /*#__PURE__*/ React.createElement("div", { className: "p-8", __source: { fileName: "", lineNumber: 229, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between mb-8", __source: { fileName: "", lineNumber: 230, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 231, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-3 h-3 bg-cyan-400 rounded-full mr-3", __source: { fileName: "", lineNumber: 232, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold text-white", __source: { fileName: "", lineNumber: 233, columnNumber: 19 }, __self: this }, "Analysis Results")), /*#__PURE__*/ React.createElement("button", { onClick: handleCopyToClipboard, className: "bg-slate-700 hover:bg-slate-600 text-white px-4 py-2 rounded-lg text-sm transition-colors duration-200 flex items-center", __source: { fileName: "", lineNumber: 237, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-copy mr-2", __source: { fileName: "", lineNumber: 241, columnNumber: 19 }, __self: this }), "Copy to Clipboard")), /*#__PURE__*/ React.createElement("div", { className: "prose prose-invert max-w-none", __source: { fileName: "", lineNumber: 246, columnNumber: 15 }, __self: this }, renderMarkdown(analysis))) : /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center h-96", __source: { fileName: "", lineNumber: 251, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-16 h-16 bg-cyan-400/20 rounded-full flex items-center justify-center mb-6", __source: { fileName: "", lineNumber: 252, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-8 h-8 border-2 border-dashed border-cyan-400 rounded-full", __source: { fileName: "", lineNumber: 253, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "text-gray-400 text-lg", __source: { fileName: "", lineNumber: 255, columnNumber: 15 }, __self: this }, 'Analysis results will appear here after you click "Analyze"'))), /*#__PURE__*/ React.createElement("div", { className: "text-center mt-16", __source: { fileName: "", lineNumber: 263, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-16 h-1 bg-cyan-400 mx-auto mb-4", __source: { fileName: "", lineNumber: 264, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "text-gray-400 text-sm", __source: { fileName: "", lineNumber: 265, columnNumber: 11 }, __self: this }, "Built for SEO strategists and content creators to understand AI research patterns")))); }