Crie um complemento do Dialogflow CX que estenda o Google Chat e entenda e responda com linguagem natural

Nesta página, explicamos como criar um app do Google Chat que possa entender e responder com linguagem natural usando o Dialogflow. Este guia usa o Dialogflow CX, que tem uma integração direta com o Google Chat. Você também pode usar o Dialogflow ES para criar um app do Google Chat do Dialogflow ES seguindo o guia Google Chat do Dialogflow ES.

Vamos considerar como exemplo um app do Chat que ajuda pessoas que querem alugar carros. Um usuário escreve "Quero alugar um carro". O app do Chat pode responder com uma pergunta como "Onde você quer retirar o veículo?", o que dá início a uma conversa parecida com a de pessoas. Nesse caso, o app do Chat entende e responde em linguagem natural enquanto agenda o aluguel do carro.

Este é apenas um exemplo. Os apps de chat do Dialogflow são úteis em todos os tipos de interações. Se ele exigir linguagem natural, será necessário um app de chat do Dialogflow. Os agentes pré-criados ajudam você a começar rapidamente e mostram o que o Dialogflow pode fazer, como:

  • Reservar voos
  • Agendar consultas médicas
  • Pedir comida para entrega
  • Responder a perguntas sobre um catálogo de produtos de varejo, como se os itens estão disponíveis em outras cores
  • A página de seleção de agentes pré-criados do Dialogflow.
    Figura 1. Selecionar um agente pré-criado para um app de chat do Dialogflow.
  • Testar o agente no Dialogflow CX.
    Figura 2. Testar o agente no Dialogflow CX para garantir que a lógica e a configuração dele funcionem conforme o esperado. O diagrama mostra um conjunto sequencial de páginas temáticas que abordam etapas específicas da conversa, como definir um local de retirada e devolução de um carro alugado, e configura a lógica que as conecta. A conversa é testada em um simulador.
  • Configurar um app de chat do Dialogflow.
    Figura 3. Configurar um app do Chat para processar respostas usando o agente do Dialogflow CX na página de configuração da API Chat no console do Google Cloud.
  • Testar o app de chat do Dialogflow CX
    Figura 4. Conversar sobre a reserva de um carro alugado com o app Dialogflow Chat no Google Chat.

Objetivos

  • Prepare o ambiente.
  • Crie e implante um agente do Dialogflow CX.
  • Crie e implante um app de chat com tecnologia do agente do Dialogflow CX.
  • Teste o app Chat.

Pré-requisitos

Arquitetura

O diagrama a seguir mostra a arquitetura de um app de chat criado com o Dialogflow:

Arquitetura de um app de chat implementado com o Dialogflow.

No diagrama anterior, um usuário interagindo com um app de chat do Dialogflow tem o seguinte fluxo de informações:

  1. Um usuário envia uma mensagem no Chat para um app do Chat, em uma mensagem direta ou em um espaço do Chat.
  2. Um agente virtual do Dialogflow, que reside no Google Cloud, recebe e processa a mensagem para produzir uma resposta.
  3. Como opção, usando um webhook do Dialogflow, o agente do Dialogflow pode interagir com serviços externos de terceiros, como um sistema de gerenciamento de projetos ou uma ferramenta de emissão de tíquetes.
  4. O agente do Dialogflow envia uma resposta de volta para o serviço do app Chat no Chat.
  5. A resposta é enviada para o espaço do Chat.

Configure o ambiente

Antes de usar as APIs do Google, é necessário ativá-las em um projeto do Google Cloud. É possível ativar uma ou mais APIs em um único projeto do Google Cloud.

  1. No console do Google Cloud, ative as APIs Google Chat e Dialogflow.

    Ativar as APIs

  2. Confirme se você está ativando as APIs no projeto do Cloud correto e clique em Próxima.

  3. Confirme se você está ativando as APIs corretas e clique em Ativar.

Criar um agente do Dialogflow CX

Um agente do Dialogflow CX é um agente virtual que processa conversas simultâneas com seus usuários finais. Ele é um módulo de compreensão de linguagem natural que entende as nuances da fala humana. O Dialogflow traduz textos do usuário final durante uma conversa para dados estruturados que seus apps e serviços podem entender. Você projeta e cria um agente do Dialogflow para atender aos tipos de conversa solicitadas pelo seu sistema.

