Hugging Face's logo

Spaces:
cashilaadev
/
mybot
Sleeping

App Files Community
1

Update templates/chat.html

#1
by Kirai-Kevin - opened
base: refs/heads/main
←
from: refs/pr/1
Discussion Files changed
+297
-188
Files changed (1) hide show
  1. templates/chat.html +297 -188
templates/chat.html CHANGED
@@ -1,188 +1,297 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Chatbot</title>
7
- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
8
- <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css">
9
- <style>
10
- body, html {
11
- height: 100%;
12
- margin: 0;
13
- background-color: #f8f9fa;
14
- display: flex;
15
- justify-content: center;
16
- align-items: center;
17
- }
18
- .chat-container {
19
- width: 100%;
20
- max-width: 600px;
21
- height: 80vh;
22
- border-radius: 10px;
23
- overflow: hidden;
24
- display: flex;
25
- flex-direction: column;
26
- box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
27
- background-color: #ffffff;
28
- }
29
- .card-header {
30
- background-color: #007bff;
31
- color: #fff;
32
- font-size: 1.2rem;
33
- padding: 10px 15px;
34
- }
35
- .msg_card_body {
36
- flex: 1;
37
- overflow-y: auto;
38
- padding: 15px;
39
- background-color: #f1f1f1;
40
- }
41
- .msg_card_body .d-flex {
42
- margin-bottom: 10px;
43
- }
44
- .msg_cotainer, .msg_cotainer_send {
45
- padding: 10px;
46
- border-radius: 20px;
47
- max-width: 60%;
48
- word-wrap: break-word;
49
- }
50
- .msg_cotainer {
51
- background-color: #e1ffc7;
52
- }
53
- .msg_cotainer_send {
54
- background-color: #c7eaff;
55
- }
56
- .msg_time, .msg_time_send {
57
- font-size: 10px;
58
- color: #999;
59
- margin-top: 5px;
60
- display: block;
61
- }
62
- .img_cont_msg {
63
- display: flex;
64
- align-items: center;
65
- margin: 0 10px;
66
- }
67
- .online_icon {
68
- position: absolute;
69
- width: 15px;
70
- height: 15px;
71
- background: #4cd137;
72
- border-radius: 50%;
73
- top: 2px;
74
- right: 2px;
75
- }
76
- .user_img_msg {
77
- width: 40px;
78
- height: 40px;
79
- }
80
- .rounded-circle {
81
- border-radius: 50% !important;
82
- }
83
- .card-footer {
84
- background-color: #f1f1f1;
85
- padding: 10px;
86
- }
87
- .type_msg {
88
- border: none;
89
- border-top-left-radius: 20px;
90
- border-bottom-left-radius: 20px;
91
- padding: 10px;
92
- width: 100%;
93
- }
94
- .send_btn, .clear_btn {
95
- border: none;
96
- background: none;
97
- font-size: 20px;
98
- cursor: pointer;
99
- }
100
- .send_btn {
101
- color: #007bff;
102
- }
103
- .clear_btn {
104
- color: #dc3545;
105
- }
106
- </style>
107
- </head>
108
- <body>
109
- <div class="chat-container">
110
- <div class="card">
111
- <div class="card-header d-flex align-items-center">
112
- <img src="https://www.prdistribution.com/spirit/uploads/pressreleases/2019/newsreleases/d83341deb75c4c4f6b113f27b1e42cd8-chatbot-florence-already-helps-thousands-of-patients-to-remember-their-medication.png" class="rounded-circle user_img" width="40" height="40" alt="Chatbot Avatar">
113
- <span class="ml-2">Starlets-Lifestyle Chatbot</span>
114
- </div>
115
- <div id="messageFormeight" class="card-body msg_card_body">
116
- <!-- Messages will be appended here -->
117
- </div>
118
- <div class="card-footer d-flex">
119
- <form id="messageArea" class="input-group" style="flex: 1;">
120
- <input type="text" id="text" name="msg" placeholder="Type your message..." autocomplete="off" class="form-control type_msg" required/>
121
- <div class="input-group-append">
122
- <button type="submit" id="send" class="input-group-text send_btn"><i class="fas fa-location-arrow"></i></button>
123
- <button type="button" id="clearChat" class="input-group-text clear_btn"><i class="fas fa-trash"></i></button>
124
- </div>
125
- </form>
126
- </div>
127
- </div>
128
- </div>
129
-
130
- <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
131
- <script>
132
- $(document).ready(function() {
133
- // Handle form submission
134
- $("#messageArea").on("submit", function(event) {
135
- const date = new Date();
136
- const hour = date.getHours();
137
- const minute = date.getMinutes();
138
- const str_time = hour + ":" + (minute < 10 ? "0" + minute : minute);
139
- var rawText = $("#text").val().trim();
140
-
141
- if (rawText !== "") {
142
- var userHtml = `<div class="d-flex justify-content-end mb-4">
143
- <div class="msg_cotainer_send">${rawText}
144
- <span class="msg_time_send">${str_time}</span>
145
- </div>
146
- <div class="img_cont_msg">
147
- <img src="https://i.ibb.co/d5b84Xw/Untitled-design.png" class="rounded-circle user_img_msg">
148
- </div>
149
- </div>`;
150
-
151
- $("#text").val(""); // Clear input field
152
- $("#messageFormeight").append(userHtml); // Append user message
153
- $("#messageFormeight").scrollTop($("#messageFormeight")[0].scrollHeight);
154
-
155
- // AJAX post request
156
- $.ajax({
157
- data: { msg: rawText },
158
- type: "POST",
159
- url: "/get", // Replace with your endpoint
160
- }).done(function(data) {
161
- var botHtml = `<div class="d-flex justify-content-start mb-4">
162
- <div class="img_cont_msg">
163
- <img src="https://www.prdistribution.com/spirit/uploads/pressreleases/2019/newsreleases/d83341deb75c4c4f6b113f27b1e42cd8-chatbot-florence-already-helps-thousands-of-patients-to-remember-their-medication.png" class="rounded-circle user_img_msg">
164
- </div>
165
- <div class="msg_cotainer">${data}
166
- <span class="msg_time">${str_time}</span>
167
- </div>
168
- </div>`;
169
- $("#messageFormeight").append(botHtml); // Append bot response
170
- $("#messageFormeight").scrollTop($("#messageFormeight")[0].scrollHeight);
171
- });
172
- }
173
- event.preventDefault(); // Prevent default form submission
174
- });
175
-
176
- // Handle send button click (optional)
177
- $("#send").on("click", function() {
178
- $("#messageArea").submit(); // Submit the form
179
- });
180
-
181
- // Clear chat history button functionality
182
- $("#clearChat").click(function() {
183
- $("#messageFormeight").empty(); // Clear all messages
184
- });
185
- });
186
- </script>
187
- </body>
188
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <title>Chatbot</title>
5
+ <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
6
+ <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
7
+ <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
8
+ <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
9
+ <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
10
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
11
+ <link rel="stylesheet" href="static/style.css"/>
12
+ <style>
13
+ body,html {
14
+ height: 100%;
15
+ margin: 0;
16
+ background: rgb(44, 47, 59);
17
+ background: -webkit-linear-gradient(to right, rgb(40, 59, 34), rgb(54, 60, 70), rgb(32, 32, 43));
18
+ background: linear-gradient(to right, rgb(38, 51, 61), rgb(50, 55, 65), rgb(33, 33, 78));
19
+ }
20
+
21
+ .chat {
22
+ margin-top: auto;
23
+ margin-bottom: auto;
24
+ }
25
+ .card {
26
+ height: 500px;
27
+ border-radius: 15px !important;
28
+ background-color: rgba(0,0,0,0.4) !important;
29
+ }
30
+ .contacts_body {
31
+ padding: 0.75rem 0 !important;
32
+ overflow-y: auto;
33
+ white-space: nowrap;
34
+ }
35
+ .msg_card_body {
36
+ overflow-y: auto;
37
+ }
38
+ .card-header {
39
+ border-radius: 15px 15px 0 0 !important;
40
+ border-bottom: 0 !important;
41
+ }
42
+ .card-footer {
43
+ border-radius: 0 0 15px 15px !important;
44
+ border-top: 0 !important;
45
+ }
46
+ .container {
47
+ align-content: center;
48
+ }
49
+ .search {
50
+ border-radius: 15px 0 0 15px !important;
51
+ background-color: rgba(0,0,0,0.3) !important;
52
+ border:0 !important;
53
+ color:white !important;
54
+ }
55
+ .search:focus {
56
+ box-shadow:none !important;
57
+ outline:0px !important;
58
+ }
59
+ .type_msg {
60
+ background-color: rgba(0,0,0,0.3) !important;
61
+ border:0 !important;
62
+ color:white !important;
63
+ height: 60px !important;
64
+ overflow-y: auto;
65
+ }
66
+ .type_msg:focus {
67
+ box-shadow:none !important;
68
+ outline:0px !important;
69
+ }
70
+ .attach_btn {
71
+ border-radius: 15px 0 0 15px !important;
72
+ background-color: rgba(0,0,0,0.3) !important;
73
+ border:0 !important;
74
+ color: white !important;
75
+ cursor: pointer;
76
+ }
77
+ .send_btn {
78
+ border-radius: 0 15px 15px 0 !important;
79
+ background-color: rgba(0,0,0,0.3) !important;
80
+ border:0 !important;
81
+ color: white !important;
82
+ cursor: pointer;
83
+ }
84
+ .search_btn {
85
+ border-radius: 0 15px 15px 0 !important;
86
+ background-color: rgba(0,0,0,0.3) !important;
87
+ border:0 !important;
88
+ color: white !important;
89
+ cursor: pointer;
90
+ }
91
+ .contacts {
92
+ list-style: none;
93
+ padding: 0;
94
+ }
95
+ .contacts li {
96
+ width: 100% !important;
97
+ padding: 5px 10px;
98
+ margin-bottom: 15px !important;
99
+ }
100
+ .active {
101
+ background-color: rgba(0,0,0,0.3);
102
+ }
103
+ .user_img {
104
+ height: 70px;
105
+ width: 70px;
106
+ border:1.5px solid #f5f6fa;
107
+ }
108
+ .user_img_msg {
109
+ height: 40px;
110
+ width: 40px;
111
+ border:1.5px solid #f5f6fa;
112
+ }
113
+ .img_cont {
114
+ position: relative;
115
+ height: 70px;
116
+ width: 70px;
117
+ }
118
+ .img_cont_msg {
119
+ height: 40px;
120
+ width: 40px;
121
+ }
122
+ .online_icon {
123
+ position: absolute;
124
+ height: 15px;
125
+ width:15px;
126
+ background-color: #4cd137;
127
+ border-radius: 50%;
128
+ bottom: 0.2em;
129
+ right: 0.4em;
130
+ border:1.5px solid white;
131
+ }
132
+ .offline {
133
+ background-color: #c23616 !important;
134
+ }
135
+ .user_info {
136
+ margin-top: auto;
137
+ margin-bottom: auto;
138
+ margin-left: 15px;
139
+ }
140
+ .user_info span {
141
+ font-size: 20px;
142
+ color: white;
143
+ }
144
+ .user_info p {
145
+ font-size: 10px;
146
+ color: rgba(255,255,255,0.6);
147
+ }
148
+ .video_cam {
149
+ margin-left: 50px;
150
+ margin-top: 5px;
151
+ }
152
+ .video_cam span {
153
+ color: white;
154
+ font-size: 20px;
155
+ cursor: pointer;
156
+ margin-right: 20px;
157
+ }
158
+ .msg_cotainer {
159
+ margin-top: auto;
160
+ margin-bottom: auto;
161
+ margin-left: 10px;
162
+ border-radius: 25px;
163
+ background-color: rgb(82, 172, 255);
164
+ padding: 10px;
165
+ position: relative;
166
+ }
167
+ .msg_cotainer_send {
168
+ margin-top: auto;
169
+ margin-bottom: auto;
170
+ margin-right: 10px;
171
+ border-radius: 25px;
172
+ background-color: #58cc71;
173
+ padding: 10px;
174
+ position: relative;
175
+ }
176
+ .msg_time {
177
+ position: absolute;
178
+ left: 0;
179
+ bottom: -15px;
180
+ color: rgba(255,255,255,0.5);
181
+ font-size: 10px;
182
+ }
183
+ .msg_time_send {
184
+ position: absolute;
185
+ right:0;
186
+ bottom: -15px;
187
+ color: rgba(255,255,255,0.5);
188
+ font-size: 10px;
189
+ }
190
+ .msg_head {
191
+ position: relative;
192
+ }
193
+ #action_menu_btn {
194
+ position: absolute;
195
+ right: 10px;
196
+ top: 10px;
197
+ color: white;
198
+ cursor: pointer;
199
+ font-size: 20px;
200
+ }
201
+ .action_menu {
202
+ z-index: 1;
203
+ position: absolute;
204
+ padding: 15px 0;
205
+ background-color: rgba(0,0,0,0.5);
206
+ color: white;
207
+ border-radius: 15px;
208
+ top: 30px;
209
+ right: 15px;
210
+ display: none;
211
+ }
212
+ .action_menu ul {
213
+ list-style: none;
214
+ padding: 0;
215
+ margin: 0;
216
+ }
217
+ .action_menu ul li {
218
+ width: 100%;
219
+ padding: 10px 15px;
220
+ margin-bottom: 5px;
221
+ }
222
+ .action_menu ul li i {
223
+ padding-right: 10px;
224
+ }
225
+ .action_menu ul li:hover {
226
+ cursor: pointer;
227
+ background-color: rgba(0,0,0,0.2);
228
+ }
229
+ @media(max-width: 576px) {
230
+ .contacts_card {
231
+ margin-bottom: 15px !important;
232
+ }
233
+ }
234
+ </style>
235
+ </head>
236
+ <body>
237
+ <div class="container-fluid h-100">
238
+ <div class="row justify-content-center h-100">
239
+ <div class="col-md-8 col-xl-6 chat">
240
+ <div class="card">
241
+ <div class="card-header msg_head">
242
+ <div class="d-flex bd-highlight">
243
+ <div class="img_cont">
244
+ <img src="https://www.prdistribution.com/spirit/uploads/pressreleases/2022/10110226.jpeg" class="rounded-circle user_img">
245
+ <span class="online_icon"></span>
246
+ </div>
247
+ <div class="user_info">
248
+ <span>Travel bot</span>
249
+ <p>Ask me anything!</p>
250
+ </div>
251
+ </div>
252
+ </div>
253
+ <div id="messageFormeight" class="card-body msg_card_body">
254
+ </div>
255
+ <div class="card-footer">
256
+ <form id="messageArea" class="input-group">
257
+ <input type="text" id="text" name="msg" placeholder="Type your message..." autocomplete="off" class="form-control type_msg" required/>
258
+ <div class="input-group-append">
259
+ <button type="submit" id="send" class="input-group-text send_btn"><i class="fas fa-location-arrow"></i></button>
260
+ </div>
261
+ </form>
262
+ </div>
263
+ </div>
264
+ </div>
265
+ </div>
266
+ </div>
267
+
268
+ <script>
269
+ $(document).ready(function() {
270
+ $("#messageArea").on("submit", function(event) {
271
+ const date = new Date();
272
+ const hour = date.getHours();
273
+ const minute = date.getMinutes();
274
+ const str_time = hour+":"+minute;
275
+ var rawText = $("#text").val();
276
+
277
+ var userHtml = '<div class="d-flex justify-content-end mb-4"><div class="msg_cotainer_send">' + rawText + '<span class="msg_time_send">'+ str_time + '</span></div><div class="img_cont_msg"><img src="https://i.ibb.co/d5b84Xw/Untitled-design.png" class="rounded-circle user_img_msg"></div></div>';
278
+
279
+ $("#text").val("");
280
+ $("#messageFormeight").append(userHtml);
281
+
282
+ $.ajax({
283
+ data: {
284
+ msg: rawText,
285
+ },
286
+ type: "POST",
287
+ url: "/get",
288
+ }).done(function(data) {
289
+ var botHtml = '<div class="d-flex justify-content-start mb-4"><div class="img_cont_msg"><img src="https://www.prdistribution.com/spirit/uploads/pressreleases/2019/newsreleases/d83341deb75c4c4f6b113f27b1e42cd8-chatbot-florence-already-helps-thousands-of-patients-to-remember-their-medication.png" class="rounded-circle user_img_msg"></div><div class="msg_cotainer">' + data + '<span class="msg_time">' + str_time + '</span></div></div>';
290
+ $("#messageFormeight").append($.parseHTML(botHtml));
291
+ });
292
+ event.preventDefault();
293
+ });
294
+ });
295
+ </script>
296
+ </body>
297
+ </html>