Update app.py

app.py

@@ -8,13 +8,13 @@ import firebase_admin
 from firebase_admin import credentials, firestore
 from openai import OpenAI
 
-# Firebase setup
+# ---- Firebase setup ----
 if not firebase_admin._apps:
     cred = credentials.Certificate("firebase-service-account.json")
     firebase_admin.initialize_app(cred)
 db = firestore.client()
 
-# OpenAI setup
+# ---- OpenAI setup ----
 openai_key = os.getenv("openai_key")
 assistant_id = os.getenv("assistant_id")
 client = OpenAI(api_key=openai_key)
@@ -32,7 +32,7 @@ VOICE_OPTIONS = {
 
 st.set_page_config(page_title="LOR Technologies AI Assistant", layout="wide")
 
-# State
+# --- State setup
 if "user_id" not in st.session_state:
     st.session_state["user_id"] = str(uuid.uuid4())
 user_id = st.session_state["user_id"]
@@ -46,14 +46,25 @@ 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 floating bar illusion (margin for chat, input pinned visually)
+# --- Logo and Branding Styling ---
 st.markdown("""
     <style>
-    .block-container {padding-top: 1rem;}
+    .block-container {padding-top: 0.5rem; padding-bottom: 0rem;}
+    header {visibility: hidden;}
     .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;
+    }
     .footer-fakebar {
         position: fixed;
         left: 0; bottom: 0;
@@ -65,19 +76,19 @@ st.markdown("""
     }
     .footer-fakebar .element-container { flex: 1 1 auto; }
     .footer-fakebar input { font-size: 1.15em !important; }
-    .footer-placeholder { height: 90px; }
+    .footer-placeholder { height: 98px; }
     </style>
 """, unsafe_allow_html=True)
+
+# --- LOGO AREA (fixes cropping, ensures visibility) ---
 st.markdown("""
-    <div style='text-align: center; margin-top: 20px; margin-bottom: -10px;'>
-        <span style='display: inline-flex; align-items: center; gap: 8px;'>
-            <img src='https://lortechnologies.com/wp-content/uploads/2023/03/LOR-Online-Logo.svg' width='100' class='lor-logo'/>
-            <span style='font-size: 12px; color: gray;'>Powered by LOR Technologies</span>
-        </span>
-    </div>
+<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>
 """, unsafe_allow_html=True)
 
-# Sidebar: audio/voice controls
+# --- Sidebar: audio/voice controls
 with st.sidebar:
     st.markdown("### Voice Settings & Controls")
     selected_voice = st.selectbox(
@@ -140,9 +151,10 @@ def display_chat_history():
             chat_msgs.append(
                 f"<div class='stChatMessage' data-testid='stChatMessage-assistant'>{assistant_icon_html} <strong>LORAIN:</strong> {data['content']}</div>"
             )
-    st.markdown("".join(chat_msgs[::-1]), unsafe_allow_html=True)
+    # Attach chat, plus the scroll anchor
+    st.markdown("".join(chat_msgs[::-1]) + '<div id="chat-bottom-anchor"></div>', unsafe_allow_html=True)
 
-# TTS
+# --- 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)
@@ -160,10 +172,24 @@ def synthesize_voice(text, voice_key, user_id):
         st.session_state["last_voice"] = voice
     return out_path
 
-# --- Chat history and spacer ---
+# --- Chat history, scroll anchor, and fake footer for space ---
 display_chat_history()
 st.markdown('<div class="footer-placeholder"></div>', unsafe_allow_html=True)
 
+# --- JS: auto-scroll to latest message ---
+st.markdown("""
+<script>
+window.onload = function() {
+    var anchor = document.getElementById("chat-bottom-anchor");
+    if(anchor){ anchor.scrollIntoView({ behavior: "smooth", block: "end" }); }
+};
+window.setTimeout(function(){
+    var anchor = document.getElementById("chat-bottom-anchor");
+    if(anchor){ anchor.scrollIntoView({ behavior: "smooth", block: "end" }); }
+}, 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)
@@ -175,16 +201,17 @@ with st.container():
 
 if user_input:
     # --- OpenAI Assistant Response ---
-    client.beta.threads.messages.create(thread_id=get_or_create_thread_id(), role="user", content=user_input)
+    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)
     with st.spinner("Thinking and typing... 💭"):
-        run = client.beta.threads.runs.create(thread_id=get_or_create_thread_id(), assistant_id=assistant_id)
+        run = client.beta.threads.runs.create(thread_id=thread_id, assistant_id=assistant_id)
         while True:
-            run_status = client.beta.threads.runs.retrieve(thread_id=get_or_create_thread_id(), run_id=run.id)
+            run_status = client.beta.threads.runs.retrieve(thread_id=thread_id, run_id=run.id)
             if run_status.status == "completed":
                 break
             time.sleep(1)
-    messages_response = client.beta.threads.messages.list(thread_id=get_or_create_thread_id())
+    messages_response = client.beta.threads.messages.list(thread_id=thread_id)
     latest_response = sorted(messages_response.data, key=lambda x: x.created_at)[-1]
     assistant_message = latest_response.content[0].text.value
     save_message("assistant", assistant_message)