O atendimento do agente do Dialogflow é semelhante ao de um funcionário de call center. O agente pode ser treinado para lidar com os cenários comuns de conversas, e o treinamento não precisa ser muito detalhado.

Veja como criar o agente do Dialogflow CX:

  1. No console do Dialogflow CX, abra o console do Dialogflow CX. Clique em Menu > Dialogflow CX.

    Acessar o console do Dialogflow CX

  2. Escolha um projeto do Google Cloud. Para encontrar seu projeto, talvez seja necessário clicar em Todos e pesquisar.

  3. Agora você pode escolher um agente pré-criado ou criar o seu. Se você preferir explorar a personalização do agente em detalhes mais tarde, escolha um dos agentes pré-criados, que também são úteis para saber o que os agentes podem fazer.

    Para escolher um agente pré-criado, siga estas etapas:

    1. Clique em Usar agentes predefinidos.

    2. Selecione um agente pré-criado. Para este guia, selecione Viagem: aluguel de carros.

      Os agentes são classificados como iniciantes, intermediários ou avançados com base no número de recursos que usam e na sofisticação da lógica de conversa. Escolher um agente intermediário ou avançado pode exigir personalizações e configurações específicas do agente, incluindo a ativação de recursos e APIs no console do Google Cloud.

    3. Clique em Importar como agente.

    Para criar seu próprio agente, siga estas etapas:

    1. Clique em Criar agente.
    2. Selecione Gerar automaticamente para criar um agente de repositório de dados ou selecione Crie o seu para criar outros tipos de agentes.

    Para um tutorial detalhado do processo de criação de agentes, consulte Criar um agente do Dialogflow CX.

  4. Defina as configurações básicas do agente:

    1. Em Nome de exibição, insira um nome.
    2. Selecione um local. Se quiser mudar as configurações avançadas de local, clique em Editar.
    3. Selecione o fuso horário.
    4. Selecione o idioma padrão do agente. Não é possível mudar o idioma padrão de um agente depois que ele é criado.

  5. Clique em Criar. O Dialogflow CX começa a criar o agente e mostra o fluxo inicial padrão dele.

  6. Se quiser, personalize o agente. Para um tutorial detalhado sobre o processo de personalização do agente, consulte Criar um agente do Dialogflow CX.

  7. Como prática recomendada, teste o agente:

    1. Clique em Testar agente.
    2. Selecione Testar agente no ambiente.
    3. Em "Ambiente", selecione Rascunho.
    4. Em "Fluxo", selecione Fluxo inicial padrão.
    5. Em "Página", selecione Página inicial.
    6. Na barra de composição Falar com um agente, digite Hello e pressione Enter. O agente responde se apresentando.
    7. Conclua o teste com a conversa de teste de amostra.

  8. O agente do Dialogflow CX é criado. Volte ao console do Dialogflow CX. Clique em Menu > Dialogflow CX.

    Acessar o console do Dialogflow CX

  9. Em Agentes, clique em > Copiar nome. Salve esse nome, porque você vai usá-lo ao configurar o app Chat.

Criar um app de chat e conectá-lo ao agente do Dialogflow

Depois de criar um agente do Dialogflow CX, siga estas etapas para transformá-lo em um app de chat:

  1. No console do Google Cloud, acesse a API Google Chat. Pesquise "API Google Chat" e clique em API Google Chat e em Gerenciar.

    Acessar a API Chat

  2. Clique em Configuração e configure o app Chat:

    1. Em Nome do app, insira Dialogflow App.
    2. Em URL do avatar, digite https://developers.google.com/workspace/chat/images/quickstart-app-avatar.png.
    3. Em Descrição, insira Responds to real human conversation.
    4. Em Funcionalidade, selecione Participar de espaços e conversas em grupo.
    5. Em Configurações de conexão, selecione Dialogflow.
    6. Em Configurações do Dialogflow, selecione Dialogflow CX.
    7. Em Nome do recurso do agente ou ambiente, cole o nome do agente do Dialogflow CX que você copiou no final de Criar um agente do Dialogflow CX.
    8. Disponibilize o app de chat para pessoas e grupos específicos no seu domínio e digite seu endereço de e-mail.
    9. Em Registros, selecione Registrar erros no Logging.

  3. Clique em Salvar.

