为什么富消息显示在内部测试器中，却不能在 Messenger 中显示？答案

【问题标题】：Why can't rich messages be displayed in Messenger since they are shown in the internal tester?为什么富消息显示在内部测试器中，却不能在 Messenger 中显示？
【发布时间】：2020-05-22 19:32:00
【问题描述】：

我有一个 Dialogflow 聊天机器人。在 Dialogflow 内部测试中，一切正常，但在 facebook 上显示的版本中，我无法获得卡片或建议。即使我用另一个工作聊天机器人的代码替换它们。

const functions = require('firebase-functions');
const {WebhookClient} = require('dialogflow-fulfillment');
const {Card, Suggestion, Payload} = require('dialogflow-fulfillment');
var answers = [];

process.env.DEBUG = 'dialogflow:debug'; // enables lib debugging statements

exports.dialogflowFirebaseFulfillment = functions.https.onRequest((request, response) => {
  const agent = new WebhookClient({ request, response });

  function welcome(agent) {
    agent.add('Hi! Do you want to discover your lockdown personality?');
    agent.add(new Card({
        title: '1. How has the COVID-19 crisis',
        imageUrl: 'https://ejoy-english.com/blog/wp-content/uploads/2018/08/shutterstock_524250877-e1496428580440.jpg',
        text: 'impacted the stability of your life?',
      })
    );
    agent.add(new Suggestion("1 more exasperated and hopeless"));
    agent.add(new Suggestion("2 less freaked out than other people"));
    agent.add(new Suggestion("3 More calm and hopeful"));
    agent.add(new Suggestion("4 More scared and panicked"));
    agent.add(new Suggestion("5 More surprised and baffled"));
  }
  let intentMap = new Map();
  intentMap.set('Default Welcome Intent', welcome);


  agent.handleRequest(intentMap);
});

这是我在 Facebook 上获得的信息：

在 Dialogflow 的内部测试器中：

它在 Slack 上运行良好，我设法做了另一个聊天机器人，它也使用丰富的消息，但不使用 JSON 有效负载，它在 Messenger 上运行良好。我不知道为什么不能用这个特定的聊天机器人在 Messenger 中显示丰富的消息。

【问题讨论】：

标签： javascript dialogflow-es-fulfillment rich-media

【解决方案1】：

DialogFlow 内置测试器是验证对话流和测试意图识别的好方法，但是关于响应的呈现（从快速回复到附件），您需要考虑 Facebook 具有不同的呈现引擎（其他频道也一样），因此某些类型的播放效果不佳，而且它们也不是绝对标准化的。

我认为在这种情况下的解决方案是提供一个自定义的 Facebook 有效负载，这正是 Messenger 平台所期望的。

例如按钮：

 {
  "facebook": {
    "attachment": {
      "type": "template",
      "payload": {
        "template_type": "button",
        "text": "Can I ask you a few questions?",
        "buttons": [
          {
            "title": "Yes",
            "payload": "Yes",
            "type": "postback"
          },
          {
            "payload": "No",
            "title": "No",
            "type": "postback"
          }
        ]
      }
    }
  }
}

当您使用 DialogFlow Fulfillment 库时，您希望查看 Payload 对象。

agent.add(new Payload(agent.FACEBOOK, {/*your custom payload here*/});

【讨论】：

感谢您的回答！这是一个很好的方法。但是，我设法创建了一个聊天机器人，其中包含不使用 json 有效负载的丰富消息。我不知道我错过了什么......
在 Facebook 上？还是模拟器？您可能需要为 FB 响应定义一个代理，并为默认响应定义一个。在 DialogFlowUI 中，当它只是一个文本响应（它适用于任何地方）时，您通常使用默认值，然后逐个指定通道以确保将正确的有效负载发送到正确的渲染引擎

【解决方案2】：

我注意到我的 dialogflow 实现 webhook 服务的 HTTP 响应有些奇怪：当我使用 Dialogflow Messenger 客户端时，收到的 JSON 负载在 JSON 开头注入了 4 个不需要的字符嵌入在我的网页上。但是，当我在 Dialogflow 代理控制台中使用“立即尝试”测试器时，这些字符不会出现在 JSON 响应负载中。

这些额外的字符可能会导致 JSON 无效，从而破坏消息客户端中卡片的呈现和快速回复。这是导致呈现问题的 Dialogflow Messenger 中的错误吗？

)]}' <---What are these???
{
  "responseId": "xxxxx",
  "queryResult": {
    "queryText": "baby shower",
    "parameters": {
      "occassionType": "baby shower"
    },
    "allRequiredParamsPresent": true,
    "fulfillmentText": "Ok, you are looking for your baby shower",
    "fulfillmentMessages": [{
      "text": {
        "text": ["Ok, you are looking for your baby shower"]
      }
    }, {
      "payload": {
        "queryResult": {
          "action": "input.welcome",
          "allRequiredParamsPresent": true,
          "diagnosticInfo": {
            "webhook_latency_ms": 191.0
          },
          "fulfillmentMessages": [{
            "text": {
              "text": ["Hi! My name is Buffie. XXXXXXX"]
            }
          }, {
            "card": {
              "buttons": [{
                "postback": "https://somewhere.com",
                "text": "Button"
              }],
              "imageUri": "https://www.gstatic.com/webp/gallery/4.jpg",
              "subtitle": "This is some example text...",
              "title": "Card Title"
            }
          }],
          "fulfillmentText": "Hi! My name is Buffie, how can I help you",
          "intent": {
            "displayName": "Default Welcome Intent",
            "name": "projects/xxxxx/xxxxx"
          },
          "intentDetectionConfidence": 1.0,
          "languageCode": "en",
          "parameters": {
          },
          "queryText": "hi"
        },
        "responseId": "XXXXXXXX",
        "webhookStatus": {
          "message": "Webhook execution successful"
        }
      }
    }],
    "intent": {
      "name": "projects/xxxxx/xxxx/xxxx",
      "displayName": "Occassion"
    },
    "intentDetectionConfidence": 1.0,
    "languageCode": "en"
  }
}

【讨论】：