Todos los componentes (204)

Entrada de prompt

IA · PromptInput

Qué es y cuándo usarlo

La caja donde se escribe a un asistente: crece con el texto, envía con Intro, admite ficheros pegados, arrastrados o elegidos, y mientras hay una respuesta en marcha el botón de enviar pasa a ser el de parar.

Cuándo usarlo

Como entrada de un chat con un asistente, de una línea a un mensaje largo.
Con adjuntos y una barra de herramientas propia (el modelo, los atajos, la voz).
Con un asistente que puede seguir trabajando mientras escribes: busyModes deja elegir qué hacer con el mensaje (añadirlo al turno, parar y corregir, encolarlo).

Cuándo no

Para un campo de formulario de varias líneas: es un TextArea.
Para una búsqueda: es un SearchField.

Teclado: Intro envía y Mayús+Intro baja de línea (con submitOn="mod-enter" es al revés y con Ctrl o Cmd). Mientras se compone con un IME, Intro no envía. Con el campo vacío, la flecha arriba recupera lo último enviado (recall). Pegar un fichero lo entrega a onFiles en vez de pegarlo.

Mientras responde: sin busyModes, busy bloquea el envío y el botón pasa a ser «Parar» (si hay onStop). Con busyModes sí se envía: sale una fila de opciones sobre el campo -radios de verdad, con las flechas y el tabulador único del navegador- y onSubmit recibe la elegida en su segundo argumento ({ mode }). «Parar» pasa a estar al lado de «Enviar». busyMode/defaultBusyMode la gobiernan, busyLabel cambia el rótulo.

Para integrarlo en un chat real: inputRef entrega el campo para enfocarlo desde fuera; actions añade botones a la derecha (voz, variables, más acciones); onPasteText permite decidir qué pasa con un texto pegado enorme (devolviendo true no se pega: se adjunta como fichero, por ejemplo); onInputKeyDown corre antes que las teclas de la caja y, si hace preventDefault(), la caja no hace lo suyo; inputProps deja pasar spellCheck, lang, autoFocus, maxLength...; attachDisabled apaga el clip cuando se acaba el cupo de ficheros.

Accesibilidad: el campo lleva el nombre que se pase en label (obligatorio) y el formulario se marca como ocupado mientras hay una respuesta en marcha. El botón de enviar queda apagado sin texto, y el de parar tiene su propio nombre. Soltar ficheros se avisa también con texto.

Aspecto fino: variables CSS --amset-prompt-input-max-rows (cuántas líneas crece antes de desplazarse) y --amset-prompt-input-pad.

Cómo se ve

<PromptInput
  label="Mensaje"
  placeholder="Escribe a tu asistente…"
  onSubmit={(texto) => enviar(texto)}
/>

Props

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

Prop	Tipo	Para qué sirve
`label`obligatoria	`string`	Que es el campo, para quien no lo ve: «Mensaje». Obligatorio: un campo sin nombre no se puede usar con lector de pantalla ni con control por voz.
`onSubmit`obligatoria	`(value: string, context: PromptSubmitContext) => void`	Se llama al enviar, con el texto tal cual y, de segundo argumento, como se envia (`mode`). Sin `value`, el campo se vacia solo; con `value`, vaciarlo es cosa de quien lo controla.
`accept`	`string`	Que tipos admite el selector de ficheros: `image/*,.pdf`.
`actions`	`ReactNode`	Lo que va a la derecha, justo antes del boton de enviar: la voz, las variables, un menu de mas acciones.
`allowEmpty`	`boolean`	Permite enviar sin texto (con solo un adjunto). Por defecto, no.
`attachDisabled`	`boolean`	Se acabo el cupo de ficheros: el clip se apaga. Los pegados y soltados los limita quien recibe `onFiles`.
`attachments`	`ReactNode`	Los adjuntos ya puestos, encima del campo.
`busy`	`boolean`	Hay una respuesta en marcha: no se envia, y si hay `onStop` el boton pasa a ser «Parar». Con `busyModes` si se envia -de la forma que se elija- y «Parar» sale al lado del boton de enviar.
`busyLabel`	`string`	El rotulo de la fila de opciones: «AMSET esta trabajando. Tu mensaje:». Por defecto, uno generico.
`busyMode`	`string`	La forma elegida, gobernada desde fuera.
`busyModes`	`readonly PromptBusyMode[]`	Formas de enviar mientras hay una respuesta en marcha. Con esto, `busy` no bloquea el envio: aparece una fila de opciones encima del campo y `onSubmit` recibe la elegida. Sin esto, mientras responde no se envia.
`busyModeScope`	`string`	Cuando cambia, la forma de enviar elegida vuelve a la de por defecto: un turno nuevo, por ejemplo. Hace falta porque «Parar y corregir» destruye trabajo y no debe quedarse puesto de un turno al siguiente.
`className`	`string`	Se une a las clases de la biblioteca, no las sustituye.
`defaultBusyMode`	`string`	La forma elegida al empezar. Por defecto, la primera.
`defaultValue`	`string`	—
`disabled`	`boolean`	—
`history`	`readonly string[]`	Lo enviado antes, del mas viejo al mas nuevo: con el campo vacio la flecha arriba recorre hacia atras y la flecha abajo vuelve hacia delante hasta lo que se estaba escribiendo. Si esta, manda sobre `recall`.
`inputProps`	`PromptInputFieldProps`	Atributos del campo que la caja no gobierna: `spellCheck`, `lang`, `autoFocus`, `maxLength`...
`inputRef`	`Ref<HTMLTextAreaElement>`	El `<textarea>`, para enfocarlo desde fuera (tras elegir una plantilla, al cerrar una busqueda).
`onBusyModeChange`	`(mode: string) => void`	—
`onChange`	`(value: string) => void`	—
`onFiles`	`(files: readonly File[]) => void`	Pegar o arrastrar ficheros, o elegirlos con el clip. Con esto aparece el boton de adjuntar.
`onInputKeyDown`	`(event: KeyboardEvent<HTMLTextAreaElement>) => void`	Una tecla antes que las de la caja. Si la llamada hace `preventDefault()`, la caja no hace lo suyo (enviar, recuperar lo ultimo): sirve para atajos propios, como Escape para parar o Ctrl+K.
`onPasteText`	`(text: string) => boolean`	Se llama al pegar TEXTO. Si devuelve `true`, lo ha gestionado quien llama y no se pega: es lo que hace un chat con un texto larguisimo, que prefiere adjuntarlo como fichero antes que dejarlo dentro del campo.
`onStop`	`() => void`	—
`pastedFileName`	`(file: File, index: number) => string`	El nombre de un fichero PEGADO. Los navegadores llaman `image.png` a toda captura pegada, y dos seguidas chocan en la lista y en el servidor: con esto se les da uno propio (`pegado-1.png`). Solo afecta a lo pegado, no a lo soltado ni a lo elegido con el clip.
`placeholder`	`string`	—
`recall`	`string`	Lo ultimo que se envio: con el campo vacio, la flecha arriba lo recupera.
`submitDisabled`	`boolean`	Impide enviar aunque haya texto: una subida en curso, por ejemplo.
`submitOn`	`PromptSubmitOn`	`enter` envia con Intro y baja de linea con Mayus+Intro; `mod-enter`, al reves y con Ctrl/Cmd; `auto`, segun el puntero.
`toolbar`	`ReactNode`	Lo que va a la izquierda de la barra de abajo: el motor, el modelo, los atajos.
`value`	`string`	—

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: