'/%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
PromptInput
El cuadro de mensaje de un asistente: crece con el texto, Enter envía, el botón Enviar se vuelve Detener mientras se genera una respuesta, y las sugerencias dan un punto de partida.
import { PromptInput, PromptSuggestions } from '@alea/ui';
Ejemplos
Asistente
Una conversación completa hecha con las piezas: sugerencias para empezar, el campo de mensaje, el razonamiento que se pliega, un paso de herramienta, una respuesta que llega por partes con citas y fuentes, y acciones debajo. Elige una sugerencia o escribe una pregunta.
How can I help?
Archivos, un modelo y estados
header contiene los archivos adjuntos; tools contiene un selector de modelo y botones, junto a Enviar. Activa Generando para ver Detener y el brillo; Desactivado lo bloquea.
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…--alea-accent-on…--alea-accent-solid…--alea-accent-strong…--alea-accent-subtle…--alea-border-control…--alea-chart-2…--alea-field-bg…--alea-focus-halo…--alea-status-success…--alea-surface-hover…--alea-surface-raised…--alea-text…--alea-text-faint…--alea-text-muted…
Space
--alea-space-1…--alea-space-2…
Radius
--alea-radius-lg…--alea-radius-sm…
Type
--alea-font-family-body…--alea-font-size-md…--alea-font-size-xs…
Motion
--alea-motion-duration-fast…--alea-motion-ease-emphasized…--alea-motion-ease-out…--alea-motion-scale-press…
Component
--alea-prompt-angle…
Props
PromptInput props
El cuadro de mensaje de un asistente: crece con el texto, Enter envía y Shift+Enter añade una línea, un botón Enviar que se vuelve Detener mientras se genera una respuesta, un espacio para archivos arriba y herramientas abajo. El borde brilla mientras trabaja.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
className | string | - | Clases extra. |
clearOnSubmit | boolean | true | Borra el texto después de enviar. Por defecto true. |
defaultValue | string | '' | El texto al principio. |
header | ReactNode | - | Contenido sobre el texto: archivos adjuntos, un mensaje citado. |
isDisabled | boolean | - | Desactiva escribir y enviar. |
isGenerating | boolean | - | Se está generando una respuesta: el botón de enviar se vuelve Detener, y el borde brilla. |
label | ReactNode | - | Etiqueta visible; sin ella el campo se llama "Mensaje". |
maxRows | number | 8 | Líneas antes de que tenga scroll. Por defecto 8. |
onAttach | (() => void) | - | Muestra un botón de clip; se llama al pulsarlo (abre ahí tu selector de archivos). |
onChange | ((value: string) => void) | - | Se llama con cada cambio. |
onStop | (() => void) | - | Se llama con el botón Detener. |
onSubmit | ((value: string) => void) | - | Se llama con el texto al pulsar Enter o el botón de enviar. El texto vacío nunca se envía. |
placeholder | string | - | Se muestra mientras está vacío. |
showHint | boolean | - | Muestra bajo el campo la pista de Enter y Shift+Enter. Por defecto false. |
tools | ReactNode | - | Contenido al inicio de la fila de abajo: un selector de modelo, botones de herramientas. |
value | string | - | El texto (controlado). |
PromptSuggestions props
Puntos de partida para una conversación, como chips o tarjetas. Cada uno es un botón; entran uno tras otro.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
itemsobligatoria | PromptSuggestion[] | - | |
onSelectobligatoria | (prompt: string, item: PromptSuggestion) => void | - | Se llama con el texto a enviar. |
className | string | - | Clases extra. |
variant | "chips" | "cards" | 'chips' | chips (por defecto) para una fila bajo el campo, o cards para una conversación vacía. |
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.
PromptInput
- Estados
- Focus insideHover (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-prompt.alea-prompt-box.alea-prompt-header.alea-prompt-input.alea-prompt-row.alea-prompt-btn.alea-prompt-tools.alea-prompt-send.alea-prompt-hint- Atributos data
data-generatingdata-donedata-stop
PromptSuggestions
- Variantes
variantchipscards- 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-suggestions.alea-suggestion.alea-suggestion-icon.alea-suggestion-text.alea-suggestion-label.alea-suggestion-desc- Atributos data
data-variant=cards
Accesibilidad
- El campo de texto tiene nombre (Mensaje por defecto) y dice que Enter envía cuando showHint está activo.
- Enviar está desactivado mientras el campo está vacío; mientras se genera una respuesta se vuelve un botón Detener con nombre, y se anuncia Generando una respuesta.
- Las sugerencias son una lista de botones con nombre; el brillo alrededor del campo es decorativo y se queda quieto con movimiento reducido.
Teclado
| Tecla | Acción |
|---|---|
| Enter | Envía |
| Shift+Enter | Línea nueva |
| Tab | Pasa por adjuntar, las herramientas y Enviar o Detener |
Qué hacer y qué evitar
Hacer
- Pon el selector de modelo o de modo en tools, junto a Enviar.
- Muestra sugerencias en una conversación vacía, y escóndelas cuando la gente empiece a escribir.
- Mantén Detener disponible todo el tiempo que se genera una respuesta.
Evitar
- No envíes con Enter en un campo pensado para textos largos: usa TextArea y un botón.
- No borres lo que la gente escribió si el envío falla: pon clearOnSubmit en false y bórralo tú.
En Figma
PromptInput con State (Empty, Typing, Generating, Disabled) y espacios para la cabecera y las herramientas; PromptSuggestions con Variant (Chips, Cards).