@nykk/ur-agent-widget

Widget de chat embebible para agentes de ur: un Web Component <ur-agent-chat> sin dependencias de framework que pinta una burbuja flotante con panel de conversación. Toda la comunicación con el backend la delega en @nykk/ur-agent-client.

Instalación

npm install @nykk/ur-agent-widget

Paquete público en npmjs. No requiere ningún registro privado.

Uso como <script> (embed en cualquier web)

El backend de ur ya sirve el bundle listo para embeber en /widget.js. El admin de ur muestra el snippet mínimo (solo data-agent) al configurar el canal widget de un agente; el resto de atributos son opcionales:

<script
  src="https://<tu-backend-ur>/widget.js"
  data-agent="<identifier-del-agente>"
  data-title="Asistente virtual"
  data-color="#6366f1"
></script>

El script lee sus atributos data-* e inyecta un <ur-agent-chat> flotante en document.body. Atributos disponibles: data-agent, data-api-base, data-channel, data-title, data-color, data-color-text, data-color-bot, data-context.

data-context es un objeto JSON con datos por turno para las tools del agente, agrupados por tool — p. ej. data-context='{"visitor_context":{"page":"/precios"}}'. Desde JavaScript es mejor asignar la propiedad, que evita el parseo y permite actualizarla al navegar:

document.querySelector('ur-agent-chat').context = { visitor_context: { page: '/precios' } };

Qué claves acepta cada agente lo declaran sus tools, y el admin muestra el snippet exacto. Ojo: el canal es anónimo, así que estos valores son falsificables — sirven para indicar qué mirar, nunca para decidir qué puede ver quien pregunta.

El mismo bundle IIFE viene en el paquete como @nykk/ur-agent-widget/widget.js, por si prefieres servirlo tú.

Uso como módulo ES (dentro de tu app)

import '@nykk/ur-agent-widget';

<ur-agent-chat
  agent="<identifier-del-agente>"
  api-base="https://<tu-backend-ur>"
  title="Asistente virtual"
></ur-agent-chat>

Al importarlo como módulo no se auto-monta nada: tú colocas el elemento. Atributos observados: agent, subject, api-base, channel, title, started-at, color, color-text, color-bot.

Personalización

Los colores y medidas se exponen como variables CSS en el :host (--uw-primary, --uw-bg, --uw-text, --uw-radius, --uw-panel-width, --uw-panel-height, entre otras).

Licencia

MIT