Update app.py

app.py

@@ -33,15 +33,38 @@ st.markdown(
     .stApp {
         max-width: 900px;
         margin: 0 auto;
+        padding-top: 100px !important;
     }
     
-    /* Logo container */
-    .logo-container {
-        text-align: center;
-        padding: 2rem 0 1rem 0;
+    /* Fixed Header Container */
+    .fixed-header {
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        background-color: #FFFFFF;
+        z-index: 999;
+        border-bottom: 1px solid #E5E7EB;
+        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
+        padding: 15px 0;
     }
     
-    /* Trust Header */
+    .header-content {
+        max-width: 900px;
+        margin: 0 auto;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        padding: 0 20px;
+    }
+    
+    .header-logo {
+        height: 50px;
+        width: auto;
+        object-fit: contain;
+    }
+    
+    /* Trust Header - only on welcome screen */
     .trust-header {
         font-family: 'Titillium Web', sans-serif;
         text-align: center;
@@ -145,6 +168,7 @@ st.markdown(
         border-top: 1px solid #E5E7EB;
         padding-top: 1rem;
         margin-top: 2rem;
+        background-color: #FFFFFF;
     }
     
     .stChatInput > div {
@@ -166,29 +190,73 @@ st.markdown(
         color: #9CA3AF !important;
     }
     
-    /* Chat messages */
+    /* Chat messages container */
     .chat-container {
-        margin-top: 2rem;
+        margin-top: 1rem;
+        padding-bottom: 2rem;
+    }
+    
+    /* Message row with avatar */
+    .message-row {
+        display: flex;
+        align-items: flex-start;
+        margin: 1rem 0;
+        gap: 12px;
+    }
+    
+    .message-row.user {
+        flex-direction: row-reverse;
+    }
+    
+    /* Avatar styling */
+    .avatar {
+        width: 40px;
+        height: 40px;
+        border-radius: 50%;
+        flex-shrink: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        overflow: hidden;
+    }
+    
+    .avatar.bot {
+        background-color: #FFFFFF;
+        border: 2px solid #E5E7EB;
+        padding: 4px;
+    }
+    
+    .avatar.bot img {
+        width: 100%;
+        height: 100%;
+        object-fit: contain;
     }
     
+    .avatar.user {
+        background-color: #10A37F;
+        color: white;
+        font-weight: 600;
+        font-size: 16px;
+    }
+    
+    /* Message bubbles */
     .user-message {
         background-color: #F3F4F6;
         padding: 1rem 1.25rem;
         border-radius: 18px;
-        margin: 0.5rem 0;
-        max-width: 85%;
-        margin-left: auto;
+        max-width: 75%;
         font-family: 'Titillium Web', sans-serif;
+        line-height: 1.5;
     }
     
     .bot-message {
         background-color: #FFFFFF;
         padding: 1rem 1.25rem;
         border-radius: 18px;
-        margin: 0.5rem 0;
-        max-width: 85%;
+        max-width: 75%;
         border: 1px solid #E5E7EB;
         font-family: 'Titillium Web', sans-serif;
+        line-height: 1.5;
     }
     
     /* Submit button styling */
@@ -243,6 +311,18 @@ st.markdown(
     
     /* Mobile responsive */
     @media screen and (max-width: 600px) {
+        .stApp {
+            padding-top: 80px !important;
+        }
+        
+        .fixed-header {
+            padding: 10px 0;
+        }
+        
+        .header-logo {
+            height: 40px;
+        }
+        
         .trust-header {
             font-size: 26px;
         }
@@ -267,6 +347,15 @@ st.markdown(
         .prompt-subtitle {
             font-size: 0.85rem;
         }
+        
+        .user-message, .bot-message {
+            max-width: 85%;
+        }
+        
+        .avatar {
+            width: 32px;
+            height: 32px;
+        }
     }
     </style>
     """,
@@ -377,10 +466,14 @@ if "messages" not in st.session_state:
 if "conversation_started" not in st.session_state:
     st.session_state.conversation_started = False
 
-# ---------- DISPLAY LOGO ----------
-col1, col2, col3 = st.columns([1, 2, 1])
-with col2:
-    st.image("Trust Logic Logo_RGB_Standard.png", width=180)
+# ---------- FIXED HEADER ----------
+st.markdown("""
+<div class="fixed-header">
+    <div class="header-content">
+        <img src="https://raw.githubusercontent.com/yourusername/yourrepo/main/Trust%20Logic%20Logo_RGB_Standard.png" class="header-logo" alt="TrustLogic">
+    </div>
+</div>
+""", unsafe_allow_html=True)
 
 # ---------- WELCOME SCREEN OR CHAT ----------
 if not st.session_state.conversation_started:
@@ -443,9 +536,21 @@ else:
     st.markdown('<div class="chat-container">', unsafe_allow_html=True)
     for msg in st.session_state.messages:
         if msg["role"] == "user":
-            st.markdown(f'<div class="user-message">{msg["content"]}</div>', unsafe_allow_html=True)
+            st.markdown(f'''
+            <div class="message-row user">
+                <div class="avatar user">U</div>
+                <div class="user-message">{msg["content"]}</div>
+            </div>
+            ''', unsafe_allow_html=True)
         else:
-            st.markdown(f'<div class="bot-message">{msg["content"]}</div>', unsafe_allow_html=True)
+            st.markdown(f'''
+            <div class="message-row bot">
+                <div class="avatar bot">
+                    <img src="https://raw.githubusercontent.com/yourusername/yourrepo/main/Trust%20Logic%20Logo_RGB_Standard.png" alt="TrustLogic">
+                </div>
+                <div class="bot-message">{msg["content"]}</div>
+            </div>
+            ''', unsafe_allow_html=True)
     st.markdown('</div>', unsafe_allow_html=True)
 
 # ---------- USER INPUT ----------
@@ -459,26 +564,39 @@ st.session_state.conversation_started = True
 
 # Add user message
 st.session_state.messages.append({"role": "user", "content": user_query})
-st.markdown(f'<div class="user-message">{user_query}</div>', unsafe_allow_html=True)
+
+# Rerun to hide welcome screen
+st.rerun()
 
 # ---------- RESPONSE LOGIC ----------
-response_text = ""
-placeholder = st.empty()
-
-with st.spinner("Analyzing with TrustLogic intelligence..."):
-    # Knowledge base query
-    kb_query_engine = index.as_query_engine(
-        similarity_top_k=5,
-        text_qa_template=KB_PROMPT_TEMPLATE
-    )
-    kb_response = kb_query_engine.query(user_query)
+if st.session_state.conversation_started and len(st.session_state.messages) > 0:
+    # Display the latest user message
+    latest_user_msg = [msg for msg in st.session_state.messages if msg["role"] == "user"][-1]
+    
+    st.markdown(f'''
+    <div class="message-row user">
+        <div class="avatar user">U</div>
+        <div class="user-message">{latest_user_msg["content"]}</div>
+    </div>
+    ''', unsafe_allow_html=True)
+    
+    response_text = ""
+    placeholder = st.empty()
+
+    with st.spinner("Analyzing with TrustLogic intelligence..."):
+        # Knowledge base query
+        kb_query_engine = index.as_query_engine(
+            similarity_top_k=5,
+            text_qa_template=KB_PROMPT_TEMPLATE
+        )
+        kb_response = kb_query_engine.query(latest_user_msg["content"])
 
-    # Decide if KB is enough or use web search
-    decision_prompt = f"""{SYSTEM_INSTRUCTION}
+        # Decide if KB is enough or use web search
+        decision_prompt = f"""{SYSTEM_INSTRUCTION}
 
 Evaluate if this knowledge base response adequately answers the user's question:
 
-User Question: {user_query}
+User Question: {latest_user_msg["content"]}
 Knowledge Base Response: {str(kb_response)}
 
 Decision criteria:
@@ -488,40 +606,55 @@ Decision criteria:
 
 Reply with only: USE_KB or USE_WEB"""
 
-    decision = client.chat.completions.create(
-        model="gpt-4o",
-        messages=[{"role": "user", "content": decision_prompt}],
-    )
-    decision_text = decision.choices[0].message.content.strip()
-
-    if "USE_KB" in decision_text:
-        response_text = str(kb_response) + FOOTER_MESSAGE
-    else:
-        results = tavily.search(query=user_query, max_results=5)
-        web_results_list = results.get("results", [])
-        web_results = "\n".join([
-            f"• **{r['title']}** — {r['url']}\n  {r.get('content', '')[:300]}..."
-            for r in web_results_list
-        ])
-        prompt = WEB_SEARCH_PROMPT.format(query=user_query, web_results=web_results)
-        
-        stream = client.chat.completions.create(
+        decision = client.chat.completions.create(
             model="gpt-4o",
-            messages=[
-                {"role": "system", "content": SYSTEM_INSTRUCTION},
-                {"role": "user", "content": prompt}
-            ],
-            stream=True
+            messages=[{"role": "user", "content": decision_prompt}],
         )
+        decision_text = decision.choices[0].message.content.strip()
 
-        for chunk in stream:
-            if chunk.choices[0].delta.content:
-                token = chunk.choices[0].delta.content
-                response_text += token
-                placeholder.markdown(f'<div class="bot-message">{response_text}▌</div>', unsafe_allow_html=True)
-
-if "trustlogic.center" not in response_text.lower():
-    response_text += FOOTER_MESSAGE
-
-placeholder.markdown(f'<div class="bot-message">{response_text}</div>', unsafe_allow_html=True)
-st.session_state.messages.append({"role": "assistant", "content": response_text})
+        if "USE_KB" in decision_text:
+            response_text = str(kb_response) + FOOTER_MESSAGE
+        else:
+            results = tavily.search(query=latest_user_msg["content"], max_results=5)
+            web_results_list = results.get("results", [])
+            web_results = "\n".join([
+                f"• **{r['title']}** — {r['url']}\n  {r.get('content', '')[:300]}..."
+                for r in web_results_list
+            ])
+            prompt = WEB_SEARCH_PROMPT.format(query=latest_user_msg["content"], web_results=web_results)
+            
+            stream = client.chat.completions.create(
+                model="gpt-4o",
+                messages=[
+                    {"role": "system", "content": SYSTEM_INSTRUCTION},
+                    {"role": "user", "content": prompt}
+                ],
+                stream=True
+            )
+
+            for chunk in stream:
+                if chunk.choices[0].delta.content:
+                    token = chunk.choices[0].delta.content
+                    response_text += token
+                    placeholder.markdown(f'''
+                    <div class="message-row bot">
+                        <div class="avatar bot">
+                            <img src="https://raw.githubusercontent.com/yourusername/yourrepo/main/Trust%20Logic%20Logo_RGB_Standard.png" alt="TrustLogic">
+                        </div>
+                        <div class="bot-message">{response_text}▌</div>
+                    </div>
+                    ''', unsafe_allow_html=True)
+
+    if "trustlogic.center" not in response_text.lower():
+        response_text += FOOTER_MESSAGE
+
+    placeholder.markdown(f'''
+    <div class="message-row bot">
+        <div class="avatar bot">
+            <img src="https://raw.githubusercontent.com/yourusername/yourrepo/main/Trust%20Logic%20Logo_RGB_Standard.png" alt="TrustLogic">
+        </div>
+        <div class="bot-message">{response_text}</div>
+    </div>
+    ''', unsafe_allow_html=True)
+    
+    st.session_state.messages.append({"role": "assistant", "content": response_text})