'/%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}
IA
Partes de una respuesta de IA
Lo que rodea a una respuesta: el razonamiento detrás, las herramientas que usó un agente, las fuentes con citas en el texto, y acciones para copiarla, regenerarla y calificarla.
import { ResponseActions, Reasoning, ToolCall, Sources, Citation } from '@alea/ui';
Ejemplos
Una respuesta
El razonamiento plegado con cuánto tardó, citas en el texto, las fuentes y las acciones. Califícala, cópiala o abre el razonamiento.
Pass your accent to brandVariables and put the result on the root1. Every semantic token follows, in dark, light and high contrast2, and the Figma kit uses the same variables3.
Fuentes
Pasos de un agente
Pasos de herramientas mientras un agente trabaja: cada uno corre y luego termina o falla, y su estado se anuncia. Abre un paso para ver qué entró y qué salió.
Entrada
Salida
Entrada
Salida
Entrada
Salida
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-accent-strong…--alea-accent-subtle…--alea-status-success…--alea-surface-hover…--alea-text…--alea-text-muted…
Radius
--alea-radius-sm…
Motion
--alea-motion-duration-fast…--alea-motion-ease-out…--alea-motion-scale-press…
Props
ResponseActions props
La fila bajo una respuesta: copiar (lo confirma), regenerar, y opinión buena o mala como botones de alternar.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
className | string | - | Clases extra. |
copyText | string | - | El texto que Copiar pone en el portapapeles. Omítelo para esconder Copiar. |
extra | ReactNode | - | Más botones al final: compartir, leer en voz alta. |
feedback | "good" | "bad" | null | - | La opinión actual (controlada). |
onFeedback | ((value: "good" | "bad" | null) => void) | - | Muestra los pulgares; se llama con la elección (null si se retira). |
onRegenerate | (() => void) | - | Muestra Regenerar. |
Reasoning props
El razonamiento del modelo, tras un botón de mostrar: "Pensando…" brilla mientras trabaja, luego "Pensó durante 4 s" y se pliega.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
childrenobligatoria | ReactNode | - | El razonamiento del modelo, como texto o nodos. |
className | string | - | Clases extra. |
defaultOpen | boolean | - | Abierto al principio. Por defecto: abierto mientras piensa, cerrado después. |
isThinking | boolean | - | Todavía pensando: la etiqueta brilla y el panel sigue abierto. |
seconds | number | - | Cuánto tiempo pensó, en segundos, mostrado al terminar. |
ToolCall props
Un paso de un agente: la herramienta, su estado (en curso gira, listo marca, error avisa) y, a pedido, qué entró y qué salió. Los cambios de estado se anuncian.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
nameobligatoria | string | - | El nombre de la herramienta: "Buscar en la web". |
statusobligatoria | "running" | "done" | "error" | - | running, done o error. |
className | string | - | Clases extra. |
icon | ReactNode | - | Un ícono para la herramienta. |
input | ReactNode | - | Lo que se envió a la herramienta, visible al expandir. |
output | ReactNode | - | Lo que volvió, visible al expandir. |
summary | ReactNode | - | Una línea corta: la búsqueda, el archivo. |
Sources props
Las fuentes detrás de una respuesta, numeradas igual que las citas del texto, cada una un enlace con su sitio.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
sourcesobligatoria | Source[] | - | |
className | string | - | Clases extra. |
Citation props
Una cita en el texto: un número pequeño que enlaza a su fuente y lleva como nombre el título de la fuente.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
nobligatoria | number | - | El número que se muestra, igual que en Sources. |
sourceobligatoria | Source | - | La fuente a la que apunta. |
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.
ResponseActions
- Variantes
feedbackgoodbadnull- Estados
- Hover (CSS)Pressed (CSS)Disabled
- 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-response-actions.alea-prompt-btn- Atributos data
data-done
Reasoning
- Estados
- Hover (CSS)Open
- Motion
- streamroute
- 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-reasoning.alea-reasoning-toggle.alea-reasoning-icon.alea-text-shimmer.alea-reasoning-chevron.alea-reasoning-panel.alea-reasoning-body- Atributos data
data-thinking
ToolCall
- Variantes
statusrunningdoneerror- Estados
- OpenHover (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-tool-icon.alea-tool-text.alea-tool-name.alea-tool-summary.alea-tool-status.alea-reasoning-chevron.alea-tool.alea-tool-head.alea-tool-panel.alea-tool-label.alea-tool-code- Atributos data
data-status=runningdata-status=donedata-status=error
Sources
- Estados
- Hover (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-sources.alea-sources-title.alea-sources-list.alea-source.alea-source-n.alea-source-text.alea-source-title.alea-source-host.alea-source-snippet
Citation
- Estados
- Hover (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-citation
Accesibilidad
- Reasoning y ToolCall son botones que muestran u ocultan (aria-expanded) sus paneles; Pensando brilla pero su texto es simple para los lectores de pantalla.
- Un paso de herramienta anuncia su estado cuando cambia (en curso, listo, falló), y el estado es una palabra, no solo el color de un ícono.
- Las citas son enlaces con el nombre Fuente 1: y el título, así tienen sentido fuera de contexto; Sources es una región con nombre y una lista numerada.
- Buena y mala son botones de alternar (aria-pressed); copiar y la opinión se confirman con un anuncio discreto.
Teclado
| Tecla | Acción |
|---|---|
| Tab | Pasa por los botones de mostrar, las citas, las fuentes y las acciones |
| Enter o Espacio | Abre o cierra el razonamiento y los detalles de una herramienta; pulsa una acción |
Qué hacer y qué evitar
Hacer
- Pliega el razonamiento cuando la respuesta esté lista: está ahí para quien lo quiera ver.
- Numera las citas en el orden en que aparecen las fuentes en la lista.
- Dale a cada herramienta un nombre que la gente entienda: Buscar en la web, no web_search_v2.
Evitar
- No escondas que una respuesta usó herramientas o fuentes.
- No pidas opinión de cada mensaje con un diálogo: los pulgares bastan.
En Figma
ResponseActions, Reasoning (Thinking, Done, Open), ToolCall (Running, Done, Error, Open), Sources y Citation.