// en esta funcion puedes omitir agregar el avatar para los usuarios que envian los mensajes, por si lo necesitas, hay una variable global que contiene el id del usuario actual 
    function agregarMensajeAlChat(mensajeTexto, clase, fecha, listaMensajes = document.querySelector('.listaMensajes'), fechaAnterior = null, insertAtTop = false, adjunto = null, temp_id = null, msgEmisor = null, isFirstMessageOfThread = false, userInfo = null) {
        const fechaMensaje = new Date(fecha);
    
        // Obtener la última fecha de un mensaje anterior si no se proporcionó una fechaAnterior
        if (!fechaAnterior) {
            fechaAnterior = obtenerFechaAnterior(listaMensajes, insertAtTop);
        }
    
        manejarFecha(fechaMensaje, fechaAnterior, listaMensajes, insertAtTop);
    
        // Crear el contenedor principal del mensaje
        const messageBlock = document.createElement('div');
        messageBlock.classList.add('messageBlock');
    
        // Agregar el nombre de usuario si es el primer mensaje del hilo
        if (isFirstMessageOfThread && userInfo) {
            const userNameElem = document.createElement('span');
            userNameElem.textContent = userInfo.nombreUsuario;
            userNameElem.classList.add('userName');
            messageBlock.appendChild(userNameElem);
        }
    
        // Crear el contenedor que agrupa el avatar y el mensaje
        const messageContainer = document.createElement('div');
        messageContainer.classList.add('messageContainer');
    
        // Agregar el avatar si es el primer mensaje del hilo
        if (isFirstMessageOfThread && userInfo) {
            const avatarImg = document.createElement('img');
            avatarImg.src = userInfo.imagenPerfil;
            avatarImg.alt = userInfo.nombreUsuario;
            avatarImg.classList.add('avatarImage');
            messageContainer.appendChild(avatarImg);
        }
    
        // Crear el contenedor del mensaje
        const mensajeElem = document.createElement('div');
        mensajeElem.classList.add('mensaje');
        mensajeElem.classList.add(clase);
        mensajeElem.setAttribute('data-fecha', fechaMensaje.toISOString());
    
        if (msgEmisor) mensajeElem.setAttribute('data-emisor', msgEmisor);
        if (temp_id) {
            mensajeElem.setAttribute('data-temp-id', temp_id);
            mensajeElem.classList.add('mensajePendiente');
        }
    
        // Añadir el texto del mensaje
        const messageTextElem = document.createElement('p');
        messageTextElem.textContent = mensajeTexto;
        mensajeElem.appendChild(messageTextElem);
    
        manejarAdjunto(adjunto, mensajeElem);
    
        // Agregar el mensaje al contenedor del mensaje
        messageContainer.appendChild(mensajeElem);
    
        // Agregar el contenedor del mensaje al bloque principal
        messageBlock.appendChild(messageContainer);
    
        // Insertar el bloque del mensaje en la lista
        if (insertAtTop) {
            listaMensajes.insertBefore(messageBlock, listaMensajes.firstChild);
        } else {
            listaMensajes.appendChild(messageBlock);
            listaMensajes.scrollTop = listaMensajes.scrollHeight; // Auto-scroll hacia abajo
        }
    }

Te doy mas contexto

    async function mostrarMensajes(mensajes, contenedor = null) {
        const listaMensajes = contenedor ? contenedor.querySelector('.listaMensajes') : document.querySelector('.listaMensajes');

        if (!listaMensajes) {
            console.error('No se encontró el contenedor de mensajes.');
            return;
        }
        listaMensajes.innerHTML = '';
        if (mensajes.length === 0) {
            const mensajeVacio = document.createElement('p');
            mensajeVacio.textContent = 'Aún no hay mensajes';
            mensajeVacio.classList.add('mensajeVacio');
            listaMensajes.appendChild(mensajeVacio);
            return;
        }

        // **Nuevo código para obtener información de los usuarios**
        const uniqueRemitentes = [...new Set(mensajes.map(mensaje => mensaje.remitente))];
        const userInfos = await obtenerInfoUsuarios(uniqueRemitentes);

        let fechaAnterior = null;
        let prevEmisor = null;
        mensajes.forEach(mensaje => {
            const isFirstMessageOfThread = mensaje.remitente !== prevEmisor;
            prevEmisor = mensaje.remitente;

            // Obtenemos la información del usuario
            const userInfo = userInfos.get(mensaje.remitente);

            agregarMensajeAlChat(mensaje.mensaje, mensaje.clase, mensaje.fecha, listaMensajes, fechaAnterior, false, mensaje.adjunto, (temp_id = null), mensaje.remitente, isFirstMessageOfThread, userInfo);
            fechaAnterior = new Date(mensaje.fecha);
        });
    }


    async function chatColab() {
        const chatColabElements = document.querySelectorAll('.bloqueChatColab');

        chatColabElements.forEach(async chatColabElement => {
            const postId = chatColabElement.dataset.postId;
            if (!postId) {
                console.error('El elemento no tiene data-post-id.');
                return;
            }
            currentPage = 1;

            try {
                const data = await enviarAjax('obtenerChatColab', {colab_id: postId, page: currentPage});

                if (data?.success) {
                    mostrarMensajes(data.data.mensajes, chatColabElement);
                    manejarScrollColab(data.data.conversacion, chatColabElement);

                    const listaMensajes = chatColabElement.querySelector('.listaMensajes');
                    if (listaMensajes) {
                        listaMensajes.scrollTop = listaMensajes.scrollHeight;
                    }
                } else {
                    console.error('Error al obtener la conversación colab:', data.message);
                }
            } catch (error) {
                console.error('Error al obtener la conversación colab:', error);
            }
        });
    }