los mensajes cargan en el orden correcto pero la información del usuario se coloca en el ultimo mensaje y no en el primero

    async function manejarScrollColab(conversacion, contenedor = null) {
        const listaMensajes = (contenedor || document).querySelector('.listaMensajes');
        let puedeDesplazar = true,
            currentPage = 1,
            conversacion_id = conversacion;
    
        listaMensajes.addEventListener('scroll', async e => {
            if (e.target.scrollTop === 0 && puedeDesplazar) {
                puedeDesplazar = false;
                setTimeout(() => (puedeDesplazar = true), 2000);
                currentPage++;
    
                const data = await enviarAjax('obtenerChatColab', {conversacion_id, page: currentPage});
                if (!data?.success) {
                    return console.error('Error al obtener más mensajes.');
                }
    
                // Antes de agregar los nuevos mensajes, limpiar la información de usuario de los mensajes que ya no son primeros
                const mensajesAnteriores = listaMensajes.querySelectorAll('.firstMessageOfThread');
                mensajesAnteriores.forEach(mensaje => {
                    mensaje.classList.remove('firstMessageOfThread');
    
                    const userNameElem = mensaje.querySelector('.userName');
                    const avatarImg = mensaje.querySelector('.avatarImage');
                    if (userNameElem) userNameElem.remove();
                    if (avatarImg) avatarImg.remove();
                });
    
                let mensajes = data.data.mensajes; // Los mensajes vienen del servidor del más nuevo al más antiguo
                const remitentesUnicos = [...new Set(mensajes.map(m => m.remitente))];
                const userInfos = await obtenerInfoUsuarios(remitentesUnicos);
    
                let fechaAnterior = null,
                    prevEmisor = null;
    
                // Iteramos del último al primero para procesar del más antiguo al más nuevo
                for (let i = mensajes.length - 1; i >= 0; i--) {
                    const mensaje = mensajes[i];
                    const esNuevoHilo = mensaje.remitente !== prevEmisor;
                    prevEmisor = mensaje.remitente;
    
                    const userInfo = userInfos.get(mensaje.remitente);
                    agregarMensajeAlChat(
                        mensaje.mensaje,
                        mensaje.clase,
                        mensaje.fecha,
                        listaMensajes,
                        fechaAnterior,
                        true, // insertAtTop = true
                        mensaje.adjunto,
                        null,
                        mensaje.remitente,
                        esNuevoHilo,
                        userInfo,
                        'Colab'
                    );
    
                    fechaAnterior = new Date(mensaje.fecha);
                }
    
                // Ajustar el scroll para que permanezca en la posición correcta
                const primerMensajeNuevo = listaMensajes.querySelector('div.messageBlock');
                if (primerMensajeNuevo) {
                    primerMensajeNuevo.scrollIntoView();
                }
            }
        });
    }


 function agregarMensajeAlChat(mensajeTexto, clase, fecha, listaMensajes = document.querySelector('.listaMensajes'), fechaAnterior = null, insertAtTop = false, adjunto = null, temp_id = null, msgEmisor = null, isFirstMessageOfThread = false, userInfo = null, tipoMensaje = null) {
        const fechaMensaje = new Date(fecha);
        fechaAnterior = fechaAnterior || obtenerFechaAnterior(listaMensajes, insertAtTop);

        manejarFecha(fechaMensaje, fechaAnterior, listaMensajes, insertAtTop);

        const esUsuarioActual = msgEmisor === emisor;
        const esColabPrimerMensaje = tipoMensaje === 'Colab' && isFirstMessageOfThread && userInfo && !esUsuarioActual;

        const messageBlock = crearElemento('div', 'messageBlock');
        const messageContainer = crearElemento('div', 'messageContainer');

        const mensajeElem = crearElemento('div', ['mensajeText', clase], {
            'data-fecha': fechaMensaje.toISOString(),
            'data-emisor': msgEmisor || undefined,
            'data-temp-id': temp_id || undefined
        });

        if (temp_id) mensajeElem.classList.add('mensajePendiente');

        if (esColabPrimerMensaje) {
            // Añadimos una clase identificadora al messageBlock
            messageBlock.classList.add('firstMessageOfThread');

            const userNameElem = crearElemento('span', 'userName', {textContent: userInfo.nombreUsuario});
            const avatarImg = crearElemento('img', 'avatarImage', {
                src: userInfo.imagenPerfil,
                alt: userInfo.nombreUsuario
            });
            messageBlock.appendChild(userNameElem);
            messageContainer.appendChild(avatarImg);
        }

        const messageTextElem = crearElemento('p', null, {textContent: mensajeTexto});
        mensajeElem.appendChild(messageTextElem);
        manejarAdjunto(adjunto, mensajeElem);

        messageContainer.appendChild(mensajeElem);
        messageBlock.appendChild(messageContainer);

        if (insertAtTop) {
            listaMensajes.insertBefore(messageBlock, listaMensajes.firstChild);
        } else {
            listaMensajes.appendChild(messageBlock);
            listaMensajes.scrollTop = listaMensajes.scrollHeight;
        }
    }