Update app.py

app.py

@@ -158,6 +158,8 @@ elif page == "Semantic Search":
         user_role = st.selectbox("Your Role", USER_ROLES, key="sem_role")
     with col4:
         explanation_language = st.selectbox("Explanation Language", EXPLANATION_LANGUAGES, key="sem_expl")
+    import streamlit_javascript
+
     # Initialize session state variables for voice input and auto run
     if "voice_question" not in st.session_state:
         st.session_state.voice_question = ""
@@ -165,76 +167,57 @@ elif page == "Semantic Search":
         st.session_state.auto_run_search = False
 
     # Container for question input and voice button
-    col_question, col_voice = st.columns([8,1])
+    col_question, col_voice = st.columns([9,1])
     with col_question:
         question = st.text_input("Ask a question about your code", value=st.session_state.voice_question, key="question_input")
     with col_voice:
-        # Microphone button with custom HTML and JS for voice input
-        st.markdown(
-            """
-            <button id="mic-btn" title="Click to speak" style="height:38px; width:38px; font-size:20px;">🎤</button>
-            <script>
-            const micBtn = window.parent.document.querySelector('#mic-btn');
-            const streamlitDoc = window.parent.document;
-
-            // Use Web Speech API for voice recognition
-            const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
-            if (SpeechRecognition) {
-                const recognition = new SpeechRecognition();
-                recognition.lang = 'en-US';
-                recognition.interimResults = false;
-                recognition.maxAlternatives = 1;
-
-                micBtn.onclick = () => {
-                    recognition.start();
-                    micBtn.textContent = '🎙️';
-                };
-
-                recognition.onresult = (event) => {
-                    const transcript = event.results[0][0].transcript;
-                    // Send transcript to Streamlit via custom event
-                    const inputEvent = new CustomEvent("voiceInput", {detail: transcript});
-                    streamlitDoc.dispatchEvent(inputEvent);
-                    micBtn.textContent = '🎤';
-                };
-
-                recognition.onerror = (event) => {
-                    console.error('Speech recognition error', event.error);
-                    micBtn.textContent = '🎤';
-                };
-            } else {
-                micBtn.disabled = true;
-                micBtn.title = "Speech Recognition not supported in this browser.";
-            }
-            </script>
-            """,
-            unsafe_allow_html=True
-        )
-
-    # Listen for the custom event and update session state via Streamlit's experimental_rerun hack
-    # This requires a small hack using st.experimental_get_query_params and st.experimental_set_query_params
-    # We will use st.experimental_get_query_params to detect voice input from URL params
-
-    # Check if voice input is passed via query params
-    query_params = st.experimental_get_query_params()
-    if "voice_input" in query_params:
-        voice_text = query_params["voice_input"][0]
-        if voice_text != st.session_state.voice_question:
-            st.session_state.voice_question = voice_text
-            st.session_state.auto_run_search = True
-            # Clear the query param to avoid repeated triggers
-            st.experimental_set_query_params()
-
-    # Run semantic search automatically if flag is set
+        # Use streamlit_javascript component to run JS for voice recognition
+        js_code = """
+        const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
+        if (!SpeechRecognition) {
+            alert("Speech Recognition not supported in this browser.");
+        } else {
+            const recognition = new SpeechRecognition();
+            recognition.lang = 'en-US';
+            recognition.interimResults = false;
+            recognition.maxAlternatives = 1;
+
+            const micBtn = document.getElementById('mic-btn');
+            micBtn.onclick = () => {
+                recognition.start();
+                micBtn.textContent = '🎙️';
+            };
+
+            recognition.onresult = (event) => {
+                const transcript = event.results[0][0].transcript;
+                window.streamlitSetValue('question_input', transcript);
+                micBtn.textContent = '🎤';
+            };
+
+            recognition.onerror = (event) => {
+                console.error('Speech recognition error', event.error);
+                micBtn.textContent = '🎤';
+            };
+        }
+        """
+        streamlit_javascript.st_javascript(js_code, key="voice_recognition_js")
+
+        st.markdown('<button id="mic-btn" title="Click to speak" style="height:38px; width:38px; font-size:20px;">🎤</button>', unsafe_allow_html=True)
+
+    # Automatically run semantic search if voice_question updated
+    if st.session_state.voice_question and st.session_state.voice_question != question:
+        st.session_state.auto_run_search = True
+        st.session_state.question_input = st.session_state.voice_question
+
     if st.session_state.auto_run_search:
         st.session_state.auto_run_search = False
-        if not code_input.strip() or not st.session_state.voice_question.strip():
+        if not code_input.strip() or not st.session_state.question_input.strip():
             st.error("Both code and question are required.")
         elif not code_matches_language(code_input, programming_language):
             st.error(f"Language mismatch. Please check your code and language selection.")
         else:
             with st.spinner("Running Semantic Search..."):
-                answer = call_groq_api(f"{st.session_state.voice_question}\n\nCode:\n{code_input}")
+                answer = call_groq_api(f"{st.session_state.question_input}\n\nCode:\n{code_input}")
                 st.success("Answer:")
                 st.write(answer)