async function abrirConversacion({ conversacion, receptor, imagenPerfil, nombreUsuario }) {
        try {
            let data = { success: true, data: { mensajes: [], conversacion: null } };
            currentPage = 1;
            if (conversacion) {
                data = await enviarAjax('obtenerChat', { conversacion, page: currentPage });
            } else if (receptor) {
                data = await enviarAjax('obtenerChat', { receptor, page: currentPage });
            }
            if (data?.success) {
                const bloqueChat = document.querySelector('.bloqueChat');
                if (!bloqueChat) {
                    //console.error('No se encontró el elemento .bloqueChat en el DOM.');
                    return;
                }
    
                // Adjusted the call to pass the correct chat container element
                subidaArchivosChat(bloqueChat);
                msSetup(bloqueChat);
                mostrarMensajes(data.data.mensajes, bloqueChat);
                bloqueChat.setAttribute('data-user-id', receptor);
                bloqueChat.querySelector('.imagenMensaje img').src = imagenPerfil;
                bloqueChat.querySelector('.nombreConversacion p').textContent = nombreUsuario;
                bloqueChat.style.display = 'block';
                manejarScroll(data.data.conversacion, bloqueChat);
    
                const listaMensajes = bloqueChat.querySelector('.listaMensajes');
                if (listaMensajes) {
                    listaMensajes.scrollTop = listaMensajes.scrollHeight;
                }
    
                await actualizarEstadoConexion(receptor, bloqueChat);
                setInterval(() => actualizarEstadoConexion(receptor, bloqueChat), 30000);
            } else {
                alert(data.message || 'Error desconocido al obtener los mensajes.');
            }
        } catch (error) {
            alert('Ha ocurrido un error al intentar abrir la conversación.');
        }
    }

    async function manejarClickEnConversacion(item) {
        item.addEventListener('click', async () => {
            let conversacion = item.getAttribute('data-conversacion');
            receptor = item.getAttribute('data-receptor');
            let imagenPerfil = item.querySelector('.imagenMensaje img')?.src || null;
            let nombreUsuario = item.querySelector('.nombreUsuario strong')?.textContent || null;

            if (!imagenPerfil || !nombreUsuario) {
                try {
                    const data = await enviarAjax('infoUsuario', {receptor});
                    if (data?.success) {
                        imagenPerfil = data.data.imagenPerfil || 'https://i0.wp.com/2upra.com/wp-content/uploads/2024/05/perfildefault.jpg?quality=40&strip=all';
                        nombreUsuario = data.data.nombreUsuario || 'Usuario Desconocido'; // Nombre por defecto si no se encuentra
                    } else {
                        //console.error('Error del servidor:', data.message);
                        alert(data.message || 'Error al obtener la información del usuario.');
                        return;
                    }
                } catch (error) {
                    //console.error('Error de conexión:', error);
                    alert('Error al intentar obtener la información del usuario.');
                    return;
                }
            }

            // Abrir la conversación
            abrirConversacion({
                conversacion: conversacion || null,
                receptor,
                imagenPerfil,
                nombreUsuario
            });
        });
    }

    function clickMensaje() {
        const mensajes = document.querySelectorAll('.mensaje');
        if (mensajes.length > 0) {
            mensajes.forEach(item => manejarClickEnConversacion(item));
        }

        const botonesMensaje = document.querySelectorAll('.mensajeBoton');
        if (botonesMensaje.length > 0) {
            botonesMensaje.forEach(item => manejarClickEnConversacion(item));
        }
    }