function MainComponent() { const [selectedGenre, setSelectedGenre] = useState(""); const [storyPrompt, setStoryPrompt] = useState(""); const [generatedStory, setGeneratedStory] = useState(""); const [isGenerating, setIsGenerating] = useState(false); const [isNarrating, setIsNarrating] = useState(false); const [streamingMessage, setStreamingMessage] = useState(""); const [storyTitle, setStoryTitle] = useState(""); const storyGenres = [ "Novel", "Folk Tale", "Poetry", "Poem", "Love Story", "Horror Story", "Adventure Story", "Novella", "Kids Story", "Adult Story", "Teen Story", "Bible Story", "Religious Story", "Historical Story", "Traditional Story", "Scientific Story", "Technological Story", "Fantasy", "Mystery", "Comedy" ]; const handleFinish = useCallback((message)=>{ setGeneratedStory(message); setStreamingMessage(""); setIsGenerating(false); }, []); const handleStreamResponse = useHandleStreamResponse({ onChunk: setStreamingMessage, onFinish: handleFinish }); const generateStory = async ()=>{ if (!selectedGenre || !storyPrompt.trim()) { alert("Please select a genre and enter a story prompt"); return; } setIsGenerating(true); setGeneratedStory(""); setStreamingMessage(""); const systemPrompt = `You are Cleopatra, an expert AI story writer. You specialize in creating engaging, well-structured stories across all genres. Write a complete ${selectedGenre.toLowerCase()} based on the user's prompt. Make it captivating, well-paced, and appropriate for the chosen genre. Include proper dialogue, character development, and a satisfying conclusion.`; try { const response = await fetch("/integrations/chat-gpt/conversationgpt4", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: [ { role: "system", content: systemPrompt }, { role: "user", content: `Write a ${selectedGenre.toLowerCase()} about: ${storyPrompt}` } ], stream: true }) }); handleStreamResponse(response); } catch (error) { console.error("Error generating story:", error); setIsGenerating(false); alert("Failed to generate story. Please try again."); } }; const downloadStory = ()=>{ if (!generatedStory && !streamingMessage) { alert("No story to download"); return; } const content = generatedStory || streamingMessage; const title = storyTitle || `${selectedGenre} Story`; const fullContent = `${title}\n\nGenre: ${selectedGenre}\n\n${content}`; const blob = new Blob([ fullContent ], { type: "text/plain" }); const url = URL.createObjectURL(blob); const a = document.createElement("a"); a.href = url; a.download = `${title.replace(/[^a-z0-9]/gi, "_").toLowerCase()}.txt`; document.body.appendChild(a); a.click(); document.body.removeChild(a); URL.revokeObjectURL(url); }; const narrateStory = ()=>{ if (!generatedStory && !streamingMessage) { alert("No story to narrate"); return; } if (isNarrating) { window.speechSynthesis.cancel(); setIsNarrating(false); return; } const content = generatedStory || streamingMessage; const utterance = new SpeechSynthesisUtterance(content); // Try to find a female voice for Cleopatra const voices = window.speechSynthesis.getVoices(); const femaleVoice = voices.find((voice)=>voice.name.toLowerCase().includes("female") || voice.name.toLowerCase().includes("woman") || voice.gender === "female") || voices.find((voice)=>voice.lang.startsWith("en")); if (femaleVoice) { utterance.voice = femaleVoice; } utterance.rate = 0.9; utterance.pitch = 1.1; utterance.onstart = ()=>setIsNarrating(true); utterance.onend = ()=>setIsNarrating(false); utterance.onerror = ()=>setIsNarrating(false); window.speechSynthesis.speak(utterance); }; const currentStory = generatedStory || streamingMessage; return /*#__PURE__*/ React.createElement("div", { style: { minHeight: "100vh", background: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)" }, __source: { fileName: "", lineNumber: 143, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto px-4 py-8", __source: { fileName: "", lineNumber: 149, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center mb-8", __source: { fileName: "", lineNumber: 151, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl md:text-6xl font-bold text-white mb-4 font-serif", __source: { fileName: "", lineNumber: 152, columnNumber: 11 }, __self: this }, "✨ Cleopatra ✨"), /*#__PURE__*/ React.createElement("p", { className: "text-xl text-white/90 font-light", __source: { fileName: "", lineNumber: 155, columnNumber: 11 }, __self: this }, "Your AI Story Writer - Crafting Tales Across All Genres")), /*#__PURE__*/ React.createElement("div", { className: "max-w-6xl mx-auto", __source: { fileName: "", lineNumber: 160, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 lg:grid-cols-2 gap-8", __source: { fileName: "", lineNumber: 161, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white/95 backdrop-blur-sm rounded-2xl p-6 shadow-2xl", __source: { fileName: "", lineNumber: 163, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold text-gray-800 mb-6 flex items-center", __source: { fileName: "", lineNumber: 164, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-feather-alt mr-3 text-purple-600", __source: { fileName: "", lineNumber: 165, columnNumber: 17 }, __self: this }), "Create Your Story"), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 170, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-2", __source: { fileName: "", lineNumber: 171, columnNumber: 17 }, __self: this }, "Story Title (Optional)"), /*#__PURE__*/ React.createElement("input", { type: "text", value: storyTitle, onChange: (e)=>setStoryTitle(e.target.value), placeholder: "Enter a title for your story...", className: "w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent", __source: { fileName: "", lineNumber: 174, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 184, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-2", __source: { fileName: "", lineNumber: 185, columnNumber: 17 }, __self: this }, "Select Genre"), /*#__PURE__*/ React.createElement("select", { value: selectedGenre, onChange: (e)=>setSelectedGenre(e.target.value), className: "w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent", __source: { fileName: "", lineNumber: 188, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 193, columnNumber: 19 }, __self: this }, "Choose a genre..."), storyGenres.map((genre)=>/*#__PURE__*/ React.createElement("option", { key: genre, value: genre, __source: { fileName: "", lineNumber: 195, columnNumber: 21 }, __self: this }, genre)))), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 203, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-2", __source: { fileName: "", lineNumber: 204, columnNumber: 17 }, __self: this }, "Story Prompt"), /*#__PURE__*/ React.createElement("textarea", { value: storyPrompt, onChange: (e)=>setStoryPrompt(e.target.value), placeholder: "Describe what you want your story to be about...", rows: 4, className: "w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent resize-none", __source: { fileName: "", lineNumber: 207, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: generateStory, disabled: isGenerating, className: "w-full bg-gradient-to-r from-purple-600 to-blue-600 text-white py-3 px-6 rounded-lg font-semibold hover:from-purple-700 hover:to-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200 flex items-center justify-center", __source: { fileName: "", lineNumber: 217, columnNumber: 15 }, __self: this }, isGenerating ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin mr-2", __source: { fileName: "", lineNumber: 224, columnNumber: 21 }, __self: this }), "Cleopatra is writing...") : /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("i", { className: "fas fa-magic mr-2", __source: { fileName: "", lineNumber: 229, columnNumber: 21 }, __self: this }), "Generate Story"))), /*#__PURE__*/ React.createElement("div", { className: "bg-white/95 backdrop-blur-sm rounded-2xl p-6 shadow-2xl", __source: { fileName: "", lineNumber: 237, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between mb-6", __source: { fileName: "", lineNumber: 238, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold text-gray-800 flex items-center", __source: { fileName: "", lineNumber: 239, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-book-open mr-3 text-purple-600", __source: { fileName: "", lineNumber: 240, columnNumber: 19 }, __self: this }), "Your Story"), currentStory && /*#__PURE__*/ React.createElement("div", { className: "flex space-x-2", __source: { fileName: "", lineNumber: 245, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: narrateStory, className: `px-4 py-2 rounded-lg font-medium transition-all duration-200 flex items-center ${isNarrating ? "bg-red-500 hover:bg-red-600 text-white" : "bg-green-500 hover:bg-green-600 text-white"}`, __source: { fileName: "", lineNumber: 246, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas ${isNarrating ? "fa-stop" : "fa-play"} mr-2`, __source: { fileName: "", lineNumber: 254, columnNumber: 23 }, __self: this }), isNarrating ? "Stop" : "Listen"), /*#__PURE__*/ React.createElement("button", { onClick: downloadStory, className: "px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded-lg font-medium transition-all duration-200 flex items-center", __source: { fileName: "", lineNumber: 260, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-download mr-2", __source: { fileName: "", lineNumber: 264, columnNumber: 23 }, __self: this }), "Download"))), /*#__PURE__*/ React.createElement("div", { className: "bg-gray-50 rounded-lg p-4 min-h-[400px] max-h-[600px] overflow-y-auto", __source: { fileName: "", lineNumber: 271, columnNumber: 15 }, __self: this }, currentStory ? /*#__PURE__*/ React.createElement("div", { className: "prose prose-gray max-w-none", __source: { fileName: "", lineNumber: 273, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("pre", { className: "whitespace-pre-wrap font-serif text-gray-800 leading-relaxed", __source: { fileName: "", lineNumber: 274, columnNumber: 21 }, __self: this }, currentStory)) : /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-center h-full text-gray-500", __source: { fileName: "", lineNumber: 279, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 280, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-scroll text-4xl mb-4", __source: { fileName: "", lineNumber: 281, columnNumber: 23 }, __self: this }), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 282, columnNumber: 23 }, __self: this }, "Your story will appear here once generated")))))), /*#__PURE__*/ React.createElement("div", { className: "mt-12 bg-white/10 backdrop-blur-sm rounded-2xl p-8", __source: { fileName: "", lineNumber: 291, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-2xl font-bold text-white text-center mb-8", __source: { fileName: "", lineNumber: 292, columnNumber: 13 }, __self: this }, "What Cleopatra Can Do"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-6", __source: { fileName: "", lineNumber: 295, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center text-white", __source: { fileName: "", lineNumber: 296, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-palette text-3xl mb-4", __source: { fileName: "", lineNumber: 297, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("h4", { className: "font-semibold mb-2", __source: { fileName: "", lineNumber: 298, columnNumber: 17 }, __self: this }, "20+ Genres"), /*#__PURE__*/ React.createElement("p", { className: "text-sm opacity-90", __source: { fileName: "", lineNumber: 299, columnNumber: 17 }, __self: this }, "From romance to horror, kids to adult stories")), /*#__PURE__*/ React.createElement("div", { className: "text-center text-white", __source: { fileName: "", lineNumber: 303, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-volume-up text-3xl mb-4", __source: { fileName: "", lineNumber: 304, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("h4", { className: "font-semibold mb-2", __source: { fileName: "", lineNumber: 305, columnNumber: 17 }, __self: this }, "AI Narration"), /*#__PURE__*/ React.createElement("p", { className: "text-sm opacity-90", __source: { fileName: "", lineNumber: 306, columnNumber: 17 }, __self: this }, "Listen to your stories with text-to-speech")), /*#__PURE__*/ React.createElement("div", { className: "text-center text-white", __source: { fileName: "", lineNumber: 310, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-file-download text-3xl mb-4", __source: { fileName: "", lineNumber: 311, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("h4", { className: "font-semibold mb-2", __source: { fileName: "", lineNumber: 312, columnNumber: 17 }, __self: this }, "Download Stories"), /*#__PURE__*/ React.createElement("p", { className: "text-sm opacity-90", __source: { fileName: "", lineNumber: 313, columnNumber: 17 }, __self: this }, "Save your stories as text files"))))))); }