Eventos personalizados e conectores de módulos de UI personalizados

Toda a comunicação entre um módulo da interface do Agent Assist e o conector dele acontece por eventos personalizados. O conector do módulo da interface facilita eventos entre a área de trabalho do agente e os módulos da UI.

Por exemplo, quando uma sugestão do Agent Assist é recebida, um serviço de conector do módulo da UI envia um evento analyze-content-received aos módulos da UI, e os módulos são inscritos nesses eventos.

Detalhes do evento personalizado

Para conferir a lista completa de eventos do módulo da UI e os payloads deles, consulte a documentação da API de eventos do módulo da interface.

Para enviar um evento personalizado manualmente, use a seguinte sintaxe:

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

O exemplo a seguir mostra como enviar o evento analyze-content-received:

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

Depois de enviar um evento personalizado, você verá o seguinte no serviço de conector do módulo da UI:

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

E o seguinte no módulo:

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

Para se inscrever manualmente em um evento personalizado, use a seguinte sintaxe:

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

O exemplo a seguir mostra uma inscrição em um 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 da interface personalizados

Você também pode usar eventos personalizados para criar seus próprios conectores de módulos da UI personalizados, que permitem integrar os módulos da UI a uma área de trabalho do agente que não é compatível com o Agent Assist. Para mais informações sobre como implementar módulos e conectores, consulte a documentação de implementação.

Se você estiver integrando módulos da interface do Agent Assist a qualquer área de trabalho do agente sem um conector de módulo da UI pré-criado, será necessário escrever um personalizado. Depois de criar um conector de módulo da UI personalizado, volte à documentação de implementação do módulo da interface para mais detalhes sobre como configurar os conectores e implementar os módulos. É possível usar um conector de módulo da UI personalizado com um contêiner gerenciado ou com módulos individuais.

Um conector de módulo da UI personalizado precisa ser responsável pelas seguintes operações:

1. Enviar um evento para selecionar a conversa ativa. Isso vai inicializar a conversa com os participantes. Nome do evento: active-conversation-selected
2. Para conversas por chat, enviar um evento sempre que uma nova declaração for registrada pelo agente ou pelo cliente. Nome do evento: analyze-content-requested
3. Notificar o sistema de módulos quando o "modo escuro" for ativado no aplicativo principal Nome do evento: dark-mode-toggled

Além disso, um conector de módulo da UI personalizado precisa se inscrever nos seguintes eventos para atualizar a UI da área de trabalho do agente, quando aplicável:

1. Para a Resposta inteligente, atualize o campo de entrada do agente sempre que um chip de Resposta inteligente for selecionado. Nome do evento: smart-reply-selected.
2. Para o recurso de assistência de conhecimento generativo, atualize o campo de entrada do agente sempre que uma resposta de assistência de conhecimento for colada na caixa de entrada. Nome do evento: knowledge-assist-v2-answer-pasted.

Inicializar várias instâncias de módulos da UI com namespace

Para carregar várias instâncias dos módulos da UI na mesma página, as áreas de trabalho do agente precisam de várias instâncias de inicialização. Para mantê-las separadas, na inicialização, transmita uma opção de configuração namespace para os módulos da interface e o UIModulesConnector.

Use essa opção se notar mensagens e sugestões compartilhadas entre conversas distintas na área de trabalho do agente. Exemplo:

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