Update app.py

app.py

@@ -2,7 +2,6 @@ import streamlit as st
 import difflib
 import requests
 import datetime
-import streamlit.components.v1 as components
 
 # --- CONFIG ---
 GROQ_API_KEY = st.secrets.get('GROQ_API_KEY', 'YOUR_GROQ_API_KEY')
@@ -163,22 +162,15 @@ elif page == "Semantic Search":
     st.caption("Example questions:")
     st.write(", ".join(EXAMPLE_QUESTIONS))
 
-    if 'voice_question' not in st.session_state:
-        st.session_state['voice_question'] = ''
-    if 'run_semantic_search' not in st.session_state:
-        st.session_state['run_semantic_search'] = False
-    if 'last_validated_question' not in st.session_state:
-        st.session_state['last_validated_question'] = ''
-
-    # Custom input with mic button (HTML/JS) - replaces st.text_input
-    question_html = f"""
+    # --- Custom input with mic button (HTML/JS) ---
+    st.markdown("""
     <style>
-    .input-mic-container {{
+    .input-mic-container {
         position: relative;
         width: 100%;
         max-width: 500px;
-    }}
-    .input-mic {{
+    }
+    .input-mic {
         width: 100%;
         padding-right: 40px;
         height: 38px;
@@ -186,8 +178,8 @@ elif page == "Semantic Search":
         box-sizing: border-box;
         border: 1px solid #ccc;
         border-radius: 4px;
-    }}
-    .mic-btn {{
+    }
+    .mic-btn {
         position: absolute;
         right: 5px;
         top: 4px;
@@ -196,75 +188,60 @@ elif page == "Semantic Search":
         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" value="{st.session_state['voice_question']}" />
+        <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) {{
+    if ('webkitSpeechRecognition' in window) {
         recognition = new webkitSpeechRecognition();
         recognition.lang = 'en-US';
         recognition.continuous = false;
         recognition.interimResults = false;
-        micBtn.onclick = function(e) {{
+        micBtn.onclick = function(e) {
             e.preventDefault();
             recognition.start();
             micBtn.textContent = '🎙️';
-        }};
-        recognition.onresult = function(event) {{
+        };
+        recognition.onresult = function(event) {
             const transcript = event.results[0][0].transcript;
             input.value = transcript;
-            window.parent.postMessage({{isStreamlitMessage: true, type: 'streamlit:setComponentValue', value: transcript}}, '*');
+            // Copy to Streamlit input
+            const streamlitInput = window.parent.document.querySelector('input[data-testid="stTextInput"]');
+            if (streamlitInput) {
+                streamlitInput.value = transcript;
+                streamlitInput.dispatchEvent(new Event('input', { bubbles: true }));
+            }
             micBtn.textContent = '🎤';
-        }};
-        recognition.onerror = function() {{
+        };
+        recognition.onerror = function() {
             micBtn.textContent = '🎤';
-        }};
-        recognition.onend = function() {{
+        };
+        recognition.onend = function() {
             micBtn.textContent = '🎤';
-        }};
-    }} else {{
+        };
+    } else {
         micBtn.disabled = true;
         micBtn.title = 'Voice not supported';
-    }}
-    // Send value on input change
-    input.onchange = function() {{
-        window.parent.postMessage({{isStreamlitMessage: true, type: 'streamlit:setComponentValue', value: input.value}}, '*');
-    }}
+    }
     </script>
-    """
+    """, unsafe_allow_html=True)
 
-    # Render the custom input+mic
-    components.html(question_html, height=60)
+    # The actual Streamlit input (for Python to read)
+    question = st.text_input("Ask a question about your code", key="sem_question")
 
-    # Get the value from Streamlit's custom component
-    # For demo, use session_state (in production, use a custom Streamlit component for robust JS->Python)
-    question = st.session_state.get('voice_question', '')
-
-    # If the value is updated, validate and set
-    if question and question != st.session_state.get('last_validated_question', ''):
-        if is_coding_question(question):
-            st.session_state['last_validated_question'] = question
-            st.session_state['run_semantic_search'] = True
-            st.success(f"Question recognized: {question}")
-        else:
-            st.warning("Please ask a relevant question.")
-            st.session_state['voice_question'] = ''
-            st.session_state['last_validated_question'] = ''
-
-    run_btn = st.button("Run Semantic Search")
-    run_search = run_btn or st.session_state.get('run_semantic_search', False)
-    if run_search:
-        st.session_state['run_semantic_search'] = False
+    if st.button("Run Semantic Search"):
         if not code_input.strip() or not 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.")
+        elif not is_coding_question(question):
+            st.warning("Please ask a relevant question.")
         else:
             with st.spinner("Running Semantic Search..."):
                 answer = call_groq_api(f"{question}\n\nCode:\n{code_input}")