%PDF- %PDF-
Mini Shell

Mini Shell

Direktori : /home/tjamichg/chatbot.tjamich.gob.mx/asesores/
Upload File :
Create Path :
Current File : /home/tjamichg/chatbot.tjamich.gob.mx/asesores/script.js

//toggle del menu desplegable
const toggle = document.getElementById('menu-toggle');
const subMenu = document.getElementById('sub-menu');

toggle.addEventListener('click', () =>{
    subMenu.style.display = subMenu.style.display === 'block' ? 'none' : 'block';
});

document.addEventListener('click', (e) => {
    if(!document.querySelector('.contenedor-menu').contains(e.target)){
        subMenu.style.display = 'none';
    }
});

//mostrar los mensajes
    document.querySelector(".ver-notificaciones").addEventListener("click", function () {
    const lista = document.getElementById("lista-notificaciones");
    lista.style.display = (lista.style.display === "none") ? "block" : "none";
});


//muestra el chat de conversacion directo
document.addEventListener('DOMContentLoaded', function () {
    const chatBox = document.getElementById("mini-chat");
    const chatNumero = document.getElementById("chat-numero");
    const cerrarBtn = document.getElementById("cerrar-chat");
    const contenedorNotificaciones = document.querySelector(".contenedor-notificaciones");

   

    //verifica que todo esta
    if (!chatBox || !chatNumero || !cerrarBtn || !contenedorNotificaciones) {
        console.error("Faltan elementos del DOM.");
        return;
    }

    let historialInterval = null;
    let historialCache = []; // Guardamos los mensajes previos

    // Función reutilizable para cargar mensajes
    function cargarHistorial(telefono) {
        const historial = document.getElementById("historial-chat");
        if (!telefono || !historial) return;

        //historial.innerHTML = "<em>Cargando...</em>"; solamenta para darle tiempo de carga pero ñooo

        fetch("ajax/ajax_historial.php", {
            method: "POST",
            headers: {
                "Content-Type": "application/x-www-form-urlencoded",
            },
            body: "telefono=" + encodeURIComponent(telefono)
        })
         .then(res => res.json())
    .then(data => {
        if (!Array.isArray(data)) return;

        // Solo actualiza si hay más mensajes que antes
        if (data.length > historialCache.length) {
            // Detectar los nuevos mensajes
            const nuevos = data.slice(historialCache.length);
            nuevos.forEach(item => {
                const nuevo = document.createElement("div");
                nuevo.style.marginBottom = "10px";
                nuevo.innerHTML = `
                    <strong>Cliente:</strong> ${item.mensaje_usuario}<br>
                    <strong>Bot:</strong> ${item.mensaje_asesor}
                `;
                historial.appendChild(nuevo);
            });

            // Actualizar el cache
            historialCache = data;

            // Bajar el scroll solo si hubo nuevos
            historial.scrollTop = historial.scrollHeight;
        }
        
        })
        .catch(err => {
            console.error("Error en historial AJAX:", err);
            historial.innerHTML = "<em>Error al cargar mensajes</em>";
        });
    }
    
    // Clic en una notificación
    contenedorNotificaciones.addEventListener('click', function (e) {
        const item = e.target.closest('.notificacion-item');
        if (item) {
            const telefono = item.getAttribute('data-telefono');
            chatNumero.textContent = telefono;
            chatBox.style.display = "block";

            cargarHistorial(telefono); // Primera carga inmediata

            // Limpiar cualquier intervalo anterior
            if (historialInterval) clearInterval(historialInterval);

            // Actualización en tiempo real cada 5 segundos
            historialInterval = setInterval(() => {
                cargarHistorial(telefono);
            }, 5000);
        }
    });


    cerrarBtn.addEventListener('click', function () {
        chatBox.style.display = "none";
    });
});


//apartado para mandar mensaje al chat
document.getElementById("enviar-chat").addEventListener("click", function () {
    const telefono = document.getElementById("chat-numero").textContent.trim();
    const mensaje = document.getElementById("chat-mensaje").value.trim();

    if (!mensaje) {
        alert("Escribe un mensaje antes de enviar.");
        return;
    }

    fetch("ajax/ajax_enviar.php", {
        method: "POST",
        headers: {
            "Content-Type": "application/x-www-form-urlencoded",
        },
        body: `telefono=${encodeURIComponent(telefono)}&respuesta=${encodeURIComponent(mensaje)}`
    })
    .then(res => res.json())
    .then(data => {
        if (data.success) {
            document.getElementById("chat-mensaje").value = "";

            //recargar el historial despues de enviar
            const telefono = document.getElementById("chat-numero").textContent.trim();
            cargarHistorial(telefono);
        
        } else {
            alert("Error al enviar: " + (data.error || "desconocido"));
        }
    })
   
});

Zerion Mini Shell 1.0