Creating ChatBot in Jquery

Posted By : Pushpandra Kumar | 13-Dec-2017

This tutorial is for beginners only.

I am assuming you have little knowledge of Javascript and Jquery especially selectors in Jquery.

Let's start with index.html, Here I have divided the whole document into three parts like

1. The header that contains heading.

2. Container in which we will place our chatbots chats history and

3. Controls in which we have textarea to type the message, buttons to send the message and radio button to send the message to disable/enable message sending on pressing Enter key.

the style.css file contains CSS for making the things beautiful when loading the page.

Now, finally comes the main part, script.js, we have used Jquery so we are going to use Jquery Selectors to pick the textarea and buttons directly.

the main function is ai() that replies to the user if he types any message, for now, we have predetermined replies based on user input you can further enhance this function by making Ajax calls to tensorFlow or some other API's. But now let's be at static replies.

Please refer below code for details.

Script.js

var username = "";
function askUsername() {
  send_message("Hello, What's Your name?");
}

function send_message(message) {
  var prevMessage = $("#container").html();
  if(prevMessage!=0)
  prevMessage = prevMessage+"
";

  $("#container").html(prevMessage+ " Chatbot: " + message+"");
  $(".current_message").hide();
  $(".current_message").delay(400).fadeIn();
  $(".current_message").removeClass("current_message");

}

function ai(message) {
  if (username.length <3) {
    username = message;
    send_message("Welcome " + message+ ", What are you doing so?");
  }

  if(message.indexOf("how are you")>=0|| message.indexOf("and you")>=0)
  {
    send_message( "I am good");
  }

  if(message.indexOf("time")>=0|| message.indexOf("can you tell me time")>=0)
  {
    var date = new Date();
    var h = date.getHours();
    var m = date.getMinutes();
    send_message("Current Time is :  "+ h+":"+m );
  }

}

$(function() {

  askUsername();

  $("#textbox").keypress(function(event) {
    if (event.which == 13) {
      if ($("#enter").prop("checked")) {
        event.preventDefault();
        $("#send").click();
      }
    }
  });

  $("#send").click(function() {
    var username = "You : "
    var message = $("#textbox").val();
    $("#textbox").val("");

    var prevMessage = $("#container").html();

    // console.log(prevMessage.length);
    if (prevMessage.length != 0 || prevMessage != "")
      prevMessage = prevMessage + "
";

    $("#container").html(prevMessage + username + message);

    $("#container").scrollTop($("#container").prop("scrollHeight"));

    ai(message);

  });


});

style.css

                body {
  margin: 0px;
  background-color: #e5e7ea;
  font-family: arial, sans-serif;
}

#header {
  width: 100%;
  height: 60px;
  background-color: #4286f4;
  box-shadow: 0 4px 3px #a8b2c1;
}

#header>h1 {
  margin: 0px auto;
  width: 1024px;
  color: white;
  padding: 10px;
}

#container {
  padding: 12px;
  width: 1004px;
  height: 500px;
  margin: 10px auto;
  background-color: white;
  box-shadow: 4px 4px 2px #a8b2c1;
  position: relative;
  overflow: scroll;
}

#controls {

  width: 1024px;
  margin: 0px auto;
  background-color: white;
  box-shadow: 4px 4px 2px #a8b2c1;
}

textarea {
  resize: none;
  width: 920px;
  float: left;
  height: 46px;
  font-family: cursive;
  padding: 6px;
  box-shadow: 4px 4px 2px #a8b2c1;
  border: 0px;
  font-size: 16px;
}

#send {
  background-color: #008CBA;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  font-size: 13px;
  margin: 0px 12px;
  position: absolute;
  float: right;
  box-shadow: 4px 4px 2px #a8b2c1;
}

input[type="checkbox"]:after,
.checkbox-inline input[type="checkbox"]:after {
  border: 1px solid;
  border-radius: 1px;
  content: '';
  display: block;
  height: 12px;
  transition: 240ms;
  width: 12px;
  background-color: white;
  border-color: #008CBA
}

input[type="checkbox"]:checked:after {
  background-color: #008CBA;
  border-color: #008CBA;
}

label,
input[type="checkbox"] {
  cursor: pointer;
  font-family: arial, sans-serif;
  font-size: 15px;
  margin: 4px 4px 12px;
}

.username {
  color: #008CBA;
  font-weight: bold;
}

.bot {
  color: #49b25c;
  font-weight: bold;
}

index.html

<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" type="text/javascript"></script>
  <script type="text/javascript" src="js/script.js"></script>
  <link rel="stylesheet" type="text/css" href="css/style.css" /></link>
  <title> First JS Code </title>

</head>

<body>
  <div id="header">

    <h1> Hike Up Your Life </h1>

  </div>


  <div id="container"></div>

  <div id="controls">
    <textarea id="textbox" placeholder="Enter Your Message Here...."></textarea>
    <button id="send">Send</button>
    <br><br><br>
    <input checked type="checkbox" id="enter">
    <label> Send On Enter </label>
    </input>

  </div>
</body>

</html>