Update app.py

app.py

@@ -46,39 +46,64 @@ 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;}
-    header {visibility: hidden;}
-    .logo-mini {
-        width: 75px !important;
-        margin: 0 auto 0.25em auto;
-        display: block;
-    }
-    .lor-brand-bar {
-        width: 100vw; text-align: center; background: none;
-        margin-bottom: 0.5em; margin-top: 0.1em;
-    }
-    .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;
-    }
-    .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-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>
+<style>
+.block-container {padding-top: 1rem;}
+header {visibility: hidden;}
+.logo-mini {
+    width: 75px !important;
+    margin: 0 auto 0.25em auto;
+    display: block;
+}
+.lor-brand-bar {
+    width: 100vw; text-align: center; background: none;
+    margin-bottom: 0.5em; margin-top: 0.1em;
+}
+.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: 7em;
+    min-height: 60vh;
+}
+
+.input-bottom-bar {
+    position: fixed;
+    bottom: 0;
+    width: 100%;
+    background: #191b22;
+    padding: 0.5em 0.6em;
+    display: flex;
+    align-items: center;
+    gap: 0.5em;
+    border-top: 1px solid #22232c;
+    z-index: 999;
+}
+
+.input-bottom-bar input {
+    width: 100%;
+    font-size: 1.1em;
+    padding: 0.5em;
+    border-radius: 8px;
+    border: 1px solid #333;
+    background: #222;
+    color: #fff;
+}
+
+#clear-chat {
+    background: none;
+    border: none;
+    font-size: 1.5em;
+    color: #ccc;
+    cursor: pointer;
+}
+</style>
 """, unsafe_allow_html=True)
 
-# --- Top Branding, Mini Logo ---
+# --- Branding
 st.markdown("""
 <div class="lor-brand-bar">
     <img src="https://lortechnologies.com/wp-content/uploads/2023/03/LOR-Online-Logo.svg" class="logo-mini" />
@@ -86,7 +111,7 @@ st.markdown("""
 </div>
 """, unsafe_allow_html=True)
 
-# --- Sidebar: audio/voice controls
+# --- Sidebar
 with st.sidebar:
     st.markdown("### Voice Settings & Controls")
     selected_voice = st.selectbox(
@@ -110,7 +135,7 @@ with st.sidebar:
             st.session_state["mute_voice"] = False
             st.rerun()
 
-# --- Firestore helpers ---
+# --- Firestore helpers
 def get_or_create_thread_id():
     doc_ref = db.collection("users").document(user_id)
     doc = doc_ref.get()
@@ -140,7 +165,7 @@ def display_chat_history():
     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='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(
@@ -153,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)
 
-# --- Edge TTS synth ---
+# --- Edge TTS synth
 async def edge_tts_synthesize(text, voice, user_id):
     out_path = f"output_{user_id}.mp3"
     communicate = edge_tts.Communicate(text, voice)
@@ -171,34 +196,40 @@ def synthesize_voice(text, voice_key, user_id):
         st.session_state["last_voice"] = voice
     return out_path
 
-# --- INPUT AT THE TOP ---
-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>', unsafe_allow_html=True)
-
-# --- CHAT: display under input, latest on top ---
+# --- CHAT DISPLAY
 display_chat_history()
 
-# --- JS: auto-scroll to top on new message ---
+# --- Input Form (bottom)
+st.markdown("""
+<div class="input-bottom-bar">
+    <div style="flex: 8 1 auto;">
+        <form action="" method="GET">
+            <input type="text" name="user_input" id="user-input" placeholder="Type your message here..." />
+        </form>
+    </div>
+    <div style="flex: 2 0 auto; text-align: center;">
+        <button id="clear-chat" onclick="window.location.href='?clear=1'">🗑️</button>
+    </div>
+</div>
+""", unsafe_allow_html=True)
+
+# --- 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
+if st.query_params.get("clear") == "1":
+    clear_chat_history()
+
+# --- Handle user input
+user_input = st.query_params.get("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)
@@ -221,4 +252,4 @@ if user_input:
         st.session_state["last_audio_path"] = audio_path
 
     time.sleep(0.2)
-    st.rerun()
+    st.rerun()