Bots

Code view in Configure tab of SUSI.AI Bot Wizard

The purpose of configure tab in SUSI.AI bot wizard is to provide the bot creator various options on how the bot will interact with different websites. It currently provides an option of enabling or disabling the chatbot on different websites.
The configure tab has two parts. One is the code view which allows the users to write websites on which they want to enable/disable the chatbot and a table below it which lists those websites.

The default code in code view is passed in a state in the Configure.js file. The following code demonstrates that:

this.state = {
  code: this.props.code,
};

Fetching data from code view:

After writing the websites on which the user wants the chatbot to be enabled/disabled and pressing on the ‘Save’ button, a functiongenerateConfigData is called.
This function takes the code in code view and stores in inside of a variable. Then it splits the code and makes two arrays:

  • enabledSites: This array contains all the websites that are written in  enabled field.
  • disabledSites: This array contains all the websites that are written in disabled field.

This process can be easily understood from the following code snippet:

let newCode = this.state.code;
let websiteData = newCode
 .split('::sites_enabled')[1]
 .split('::sites_disabled');
let enabledSites = websiteData[0].split(',');
let disabledSites = websiteData[1].split(',');

This data is stored inside an object.

Displaying the data:

The data fetched from the code view now has to be displayed in form of a table. This data is looks like this:

let configData = [
 {
   id: '1',
   name: 'website1.com',
   last: 'Jan 12, 2018 20:08 hrs',
   status: 1,
 },
 {
   id: '2',
   name: 'website2.com',
   last: 'Feb 19, 2018 13:00 hrs',
   status: 1,
 },
 {
   id: '3',
   name: 'website3.com',
   last: 'Mar 14, 2018 10:15 hrs',
   Status: 2,
 }
];

Status is 1 if the website is in enabled column and 2 if the website is in disabled column.
To display this data on the screen, we simply map through the data and display the rows of the table. The following code demonstrates it:

{configData.map((item, index) => {
 if (item.name) {
   return (
    <TableRow key={index}>
      <TableRowColumn style={{ fontSize: '16px' }}>
         {item.name}
     </TableRowColumn>
      <TableRowColumn style={{ fontSize: '16px' }}>
         {item.last}
     </TableRowColumn>
     <TableRowColumn>
       <SelectField
         floatingLabelText="Status"
         fullWidth={true}
         value={item.status}
       >
         <MenuItem value={1} primaryText="Enable" />
         <MenuItem value={2} primaryText="Disable" />
       </SelectField>
     </TableRowColumn>
    </TableRow>
   );
 }
})}

References:

Continue ReadingCode view in Configure tab of SUSI.AI Bot Wizard
Read more about the article How to Receive Carousels from SUSI Skype Bot

How to Receive Carousels from SUSI Skype Bot

A good UI primarily focuses on attracting large numbers of users and any good UI designer aims to achieve user satisfaction with a user-friendly design. In this blog, we will learn how to show carousels SUSI Skype bot to make UI better and easy to use. We can show web search result from SUSI in form of text responses in Skype bot but it doesn’t follow design rule as it is not a good approach to show more text in constricted space. Users seem such a layout as less attractive. In SUSI webchat, RSS type response is returned as carousels and is viewable as:

We can implement RSS type response with code given below 

for (var i = 0; i < metadata.count; i++) {
        msg = "";
        msg = text to be sent here;
        session.say(msg, msg);
}

If we implement RSS response using this code then we get a very constricted response because of more text. You can see it in the screenshot below:


To make RSS type response better we will implement carousels. Carousels are actually horizontal tiles to show rich content. We will use this code: 

          
for (var i = 0; i < 4; i++) {               
    msg = "text here";               
    title  = "title here";               
    cards[i] = new builder.HeroCard(session)                   
         .title(title)
         .text(msg)           
}           
var reply = new builder.Message(session)
.attachmentLayout(builder.AttachmentLayout.carousel)                                        .attachments(cards);           
session.send(reply);

In above code, we are using a hero card which is a rich card containing title and message which are then attached as an attachment to the message. After implementing carousels for RSS response it looks like this

Resources

Bot Builder SDK documentation: https://docs.botframework.com/en-us/node/builder/chat-reference/modules/_botbuilder_d_.html
Rich Card examples: https://github.com/Microsoft/BotBuilder-Samples/blob/master/Node/cards-RichCards/app.js

Continue ReadingHow to Receive Carousels from SUSI Skype Bot