Hugging Face's logo

Spaces:
pvanand
/
specialized-agents
Sleeping

App Files Community
pvanand commited on
Commit
f8cc35f
·
verified ·
1 Parent(s): 97c6725

Update static/digiyatra.html

Browse files
Files changed (1) hide show
  1. static/digiyatra.html +108 -96
static/digiyatra.html CHANGED
@@ -12,8 +12,9 @@
12
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/styles/atom-one-dark.min.css">
13
  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js"></script>
14
  <style>
 
15
  :root {
16
- --primary-color: #5853c0;;
17
  --secondary-color: #f0f8ff;
18
  --text-color: #333;
19
  --background-color: #f5f7fa;
@@ -41,6 +42,7 @@
41
  flex-direction: column;
42
  height: 98vh;
43
  transition: all 0.3s ease;
 
44
  }
45
  .chat-header {
46
  background-color: var(--primary-color);
@@ -48,6 +50,12 @@
48
  padding: 15px 20px;
49
  font-size: 1.2em;
50
  font-weight: 500;
 
 
 
 
 
 
51
  }
52
  .messages {
53
  flex-grow: 1;
@@ -55,6 +63,8 @@
55
  padding: 20px;
56
  display: flex;
57
  flex-direction: column;
 
 
58
  }
59
  .message {
60
  max-width: 80%;
@@ -87,6 +97,12 @@
87
  padding: 15px;
88
  background-color: #ffffff;
89
  border-top: 1px solid #e0e0e0;
 
 
 
 
 
 
90
  }
91
  #user-input {
92
  flex-grow: 1;
@@ -173,57 +189,29 @@
173
  }
174
  }
175
  .dot {
176
- display: inline-block;
177
- width: 8px;
178
- height: 8px;
179
- border-radius: 50%;
180
- background-color: #5853c0;
181
- margin: 0 3px;
182
- animation: bounce 1.4s infinite ease-in-out;
183
- }
184
- .dot:nth-child(1) { animation-delay: -0.32s; }
185
- .dot:nth-child(2) { animation-delay: -0.16s; }
186
- @keyframes bounce {
187
- 0%, 80%, 100% {
188
- transform: scale(0);
189
- } 40% {
190
- transform: scale(1.0);
191
- }
192
- }
193
- .chat-container {
194
- position: relative;
195
- }
196
-
197
- .chat-header {
198
- position: absolute;
199
- top: 0;
200
- left: 0;
201
- right: 0;
202
- z-index: 10;
203
- transition: transform 0.3s ease;
204
- }
205
-
206
- .input-area {
207
- position: absolute;
208
- bottom: 0;
209
- left: 0;
210
- right: 0;
211
- z-index: 10;
212
- transition: transform 0.3s ease;
213
- }
214
-
215
- .messages {
216
- padding-top: 60px;
217
- padding-bottom: 80px;
218
- }
219
-
220
- .header-hidden {
221
- transform: translateY(-100%);
222
- }
223
-
224
- .input-hidden {
225
- transform: translateY(100%);
226
- }
227
  </style>
228
  </head>
229
  <body>
@@ -263,7 +251,6 @@
263
  </div>
264
  </div>
265
 
266
-
267
  <script>
268
  marked.setOptions({
269
  highlight: function (code, lang) {
@@ -277,14 +264,53 @@
277
  });
278
 
279
  function createTypingAnimation() {
280
- const container = document.getElementById('typing-animation');
281
- for (let i = 0; i < 3; i++) {
282
- const dot = document.createElement('div');
283
- dot.className = 'dot';
284
- container.appendChild(dot);
285
- }
 
286
  }
287
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
288
  const app = new Vue({
289
  el: '#app',
290
  data: {
@@ -341,29 +367,15 @@
341
  rawResponse += chunk;
342
  }
343
 
 
344
  rawResponse = rawResponse.replace(/<tools>[\s\S]*?<\/tools>/g, '');
345
  rawResponse = rawResponse.replace(/<interact>[\s\S]*?<\/interact>/g, '');
346
  rawResponse = rawResponse.replace(/<tool>[\s\S]*?<\/tool>/g, '');
347
  rawResponse = rawResponse.replace(/<\/?response>/g, '');
348
- console.log(rawResponse)
349
- const markdownLinkRegex = /\[([^\]]+)\]\(([^\)]+)\)/g;
350
-
351
- const embedYouTube = (url) => {
352
- return `<div style="padding: 10px 0;">
353
- <iframe width="560" height="315" src="${url.replace('youtu.be', 'youtube.com/embed')}"
354
- frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
355
- allowfullscreen></iframe>
356
- </div>`;
357
- };
358
 
359
- const parsedResponse = rawResponse.replace(markdownLinkRegex, (match, text, url) => {
360
- if (url.includes('https://youtu')) {
361
- return embedYouTube(url);
362
- }
363
- return match;
364
- });
365
-
366
- this.$set(this.messages[streamingIndex], 'content', marked.parse(parsedResponse));
367
 
368
  this.$set(this.messages[streamingIndex], 'content', marked.parse(parsedResponse));
369
  }
