add TTS

static/followup-agent.html

@@ -8,9 +8,11 @@
     <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/uuid/8.3.2/uuid.min.js"></script>
     <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/styles/default.min.css">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js"></script>
     <style>
         :root {
-    --accent-color: #003366; /* Navy blue */
+            --accent-color: #003366; /* Navy blue */
         }
         body {
             font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
@@ -27,9 +29,9 @@
             margin-top: 0;
         }
         #app {
-            max-width: 900px;
+            max-width: 800px;
             margin: 0 auto;
-            padding: 20px;
+            padding: 10px;
         }
         .chat-container {
             background-color: #ffffff;
@@ -38,7 +40,7 @@
             overflow: hidden;
             display: flex;
             flex-direction: column;
-            height: 98vh;
+            height: 99vh;
         }
         .messages {
             flex-grow: 1;
@@ -76,7 +78,7 @@
         }
         .input-area {
             display: flex;
-            padding: 20px;
+            padding: 10px;
             background-color: #ffffff;
             border-top: 1px solid #e0e0e0;
         }
@@ -130,13 +132,13 @@
             margin-bottom: 15px;
         }
         .option-button {
-        background-color: #f0f2f5;
-        border: 1px solid #d0d0d0;
-        border-radius: 20px;
-        padding: 8px 16px;
-        font-size: 14px;
-        cursor: pointer;
-        transition: background-color 0.3s, transform 0.1s;
+            background-color: #f0f2f5;
+            border: 1px solid #d0d0d0;
+            border-radius: 20px;
+            padding: 8px 16px;
+            font-size: 14px;
+            cursor: pointer;
+            transition: background-color 0.3s, transform 0.1s;
         }
         .option-button:hover {
             background-color: #e4e6e9;
@@ -149,6 +151,35 @@
             background-color: #9fb4cd;
             border-color: #c9d9ec;
         }
+        .play-button {
+            background-color: #4CAF50;
+            border: none;
+            color: white;
+            padding: 10px 20px;
+            text-align: center;
+            text-decoration: none;
+            display: inline-block;
+            font-size: 16px;
+            margin: 4px 2px;
+            cursor: pointer;
+            border-radius: 4px;
+        }
+        .audio-button {
+            background: none;
+            border: none;
+            cursor: pointer;
+            padding: 0;
+            margin-top: 10px;
+        }
+
+        .audio-button svg {
+            width: 24px;
+            height: 24px;
+        }
+
+        .audio-button:focus {
+            outline: none;
+        }
         @media (max-width: 600px) {
             #app {
                 padding: 10px;
@@ -167,8 +198,17 @@
         <div class="chat-container">
             <div class="messages" ref="messageContainer">
                 <div v-for="(message, index) in messages" :key="index" 
-                     :class="['message', message.type === 'user' ? 'user-message' : 'bot-message']"
-                     v-html="message.content">
+                     :class="['message', message.type === 'user' ? 'user-message' : 'bot-message']">
+                    <div v-html="message.content"></div>
+                    <button v-if="message.type === 'bot' && message.audio" @click="toggleAudio(index)" class="audio-button">
+                        <svg v-if="!message.isPlaying" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                            <polygon points="5 3 19 12 5 21 5 3"></polygon>
+                        </svg>
+                        <svg v-else xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                            <rect x="6" y="4" width="4" height="16"></rect>
+                            <rect x="14" y="4" width="4" height="16"></rect>
+                        </svg>
+                    </button>
                 </div>
             </div>
             <div class="input-area">
@@ -186,6 +226,13 @@
 
     <script>
         marked.setOptions({
+            highlight: function (code, lang) {
+                if (lang && hljs.getLanguage(lang)) {
+                    return hljs.highlight(code, { language: lang }).value;
+                } else {
+                    return hljs.highlightAuto(code).value;
+                }
+            },
             sanitize: false
         });
         
@@ -196,6 +243,7 @@
                 userInput: '',
                 selectedOptions: {},
                 conversationId: '',
+                currentAudio: null,
             },
             methods: {
                 async sendMessage() {
@@ -234,7 +282,6 @@
                             this.$set(this.messages, streamingIndex, { type: 'bot', content: marked.parse(rawResponse) });
                         }
         
-                        // Remove the streaming message
                         this.messages.splice(streamingIndex, 1);
         
                         const jsonStart = rawResponse.lastIndexOf('\n\n');
@@ -249,11 +296,13 @@
                     }
                     this.$nextTick(() => this.scrollToBottom());
                 },
