<div class="container">
<h3 class=" text-center">Messaging with PizzaBot</h3>
<div class="messaging">
<div class="inbox_msg">
<div class="mesgs">
<div id="msg_history" class="msg_history">
<div class="incoming_msg">
<div class="incoming_msg_img"> <img src="https://raw.githubusercontent.com/strahlistvan/Chatbot/master/robot-chef-cap-pizza-red-2.jpg" alt="sunil"> </div>
<div class="received_msg">
<div class="received_withd_msg">
<p>Greetings! I am PizzaBot, a chatrobot assistant of an imaginary Italian restaurant.
I can help you to reserve table in the restaurant and you can order some food, too. Can I help you? </p>
<span class="time_date" id="#welcome_time_date"></span>
</div>
</div>
</div>
</div>
<div class="type_msg">
<div class="input_msg_write">
<input type="text" id="message_input" class="write_msg" placeholder="Type a message" />
<button id="msg_send_btn" class="msg_send_btn" type="button"><i class="fa fa-paper-plane-o" aria-hidden="true"></i></button>
</div>
</div>
</div>
</div>
</div>
<footer>
<p class="text-center top_spac"> Original template design by <a target="_blank" href="https://bootsnipp.com/snippets/featured/message-chat-box">Sunil Rajput</a>. PizzaBot icon from <a target="_blank" href="https://www.shutterstock.com/hu/image-vector/robot-chef-cap-pizza-red-icon-1045578646">shutterstock.com</a>
</p>
<p>
<a href="http://jigsaw.w3.org/css-validator/check/referer">
<img style="border:0;width:88px;height:31px"
src="http://jigsaw.w3.org/css-validator/images/vcss-blue"
alt="Érvényes CSS!" />
</a>
</p>
</footer>
</div>
.container{
max-width:1170px;
margin:auto;
}
img{
max-width:100%;
}
.incoming_msg_img {
display: inline-block;
width: 6%;
}
.received_msg {
display: inline-block;
padding: 0 0 0 10px;
vertical-align: top;
width: 92%;
}
.received_withd_msg p {
background: #ebebeb none repeat scroll 0 0;
border-radius: 3px;
color: #646464;
font-size: 14px;
margin: 0;
padding: 5px 10px 5px 12px;
width: 100%;
}
.time_date {
color: #747474;
display: block;
font-size: 12px;
margin: 8px 0 0;
}
.received_withd_msg { width: 57%;}
.mesgs {
float: left;
padding: 30px 15px 0 25px;
width: 98%;
}
.sent_msg p {
background: #05728f none repeat scroll 0 0;
border-radius: 3px;
font-size: 14px;
margin: 0; color:#fff;
padding: 5px 10px 5px 12px;
width:100%;
}
.outgoing_msg{ overflow:hidden; margin:26px 0 26px;}
.sent_msg {
float: right;
width: 46%;
}
.input_msg_write input {
background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
border: medium none;
color: #4c4c4c;
font-size: 15px;
min-height: 48px;
width: 100%;
}
.type_msg {
border-top: 1px solid #c4c4c4;
position: relative;
margin-top: 20px;
}
.msg_send_btn {
background: #05728f none repeat scroll 0 0;
border: medium none;
border-radius: 50%;
color: #fff;
cursor: pointer;
font-size: 17px;
height: 33px;
position: absolute;
right: 0;
top: 11px;
width: 33px;
}
.messaging {
padding: 0 0 50px 0;
}
.msg_history {
height: 400px;
overflow-y: auto;
}
/********** chatbot.js **********/
function ChatBot(accessToken, responseHandlerFunction) {
this.accessToken = accessToken;
this.baseUrl = "https://api.api.ai/v1/";
this.responseHandlerFunction = responseHandlerFunction;
this.send = function(messageText, handler = this.responseHandlerFunction) {
function setResponse(val) {
var responseObject = JSON.parse(val);
var responseText = responseObject.result.fulfillment.speech;
//custom function parameter to handle response
handler(responseText);
};
$.ajax({
type: "POST",
url: this.baseUrl + "query?v=20150910",
contentType: "application/json; charset=utf-8",
dataType: "json",
headers: {
"Authorization": "Bearer " + this.accessToken
},
data: JSON.stringify({ query: messageText, lang: "en", sessionId: "somerandomthing" }),
success: function(data) {
setResponse(JSON.stringify(data, undefined, 2));
},
error: function() {
setResponse("Internal Server Error");
}
});
};
}
/******** chat_control.js *******/
$(document).ready(function() {
var messageSendButton = $("#msg_send_btn");
var messageInput = $("#message_input");
var dateFormat = function(date) {
var str = date.getHours() < 10 ? "0" : "";
str += date.getHours() + ":";
str += date.getMinutes() < 10 ? "0" : "";
str += date.getMinutes();
return str;
}
var scrollDown = function() {
var msgHistoryHeight = document.querySelector("#msg_history").scrollHeight;
console.log("scroll height: " + msgHistoryHeight);
document.querySelector("#msg_history").scrollTo(0,msgHistoryHeight);
}
var appendIncomingMessageDOM = function(messageText) {
var incomingMsgDiv = $("<div></div>").attr("class", "incoming_msg").appendTo("#msg_history");
var incomingMsgImgDiv = $("<div></div>").attr("class", "incoming_msg_img").appendTo(incomingMsgDiv);
$("<img></img>").attr({"src" : "https://raw.githubusercontent.com/strahlistvan/Chatbot/master/robot-chef-cap-pizza-red-2.jpg", "alt" : "PizzaBot"} )
.appendTo(incomingMsgImgDiv);
var receivedMsgDiv = $("<div></div>").attr("class", "received_msg").appendTo(incomingMsgDiv);
var receivedWithMsgDiv = $("<div></div>").attr("class", "received_withd_msg").appendTo(receivedMsgDiv);
$("<p></p>").text(messageText).appendTo(receivedWithMsgDiv);
$("<span></span>").attr("class", "time_date")
.text("Today - " + dateFormat(new Date()))
.appendTo(receivedWithMsgDiv);
scrollDown();
messageText = "";
}
var appendOutgoingMessageDOM = function(messageText) {
var outgoingMsgDiv = $("<div></div>").attr("class", "outgoing_msg").appendTo("#msg_history");
var sentMsgDiv = $("<div></div>").attr("class", "sent_msg").appendTo(outgoingMsgDiv);
$("<p></p>").text(messageText).appendTo(sentMsgDiv);
$("<span></span>").attr("class", "time_date")
.text("Today - " +dateFormat(new Date()))
.appendTo(sentMsgDiv);
scrollDown(); messageText = "";
}
var chatbot = new ChatBot("7f7477c649f044c8ae2ec2dc24936701", appendIncomingMessageDOM);
messageSendButton.click(function(){
appendOutgoingMessageDOM(messageInput.val());
chatbot.send(messageInput.val());
messageInput.val("");
});
messageInput.keypress(function(event){
if (event.keyCode == 13) {
appendOutgoingMessageDOM(messageInput.val());
chatbot.send(messageInput.val());
messageInput.val("");
}
});
});
