Refactor CSS handling: Move CSS styles to a separate file and update Streamlit app to use the new CSS variable

src/css_input.py

@@ -0,0 +1,120 @@
+# css_input.py
+# Contains the CSS for the Streamlit app as a string
+
+STREAMLIT_CSS = '''
+<style>
+    /* Force light theme - completely override dark mode */
+    html, body, .stApp, [data-testid="stAppViewContainer"] {
+        background-color: #ffffff !important;
+        color: #262730 !important;
+        color-scheme: light !important;
+    }
+    @media (prefers-color-scheme: dark) {
+        html, body, .stApp, [data-testid="stAppViewContainer"] {
+            background-color: #ffffff !important;
+            color: #262730 !important;
+        }
+    }
+    * {
+        color-scheme: light !important;
+    }
+    :root {
+        --primary-color: #1976d2 !important;
+        --background-color: #ffffff !important;
+        --secondary-background-color: #f0f2f6 !important;
+        --text-color: #262730 !important;
+        color-scheme: light !important;
+    }
+    .stApp *, .stApp {
+        color: #262730 !important;
+    }
+    section[data-testid="stSidebar"], .css-1d391kg {
+        background-color: #f0f2f6 !important;
+        color: #262730 !important;
+    }
+    .main .block-container {
+        background-color: #ffffff !important;
+        color: #262730 !important;
+    }
+    /* Blue theme for Streamlit with dark mode compatibility */
+    .stApp {
+        background: linear-gradient(135deg, #e3f2fd 0%, #f5f5f5 100%) !important;
+        color: #262730 !important;
+    }
+    .main-header {
+        text-align: center;
+        padding: 0.5rem 0.5rem 0.5rem 0.5rem;
+        border-bottom: 2px solid #1976d2;
+        margin-bottom: 1rem;
+        background: linear-gradient(135deg, #2196f3, #1976d2) !important;
+        color: white !important;
+        border-radius: 8px;
+        margin: -0.5rem -0.5rem 1rem -0.5rem;
+    }
+    .main-header h1, .main-header p {
+        color: white !important;
+    }
+    .chat-container {
+        max-height: 500px;
+        overflow-y: auto;
+        padding: 1rem;
+        border-radius: 10px;
+        background-color: #f9f9f9 !important;
+        border: 1px solid #e3f2fd;
+    }
+    .stChatMessage {
+        border-radius: 10px;
+        margin-bottom: 1rem;
+        color: #262730 !important;
+    }
+    .stChatMessage[data-testid="chat-message-user"] {
+        background-color: #e3f2fd !important;
+        border: 1px solid #2196f3;
+        color: #262730 !important;
+    }
+    .stChatMessage[data-testid="chat-message-assistant"] {
+        background-color: #ffffff !important;
+        border: 1px solid #1976d2;
+        color: #262730 !important;
+    }
+    .stChatMessage * {
+        color: #262730 !important;
+    }
+    .stButton > button {
+        background-color: #1976d2 !important;
+        color: white !important;
+        border: none;
+        border-radius: 5px;
+        transition: all 0.3s;
+    }
+    .stButton > button:hover {
+        background-color: #1565c0 !important;
+        color: white !important;
+    }
+    .css-1d391kg, [data-testid="stSidebar"] {
+        background-color: #e3f2fd !important;
+    }
+    .css-1d391kg *, [data-testid="stSidebar"] * {
+        color: #262730 !important;
+    }
+    .stSuccess {
+        background-color: #e8f5e8 !important;
+        border: 1px solid #4caf50;
+        border-radius: 5px;
+        color: #2e7d32 !important;
+    }
+    .stTextInput input, .stChatInput input {
+        background-color: white !important;
+        color: #262730 !important;
+        border: 1px solid #1976d2;
+    }
+    @media (prefers-color-scheme: dark) {
+        .stApp, .stApp * {
+            color: #262730 !important;
+        }
+        .stChatMessage * {
+            color: #262730 !important;
+        }
+    }
+</style>
+'''

src/streamlit_app.py

@@ -7,6 +7,7 @@ import csv
 from datetime import datetime
 from pypdf import PdfReader
 from chatbot_data.system_promt import system_prompt
+from css_input import STREAMLIT_CSS
 
 # Load environment variables
 load_dotenv()
@@ -22,170 +23,7 @@ st.set_page_config(
     initial_sidebar_state="collapsed"
 )
 
