Update templates/apps-hub/digiyatra.html

templates/apps-hub/digiyatra.html

@@ -193,6 +193,7 @@
 .chat-container {
         position: relative;
     }
+
     .chat-header {
         position: absolute;
         top: 0;
@@ -201,6 +202,7 @@
         z-index: 10;
         transition: transform 0.3s ease;
     }
+
     .input-area {
         position: absolute;
         bottom: 0;
@@ -209,13 +211,16 @@
         z-index: 10;
         transition: transform 0.3s ease;
     }
+
     .messages {
         padding-top: 60px;
         padding-bottom: 80px;
     }
+
     .header-hidden {
         transform: translateY(-100%);
     }
+
     .input-hidden {
         transform: translateY(100%);
     }
@@ -279,6 +284,7 @@
             container.appendChild(dot);
           }
         }
+
         const app = new Vue({
             el: '#app',
             data: {
@@ -303,6 +309,7 @@
                     this.$nextTick(() => {
                         createTypingAnimation();
                     });
+
                     try {
                         const response = await fetch('https://pvanand-rag-chat.hf.space/chat/', {
                             method: 'POST',
@@ -337,7 +344,26 @@
                             rawResponse = rawResponse.replace(/<interact>[\s\S]*?<\/interact>/g, '');
                             rawResponse = rawResponse.replace(/<\/?response>/g, '');
                             
-                            this.$set(this.messages[streamingIndex], 'content', marked.parse(rawResponse));
+                            const markdownLinkRegex = /\[([^\]]+)\]\(([^\)]+)\)/g;
+
+                            const embedYouTube = (url) => {
+                            return `<div style="padding: 10px 0;">
+                                <iframe width="560" height="315" src="${url.replace('youtu.be', 'youtube.com/embed')}" 
+                                frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
+                                allowfullscreen></iframe>
+                            </div>`;
+                            };
+
+                            const parsedResponse = rawResponse.replace(markdownLinkRegex, (match, text, url) => {
+                            if (url.includes('https://youtu')) {
+                                return embedYouTube(url);
+                            }
+                            return match;
+                            });
+
+                            this.$set(this.messages[streamingIndex], 'content', marked.parse(parsedResponse));
+
+                            this.$set(this.messages[streamingIndex], 'content', marked.parse(parsedResponse));
                         }
                         if (jsonData) {
                             this.renderClarificationQuestions(jsonData.clarification, streamingIndex);
@@ -418,18 +444,21 @@
                 this.userInput = '';
                 this.isScrollingUp = false;
                 this.lastScrollTop = 0;
+
                 // Reset scroll position
                 this.$nextTick(() => {
                     if (this.$refs.messageContainer) {
                         this.$refs.messageContainer.scrollTop = 0;
                     }
                 });
+
                 // Ensure header and input area are visible
                 const header = document.querySelector('.chat-header');
                 const inputArea = document.querySelector('.input-area');
                 if (header) header.classList.remove('header-hidden');
                 if (inputArea) inputArea.classList.remove('input-hidden');
             },
+
                 scrollToBottom() {
                     const container = this.$refs.messageContainer;
                     container.scrollTop = container.scrollHeight;