Update web/src/components/LeftSidebar.tsx

web/src/components/LeftSidebar.tsx

@@ -1,49 +1,21 @@
-import React, { useState, useRef, useEffect } from 'react';
-import { LearningModeSelector } from './LearningModeSelector';
-import { Label } from './ui/label';
-import { Button } from './ui/button';
-import {
-  LogIn,
-  LogOut,
-  Bookmark,
-  Download,
-  Copy,
-  Search,
-  X,
-  MessageSquare,
-  Trash2,
-  Edit2,
-  Check,
-  X as XIcon
-} from 'lucide-react';
-import { Separator } from './ui/separator';
-import { GroupMembers } from './GroupMembers';
-import { Card } from './ui/card';
-import { Input } from './ui/input';
-import type {
-  LearningMode,
-  Language,
-  SpaceType,
-  GroupMember,
-  User as UserType,
-  SavedItem,
-  SavedChat
-} from '../App';
-import { toast } from 'sonner';
-import { Document, HeadingLevel, Packer, Paragraph, TextRun } from 'docx';
-import { jsPDF } from 'jspdf';
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-} from './ui/dialog';
-import type { CourseInfo } from '../App';
-
-// ----------------------------
-// Saved Chat Item Component (rename supported)
-// ----------------------------
+// web/src/components/LeftSidebar.tsx
+import React, { useEffect, useRef, useState } from "react";
+import { LearningModeSelector } from "./LearningModeSelector";
+import { Label } from "./ui/label";
+import { Button } from "./ui/button";
+import { LogIn, Bookmark, Download, Copy, MessageSquare, Trash2, Edit2, Check, X as XIcon } from "lucide-react";
+import { Separator } from "./ui/separator";
+import { GroupMembers } from "./GroupMembers";
+import { Card } from "./ui/card";
+import { Input } from "./ui/input";
+import type { LearningMode, Language, SpaceType, GroupMember, User as UserType, SavedItem, SavedChat } from "../App";
+import { toast } from "sonner";
+import { Document, HeadingLevel, Packer, Paragraph, TextRun } from "docx";
+import { jsPDF } from "jspdf";
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "./ui/dialog";
+import type { CourseInfo } from "../App";
+
+// Saved Chat Item Component with rename functionality
 function SavedChatItem({
   chat,
   onLoadChat,
@@ -99,8 +71,7 @@ function SavedChatItem({
     const relatedTarget = e.relatedTarget as HTMLElement;
     if (
       relatedTarget &&
-      (cancelButtonRef.current?.contains(relatedTarget) ||
-        saveButtonRef.current?.contains(relatedTarget))
+      (cancelButtonRef.current?.contains(relatedTarget) || saveButtonRef.current?.contains(relatedTarget))
     ) {
       return;
     }
@@ -111,14 +82,14 @@ function SavedChatItem({
   };
 
   const handleKeyDown = (e: React.KeyboardEvent) => {
-    if (e.key === 'Enter') {
+    if (e.key === "Enter") {
       e.preventDefault();
       e.stopPropagation();
       if (editTitle.trim() && onRenameSavedChat) {
         onRenameSavedChat(chat.id, editTitle.trim());
         setIsEditing(false);
       }
-    } else if (e.key === 'Escape') {
+    } else if (e.key === "Escape") {
       e.preventDefault();
       e.stopPropagation();
       setEditTitle(originalTitle);
@@ -127,10 +98,7 @@ function SavedChatItem({
   };
 
   return (
-    <Card
-      className="p-3 cursor-pointer hover:bg-muted/50 transition-all bg-muted/30"
-      onClick={() => !isEditing && onLoadChat(chat)}
-    >
+    <Card className="p-3 cursor-pointer hover:bg-muted/50 transition-all bg-muted/30" onClick={() => !isEditing && onLoadChat(chat)}>
       <div className="flex items-start gap-2">
         <MessageSquare className="h-3.5 w-3.5 mt-0.5 flex-shrink-0 text-muted-foreground" />
         <div className="flex-1 min-w-0">
@@ -144,7 +112,7 @@ function SavedChatItem({
                 onClick={(e) => e.stopPropagation()}
                 onBlur={handleInputBlur}
                 className="h-auto text-sm font-medium px-2 py-1 border border-border bg-background focus-visible:ring-2 focus-visible:ring-ring flex-1"
-                style={{ height: 'auto' }}
+                style={{ height: "auto" }}
               />
             ) : (
               <h4
@@ -198,14 +166,7 @@ function SavedChatItem({
               ) : (
                 <>
                   {onRenameSavedChat && (
-                    <Button
-                      variant="ghost"
-                      size="icon"
-                      className="h-5 w-5 flex-shrink-0 hover:bg-muted"
-                      onClick={handleStartEdit}
-                      title="Rename chat"
-                      type="button"
-                    >
+                    <Button variant="ghost" size="icon" className="h-5 w-5 flex-shrink-0 hover:bg-muted" onClick={handleStartEdit} title="Rename chat">
                       <Edit2 className="h-3 w-3" />
                     </Button>
                   )}
@@ -218,7 +179,6 @@ function SavedChatItem({
                       onDeleteSavedChat(chat.id);
                     }}
                     title="Delete chat"
-                    type="button"
                   >
                     <Trash2 className="h-3 w-3" />
                   </Button>
@@ -228,11 +188,10 @@ function SavedChatItem({
           </div>
 
           <p className="text-xs text-muted-foreground mt-1">
-            {chat.chatMode === 'ask' ? 'Ask' : chat.chatMode === 'review' ? 'Review' : 'Quiz'} •{' '}
-            {chat.timestamp.toLocaleDateString()}
+            {chat.chatMode === "ask" ? "Ask" : chat.chatMode === "review" ? "Review" : "Quiz"} • {chat.timestamp.toLocaleDateString()}
           </p>
           <p className="text-xs text-muted-foreground/70 mt-1">
-            {chat.messages.length} message{chat.messages.length !== 1 ? 's' : ''}
+            {chat.messages.length} message{chat.messages.length !== 1 ? "s" : ""}
           </p>
         </div>
       </div>
@@ -240,9 +199,6 @@ function SavedChatItem({
   );
 }
 
-// ----------------------------
-// LeftSidebar
-// ----------------------------
 interface LeftSidebarProps {
   learningMode: LearningMode;
   language: Language;
@@ -258,7 +214,7 @@ interface LeftSidebarProps {
   savedItems: SavedItem[];
   recentlySavedId: string | null;
   onUnsave: (id: string) => void;
-  onSave: (content: string, type: 'export' | 'quiz' | 'summary') => void;
+  onSave: (content: string, type: "export" | "quiz" | "summary") => void;
   savedChats: SavedChat[];
   onLoadChat: (chat: SavedChat) => void;
   onDeleteSavedChat: (id: string) => void;
@@ -267,7 +223,7 @@ interface LeftSidebarProps {
   workspaces?: Array<{
     id: string;
     type: SpaceType;
-    category?: 'course' | 'personal';
+    category?: "course" | "personal";
     courseName?: string;
     courseInfo?: CourseInfo;
     members?: GroupMember[];
@@ -306,43 +262,35 @@ export function LeftSidebar({
   availableCourses = [],
 }: LeftSidebarProps) {
   const [showLoginForm, setShowLoginForm] = useState(false);
-  const [name, setName] = useState('');
-  const [email, setEmail] = useState('');
-
+  const [name, setName] = useState("");
+  const [email, setEmail] = useState("");
   const [selectedItem, setSelectedItem] = useState<SavedItem | null>(null);
   const [isDialogOpen, setIsDialogOpen] = useState(false);
 
-  const [showSearch, setShowSearch] = useState(false);
-  const [searchQuery, setSearchQuery] = useState('');
-
   const [isDownloading, setIsDownloading] = useState(false);
   const [copied, setCopied] = useState(false);
 
-  // personal workspace title
-  const [editableTitle, setEditableTitle] = useState('Untitled');
-  const [isEditingTitle, setIsEditingTitle] = useState(false);
-
   const handleLogin = () => {
     if (!name.trim() || !email.trim()) {
-      toast.error('Please fill in all fields');
+      toast.error("Please fill in all fields");
       return;
     }
     onLogin({ name: name.trim(), email: email.trim() });
     setShowLoginForm(false);
-    setName('');
-    setEmail('');
+    setName("");
+    setEmail("");
     toast.success(`Welcome, ${name}!`);
   };
 
   const handleLogout = () => {
     onLogout();
     setShowLoginForm(false);
-    toast.success('Logged out successfully');
+    toast.success("Logged out successfully");
   };
 
   const downloadBlob = (blob: Blob, filename: string) => {
     const url = URL.createObjectURL(blob);
-    const a = document.createElement('a');
+    const a = document.createElement("a");
     a.href = url;
     a.download = filename;
     document.body.appendChild(a);
@@ -353,26 +301,26 @@ export function LeftSidebar({
 
   const formatDateStamp = (date: Date) => {
     const yyyy = date.getFullYear();
-    const mm = String(date.getMonth() + 1).padStart(2, '0');
-    const dd = String(date.getDate()).padStart(2, '0');
+    const mm = String(date.getMonth() + 1).padStart(2, "0");
+    const dd = String(date.getDate()).padStart(2, "0");
     return `${yyyy}-${mm}-${dd}`;
   };
 
   const getDefaultFilenameBase = (item: SavedItem) => {
-    const kind = item.type === 'export' ? 'export' : item.type === 'summary' ? 'summary' : 'quiz';
+    const kind = item.type === "export" ? "export" : item.type === "summary" ? "summary" : "quiz";
     return `clare-${kind}-${formatDateStamp(item.timestamp)}`;
   };
 
   const handleDownloadMd = async (item: SavedItem) => {
     try {
       setIsDownloading(true);
-      toast.message('Preparing .md…');
-      const blob = new Blob([item.content], { type: 'text/markdown;charset=utf-8' });
+      toast.message("Preparing .md…");
+      const blob = new Blob([item.content], { type: "text/markdown;charset=utf-8" });
       downloadBlob(blob, `${getDefaultFilenameBase(item)}.md`);
-      toast.success('Downloaded .md');
+      toast.success("Downloaded .md");
     } catch (e) {
       console.error(e);
-      toast.error('Failed to download .md');
+      toast.error("Failed to download .md");
     } finally {
       setIsDownloading(false);
     }
@@ -381,30 +329,24 @@ export function LeftSidebar({
   const handleDownloadDocx = async (item: SavedItem) => {
     try {
       setIsDownloading(true);
-      toast.message('Preparing .docx…');
-      const lines = item.content.split('\n');
+      toast.message("Preparing .docx…");
+      const lines = item.content.split("\n");
       const paragraphs: Paragraph[] = lines.map((line) => {
         const trimmed = line.trim();
-        if (!trimmed) return new Paragraph({ text: '' });
-        if (trimmed.startsWith('### ')) {
-          return new Paragraph({ text: trimmed.replace(/^###\s+/, ''), heading: HeadingLevel.HEADING_3 });
-        }
-        if (trimmed.startsWith('## ')) {
-          return new Paragraph({ text: trimmed.replace(/^##\s+/, ''), heading: HeadingLevel.HEADING_2 });
-        }
-        if (trimmed.startsWith('# ')) {
-          return new Paragraph({ text: trimmed.replace(/^#\s+/, ''), heading: HeadingLevel.HEADING_1 });
-        }
+        if (!trimmed) return new Paragraph({ text: "" });
+        if (trimmed.startsWith("### ")) return new Paragraph({ text: trimmed.replace(/^###\s+/, ""), heading: HeadingLevel.HEADING_3 });
+        if (trimmed.startsWith("## ")) return new Paragraph({ text: trimmed.replace(/^##\s+/, ""), heading: HeadingLevel.HEADING_2 });
+        if (trimmed.startsWith("# ")) return new Paragraph({ text: trimmed.replace(/^#\s+/, ""), heading: HeadingLevel.HEADING_1 });
         return new Paragraph({ children: [new TextRun({ text: line })] });
       });
 
       const doc = new Document({ sections: [{ properties: {}, children: paragraphs }] });
       const blob = await Packer.toBlob(doc);
       downloadBlob(blob, `${getDefaultFilenameBase(item)}.docx`);
-      toast.success('Downloaded .docx');
+      toast.success("Downloaded .docx");
     } catch (e) {
       console.error(e);
-      toast.error('Failed to download .docx');
+      toast.error("Failed to download .docx");
     } finally {
       setIsDownloading(false);
     }
@@ -413,8 +355,8 @@ export function LeftSidebar({
   const handleDownloadPdf = async (item: SavedItem) => {
     try {
       setIsDownloading(true);
-      toast.message('Preparing .pdf…');
-      const doc = new jsPDF({ unit: 'pt', format: 'a4' });
+      toast.message("Preparing .pdf…");
+      const doc = new jsPDF({ unit: "pt", format: "a4" });
       const pageWidth = doc.internal.pageSize.getWidth();
       const pageHeight = doc.internal.pageSize.getHeight();
       const margin = 40;
@@ -433,10 +375,10 @@ export function LeftSidebar({
       });
 
       doc.save(`${getDefaultFilenameBase(item)}.pdf`);
-      toast.success('Downloaded .pdf');
+      toast.success("Downloaded .pdf");
     } catch (e) {
       console.error(e);
-      toast.error('Failed to download .pdf');
+      toast.error("Failed to download .pdf");
     } finally {
       setIsDownloading(false);
     }
@@ -445,7 +387,7 @@ export function LeftSidebar({
   const handleCopy = async (content: string) => {
     await navigator.clipboard.writeText(content);
     setCopied(true);
-    toast.success('Copied to clipboard!');
+    toast.success("Copied to clipboard!");
     setTimeout(() => setCopied(false), 2000);
   };
 
@@ -453,7 +395,6 @@ export function LeftSidebar({
     onUnsave(id);
   };
 
-  // selected item still saved?
   const isItemSaved = selectedItem
     ? savedItems.some((item) => {
         if (selectedItem.id && item.id === selectedItem.id) return true;
@@ -463,12 +404,8 @@ export function LeftSidebar({
 
   useEffect(() => {
     if (selectedItem && isDialogOpen) {
-      const updatedItem = savedItems.find(
-        (item) => item.content === selectedItem.content && item.type === selectedItem.type
-      );
-      if (updatedItem && updatedItem.id !== selectedItem.id) {
-        setSelectedItem(updatedItem);
-      }
+      const updatedItem = savedItems.find((item) => item.content === selectedItem.content && item.type === selectedItem.type);
+      if (updatedItem && updatedItem.id !== selectedItem.id) setSelectedItem(updatedItem);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [savedItems, isDialogOpen]);
@@ -479,8 +416,7 @@ export function LeftSidebar({
     if (isItemSaved) {
       const itemToUnsave = savedItems.find(
         (item) =>
-          (selectedItem.id && item.id === selectedItem.id) ||
-          (item.content === selectedItem.content && item.type === selectedItem.type)
+          (selectedItem.id && item.id === selectedItem.id) || (item.content === selectedItem.content && item.type === selectedItem.type)
       );
       if (itemToUnsave) handleUnsaveItem(itemToUnsave.id);
     } else {
@@ -488,65 +424,56 @@ export function LeftSidebar({
     }
   };
 
-  // Filter saved items based on search query + workspaceId
   const filteredSavedItems = savedItems
-    .filter((item) => item.workspaceId === currentWorkspaceId)
-    .filter((item) => {
-      if (!searchQuery.trim()) return true;
-      const q = searchQuery.toLowerCase();
-      return (
-        item.title.toLowerCase().includes(q) ||
-        item.content.toLowerCase().includes(q) ||
-        item.type.toLowerCase().includes(q)
-      );
-    });
+    .filter((item) => item.workspaceId === currentWorkspaceId);
 
-  // Courses
   const defaultCourses = [
-    { id: 'course1', name: 'Introduction to AI' },
-    { id: 'course2', name: 'Machine Learning' },
-    { id: 'course3', name: 'Data Structures' },
-    { id: 'course4', name: 'Web Development' },
+    { id: "course1", name: "Introduction to AI" },
+    { id: "course2", name: "Machine Learning" },
+    { id: "course3", name: "Data Structures" },
+    { id: "course4", name: "Web Development" },
   ];
   const coursesList = courses.length > 0 ? courses : defaultCourses;
 
-  // Current workspace display info
   const currentWorkspace = workspaces?.find((w) => w.id === currentWorkspaceId);
 
+  const [editableTitle, setEditableTitle] = useState("Untitled");
+  const [isEditingTitle, setIsEditingTitle] = useState(false);
+
   const getCourseDisplayInfo = () => {
     if (!currentWorkspace) return null;
 
-    if (currentWorkspace.type === 'group' && currentWorkspace.category === 'course') {
+    if (currentWorkspace.type === "group" && currentWorkspace.category === "course") {
       if (currentWorkspace.courseInfo) {
         return {
-          type: 'course' as const,
+          type: "course" as const,
           name: currentWorkspace.courseInfo.name,
           instructor: currentWorkspace.courseInfo.instructor,
           teachingAssistant: currentWorkspace.courseInfo.teachingAssistant,
         };
       }
       return {
-        type: 'course' as const,
-        name: currentWorkspace.courseName || 'Unknown Course',
-        instructor: { name: 'Unknown', email: '' },
-        teachingAssistant: { name: 'Unknown', email: '' },
+        type: "course" as const,
+        name: currentWorkspace.courseName || "Unknown Course",
+        instructor: { name: "Unknown", email: "" },
+        teachingAssistant: { name: "Unknown", email: "" },
       };
     }
 
-    if (currentWorkspace.type === 'group' && currentWorkspace.category === 'personal') {
+    if (currentWorkspace.type === "group" && currentWorkspace.category === "personal") {
       return {
-        type: 'personal' as const,
+        type: "personal" as const,
         name: editableTitle,
         members: currentWorkspace.members || [],
       };
     }
 
-    if (currentWorkspace.type === 'individual') {
-      const saved = selectedCourse || localStorage.getItem('myspace_selected_course') || 'course1';
+    if (currentWorkspace.type === "individual") {
+      const saved = selectedCourse || localStorage.getItem("myspace_selected_course") || "course1";
       const courseInfo = availableCourses?.find((c) => c.id === saved);
       if (courseInfo) {
         return {
-          type: 'course' as const,
+          type: "course" as const,
           name: courseInfo.name,
           instructor: courseInfo.instructor,
           teachingAssistant: courseInfo.teachingAssistant,
@@ -554,10 +481,10 @@ export function LeftSidebar({
       }
       const course = coursesList.find((c) => c.id === saved);
       return {
-        type: 'course' as const,
+        type: "course" as const,
         name: course?.name || saved,
-        instructor: { name: 'Unknown', email: '' },
-        teachingAssistant: { name: 'Unknown', email: '' },
+        instructor: { name: "Unknown", email: "" },
+        teachingAssistant: { name: "Unknown", email: "" },
       };
     }
 
@@ -567,13 +494,11 @@ export function LeftSidebar({
   const courseDisplayInfo = getCourseDisplayInfo();
 
   return (
-    // ✅ IMPORTANT: LeftSidebar root should NOT be scroll container.
-    // The scroll container is provided by App.tsx wrapper: <div className="flex-1 min-h-0 overflow-y-auto">.
-    <div className="flex flex-col h-full min-h-0">
-      {/* Course Information Section */}
+    <div className="h-full min-h-0 flex flex-col overflow-hidden">
+      {/* Top fixed blocks */}
       {isLoggedIn && courseDisplayInfo && (
         <div className="p-4 border-b border-border flex-shrink-0">
-          {courseDisplayInfo.type === 'course' ? (
+          {courseDisplayInfo.type === "course" ? (
             <>
               <h3 className="text-base font-semibold mb-4">{courseDisplayInfo.name}</h3>
               <div className="space-y-2 text-sm">
@@ -600,7 +525,7 @@ export function LeftSidebar({
                     onChange={(e) => setEditableTitle(e.target.value)}
                     onBlur={() => setIsEditingTitle(false)}
                     onKeyDown={(e) => {
-                      if (e.key === 'Enter') setIsEditingTitle(false);
+                      if (e.key === "Enter") setIsEditingTitle(false);
                     }}
                     autoFocus
                     className="text-base font-semibold"
@@ -611,11 +536,12 @@ export function LeftSidebar({
                   </h3>
                 )}
               </div>
+
               <div className="space-y-2 text-sm">
                 <div className="text-muted-foreground mb-2">Members:</div>
-                {courseDisplayInfo.members.map((member, idx) => (
+                {courseDisplayInfo.members.map((member: any, idx: number) => (
                   <div key={member.id}>
-                    <span className="text-muted-foreground">{idx === 0 ? 'Creator: ' : 'Member: '}</span>
+                    <span className="text-muted-foreground">{idx === 0 ? "Creator: " : "Member: "}</span>
                     <a href={`mailto:${member.email}`} className="text-primary hover:underline">
                       {member.name}
                     </a>
@@ -627,7 +553,6 @@ export function LeftSidebar({
         </div>
       )}
 
-      {/* Login Section */}
       {!isLoggedIn && (
         <div className="p-4 border-b border-border flex-shrink-0">
           <h3 className="text-base font-medium mb-4">Login</h3>
@@ -640,9 +565,7 @@ export function LeftSidebar({
                   className="w-20 h-20 rounded-full object-cover mb-4"
                 />
                 <h3 className="mb-2">Welcome to Clare!</h3>
-                <p className="text-sm text-muted-foreground text-center mb-4">
-                  Log in to start your personalized learning journey
-                </p>
+                <p className="text-sm text-muted-foreground text-center mb-4">Log in to start your personalized learning journey</p>
               </div>
 
               {!showLoginForm ? (
@@ -658,11 +581,21 @@ export function LeftSidebar({
                   </div>
                   <div className="space-y-2">
                     <Label htmlFor="email">Email / Student ID</Label>
-                    <Input id="email" type="email" value={email} onChange={(e) => setEmail(e.target.value)} placeholder="Enter your email or ID" />
+                    <Input
+                      id="email"
+                      type="email"
+                      value={email}
+                      onChange={(e) => setEmail(e.target.value)}
+                      placeholder="Enter your email or ID"
+                    />
                   </div>
                   <div className="flex gap-2">
-                    <Button onClick={handleLogin} className="flex-1">Enter</Button>
-                    <Button variant="outline" onClick={() => setShowLoginForm(false)}>Cancel</Button>
+                    <Button onClick={handleLogin} className="flex-1">
+                      Enter
+                    </Button>
+                    <Button variant="outline" onClick={() => setShowLoginForm(false)}>
+                      Cancel
+                    </Button>
                   </div>
                 </div>
               )}
@@ -671,51 +604,50 @@ export function LeftSidebar({
         </div>
       )}
 
-      {/* Group members */}
-      {spaceType === 'group' && (
+      {spaceType === "group" && (
         <div className="p-4 border-b border-border flex-shrink-0">
           <GroupMembers members={groupMembers} />
         </div>
       )}
 
-      {/* ✅ Saved Chat Section: only the list scrolls */}
+      {/* Saved Chat: ONLY this list scrolls */}
       {isLoggedIn && (
-        <div className="border-b border-border p-4 flex-1 min-h-0 flex flex-col">
-          <h3 className="text-base font-medium mb-4 flex-shrink-0">Saved Chat</h3>
-
-          {savedChats.length === 0 ? (
-            <div className="text-sm text-muted-foreground text-center py-4 flex-shrink-0">
-              <MessageSquare className="h-8 w-8 mx-auto mb-2 opacity-50" />
-              <p>No saved chats yet</p>
-              <p className="text-xs mt-1">Save conversations to view them here</p>
-            </div>
-          ) : (
-            <div
-              className="space-y-2 overflow-y-auto flex-1 min-h-0"
-              style={{ overscrollBehavior: 'contain' }}
-            >
-              {savedChats.map((chat) => (
-                <div key={chat.id}>
+        <div className="flex-1 min-h-0 flex flex-col">
+          <div className="p-4 border-b border-border flex-shrink-0">
+            <h3 className="text-base font-medium">Saved Chat</h3>
+          </div>
+
+          <div className="flex-1 min-h-0 overflow-y-auto overscroll-contain p-4">
+            {savedChats.length === 0 ? (
+              <div className="text-sm text-muted-foreground text-center py-4">
+                <MessageSquare className="h-8 w-8 mx-auto mb-2 opacity-50" />
+                <p>No saved chats yet</p>
+                <p className="text-xs mt-1">Save conversations to view them here</p>
+              </div>
+            ) : (
+              <div className="space-y-2">
+                {savedChats.map((chat) => (
                   <SavedChatItem
+                    key={chat.id}
                     chat={chat}
                     onLoadChat={onLoadChat}
                     onDeleteSavedChat={onDeleteSavedChat}
                     onRenameSavedChat={onRenameSavedChat}
                   />
-                </div>
-              ))}
-            </div>
-          )}
+                ))}
+              </div>
+            )}
+          </div>
         </div>
       )}
 
-      {/* Saved Item Dialog */}
+      {/* Saved Item Dialog (保持你原逻辑) */}
       <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
         <DialogContent className="max-w-4xl max-h-[85vh] flex flex-col">
           <DialogHeader>
             <DialogTitle>{selectedItem?.title}</DialogTitle>
             <DialogDescription>
-              {selectedItem?.type === 'export' ? 'Export' : selectedItem?.type === 'quiz' ? 'Quiz' : 'Summary'} •{' '}
+              {selectedItem?.type === "export" ? "Export" : selectedItem?.type === "quiz" ? "Quiz" : "Summary"} •{" "}
               {selectedItem?.timestamp.toLocaleDateString()}
             </DialogDescription>
           </DialogHeader>
@@ -748,7 +680,7 @@ export function LeftSidebar({
                     .docx
                   </Button>
 
-                  {selectedItem.format === 'pdf' && (
+                  {selectedItem.format === "pdf" && (
                     <Button
                       variant="outline"
                       size="sm"
@@ -770,7 +702,7 @@ export function LeftSidebar({
                     className="h-7 px-2 text-xs gap-1.5"
                     title="Copy"
                   >
-                    <Copy className={`h-3 w-3 ${copied ? 'text-green-600' : ''}`} />
+                    <Copy className={`h-3 w-3 ${copied ? "text-green-600" : ""}`} />
                   </Button>
 
                   <Button
@@ -778,10 +710,12 @@ export function LeftSidebar({
                     size="sm"
                     onClick={handleToggleSave}
                     disabled={isDownloading}
-                    className={`h-7 px-2 text-xs gap-1.5 ${isItemSaved ? 'bg-red-50 dark:bg-red-950/20 border-red-300 dark:border-red-800' : ''}`}
-                    title={isItemSaved ? 'Unsave' : 'Save for later'}
+                    className={`h-7 px-2 text-xs gap-1.5 ${
+                      isItemSaved ? "bg-red-50 dark:bg-red-950/20 border-red-300 dark:border-red-800" : ""
+                    }`}
+                    title={isItemSaved ? "Unsave" : "Save for later"}
                   >
-                    <Bookmark className={`h-3 w-3 ${isItemSaved ? 'fill-red-600 text-red-600' : ''}`} />
+                    <Bookmark className={`h-3 w-3 ${isItemSaved ? "fill-red-600 text-red-600" : ""}`} />
                   </Button>
                 </div>