import React, { useState, useEffect, useRef } from ‘react’; import { Search, BookOpen, MessageSquare, Loader2, Globe, ExternalLink, ShieldCheck, History } from ‘lucide-react’; const App = () => { const [query, setQuery] = useState(»); const [history, setHistory] = useState([]); const [isSearching, setIsSearching] = useState(false); const [currentResponse, setCurrentResponse] = useState(null); const [error, setError] = useState(null); const apiKey = «»; // La plataforma proporcionará la clave en tiempo de ejecución const executeSearch = async (userQuery) => { if (!userQuery.trim()) return; setIsSearching(true); setError(null); // Prompt de sistema actualizado con las nuevas reglas estrictas const systemPrompt = `Eres un maestro bíblico especializado en investigación. Tu fuente EXCLUSIVA de información es el sitio wol.jw.org y sus publicaciones oficiales (Perspicacia para comprender las Escrituras, La Atalaya, ¡Despertad!, libros, etc.). REGLAS CRÍTICAS DE RESPUESTA: 1. SOLO puedes usar información basada en wol.jw.org. NO uses fuentes externas bajo ninguna circunstancia. 2. NO inventes información. Si no existe una respuesta directa en wol.jw.org, dilo claramente: «La Biblia no lo especifica directamente, pero…» y ofrece un razonamiento basado en lo que sí esté publicado. 3. TODAS tus respuestas deben incluir una base bíblica clara. 4. Si el usuario pide un resumen, da primero uno corto y luego el desarrollo completo. 5. Estilo de comunicación: Claro, directo, profundo y confiable, como un estudio bíblico bien preparado. DEBES usar este formato EXACTO para la respuesta: 📖 TEMA: [título claro] 🔎 EXPLICACIÓN: [Explicación clara, ordenada y fácil de entender] 📌 PUNTOS CLAVE: – [Punto 1] – [Punto 2] – [Punto 3] 💡 EJEMPLO O ILUSTRACIÓN: [Comparación o explicación sencilla si aplica] 🖼️ APOYO VISUAL (SI APLICA): [Describe qué imagen ayudaría: mapa, escena bíblica, línea de tiempo, etc.] 🔗 FUENTE: [Pega el enlace exacto o principal de wol.jw.org relacionado] Utiliza la herramienta de búsqueda de Google para encontrar el contenido específico en wol.jw.org antes de generar la respuesta.`; try { let resultText = «»; let attributions = []; let success = false; let retries = 0; const maxRetries = 5; while (!success && retries < maxRetries) { try { const response = await fetch(`https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash-preview-09-2025:generateContent?key=${apiKey}`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ contents: [{ parts: [{ text: `Realiza una investigación profunda en wol.jw.org y responde siguiendo el formato exacto sobre: ${userQuery}` }] }], systemInstruction: { parts: [{ text: systemPrompt }] }, tools: [{ "google_search": {} }] }) }); const data = await response.json(); if (data.candidates && data.candidates[0]) { resultText = data.candidates[0].content.parts[0].text; attributions = data.candidates[0].groundingMetadata?.groundingAttributions?.map(a => ({ uri: a.web?.uri, title: a.web?.title })) || []; success = true; } else { throw new Error(«Respuesta no válida»); } } catch (err) { retries++; const delay = Math.pow(2, retries) * 500; await new Promise(resolve => setTimeout(resolve, delay)); if (retries === maxRetries) throw err; } } const newEntry = { query: userQuery, response: resultText, sources: attributions, timestamp: new Date().toLocaleTimeString() }; setCurrentResponse(newEntry); setHistory(prev => [newEntry, …prev]); setQuery(»); } catch (err) { setError(«No se pudo completar la investigación bíblica. Por favor, intenta de nuevo.»); } finally { setIsSearching(false); } }; const handleKeyPress = (e) => { if (e.key === ‘Enter’ && !isSearching) { executeSearch(query); } }; return (
{/* Sidebar – Historial */} {/* Área Principal */}
{/* Banner Superior */}
Estudio Bíblico Profundo
Sincronizado con wol.jw.org
{/* Contenido de Respuesta */}
{!currentResponse && !isSearching && (

¿Qué investigaremos hoy?

Analizaré las publicaciones oficiales para ofrecerte una explicación clara, profunda y con base bíblica.

{[ ‘¿Quién es el Arcángel Miguel?’, ‘Las 70 semanas de Daniel’, ‘Significado de la palabra «mansedumbre»‘, ‘¿Por qué permite Dios el sufrimiento?’ ].map((sugg) => ( ))}
)} {isSearching && (

Consultando la Biblioteca en Línea…

Preparando un estudio detallado basado en fuentes oficiales.

)} {error && (
!

Error de conexión

{error}

)} {currentResponse && !isSearching && (
{currentResponse.response.split(‘\n’).map((line, i) => { const trimmed = line.trim(); if (!trimmed) return
; // Detección de encabezados del formato exacto solicitado if (trimmed.startsWith(‘📖 TEMA:’)) return

{trimmed}

; if (trimmed.startsWith(‘🔎 EXPLICACIÓN:’)) return

{trimmed}

; if (trimmed.startsWith(‘📌 PUNTOS CLAVE:’)) return

{trimmed}

; if (trimmed.startsWith(‘💡 EJEMPLO’)) return

{trimmed}

; if (trimmed.startsWith(‘🖼️ APOYO’)) return

{trimmed}

; if (trimmed.startsWith(‘🔗 FUENTE:’)) return
{trimmed}
; // Formateo de viñetas if (trimmed.startsWith(‘-‘)) { return (

{trimmed.substring(1).trim()}

); } return

{trimmed}

; })}
{/* Lista técnica de fuentes encontradas por el buscador */} {currentResponse.sources.length > 0 && (

Enlaces de consulta rápida

{currentResponse.sources.map((source, i) => ( {source.title.replace(‘ – Biblioteca en línea Watchtower’, »)} ))}
)}
)}
{/* Input Flotante */}
setQuery(e.target.value)} onKeyDown={handleKeyPress} placeholder=»Escribe tu pregunta bíblica (ej: ¿Qué es el Reino de Dios?)…» className=»flex-1 p-6 focus:outline-none text-lg text-slate-800 placeholder:text-slate-400 bg-transparent» disabled={isSearching} />

Todas las respuestas se basan estrictamente en la literatura de wol.jw.org

); }; export default App;