Todos los componentes (244)

Editor de plantillas

IA · PromptTemplateEditor

Qué es y cuándo usarlo

Editar una plantilla de texto con variables entre llaves dobles: un prompt, un correo o una respuesta tipo. Tiene el texto, botones para insertar las variables, un campo de prueba por cada variable y la vista previa con los valores puestos.

Cuándo usarlo

Las instrucciones de un asistente, una respuesta automática, la plantilla de un correo.
variables son las que la aplicación sabe rellenar: salen como botones para insertarlas en el cursor, con su description y un sample para la vista previa. Se avisa de las variables que no están en la lista.
La vista previa marca las variables sin valor y las lista debajo.
Cuenta caracteres y una estimación de tokens (uno cada cuatro caracteres: orden de magnitud, no el recuento de un modelo). maxLength avisa al pasarse.

Cuándo no

Escribir un mensaje a un asistente: PromptInput.
Texto con formato: RichTextEditor.

Teclado: el texto es un campo normal; los botones de variable escriben en el cursor y le devuelven el foco al texto.

Accesibilidad: cada campo de prueba se llama como su variable y lleva su descripción; la cuenta de caracteres se anuncia sin mover el foco y la vista previa es una región con nombre.

Aspecto fino: la vista previa va en letra de código; una variable sin valor lleva el fondo suave de aviso.

Cómo se ve

Instrucciones del asistente

100 caracteres, unos 25 tokens (estimación)

Valores de las variables

tienda

Nombre de la tienda

idioma

Idioma de la respuesta

cliente

Nombre del cliente

Vista previa

Eres el asistente de Joyería Aurelia. Responde en castellano al cliente Lucía y ofrécele su pedido.

<PromptTemplateEditor
  label="Instrucciones del asistente"
  value={plantilla}
  onChange={setPlantilla}
  variables={[
    { name: "tienda", description: "Nombre de la tienda", sample: "Joyería Aurelia" },
    { name: "cliente", description: "Nombre del cliente", sample: "Lucía" },
  ]}
  maxLength={600}
  rows={5}
/>

Props

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

Prop	Tipo	Para qué sirve
`label`obligatoria	`string`	Que plantilla es («Respuesta a una reclamación»). Obligatorio: es la etiqueta del campo.
`onChange`obligatoria	`(value: string) => void`	—
`value`obligatoria	`string`	—
`className`	`string`	Se une a las clases de la biblioteca, no las sustituye.
`maxLength`	`number`	El maximo de caracteres de la plantilla. Sin esto, ninguno.
`onValuesChange`	`(values: Readonly<Record<string, string>>) => void`	—
`rows`	`number`	—
`values`	`Readonly<Record<string, string>>`	Los valores de prueba de cada variable, para la vista previa. Sin esto, los lleva el editor desde el ejemplo de cada variable.
`variables`	`readonly PromptVariable[]`	Las variables que la aplicacion sabe rellenar: salen como botones para insertarlas y se avisa de las que no estan.

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: