SOURCE

$(document).ready(function() {

    //send the message by click
    $(".chat-send").click(sendMsg);

    //press enter to send
    $("form").keypress(function(event) {
        if (event.keyCode === 13) {
            event.preventDefault();
            sendMsg();
        }
    });

    //clear the chat box
    $(".chat-clear").click(clearChatBox);
});

//send message to chat box
function sendMsg() {
    var msg = $(".chat-message");
    var msgVal = msg.val();
    var chatBox = $(".chat-box");
    if (msgVal) {
        var msgAppend = "<p><span id='you'>You: </span>" + msgVal + "</p><hr class='you-hr'>";
        chatBox.append(msgAppend);
    } else {}

    //dialog reply
    dialog(msgVal);

    //empty input
    msg.val("");

    //keep the scroll in bottom
    chatBox.scrollTop(chatBox[0].scrollHeight);
}

//set up the AI dialog
function dialog(msg){
    var replyArr = ["Hi, how's it going :)","I'm good, thx, U? :)"];
    msg = msg.toLowerCase();
    var time = new Date();
    var hour = time.getHours();
    var minute = time.getMinutes();
    var currentTime = plusZero(hour) + ":" + plusZero(minute);

    var chatBox = $(".chat-box");

    if(msg.indexOf("hello") != -1){
        chatBox.append("<p><span id='ai'>AI: </span>" + replyArr[0] + "</p><hr class='ai-hr'>");
    }
    else if(msg.indexOf("how are you") != -1 || msg.indexOf("how are u") != -1){
        chatBox.append("<p><span id='ai'>AI: </span>" + replyArr[1] + "</p><hr class='ai-hr'>");
    }
    else if(msg.indexOf("time") != -1){
        chatBox.append("<p><span id='ai'>AI: </span>Current Time: " + currentTime + ". " + timeGreeting(hour) + "~ :)</p><hr class='ai-hr'>");
    }
    else {}
}

//add 0 if time number is <10
function plusZero(x){
    if(x < 10){
        x = "0" + x;
    }
    else {
        x = x;
    }
    return x;
}

//greeting by hour
function timeGreeting(h){
    var greeting = ["U need to sleep","Good morning","Lunch time now","Feel asleep? Have some coffee","Free time~Yeah","Good night"];

    if(h>=0&&h<=6){
        return greeting[0];
    }
    else if(h>=7&&h<=10){
        return greeting[1];
    }
    else if(h>=11&&h<=13){
        return greeting[2];
    }
    else if(h>=14&&h<=18){
        return greeting[3];
    }
    else if(h>=19&&h<=21){
        return greeting[4];
    }
    else if(h>=22&&h<=23){
        return greeting[5];
    }
    else {
        return "";
    }
}

//clear the chat box
function clearChatBox() {
    $(".chat-box").html("");
}

<div class="chat-box">
</div>
<form class="form-inline chat-form">
  <input type="text" class="form-control chat-message" placeholder="Say Something">
  <button type="button" class="btn btn-primary chat-send" title="Send Message">
    <i class="fa fa-paper-plane" aria-hidden="true">
    </i>
  </button>
  <button type="reset" class="btn btn-success chat-reset" title="Reset Message">
    <i class="fa fa-refresh" aria-hidden="true">
    </i>
  </button>
  <button type="button" class="btn btn-danger chat-clear" title="Clear the Chat Box">
    <i class="fa fa-times" aria-hidden="true">
    </i>
  </button>
</form>
<hr>
<footer>
  Designed By
  <a href="http://blog.csdn.net/alenhhy" target="_blank">
    Alen Hu
  </a>
</footer>

body {
	background: #f5f5f5;
}

.chat-box {
	width: 900px;
	height: 400px;
	overflow: auto;
	margin: 30px auto 20px;
	padding: 25px;
	background: #fff;
}
.chat-box p {
	line-height: 1;
	margin: 8px auto;
}
.chat-box p span {
	font-weight: 600;
}
.chat-box p span#you {
	color: #5cb85c;
}
.chat-box p span#ai {
	color: #337ab7;
}
.you-hr,
.ai-hr {
	margin: 5px 0;
	width: 5%;
	opacity: 0.1;
}
.you-hr {
	border-color: #5cb85c;
}
.ai-hr {
	border-color: #337ab7;
}

.chat-form {
	width: 600px;
	margin: 0 auto 20px;
}
.chat-message {
	width: 420px !important;
}
.chat-send,
.chat-reset,
.chat-clear {
	width: 56px;
}

body > hr
{
    width: 60%;
    margin: 20px auto;
}
footer
{
    font-size: 14px;

    text-align: center;
}
footer > a
{
    text-decoration: none;
}

footer > a:hover,
footer > a:active,
footer > a:focus
{
    text-decoration: underline;
}