Update static/index.html

static/index.html

@@ -192,6 +192,36 @@
         .audio-button.loading .loader {
             display: block;
         }
+
+        .download-button {
+            position: absolute;
+            bottom: 6px;
+            right: 45px;
+            background: rgba(255, 255, 255, 0.1);
+            border: none;
+            border-radius: 50%;
+            width: 30px;
+            height: 30px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+            transition: background-color 0.2s;
+            z-index: 10;
+        }
+        .download-button:hover {
+            background: rgba(255, 255, 255, 0.2);
+        }
+        .download-button svg {
+            width: 18px;
+            height: 18px;
+            fill: var(--icon-color);
+            transition: fill 0.2s;
+        }
+        .download-button:hover svg {
+            fill: #4CAF50;
+        }
+
         @keyframes spin {
             0% { transform: rotate(0deg); }
             100% { transform: rotate(360deg); }
@@ -329,7 +359,7 @@
                 chatArea.scrollTop = chatArea.scrollHeight;
             };
 
-            const addMessage = (content, sender, isHTML = false, audioUrl = null) => {
+            const addMessage = (content, sender, isHTML = false, audioFilename = null) => {
                 welcomeScreen.classList.add('hidden');
                 
                 const messageElement = document.createElement('div');
@@ -344,25 +374,40 @@
                 }
                 messageElement.appendChild(contentDiv);
 
-                if (sender === 'ai' && audioUrl) {
-                    const audioButton = document.createElement('button');
-                    audioButton.classList.add('audio-button');
-                    audioButton.dataset.audioUrl = audioUrl;
-                    audioButton.innerHTML = `
+                if (sender === 'ai' && audioFilename) {
+                    // Add download button
+                    const downloadButton = document.createElement('button');
+                    downloadButton.classList.add('download-button');
+                    downloadButton.title = "Download audio";
+                    downloadButton.innerHTML = `
+                        <svg viewBox="0 0 24 24">
+                            <path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/>
+                        </svg>
+                    `;
+                    downloadButton.addEventListener('click', () => {
+                        window.location.href = `/download/${audioFilename}`;
+                    });
+                    messageElement.appendChild(downloadButton);
+                    
+                    // Add play button
+                    const playButton = document.createElement('button');
+                    playButton.classList.add('audio-button');
+                    playButton.dataset.audioUrl = `/static/audio/${audioFilename}`;
+                    playButton.innerHTML = `
                         <svg class="speaker-icon" viewBox="0 0 24 24">
                             <path d="M3 10v4c0 .55.45 1 1 1h3.5l5.5 5V5L7.5 9H4c-.55 0-1 .45-1 1zm14 0h-1.5c-2.31 0-4.22-1.74-4.47-4H10v12h1.5v-2.22c.25-2.26 2.16-4.22 4.47-4.22H17c1.1 0 2 .9 2 2s-.9 2-2 2h-1.5v2H17c2.21 0 4-1.79 4-4s-1.79-4-4-4z"/>
                         </svg>
                         <div class="loader"></div>
                     `;
-                    audioButton.title = "Listen to response";
-                    audioButton.addEventListener('click', (e) => {
+                    playButton.title = "Listen to response";
+                    playButton.addEventListener('click', (e) => {
                         const url = e.currentTarget.dataset.audioUrl;
                         playAudio(e.currentTarget, url);
                     });
-                    messageElement.appendChild(audioButton);
+                    messageElement.appendChild(playButton);
                     
                     // Auto-play audio
-                    setTimeout(() => audioButton.click(), 300);
+                    setTimeout(() => playButton.click(), 300);
                 }
                 
                 chatArea.appendChild(messageElement);
@@ -437,7 +482,7 @@
                         data.response_html, 
                         'ai', 
                         true,
-                        data.audio_url
+                        data.audio_filename
                     );
                     
                 } catch (error) {