forked from JoshRosen/cmps140_creative_cooking_assistant
-
Notifications
You must be signed in to change notification settings - Fork 0
/
chat_interface.html
82 lines (78 loc) · 2.93 KB
/
chat_interface.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<!DOCTYPE html>
<html>
<head>
<title>
Chat interface
</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var chatlog = $('#chatlog');
var chat_message = $('#chat_message');
var submit_button = $('#submit_button');
var session_id = '{{SESSION_ID}}';
function submit_message() {
if ($.trim(chat_message.val())) {
// Disable text input and submit button
chat_message.attr("disabled", true).blur();
submit_button.attr("disabled", true);
chatlog.append('<li><span class="user_message">' +
'User:</span> ' + chat_message.val() + '</li>');
$.ajax({
type: "POST",
url: '',
data: ({session_id : session_id,
chat_message : chat_message.val()}),
dataType: 'text',
success: function(msg) {
// The server returns text, not HTML, so newlines need to
// be converted into <br> tags.
msg = msg.replace(/\n/g, "<br>");
chatlog.append('<li><span class="bot_message">' +
'Chatbot:</span> ' + msg + '</li>');
// Enable text input and submit button
chat_message.removeAttr("disabled").focus();
chat_message.val("");
submit_button.removeAttr("disabled");
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
chatlog.append('<li class="debug_message"> Error:' +
textStatus + '</li>');
}
});
// TODO: handle failure.
// TODO: add timeout and handle timeout events.
}
}
submit_button.click(function(e) {
submit_message();
});
chat_message.keypress(function(e) {
// Submit message when the return key is pressed.
if (e.keyCode == 13) {
submit_message();
}
});
});
</script>
<link href="http://fonts.googleapis.com/css?family=Droid+Sans:regular,bold" rel="stylesheet" type="text/css" >
<style type="text/css">
body { font-family: 'Droid Sans', serif; }
.bot_message { color: red; }
.user_message { color: blue; }
.debug_message { color: gray; }
#chatlog { list-style-type: none; padding: 0; margin-left: 0;}
#chat_message { width: 550px; }
</style>
</head>
<body>
<h2>Chat Interface</h2>
<p><b>Session ID: </b> {{SESSION_ID}}</p>
<ul id="chatlog">
<li><span class="bot_message">Chatbot: </span>{{OUTPUT}}</li>
</ul>
<input type="text" name="chat_message" id="chat_message">
<input type="submit" name="submit_button" id="submit_button" value="submit">
<p>Type a message and hit Submit (or the return key).</p>
</body>
</html>