use HTML date picker in IBM watson conversation dialog to get date as input from user

Question

I am trying to use <input type="date" id="birthday" name="birthday"> to display a calendar to be selected by user on IBM dialog. So, when this calendar will ask for date in the chat bot and then after user selecting the date, it should store the selected date as variable or any context variable. How I have to implement it in IBM Watson chatbot. Thanks

Watson Assistant returns text and, depending on the interface, may return some HTML. What interface are you using? Web chat integration supports HTML — data_henrik
@data_henrik I can see the date picker and select the date but how to I further move to store in to a selected context variable? — Kumar

Sayuri Mizuguchi Sayuri Mizuguchi · Accepted Answer · 2020-04-20T16:02:14

It really depends on how your front-end app is built to call IBM Watson API. Trying to be more generic, you would need to do:

First, you would need to add the html syntax into your answer/response node on Watson Conversation:

Please select your date: <br /> 
<input type="date" id="birthday" name="birthday">

And in your front-end code (probably index.html that contains your UI), you would need a function to identify what was selected, e.g:

document.getElementById("birthday").addEventListener("change", function() {
    let inputDate = this.value;
    let ifYouWantEntireDateFormat = new Date(inputDate);
    console.log(inputDate); // 2020-04-20
    console.log(ifYouWantEntireDateFormat); //e.g. Mon April 20 2020 00:00:00 etc
});

You could also use querySelector function. In addition, if no value is selected it will return "Invalid date"

With all that in mind, you also need to know that Watson API accepts the payload having the context variables on it, which is what you need. I would recommend checking the API docs first to understand more. But according to what I understood, your payload might be similar to:

const AssistantV2 = require('ibm-watson/assistant/v2');
const { IamAuthenticator } = require('ibm-watson/auth');

const assistant = new AssistantV2({
  version: '2020-04-01',
  authenticator: new IamAuthenticator({
    apikey: '{apikey}',
  }),
  url: '{url}',
});

assistant.message({
  assistantId: '{assistant_id}',
  sessionId: '{session_id}',
  input: {
    'message_type': 'text',
    'text': 'Hello',
    'options': {
      'return_context': true
    }
  },
  context: {
    'global': {
      'myDatePicker': inputDate,
      'system': {
        'user_id': 'my_user_id'
      }
    },
    'skills': {
      'main skill': {
        'user_defined': {
          'account_number': '123456'
        }
      }
    }
  }
})
  .then(res => {
    console.log(JSON.stringify(res.result, null, 2));
  })
  .catch(err => {
    console.log(err);
  });

Note The context is included in message responses only if you return_context=true in the message request.

Important links:

Input type Date - MDN
Watson Assistant API doc - IBM Watson

use HTML date picker in IBM watson conversation dialog to get date as input from user

1 Answers