Update app.py

app.py

@@ -32,7 +32,7 @@ else:
 # ---------------- STREAMLIT UI SETUP ----------------
 st.set_page_config(page_title="PDF Assistant", page_icon="📘", layout="wide")
 
-# ---------------- CSS (Updated with scroll container) ----------------
+# ---------------- CSS (ChatGPT/DeepSeek style) ----------------
 st.markdown("""
 <style>
 :root {
@@ -42,92 +42,205 @@ st.markdown("""
     --text-color: #f0f2f6;
 }
 
+/* Reset Streamlit default padding */
+.stApp {
+    padding-top: 0 !important;
+}
+
+/* Title at very top */
+h1 {
+    margin-top: 0.5rem !important;
+    margin-bottom: 1rem !important;
+    padding-top: 0 !important;
+}
+
+/* Main container - everything above the fixed input */
+.main-content {
+    position: fixed;
+    top: 0;
+    left: 300px; /* Account for sidebar width */
+    right: 0;
+    bottom: 120px; /* Leave space for fixed input */
+    overflow-y: auto;
+    padding: 0 2rem;
+}
+
+/* Adjust for when sidebar is collapsed */
+@media (max-width: 768px) {
+    .main-content {
+        left: 0;
+    }
+}
+
+/* Chat messages container */
+.chat-messages {
+    padding-bottom: 2rem;
+    max-width: 800px;
+    margin: 0 auto;
+}
+
 .chat-user {
     background: #2d3748;
-    padding: 12px;
-    border-radius: 10px 10px 2px 10px;
-    margin: 10px 0 10px auto;
+    padding: 14px 18px;
+    border-radius: 18px 18px 4px 18px;
+    margin: 16px 0 16px auto;
     max-width: 85%;
     text-align: left;
     color: var(--text-color);
     word-wrap: break-word;
+    line-height: 1.5;
 }
+
 .chat-bot {
     background: var(--primary-color);
-    padding: 12px;
-    border-radius: 10px 10px 10px 2px;
-    margin: 10px auto 10px 0;
+    padding: 14px 18px;
+    border-radius: 18px 18px 18px 4px;
+    margin: 16px auto 16px 0;
     max-width: 85%;
     text-align: left;
     color: #ffffff;
     word-wrap: break-word;
+    line-height: 1.5;
 }
 
 .sources {
     font-size: 0.8em;
     opacity: 0.7;
-    margin-top: 10px;
+    margin-top: 12px;
     border-top: 1px solid rgba(255, 255, 255, 0.1);
-    padding-top: 5px;
+    padding-top: 8px;
 }
 
-.footer {
-    margin-top: 30px;
-    padding: 15px;
-    background-color: var(--secondary-background-color);
+/* FIXED INPUT AREA AT BOTTOM - LIKE CHATGPT */
+.fixed-input-area {
+    position: fixed;
+    bottom: 0;
+    left: 300px;
+    right: 0;
+    background: var(--background-color);
+    padding: 1.5rem 2rem;
+    border-top: 1px solid rgba(255, 255, 255, 0.15);
+    z-index: 1000;
+    backdrop-filter: blur(10px);
+    box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.3);
+}
+
+@media (max-width: 768px) {
+    .fixed-input-area {
+        left: 0;
+    }
+}
+
+.input-container {
+    max-width: 800px;
+    margin: 0 auto;
+    position: relative;
+}
+
+.input-wrapper {
+    background: var(--secondary-background-color);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    border-radius: 24px;
+    padding: 4px;
+    display: flex;
+    align-items: center;
+    transition: all 0.3s ease;
+}
+
+.input-wrapper:focus-within {
+    border-color: var(--primary-color);
+    box-shadow: 0 0 0 2px rgba(30, 58, 138, 0.3);
+}
+
+.chat-input {
+    flex: 1;
+    background: transparent;
+    border: none;
     color: var(--text-color);
+    padding: 12px 16px;
+    font-size: 1rem;
+    outline: none;
+}
+
+.chat-input::placeholder {
+    color: rgba(255, 255, 255, 0.5);
+}
+
+.send-button {
+    background: var(--primary-color);
+    color: white;
+    border: none;
+    border-radius: 50%;
+    width: 40px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    margin-right: 4px;
+    transition: all 0.2s ease;
+}
+
+.send-button:hover:not(:disabled) {
+    background: #2d4bb5;
+    transform: scale(1.05);
+}
+
+.send-button:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+/* Empty state */
+.empty-state {
+    text-align: center;
+    color: #888;
+    padding: 100px 20px;
+    font-style: italic;
+    font-size: 1.2em;
+}
+
+/* Sidebar adjustments */
+section[data-testid="stSidebar"] {
+    padding-top: 2rem;
+}
+
+/* Footer - positioned above input */
+.footer {
+    margin-top: 2rem;
+    padding: 1rem;
     text-align: center;
+    color: var(--text-color);
     font-size: 0.85em;
-    border-top: 1px solid rgba(255, 255, 255, 0.1);
+    opacity: 0.7;
 }
+
 .footer a {
     color: var(--primary-color);
     text-decoration: none;
     font-weight: bold;
 }
+
 .footer a:hover {
     text-decoration: underline;
 }
 
-/* Main container to control layout */
-.main-container {
-    display: flex;
-    flex-direction: column;
-    height: 100vh;
+/* Scrollbar styling */
+::-webkit-scrollbar {
+    width: 8px;
 }
 
-/* Chat container that grows and scrolls */
-.chat-container {
-    flex: 1;
-    overflow-y: auto;
-    padding: 15px;
-    margin-bottom: 20px;
-    border: 1px solid rgba(255, 255, 255, 0.1);
-    border-radius: 8px;
-    background-color: rgba(30, 30, 30, 0.05);
+::-webkit-scrollbar-track {
+    background: transparent;
 }
 
-/* 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;
+::-webkit-scrollbar-thumb {
+    background: rgba(255, 255, 255, 0.2);
+    border-radius: 4px;
 }
 
-/* Empty state styling */
-.empty-state {
-    text-align: center;
-    color: #888;
-    padding: 60px 20px;
-    font-style: italic;
-}
-
-/* Smooth scrolling */
-.chat-container {
-    scroll-behavior: smooth;
+::-webkit-scrollbar-thumb:hover {
+    background: rgba(255, 255, 255, 0.3);
 }
 </style>
 """, unsafe_allow_html=True)
@@ -257,54 +370,55 @@ FINAL ANSWER:
     except Exception as e:
         return None, 0, f"General error: {str(e)}"
 
-# ---------------- UI COMPONENTS ----------------
-st.title("📘 PDF Assistant")
+# ---------------- MAIN LAYOUT ----------------
 
-# Sidebar Controls
+# Sidebar Controls - FIRST, so it appears on left
 with st.sidebar:
-    st.header("Controls")
+    st.header("📘 PDF Assistant")
+    st.markdown("---")
     st.button("🗑️ Clear Chat History", on_click=clear_chat_history, use_container_width=True)
     st.button("🔥 Clear PDF Memory", on_click=clear_memory, use_container_width=True)
     
     st.markdown("---")
-    if st.session_state.uploaded_file_name:
-        st.success(f"✅ **Active PDF:**\n `{st.session_state.uploaded_file_name}`")
-    else:
-        st.warning("⬆️ Upload a PDF to start chatting!")
-
-# File Upload
-uploaded = st.file_uploader(
-    "Upload your PDF",
-    type=["pdf"],
-    key=st.session_state.uploader_key
-)
-
-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
+    st.subheader("PDF Upload")
+    uploaded = st.file_uploader(
+        "Choose a PDF file",
+        type=["pdf"],
+        key=st.session_state.uploader_key,
+        label_visibility="collapsed"
+    )
     
-    with st.spinner(f"Processing '{uploaded.name}'..."):
-        chunks_count = process_pdf(uploaded)
+    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
         
-        if chunks_count is not None:
-            st.success(f"✅ PDF processed successfully! {chunks_count} chunks created.")
-            st.session_state.uploaded_file_name = uploaded.name
-        else:
-            st.error("❌ Failed to process PDF")
-            st.session_state.uploaded_file_name = None
+        with st.spinner(f"Processing '{uploaded.name}'..."):
+            chunks_count = process_pdf(uploaded)
+            
+            if chunks_count is not None:
+                st.success(f"✅ PDF processed! {chunks_count} chunks created.")
+                st.session_state.uploaded_file_name = uploaded.name
+            else:
+                st.error("❌ Failed to process PDF")
+                st.session_state.uploaded_file_name = None
+        
+        st.rerun()
     
-    st.rerun()
+    st.markdown("---")
+    if st.session_state.uploaded_file_name:
+        st.success(f"**Active PDF:**\n`{st.session_state.uploaded_file_name}`")
+    else:
+        st.info("⬆️ Upload a PDF to start chatting!")
 
-# Main chat interface
-st.markdown('<div class="main-container">', unsafe_allow_html=True)
+# Main content area (chat messages)
+st.markdown('<div class="main-content">', unsafe_allow_html=True)
 
-# Chat History Display
-st.markdown("## Chat History")
-st.markdown('<div class="chat-container" id="chat-container">', unsafe_allow_html=True)
+# Chat messages
+st.markdown('<div class="chat-messages" id="chat-messages">', 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)
+    st.markdown('<div class="empty-state">Ask a question about your PDF to start the conversation!</div>', unsafe_allow_html=True)
 else:
     # Display all messages
     for i, (role, msg) in enumerate(st.session_state.chat):
@@ -313,31 +427,52 @@ else:
         else:
             st.markdown(f"<div class='chat-bot'>{msg}</div>", unsafe_allow_html=True)
 
-st.markdown('</div>', unsafe_allow_html=True)
+st.markdown('</div>', unsafe_allow_html=True)  # Close chat-messages
 
-# Input area at bottom (like ChatGPT)
-st.markdown('<div class="input-container">', unsafe_allow_html=True)
+# Footer above input
+st.markdown("""
+<div class="footer">
+    Created by <a href="https://www.linkedin.com/in/abhishek-iitr/" target="_blank">Abhishek Saxena</a>
+</div>
+""", unsafe_allow_html=True)
+
+st.markdown('</div>', unsafe_allow_html=True)  # Close main-content
 
-# Chat Input with form for better control
+# FIXED INPUT AREA AT BOTTOM - LIKE CHATGPT/DEEPSEEK
+st.markdown("""
+<div class="fixed-input-area">
+    <div class="input-container">
+        <div class="input-wrapper">
+""", unsafe_allow_html=True)
+
+# Chat Input - this is now inside the fixed area
 disabled_input = st.session_state.uploaded_file_name is None or client is None
 
-# Create a form for chat input
+# Create a form for the input
 with st.form(key="chat_form", clear_on_submit=True):
-    col1, col2 = st.columns([6, 1])
+    col1, col2 = st.columns([10, 1])
     with col1:
         question = st.text_input(
-            "Ask a question about the loaded PDF:",
+            "Type your question",
             key="question_input",
             disabled=disabled_input,
             label_visibility="collapsed",
-            placeholder="Type your question here...",
-            help="Press Enter or click Send to ask"
+            placeholder="Ask anything about your PDF document...",
+            help="Press Enter to send"
         )
     with col2:
-        submit_button = st.form_submit_button("➤", disabled=disabled_input, use_container_width=True, help="Send message")
+        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
+st.markdown("""
+        </div>
+    </div>
+</div>
+""", unsafe_allow_html=True)
 
 # Handle form submission
 if submit_button and question:
@@ -354,45 +489,36 @@ if submit_button and question:
         else:
             st.session_state.chat.append(("bot", f"🔴 **Error:** {error}"))
     
-    # Update message count
+    # Update message count for scroll detection
     st.session_state.last_message_count = len(st.session_state.chat)
     st.rerun()
 
-# Footer
-footer_html = """
-<div class="footer">
-    Created by <a href="https://www.linkedin.com/in/abhishek-iitr/" target="_blank">Abhishek Saxena</a>
-</div>
-"""
-st.markdown(footer_html, unsafe_allow_html=True)
-
-# AUTOSCROLL FIX: Check if new messages were added and trigger scroll
+# AUTOSCROLL - Scroll to bottom when new messages are added
 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
+    // Scroll to bottom when new messages are added
     setTimeout(() => {
-        const chatContainer = document.getElementById('chat-container');
-        if (chatContainer) {
-            chatContainer.scrollTop = chatContainer.scrollHeight;
+        // Scroll the entire main content area
+        const mainContent = document.querySelector('.main-content');
+        if (mainContent) {
+            mainContent.scrollTop = mainContent.scrollHeight;
         }
     }, 100);
     </script>
     """, unsafe_allow_html=True)
 else:
-    # Initial scroll on load
+    # Initial scroll to bottom on page load
     st.markdown("""
     <script>
-    // Initial scroll to bottom on page load
+    // Initial scroll to bottom
     document.addEventListener('DOMContentLoaded', function() {
         setTimeout(() => {
-            const chatContainer = document.getElementById('chat-container');
-            if (chatContainer) {
-                chatContainer.scrollTop = chatContainer.scrollHeight;
+            const mainContent = document.querySelector('.main-content');
+            if (mainContent) {
+                mainContent.scrollTop = mainContent.scrollHeight;
             }
         }, 300);
     });