Spaces:

pvanand
/

specialized-agents

Running

App Files Files Community

pvanand commited on Sep 4, 2024

Commit

e727ed4

verified ·

1 Parent(s): d8a939d

Update static/multi-agent.html

Browse files

Files changed (1) hide show

static/multi-agent.html +614 -510

static/multi-agent.html CHANGED Viewed

@@ -1,511 +1,615 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>DigiYatra Assistant</title>
-    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
-    <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 href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/styles/atom-one-dark.min.css">
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js"></script>
-    <style>
-        :root {
-            --primary-color: #304b76;;
-            --secondary-color: #f0f8ff;
-            --text-color: #333;
-            --background-color: #f5f7fa;
-        }
-        body {
-            font-family: 'Poppins', sans-serif;
-            /* font-family: 'Roboto', sans-serif; */
-            line-height: 1.6;
-            margin: 0;
-            padding: 0;
-            background-color: var(--background-color);
-            color: var(--text-color);
-        }
-        #app {
-            max-width: 900px;
-            margin: 0 auto;
-            padding: 10px;
-        }
-        .chat-container {
-            background-color: #ffffff;
-            border-radius: 15px;
-            box-shadow: 0 4px 20px rgba(0,0,0,0.1);
-            overflow: hidden;
-            display: flex;
-            flex-direction: column;
-            height: 98vh;
-            transition: all 0.3s ease;
-        }
-        .messages {
-            flex-grow: 1;
-            overflow-y: auto;
-            padding: 20px;
-            display: flex;
-            flex-direction: column;
-        }
-        .message {
-            max-width: 80%;
-            margin-bottom: 20px;
-            padding: 10px 20px;
-            border-radius: 20px;
-            font-size: 16px;
-            line-height: 1.5;
-            word-wrap: break-word;
-            animation: fadeIn 0.5s ease;
-        }
-        table {
-            width: 100%;
-            border-collapse: collapse;
-            margin-bottom: 20px;
-        }
-        table, th, td {
-            border: 1px solid #ddd;
-        }
-        th, td {
-            padding: 10px;
-            text-align: left;
-        }
-        @keyframes fadeIn {
-            from { opacity: 0; transform: translateY(10px); }
-            to { opacity: 1; transform: translateY(0); }
-        }
-        .user-message {
-            background-color: var(--primary-color);
-            color: #ffffff;
-            align-self: flex-end;
-            border-bottom-right-radius: 5px;
-        }
-        .bot-message {
-            background-color: var(--secondary-color);
-            color: var(--text-color);
-            align-self: flex-start;
-            border-bottom-left-radius: 5px;
-        }
-        .input-area {
-            display: flex;
-            padding: 15px;
-            background-color: #ffffff;
-            border-top: 1px solid #e0e0e0;
-        }
-        #user-input {
-            flex-grow: 1;
-            padding: 12px 15px;
-            border: 2px solid var(--primary-color);
-            border-radius: 15px;
-            font-size: 16px;
-            outline: none;
-            transition: all 0.3s ease;
-        }
-        #user-input:focus {
-            box-shadow: 0 0 0 3px rgba(0,119,190,0.3);
-        }
-        .send-button, .reset-button {
-            background-color: var(--primary-color);
-            color: #ffffff;
-            border: none;
-            border-radius: 50%;
-            width: 50px;
-            height: 50px;
-            margin-left: 10px;
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            transition: all 0.3s ease;
-        }
-        .send-button:hover, .reset-button:hover {
-            background-color: #005fa3;
-            transform: scale(1.05);
-        }
-        .send-button svg, .reset-button svg {
-            width: 24px;
-            height: 24px;
-        }
-        .option-buttons {
-            display: flex;
-            flex-wrap: wrap;
-            gap: 10px;
-            margin-top: 15px;
-        }
-        .option-button {
-            background-color: #ffffff;
-            border: 2px solid var(--primary-color);
-            border-radius: 20px;
-            padding: 8px 16px;
-            font-size: 14px;
-            cursor: pointer;
-            transition: all 0.3s ease;
-        }
-        .option-button:hover {
-            background-color: var(--secondary-color);
-            transform: translateY(-2px);
-        }
-        .option-button.selected {
-            background-color: var(--primary-color);
-            color: #ffffff;
-        }
-        .audio-button {
-            background: none;
-            border: none;
-            cursor: pointer;
-            padding: 0;
-            margin-top: 10px;
-            transition: all 0.3s ease;
-        }
-        .audio-button:hover {
-            transform: scale(1.1);
-        }
-        .audio-button svg {
-            width: 30px;
-            height: 30px;
-            fill: var(--primary-color);
-        }
-        @media (max-width: 600px) {
-            #app {
-                padding: 10px;
-            }
-            .chat-container {
-                height: 95vh;
-            }
-            .message {
-                max-width: 90%;
-            }
-        }
-        .dot {
-  display: inline-block;
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  background-color: #5853c0;
-  margin: 0 3px;
-  animation: bounce 1.4s infinite ease-in-out;
-}
-.dot:nth-child(1) { animation-delay: -0.32s; }
-.dot:nth-child(2) { animation-delay: -0.16s; }
-@keyframes bounce {
-  0%, 80%, 100% {
-    transform: scale(0);
-  } 40% {
-    transform: scale(1.0);
-  }
-}
-.chat-container {
-        position: relative;
-    }
-    .input-area {
-        position: absolute;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        z-index: 10;
-        transition: transform 0.3s ease;
-    }
-    .messages {
-        padding-bottom: 80px;
-    }
-    .input-hidden {
-        transform: translateY(100%);
-    }
-    </style>
-</head>
-<body>
-    <div id="app">
-        <div class="chat-container">
-            <div class="messages" ref="messageContainer" @scroll="handleScroll">
-                <div v-for="(message, index) in messages" :key="index"
-                     :class="['message', message.type === 'user' ? 'user-message' : 'bot-message']">
-                    <div v-if="message.type === 'bot' && message.content === ''" id="typing-animation"></div>
-                    <div v-else 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">
-                            <path d="M8 5v14l11-7z"/>
-                        </svg>
-                        <svg v-else xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-                            <path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/>
-                        </svg>
-                    </button>
-                </div>
-            </div>
-            <div class="input-area" :class="{ 'input-hidden': isScrollingUp }">
-                <input type="text" id="user-input" v-model="userInput" @keyup.enter="sendMessage" placeholder="Type your message...">
-                <button class="send-button" @click="sendMessage">
-                    <svg 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">
-                        <line x1="22" y1="2" x2="11" y2="13"></line>
-                        <polygon points="22 2 15 22 11 13 2 9 22 2"></polygon>
-                    </svg>
-                </button>
-                <button class="reset-button" @click="resetConversation">
-                    <svg 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">
-                        <path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"></path>
-                        <path d="M3 3v5h5"></path>
-                    </svg>
-                </button>
-            </div>
-        </div>
-    </div>
-    <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
-        });
-        function createTypingAnimation() {
-          const container = document.getElementById('typing-animation');
-          for (let i = 0; i < 3; i++) {
-            const dot = document.createElement('div');
-            dot.className = 'dot';
-            container.appendChild(dot);
-          }
-        }
-        const app = new Vue({
-            el: '#app',
-            data: {
-                messages: [],
-                userInput: '',
-                selectedOptions: {},
-                conversationId: '',
-                currentAudio: null,
-                isScrollingUp: false,
-                lastScrollTop: 0,
-            },
-            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 = {};
-                    let streamingIndex = this.messages.push({ type: 'bot', content: '' }) - 1;
-                    this.$nextTick(() => {
-                        createTypingAnimation();
-                    });
-                    try {
-                        const response = await fetch('https://pvanand-general-chat.hf.space/v2/followup-tools-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 jsonData = null;
-                        while (true) {
-                            const { done, value } = await reader.read();
-                            if (done) break;
-                            const chunk = new TextDecoder().decode(value);
-                            if (chunk.includes('<json>')) {
-                                const [textPart, jsonPart] = chunk.split('<json>');
-                                rawResponse += textPart;
-                                const jsonString = jsonPart.split('</json>')[0]; // Extract JSON string
-                                try {
-                                    jsonData = JSON.parse(jsonString);
-                                } catch (error) {
-                                    console.error("JSON parsing error:", error);
-                                    console.log("Raw JSON string:", jsonString);
-                                }
-                            } else {
-                                rawResponse += chunk;
-                            }
-                            // Update the streaming message content
-                            //replace <tools> and </tools> <interact> and </interact> with empty string
-                            // it should also replace <tool> and </tool>
-                            rawResponse = rawResponse.replace(/<tools>[\s\S]*?<\/tools>/g, '');
-                            rawResponse = rawResponse.replace(/<interact>[\s\S]*?<\/interact>/g, '');
-                            rawResponse = rawResponse.replace(/<tool>[\s\S]*?<\/tool>/g, '');
-                            this.$set(this.messages[streamingIndex], 'content', marked.parse(rawResponse));
-                        }
-                        // Process jsonData after the loop if it exists
-                        if (jsonData) {
-                            if (jsonData.tools && jsonData.tools.length > 0) {
-                                let toolsMessage = "\n\n**Tools Used:**\n";
-                                jsonData.tools.forEach(tool => {
-                                    toolsMessage += `- ${tool.name.charAt(0).toUpperCase() + tool.name.slice(1)}: ${tool.input}\n`;
-                                });
-                                this.$set(this.messages[streamingIndex], 'content', this.messages[streamingIndex].content + marked.parse(toolsMessage));
-                            }
-                            if (jsonData.clarification && jsonData.clarification.length > 0) {
-                                // Increment streamingIndex for the new clarification message
-                                streamingIndex = this.messages.push({ type: 'bot', content: '' }) - 1;
-                                this.renderClarificationQuestions(jsonData.clarification, streamingIndex);
-                            }
-                        }
-                        const audioUrl = await this.convertToSpeech(rawResponse);
-                        if (audioUrl) {
-                            this.$set(this.messages[streamingIndex], 'audio', audioUrl);
-                        }
-                    } catch (error) {
-                        console.error('Error:', error);
-                        this.messages.push({ type: 'bot', content: 'An error occurred while processing your request.' });
-                    }
-                    this.$nextTick(() => this.scrollToBottom());
-                },
-                handleScroll(event) {
-                    const st = event.target.scrollTop;
-                    this.isScrollingUp = st < this.lastScrollTop;
-                    this.lastScrollTop = st <= 0 ? 0 : st;
-                },
-                renderClarificationQuestions(clarification, messageIndex) {
-                    if (!clarification || clarification.length === 0) return;
-                    let clarificationHtml = '';
-                    clarification.forEach((item, questionIndex) => {
-                        clarificationHtml += `<strong>${item.question}</strong><br>`;
-                        clarificationHtml += '<div class="option-buttons">';
-                        item.options.forEach((option, optionIndex) => {
-                            const escapedOption = option.replace(/'/g, "\\'");
-                            clarificationHtml += `<button class="option-button" onclick="app.toggleOption('${escapedOption}', ${questionIndex}, ${optionIndex})">${option}</button>`;
-                        });
-                        clarificationHtml += '</div><br>';
-                    });
-                    this.$set(this.messages[messageIndex], 'content', this.messages[messageIndex].content + marked.parse(clarificationHtml));
-                    this.$nextTick(() => {
-                        this.scrollToBottom();
-                        this.updateButtonStates();
-                    });
-                },
-                toggleOption(option, questionIndex, optionIndex) {
-                    if (!this.selectedOptions[questionIndex]) {
-                        this.$set(this.selectedOptions, questionIndex, []);
-                    }
-                    const index = this.selectedOptions[questionIndex].indexOf(option);
-                    if (index > -1) {
-                        this.selectedOptions[questionIndex].splice(index, 1);
-                    } else {
-                        this.selectedOptions[questionIndex].push(option);
-                    }
-                    this.updateInputFromSelectedOptions();
-                    this.updateButtonStates();
-                },
-                updateInputFromSelectedOptions() {
-                    this.userInput = Object.entries(this.selectedOptions)
-                        .map(([questionIndex, options]) =>
-                            `Q${parseInt(questionIndex) + 1}: ${options.join(', ')}`)
-                        .join(' | ');
-                    this.$nextTick(() => document.getElementById('user-input').focus());
-                },
-                updateButtonStates() {
-                    Object.entries(this.selectedOptions).forEach(([questionIndex, options]) => {
-                        const buttons = document.querySelectorAll(`.option-buttons:nth-of-type(${parseInt(questionIndex) + 1}) .option-button`);
-                        buttons.forEach((button) => {
-                            if (options.includes(button.textContent)) {
-                                button.classList.add('selected');
-                            } else {
-                                button.classList.remove('selected');
-                            }
-                        });
-                    });
-                },
-                resetConversation() {
-                this.conversationId = uuid.v4();
-                this.messages = [];
-                this.selectedOptions = {};
-                this.userInput = '';
-                this.isScrollingUp = false;
-                this.lastScrollTop = 0;
-                // Reset scroll position
-                this.$nextTick(() => {
-                    if (this.$refs.messageContainer) {
-                        this.$refs.messageContainer.scrollTop = 0;
-                    }
-                });
-                // Ensure input area is visible
-                const inputArea = document.querySelector('.input-area');
-                if (inputArea) inputArea.classList.remove('input-hidden');
-            },
-                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>
-</body>
 </html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>DigiYatra Assistant</title>
+    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
+    <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 href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/styles/atom-one-dark.min.css">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js"></script>
+    <style>
+      :root {
+    --primary-color: #304b76;;
+    --secondary-color: #f0f8ff;
+    --text-color: #333;
+    --background-color: #f5f7fa;
+}
+body {
+    font-family: 'Poppins', sans-serif;
+    /* font-family: 'Roboto', sans-serif; */
+    line-height: 1.6;
+    margin: 0;
+    padding: 0;
+    background-color: var(--background-color);
+    color: var(--text-color);
+}
+#app {
+    max-width: 900px;
+    margin: 0 auto;
+    padding: 10px;
+}
+.chat-container {
+    background-color: #ffffff;
+    border-radius: 15px;
+    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    height: 98vh;
+    transition: all 0.3s ease;
+}
+.messages {
+    flex-grow: 1;
+    overflow-y: auto;
+    padding: 20px;
+    display: flex;
+    flex-direction: column;
+}
+.message {
+    max-width: 80%;
+    margin-bottom: 20px;
+    padding: 10px 20px;
+    border-radius: 20px;
+    font-size: 16px;
+    line-height: 1.5;
+    word-wrap: break-word;
+    animation: fadeIn 0.5s ease;
+}
+table {
+    width: 100%;
+    border-collapse: collapse;
+    margin-bottom: 20px;
+}
+table, th, td {
+    border: 1px solid #ddd;
+}
+th, td {
+    padding: 10px;
+    text-align: left;
+}
+@keyframes fadeIn {
+    from { opacity: 0; transform: translateY(10px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+.user-message {
+    background-color: var(--primary-color);
+    color: #ffffff;
+    align-self: flex-end;
+    border-bottom-right-radius: 5px;
+}
+.bot-message {
+    background-color: var(--secondary-color);
+    color: var(--text-color);
+    align-self: flex-start;
+    border-bottom-left-radius: 5px;
+    position: relative;  /* Add this line */
+}
+.copy-button {
+    position: absolute;
+    top: 5px;
+    right: 5px;
+    background-color: transparent;
+    border: none;
+    cursor: pointer;
+    padding: 5px;
+    transition: all 0.3s ease;
+}
+.copy-button svg {
+    width: 16px;
+    height: 16px;
+    stroke: var(--primary-color);
+}
+.copy-button:hover {
+    transform: scale(1.1);
+}
+.input-area {
+    display: flex;
+    padding: 15px;
+    background-color: #ffffff;
+    border-top: 1px solid #e0e0e0;
+}
+#user-input {
+    flex-grow: 1;
+    padding: 12px 15px;
+    border: 2px solid var(--primary-color);
+    border-radius: 15px;
+    font-size: 16px;
+    outline: none;
+    transition: all 0.3s ease;
+}
+#user-input:focus {
+    box-shadow: 0 0 0 3px rgba(0,119,190,0.3);
+}
+.send-button, .reset-button {
+    background-color: var(--primary-color);
+    color: #ffffff;
+    border: none;
+    border-radius: 50%;
+    width: 50px;
+    height: 50px;
+    margin-left: 10px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.3s ease;
+}
+.send-button:hover, .reset-button:hover {
+    background-color: #005fa3;
+    transform: scale(1.05);
+}
+.send-button svg, .reset-button svg {
+    width: 24px;
+    height: 24px;
+}
+.option-buttons {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+    margin-top: 15px;
+}
+.option-button {
+    background-color: #ffffff;
+    border: 2px solid var(--primary-color);
+    border-radius: 20px;
+    padding: 8px 16px;
+    font-size: 14px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+}
+.option-button:hover {
+    background-color: var(--secondary-color);
+    transform: translateY(-2px);
+}
+.option-button.selected {
+    background-color: var(--primary-color);
+    color: #ffffff;
+}
+.audio-button {
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: 0;
+    margin-top: 10px;
+    transition: all 0.3s ease;
+}
+.audio-button:hover {
+    transform: scale(1.1);
+}
+.audio-button svg {
+    width: 30px;
+    height: 30px;
+    fill: var(--primary-color);
+}
+@media (max-width: 600px) {
+    #app {
+        padding: 10px;
+    }
+    .chat-container {
+        height: 95vh;
+    }
+    .message {
+        max-width: 90%;
+    }
+}
+.dot {
+display: inline-block;
+width: 8px;
+height: 8px;
+border-radius: 50%;
+background-color: #5853c0;
+margin: 0 3px;
+animation: bounce 1.4s infinite ease-in-out;
+}
+.dot:nth-child(1) { animation-delay: -0.32s; }
+.dot:nth-child(2) { animation-delay: -0.16s; }
+@keyframes bounce {
+0%, 80%, 100% {
+transform: scale(0);
+} 40% {
+transform: scale(1.0);
+}
+}
+.chat-container {
+position: relative;
+}
+.input-area {
+position: absolute;
+bottom: 0;
+left: 0;
+right: 0;
+z-index: 10;
+transition: transform 0.3s ease;
+}
+.messages {
+padding-bottom: 80px;
+}
+.input-hidden {
+transform: translateY(100%);
+}
+.tool-options {
+    position: absolute;
+    bottom: 100%;
+    left: 0;
+    background-color: #ffffff;
+    border: 1px solid #ddd;
+    border-radius: 8px;
+    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
+    display: flex;
+    flex-direction: column;
+    width: auto;
+    min-width: 120px;
+    margin-bottom: 10px;            /* Added padding for better spacing */
+}
+.tool-options button {
+    padding: 10px 15px;
+    border: none;
+    background: none;
+    text-align: left;
+    cursor: pointer;
+    white-space: nowrap;
+    transition: background-color 0.3s ease;
+    font-size: 16px;
+    font-weight: 500;
+    color: #333;                    /* Added margin to separate buttons */
+    border-radius: 4px;      /* Added border radius for a floating effect */
+}
+.tool-options button:hover {
+    background-color: #e0e0e0;
+    color: #000;
+}
+    </style>
+</head>
+<body>
+    <div id="app">
+        <div class="chat-container">
+            <div class="messages" ref="messageContainer" @scroll="handleScroll">
+                <div v-for="(message, index) in messages" :key="index"
+                     :class="['message', message.type === 'user' ? 'user-message' : 'bot-message']">
+                    <div v-if="message.type === 'bot' && message.content === ''" id="typing-animation"></div>
+                    <div v-else 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">
+                            <path d="M8 5v14l11-7z"/>
+                        </svg>
+                        <svg v-else xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+                            <path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/>
+                        </svg>
+                    </button>
+                    <button v-if="message.type === 'bot' && message.rawResponse" @click="copyMarkdownToClipboard(message.rawResponse)" class="copy-button">
+                        <svg 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">
+                            <path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path>
+                            <rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect>
+                        </svg>
+                    </button>
+                </div>
+            </div>
+            <div class="input-area" :class="{ 'input-hidden': isScrollingUp }">
+                    <div v-if="showToolOptions" class="tool-options">
+                        <button @click="selectTool('web')">/web</button>
+                        <button @click="selectTool('news')">/news</button>
+                    </div>
+                    <input type="text" id="user-input" v-model="userInput" @keyup.enter="sendMessage" @input="handleInput($event)" placeholder="Type your message... (type / to see available tools)">
+                <button class="send-button" @click="sendMessage">
+                    <svg 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">
+                        <line x1="22" y1="2" x2="11" y2="13"></line>
+                        <polygon points="22 2 15 22 11 13 2 9 22 2"></polygon>
+                    </svg>
+                </button>
+                <button class="reset-button" @click="resetConversation">
+                    <svg 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">
+                        <path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"></path>
+                        <path d="M3 3v5h5"></path>
+                    </svg>
+                </button>
+            </div>
+        </div>
+    </div>
+    <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
+        });
+        function createTypingAnimation() {
+          const container = document.getElementById('typing-animation');
+          for (let i = 0; i < 3; i++) {
+            const dot = document.createElement('div');
+            dot.className = 'dot';
+            container.appendChild(dot);
+          }
+        }
+        const app = new Vue({
+            el: '#app',
+            data: {
+                messages: [],
+                userInput: '',
+                selectedOptions: {},
+                conversationId: '',
+                currentAudio: null,
+                isScrollingUp: false,
+                lastScrollTop: 0,
+                tool_call: 'auto',
+                showToolOptions: false,
+            },
+            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 = {};
+                    let streamingIndex = this.messages.push({ type: 'bot', content: '' }) - 1;
+                    this.$nextTick(() => {
+                        createTypingAnimation();
+                    });
+                    try {
+                        const response = await fetch('https://pvanand-general-chat.hf.space/v2/followup-tools-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',
+                                tool_call: this.tool_call,
+                            })
+                        });
+                        const reader = response.body.getReader();
+                        let rawResponse = '';
+                        let jsonData = null;
+                        while (true) {
+                            const { done, value } = await reader.read();
+                            if (done) break;
+                            const chunk = new TextDecoder().decode(value);
+                            if (chunk.includes('<json>')) {
+                                const [textPart, jsonPart] = chunk.split('<json>');
+                                rawResponse += textPart;
+                                const jsonString = jsonPart.split('</json>')[0];
+                                try {
+                                    jsonData = JSON.parse(jsonString);
+                                } catch (error) {
+                                    console.error("JSON parsing error:", error);
+                                    console.log("Raw JSON string:", jsonString);
+                                }
+                            } else {
+                                rawResponse += chunk;
+                            }
+                            rawResponse = rawResponse.replace(/<\/?response>/g, '');
+                            rawResponse = rawResponse.replace(/<tools>[\s\S]*?<\/tools>/g, '');
+                            rawResponse = rawResponse.replace(/<interact>[\s\S]*?<\/interact>/g, '');
+                            rawResponse = rawResponse.replace(/<tool>[\s\S]*?<\/tool>/g, '');
+                            this.$set(this.messages[streamingIndex], 'content', marked.parse(rawResponse));
+                            this.$set(this.messages[streamingIndex], 'rawResponse', rawResponse);
+                        }
+                        if (jsonData) {
+                            if (jsonData.tools && jsonData.tools.length > 0) {
+                                let toolsMessage = "\n\n**Tools Used:**\n";
+                                jsonData.tools.forEach(tool => {
+                                    toolsMessage += `- ${tool.name.charAt(0).toUpperCase() + tool.name.slice(1)}: ${tool.input}\n`;
+                                });
+                                this.$set(this.messages[streamingIndex], 'content', this.messages[streamingIndex].content + marked.parse(toolsMessage));
+                            }
+                            if (jsonData.clarification && jsonData.clarification.length > 0) {
+                                streamingIndex = this.messages.push({ type: 'bot', content: '' }) - 1;
+                                this.renderClarificationQuestions(jsonData.clarification, streamingIndex);
+                            }
+                        }
+                        const audioUrl = await this.convertToSpeech(rawResponse);
+                        if (audioUrl) {
+                            this.$set(this.messages[streamingIndex], 'audio', audioUrl);
+                        }
+                    } catch (error) {
+                        console.error('Error:', error);
+                        this.messages.push({ type: 'bot', content: 'An error occurred while processing your request.' });
+                    }
+                    this.$nextTick(() => this.scrollToBottom());
+                },
+                handleScroll(event) {
+                    const st = event.target.scrollTop;
+                    this.isScrollingUp = st < this.lastScrollTop;
+                    this.lastScrollTop = st <= 0 ? 0 : st;
+                },
+                renderClarificationQuestions(clarification, messageIndex) {
+                    if (!clarification || clarification.length === 0) return;
+                    let clarificationHtml = '';
+                    clarification.forEach((item, questionIndex) => {
+                        clarificationHtml += `<strong>${item.question}</strong><br>`;
+                        clarificationHtml += '<div class="option-buttons">';
+                        item.options.forEach((option, optionIndex) => {
+                            const escapedOption = option.replace(/'/g, "\\'");
+                            clarificationHtml += `<button class="option-button" onclick="app.toggleOption('${escapedOption}', ${questionIndex}, ${optionIndex})">${option}</button>`;
+                        });
+                        clarificationHtml += '</div><br>';
+                    });
+                    this.$set(this.messages[messageIndex], 'content', this.messages[messageIndex].content + marked.parse(clarificationHtml));
+                    this.$nextTick(() => {
+                        this.scrollToBottom();
+                        this.updateButtonStates();
+                    });
+                },
+                toggleOption(option, questionIndex, optionIndex) {
+                    if (!this.selectedOptions[questionIndex]) {
+                        this.$set(this.selectedOptions, questionIndex, []);
+                    }
+                    const index = this.selectedOptions[questionIndex].indexOf(option);
+                    if (index > -1) {
+                        this.selectedOptions[questionIndex].splice(index, 1);
+                    } else {
+                        this.selectedOptions[questionIndex].push(option);
+                    }
+                    this.updateInputFromSelectedOptions();
+                    this.updateButtonStates();
+                },
+                updateInputFromSelectedOptions() {
+                    this.userInput = Object.entries(this.selectedOptions)
+                        .map(([questionIndex, options]) =>
+                            `Q${parseInt(questionIndex) + 1}: ${options.join(', ')}`)
+                        .join(' | ');
+                    this.$nextTick(() => document.getElementById('user-input').focus());
+                },
+                updateButtonStates() {
+                    Object.entries(this.selectedOptions).forEach(([questionIndex, options]) => {
+                        const buttons = document.querySelectorAll(`.option-buttons:nth-of-type(${parseInt(questionIndex) + 1}) .option-button`);
+                        buttons.forEach((button) => {
+                            if (options.includes(button.textContent)) {
+                                button.classList.add('selected');
+                            } else {
+                                button.classList.remove('selected');
+                            }
+                        });
+                    });
+                },
+                resetConversation() {
+                    this.conversationId = uuid.v4();
+                    this.messages = [];
+                    this.selectedOptions = {};
+                    this.userInput = '';
+                    this.isScrollingUp = false;
+                    this.lastScrollTop = 0;
+                    this.tool_call = 'auto';
+                    this.showToolOptions = false;
+                    this.$nextTick(() => {
+                        if (this.$refs.messageContainer) {
+                            this.$refs.messageContainer.scrollTop = 0;
+                        }
+                    });
+                    const inputArea = document.querySelector('.input-area');
+                    if (inputArea) inputArea.classList.remove('input-hidden');
+                },
+                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();
+                },
+                // remove alert
+                copyMarkdownToClipboard(rawResponse) {
+                    navigator.clipboard.writeText(rawResponse).then(() => {
+                        // remove alert
+                    }).catch(err => {
+                        console.error('Failed to copy: ', err);
+                    });
+                },
+                handleInput(event) {
+                console.log("Input event triggered", event.target.value); // For debugging
+                if (event.target.value === '/') {
+                    console.log("Slash detected, showing tool options"); // For debugging
+                    this.showToolOptions = true;
+                } else {
+                    this.showToolOptions = false;
+                }
+                },
+                selectTool(tool) {
+                if (tool === 'web') {
+                    this.tool_call = 'web';
+                    this.userInput = '/web ';
+                } else if (tool === 'news') {
+                    this.tool_call = 'news';
+                    this.userInput = '/news ';
+                }
+                this.showToolOptions = false;
+                this.$nextTick(() => {
+                    const inputElement = document.getElementById('user-input');
+                    inputElement.focus();
+                    inputElement.setSelectionRange(inputElement.value.length, inputElement.value.length);
+                });
+            },
+                watch: {
+                userInput(newVal, oldVal) {
+                    console.log("userInput changed", newVal); // For debugging
+                    if (newVal === '/') {
+                        this.showToolOptions = true;
+                    } else {
+                        this.showToolOptions = false;
+                    }
+                }
+            },
+            },
+            mounted() {
+                this.resetConversation();
+            }
+        });
+    </script>
+</body>
 </html>