Chat & Messaging UI

Los mensajes recibidos se alinean a la izquierda con avatar, los propios a la derecha sin avatar. Agrupar mensajes consecutivos del mismo remitente reduce ruido visual y libera espacio vertical. Mostrar timestamp solo cuando pasan 5 o más minutos entre mensajes, centrado como separador.

Tres puntos con animación de bounce secuencial indican que alguien escribe. Mostrar quien escribe ("Maria esta escribiendo..."). Auto-dismiss a los 30 segundos si no llega mensaje. El indicador debe aparecer dentro de una burbuja alineada a la izquierda, con el mismo aspecto visual que un mensaje recibido.

Tres estados progresivos: enviado (check simple), entregado (doble check), leido (doble check en color accent). El tooltip con hora exacta al hover completa la información sin saturar la interfaz. Esta progresión visual reduce la ansiedad del remitente sin necesidad de texto adicional.

Pill pequeño con circulo de color representando la reacción más un contador al pie del mensaje. El picker aparece en hover o long-press. Máximo 6 reacciones visibles. Más alla de 6, agrupar con "+N" para mantener la densidad controlada.

Las imagenes muestran preview en miniatura inline. Los documentos muestran icono más nombre más tamaño. La carga muestra barra de progreso con porcentaje. Diferenciar visualmente entre tipos de adjunto facilita el escaneo y genera confianza durante la subida.

Referencia visual al mensaje original con barra lateral en color accent más texto truncado. Click para navegar al mensaje original. El bloque de cita debe diferenciarse del contenido de respuesta para que el ojo distinga inmediatamente que hay contexto previo.

Campo de busqueda sticky, highlight amarillo en términos coincidentes, navegación prev/next entre resultados con contador. El usuario debe poder localizar cualquier mensaje previo sin tener que hacer scroll manual por cientos de mensajes.

Punto de color junto al avatar: verde para activo, amarillo para ausente, gris para offline. Texto "Última vez hace 3m" para usuarios no activos. La presencia reduce la fricción de comunicación al establecer expectativas de respuesta antes de enviar un mensaje.