Update app.py

app.py

@@ -1,26 +1,39 @@
 import streamlit as st
+from streamlit_chat import message
 from openai import OpenAI
 import time
 import datetime
 import os
 
-# Securely get credentials
+# Load secrets from Hugging Face environment
 generated_user = os.getenv("User")
 generated_password = os.getenv("Password")
 openai_key = os.getenv("openai_key")
+assistant_id = os.getenv("ASSISTANT_ID")  # Now using the Hugging Face secret!
 
-# Streamlit app configuration
+# Streamlit page setup
 st.set_page_config(page_title="Carfind.co.za AI Assistant", layout="wide")
-st.title("🚗 Carfind.co.za AI Assistant")
+st.markdown("<h1 style='text-align: center;'>🚗 Carfind.co.za AI Assistant</h1>", unsafe_allow_html=True)
 st.caption("Chat with Carfind.co.za and find your next car fast")
 
-# Initialize authentication state
+# Light / Dark mode toggle
+dark_mode = st.toggle("🌙 Switch to Light Mode", value=True)
+
+# Add custom CSS for styling bubbles
+st.markdown("""
+    <style>
+    .stChatMessage { max-width: 85%; border-radius: 12px; padding: 8px; }
+    .stChatMessage[data-testid="stChatMessage-user"] { background: #333; color: white; }
+    .stChatMessage[data-testid="stChatMessage-assistant"] { background: #00529B; color: white; }
+    </style>
+""", unsafe_allow_html=True)
+
+# Login authentication
 if "authenticated" not in st.session_state:
     st.session_state.authenticated = False
 
-# 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")
 
@@ -33,7 +46,7 @@ if not st.session_state.authenticated:
         else:
             st.error("Incorrect username or password. Please try again.")
 
-# Main chat interface
+# Main chat after login
 else:
     st.divider()
 
@@ -41,28 +54,25 @@ else:
         st.session_state["messages"] = []
 
     # Display chat history
-    for message in st.session_state.messages:
-        role = message["role"]
-        content = message["content"]
-        if role == "assistant":
-            st.markdown(f'<img src="https://www.carfind.co.za/images/Carfind-Icon.svg" width="30" style="vertical-align: middle;"> <strong>Carfind Assistant:</strong> {content}', unsafe_allow_html=True)
+    for msg in st.session_state["messages"]:
+        if msg["role"] == "assistant":
+            message(msg["content"], is_user=False, avatar="https://www.carfind.co.za/images/Carfind-Icon.svg")
         else:
-            st.chat_message(role).write(content)
+            message(msg["content"], is_user=True, avatar_style="adventurer")
 
-    # Input with clear chat button
-    col_clear, col_input = st.columns([1, 8])
+    # Chat input and clear button side-by-side
+    input_col, clear_col = st.columns([8, 1])
+    with input_col:
+        user_input = st.text_input("Type your message here...", key="chat_input")
 
-    with col_clear:
-        if st.button("🧹 Clear Chat"):
+    with clear_col:
+        if st.button("🗑️", help="Clear Chat"):
             st.session_state.messages = []
-            st.success("Chat history cleared.")
-
-    with col_input:
-        user_input = st.chat_input("Type your message here...")
+            st.success("Chat cleared.")
+            st.rerun()
 
-    if openai_key:
+    if openai_key and assistant_id:
         client = OpenAI(api_key=openai_key)
-        ASSISTANT_ID = "asst_5gQR21fOsmHil11FGBzEArA7"
 
         def save_transcript(messages):
             with open("chat_logs.txt", "a") as log:
@@ -72,43 +82,36 @@ else:
                 log.write("--- End Chat ---\n")
 
         if user_input:
-            if len(st.session_state.messages) == 0 or user_input != st.session_state.messages[-1]["content"]:
-                st.session_state.messages.append({"role": "user", "content": user_input})
-                st.chat_message("user").write(user_input)
+            # Display user message
+            st.session_state.messages.append({"role": "user", "content": user_input})
+            message(user_input, is_user=True, avatar_style="adventurer")
 
-                try:
+            try:
+                # Start OpenAI thread and show typing spinner
+                with st.spinner("Thinking and typing... 💭"):
                     thread = client.beta.threads.create()
-                    thread_id = thread.id
+                    client.beta.threads.messages.create(thread_id=thread.id, role="user", content=user_input)
 
-                    client.beta.threads.messages.create(
-                        thread_id=thread_id,
-                        role="user",
-                        content=user_input
-                    )
-
-                    run = client.beta.threads.runs.create(
-                        thread_id=thread_id,
-                        assistant_id=ASSISTANT_ID
-                    )
+                    run = client.beta.threads.runs.create(thread_id=thread.id, assistant_id=assistant_id)
 
                     while True:
-                        run_status = client.beta.threads.runs.retrieve(
-                            thread_id=thread_id,
-                            run_id=run.id
-                        )
+                        run_status = client.beta.threads.runs.retrieve(thread_id=thread.id, run_id=run.id)
                         if run_status.status == "completed":
                             break
                         time.sleep(1)
 
-                    messages = client.beta.threads.messages.list(thread_id=thread_id)
-                    assistant_message = messages.data[0].content[0].text.value.strip()
+                    # Get assistant reply
+                    response_messages = client.beta.threads.messages.list(thread_id=thread.id)
+                    assistant_reply = response_messages.data[0].content[0].text.value
+
+                st.session_state.messages.append({"role": "assistant", "content": assistant_reply})
+                message(assistant_reply, is_user=False, avatar="https://www.carfind.co.za/images/Carfind-Icon.svg")
+
+                # Save chat log
+                save_transcript(st.session_state.messages)
 
-                    if assistant_message.lower() != user_input.lower():
-                        st.markdown(f'<img src="https://www.carfind.co.za/images/Carfind-Icon.svg" width="30" style="vertical-align: middle;"> <strong>Carfind Assistant:</strong> {assistant_message}', unsafe_allow_html=True)
-                        st.session_state.messages.append({"role": "assistant", "content": assistant_message})
-                        save_transcript(st.session_state.messages)
+            except Exception as e:
+                st.error(f"An error occurred: {str(e)}")
 
-                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.")
+        st.error("⚠️ API key or Assistant ID not found. Please ensure both are set as Hugging Face secrets.")