Update app.py

app.py

@@ -6,17 +6,16 @@ import time
 # Set page configuration as the first Streamlit command
 st.set_page_config(page_title="Evo", page_icon="🤖", layout="wide")
 
-# Advanced CSS for dark mode UI
+# Advanced CSS for a polished UI
 st.markdown("""
     <style>
-    /* Global Styles for Dark Mode */
+    /* Global Styles */
     body {
         font-family: 'Arial', sans-serif;
-        background-color: #1e1e2f;
+        background-color: #f5f6fa;
     }
     .stApp {
-        background-color: #1e1e2f;
-        color: #d8dee9;
+        background-color: #f5f6fa;
     }
     
     /* Chat Container */
@@ -25,45 +24,45 @@ st.markdown("""
         overflow-y: auto;
         border-radius: 15px;
         padding: 20px;
-        background: linear-gradient(135deg, #2e2e3f, #252535);
-        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+        background: linear-gradient(135deg, #ffffff, #f0f2f5);
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
         margin: 20px 0;
     }
     
     /* Messages */
     .user-message {
         background: #4a90e2;
-        color: #ffffff;
+        color: white;
         padding: 12px 18px;
         border-radius: 15px 15px 0 15px;
         margin: 10px 0;
         max-width: 70%;
         align-self: flex-end;
-        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
     }
     .assistant-message {
-        background: #3b3b4f;
-        color: #d8dee9;
+        background: #eceff1;
+        color: #333;
         padding: 12px 18px;
         border-radius: 15px 15px 15px 0;
         margin: 10px 0;
         max-width: 70%;
         align-self: flex-start;
-        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
     }
     
     /* Sidebar */
     .sidebar .sidebar-content {
-        background: #252535;
-        color: #d8dee9;
+        background: #2c3e50;
+        color: white;
         border-radius: 10px;
         padding: 20px;
     }
     .sidebar-btn {
         width: 100%;
         margin: 8px 0;
-        background: #5e81ac;
-        color: #eceff4;
+        background: #3498db;
+        color: white;
         border: none;
         padding: 10px;
         border-radius: 8px;
@@ -71,20 +70,20 @@ st.markdown("""
         transition: background 0.3s ease;
     }
     .sidebar-btn:hover {
-        background: #4c669f;
+        background: #2980b9;
     }
     
     /* Title and Header */
     .title {
         font-size: 2.5em;
-        color: #eceff4;
+        color: #2c3e50;
         text-align: center;
         margin-top: 20px;
-        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
+        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
     }
     .subtitle {
         font-size: 1.2em;
-        color: #81a1c1;
+        color: #7f8c8d;
         text-align: center;
         margin-bottom: 30px;
     }
@@ -93,14 +92,8 @@ st.markdown("""
     .stTextInput > div > input {
         border-radius: 20px;
         padding: 10px 15px;
-        border: 1px solid #4b5e7e;
-        background-color: #2e2e3f;
-        color: #d8dee9;
-        box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
-    }
-    .stTextInput > div > input:focus {
-        border-color: #5e81ac;
-        outline: none;
+        border: 1px solid #dcdcdc;
+        box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
     }
     
     /* Feedback Buttons */
@@ -108,14 +101,12 @@ st.markdown("""
         padding: 5px 10px;
         margin: 5px;
         border-radius: 50%;
-        background: #4b5e7e;
-        color: #eceff4;
+        background: #ecf0f1;
         cursor: pointer;
         transition: transform 0.2s ease;
     }
     .feedback-btn:hover {
         transform: scale(1.1);
-        background: #5e81ac;
     }
     </style>
 """, unsafe_allow_html=True)
@@ -154,11 +145,11 @@ if 'feedback' not in st.session_state:
 
 # Application title and description
 st.markdown('<h1 class="title">Evo: Your AI Networking Assistant 🤖</h1>', unsafe_allow_html=True)
-st.markdown('<p class="subtitle">Explore networking topics in dark mode elegance</p>', unsafe_allow_html=True)
+st.markdown('<p class="subtitle">Explore networking topics with a cutting-edge AI companion</p>', unsafe_allow_html=True)
 
 # Sidebar with advanced suggested questions
 with st.sidebar:
-    st.markdown('<h2 style="color: #eceff4;">Suggested Questions</h2>', unsafe_allow_html=True)
+    st.markdown('<h2 style="color: white;">Suggested Questions</h2>', unsafe_allow_html=True)
     categories = {
         "Basics": ["What is TCP/IP?", "How does DNS work?", "What is an IP address?"],
         "Advanced": ["Explain VLANs", "What is SD-WAN?", "How does BGP work?"],
@@ -189,7 +180,7 @@ for i, message in enumerate(st.session_state.messages):
                 if st.button("👎", key=f"down_{i}", help="Dislike this response", type="secondary"):
                     st.session_state.feedback[i] = "negative"
             if i in st.session_state.feedback:
-                st.markdown(f'<p style="color: #81a1c1; font-size: 0.9em;">Feedback: {"Liked" if st.session_state.feedback[i] == "positive" else "Disliked"}</p>', unsafe_allow_html=True)
+                st markdown(f'<p style="color: #7f8c8d; font-size: 0.9em;">Feedback: {"Liked" if st.session_state.feedback[i] == "positive" else "Disliked"}</p>', unsafe_allow_html=True)
 st.markdown('</div>', unsafe_allow_html=True)
 
 # Function to handle queries (user input or suggestions)