Spaces:

pvanand
/

specialized-agents

Running

App Files Files Community

pvanand commited on Sep 4, 2024

Commit

6a14077

verified ·

1 Parent(s): e727ed4

Update static/multi-agent.html

Browse files

Files changed (1) hide show

static/multi-agent.html +93 -13

static/multi-agent.html CHANGED Viewed

@@ -12,7 +12,7 @@
     <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;
@@ -48,6 +48,7 @@ body {
     padding: 20px;
     display: flex;
     flex-direction: column;
 }
 .message {
     max-width: 80%;
@@ -268,7 +269,58 @@ transform: translateY(100%);
     background-color: #e0e0e0;
     color: #000;
 }
     </style>
 </head>
 <body>
@@ -296,12 +348,11 @@ transform: translateY(100%);
                 </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>
@@ -384,6 +435,7 @@ transform: translateY(100%);
                         const reader = response.body.getReader();
                         let rawResponse = '';
                         let jsonData = null;
                         while (true) {
                             const { done, value } = await reader.read();
                             if (done) break;
@@ -392,15 +444,41 @@ transform: translateY(100%);
                                 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, '');
@@ -563,7 +641,6 @@ transform: translateY(100%);
                     message.isPlaying = !message.isPlaying;
                     this.$forceUpdate();
                 },
-                // remove alert
                 copyMarkdownToClipboard(rawResponse) {
                     navigator.clipboard.writeText(rawResponse).then(() => {
                         // remove alert
@@ -605,6 +682,9 @@ transform: translateY(100%);
                     }
                 }
             },
             },
             mounted() {
                 this.resetConversation();

     <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;
     padding: 20px;
     display: flex;
     flex-direction: column;
 }
 .message {
     max-width: 80%;
     background-color: #e0e0e0;
     color: #000;
 }
+/* ... Reference styles ... */
+details {
+    margin-top: 10px;
+    border-radius: 4px;
+    padding: 5px;
+}
+summary {
+    cursor: pointer;
+    font-weight: bold;
+}
+.ref-content {
+    margin-top: 10px;
+    justify-content: center;
+}
+.ref-item {
+    margin-bottom: 0px;
+}
+.ref-item small {
+    color: #666;
+}
+hr {
+    margin: 10px 0;
+    border: none;
+    border-top: 1px solid #eee;
+}
+.ref-link {
+    text-decoration: none;
+    color: inherit;
+    display: block;
+    padding: 5px;
+    border-radius: 4px;
+    transition: background-color 0.2s;
+}
+.ref-link:hover {
+    background-color: #e3e3ea;
+    color: inherit;
+}
+.ref-link:visited {
+    color: inherit;
+}
     </style>
 </head>
 <body>
                 </div>
             </div>
             <div class="input-area" :class="{ 'input-hidden': isScrollingUp }">
+                <input type="text" id="user-input" v-model="userInput" @keyup.enter="sendMessage" @input="handleInput($event)" placeholder="Type your message...">
+                <div v-if="showToolOptions" class="tool-options">
+                    <button @click="selectTool('web')">/web</button>
+                    <button @click="selectTool('news')">/news</button>
+                </div>
                 <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>
                         const reader = response.body.getReader();
                         let rawResponse = '';
                         let jsonData = null;
+                        let refData = null; // New variable to hold reference data
                         while (true) {
                             const { done, value } = await reader.read();
                             if (done) break;
                                 const [textPart, jsonPart] = chunk.split('<json>');
                                 rawResponse += textPart;
                                 const jsonString = jsonPart.split('</json>')[0];
+                                // Check for <ref> tag first
+                                const refMatch = jsonString.match(/<ref>(.*?)<\/ref>/);
+                                if (refMatch) {
+                                    refData = JSON.parse(refMatch[1]); // Parse the reference data
+                                } else {
+                                    try {
+                                        jsonData = JSON.parse(jsonString); // Parse JSON only if <ref> is not present
+                                    } catch (error) {
+                                        console.error("JSON parsing error:", error);
+                                        console.log("Raw JSON string:", jsonString);
+                                    }
                                 }
                             } else {
                                 rawResponse += chunk;
                             }
+                                                    // After processing, display the refData if it exists
+                            if (refData) {
+                            const refMessage = `
+                                <details>
+                                    <summary>Reference Information</summary>
+                                    <div class="ref-content">
+                                        ${refData.map(item => `
+                                            <div class="ref-item">
+                                                <a href="${item.url}" target="_blank" class="ref-link">
+                                                    <strong>${item.title}</strong>: ${item.snippet}
+                                                </a>
+                                                <br>
+                                                <small>Last updated: ${item.last_updated}</small>
+                                            </div>
+                                        `).join('<hr>')}
+                                    </div>
+                                </details>
+                            `;
+                            this.messages.push({ type: 'bot', content: refMessage });
+                        }
                             rawResponse = rawResponse.replace(/<\/?response>/g, '');
                             rawResponse = rawResponse.replace(/<tools>[\s\S]*?<\/tools>/g, '');
                     message.isPlaying = !message.isPlaying;
                     this.$forceUpdate();
                 },
                 copyMarkdownToClipboard(rawResponse) {
                     navigator.clipboard.writeText(rawResponse).then(() => {
                         // remove alert
                     }
                 }
             },
+            toggleSnippet(index) {
+        this.$set(this.expandedSnippets, index, !this.expandedSnippets[index]);
+            },
             },
             mounted() {
                 this.resetConversation();