Update static/index.html

static/index.html

@@ -289,15 +289,12 @@
             <div class="welcome-screen">
                 <h2>Welcome to Athspi!</h2>
                 <p>Hello! I'm your AI assistant Athspi powered by Gemini. Ask me anything - I can explain concepts, generate ideas, or help with coding!</p>
-                <p>Try asking me something like: <em>"Explain quantum computing in simple terms"</em> or <em>"Help me debug this Python code"</em></p>
+                <p>You can request audio responses by saying things like: <em>"Give me the answer in audio"</em> or <em>"Speak the response"</em></p>
             </div>
         </main>
 
         <footer class="input-area">
             <form id="chat-form" class="input-wrapper">
-                <button type="button" class="icon-button" id="attach-button">
-                    <svg viewBox="0 0 24 24"><path d="M16.5 6v11.5c0 2.21-1.79 4-4 4s-4-1.79-4-4V5a2.5 2.5 0 0 1 5 0v10.5c0 .83-.67 1.5-1.5 1.5s-1.5-.67-1.5-1.5V6H10v9.5a2.5 2.5 0 0 0 5 0V5c-1.38 0-2.5 1.12-2.5 2.5v10.5c0 1.38-1.12 2.5-2.5 2.5s-2.5-1.12-2.5-2.5V5a4 4 0 0 1 8 0v11.5c-1.1 0-2-.9-2-2V6h-1.5z"></path></svg>
-                </button>
                 <textarea id="message-input" placeholder="Ask anything..." rows="1"></textarea>
                 <button type="submit" id="send-button" class="icon-button send-button disabled">
                     <svg viewBox="0 0 24 24"><path d="M2 21l21-9L2 3v7l15 2-15 2v7z"></path></svg>
@@ -313,7 +310,6 @@
             const chatArea = document.querySelector('.chat-area');
             const welcomeScreen = document.querySelector('.welcome-screen');
             const sendButton = document.getElementById('send-button');
-            const attachButton = document.getElementById('attach-button');
 
             let currentAudio = null;
 
@@ -333,7 +329,7 @@
                 chatArea.scrollTop = chatArea.scrollHeight;
             };
 
-            const addMessage = (content, sender, isHTML = false, plainText = '') => {
+            const addMessage = (content, sender, isHTML = false, plainText = '', audioUrl = null) => {
                 welcomeScreen.classList.add('hidden');
                 
                 const messageElement = document.createElement('div');
@@ -348,19 +344,30 @@
                 }
                 messageElement.appendChild(contentDiv);
 
-                if (sender === 'ai' && plainText) {
-                    const audioButton = document.createElement('button');
-                    audioButton.classList.add('audio-button');
-                    audioButton.dataset.plainText = plainText;
-                    audioButton.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', () => playAudio(audioButton, plainText));
-                    messageElement.appendChild(audioButton);
+                if (sender === 'ai') {
+                    // Add audio button if audio is available or if response starts with 🔊
+                    const shouldShowAudio = audioUrl || content.startsWith("🔊");
+                    const audioText = plainText || content;
+                    
+                    if (shouldShowAudio) {
+                        const audioButton = document.createElement('button');
+                        audioButton.classList.add('audio-button');
+                        audioButton.dataset.audioUrl = audioUrl;
+                        audioButton.dataset.plainText = audioText.replace(/^🔊\s*/, '');
+                        audioButton.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) => {
+                            const url = e.currentTarget.dataset.audioUrl;
+                            const text = e.currentTarget.dataset.plainText;
+                            playAudio(e.currentTarget, url, text);
+                        });
+                        messageElement.appendChild(audioButton);
+                    }
                 }
                 
                 chatArea.appendChild(messageElement);
@@ -377,7 +384,7 @@
                 return indicatorElement;
             };
 
-            const playAudio = async (buttonElement, text) => {
+            const playAudio = async (buttonElement, audioUrl, text) => {
                 if (currentAudio) {
                     currentAudio.pause();
                     currentAudio.currentTime = 0;
@@ -388,19 +395,23 @@
                 buttonElement.disabled = true;
 
                 try {
-                    const response = await fetch('/generate-audio', {
-                        method: 'POST',
-                        headers: { 'Content-Type': 'application/json' },
-                        body: JSON.stringify({ text: text })
-                    });
-                    
-                    const data = await response.json();
-                    
-                    if (data.error) {
-                        throw new Error(data.error);
+                    // If we don't have a URL but have text, generate audio first
+                    if (!audioUrl && text) {
+                        const response = await fetch('/generate-audio', {
+                            method: 'POST',
+                            headers: { 'Content-Type': 'application/json' },
+                            body: JSON.stringify({ text: text })
+                        });
+                        
+                        const data = await response.json();
+                        if (data.error) throw new Error(data.error);
+                        audioUrl = data.audio_url;
+                        buttonElement.dataset.audioUrl = audioUrl;
                     }
-                    
-                    currentAudio = new Audio(data.audio_url);
+
+                    if (!audioUrl) throw new Error("No audio available");
+
+                    currentAudio = new Audio(audioUrl);
                     currentAudio.play();
 
                     currentAudio.onended = () => {
@@ -410,16 +421,15 @@
                     };
 
                     currentAudio.onerror = () => {
-                        console.error("Error playing audio.");
-                        alert("Could not play audio. Please try again.");
+                        console.error("Error playing audio");
                         buttonElement.classList.remove('loading');
                         buttonElement.disabled = false;
                         currentAudio = null;
                     };
                     
                 } catch (error) {
-                    console.error("Error generating audio:", error);
-                    alert("Failed to generate audio. " + (error.message || "Please try again."));
+                    console.error("Audio error:", error);
+                    alert("Failed to play audio. " + (error.message || "Please try again."));
                     buttonElement.classList.remove('loading');
                     buttonElement.disabled = false;
                 }
@@ -431,9 +441,7 @@
                 try {
                     const response = await fetch('/chat', {
                         method: 'POST',
-                        headers: {
-                            'Content-Type': 'application/json',
-                        },
+                        headers: { 'Content-Type': 'application/json' },
                         body: JSON.stringify({ message: userMessage })
                     });
                     
@@ -444,7 +452,21 @@
                     }
                     
                     chatArea.removeChild(indicator);
-                    addMessage(data.response_html, 'ai', true, data.response_text);
+                    addMessage(
+                        data.response_html, 
+                        'ai', 
+                        true, 
+                        data.response_text,
+                        data.audio_url
+                    );
+                    
+                    // Auto-play audio if response starts with 🔊
+                    if (data.response_text.startsWith("🔊")) {
+                        const audioBtn = document.querySelector('.ai-message:last-child .audio-button');
+                        if (audioBtn) {
+                            setTimeout(() => audioBtn.click(), 500);
+                        }
+                    }
                     
                 } catch (error) {
                     chatArea.removeChild(indicator);
@@ -475,19 +497,8 @@
 
             messageInput.addEventListener('input', adjustTextareaHeight);
             
-            attachButton.addEventListener('click', () => {
-                alert("Attachment feature not implemented yet!");
-                messageInput.focus();
-            });
-            
             updateSendButtonState();
             messageInput.focus();
-
-            const isFirstVisit = !localStorage.getItem('chatVisited');
-            if (isFirstVisit) {
-                localStorage.setItem('chatVisited', 'true');
-                setTimeout(() => {}, 500);
-            }
         });
     </script>
 </body>