Update app.py

app.py

@@ -158,70 +158,81 @@ 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
+    import streamlit.components.v1 as components
 
-    # Initialize session state variables for voice input and auto run
+    # Initialize session state variables
     if "voice_question" not in st.session_state:
         st.session_state.voice_question = ""
     if "auto_run_search" not in st.session_state:
         st.session_state.auto_run_search = False
 
-    # Container for question input and voice button
-    col_question, col_voice = st.columns([9,1])
+    # Layout: question input and mic button side by side
+    col_question, col_mic = 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:
-        # 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;
-
+    with col_mic:
+        # Microphone button and JS for voice recognition embedded via components.html
+        components.html(
+            """
+            <button id="mic-btn" style="height:38px; width:38px; font-size:20px;">🎤</button>
+            <script>
             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:
+            const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
+            if (!SpeechRecognition) {
+                alert("Speech Recognition not supported in this browser.");
+                micBtn.disabled = true;
+            } else {
+                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 by updating the input field
+                    const inputBox = window.parent.document.querySelector('input[data-key="question_input"]');
+                    if (inputBox) {
+                        inputBox.value = transcript;
+                        inputBox.dispatchEvent(new Event('input', { bubbles: true }));
+                    }
+                    micBtn.textContent = '🎤';
+                };
+
+                recognition.onerror = (event) => {
+                    console.error('Speech recognition error', event.error);
+                    micBtn.textContent = '🎤';
+                };
+            }
+            </script>
+            """,
+            height=50,
+            scrolling=False,
+        )
+
+    # Update session state voice_question if question input changed manually or by voice
+    if question != st.session_state.voice_question:
+        st.session_state.voice_question = question
         st.session_state.auto_run_search = True
-        st.session_state.question_input = st.session_state.voice_question
 
+    # Automatically run semantic search if flag is set
     if st.session_state.auto_run_search:
         st.session_state.auto_run_search = False
-        if not code_input.strip() or not st.session_state.question_input.strip():
+        if not code_input.strip() or not st.session_state.voice_question.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.question_input}\n\nCode:\n{code_input}")
+                answer = call_groq_api(f"{st.session_state.voice_question}\n\nCode:\n{code_input}")
                 st.success("Answer:")
                 st.write(answer)
 
-    # Also keep the manual button for fallback
+    # Manual button fallback
     if st.button("Run Semantic Search"):
         if not code_input.strip() or not question.strip():
             st.error("Both code and question are required.")