turns-00031.parquet:47949
f3dc6fbd952581352f637018degenerate_repetitionAbsentFinal dense release
USER
.task
[ ] El span de time al cargar mas mensajes suele repetirse
Tengo un problema
inicialmente el mensaje que se estable para poner el avatar, inicialmente la info del usuario se colaca en el primer mensaje del hilo, pero despues de cargar mas mensaje, esta logica parece funcionar al revés, tal vez porque los mensajes se invierte, y se necesita asi al hacer scroll supongo porque los mensajes si cargan en el orden correcto pero la info del usuario despues dacargar mas mensajes no se adapta correctamente
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.');
}
const mensajes = data.data.mensajes.reverse();
const remitentesUnicos = [...new Set(mensajes.map(m => m.remitente))];
const userInfos = await obtenerInfoUsuarios(remitentesUnicos);
let fechaAnterior = null,
prevEmisor = null;
mensajes.forEach(mensaje => {
const esNuevoHilo = mensaje.remitente !== prevEmisor;
prevEmisor = mensaje.remitente;
const userInfo = userInfos.get(mensaje.remitente);
agregarMensajeAlChat(mensaje.mensaje, mensaje.clase, mensaje.fecha, listaMensajes, fechaAnterior, true, mensaje.adjunto, null, mensaje.remitente, esNuevoHilo, userInfo, 'Colab');
fechaAnterior = new Date(mensaje.fecha);
});
listaMensajes.querySelector('li')?.scrollIntoView();
}
});
}
codigos de referencias
async function obtenerInfoUsuarios(userIds) {
const userInfos = new Map();
await Promise.all(
userIds.map(async userId => {
try {
const data = await enviarAjax('infoUsuario', {receptor: userId});
if (data?.success) {
const imagenPerfil = data.data.imagenPerfil || 'https://i0.wp.com/2upra.com/wp-content/uploads/2024/05/perfildefault.jpg?quality=40&strip=all';
const nombreUsuario = data.data.nombreUsuario || 'Usuario Desconocido';
userInfos.set(userId, {imagenPerfil, nombreUsuario});
} else {
console.error('Error al obtener información del usuario:', data.message);
userInfos.set(userId, {imagenPerfil: 'default.jpg', nombreUsuario: 'Usuario Desconocido'});
}
} catch (error) {
console.error('Error al obtener información del usuario:', error);
userInfos.set(userId, {imagenPerfil: 'default.jpg', nombreUsuario: 'Usuario Desconocido'});
}
})
);
return userInfos;
}
async function mostrarMensajes(mensajes, contenedor = null, tipoMensaje = 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;
}
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;
const userInfo = userInfos.get(mensaje.remitente);
agregarMensajeAlChat(mensaje.mensaje, mensaje.clase, mensaje.fecha, listaMensajes, fechaAnterior, false, mensaje.adjunto, null, mensaje.remitente, isFirstMessageOfThread, userInfo, tipoMensaje);
fechaAnterior = new Date(mensaje.fecha);
});
}
ASSISTANT
It looks like the issue stems from how you process and display incoming messages when loading older messages by scrolling up. The `prevEmisor` (previous sender) variable is crucial in determining whether to display the user info (like the avatar) for a message. If `prevEmisor` isn't properly set when loading more messages, the logic that determines whether a message is the start of a new thread (and thus needs user info displayed) can become inverted or incorrect.
Here's how you can fix the problem:
1. **Remove the reverse on the messages array**: By reversing the messages array (`const mensajes = data.data.mensajes.reverse();`), you're processing the messages in reverse chronological order, which can mess up the `prevEmisor` logic when prepending messages at the top. Instead, process the messages as they come from the server, assuming they're in chronological order from oldest to newest.
2. **Initialize `prevEmisor` and `fechaAnterior` based on the existing messages**: Before processing the new messages, you should set `prevEmisor` and `fechaAnterior` to reflect the current state of the chat window. This means grabbing the sender and date from the first message currently displayed.
Here's how you can adjust your `manejarScrollColab` function:
```javascript
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.');
}
const mensajes = data.data.mensajes; // Do not reverse the messages
const remitentesUnicos = [...new Set(mensajes.map(m => m.remitente))];
const userInfos = await obtenerInfoUsuarios(remitentesUnicos);
// Initialize fechaAnterior and prevEmisor based on the first message currently displayed
let fechaAnterior = null,
prevEmisor = null;
const firstMessageElement = listaMensajes.querySelector('li');
if (firstMessageElement) {
prevEmisor = firstMessageElement.getAttribute('data-remitente') || null;
fechaAnterior = new Date(firstMessageElement.getAttribute('data-fecha')) || null;
}
mensajes.forEach(mensaje => {
const esNuevoHilo = mensaje.remitente !== prevEmisor;
prevEmisor = mensaje.remitente;
const userInfo = userInfos.get(mensaje.remitente);
agregarMensajeAlChat(
mensaje.mensaje,
mensaje.clase,
mensaje.fecha,
listaMensajes,
fechaAnterior,
true, // Assuming this flag means to prepend the message
mensaje.adjunto,
null,
mensaje.remitente,
esNuevoHilo,
userInfo,
'Colab'
);
fechaAnterior = new Date(mensaje.fecha);
});
// Adjust scroll position to maintain continuity
const firstNewMessage = listaMensajes.querySelector('li[data-loaded="true"]');
if (firstNewMessage) {
firstNewMessage.scrollIntoView();
}
}
});
}
```
**Additional Notes**:
- **Processing Messages in Correct Order**: It's important to process the messages in chronological order (from oldest to newest) to ensure that `prevEmisor` is updated correctly. This way, when you compare `mensaje.remitente` with `prevEmisor`, it accurately reflects whether the sender has changed compared to the previous message.
- **Setting Data Attributes**: In your `agregarMensajeAlChat` function (which isn't shown), make sure that when you create each message element (usually an `<li>`), you set `data-remitente` and `data-fecha` attributes. This will allow you to retrieve the sender and date when initializing `prevEmisor` and `fechaAnterior`.
For example:
```javascript
function agregarMensajeAlChat(mensaje, clase, fecha, listaMensajes, fechaAnterior, prepend = false, adjunto, extraParam, remitente, esNuevoHilo, userInfo, tipoMensaje) {
// ... existing code to create the message element
const messageElement = document.createElement('li');
messageElement.setAttribute('data-remitente', remitente);
messageElement.setAttribute('data-fecha', fecha);
// ... rest of your code
}
```
- **Adjust Scrolling**: After loading more messages and prepending them to the chat window, you might need to adjust the scroll position to prevent the view from jumping. This can be done by scrolling to the first new message after they've been added, as shown in the adjusted code.
By making these adjustments, your logic for displaying user info should now correctly handle loading more messages without inverting or misplacing the avatars and names. The key is ensuring that the `prevEmisor` variable accurately reflects the immediate previous sender relative to each message, even when messages are dynamically loaded and prepended to the chat.
Let me know if you need further clarification or assistance with this solution!