RandBot

MATLAB Production Server demo

by Toshi Takeuchi

HTML

<h2>RandBot - MATLAB Production Server Demo</h2>
<p>A simple <strong>chat bot</strong> example created in MATLAB</p>
<div id="main">
  <label><span>Type your message:</span>
    <input type="text" class="n" name="fn">
  </label>
  <input type="button" value="Send">
</div>
<div id="container" class="chat">
  <p class="chat-header">Chat</p>
  <div id="chatbox"></div>
</div>
<div class="logo_container hidden-xs hidden-sm">
  <a href="http://www.mathworks.com/index.html?s_tid=gn_logo" class="svg_link pull-left">
    <img src="http://www.mathworks.com/images/responsive/global/pic-header-mathworks-logo.svg" class="mw_logo" alt="MathWorks">
  </a>
</div>

CSS

#main {
  width: 400px;
  padding:10px;
}

#container {
  width: 400px;
}

body {
  background: #FFFFFF;
  font-family: 'Open Sans', sans-serif;
}

hr {
  margin: 30px 100px;
}

.note {
  font-size: small;
}

.logo_container {
  margin-top: 5px;
  margin-bottom: 6px;
  float: left;
  width: 200px;
}

#chatbox {
  height: 400px;
  overflow: auto;
}

.message {
  width: 80%;
  margin-bottom: 20px;
}

.chat{
    border: 1px solid #2f7eb2;
    padding:10px;
}

.chat-header {
    background-color:#2f7eb2;
    color: #fff;
    padding: 10px;
    margin: -11px -11px 10px -11px;
}

div.text {
  width: 300px;
  font-size: larger;
}

.message.sent {
  float: right;
}

.message.sent div.text {
  background-color: #ccf2ff;
}

.message.received div.text {
  background-color: #e3e1dc;
}

.message.error {
  float: right;
}

.message.error div.text {
  background-color: #ffcccc;
}

.time {
  color: #808080;
  margin: 10px;
  font-size: smaller;
  font-weight: normal;
}

.sender {
  font-weight: bold;
  right-margin: 10px;
}

.message.error p.sender {
  color: #FF0000;
  font-weight: bold;
  right-margin: 10px;
}

JavaScript

// This function runs when the page is loaded
$(document).ready(function() {
	var timestamp = Date.now();
  var sender = Number(timestamp);
  
  if(sessionStorage.getItem("username") == null){
     var text = 'start_session';
  } else {
     var text = 'has_name';
  }
  
  setTimeout(function() {
      randbotMPS(text,sender,timestamp);
  }, 200);
  
  sessionStorage.started_on = timestamp;
  sessionStorage.message_count = 0;
  
  // Automatically accept the enter key
  $('input:first').keypress(function(e) {
    if (e.keyCode == 13) {
			$('input:button').click();
	    $('input:first').val(''); // Clear for next payload
		}
  });
});

// This captures the onclick event on submit button
$('input:button').click(function() {
  var text = $("input:first").val(); // input text
  var sender = Number(sessionStorage.started_on); 
  var timestamp = Date.now();
  if(text != '') {
    text = $.trim(text);            // trim white space
    show(text,'You',timestamp);
    randbotMPS(text,sender,timestamp);
  }
	sessionStorage.message_count++;
});

// This shows the message in the chat box
function show(text,sender,timestamp) {
		var ts = new Date(timestamp).toLocaleTimeString();
    $('#chatbox').append("<div class='message new'></div>");
    $('.message.new').append("<p class='sender'>" + sender + "</p>");
    $('.message.new p').append("<span class='time'>" + ts + "</span>");
    $('.message.new').append("<div class='text'>" + text + "</div>");
    if(sender == 'Bot') {
    	$('.message.new').addClass("sent");
    } else {
    	$('.message.new').addClass("received");
    }
    $('.message.new').removeClass("new");
    $('#chatbox').scrollTop($('#chatbox')[0].scrollHeight);
}

// function to call MATLAB Production Server to generate response
function randbotMPS(text,sender,timestamp) {  
   
		var msg = {
      message: {
    			text: text,
      		sender: sender,
      		timestamp: timestamp
      }
    }
    // Create a simple AJAX request to the MATLAB Production...