Update app.py

app.py

@@ -14,7 +14,7 @@ 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
+# Custom CSS to fix the chat input at the bottom and make chat scrollable above it
 st.markdown(
     """
     <style>
@@ -25,6 +25,17 @@ st.markdown(
         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);
     }
     .element-container:has(> .stChatMessage) {
         margin-bottom: 20px;
@@ -68,16 +79,12 @@ else:
                 st.markdown(message["content"], unsafe_allow_html=True)
         st.markdown('</div>', unsafe_allow_html=True)
 
-    # Input and clear button
-    col_input, col_clear = st.columns([8, 1])
+    # Input field fixed at the bottom
+    user_input = st.chat_input("Type your message here...")
 
-    with col_input:
-        user_input = st.chat_input("Type your message here...")
-
-    with col_clear:
-        if st.button("🗑️", help="Clear chat"):
-            st.session_state.messages = []
-            st.rerun()
+    if st.button("🗑️ Clear Chat", help="Clear chat history"):
+        st.session_state.messages = []
+        st.rerun()
 
     if openai_key:
         client = OpenAI(api_key=openai_key)