O app Chat está pronto para receber e responder a mensagens.

Teste o app do Chat

Teste o app de chat do Dialogflow CX enviando uma mensagem para ele no Google Chat.

  1. Abra o Google Chat usando a conta do Google Workspace que você informou ao se tornar um testador de confiança.

    Acessar o Google Chat

  2. Clique em Novo chat.
  3. No campo Adicionar uma ou mais pessoas, digite o nome do seu app Chat.

  4. Selecione seu app de chat nos resultados. Uma mensagem direta é aberta.

  5. Na nova mensagem direta com o app, digite Hello e pressione enter.

    O app de chat do Dialogflow responde se apresentando.

  6. Conclua o teste com a conversa de teste de amostra.

Exemplo de conversa de teste

Para testar o app de chat do Dialogflow CX no console do Dialogflow CX ou no Google Chat, tenha a seguinte conversa. A explicação ajuda você a entender como o agente do Dialogflow CX interpreta a linguagem natural do usuário e produz uma resposta de linguagem natural em cada etapa da conversa. Esta conversa de exemplo é baseada no agente pré-criado chamado Viagens: aluguel de carros.

Dialog Explicação
Usuário final: Olá
Agente: Oi! Sou o agente virtual de aluguel de carros. Posso ajudar você a iniciar uma nova reserva de aluguel de carro. Como posso ajudar você hoje?
  1. A rota de intent de boas-vindas padrão no Fluxo inicial padrão é chamada.
  2. O fulfillment desse manipulador de estado ("Olá! Eu estou…") foi adicionado à fila de respostas.
  3. O agente envia a fila de resposta para o usuário final.
Usuário final:Quero alugar um carro.
Agente:Onde você quer retirar o veículo?
  1. A rota de intent car_rental.reservation_create na Página inicial é correspondida.
  2. A sessão é transferida para a página Local de retirada.
  3. O formulário da página Local de retirada não está completo. Portanto, o agente usa o parâmetro pickup_location para solicitar ao usuário ("Onde você gostaria de retirar..."). que é adicionado à fila de respostas.
  4. O agente envia a fila de resposta para o usuário final.
Usuário final:Las Vegas
Agente:Ok, a retirada será em Las Vegas.
Agente:o local de desembarque é diferente do local de embarque?
  1. A entrada do usuário final preenche o parâmetro pickup_location solicitado pelo agente na fala anterior.
  2. A rota de intent car_rental.return_different_location no Fluxo inicial padrão é correspondida.
  3. A rota de preenchimento do formulário na página Local de retirada é avaliada e chamada. Ela tem um fulfillment ("Ok, sua retirada...") adicionado à fila de respostas e com as referências de parâmetros resolvidas para valores reais fornecidos pelo usuário final.
  4. A sessão passa para a página Confirmar local.
  5. A página Confirmar local tem um preenchimento de entrada ("O local de entrega é diferente..."), que é adicionado à fila de respostas.
  6. O agente envia a fila de resposta para o usuário final.
Usuário final:sim. Vou deixar o carro em Los Angeles.
Agente:Ok, o desembarque será em Los Angeles.
Agente:Qual data e horário você quer retirar o veículo?
  1. A rota de intent car_rental.return_different_location no Fluxo inicial padrão é correspondida.
  2. A sessão é transferida para a página Local de desembarque.
  3. A entrada do usuário final preenche o parâmetro drop_off_location solicitado pelo agente na fala anterior.
  4. A rota de preenchimento do formulário na página Local de devolução é avaliada e chamada. Ela tem um fulfillment ("Ok, seu desembarque...") adicionado à fila de respostas.
  5. A sessão é transferida para a página Duração do aluguel.
  6. A página Período de locação tem valores de formulário incompletos. Por isso, ela solicita ao usuário o parâmetro pickup_date_time ("Qual data e horário você gostaria de retirar..."). que é adicionado à fila de respostas.
  7. O agente envia a fila de resposta para o usuário final.
