How does SUSI AI web bot plugin work

  

In this blog, we’ll learn how SUSI AI web plugin works. Normally, for any bot like Kik bot, we don’t have to worry about the chat boxes or the way chatbot is rendered on screen because all of that is handled by the service on which we are building our bot. So, for these bots, we simply take the text input from user, send a GET request to SUSI server, receive the response and display it.

This is not the case with SUSI AI Web Bot plugin. In this case, there is not Bot platform.

Hence, there are a lot of other things that we need to take care of here. Let’s explore the main ones among them.

Adding bot to website:

The final product that we’re going to provide to the client is going to be just a JavaScript code. Hence the HTML code of bot widget needs to be added to the <body> of the website. This is done usingappend() method of jQuery. The html() method sets or returns the content (innerHTML) of selected elements.

Syntax:

$(selector).append(content)

So we store the HTML code of bot widget in a variable and then returns the content of that variable to the body tag using:

$("body").append(mybot);

Here “mybot” is the variable containing HTML code of bot widget.
The text boxes of user texts and bot texts are added to a HTML element in the same way.

Event handling:

JavaScript’s interaction with HTML is handled through events that occur when the user or the browser manipulates a page. Loading of the page, clicking, pressing a key, closing a window, resizing the window etc are all examples of events.

In the SUSI AI web bot, there are two major events.

  1. Clicking a button

This is required for allowing clicks on send button. Clicking of a button can be done in many ways. There are two major ways that are used in SUSI AI web bot.

Some elements already exist on the webpage. For example – the HTML code of web bot. It is added to the body tag as soon as webpage loads. For these elements we use click(). The click() binding is called “direct” binding which can be attached to the elements that already exists.

Syntax:

$(selector).click(function);

Selector – Class, ID or name of HTML element.
Function – Specifies the function to run when click event occurs.

Some elements are dynamically generated. This means that they are added at a later point of time. For example – the text messages are added when user types in. This happens after loading of page. For this, we have to create “delegated” binding by using on() method.

Syntax:

$(selector).on(event,childSelector,data,function);

Selector – Class, ID or name of HTML element
Event – (Required) Specifies one or more event(s) or namespaces to attach to the selected elements.
childSelector – (Optional) Specifies that the event handler should only be attached to the specified child elements
Data – (Optional) Specifies additional data to pass along to the function
Function – Specifies the function to run when click event occurs.

  1. Pressing the enter key

For identifying which key is pressed, we use key codes. The code for enter key is 13.
The on() method is used for handling this event. It’ll be clear from the following code snippet:

Keyup – Keyboard key is released
Keypress – Keyboard key is pressed

$('#txMessage').on('keyup keypress', function(e) {
        var keyCode = e.keyCode || e.which;
        var text = $("#txMessage").val();
        if (keyCode === 13) {
                if(text == "" ||  $.trim(text) == '') {
                        e.preventDefault();
                        return false;
                } else {
                        $("#chat-input").blur();
                        setUserResponse(text);
                        send(text);
                        e.preventDefault();
                        return false;
                }
        }
});

This is the code used to handle “enter” key event in SUSI AI web bot. Here “txMessage” is the id of text box where user entered text.

Making GET HTTP request to SUSI Server

We use ajax() method of jQuery to perform an asynchronous HTTP request to SUSI Server. Looking at the code will make things more clear:

$.ajax({
        type: "GET",
        url: baseUrl+text,
        contentType: "application/json",
        dataType: "json",
        success: function(data) {
                main(data);
        },
        error: function(e) {
                console.log(e);
        }
});

This is a GET type Ajax request. The endpoint of SUSI API is in url . We can see from dataType that the response received will be a JSON file. If the file is successfully received then main function is called else the error is logged into console.

References :

Continue ReadingHow does SUSI AI web bot plugin work

How to make SUSI AI Twitch Bot

In this blog post, we’ll learn how to make SUSI AI Twitch botSUSI.AI is an intelligent Open Source personal assistant. SUSI AI Bots are built to enable users to chat with SUSI on different clients. Twitch is a live streaming video platform. We can integrate SUSI AI to the live chat on any of its channels.

Pre-requisites:

  1. A Main Twitch account (This is the account on whose channel users would be able to talk to SUSI)
  2. A separate Twitch account for SUSI.
  3. GitHub Account

Create a GitHub from here – Sign up on GitHub

  1. Heroku Account

To create Heroku account, go to Heroku and click on Sign Up.

  1. Node.js

