Implement PDF removal functionality and update UI with remove button

app.py

@@ -109,6 +109,32 @@ def load_session(session_id, model_name="meta-llama/llama-4-scout-17b-16e-instru
         print(f"Error loading session: {str(e)}")
         return None, False
 
+# Function to remove PDF file
+def remove_pdf_file(session_id):
+    try:
+        # Check if the session exists
+        session_path = f"{UPLOAD_DIR}/{session_id}_session.pkl"
+        if os.path.exists(session_path):
+            # Load session data
+            with open(session_path, "rb") as f:
+                data = pickle.load(f)
+            
+            # Delete PDF file if it exists
+            if data.get("file_path") and os.path.exists(data["file_path"]):
+                os.remove(data["file_path"])
+            
+            # Remove session file
+            os.remove(session_path)
+        
+        # Remove from memory if exists
+        if session_id in sessions:
+            del sessions[session_id]
+            
+        return True
+    except Exception as e:
+        print(f"Error removing PDF file: {str(e)}")
+        return False
+
 # Mount static files (we'll create these later)
 app.mount("/static", StaticFiles(directory="static"), name="static")
 
@@ -249,6 +275,16 @@ async def clear_history(request: SessionRequest):
     
     return {"status": "success", "message": "Chat history cleared"}
 
+# Route to remove PDF from session
+@app.post("/remove-pdf")
+async def remove_pdf(request: SessionRequest):
+    success = remove_pdf_file(request.session_id)
+    
+    if success:
+        return {"status": "success", "message": "PDF file and session removed successfully"}
+    else:
+        raise HTTPException(status_code=404, detail="Session not found or could not be removed")
+
 # Route to list available models
 @app.get("/models")
 async def get_models():

static/css/styles.css

@@ -33,7 +33,7 @@ body {
 /* App container layout */
 .app-container {
     display: grid;
-    grid-template-columns: 260px 1fr 300px;
+    grid-template-columns: 260px 1fr;
     height: 100vh;
     overflow: hidden;
 }
@@ -151,7 +151,7 @@ body {
     white-space: nowrap;
 }
 
-.btn-clear, .btn-new {
+.btn-clear, .btn-new, .btn-remove {
     padding: 0.75rem;
     border-radius: var(--border-radius);
     border: none;
@@ -170,6 +170,15 @@ body {
     background-color: rgba(239, 68, 68, 0.2);
 }
 
+.btn-remove {
+    background-color: rgba(255, 152, 0, 0.1);
+    color: #ff9800;
+}
+
+.btn-remove:hover {
+    background-color: rgba(255, 152, 0, 0.2);
+}
+
 .btn-new {
     background-color: rgba(37, 99, 235, 0.1);
     color: var(--primary-color);

static/index.html

@@ -44,6 +44,7 @@
                         <span id="current-file-name">No file loaded</span>
                     </div>
                     <button id="clear-history" class="btn-clear">Clear History</button>
+                    <button id="remove-pdf" class="btn-remove">Remove PDF</button>
                     <button id="new-chat" class="btn-new">New Document</button>
                 </div>
             </div>
@@ -102,7 +103,7 @@
         </div>
 
         <!-- Context Sidebar -->
-        <div class="context-sidebar" id="context-sidebar">
+        <div class="context-sidebar hidden" id="context-sidebar">
             <div class="context-header">
                 <h3>Context Used</h3>
                 <button id="toggle-context" class="btn-toggle">

static/js/app.js

@@ -11,6 +11,7 @@ const modelSelect = document.getElementById('model-select');
 const sessionInfo = document.getElementById('session-info');
 const currentFileName = document.getElementById('current-file-name');
 const clearHistoryBtn = document.getElementById('clear-history');
+const removePdfBtn = document.getElementById('remove-pdf');
 const newChatBtn = document.getElementById('new-chat');
 const loadingOverlay = document.getElementById('loading-overlay');
 const loadingText = document.getElementById('loading-text');
@@ -40,6 +41,7 @@ chatInput.addEventListener('input', () => {
     sendButton.disabled = chatInput.value.trim() === '';
 });
 clearHistoryBtn.addEventListener('click', clearChatHistory);
+removePdfBtn.addEventListener('click', removePdf);
 newChatBtn.addEventListener('click', resetApp);
 getStartedBtn.addEventListener('click', () => {
     uploadBox.click();
@@ -344,6 +346,39 @@ async function clearChatHistory() {
     }
 }
 
+async function removePdf() {
+    if (!currentSessionId) return;
+    
+    try {
+        showLoading('Removing PDF from the system...');
+        
+        const response = await fetch('/remove-pdf', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({
+                session_id: currentSessionId
+            })
+        });
+        
+        const data = await response.json();
+        
+        if (data.status === 'success') {
+            // Reset the app
+            resetApp();
+            showError('PDF file has been removed from the system.');
+        } else {
+            showError('Failed to remove PDF: ' + data.detail);
+        }
+    } catch (error) {
+        console.error('Error removing PDF:', error);
+        showError('Failed to remove PDF. Please try again.');
+    } finally {
+        hideLoading();
+    }
+}
+
 function resetApp() {
     // Clear current session
     currentSessionId = null;