使用dialogflow实现Webhook的Google聊天自定义卡 [英] Google chat custom cards using dialogflow fulfilment webhook

问题描述

我正在尝试将DialogFlow机器人与环聊（适用于G Suite）集成。我已启用DialogFlow上的集成，并且基本意图正常运行。

为了使用实现来执行后端操作，我创建了一个Firebase云函数并将其添加为Webhook URL DialogFlow实现页面。

我编写了云功能代码来识别意图，并为简单文本响应生成Webhook响应格式。

但是，对于更复杂的意图，我希望使用更多基于动态卡的响应，例如Chat提供。为了实现此目的，我查看了dialogflowcard响应的文档。

我在

这正是我需要的，但是我需要Webhook的回应。 我没有正确的响应格式来映射两者。

当我尝试将相同的代码与webhook集成时，我没有得到任何响应在环聊聊天中回复。当我检查dialogflow UI的历史记录部分时，这是原始交互日志中提到的响应结构

  {
 queryText ：， 
，参数：{}，
意图：{
 id：已编辑， 
 displayName：已编辑，
优先级：500000，
 webhookState： WEBHOOK_STATE_ENABLED 
}，
 intentDetectionConfidence：1，
 diagnosticInfo：{
 webhook_latency_ms：284 
}，
 languageCode ;： en，
 slotfillingMetadata：{
 allRequiredParamsPresent：true 
}，
 id：已编辑 ，
 sessionId：已编辑，
时间戳： 2020-07-30T12：05：29.094Z，
源 ：： agent，
 webhookStatus：{
 webhookUsed：true，
 webhookPayload：{
 hangouts：{
 header：{
 subtitle： [e-mail]，
 title： Pizza Bot Customer Support，
 imageUrl ：" ..." 
}，
 sections：[
 {
 widgets：[
 {
 keyValue：{
  content： 12345，
 topLabel： Order No。，
 icon： TRAIN 
} 
}，
 {
 keyValue：{
 topLabel： Status，
 content： ;交货中
} 
} 
] 
}，
 {
 widgets：[
 {
 image： {
 imageUrl： https://dummyimage.com/600x400/000/fff 
} 
} 
]，
 header： Location 
}，
 {
 widgets：[
 {
 buttons：[
 {
 textButton： {
 text： OPEN ORDER，
 onClick：{
 openLink：{
 url： https：/ /example.com/orders/..." 
} 
} 
} 
} 
] 
} 
]，
 header：" Buttons-i可以将标题保留为 
} 
] 
} 
}，
 webhookStatus：{
 message： Webhook执行成功； 
} 
}，
 agentEnvironmentId：{
 agentId：已编辑，
 cloudProjectId： <已编辑的>" 
} 
} 
  

我还在聊天文档中找到此链接，该链接说明了如何显示交互式卡片式用户界面 https://developers.google.com/hangouts/chat / how-tos / cards-onclick 。但是，我无法理解如何将其与Webhook集成。

更新
我已经按照 https://www.leeboonstra.com/Bots/custom-payloads-rich-cards -dialogflow / 并能够使用他们提到的示例代码来获得卡片响应以显示出来。它正在使用此不推荐使用的库（ https://github.com/dialogflow/dialogflow-fulfillment-nodejs ）。这是工作代码，

  let payload = new Payload（ hangouts，json，{
 rawPayload：true ，
 sendAsMessage：true，
}）; 
 agent.add（payload）; 
  

这里json变量应该是我之前提到的JSON结构。因此，现在我能够使用已弃用的API映射到正确的响应格式。但是，我无法获取将正确的响应发送到后端的按钮。这是我从上一个json修改的按钮字段，

  buttons：[
 {
" textButton：{
 text： Click Me，
 onClick：{
 action：{
 actionMethodName：暂停，
参数：[
 {
键：时间，
值： 1天； 
}，
 {
 key： id，
 value： 123456 
} 
] 
} 
} 
} 
} 
] 
  

解决方案

据我所知，使用直接Dialogflow时无法响应Google聊天（以前称为环聊）按钮

问题在于按钮响应可以通过以下两种方式之一发送：

• 使用 onClick.openLink.url 属性，如大多数测试所示。
  这将使单击它的人进入有问题的URL。但是一旦到达那里，您就可以摆脱僵尸程序流程。

但是，视频群聊与Dialogflow集成并没有提供有关此事件如何传递给Dialogflow以及我上次测试时的信息。 -不是。

您可以使用Google Chat的API在云功能或应用脚本，并让您的脚本调用Dialogflow的检测Intent API 确定用户将触发什么Intent（并确定答复或致电Webhook进行其他处理）。在这种方案下，您可以选择如何处理onClick事件。进行自己的集成还为您提供了一种传入Webhooks 的方法，使用Dialogflow集成是不可能的。

I am trying to integrate DialogFlow bot with Hangouts Chat (for G Suite). I have enabled the integration on DialogFlow and the basic intents are working fine.

In order to perform backend operations using fulfillment, I have created a firebase cloud function and added this as the webhook URL on DialogFlow fulfillment page.

I have written the cloud function code to identify the intent, and to generate the Webhook response format for a simple text response. This is working, and I am seeing the firestore data being modified in response to the intent.

However for a more complicated intent, I wish to use more of the dynamic card based response that Chat offers. In order to achieve this, I have looked at the documentation for dialogflow card response.

I saw this following code at https://cloud.google.com/dialogflow/docs/integrations/hangouts. When I paste this into the dialogflow intent editor UI under hangouts custom payload (after disabling webhook integration), it works

{
  "hangouts": {
    "header": {
      "title": "Pizza Bot Customer Support",
      "subtitle": "[e-mail]",
      "imageUrl": "..."
    },
    "sections": [{
      "widgets": [{
        "keyValue": {
          "icon": "TRAIN",
          "topLabel": "Order No.",
          "content": "12345"
        }
      },
      {
        "keyValue": {
          "topLabel": "Status",
          "content": "In Delivery"
        }
      }]
    },
    {
      "header": "Location",
      "widgets": [{
        "image": {
          "imageUrl": "https://dummyimage.com/600x400/000/fff"
        }
      }]
    },
    {
      "header": "Buttons - i could leave the header out",
      "widgets": [{
        "buttons": [{
          "textButton": {
            "text": "OPEN ORDER",
            "onClick": {
              "openLink": {
                "url": "https://example.com/orders/..."
              }
            }
          }
        }]
      }]
    }]
  }
}

This is exactly what I need, but I need this response from the webhook. I'm not getting the correct response format to map between the two.

When I try to integrate the same code with the webhook, I am not getting any reply on hangouts chat. When I check the history section on dialogflow UI, here is the response structure as mentioned in Raw interaction log

{
  "queryText": "<redacted>",
  "parameters": {},
  "intent": {
    "id": "<redacted>",
    "displayName": "<redacted>",
    "priority": 500000,
    "webhookState": "WEBHOOK_STATE_ENABLED"
  },
  "intentDetectionConfidence": 1,
  "diagnosticInfo": {
    "webhook_latency_ms": 284
  },
  "languageCode": "en",
  "slotfillingMetadata": {
    "allRequiredParamsPresent": true
  },
  "id": "<redacted>",
  "sessionId": "<redacted>",
  "timestamp": "2020-07-30T12:05:29.094Z",
  "source": "agent",
  "webhookStatus": {
    "webhookUsed": true,
    "webhookPayload": {
      "hangouts": {
        "header": {
          "subtitle": "[e-mail]",
          "title": "Pizza Bot Customer Support",
          "imageUrl": "..."
        },
        "sections": [
          {
            "widgets": [
              {
                "keyValue": {
                  "content": "12345",
                  "topLabel": "Order No.",
                  "icon": "TRAIN"
                }
              },
              {
                "keyValue": {
                  "topLabel": "Status",
                  "content": "In Delivery"
                }
              }
            ]
          },
          {
            "widgets": [
              {
                "image": {
                  "imageUrl": "https://dummyimage.com/600x400/000/fff"
                }
              }
            ],
            "header": "Location"
          },
          {
            "widgets": [
              {
                "buttons": [
                  {
                    "textButton": {
                      "text": "OPEN ORDER",
                      "onClick": {
                        "openLink": {
                          "url": "https://example.com/orders/..."
                        }
                      }
                    }
                  }
                ]
              }
            ],
            "header": "Buttons - i could leave the header out"
          }
        ]
      }
    },
    "webhookStatus": {
      "message": "Webhook execution successful"
    }
  },
  "agentEnvironmentId": {
    "agentId": "<redacted>",
    "cloudProjectId": "<redacted>"
  }
}

I also found this link on chat docs which explains how to show an interactive card based UI https://developers.google.com/hangouts/chat/how-tos/cards-onclick. However I'm not able to understand how to integrate the same with the webhook.

UPDATE I have followed a tutorial at https://www.leeboonstra.com/Bots/custom-payloads-rich-cards-dialogflow/ and was able to get the card response to show up using the sample code they mention. It is using this deprecated library (https://github.com/dialogflow/dialogflow-fulfillment-nodejs). Here is the code for that to work,

let payload = new Payload("hangouts", json, {
        rawPayload: true,
        sendAsMessage: true,
});
agent.add(payload);

Here the json variable should be the previous JSON structure I have mentioned. So now, I'm able to map to the correct response format using the deprecated API. However, I'm not able to get the button to send the right response to the back end. Here is the buttons field that I modified from the previous json,

  "buttons": [
    {
      "textButton": {
        "text": "Click Me",
        "onClick": {
          "action": {
            "actionMethodName": "snooze",
            "parameters": [
              {
                "key": "time",
                "value": "1 day"
              },
              {
                "key": "id",
                "value": "123456"
              }
            ]
          }
        }
      }
    }
  ]

解决方案

As far as I know, responding to a Google Chat (formerly Hangouts Chat) button isn't possible when using the direct Dialogflow integration.

The problem is that the button response can be sent one of two ways:

• An event will be sent back to the bot code indicating the click.
• Using the onClick.openLink.url property, as most of your test show. This will take the person clicking it to the URL in question. But once there, you're taken out of the bot flow.

However, the documentation for the Hangouts Chat integration with Dialogflow doesn't provide any information about how this event is passed to Dialogflow, and the last time I tested it - it isn't.

You can write your own integration using Google Chat's API on something like Cloud Functions or Apps Script and have your script call Dialogflow's Detect Intent API to determine what Intent would be triggered by the user (and determine replies or call the webhook for additional processing). Under this scheme, you can choose how to handle the onClick event. Making your own integration also provides you a way to do Incoming Webhooks, which isn't possible when using the Dialogflow integration.

这篇关于使用dialogflow实现Webhook的Google聊天自定义卡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！