Google dialogflow agent.add(new Suggestion()) not working on dialogflow messenger

Question

I am trying very basic code to add suggestion chips using fulfillment (inline editor) but it's not working. Following is the code that I am trying to use:

'use strict';

const functions = require('firebase-functions');
const { WebhookClient } = require('dialogflow-fulfillment');
const { Card, Suggestion } = require('dialogflow-fulfillment');
const { Suggestions } = require('actions-on-google');

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(new Suggestion(`Quick Reply`));
    agent.add(`Welcome to my agent!`);
  }

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

  function yourFunctionHandler(agent) {
    agent.add(`This message is from Dialogflow's Cloud Functions for Firebase editor!`);
    //the following suggestion chips are not working 
    agent.add(new Suggestion(`Quick Reply`));
    agent.add(new Suggestion(`Suggestion`));
  }
  let intentMap = new Map();
  intentMap.set('Default Welcome Intent', welcome);
  intentMap.set('Default Fallback Intent', fallback);

  intentMap.set('car', yourFunctionHandler);

  agent.handleRequest(intentMap);
});

Following is the image of the dialogflow messenger:

Answer 1

There reason you cannot see the suggestion chips is because Dialogflow Web Demo is only for simple text responses. It does not support any rich response. If you want to test rich responses you should try to integrate it with other messaging apps or in case of web use you should create your own web widget.
Here's more info from docs.

Answer 2

It seems that the Suggestions Chips instructions in your code are for Assistant integration. If you test your Agent in Google Assitant most probably will work (for Phone device). I tested the following code and I got the expected output in this scenario:

  function yourFunctionHandler(agent) {
     agent.add(`This message is from Dialogflow's Cloud Functions for Firebase editor!`);
     agent.add(new Card({
         title: `Title: this is a card title`,
         imageUrl: 'https://developers.google.com/actions/images/badges/XPM_BADGING_GoogleAssistant_VER.png',
         text: `This is the body text of a card.  You can even use line\n  breaks and emoji! 💁`,
         buttonText: 'This is a button',
         buttonUrl: 'https://assistant.google.com/'
       })
     );
     agent.add(new Suggestion(`Quick Reply`));
     agent.add(new Suggestion(`Suggestion`));
   }

Since your objective is make it work from Dialogflow Messenger integration, I can think of two options:

1. You can specify a Custom payload in the Dialogflow Console. In your intent there is a Default Response section, when you click on ADD RESPONSE you will see the option Custom Payload. In there you can paste the Chips code example, and the intent will respond with the chips in Dialogflow Messenger.

2. To make it work from the Fulfillment section your will need to build the json structure for rich responses, where the payload should have to be richContent. I'm not sure how to use NodeJS in the Inline Editor to return a json response, but I built my own Cloud Function with python and I configured it as my Webhook.

This approached worked, the procedure I followed is posted here and this is my function:

def entry_function(request):
 
   response_json = jsonify(
       fulfillment_text="This message is from Dialogflow's testing!",
       fulfillment_messages=[
           {
               "payload": {
                   "richContent": [[{
                       "actionLink": "https://assistant.google.com/",
                       "subtitle": "This is the body text of a card.  You can even use line\n  breaks and emoji! 💁",
                       "title": "Title: this is a card title",
                       "type": "info"
                   },
                   {
                      "type": "chips",
                      "options": [
                        {
                          "text": "Chip 1",
                          "image": {
                            "src": {
                              "rawUrl": "https://example.com/images/logo.png"
                            }
                          },
                          "link": "https://example.com"
                        },
                        {
                          "text": "Chip 2",
                          "image": {
                            "src": {
                              "rawUrl": "https://example.com/images/logo.png"
                            }
                          },
                          "link": "https://example.com"
                        }
                      ]
                    }]]
               }
           }
       ]
   )
   return response_json