Ficha
- Categoría
- Data display
- Nivel
- molécula
- Estado
- en revisión
- Radix
- no
- Actualizado
- 2026-10-26
- Figma
- 393:9664
- Fuente
design-system/componentes/ChatBubble.md
Un mensaje de una conversación. user = el ejecutivo (burbuja gris suave, a la derecha) · client = el cliente simulado (burbuja clara con el rótulo obligatorio «Cliente simulado · IA», DV-20 / R-01.21) · coach = Aithu Sales Coach (sin burbuja: isotipo + nombre en burgundy, DV-24, y el texto sobre el lienzo).
Cuándo usarlo
- Hilos de Inicio, del panel del coach y de la simulación. En la simulación, la pantalla pone la cara del cliente (Avatar image sm) a la izquierda de sus burbujas.
Cuándo NO usarlo
- Respuestas ricas del coach con contexto, ficha y siguientes pasos → se componen dentro del mensaje (Card, Badge, Chip); esto lleva solo texto.
Anatomía
<li>: user → burbuja radius-3x surface/neutral/03-soft, padding 8/12, ancho máximo ⅔ · client → burbuja surface/neutral/01-base con borde 04-tint, rótulo caption/md + texto body/sm · coach → cabecera (IsotipoCoach 32 + label/sm burgundy) y texto body/md.
Props
| Prop | Figma | Valores | Por defecto |
|---|---|---|---|
author | Author | user · client · coach | — |
message | Message | texto plano | — |
caption | — (override del texto del rótulo) | «Roberto · Cliente simulado · IA» | Cliente simulado · IA |
Estados
Sin estados. El «recién enviado» de Figma es el mismo componente.
Accesibilidad
- Cada mensaje es un
<li>de un<ol>; la pantalla envuelve la lista en<div role="log" aria-live="polite">(role=log sobre el<ol>le quitaría la semántica de lista: lo detecta axe). - El autor se anuncia antes del texto: rótulo visible en client y coach; «Tú:» solo para lectores de pantalla en user. El isotipo es decorativo.
Contenido
Texto plano, sin emojis (DV-03); el coach habla en primera persona y nunca inventa datos (AX-04).
Errores conocidos
- Ninguno medido (test
@R-01.21: el rótulo del cliente siempre presente).
Changelog
- 2026-10-26 · nace (T-02).
captionañadido porque Flow 1 › 03 antepone el nombre del cliente (R4: se agrega al componente, no se parchea en la pantalla).