Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE HTML>
- <html xmlns:th="http://www.thymeleaf.org">
- <head>
- <title>Chat Bot</title>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
- <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
- <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css" />
- <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
- <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
- <script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
- <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
- <title>Insert title here</title>
- <style>
- .mytext {
- border: 0;
- padding: 10px;
- background: whitesmoke;
- }
- .text {
- width: 75%;
- display: flex;
- flex-direction: column;
- }
- .text > p:first-of-type {
- width: 100%;
- margin-top: 0;
- margin-bottom: auto;
- line-height: 13px;
- font-size: 12px;
- }
- .text > p:last-of-type {
- width: 100%;
- text-align: right;
- color: silver;
- margin-bottom: -7px;
- margin-top: auto;
- }
- .text-l {
- float: left;
- padding-right: 10px;
- }
- .text-r {
- float: right;
- padding-left: 10px;
- }
- .avatar {
- display: flex;
- justify-content: center;
- align-items: center;
- width: 25%;
- float: left;
- padding-right: 10px;
- }
- .macro {
- margin-top: 5px;
- width: 85%;
- border-radius: 5px;
- padding: 5px;
- display: flex;
- }
- .msj-rta {
- float: right;
- background: whitesmoke;
- margin-left: 10px;
- margin-bottom: 10px;
- }
- .msj {
- float: left;
- background: white;
- }
- .frame {
- background: #e0e0de;
- height: 450px;
- overflow: hidden;
- padding: 0;
- }
- .frame > div:last-of-type {
- position: absolute;
- bottom: 0;
- width: 100%;
- display: flex;
- }
- body > div > div > div:nth-child(2) > span {
- background: whitesmoke;
- padding: 10px;
- font-size: 21px;
- border-radius: 50%;
- }
- body > div > div > div.msj-rta.macro {
- margin: auto;
- margin-left: 1%;
- }
- ul {
- width: 97%;
- list-style-type: none;
- padding: 18px;
- position: absolute;
- bottom: 60px;
- display: flex;
- flex-direction: column;
- top: 0;
- overflow-y: scroll;
- }
- .msj:before {
- width: 0;
- height: 0;
- content: "";
- top: -5px;
- left: -14px;
- position: relative;
- border-style: solid;
- border-width: 0 13px 13px 0;
- border-color: transparent #ffffff transparent transparent;
- }
- .msj-rta:after {
- width: 0;
- height: 0;
- content: "";
- top: -5px;
- left: 14px;
- position: relative;
- border-style: solid;
- border-width: 13px 13px 0 0;
- border-color: whitesmoke transparent transparent transparent;
- }
- input:focus {
- outline: none;
- }
- ::-webkit-input-placeholder { /* Chrome/Opera/Safari */
- color: #d4d4d4;
- }
- ::-moz-placeholder { /* Firefox 19+ */
- color: #d4d4d4;
- }
- :-ms-input-placeholder { /* IE 10+ */
- color: #d4d4d4;
- }
- :-moz-placeholder { /* Firefox 18- */
- color: #d4d4d4;
- }
- .navbar-inverse {
- background-color: #222222;
- border-color: #080808;
- display: none;
- }
- footer {
- display: none;
- }
- hr {
- display: none;
- }
- #divChatBotName {
- color: white;
- font-weight: bold;
- vertical-align: sub;
- width: 100%;
- margin-top: 5px;
- margin-left: 15px;
- }
- #divChatHeader {
- background-color: rgba(19, 26, 34, 0.6);
- height: 40px;
- border-radius: 5px 5px 0 0;
- display:flex;
- }
- #chat {
- position: absolute;
- width: 550px;
- z-index: 1;
- float: right;
- }
- .spanMessage {
- cursor:pointer;
- }
- .spanLink{
- color: #428bca;
- cursor:pointer;
- }
- </style>
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
- </head>
- <script>
- var me = {};
- var you = {};
- var sessionID = "";
- var countMsg = 0;
- var globalLink = "";
- function formatAMPM(date) {
- var hours = date.getHours();
- var minutes = date.getMinutes();
- //var ampm = hours >= 12 ? 'PM' : 'AM';
- //hours = hours % 12;
- hours = hours ? hours : 12; // the hour '0' should be '12'
- minutes = minutes < 10 ? '0' + minutes : minutes;
- var strTime = hours + ':' + minutes;// + ' ' + ampm;
- return strTime;
- }
- //-- No use time. It is a javaScript effect.
- function insertChat(isBoot, text) {
- var control = "";
- var date = formatAMPM(new Date());
- if (isBoot) {
- control = '<li style="width:100%">' +
- '<div class="msj macro">' +
- '<div class="text text-l">' +
- '<p>' + text + '</p>' +
- '<p><small>' + date + '</small></p>' +
- '</div>' +
- '</div>' +
- '</li>';
- } else {
- control = '<li style="width:100%;">' +
- '<div class="msj-rta macro">' +
- '<div class="text text-r">' +
- '<p>' + text + '</p>' +
- '<p><small>' + date + '</small></p>' +
- '</div>' +
- '</li>';
- }
- $("ul").append(control);//.scrollTop($("ul").prop('scrollHeight'));
- $("#ulChatBody").scrollTop(10000);
- }
- function sendMessageUser() {
- var messageUser = $('#txtMessageUser').val();
- insertChat(false, messageUser);
- $('#txtMessageUser').val("");
- $.ajax({
- url: "/message/",
- type: 'POST',
- data:JSON.stringify({
- "conversationId":sessionID,
- "usersAnswer" :messageUser
- }),
- headers: {
- "Content-Type":"application/json"
- },
- async: true,
- dataType: "json",
- success: function (result) {
- if (result != null) {
- var str = "";
- var link = "";
- if(result.urls != null){
- for(var i=0; i < result.urls.length; i++){
- link = link + '<a target="_blank" href="' + result.urls[i].URL
- + '">' + result.urls[i].text + '</a><br/>';
- }
- }
- for(var i = 0; i < result.watsonsQuestion.length; i++){
- str = str + result.watsonsQuestion[i] + ' ###';
- }
- var message = link + " " + stringParser(str, link);
- insertChat(true, message);
- //Reload id every time. backend may invalidate it.
- sessionID = result.conversationId;
- countMsg++;
- if(result.ua == true || result.eoc == true){ //Try getting rate until done.
- countMsg = 0;
- }
- if(countMsg > 3 || sessionID === ""){
- $('#divMsg').hide();
- $('#spanSendMessage').hide();
- $('#btnAgain').show();
- }
- } else {
- alert("download data error");
- }
- },
- error: function () {
- alert("connection failed");
- }
- });
- }
- function sendMessageFirst() {
- var data = "";
- data = JSON.stringify(data)
- $.ajax({
- url: "/message/",
- type: 'POST',
- data:JSON.stringify({
- "conversationId":"",
- "usersAnswer" :""
- }),
- headers: {
- "Content-Type":"application/json"
- },
- async: true,
- dataType: "json",
- success: function (result) {
- if (result != null) {
- insertChat(true, stringParser(result.watsonsQuestion[0]));
- sessionID = result.conversationId;
- countMsg++;
- } else {
- alert("download data error");
- }
- },
- error: function () {
- alert("connection failed");
- }
- });
- }
- function resetChat() {
- $("ul").empty();
- }
- function startAgain() {
- location.reload();
- }
- function clickLink() {
- window.open(globalLink);
- }
- function stringParser(question, link){
- if(question.indexOf('#isLink=true#') + 1) {
- var url = question.replace('#isLink=true#', '');
- window.open(url);
- return '< span class="spanHref" onclick="sendToTxtMessageUser('+url+')">result link</span>'
- }
- else{
- var res = question.split(" ");
- var returnHtml = "";
- for (var i = 0; i < res.length; i++) {
- if(res[i] != '#link#'){
- var span = '<span class="spanMessage" onclick="sendToTxtMessageUser(' +"'" +
- res[i].replace('\n', '').replace('"', '').replace('.', '').replace('###', '')
- + "'" + '); return false">' + res[i].replace('###', '<br/>') + ' </span>';
- returnHtml = returnHtml + span;
- }
- else{
- returnHtml = returnHtml + res[i];
- }
- }
- return returnHtml.replace('#link#', link);
- }
- }
- function sendToTxtMessageUser(text){
- var message = $('#txtMessageUser').val();
- if(message.length == 0){
- $('#txtMessageUser').val(message + text);
- }
- else{
- $('#txtMessageUser').val(message + " " + text);
- }
- }
- $(document).ready(function () {
- //-- Clear Chat
- resetChat();
- $("#txtMessageUser").keyup(function (event) {
- if (event.keyCode == 13) {
- sendMessageUser();
- }
- });
- $('#btnAgain').hide();
- sendMessageFirst();
- });
- </script>
- <body>
- <div id="chat" style="position: absolute">
- <div class="">
- <div id="code">
- </div>
- <div class="col-sm-10 col-sm-offset-1">
- <div class="row" id="divChatHeader">
- <div id="divChatBotName">Chat Bot Janush</div>
- <button type="button" onclick="startAgain();" style="height: 30px; margin-top: 5px; margin-right: 10px;"
- class="btn btn-secondary">reload chat</button>
- </div>
- </div>
- <div class="col-sm-10 col-sm-offset-1 frame">
- <div id="divChatBody">
- <ul id="ulChatBody"></ul>
- </div>
- <div style="background-color: rgba(35, 47, 62, 0.6); border-radius: 0 0 5px 5px;">
- <div class="msj-rta macro" id="divMsg">
- <div class="text text-r" style="background: whitesmoke !important">
- <input class="mytext" id="txtMessageUser" placeholder="Type a message" />
- </div>
- </div>
- <div class="msj-rta macro" id="btnAgain" style="background:rgba(35, 47, 62, 0.0)">
- <button type="button" onclick="startAgain();"
- class="btn btn-secondary">start again</button>
- </div>
- <div style="padding: 10px;">
- <span id="spanSendMessage" class="glyphicon glyphicon-share-alt"
- onclick="sendMessageUser(); return false" style="cursor: pointer;"></span>
- </div>
- </div>
- </div>
- </div>
- </div>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement