Update app.py

app.py

@@ -91,69 +91,39 @@ def main():
         initial_sidebar_state="expanded"
     )
 
-    # Custom CSS for professional design
+    # Custom CSS for better design
     st.markdown(
         """
         <style>
-        body {
-            font-family: 'Arial', sans-serif;
-            background-color: #f4f6f9;
-            color: #333;
-        }
         .main {
-            background-color: #fff;
-            padding: 30px;
+            background-color: #f0f2f6;
+            padding: 20px;
             border-radius: 10px;
-            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
         }
         .sidebar .sidebar-content {
             background-color: #2c3e50;
             color: white;
-            padding: 20px;
-            border-radius: 10px;
         }
         .sidebar .sidebar-content .title {
             font-size: 24px;
             font-weight: bold;
-            margin-bottom: 20px;
         }
         .sidebar .sidebar-content .button {
             background-color: #3498db;
             border: none;
             color: white;
-            padding: 12px 20px;
+            padding: 10px;
             text-align: center;
             text-decoration: none;
             display: inline-block;
             font-size: 16px;
-            margin: 8px 0;
+            margin: 4px 2px;
             cursor: pointer;
-            border-radius: 8px;
-            transition: background-color 0.3s ease;
+            border-radius: 16px;
         }
         .sidebar .sidebar-content .button:hover {
             background-color: #2980b9;
         }
-        .chat-message {
-            display: flex;
-            align-items: center;
-            padding: 15px;
-            border-radius: 10px;
-            margin-bottom: 10px;
-            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-        }
-        .chat-message img {
-            width: 40px;
-            height: 40px;
-            border-radius: 50%;
-            margin-right: 10px;
-        }
-        .user-message {
-            background-color: #d6eaf8;
-        }
-        .assistant-message {
-            background-color: #d5dbdb;
-        }
         </style>
         """,
         unsafe_allow_html=True
@@ -189,25 +159,26 @@ def main():
 
     # Display chat messages
     for message in st.session_state.messages:
-        css_class = "user-message" if message["role"] == "user" else "assistant-message"
-        icon = "user_icon.png" if message["role"] == "user" else "assistant_icon.png"
-        st.markdown(f'<div class="chat-message {css_class}"><img src="{icon}" alt="icon"><div>{message["content"]}</div></div>', unsafe_allow_html=True)
+        with st.chat_message(message["role"]):
+            st.write(message["content"])
 
     # Chat input
     if prompt := st.chat_input():
         st.session_state.messages.append({"role": "user", "content": prompt})
-        st.markdown(f'<div class="chat-message user-message"><img src="user_icon.png" alt="User"><div>{prompt}</div></div>', unsafe_allow_html=True)
+        with st.chat_message("user"):
+            st.write(prompt)
 
         # Generate bot response
         if st.session_state.messages[-1]["role"] != "assistant":
             try:
-                with st.spinner("Thinking..."):
-                    response = user_input(prompt)
-                    if response:
-                        full_response = ''.join(response['output_text'])
-                        st.markdown(f'<div class="chat-message assistant-message"><img src="assistant_icon.png" alt="Assistant"><div>{full_response}</div></div>', unsafe_allow_html=True)
-                        message = {"role": "assistant", "content": full_response}
-                        st.session_state.messages.append(message)
+                with st.chat_message("assistant"):
+                    with st.spinner("Thinking..."):
+                        response = user_input(prompt)
+                        if response:
+                            full_response = ''.join(response['output_text'])
+                            st.write(full_response)
+                            message = {"role": "assistant", "content": full_response}
+                            st.session_state.messages.append(message)
             except RuntimeError as e:
                 st.error(str(e))