Integrate rich message into Dialogflow fullfilment

Question

I have a fulfillment code for a Dialogflow chatbot and I would like to be able to send (and, later, receive and analyze) rich messages. As I am a bit new with javascript programming I was wondering how to send a rich message with the fulfillment code. I tried to do one for function answer1Handler .

const functions = require('firebase-functions');
const {WebhookClient} = require('dialogflow-fulfillment');
const {Card, Suggestion} = 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 });
  console.log('Dialogflow Request headers: ' + JSON.stringify(request.headers));
  console.log('Dialogflow Request body: ' + JSON.stringify(request.body));

  function welcome(agent) {
    agent.add(`Welcome to my agent!`);
  }

  function fallback(agent) {
    agent.add(`I didn't understand FULLFILMENT`);
    agent.add(`I'm sorry, can you try again? FULLFILMENT`);
  }

  function answer1Handler(agent){
    agent.add('Intent answer1 called');
    const answer = agent.parameters.number;
    answers.push(answer);

    const payload = {
      "slack": {
        "attachments": [
          {
            "blocks": [
              {
                "type": "section",
                "text": {
                  "type": "mrkdwn",
                  "text": "*Compared to most people in the UK :uk:, how optimistic are you about life?* Poll by <fakeLink.toUser.com|Mihailo>"
                }
              },
              {
                "type": "divider"
              },
              {
                "type": "section",
                "text": {
                  "type": "mrkdwn",
                  "text": ":cold_sweat: *I’m feeling more negative about everything; less free and more pessimistics*"
                },
                "accessory": {
                  "value": "1",
                  "type": "button",
                  "text": {
                    "emoji": true,
                    "type": "plain_text",
                    "text": "Write 1"
                  }
                },
                "block_id": "1"
              },
              {
                "accessory": {
                  "value": "2",
                  "type": "button",
                  "text": {
                    "emoji": true,
                    "type": "plain_text",
                    "text": "Write 2"
                  }
                },
                "block_id": "2",
                "type": "section",
                "text": {
                  "type": "mrkdwn",
                  "text": ":expressionless: *More positive about the quality of life, but worrying more about the NHS and the security situation*"
                }
              }
            ]
          }
        ]
      }
    }

    agent.add(
        new Payload(agent.UNSPECIFIED, payload, {rawPayload: true, sendAsMessage: true})
    );
  }

  intentMap.set('RhymingWord', rhymingWordHandler);
  intentMap.set('answer1', answer1Handler);

  agent.handleRequest(intentMap);
});

But it doesn't work as when I call answer1 intent. I have one warning:

Payload is not defined

Answer 1

At the top of your code you have the following statement:

const {Card, Suggestion} = require('dialogflow-fulfillment');

In here you're only importing the Card and Suggestion class, you should add the Payload class as well:

const {Card, Suggestion, Payload} = require('dialogflow-fulfillment');

After you've done this, the warning should dissapear.