Update app.py

app.py

@@ -1,4 +1,5 @@
 import streamlit as st
+from streamlit_chat import message
 from openai import OpenAI
 import time
 import datetime
@@ -9,46 +10,11 @@ generated_user = os.getenv("User")
 generated_password = os.getenv("Password")
 openai_key = os.getenv("openai_key")
 
-# Streamlit page config
+# Streamlit app configuration
 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 styling chat input and clear button inside it
-st.markdown(
-    """
-    <style>
-    .chat-container {
-        overflow-y: auto;
-        max-height: 70vh;
-        padding: 10px;
-        border-radius: 10px;
-        border: 1px solid #444;
-        background-color: #111;
-        margin-bottom: 80px;
-    }
-    .stChatInputContainer {
-        position: fixed;
-        bottom: 20px;
-        width: 80%;
-        left: 10%;
-        background-color: #222;
-        padding: 10px;
-        border-radius: 10px;
-        box-shadow: 0 0 15px rgba(0,0,0,0.5);
-        display: flex;
-        align-items: center;
-    }
-    .clear-chat-icon {
-        cursor: pointer;
-        margin-left: 10px;
-        font-size: 1.4em;
-    }
-    </style>
-    """,
-    unsafe_allow_html=True
-)
-
 # Initialize authentication state
 if "authenticated" not in st.session_state:
     st.session_state.authenticated = False
@@ -68,45 +34,32 @@ if not st.session_state.authenticated:
         else:
             st.error("Incorrect username or password. Please try again.")
 
-# Main chat interface
+# Main chat UI using streamlit-chat
 else:
-    st.divider()
-
     if "messages" not in st.session_state:
         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)
-
-    # Custom chat input row with clear chat icon
-    with st.container():
-        user_input = st.chat_input("Type your message here...")
-        st.markdown(
-            """
-            <script>
-            function clearChat() {
-                fetch(window.location.href, {
-                    method: 'POST',
-                    headers: {'Content-Type': 'application/json'},
-                    body: JSON.stringify({"clear_chat": true})
-                }).then(() => location.reload());
-            }
-            </script>
-            <span class='clear-chat-icon' onclick='clearChat()'>🗑️</span>
-            """,
-            unsafe_allow_html=True
-        )
-
-    # Listen for clear chat POST
-    if st.experimental_get_query_params().get("clear_chat"):
-        st.session_state.messages = []
-
-    if openai_key:
+    st.divider()
+
+    # Display chat history
+    for i, msg in enumerate(st.session_state["messages"]):
+        message(msg["content"], is_user=(msg["role"] == "user"), key=str(i))
+
+    # Chat input with clear chat icon
+    col_input, col_clear = st.columns([10, 1])
+
+    with col_input:
+        user_input = st.text_input("Type your message here:", key="input")
+
+    with col_clear:
+        if st.button("🗑️", help="Clear chat"):
+            st.session_state.messages = []
+            st.experimental_rerun()
+
+    # Handle OpenAI assistant
+    if user_input and openai_key:
+        st.session_state.messages.append({"role": "user", "content": user_input})
+
         client = OpenAI(api_key=openai_key)
         ASSISTANT_ID = "asst_5gQR21fOsmHil11FGBzEArA7"
 
@@ -117,47 +70,40 @@ else:
                     log.write(f"{msg['role'].capitalize()}: {msg['content']}\n")
                 log.write("--- End Chat ---\n")
 
-        if user_input:
-            st.session_state.messages.append({"role": "user", "content": user_input})
-            with st.chat_message("user"):
-                st.markdown(user_input)
+        try:
+            thread = client.beta.threads.create()
+            thread_id = thread.id
 
-            try:
-                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(
+            while True:
+                run_status = client.beta.threads.runs.retrieve(
                     thread_id=thread_id,
-                    assistant_id=ASSISTANT_ID
+                    run_id=run.id
                 )
+                if run_status.status == "completed":
+                    break
+                time.sleep(1)
 
-                while True:
-                    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
-
-                st.session_state.messages.append({"role": "assistant", "content": assistant_message})
+            messages_response = client.beta.threads.messages.list(thread_id=thread_id)
+            assistant_reply = messages_response.data[0].content[0].text.value
 
-                with st.chat_message("assistant"):
-                    st.markdown(assistant_message, unsafe_allow_html=True)
+            st.session_state.messages.append({"role": "assistant", "content": assistant_reply})
+            save_transcript(st.session_state.messages)
 
-                save_transcript(st.session_state.messages)
+            st.experimental_rerun()
 
-            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:
+    elif not openai_key:
         st.error("OpenAI key not found. Please ensure it is set as a Hugging Face secret.")