Update app.py

app.py

@@ -41,7 +41,7 @@ def respond(message, history: list[tuple[str, str]], system_message):
 # Gradio interface setup
 with gr.Blocks() as demo:
     # Chatbot Interface
-    chatbot = gr.Chatbot()
+    chatbot = gr.Chatbot(type="messages")  # Use 'messages' format for compatibility
     state = gr.State([])
     system_message = gr.Textbox(
         value="You are a helpful assistant.",
@@ -73,38 +73,40 @@ with gr.Blocks() as demo:
         outputs=[chatbot, state],
     )
 
-# Custom JavaScript for Speech Recognition
-speech_recognition_js = """
-let micButton = document.getElementById('mic_button');
-let userInputBox = document.getElementById('user_input_box');
-let recognition = null;
-
-if ('webkitSpeechRecognition' in window) {
-    recognition = new webkitSpeechRecognition();
-    recognition.continuous = false;
-    recognition.interimResults = false;
-
-    recognition.onresult = function(event) {
-        const transcript = event.results[0][0].transcript;
-        userInputBox.value = transcript;
-    };
-
-    recognition.onspeechend = function() {
-        recognition.stop(); // Stop listening after 2 seconds of silence
-    };
-
-    micButton.onclick = function() {
-        recognition.start(); // Start listening when mic button is clicked
-    };
-} else {
-    micButton.onclick = function() {
-        alert("Speech recognition is not supported in this browser.");
-    };
-}
-"""
-
-# Inject JavaScript into the app
-demo.load(_js=speech_recognition_js)
+    # Inject JavaScript for Speech Recognition using Gradio's HTML component
+    gr.HTML(
+        """
+        <script>
+        let micButton = document.getElementById('mic_button');
+        let userInputBox = document.getElementById('user_input_box');
+        let recognition = null;
+
+        if ('webkitSpeechRecognition' in window) {
+            recognition = new webkitSpeechRecognition();
+            recognition.continuous = false;
+            recognition.interimResults = false;
+
+            recognition.onresult = function(event) {
+                const transcript = event.results[0][0].transcript;
+                userInputBox.value = transcript;
+            };
+
+            recognition.onspeechend = function() {
+                recognition.stop(); // Stop listening after 2 seconds of silence
+            };
+
+            micButton.onclick = function() {
+                recognition.start(); // Start listening when mic button is clicked
+            };
+        } else {
+            micButton.onclick = function() {
+                alert("Speech recognition is not supported in this browser.");
+            };
+        }
+        </script>
+        """
+    )
 
 if __name__ == "__main__":
     demo.launch()
+