Update app.py

app.py

@@ -167,23 +167,27 @@ elif page == "Semantic Search":
         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)
-    question_html = """
+    # Custom input with mic button (HTML/JS) - replaces st.text_input
+    question_html = f"""
     <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;
         font-size: 16px;
         box-sizing: border-box;
-    }
-    .mic-btn {
+        border: 1px solid #ccc;
+        border-radius: 4px;
+    }}
+    .mic-btn {{
         position: absolute;
         right: 5px;
         top: 4px;
@@ -192,65 +196,66 @@ 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="{value}" />
+        <input id="questionInput" class="input-mic" type="text" placeholder="Ask a question about your code" value="{st.session_state['voice_question']}" />
         <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}, '*');
+            window.parent.postMessage({{isStreamlitMessage: true, type: 'streamlit:setComponentValue', value: transcript}}, '*');
             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}, '*');
-    }
+    input.onchange = function() {{
+        window.parent.postMessage({{isStreamlitMessage: true, type: 'streamlit:setComponentValue', value: input.value}}, '*');
+    }}
     </script>
-    """.replace("{value}", st.session_state.get('voice_question', ''))
+    """
 
     # Render the custom input+mic
-    question_value = components.html(question_html, height=60)
+    components.html(question_html, height=60)
 
-    # Fallback for Streamlit's JS->Python communication
-    # For demo, use a text_input to allow manual typing as well
-    question = st.text_input("Ask a question about your code", value=st.session_state.get('voice_question', ''), 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('voice_question', ''):
+    if question and question != st.session_state.get('last_validated_question', ''):
         if is_coding_question(question):
-            st.session_state['voice_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)