function MainComponent() { const [title, setTitle] = useState(''); const [outline, setOutline] = useState(''); const [keywords, setKeywords] = useState(''); const [blogPost, setBlogPost] = useState(''); const [searchResults, setSearchResults] = useState([]); const [isGenerating, setIsGenerating] = useState(false); const [isSearching, setIsSearching] = useState(false); const [showResults, setShowResults] = useState(false); const [error, setError] = useState(null); const [streamingResponse, setStreamingResponse] = useState(''); const [activeTab, setActiveTab] = useState('post'); const [aeoAnalysis, setAeoAnalysis] = useState(null); const [geoAnalysis, setGeoAnalysis] = useState(null); const [isAnalyzingAEO, setIsAnalyzingAEO] = useState(false); const [isAnalyzingGEO, setIsAnalyzingGEO] = useState(false); const handleStreamResponse = useHandleStreamResponse({ onChunk: setStreamingResponse, onFinish: (message)=>{ setBlogPost(message); setStreamingResponse(''); setIsGenerating(false); } }); const generatePost = async ()=>{ if (!title || !outline || !keywords) { setError('Please fill in all fields'); return; } setError(null); setIsGenerating(true); setBlogPost(''); try { const response = await fetch('/integrations/anthropic-claude-sonnet-3-5/', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { role: 'user', content: `Write an SEO-optimized blog post with the following parameters: Title: ${title} Target Keywords: ${keywords} Outline/Notes: ${outline} Please write a comprehensive, engaging post that naturally incorporates the keywords while maintaining high-quality content.` } ], stream: true }) }); handleStreamResponse(response); } catch (err) { setError('Failed to generate blog post'); setIsGenerating(false); } }; const analyzeForAnswerEngines = async ()=>{ if (!blogPost) { setError('Please generate a blog post first'); return; } setIsAnalyzingAEO(true); 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: `Analyze this blog post for Answer Engine Optimization and provide specific suggestions: ${blogPost} Focus on: 1. Question-answer patterns 2. Featured snippet optimization 3. FAQ section recommendations 4. Structured data opportunities 5. Heading hierarchy` } ], json_schema: { name: "aeo_analysis", schema: { type: "object", properties: { question_answer_patterns: { type: "array", items: { type: "string" } }, featured_snippets: { type: "array", items: { type: "string" } }, faq_recommendations: { type: "array", items: { type: "string" } }, structured_data: { type: "array", items: { type: "string" } }, heading_hierarchy: { type: "array", items: { type: "string" } } }, required: [ "question_answer_patterns", "featured_snippets", "faq_recommendations", "structured_data", "heading_hierarchy" ], additionalProperties: false } } }) }); const data = await response.json(); setAeoAnalysis(JSON.parse(data.choices[0].message.content)); setActiveTab('aeo'); } catch (err) { setError('Failed to analyze for answer engines'); } finally{ setIsAnalyzingAEO(false); } }; const analyzeForAIGeneration = async ()=>{ if (!blogPost) { setError('Please generate a blog post first'); return; } setIsAnalyzingGEO(true); 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: `Analyze this blog post for Generative Engine Optimization and provide specific suggestions: ${blogPost} Focus on: 1. Citation opportunities 2. Factual consistency 3. Knowledge graph alignment 4. Source credibility 5. AI-friendly formatting` } ], json_schema: { name: "geo_analysis", schema: { type: "object", properties: { citations: { type: "array", items: { type: "string" } }, factual_consistency: { type: "array", items: { type: "string" } }, knowledge_graph: { type: "array", items: { type: "string" } }, source_credibility: { type: "array", items: { type: "string" } }, ai_formatting: { type: "array", items: { type: "string" } } }, required: [ "citations", "factual_consistency", "knowledge_graph", "source_credibility", "ai_formatting" ], additionalProperties: false } } }) }); const data = await response.json(); setGeoAnalysis(JSON.parse(data.choices[0].message.content)); setActiveTab('geo'); } catch (err) { setError('Failed to analyze for AI generation'); } finally{ setIsAnalyzingGEO(false); } }; const handleApplyChange = (type, category, index)=>{ console.log(`Applying ${type} change for ${category} at index ${index}`); }; const checkSearchResults = async ()=>{ if (!title) { setError('Please enter a title to check search results'); return; } setError(null); setIsSearching(true); try { const response = await fetch(`/integrations/google-search/search?q=${encodeURIComponent(title)}`); const data = await response.json(); setSearchResults(data.items || []); setShowResults(true); } catch (err) { setError('Failed to fetch search results'); } finally{ setIsSearching(false); } }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col md:flex-row min-h-screen bg-gray-50 dark:bg-gray-900", __source: { fileName: "", lineNumber: 227, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full md:w-1/3 p-6 bg-white dark:bg-gray-800 border-r border-gray-200 dark:border-gray-700", __source: { fileName: "", lineNumber: 228, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "space-y-6", __source: { fileName: "", lineNumber: 229, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 230, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-900 dark:text-gray-100 mb-2", __source: { fileName: "", lineNumber: 231, columnNumber: 13 }, __self: this }, "Blog Title"), /*#__PURE__*/ React.createElement("input", { type: "text", value: title, onChange: (e)=>setTitle(e.target.value), className: "w-full p-3 border border-gray-200 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100", placeholder: "Enter blog title", __source: { fileName: "", lineNumber: 234, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 243, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-900 dark:text-gray-100 mb-2", __source: { fileName: "", lineNumber: 244, columnNumber: 13 }, __self: this }, "Outline/Notes"), /*#__PURE__*/ React.createElement("textarea", { value: outline, onChange: (e)=>setOutline(e.target.value), className: "w-full p-3 border border-gray-200 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 h-40", placeholder: "Enter outline or notes", __source: { fileName: "", lineNumber: 247, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 255, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-900 dark:text-gray-100 mb-2", __source: { fileName: "", lineNumber: 256, columnNumber: 13 }, __self: this }, "Keywords"), /*#__PURE__*/ React.createElement("input", { type: "text", value: keywords, onChange: (e)=>setKeywords(e.target.value), className: "w-full p-3 border border-gray-200 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100", placeholder: "Enter target keywords", __source: { fileName: "", lineNumber: 259, columnNumber: 13 }, __self: this })), error && /*#__PURE__*/ React.createElement("div", { className: "text-red-500 text-sm", __source: { fileName: "", lineNumber: 269, columnNumber: 13 }, __self: this }, error), /*#__PURE__*/ React.createElement("div", { className: "space-y-3", __source: { fileName: "", lineNumber: 272, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: generatePost, disabled: isGenerating, className: "w-full py-3 px-4 bg-gray-900 hover:bg-gray-800 text-white rounded-md flex items-center justify-center", __source: { fileName: "", lineNumber: 273, columnNumber: 13 }, __self: this }, isGenerating ? /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin mr-2", __source: { fileName: "", lineNumber: 279, columnNumber: 17 }, __self: this }) : 'Generate Post'), /*#__PURE__*/ React.createElement("button", { onClick: checkSearchResults, disabled: isSearching, className: "w-full py-3 px-4 border border-gray-200 dark:border-gray-700 hover:bg-gray-900 hover:text-white rounded-md flex items-center justify-center", __source: { fileName: "", lineNumber: 285, columnNumber: 13 }, __self: this }, isSearching ? /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin mr-2", __source: { fileName: "", lineNumber: 291, columnNumber: 17 }, __self: this }) : 'Check Search Results'), /*#__PURE__*/ React.createElement("button", { onClick: analyzeForAnswerEngines, disabled: isAnalyzingAEO || !blogPost, className: "w-full py-3 px-4 border border-gray-200 dark:border-gray-700 hover:bg-gray-900 hover:text-white rounded-md flex items-center justify-center", __source: { fileName: "", lineNumber: 297, columnNumber: 13 }, __self: this }, isAnalyzingAEO ? /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin mr-2", __source: { fileName: "", lineNumber: 303, columnNumber: 17 }, __self: this }) : 'Optimize for Answer Engines'), /*#__PURE__*/ React.createElement("button", { onClick: analyzeForAIGeneration, disabled: isAnalyzingGEO || !blogPost, className: "w-full py-3 px-4 border border-gray-200 dark:border-gray-700 hover:bg-gray-900 hover:text-white rounded-md flex items-center justify-center", __source: { fileName: "", lineNumber: 309, columnNumber: 13 }, __self: this }, isAnalyzingGEO ? /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin mr-2", __source: { fileName: "", lineNumber: 315, columnNumber: 17 }, __self: this }) : 'Optimize for AI Generation')))), /*#__PURE__*/ React.createElement("div", { className: "w-full md:w-2/3 p-6 bg-white dark:bg-gray-800", __source: { fileName: "", lineNumber: 324, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex space-x-4 mb-6 border-b border-gray-200 dark:border-gray-700", __source: { fileName: "", lineNumber: 325, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setActiveTab('post'), className: `pb-4 px-4 ${activeTab === 'post' ? 'border-b-2 border-gray-900 dark:border-white text-gray-900 dark:text-white' : 'text-gray-500 dark:text-gray-400'}`, __source: { fileName: "", lineNumber: 326, columnNumber: 11 }, __self: this }, "Generated Post"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setActiveTab('aeo'), className: `pb-4 px-4 ${activeTab === 'aeo' ? 'border-b-2 border-gray-900 dark:border-white text-gray-900 dark:text-white' : 'text-gray-500 dark:text-gray-400'}`, __source: { fileName: "", lineNumber: 332, columnNumber: 11 }, __self: this }, "AEO Analysis"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setActiveTab('geo'), className: `pb-4 px-4 ${activeTab === 'geo' ? 'border-b-2 border-gray-900 dark:border-white text-gray-900 dark:text-white' : 'text-gray-500 dark:text-gray-400'}`, __source: { fileName: "", lineNumber: 338, columnNumber: 11 }, __self: this }, "GEO Analysis"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setActiveTab('search'), className: `pb-4 px-4 ${activeTab === 'search' ? 'border-b-2 border-gray-900 dark:border-white text-gray-900 dark:text-white' : 'text-gray-500 dark:text-gray-400'}`, __source: { fileName: "", lineNumber: 344, columnNumber: 11 }, __self: this }, "Search Results")), activeTab === 'post' && /*#__PURE__*/ React.createElement("div", { className: "prose dark:prose-invert max-w-none", __source: { fileName: "", lineNumber: 353, columnNumber: 11 }, __self: this }, isGenerating ? /*#__PURE__*/ React.createElement("div", { className: "animate-pulse space-y-4", __source: { fileName: "", lineNumber: 355, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "h-4 bg-gray-200 dark:bg-gray-700 rounded w-3/4", __source: { fileName: "", lineNumber: 356, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "h-4 bg-gray-200 dark:bg-gray-700 rounded", __source: { fileName: "", lineNumber: 357, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "h-4 bg-gray-200 dark:bg-gray-700 rounded", __source: { fileName: "", lineNumber: 358, columnNumber: 17 }, __self: this })) : streamingResponse ? /*#__PURE__*/ React.createElement("div", { className: "whitespace-pre-wrap", __source: { fileName: "", lineNumber: 361, columnNumber: 15 }, __self: this }, streamingResponse) : blogPost ? /*#__PURE__*/ React.createElement("div", { className: "whitespace-pre-wrap", __source: { fileName: "", lineNumber: 363, columnNumber: 15 }, __self: this }, blogPost) : /*#__PURE__*/ React.createElement("div", { className: "text-center text-gray-500 dark:text-gray-400", __source: { fileName: "", lineNumber: 365, columnNumber: 15 }, __self: this }, "Generated content will appear here")), activeTab === 'aeo' && /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 373, columnNumber: 11 }, __self: this }, isAnalyzingAEO ? /*#__PURE__*/ React.createElement("div", { className: "animate-pulse space-y-4", __source: { fileName: "", lineNumber: 375, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "h-4 bg-gray-200 dark:bg-gray-700 rounded w-3/4", __source: { fileName: "", lineNumber: 376, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "h-4 bg-gray-200 dark:bg-gray-700 rounded", __source: { fileName: "", lineNumber: 377, columnNumber: 17 }, __self: this })) : aeoAnalysis ? /*#__PURE__*/ React.createElement("div", { className: "space-y-6", __source: { fileName: "", lineNumber: 380, columnNumber: 15 }, __self: this }, Object.entries(aeoAnalysis).map(([category, suggestions])=>/*#__PURE__*/ React.createElement("div", { key: category, className: "border border-gray-200 dark:border-gray-700 rounded-lg p-4", __source: { fileName: "", lineNumber: 382, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-medium mb-3 capitalize", __source: { fileName: "", lineNumber: 383, columnNumber: 21 }, __self: this }, category.replace('_', ' ')), /*#__PURE__*/ React.createElement("ul", { className: "space-y-2", __source: { fileName: "", lineNumber: 384, columnNumber: 21 }, __self: this }, suggestions.map((suggestion, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "flex items-start space-x-2", __source: { fileName: "", lineNumber: 386, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", className: "mt-1", onChange: ()=>handleApplyChange('aeo', category, index), __source: { fileName: "", lineNumber: 387, columnNumber: 27 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 392, columnNumber: 27 }, __self: this }, suggestion))))))) : /*#__PURE__*/ React.createElement("div", { className: "text-center text-gray-500 dark:text-gray-400", __source: { fileName: "", lineNumber: 400, columnNumber: 15 }, __self: this }, "Run AEO analysis to see suggestions")), activeTab === 'geo' && /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 408, columnNumber: 11 }, __self: this }, isAnalyzingGEO ? /*#__PURE__*/ React.createElement("div", { className: "animate-pulse space-y-4", __source: { fileName: "", lineNumber: 410, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "h-4 bg-gray-200 dark:bg-gray-700 rounded w-3/4", __source: { fileName: "", lineNumber: 411, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "h-4 bg-gray-200 dark:bg-gray-700 rounded", __source: { fileName: "", lineNumber: 412, columnNumber: 17 }, __self: this })) : geoAnalysis ? /*#__PURE__*/ React.createElement("div", { className: "space-y-6", __source: { fileName: "", lineNumber: 415, columnNumber: 15 }, __self: this }, Object.entries(geoAnalysis).map(([category, suggestions])=>/*#__PURE__*/ React.createElement("div", { key: category, className: "border border-gray-200 dark:border-gray-700 rounded-lg p-4", __source: { fileName: "", lineNumber: 417, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-medium mb-3 capitalize", __source: { fileName: "", lineNumber: 418, columnNumber: 21 }, __self: this }, category.replace('_', ' ')), /*#__PURE__*/ React.createElement("ul", { className: "space-y-2", __source: { fileName: "", lineNumber: 419, columnNumber: 21 }, __self: this }, suggestions.map((suggestion, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "flex items-start space-x-2", __source: { fileName: "", lineNumber: 421, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", className: "mt-1", onChange: ()=>handleApplyChange('geo', category, index), __source: { fileName: "", lineNumber: 422, columnNumber: 27 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 427, columnNumber: 27 }, __self: this }, suggestion))))))) : /*#__PURE__*/ React.createElement("div", { className: "text-center text-gray-500 dark:text-gray-400", __source: { fileName: "", lineNumber: 435, columnNumber: 15 }, __self: this }, "Run GEO analysis to see suggestions")), activeTab === 'search' && /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 443, columnNumber: 11 }, __self: this }, searchResults.map((result, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "p-4 border border-gray-200 dark:border-gray-700 rounded-lg", __source: { fileName: "", lineNumber: 445, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: result.link, target: "_blank", rel: "noopener noreferrer", className: "text-blue-600 dark:text-blue-400 hover:underline font-medium", __source: { fileName: "", lineNumber: 446, columnNumber: 17 }, __self: this }, result.title), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-600 dark:text-gray-300 mt-1", __source: { fileName: "", lineNumber: 454, columnNumber: 17 }, __self: this }, result.snippet)))))); }