Update app.py

app.py

@@ -46,19 +46,21 @@ st.markdown("""
     background: #2d3748;
     padding: 12px;
     border-radius: 10px 10px 2px 10px;
-    margin: 6px 0 6px auto;
+    margin: 10px 0 10px auto;
     max-width: 85%;
-    text-align: right;
+    text-align: left;
     color: var(--text-color);
+    word-wrap: break-word;
 }
 .chat-bot {
     background: var(--primary-color);
     padding: 12px;
     border-radius: 10px 10px 10px 2px;
-    margin: 6px auto 6px 0;
+    margin: 10px auto 10px 0;
     max-width: 85%;
     text-align: left;
     color: #ffffff;
+    word-wrap: break-word;
 }
 
 .sources {
@@ -70,14 +72,11 @@ st.markdown("""
 }
 
 .footer {
-    position: fixed;
-    left: 0;
-    bottom: 0;
-    width: 100%;
+    margin-top: 30px;
+    padding: 15px;
     background-color: var(--secondary-background-color);
     color: var(--text-color);
     text-align: center;
-    padding: 10px;
     font-size: 0.85em;
     border-top: 1px solid rgba(255, 255, 255, 0.1);
 }
@@ -90,35 +89,47 @@ st.markdown("""
     text-decoration: underline;
 }
 
-/* Scroll container for chat history */
+/* Main container to control layout */
+.main-container {
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+}
+
+/* Chat container that grows and scrolls */
 .chat-container {
-    height: 400px;
+    flex: 1;
     overflow-y: auto;
-    padding: 10px;
+    padding: 15px;
+    margin-bottom: 20px;
     border: 1px solid rgba(255, 255, 255, 0.1);
     border-radius: 8px;
-    margin-bottom: 20px;
-    background-color: rgba(30, 30, 30, 0.1);
+    background-color: rgba(30, 30, 30, 0.05);
 }
-</style>
 
-<script>
-// Auto-scroll to bottom of chat when new messages are added
-function scrollToBottom() {
-    const container = document.querySelector('.chat-container');
-    if (container) {
-        container.scrollTop = container.scrollHeight;
-    }
+/* Input area stays at bottom */
+.input-container {
+    position: sticky;
+    bottom: 0;
+    background: var(--background-color);
+    padding: 15px 0;
+    border-top: 1px solid rgba(255, 255, 255, 0.1);
+    z-index: 100;
 }
 
-// Run scroll after the page loads and after each Streamlit rerun
-window.addEventListener('load', scrollToBottom);
+/* Empty state styling */
+.empty-state {
+    text-align: center;
+    color: #888;
+    padding: 60px 20px;
+    font-style: italic;
+}
 
-// Also scroll when Streamlit updates the page
-if (window.parent && window.parent.stq) {
-    window.parent.stq.push(scrollToBottom);
+/* Smooth scrolling */
+.chat-container {
+    scroll-behavior: smooth;
 }
-</script>
+</style>
 """, unsafe_allow_html=True)
 
 # ---------------- SESSION STATE ----------------
@@ -137,13 +148,14 @@ if "uploaded_file_name" not in st.session_state:
 if "uploader_key" not in st.session_state:
     st.session_state.uploader_key = 0
 
-# Initialize question key to track input state
-if "question_submitted" not in st.session_state:
-    st.session_state.question_submitted = ""
+# Track last message count for scroll detection
+if "last_message_count" not in st.session_state:
+    st.session_state.last_message_count = 0
 
 # ---------------- FUNCTIONS ----------------
 def clear_chat_history():
     st.session_state.chat = []
+    st.session_state.last_message_count = 0
 
 def clear_memory():
     st.session_state.vectorstore = None
