Eventos personalizados y conectores de módulos de interfaz de usuario personalizados

Toda la comunicación entre un módulo de la interfaz de usuario de Asistente y su conector se produce a través de eventos personalizados. El conector del módulo de interfaz de usuario facilita los eventos entre el escritorio del agente y los módulos de interfaz de usuario.

Por ejemplo, cuando se recibe una sugerencia de Asistente, un servicio de conector de módulo de interfaz de usuario enviará un evento analyze-content-received a los módulos de interfaz de usuario, y los módulos se suscribirán a esos eventos.

Detalles del evento personalizado

Para ver la lista completa de eventos de módulos de interfaz de usuario y sus cargas útiles, consulte la documentación de la API de eventos de módulos de interfaz de usuario.

Para enviar manualmente un evento personalizado, utilice la siguiente sintaxis:

    dispatchAgentAssistEvent('event_name', {
      detail: event_payload,
    });

En el siguiente ejemplo se muestra cómo enviar el evento analyze-content-received:

if (newMessageFromHumanAgent) {
  dispatchAgentAssistEvent('analyze-content-received', {
    detail: {
      participantRole: 'HUMAN_AGENT',
      request: {
        textInput: {text: newMessageFromHumanAgent},
        messageSendTime: new Date().toISOString()
      }
    }
  });
}

Después de enviar un evento personalizado, verá lo siguiente en el servicio del conector del módulo de interfaz de usuario:

    this.api.analyzeContent(...).then(function (response) {
      dispatchAgentAssistEvent('analyze-content-response-received', {
       detail: {response: response}});
    });

En el módulo, verás lo siguiente:

    addAgentAssistEventListener('analyze-content-response-received', function (event) {
      // Use the AnalyzeContent response to render suggestions in the UI.
    });

Para suscribirte manualmente a un evento personalizado, usa la siguiente sintaxis:

    addAgentAssistEventListener('event_name', function (event) {
      // `event.detail` contains the event payload.
    });

En el siguiente ejemplo se muestra una suscripción a un evento personalizado:

addAgentAssistEventListener('smart-reply-selected', function (event) {
  var chipContent = event.details;
  // Populate the agent chat box with the selected Smart Reply chip.
});

Conectores de módulos de interfaz de usuario personalizados

También puedes usar eventos personalizados para crear tus propios conectores de módulos de interfaz de usuario personalizados, que te permiten integrar los módulos de interfaz de usuario en un escritorio de agente que no sea compatible con Asistente. Para obtener más información sobre cómo implementar módulos y conectores, consulta la documentación de implementación.

Si vas a integrar módulos de la interfaz de usuario de Asistente en cualquier escritorio de agente sin un conector de módulo de interfaz de usuario prediseñado, tendrás que escribir uno personalizado. Una vez que hayas creado un conector de módulo de interfaz de usuario personalizado, vuelve a la documentación sobre la implementación de módulos de interfaz de usuario para obtener información sobre cómo configurar los conectores e implementar los módulos. Puedes usar un conector de módulo de interfaz de usuario personalizado con un contenedor gestionado o con módulos individuales.

Un conector de módulo de interfaz de usuario personalizado debe encargarse de las siguientes operaciones:

1. Envía un evento para seleccionar la conversación activa. De esta forma, se iniciará la conversación con los participantes. Nombre del evento: active-conversation-selected
2. En las conversaciones por chat, se envía un evento cada vez que se registra una nueva expresión del agente o del cliente. Nombre del evento: analyze-content-requested
3. Notifica al sistema de módulos cuando se activa o desactiva el modo Oscuro en la aplicación principal. Nombre del evento: dark-mode-toggled

Además, un conector de módulo de interfaz de usuario personalizado debe suscribirse a los siguientes eventos para actualizar la interfaz de usuario del escritorio del agente cuando corresponda:

1. En el caso de Respuesta inteligente, actualiza el campo de entrada del agente cada vez que se seleccione un chip de Respuesta inteligente. Nombre del evento: smart-reply-selected.
2. En el caso de la ayuda con conocimientos generativos, actualiza el campo de entrada del agente cada vez que se pegue una respuesta de ayuda con conocimientos en el cuadro de entrada. Nombre del evento: knowledge-assist-v2-answer-pasted.

Inicializar varias instancias de módulos de interfaz de usuario con namespace

Para cargar varias instancias de los módulos de la interfaz de usuario en la misma página, los escritorios de agente necesitan varias instancias de inicialización. Para mantenerlos separados, en la inicialización, pasa una opción de configuración namespace a los módulos de interfaz de usuario y a UIModulesConnector.

Usa esta opción si observas que se comparten mensajes y sugerencias entre conversaciones distintas en el escritorio del agente. Por ejemplo:

const connector = new UiModulesConnector();
const config = {};
// ...other UI module connector config options
config.uiModuleEventOptions = { namespace: this.recordId }

const containerElement = document.createElement("agent-assist-ui-modules-v2");
// ...other UI modules HTML attributes
containerEl.setAttribute("namespace", this.recordId);