chore: fix reload, chat history

Frontend/src/api/notesService.ts

@@ -14,6 +14,13 @@ export interface ChatMessage {
   content: string;
 }
 
+export interface Session {
+  id: string;
+  name: string;
+  created_at: string;
+  pdf_id: number;
+}
+
 // 1. Fetch the list of PDFs for the Sidebar
 export const fetchNotes = async (): Promise<Note[]> => {
   const response: AxiosResponse<Note[]> = await API.get("/notes/");
@@ -75,6 +82,11 @@ export const fetchChatHistory = async (sessionId: string) => {
   return response.data;
 };
 
+export const fetchSessions = async (pdfId: number): Promise<Session[]> => {
+  const response = await API.get(`/notes/sessions/${pdfId}`);
+  return response.data;
+};
+
 // 7. Stream Chat (Special Handling using fetch API)
 export const streamChatRequest = async (
   sessionId: string,

Frontend/src/components/auth/SignIn.tsx

@@ -4,7 +4,7 @@ import API from "../../api/api";
 import { useAuth } from "../context/AuthContext";
 
 interface SignInProps {
-  onSwitchToSignUp: () => void;  // ✅ Add this if switching modal
+  onSwitchToSignUp: () => void;
 }
 
 const SignIn: React.FC<SignInProps> = ({ onSwitchToSignUp }) => {
@@ -20,19 +20,17 @@ const SignIn: React.FC<SignInProps> = ({ onSwitchToSignUp }) => {
     try {
       const res = await API.post("/auth/login", { email, password });
 
-      // ✅ FIXED — use res instead of response
-      login(res.data.username || res.data.user?.username || "User");
-
-      localStorage.setItem("token", res.data.access_token);
-
+      // ✅ UPDATED: Pass token to login() to persist session
+      login(
+        res.data.username || res.data.user?.username || "User",
+        res.data.access_token
+      );
     } catch (err: any) {
       console.error("Login error:", err);
 
       let errorMessage = "Login failed.";
-
       if (err.response?.data?.detail) {
         const detail = err.response.data.detail;
-
         if (typeof detail === "string") errorMessage = detail;
         else if (Array.isArray(detail)) {
           const first = detail[0];
@@ -46,7 +44,9 @@ const SignIn: React.FC<SignInProps> = ({ onSwitchToSignUp }) => {
 
   return (
     <>
-      <h2 className="text-3xl font-bold mb-8 text-center text-white">Welcome Back</h2>
+      <h2 className="text-3xl font-bold mb-8 text-center text-white">
+        Welcome Back
+      </h2>
 
       {error && <p className="text-red-400 text-center mb-3">{error}</p>}
 
@@ -83,7 +83,7 @@ const SignIn: React.FC<SignInProps> = ({ onSwitchToSignUp }) => {
 
         <button
           type="submit"
-          className="w-full px-5 py-3 rounded-lg bg-linear-to-r from-blue-500 to-gray-500 text-white flex items-center justify-center gap-2"
+          className="w-full px-5 py-3 rounded-lg bg-gradient-to-r from-blue-500 to-gray-500 text-white flex items-center justify-center gap-2"
         >
           <LogIn className="w-5 h-5" />
           Sign In
@@ -100,4 +100,4 @@ const SignIn: React.FC<SignInProps> = ({ onSwitchToSignUp }) => {
   );
 };
 
-export default SignIn;
+export default SignIn;

Frontend/src/components/context/AuthContext.tsx

@@ -1,11 +1,9 @@
-import React, { createContext, useContext, useState } from "react";
+import React, { createContext, useContext, useState, useEffect } from "react";
 
 interface AuthContextType {
   isAuthenticated: boolean;
-  // 1. Added username to the context type
   username: string;
-  // 2. Updated login signature to accept the username string
-  login: (name: string) => void;
+  login: (name: string, token: string) => void;
   logout: () => void;
 }
 
@@ -13,19 +11,30 @@ const AuthContext = createContext<AuthContextType | undefined>(undefined);
 
 export const AuthProvider = ({ children }: { children: React.ReactNode }) => {
   const [isAuthenticated, setIsAuthenticated] = useState(false);
-  // 3. New state to hold the logged-in user's name
-  const [username, setUsername] = useState('Guest');
+  const [username, setUsername] = useState("Guest");
 
-  // 4. Updated login function to accept and set the username
-  const login = (name: string) => {
+  // ✅ FIX: Check localStorage on mount to persist session
+  useEffect(() => {
+    const token = localStorage.getItem("token");
+    const storedUser = localStorage.getItem("username");
+    if (token) {
+      setIsAuthenticated(true);
+      if (storedUser) setUsername(storedUser);
+    }
+  }, []);
+
+  const login = (name: string, token: string) => {
+    localStorage.setItem("token", token);
+    localStorage.setItem("username", name);
     setUsername(name);
     setIsAuthenticated(true);
   };
 
   const logout = () => {
-    // Reset state on logout
+    localStorage.removeItem("token");
+    localStorage.removeItem("username");
     setIsAuthenticated(false);
-    setUsername('Guest');
+    setUsername("Guest");
   };
 
   return (
@@ -39,4 +48,4 @@ export const useAuth = () => {
   const ctx = useContext(AuthContext);
   if (!ctx) throw new Error("useAuth must be inside AuthProvider");
   return ctx;
-};
+};

Frontend/src/pages/home.tsx

@@ -1,409 +1,495 @@
-import React, { useState, useEffect, useRef } from 'react';
-import { Sparkles, Zap, Target, Clock, Award, ChevronRight, Menu, X } from 'lucide-react';
-import AuthModal from '../components/auth/AuthModal';
-import SignIn from '../components/auth/SignIn';
-import SignUp from '../components/auth/SignUp';
-import { SplineScene } from '../components/ui/splite';
-import { Spotlight } from '../components/ui/spotlight';
+import React, { useState, useEffect, useRef } from "react";
+import {
+  Sparkles,
+  Zap,
+  Target,
+  Clock,
+  Award,
+  ChevronRight,
+  Menu,
+  X,
+} from "lucide-react";
+import AuthModal from "../components/auth/AuthModal";
+import SignIn from "../components/auth/SignIn";
+import SignUp from "../components/auth/SignUp";
+import { SplineScene } from "../components/ui/splite";
+import { Spotlight } from "../components/ui/spotlight";
 
 interface Feature {
-    icon: React.ReactNode;
-    title: string;
-    description: string;
+  icon: React.ReactNode;
+  title: string;
+  description: string;
 }
 
 interface Step {
-    step: string;
-    title: string;
-    desc: string;
+  step: string;
+  title: string;
+  desc: string;
 }
 
-// Add onLogin prop
+// ✅ UPDATED: Interface now accepts token
 interface AIInterviewPlatformProps {
-    onLogin: (username:string) => void;
+  onLogin: (username: string, token: string) => void;
 }
 
-const AIInterviewPlatform: React.FC<AIInterviewPlatformProps> = ({ onLogin }) => {
-    const [isMenuOpen, setIsMenuOpen] = useState<boolean>(false);
-    const [scrolled, setScrolled] = useState<boolean>(false);
-    const [modalType, setModalType] = useState<'none' | 'signIn' | 'signUp'>('none');
-
-    // Handlers for opening/closing modals
-    const openSignInModal = () => {
-        setModalType('signIn');
-        setIsMenuOpen(false);
-    };
-
-    const openSignUpModal = () => {
-        setModalType('signUp');
-        setIsMenuOpen(false);
-    };
-
-    const closeModal = () => setModalType('none');
-
-    // Handle successful authentication
-    const handleAuthSuccess = (username:string) => {
-        closeModal();
-        onLogin(username); // Call the parent function to update auth state
+const AIInterviewPlatform: React.FC<AIInterviewPlatformProps> = ({
+  onLogin,
+}) => {
+  const [isMenuOpen, setIsMenuOpen] = useState<boolean>(false);
+  const [scrolled, setScrolled] = useState<boolean>(false);
+  const [modalType, setModalType] = useState<"none" | "signIn" | "signUp">(
+    "none"
+  );
+
+  // Handlers for opening/closing modals
+  const openSignInModal = () => {
+    setModalType("signIn");
+    setIsMenuOpen(false);
+  };
+
+  const openSignUpModal = () => {
+    setModalType("signUp");
+    setIsMenuOpen(false);
+  };
+
+  const closeModal = () => setModalType("none");
+
+  // ✅ UPDATED: Handler now accepts and passes token
+  const handleAuthSuccess = (username: string, token: string) => {
+    closeModal();
+    onLogin(username, token);
+  };
+
+  useEffect(() => {
+    const handleScroll = (): void => {
+      setScrolled(window.scrollY > 50);
     };
+    window.addEventListener("scroll", handleScroll);
+    return () => window.removeEventListener("scroll", handleScroll);
+  }, []);
+
+  const features: Feature[] = [
+    {
+      icon: <Sparkles className="w-8 h-8" />,
+      title: "AI-Powered Questions",
+      description: "Dynamic questions adapted to your skill level and role",
+    },
+    {
+      icon: <Zap className="w-8 h-8" />,
+      title: "Instant Feedback",
+      description: "Get real-time analysis and improvement suggestions",
+    },
+    {
+      icon: <Target className="w-8 h-8" />,
+      title: "Role-Specific Prep",
+      description: "Tailored scenarios for your target position",
+    },
+    {
+      icon: <Clock className="w-8 h-8" />,
+      title: "Practice Anytime",
+      description: "24/7 access to unlimited mock interviews",
+    },
+    {
+      icon: <Award className="w-8 h-8" />,
+      title: "Performance Analytics",
+      description: "Track your progress with detailed insights",
+    },
+  ];
+
+  const steps: Step[] = [
+    {
+      step: "01",
+      title: "Choose Your Role",
+      desc: "Select the job position you're preparing for",
+    },
+    {
+      step: "02",
+      title: "Practice Interview",
+      desc: "Answer AI-generated questions in real-time",
+    },
+    {
+      step: "03",
+      title: "Get Feedback",
+      desc: "Receive detailed analysis and improvement tips",
+    },
+  ];
+
+  const heroRef = useRef<HTMLDivElement>(null);
+
+  return (
+    <div className="w-full min-h-screen bg-gradient-to-br from-blue-900 to-gray-400 text-white overflow-x-hidden font-opensans">
+      {/* Navigation Bar */}
+      <nav
+        className={`fixed top-0 left-0 right-0 w-full z-50 transition-all duration-300 ${
+          scrolled
+            ? "bg-slate-900/95 backdrop-blur-md shadow-xl"
+            : "bg-slate-900/80 backdrop-blur-sm"
+        }`}
+      >
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="flex justify-between items-center h-20">
+            {/* Logo */}
+            <div className="flex items-center space-x-3">
+              <div className="bg-gradient-to-br from-blue-500 to-gray-400 p-2 rounded-lg">
+                <Sparkles className="w-6 h-6 text-white" />
+              </div>
+              <span className="text-2xl font-bold bg-gradient-to-br from-blue-500 to-gray-400 bg-clip-text text-transparent">
+                InterviewAI
+              </span>
+            </div>
+
+            {/* Desktop Navigation */}
+            <div className="hidden lg:flex items-center space-x-8">
+              <a
+                href="#home"
+                className="text-gray-200 hover:text-blue-400 transition-colors font-medium"
+              >
+                Home
+              </a>
+              <a
+                href="#about"
+                className="text-gray-200 hover:text-blue-400 transition-colors font-medium"
+              >
+                About
+              </a>
+              <a
+                href="#features"
+                className="text-gray-200 hover:text-blue-400 transition-colors font-medium"
+              >
+                Features
+              </a>
+              <a
+                href="#how-it-works"
+                className="text-gray-200 hover:text-blue-400 transition-colors font-medium"
+              >
+                How It Works
+              </a>
+              <button
+                onClick={openSignInModal}
+                className="px-6 py-2.5 rounded-lg border-2 border-blue-400 text-blue-400 hover:bg-blue-400/10 transition-all font-medium"
+              >
+                Sign In
+              </button>
+              <button
+                onClick={openSignUpModal}
+                className="px-6 py-2.5 rounded-lg bg-gradient-to-br from-blue-500 to-blue-500 hover:from-blue-600 hover:to-blue-900 transition-all shadow-lg shadow-blue-500/30 font-medium"
+              >
+                Sign Up
+              </button>
+            </div>
+
+            {/* Mobile Menu Button */}
+            <button
+              className="lg:hidden p-2 rounded-lg hover:bg-white/10 transition-colors"
+              onClick={() => setIsMenuOpen(!isMenuOpen)}
+            >
+              {isMenuOpen ? (
+                <X className="w-6 h-6" />
+              ) : (
+                <Menu className="w-6 h-6" />
+              )}
+            </button>
+          </div>
+        </div>
 
-    useEffect(() => {
-        const handleScroll = (): void => {
-            setScrolled(window.scrollY > 50);
-        };
-        window.addEventListener('scroll', handleScroll);
-        return () => window.removeEventListener('scroll', handleScroll);
-    }, []);
-
-    const features: Feature[] = [
-        {
-            icon: <Sparkles className="w-8 h-8" />,
-            title: "AI-Powered Questions",
-            description: "Dynamic questions adapted to your skill level and role"
-        },
-        {
-            icon: <Zap className="w-8 h-8" />,
-            title: "Instant Feedback",
-            description: "Get real-time analysis and improvement suggestions"
-        },
-        {
-            icon: <Target className="w-8 h-8" />,
-            title: "Role-Specific Prep",
-            description: "Tailored scenarios for your target position"
-        },
-        {
-            icon: <Clock className="w-8 h-8" />,
-            title: "Practice Anytime",
-            description: "24/7 access to unlimited mock interviews"
-        },
-        {
-            icon: <Award className="w-8 h-8" />,
-            title: "Performance Analytics",
-            description: "Track your progress with detailed insights"
-        }
-    ];
-
-    const steps: Step[] = [
-        { step: "01", title: "Choose Your Role", desc: "Select the job position you're preparing for" },
-        { step: "02", title: "Practice Interview", desc: "Answer AI-generated questions in real-time" },
-        { step: "03", title: "Get Feedback", desc: "Receive detailed analysis and improvement tips" }
-    ];
-
-    const heroRef = useRef<HTMLDivElement>(null);
-
-    return (
-        <div className="w-full min-h-screen bg-linear-to-br from-blue-900 to-gray-400 text-white overflow-x-hidden font-opensans">
-            {/* Navigation Bar */}
-            <nav className={`fixed top-0 left-0 right-0 w-full z-50 transition-all duration-300 ${scrolled ? 'bg-slate-900/95 backdrop-blur-md shadow-xl' : 'bg-slate-900/80 backdrop-blur-sm'}`}>
-                <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-                    <div className="flex justify-between items-center h-20">
-                        {/* Logo */}
-                        <div className="flex items-center space-x-3">
-                            <div className="bg-linear-to-br from-blue-500 to-gray-400 p-2 rounded-lg">
-                                <Sparkles className="w-6 h-6 text-white" />
-                            </div>
-                            <span className="text-2xl font-bold bg-linear-to-br from-blue-500 to-gray-400 bg-clip-text text-transparent">
-                                InterviewAI
-                            </span>
-                        </div>
-
-                        {/* Desktop Navigation */}
-                        <div className="hidden lg:flex items-center space-x-8">
-                            <a href="#home" className="text-gray-200 hover:text-blue-400 transition-colors font-medium">
-                                Home
-                            </a>
-                            <a href="#about" className="text-gray-200 hover:text-blue-400 transition-colors font-medium">
-                                About
-                            </a>
-                            <a href="#features" className="text-gray-200 hover:text-blue-400 transition-colors font-medium">
-                                Features
-                            </a>
-                            <a href="#how-it-works" className="text-gray-200 hover:text-blue-400 transition-colors font-medium">
-                                How It Works
-                            </a>
-                            <button onClick={openSignInModal} className="px-6 py-2.5 rounded-lg border-2 border-blue-400 text-blue-400 hover:bg-blue-400/10 transition-all font-medium">
-                                Sign In
-                            </button>
-                            <button onClick={openSignUpModal} className="px-6 py-2.5 rounded-lg bg-linear-to-br from-blue-500 to-blue-500 hover:from-blue-600 hover:to-blue-900 transition-all shadow-lg shadow-blue-500/30 font-medium">
-                                Sign Up
-                            </button>
-                        </div>
-
-                        {/* Mobile Menu Button */}
-                        <button
-                            className="lg:hidden p-2 rounded-lg hover:bg-white/10 transition-colors"
-                            onClick={() => setIsMenuOpen(!isMenuOpen)}
-                        >
-                            {isMenuOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
-                        </button>
-                    </div>
+        {/* Mobile Menu */}
+        {isMenuOpen && (
+          <div className="lg:hidden border-t border-white/10 bg-slate-900/98 backdrop-blur-md">
+            <div className="px-4 py-4 space-y-3 max-w-7xl mx-auto">
+              <a
+                href="#home"
+                className="block py-3 px-4 rounded-lg text-gray-200 hover:bg-blue-500/10 hover:text-blue-400 transition-all font-medium"
+                onClick={() => setIsMenuOpen(false)}
+              >
+                Home
+              </a>
+              <a
+                href="#about"
+                className="block py-3 px-4 rounded-lg text-gray-200 hover:bg-blue-500/10 hover:text-blue-400 transition-all font-medium"
+                onClick={() => setIsMenuOpen(false)}
+              >
+                About
+              </a>
+              <a
+                href="#features"
+                className="block py-3 px-4 rounded-lg text-gray-200 hover:bg-blue-500/10 hover:text-blue-400 transition-all font-medium"
+                onClick={() => setIsMenuOpen(false)}
+              >
+                Features
+              </a>
+              <a
+                href="#how-it-works"
+                className="block py-3 px-4 rounded-lg text-gray-200 hover:bg-blue-500/10 hover:text-blue-400 transition-all font-medium"
+                onClick={() => setIsMenuOpen(false)}
+              >
+                How It Works
+              </a>
+              <button
+                onClick={openSignInModal}
+                className="w-full py-3 rounded-lg border-2 border-blue-400 text-blue-400 hover:bg-blue-400/10 transition-all font-medium"
+              >
+                Sign In
+              </button>
+              <button
+                onClick={openSignUpModal}
+                className="w-full py-3 rounded-lg bg-gradient-to-br from-blue-500 to-blue-500 hover:from-blue-600 hover:to-blue-900 transition-all font-medium"
+              >
+                Sign Up
+              </button>
+            </div>
+          </div>
+        )}
+      </nav>
+
+      {/* Auth Modals */}
+      <AuthModal isOpen={modalType === "signIn"} onClose={closeModal}>
+        <SignIn
+          onSwitchToSignUp={openSignUpModal}
+          // We don't need onAuthSuccess for SignIn because it uses useAuth() hook directly,
+          // but if you unified them, you could pass it.
+          // Currently SignIn handles logic internally.
+        />
+      </AuthModal>
+
+      <AuthModal isOpen={modalType === "signUp"} onClose={closeModal}>
+        <SignUp
+          onClose={closeModal}
+          onSwitchToSignIn={openSignInModal}
+          onAuthSuccess={handleAuthSuccess}
+        />
+      </AuthModal>
+
+      {/* Hero Section */}
+      <section
+        ref={heroRef}
+        id="home"
+        className="min-h-[calc(100vh-68px)] flex items-center pt-20 pb-20 px-4 sm:px-6 lg:px-8 relative overflow-hidden bg-black"
+      >
+        <Spotlight parentRef={heroRef} className="mix-blend-screen" />
+        <div className="max-w-7xl mx-auto w-full relative z-10">
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
+            {/* Left side */}
+            <div>
+              <h1 className="text-5xl sm:text-6xl lg:text-7xl font-bold mb-6 leading-tight">
+                Master Your Next{" "}
+                <span className="block bg-gradient-to-br from-blue-500 via-gray-400 to-blue-500 bg-clip-text text-transparent">
+                  Interview with AI
+                </span>
+              </h1>
+              <p className="text-xl text-gray-300 mb-10 max-w-lg">
+                Practice with our intelligent AI interviewer, get instant
+                feedback, and land your dream job with confidence.
+              </p>
+              <button
+                onClick={openSignUpModal}
+                className="px-8 py-4 rounded-xl bg-gradient-to-br from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 transition duration-300 shadow-xl shadow-blue-600/30 flex items-center gap-2 text-lg font-semibold transform hover:scale-[1.03]"
+              >
+                Start Free Trial <ChevronRight className="w-5 h-5" />
+              </button>
+            </div>
+
+            {/* Right side - 3D Scene */}
+            <div className="h-[500px] lg:h-[600px] relative">
+              <SplineScene
+                scene="https://prod.spline.design/kZDDjO5HuC9GJUM2/scene.splinecode"
+                className="w-full h-full"
+              />
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* About Section */}
+      <section id="about" className="py-20 px-4 sm:px-6 lg:px-8 bg-black/40">
+        <div className="max-w-6xl mx-auto">
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
+            <div>
+              <h2 className="text-4xl sm:text-5xl font-bold mb-6">
+                About InterviewAI
+              </h2>
+              <p className="text-lg text-gray-300 mb-6">
+                We're revolutionizing interview preparation with cutting-edge AI
+                technology. Our platform helps candidates practice, learn, and
+                succeed in their job interviews.
+              </p>
+              <p className="text-lg text-gray-300 mb-6">
+                Founded by industry experts and powered by advanced machine
+                learning, InterviewAI provides personalized interview
+                experiences that adapt to your unique needs and goals.
+              </p>
+              <div className="space-y-4">
+                <div className="flex items-center gap-3">
+                  <div className="w-2 h-2 bg-blue-400 rounded-full"></div>
+                  <span className="text-gray-300">
+                    Advanced AI interview simulations
+                  </span>
                 </div>
-
-                {/* Mobile Menu */}
-                {isMenuOpen && (
-                    <div className="lg:hidden border-t border-white/10 bg-slate-900/98 backdrop-blur-md">
-                        <div className="px-4 py-4 space-y-3 max-w-7xl mx-auto">
-                            <a
-                                href="#home"
-                                className="block py-3 px-4 rounded-lg text-gray-200 hover:bg-blue-500/10 hover:text-blue-400 transition-all font-medium"
-                                onClick={() => setIsMenuOpen(false)}
-                            >
-                                Home
-                            </a>
-                            <a
-                                href="#about"
-                                className="block py-3 px-4 rounded-lg text-gray-200 hover:bg-blue-500/10 hover:text-blue-400 transition-all font-medium"
-                                onClick={() => setIsMenuOpen(false)}
-                            >
-                                About
-                            </a>
-                            <a
-                                href="#features"
-                                className="block py-3 px-4 rounded-lg text-gray-200 hover:bg-blue-500/10 hover:text-blue-400 transition-all font-medium"
-                                onClick={() => setIsMenuOpen(false)}
-                            >
-                                Features
-                            </a>
-                            <a
-                                href="#how-it-works"
-                                className="block py-3 px-4 rounded-lg text-gray-200 hover:bg-blue-500/10 hover:text-blue-400 transition-all font-medium"
-                                onClick={() => setIsMenuOpen(false)}
-                            >
-                                How It Works
-                            </a>
-                            <button onClick={openSignInModal} className="w-full py-3 rounded-lg border-2 border-blue-400 text-blue-400 hover:bg-blue-400/10 transition-all font-medium">
-                                Sign In
-                            </button>
-                            <button onClick={openSignUpModal} className="w-full py-3 rounded-lg bg-linear-to-br from-blue-500 to-blue-500 hover:from-blue-600 hover:to-blue-900 transition-all font-medium">
-                                Sign Up
-                            </button>
-                        </div>
-                    </div>
-                )}
-            </nav>
-
-            {/* Auth Modals */}
-            <AuthModal isOpen={modalType === 'signIn'} onClose={closeModal}>
-                <SignIn
-                    onClose={closeModal}
-                    onSwitchToSignUp={openSignUpModal}
-                    onAuthSuccess={handleAuthSuccess}
-                />
-            </AuthModal>
-
-            <AuthModal isOpen={modalType === 'signUp'} onClose={closeModal}>
-                <SignUp
-                    onClose={closeModal}
-                    onSwitchToSignIn={openSignInModal}
-                    onAuthSuccess={handleAuthSuccess}
-                />
-            </AuthModal>
-
-            {/* Hero Section */}
-            <section ref={heroRef} id="home" className="min-h-[calc(100vh-68px)] flex items-center pt-20 pb-20 px-4 sm:px-6 lg:px-8 relative overflow-hidden bg-black">
-                {/* Spotlight applied directly to the container as per the demo structure */}
-                <Spotlight parentRef={heroRef} color="#4b9fff" className="mix-blend-screen" />
-                <div className="max-w-7xl mx-auto w-full relative z-10">
-                    <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
-                        {/* Left side - Text content */}
-                        <div>
-                            <h1 className="text-5xl sm:text-6xl lg:text-7xl font-bold mb-6 leading-tight">
-                                Master Your Next
-                                <span className="block bg-linear-to-br from-blue-500 via-gray-400 to-blue-500 bg-clip-text text-transparent">
-                                    Interview with AI
-                                </span>
-                            </h1>
-                            <p className="text-xl text-gray-300 mb-10 max-w-lg">
-                                Practice with our intelligent AI interviewer, get instant feedback, and land your dream job with confidence.
-                            </p>
-                            <button
-                                onClick={openSignUpModal}
-                                className="px-8 py-4 rounded-xl bg-linear-to-br from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 transition duration-300 shadow-xl shadow-blue-600/30 flex items-center gap-2 text-lg font-semibold transform hover:scale-[1.03]"
-                            >
-                                Start Free Trial
-                                <ChevronRight className="w-5 h-5" />
-                            </button>
-                        </div>
-
-                        {/* Right side - 3D Scene */}
-                        <div className="h-[500px] lg:h-[600px] relative">
-                            <SplineScene
-                                scene="https://prod.spline.design/kZDDjO5HuC9GJUM2/scene.splinecode"
-                                className="w-full h-full"
-                            />
-                        </div>
-                    </div>
+                <div className="flex items-center gap-3">
+                  <div className="w-2 h-2 bg-blue-600 rounded-full"></div>
+                  <span className="text-gray-300">
+                    Personalized feedback and coaching
+                  </span>
                 </div>
-            </section>
-
-            {/* About Section */}
-            <section id="about" className="py-20 px-4 sm:px-6 lg:px-8 bg-black/40">
-                <div className="max-w-6xl mx-auto">
-                    <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
-                        <div>
-                            <h2 className="text-4xl sm:text-5xl font-bold mb-6">
-                                About InterviewAI
-                            </h2>
-                            <p className="text-lg text-gray-300 mb-6">
-                                We're revolutionizing interview preparation with cutting-edge AI technology. Our platform helps candidates practice, learn, and succeed in their job interviews.
-                            </p>
-                            <p className="text-lg text-gray-300 mb-6">
-                                Founded by industry experts and powered by advanced machine learning, InterviewAI provides personalized interview experiences that adapt to your unique needs and goals.
-                            </p>
-                            <div className="space-y-4">
-                                <div className="flex items-center gap-3">
-                                    <div className="w-2 h-2 bg-blue-400 rounded-full"></div>
-                                    <span className="text-gray-300">Advanced AI interview simulations</span>
-                                </div>
-                                <div className="flex items-center gap-3">
-                                    <div className="w-2 h-2 bg-blue-600 rounded-full"></div>
-                                    <span className="text-gray-300">Personalized feedback and coaching</span>
-                                </div>
-                                <div className="flex items-center gap-3">
-                                    <div className="w-2 h-2 bg-blue-400 rounded-full"></div>
-                                    <span className="text-gray-300">Industry-leading success rates</span>
-                                </div>
-                            </div>
-                        </div>
-                        <div className="bg-linear-to-br from-blue-900/50 to-gray-900/50 rounded-2xl p-8 border border-gray-200/30">
-                            <div className="space-y-6">
-                                <div className="bg-white/5 backdrop-blur-sm rounded-lg p-6">
-                                    <div className="text-3xl font-bold text-blue-400 mb-2">2020</div>
-                                    <div className="text-gray-400">Founded</div>
-                                </div>
-                                <div className="bg-white/5 backdrop-blur-sm rounded-lg p-6">
-                                    <div className="text-3xl font-bold text-blue-500 mb-2">50K+</div>
-                                    <div className="text-gray-400">Happy Users</div>
-                                </div>
-                                <div className="bg-white/5 backdrop-blur-sm rounded-lg p-6">
-                                    <div className="text-3xl font-bold text-blue-400 mb-2">500+</div>
-                                    <div className="text-gray-400">Companies Trust Us</div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
+                <div className="flex items-center gap-3">
+                  <div className="w-2 h-2 bg-blue-400 rounded-full"></div>
+                  <span className="text-gray-300">
+                    Industry-leading success rates
+                  </span>
                 </div>
-            </section>
-
-            {/* Features Section */}
-            <section id="features" className="py-20 px-4 sm:px-6 lg:px-8 bg-black">
-                <div className="max-w-7xl mx-auto">
-                    <div className="text-center mb-16">
-                        <h2 className="text-4xl sm:text-5xl font-bold mb-4">
-                            Why Choose InterviewAI?
-                        </h2>
-                        <p className="text-xl text-gray-400">
-                            Everything you need to ace your next interview
-                        </p>
-                    </div>
-                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
-                        {features.map((feature: Feature, index: number) => (
-                            <div
-                                key={index}
-                                className="bg-linear-to-br from-blue-900/50 to-gray-900/50 backdrop-blur-sm rounded-xl p-8 border border-blue-500/20 hover:border-gray-500/50 transition-all duration-300 hover:transform hover:scale-105"
-                            >
-                                <div className="bg-linear-to-br from-blue-500 to-gray-400 w-16 h-16 rounded-lg flex items-center justify-center mb-4 shadow-lg shadow-blue-500/50">
-                                    {feature.icon}
-                                </div>
-                                <h3 className="text-xl font-bold mb-3">{feature.title}</h3>
-                                <p className="text-gray-400">{feature.description}</p>
-                            </div>
-                        ))}
-                    </div>
+              </div>
+            </div>
+            <div className="bg-gradient-to-br from-blue-900/50 to-gray-900/50 rounded-2xl p-8 border border-gray-200/30">
+              <div className="space-y-6">
+                <div className="bg-white/5 backdrop-blur-sm rounded-lg p-6">
+                  <div className="text-3xl font-bold text-blue-400 mb-2">
+                    2020
+                  </div>
+                  <div className="text-gray-400">Founded</div>
                 </div>
-            </section>
-
-            {/* How It Works */}
-            <section id="how-it-works" className="py-20 px-4 sm:px-6 lg:px-8 bg-linear-to-br from-blue-900/50 to-gray-900/50 rounded-2xl border border-gray-200/30">
-                <div className="max-w-7xl mx-auto">
-                    <div className="text-center mb-16">
-                        <h2 className="text-4xl sm:text-5xl font-bold mb-4">
-                            How It Works
-                        </h2>
-                        <p className="text-xl text-gray-400">
-                            Get started in three simple steps
-                        </p>
-                    </div>
-
-                    <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
-                        {steps.map((item: Step, index: number) => (
-                            <div key={index} className="relative text-center">
-                                <div className="text-7xl font-bold text-white mb-4">
-                                    {item.step}
-                                </div>
-                                <h3 className="text-2xl font-bold mb-3">{item.title}</h3>
-                                <p className="text-gray-400">{item.desc}</p>
-
-                                {index < 2 && (
-                                    <ChevronRight className="hidden md:block absolute top-12 -right-12 w-8 h-8 text-white" />
-                                )}
-                            </div>
-                        ))}
-                    </div>
+                <div className="bg-white/5 backdrop-blur-sm rounded-lg p-6">
+                  <div className="text-3xl font-bold text-blue-500 mb-2">
+                    50K+
+                  </div>
+                  <div className="text-gray-400">Happy Users</div>
                 </div>
-            </section>
-
-
-            {/* CTA Section */}
-            <section className="py-20 px-4 sm:px-6 lg:px-8 bg-black">
-                <div className="max-w-4xl mx-auto text-center">
-                    <h2 className="text-4xl sm:text-5xl font-bold mb-6">
-                        Ready to Ace Your Interview?
-                    </h2>
-                    <p className="text-xl text-gray-300 mb-10">
-                        Join thousands of successful candidates who prepared with InterviewAI
-                    </p>
-                    <button
-                        onClick={openSignUpModal}
-                        className="px-10 py-5 rounded-lg bg-linear-to-r from-blue-400 to-blue-700 hover:from-blue-600 hover:to-blue-900 transition shadow-lg shadow-blue-500/50 text-lg font-semibold"
-                    >
-                        Start Your Free Trial Today
-                    </button>
+                <div className="bg-white/5 backdrop-blur-sm rounded-lg p-6">
+                  <div className="text-3xl font-bold text-blue-400 mb-2">
+                    500+
+                  </div>
+                  <div className="text-gray-400">Companies Trust Us</div>
                 </div>
-            </section>
-
-            {/* Footer */}
-            <footer className="w-full py-6 px-6 bg-slate-900/95 backdrop-blur-md text-gray-200 flex flex-col sm:flex-row items-center justify-between shadow-inner">
-                {/* Left Side */}
-                <div className="flex items-center space-x-3">
-                    {/* Logo */}
-                    <div className="bg-linear-to-br from-blue-500 to-gray-400 p-2 rounded-lg">
-                        <Sparkles className="w-6 h-6 text-white" />
-                    </div>
-
-                    <p className="text-sm">
-                        Copyright © {new Date().getFullYear()} — All rights reserved
-                    </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Features Section */}
+      <section id="features" className="py-20 px-4 sm:px-6 lg:px-8 bg-black">
+        <div className="max-w-7xl mx-auto">
+          <div className="text-center mb-16">
+            <h2 className="text-4xl sm:text-5xl font-bold mb-4">
+              Why Choose InterviewAI?
+            </h2>
+            <p className="text-xl text-gray-400">
+              Everything you need to ace your next interview
+            </p>
+          </div>
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+            {features.map((feature: Feature, index: number) => (
+              <div
+                key={index}
+                className="bg-gradient-to-br from-blue-900/50 to-gray-900/50 backdrop-blur-sm rounded-xl p-8 border border-blue-500/20 hover:border-gray-500/50 transition-all duration-300 hover:transform hover:scale-105"
+              >
+                <div className="bg-gradient-to-br from-blue-500 to-gray-400 w-16 h-16 rounded-lg flex items-center justify-center mb-4 shadow-lg shadow-blue-500/50">
+                  {feature.icon}
                 </div>
-
-                {/* Right Side */}
-                <div className="flex items-center gap-5 mt-4 sm:mt-0">
-                    {/* Twitter */}
-                    <a href="#" className="hover:text-blue-400 transition">
-                        <svg
-                            xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" className="fill-current">
-                            <path d="M24 4.557a9.93 9.93 0 01-2.828.775A4.93 4.93 0 0023.337 3a9.864 9.864 0 01-3.127 1.195A4.92 4.92 0 0016.616 3c-2.72 0-4.924 2.21-4.924 4.932 0 .39.042.765.124 1.126C7.728 8.89 4.1 6.91 1.67 3.917a4.936 4.936 0 00-.665 2.48c0 1.71.86 3.213 2.17 4.096A4.9 4.9 0 01.96 9.96v.06c0 2.387 1.68 4.374 3.91 4.828a4.93 4.93 0 01-2.224.086c.626 1.956 2.444 3.384 4.6 3.425A9.874 9.874 0 010 21.54 13.945 13.945 0 007.548 24c9.056 0 14.01-7.512 14.01-14.015 0-.213-.005-.426-.015-.637A9.94 9.94 0 0024 4.557z" />
-                        </svg>
-                    </a>
-
-                    {/* YouTube */}
-                    <a href="#" className="hover:text-red-500 transition">
-                        <svg
-                            xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" className="fill-current">
-                            <path d="M19.615 3.184C21.403 3.67 22 5.84 22 12s-.597 8.33-2.385 8.816C17.42 21.27 12 21.27 12 21.27s-5.42 0-7.615-.454C2.597 20.33 2 18.16 2 12s.597-8.33 2.385-8.816C6.58 2.73 12 2.73 12 2.73s5.42 0 7.615.454zM10 8.5l6 3.5-6 3.5v-7z" />
-                        </svg>
-                    </a>
-
-                    {/* Facebook */}
-                    <a href="#" className="hover:text-blue-500 transition">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" className="fill-current">
-                            <path d="M9 8H6v4h3v12h5V12h3.642L18 8h-4V6.333C14 5.378 14.2 5 15.112 5H18V0h-3.667C10.55 0 9 1.517 9 4.308V8z" />
-                        </svg>
-                    </a>
+                <h3 className="text-xl font-bold mb-3">{feature.title}</h3>
+                <p className="text-gray-400">{feature.description}</p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* How It Works */}
+      <section
+        id="how-it-works"
+        className="py-20 px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-blue-900/50 to-gray-900/50 rounded-2xl border border-gray-200/30"
+      >
+        <div className="max-w-7xl mx-auto">
+          <div className="text-center mb-16">
+            <h2 className="text-4xl sm:text-5xl font-bold mb-4">
+              How It Works
+            </h2>
+            <p className="text-xl text-gray-400">
+              Get started in three simple steps
+            </p>
+          </div>
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+            {steps.map((item: Step, index: number) => (
+              <div key={index} className="relative text-center">
+                <div className="text-7xl font-bold text-white mb-4">
+                  {item.step}
                 </div>
-            </footer>
+                <h3 className="text-2xl font-bold mb-3">{item.title}</h3>
+                <p className="text-gray-400">{item.desc}</p>
+                {index < 2 && (
+                  <ChevronRight className="hidden md:block absolute top-12 -right-12 w-8 h-8 text-white" />
+                )}
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* CTA Section */}
+      <section className="py-20 px-4 sm:px-6 lg:px-8 bg-black">
+        <div className="max-w-4xl mx-auto text-center">
+          <h2 className="text-4xl sm:text-5xl font-bold mb-6">
+            Ready to Ace Your Interview?
+          </h2>
+          <p className="text-xl text-gray-300 mb-10">
+            Join thousands of successful candidates who prepared with
+            InterviewAI
+          </p>
+          <button
+            onClick={openSignUpModal}
+            className="px-10 py-5 rounded-lg bg-gradient-to-r from-blue-400 to-blue-700 hover:from-blue-600 hover:to-blue-900 transition shadow-lg shadow-blue-500/50 text-lg font-semibold"
+          >
+            Start Your Free Trial Today
+          </button>
+        </div>
+      </section>
+
+      {/* Footer */}
+      <footer className="w-full py-6 px-6 bg-slate-900/95 backdrop-blur-md text-gray-200 flex flex-col sm:flex-row items-center justify-between shadow-inner">
+        <div className="flex items-center space-x-3">
+          <div className="bg-gradient-to-br from-blue-500 to-gray-400 p-2 rounded-lg">
+            <Sparkles className="w-6 h-6 text-white" />
+          </div>
+          <p className="text-sm">
+            Copyright © {new Date().getFullYear()} — All rights reserved
+          </p>
+        </div>
+        <div className="flex items-center gap-5 mt-4 sm:mt-0">
+          <a href="#" className="hover:text-blue-400 transition">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+              className="fill-current"
+            >
+              <path d="M24 4.557a9.93 9.93 0 01-2.828.775A4.93 4.93 0 0023.337 3a9.864 9.864 0 01-3.127 1.195A4.92 4.92 0 0016.616 3c-2.72 0-4.924 2.21-4.924 4.932 0 .39.042.765.124 1.126C7.728 8.89 4.1 6.91 1.67 3.917a4.936 4.936 0 00-.665 2.48c0 1.71.86 3.213 2.17 4.096A4.9 4.9 0 01.96 9.96v.06c0 2.387 1.68 4.374 3.91 4.828a4.93 4.93 0 01-2.224.086c.626 1.956 2.444 3.384 4.6 3.425A9.874 9.874 0 010 21.54 13.945 13.945 0 007.548 24c9.056 0 14.01-7.512 14.01-14.015 0-.213-.005-.426-.015-.637A9.94 9.94 0 0024 4.557z" />
+            </svg>
+          </a>
+          <a href="#" className="hover:text-red-500 transition">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+              className="fill-current"
+            >
+              <path d="M19.615 3.184C21.403 3.67 22 5.84 22 12s-.597 8.33-2.385 8.816C17.42 21.27 12 21.27 12 21.27s-5.42 0-7.615-.454C2.597 20.33 2 18.16 2 12s.597-8.33 2.385-8.816C6.58 2.73 12 2.73 12 2.73s5.42 0 7.615.454zM10 8.5l6 3.5-6 3.5v-7z" />
+            </svg>
+          </a>
+          <a href="#" className="hover:text-blue-500 transition">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+              className="fill-current"
+            >
+              <path d="M9 8H6v4h3v12h5V12h3.642L18 8h-4V6.333C14 5.378 14.2 5 15.112 5H18V0h-3.667C10.55 0 9 1.517 9 4.308V8z" />
+            </svg>
+          </a>
         </div>
-    );
+      </footer>
+    </div>
+  );
 };
 
-export default AIInterviewPlatform;
+export default AIInterviewPlatform;

Frontend/src/pages/note.tsx

@@ -1,17 +1,14 @@
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
-import React, { useEffect, useState, useRef } from "react";
+import React, { useEffect, useState, useRef, useCallback } from "react";
 import {
-  History,
-  RefreshCw,
-  Plus,
   Upload,
   Menu,
   X,
   Send,
-  MessageSquare,
   Loader2,
   FileText,
+  MessageSquare,
 } from "lucide-react";
 import {
   fetchNotes,
@@ -20,6 +17,7 @@ import {
   createChatSession,
   streamChatRequest,
   fetchChatHistory,
+  fetchSessions, // ✅ Import this
   type Note,
   type ChatMessage,
 } from "../api/notesService";
@@ -31,6 +29,10 @@ const Notes: React.FC = () => {
   const [isUploading, setIsUploading] = useState(false);
   const fileInputRef = useRef<HTMLInputElement>(null);
 
+  // ✅ Resizable Chat State
+  const [chatWidth, setChatWidth] = useState(450); // Default width
+  const [isResizing, setIsResizing] = useState(false);
+
   // --- Data State ---
   const [notes, setNotes] = useState<Note[]>([]);
   const [currentNote, setCurrentNote] = useState<Note | null>(null);
@@ -47,6 +49,32 @@ const Notes: React.FC = () => {
     loadNotes();
   }, []);
 
+  // ✅ Handle 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);
+        }
+      }
+    },
+    [isResizing]
+  );
+
+  useEffect(() => {
+    window.addEventListener("mousemove", resize);
+    window.addEventListener("mouseup", stopResizing);
+    return () => {
+      window.removeEventListener("mousemove", resize);
+      window.removeEventListener("mouseup", stopResizing);
+    };
+  }, [resize, stopResizing]);
+
   const loadNotes = async () => {
     try {
       const data = await fetchNotes();
@@ -56,7 +84,6 @@ const Notes: React.FC = () => {
     }
   };
 
-  // 2. Handle File Upload
   const handleUploadClick = () => fileInputRef.current?.click();
 
   const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -66,8 +93,8 @@ const Notes: React.FC = () => {
     setIsUploading(true);
     try {
       const newNote = await uploadNote(file);
-      setNotes([newNote, ...notes]); // Add new note to top of list
-      handleNoteSelect(newNote); // Auto-select the uploaded note
+      setNotes([newNote, ...notes]);
+      handleNoteSelect(newNote);
     } catch (error) {
       console.error("Upload failed", error);
       alert("Failed to upload PDF");
@@ -76,14 +103,15 @@ const Notes: React.FC = () => {
     }
   };
 
-  // 3. Handle Note Selection (Viewer & Chat Init)
+  // ✅ FIX: Load History Logic (Issue 1)
   const handleNoteSelect = async (note: Note) => {
     setCurrentNote(note);
-    setPdfUrl(null); // Clear previous PDF to show loading state
-    setMessages([]); // Clear previous chat
+    setPdfUrl(null);
+    setMessages([]);
     setSessionId(null);
+    setIsChatOpen(true); // Auto open chat on select
 
-    // A. Fetch PDF Blob for Viewer
+    // A. Fetch PDF Blob
     try {
       const blob = await fetchNoteBlob(note.id);
       const url = URL.createObjectURL(blob);
@@ -92,59 +120,81 @@ const Notes: React.FC = () => {
       console.error("Failed to load PDF content", error);
     }
 
-    // B. Initialize Chat Session
+    // B. Check for existing sessions -> Get History OR Create New
     try {
-      // Create a new session for this file
-      // (In a real app, you might check for existing sessions first)
-      const session = await createChatSession(
-        note.id,
-        `Chat - ${note.filename}`
-      );
-      setSessionId(session.id);
+      const existingSessions = await fetchSessions(note.id);
 
-      // Add a system welcome message
-      setMessages([
-        { role: "assistant", content: `Ready to chat about ${note.filename}!` },
-      ]);
+      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}`
+        );
+        setSessionId(session.id);
+        setMessages([
+          {
+            role: "assistant",
+            content: `Ready to chat about ${note.filename}!`,
+          },
+        ]);
+      }
     } catch (error) {
       console.error("Failed to init chat session", error);
     }
   };
 
-  // 4. Handle Chat Streaming
+  // ✅ FIX: Loading State Bug (Issue 4)
   const handleSendMessage = async () => {
     if (!inputMessage.trim() || !sessionId) return;
 
     const userMsg = inputMessage;
-    setInputMessage(""); // Clear input
+    setInputMessage("");
 
-    // Add User Message Optimistically
     setMessages((prev) => [...prev, { role: "user", content: userMsg }]);
-    setIsChatLoading(true);
+    setIsChatLoading(true); // Start loading
 
-    // Placeholder for AI response
+    // Placeholder
     setMessages((prev) => [...prev, { role: "assistant", content: "" }]);
 
-    await streamChatRequest(
-      sessionId,
-      userMsg,
-      (chunk) => {
-        setMessages((prev) => {
-          const newArr = [...prev];
-          const lastIndex = newArr.length - 1;
-          newArr[lastIndex] = {
-            ...newArr[lastIndex],
-            content: newArr[lastIndex].content + chunk,
-          };
-
-          return newArr;
-        });
-      },
-      (err) => {
-        console.error("Stream error", err);
-        setIsChatLoading(false);
-      }
-    );
+    try {
+      await streamChatRequest(
+        sessionId,
+        userMsg,
+        (chunk) => {
+          setMessages((prev) => {
+            const newArr = [...prev];
+            const lastIndex = newArr.length - 1;
+            newArr[lastIndex] = {
+              ...newArr[lastIndex],
+              content: newArr[lastIndex].content + chunk,
+            };
+            return newArr;
+          });
+        },
+        (err) => {
+          console.error("Stream error", err);
+          // Don't set loading false here, let finally handle it
+        }
+      );
+    } catch (e) {
+      console.error("Chat Request Error", e);
+    } finally {
+      // ✅ Ensure loading stops regardless of success/fail so button enables
+      setIsChatLoading(false);
+    }
   };
 
   return (
@@ -160,8 +210,6 @@ const Notes: React.FC = () => {
             <h3 className="text-xl font-bold text-white mb-2 border-b border-gray-700 pb-2">
               My Notes
             </h3>
-
-            {/* Hidden Input for Upload */}
             <input
               type="file"
               ref={fileInputRef}
@@ -169,7 +217,6 @@ const Notes: React.FC = () => {
               accept="application/pdf"
               onChange={handleFileChange}
             />
-
             <button
               onClick={handleUploadClick}
               disabled={isUploading}
@@ -182,7 +229,6 @@ 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
@@ -229,7 +275,6 @@ const Notes: React.FC = () => {
             )}
           </header>
 
-          {/* PDF Frame */}
           <div className="flex-1 w-full h-full pt-16">
             {pdfUrl ? (
               <iframe
@@ -246,16 +291,27 @@ const Notes: React.FC = () => {
           </div>
         </div>
 
-        {/* --- Right: Chat Panel --- */}
+        {/* --- ✅ 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 flex-col bg-gray-900 border-l border-gray-700 flex-shrink-0 transition-all duration-300 ${
-            isChatOpen ? "w-96" : "w-0"
-          }`}
+          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`}
         >
           {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"
@@ -264,7 +320,6 @@ const Notes: React.FC = () => {
                 </button>
               </header>
 
-              {/* Messages */}
               <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">
@@ -285,7 +340,6 @@ const Notes: React.FC = () => {
                           : "bg-gray-700 text-gray-200 prose prose-invert max-w-none"
                       }`}
                     >
-                      {/* --- MARKDOWN RENDERING CHANGE IS HERE --- */}
                       {msg.role === "assistant" ? (
                         <ReactMarkdown remarkPlugins={[remarkGfm]}>
                           {msg.content}
@@ -305,7 +359,6 @@ const Notes: React.FC = () => {
                 )}
               </div>
 
-              {/* Input */}
               <div className="p-4 border-t border-gray-700">
                 <div className="flex gap-2">
                   <input
@@ -315,12 +368,12 @@ const Notes: React.FC = () => {
                     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}
+                    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"
+                    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>