Update app.py

app.py

@@ -2,7 +2,7 @@ import streamlit as st
 import difflib
 import requests
 import datetime
-from streamlit_js_eval import streamlit_js_eval
+from st_mic_recorder import mic_recorder
 
 # --- CONFIG ---
 GROQ_API_KEY = st.secrets.get('GROQ_API_KEY', 'YOUR_GROQ_API_KEY')
@@ -163,76 +163,24 @@ elif page == "Semantic Search":
     st.caption("Example questions:")
     st.write(", ".join(EXAMPLE_QUESTIONS))
 
-    # --- Single input with mic button using streamlit_js_eval ---
-    st.markdown("""
-    <style>
-    .input-mic-container {
-        position: relative;
-        width: 100%;
-        max-width: 500px;
-    }
-    .input-mic {
-        width: 100%;
-        padding-right: 40px;
-        height: 38px;
-        font-size: 16px;
-        box-sizing: border-box;
-        border: 1px solid #ccc;
-        border-radius: 4px;
-    }
-    .mic-btn {
-        position: absolute;
-        right: 5px;
-        top: 4px;
-        border: none;
-        background: none;
-        font-size: 22px;
-        cursor: pointer;
-        outline: none;
-    }
-    </style>
-    <div class="input-mic-container">
-        <input id="questionInput" class="input-mic" type="text" placeholder="Ask a question about your code" />
-        <button class="mic-btn" id="micBtn" title="Speak your question">🎤</button>
-    </div>
-    <script>
-    const input = document.getElementById('questionInput');
-    const micBtn = document.getElementById('micBtn');
-    let recognition;
-    if ('webkitSpeechRecognition' in window) {
-        recognition = new webkitSpeechRecognition();
-        recognition.lang = 'en-US';
-        recognition.continuous = false;
-        recognition.interimResults = false;
-        micBtn.onclick = function(e) {
-            e.preventDefault();
-            recognition.start();
-            micBtn.textContent = '🎙️';
-        };
-        recognition.onresult = function(event) {
-            const transcript = event.results[0][0].transcript;
-            input.value = transcript;
-            window.dispatchEvent(new CustomEvent("streamlit_js_eval_result", {detail: transcript}));
-            micBtn.textContent = '🎤';
-        };
-        recognition.onerror = function() {
-            micBtn.textContent = '🎤';
-        };
-        recognition.onend = function() {
-            micBtn.textContent = '🎤';
-        };
-    } else {
-        micBtn.disabled = true;
-        micBtn.title = 'Voice not supported';
-    }
-    input.onchange = function() {
-        window.dispatchEvent(new CustomEvent("streamlit_js_eval_result", {detail: input.value}));
-    }
-    </script>
-    """, unsafe_allow_html=True)
+    # --- Single input with mic button ---
+    st.write("You can type or use the mic to ask your question:")
+
+    # Use mic_recorder for voice input (returns text or None)
+    question_voice = mic_recorder(
+        start_prompt="🎤 Speak your question",
+        stop_prompt="Stop",
+        just_once=True,
+        use_container_width=True,
+        key="mic"
+    )
 
-    # Get the value from JS (typed or spoken)
-    question = streamlit_js_eval(js_expressions="document.getElementById('questionInput') ? document.getElementById('questionInput').value : ''", key="js_question")
+    # Use a single input field for both typing and voice
+    question = st.text_input(
+        "Ask a question about your code",
+        value=question_voice if question_voice else "",
+        key="sem_question"
+    )
 
     if st.button("Run Semantic Search"):
         if not code_input.strip() or not question.strip():