Update app.py

app.py

@@ -3,15 +3,16 @@ from openai import OpenAI
 import time
 import datetime
 import os
+from streamlit_extras.stylable_container import stylable_container
 
-# Securely get credentials from Hugging Face secrets
+# Securely get credentials
 generated_user = os.getenv("User")
 generated_password = os.getenv("Password")
 openai_key = os.getenv("openai_key")
 
-# Streamlit app configuration
-st.set_page_config(page_title="Carfind.co.za AI Assistant")
-st.title("Carfind.co.za AI Assistant")
+# Streamlit page config
+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")
 
 # Initialize authentication state
@@ -20,11 +21,10 @@ if "authenticated" not in st.session_state:
 
 # Login screen
 if not st.session_state.authenticated:
-    st.subheader("Login")
+    st.subheader("🔐 Login")
     username = st.text_input("Username")
     password = st.text_input("Password", type="password")
 
-    # Auto-login once both fields are filled
     if username and password:
         if username == generated_user and password == generated_password:
             st.session_state.authenticated = True
@@ -38,31 +38,30 @@ if not st.session_state.authenticated:
 else:
     st.divider()
 
-    # Display chat history
     if "messages" not in st.session_state:
         st.session_state["messages"] = []
 
-    for message in st.session_state.messages:
-        role = message["role"]
-        content = message["content"]
-        st.chat_message(role).write(content)
+    # 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:
+            with st.chat_message(message["role"]):
+                st.markdown(message["content"], unsafe_allow_html=True)
 
-    # Add Clear Chat button next to input field
-    clear_col, input_col = st.columns([1, 8])
-    with clear_col:
-        if st.button("🧹 Clear Chat"):
-            st.session_state.messages = []
-            st.success("Chat history cleared.")
+    # Input row with Clear button as an icon
+    col_input, col_clear = st.columns([8, 1])
 
-    with input_col:
+    with col_input:
         user_input = st.chat_input("Type your message here...")
 
-    # Check for OpenAI key
+    with col_clear:
+        if st.button("🗑️", help="Clear chat"):
+            st.session_state.messages = []
+            st.rerun()
+
     if openai_key:
         client = OpenAI(api_key=openai_key)
         ASSISTANT_ID = "asst_5gQR21fOsmHil11FGBzEArA7"
 
-        # Save chat transcript (backend only)
         def save_transcript(messages):
             with open("chat_logs.txt", "a") as log:
                 log.write(f"\n--- New Chat ({datetime.datetime.now().strftime('%Y-%m-%d %H:%M:%S')}) ---\n")
@@ -70,30 +69,26 @@ else:
                     log.write(f"{msg['role'].capitalize()}: {msg['content']}\n")
                 log.write("--- End Chat ---\n")
 
-        # Handle user input and keep sticky experience
         if user_input:
             st.session_state.messages.append({"role": "user", "content": user_input})
-            st.chat_message("user").write(user_input)
+            with st.chat_message("user"):
+                st.markdown(user_input)
 
             try:
-                # Start OpenAI chat thread
                 thread = client.beta.threads.create()
                 thread_id = thread.id
 
-                # Send user message
                 client.beta.threads.messages.create(
                     thread_id=thread_id,
                     role="user",
                     content=user_input
                 )
 
-                # Trigger assistant response
                 run = client.beta.threads.runs.create(
                     thread_id=thread_id,
                     assistant_id=ASSISTANT_ID
                 )
 
-                # Wait for assistant completion
                 while True:
                     run_status = client.beta.threads.runs.retrieve(
                         thread_id=thread_id,
@@ -103,19 +98,18 @@ else:
                         break
                     time.sleep(1)
 
-                # Retrieve assistant message
                 messages = client.beta.threads.messages.list(thread_id=thread_id)
                 assistant_message = messages.data[0].content[0].text.value
 
-                # Display and store the assistant’s response
-                st.chat_message("assistant").write(assistant_message)
                 st.session_state.messages.append({"role": "assistant", "content": assistant_message})
 
-                # Save chat log
+                with st.chat_message("assistant"):
+                    st.markdown(assistant_message, unsafe_allow_html=True)
+
                 save_transcript(st.session_state.messages)
 
             except Exception as e:
                 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.")
-