updated css related to theme + added a clear output button

app.py

@@ -269,18 +269,28 @@ def main():
                 st.error(f"Error loading knowledge base: {str(e)}")
                 st.session_state.vectorstore = None
 
-    # Custom CSS for modern look
+    # Custom CSS for modern look with dark theme compatibility
     st.markdown("""
     <style>
-    .main {background-color: #f8f9fa;}
+    /* Remove background overrides that conflict with dark theme */
     .stApp {max-width: 1200px; margin: 0 auto;}
-    .css-1v3fvcr {background-color: #f8f9fa;}
     .css-18e3th9 {padding-top: 2rem;}
+    
+    /* Button styling */
     .stButton>button {background-color: #3498db; color: white;}
     .stButton>button:hover {background-color: #2980b9;}
-    .source-box {background-color: #ffffff; border-radius: 5px; padding: 15px; margin-bottom: 10px; border-left: 5px solid #3498db;}
-    .metrics-box {background-color: #ffffff; border-radius: 5px; padding: 15px; margin-top: 20px;}
-    h1, h2, h3 {color: #2c3e50;}
+    
+    /* Chat message styling */
+    .chat-message {border-radius: 10px; padding: 10px; margin-bottom: 10px;}
+    .chat-message-user {background-color: rgba(52, 152, 219, 0.2); color: inherit;}
+    .chat-message-assistant {background-color: rgba(240, 240, 240, 0.2); color: inherit;}
+    
+    /* Source and metrics boxes with dark theme compatibility */
+    .source-box {background-color: rgba(255, 255, 255, 0.1); color: inherit; border-radius: 5px; padding: 15px; margin-bottom: 10px; border-left: 5px solid #3498db;}
+    .metrics-box {background-color: rgba(255, 255, 255, 0.1); color: inherit; border-radius: 5px; padding: 15px; margin-top: 20px;}
+    
+    /* Feature cards for homepage */
+    .feature-card {background-color: rgba(255, 255, 255, 0.1); color: inherit; border-radius: 10px; padding: 20px; height: 200px; box-shadow: 0 4px 6px rgba(0,0,0,0.1);}
     </style>
     """, unsafe_allow_html=True)
 
@@ -339,7 +349,7 @@ def main():
         col1, col2, col3 = st.columns(3)
         with col1:
             st.markdown("""
-            <div style='text-align:center;padding:20px;background-color:white;border-radius:10px;height:200px;'>
+            <div class='feature-card' style='text-align:center;'>
                 <img src="https://img.icons8.com/color/48/000000/search--v1.png">
                 <h3>Intelligent Retrieval</h3>
                 <p>Finds the most relevant clinical information from the MIMIC-IV-Ext dataset</p>
@@ -348,7 +358,7 @@ def main():
             
         with col2:
             st.markdown("""
-            <div style='text-align:center;padding:20px;background-color:white;border-radius:10px;height:200px;'>
+            <div class='feature-card' style='text-align:center;'>
                 <img src="https://img.icons8.com/color/48/000000/brain.png">
                 <h3>Advanced Reasoning</h3>
                 <p>Applies clinical knowledge to generate accurate diagnostic insights</p>
@@ -357,7 +367,7 @@ def main():
             
         with col3:
             st.markdown("""
-            <div style='text-align:center;padding:20px;background-color:white;border-radius:10px;height:200px;'>
+            <div class='feature-card' style='text-align:center;'>
                 <img src="https://img.icons8.com/color/48/000000/document.png">
                 <h3>Source Transparency</h3>
                 <p>Provides references to all clinical sources used in generating responses</p>
@@ -366,14 +376,23 @@ def main():
 
     # Chat interface
     elif st.session_state.page == 'chat':
-        st.markdown("<h1>Clinical Diagnostic Assistant</h1>", unsafe_allow_html=True)
+        # Header with clear button
+        col1, col2 = st.columns([3, 1])
+        with col1:
+            st.markdown("<h1>Clinical Diagnostic Assistant</h1>", unsafe_allow_html=True)
+        with col2:
+            # Add a clear button in the header
+            if st.button("🗑️ Clear Chat"):
+                st.session_state.chat_history = []
+                st.rerun()
+                
         st.markdown("Ask any clinical diagnostic question and get insights based on medical knowledge and patient cases.")
         
         # Display chat history
         for i, (query, response) in enumerate(st.session_state.chat_history):
-            st.markdown(f"<div style='background-color:#e6f7ff;padding:10px;border-radius:5px;margin-bottom:10px;'><b>🧑‍⚕️ You:</b> {query}</div>", unsafe_allow_html=True)
+            st.markdown(f"<div class='chat-message chat-message-user'><b>🧑‍⚕️ You:</b> {query}</div>", unsafe_allow_html=True)
             
-            st.markdown(f"<div style='background-color:#f0f0f0;padding:10px;border-radius:5px;margin-bottom:10px;'><b>🩺 DiReCT:</b> {response['answer']}</div>", unsafe_allow_html=True)
+            st.markdown(f"<div class='chat-message chat-message-assistant'><b>🩺 DiReCT:</b> {response['answer']}</div>", unsafe_allow_html=True)
             
             with st.expander("View Sources"):
                 for doc in response["context"]: