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 (ChatGPT/DeepSeek style) ----------------
+# ---------------- CSS (ChatGPT/DeepSeek style with fixes) ----------------
 st.markdown("""
 <style>
 :root {
@@ -42,41 +42,78 @@ st.markdown("""
     --text-color: #f0f2f6;
 }
 
-/* Reset Streamlit default padding */
+/* Fix Streamlit default layout */
 .stApp {
     padding-top: 0 !important;
 }
 
-/* Title at very top */
-h1 {
-    margin-top: 0.5rem !important;
-    margin-bottom: 1rem !important;
-    padding-top: 0 !important;
+/* FIXED LEFT PANEL - always visible */
+section[data-testid="stSidebar"] {
+    position: fixed !important;
+    height: 100vh !important;
+    overflow-y: auto !important;
+    padding-top: 1rem !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;
+/* Main content area - takes full width minus sidebar */
+.main {
+    margin-left: 300px !important;
+}
+
+@media (max-width: 768px) {
+    section[data-testid="stSidebar"] {
+        position: relative !important;
+        height: auto !important;
+    }
+    .main {
+        margin-left: 0 !important;
+    }
+}
+
+/* Fixed input area at bottom */
+.fixed-input-container {
+    position: fixed !important;
+    bottom: 0 !important;
+    left: 300px !important;
+    right: 0 !important;
+    background: var(--background-color) !important;
+    padding: 1.5rem 2rem !important;
+    border-top: 1px solid rgba(255, 255, 255, 0.15) !important;
+    z-index: 1000 !important;
+    backdrop-filter: blur(10px) !important;
+    box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.3) !important;
+}
+
+@media (max-width: 768px) {
+    .fixed-input-container {
+        left: 0 !important;
+    }
+}
+
+/* Scrollable chat area above fixed input */
+.chat-scroll-area {
+    position: fixed !important;
+    top: 0 !important;
+    left: 300px !important;
+    right: 0 !important;
+    bottom: 120px !important; /* Space for fixed input */
+    overflow-y: auto !important;
+    padding: 1rem 2rem !important;
 }
 
-/* Adjust for when sidebar is collapsed */
 @media (max-width: 768px) {
-    .main-content {
-        left: 0;
+    .chat-scroll-area {
+        left: 0 !important;
+        position: relative !important;
+        height: calc(100vh - 180px) !important;
     }
 }
 
-/* Chat messages container */
+/* Chat messages styling */
 .chat-messages {
-    padding-bottom: 2rem;
     max-width: 800px;
     margin: 0 auto;
+    padding-bottom: 2rem;
 }
 
 .chat-user {
@@ -111,48 +148,27 @@ h1 {
     padding-top: 8px;
 }
 
-/* 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 {
+/* Input styling */
+.input-wrapper {
     max-width: 800px;
     margin: 0 auto;
-    position: relative;
 }
 
-.input-wrapper {
+.input-box {
     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 {
+.input-box:focus-within {
     border-color: var(--primary-color);
     box-shadow: 0 0 0 2px rgba(30, 58, 138, 0.3);
 }
 
-.chat-input {
+.chat-input-field {
     flex: 1;
     background: transparent;
     border: none;
@@ -162,11 +178,11 @@ h1 {
     outline: none;
 }
 
-.chat-input::placeholder {
+.chat-input-field::placeholder {
     color: rgba(255, 255, 255, 0.5);
 }
 
-.send-button {
+.send-btn {
     background: var(--primary-color);
     color: white;
     border: none;
@@ -181,12 +197,12 @@ h1 {
     transition: all 0.2s ease;
 }
 
-.send-button:hover:not(:disabled) {
+.send-btn:hover:not(:disabled) {
     background: #2d4bb5;
     transform: scale(1.05);
 }
 
-.send-button:disabled {
+.send-btn:disabled {
     opacity: 0.5;
     cursor: not-allowed;
 }
@@ -195,33 +211,34 @@ h1 {
 .empty-state {
     text-align: center;
     color: #888;
-    padding: 100px 20px;
+    padding: 60px 20px;
     font-style: italic;
-    font-size: 1.2em;
+    font-size: 1.1em;
+    margin-top: 40px;
 }
 
-/* Sidebar adjustments */
-section[data-testid="stSidebar"] {
-    padding-top: 2rem;
-}
-
-/* Footer - positioned above input */
-.footer {
+/* Creator info in sidebar */
+.creator-info {
     margin-top: 2rem;
-    padding: 1rem;
+    padding-top: 1rem;
+    border-top: 1px solid rgba(255, 255, 255, 0.1);
     text-align: center;
+}
+
+.creator-name {
+    font-size: 0.9em;
     color: var(--text-color);
-    font-size: 0.85em;
-    opacity: 0.7;
+    opacity: 0.8;
+    margin-bottom: 5px;
 }
 
-.footer a {
-    color: var(--primary-color);
+.creator-link {
+    font-size: 0.85em;
+    color: var(--primary-color) !important;
     text-decoration: none;
-    font-weight: bold;
 }
 
-.footer a:hover {
+.creator-link:hover {
     text-decoration: underline;
 }
 
@@ -242,6 +259,13 @@ section[data-testid="stSidebar"] {
 ::-webkit-scrollbar-thumb:hover {
     background: rgba(255, 255, 255, 0.3);
 }
+
+/* Make sidebar content scrollable */
+.sidebar-content {
+    height: calc(100vh - 150px);
+    overflow-y: auto;
+    padding-right: 10px;
+}
 </style>
 """, unsafe_allow_html=True)
 
@@ -370,17 +394,31 @@ FINAL ANSWER:
     except Exception as e:
         return None, 0, f"General error: {str(e)}"
 
-# ---------------- MAIN LAYOUT ----------------
+# ==================== LAYOUT ====================
 
-# Sidebar Controls - FIRST, so it appears on left
+# ==================== LEFT PANEL (FIXED) ====================
 with st.sidebar:
-    st.header("📘 PDF Assistant")
+    # Title and creator info
+    st.markdown("""
+    <h1 style='text-align: center; margin-bottom: 0.5rem;'>📘 PDF Assistant</h1>
+    <div class='creator-info'>
+        <div class='creator-name'>Created by</div>
+        <a href='https://www.linkedin.com/in/abhishek-iitr/' target='_blank' class='creator-link'>Abhishek Saxena</a>
+    </div>
+    """, unsafe_allow_html=True)
+    
     st.markdown("---")
+    
+    # Controls section
+    st.subheader("Controls")
     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("---")
-    st.subheader("PDF Upload")
+    
+    # PDF Upload section
+    st.subheader("Upload PDF")
+    
     uploaded = st.file_uploader(
         "Choose a PDF file",
         type=["pdf"],
@@ -397,7 +435,7 @@ with st.sidebar:
             chunks_count = process_pdf(uploaded)
             
             if chunks_count is not None:
-                st.success(f"✅ PDF processed! {chunks_count} chunks created.")
+                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")
@@ -406,16 +444,19 @@ with st.sidebar:
         st.rerun()
     
     st.markdown("---")
+    
+    # Status section
+    st.subheader("Status")
     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 content area (chat messages)
-st.markdown('<div class="main-content">', unsafe_allow_html=True)
+# ==================== RIGHT PANEL - SCROLLABLE CHAT AREA ====================
+st.markdown('<div class="chat-scroll-area" id="chat-scroll-area">', unsafe_allow_html=True)
 
-# Chat messages
-st.markdown('<div class="chat-messages" id="chat-messages">', unsafe_allow_html=True)
+# Chat messages container
+st.markdown('<div class="chat-messages">', unsafe_allow_html=True)
 
 if not st.session_state.chat:
     st.markdown('<div class="empty-state">Ask a question about your PDF to start the conversation!</div>', unsafe_allow_html=True)
@@ -428,27 +469,17 @@ else:
             st.markdown(f"<div class='chat-bot'>{msg}</div>", unsafe_allow_html=True)
 
 st.markdown('</div>', unsafe_allow_html=True)  # Close chat-messages
+st.markdown('</div>', unsafe_allow_html=True)  # Close chat-scroll-area
 
-# 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
-
-# FIXED INPUT AREA AT BOTTOM - LIKE CHATGPT/DEEPSEEK
+# ==================== FIXED INPUT AT BOTTOM ====================
 st.markdown("""
-<div class="fixed-input-area">
-    <div class="input-container">
-        <div class="input-wrapper">
+<div class="fixed-input-container">
+    <div class="input-wrapper">
 """, unsafe_allow_html=True)
 
-# Chat Input - this is now inside the fixed area
+# Chat Input - fixed at bottom
 disabled_input = st.session_state.uploaded_file_name is None or client is None
 
-# Create a form for the input
 with st.form(key="chat_form", clear_on_submit=True):
     col1, col2 = st.columns([10, 1])
     with col1:
@@ -469,12 +500,11 @@ with st.form(key="chat_form", clear_on_submit=True):
         )
 
 st.markdown("""
-        </div>
     </div>
 </div>
 """, unsafe_allow_html=True)
 
-# Handle form submission
+# ==================== FORM SUBMISSION HANDLING ====================
 if submit_button and question:
     # Add user query to chat history
     st.session_state.chat.append(("user", question))
@@ -493,7 +523,7 @@ if submit_button and question:
     st.session_state.last_message_count = len(st.session_state.chat)
     st.rerun()
 
-# AUTOSCROLL - Scroll to bottom when new messages are added
+# ==================== AUTO-SCROLL JAVASCRIPT ====================
 if len(st.session_state.chat) > st.session_state.last_message_count:
     st.session_state.last_message_count = len(st.session_state.chat)
     
@@ -501,10 +531,9 @@ if len(st.session_state.chat) > st.session_state.last_message_count:
     <script>
     // Scroll to bottom when new messages are added
     setTimeout(() => {
-        // Scroll the entire main content area
-        const mainContent = document.querySelector('.main-content');
-        if (mainContent) {
-            mainContent.scrollTop = mainContent.scrollHeight;
+        const chatArea = document.getElementById('chat-scroll-area');
+        if (chatArea) {
+            chatArea.scrollTop = chatArea.scrollHeight;
         }
     }, 100);
     </script>
@@ -516,9 +545,9 @@ else:
     // Initial scroll to bottom
     document.addEventListener('DOMContentLoaded', function() {
         setTimeout(() => {
-            const mainContent = document.querySelector('.main-content');
-            if (mainContent) {
-                mainContent.scrollTop = mainContent.scrollHeight;
+            const chatArea = document.getElementById('chat-scroll-area');
+            if (chatArea) {
+                chatArea.scrollTop = chatArea.scrollHeight;
             }
         }, 300);
     });