Update app.py

app.py

@@ -46,45 +46,43 @@ 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)"
 
-# --- Logo and Branding Styling ---
+# --- CSS for logo, chat, and input bar at top ---
 st.markdown("""
     <style>
-    .block-container {padding-top: 0.5rem; padding-bottom: 0rem;}
+    .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; }
-    .lt-logo { vertical-align: middle; }
-    .logo-container {
-        width: 100vw;
-        margin: 0 auto;
-        text-align: center;
-        padding-top: 2.5em;
-        padding-bottom: 1em;
-        background: none;
-        z-index: 1001;
-        overflow: visible;
+    .chat-history-wrapper {
+        margin-top: 0.5em; padding-bottom: 2em; min-height: 60vh;
     }
-    .footer-fakebar {
-        position: fixed;
-        left: 0; bottom: 0;
-        width: 100vw;
-        background: #181a22;
-        box-shadow: 0 -2px 8px rgba(0,0,0,0.10);
-        padding: 1.2em 0.5em 0.8em 0.5em;
-        z-index: 9999;
+    .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;
     }
-    .footer-fakebar .element-container { flex: 1 1 auto; }
-    .footer-fakebar input { font-size: 1.15em !important; }
-    .footer-placeholder { height: 98px; }
+    .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)
 
-# --- LOGO AREA (fixes cropping, ensures visibility) ---
+# --- Top Branding, Mini Logo ---
 st.markdown("""
-<div class="logo-container">
-    <img src="https://lortechnologies.com/wp-content/uploads/2023/03/LOR-Online-Logo.svg" width="140" style="display: inline-block; margin-bottom: 0.2em;" class="lt-logo"/>
-    <div style="font-size: 14px; color: gray; margin-top: 0.25em;">Powered by LOR Technologies</div>
+<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>
 </div>
 """, unsafe_allow_html=True)
 
@@ -112,6 +110,7 @@ with st.sidebar:
             st.session_state["mute_voice"] = False
             st.rerun()
 
+# --- Firestore helpers ---
 def get_or_create_thread_id():
     doc_ref = db.collection("users").document(user_id)
     doc = doc_ref.get()
@@ -139,9 +138,9 @@ 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://raw.githubusercontent.com/AndrewLORTech/lortechwebsite/main/lorain.jpg' width='24' style='vertical-align:middle; border-radius:50%;'/>"
+    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]:
+    for msg in list(messages)[::-1]:   # Most recent first!
         data = msg.to_dict()
         if data["role"] == "user":
             chat_msgs.append(
@@ -151,8 +150,8 @@ def display_chat_history():
             chat_msgs.append(
                 f"<div class='stChatMessage' data-testid='stChatMessage-assistant'>{assistant_icon_html} <strong>LORAIN:</strong> {data['content']}</div>"
             )
-    # Attach chat, plus the scroll anchor
-    st.markdown("".join(chat_msgs[::-1]) + '<div id="chat-bottom-anchor"></div>', unsafe_allow_html=True)
+    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 ---
 async def edge_tts_synthesize(text, voice, user_id):
@@ -172,33 +171,32 @@ def synthesize_voice(text, voice_key, user_id):
         st.session_state["last_voice"] = voice
     return out_path
 
-# --- Chat history, scroll anchor, and fake footer for space ---
+# --- 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 ---
 display_chat_history()
-st.markdown('<div class="footer-placeholder"></div>', unsafe_allow_html=True)
 
-# --- JS: auto-scroll to latest message ---
+# --- JS: auto-scroll to top on new message ---
 st.markdown("""
 <script>
 window.onload = function() {
-    var anchor = document.getElementById("chat-bottom-anchor");
-    if(anchor){ anchor.scrollIntoView({ behavior: "smooth", block: "end" }); }
+    var anchor = document.getElementById("chat-top-anchor");
+    if(anchor){ anchor.scrollIntoView({ behavior: "smooth", block: "start" }); }
 };
 window.setTimeout(function(){
-    var anchor = document.getElementById("chat-bottom-anchor");
-    if(anchor){ anchor.scrollIntoView({ behavior: "smooth", block: "end" }); }
+    var anchor = document.getElementById("chat-top-anchor");
+    if(anchor){ anchor.scrollIntoView({ behavior: "smooth", block: "start" }); }
 }, 200);
 </script>
 """, unsafe_allow_html=True)
 
-# --- "Floating" Chat Input and Clear Chat button ---
-with st.container():
-    st.markdown('<div class="footer-fakebar">', 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-bottom"):
-        clear_chat_history()
-    st.markdown('</div>', unsafe_allow_html=True)
-
 if user_input:
     # --- OpenAI Assistant Response ---
     thread_id = get_or_create_thread_id()