function MainComponent() { const [searchQuery, setSearchQuery] = useState(""); const [searchResults, setSearchResults] = useState(null); const [explanation, setExplanation] = useState(""); const [userPrompt, setUserPrompt] = useState(""); const [loading, setLoading] = useState(false); const [isReading, setIsReading] = useState(false); const [activeTab, setActiveTab] = useState("search"); const [streamingMessage, setStreamingMessage] = useState(""); const [error, setError] = useState(null); const handleFinish = useCallback((message)=>{ if (activeTab === "search") { setSearchResults(message); } else if (activeTab === "explain") { setExplanation(message); } setStreamingMessage(""); setLoading(false); }, [ activeTab ]); const handleStreamResponse = useHandleStreamResponse({ onChunk: setStreamingMessage, onFinish: handleFinish }); // Search Bible verses const handleSearch = async ()=>{ if (!searchQuery.trim()) return; setLoading(true); setError(null); setSearchResults(null); setStreamingMessage(""); try { const response = await fetch("/integrations/chat-gpt/conversationgpt4", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: [ { role: "system", content: "You are a Bible search assistant. When users search for Bible verses, chapters, or topics, provide the exact scripture text with book, chapter, and verse references. Format your response clearly with the reference followed by the verse text. If multiple verses are relevant, include them all with proper references." }, { role: "user", content: `Search the Bible for: "${searchQuery}". Please provide the relevant verses with their references.` } ], stream: true }) }); if (!response.ok) { throw new Error("Failed to search Bible verses"); } handleStreamResponse(response); } catch (err) { console.error(err); setError("Failed to search Bible verses. Please try again."); setLoading(false); } }; // Explain Bible verses const handleExplain = async ()=>{ if (!userPrompt.trim()) return; setLoading(true); setError(null); setExplanation(""); setStreamingMessage(""); try { const response = await fetch("/integrations/chat-gpt/conversationgpt4", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: [ { role: "system", content: "You are a Bible scholar and teacher. Provide clear, insightful explanations of Bible verses, chapters, and concepts. Include historical context, theological significance, and practical applications when relevant. Be respectful and educational in your explanations." }, { role: "user", content: userPrompt } ], stream: true }) }); if (!response.ok) { throw new Error("Failed to get explanation"); } handleStreamResponse(response); } catch (err) { console.error(err); setError("Failed to get explanation. Please try again."); setLoading(false); } }; // Text-to-speech function const handleReadAloud = (text)=>{ if (!text) return; if (isReading) { speechSynthesis.cancel(); setIsReading(false); return; } const utterance = new SpeechSynthesisUtterance(text); utterance.rate = 0.8; utterance.pitch = 1; utterance.volume = 1; utterance.onstart = ()=>setIsReading(true); utterance.onend = ()=>setIsReading(false); utterance.onerror = ()=>setIsReading(false); speechSynthesis.speak(utterance); }; // Download function const handleDownload = (content, filename)=>{ if (!content) return; const blob = new Blob([ content ], { type: "text/plain" }); const url = URL.createObjectURL(blob); const a = document.createElement("a"); a.href = url; a.download = filename; document.body.appendChild(a); a.click(); document.body.removeChild(a); URL.revokeObjectURL(url); }; const currentContent = activeTab === "search" ? searchResults || streamingMessage : explanation || streamingMessage; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 p-4", __source: { fileName: "", lineNumber: 155, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto", __source: { fileName: "", lineNumber: 156, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center mb-8", __source: { fileName: "", lineNumber: 158, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold text-indigo-900 mb-2 font-serif", __source: { fileName: "", lineNumber: 159, columnNumber: 11 }, __self: this }, "AI Bible Reader"), /*#__PURE__*/ React.createElement("p", { className: "text-indigo-700 font-medium", __source: { fileName: "", lineNumber: 162, columnNumber: 11 }, __self: this }, "Search, Read, and Understand Scripture with AI")), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center mb-6", __source: { fileName: "", lineNumber: 168, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg p-1 shadow-md", __source: { fileName: "", lineNumber: 169, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setActiveTab("search"), className: `px-6 py-2 rounded-md font-medium transition-all ${activeTab === "search" ? "bg-indigo-600 text-white shadow-md" : "text-indigo-600 hover:bg-indigo-50"}`, __source: { fileName: "", lineNumber: 170, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-search mr-2", __source: { fileName: "", lineNumber: 178, columnNumber: 15 }, __self: this }), "Search Scripture"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setActiveTab("explain"), className: `px-6 py-2 rounded-md font-medium transition-all ${activeTab === "explain" ? "bg-indigo-600 text-white shadow-md" : "text-indigo-600 hover:bg-indigo-50"}`, __source: { fileName: "", lineNumber: 181, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-lightbulb mr-2", __source: { fileName: "", lineNumber: 189, columnNumber: 15 }, __self: this }), "Explain Scripture"))), activeTab === "search" && /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-xl shadow-lg p-6 mb-6", __source: { fileName: "", lineNumber: 197, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold text-gray-800 mb-4", __source: { fileName: "", lineNumber: 198, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-book-open mr-2 text-indigo-600", __source: { fileName: "", lineNumber: 199, columnNumber: 15 }, __self: this }), "Search Bible Verses"), /*#__PURE__*/ React.createElement("div", { className: "flex gap-3 mb-4", __source: { fileName: "", lineNumber: 202, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", value: searchQuery, onChange: (e)=>setSearchQuery(e.target.value), placeholder: "Enter verse reference, topic, or keywords (e.g., 'John 3:16', 'love', 'faith')", className: "flex-1 px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent", onKeyPress: (e)=>e.key === "Enter" && handleSearch(), __source: { fileName: "", lineNumber: 203, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: handleSearch, disabled: loading || !searchQuery.trim(), className: "px-6 py-3 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 disabled:opacity-50 disabled:cursor-not-allowed font-medium transition-colors", __source: { fileName: "", lineNumber: 211, columnNumber: 15 }, __self: this }, loading ? /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin", __source: { fileName: "", lineNumber: 217, columnNumber: 19 }, __self: this }) : /*#__PURE__*/ React.createElement("i", { className: "fas fa-search", __source: { fileName: "", lineNumber: 219, columnNumber: 19 }, __self: this })))), activeTab === "explain" && /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-xl shadow-lg p-6 mb-6", __source: { fileName: "", lineNumber: 228, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold text-gray-800 mb-4", __source: { fileName: "", lineNumber: 229, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-question-circle mr-2 text-indigo-600", __source: { fileName: "", lineNumber: 230, columnNumber: 15 }, __self: this }), "Ask About Scripture"), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 233, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { value: userPrompt, onChange: (e)=>setUserPrompt(e.target.value), placeholder: "Ask any question about Bible verses, chapters, or concepts (e.g., 'What does John 3:16 mean?', 'Explain the parable of the good Samaritan')", className: "w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent h-24 resize-none", __source: { fileName: "", lineNumber: 234, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: handleExplain, disabled: loading || !userPrompt.trim(), className: "px-6 py-3 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 disabled:opacity-50 disabled:cursor-not-allowed font-medium transition-colors", __source: { fileName: "", lineNumber: 241, columnNumber: 13 }, __self: this }, loading ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin mr-2", __source: { fileName: "", lineNumber: 248, columnNumber: 19 }, __self: this }), "Getting Explanation...") : /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("i", { className: "fas fa-lightbulb mr-2", __source: { fileName: "", lineNumber: 253, columnNumber: 19 }, __self: this }), "Get Explanation"))), error && /*#__PURE__*/ React.createElement("div", { className: "bg-red-50 border border-red-200 rounded-lg p-4 mb-6", __source: { fileName: "", lineNumber: 263, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 264, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-exclamation-triangle text-red-500 mr-2", __source: { fileName: "", lineNumber: 265, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-red-700", __source: { fileName: "", lineNumber: 266, columnNumber: 15 }, __self: this }, error))), currentContent && /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-xl shadow-lg p-6", __source: { fileName: "", lineNumber: 273, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-4", __source: { fileName: "", lineNumber: 274, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-bold text-gray-800", __source: { fileName: "", lineNumber: 275, columnNumber: 15 }, __self: this }, activeTab === "search" ? "Scripture Results" : "Explanation"), /*#__PURE__*/ React.createElement("div", { className: "flex gap-2", __source: { fileName: "", lineNumber: 278, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleReadAloud(currentContent), className: `px-4 py-2 rounded-lg font-medium transition-colors ${isReading ? "bg-red-600 text-white hover:bg-red-700" : "bg-green-600 text-white hover:bg-green-700"}`, title: isReading ? "Stop Reading" : "Read Aloud", __source: { fileName: "", lineNumber: 279, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas ${isReading ? "fa-stop" : "fa-volume-up"} mr-2`, __source: { fileName: "", lineNumber: 288, columnNumber: 19 }, __self: this }), isReading ? "Stop" : "Read Aloud"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleDownload(currentContent, `${activeTab === "search" ? "bible-search" : "bible-explanation"}-${Date.now()}.txt`), className: "px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 font-medium transition-colors", title: "Download Results", __source: { fileName: "", lineNumber: 293, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-download mr-2", __source: { fileName: "", lineNumber: 303, columnNumber: 19 }, __self: this }), "Download"))), /*#__PURE__*/ React.createElement("div", { className: "prose max-w-none", __source: { fileName: "", lineNumber: 309, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-gray-50 rounded-lg p-4 border-l-4 border-indigo-500", __source: { fileName: "", lineNumber: 310, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "whitespace-pre-wrap text-gray-800 leading-relaxed font-serif text-lg", __source: { fileName: "", lineNumber: 311, columnNumber: 17 }, __self: this }, currentContent, loading && streamingMessage && /*#__PURE__*/ React.createElement("span", { className: "inline-block w-2 h-5 bg-indigo-600 ml-1 animate-pulse", __source: { fileName: "", lineNumber: 314, columnNumber: 21 }, __self: this })))), loading && !streamingMessage && /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-center py-8", __source: { fileName: "", lineNumber: 321, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center text-indigo-600", __source: { fileName: "", lineNumber: 322, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin mr-2", __source: { fileName: "", lineNumber: 323, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 324, columnNumber: 19 }, __self: this }, "AI is processing your request...")))), /*#__PURE__*/ React.createElement("div", { className: "mt-8 bg-white rounded-xl shadow-lg p-6", __source: { fileName: "", lineNumber: 332, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-bold text-gray-800 mb-4", __source: { fileName: "", lineNumber: 333, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-star mr-2 text-yellow-500", __source: { fileName: "", lineNumber: 334, columnNumber: 13 }, __self: this }), "Features"), /*#__PURE__*/ React.createElement("div", { className: "grid md:grid-cols-2 gap-4", __source: { fileName: "", lineNumber: 337, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-start", __source: { fileName: "", lineNumber: 338, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-search text-indigo-600 mr-3 mt-1", __source: { fileName: "", lineNumber: 339, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 340, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h4", { className: "font-semibold text-gray-800", __source: { fileName: "", lineNumber: 341, columnNumber: 17 }, __self: this }, "Smart Search"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 text-sm", __source: { fileName: "", lineNumber: 342, columnNumber: 17 }, __self: this }, "Search by verse reference, topic, or keywords"))), /*#__PURE__*/ React.createElement("div", { className: "flex items-start", __source: { fileName: "", lineNumber: 347, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-volume-up text-green-600 mr-3 mt-1", __source: { fileName: "", lineNumber: 348, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 349, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h4", { className: "font-semibold text-gray-800", __source: { fileName: "", lineNumber: 350, columnNumber: 17 }, __self: this }, "Audio Reading"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 text-sm", __source: { fileName: "", lineNumber: 351, columnNumber: 17 }, __self: this }, "Listen to verses with text-to-speech"))), /*#__PURE__*/ React.createElement("div", { className: "flex items-start", __source: { fileName: "", lineNumber: 356, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-lightbulb text-yellow-600 mr-3 mt-1", __source: { fileName: "", lineNumber: 357, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 358, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h4", { className: "font-semibold text-gray-800", __source: { fileName: "", lineNumber: 359, columnNumber: 17 }, __self: this }, "AI Explanations"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 text-sm", __source: { fileName: "", lineNumber: 360, columnNumber: 17 }, __self: this }, "Get detailed explanations of any scripture"))), /*#__PURE__*/ React.createElement("div", { className: "flex items-start", __source: { fileName: "", lineNumber: 365, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-download text-blue-600 mr-3 mt-1", __source: { fileName: "", lineNumber: 366, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 367, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h4", { className: "font-semibold text-gray-800", __source: { fileName: "", lineNumber: 368, columnNumber: 17 }, __self: this }, "Download Results"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 text-sm", __source: { fileName: "", lineNumber: 371, columnNumber: 17 }, __self: this }, "Save your searches and explanations"))))))); }