function MainComponent() { const [formData, setFormData] = useState({ companyName: '', targetKeywords: '', language: 'english', wordCount: 500 }); const [generatedContent, setGeneratedContent] = useState(''); const [loading, setLoading] = useState(false); const [error, setError] = useState(''); const [streamingMessage, setStreamingMessage] = useState(''); const handleStreamResponse = useHandleStreamResponse({ onChunk: setStreamingMessage, onFinish: (message)=>{ setGeneratedContent(message); setLoading(false); } }); const handleChange = (e)=>{ const { name, value } = e.target; setFormData((prev)=>({ ...prev, [name]: value })); }; const handleReset = ()=>{ setFormData({ companyName: '', targetKeywords: '', language: 'english', wordCount: 500 }); setGeneratedContent(''); setStreamingMessage(''); setError(''); }; const highlightKeywords = (text)=>{ if (!formData.targetKeywords || !text) return text; const keywords = formData.targetKeywords.split(',').map((k)=>k.trim()); let highlightedText = text; keywords.forEach((keyword)=>{ const regex = new RegExp(keyword, 'gi'); highlightedText = highlightedText.replace(regex, `${keyword}`); }); return highlightedText; }; const getWordCount = (text)=>{ return text.trim().split(/\s+/).length; }; const handleSubmit = async (e)=>{ e.preventDefault(); setLoading(true); setError(''); try { const prompt = `Write a professional, SEO-optimized article with clear headings, subheadings, and bullet points about ${formData.companyName}. Include these keywords: ${formData.targetKeywords}. The article should be approximately ${formData.wordCount} words long and written in ${formData.language}. Structure the content with: - A clear main heading (H1) - Multiple descriptive subheadings (H2, H3) - An engaging introduction - Multiple well-organized sections - Bullet points for key information - Short, readable paragraphs - A strong conclusion Format the response in HTML using appropriate tags (h1, h2, h3, p, ul, li, strong). Make it visually structured, easy to scan, and highly engaging for the target audience.`; const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { role: 'user', content: prompt } ], stream: true }) }); if (!response.ok) { throw new Error('Failed to generate content'); } handleStreamResponse(response); } catch (err) { setError('Failed to generate content. Please try again.'); setLoading(false); } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-black dark:bg-black flex flex-col items-center p-6", __source: { fileName: "", lineNumber: 92, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mt-8", __source: { fileName: "", lineNumber: 93, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/b7ca3e9a-bae5-4857-8026-67ed3cbef472/-/format/auto/", alt: "Create Logo", className: "w-[285px] h-[95px]", __source: { fileName: "", lineNumber: 94, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "max-w-3xl mx-auto mt-16 text-center text-white font-roboto", __source: { fileName: "", lineNumber: 101, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold mb-2", __source: { fileName: "", lineNumber: 102, columnNumber: 9 }, __self: this }, "Digital Marketing Services"), /*#__PURE__*/ React.createElement("h2", { className: "text-xl mb-8", __source: { fileName: "", lineNumber: 103, columnNumber: 1 }, __self: this }, "Transform Your Online Presence"), /*#__PURE__*/ React.createElement("p", { className: "mb-12", __source: { fileName: "", lineNumber: 104, columnNumber: 1 }, __self: this }, "Let us help you reach your audience and achieve measurable results."), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "max-w-md mx-auto", __source: { fileName: "", lineNumber: 106, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 107, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "companyName", value: formData.companyName, onChange: handleChange, placeholder: "Company Name", className: "w-full px-4 py-2 bg-gray-900 border border-gray-700 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:border-gray-500", __source: { fileName: "", lineNumber: 108, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 117, columnNumber: 1 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { name: "targetKeywords", value: formData.targetKeywords, onChange: handleChange, placeholder: "Enter keywords separated by commas", rows: "4", className: "w-full px-4 py-2 bg-gray-900 border border-gray-700 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:border-gray-500", __source: { fileName: "", lineNumber: 118, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 127, columnNumber: 1 }, __self: this }, /*#__PURE__*/ React.createElement("select", { name: "language", value: formData.language, onChange: handleChange, className: "w-full px-4 py-2 bg-gray-900 border border-gray-700 rounded-lg text-white focus:outline-none focus:border-gray-500", __source: { fileName: "", lineNumber: 128, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "english", __source: { fileName: "", lineNumber: 134, columnNumber: 15 }, __self: this }, "English"), /*#__PURE__*/ React.createElement("option", { value: "bengali", __source: { fileName: "", lineNumber: 135, columnNumber: 15 }, __self: this }, "Bengali"))), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 138, columnNumber: 1 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "number", name: "wordCount", value: formData.wordCount, onChange: handleChange, placeholder: "Number of Words", min: "100", max: "2000", className: "w-full px-4 py-2 bg-gray-900 border border-gray-700 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:border-gray-500", __source: { fileName: "", lineNumber: 139, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex gap-4 mb-6", __source: { fileName: "", lineNumber: 151, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "submit", disabled: loading, className: "flex-1 px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition-colors duration-200", __source: { fileName: "", lineNumber: 152, columnNumber: 13 }, __self: this }, loading ? 'Generating...' : 'Generate Article'), /*#__PURE__*/ React.createElement("button", { type: "button", onClick: handleReset, className: "flex-1 px-6 py-3 bg-gray-600 hover:bg-gray-700 text-white font-medium rounded-lg transition-colors duration-200", __source: { fileName: "", lineNumber: 159, columnNumber: 13 }, __self: this }, "Reset"))), error && /*#__PURE__*/ React.createElement("div", { className: "mt-6 text-red-500", __source: { fileName: "", lineNumber: 170, columnNumber: 11 }, __self: this }, error), (streamingMessage || generatedContent) && /*#__PURE__*/ React.createElement("div", { className: "mt-12 max-w-3xl mx-auto", __source: { fileName: "", lineNumber: 174, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-gray-900 border border-gray-700 p-10 rounded-lg shadow-xl", __source: { fileName: "", lineNumber: 175, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-left text-gray-300 prose prose-invert max-w-none", __source: { fileName: "", lineNumber: 176, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "prose-h1:text-4xl prose-h1:font-bold prose-h1:mb-8 prose-h1:text-white prose-h2:text-2xl prose-h2:font-semibold prose-h2:mt-8 prose-h2:mb-4 prose-h2:text-gray-200 prose-h3:text-xl prose-h3:font-medium prose-h3:mt-6 prose-h3:mb-3 prose-h3:text-gray-300 prose-p:text-gray-300 prose-p:leading-relaxed prose-p:mb-4 prose-ul:mt-4 prose-ul:mb-6 prose-ul:list-disc prose-ul:list-inside prose-li:text-gray-300 prose-li:mb-2 prose-strong:text-white prose-strong:font-semibold", dangerouslySetInnerHTML: { __html: highlightKeywords(streamingMessage || generatedContent) }, __source: { fileName: "", lineNumber: 177, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mt-8 pt-6 border-t border-gray-700 text-sm text-gray-400", __source: { fileName: "", lineNumber: 190, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-4", __source: { fileName: "", lineNumber: 191, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 192, columnNumber: 19 }, __self: this }, "Character count: ", (streamingMessage || generatedContent).length), /*#__PURE__*/ React.createElement("span", { className: "text-gray-600", __source: { fileName: "", lineNumber: 193, columnNumber: 19 }, __self: this }, "|"), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 194, columnNumber: 19 }, __self: this }, "Word count: ", getWordCount(streamingMessage || generatedContent))), /*#__PURE__*/ React.createElement("p", { className: "mt-2", __source: { fileName: "", lineNumber: 196, columnNumber: 17 }, __self: this }, "✓ Unique, SEO-optimized content generated for your business")))))); }