Update app.py

app.py

@@ -57,9 +57,25 @@ header {visibility: hidden;}
     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: 5px;
+    right: 10px;
+    font-size: 1.4em;
+    color: #ccc;
+    background: none;
+    border: none;
+    cursor: pointer;
+    z-index: 1000;
+}
+
 .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; }
@@ -76,36 +92,18 @@ header {visibility: hidden;}
     width: 100%;
     background: #191b22;
     padding: 0.5em 0.6em;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
     border-top: 1px solid #22232c;
     z-index: 999;
 }
-
-.input-bottom-bar .left {
-    flex-grow: 1;
-}
-
-.input-bottom-bar .right {
-    margin-left: 0.5em;
-}
-
-.clear-chat-btn {
-    font-size: 1.4em;
-    color: #ccc;
-    background: none;
-    border: none;
-    cursor: pointer;
-}
 </style>
 """, unsafe_allow_html=True)
 
-# --- Branding
+# --- Branding + clear button at top
 st.markdown("""
 <div class="lor-brand-bar">
     <img src="https://lortechnologies.com/wp-content/uploads/2023/03/LOR-Online-Logo.svg" class="logo-mini" />
     <div style="font-size: 13px; color: #888;">Powered by LOR Technologies</div>
+    <button class="clear-chat-btn-top" onclick="window.location.href='?clear=1'">🗑️</button>
 </div>
 """, unsafe_allow_html=True)
 
@@ -197,20 +195,11 @@ def synthesize_voice(text, voice_key, user_id):
 # --- CHAT DISPLAY
 display_chat_history()
 
-# --- Bottom input bar with chat_input() and clear button (Option 1)
+# --- Bottom chat input
 with st.container():
     st.markdown('<div class="input-bottom-bar">', unsafe_allow_html=True)
-    
-    st.markdown('<div class="left">', unsafe_allow_html=True)
     user_input = st.chat_input("Type your message here...")
     st.markdown('</div>', unsafe_allow_html=True)
-    
-    st.markdown('<div class="right">', unsafe_allow_html=True)
-    if st.button("🗑️", help="Clear Chat", key="clear-chat-bottom"):
-        clear_chat_history()
-    st.markdown('</div>', unsafe_allow_html=True)
-    
-    st.markdown('</div>', unsafe_allow_html=True)
 
 # --- JS auto-scroll
 st.markdown("""
@@ -222,6 +211,10 @@ window.onload = function() {
 </script>
 """, unsafe_allow_html=True)
 
+# --- 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()