Benutzerdefinierte Ereignisse und benutzerdefinierte UI-Modul-Connectors

Die gesamte Kommunikation zwischen einem Agent Assist-UI-Modul und seinem Connector erfolgt über benutzerdefinierte Ereignisse. Der UI-Modul-Connector ermöglicht Ereignisse zwischen dem Agent-Desktop und den UI-Modulen.

Wenn beispielsweise ein Vorschlag von Agent Assist empfangen wird, sendet ein Connector-Dienst für UI-Module ein analyze-content-received-Ereignis an die UI-Module, die für solche Ereignisse registriert sind.

Details zu benutzerdefinierten Ereignissen

Eine vollständige Liste der UI-Modulereignisse und ihrer Nutzlasten finden Sie in der API-Dokumentation zu UI-Modulereignissen.

Verwenden Sie die folgende Syntax, um ein benutzerdefiniertes Ereignis manuell zu senden:

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

Das folgende Beispiel zeigt, wie das analyze-content-received-Ereignis gesendet wird:

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

Nachdem Sie ein benutzerdefiniertes Ereignis gesendet haben, sehen Sie im Connector-Dienst des UI-Moduls Folgendes:

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

Im Modul sehen Sie Folgendes:

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

Verwenden Sie die folgende Syntax, um ein benutzerdefiniertes Ereignis manuell zu abonnieren:

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

Das folgende Beispiel zeigt ein benutzerdefiniertes Ereignis-Abo:

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

Benutzerdefinierte UI-Modul-Connectors

Sie können auch benutzerdefinierte Ereignisse verwenden, um eigene benutzerdefinierte UI-Modul-Connectors zu erstellen. So können Sie die UI-Module in einen Agent-Desktop einbinden, der nicht von Agent Assist unterstützt wird. Weitere Informationen zur Implementierung von Modulen und Connectors finden Sie in der Implementierungsdokumentation.

Wenn Sie Agent Assist-UI-Module in einen beliebigen Kundenservicemitarbeiter-Desktop ohne vorgefertigten UI-Modul-Connector einbinden, müssen Sie einen benutzerdefinierten Connector schreiben. Nachdem Sie einen benutzerdefinierten UI-Modul-Connector erstellt haben, kehren Sie zur Dokumentation zur Implementierung von UI-Modulen zurück, um Informationen zum Konfigurieren der Connectors und Implementieren der Module zu erhalten. Sie können einen benutzerdefinierten UI-Modul-Connector mit jedem UI-Modul-Client verwenden.

Ein benutzerdefinierter Connector für das UI-Modul muss für die folgenden Vorgänge verantwortlich sein:

  1. Ein Ereignis wird gesendet, um die aktive Unterhaltung auszuwählen. Dadurch wird die Unterhaltung mit den Teilnehmern initialisiert. Ereignisname: active-conversation-selected
  2. Bei Chatunterhaltungen wird ein Ereignis gesendet, wenn eine neue Äußerung vom Kundenservicemitarbeiter oder Kunden registriert wird. Ereignisname: analyze-content-requested
  3. Das Modulsystem wird benachrichtigt, wenn in der primären Anwendung der „Dunkelmodus“ aktiviert oder deaktiviert wurde. Ereignisname: dark-mode-toggled
  4. Ein Ereignis wird gesendet, um anzufordern, dass die Unterhaltung im Backend als abgeschlossen markiert wird. Ereignisname: complete-conversation-requested

Außerdem muss ein Connector für benutzerdefinierte UI-Module die folgenden Ereignisse abonnieren, um die Benutzeroberfläche des Kundenservicemitarbeiter-Desktops gegebenenfalls zu aktualisieren:

  1. Aktualisieren Sie für „Intelligente Antworten“ das Eingabefeld des Kundenservicemitarbeiters, wenn ein Chip für „Intelligente Antworten“ ausgewählt wird. Ereignisname: smart-reply-selected
  2. Aktualisieren Sie für Generative Knowledge Assist das Eingabefeld des Kundenservicemitarbeiters, wenn eine Antwort von Knowledge Assist in das Eingabefeld eingefügt wird. Ereignisname: knowledge-assist-v2-answer-pasted

Mehrere UI-Modulinstanzen mit namespace initialisieren

Wenn mehrere Instanzen der UI-Module auf derselben Seite geladen werden sollen, sind für Agent-Desktops mehrere Initialisierungsinstanzen erforderlich. Um sie getrennt zu halten, übergeben Sie bei der Initialisierung die Konfigurationsoption namespace an die UI-Module und das UIModulesConnector.

Verwenden Sie diese Option, wenn Sie feststellen, dass Nachrichten und Vorschläge zwischen verschiedenen Unterhaltungen in Ihrem Agent-Desktop geteilt werden. Beispiel:

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

const companionAgentElement = document.createElement("agent-assist-companion-agent");
// ...other UI modules HTML attributes
companionAgentElement.setAttribute("namespace", this.recordId);