Update static/followup-agent.html

static/followup-agent.html

@@ -171,12 +171,10 @@
             padding: 0;
             margin-top: 10px;
         }
-
         .audio-button svg {
             width: 24px;
             height: 24px;
         }
-
         .audio-button:focus {
             outline: none;
         }
@@ -236,106 +234,112 @@
             sanitize: false
         });
         
-    const app = new Vue({
-        el: '#app',
-        data: {
-            messages: [],
-            userInput: '',
-            selectedOptions: {},
-            conversationId: '',
-            currentAudio: null,
-        },
-        methods: {
-            async sendMessage() {
-                if (!this.userInput.trim()) return;
-                
-                this.messages.push({ type: 'user', content: marked.parse(this.userInput) });
-                const message = this.userInput;
-                this.userInput = '';
-                this.selectedOptions = {};
-    
-                try {
-                    const response = await fetch('https://pvanand-general-chat.hf.space/v2/followup-agent', {
-                        method: 'POST',
-                        headers: {
-                            'Content-Type': 'application/json',
-                            'X-API-Key': '44d5c2ac18ced6fc25c1e57dcd06fc0b31fb4ad97bf56e67540671a647465df4'
-                        },
-                        body: JSON.stringify({
-                            query: message,
-                            model_id: 'openai/gpt-4o-mini',
-                            conversation_id: this.conversationId,
-                            user_id: 'string'
-                        })
-                    });
-    
-                    const reader = response.body.getReader();
-                    let rawResponse = '';
-                    let jsonResponse = null;
-                    let streamingIndex = this.messages.push({ type: 'bot', content: 'Thinking...' }) - 1;
-    
-                    while (true) {
-                        const { done, value } = await reader.read();
-                        if (done) break;
-    
-                        const chunk = new TextDecoder().decode(value);
-                        if (chunk.startsWith('<json>')) {
-                            jsonResponse = JSON.parse(chunk.slice(6));
-                        } else {
+        const app = new Vue({
+            el: '#app',
+            data: {
+                messages: [],
+                userInput: '',
+                selectedOptions: {},
+                conversationId: '',
+                currentAudio: null,
+            },
+            methods: {
+                async sendMessage() {
+                    if (!this.userInput.trim()) return;
+                    
+                    this.messages.push({ type: 'user', content: marked.parse(this.userInput) });
+                    const message = this.userInput;
+                    this.userInput = '';
+                    this.selectedOptions = {};
+        
+                    try {
+                        const response = await fetch('https://pvanand-general-chat.hf.space/followup-agent', {
+                            method: 'POST',
+                            headers: {
+                                'Content-Type': 'application/json',
+                                'X-API-Key': '44d5c2ac18ced6fc25c1e57dcd06fc0b31fb4ad97bf56e67540671a647465df4'
+                            },
+                            body: JSON.stringify({
+                                query: message,
+                                model_id: 'openai/gpt-4o-mini',
+                                conversation_id: this.conversationId,
+                                user_id: 'string'
+                            })
+                        });
+        
+                        const reader = response.body.getReader();
+                        let rawResponse = '';
+                        let streamingIndex = this.messages.push({ type: 'bot', content: 'Thinking...' }) - 1;
+        
+                        while (true) {
+                            const { done, value } = await reader.read();
+                            if (done) break;
+        
+                            const chunk = new TextDecoder().decode(value);
                             rawResponse += chunk;
                             this.$set(this.messages, streamingIndex, { type: 'bot', content: marked.parse(rawResponse) });
                         }
+        
+                        this.messages.splice(streamingIndex, 1);
+        
+                        const jsonStart = rawResponse.lastIndexOf('\n\n');
+                        if (jsonStart !== -1) {
+                            const jsonStr = rawResponse.slice(jsonStart + 2);
+                            const parsedResponse = JSON.parse(jsonStr);
+                            this.renderParsedResponse(parsedResponse);
+                        }
+                    } catch (error) {
+                        console.error('Error:', error);
+                        this.messages.push({ type: 'bot', content: 'An error occurred while processing your request.' });
                     }
-    
-                    this.messages.splice(streamingIndex, 1);
-                    this.renderParsedResponse(rawResponse, jsonResponse);
-                } catch (error) {
-                    console.error('Error:', error);
-                    this.messages.push({ type: 'bot', content: 'An error occurred while processing your request.' });
-                }
-                this.$nextTick(() => this.scrollToBottom());
-            },
-            renderParsedResponse(rawResponse, jsonResponse) {
-                let botResponse = rawResponse + '\n\n';
-                let responseForAudio = rawResponse.replace(/#/g, '');
-                
-                if (jsonResponse && jsonResponse.clarification) {
-                    jsonResponse.clarification.forEach((item, questionIndex) => {
-                        botResponse += `**${item.question}**\n\n`;
-                        botResponse += '<div class="option-buttons">';
-                        item.options.forEach((option, optionIndex) => {
-                            const escapedOption = option.replace(/'/g, "\\'");
-                            botResponse += `<button class="option-button" onclick="app.toggleOption('${escapedOption}', ${questionIndex}, ${optionIndex})">${option}</button>`;
-                        });
-                        botResponse += '</div>\n\n';
-                    });
-                }
-                
-                if (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.$nextTick(() => this.scrollToBottom());
+                },
+                async renderParsedResponse(parsedResponse) {
+                    let botResponse = '';
+                    let responseForAudio = '';
+                    
+                    if (parsedResponse.response) {
+                        botResponse += parsedResponse.response + '\n\n';
+                        responseForAudio = parsedResponse.response.replace(/#/g, '');
+                    }
+                    
+                    if (parsedResponse.clarification) {
+                        parsedResponse.clarification.forEach((item, questionIndex) => {
+                            botResponse += `**${item.question}**\n\n`;
+                            botResponse += '<div class="option-buttons">';
+                            item.options.forEach((option, optionIndex) => {
+                                const escapedOption = option.replace(/'/g, "\\'");
+                                botResponse += `<button class="option-button" onclick="app.toggleOption('${escapedOption}', ${questionIndex}, ${optionIndex})">${option}</button>`;
+                            });
+                            botResponse += '</div>\n\n';
                         });
-                        this.scrollToBottom();
-                        this.updateButtonStates();
-                        
-                        if (responseForAudio) {
-                            const audioUrl = await this.convertToSpeech(responseForAudio);
-                            if (audioUrl) {
-                                this.$set(this.messages[messageIndex], 'audio', audioUrl);
-                                this.$forceUpdate();
+                    }
+                    
+                    if (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();
+                                }
                             }
-                        }
-                    });
-                }
-            },
+                        });
+                    }
+                },
                 toggleOption(option, questionIndex, optionIndex) {
                     if (!this.selectedOptions[questionIndex]) {
                         this.$set(this.selectedOptions, questionIndex, []);
@@ -410,7 +414,6 @@
                             }
                         });
                     }
-
                     if (!message.audioElement) {
                         message.audioElement = new Audio(message.audio);
                         message.audioElement.addEventListener('ended', () => {
@@ -418,7 +421,6 @@
                             this.$forceUpdate();
                         });
                     }
-
                     if (message.isPlaying) {
                         message.audioElement.pause();
                     } else {