Custom events and custom UI module connectors

All communication between an Agent Assist UI module and its connector happens through custom events. The UI module connector facilitates events between the agent desktop and the UI modules.

For example, when an Agent Assist suggestion is received, a UI module connector service will dispatch an analyze-content-received event to the UI modules, and the modules are subscribed to such events.

Custom event details

For the full list of UI module events and their payloads, see the UI module events API documentation.

To manually dispatch a custom event, use the following syntax:

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

The following example shows how to dispatch the analyze-content-received event:

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

After a you dispatch a custom event, you will see the following in the UI module connector service:

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

And you will see the following in the module:

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

To manually subscribe to a custom event, use the following syntax:

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

The following example shows a custom event subscription:

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

Custom UI module connectors

You can also use custom events to create your own custom UI module connectors, which allow you to integrate the UI modules into an agent desktop that isn't supported by Agent Assist. (Only LivePerson is supported.) For more information about implementing modules and connectors, see the implementation documentation.

If you're integrating Agent Assist UI modules into any agent desktop without a prebuilt UI module connector, you will need to write a custom one. Once you have created a custom UI module connector, return to the UI module implementation documentation for details about configuring your connectors and implementing the modules. You can use a custom UI module connector with either a managed container or with individual modules.

A custom UI module connector must be responsible for the following operations:

1. Dispatching an event to select the active conversation. This will initialize the conversation along with its participants. Event name: active-conversation-selected
2. For chat conversations, dispatching an event whenever a new utterance is registered from the agent or customer. Event name: analyze-content-requested
3. Notifying the module system when 'dark mode' has been toggled in the primary application. Event name: dark-mode-toggled

In addition, a custom UI module connector must subscribe to the following events to update the agent desktop UI where applicable:

1. For Smart Reply, update the agent's input field whenever a Smart Reply chip is selected. Event name: smart-reply-selected.
2. For Generative Knowledge Assist, update the agent's input field whenever a knowledge assist answer is pasted into the input box. Event name: knowledge-assist-v2-answer-pasted.