Implementar módulos e conectores da interface

O Assistente do agente oferece um conjunto de módulos de componentes UI predefinidos e personalizáveis que podem ser usados para integrar os recursos do Assistente do agente à UI. É possível incorporar os módulos em qualquer aplicativo da Web para mostrar as sugestões do Assistente aos agentes. Para instruções específicas sobre como integrar módulos ao LivePerson, consulte o tutorial do LivePerson.

Recursos do Agent Assist

Confira a seguir os recursos de Assistente do agente que podem ser implementados como componentes do módulo da UI.

Antes de começar

Antes de implementar os módulos da UI, configure um perfil de conversa.

Implementar módulos de interface

Há duas abordagens principais para integrar os módulos do Assistente do agente à sua UI. A abordagem do contêiner gerenciado integra todos os recursos selecionados do Assistente em um único painel. Como alternativa, você pode importar recursos individualmente se quiser personalizar a configuração deles na interface. A comunicação entre os componentes da UI e o agente de área de trabalho é facilitada por um conector de módulo de interface. Toda a comunicação acontece por meio do envio de eventos personalizados.

A abordagem de contêiner e os componentes individuais podem ser usados com qualquer sistema, mas o Assistente do agente só fornece conectores de módulo UI para uso com Genesys Cloud, LivePerson, Twilio e Salesforce. Para integrar os módulos da UI com qualquer outro sistema de agentes, você precisa criar seus próprios conectores. Consulte a documentação do conector de módulo UI personalizada para mais detalhes.

Versões de arquivos

Para recuperar a versão mais recente de um arquivo gstatic, especifique a versão mais recente:

    <script src="https://www.gstatic.com/agent-assist-ui-modules/v1/container.js"></script>

Para recuperar uma versão estável específica de um arquivo gstatic, especifique a versão exata:

    <script src="https://www.gstatic.com/agent-assist-ui-modules/v1.7/container.js"></script>

Versões mais recentes: 

      Container: v1.10
      Common: v1.4
      Knowledge assist: v1.1
      Generative knowledge assist: v2.9
      Smart reply: v1.3
      Summarization: v1.3
      Transcript: v1.2

Contêiner gerenciado

A abordagem de contêiner gerenciado integra um único componente que renderiza os recursos escolhidos do Assistente do agente em um painel unificado. Esse painel também vai processar todas as preocupações com o módulo compartilhado, incluindo conectores de carregamento e mensagens de erro. Recomendamos essa abordagem se você estiver integrando os módulos a um computador de agente de terceiros, como o LivePerson, ou se precisar de pouca ou nenhuma personalização de como os recursos do Assistente do agente são renderizados na UI.

Depois que o componente do contêiner é inicializado, ele carrega todas as dependências necessárias. Apenas uma importação é necessária para inicializar o contêiner, não importa quantos recursos do Assistente do agente são usados.

Inicializar o componente do contêiner:

    <script src="https://www.gstatic.com/agent-assist-ui-modules/v1/container.js"></script>

Nome da tag do elemento:

    <agent-assist-ui-modules>

Exemplo de inicialização:

    const uiModulesEl = document.createElement('agent-assist-ui-modules');
    uiModulesEl.setAttribute('features', 'SMART_REPLY,ARTICLE_SUGGESTION');
    uiModulesEl.setAttribute('conversation-profile', 'projects/my-project/locations/global/conversationProfiles/123');
    uiModulesEl.setAttribute('auth-token', authToken);
    uiModulesEl.setAttribute('channel', 'chat');
    uiModulesEl.setAttribute('custom-api-endpoint', 'https://my-dialogflow-proxy-service.com');
    uiModulesEl.setAttribute('dark-mode-background', '#000000');
    hostElement.appendChild(uiModulesEl);

Para mais detalhes, consulte a página de documentação da API do componente.

Componentes individuais

Você tem a opção de integrar os módulos da interface do Assistente do agente individualmente, em vez de em um único contêiner. Recomendamos essa abordagem apenas se você usar um aplicativo personalizado em que os módulos precisem ser renderizados em diferentes seções da página ou se precisar de uma personalização significativa.

Nesse caso, é necessário importar cada módulo de interface específico do recurso individualmente. Além disso, você vai precisar importar e inicializar o conector do módulo da UI.

Implementar o conector do módulo da UI

Adicione o seguinte código ao seu aplicativo. Isso vai expor uma classe UiModulesConnector global que pode ser instanciada e inicializada:

    <script src="https://www.gstatic.com/agent-assist-ui-modules/v1/common.js"></script>

Métodos:

    constructor(): void;
    init(config: ConnectorConfig): void;
    disconnect(): void;
    setAuthToken(token: string): void;

Confira a seguir um exemplo da interface TypeScript completa para o objeto de configuração do conector. Se você criou um conector de módulo UI personalizado para usar com um sistema sem suporte, defina agentDesktop como Custom. O exemplo a seguir mostra uma lista de sistemas de computador com agente compatíveis.

interface ConnectorConfig {
  /** Communication mode for the UI modules application. */
  channel: 'chat'|'voice';

  /** Agent desktop to use. */
  agentDesktop: 'LivePerson' | 'GenesysCloud' | 'SalesForce' | 'GenesysEngageWwe' | 'Custom';

  /** Conversation profile name to use. */
  conversationProfileName: string;

  /** API Connector config. */
  apiConfig: {
    /**
     * Authentication token to attach to outgoing requests. Should be a valid
     * OAuth token for Dialogflow API, or any other token for custom API
     * endpoints.
     */
    authToken: string;

    /**
     * Specifies a custom proxy server to call instead of calling the Dialogflow
     * API directly.
     */
    customApiEndpoint?: string;

    /** API key to use. */
    apiKey?: string;

    /**
     * Additional HTTP headers to include in the Dialogflow/proxy server API
     * request.
     */
    headers?: Array;
  }

  /** Event-based connector config. Set this for voice conversations. */
  eventBasedConfig?: {
    /**
     * Transport protocol to use for updates. Defaults to 'websocket' if none is
     * specified.
     */
    transport?: 'websocket'|'polling';

    /** Event-based library to use (i.e., Socket.io). */
    library?: 'SocketIo';

    /** Endpoint to which the connection will be established. */
    notifierServerEndpoint: string;
  }
}

Exemplo de instanciação:

const connector = new UiModulesConnector();

connector.init({
  channel: 'chat',
  agentDesktop: 'LivePerson',
  conversationProfileName: 'projects/my-project/locations/global/conversationProfiles/123',
  apiConfig: {
    authToken: 'abc123',
    customApiEndpoint: 'https://my-dialogflow-proxy-server.com',
  }
});