Install Node.js from https://nodejs.org/en/ if it isn’t installed already on your computer.

To check if node is already installed or not, open terminal and type the command:

node -v

If you see something like this – (version can be different)

v9.4.0

Then Node.js is installed on your computer and you can follow along.

Procedure:

You can either fork susi_twitchbot repository and then simply deploy it on Heroku to create SUSI AI Twitch bot or you can create a new repository on your account then deploy it. The following section will describe how to create a new repository for SUSI AI Twitch bot. If you want to deploy susi_twitchbot directly then skip this section and directly move on to the deployment section.

Creating the SUSI AI Twitch codebase:

1. Create a folder on your computer with any name. Open terminal and change your current directory to the new folder that you just created.

2. Type npm init command and enter details like name, version etc. (preferably just keep pressing enter key and let the values stay default)

3. Create a file with the same name that you wrote in entry point (index.js by default). NOTE – It should be in the same folder that you created earlier.

4. In the same folder, type the following commands in command line –

npm i -s tmi.js

We need tmi.js module to easily interact with Twitch messaging interface. For more details, visit https://www.tmijs.org/.

npm i -s request

We need request module to make a GET request to the SUSI API and retrieve JSON data for a particular query.

npm i -s express

We need express module to create successful connection with Heroku through the port provided by it.

5. Open package.json file. It should look like this:

(Adding “start” script is necessary for deploying the app on Heroku)

{
  "name": "susi_twitchbot",
  "version": "1.0.0",
  "description": "SUSI.AI Twitchbot",
  "main": "index.js",
  "scripts": {
    "start": "node index.js"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "^4.16.3",
    "request": "^2.86.0",
    "tmi.js": "^1.2.1"
  }
}

6. Copy the following code into the file that you created i.e. index.js

var tmi = require('tmi.js');
var request = require('request');
const express = require('express');
const app = express();
const userChannel = process.env.CHANNEL;

var ans;
var options = {
        options: {
                debug: true
        },
        connection: {
                reconnect: true
        },
        identity: {
                username: process.env.USERNAME,
                password: process.env.OAUTH_TOKEN
        },
        channels: [userChannel]
};

var client = new tmi.client(options);
// Connect the client to the server
client.connect();
client.on('chat', function(channel, userstate, message, self){
        if(message.includes("@"+process.env.USERNAME)){ // checking if SUSI is tagged
                var u = message.split("@" + process.env.USERNAME + " ");
                // Setting options to make a successful call to SUSI API
                var options1 = {
                        method: 'GET',
                        url: 'http://api.susi.ai/susi/chat.json',
                        qs:
                        {
                                timezoneOffset: '-300',
                                q: u[1]
                        }
                };
                request(options1, function(error, response, body) {
                        if (error) throw new Error(error);
                        if((JSON.parse(body)).answers[0])
                                ans = userstate['display-name'] + " " + (JSON.parse(body)).answers[0].actions[0].expression;
                        else
                                ans = userstate['display-name'] + " Sorry, I could not understand what you just said."
                
                        client.action(userChannel, ans);
                });
        }
});

client.on('connected', function(address, port){
        client.action(userChannel, `Hi, I'm SUSI. Mention me using @${process.env.USERNAME} to chat with me.`);
});
const port = process.env.PORT || 3000;
app.listen(port, () => {
   console.log(`Listening on ${port}`);
});

7. Before we can deploy this bot to Heroku, we have to make a GitHub repository for it. For making a github repository for the chatbot, follow these steps:

In the command line, change current directory to the folder we created above for the bot and type in the following commands.

git init
git add .
git commit -"initial"

Now, you have to create a Github repository, follow these steps to do that –

  1. Go to https://github.com/ and login.
  2. Create a new repository. Choose any name.
  3. Get the URL for remote repository and copy it.

Again go to the command line, change current directory to the folder we created above for the bot and type in the following commands.

git remote add origin <URL for remote repository that you just copied>
git remote -v
git push -u origin master

Setting up SUSI bot account on Twitch:

In order to set up SUSI AI bot on Twitch, go to http://twitchapps.com/tmiclick on “Connect with Twitch” and login to the account that will be used as SUSI AI bot. This will generate an OAuth tokenSave it for later use.

