Update app.py

app.py

@@ -55,8 +55,44 @@ st.markdown("""
     .stChatMessage[data-testid="stChatMessage-user"] { background: #f0f0f0; color: #000000; }
     .stChatMessage[data-testid="stChatMessage-assistant"] { background: #e3f2fd; color: #000000; }
     .lt-logo { vertical-align: middle; }
-    .st-emotion-cache-1avcm0n { justify-content: flex-end !important; }
-    .stChatInputContainer { position: fixed !important; bottom: 0; width: 80vw; z-index: 100; left: 10vw; background: #11131a; }
+    /* Floating chat input */
+    .floating-input-bar {
+        position: fixed;
+        bottom: 0;
+        left: 50%;
+        transform: translateX(-50%);
+        width: 60vw;
+        min-width: 300px;
+        max-width: 900px;
+        z-index: 1000;
+        background: #fff;
+        border-radius: 1em 1em 0 0;
+        box-shadow: 0 -2px 16px rgba(0,0,0,0.07);
+        padding: 1em 1em 0.7em 1em;
+        display: flex;
+        align-items: center;
+    }
+    .floating-input-bar .chat-input {
+        flex: 1 1 auto;
+        border-radius: 14px;
+        border: 1px solid #d2d2d2;
+        padding: 0.7em 1em;
+        font-size: 1.1em;
+        margin-right: 0.7em;
+    }
+    .floating-input-bar .clear-btn {
+        border: none;
+        background: transparent;
+        font-size: 1.5em;
+        color: #888;
+        cursor: pointer;
+        margin-left: 0.1em;
+        margin-top: 1px;
+        transition: color 0.1s;
+    }
+    .floating-input-bar .clear-btn:hover { color: #e57373; }
+    /* Push main content up above floating bar */
+    .main-chat-area { margin-bottom: 5em; }
     </style>
 """, unsafe_allow_html=True)
 st.markdown("""
@@ -71,7 +107,11 @@ st.markdown("""
 # --- Sidebar: All audio/controls here ---
 with st.sidebar:
     st.markdown("### Voice Settings & Controls")
-    selected_voice = st.selectbox("Select assistant voice", list(VOICE_OPTIONS.keys()), index=list(VOICE_OPTIONS.keys()).index(st.session_state["selected_voice"]))
+    selected_voice = st.selectbox(
+        "Select assistant voice",
+        list(VOICE_OPTIONS.keys()),
+        index=list(VOICE_OPTIONS.keys()).index(st.session_state["selected_voice"])
+    )
     st.session_state["selected_voice"] = selected_voice
 
     # Audio player, always present if we have an mp3
@@ -80,7 +120,6 @@ with st.sidebar:
 
     # Replay button and audio player
     if last_audio and os.path.exists(last_audio):
-        # Autoplay if this was just generated, else manual play
         st.audio(last_audio, format="audio/mp3", autoplay=not mute_voice)
         if st.button("🔁 Replay Voice"):
             st.audio(last_audio, format="audio/mp3", autoplay=True)
@@ -113,15 +152,31 @@ def save_message(role, content):
         "timestamp": firestore.SERVER_TIMESTAMP
     })
 
+def clear_chat_history():
+    user_doc_ref = db.collection("users").document(user_id)
+    for msg in user_doc_ref.collection("messages").stream():
+        msg.reference.delete()
+    user_doc_ref.delete()
+    st.session_state.clear()
+    st.rerun()
+
 def display_chat_history():
+    st.markdown("<div class='main-chat-area'>", unsafe_allow_html=True)
     messages = db.collection("users").document(user_id).collection("messages").order_by("timestamp").stream()
     assistant_icon_html = "<img src='https://raw.githubusercontent.com/AndrewLORTech/lortechwebsite/main/lorain.jpg' width='24' style='vertical-align:middle; border-radius:50%;'/>"
     for msg in list(messages)[::-1]:
         data = msg.to_dict()
         if data["role"] == "user":
-            st.markdown(f"<div class='stChatMessage' data-testid='stChatMessage-user'>👤 <strong>You:</strong> {data['content']}</div>", unsafe_allow_html=True)
+            st.markdown(
+                f"<div class='stChatMessage' data-testid='stChatMessage-user'>👤 <strong>You:</strong> {data['content']}</div>",
+                unsafe_allow_html=True,
+            )
         else:
-            st.markdown(f"<div class='stChatMessage' data-testid='stChatMessage-assistant'>{assistant_icon_html} <strong>LORAIN:</strong> {data['content']}</div>", unsafe_allow_html=True)
+            st.markdown(
+                f"<div class='stChatMessage' data-testid='stChatMessage-assistant'>{assistant_icon_html} <strong>LORAIN:</strong> {data['content']}</div>",
+                unsafe_allow_html=True,
+            )
+    st.markdown("</div>", unsafe_allow_html=True)
 
 # --- Edge TTS synth ---
 async def edge_tts_synthesize(text, voice, user_id):
@@ -146,8 +201,44 @@ def synthesize_voice(text, voice_key, user_id):
 thread_id = get_or_create_thread_id()
 display_chat_history()
 
-# --- Static Chat Input at Bottom ---
-user_input = st.chat_input("Type your message here...")
+# --- Floating Chat Input Bar & Clear Button ---
+st.markdown("""
+<div class="floating-input-bar">
+    <form action="" method="POST" id="lorain_input_form" style="width:100%;display:flex;">
+        <input id="lorain_user_input" class="chat-input" name="lorain_user_input" type="text" placeholder="Type your message here..." autocomplete="off" autofocus />
+        <button class="clear-btn" type="submit" name="clear_chat" title="Clear chat">&#128465;</button>
+    </form>
+    <script>
+    // Auto-focus and scroll to bottom on new message
+    let chatbox = document.getElementById("chatbox");
+    if (chatbox) chatbox.scrollTop = chatbox.scrollHeight;
+    </script>
+</div>
+""", unsafe_allow_html=True)
+
+# --- Handle Chat Input/Clear POST ---
+import streamlit.web.server.websocket_headers
+from urllib.parse import parse_qs
+
+# Use query params to emulate form submission state (for Streamlit stateless-ness)
+query_params = st.experimental_get_query_params()
+import streamlit.runtime.scriptrunner.script_run_context as sctx
+ctx = sctx.get_script_run_ctx()
+form_data = {}
+if ctx and hasattr(ctx, 'request'):
+    content_length = ctx.request.headers.get('content-length')
+    if content_length:
+        body = ctx.request.rfile.read(int(content_length)).decode()
+        form_data = parse_qs(body)
+
+# Detect clear chat
+if form_data.get("clear_chat"):
+    clear_chat_history()
+
+# Detect user input
+user_input = ""
+if form_data.get("lorain_user_input"):
+    user_input = form_data.get("lorain_user_input")[0].strip()
 
 if user_input:
     # --- OpenAI Assistant Response ---