Update app.py

app.py

@@ -3,7 +3,6 @@ from openai import OpenAI
 import time
 import datetime
 import os
-from streamlit_extras.stylable_container import stylable_container
 
 # Securely get credentials
 generated_user = os.getenv("User")
@@ -15,6 +14,26 @@ st.set_page_config(page_title="Carfind.co.za AI Assistant", layout="wide")
 st.title("🚗 Carfind.co.za AI Assistant")
 st.caption("Chat with Carfind.co.za and find your next car fast")
 
+# Custom CSS for scrollable chat container
+st.markdown(
+    """
+    <style>
+    .chat-container {
+        overflow-y: auto;
+        max-height: 70vh;
+        padding: 10px;
+        border-radius: 10px;
+        border: 1px solid #444;
+        background-color: #111;
+    }
+    .element-container:has(> .stChatMessage) {
+        margin-bottom: 20px;
+    }
+    </style>
+    """,
+    unsafe_allow_html=True
+)
+
 # Initialize authentication state
 if "authenticated" not in st.session_state:
     st.session_state.authenticated = False
@@ -41,13 +60,15 @@ else:
     if "messages" not in st.session_state:
         st.session_state["messages"] = []
 
-    # Chat display with smooth scrolling
-    with stylable_container("chat-container", css="overflow-y: auto; height: 70vh; padding: 10px;"):
-        for message in st.session_state.messages:
+    # Scrollable chat display
+    with st.container():
+        st.markdown('<div class="chat-container">', unsafe_allow_html=True)
+        for message in st.session_state["messages"]:
             with st.chat_message(message["role"]):
                 st.markdown(message["content"], unsafe_allow_html=True)
+        st.markdown('</div>', unsafe_allow_html=True)
 
-    # Input row with Clear button as an icon
+    # Input and clear button
     col_input, col_clear = st.columns([8, 1])
 
     with col_input:
@@ -112,4 +133,4 @@ else:
                 st.error(f"An error occurred: {str(e)}")
 
     else:
-        st.error("OpenAI key not found. Please ensure it is set as a Hugging Face secret.")
+        st.error("OpenAI key not found. Please ensure it is set as a Hugging Face secret.")