Google 使用 dialogflow fulfillment webhook 聊天自定义卡片

Question

我正在尝试将 DialogFlow 机器人与 Hangouts Chat（适用于 G Suite）集成。我已经在 DialogFlow 上启用了集成，基本意图运行良好。

为了使用 fulfillment 执行后端操作，我创建了一个 firebase 云函数并将其添加为 DialogFlow fulfillment 页面上的 webhook URL。

我已经编写了云功能代码来识别意图，并为简单的文本响应生成 Webhook 响应格式。这很有效，我看到正在根据意图修改 firestore 数据。

然而，对于更复杂的意图，我希望更多地使用 Chat 提供的基于动态卡片的响应。为了实现这一点，我查看了 dialogflow 卡响应的文档。

我在 https://cloud.google.com/dialogflow/docs/integrations/hangouts 看到了以下代码。当我将其粘贴到环聊自定义有效负载下的 dialogflow 意图编辑器 UI 时（禁用 webhook 集成后），它有效

{
  "hangouts": {
    "header": {
      "title": "Pizza Bot Customer Support",
      "subtitle": "pizzabot@example.com",
      "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/..."
              }
            }
          }
        }]
      }]
    }]
  }
}

这正是我所需要的，但我需要来自 webhook 的响应。 我没有得到正确的响应格式来映射两者。

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

中提到的响应结构

{
  "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": "pizzabot@example.com",
          "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>"
  }
}

我还在聊天文档中找到了这个 link，它解释了如何显示基于 UI https://developers.google.com/hangouts/chat/how-tos/cards-onclick 的交互式卡片。但是我无法理解如何将其与 webhook 集成。

更新我遵循了 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 上的教程）。这是工作代码，

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": "snooze",
            "parameters": [
              {
                "key": "time",
                "value": "1 day"
              },
              {
                "key": "id",
                "value": "123456"
              }
            ]
          }
        }
      }
    }
  ]

Answer 1

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

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

一个事件将被发送回指示点击的机器人代码。
使用onClick.openLink.url属性，作为你的测试显示。这会将点击它的人带到有问题的 URL。但一旦到达那里，您就会被排除在机器人流程之外。

但是，Hangouts Chat integration with Dialogflow 的文档没有提供有关如何将此事件传递给 Dialogflow 的任何信息，我上次测试它时也没有提供任何信息。

您可以使用 Google Chat 的 API 在类似 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 上编写自己的集成，这在使用 Dialogflow 集成时是不可能的。

Google 使用 dialogflow fulfillment webhook 聊天自定义卡片

Google chat custom cards using dialogflow fulfilment webhook

dialogflow-es

hangouts-chat

dialogflow-es-fulfillment

google-chat

google-workspace