Dialogflow-fulfillment-nodejs: how to remove "Choose an item" text before suggestion

[magnum]

Anytime I add Suggestion to agent, on facebook there's always a text added saying "Choose an item"
how can it be removed or translated?

[naranjja]

Same here, how do we change this? Thanks!

[naranjja]

So, what I did was go into /src/rich-responses/suggestions-response.js and modified the Suggestion constructor to include this.title besides this.replies:

constructor(suggestion) {
    super();
    this.platform = undefined;
    this.replies = []; 
    this.title = "Choose an item:"

Then, I set the value of this.title to the passed in value to the suggestion object:

} else if (typeof suggestion === 'object') {
    this.replies.push(suggestion.reply)
    this.title = suggestion.title

Lastly, I modified the getV2ResponseObject_() function so that it handles this.title for the Facebook response:

} else if (platform === PLATFORMS.FACEBOOK) {
    response = {
        quickReplies: {
            title: this.title,
            quickReplies: this.replies
        }
    }
}

Once that's done, you can make quick replies like this. First, make the first one with a title:

const quickReplies = new Suggestion({
    title: "My custom message",
    reply: "Option 1"
})

And then add the rest of the options like so:

quickReplies.addReply_("Option 2")
quickReplies.addReply_("Option 3")
quickReplies.addReply_("Option 4")

Lastly,

agent.add(quickReplies)

And it works!

[naranjja]

In case anyone's interested, here's my fork, the complete edited file, and the edits (Git diff).

[pranavgor]

hey @naranjja I made the changes in the respective folder (suggestions-response,js) but for some reasons those changes are not being reflected, is there anything more than just saving the file that I need to do ?

[pranavgor]

I installed your github module itself, it works perfectly. Thanks @naranjja

[TexugoGaio]

hey guys, I'm new to this platform, how do I use this @naranjja code in my project? How would they require them?
The suggestion call I'm doing so:
const { Suggestion} = require('dialogflow-fulfillment');

[naranjja]

@TexugoGaio In your project's package.json file, you would edit the version of "dialogflow-fulfillment" to the URL of my repo. Like this:

{
"dialogflow-fulfillment": "git+https://github.com/naranjja/dialogflow-fulfillment-nodejs.git"
}

[TexugoGaio]

thank you very much @naranjja, it worked perfectly!

[matthewayne]

Since this is a platform specific feature, it won't be supported in the library. If you'd like to use platform-specific responses, I'd recommend using the payload response type

[jdpowell1]

@matthewayne Appreciate the great library, cheers for the great work. The issue with a quick reply payload is the limitation of not being able to send fulfillment messages along with a custom payload. The solution above supplied by @naranjja is a good work around until this functionality is added. There is a pull request pending that elevates this limitation. (#113) Any chance of getting this merged any time soon? Would be very useful for my current use case. Cheers.

[dadisigursveinn]

@matthewayne is there no way to change the

Choose an item

message on Facebook messenger without using Payload? Or to implement the feature without it needing to be platform specific.

[Vadorequest]

@matthewayne I understand what you're saying and the design choice. But the reality of this choice push developers to fork and use their own implementation of your library, which is really not a good thing.

Stepping back a bit, and after using this lib for 2 days, I can tell a proper abstraction of the specificities of each Platform is a must-have. For instance, in my case I need to deal with both Facebook and Web integrations, and I ended up writing wrappers around basic stuff like Text or Suggestion.

If you don't want to write custom integration code in this library, so be it. What do you think about writing a wrapper of your own library, or a bunch of helpers to deal with each platform specificities? It's something the community will need on the long-run.

Also, your link to payload response type is dead.

[magnum]

i solved using a custom payload as @matthewayne suggested: this way no fork is needed /cc @Vadorequest i'm using somthing like this

sendOptions(agent, options) {
    agent.add("please choose an item...")
    options.map(option => agent.add(new Suggestion(option)))
    let payload = new Payload(agent.FACEBOOK, {
      text: introText,
      quick_replies: options
        .slice(0, 5)
        .map(option => {
        return {
          content_type: "text",
          title: option,
          payload: option
        }
      })
    });
    agent.add(payload)
  }

[Vadorequest]

@magnum I don't understand why you send agent.add("please choose an item...") if you don't actually want it to be displayed. But I'm not so used to Dialogflow, getting started.

[magnum]

@magnum I don't understand why you send agent.add("please choose an item...") if you don't actually want it to be displayed. But I'm not so used to Dialogflow, getting started.

just saying this way you can customize it, for example translate it (that was my need) or for example not use it.

[jbonet]

How would this work for Telegram?

[Parau]

i solved using a custom payload as @matthewayne suggested: this way no fork is needed /cc @Vadorequest i'm using somthing like this

sendOptions(agent, options) {
    agent.add("please choose an item...")
    options.map(option => agent.add(new Suggestion(option)))
    let payload = new Payload(agent.FACEBOOK, {
      text: introText,
      quick_replies: options
        .slice(0, 5)
        .map(option => {
        return {
          content_type: "text",
          title: option,
          payload: option
        }
      })
    });
    agent.add(payload)
  }

Tried this code but it worked only in the Dialogflow simulator not inside Facebook messenger...

[mv-aspect]

let payload = new Payload(agent.FACEBOOK, {
text: introText,
quick_replies: options
.slice(0, 5)
.map(option => {
return {
content_type: "text",
title: option,
payload: option
}
})
});
agent.add(payload)

That works for me in the FB messenger as well.

[rebuby9090]

@TexugoGaio In your project's package.json file, you would edit the version of "dialogflow-fulfillment" to the URL of my repo. Like this:

{
"dialogflow-fulfillment": "git+https://github.com/naranjja/dialogflow-fulfillment-nodejs.git"
}

what is dialogflow-fulfillment version which you editted?
It's 0.6.1 or lower?

[rebuby9090]

So, what I did was go into /src/rich-responses/suggestions-response.js and modified the Suggestion constructor to include this.title besides this.replies:

constructor(suggestion) {
    super();
    this.platform = undefined;
    this.replies = []; 
    this.title = "Choose an item:"

Then, I set the value of this.title to the passed in value to the suggestion object:

} else if (typeof suggestion === 'object') {
    this.replies.push(suggestion.reply)
    this.title = suggestion.title

Lastly, I modified the getV2ResponseObject_() function so that it handles this.title for the Facebook response:

} else if (platform === PLATFORMS.FACEBOOK) {
    response = {
        quickReplies: {
            title: this.title,
            quickReplies: this.replies
        }
    }
}

Once that's done, you can make quick replies like this. First, make the first one with a title:

const quickReplies = new Suggestion({
    title: "My custom message",
    reply: "Option 1"
})

And then add the rest of the options like so:

quickReplies.addReply_("Option 2")
quickReplies.addReply_("Option 3")
quickReplies.addReply_("Option 4")

Lastly,

agent.add(quickReplies)

And it works!

what is dialogflow-fulfillment version which you editted?
It's 0.6.1 or lower?