-# Force light theme and disable dark mode
-st.markdown("""
-<style>
-    /* Force light theme - completely override dark mode */
-    html, body, .stApp, [data-testid="stAppViewContainer"] {
-        background-color: #ffffff !important;
-        color: #262730 !important;
-        color-scheme: light !important;
-    }
-    
-    /* Override system dark mode preference */
-    @media (prefers-color-scheme: dark) {
-        html, body, .stApp, [data-testid="stAppViewContainer"] {
-            background-color: #ffffff !important;
-            color: #262730 !important;
-        }
-    }
-    
-    /* Force all elements to use light theme colors */
-    * {
-        color-scheme: light !important;
-    }
-    
-    /* Override Streamlit's dark theme CSS variables */
-    :root {
-        --primary-color: #1976d2 !important;
-        --background-color: #ffffff !important;
-        --secondary-background-color: #f0f2f6 !important;
-        --text-color: #262730 !important;
-        color-scheme: light !important;
-    }
-    
-    /* Ensure all text elements are dark colored */
-    .stApp *, .stApp {
-        color: #262730 !important;
-    }
-    
-    /* Force sidebar to light theme */
-    section[data-testid="stSidebar"], .css-1d391kg {
-        background-color: #f0f2f6 !important;
-        color: #262730 !important;
-    }
-    
-    /* Force main content area to light theme */
-    .main .block-container {
-        background-color: #ffffff !important;
-        color: #262730 !important;
-    }
-</style>
-""", unsafe_allow_html=True)
-
-# Custom CSS for blue theme and better styling
-st.markdown("""
-<style>
-    /* Blue theme for Streamlit with dark mode compatibility */
-    .stApp {
-        background: linear-gradient(135deg, #e3f2fd 0%, #f5f5f5 100%) !important;
-        color: #262730 !important;
-    }
-    
-    /* Header styling with dark mode override */
-    .main-header {
-        text-align: center;
-        padding: 1rem 0;
-        border-bottom: 3px solid #1976d2;
-        margin-bottom: 2rem;
-        background: linear-gradient(135deg, #2196f3, #1976d2) !important;
-        color: white !important;
-        border-radius: 10px;
-        margin: -1rem -1rem 2rem -1rem;
-        padding: 2rem 1rem;
-    }
-    
-    .main-header h1, .main-header p {
-        color: white !important;
-    }
-    
-    /* Chat container styling */
-    .chat-container {
-        max-height: 500px;
-        overflow-y: auto;
-        padding: 1rem;
-        border-radius: 10px;
-        background-color: #f9f9f9 !important;
-        border: 1px solid #e3f2fd;
-    }
-    
-    /* Chat message styling with dark mode override */
-    .stChatMessage {
-        border-radius: 10px;
-        margin-bottom: 1rem;
-        color: #262730 !important;
-    }
-    
-    /* User message styling */
-    .stChatMessage[data-testid="chat-message-user"] {
-        background-color: #e3f2fd !important;
-        border: 1px solid #2196f3;
-        color: #262730 !important;
-    }
-    
-    /* Assistant message styling */
-    .stChatMessage[data-testid="chat-message-assistant"] {
-        background-color: #ffffff !important;
-        border: 1px solid #1976d2;
-        color: #262730 !important;
-    }
-    
-    /* Ensure all text in chat messages is dark */
-    .stChatMessage * {
-        color: #262730 !important;
-    }
-    
-    /* Button styling */
-    .stButton > button {
-        background-color: #1976d2 !important;
-        color: white !important;
-        border: none;
-        border-radius: 5px;
-        transition: all 0.3s;
-    }
-    
-    .stButton > button:hover {
-        background-color: #1565c0 !important;
-        color: white !important;
-    }
-    
-    /* Sidebar styling with dark mode override */
-    .css-1d391kg, [data-testid="stSidebar"] {
-        background-color: #e3f2fd !important;
-    }
-    
-    /* Sidebar text color */
-    .css-1d391kg *, [data-testid="stSidebar"] * {
-        color: #262730 !important;
-    }
-    
-    /* Success message styling */
-    .stSuccess {
-        background-color: #e8f5e8 !important;
-        border: 1px solid #4caf50;
-        border-radius: 5px;
-        color: #2e7d32 !important;
-    }
-    
-    /* Input field styling */
-    .stTextInput input, .stChatInput input {
-        background-color: white !important;
-        color: #262730 !important;
-        border: 1px solid #1976d2;
-    }
-    
-    /* Dark mode media query override */
-    @media (prefers-color-scheme: dark) {
-        .stApp, .stApp * {
-            color: #262730 !important;
-        }
-        
-        .stChatMessage * {
-            color: #262730 !important;
-        }
-    }
-</style>
-""", unsafe_allow_html=True)
+st.markdown(STREAMLIT_CSS, unsafe_allow_html=True)
 
 def load_knowledge_base():
     """Load and combine all knowledge base files"""
@@ -375,8 +213,8 @@ def main():
     if not st.session_state.messages:
         welcome_msg = """👋 **Welcome to Blue Bean Data!** 
 
-I'm your AI assistant for data solutions. Ask me about:
-• Data consulting & strategy
+I'm your AI assistant for data solutions. Ask me about:  
+• Data consulting & strategy  
 • BI dashboards & automation  
 • Our team & expertise
 
@@ -390,7 +228,7 @@ How can I help you today?"""
             st.markdown(message["content"])
     
     # Chat input
-    if prompt := st.chat_input("How can I help you with your data challenges?"):
+    if prompt := st.chat_input("Type your question here..."):
         # Add user message to chat history
         st.session_state.messages.append({"role": "user", "content": prompt})