Todos los componentes (204)

Mensaje de chat

IA · ChatMessage

Qué es y cuándo usarlo

Un mensaje de un chat con un asistente: la burbuja, quién lo dice, su pie y las acciones de siempre -copiar, regenerar, editar-.

Cuándo usarlo

En la conversación con un asistente, uno por turno, del usuario y de la respuesta.
Con el contenido que quieras: texto, el markdown ya pintado, un bloque de código, una llamada a herramienta.

Cuándo no

Para un hilo entre personas (soporte, comentarios de un pedido): es una Conversation.
Para un aviso del sistema fuera del hilo: es un Alert.

Teclado: las acciones son botones y salen al pasar el ratón o al enfocar dentro; en una pantalla táctil están siempre a la vista. Solo existen las que se piden (copyText, onRegenerate, onEdit), más las tuyas en actions (cancelar, reintentar, guardar como plantilla): se agrupan con las demás y salen igual. actionsVisibility="always" las deja siempre a la vista.

Editar en su sitio: con editor el contenido se sustituye por un editor (un TextArea con guardar y cancelar) dentro de la misma burbuja, que pasa a ser neutra y ocupa el ancho; las acciones se esconden mientras dura. Coincidencia de una búsqueda: highlighted marca el mensaje con un aro fijo -no una animación, que con movimiento reducido se perdería- y lo anuncia; quien busca lo lleva a la vista y lo apaga a los pocos segundos.

Accesibilidad: cada mensaje es un article con el nombre de quien lo dice, «Tú» o «Asistente» (o el author que se pase); el avatar es decorativo. Mientras se escribe se marca como ocupado y dice «Escribiendo». El error se marca con data-tone y un borde, no solo con el color. Copiar se anuncia con una región status.

Aspecto fino: variables CSS --amset-chat-message-max (ancho máximo de la burbuja), -gap, -bubble, -ink y -border. El markdown no se interpreta aquí: lo pinta quien usa el componente.

Cómo se ve

Asistente de pedidos

extracto-octubre.csv18,4 kB

¿Qué pedidos tengo pendientes esta semana?

listar_pedidos: Hecho

Tienes tres pedidos pendientes: el #1042, el #1043 y el #1047. El último tiene el pago sin revisar.

<ChatMessage from="user" copyText={pregunta}>
  <Attachment name="extracto-octubre.csv" size={18_400} status="done" compact />
  <p>{pregunta}</p>
</ChatMessage>

<ChatMessage
  from="assistant"
  avatar={<Avatar name="AMSET" size="sm" />}
  streaming={escribiendo}
  copyText={respuesta}
  onRegenerate={regenerar}
  meta={<UsageBadge tokens={1234} cost={0.03} />}
>
  <Reasoning durationMs={4200}>Primero miro los pedidos de esta semana…</Reasoning>
  <ToolCall name="listar_pedidos" status="success" input={consulta} output="3 pedidos" durationMs={850} />
  <p>{respuesta}</p>
</ChatMessage>

<Suggestions groups={sugerencias} onSelect={(respuestas) => enviar(respuestas[0].option)} />
<PromptInput label="Mensaje al asistente" busy={ocupado} onStop={parar} onSubmit={enviar} onFiles={adjuntar} />

Props

Se importa con import { ChatMessage } from '@amset/ui'. Las obligatorias van marcadas.

Prop	Tipo	Para qué sirve
`children`obligatoria	`ReactNode`	El contenido. Aqui no se interpreta markdown: se pinta lo que llegue.
`from`obligatoria	`ChatMessageFrom`	Quien lo escribe. Decide el lado, el color y el nombre que oye un lector.
`actions`	`ReactNode`	Mas acciones, detras de las de siempre: cancelar, reintentar, guardar como plantilla, automatizar. Son tuyas: `IconButton` con su `aria-label`. Se agrupan con copiar, regenerar y editar y salen igual.
`actionsVisibility`	`ChatMessageActionsVisibility`	Cuando se ven las acciones. Por defecto, al pasar el raton o enfocar dentro; con un dedo, siempre.
`author`	`string`	Como se llama quien escribe. Por defecto, «Tú» o «Asistente».
`avatar`	`ReactNode`	Su foto o su orbe. Es decorativo: el autor se dice con texto.
`className`	`string`	Se une a las clases de la biblioteca, no las sustituye.
`copyText`	`string`	El texto que se copia. Con esto aparece el boton de copiar.
`editor`	`ReactNode`	El mensaje se esta editando: aqui va el editor (un `TextArea` con guardar y cancelar) EN LUGAR del contenido, dentro de la misma burbuja, sin mover el mensaje de sitio. Las acciones se esconden mientras dura.
`highlighted`	`boolean`	Es la coincidencia de una busqueda: se marca un momento y se anuncia. Quien busca lleva el mensaje a la vista (`scrollIntoView` o `scrollTop`) y lo pone a `true` unos segundos.
`meta`	`ReactNode`	Debajo: la hora, los tokens, el motor.
`onEdit`	`() => void`	Con esto aparece «Editar mensaje».
`onRegenerate`	`() => void`	Con esto aparece «Regenerar respuesta».
`streaming`	`boolean`	Todavia se esta escribiendo: lleva un cursor al final y se marca como ocupado.
`tone`	`ChatMessageTone`	—

Acepta además los atributos del elemento que pinta: className, style, data-*, aria-* y sus eventos.

En el banco de pruebas

Cada estado y cada variante, para tocarlos de uno en uno, en su ficha de ui.amset.tech: