Update app.py

app.py

@@ -18,6 +18,10 @@ st.set_page_config(
     initial_sidebar_state="expanded"
 )
 
+# Initialize dark mode state
+if 'dark_mode' not in st.session_state:
+    st.session_state.dark_mode = False
+
 # Define personality questions - reduced to general ones
 PERSONALITY_QUESTIONS = [
     "What is [name]'s personality like?",
@@ -27,11 +31,266 @@ PERSONALITY_QUESTIONS = [
     "Tell me about [name]"
 ]
 
-# Enhanced CSS styling
-st.markdown("""
+# Enhanced CSS styling with dark mode support
+def get_css_styles():
+    if st.session_state.dark_mode:
+        return """
 <style>
+    /* Dark Mode Styles */
+    .stApp {
+        background: #0e1117;
+        color: #fafafa;
+    }
+    
+    .main .block-container {
+        max-width: 900px;
+    }
+    
+    #MainMenu {visibility: hidden;}
+    footer {visibility: hidden;}
+    header {visibility: hidden;}
+    .stDeployButton {display: none;}
+    
+    /* Sidebar dark mode */
+    .css-1d391kg {
+        background-color: #1e1e1e !important;
+    }
+    
+    .css-1cypcdb {
+        background-color: #1e1e1e !important;
+    }
+    
+    /* Chat messages dark mode */
+    .stChatMessage {
+        background-color: #262730 !important;
+        border: 1px solid #404040 !important;
+    }
+    
+    /* Input fields dark mode */
+    .stTextInput > div > div > input {
+        background-color: #262730 !important;
+        color: #fafafa !important;
+        border-color: #404040 !important;
+    }
+    
+    .stTextArea > div > div > textarea {
+        background-color: #262730 !important;
+        color: #fafafa !important;
+        border-color: #404040 !important;
+    }
+    
+    .model-id {
+        color: #4ade80;
+        font-family: monospace;
+    }
+    
+    .model-attribution {
+        color: #4ade80;
+        font-size: 0.8em;
+        font-style: italic;
+    }
+    
+    .rag-attribution {
+        color: #a78bfa;
+        font-size: 0.8em;
+        font-style: italic;
+        background: #1f2937;
+        padding: 8px;
+        border-radius: 4px;
+        border-left: 3px solid #a78bfa;
+        margin-top: 8px;
+    }
+    
+    /* Dark mode toggle button */
+    .dark-mode-toggle {
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        color: white;
+        padding: 8px 16px;
+        margin: 4px 0;
+        border-radius: 8px;
+        border: none;
+        cursor: pointer;
+        transition: all 0.3s ease;
+        font-size: 0.9em;
+        width: 100%;
+        text-align: center;
+    }
+    
+    .dark-mode-toggle:hover {
+        transform: translateY(-1px);
+        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
+    }
+    
+    /* NEW CHAT BUTTON - Black background for dark mode */
+    .stButton > button[kind="primary"] {
+        background-color: #1f2937 !important;
+        border-color: #374151 !important;
+        color: #fafafa !important;
+    }
+    
+    .stButton > button[kind="primary"]:hover {
+        background-color: #374151 !important;
+        border-color: #4b5563 !important;
+        color: #fafafa !important;
+    }
+    
+    /* Regular buttons dark mode */
+    .stButton > button {
+        background-color: #374151 !important;
+        border-color: #4b5563 !important;
+        color: #fafafa !important;
+    }
+    
+    .stButton > button:hover {
+        background-color: #4b5563 !important;
+        border-color: #6b7280 !important;
+        color: #fafafa !important;
+    }
+    
+    /* Personality Questions Styling Dark Mode */
+    .personality-question {
+        background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
+        color: white;
+        padding: 8px 12px;
+        margin: 4px 0;
+        border-radius: 8px;
+        border: none;
+        cursor: pointer;
+        transition: all 0.3s ease;
+        font-size: 0.85em;
+        width: 100%;
+        text-align: left;
+    }
+    
+    .personality-question:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 4px 12px rgba(79, 70, 229, 0.4);
+    }
+    
+    .personality-section {
+        background: #1f2937;
+        color: #e5e7eb;
+        padding: 12px;
+        border-radius: 8px;
+        border-left: 4px solid #4f46e5;
+        margin: 10px 0;
+    }
+    
+    /* Chat history styling dark mode */
+    .chat-history-item {
+        padding: 8px 12px;
+        margin: 4px 0;
+        border-radius: 8px;
+        border: 1px solid #374151;
+        background: #1f2937;
+        color: #e5e7eb;
+        cursor: pointer;
+        transition: all 0.2s;
+    }
+    
+    .chat-history-item:hover {
+        background: #374151;
+        border-color: #4ade80;
+    }
+    
+    .document-status {
+        background: #1e3a8a;
+        color: #bfdbfe;
+        padding: 10px;
+        border-radius: 8px;
+        border-left: 4px solid #3b82f6;
+        margin: 10px 0;
+    }
+    
+    .github-status {
+        background: #581c87;
+        color: #e9d5ff;
+        padding: 10px;
+        border-radius: 8px;
+        border-left: 4px solid #a78bfa;
+        margin: 10px 0;
+    }
+    
+    .rag-stats {
+        background: #581c87;
+        color: #e9d5ff;
+        padding: 8px;
+        border-radius: 6px;
+        font-size: 0.85em;
+    }
+    
+    /* Expander dark mode */
+    .streamlit-expanderHeader {
+        background-color: #1f2937 !important;
+        color: #fafafa !important;
+    }
+    
+    .streamlit-expanderContent {
+        background-color: #111827 !important;
+        color: #fafafa !important;
+    }
+    
+    /* Checkbox dark mode */
+    .stCheckbox {
+        color: #fafafa !important;
+    }
+    
+    /* Select box dark mode */
+    .stSelectbox > div > div {
+        background-color: #262730 !important;
+        color: #fafafa !important;
+    }
+    
+    /* File uploader dark mode */
+    .stFileUploader {
+        background-color: #1f2937 !important;
+        border-color: #374151 !important;
+    }
+    
+    /* Progress bar dark mode */
+    .stProgress .st-bo {
+        background-color: #374151 !important;
+    }
+    
+    /* Success/Error/Warning messages dark mode */
+    .stSuccess {
+        background-color: #064e3b !important;
+        color: #6ee7b7 !important;
+    }
+    
+    .stError {
+        background-color: #7f1d1d !important;
+        color: #fca5a5 !important;
+    }
+    
+    .stWarning {
+        background-color: #78350f !important;
+        color: #fcd34d !important;
+    }
+    
+    .stInfo {
+        background-color: #1e3a8a !important;
+        color: #93c5fd !important;
+    }
+    
+    /* Caption text dark mode */
+    .caption {
+        color: #9ca3af !important;
+    }
+    
+    /* Divider dark mode */
+    hr {
+        border-color: #374151 !important;
+    }
+</style>
+"""
+    else:
+        return """
+<style>
+    /* Light Mode Styles */
     .stApp {
         background: white;
+        color: #000000;
     }
     
     .main .block-container {
@@ -65,6 +324,26 @@ st.markdown("""
         margin-top: 8px;
     }
     
+    /* Light mode toggle button */
+    .dark-mode-toggle {
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        color: white;
+        padding: 8px 16px;
+        margin: 4px 0;
+        border-radius: 8px;
+        border: none;
+        cursor: pointer;
+        transition: all 0.3s ease;
+        font-size: 0.9em;
+        width: 100%;
+        text-align: center;
+    }
+    
+    .dark-mode-toggle:hover {
+        transform: translateY(-1px);
+        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
+    }
+    
     /* NEW CHAT BUTTON - Black background */
     .stButton > button[kind="primary"] {
         background-color: #000000 !important;
@@ -146,7 +425,10 @@ st.markdown("""
         color: #4a148c;
     }
 </style>
-""", unsafe_allow_html=True)
+"""
+
+# Apply CSS styles
+st.markdown(get_css_styles(), unsafe_allow_html=True)
 
 # File paths
 HISTORY_FILE = "rag_chat_history.json"
@@ -765,9 +1047,18 @@ if "session_id" not in st.session_state:
 # Initialize RAG system
 rag_system = initialize_rag_system()
 
-# Header
-st.title("RAG Chat Flow ✘")
-st.caption("Ask questions about your documents with AI-powered retrieval")
+# Header with dark mode toggle
+col1, col2 = st.columns([4, 1])
+with col1:
+    st.title("RAG Chat Flow ✘")
+    st.caption("Ask questions about your documents with AI-powered retrieval")
+
+with col2:
+    # Dark mode toggle button
+    mode_text = "🌞 Light" if st.session_state.dark_mode else "🌙 Dark"
+    if st.button(mode_text, use_container_width=True):
+        st.session_state.dark_mode = not st.session_state.dark_mode
+        st.rerun()
 
 # Sidebar
 with st.sidebar:
@@ -778,6 +1069,17 @@ with st.sidebar:
     
     st.divider()
     
+    # Dark Mode Toggle in Sidebar too
+    st.header("🎨 Theme")
+    theme_status = "Dark Mode ✨" if st.session_state.dark_mode else "Light Mode ☀️"
+    if st.button(f"🔄 Switch to {'Light' if st.session_state.dark_mode else 'Dark'} Mode", use_container_width=True):
+        st.session_state.dark_mode = not st.session_state.dark_mode
+        st.rerun()
+    
+    st.info(f"Current: {theme_status}")
+    
+    st.divider()
+    
     # Personality Questions Section
     st.header("🎭 Personality Questions")
     
@@ -1261,4 +1563,5 @@ if rag_system and rag_system.model:
     token_mode = "🔥 Unlimited" if unlimited_tokens else "💰 Conservative"
     github_status = check_github_status()
     github_icon = "🟢" if github_status["status"] == "connected" else "🔴"
-    st.caption(f"📚 Knowledge Base: {doc_count} indexed chunks | 🔍 RAG System Active | {token_mode} Token Mode | {github_icon} GitHub {github_status['status'].title()}")
+    theme_icon = "🌙" if st.session_state.dark_mode else "☀️"
+    st.caption(f"📚 Knowledge Base: {doc_count} indexed chunks | 🔍 RAG System Active | {token_mode} Token Mode | {github_icon} GitHub {github_status['status'].title()} | {theme_icon} {theme_status}")