ChatMessage
Burbuja de un hilo de chat, del usuario o del asistente.
Usar
import {
ChatMessage,
TypingIndicator,
} from "@unozero-ai/ui/react";
<ChatMessage></ChatMessage>Huésped y asistente
sender="user" va a la derecha, en el color de marca y elevado; sender="assistant", el valor por defecto, va a la izquierda, plano, con borde y avatar. Cada burbuja es sombra o borde, nunca las dos (la Regla del O Uno o el Otro). timestamp es texto ya formateado: el componente no sabe de zonas horarias. En el kit React se llamaba role; aquí es sender, porque role en un elemento HTML es su rol ARIA.
Mensajes con estado
success y warning no tiñen la burbuja: el estado va en una etiqueta con icono y palabra en la cabecera, con el texto de header. Así el estado se lee aunque el tenant cambie la paleta (la Regla del Tenant). Resérvalos para los mensajes que cambian algo: una reserva hecha, un pago que vence.
Cabecera y autor
Con la variante por defecto, header es una etiqueta neutra que dice de dónde sale el mensaje: una nota de voz transcrita, una respuesta tomada de la base de conocimiento. Es contexto para el equipo del hotel, no un estado. author es nuevo: nombra a quien escribe, en negrita sobre el texto, para cuando una persona del equipo toma la conversación que llevaba el asistente.
Estado de entrega
Nuevo en este kit. status dice si el mensaje salió, junto a la hora: un reloj mientras se envía (sending), un check al salir (sent), dos al llegar (delivered) y dos plenos al leerse (read). La forma cambia en cada paso, así que no depende del color, y el lector de pantalla oye la palabra. failed pone «No se envió» en rojo debajo de la burbuja; el botón de reintentar no viene en el componente, lo pones tú. Los textos salen de setLabels (messageSending, messageFailed…).
Un hilo
index escalona la entrada de cada burbuja 40 ms para que un hilo no aparezca de golpe. El contenido ahora es un slot: además de texto, que respeta sus saltos de línea, admite elementos. Una Markdown dentro del mensaje del asistente pinta negritas y listas, algo que el kit React no permitía porque envolvía el contenido en un párrafo. Úsala solo en las burbujas del asistente: sus enlaces van en el color de marca y no se leen sobre la del huésped. TypingIndicator cierra el hilo mientras el asistente prepara la respuesta y su label se anuncia.
API
Generada del custom-elements.json que publica @unozero-ai/ui. Las partes se estilan desde tu CSS con el nombre del elemento: uz-button::part(base).