Deploying the Bot on Heroku:

  1. Got to Heroku and login.
  2. Go to dashboard and create a new app.
  3. After creating an app, go to Deploy and choose “GitHub” for Deployment method.

  1. Search for the repository that you created on GitHub or select susi_twitchbot after forking it. Connect to it in “App connected to GitHub”.
  2. Enable Automatic deployment.

  1. Now go to Settings and add the following config vars “CHANNEL”, “OAUTH_TOKEN”, “USERNAME” and “HEROKU_URL”.
  • The key of “CHANNEL” is the channel name on which you’d like to talk to SUSI.
  • The key of “OAUTH_TOKEN” is the OAuth key that you generated earlier. (Remember to include “oauth:” in the key)
  • The key of “USERNAME” is the username of the Twitch account you created for SUSI AI.
  • The key of “HEROKU_URL” is “http://<your_app_name>.herokuapp.com” (write ‘http’ and not ‘https’).

  1. Go to Deploy, Press “Deploy Branch” under “Manual Deployment”.

Now your SUSI AI Twitch bot is successfully deployed on Heroku. Go to your Twitch channel and mention your SUSI account using ‘@’ and start talking to SUSI!

Here, ‘dns4044′ is the owner of channel, ‘testdns’ is some user on the channel and ‘susiaibot’ is SUSI AI Twitch bot.

References:

Continue ReadingHow to make SUSI AI Twitch Bot

How does live preview work on SUSI AI chatbot wizard

Live preview is an important feature for the chatbot building process in SUSI.AI botbuilder. It tells the bot creator how the bot looks and behaves at any time.

We use iframe for creating a live preview.

What is iframe?

Frames allow browser window to be split into separate segments. All these segments can be used for displaying a different webpage within the browser window.

is an HTML tag. iframe stands for “inline frame”. It places another HTML document in a frame. The content of the element is used as an alternative text to be displayed if the browser does not support inline frames.

This was first introduced by Microsoft Internet Explorer in 1997, standardized in HTML 4.0 transitional and allowed in HTML5.

Syntax:

<iframe src=”URL”></iframe>

Some attributes:

  • Height
  • Width
  • Name
  • Id

Code used for preview of chatbot screen:

<iframe title="botPreview" name="frame-1" id="frame-1" src={locationBot} height="600px" style={styles.iframe}></iframe>

Code used for preview of chatbot avatar:

<iframe title="botAvatarPreview" name="frame-2" id="frame-2" src={locationAvatar} height="100px" style={styles.iframe}></iframe>

Preview bot fetches the current theme status and skill status from SUSI server and then applies it to the chatbot. Now, this details will be unique to the user logged in. Hence, we need to somehow identify the person logged in. This is done using access token stored in the cookies which is accessed through cookies.get(‘loggedIn’).

How to pass access token to iframe?

This is the major issue faced when creating preview using iframe because even though the HTML window in iframe is rendered on the same parent page, we can not access the elements of HTML page inside iframe. This is because iframe loads dynamically. There are few solutions for this problem.

