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

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 看到了以下代码。当我将其粘贴到 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>"
  }
}

我还在聊天文档上找到了这个链接，它解释了如何显示基于 UI 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": "snooze",
            "parameters": [
              {
                "key": "time",
                "value": "1 day"
              },
              {
                "key": "id",
                "value": "123456"
              }
            ]
          }
        }
      }
    }
  ]

Answer 1

据我所知，在使用直接 Dialogflow 集成时无法响应 Google Chat(以前称为 Hangouts Chat)按钮。

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

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

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

您可以使用 Google Chat 的 API 在类似 Cloud Functions 上编写自己的集成或 Apps Script并让您的脚本调用 Dialogflow 的 Detect Intent API以确定用户将触发什么 Intent(并确定回复或调用 webhook 进行额外处理)。在此方案下，您可以选择如何处理 onClick 事件。进行自己的集成也为您提供了一种方法来做 Incoming Webhooks ，这在使用 Dialogflow 集成时是不可能的。