-
Notifications
You must be signed in to change notification settings - Fork 44
/
template.html
117 lines (104 loc) · 3.93 KB
/
template.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
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Chatbot App</title>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
/>
</head>
<body>
<div class="container py-5">
<div class="row justify-content-center">
<div class="col-md-6">
<div class="card">
<div class="card-header bg-primary text-white">
Chat with Chatbot
</div>
<div class="card-body">
<div id="chat-log" class="mb-3">
<div class="message bot-message typing">
STM:
<span class="typing-content"
>Heyya, May i know your name ?</span
><span class="typing-indicator">...</span>
</div>
</div>
<form id="chat-form">
<div class="input-group">
<input
type="text"
id="message"
class="form-control"
placeholder="Type your message..."
/>
<button type="submit" class="btn btn-primary">Send</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
// ... Your existing script ...
function typeMessage(message, index, chatDiv) {
var typingContent = message.substring(0, index + 1);
var typingElement = chatDiv.find(".typing-content");
typingElement.text(typingContent);
if (index < message.length) {
setTimeout(function () {
typeMessage(message, index + 1, chatDiv);
}, 100); // Adjust the typing speed as needed
} else {
chatDiv.find(".typing-indicator").remove();
typingElement.removeClass("typing-content");
$("#chat-log").scrollTop($("#chat-log")[0].scrollHeight);
}
}
$("#chat-form").submit(function (event) {
event.preventDefault();
var message = $("#message").val();
// Add user message immediately to chat log
var userMessageDiv = $(
'<div class="message user-message">User: ' + message + "</div>"
);
$("#chat-log").append(userMessageDiv);
$("#message").val("");
$("#chat-log").scrollTop($("#chat-log")[0].scrollHeight);
$.ajax({
url: "/chatbot",
type: "POST",
dataType: "json",
contentType: "application/json",
data: JSON.stringify({ message: message }),
success: function (response) {
var botResponse = response.response;
var botMessageDiv = $(
'<div class="message bot-message typing">STM: </div>'
);
var typingContent = $(
'<span class="typing-content"></span>'
).appendTo(botMessageDiv);
var typingIndicator = $(
'<span class="typing-indicator">...</span>'
).appendTo(botMessageDiv);
$("#chat-log").append(botMessageDiv);
$("#chat-log").scrollTop($("#chat-log")[0].scrollHeight);
typeMessage(botResponse, 0, botMessageDiv);
// Append bot response to chat log when typing effect completes
setTimeout(function () {
botMessageDiv.find(".typing-indicator").remove();
typingContent.removeClass("typing-content");
botMessageDiv.removeClass("typing").html("STM: " + botResponse);
$("#chat-log").scrollTop($("#chat-log")[0].scrollHeight);
}, botResponse.length * 50); // Adjust the delay to match typing animation duration
},
});
});
</script>
</body>
</html>