One of them is to create a script in iframe that would run when iframe is loaded. Now this script can access the elements of parent window (the one containing iframe) using window.parent.document.getElementById(‘#target’)

The best solution is however to pass the access token in the URL of the source of iframe. Then this can be accessed by HTML page in frame using location.href .

Code sample to pass access token in url:

src = '/BotPreview.html?access='+cookies.get('loggedIn')

Now, we have to split this URL and get the access token. This can be easily done using the following script.

var url = location.href.split(‘?’)[1].split(‘=’);
var access_token = url[1];

Here in this example, the url variable firstly splits the URL at ‘?’. This creates an array with two elements.

[‘url.com/BotPreview.html’, ‘access=abcdef123’]

Then we access the element on index 1, i.e. ‘access=abcdef123’ and split it at the ‘=’. This further creates an array of two elements.

[‘access’, ‘abcdef123’]

Now, we can access the access token which is at index 1 in this array.

References

Continue ReadingHow does live preview work on SUSI AI chatbot wizard

How to deploy SUSI AI bots on ngrok for debugging

For production purposes, bots can be deployed in cloud services such as HerokuGoogle App Engine or Amazon Web Services – or in their own data center infrastructure.

However, for development purposes you can use ngrok to provide access to your bot running in your local network. Ngrok is easy to setup and use. To learn more about it, you can refer to its documentation.

Ngrok is a handy tool and service that allows you tunnel requests from the wide open Internet to your local machine when it’s behind a NAT or firewall. It’s commonly used to develop web services and webhooks.

In this blog, you’ll learn how to deploy SUSI AI bots on ngrok. We’re going to demonstrate the process for SUSI AI Kik bot. However it is the same for rest of the bots as well.

First of all, you need to configure a bot on Kik. To configure a Kik bot, follow the first few steps of this blog post till you get an API key for the bot that you created using Botsworth. Now, follow these steps:

  1. In order to run SUSI AI kik bot on ngrok, you have to make some changes to the index.js file after forking susi_kikbot repository and cloning it to your local machine.
  2. Open index.js and change the information in ‘bot’ object. Write username of your kik bot in front of username and api key that you got for your bot in front of apiKey in quotations and leave the baseUrl blank for now. It will look like this: (Don’t copy the API key shown below. It’s invalid and only for demonstration purposes.)
var bot = new Bot({
    username: 'susi.ai',
    apiKey: 'b5a5238b-b764-45fe-a4c5-629fsd1851bd',
    baseUrl: ''
});
  1. Now save the file. No need to commit it.
  2. Go to https://ngrok.com/ and sign up.
  3. Next, you’ll be redirected to the setup and installation page. Follow the instructions there to setup ngrok on your local machine.
  4. Now open terminal and use ‘cd’ command to go to the susi_kikbot directory.
  5. While deploying on ngrok, we set the port for listening to http requests. Hence remove “process.env.PORT” from index.js or else this will cause an error in the next step. After removing, it should look like this: (Now save the index.js file)
http.createServer(bot.incoming()).listen(8080);

Also, comment out setInterval function in index.js.

  1. Now type the command ngrok http 8080 in terminal. In case ‘ngrok’ command doesn’t run, copy the ngrok file that you downloaded in step 5 and paste it in the susi_kikbot directory. Then enter ./ngrok http 8080 in terminal.
  2. When it launches, you’ll see a screen similar to the following:

  1. Copy the “forwarding” address (https://d36f0add.ngrok.io), and paste it in front of ‘baseUrl’ in the ‘bot’ object in index.js file. Add “/incoming” after it and save it. Now the ‘bot’ object should look similar to this:
var bot = new Bot({
    username: 'susi.ai',
    apiKey: 'b5a5238b-b764-45fe-a4c5-629fsd1851bd',
    baseUrl: 'https://d36f0add.ngrok.io/incoming'
});
  1. Launch another terminal window and cd into the susi_kikbot directory in your local machine. Then type node index.js command.

Congratulations! You’ve successfully deployed SUSI AI Kik bot on ngrok. Now try sending a message to your SUSI AI Kik bot.

References

Continue ReadingHow to deploy SUSI AI bots on ngrok for debugging

How to make SUSI AI LINE Bot

 

(The blog previously written for “How to make SUSI AI Line Bot” is no longer valid as a lot has changed since then. SUSI API, LINE developer menu etc has changed. This blog post describes the updated procedure for creating SUSI AI LINE Bot. The previous blog can be found here – https://blog.fossasia.org/how-to-make-susi-ai-line-bot/)

Susi AI is an intelligent Open Source personal assistant. SUSI AI Bots are built to enable users to chat with SUSI on different clients.

Pre-requisites –

1. In order to integrate SUSI’s API with Line bot, you will need to have a Line account first.

Download LINE Messenger app from here –

Google Play Store

Apple App Store

2. GitHub Account

Create a GitHub from here – Sign up on GitHub

3. Heroku Account

To create Heroku account, go to Heroku and click on Sign Up.

4. Node.js

Install Node.js from https://nodejs.org/en/ if it isn’t installed already on your computer.

To check if node is already installed or not, open terminal and type the command –

node -v

If you see something like this – (version can be different)

v9.4.0

Then Node.js is installed on your computer and you can follow along.

Procedure:

Now that you have created a LINE account, GitHub account, Heroku account and installed Node.js, we can move to the creating the SUSI AI bot.

You can either deploy susi_linebot repository to create SUSI AI LINE bot or you can create a new repository on your account then deploy it to Heroku. The next section will describe how to create a new repository for deploying SUSI AI Line bot. If you want to just deploy susi_linebot then skip the next section.

Creating the SUSI AI LINE bot codebase:

1. Create a folder on your computer with any name. Open terminal and change your current directory to the new folder you just created.

2. Type npm init command and enter details like name, version etc. (preferably just keep pressing enter key and let the values stay default)

3. Create a file with the same name that you wrote in entry point (index.js by default). NOTE – It should be in the same folder that you created earlier.

4. Type the following commands in command line –

npm i -s @line/bot-sdk
npm i -s express
npm i -s request

5. Open package.json file. It should look like this:

{
  "name": "susi_linebot",
  "version": "1.0.0",
  "description": "SUSI AI LINE bot",
  "main": "index.js",
  "scripts": {
    "start": "node index.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@line/bot-sdk": "^6.0.1",
    "express": "^4.16.3",
    "request": "^2.85.0"
  }
}

You should see “@line/bot-sdk”, “express” and “request” under dependencies. Versions can change. Make sure to add “start” under scripts or else deploying on Heroku will cause an error.

6. Copy the following code into the file that you created i.e. index.js

'use strict';
const line = require('@line/bot-sdk');
const express = require('express');
var request = require("request");

// create LINE SDK config from env variables
const config = {
   channelAccessToken: process.env.CHANNEL_ACCESS_TOKEN,
   channelSecret: process.env.CHANNEL_SECRET,
};

// create LINE SDK client
const client = new line.Client(config);

// create Express app
// about Express: https://expressjs.com/
const app = express();

// register a webhook handler with middleware
app.post('/webhook', line.middleware(config), (req, res) => {
   Promise
       .all(req.body.events.map(handleEvent))
       .then((result) => res.json(result))
       .catch((err) => {
        console.error(err);
        res.status(500).end();
      });
});

// event handler
function handleEvent(event) {
   if (event.type !== 'message' || event.message.type !== 'text') {
       // ignore non-text-message event
       return Promise.resolve(null);
   }
   var options = {
       method: 'GET',
       url: 'https://api.susi.ai/susi/chat.json',
       qs: {
           timezoneOffset: '-330',
           q: event.message.text
       }
   };
   request(options, function(error, response, body) {
       if (error) throw new Error(error);
       // answer fetched from susi
       var ans = (JSON.parse(body)).answers[0].actions[0].expression;
       // create a echoing text message
       const answer = {
           type: 'text',
           text: ans
       };
       // use reply API
       return client.replyMessage(event.replyToken, answer);
   })
}

// listen on port

const port = process.env.PORT || 3000;
app.listen(port, () => {
   console.log(`listening on ${port}`);
});

7. In order to deploy this bot on Heroku, we have to make a github repository for it. For making a github repository for the chatbot, follow these steps:

In the command line, change current directory to the folder we created above for the bot and type in the following commands.

git init
git add .
git commit -m "initial"

Now, you have to create a Github repository, follow these steps to do that –

  1. Go to https://github.com/ and login.
  2. Create a new repository. Choose any name.
  3. Get the URL for remote repository and copy it.

Again go to the command line, change current directory to the folder we created above for the bot and type in the following commands.

git remote add origin <URL for remote repository that you just copied>
git remote -v
git push -u origin master

Creating SUSI AI bot on LINE:

1. Go to LINE Developers and click on “Start using Messaging API”.

2. Login through the email ID you used for creating LINE account on LINE app. (If you didn’t enter an email address while creating LINE account then go to “Settings” on LINE app and click on “Account”. Now enter an email address.)

3. Now you have to create a new channel. For that, first of all select a provider or create a new one. You can name it anything.

4. Enter the information for Messaging API. Write all details like App name, description etc. Choose “Developer Trial” under Plan option.

5. Choose any category, subcategory, type in your email address and click Confirm.

6. Now click on your channel to open channel settings.

7. Under “Messaging settings”, click on Issue to issue a channel access token. Choose any number of hours and then issue it. Copy it and save it somewhere. We’ll need it later on.

8. Copy Channel secret given on the same page.

Deploying the Bot on Heroku:

1. Go to Heroku and login.

2. Go to dashboard and create a new app.

3. After creating an app, go to Deploy and choose “GitHub” for Deployment method.

4. Search the repository that you created on GitHub or select susi_linebot after forking it and connect to it in “App connected to GitHub”.

5. Enable Automatic deployment.

6. Now go to Settings and setup Config Variables.

Add the channel access token which you copied earlier as value of “CHANNEL_ACCESS_TOKEN” and the channel secret as value of “CHANNEL_SECRET”. After saving, click on Hide Config Vars.

Now, your bot is deployed on Heroku.

Final Steps:

Finally, go back to LINE Developers website. In settings of SUSI AI app, under “Messaging settings”, enable webhooks and add webhook URL. It will look like this:

https://<your_heroku_app_name>.herokuapp.com/webhook

Clicking on “verify” should show success as shown.

Congratulations! Your SUSI AI LINE bot is ready! Add it as a friend by scanning the QR code provided in the same settings menu and start chatting with SUSI.

References:

Continue ReadingHow to make SUSI AI LINE Bot