Usuário final:Quero retirar o carro no dia 5 de março ao meio-dia.
Agente:Que data e horário você quer devolver o veículo?
  1. A entrada do usuário final preenche o parâmetro pickup_date_time solicitado pelo agente na fala anterior.
  2. A página Duração da locação tem outro valor de formulário ausente. Por isso, ela pede ao usuário o parâmetro drop_off_date_time ("Qual data e horário você gostaria de devolver..."). que é adicionado à fila de respostas.
  3. O agente envia a fila de resposta para o usuário final.
Usuário final:15 de março ao meio-dia.
Agente:então, para confirmar:

Você vai retirar o veículo em Las Vegas 2024-03-05 12:00:00 e devolver em Los Angeles 2024-03-15 12:00:00

Está tudo certo?
  1. A entrada do usuário final preenche o parâmetro drop_off_date_time solicitado pelo agente na fala anterior.
  2. A sessão é transferida para a página Confirmar duração da locação.
  3. A página Confirmar duração da locação tem um fulfillment de entrada ("Então, para confirmar..."), que é adicionado à fila de respostas.
  4. O agente envia a fila de resposta para o usuário final.
Usuário final:sim, obrigado.
Agente:Ótimo! Agora vamos escolher um veículo.
Agente:você quer um veículo econômico ou de luxo?
  1. A rota de intent small_talk.confirmation.yes na página Confirmar duração da locação é correspondida.
  2. O agente confirma a escolha do usuário com uma mensagem ("Ótimo! Agora vamos escolher..."), que é adicionado à fila de respostas.
  3. A sessão é transferida para a página Desambiguação de veículo.
  4. O formulário da página Desambiguação de veículo não está completo. Portanto, o agente usa o parâmetro vehicle_type para solicitar ao usuário ("Você quer um carro econômico ou de luxo..."). que é adicionado à fila de respostas.
  5. O agente envia a fila de resposta para o usuário final.
Usuário final:Economy, por favor.
Agente:Você quer o Cymbal Car ou o Cymbal Truck?
  1. A rota de intent $session.params.vehicle_type="economy_vehicle" é correspondida.
  2. A sessão é transferida para a página Opções econômicas.
  3. A página Opções econômicas tem um fulfillment de entrada ("Você quer o..."), que é adicionado à fila de respostas.
  4. O agente envia a fila de resposta para o usuário final.
Usuário final:Cymbal Truck.
Agente:O caminhão da Cymbal custa US $50,33 por dia. Ele comporta quatro pessoas e vem com um rádio AM/FM. Quer continuar com o pagamento?
Usuário final:sim, por favor.
  1. A rota de intent $session.params.vehicle_type="Cymbal Truck" é correspondida e o parâmetro vehicle_model é preenchido.
  2. A sessão é transferida para a página Confirm Cymbal Truck.
  3. A página Confirmar caminhão da Cymbal tem um fulfillment de entrada ("O caminhão da Cymbal custa US $50,33 por dia..."), que é adicionado à fila de respostas.
  4. O agente envia a fila de resposta para o usuário final.
  5. A resposta do usuário corresponde à rota small_talk.confirmation.yes.
Agente:qual tipo de cartão você vai usar?
Usuário final:Altostrat
Agente:insira o número do cartão.
Usuário final:1234 1234 1234 1234
Agente:Qual é o nome no cartão?
Usuário final:Charlie
Agente:Qual é o endereço de faturamento?
Usuário final:Rua Fictícia, Mountain View, CA
Agente:Qual é o CEP de faturamento?
Usuário final:94045
Agente:você vai retirar o Cymbal Car em Las Vegas em 05/03/2024 às 12:00:00 e devolver em 15/03/2024 às 12:00:00. O total desta viagem será de US$ 175,38.
Agente:agradecemos por alugar com a gente. Tenha um ótimo dia!
  1. A sessão é transferida para a página Pagamento.
  2. O formulário Pagamento não está completo. Por isso, o agente solicita ao usuário os parâmetros card_type, card_number, billing_name, billing_street_address e billing_zip_code ("Qual tipo de cartão..."). que são adicionadas sequencialmente à fila de respostas e enviadas conforme o usuário responde. As respostas do usuário definem cada valor de parâmetro.
  3. A sessão é transferida para a página Confirmação do aluguel.
  4. A página Confirmação da locação tem um fulfillment de entrada ("Ok, a retirada será..."), que é adicionado à fila de respostas.
  5. O agente envia a fila de resposta para o usuário final.
  6. A sessão é transferida para a página Encerrar sessão.

