Update app.py

app.py

@@ -48,7 +48,7 @@ if "last_audio_path" not in st.session_state:
 if "selected_voice" not in st.session_state:
     st.session_state["selected_voice"] = "Jenny (US, Female)"
 
-# --- CSS for logo, chat, and input bar at top ---
+# --- CSS ---
 st.markdown("""
     <style>
     .block-container {padding-top: 1rem;}
@@ -59,36 +59,58 @@ st.markdown("""
         display: block;
     }
     .lor-brand-bar {
-        width: 100vw; text-align: center; background: none;
-        margin-bottom: 0.5em; margin-top: 0.1em;
+        width: 100vw;
+        text-align: center;
+        background: none;
+        margin-bottom: 0.5em;
+        margin-top: 0.1em;
+        position: relative;
+    }
+    .clear-chat-btn-top {
+        position: absolute;
+        top: 10px;
+        right: 50px;
+        font-size: 1.4em;
+        color: #ccc;
+        background: none;
+        border: none;
+        cursor: pointer;
+        z-index: 1000;
+        transition: color 0.2s ease;
+    }
+    .clear-chat-btn-top:hover {
+        color: #fff;
     }
     .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: #e3f2fd; color: #000000; }
     .chat-history-wrapper {
-        margin-top: 0.5em; padding-bottom: 2em; min-height: 60vh;
+        margin-top: 0.5em;
+        padding-bottom: 9em;
+        min-height: 60vh;
     }
-    .input-top-bar {
-        position: sticky; top: 0; z-index: 20;
-        background: #191b22; padding: 0.5em 0 0.25em 0;
-        display: flex; align-items: center; gap: 0.4em;
-        border-bottom: 1px solid #22232c;
+    .input-bottom-bar {
+        position: fixed;
+        bottom: 3.5em;
+        width: 100%;
+        background: #191b22;
+        padding: 0.5em 0.6em;
+        border-top: 1px solid #22232c;
+        z-index: 999;
     }
-    .input-top-bar .element-container { flex: 1 1 auto; }
-    .input-top-bar input { font-size: 1.12em !important; }
-    .clear-chat-btn { background: none; border: none; font-size: 1.4em; color: #666; cursor: pointer; }
     </style>
 """, unsafe_allow_html=True)
 
-# --- Top Branding, Mini Logo ---
+# --- Top Branding + clear button ---
 st.markdown("""
 <div class="lor-brand-bar">
     <img src="https://www.gameonmobile.co.za/images/GameON!-Mobile-Training-Button-logo-Medium.png" class="logo-mini" />
     <div style="font-size: 13px; color: #888;">Powered by GameOn</div>
+    <button class="clear-chat-btn-top" onclick="window.location.href='?clear=1'">🗑️</button>
 </div>
 """, unsafe_allow_html=True)
 
-# --- Sidebar: audio/voice controls
+# --- Sidebar: voice settings ---
 with st.sidebar:
     st.markdown("### Voice Settings & Controls")
     selected_voice = st.selectbox(
@@ -140,7 +162,8 @@ def clear_chat_history():
 
 def display_chat_history():
     messages = db.collection("users").document(user_id).collection("messages").order_by("timestamp").stream()
-    assistant_icon_html = "<img src='https://github.com/AndrewLORTech/gameonwebaiassistant/blob/main/GameGuy.jpg' width='22' style='vertical-align:middle; border-radius:50%;'/>"
+    assistant_icon_html = "<img src='https://github.com/AndrewLORTech/gameonwebaiassistant/blob/main/GameGuy.jpg?raw=true' width='22' style='vertical-align:middle; border-radius:50%;'/>"
+
     chat_msgs = []
     for msg in list(messages)[::-1]:
         data = msg.to_dict()
@@ -155,7 +178,7 @@ def display_chat_history():
     st.markdown('<div class="chat-history-wrapper">' + "".join(chat_msgs) + '</div>', unsafe_allow_html=True)
     st.markdown('<div id="chat-top-anchor"></div>', unsafe_allow_html=True)
 
-# --- TTS sanitize ---
+# --- TTS sanitization ---
 def sanitize_for_tts(text):
     text = html.unescape(text)
     text = re.sub(r'[^\x00-\x7F]+', ' ', text)
@@ -189,33 +212,30 @@ def synthesize_voice(text, voice_key, user_id):
         st.session_state["last_voice"] = voice
     return out_path
 
-# --- INPUT AT THE TOP ---
+# --- CHAT DISPLAY ---
+display_chat_history()
+
+# --- Bottom chat input ---
 with st.container():
-    st.markdown('<div class="input-top-bar">', unsafe_allow_html=True)
-    col1, col2 = st.columns([10, 1])
-    user_input = col1.chat_input("Type your message here...")
-    if col2.button("🗑️", help="Clear Chat", key="clear-chat-top"):
-        clear_chat_history()
+    st.markdown('<div class="input-bottom-bar">', unsafe_allow_html=True)
+    user_input = st.chat_input("Type your message here...")
     st.markdown('</div>', unsafe_allow_html=True)
 
-# --- CHAT: display under input, latest on top ---
-display_chat_history()
-
-# --- JS: auto-scroll to top on new message ---
+# --- JS auto-scroll ---
 st.markdown("""
 <script>
 window.onload = function() {
     var anchor = document.getElementById("chat-top-anchor");
     if(anchor){ anchor.scrollIntoView({ behavior: "smooth", block: "start" }); }
 };
-window.setTimeout(function(){
-    var anchor = document.getElementById("chat-top-anchor");
-    if(anchor){ anchor.scrollIntoView({ behavior: "smooth", block: "start" }); }
-}, 200);
 </script>
 """, unsafe_allow_html=True)
 
-# --- Handle user input
+# --- Handle clear button ---
+if st.query_params.get("clear") == "1":
+    clear_chat_history()
+
+# --- Handle user input ---
 if user_input:
     thread_id = get_or_create_thread_id()
     client.beta.threads.messages.create(thread_id=thread_id, role="user", content=user_input)