Bot Framework: How to create a menu in Node.js SDK?

Question

I'm developing a chatbot using Bot Framework and Node.js. My purpose is to guide the user with a Menu. I imagine that the user open the bot and it automatically prompts: " Hi I'm your bot you what are you looking for? - option1 - option2 "

Once the user clicks on one of the option he can ask me several question connected to that option and I imagine I will attach a specific QnA Maker knowledgebase.

I tried seaching on the web and I looked for the samples posted on Github but are not so helpful. Anyone could help me with a pratical example? Thanks in advance.

score 1 · Answer 1 · edited May 16 '19 at 12:41

You can do this using a prompts.Choice. This will present the user with buttons for each option - the user can click them or type the response.

So, if you have a QnAMaker dialog defined ...

var recognizer = new cognitiveservices.QnAMakerRecognizer({
    knowledgeBaseId: 'set your kbid here', 
    subscriptionKey: 'set your subscription key here'});

var basicQnAMakerDialog = new cognitiveservices.QnAMakerDialog({
    recognizers: [recognizer],
    defaultMessage: 'No match! Try changing the query terms!',
    qnaThreshold: 0.3
});

bot.dialog('/QnAMakerDialogue', basicQnAMakerDialog);

You can switch to this dialog with replaceDialog, based on what the user chose ...

function (session, results) {
     builder.Prompts.choice(session, "Hi I'm your bot you what are you looking for?", ["Ask a question", "Other cool stuff"], {listStyle: builder.ListStyle.button});
},
function (session, results) {
     if(results.response) {
          switch (results.response.entity) {
                case 'Ask a question':
                   session.replaceDialog('/QnAMakerDialogue');
                case 'Other cool stuff':
                   session.replaceDialog('/CoolStuffDialog');
                default:
                    session.send("Something went horribly wrong");
                    return;
          }
     } 
}

If your user has responded that they want to ask a question, you will need to prompt for the question. To do this, I've sometimes used a wrapper dialogue QnAPromptDialogue ...

function (session,args,next) {
    //if the user just entered 'ask question' or similar, prompt for the actual question
    var regex  = new RegExp("^ask .*");
    if(regex.test(session.message.text)) {
        builder.Prompts.text(session, "Go ahead, what is your question?");
    } else {
        next();
    }  
},
function (session, results) {
    session.replaceDialog('/QnAMakerDialogue');
}

Might not work for everybody, but including in case it's helpful.

The idea should be create another "var recognizer2" in which I put the data of the second knowledgebase in QnA right? Looking at the second snippet I tried copy and paste the code inside mine but it generate error so I tried as follow: 'bot.dialog('/', [ function (session,result) { builder.Prompts.choice(session, "Hi I'm your bot you what are you looking for?", ["Ask a question", "Other cool stuff"],{listStyle: builder.ListStyle.button}); } ... ' But,how my '/QnAMakerDialogue' dialog look like if I want to inglobe QnA kb? I want that when I click I go into a spec kb — Fraangel, Dec 29 '17 at 21:28
For combining QnA Maker and LUIS, [these samples](https://github.com/Microsoft/BotBuilder-CognitiveServices/tree/master/Node/samples) work really well, you should be able to check out the repo and run. — dividor, Jan 03 '18 at 19:34

score 1 · Accepted Answer · answered Jan 01 '18 at 06:29

Generally speaking, you can create several QnAmaker services, and define several QnAMakerRecognizer with different kbs in your bot application, then leverage recognize() of QnAMakerRecognizer in your bot waterfalls to match the questions, by your own conditions.

For a quick sample:

var recognizer1 = new cognitiveservices.QnAMakerRecognizer({
    knowledgeBaseId: <knowledgeBaseId>,
    subscriptionKey: <subscriptionKey>
});
var recognizer2 = new cognitiveservices.QnAMakerRecognizer({
    knowledgeBaseId: <knowledgeBaseId>,
    subscriptionKey: <subscriptionKey>
});
let QNARecognizer;
bot.dialog('/', [(session, args) => {
        var msg = new builder.Message(session)
            .text("Select a choice")
            .suggestedActions(
                builder.SuggestedActions.create(
                    session, [
                        builder.CardAction.imBack(session, "option1", "option1"),
                        builder.CardAction.imBack(session, "option2", "option2"),
                    ]
                )
            );
        builder.Prompts.choice(session, msg, ["option1", "option2"]);
    }, (session, results,next) => {
        console.log(results);
        session.userData.kb = results.response.entity;
        switch (results.response.entity) {
            case 'option1':
            QNARecognizer = recognizer1;
                break;
            case 'option2':
            QNARecognizer = recognizer2;
                break;
            default:
                session.endDialog('not matched');
        }
        builder.Prompts.text(session,'please ask your quesion');
    }, (session, results) => {
        QNARecognizer.recognize(session,(err,result)=>{
            session.send(result.answers[0].answer);
        })
    }
])

That's perfect thanks! Just another question,How I can combine both QnA Recognizer and Luis? I still read something but it was not so helpful, the scenario is the same, I still have 2 Luis services configured on the two QnA maker kb, how will work the integration? — Fraangel, Jan 03 '18 at 16:18
Yes, you can refer to https://github.com/Microsoft/BotBuilder-CognitiveServices/tree/master/Node/samples/Integral for the sample which should solve your requirement. — Gary Liu, Jan 04 '18 at 06:23

Bot Framework: How to create a menu in Node.js SDK?

2 Answers2