Dialogflow fulfilment : agent.add() not returning response to webhook (twilio), works good with dialogflow console and google assistant

Question

I'm creating a chatbot using dialogflow, firebase and twilio on Whatsapp. The interaction works well using the responses from the Intents and using the inline editor function, writes data to the firebase database too. But when I try to return the response from the fulfilment inline editor using the agent.add() method the responses are shown only in the dialogflow console interaction (and the google assistant as well), but not in the Twilio-whatsapp webhook integration. The logs in the GCP show that the data is being read when a request is made from using a text from twilio-whatsapp number.

I just want that the agent.add() text to be returned to twilio message body.

Or if there is some other possible way to do it, so that I can generate dynamic responses based on the data being read from the database.

Response in Dialogflow console

---

The code in my inline editor.

index.js

// See https://github.com/dialogflow/dialogflow-fulfillment-nodejs
// for Dialogflow fulfillment library docs, samples, and to report issues
"use strict";

const functions = require("firebase-functions");
const admin = require("firebase-admin");
const { WebhookClient } = require("dialogflow-fulfillment");

process.env.DEBUG = "dialogflow:debug"; // enables lib debugging statements
admin.initializeApp(functions.config().firebase);
const db = admin.firestore();

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

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

    function saveUserDataHandler(agent) {
      const firstname = agent.parameters.firstname;
      const lastname = agent.parameters.lastname;
      const phoneno = agent.parameters.phonenumber;

      const dialogflowAgentRef = db.collection("users").doc();

      return db
        .runTransaction((t) => {
          t.set(dialogflowAgentRef, {
            firstname: firstname,
            lastname: lastname,
            phoneno: phoneno,
          });
          return Promise.resolve("Write complete");
        })
        .then((doc) => {
          agent.add(
            ` Wrote "${firstname} ${lastname}, ${phoneno}" to the Firestore database.`
          );
          console.log("wrote to db", firstname, lastname, phoneno);
        })
        .catch((err) => {
          console.log(`Error writing to firestore : ${err}`);
          agent.add(
            ` Failed to write "${firstname} ${lastname}, ${phoneno}" to the Firestore database.`
          );
        });
    }

    function readUserDataHandler(agent) {
      const dialogflowAgentDoc = db.collection("users");

      return dialogflowAgentDoc
        .get()
        .then((snapshot) => {
          snapshot.forEach((doc) => {
            if (!doc.exists) {
              agent.add("No Data found in the database");
            } else {
              agent.add(doc.data().firstname);
              agent.add(doc.data().lastname);
              agent.add(doc.data().phoneno);
              console.log(doc.data());
            }
            return Promise.resolve("Read complete");
          });
        })
        .catch((err) => {
          agent.add("Error reading entry from the Firestore database.");
          console.log(err);
        });
    }

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

    // Run the proper function handler based on the matched Dialogflow intent name
    let intentMap = new Map();
    intentMap.set("Default Welcome Intent", welcome);
    intentMap.set("Default Fallback Intent", fallback);
    intentMap.set("Get User Data", saveUserDataHandler);
    intentMap.set("Read User Data", readUserDataHandler);

    agent.handleRequest(intentMap);
  }
);

package.json

{
  "name": "dialogflowFirebaseFulfillment",
  "description": "This is the default fulfillment for a Dialogflow agents using Cloud Functions for Firebase",
  "version": "0.0.1",
  "private": true,
  "license": "Apache Version 2.0",
  "author": "Google Inc.",
  "engines": {
    "node": "8"
  },
  "scripts": {
    "start": "firebase serve --only functions:dialogflowFirebaseFulfillment",
    "deploy": "firebase deploy --only functions:dialogflowFirebaseFulfillment"
  },
  "dependencies": {
    "actions-on-google": "^2.5.0",
    "dialogflow": "^4.0.3",
    "dialogflow-fulfillment": "^0.6.1",
    "firebase-admin": "^6.4.0",
    "firebase-functions": "^2.1.0"
  }
}

Links referred : fulfillment-firestore-nodejs, updating dependencies

In the twilio debugger I get a response that the message body is invalid.

MESSAGE Message body must be specified Invalid Body Warning - 14103 Message Invalid Body The Message body does not contain valid text or a media URL

Something mentioned here too, but the comments there didn't help.

Am I missing something, or is it a bug as others are facing it too??

Thanks in advance.