Update app.py

app.py

@@ -46,7 +46,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;}
@@ -57,36 +57,63 @@ 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; /* enough space so input does not cover messages */
+        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://i0.wp.com/c2group.co.za/wp-content/uploads/2022/10/cropped-1_C2-Group-Technologies-Logo-2-1.png?w=1024&ssl=1" class="logo-mini" />
     <div style="font-size: 13px; color: #888;">Powered by C2 Group</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(
@@ -141,7 +168,7 @@ def display_chat_history():
     assistant_icon_html = "<img src='https://img.freepik.com/free-vector/graident-ai-robot-vectorart_78370-4114.jpg?semt=ais_hybrid&w=740' width='22' style='vertical-align:middle; border-radius:50%;'/>"
 
     chat_msgs = []
-    for msg in list(messages)[::-1]:   # Most recent first!
+    for msg in list(messages)[::-1]:
         data = msg.to_dict()
         if data["role"] == "user":
             chat_msgs.append(
@@ -172,34 +199,31 @@ 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 clear button ---
+if st.query_params.get("clear") == "1":
+    clear_chat_history()
+
+# --- Handle user input ---
 if user_input:
-    # --- OpenAI Assistant Response ---
     thread_id = get_or_create_thread_id()
     client.beta.threads.messages.create(thread_id=thread_id, role="user", content=user_input)
     save_message("user", user_input)