My Bot

MATLAB Production Server demo

HTML

<h2>Mock MATLAB Messenger Bot</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() {
  setTimeout(function() {
  		var text = [];
  		mybotMPS(text);
  }, 200);
  
  // 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 timestamp = Date.now();
  if(text != '') {
    text = $.trim(text);            // trim white space
    show(text,'You',timestamp);
    mybotMPS(text);
  }
});

// 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
function mybotMPS(text) {
    // Create a simple AJAX request to the MATLAB Production Server
    $.ajax({
    	url: 'http://ec2-52-38-254-185.us-west-2.compute.amazonaws.com:31415/chatbotMPS/mybot',
      type: "POST",
    	timeout: 5000, // sets timeout to 5 seconds
      
      /* Pass the starting word in "rhs" as input argument
         and we get one return value ("nargout") */
     	data: JSON.stringify({
      	"rhs": text,
      	"nargout": 1
      }),
      contentType: 'application/json',
      success: function(data) {
      	// Parse the response and display it in the chat box
      	var text =...