);
}
function BotLauncher() {
const [open, setOpen] = useState(false);
const [hint, setHint] = useState(false);
const [messages, setMessages] = useState([]); // {role:'user'|'bot', text, chips?}
const [input, setInput] = useState('');
const [sending, setSending] = useState(false);
const [error, setError] = useState('');
const [contactCaptured, setContactCaptured] = useState(false);
const [showContactForm, setShowContactForm] = useState(false);
const [cName, setCName] = useState('');
const [cContact, setCContact] = useState('');
const [closed, setClosed] = useState(false); // charla cerrada (derivada/pausada) → ofrecer reinicio
const [recording, setRecording] = useState(false); // grabando nota de voz
const [recSecs, setRecSecs] = useState(0);
const [tsError, setTsError] = useState(false); // Turnstile falló → salida amable + WhatsApp
const sessionRef = useRef(null);
const scrollRef = useRef(null);
const turnstileRef = useRef(''); // token de Turnstile (vacío si está desactivado)
const widgetIdRef = useRef(null); // id del widget de Turnstile (para reset)
const mediaRecRef = useRef(null);
const chunksRef = useRef([]);
const recTimerRef = useRef(null);
if (sessionRef.current === null) sessionRef.current = getSessionId();
// Reinicia la conversación: sesión nueva (uuid nuevo) + estado limpio.
function reset() {
try { localStorage.removeItem('ng_chat_session'); } catch (_) {}
sessionRef.current = getSessionId();
setMessages([{ role: 'bot', text: NG_GREETING }]);
setClosed(false); setContactCaptured(false); setShowContactForm(false);
setCName(''); setCContact(''); setError('');
}
// Saludo (burbuja) una sola vez.
useEffect(() => {
const t = setTimeout(() => setHint(true), 1800);
return () => clearTimeout(t);
}, []);
// Semilla del chat al abrir por primera vez.
useEffect(() => {
if (open && messages.length === 0) {
setMessages([{ role: 'bot', text: NG_GREETING }]);
}
}, [open]);
// Turnstile (anti-bot): si hay site key, carga el script y renderiza el widget
// invisible una vez (al abrir el panel). Guarda el token en turnstileRef.
useEffect(() => {
if (!open || !NG_TURNSTILE_ON) return;
function render() {
if (!window.turnstile) return;
const el = document.getElementById('ng-turnstile');
if (!el || el.dataset.rendered) return;
el.dataset.rendered = '1';
widgetIdRef.current = window.turnstile.render(el, {
sitekey: NG_TURNSTILE_SITEKEY,
size: 'flexible', // se adapta al ancho del chat (compacto)
appearance: 'interaction-only', // invisible si pasa solo; solo aparece si requiere clic
retry: 'auto',
'refresh-expired': 'auto',
callback: (t) => { turnstileRef.current = t; setTsError(false); },
'error-callback': () => { turnstileRef.current = ''; setTsError(true); },
'expired-callback': () => { turnstileRef.current = ''; },
});
}
if (window.turnstile) { render(); return; }
const id = 'cf-turnstile-script';
if (!document.getElementById(id)) {
const s = document.createElement('script');
s.id = id; s.src = 'https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit';
s.async = true; s.defer = true; s.onload = render;
document.head.appendChild(s);
} else { render(); }
}, [open]);
// Auto-scroll al último mensaje.
useEffect(() => {
if (scrollRef.current) scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
}, [messages, sending, showContactForm]);
async function postChat(extra) {
const resp = await fetch(CHAT_ENDPOINT, {
method: 'POST',
headers: { 'content-type': 'application/json' },
body: JSON.stringify({ sessionId: sessionRef.current, turnstileToken: turnstileRef.current || undefined, ...extra }),
});
if (!resp.ok) {
let msg = 'No pude responder ahora.', code = '';
try { const e = await resp.json(); if (e) { msg = e.error || msg; code = e.code || ''; } } catch (_) {}
const err = new Error(msg); err.code = code; throw err;
}
return resp.json();
}
// Aplica la respuesta del cerebro al chat (común a texto y audio).
function applyReply(out) {
const replyRaw = out.reply || '';
const cleaned = cleanReply(replyRaw);
if (cleaned) {
setMessages((m) => [...m, { role: 'bot', text: cleaned, chips: chipsFromText(replyRaw) }]);
} else {
// Reply vacío = el motor mutó la sesión (ya derivada/pausada). En vez de
// dejar el chat "mudo", marcamos la charla cerrada y ofrecemos reiniciar.
setClosed(true);
}
// Backstop de contacto: el motor puede derivar (incluido pedido de humano)
// sin que el LLM haya pedido el contacto. En web no hay teléfono → form.
if (out.derivo && !contactCaptured) setShowContactForm(true);
}
async function send(textRaw) {
const texto = (textRaw == null ? input : textRaw).trim();
if (!texto || sending) return;
setError('');
setInput('');
setMessages((m) => [...m, { role: 'user', text: texto }]);
setSending(true);
try { applyReply(await postChat({ texto, messageType: 'text' })); }
catch (e) { if (e.code === 'turnstile_failed') setTsError(true); else setError(e.message || 'Se cortó la conexión, probá de nuevo.'); }
finally { setSending(false); }
}
// Manda una nota de voz: la transcribe el cerebro (STT) y sigue como si fuera texto.
async function sendAudio(base64, mime) {
if (sending) return;
setError('');
setMessages((m) => [...m, { role: 'user', text: '🎤 Nota de voz' }]);
setSending(true);
try { applyReply(await postChat({ audio_base64: base64, audio_mime: mime, messageType: 'audio' })); }
catch (e) { if (e.code === 'turnstile_failed') setTsError(true); else setError(e.message || 'No pude procesar el audio, probá de nuevo.'); }
finally { setSending(false); }
}
const REC_MAX_SECS = 45; // el motor topea el body ~256KB → notas de voz cortas
function blobToBase64(blob) {
return new Promise((resolve, reject) => {
const r = new FileReader();
r.onloadend = () => resolve(String(r.result).split(',')[1] || '');
r.onerror = reject;
r.readAsDataURL(blob);
});
}
async function startRec() {
if (recording || sending || closed || showContactForm) return;
setError('');
if (!navigator.mediaDevices || !window.MediaRecorder) { setError('Tu navegador no soporta grabar audio.'); return; }
let stream;
try { stream = await navigator.mediaDevices.getUserMedia({ audio: true }); }
catch (_) { setError('No pude usar el micrófono. Revisá los permisos del navegador.'); return; }
const mime = MediaRecorder.isTypeSupported('audio/webm;codecs=opus') ? 'audio/webm;codecs=opus'
: (MediaRecorder.isTypeSupported('audio/ogg;codecs=opus') ? 'audio/ogg;codecs=opus' : '');
const mr = new MediaRecorder(stream, mime ? { mimeType: mime, audioBitsPerSecond: 24000 } : {});
chunksRef.current = [];
mr.ondataavailable = (e) => { if (e.data && e.data.size) chunksRef.current.push(e.data); };
mr.onstop = async () => {
stream.getTracks().forEach((t) => t.stop());
clearInterval(recTimerRef.current);
if (mr._cancelled) return;
const blob = new Blob(chunksRef.current, { type: mr.mimeType || 'audio/webm' });
if (blob.size < 900) { setError('El audio salió muy corto 🎧 probá de nuevo.'); return; }
const b64 = await blobToBase64(blob);
if (b64.length > 240 * 1024) { setError('El audio es muy largo, grabá algo más corto 🎧'); return; }
sendAudio(b64, mr.mimeType || 'audio/webm');
};
mediaRecRef.current = mr;
mr.start();
setRecording(true); setRecSecs(0);
let secs = 0;
recTimerRef.current = setInterval(() => { secs += 1; setRecSecs(secs); if (secs >= REC_MAX_SECS) stopRec(); }, 1000);
}
function stopRec() {
const mr = mediaRecRef.current;
if (mr && mr.state !== 'inactive') mr.stop();
setRecording(false);
clearInterval(recTimerRef.current);
}
function cancelRec() {
const mr = mediaRecRef.current;
if (mr) { mr._cancelled = true; if (mr.state !== 'inactive') mr.stop(); }
setRecording(false); setRecSecs(0);
clearInterval(recTimerRef.current);
}
// Reintenta la verificación de Turnstile (re-lanza el desafío).
function retryTurnstile() {
setTsError(false); setError('');
try { if (window.turnstile && widgetIdRef.current != null) window.turnstile.reset(widgetIdRef.current); } catch (_) {}
}
async function submitContact(ev) {
if (ev) ev.preventDefault();
const name = cName.trim();
const contact = cContact.trim();
if (!name || !contact || sending) return;
setContactCaptured(true);
setShowContactForm(false);
setCName(''); setCContact('');
// Lo mando como un turno más para que el handoff/email lo incluya.
await send(`Mi nombre es ${name} y mi contacto es ${contact}.`);
// Captado el contacto + ya derivado → la charla queda cerrada (el equipo sigue).
// Evita el loop de "ya te pasé al equipo" repetido si el visitante sigue escribiendo.
setClosed(true);
}
function goToAnchor(anchor) {
const id = anchor.replace('#', '');
const el = document.getElementById(id);
if (el) { el.scrollIntoView({ behavior: 'smooth', block: 'start' }); setOpen(false); }
else { window.location.hash = anchor; }
}
function onKeyDown(e) {
if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); send(); }
}
return (