-                renderParsedResponse(parsedResponse) {
+                async renderParsedResponse(parsedResponse) {
                     let botResponse = '';
+                    let responseForAudio = '';
                     
                     if (parsedResponse.response) {
                         botResponse += parsedResponse.response + '\n\n';
+                        responseForAudio = parsedResponse.response;
                     }
                     
                     if (parsedResponse.clarification) {
@@ -269,12 +318,29 @@
                     }
                     
                     if (botResponse) {
-                        this.messages.push({ type: 'bot', content: marked.parse(botResponse) });
+                        const markedContent = marked.parse(botResponse);
+                        const messageIndex = this.messages.push({ 
+                            type: 'bot', 
+                            content: markedContent, 
+                            audio: null,
+                            isPlaying: false
+                        }) - 1;
+                        this.$nextTick(async () => {
+                            document.querySelectorAll('pre code').forEach((block) => {
+                                hljs.highlightBlock(block);
+                            });
+                            this.scrollToBottom();
+                            this.updateButtonStates();
+                            
+                            if (responseForAudio) {
+                                const audioUrl = await this.convertToSpeech(responseForAudio);
+                                if (audioUrl) {
+                                    this.$set(this.messages[messageIndex], 'audio', audioUrl);
+                                    this.$forceUpdate();
+                                }
+                            }
+                        });
                     }
-                    this.$nextTick(() => {
-                        this.scrollToBottom();
-                        this.updateButtonStates();
-                    });
                 },
                 toggleOption(option, questionIndex, optionIndex) {
                     if (!this.selectedOptions[questionIndex]) {
@@ -319,12 +385,60 @@
                 scrollToBottom() {
                     const container = this.$refs.messageContainer;
                     container.scrollTop = container.scrollHeight;
+                },
+                async convertToSpeech(text) {
+                    const voice = 'en-US-JennyNeural';
+                    const encodedText = encodeURIComponent(text);
+                    try {
+                        const response = await fetch(`https://pvanand-audio-chat.hf.space/tts?text=${encodedText}&voice=${voice}`, {
+                            method: 'GET',
+                            headers: {
+                                'accept': 'application/json'
+                            }
+                        });
+                        if (!response.ok) {
+                            throw new Error(`HTTP error! status: ${response.status}`);
+                        }
+                        const blob = await response.blob();
+                        return URL.createObjectURL(blob);
+                    } catch (error) {
+                        console.error('Error:', error);
+                        return null;
+                    }
+                },
+                toggleAudio(index) {
+                    const message = this.messages[index];
+                    if (this.currentAudio && this.currentAudio !== message.audioElement) {
+                        this.currentAudio.pause();
+                        this.messages.forEach(m => {
+                            if (m.audioElement === this.currentAudio) {
+                                m.isPlaying = false;
+                            }
+                        });
+                    }
+
+                    if (!message.audioElement) {
+                        message.audioElement = new Audio(message.audio);
+                        message.audioElement.addEventListener('ended', () => {
+                            message.isPlaying = false;
+                            this.$forceUpdate();
+                        });
+                    }
+
+                    if (message.isPlaying) {
+                        message.audioElement.pause();
+                    } else {
+                        message.audioElement.play();
+                        this.currentAudio = message.audioElement;
+                    }
+                    message.isPlaying = !message.isPlaying;
+                    this.$forceUpdate();
                 }
             },
             mounted() {
                 this.resetConversation();
             }
         });
-        </script>
+    </script>
 </body>
 </html>