'/%3e%3cg%20transform='translate(170%20205)%20scale(0.3606)'%20fill='%23111011'%3e%3cpath%20d='M497%20640H359L248%20320%20122%20640H0L256%200z'/%3e%3cpath%20d='M292.43%20640H200.8L248%20522z'/%3e%3cpath%20d='M335%200h138l111%20320L710%200h122L576%20640z'/%3e%3c/g%3e%3c/svg%3e){kind=small}
Datos
Chat
Conversaciones: mensajes en burbujas o simples, rachas del mismo autor, separadores por día, una línea de Mensajes nuevos, estados de entrega, reacciones, enlaces a hilos, acciones al pasar el mouse y un indicador de escritura.
import { MessageList, ChatMessage, ReactionBar, TypingIndicator } from '@alea/ui';
Ejemplos
Conversación
Un MessageList con separadores por día, rachas del mismo autor, una línea de Mensajes nuevos, estados de entrega, reacciones y un enlace a un hilo. Envía un mensaje para ver cómo sigue al más nuevo.
Mensaje, reacciones y escritura por separado
ChatMessage en burbuja y simple, un mensaje fallido, ReactionBar con el selector, y TypingIndicator para una, dos o muchas personas.
Tokens
Los tokens de diseño que usa este componente, con su valor en el tema actual. Cambia cualquiera para darle otro estilo.
Color
--alea-border…--alea-focus…--alea-status-danger…--alea-text-muted…
Space
--alea-space-1…--alea-space-2…--alea-space-3…--alea-space-4…--alea-space-5…
Radius
--alea-radius-md…
Type
--alea-font-family-body…--alea-font-size-xs…--alea-font-weight-semibold…
Props
MessageList props
Una conversación: separadores por día (Hoy, Ayer, una fecha), rachas del mismo autor, una línea de Mensajes nuevos, un indicador de escritura, y un scroll que sigue a los mensajes nuevos. Una región de registro, así los lectores de pantalla escuchan los mensajes nuevos al llegar.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
messagesobligatoria | ChatItem[] | - | Los mensajes, del más viejo al más nuevo. |
aria-label | string | - | Nombre para lectores de pantalla. Por defecto "Mensajes". |
className | string | - | Clases extra. |
firstUnreadId | string | - | Id del primer mensaje sin leer: aparece una línea de "Mensajes nuevos" encima. |
groupMinutes | number | 5 | Los mensajes del mismo autor dentro de esta cantidad de minutos forman una racha (sin repetir avatar ni nombre). Por defecto 5. |
height | string | number | 420 | Altura de la lista con scroll; empieza en el mensaje más nuevo y sigue a los nuevos mientras estás abajo. |
onOpenThread | ((messageId: string) => void) | - | Se llama al presionar un enlace de hilo. |
onReact | ((messageId: string, emoji: string) => void) | - | Se llama cuando se alterna una reacción en un mensaje. |
renderActions | ((m: ChatItem) => ReactNode) | - | Acciones extra por mensaje, mostradas con hover y foco. |
typing | string[] | - | Quién está escribiendo, mostrado al final. |
variant | "bubble" | "plain" | 'bubble' | bubble (por defecto) o plain. |
ChatMessage props
Un mensaje en una conversación: avatar y nombre (ocultos dentro de una racha), una burbuja o texto simple, hora, estado de entrega, editado, reacciones, un enlace al hilo y acciones al pasar el mouse.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
authorobligatoria | string | - | Quién lo escribió. |
childrenobligatoria | ReactNode | - | El mensaje: texto, o cualquier cosa (imágenes, archivos, tarjetas). |
actions | ReactNode | - | Acciones que aparecen con hover y foco: responder, reaccionar, más (IconButtons pequeños). |
avatarSrc | string | - | Su foto. |
className | string | - | Clases extra. |
isEdited | boolean | - | Lo marca como editado. |
isGrouped | boolean | - | Parte de una racha del mismo autor: oculta el avatar y el nombre. |
isOwn | boolean | - | Escrito por la persona actual: del lado final, en la burbuja de acento. |
onOpenThread | (() => void) | - | Abre el hilo. |
onReact | ((emoji: string) => void) | - | Se llama cuando se alterna una reacción; con esto, las reacciones tienen un botón de agregar. |
reactions | Reaction[] | - | Reacciones bajo la burbuja. |
replyCount | number | - | Cantidad de respuestas en su hilo, mostrada como enlace. |
status | "sending" | "sent" | "delivered" | "read" | "failed" | - | Estado de entrega de los mensajes propios: sending, sent, delivered, read o failed. |
time | Date | - | Cuándo se envió: se muestra como hora corta, con la fecha completa con hover. |
variant | "bubble" | "plain" | 'bubble' | bubble (por defecto) o plain (sin burbuja, ancho completo, como un canal). |
ReactionBar props
Reacciones con emoji bajo un mensaje o un comentario: cada una es una alternancia con su cantidad, y el botón de agregar abre un EmojiPicker.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
onToggleobligatoria | (emoji: string) => void | - | Se llama cuando alguien alterna una reacción (una existente, o una nueva desde el selector). |
reactionsobligatoria | Reaction[] | - | Las reacciones hasta ahora. |
allowAdd | boolean | true | Muestra el botón de agregar que abre el selector de emojis. Por defecto true. |
className | string | - | Clases extra. |
size | "sm" | "md" | 'md' | sm (24 px) o md (28 px, por defecto). |
TypingIndicator props
"Ana está escribiendo" con tres puntos que rebotan. Se anuncia una vez, de forma polite, cuando aparece; los puntos son decoración y se detienen con movimiento reducido.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
namesobligatoria | string[] | - | Quién está escribiendo. Vacío lo oculta. |
className | string | - | Clases extra. |
Especificaciones
Generado desde el código: las variantes de los tipos, los estados y tokens del CSS, y los patrones de motion que aplican. Las grillas muestran el componente real en ambos temas; los números se miden en la página.
MessageList
- Variantes
variantbubbleplain- Estados
- Keyboard focus
- Oscuro y claro
- Cada color viene de tokens del tema, así que sigue a data-theme (y a presets como Graphite) en la página o en cualquier contenedor. El contraste se revisa en ambos temas.
- Clases para estilos
.alea-msglist.alea-msglist-day.alea-msglist-new
ChatMessage
- Variantes
statussendingsentdeliveredreadfailedvariantbubbleplain- Estados
- Hover (CSS)Focus inside
- Oscuro y claro
- Cada color viene de tokens del tema, así que sigue a data-theme (y a presets como Graphite) en la página o en cualquier contenedor. El contraste se revisa en ambos temas.
- Clases para estilos
.alea-msg.alea-msg-avatar.alea-msg-main.alea-msg-head.alea-msg-author.alea-msg-time.alea-msg-body.alea-msg-bubble.alea-msg-actions.alea-msg-meta.alea-msg-status.alea-msg-thread- Atributos data
data-groupeddata-variant=bubbledata-variant=plaindata-status=readdata-status=faileddata-status=sendingdata-own
ReactionBar
- Variantes
sizesmmd- Estados
- Hover (CSS)Pressed (CSS)
- Oscuro y claro
- Cada color viene de tokens del tema, así que sigue a data-theme (y a presets como Graphite) en la página o en cualquier contenedor. El contraste se revisa en ambos temas.
- Clases para estilos
.alea-reactions.alea-reaction.alea-reaction-count.alea-reaction-add.alea-emoji-popover- Atributos data
data-size=sm
TypingIndicator
- Oscuro y claro
- Cada color viene de tokens del tema, así que sigue a data-theme (y a presets como Graphite) en la página o en cualquier contenedor. El contraste se revisa en ambos temas.
- Clases para estilos
.alea-typing.alea-typing-dots.alea-typing-text
Accesibilidad
- MessageList es una región de registro: los lectores de pantalla anuncian los mensajes nuevos a medida que llegan, sin mover el foco.
- La lista recibe el foco como una sola parada, así se puede desplazar con el teclado; las acciones dentro de cada mensaje se alcanzan con Tab.
- Cada mensaje es un article con su autor y su hora como nombre; los estados de entrega son palabras, no solo íconos.
- Las reacciones son botones de alternancia que dicen el emoji, la cantidad y si reaccionaste.
- Las acciones de hover también aparecen con el foco de teclado y quedan visibles en pantallas táctiles.
- El indicador de escritura es un estado polite; sus puntos son decoración y se detienen con movimiento reducido.
Teclado
| Tecla | Acción |
|---|---|
| Tab | Entra a la lista, luego recorre las acciones y reacciones de cada mensaje |
| Flechas | Desplazan la lista cuando tiene foco |
| Espacio o Enter | Alterna una reacción o abre el selector |
Qué hacer y qué evitar
Hacer
- Agrupa las rachas del mismo autor para que las conversaciones largas se lean bien.
- Muestra la línea de Mensajes nuevos cuando la gente vuelve a una conversación.
- Limita las acciones de hover a tres o cuatro: responder, reaccionar, más.
Evitar
- No dependas solo de los íconos de check para la entrega: las palabras de estado están para eso.
- No hagas scroll automático cuando la gente subió a leer; la lista solo sigue los mensajes nuevos mientras está abajo.
- No pongas formularios largos dentro de un mensaje: enlázalos.
En Figma
ChatMessage con Own, Grouped, Variant (Bubble, Plain) y Status; ReactionBar y TypingIndicator como componentes aparte.