Update app.py

app.py

@@ -8,6 +8,14 @@ st.set_page_config(page_title="Indian Spiritual RAG")
 from rag_engine import process_query, load_model
 from utils import setup_all_auth
 
+# Define state for input box style
+if 'input_focused' not in st.session_state:
+    st.session_state.input_focused = False
+
+# Function to update input focus state
+def set_input_focus(focused):
+    st.session_state.input_focused = focused
+
 # Display title with custom styling
 st.markdown("""
 <style>
@@ -29,11 +37,37 @@ st.markdown("""
     border: 2px solid #FF5722 !important;
     border-radius: 8px !important;
 }
+/* Default style for input (green) */
 .stTextInput>div>div>input {
     border: 2px solid #4CAF50 !important;
     border-radius: 8px !important;
 }
+/* Style for active input (red) - will be applied with JavaScript */
 </style>
+
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+    // Get the input element
+    const inputElement = document.querySelector('.stTextInput input');
+    
+    if (inputElement) {
+        // Add event listeners
+        inputElement.addEventListener('focus', function() {
+            this.style.border = '2px solid #FF5722 !important';
+        });
+        
+        inputElement.addEventListener('blur', function() {
+            this.style.border = '2px solid #4CAF50 !important';
+        });
+        
+        // Set initial state
+        if (document.activeElement === inputElement) {
+            inputElement.style.border = '2px solid #FF5722 !important';
+        }
+    }
+});
+</script>
+
 <div class="main-title">Indian Spiritual Texts Q&A</div>
 """, unsafe_allow_html=True)
 
@@ -81,6 +115,25 @@ query = st.text_input(
     on_change=process_input
 )
 
+# Add JavaScript to change input border color
+st.markdown("""
+<script>
+// Get the input element
+const inputElement = document.querySelector('.stTextInput input');
+
+// Add event listeners for focus and blur
+if (inputElement) {
+    inputElement.addEventListener('focus', function() {
+        this.style.borderColor = '#FF5722';
+    });
+    
+    inputElement.addEventListener('blur', function() {
+        this.style.borderColor = '#4CAF50';
+    });
+}
+</script>
+""", unsafe_allow_html=True)
+
 # Display the current question if there is one
 if st.session_state.last_query:
     st.markdown("### Current Question:")