Eventos personalizados e conectores de módulo de UI personalizados

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

Por exemplo, quando uma sugestão do Assistente de agente é recebida, um serviço conector de 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 UI e os payloads deles, consulte a documentação da API de eventos do módulo de interface.

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

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

O exemplo a seguir mostra como despachar 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}});
    });

Você vai encontrar 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.
    });

Confira abaixo um exemplo de assinatura de 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 interface personalizada

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

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

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

1. Envio de um evento para selecionar a conversa ativa. Isso vai iniciar a conversa com os participantes. Nome do evento: active-conversation-selected
2. Para conversas por chat, envie um evento sempre que uma nova declaração for registrada pelo agente ou 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 de UI personalizada 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 ícone de Resposta inteligente for selecionado. Nome do evento: smart-reply-selected.
2. Para o Generative Knowledge Assist, atualize o campo de entrada do agente sempre que uma resposta do assistente de conhecimento for colada na caixa de entrada. Nome do evento: knowledge-assist-v2-answer-pasted.

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

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

Use essa opção se você notar mensagens e sugestões compartilhadas entre conversas distintas na área de trabalho do seu 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);