Update app.py

app.py

@@ -29,10 +29,6 @@ st.markdown("""
     border: 2px solid #FF5722;
     border-radius: 8px;
 }
-.input-style {
-    border: 2px solid #4CAF50;
-    border-radius: 8px;
-}
 .stButton>button {
     border: 2px solid #FF5722 !important;
     border-radius: 8px !important;
@@ -42,29 +38,42 @@ st.markdown("""
     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';
-        });
+    // Function to apply focus styles
+    function applyFocusStyles() {
+        const inputElements = document.querySelectorAll('.stTextInput input');
         
-        inputElement.addEventListener('blur', function() {
-            this.style.border = '2px solid #4CAF50 !important';
+        inputElements.forEach(function(input) {
+            // Add focus event
+            input.addEventListener('focus', function() {
+                this.style.border = '2px solid #FF5722 !important';
+                this.style.borderWidth = '2px !important';
+                this.style.borderStyle = 'solid !important';
+                this.style.borderColor = '#FF5722 !important';
+            });
+            
+            // Add blur event
+            input.addEventListener('blur', function() {
+                this.style.border = '2px solid #4CAF50 !important';
+                this.style.borderWidth = '2px !important';
+                this.style.borderStyle = 'solid !important';
+                this.style.borderColor = '#4CAF50 !important';
+            });
         });
-        
-        // Set initial state
-        if (document.activeElement === inputElement) {
-            inputElement.style.border = '2px solid #FF5722 !important';
-        }
     }
+    
+    // Initial call
+    applyFocusStyles();
+    
+    // MutationObserver to handle dynamically added elements
+    const observer = new MutationObserver(function(mutations) {
+        applyFocusStyles();
+    });
+    
+    observer.observe(document.body, { childList: true, subtree: true });
 });
 </script>
 
@@ -115,25 +124,6 @@ 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:")
@@ -170,6 +160,6 @@ if st.button("Get Answer") or st.session_state.submit_clicked:
 st.markdown("---")
 st.markdown("""
 ### About this app
-This application uses a Retrieval-Augmented Generation (RAG) system to answer questions about spirituality based on Indian spiritual texts.
+This application uses a Retrieval-Augmented Generation (RAG) system to answer questions about Indian spiritual texts.
 It searches through a database of texts to find relevant passages and generates answers based on those passages.
 """)