@@ -440,26 +452,26 @@
440
  });
441
  },
442
  resetConversation() {
443
- this.conversationId = uuid.v4();
444
- this.messages = [{ type: 'bot', content: 'How can I help you with DigiYatra?' }];
445
- this.selectedOptions = {};
446
- this.userInput = '';
447
- this.isScrollingUp = false;
448
- this.lastScrollTop = 0;
449
 
450
- // Reset scroll position
451
- this.$nextTick(() => {
452
- if (this.$refs.messageContainer) {
453
- this.$refs.messageContainer.scrollTop = 0;
454
- }
455
- });
456
 
457
- // Ensure header and input area are visible
458
- const header = document.querySelector('.chat-header');
459
- const inputArea = document.querySelector('.input-area');
460
- if (header) header.classList.remove('header-hidden');
461
- if (inputArea) inputArea.classList.remove('input-hidden');
462
- },
463
 
464
  scrollToBottom() {
465
  const container = this.$refs.messageContainer;
@@ -519,4 +531,4 @@
519
  });
520
  </script>
521
  </body>
522
- </html>
 
12
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/styles/atom-one-dark.min.css">
13
  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js"></script>
14
  <style>
15
+ /* Existing styles remain unchanged */
16
  :root {
17
+ --primary-color: #5853c0;
18
  --secondary-color: #f0f8ff;
19
  --text-color: #333;
20
  --background-color: #f5f7fa;
 
42
  flex-direction: column;
43
  height: 98vh;
44
  transition: all 0.3s ease;
45
+ position: relative;
46
  }
47
  .chat-header {
48
  background-color: var(--primary-color);
 
50
  padding: 15px 20px;
51
  font-size: 1.2em;
52
  font-weight: 500;
53
+ position: absolute;
54
+ top: 0;
55
+ left: 0;
56
+ right: 0;
57
+ z-index: 10;
58
+ transition: transform 0.3s ease;
59
  }
60
  .messages {
61
  flex-grow: 1;
 
63
  padding: 20px;
64
  display: flex;
65
  flex-direction: column;
66
+ padding-top: 60px;
67
+ padding-bottom: 80px;
68
  }
69
  .message {
70
  max-width: 80%;
 
97
  padding: 15px;
98
  background-color: #ffffff;
99
  border-top: 1px solid #e0e0e0;
100
+ position: absolute;
101
+ bottom: 0;
102
+ left: 0;
103
+ right: 0;
104
+ z-index: 10;
105
+ transition: transform 0.3s ease;
106
  }
107
  #user-input {
108
  flex-grow: 1;
 
189
  }
190
  }
191
  .dot {
192
+ display: inline-block;
193
+ width: 8px;
194
+ height: 8px;
195
+ border-radius: 50%;
196
+ background-color: #5853c0;
197
+ margin: 0 3px;
198
+ animation: bounce 1.4s infinite ease-in-out;
199
+ }
200
+ .dot:nth-child(1) { animation-delay: -0.32s; }
201
+ .dot:nth-child(2) { animation-delay: -0.16s; }
202
+ @keyframes bounce {
203
+ 0%, 80%, 100% {
204
+ transform: scale(0);
205
+ } 40% {
206
+ transform: scale(1.0);
207
+ }
208
+ }
209
+ .header-hidden {
210
+ transform: translateY(-100%);
211
+ }
212
+ .input-hidden {
213
+ transform: translateY(100%);
214
+ }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
215
  </style>
