function BlogOutput({ isLoading, title, content, author, date }) { return /*#__PURE__*/ React.createElement("div", { className: "max-w-3xl mx-auto px-4 py-8", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, isLoading ? /*#__PURE__*/ React.createElement("div", { className: "animate-pulse", __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "h-8 bg-gray-200 rounded w-3/4 mb-6", __source: { fileName: "", lineNumber: 6, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "h-4 bg-gray-200 rounded w-1/4 mb-8", __source: { fileName: "", lineNumber: 7, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 8, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "h-4 bg-gray-200 rounded w-full", __source: { fileName: "", lineNumber: 9, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "h-4 bg-gray-200 rounded w-full", __source: { fileName: "", lineNumber: 10, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "h-4 bg-gray-200 rounded w-3/4", __source: { fileName: "", lineNumber: 11, columnNumber: 13 }, __self: this }))) : /*#__PURE__*/ React.createElement("article", { className: "prose lg:prose-xl", __source: { fileName: "", lineNumber: 15, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-crimson-text text-4xl mb-4 font-bold text-gray-900", __source: { fileName: "", lineNumber: 16, columnNumber: 11 }, __self: this }, title), /*#__PURE__*/ React.createElement("div", { className: "flex items-center text-gray-600 text-sm mb-8", __source: { fileName: "", lineNumber: 20, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-crimson-text", __source: { fileName: "", lineNumber: 21, columnNumber: 13 }, __self: this }, author), /*#__PURE__*/ React.createElement("span", { className: "mx-2", __source: { fileName: "", lineNumber: 22, columnNumber: 13 }, __self: this }, "•"), /*#__PURE__*/ React.createElement("time", { className: "font-crimson-text", __source: { fileName: "", lineNumber: 23, columnNumber: 13 }, __self: this }, date)), /*#__PURE__*/ React.createElement("div", { className: "font-crimson-text leading-relaxed text-gray-700 whitespace-pre-wrap", __source: { fileName: "", lineNumber: 26, columnNumber: 11 }, __self: this }, content))); } function BlogOutputStory() { const samplePost = { title: "The Art of Modern Architecture", author: "Jane Smith", date: "January 15, 2024", content: `Modern architecture is characterized by its emphasis on function, simplicity, and clean lines. The movement began in the early 20th century and continues to influence design today. Buildings of this style typically feature minimal ornamentation, open floor plans, and large windows that blur the line between indoor and outdoor spaces. Materials like steel, glass, and concrete take center stage, celebrating their natural properties rather than disguising them behind decorative elements.` }; return /*#__PURE__*/ React.createElement("div", { className: "space-y-12", __source: { fileName: "", lineNumber: 48, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(BlogOutput, { isLoading: true, __source: { fileName: "", lineNumber: 49, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(BlogOutput, { ...samplePost, __source: { fileName: "", lineNumber: 50, columnNumber: 7 }, __self: this })); } function BlogForm({ onSubmit }) { const [formData, setFormData] = useState({ title: "", notes: "", keywords: "" }); const handleSubmit = (e)=>{ e.preventDefault(); onSubmit?.(formData); }; const handleChange = (e)=>{ setFormData((prev)=>({ ...prev, [e.target.name]: e.target.value })); }; return /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "max-w-lg mx-auto p-6 space-y-4", __source: { fileName: "", lineNumber: 21, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 22, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "title", value: formData.title, onChange: handleChange, placeholder: "Title", className: "w-full px-4 py-2 rounded-lg border bg-white/5 backdrop-blur-sm border-gray-300 focus:border-blue-500 focus:ring-1 focus:ring-blue-500 shadow-inner bg-gradient-to-b from-white/10 to-white/5", __source: { fileName: "", lineNumber: 23, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 33, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { name: "notes", value: formData.notes, onChange: handleChange, placeholder: "Outline notes...", rows: "4", className: "w-full px-4 py-2 rounded-lg border bg-white/5 backdrop-blur-sm border-gray-300 focus:border-blue-500 focus:ring-1 focus:ring-blue-500 shadow-inner bg-gradient-to-b from-white/10 to-white/5", __source: { fileName: "", lineNumber: 34, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 44, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "keywords", value: formData.keywords, onChange: handleChange, placeholder: "Keywords (comma separated)", className: "w-full px-4 py-2 rounded-lg border bg-white/5 backdrop-blur-sm border-gray-300 focus:border-blue-500 focus:ring-1 focus:ring-blue-500 shadow-inner bg-gradient-to-b from-white/10 to-white/5", __source: { fileName: "", lineNumber: 45, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "inline-block px-6 py-2 rounded-lg bg-gradient-to-b from-gray-700 to-gray-800 text-white hover:from-gray-600 hover:to-gray-700 transition-colors duration-200", __source: { fileName: "", lineNumber: 55, columnNumber: 7 }, __self: this }, "Submit")); } function BlogFormStory() { const handleSubmit = (data)=>{ console.log(data); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-50 p-8", __source: { fileName: "", lineNumber: 71, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(BlogForm, { onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 72, columnNumber: 7 }, __self: this })); } function SearchResults({ searchResults = [], onSearch = ()=>{}, loading = false, expanded = true }) { const [isExpanded, setIsExpanded] = useState(expanded); const [searchTerm, setSearchTerm] = useState(""); return /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-2xl mx-auto p-4 bg-white rounded-lg shadow", __source: { fileName: "", lineNumber: 11, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex gap-2 mb-4", __source: { fileName: "", lineNumber: 12, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", value: searchTerm, onChange: (e)=>setSearchTerm(e.target.value), className: "flex-1 px-4 py-2 border rounded-lg", placeholder: "Search...", name: "search", __source: { fileName: "", lineNumber: 13, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: ()=>onSearch(searchTerm), className: "px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600", disabled: loading, __source: { fileName: "", lineNumber: 21, columnNumber: 9 }, __self: this }, loading ? /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin", __source: { fileName: "", lineNumber: 27, columnNumber: 13 }, __self: this }) : /*#__PURE__*/ React.createElement("i", { className: "fas fa-sync-alt", __source: { fileName: "", lineNumber: 29, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "border rounded-lg", __source: { fileName: "", lineNumber: 34, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setIsExpanded(!isExpanded), className: "w-full p-4 text-left flex justify-between items-center bg-gray-50 rounded-t-lg", __source: { fileName: "", lineNumber: 35, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-semibold", __source: { fileName: "", lineNumber: 39, columnNumber: 11 }, __self: this }, "Search Results (", searchResults.length, ")"), /*#__PURE__*/ React.createElement("i", { className: `fas fa-chevron-${isExpanded ? "up" : "down"}`, __source: { fileName: "", lineNumber: 42, columnNumber: 11 }, __self: this })), isExpanded && /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 46, columnNumber: 11 }, __self: this }, searchResults.length === 0 ? /*#__PURE__*/ React.createElement("p", { className: "text-gray-500", __source: { fileName: "", lineNumber: 48, columnNumber: 15 }, __self: this }, "No results found") : /*#__PURE__*/ React.createElement("ul", { className: "divide-y", __source: { fileName: "", lineNumber: 50, columnNumber: 15 }, __self: this }, searchResults.slice(0, 10).map((result, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "py-4", __source: { fileName: "", lineNumber: 52, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-medium mb-1", __source: { fileName: "", lineNumber: 53, columnNumber: 21 }, __self: this }, result.title), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 text-sm", __source: { fileName: "", lineNumber: 54, columnNumber: 21 }, __self: this }, result.snippet))))))); } function SearchResultsStory() { const [results, setResults] = useState([]); const [loading, setLoading] = useState(false); const mockSearch = async (term)=>{ setLoading(true); await new Promise((resolve)=>setTimeout(resolve, 1000)); setResults([ { title: "Sample Result 1", snippet: "This is a sample search result snippet..." }, { title: "Sample Result 2", snippet: "Another example of a search result..." }, { title: "Sample Result 3", snippet: "Yet another search result example..." } ]); setLoading(false); }; return /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 91, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(SearchResults, { searchResults: results, onSearch: mockSearch, loading: loading, expanded: true, __source: { fileName: "", lineNumber: 92, columnNumber: 7 }, __self: this })); } function MainComponent() { const [blogTitle, setBlogTitle] = useState(""); const [outline, setOutline] = useState(""); const [keywords, setKeywords] = useState(""); const [isStreaming, setIsStreaming] = useState(false); const [content, setContent] = useState(""); const [searchResults, setSearchResults] = useState([]); const [streamingContent, setStreamingContent] = useState(""); const handleStreamResponse = useHandleStreamResponse({ onChunk: setStreamingContent, onFinish: (message)=>{ setContent(message); setStreamingContent(""); setIsStreaming(false); } }); useEffect(()=>{ if (blogTitle.trim()) { fetch(`/integrations/google-search/search?q=${encodeURIComponent(blogTitle)}`).then((response)=>response.json()).then((data)=>{ if (data.items) { setSearchResults(data.items.slice(0, 10)); } }).catch((error)=>console.error("Search error:", error)); } else { setSearchResults([]); } }, [ blogTitle ]); const generateBlog = async (formData)=>{ setBlogTitle(formData.title); setIsStreaming(true); setContent(""); setStreamingContent(""); const prompt = `Write an SEO-optimized blog post about "${formData.title}". Consider these outline points: ${formData.notes}. Target these keywords: ${formData.keywords}. Make it engaging, well-structured, and naturally incorporate the keywords. Include a meta description at the beginning.`; 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: prompt } ], stream: true }) }); handleStreamResponse(response); } catch (error) { console.error("Generation error:", error); setIsStreaming(false); } }; const handleSearch = async (searchTerm)=>{ if (!searchTerm.trim()) return; try { const response = await fetch(`/integrations/google-search/search?q=${encodeURIComponent(searchTerm)}`); const data = await response.json(); if (data.items) { setSearchResults(data.items.slice(0, 10)); } } catch (error) { console.error("Search error:", error); } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gradient-to-br from-purple-100 to-blue-900", __source: { fileName: "", lineNumber: 86, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto px-4 py-8", __source: { fileName: "", lineNumber: 87, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center mb-8", __source: { fileName: "", lineNumber: 88, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold text-white mb-2", __source: { fileName: "", lineNumber: 89, columnNumber: 11 }, __self: this }, "Diginee Blog Generator"), /*#__PURE__*/ React.createElement("p", { className: "text-white/80", __source: { fileName: "", lineNumber: 92, columnNumber: 11 }, __self: this }, "AI-powered SEO blog post creation")), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col md:flex-row gap-8", __source: { fileName: "", lineNumber: 95, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full md:w-[40%] space-y-6", __source: { fileName: "", lineNumber: 96, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement(BlogForm, { onSubmit: generateBlog, __source: { fileName: "", lineNumber: 97, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement(SearchResults, { searchResults: searchResults, onSearch: handleSearch, loading: false, expanded: true, __source: { fileName: "", lineNumber: 98, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "w-full md:w-[60%]", __source: { fileName: "", lineNumber: 106, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement(BlogOutput, { isLoading: isStreaming, title: blogTitle, content: content || streamingContent, author: "AI Assistant", date: new Date().toLocaleDateString("en-US", { year: "numeric", month: "long", day: "numeric" }), __source: { fileName: "", lineNumber: 107, columnNumber: 13 }, __self: this }))))); }