Enviar mensagens de card do Dialogflow

O Dialogflow pode responder com mensagens de texto ou card. Para responder com uma mensagem de card, especifique-a como um payload personalizado em fulfillment.

O JSON a seguir mostra como enviar uma mensagem de card como um payload personalizado no fulfillment:

json

{ "hostAppDataAction": { "chatDataAction": { "createMessageAction": {
  "message": { "cardsV2": [{
    "cardId": "createCardMessage",
    "card": {
      "header": {
        "title": "A card message!",
        "subtitle": "Sent from Dialogflow",
        "imageUrl": "https://developers.google.com/chat/images/chat-product-icon.png",
        "imageType": "CIRCLE"
      },
      "sections": [{ "widgets": [{ "buttonList": { "buttons": [{
        "text": "Read the docs!",
        "onClick": { "openLink": {
          "url": "https://developers.google.com/workspace/chat"
        }}
      }]}}]}]
    }
  }]}
}}}}

Limitações e considerações

  • Ao usar complementos do Google Workspace com o Dialogflow, os objetos de evento de chat têm as seguintes limitações e considerações:
    • Eventos da página inicial do app:ainda não há suporte para eventos APP_HOME.
    • Entrada de consulta do Dialogflow:o texto enviado como entrada de consulta ao agente do Dialogflow depende do tipo de evento:
      • MESSAGE:o valor do campo argumentText da mensagem de chat.
      • APP_COMMAND:a string "APP_COMMAND_PAYLOAD".
      • ADDED_TO_SPACE:a string "ADDED_TO_SPACE_PAYLOAD".
      • REMOVED_FROM_SPACE:a string "REMOVED_FROM_SPACE_PAYLOAD".
      • CARD_CLICKED:a string "BUTTON_CLICKED_PAYLOAD".
      • WIDGET_UPDATED:a string "WIDGET_UPDATED_PAYLOAD" (usada para preenchimento automático).
    • Payload completo do evento:o payload JSON completo do evento de interação do chat é enviado ao Dialogflow no campo WebhookRequest.payload. Você pode acessar isso no seu webhook do Dialogflow. Para mais informações, consulte a documentação de solicitação de webhook do Dialogflow CX.
  • Considerações para responder a comandos e receber dados de cards ou caixas de diálogo:
  • As visualizações de links não são compatíveis.
  • Se o agente do Dialogflow responder com apenas uma mensagem, ela será enviada ao Google Chat de forma síncrona. Se o agente do Dialogflow responder com várias mensagens, todas elas serão enviadas ao Chat de forma assíncrona chamando o método create no recurso spaces.messages da API do Chat uma vez para cada mensagem.
  • Ao usar a integração do Dialogflow CX com o Chat, o agente do Dialogflow e o app Chat precisam ser configurados no mesmo projeto do Google Cloud. Se você precisar configurar o Dialogflow e o Chat em projetos diferentes do Cloud, configure um servidor intermediário para facilitar a conexão. Para saber como fazer isso, consulte este exemplo de integração de chat para o Dialogflow CX no GitHub.

Resolver problemas

Para depurar seu app do Chat, comece revisando os registros de erros. Como esse app usa o Dialogflow, você tem vários recursos de geração de registros e solução de problemas disponíveis:

Limpar

Para evitar cobranças na sua conta do Google Cloud pelos recursos usados neste tutorial, exclua o projeto do Cloud.

  1. No console do Google Cloud, acesse a página Gerenciar recursos. Clique em Menu > IAM e administrador > Gerenciar recursos.

    Acesse o Resource Manager

  2. Na lista de projetos, selecione o projeto que você quer excluir e clique em Excluir .
  3. Na caixa de diálogo, digite o ID do projeto e clique em Encerrar para excluí-lo.
  • O Dialogflow CX usa uma abordagem de máquina de estado para o design de agentes do Dialogflow, o que oferece um controle claro e explícito sobre uma conversa, uma melhor experiência do usuário final e um melhor fluxo de trabalho de desenvolvimento. Ao criar um app de chat do Dialogflow, recomendamos usar o Dialogflow CX.
  • O Dialogflow ES é outra maneira de usar o Dialogflow com um app de chat.