Événements personnalisés et connecteurs de modules d'interface utilisateur personnalisés

Toutes les communications entre un module d'interface utilisateur Agent Assist et son connecteur se font par le biais d'événements personnalisés. Le connecteur de module d'UI facilite les événements entre le bureau de l'agent et les modules d'UI.

Par exemple, lorsqu'une suggestion Agent Assist est reçue, un service de connecteur de module d'UI envoie un événement analyze-content-received aux modules d'UI, auxquels les modules sont abonnés.

Informations sur l'événement personnalisé

Pour obtenir la liste complète des événements du module d'interface utilisateur et de leurs charges utiles, consultez la documentation de l'API des événements du module d'interface utilisateur.

Pour distribuer manuellement un événement personnalisé, utilisez la syntaxe suivante :

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

L'exemple suivant montre comment distribuer l'événement analyze-content-received :

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

Une fois que vous avez envoyé un événement personnalisé, vous verrez ce qui suit dans le service de connecteur de module d'UI :

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

Vous verrez les éléments suivants dans le module :

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

Pour vous abonner manuellement à un événement personnalisé, utilisez la syntaxe suivante :

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

L'exemple suivant montre un abonnement à un événement personnalisé :

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

Connecteurs de modules d'UI personnalisés

Vous pouvez également utiliser des événements personnalisés pour créer vos propres connecteurs de modules d'UI personnalisés. Ils vous permettent d'intégrer les modules d'UI dans un bureau d'agent qui n'est pas compatible avec Agent Assist. Pour en savoir plus sur l'implémentation de modules et de connecteurs, consultez la documentation sur l'implémentation.

Si vous intégrez des modules d'interface utilisateur Agent Assist dans un agent desktop sans connecteur de module d'interface utilisateur prédéfini, vous devrez en écrire un personnalisé. Une fois que vous avez créé un connecteur de module d'UI personnalisé, revenez à la documentation sur l'implémentation de modules d'UI pour savoir comment configurer vos connecteurs et implémenter les modules. Vous pouvez utiliser un connecteur de module d'UI personnalisé avec un conteneur géré ou avec des modules individuels.

Un connecteur de module d'UI personnalisé doit être responsable des opérations suivantes :

1. Envoi d'un événement pour sélectionner la conversation active. Cela initialisera la conversation ainsi que ses participants. Nom de l'événement : active-conversation-selected
2. Pour les conversations par chat, envoie un événement chaque fois qu'une nouvelle expression est enregistrée par l'agent ou le client. Nom de l'événement : analyze-content-requested
3. Notification du système de module lorsque le "mode sombre" a été activé ou désactivé dans l'application principale. Nom de l'événement : dark-mode-toggled

De plus, un connecteur de module d'UI personnalisé doit s'abonner aux événements suivants pour mettre à jour l'UI de l'agent de bureau, le cas échéant :

1. Pour la réponse suggérée, mettez à jour le champ de saisie de l'agent chaque fois qu'un chip de réponse suggérée est sélectionné. Nom de l'événement : smart-reply-selected.
2. Pour Generative Knowledge Assist, mettez à jour le champ de saisie de l'agent chaque fois qu'une réponse Knowledge Assist est collée dans la zone de saisie. Nom de l'événement : knowledge-assist-v2-answer-pasted.

Initialiser plusieurs instances de modules d'UI avec namespace

Pour charger plusieurs instances des modules d'UI sur la même page, les postes de travail des agents ont besoin de plusieurs instances d'initialisation. Pour les séparer, transmettez une option de configuration namespace aux modules d'UI et à UIModulesConnector lors de l'initialisation.

Utilisez cette option si vous remarquez que des messages et des suggestions sont partagés entre différentes conversations dans votre agent desktop. Exemple :

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);