216
  </head>
217
  <body>
 
251
  </div>
252
  </div>
253
 
 
254
  <script>
255
  marked.setOptions({
256
  highlight: function (code, lang) {
 
264
  });
265
 
266
  function createTypingAnimation() {
267
+ const container = document.getElementById('typing-animation');
268
+ container.innerHTML = ''; // Clear any existing dots
269
+ for (let i = 0; i < 3; i++) {
270
+ const dot = document.createElement('div');
271
+ dot.className = 'dot';
272
+ container.appendChild(dot);
273
+ }
274
  }
275
 
276
+ const embedYouTube = (url) => {
277
+ let videoId;
278
+ const youtuBeMatch = url.match(/youtu\.be\/([^\?&]+)/);
279
+ const youtubeMatch = url.match(/youtube\.com\/watch\?v=([^\?&]+)/);
280
+ const embedMatch = url.match(/youtube\.com\/embed\/([^\?&]+)/);
281
+
282
+ if (youtuBeMatch) {
283
+ videoId = youtuBeMatch[1];
284
+ } else if (youtubeMatch) {
285
+ videoId = youtubeMatch[1];
286
+ } else if (embedMatch) {
287
+ videoId = embedMatch[1];
288
+ } else {
289
+ // If the URL doesn't match known YouTube formats, return it unaltered
290
+ return url;
291
+ }
292
+
293
+ return `
294
+ <div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;">
295
+ <iframe
296
+ src="https://www.youtube.com/embed/${videoId}"
297
+ frameborder="0"
298
+ allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
299
+ allowfullscreen
300
+ style="position: absolute; top:0; left: 0; width: 100%; height: 100%;">
301
+ </iframe>
302
+ </div>
303
+ `;
304
+ };
305
+
306
+ const markdownLinkRegex = /\[([^\]]+)\]\((https?:\/\/(?:www\.)?(?:youtube\.com\/watch\?v=|youtu\.be\/)[^\s)]+)\)/g;
307
+
308
+ const embedYouTubeInContent = (content) => {
309
+ return content.replace(markdownLinkRegex, (match, text, url) => {
310
+ return embedYouTube(url) || match;
311
+ });
312
+ };
313
+
314
  const app = new Vue({
315
  el: '#app',
316
  data: {
 
367
  rawResponse += chunk;
368
  }
369
 
370
+ // Clean up the raw response
371
  rawResponse = rawResponse.replace(/<tools>[\s\S]*?<\/tools>/g, '');
372
  rawResponse = rawResponse.replace(/<interact>[\s\S]*?<\/interact>/g, '');
373
  rawResponse = rawResponse.replace(/<tool>[\s\S]*?<\/tool>/g, '');
374
  rawResponse = rawResponse.replace(/<\/?response>/g, '');
375
+ console.log(rawResponse);
 
 
 
 
 
 
 
 
 
376
 
377
+ // Replace YouTube markdown links with embedded iframes
378
+ const parsedResponse = embedYouTubeInContent(rawResponse);
 
 
 
 
 
 
379
 
380
  this.$set(this.messages[streamingIndex], 'content', marked.parse(parsedResponse));
381
  }
 
452
  });
453
  },
454
  resetConversation() {
455
+ this.conversationId = uuid.v4();
456
+ this.messages = [{ type: 'bot', content: 'How can I help you with DigiYatra?' }];
457
+ this.selectedOptions = {};
458
+ this.userInput = '';
459
+ this.isScrollingUp = false;
460
+ this.lastScrollTop = 0;
461
 
462
+ // Reset scroll position
463
+ this.$nextTick(() => {
464
+ if (this.$refs.messageContainer) {
465
+ this.$refs.messageContainer.scrollTop = 0;
466
+ }
467
+ });
468
 
469
+ // Ensure header and input area are visible
470
+ const header = document.querySelector('.chat-header');
471
+ const inputArea = document.querySelector('.input-area');
472
+ if (header) header.classList.remove('header-hidden');
473
+ if (inputArea) inputArea.classList.remove('input-hidden');
474
+ },
475
 
476
  scrollToBottom() {
477
  const container = this.$refs.messageContainer;
 
531
  });
532
  </script>
533
  </body>
534
+ </html>