Update app.py

app.py

@@ -5,17 +5,16 @@ import os
 import pandas as pd
 from datetime import datetime
 
-# Get environment variables
+# Load environment variables
 openai_key = os.getenv("openai_key")
 assistant_id = os.getenv("ASSISTANT_ID")
 
-# Load or create transcript file
+# Set up transcript log
 transcript_file = "transcripts.xlsx"
 if not os.path.exists(transcript_file):
     df = pd.DataFrame(columns=["timestamp", "thread_id", "role", "message"])
     df.to_excel(transcript_file, index=False)
 
-# Function to append to transcript
 def append_to_transcript(thread_id, role, message):
     df_existing = pd.read_excel(transcript_file)
     new_entry = pd.DataFrame({
@@ -27,33 +26,43 @@ def append_to_transcript(thread_id, role, message):
     updated_df = pd.concat([df_existing, new_entry], ignore_index=True)
     updated_df.to_excel(transcript_file, index=False)
 
-# Streamlit UI setup
+# Configure page
 st.set_page_config(page_title="Carfind.co.za AI Assistant", layout="wide")
 
+# Inject custom styling
 st.markdown("""
     <style>
     .block-container {padding-top: 1rem; padding-bottom: 0rem;}
     header {visibility: hidden;}
     .st-emotion-cache-18ni7ap {visibility: hidden;}
-    .stChatMessage { max-width: 85%; border-radius: 12px; padding: 8px; }
+    .stChatMessage { max-width: 85%; border-radius: 12px; padding: 8px; margin-bottom: 10px; }
     .stChatMessage[data-testid="stChatMessage-user"] { background: #f0f0f0; color: #000000; }
     .stChatMessage[data-testid="stChatMessage-assistant"] { background: #D6E9FE; color: #000000; }
+    div[data-testid="column"] button {
+        border: none;
+        background-color: transparent;
+        font-size: 1.4rem;
+        margin-top: 18px;
+    }
     </style>
 """, unsafe_allow_html=True)
 
+# Initialize session
 if "thread_id" not in st.session_state:
     st.session_state["thread_id"] = None
 
-input_col, clear_col = st.columns([8, 1])
+# Inline layout for chat input + clear button
+input_col, clear_col = st.columns([9, 1])
+
 with input_col:
-    user_input = st.text_input("", placeholder="Type your message here...", key="chat_input")
+    user_input = st.chat_input("Type your message here...")
 
 with clear_col:
-    if st.button("🗑️", help="Clear Chat"):
+    if st.button("🗑️", key="clear-chat", help="Clear Chat"):
         st.session_state["thread_id"] = None
-        st.success("Chat cleared.")
         st.rerun()
 
+# Chat logic
 if openai_key and assistant_id:
     client = OpenAI(api_key=openai_key)
 
@@ -85,27 +94,25 @@ if openai_key and assistant_id:
             )
 
             assistant_icon_html = "<img src='https://www.carfind.co.za/images/Carfind-Icon.svg' width='22' style='vertical-align:middle;'/>"
-
             messages_sorted = sorted(messages_response.data, key=lambda x: x.created_at, reverse=True)
+
             for msg in messages_sorted:
                 if msg.role == "user":
                     st.markdown(
-                        f"<div style='background-color:#f0f0f0; color:#000000; padding:10px; border-radius:8px; margin:5px 0;'>"
-                        f"👤 <strong>You:</strong> {msg.content[0].text.value}"
-                        f"</div>", 
+                        f"<div class='stChatMessage' data-testid='stChatMessage-user'>"
+                        f"👤 <strong>You:</strong> {msg.content[0].text.value}</div>",
                         unsafe_allow_html=True
                     )
                 else:
                     response_text = msg.content[0].text.value
                     append_to_transcript(st.session_state["thread_id"], "assistant", response_text)
                     st.markdown(
-                        f"<div style='background-color:#D6E9FE; color:#000000; padding:10px; border-radius:8px; margin:5px 0;'>"
-                        f"{assistant_icon_html} <strong>Carfind Assistant:</strong> {response_text}"
-                        f"</div>", 
+                        f"<div class='stChatMessage' data-testid='stChatMessage-assistant'>"
+                        f"{assistant_icon_html} <strong>Carfind Assistant:</strong> {response_text}</div>",
                         unsafe_allow_html=True
                     )
 
         except Exception as e:
-            st.error(f"An error occurred: {str(e)}")
+            st.error(f"❌ An error occurred: {str(e)}")
 else:
-    st.error("⚠️ OpenAI key or Assistant ID not found. Please ensure both are set as Hugging Face secrets.")
+    st.error("⚠️ OpenAI key or Assistant ID not found. Please ensure both are set as Hugging Face secrets.")