Todos los componentes (244)

Aprobar una acción del agente

IA · AgentApprovalDialog

Qué es y cuándo usarlo

El diálogo para que una persona apruebe o rechace lo que un agente de IA quiere hacer: qué herramienta, con qué datos, qué cambiaría y con qué riesgo.

Cuándo usarlo

Antes de que un agente envíe un correo, cambie un precio, borre un registro o haga cualquier cosa con efectos fuera de la conversación.
tool es el nombre de la herramienta y summary lo que hace en una frase. args son los datos (se enseñan como JSON ordenado) y diff lo que cambiaría.
risk pone la etiqueta de riesgo; allowRemember ofrece «permitir siempre» (solo para lo de riesgo bajo); expiresAt hace que caduque.
editableArgs deja corregir los datos antes de aprobar: si se cambian, vuelven en args.
onDecide recibe { approved, comment, remember, args }. Al rechazar se pide un comentario para que el agente sepa por qué.

Cuándo no

Una confirmación de sí o no de la propia persona: ConfirmAction o useConfirmation.
Aprobaciones de varias personas por pasos: ApprovalFlow.
Solo recoge la decisión: ejecutar la herramienta y comprobar que se puede es cosa del servidor.

Teclado: es un Dialog: el foco entra al abrir, Escape cierra y vuelve al disparador.

Accesibilidad: el riesgo va escrito, no solo en color; la caducidad y los fallos se dicen con texto, y los datos se leen como texto.

Aspecto fino: los datos van en letra de código y se desplazan si son largos.

Cómo se ve

Todavía no has decidido nada.

<AgentApprovalDialog
  open={abierto}
  onOpenChange={setAbierto}
  tool="enviar_correo"
  summary="El agente quiere avisar al cliente de que su pedido ha salido."
  args={{ to: "[email protected]", asunto: "Tu pedido #1042 ha salido" }}
  editableArgs
  risk="medium"
  allowRemember
  requireReason
  onDecide={(decision) => ejecutarOCancelar(decision)}
/>

Props

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

Prop	Tipo	Para qué sirve
`onDecide`obligatoria	`(decision: AgentDecision) => void \| Promise<void>`	Enviar la decision. Si lanza o rechaza, se dice y el dialogo sigue abierto. La decision la ejecuta y la comprueba el servidor: este dialogo solo la recoge.
`open`obligatoria	`boolean`	—
`tool`obligatoria	`string`	El nombre de la herramienta que quiere usar el agente («send_email»).
`allowRemember`	`boolean`	Ofrecer «permitir siempre». Por defecto, no: solo para herramientas de riesgo bajo.
`args`	`unknown`	Los datos con que la llamaria. Se enseñan como JSON ordenado.
`className`	`string`	—
`diff`	`{ readonly before: string; readonly after: string; readonly format?: DiffFormat; }`	Lo que cambiaria, si se sabe: el antes y el despues.
`editableArgs`	`boolean`	Dejar cambiar los datos antes de aprobar. Por defecto, no.
`expiresAt`	`Date`	Cuando caduca la peticion: a partir de ahi no se puede aprobar.
`onOpenChange`	`(open: boolean) => void`	—
`requireReason`	`boolean`	Exigir un comentario al rechazar, para que el agente sepa por que. Por defecto, si.
`risk`	`AgentRisk`	—
`summary`	`string`	Que hace, en una frase para quien no sabe que es la herramienta («Enviar un correo»).

En el banco de pruebas

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