Hugging Face's logo

Spaces:
rohan13
/
makerlab-bot
Runtime error

App Files Community
3
rohan13 commited on
Commit
4437fdc
·
1 Parent(s): fdebe07

sample queries

Browse files
Files changed (3) hide show
  1. static/chatbot.js +35 -0
  2. static/style.css +88 -2
  3. templates/index.html +4 -0
static/chatbot.js CHANGED
@@ -10,6 +10,12 @@ $(document).ready(function() {
10
  $chatBody.children().each(function() {
11
  $(this).addClass('chat-message');
12
  });
 
 
 
 
 
 
13
 
14
  // Initialize SocketIO connection
15
  var socket = io.connect('https://' + document.domain + ':' + location.port);
@@ -106,4 +112,33 @@ $(document).ready(function() {
106
  maximizeWidget();
107
  });
108
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
109
  });
 
10
  $chatBody.children().each(function() {
11
  $(this).addClass('chat-message');
12
  });
13
+ const buttonLabels = ["What is Makerlab?", "What is 3D printing?",
14
+ "Who are the founders of Makerlab?", "What are the 3D printing prices at Makerlab?",
15
+ "How can I host a birthday at Makerlab?", "Can I book an appointment at Makerlab?",
16
+ "Tell me about softwares used to create 3D printing designs", "Hi, I am bob. Tell me when Makerlab was founded.",
17
+ "Can I get my custom designs 3D printed at Makerlab?", "Who is the director of Makerlab?"];
18
+
19
 
20
  // Initialize SocketIO connection
21
  var socket = io.connect('https://' + document.domain + ':' + location.port);
 
112
  maximizeWidget();
113
  });
114
 
115
+ // Add event listener to each button
116
+ $('.queries').click(function() {
117
+ // Set the value of the input field to the text content of the clicked button
118
+ $('input[type="text"]').val($(this).text());
119
+ });
120
+
121
+ function scrollButtons() {
122
+ var container = document.getElementById("button-container");
123
+ var buttons = container.querySelectorAll(".queries");
124
+ var current = 0;
125
+
126
+ var scrollInterval = setInterval(function() {
127
+ buttons[current].scrollIntoView({ behavior: "smooth", block: "nearest", inline: "center" });
128
+ current = (current + 1) % buttons.length;
129
+ }, 1000);
130
+
131
+ container.addEventListener("mouseenter", function() {
132
+ clearInterval(scrollInterval);
133
+ });
134
+
135
+ container.addEventListener("mouseleave", function() {
136
+ scrollInterval = setInterval(function() {
137
+ buttons[current].scrollIntoView({ behavior: "smooth", block: "nearest", inline: "center" });
138
+ current = (current + 1) % buttons.length;
139
+ }, 1000);
140
+ });
141
+ }
142
+
143
+
144
  });
static/style.css CHANGED
@@ -7,7 +7,7 @@
7
  border-radius: 10px;
8
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
9
  max-width: 400px;
10
- min-width: 300px;
11
  }
12
 
13
  .round {
@@ -37,7 +37,7 @@
37
  }
38
 
39
  .chat-body {
40
- height: 300px;
41
  overflow-y: scroll;
42
  padding: 10px;
43
  word-wrap: break-word;
@@ -208,4 +208,90 @@
208
  display: none;
209
  }
210
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
211
 
 
7
  border-radius: 10px;
8
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
9
  max-width: 400px;
10
+ min-width: 400px;
11
  }
12
 
13
  .round {
 
37
  }
38
 
39
  .chat-body {
40
+ height: 400px;
41
  overflow-y: scroll;
42
  padding: 10px;
43
  word-wrap: break-word;
 
208
  display: none;
209
  }
210
 
211
+ .queries {
212
+
213
+ padding: 8px 12px;
214
+ font-size: 16px;
215
+ font-weight: bold;
216
+ text-align: center;
217
+ text-decoration: none;
218
+ border: 0.5px solid #a5a0a0;
219
+ border-radius: 20px;
220
+ color: #000;
221
+ background-color: #343a404a;
222
+ cursor: pointer;
223
+ margin: 5px;
224
+ }
225
+
226
+ .queries:hover {
227
+ background-color: #343a40ad;
228
+ }
229
+
230
+ .queries:active {
231
+ background-color: #0053a4;
232
+ }
233
+
234
+ #button-container {
235
+ display: flex;
236
+ position: relative;
237
+ left: 2%;
238
+ top: 40%;
239
+ flex-direction: column;
240
+ justify-content: inherit;
241
+ align-items: center;
242
+ width: auto;
243
+ padding: 10px;
244
+ overflow-y: scroll;
245
+ max-height: 300px;
246
+ padding-top: 3%;
247
+ margin-top: 2%;
248
+
249
+ }
250
+
251
+ #button-container button {
252
+ margin-bottom: 10px;
253
+ }
254
+
255
+ .query-heading {
256
+ display: flex;
257
+ position: relative;
258
+ width: auto%;
259
+ background-color: #fff;
260
+ padding: 10px;
261
+ z-index: 1;
262
+ justify-content: inherit;
263
+ width: 100%;
264
+ border-bottom: 1px solid #2f4f4f5e;
265
+ }
266
+
267
+ .sample-query {
268
+ display: flex;
269
+ position: absolute;
270
+ left: 30%;
271
+ top: 20%;
272
+ flex-direction: column;
273
+ justify-content: flex-start;
274
+ align-items: center;
275
+ width: auto;
276
+ padding: 10px;
277
+ border: 1px solid #2f4f4f5e;
278
+ justify-content: center;
279
+ border-radius: 10px;
280
+ max-width: 30%;
281
+ }
282
+
283
+ ::-webkit-scrollbar {
284
+ width: 8px;
285
+ }
286
+
287
+ ::-webkit-scrollbar-track {
288
+ background-color: #f4f4f4;
289
+ }
290
+
291
+ ::-webkit-scrollbar-thumb {
292
+ background-color: #a3bfe9a6;
293
+ border-radius: 20px;
294
+ }
295
+
296
+
297
 
templates/index.html CHANGED
@@ -9,6 +9,10 @@
9
  <link rel="stylesheet" href="static/style.css">
10
  </head>
11
  <body>
 
 
 
 
12
  <div class="chat-container">
13
  <div class="chat-header">
14
  <h4>Makerlab Q&A Bot</h4>
 
9
  <link rel="stylesheet" href="static/style.css">
10
  </head>
11
  <body>
12
+ <div class = "sample-query">
13
+ <div class="query-heading"><h4>Sample Queries</h4></div>
14
+ <div id="button-container">
15
+ </div></div>
16
  <div class="chat-container">
17
  <div class="chat-header">
18
  <h4>Makerlab Q&A Bot</h4>