Update app.py

app.py

@@ -44,32 +44,46 @@ Every response must be clear, insightful, and guide the user toward either:
 # 🎨 Streamlit UI Customization
 st.set_page_config(page_title="Eau Claire AI Chatbot", page_icon="🤖", layout="centered")
 
-
-# ✅ Remove the white bar & Streamlit header
+# ✅ Custom Styling for Better Readability
 st.markdown(
     """
     <style>
-        /* Remove Streamlit top padding */
-        .block-container {
-            padding-top: 0px;
-        }
-
-        /* Hide the default header */
+        .block-container { padding-top: 0px; }
         header { visibility: hidden; }
+        .stApp { padding-top: 0px; }
         
-        /* Optional: Remove white gap */
-        .stApp {
-            padding-top: 0px;
+        /* Center the logo */
+        .logo-container {
+            display: flex;
+            justify-content: center;
+            margin-bottom: 10px;
+        }
+
+        /* Chat styling */
+        .chat-container {
+            width: 100%;
+            max-width: 600px;
+            margin: auto;
+        }
+
+        .user-message {
+            background-color: #0077cc;
+            color: white;
+            padding: 10px;
+            border-radius: 10px;
+            text-align: right;
+            margin: 5px 0;
+        }
+
+        .ai-message {
+            background-color: #333;
+            color: white;
+            padding: 10px;
+            border-radius: 10px;
+            text-align: left;
+            margin: 5px 0;
         }
-    </style>
-    """,
-    unsafe_allow_html=True
-)
 
-# ✅ Styled Chatbot Title (Fix)
-st.markdown(
-    """
-    <style>
         .chat-title {
             font-size: 24px;
             font-weight: bold;
@@ -78,23 +92,29 @@ st.markdown(
             margin-bottom: 15px;
         }
     </style>
-    <div class="chat-title">Eau Claire AI - AI Consulting Chatbot</div>
     """,
     unsafe_allow_html=True
 )
 
-st.markdown('<div class="chat-container">', unsafe_allow_html=True)
+# ✅ Display Eau Cl•AI•re Logo (Change URL if needed)
+logo_url = "https://huggingface.co/spaces/EauClaireAI/Chatbot/resolve/main/Eau%20Cl•AI•re.png"
+st.markdown(f'<div class="logo-container"><img src="{logo_url}" width="200"></div>', unsafe_allow_html=True)
+
+# ✅ Styled Chatbot Title
+st.markdown('<div class="chat-title">Eau Claire AI - AI Consulting Chatbot</div>', unsafe_allow_html=True)
 
 # ✅ Initialize chat history in session state
 if "messages" not in st.session_state:
-    st.session_state.messages = [{"role": "system", "content": system_prompt}]
+    st.session_state.messages = []
 
-# ✅ Display chat history
+# ✅ Display chat history with formatting
+st.markdown('<div class="chat-container">', unsafe_allow_html=True)
 for message in st.session_state.messages:
     if message["role"] == "user":
-        st.write(f"**You:** {message['content']}")
+        st.markdown(f'<div class="user-message">{message["content"]}</div>', unsafe_allow_html=True)
     elif message["role"] == "assistant":
-        st.write(f"**Bot:** {message['content']}")
+        st.markdown(f'<div class="ai-message">{message["content"]}</div>', unsafe_allow_html=True)
+st.markdown('</div>', unsafe_allow_html=True)
 
 # ✅ User Input with "Enter" Key to Send
 user_input = st.text_input("Type your message here:", key="input", on_change=lambda: st.session_state.update({"submit": True}))
@@ -110,7 +130,7 @@ if st.session_state.get("submit") and user_input:
         # ✅ Generate AI response with full chat history
         response = client.chat.completions.create(
             model="gpt-3.5-turbo",
-            messages=st.session_state.messages
+            messages=[{"role": "system", "content": system_prompt}] + st.session_state.messages
         )
 
         bot_reply = response.choices[0].message.content.strip()
@@ -118,7 +138,7 @@ if st.session_state.get("submit") and user_input:
         # ✅ Append AI response to chat history
         st.session_state.messages.append({"role": "assistant", "content": bot_reply})
 
-        # ✅ Display updated chat messages
+        # ✅ Refresh UI
         st.rerun()
 
     except Exception as e: