Update templates/ai.html

templates/ai.html

@@ -113,6 +113,7 @@
                 <div class="chat-box" id="chat-box"></div>
                 <div class="input-container mt-2">
                     <input class="chatinput" type="text" id="user-input" placeholder="Type a message..." onkeypress="handleChatKeyPress(event)" />
+                    <button id="speak-btn" class="styled-btn" onclick="toggleSpeechRecognition()">🎤 Speak</button>
                     <button class="chatbutton" onclick="sendMessage()">Send</button>
                 </div>
             </div>
@@ -161,6 +162,15 @@ function sendMessage() {
         document.getElementById("user-input").value = "";
         aiMessage.className = "message ai-message";
         aiMessage.innerHTML = data.response.replace(/<think>.*?<\/think>\s*/gs, "");
+        
+        let readButton = document.createElement("button");
+        readButton.className = "read-btn";
+        readButton.textContent = "🔊 Read";
+        readButton.onclick = function() {
+            toggleReadAloud(readButton, data.response.replace(/<\/?[^>]+(>|$)/g, ""));
+        };
+        aiMessage.appendChild(readButton);
+      
         chatBox.appendChild(aiMessage);
         chatBox.scrollTop = chatBox.scrollHeight;
     })