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 [narrating, setNarrating] = useState(false); const [streamingMessage, setStreamingMessage] = useState(""); const [activeTab, setActiveTab] = useState("search"); 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 }); const searchScripture = async ()=>{ if (!searchQuery.trim()) return; setLoading(true); setSearchResults(null); setStreamingMessage(""); try { const response = await fetch("/integrations/chat-gpt/conversationgpt4", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: [ { role: "user", content: `Please search for and provide the exact Bible verse(s) for: "${searchQuery}". Include the book, chapter, verse numbers, and the full text. If it's a general topic, provide relevant verses. Format it clearly with proper citations.` } ], stream: true }) }); handleStreamResponse(response); } catch (error) { console.error("Search error:", error); setLoading(false); } }; const explainScripture = async ()=>{ if (!userPrompt.trim()) return; setLoading(true); setExplanation(""); setStreamingMessage(""); try { const response = await fetch("/integrations/chat-gpt/conversationgpt4", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: [ { role: "user", content: `Please provide a detailed biblical explanation for: "${userPrompt}". Include relevant scripture references, historical context, and practical application. Make it comprehensive yet easy to understand.` } ], stream: true }) }); handleStreamResponse(response); } catch (error) { console.error("Explanation error:", error); setLoading(false); } }; const narrateText = async (text)=>{ if (!text) return; setNarrating(true); try { const response = await fetch("/integrations/chat-gpt/conversationgpt4", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: [ { role: "user", content: `Please read this Bible text aloud in a clear, reverent manner. Format it as if you're narrating it: "${text}"` } ] }) }); const data = await response.json(); if (data.choices && data.choices[0]) { // Use Web Speech API to read the text if ("speechSynthesis" in window) { const utterance = new SpeechSynthesisUtterance(data.choices[0].message.content); utterance.rate = 0.8; utterance.pitch = 1; utterance.volume = 1; speechSynthesis.speak(utterance); } } } catch (error) { console.error("Narration error:", error); } finally{ setNarrating(false); } }; const downloadContent = (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}.txt`; document.body.appendChild(a); a.click(); document.body.removeChild(a); URL.revokeObjectURL(url); }; return /*#__PURE__*/ React.createElement("div", { style: { minHeight: "100vh", background: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)", padding: "20px" }, __source: { fileName: "", lineNumber: 139, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { style: { maxWidth: "1200px", margin: "0 auto", backgroundColor: "white", borderRadius: "20px", boxShadow: "0 20px 40px rgba(0,0,0,0.1)", overflow: "hidden" }, __source: { fileName: "", lineNumber: 146, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { style: { background: "linear-gradient(135deg, #2c3e50 0%, #34495e 100%)", color: "white", padding: "30px", textAlign: "center" }, __source: { fileName: "", lineNumber: 157, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { style: { fontSize: "2.5rem", margin: "0 0 10px 0", fontWeight: "bold", textShadow: "2px 2px 4px rgba(0,0,0,0.3)" }, __source: { fileName: "", lineNumber: 165, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-book-open", style: { marginRight: "15px" }, __source: { fileName: "", lineNumber: 173, columnNumber: 13 }, __self: this }), "AI Bible Reader"), /*#__PURE__*/ React.createElement("p", { style: { fontSize: "1.1rem", margin: "0", opacity: "0.9" }, __source: { fileName: "", lineNumber: 176, columnNumber: 11 }, __self: this }, "Search, Read, Listen & Learn from Scripture with AI")), /*#__PURE__*/ React.createElement("div", { style: { display: "flex", borderBottom: "2px solid #ecf0f1", backgroundColor: "#f8f9fa" }, __source: { fileName: "", lineNumber: 188, columnNumber: 9 }, __self: this }, [ { id: "search", label: "Search Scripture", icon: "fas fa-search" }, { id: "explain", label: "Ask & Explain", icon: "fas fa-question-circle" } ].map((tab)=>/*#__PURE__*/ React.createElement("button", { key: tab.id, onClick: ()=>setActiveTab(tab.id), style: { flex: 1, padding: "20px", border: "none", backgroundColor: activeTab === tab.id ? "white" : "transparent", color: activeTab === tab.id ? "#2c3e50" : "#7f8c8d", fontSize: "1.1rem", fontWeight: activeTab === tab.id ? "bold" : "normal", cursor: "pointer", borderBottom: activeTab === tab.id ? "3px solid #3498db" : "3px solid transparent", transition: "all 0.3s ease" }, __source: { fileName: "", lineNumber: 203, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: tab.icon, style: { marginRight: "10px" }, __source: { fileName: "", lineNumber: 222, columnNumber: 15 }, __self: this }), tab.label))), /*#__PURE__*/ React.createElement("div", { style: { padding: "30px" }, __source: { fileName: "", lineNumber: 228, columnNumber: 9 }, __self: this }, activeTab === "search" && /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 231, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { style: { marginBottom: "30px" }, __source: { fileName: "", lineNumber: 232, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { style: { display: "block", marginBottom: "10px", fontSize: "1.1rem", fontWeight: "bold", color: "#2c3e50" }, __source: { fileName: "", lineNumber: 233, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-search", style: { marginRight: "8px" }, __source: { fileName: "", lineNumber: 242, columnNumber: 19 }, __self: this }), "Search for Scripture, Verse, or Topic"), /*#__PURE__*/ React.createElement("div", { style: { display: "flex", gap: "15px" }, __source: { fileName: "", lineNumber: 248, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", value: searchQuery, onChange: (e)=>setSearchQuery(e.target.value), placeholder: "e.g., John 3:16, love, forgiveness, Psalm 23...", style: { flex: 1, padding: "15px", fontSize: "1rem", border: "2px solid #bdc3c7", borderRadius: "10px", outline: "none", transition: "border-color 0.3s ease" }, onFocus: (e)=>e.target.style.borderColor = "#3498db", onBlur: (e)=>e.target.style.borderColor = "#bdc3c7", onKeyPress: (e)=>e.key === "Enter" && searchScripture(), __source: { fileName: "", lineNumber: 249, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: searchScripture, disabled: loading || !searchQuery.trim(), style: { padding: "15px 25px", backgroundColor: loading ? "#95a5a6" : "#3498db", color: "white", border: "none", borderRadius: "10px", fontSize: "1rem", fontWeight: "bold", cursor: loading ? "not-allowed" : "pointer", transition: "background-color 0.3s ease" }, __source: { fileName: "", lineNumber: 267, columnNumber: 19 }, __self: this }, loading ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin", style: { marginRight: "8px" }, __source: { fileName: "", lineNumber: 284, columnNumber: 25 }, __self: this }), "Searching...") : /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("i", { className: "fas fa-search", style: { marginRight: "8px" }, __source: { fileName: "", lineNumber: 292, columnNumber: 25 }, __self: this }), "Search")))), (searchResults || streamingMessage) && /*#__PURE__*/ React.createElement("div", { style: { backgroundColor: "#f8f9fa", border: "2px solid #e9ecef", borderRadius: "15px", padding: "25px", marginBottom: "20px" }, __source: { fileName: "", lineNumber: 305, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "20px" }, __source: { fileName: "", lineNumber: 314, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { style: { margin: "0", color: "#2c3e50", fontSize: "1.3rem" }, __source: { fileName: "", lineNumber: 322, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-book", style: { marginRight: "10px" }, __source: { fileName: "", lineNumber: 329, columnNumber: 23 }, __self: this }), "Scripture Results"), /*#__PURE__*/ React.createElement("div", { style: { display: "flex", gap: "10px" }, __source: { fileName: "", lineNumber: 335, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>narrateText(searchResults || streamingMessage), disabled: narrating, style: { padding: "10px 15px", backgroundColor: narrating ? "#95a5a6" : "#e74c3c", color: "white", border: "none", borderRadius: "8px", fontSize: "0.9rem", cursor: narrating ? "not-allowed" : "pointer", transition: "background-color 0.3s ease" }, __source: { fileName: "", lineNumber: 336, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: narrating ? "fas fa-spinner fa-spin" : "fas fa-volume-up", style: { marginRight: "5px" }, __source: { fileName: "", lineNumber: 352, columnNumber: 25 }, __self: this }), narrating ? "Reading..." : "Listen"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>downloadContent(searchResults || streamingMessage, "scripture-search"), style: { padding: "10px 15px", backgroundColor: "#27ae60", color: "white", border: "none", borderRadius: "8px", fontSize: "0.9rem", cursor: "pointer", transition: "background-color 0.3s ease" }, __source: { fileName: "", lineNumber: 362, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-download", style: { marginRight: "5px" }, __source: { fileName: "", lineNumber: 380, columnNumber: 25 }, __self: this }), "Download"))), /*#__PURE__*/ React.createElement("div", { style: { fontSize: "1.1rem", lineHeight: "1.8", color: "#2c3e50", whiteSpace: "pre-wrap" }, __source: { fileName: "", lineNumber: 388, columnNumber: 19 }, __self: this }, searchResults || streamingMessage))), activeTab === "explain" && /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 405, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { style: { marginBottom: "30px" }, __source: { fileName: "", lineNumber: 406, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { style: { display: "block", marginBottom: "10px", fontSize: "1.1rem", fontWeight: "bold", color: "#2c3e50" }, __source: { fileName: "", lineNumber: 407, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-question-circle", style: { marginRight: "8px" }, __source: { fileName: "", lineNumber: 416, columnNumber: 19 }, __self: this }), "Ask About Any Scripture or Biblical Topic"), /*#__PURE__*/ React.createElement("div", { style: { display: "flex", gap: "15px" }, __source: { fileName: "", lineNumber: 422, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", value: userPrompt, onChange: (e)=>setUserPrompt(e.target.value), placeholder: "e.g., What does John 3:16 mean? Explain the parable of the good Samaritan...", style: { flex: 1, padding: "15px", fontSize: "1rem", border: "2px solid #bdc3c7", borderRadius: "10px", outline: "none", transition: "border-color 0.3s ease" }, onFocus: (e)=>e.target.style.borderColor = "#3498db", onBlur: (e)=>e.target.style.borderColor = "#bdc3c7", onKeyPress: (e)=>e.key === "Enter" && explainScripture(), __source: { fileName: "", lineNumber: 423, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: explainScripture, disabled: loading || !userPrompt.trim(), style: { padding: "15px 25px", backgroundColor: loading ? "#95a5a6" : "#9b59b6", color: "white", border: "none", borderRadius: "10px", fontSize: "1rem", fontWeight: "bold", cursor: loading ? "not-allowed" : "pointer", transition: "background-color 0.3s ease" }, __source: { fileName: "", lineNumber: 441, columnNumber: 19 }, __self: this }, loading ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin", style: { marginRight: "8px" }, __source: { fileName: "", lineNumber: 458, columnNumber: 25 }, __self: this }), "Explaining...") : /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("i", { className: "fas fa-lightbulb", style: { marginRight: "8px" }, __source: { fileName: "", lineNumber: 466, columnNumber: 25 }, __self: this }), "Explain")))), (explanation || streamingMessage) && /*#__PURE__*/ React.createElement("div", { style: { backgroundColor: "#f8f9fa", border: "2px solid #e9ecef", borderRadius: "15px", padding: "25px", marginBottom: "20px" }, __source: { fileName: "", lineNumber: 479, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "20px" }, __source: { fileName: "", lineNumber: 488, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { style: { margin: "0", color: "#2c3e50", fontSize: "1.3rem" }, __source: { fileName: "", lineNumber: 496, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-lightbulb", style: { marginRight: "10px" }, __source: { fileName: "", lineNumber: 503, columnNumber: 23 }, __self: this }), "Biblical Explanation"), /*#__PURE__*/ React.createElement("div", { style: { display: "flex", gap: "10px" }, __source: { fileName: "", lineNumber: 509, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>narrateText(explanation || streamingMessage), disabled: narrating, style: { padding: "10px 15px", backgroundColor: narrating ? "#95a5a6" : "#e74c3c", color: "white", border: "none", borderRadius: "8px", fontSize: "0.9rem", cursor: narrating ? "not-allowed" : "pointer", transition: "background-color 0.3s ease" }, __source: { fileName: "", lineNumber: 510, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: narrating ? "fas fa-spinner fa-spin" : "fas fa-volume-up", style: { marginRight: "5px" }, __source: { fileName: "", lineNumber: 526, columnNumber: 25 }, __self: this }), narrating ? "Reading..." : "Listen"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>downloadContent(explanation || streamingMessage, "biblical-explanation"), style: { padding: "10px 15px", backgroundColor: "#27ae60", color: "white", border: "none", borderRadius: "8px", fontSize: "0.9rem", cursor: "pointer", transition: "background-color 0.3s ease" }, __source: { fileName: "", lineNumber: 536, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-download", style: { marginRight: "5px" }, __source: { fileName: "", lineNumber: 554, columnNumber: 25 }, __self: this }), "Download"))), /*#__PURE__*/ React.createElement("div", { style: { fontSize: "1.1rem", lineHeight: "1.8", color: "#2c3e50", whiteSpace: "pre-wrap" }, __source: { fileName: "", lineNumber: 562, columnNumber: 19 }, __self: this }, explanation || streamingMessage)))), /*#__PURE__*/ React.createElement("div", { style: { backgroundColor: "#ecf0f1", padding: "20px", textAlign: "center", color: "#7f8c8d", fontSize: "0.9rem" }, __source: { fileName: "", lineNumber: 579, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { style: { margin: "0" }, __source: { fileName: "", lineNumber: 588, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-heart", style: { color: "#e74c3c", margin: "0 5px" }, __source: { fileName: "", lineNumber: 589, columnNumber: 13 }, __self: this }), "Powered by AI to help you explore and understand God's Word", /*#__PURE__*/ React.createElement("i", { className: "fas fa-heart", style: { color: "#e74c3c", margin: "0 5px" }, __source: { fileName: "", lineNumber: 594, columnNumber: 13 }, __self: this }))))); }