@@ -270,6 +282,7 @@ uploaded = st.file_uploader(
 if uploaded and uploaded.name != st.session_state.uploaded_file_name:
     st.session_state.uploaded_file_name = None
     st.session_state.chat = []
+    st.session_state.last_message_count = 0
     
     with st.spinner(f"Processing '{uploaded.name}'..."):
         chunks_count = process_pdf(uploaded)
@@ -283,10 +296,32 @@ if uploaded and uploaded.name != st.session_state.uploaded_file_name:
     
     st.rerun()
 
+# Main chat interface
+st.markdown('<div class="main-container">', unsafe_allow_html=True)
+
+# Chat History Display
+st.markdown("## Chat History")
+st.markdown('<div class="chat-container" id="chat-container">', unsafe_allow_html=True)
+
+if not st.session_state.chat:
+    st.markdown('<div class="empty-state">No messages yet. Ask a question to start chatting!</div>', unsafe_allow_html=True)
+else:
+    # Display all messages
+    for i, (role, msg) in enumerate(st.session_state.chat):
+        if role == "user":
+            st.markdown(f"<div class='chat-user'>{msg}</div>", unsafe_allow_html=True)
+        else:
+            st.markdown(f"<div class='chat-bot'>{msg}</div>", unsafe_allow_html=True)
+
+st.markdown('</div>', unsafe_allow_html=True)
+
+# Input area at bottom (like ChatGPT)
+st.markdown('<div class="input-container">', unsafe_allow_html=True)
+
 # Chat Input with form for better control
 disabled_input = st.session_state.uploaded_file_name is None or client is None
 
-# Use a form to handle input submission and clearing
+# Create a form for chat input
 with st.form(key="chat_form", clear_on_submit=True):
     col1, col2 = st.columns([6, 1])
     with col1:
@@ -295,10 +330,14 @@ with st.form(key="chat_form", clear_on_submit=True):
             key="question_input",
             disabled=disabled_input,
             label_visibility="collapsed",
-            placeholder="Type your question here..."
+            placeholder="Type your question here...",
+            help="Press Enter or click Send to ask"
         )
     with col2:
-        submit_button = st.form_submit_button("Send", disabled=disabled_input, use_container_width=True)
+        submit_button = st.form_submit_button("➤", disabled=disabled_input, use_container_width=True, help="Send message")
+
+st.markdown('</div>', unsafe_allow_html=True)  # Close input-container
+st.markdown('</div>', unsafe_allow_html=True)  # Close main-container
 
 # Handle form submission
 if submit_button and question:
@@ -315,37 +354,10 @@ if submit_button and question:
         else:
             st.session_state.chat.append(("bot", f"🔴 **Error:** {error}"))
     
-    # The form already clears the input (clear_on_submit=True)
+    # Update message count
+    st.session_state.last_message_count = len(st.session_state.chat)
     st.rerun()
 
-# Display Chat History in scrollable container
-st.markdown("## Chat History")
-with st.container():
-    st.markdown('<div class="chat-container">', unsafe_allow_html=True)
-    
-    if not st.session_state.chat:
-        st.markdown("<div style='text-align: center; color: #888; padding: 40px;'>No messages yet. Ask a question to start chatting!</div>", unsafe_allow_html=True)
-    else:
-        # Display all messages
-        for role, msg in st.session_state.chat:
-            if role == "user":
-                st.markdown(f"<div class='chat-user'>{msg}</div>", unsafe_allow_html=True)
-            else:
-                st.markdown(f"<div class='chat-bot'>{msg}</div>", unsafe_allow_html=True)
-    
-    st.markdown('</div>', unsafe_allow_html=True)
-    
-    # Add JavaScript to auto-scroll
-    st.markdown("""
-    <script>
-    // Auto-scroll to bottom
-    const container = document.querySelector('.chat-container');
-    if (container) {
-        container.scrollTop = container.scrollHeight;
-    }
-    </script>
-    """, unsafe_allow_html=True)
-
 # Footer
 footer_html = """
 <div class="footer">
@@ -354,15 +366,35 @@ footer_html = """
 """
 st.markdown(footer_html, unsafe_allow_html=True)
 
-# Add auto-scroll JavaScript after footer as well
-st.markdown("""
-<script>
-// Additional scroll trigger for better reliability
-setTimeout(() => {
-    const container = document.querySelector('.chat-container');
-    if (container) {
-        container.scrollTop = container.scrollHeight;
-    }
-}, 100);
-</script>
-""", unsafe_allow_html=True)
+# AUTOSCROLL FIX: Check if new messages were added and trigger scroll
+if len(st.session_state.chat) > st.session_state.last_message_count:
+    # Update the counter
+    st.session_state.last_message_count = len(st.session_state.chat)
+    
+    # Inject JavaScript to scroll to bottom
+    st.markdown("""
+    <script>
+    // Wait a tiny bit for DOM to update, then scroll
+    setTimeout(() => {
+        const chatContainer = document.getElementById('chat-container');
+        if (chatContainer) {
+            chatContainer.scrollTop = chatContainer.scrollHeight;
+        }
+    }, 100);
+    </script>
+    """, unsafe_allow_html=True)
+else:
+    # Initial scroll on load
+    st.markdown("""
+    <script>
+    // Initial scroll to bottom on page load
+    document.addEventListener('DOMContentLoaded', function() {
+        setTimeout(() => {
+            const chatContainer = document.getElementById('chat-container');
+            if (chatContainer) {
+                chatContainer.scrollTop = chatContainer.scrollHeight;
+            }
+        }, 300);
+    });
+    </script>
+    """, unsafe_allow_html=True)