chore: clean up done

Backend/app/api/v1/endpoints/notes.py

@@ -1,4 +1,4 @@
-from fastapi import APIRouter, Depends, HTTPException, status, File, UploadFile, Response
+from fastapi import APIRouter, Depends, HTTPException, status, File, UploadFile, Response, Body
 from sqlalchemy.ext.asyncio import AsyncSession
 from app.models import User
 from app.models.tables import PDFData
@@ -345,4 +345,66 @@ async def get_pdf_content(
         raise HTTPException(status_code=404, detail="Note not found")
 
     # Return raw bytes with PDF mime type so browser/frontend can render it
-    return Response(content=pdf.pdf_blob, media_type="application/pdf")
+    return Response(content=pdf.pdf_blob, media_type="application/pdf")
+
+
+# -------------------------
+# NEW: Delete Note
+# -------------------------
+@router.delete("/{note_id}")
+async def delete_note(
+    note_id: int,
+    db: AsyncSession = Depends(get_db),
+    current_user: User = Depends(get_current_user),
+    collection: Collection = Depends(get_chroma_collection)
+):
+    # 1. Check ownership
+    result = await db.execute(
+        select(PDFData).where(PDFData.id == note_id, PDFData.user_id == current_user.id)
+    )
+    note = result.scalar_one_or_none()
+    
+    if not note:
+        raise HTTPException(status_code=404, detail="Note not found")
+
+    # 2. Delete from ChromaDB (using metadata filter)
+    try:
+        # This deletes all chunks where metadata field 'pdf_id' matches
+        await collection.delete(where={"pdf_id": note_id})
+    except Exception as e:
+        print(f"Error deleting from Chroma: {e}")
+        # Proceed to delete from DB even if Chroma fails to avoid sync issues
+
+    # 3. Delete from Database (Cascades to Sessions/Messages)
+    await db.delete(note)
+    await db.commit()
+
+    return {"status": "success", "message": "Note deleted"}
+
+# -------------------------
+# NEW: Rename Note
+# -------------------------
+@router.put("/{note_id}")
+async def rename_note(
+    note_id: int,
+    new_filename: str = Body(..., embed=True), # Expects JSON: { "new_filename": "foo.pdf" }
+    db: AsyncSession = Depends(get_db),
+    current_user: User = Depends(get_current_user)
+):
+    result = await db.execute(
+        select(PDFData).where(PDFData.id == note_id, PDFData.user_id == current_user.id)
+    )
+    note = result.scalar_one_or_none()
+    
+    if not note:
+        raise HTTPException(status_code=404, detail="Note not found")
+
+    note.filename = new_filename
+    await db.commit()
+    await db.refresh(note)
+    
+    return {
+        "id": note.id,
+        "filename": note.filename,
+        "created_at": note.created_at
+    }

Frontend/src/App.tsx

@@ -1,5 +1,11 @@
 import React from "react";
-import { BrowserRouter as Router, Routes, Route, Navigate } from "react-router-dom";
+
+import {
+  BrowserRouter as Router,
+  Routes,
+  Route,
+  Navigate,
+} from "react-router-dom";
 
 import Home from "./pages/home";
 import Dashboard from "./pages/dashboard";
@@ -10,15 +16,13 @@ import Sidebar from "./components/dashboard/Sidebar";
 
 import { AuthProvider, useAuth } from "./components/context/AuthContext";
 import ProtectedRoute from "./routes/ProtectedRoute";
+import { Loader2 } from "lucide-react";
 
+// Layout for authenticated users
 const DashboardLayout = () => {
-  // 1. Retrieve both logout and username from the AuthContext
-
   return (
     <div className="flex h-screen bg-gray-100">
-      {/* 2. Pass the retrieved username prop to the Sidebar */}
-      <Sidebar/>
-
+      <Sidebar />
       <main className="flex-1 overflow-y-auto">
         <Routes>
           <Route path="/dashboard" element={<Dashboard />} />
@@ -32,36 +36,53 @@ const DashboardLayout = () => {
   );
 };
 
-const App: React.FC = () => {
-  return (
-    <AuthProvider>
-      <Router>
-        <Routes>
-          {/* Public Home */}
-          <Route path="/" element={<HomeWrapper />} />
+// Wrapper for Home to handle "If logged in, go to dashboard" logic
+const HomeWrapper = () => {
+  const { isAuthenticated, login } = useAuth();
+  if (isAuthenticated) return <Navigate to="/dashboard" replace />;
+  return <Home onLogin={login} />;
+};
 
-          {/* Protected all dashboard routes */}
-          <Route
-            path="/*"
-            element={
-              <ProtectedRoute>
-                <DashboardLayout />
-              </ProtectedRoute>
-            }
-          />
+// Main Routing Logic extracted to use AuthContext
+const AppRoutes = () => {
+  const { isLoading } = useAuth();
 
-        </Routes>
-      </Router>
-    </AuthProvider>
-  );
-};
+  // 1. Show a loading spinner while checking auth state
+  // This prevents the "flash" of redirecting to home/dashboard on reload
+  if (isLoading) {
+    return (
+      <div className="flex h-screen w-full items-center justify-center bg-gray-900 text-white">
+        <Loader2 className="h-10 w-10 animate-spin text-blue-500" />
+      </div>
+    );
+  }
 
-const HomeWrapper = () => {
-  const { isAuthenticated, login } = useAuth();
+  return (
+    <Router>
+      <Routes>
+        {/* Public Home */}
+        <Route path="/" element={<HomeWrapper />} />
 
-  if (isAuthenticated) return <Navigate to="/dashboard" replace />;
+        {/* Protected Dashboard Routes */}
+        <Route
+          path="/*"
+          element={
+            <ProtectedRoute>
+              <DashboardLayout />
+            </ProtectedRoute>
+          }
+        />
+      </Routes>
+    </Router>
+  );
+};
 
-  return <Home onLogin={login} />;
+const App: React.FC = () => {
+  return (
+    <AuthProvider>
+      <AppRoutes />
+    </AuthProvider>
+  );
 };
 
-export default App;
+export default App;

Frontend/src/api/notesService.ts

@@ -1,4 +1,3 @@
-// Frontend/src/api/notesService.ts
 import API from "./api"; // Your existing Axios instance
 import { type AxiosResponse } from "axios";
 
@@ -30,7 +29,7 @@ export const fetchNotes = async (): Promise<Note[]> => {
 // 2. Upload a new PDF
 export const uploadNote = async (file: File): Promise<Note> => {
   const formData = new FormData();
-  formData.append("file", file); // Must match backend: file: UploadFile
+  formData.append("file", file);
 
   const response = await API.post("/notes/upload_notes", formData, {
     headers: {
@@ -38,28 +37,31 @@ export const uploadNote = async (file: File): Promise<Note> => {
     },
   });
 
-  // The backend returns complex data, but we just need the basics for the list update
-  // Mapping the response to our Note interface structure locally if needed,
-  // or you can adjust the backend response.
-  // For now, we assume the backend returns the created doc info or we construct it.
   return {
     id: response.data.doc_id,
     filename: response.data.filename,
-    created_at: new Date().toISOString(), // Optimistic timestamp
+    created_at: new Date().toISOString(),
   };
 };
 
-// 3. Get the URL for the PDF content (for the viewer)
-// We don't use Axios here because we want a direct URL for the iframe/object
+// 3. NEW: Delete a note
+export const deleteNote = async (noteId: number) => {
+  const response = await API.delete(`/notes/${noteId}`);
+  return response.data;
+};
+
+// 4. NEW: Rename a note
+export const renameNote = async (noteId: number, newName: string) => {
+  const response = await API.put(`/notes/${noteId}`, { new_filename: newName });
+  return response.data;
+};
+
+// 5. Get the URL for the PDF content (for the viewer)
 export const getNoteContentUrl = (noteId: number): string => {
-  const token = localStorage.getItem("token");
-  // We append the token as a query param or handle auth differently for iframes.
-  // Since standard Bearer auth is hard with simple <iframe src="...">,
-  // we will fetch the blob via JS and create an ObjectURL in the component.
   return `/api/v1/notes/${noteId}/content`;
 };
 
-// 4. Fetch the Blob directly (Better for Auth)
+// 6. Fetch the Blob directly
 export const fetchNoteBlob = async (noteId: number): Promise<Blob> => {
   const response = await API.get(`/notes/${noteId}/content`, {
     responseType: "blob",
@@ -67,7 +69,7 @@ export const fetchNoteBlob = async (noteId: number): Promise<Blob> => {
   return response.data;
 };
 
-// 5. Create or Get Chat Session
+// 7. Create or Get Chat Session
 export const createChatSession = async (
   pdfId: number,
   name: string = "New Chat"
@@ -76,7 +78,7 @@ export const createChatSession = async (
   return response.data;
 };
 
-// 6. Get Chat History
+// 8. Get Chat History
 export const fetchChatHistory = async (sessionId: string) => {
   const response = await API.get(`/notes/history/${sessionId}`);
   return response.data;
@@ -87,7 +89,7 @@ export const fetchSessions = async (pdfId: number): Promise<Session[]> => {
   return response.data;
 };
 
-// 7. Stream Chat (Special Handling using fetch API)
+// 9. Stream Chat (Special Handling using fetch API)
 export const streamChatRequest = async (
   sessionId: string,
   userMessage: string,
@@ -107,9 +109,6 @@ export const streamChatRequest = async (
           Authorization: `Bearer ${token}`,
           "Content-Type": "application/json",
         },
-        // Note: Your backend expects query params for user_prompt based on the route signature:
-        // @router.post("/chat/{session_id}") async def chat_session(..., user_prompt: str, ...)
-        // It is NOT a JSON body in your current backend code (check notes.py:207).
       }
     );
 

Frontend/src/components/context/AuthContext.tsx

@@ -2,6 +2,7 @@ import React, { createContext, useContext, useState, useEffect } from "react";
 
 interface AuthContextType {
   isAuthenticated: boolean;
+  isLoading: boolean; // <--- Added: Tracks if we are still checking local storage
   username: string;
   login: (name: string, token: string) => void;
   logout: () => void;
@@ -12,15 +13,20 @@ const AuthContext = createContext<AuthContextType | undefined>(undefined);
 export const AuthProvider = ({ children }: { children: React.ReactNode }) => {
   const [isAuthenticated, setIsAuthenticated] = useState(false);
   const [username, setUsername] = useState("Guest");
+  const [isLoading, setIsLoading] = useState(true); // <--- Start loading immediately
 
-  // ✅ FIX: Check localStorage on mount to persist session
   useEffect(() => {
+    // Check local storage on initial load
     const token = localStorage.getItem("token");
     const storedUser = localStorage.getItem("username");
+
     if (token) {
       setIsAuthenticated(true);
       if (storedUser) setUsername(storedUser);
     }
+
+    // Done checking, stop loading
+    setIsLoading(false);
   }, []);
 
   const login = (name: string, token: string) => {
@@ -38,7 +44,9 @@ export const AuthProvider = ({ children }: { children: React.ReactNode }) => {
   };
 
   return (
-    <AuthContext.Provider value={{ isAuthenticated, username, login, logout }}>
+    <AuthContext.Provider
+      value={{ isAuthenticated, isLoading, username, login, logout }}
+    >
       {children}
     </AuthContext.Provider>
   );

Frontend/src/pages/note.tsx

@@ -9,6 +9,10 @@ import {
   Loader2,
   FileText,
   MessageSquare,
+  GripVertical,
+  Trash2,
+  Edit2,
+  Check,
 } from "lucide-react";
 import {
   fetchNotes,
@@ -17,7 +21,9 @@ import {
   createChatSession,
   streamChatRequest,
   fetchChatHistory,
-  fetchSessions, // ✅ Import this
+  fetchSessions,
+  deleteNote,
+  renameNote,
   type Note,
   type ChatMessage,
 } from "../api/notesService";
@@ -29,8 +35,8 @@ const Notes: React.FC = () => {
   const [isUploading, setIsUploading] = useState(false);
   const fileInputRef = useRef<HTMLInputElement>(null);
 
-  // ✅ Resizable Chat State
-  const [chatWidth, setChatWidth] = useState(450); // Default width
+  // --- Resizable Chat State ---
+  const [chatWidth, setChatWidth] = useState(450);
   const [isResizing, setIsResizing] = useState(false);
 
   // --- Data State ---
@@ -38,29 +44,45 @@ const Notes: React.FC = () => {
   const [currentNote, setCurrentNote] = useState<Note | null>(null);
   const [pdfUrl, setPdfUrl] = useState<string | null>(null);
 
+  // --- Edit/Rename State ---
+  const [editingNoteId, setEditingNoteId] = useState<number | null>(null);
+  const [editName, setEditName] = useState("");
+
   // --- Chat State ---
   const [messages, setMessages] = useState<ChatMessage[]>([]);
   const [inputMessage, setInputMessage] = useState("");
   const [sessionId, setSessionId] = useState<string | null>(null);
   const [isChatLoading, setIsChatLoading] = useState(false);
 
-  // 1. Load Notes on Mount
+  // --- Auto Scroll Ref ---
+  const messagesEndRef = useRef<HTMLDivElement>(null);
+
   useEffect(() => {
     loadNotes();
   }, []);
 
-  // ✅ Handle Resizing Logic
+  // --- FIX: Robust Auto-Scroll ---
+  const scrollToBottom = () => {
+    // "smooth" gets interrupted by rapid streaming updates.
+    // "instant" ensures it snaps to bottom every time a token arrives.
+    messagesEndRef.current?.scrollIntoView({
+      behavior: "instant",
+      block: "end",
+    });
+  };
+
+  useEffect(() => {
+    scrollToBottom();
+  }, [messages, isChatLoading]);
+
+  // --- Resizing Logic ---
   const startResizing = useCallback(() => setIsResizing(true), []);
   const stopResizing = useCallback(() => setIsResizing(false), []);
-
   const resize = useCallback(
     (mouseMoveEvent: MouseEvent) => {
       if (isResizing) {
-        // Calculate new width based on mouse position from the right edge
         const newWidth = document.body.clientWidth - mouseMoveEvent.clientX;
-        if (newWidth > 300 && newWidth < 800) {
-          setChatWidth(newWidth);
-        }
+        if (newWidth > 300 && newWidth < 800) setChatWidth(newWidth);
       }
     },
     [isResizing]
@@ -85,11 +107,9 @@ const Notes: React.FC = () => {
   };
 
   const handleUploadClick = () => fileInputRef.current?.click();
-
   const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
     const file = e.target.files?.[0];
     if (!file) return;
-
     setIsUploading(true);
     try {
       const newNote = await uploadNote(file);
@@ -103,42 +123,93 @@ const Notes: React.FC = () => {
     }
   };
 
-  // ✅ FIX: Load History Logic (Issue 1)
+  // --- Handle Delete ---
+  const handleDeleteNote = async (e: React.MouseEvent, noteId: number) => {
+    e.stopPropagation();
+    if (
+      !window.confirm(
+        "Are you sure you want to delete this note and its chat history?"
+      )
+    )
+      return;
+
+    try {
+      await deleteNote(noteId);
+      setNotes((prev) => prev.filter((n) => n.id !== noteId));
+      if (currentNote?.id === noteId) {
+        setCurrentNote(null);
+        setPdfUrl(null);
+        setMessages([]);
+        setSessionId(null);
+      }
+    } catch (error) {
+      console.error("Failed to delete note", error);
+      alert("Error deleting note");
+    }
+  };
+
+  // --- Handle Rename ---
+  const startEditing = (e: React.MouseEvent, note: Note) => {
+    e.stopPropagation();
+    setEditingNoteId(note.id);
+    setEditName(note.filename);
+  };
+
+  const saveRename = async (e: React.MouseEvent) => {
+    e.stopPropagation();
+    if (!editingNoteId || !editName.trim()) return;
+    try {
+      await renameNote(editingNoteId, editName);
+      setNotes((prev) =>
+        prev.map((n) =>
+          n.id === editingNoteId ? { ...n, filename: editName } : n
+        )
+      );
+      if (currentNote?.id === editingNoteId) {
+        setCurrentNote((prev) =>
+          prev ? { ...prev, filename: editName } : null
+        );
+      }
+      setEditingNoteId(null);
+    } catch (error) {
+      console.error("Failed to rename", error);
+      alert("Error renaming note");
+    }
+  };
+
+  const cancelRename = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    setEditingNoteId(null);
+  };
+
   const handleNoteSelect = async (note: Note) => {
+    if (editingNoteId === note.id) return;
     setCurrentNote(note);
     setPdfUrl(null);
     setMessages([]);
     setSessionId(null);
-    setIsChatOpen(true); // Auto open chat on select
+    setIsChatOpen(true);
 
-    // A. Fetch PDF Blob
     try {
       const blob = await fetchNoteBlob(note.id);
       const url = URL.createObjectURL(blob);
       setPdfUrl(url);
     } catch (error) {
-      console.error("Failed to load PDF content", error);
+      console.error("Failed to load PDF", error);
     }
 
-    // B. Check for existing sessions -> Get History OR Create New
     try {
       const existingSessions = await fetchSessions(note.id);
-
       if (existingSessions.length > 0) {
-        // Load the most recent session
         const lastSession = existingSessions[0];
         setSessionId(lastSession.id);
-
-        // Fetch actual messages
         const history = await fetchChatHistory(lastSession.id);
-        // Map backend history to frontend format
         const formattedHistory: ChatMessage[] = history.map((msg: any) => ({
           role: msg.role,
           content: msg.content,
         }));
         setMessages(formattedHistory);
       } else {
-        // No session exists, create one
         const session = await createChatSession(
           note.id,
           `Chat - ${note.filename}`
@@ -152,23 +223,17 @@ const Notes: React.FC = () => {
         ]);
       }
     } catch (error) {
-      console.error("Failed to init chat session", error);
+      console.error("Failed to init chat", error);
     }
   };
 
-  // ✅ FIX: Loading State Bug (Issue 4)
   const handleSendMessage = async () => {
     if (!inputMessage.trim() || !sessionId) return;
-
     const userMsg = inputMessage;
     setInputMessage("");
-
     setMessages((prev) => [...prev, { role: "user", content: userMsg }]);
-    setIsChatLoading(true); // Start loading
-
-    // Placeholder
+    setIsChatLoading(true);
     setMessages((prev) => [...prev, { role: "assistant", content: "" }]);
-
     try {
       await streamChatRequest(
         sessionId,
@@ -184,22 +249,18 @@ const Notes: React.FC = () => {
             return newArr;
           });
         },
-        (err) => {
-          console.error("Stream error", err);
-          // Don't set loading false here, let finally handle it
-        }
+        (err) => console.error("Stream error", err)
       );
     } catch (e) {
       console.error("Chat Request Error", e);
     } finally {
-      // ✅ Ensure loading stops regardless of success/fail so button enables
       setIsChatLoading(false);
     }
   };
 
   return (
     <div className="flex bg-black h-screen overflow-hidden">
-      {/* --- Left Sidebar: My Notes --- */}
+      {/* --- Left Sidebar --- */}
       <div
         className={`h-screen shrink-0 transition-all duration-300 bg-gray-900 border-r border-gray-700 flex flex-col gap-4 ${
           isSidebarOpen ? "w-64 p-4" : "w-0 p-0 overflow-hidden"
@@ -229,22 +290,74 @@ const Notes: React.FC = () => {
               )}
               {isUploading ? "Uploading..." : "Upload New PDF"}
             </button>
+
             <div className="mt-4 pt-4 border-t border-gray-700 space-y-2 overflow-y-auto">
               <p className="text-sm text-gray-400 uppercase tracking-wider">
                 History
               </p>
+
               {notes.map((note) => (
                 <div
                   key={note.id}
                   onClick={() => handleNoteSelect(note)}
-                  className={`text-gray-200 p-3 rounded-md cursor-pointer flex items-center gap-2 hover:bg-gray-700 transition ${
+                  className={`group relative text-gray-200 p-3 rounded-md cursor-pointer flex items-center justify-between hover:bg-gray-700 transition ${
                     currentNote?.id === note.id
                       ? "bg-gray-800 border border-blue-500"
                       : ""
                   }`}
                 >
-                  <FileText size={16} className="text-blue-400" />
-                  <span className="truncate text-sm">{note.filename}</span>
+                  {editingNoteId === note.id ? (
+                    <div className="flex items-center gap-2 w-full">
+                      <input
+                        type="text"
+                        value={editName}
+                        onChange={(e) => setEditName(e.target.value)}
+                        onClick={(e) => e.stopPropagation()}
+                        className="flex-1 bg-gray-900 text-white text-xs px-2 py-1 rounded border border-blue-500 outline-none"
+                        autoFocus
+                      />
+                      <button
+                        onClick={saveRename}
+                        className="text-green-400 hover:text-green-300 p-1"
+                      >
+                        <Check size={14} />
+                      </button>
+                      <button
+                        onClick={cancelRename}
+                        className="text-red-400 hover:text-red-300 p-1"
+                      >
+                        <X size={14} />
+                      </button>
+                    </div>
+                  ) : (
+                    <>
+                      <div className="flex items-center gap-2 overflow-hidden">
+                        <FileText
+                          size={16}
+                          className="text-blue-400 shrink-0"
+                        />
+                        <span className="truncate text-sm">
+                          {note.filename}
+                        </span>
+                      </div>
+                      <div className="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
+                        <button
+                          onClick={(e) => startEditing(e, note)}
+                          className="p-1.5 hover:bg-gray-600 rounded text-gray-400 hover:text-white"
+                          title="Rename"
+                        >
+                          <Edit2 size={14} />
+                        </button>
+                        <button
+                          onClick={(e) => handleDeleteNote(e, note.id)}
+                          className="p-1.5 hover:bg-red-900/50 rounded text-gray-400 hover:text-red-400"
+                          title="Delete"
+                        >
+                          <Trash2 size={14} />
+                        </button>
+                      </div>
+                    </>
+                  )}
                 </div>
               ))}
             </div>
@@ -253,135 +366,141 @@ const Notes: React.FC = () => {
       </div>
 
       {/* --- Center: PDF Viewer --- */}
-      <div className="flex flex-1 overflow-hidden relative">
-        <div className="flex flex-col flex-1 p-0 bg-gray-800">
-          <header className="flex justify-between items-center p-4 bg-black/40 backdrop-blur-sm absolute top-0 w-full z-10">
+      <div className="flex flex-1 overflow-hidden relative flex-col">
+        <header className="flex justify-between items-center p-4 bg-gray-900 border-b border-gray-700 shrink-0 z-10">
+          <div className="flex items-center gap-3">
             <button
               onClick={() => setIsSidebarOpen(!isSidebarOpen)}
-              className="p-2 rounded-full bg-gray-700 hover:bg-gray-600 text-white"
+              className="p-2 rounded-lg bg-gray-800 hover:bg-gray-700 text-white transition"
             >
-              {isSidebarOpen ? <X size={20} /> : <Menu size={20} />}
+              <Menu size={20} />
             </button>
             <h2 className="text-lg font-semibold text-white truncate max-w-md">
               {currentNote ? currentNote.filename : "Select a Note"}
             </h2>
-            {!isChatOpen && (
-              <button
-                onClick={() => setIsChatOpen(true)}
-                className="flex items-center gap-2 bg-blue-600 text-white px-3 py-2 rounded-lg text-sm"
-              >
-                <MessageSquare size={16} /> Chat
-              </button>
-            )}
-          </header>
-
-          <div className="flex-1 w-full h-full pt-16">
-            {pdfUrl ? (
-              <iframe
-                src={pdfUrl}
-                className="w-full h-full border-none"
-                title="PDF Viewer"
-              />
-            ) : (
-              <div className="flex flex-col items-center justify-center h-full text-gray-400">
-                <FileText size={64} className="mb-4 opacity-50" />
-                <p>Select a PDF from the sidebar to view</p>
-              </div>
-            )}
           </div>
-        </div>
+          {!isChatOpen && currentNote && (
+            <button
+              onClick={() => setIsChatOpen(true)}
+              className="flex items-center gap-2 bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg text-sm font-medium transition"
+            >
+              <MessageSquare size={18} /> Open Chat
+            </button>
+          )}
+        </header>
 
-        {/* --- ✅ Resizable Chat Panel (Issue 3) --- */}
-        {isChatOpen && (
-          // Drag Handle
-          <div
-            className="w-1.5 cursor-col-resize bg-gray-800 hover:bg-blue-500 transition-colors z-20 flex items-center justify-center"
-            onMouseDown={startResizing}
-          >
-            {/* Tiny indicator for grip */}
-            <div className="h-8 w-0.5 bg-gray-600 rounded"></div>
-          </div>
-        )}
+        <div className="flex-1 w-full h-full bg-gray-800 relative">
+          {pdfUrl ? (
+            <iframe
+              src={pdfUrl}
+              className={`w-full h-full border-none ${
+                isResizing ? "pointer-events-none" : ""
+              }`}
+              title="PDF Viewer"
+            />
+          ) : (
+            <div className="flex flex-col items-center justify-center h-full text-gray-400">
+              <FileText size={64} className="mb-4 opacity-50" />
+              <p>Select a PDF from the sidebar to view</p>
+            </div>
+          )}
+        </div>
+      </div>
 
+      {/* --- Resizable Chat Panel --- */}
+      {isChatOpen && (
         <div
-          style={{ width: isChatOpen ? chatWidth : 0 }}
-          className={`flex flex-col bg-gray-900 border-l border-gray-700 flex-shrink-0 transition-all duration-75 ease-out`}
+          className="w-1.5 hover:w-2 cursor-col-resize bg-gray-800 hover:bg-blue-500 transition-all z-20 flex items-center justify-center shrink-0"
+          onMouseDown={startResizing}
         >
-          {isChatOpen && (
-            <>
-              <header className="flex justify-between items-center p-4 border-b border-gray-700">
-                <h3 className="text-lg font-bold text-white">AI Chat</h3>
-                {/* Close Button is here */}
-                <button
-                  onClick={() => setIsChatOpen(false)}
-                  className="text-gray-400 hover:text-white"
+          <GripVertical size={16} className="text-gray-500" />
+        </div>
+      )}
+
+      <div
+        style={{ width: isChatOpen ? chatWidth : 0 }}
+        className={`flex flex-col bg-gray-900 border-l border-gray-700 shrink-0 transition-all duration-100 ease-linear overflow-hidden`}
+      >
+        {isChatOpen && (
+          <>
+            <header className="flex justify-between items-center p-4 border-b border-gray-700 bg-gray-900 shrink-0">
+              <div className="flex items-center gap-2">
+                <MessageSquare size={18} className="text-blue-500" />
+                <h3 className="text-lg font-bold text-white whitespace-nowrap">
+                  AI Chat
+                </h3>
+              </div>
+              <button
+                onClick={() => setIsChatOpen(false)}
+                className="p-2 rounded-lg text-gray-400 hover:bg-gray-800 hover:text-white transition-colors"
+              >
+                <X size={20} />
+              </button>
+            </header>
+
+            <div className="flex-1 overflow-y-auto p-4 space-y-4">
+              {messages.length === 0 && (
+                <div className="text-center text-gray-500 mt-10">
+                  <p>Ask a question about this document...</p>
+                </div>
+              )}
+              {messages.map((msg, i) => (
+                <div
+                  key={i}
+                  className={`flex ${
+                    msg.role === "user" ? "justify-end" : "justify-start"
+                  }`}
                 >
-                  <X size={20} />
-                </button>
-              </header>
-
-              <div className="flex-1 overflow-y-auto p-4 space-y-4">
-                {messages.length === 0 && (
-                  <p className="text-gray-500 text-center text-sm mt-10">
-                    Ask a question about this document...
-                  </p>
-                )}
-                {messages.map((msg, i) => (
                   <div
-                    key={i}
-                    className={`flex ${
-                      msg.role === "user" ? "justify-end" : "justify-start"
+                    className={`max-w-[85%] p-3 rounded-lg text-sm ${
+                      msg.role === "user"
+                        ? "bg-blue-600 text-white"
+                        : "bg-gray-700 text-gray-200 prose prose-invert prose-sm max-w-none"
                     }`}
                   >
-                    <div
-                      className={`max-w-[85%] p-3 rounded-lg text-sm ${
-                        msg.role === "user"
-                          ? "bg-blue-600 text-white"
-                          : "bg-gray-700 text-gray-200 prose prose-invert max-w-none"
-                      }`}
-                    >
-                      {msg.role === "assistant" ? (
-                        <ReactMarkdown remarkPlugins={[remarkGfm]}>
-                          {msg.content}
-                        </ReactMarkdown>
-                      ) : (
-                        msg.content
-                      )}
-                    </div>
+                    {msg.role === "assistant" ? (
+                      <ReactMarkdown remarkPlugins={[remarkGfm]}>
+                        {msg.content}
+                      </ReactMarkdown>
+                    ) : (
+                      msg.content
+                    )}
                   </div>
-                ))}
-                {isChatLoading && (
-                  <div className="flex justify-start">
-                    <div className="bg-gray-700 p-3 rounded-lg">
-                      <Loader2 className="animate-spin w-4 h-4 text-blue-400" />
-                    </div>
+                </div>
+              ))}
+              {isChatLoading && (
+                <div className="flex justify-start">
+                  <div className="bg-gray-700 p-3 rounded-lg">
+                    <Loader2 className="animate-spin w-4 h-4 text-blue-400" />
                   </div>
-                )}
-              </div>
-
-              <div className="p-4 border-t border-gray-700">
-                <div className="flex gap-2">
-                  <input
-                    type="text"
-                    value={inputMessage}
-                    onChange={(e) => setInputMessage(e.target.value)}
-                    onKeyDown={(e) => e.key === "Enter" && handleSendMessage()}
-                    placeholder="Type your question..."
-                    className="flex-1 bg-gray-800 text-white rounded-lg px-4 py-2 border border-gray-700 focus:outline-none focus:border-blue-500"
-                    disabled={!sessionId || isChatLoading}
-                  />
-                  <button
-                    onClick={handleSendMessage}
-                    disabled={!sessionId || isChatLoading}
-                    className="bg-blue-600 p-2 rounded-lg text-white hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
-                  >
-                    <Send size={20} />
-                  </button>
                 </div>
+              )}
+              {/* Auto Scroll Anchor */}
+              <div ref={messagesEndRef} />
+            </div>
+
+            <div className="p-4 border-t border-gray-700 shrink-0">
+              <div className="flex gap-2">
+                <input
+                  type="text"
+                  value={inputMessage}
+                  onChange={(e) => setInputMessage(e.target.value)}
+                  onKeyDown={(e) => e.key === "Enter" && handleSendMessage()}
+                  placeholder="Type your question..."
+                  className="flex-1 bg-gray-800 text-white rounded-lg px-4 py-2 border border-gray-700 focus:outline-none focus:border-blue-500 placeholder-gray-500"
+                  disabled={!sessionId || isChatLoading}
+                />
+                <button
+                  onClick={handleSendMessage}
+                  disabled={!sessionId || isChatLoading}
+                  className="bg-blue-600 p-2 rounded-lg text-white hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+                >
+                  <Send size={20} />
+                </button>
               </div>
-            </>
-          )}
-        </div>
+            </div>
+          </>
+        )}
       </div>
     </div>
   );