Todos los componentes (244)

Flujo de un agente

IA · AgentWorkflowEditor · .amset-flow

Qué es y cuándo usarlo

El editor del flujo de un agente de IA: el editor de flujos con los pasos de un agente ya puestos y traducidos.

Cuándo usarlo

Diseñar cómo trabaja un agente: qué hace con el mensaje, cuándo usa una herramienta, cuándo pide permiso a una persona y qué responde.
Trae seis pasos: mensaje del usuario, modelo, herramienta, condición (con «Sí» y «No»), aprobación humana (con «Aprobado» y «Rechazado») y respuesta. extraTypes suma los propios.
Admite círculos por defecto, porque un agente vuelve al modelo después de usar una herramienta.
Lo demás es como WorkflowBuilder: value, onChange, runState para seguir una ejecución y readOnly.

Cuándo no

Un flujo que no es de un agente: WorkflowBuilder con tus tipos.
No ejecuta el agente: entrega el flujo; ejecutarlo es cosa del servidor.

Teclado: el del editor de flujos, con el panel de conexiones como camino sin ratón.

Accesibilidad: la del editor de flujos; los nombres de los pasos y de sus salidas salen en el idioma de quien lo usa.

Aspecto fino: las variables --amset-flow-* del editor de flujos.

Cómo se ve

Tipo de nodo

Arrastra un nodo o muévelo con las flechas. Pulsa una salida y después una entrada para conectarlas. Supr borra el nodo elegido.

<AgentWorkflowEditor
  label="Flujo del asistente de pedidos"
  value={flujo}
  onChange={setFlujo}
  height="26rem"
/>

Props

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

Prop	Tipo	Para qué sirve
`label`obligatoria	`string`	Que flujo es («Alta de un cliente»). Obligatorio.
`onChange`obligatoria	`(value: Workflow) => void`	—
`value`obligatoria	`Workflow`	—
`acyclic`	`boolean`	No dejar cerrar circulos. Por defecto, no: un agente vuelve al modelo despues de usar una herramienta.
`className`	`string`	Se une a las clases de la biblioteca, no las sustituye.
`extraTypes`	`readonly WorkflowNodeType[]`	Tipos de nodo propios que se suman a los de un agente (una herramienta concreta, un subagente).
`height`	`string`	El alto del lienzo. Por defecto, 32 rem.
`readOnly`	`boolean`	Se ve y se recorre, pero no cambia.
`runState`	`Readonly<Record<string, NodeRunState>>`	El estado de cada nodo en una ejecucion (en marcha, hecho, con error), para seguirla sobre el lienzo.

Acepta además los atributos del elemento que pinta: className, style, data-*, aria-* y sus eventos.

Mandos

Estas variables CSS son la forma de adaptarlo. Se declaran sobre el selector del componente, no en :root: la hoja las redeclara en la propia regla y una declaración en el mismo elemento gana siempre.

Variable	Por defecto
`--amset-flow-dot`	`var(--amset-border)`
`--amset-flow-line`	`var(--amset-ink-2)`

Cómo se cambia

.amset-flow {
  --amset-flow-dot: ...;
  --amset-flow-line: ...;
}

En el banco de pruebas

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