Пользовательские карточки чата Google с использованием веб-перехватчика диалогового процесса

Я пытаюсь интегрировать бота DialogFlow с Hangouts Chat (для G Suite). Я включил интеграцию с DialogFlow, и основные намерения работают нормально.

Чтобы выполнять бэкэнд-операции с использованием выполнения, я создал облачную функцию firebase и добавил ее в качестве URL-адреса веб-перехватчика на странице выполнения DialogFlow.

Я написал код облачной функции, чтобы определить намерение и сгенерировать формат ответа Webhook для простого текстового ответа. Это работает, и я вижу, что данные firestore изменяются в ответ на намерение.

Однако для более сложного намерения я хочу использовать больше динамических ответов на основе карточек, которые предлагает чат. Чтобы добиться этого, я просмотрел документацию по ответу карточки диалогового потока.

Я видел следующий код на странице https://cloud.google.com/dialogflow/docs/integrations/hangouts. Когда я вставляю это в пользовательский интерфейс редактора намерений диалогового потока в пользовательскую полезную нагрузку Hangouts (после отключения интеграции с веб-перехватчиком), он работает

{
  "hangouts": {
    "header": {
      "title": "Pizza Bot Customer Support",
      "subtitle": "[email protected]",
      "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/..."
              }
            }
          }
        }]
      }]
    }]
  }
}

Это именно то, что мне нужно, но мне нужен этот ответ от вебхука. Я не получаю правильный формат ответа для сопоставления между ними.

Когда я пытаюсь интегрировать тот же код с веб-перехватчиком, я не получаю ответа в чате Hangouts. Когда я проверяю раздел истории в пользовательском интерфейсе диалогового потока, вот структура ответа, как указано в журнале необработанных взаимодействий.

{
  "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": "[email protected]",
          "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>"
  }
}

Я также нашел эту ссылку в документации чата, в которой объясняется, как показать пользовательский интерфейс на основе интерактивных карточек https://developers.google.com/hangouts/chat/how-tos/cards-onclick. Однако я не могу понять, как интегрировать то же самое с веб-перехватчиком.

ОБНОВЛЕНИЕ. Я изучил руководство по адресу 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"
              }
            ]
          }
        }
      }
    }
  ]