AI Components
Bloques de interfaz para experiencias conversacionales y agénticas. Usan el sparkle azul como firma de marca, burbujas redondeadas y tonos brand para diferenciar acción humana, agente y sistema.
Sparkle
El sparkle eléctrico (#1465FF) acompaña cualquier elemento operado por un agente: input, mensaje, encabezado o barra de búsqueda.
Conversación
Borrador agéntico
Entrada al agente
Encabezado y CTA
quiero trasladar a una empleada daniela en vene…
Falta info — pídele al agente o completa los campos arriba.
Resumen de impacto
Indicadores
Pasos del agente
- 0.4sBuscar empleada Daniela en Venezuela1 coincidencia · Daniela Silva
- 0.2sValidar tienda origenVE-012 · Valencia — Centro
- Revisar presupuesto de destinoAR-503 · 14 / 16 ocupado
- Calcular impacto en headcount
- Generar borrador de traslado
Diálogos finales
¿Confirmar traslado?
Descartar borrador
¡Tarea creada!
Daniela Silva fue trasladada a AR-503 — Buenos Aires — Recoleta.
Bloques para menú lateral
- Validar empleada
- Tienda destino
- Vigencia
- Confirmar
Menú de ejemplo y agrupación
El menú lateral combina navegación clásica con bloques agénticos: acciones rápidas, tarea en curso y conversaciones recientes. Cada grupo se separa con un encabezado UPPERCASE y una línea fina, manteniendo jerarquía sin ruido visual.
Lo que está pasando
10 personas están de baja en (Medellín — Laureles, Buenos Aires — Recoleta, La Plata — Centro).
Se sumaron este mes .
Pequeño bloque introductorio del agente: bullets con tono (warn / info / ok) y términos subrayados clicables que abren el chat para investigar ese segmento. Usa decoration-dotted en gris para datos descriptivos y azul brand para métricas o deltas.