BotUI
instance
message
objectaction
objecttext
objectbutton
objectresult
objectPromise
The BotUI
constructor. Returns a BotUI
instance.
id
- required - The id
of the element which has the <bot-ui>
tag.options
- optional - An object
of options.// options with default values.
{
debug: false, // set this to true if you want to debug the underlaying Vue instance
fontawesome: true, // set this to false if you already have FontAwesome in your project and don't want it to be loaded again by BotUI.
}
This instance has two properties.
This method can be used to add, remove or update messages in the UI.
It has seven methods.
botui.message.add
Appends a message to UI.
Accepts an object
of message
type.
Returns Promise
with index
of added message.
botui.message.bot
Appends a message to UI. Just a shorthand to message.add
.
Accepts an object
of message
type.
Returns Promise
with index
of added message.
botui.message.human
Appends a message to UI and sets the human
to true
.
Accepts an object
of message
type.
Returns Promise
with index
of added message.
botui.message.get
Accepts an index
of message
.
botui.message.update
Updates a message in UI.
Accepts 2 parameters.
index
message
Only
content
andloading
property of message can updated.type
of a message cannot be changed.
botui.message.remove
Removes a message from UI.
Accepts an index
of message
to be removed.
Be careful while using it. It changes all the internal
index
s for messages. Which may result in strange behavior ofmessage.update
.
Returns Promise
.
botui.message.removeAll
Removes all the messages from UI.
Returns Promise
.
This method can be used to show, hide or set an action to be performed in UI.
It has four methods.
botui.action.show
Shows the action section.
Accepts an object
of action
type.
Returns Promise
botui.action.hide
Hides the action section. Does not expect any parameters.
Returns Promise
botui.action.text
Shows the action section and sets the action type
to text
. Its a shorthand to show
.
Accepts an object
of action
type.
botui.action.select
Shows the action section and sets the action type
to select
. Its a shorthand to show
.
Accepts an object
of action
type.
botui.action.button
Shows the action section and sets the action type
to button
. Its a shorthand to show
.
Accepts an object
of action
type.
Can be passed to ..
// with default values.
{
loading: false, // set to true if you want to show a loading state '3 animated dots'. available in version >= 0.3.1
delay: 0, // wait before showing the message. in milliseconds.
type: 'text', // either 'text' or 'embed'
content: '', // Should be a URL if type is 'embed', text otherwise.
human: false, // should be shown aligned to right side?
cssClass: '', // a string or array of custom CSS classes you want to be added.
}
Can be passed to botui.action.show
, botui.action.text
and botui.action.button
.
// with default values.
{
type: 'text', // either 'text' or 'button',
action: [], // array of 'button' objects if type is 'button'. object of 'text' otherwise.
cssClass: '', // a string or array of custom CSS classes you want to be added.
autoHide: true, // should the actions sections be hidden when submitted.
addMessage: true // text from action is added as a message in UI from human side.
}
Required as action
in action
object.
{
size: 30, // size of the input to show. Relies on HTML size attribute for input elements.
sub_type: '', // Could be any of the valid types for HTML input elements. e.g.: number, tel, time, date, email, etc.
value: '', // pre-populates the text field. Only for 'text' type.
placeholder: 'Write here ..', // Sets the placeholder text for the input element.
}
Required as action
array in action
object.
{
icon: '', // icon to show in button.
text: '', // Text to show in the button. be creative!
value: '', // this is how you will identify the button when result is returned.
cssClass: '' // a string or array of custom CSS classes you want to be added.
}
Passed as argument to the Promise
returned by action
methods.
{
type: '', // 'Text' or 'Button' Type of the action it was returned from.
value: '', // Text in the input in case type is 'text'. If type is 'button' then its the same as 'value' in button object.
text: '' // only present if type of message is 'button'. same as the 'text' in button object.
}
This is an always-resolving JavaScript Promise
.
It means you don't need a catch
, it will always resolve to a then
.