There are some important parts of BotUI.
.then()
A message is the text that shows up in the UI. It can be either from the bot or human.
The message from bot shows up aligned to the left. The message from human shows up aligned to the right of UI and with a slighted different background that bot message.
Developer has total control over which message to show and what to show in it.
Here is how to show a message from bot:
botui.message.add({
content: 'Hello from bot.'
});
And here's how to show it as a user sent message:
botui.message.add({
human: true,
content: 'Hello from human.'
});
Notice that the only thing different is human: true
. You can also use message.bot
and message.human
instead of message.add
.
Action could be some text input required from user. Or a couple of buttons.
Developer can show or hide the action. But only one type of action can be shown at once.
Here's how to ask for a user's name:
botui.message.add({ // show a message
human: true,
content: 'Whats your name?'
}).then(function () { // wait till its shown
botui.action.text({ // show 'text' action
action: {
placeholder: 'Your name'
}
});
})
This will first show a message and then show an input field with Your name
as its placeholder
attribute value.
You can read more about it in the guide.
You are mostly likely to show a message after the previous one is shown or after an action has been performed so we need some kind of callback here. That's where then
comes in. You can define your callback function inside a then
and chain it to previous message or action.
Like in this example:
botui.message.add({ // show a message
human: true,
content: 'Whats your name?'
}).then(function () { // wait till its shown
botui.action.text({ // show 'text' action
action: {
placeholder: 'Your name'
}
});
})
Here then
will only be called once the previous message has been shown.
You keep chaining messages and actions together using then
.
botui.message.add({ // show a message
human: true,
content: 'Whats your name?'
}).then(function () { // wait till its shown
return botui.action.text({ // show 'text' action
action: {
placeholder: 'Your name'
}
});
}).then(function (res) { // get the result
botui.message.add({
content: 'Your name is ' + res.value
});
});
Notice a
return
in firstthen
. You'll need toreturn
a Promise if you want to keep chaining. Otherwisethen
will be called without waiting for previous message or action to be done.
All the message
and action
methods return a Promise
so we can use .then()
to chain them together.