· 6 years ago · Nov 14, 2019, 01:58 AM
1var me = { avatar: "chat.png" }
2var you = { avatar: "blicker.png" }
3
4//Tihs function is to return the current date and time in String
5function formatAMPM(date) {
6 var hours = date.getHours();
7 var minutes = date.getMinutes();
8 var ampm = hours >= 12 ? 'PM' : 'AM';
9 hours = hours % 12;
10 hours = hours ? hours : 12; // the hour '0' should be '12'
11 minutes = minutes < 10 ? '0'+minutes : minutes;
12 var strTime = hours + ':' + minutes + ' ' + ampm;
13 return strTime;
14}
15
16//This function is to insert the chat bubble into the chat window and make the div scroll downwards
17function insertChat(who, text){
18
19 var control = "";
20 var date = formatAMPM(new Date());
21
22 if (who == "me"){
23 control = '<li style="width:100%">' +
24 '<div class="msj macro">' +
25 '<div class="avatar"><img class="img-circle" style="width:100%;" src="'+ me.avatar +'" /></div>' +
26 '<div class="text text-l">' +
27 '<p>'+ text +'</p>' +
28 '<p><small>'+date+'</small></p>' +
29 '</div>' +
30 '</div>' +
31 '</li>';
32 }else{
33 control = '<li style="width:100%;">' +
34 '<div class="msj-rta macro">' +
35 '<div class="text text-r">' +
36 '<p>'+text+'</p>' +
37 '<p><small>'+date+'</small></p>' +
38 '</div>' +
39 '<div class="avatar" style="padding:0px 0px 0px 10px !important"><img class="img-circle" style="width:100%;" src="'+you.avatar+'" /></div>' +
40 '</li>';
41 }
42
43
44 $("ul.bot").append(control);
45 $("ul.bot").scrollTop($("ul.bot").prop('scrollHeight'));
46
47
48}
49
50
51//This function is to submit update the chat window and send to dialogflow
52function submitMessage(text)
53 {
54
55 insertChat("me", text);
56 send2dialogflow(text);
57 $('#mytext').val('');
58 }
59
60//This function is to consume the dialogflow web api
61//you would need to change the url and change the token
62function send2dialogflow(text) {
63
64 var accessToken = "ya29.c.KmOwB4eVA7Rj45I3mn-klZKjDXRWTfRdiQrpQUO3Ir6EXWlPHDCUUeCd6rAgwY66N2qAVNsBTbK_2C45RekaA6QIyrY6BFgaIkU9N2IokIt5HopptIYRY7GJP99fn-pOIk197vE";
65 var baseUrl ="https://dialogflow.googleapis.com/v2";
66 var URL = baseUrl + "/projects/weather-yltbrh/agent/sessions/weather:detectIntent";
67 $.ajax({
68 type: "POST",
69 url: URL,
70 headers: {"Authorization": "Bearer " + accessToken},
71 contentType: "application/json; charset=utf-8",
72 dataType: "json",
73 data: JSON.stringify({ "queryInput":{
74 "text":{
75 "text":text,
76 "languageCode":"en-US"
77 }
78 } }),
79 success: function(data) {
80 console.log(data);
81 insertChat("you", data.queryResult.fulfillmentText);
82 },
83 error: function() {
84 insertChat("you", "oops, experiencing some technical issues....");
85 }
86 });
87}
88 //This jQuery function is to see if the user press ENTER after typing any inqury
89 $(document).on("keyup", ".mytext", function (e){
90 if ((e.keyCode || e.which) == 13) // detect ENter key
91 {
92 var text = $(this).val();
93 if (text !== "")
94 {
95 submitMessage(text);
96 $(this).val('');
97 }
98 }
99
100 })
101 //This jQuery function is to see if the user press Send Icon button after typing any inqury
102 $(document).on("click", "#sendchat", function (){
103 var text = $('#mytext').val();
104 if (text !== "")
105 {
106 submitMessage(text);
107 $(this).val('');
108 }
109
110 })
111
112 $(document).on("click", ".response", function (){
113 var text = $(this).attr('msg');
114
115 submitMessage(text);
116
117
118 })
119//This will be run when webpage starts ...to greet the user
120 insertChat("you",'Hi there! These are the popular cities you might be interested in the weather<br>'+
121 '<button msg="Get weather for Beijing" type="button" class="response btn btn-success btn-sm">Beijing</button>'+
122 '<button msg="Get weather for Yangon" type="button" class="response btn btn-warning btn-sm">Yangong</button>');