Update app.py

app.py

@@ -91,28 +91,32 @@ def main():
         initial_sidebar_state="expanded"
     )
 
-    # Custom CSS for better design
+    # Custom CSS for professional design
     st.markdown(
         """
         <style>
         .main {
-            background-color: #f0f2f6;
+            background-color: #f7f9fc;
             padding: 20px;
             border-radius: 10px;
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
         }
         .sidebar .sidebar-content {
-            background-color: #2c3e50;
-            color: white;
+            background-color: #ffffff;
+            color: #2c3e50;
+            padding: 20px;
+            border-radius: 10px;
         }
         .sidebar .sidebar-content .title {
             font-size: 24px;
             font-weight: bold;
+            margin-bottom: 10px;
         }
         .sidebar .sidebar-content .button {
             background-color: #3498db;
             border: none;
             color: white;
-            padding: 10px;
+            padding: 10px 20px;
             text-align: center;
             text-decoration: none;
             display: inline-block;
@@ -124,6 +128,22 @@ def main():
         .sidebar .sidebar-content .button:hover {
             background-color: #2980b9;
         }
+        .sidebar .sidebar-content .file-uploader {
+            margin-bottom: 20px;
+        }
+        .chat-message {
+            background-color: #ffffff;
+            padding: 15px;
+            border-radius: 10px;
+            margin-bottom: 10px;
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+        }
+        .user-message {
+            background-color: #e0f7fa;
+        }
+        .assistant-message {
+            background-color: #e8eaf6;
+        }
         </style>
         """,
         unsafe_allow_html=True
@@ -133,8 +153,8 @@ def main():
     with st.sidebar:
         st.title("Menu")
         pdf_docs = st.file_uploader(
-            "Upload your PDF files", accept_multiple_files=True)
-        if st.button("Submit & Process", key="submit_button"):
+            "Upload your PDF files", accept_multiple_files=True, className="file-uploader")
+        if st.button("Submit & Process", key="submit_button", className="button"):
             if pdf_docs:
                 try:
                     with st.spinner("Processing..."):
@@ -150,7 +170,7 @@ def main():
     # Main content area for displaying chat messages
     st.title("Gemini PDF Chatbot")
     st.write("Welcome to the Gemini PDF Chatbot! Upload your PDFs and ask questions.")
-    st.sidebar.button('Clear Chat History', on_click=clear_chat_history)
+    st.sidebar.button('Clear Chat History', on_click=clear_chat_history, className="button")
 
     # Initialize chat history
     if "messages" not in st.session_state:
@@ -159,19 +179,20 @@ def main():
 
     # Display chat messages
     for message in st.session_state.messages:
-        with st.chat_message(message["role"]):
+        css_class = "user-message" if message["role"] == "user" else "assistant-message"
+        with st.container().className(f"chat-message {css_class}"):
             st.write(message["content"])
 
     # Chat input
     if prompt := st.chat_input():
         st.session_state.messages.append({"role": "user", "content": prompt})
-        with st.chat_message("user"):
+        with st.container().className("chat-message user-message"):
             st.write(prompt)
 
         # Generate bot response
         if st.session_state.messages[-1]["role"] != "assistant":
             try:
-                with st.chat_message("assistant"):
+                with st.container().className("chat-message assistant-message"):
                     with st.spinner("Thinking..."):
                         response = user_input(prompt)
                         if response:
@@ -184,3 +205,4 @@ def main():
 
 if __name__ == "__main__":
     main()
+