Improvements for sidebar

surfsense_backend/app/routes/chats_routes.py

@@ -6,7 +6,13 @@ from sqlalchemy.ext.asyncio import AsyncSession
 from sqlalchemy.future import select
 
 from app.db import Chat, SearchSpace, User, get_async_session
-from app.schemas import AISDKChatRequest, ChatCreate, ChatRead, ChatUpdate
+from app.schemas import (
+    AISDKChatRequest,
+    ChatCreate,
+    ChatRead,
+    ChatReadWithoutMessages,
+    ChatUpdate,
+)
 from app.tasks.stream_connector_search_results import stream_connector_search_results
 from app.users import current_active_user
 from app.utils.check_ownership import check_ownership
@@ -112,7 +118,7 @@ async def create_chat(
         ) from None
 
 
-@router.get("/chats/", response_model=list[ChatRead])
+@router.get("/chats/", response_model=list[ChatReadWithoutMessages])
 async def read_chats(
     skip: int = 0,
     limit: int = 100,
@@ -121,14 +127,26 @@ async def read_chats(
     user: User = Depends(current_active_user),
 ):
     try:
-        query = select(Chat).join(SearchSpace).filter(SearchSpace.user_id == user.id)
+        # Select specific fields excluding messages
+        query = (
+            select(
+                Chat.id,
+                Chat.type,
+                Chat.title,
+                Chat.initial_connectors,
+                Chat.search_space_id,
+                Chat.created_at,
+            )
+            .join(SearchSpace)
+            .filter(SearchSpace.user_id == user.id)
+        )
 
         # Filter by search_space_id if provided
         if search_space_id is not None:
             query = query.filter(Chat.search_space_id == search_space_id)
 
         result = await session.execute(query.offset(skip).limit(limit))
-        return result.scalars().all()
+        return result.all()
     except OperationalError:
         raise HTTPException(
             status_code=503, detail="Database operation failed. Please try again later."

surfsense_backend/app/schemas/__init__.py

@@ -1,5 +1,12 @@
 from .base import IDModel, TimestampModel
-from .chats import AISDKChatRequest, ChatBase, ChatCreate, ChatRead, ChatUpdate
+from .chats import (
+    AISDKChatRequest,
+    ChatBase,
+    ChatCreate,
+    ChatRead,
+    ChatReadWithoutMessages,
+    ChatUpdate,
+)
 from .chunks import ChunkBase, ChunkCreate, ChunkRead, ChunkUpdate
 from .documents import (
     DocumentBase,
@@ -37,6 +44,7 @@ __all__ = [
     "ChatBase",
     "ChatCreate",
     "ChatRead",
+    "ChatReadWithoutMessages",
     "ChatUpdate",
     "ChunkBase",
     "ChunkCreate",

surfsense_backend/app/schemas/chats.py

@@ -15,6 +15,12 @@ class ChatBase(BaseModel):
     search_space_id: int
 
 
+class ChatBaseWithoutMessages(BaseModel):
+    type: ChatType
+    title: str
+    search_space_id: int
+
+
 class ClientAttachment(BaseModel):
     name: str
     content_type: str
@@ -50,3 +56,7 @@ class ChatUpdate(ChatBase):
 
 class ChatRead(ChatBase, IDModel, TimestampModel):
     model_config = ConfigDict(from_attributes=True)
+
+
+class ChatReadWithoutMessages(ChatBaseWithoutMessages, IDModel, TimestampModel):
+    model_config = ConfigDict(from_attributes=True)

surfsense_web/app/dashboard/[search_space_id]/chats/chats-client.tsx

@@ -19,14 +19,7 @@ import { useEffect, useState } from "react";
 import { toast } from "sonner";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
-import {
+import { Card, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
-	Card,
-	CardContent,
-	CardDescription,
-	CardFooter,
-	CardHeader,
-	CardTitle,
-} from "@/components/ui/card";
 import {
 	Dialog,
 	DialogContent,
@@ -61,24 +54,16 @@ import {
 	SelectTrigger,
 	SelectValue,
 } from "@/components/ui/select";
+import { cn } from "@/lib/utils";
 
 interface Chat {
 	created_at: string;
 	id: number;
 	type: string;
 	title: string;
-	messages: ChatMessage[];
 	search_space_id: number;
 }
 
-interface ChatMessage {
-	id: string;
-	createdAt: string;
-	role: string;
-	content: string;
-	parts?: any;
-}
-
 interface ChatsPageClientProps {
 	searchSpaceId: string;
 }
@@ -580,12 +565,12 @@ export default function ChatsPageClient({ searchSpaceId }: ChatsPageClientProps)
 									animate="animate"
 									exit="exit"
 									transition={{ duration: 0.2, delay: index * 0.05 }}
-									className={`overflow-hidden hover:shadow-md transition-shadow 
+									className={cn(
-                    ${
+										"overflow-hidden hover:shadow-md transition-shadow",
 										selectionMode && selectedChats.includes(chat.id)
 											? "ring-2 ring-primary ring-offset-2"
 											: ""
-										}`}
+									)}
 									onClick={(e) => {
 										if (!selectionMode) return;
 										// Ignore clicks coming from interactive elements
@@ -672,24 +657,21 @@ export default function ChatsPageClient({ searchSpaceId }: ChatsPageClientProps)
 											)}
 										</div>
 									</CardHeader>
-									<CardContent>
+
-										<div className="text-sm text-muted-foreground line-clamp-3">
+									<CardFooter className="flex items-center justify-between gap-2 w-full">
-											{chat.messages && chat.messages.length > 0
-												? typeof chat.messages[0] === "string"
-													? chat.messages[0]
-													: chat.messages[0]?.content || "No message content"
-												: "No messages in this chat."}
-										</div>
-									</CardContent>
-									<CardFooter className="flex justify-between pt-2">
-										<div className="flex items-center text-xs text-muted-foreground">
-											<MessageCircleMore className="mr-1 h-3.5 w-3.5" />
-											<span>{chat.messages?.length || 0} messages</span>
-										</div>
 										<Badge variant="secondary" className="text-xs">
 											<Tag className="mr-1 h-3 w-3" />
 											{chat.type || "Unknown"}
 										</Badge>
+										<Button
+											size="sm"
+											onClick={() =>
+												router.push(`/dashboard/${chat.search_space_id}/researcher/${chat.id}`)
+											}
+										>
+											<MessageCircleMore className="h-4 w-4" />
+											<span>View Chat</span>
+										</Button>
 									</CardFooter>
 								</MotionCard>
 							))}

surfsense_web/components/sidebar/AppSidebarProvider.tsx

@@ -1,7 +1,7 @@
 "use client";
 
-import { Trash2 } from "lucide-react";
+import { AlertCircle, Trash2 } from "lucide-react";
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { AppSidebar } from "@/components/sidebar/app-sidebar";
 import { Button } from "@/components/ui/button";
 import {
@@ -12,7 +12,7 @@ import {
 	DialogHeader,
 	DialogTitle,
 } from "@/components/ui/dialog";
-import { apiClient } from "@/lib/api"; // Import the API client
+import { apiClient } from "@/lib/api";
 
 interface Chat {
 	created_at: string;
@@ -50,6 +50,26 @@ interface AppSidebarProviderProps {
 	}[];
 }
 
+// Loading skeleton component
+const LoadingSkeleton = () => (
+	<div className="space-y-2 p-2">
+		{Array.from({ length: 3 }).map((_, i) => (
+			<div key={i} className="h-8 bg-muted animate-pulse rounded-md" />
+		))}
+	</div>
+);
+
+// Error state component
+const ErrorState = ({ error, onRetry }: { error: string; onRetry: () => void }) => (
+	<div className="p-4 text-center">
+		<AlertCircle className="h-8 w-8 text-destructive mx-auto mb-2" />
+		<p className="text-sm text-muted-foreground mb-2">{error}</p>
+		<Button variant="outline" size="sm" onClick={onRetry}>
+			Retry
+		</Button>
+	</div>
+);
+
 export function AppSidebarProvider({
 	searchSpaceId,
 	navSecondary,
@@ -80,15 +100,12 @@ export function AppSidebarProvider({
 		setIsClient(true);
 	}, []);
 
-	// Fetch recent chats
+	// Memoized fetch function for chats
-	useEffect(() => {
+	const fetchRecentChats = useCallback(async () => {
-		const fetchRecentChats = async () => {
 		try {
 			// Only run on client-side
 			if (typeof window === "undefined") return;
 
-				try {
-					// Use the API client instead of direct fetch - filter by current search space ID
 			const chats: Chat[] = await apiClient.get<Chat[]>(
 				`api/v1/chats/?limit=5&skip=0&search_space_id=${searchSpaceId}`
 			);
@@ -97,22 +114,15 @@ export function AppSidebarProvider({
 			const sortedChats = chats.sort(
 				(a, b) => new Date(b.created_at).getTime() - new Date(a.created_at).getTime()
 			);
-					// console.log("sortedChats", sortedChats);
+
 			// Transform API response to the format expected by AppSidebar
 			const formattedChats = sortedChats.map((chat) => ({
-						name: chat.title || `Chat ${chat.id}`, // Fallback if title is empty
+				name: chat.title || `Chat ${chat.id}`,
 				url: `/dashboard/${chat.search_space_id}/researcher/${chat.id}`,
 				icon: "MessageCircleMore",
 				id: chat.id,
 				search_space_id: chat.search_space_id,
 				actions: [
-							{
-								name: "View Details",
-								icon: "ExternalLink",
-								onClick: () => {
-									window.location.href = `/dashboard/${chat.search_space_id}/researcher/${chat.id}`;
-								},
-							},
 					{
 						name: "Delete",
 						icon: "Trash2",
@@ -129,56 +139,18 @@ export function AppSidebarProvider({
 		} catch (error) {
 			console.error("Error fetching chats:", error);
 			setChatError(error instanceof Error ? error.message : "Unknown error occurred");
-					// Provide empty array to ensure UI still renders
 			setRecentChats([]);
 		} finally {
 			setIsLoadingChats(false);
 		}
-			} catch (error) {
-				console.error("Error in fetchRecentChats:", error);
-				setIsLoadingChats(false);
-			}
-		};
-
-		fetchRecentChats();
-
-		// Set up a refresh interval (every 5 minutes)
-		const intervalId = setInterval(fetchRecentChats, 5 * 60 * 1000);
-
-		// Clean up interval on component unmount
-		return () => clearInterval(intervalId);
 	}, [searchSpaceId]);
 
-	// Handle delete chat
+	// Memoized fetch function for search space
-	const handleDeleteChat = async () => {
+	const fetchSearchSpace = useCallback(async () => {
-		if (!chatToDelete) return;
-
-		try {
-			setIsDeleting(true);
-
-			// Use the API client instead of direct fetch
-			await apiClient.delete(`api/v1/chats/${chatToDelete.id}`);
-
-			// Close dialog and refresh chats
-			setRecentChats(recentChats.filter((chat) => chat.id !== chatToDelete.id));
-		} catch (error) {
-			console.error("Error deleting chat:", error);
-		} finally {
-			setIsDeleting(false);
-			setShowDeleteDialog(false);
-			setChatToDelete(null);
-		}
-	};
-
-	// Fetch search space details
-	useEffect(() => {
-		const fetchSearchSpace = async () => {
 		try {
 			// Only run on client-side
 			if (typeof window === "undefined") return;
 
-				try {
-					// Use the API client instead of direct fetch
 			const data: SearchSpace = await apiClient.get<SearchSpace>(
 				`api/v1/searchspaces/${searchSpaceId}`
 			);
@@ -190,38 +162,101 @@ export function AppSidebarProvider({
 		} finally {
 			setIsLoadingSearchSpace(false);
 		}
-			} catch (error) {
-				console.error("Error in fetchSearchSpace:", error);
-				setIsLoadingSearchSpace(false);
-			}
-		};
-
-		fetchSearchSpace();
 	}, [searchSpaceId]);
 
-	// Create a fallback chat if there's an error or no chats
+	// Retry function
-	const fallbackChats =
+	const retryFetch = useCallback(() => {
-		chatError || (!isLoadingChats && recentChats.length === 0)
+		setChatError(null);
-			? [
+		setSearchSpaceError(null);
+		setIsLoadingChats(true);
+		setIsLoadingSearchSpace(true);
+		fetchRecentChats();
+		fetchSearchSpace();
+	}, [fetchRecentChats, fetchSearchSpace]);
+
+	// Fetch recent chats
+	useEffect(() => {
+		fetchRecentChats();
+
+		// Set up a refresh interval (every 5 minutes)
+		const intervalId = setInterval(fetchRecentChats, 5 * 60 * 1000);
+
+		// Clean up interval on component unmount
+		return () => clearInterval(intervalId);
+	}, [fetchRecentChats]);
+
+	// Fetch search space details
+	useEffect(() => {
+		fetchSearchSpace();
+	}, [fetchSearchSpace]);
+
+	// Handle delete chat with better error handling
+	const handleDeleteChat = useCallback(async () => {
+		if (!chatToDelete) return;
+
+		try {
+			setIsDeleting(true);
+
+			await apiClient.delete(`api/v1/chats/${chatToDelete.id}`);
+
+			// Update local state
+			setRecentChats((prev) => prev.filter((chat) => chat.id !== chatToDelete.id));
+		} catch (error) {
+			console.error("Error deleting chat:", error);
+			// You could show a toast notification here
+		} finally {
+			setIsDeleting(false);
+			setShowDeleteDialog(false);
+			setChatToDelete(null);
+		}
+	}, [chatToDelete]);
+
+	// Memoized fallback chats
+	const fallbackChats = useMemo(() => {
+		if (chatError) {
+			return [
 				{
-						name: chatError ? "Error loading chats" : "No recent chats",
+					name: "Error loading chats",
 					url: "#",
-						icon: chatError ? "AlertCircle" : "MessageCircleMore",
+					icon: "AlertCircle",
+					id: 0,
+					search_space_id: Number(searchSpaceId),
+					actions: [
+						{
+							name: "Retry",
+							icon: "RefreshCw",
+							onClick: retryFetch,
+						},
+					],
+				},
+			];
+		}
+
+		if (!isLoadingChats && recentChats.length === 0) {
+			return [
+				{
+					name: "No recent chats",
+					url: "#",
+					icon: "MessageCircleMore",
 					id: 0,
 					search_space_id: Number(searchSpaceId),
 					actions: [],
 				},
-				]
+			];
-			: [];
+		}
+
+		return [];
+	}, [chatError, isLoadingChats, recentChats.length, searchSpaceId, retryFetch]);
 
 	// Use fallback chats if there's an error or no chats
 	const displayChats = recentChats.length > 0 ? recentChats : fallbackChats;
 
-	// Update the first item in navSecondary to show the search space name
+	// Memoized updated navSecondary
-	const updatedNavSecondary = [...navSecondary];
+	const updatedNavSecondary = useMemo(() => {
-	if (updatedNavSecondary.length > 0 && isClient) {
+		const updated = [...navSecondary];
-		updatedNavSecondary[0] = {
+		if (updated.length > 0 && isClient) {
-			...updatedNavSecondary[0],
+			updated[0] = {
+				...updated[0],
 				title:
 					searchSpace?.name ||
 					(isLoadingSearchSpace
@@ -231,17 +266,19 @@ export function AppSidebarProvider({
 							: "Unknown Search Space"),
 			};
 		}
+		return updated;
+	}, [navSecondary, isClient, searchSpace?.name, isLoadingSearchSpace, searchSpaceError]);
+
+	// Show loading state if not client-side
+	if (!isClient) {
+		return <AppSidebar navSecondary={navSecondary} navMain={navMain} RecentChats={[]} />;
+	}
 
 	return (
 		<>
-			<AppSidebar
+			<AppSidebar navSecondary={updatedNavSecondary} navMain={navMain} RecentChats={displayChats} />
-				navSecondary={updatedNavSecondary}
-				navMain={navMain}
-				RecentChats={isClient ? displayChats : []}
-			/>
 
-			{/* Delete Confirmation Dialog - Only render on client */}
+			{/* Delete Confirmation Dialog */}
-			{isClient && (
 			<Dialog open={showDeleteDialog} onOpenChange={setShowDeleteDialog}>
 				<DialogContent className="sm:max-w-md">
 					<DialogHeader>
@@ -284,7 +321,6 @@ export function AppSidebarProvider({
 					</DialogFooter>
 				</DialogContent>
 			</Dialog>
-			)}
 		</>
 	);
 }

surfsense_web/components/sidebar/app-sidebar.tsx

@@ -17,15 +17,17 @@ import {
 	Trash2,
 	Undo2,
 } from "lucide-react";
-import { useMemo } from "react";
+import { memo, useMemo } from "react";
 
 import { Logo } from "@/components/Logo";
 import { NavMain } from "@/components/sidebar/nav-main";
 import { NavProjects } from "@/components/sidebar/nav-projects";
 import { NavSecondary } from "@/components/sidebar/nav-secondary";
+import { NavUser } from "@/components/sidebar/nav-user";
 import {
 	Sidebar,
 	SidebarContent,
+	SidebarFooter,
 	SidebarHeader,
 	SidebarMenu,
 	SidebarMenuButton,
@@ -64,7 +66,6 @@ const defaultData = {
 			isActive: true,
 			items: [],
 		},
-
 		{
 			title: "Documents",
 			url: "#",
@@ -154,12 +155,12 @@ interface AppSidebarProps extends React.ComponentProps<typeof Sidebar> {
 	navSecondary?: {
 		title: string;
 		url: string;
-		icon: string; // Changed to string (icon name)
+		icon: string;
 	}[];
 	RecentChats?: {
 		name: string;
 		url: string;
-		icon: string; // Changed to string (icon name)
+		icon: string;
 		id?: number;
 		search_space_id?: number;
 		actions?: {
@@ -168,19 +169,26 @@ interface AppSidebarProps extends React.ComponentProps<typeof Sidebar> {
 			onClick: () => void;
 		}[];
 	}[];
+	user?: {
+		name: string;
+		email: string;
+		avatar: string;
+	};
 }
 
-export function AppSidebar({
+// Memoized AppSidebar component for better performance
+export const AppSidebar = memo(function AppSidebar({
 	navMain = defaultData.navMain,
 	navSecondary = defaultData.navSecondary,
 	RecentChats = defaultData.RecentChats,
+	user = defaultData.user,
 	...props
 }: AppSidebarProps) {
 	// Process navMain to resolve icon names to components
 	const processedNavMain = useMemo(() => {
 		return navMain.map((item) => ({
 			...item,
-			icon: iconMap[item.icon] || SquareTerminal, // Fallback to SquareTerminal if icon not found
+			icon: iconMap[item.icon] || SquareTerminal,
 		}));
 	}, [navMain]);
 
@@ -188,7 +196,7 @@ export function AppSidebar({
 	const processedNavSecondary = useMemo(() => {
 		return navSecondary.map((item) => ({
 			...item,
-			icon: iconMap[item.icon] || Undo2, // Fallback to Undo2 if icon not found
+			icon: iconMap[item.icon] || Undo2,
 		}));
 	}, [navSecondary]);
 
@@ -197,17 +205,17 @@ export function AppSidebar({
 		return (
 			RecentChats?.map((item) => ({
 				...item,
-				icon: iconMap[item.icon] || MessageCircleMore, // Fallback to MessageCircleMore if icon not found
+				icon: iconMap[item.icon] || MessageCircleMore,
 			})) || []
 		);
 	}, [RecentChats]);
 
 	return (
-		<Sidebar variant="inset" {...props}>
+		<Sidebar variant="inset" collapsible="icon" aria-label="Main navigation" {...props}>
 			<SidebarHeader>
 				<SidebarMenu>
 					<SidebarMenuItem>
-						<SidebarMenuButton size="lg" asChild>
+						<SidebarMenuButton size="lg" asChild aria-label="Go to home page">
 							<div>
 								<div className="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg">
 									<Logo className="rounded-lg" />
@@ -221,11 +229,22 @@ export function AppSidebar({
 					</SidebarMenuItem>
 				</SidebarMenu>
 			</SidebarHeader>
-			<SidebarContent>
+
+			<SidebarContent className="space-y-6">
 				<NavMain items={processedNavMain} />
-				{processedRecentChats.length > 0 && <NavProjects chats={processedRecentChats} />}
+
-				<NavSecondary items={processedNavSecondary} className="mt-auto" />
+				{processedRecentChats.length > 0 && (
+					<div className="space-y-2">
+						<NavProjects chats={processedRecentChats} />
+					</div>
+				)}
 			</SidebarContent>
+			<SidebarFooter>
+				<NavSecondary items={processedNavSecondary} className="mt-auto" />
+
+				{/* User Profile Section */}
+				<NavUser user={user} />
+			</SidebarFooter>
 		</Sidebar>
 	);
-}
+});

surfsense_web/components/sidebar/nav-main.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { ChevronRight, type LucideIcon } from "lucide-react";
+import { useMemo } from "react";
 
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
 import {
@@ -15,10 +16,7 @@ import {
 	SidebarMenuSubItem,
 } from "@/components/ui/sidebar";
 
-export function NavMain({
+interface NavItem {
-	items,
-}: {
-	items: {
 	title: string;
 	url: string;
 	icon: LucideIcon;
@@ -27,34 +25,47 @@ export function NavMain({
 		title: string;
 		url: string;
 	}[];
-	}[];
+}
-}) {
+
+export function NavMain({ items }: { items: NavItem[] }) {
+	// Memoize items to prevent unnecessary re-renders
+	const memoizedItems = useMemo(() => items, [items]);
+
 	return (
 		<SidebarGroup>
 			<SidebarGroupLabel>Platform</SidebarGroupLabel>
 			<SidebarMenu>
-				{items.map((item, index) => (
+				{memoizedItems.map((item, index) => (
 					<Collapsible key={`${item.title}-${index}`} asChild defaultOpen={item.isActive}>
 						<SidebarMenuItem>
-							<SidebarMenuButton asChild tooltip={item.title}>
+							<SidebarMenuButton
+								asChild
+								tooltip={item.title}
+								isActive={item.isActive}
+								aria-label={`${item.title}${item.items?.length ? " with submenu" : ""}`}
+							>
 								<a href={item.url}>
 									<item.icon />
 									<span>{item.title}</span>
 								</a>
 							</SidebarMenuButton>
+
 							{item.items?.length ? (
 								<>
 									<CollapsibleTrigger asChild>
-										<SidebarMenuAction className="data-[state=open]:rotate-90">
+										<SidebarMenuAction
+											className="data-[state=open]:rotate-90 transition-transform duration-200"
+											aria-label={`Toggle ${item.title} submenu`}
+										>
 											<ChevronRight />
-											<span className="sr-only">Toggle</span>
+											<span className="sr-only">Toggle submenu</span>
 										</SidebarMenuAction>
 									</CollapsibleTrigger>
-									<CollapsibleContent>
+									<CollapsibleContent className="data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 duration-200">
 										<SidebarMenuSub>
 											{item.items?.map((subItem, subIndex) => (
 												<SidebarMenuSubItem key={`${subItem.title}-${subIndex}`}>
-													<SidebarMenuSubButton asChild>
+													<SidebarMenuSubButton asChild aria-label={subItem.title}>
 														<a href={subItem.url}>
 															<span>{subItem.title}</span>
 														</a>

surfsense_web/components/sidebar/nav-projects.tsx

@@ -1,17 +1,27 @@
 "use client";
 
-import { ExternalLink, Folder, type LucideIcon, MoreHorizontal, Share, Trash2 } from "lucide-react";
+import {
+	ExternalLink,
+	Folder,
+	type LucideIcon,
+	MoreHorizontal,
+	RefreshCw,
+	Search,
+	Share,
+	Trash2,
+} from "lucide-react";
 import { useRouter } from "next/navigation";
+import { useCallback, useMemo, useState } from "react";
 import {
 	DropdownMenu,
 	DropdownMenuContent,
 	DropdownMenuItem,
-	DropdownMenuSeparator,
 	DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import {
 	SidebarGroup,
 	SidebarGroupLabel,
+	SidebarInput,
 	SidebarMenu,
 	SidebarMenuAction,
 	SidebarMenuButton,
@@ -26,6 +36,8 @@ const actionIconMap: Record<string, LucideIcon> = {
 	Share,
 	Trash2,
 	MoreHorizontal,
+	Search,
+	RefreshCw,
 };
 
 interface ChatAction {
@@ -34,33 +46,57 @@ interface ChatAction {
 	onClick: () => void;
 }
 
-export function NavProjects({
+interface ChatItem {
-	chats,
-}: {
-	chats: {
 	name: string;
 	url: string;
 	icon: LucideIcon;
 	id?: number;
 	search_space_id?: number;
 	actions?: ChatAction[];
-	}[];
+}
-}) {
+
+export function NavProjects({ chats }: { chats: ChatItem[] }) {
 	const { isMobile } = useSidebar();
 	const router = useRouter();
+	const [searchQuery, setSearchQuery] = useState("");
+	const [isDeleting, setIsDeleting] = useState<number | null>(null);
 
 	const searchSpaceId = chats[0]?.search_space_id || "";
 
+	// Memoized filtered chats
+	const filteredChats = useMemo(() => {
+		if (!searchQuery.trim()) return chats;
+
+		return chats.filter((chat) => chat.name.toLowerCase().includes(searchQuery.toLowerCase()));
+	}, [chats, searchQuery]);
+
+	// Handle chat deletion with loading state
+	const handleDeleteChat = useCallback(async (chatId: number, deleteAction: () => void) => {
+		setIsDeleting(chatId);
+		try {
+			await deleteAction();
+		} finally {
+			setIsDeleting(null);
+		}
+	}, []);
+
+	// Enhanced chat item component
+	const ChatItemComponent = useCallback(
+		({ chat }: { chat: ChatItem }) => {
+			const isDeletingChat = isDeleting === chat.id;
+
 			return (
-		<SidebarGroup className="group-data-[collapsible=icon]:hidden">
+				<SidebarMenuItem key={chat.id ? `chat-${chat.id}` : `chat-${chat.name}`}>
-			<SidebarGroupLabel>Recent Chats</SidebarGroupLabel>
+					<SidebarMenuButton
-			<SidebarMenu>
+						onClick={() => router.push(chat.url)}
-				{chats.map((item, index) => (
+						disabled={isDeletingChat}
-					<SidebarMenuItem key={item.id ? `chat-${item.id}` : `chat-${item.name}-${index}`}>
+						className={isDeletingChat ? "opacity-50" : ""}
-						<SidebarMenuButton>
+					>
-							<item.icon />
+						<chat.icon />
-							<span>{item.name}</span>
+						<span className={isDeletingChat ? "opacity-50" : ""}>{chat.name}</span>
 					</SidebarMenuButton>
+
+					{chat.actions && chat.actions.length > 0 && (
 						<DropdownMenu>
 							<DropdownMenuTrigger asChild>
 								<SidebarMenuAction showOnHover>
@@ -73,44 +109,79 @@ export function NavProjects({
 								side={isMobile ? "bottom" : "right"}
 								align={isMobile ? "end" : "start"}
 							>
-								{item.actions ? (
+								{chat.actions.map((action, actionIndex) => {
-									// Use the actions provided by the item
-									item.actions.map((action, actionIndex) => {
 									const ActionIcon = actionIconMap[action.icon] || Folder;
+									const isDeleteAction = action.name.toLowerCase().includes("delete");
+
 									return (
 										<DropdownMenuItem
 											key={`${action.name}-${actionIndex}`}
-												onClick={action.onClick}
+											onClick={() => {
+												if (isDeleteAction) {
+													handleDeleteChat(chat.id || 0, action.onClick);
+												} else {
+													action.onClick();
+												}
+											}}
+											disabled={isDeletingChat}
+											className={isDeleteAction ? "text-destructive" : ""}
 										>
 											<ActionIcon className="text-muted-foreground" />
-												<span>{action.name}</span>
+											<span>{isDeletingChat && isDeleteAction ? "Deleting..." : action.name}</span>
 										</DropdownMenuItem>
 									);
-									})
+								})}
-								) : (
-									// Default actions if none provided
-									<>
-										<DropdownMenuItem>
-											<Folder className="text-muted-foreground" />
-											<span>View Chat</span>
-										</DropdownMenuItem>
-										<DropdownMenuSeparator />
-										<DropdownMenuItem>
-											<Trash2 className="text-muted-foreground" />
-											<span>Delete Chat</span>
-										</DropdownMenuItem>
-									</>
-								)}
 							</DropdownMenuContent>
 						</DropdownMenu>
+					)}
 				</SidebarMenuItem>
-				))}
+			);
+		},
+		[isDeleting, router, isMobile, handleDeleteChat]
+	);
+
+	// Show search input if there are chats
+	const showSearch = chats.length > 0;
+
+	return (
+		<SidebarGroup className="group-data-[collapsible=icon]:hidden">
+			<SidebarGroupLabel>Recent Chats</SidebarGroupLabel>
+
+			{/* Search Input */}
+			{showSearch && (
+				<div className="px-2 pb-2">
+					<SidebarInput
+						placeholder="Search chats..."
+						value={searchQuery}
+						onChange={(e) => setSearchQuery(e.target.value)}
+						className="h-8"
+					/>
+				</div>
+			)}
+
+			<SidebarMenu>
+				{/* Chat Items */}
+				{filteredChats.length > 0 ? (
+					filteredChats.map((chat) => <ChatItemComponent key={chat.id || chat.name} chat={chat} />)
+				) : (
+					/* No results state */
+					<SidebarMenuItem>
+						<SidebarMenuButton disabled className="text-muted-foreground">
+							<Search className="h-4 w-4" />
+							<span>{searchQuery ? "No chats found" : "No recent chats"}</span>
+						</SidebarMenuButton>
+					</SidebarMenuItem>
+				)}
+
+				{/* View All Chats */}
+				{chats.length > 0 && (
 					<SidebarMenuItem>
 						<SidebarMenuButton onClick={() => router.push(`/dashboard/${searchSpaceId}/chats`)}>
 							<MoreHorizontal />
 							<span>View All Chats</span>
 						</SidebarMenuButton>
 					</SidebarMenuItem>
+				)}
 			</SidebarMenu>
 		</SidebarGroup>
 	);

surfsense_web/components/sidebar/nav-secondary.tsx

@@ -2,6 +2,7 @@
 
 import type { LucideIcon } from "lucide-react";
 import type * as React from "react";
+import { useMemo } from "react";
 
 import {
 	SidebarGroup,
@@ -11,23 +12,28 @@ import {
 	SidebarMenuItem,
 } from "@/components/ui/sidebar";
 
+interface NavSecondaryItem {
+	title: string;
+	url: string;
+	icon: LucideIcon;
+}
+
 export function NavSecondary({
 	items,
 	...props
 }: {
-	items: {
+	items: NavSecondaryItem[];
-		title: string;
-		url: string;
-		icon: LucideIcon;
-	}[];
 } & React.ComponentPropsWithoutRef<typeof SidebarGroup>) {
+	// Memoize items to prevent unnecessary re-renders
+	const memoizedItems = useMemo(() => items, [items]);
+
 	return (
 		<SidebarGroup {...props}>
 			<SidebarGroupLabel>SearchSpace</SidebarGroupLabel>
 			<SidebarMenu>
-				{items.map((item, index) => (
+				{memoizedItems.map((item, index) => (
 					<SidebarMenuItem key={`${item.title}-${index}`}>
-						<SidebarMenuButton asChild size="sm">
+						<SidebarMenuButton asChild size="sm" aria-label={item.title}>
 							<a href={item.url}>
 								<item.icon />
 								<span>{item.title}</span>

surfsense_web/components/sidebar/nav-user.tsx

@@ -1,7 +1,8 @@
 "use client";
 
-import { BadgeCheck, ChevronsUpDown, LogOut, Settings } from "lucide-react";
+import { BadgeCheck, ChevronsUpDown, LogOut, Settings, User } from "lucide-react";
 import { useParams, useRouter } from "next/navigation";
+import { memo, useCallback } from "react";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import {
 	DropdownMenu,
@@ -13,32 +14,43 @@ import {
 	DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import {
+	SidebarGroup,
 	SidebarMenu,
 	SidebarMenuButton,
 	SidebarMenuItem,
 	useSidebar,
 } from "@/components/ui/sidebar";
 
-export function NavUser({
+interface UserData {
-	user,
-}: {
-	user: {
 	name: string;
 	email: string;
 	avatar: string;
-	};
+}
-}) {
+
+// Memoized NavUser component for better performance
+export const NavUser = memo(function NavUser({ user }: { user: UserData }) {
 	const { isMobile } = useSidebar();
 	const router = useRouter();
 	const { search_space_id } = useParams();
 
-	const handleLogout = () => {
+	// Memoized logout handler
+	const handleLogout = useCallback(() => {
 		if (typeof window !== "undefined") {
 			localStorage.removeItem("surfsense_bearer_token");
 			router.push("/");
 		}
-	};
+	}, [router]);
+
+	// Get user initials for avatar fallback
+	const userInitials = user.name
+		.split(" ")
+		.map((n) => n[0])
+		.join("")
+		.toUpperCase()
+		.slice(0, 2);
+
 	return (
+		<SidebarGroup className="mt-auto">
 			<SidebarMenu>
 				<SidebarMenuItem>
 					<DropdownMenu>
@@ -46,14 +58,17 @@ export function NavUser({
 							<SidebarMenuButton
 								size="lg"
 								className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+								aria-label="User menu"
 							>
 								<Avatar className="h-8 w-8 rounded-lg">
 									<AvatarImage src={user.avatar} alt={user.name} />
-								<AvatarFallback className="rounded-lg">CN</AvatarFallback>
+									<AvatarFallback className="rounded-lg">
+										{userInitials || <User className="h-4 w-4" />}
+									</AvatarFallback>
 								</Avatar>
 								<div className="grid flex-1 text-left text-sm leading-tight">
 									<span className="truncate font-medium">{user.name}</span>
-								<span className="truncate text-xs">{user.email}</span>
+									<span className="truncate text-xs text-muted-foreground">{user.email}</span>
 								</div>
 								<ChevronsUpDown className="ml-auto size-4" />
 							</SidebarMenuButton>
@@ -68,11 +83,13 @@ export function NavUser({
 								<div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
 									<Avatar className="h-8 w-8 rounded-lg">
 										<AvatarImage src={user.avatar} alt={user.name} />
-									<AvatarFallback className="rounded-lg">CN</AvatarFallback>
+										<AvatarFallback className="rounded-lg">
+											{userInitials || <User className="h-4 w-4" />}
+										</AvatarFallback>
 									</Avatar>
 									<div className="grid flex-1 text-left text-sm leading-tight">
 										<span className="truncate font-medium">{user.name}</span>
-									<span className="truncate text-xs">{user.email}</span>
+										<span className="truncate text-xs text-muted-foreground">{user.email}</span>
 									</div>
 								</div>
 							</DropdownMenuLabel>
@@ -80,23 +97,32 @@ export function NavUser({
 							<DropdownMenuGroup>
 								<DropdownMenuItem
 									onClick={() => router.push(`/dashboard/${search_space_id}/api-key`)}
+									aria-label="Manage API key"
 								>
-								<BadgeCheck />
+									<BadgeCheck className="h-4 w-4" />
 									API Key
 								</DropdownMenuItem>
 							</DropdownMenuGroup>
 							<DropdownMenuSeparator />
-						<DropdownMenuItem onClick={() => router.push(`/settings`)}>
+							<DropdownMenuItem
-							<Settings />
+								onClick={() => router.push(`/settings`)}
+								aria-label="Go to settings"
+							>
+								<Settings className="h-4 w-4" />
 								Settings
 							</DropdownMenuItem>
-						<DropdownMenuItem onClick={handleLogout}>
+							<DropdownMenuItem
-							<LogOut />
+								onClick={handleLogout}
-							Log out
+								aria-label="Sign out"
+								className="text-destructive focus:text-destructive"
+							>
+								<LogOut className="h-4 w-4" />
+								Sign out
 							</DropdownMenuItem>
 						</DropdownMenuContent>
 					</DropdownMenu>
 				</SidebarMenuItem>
 			</SidebarMenu>
+		</SidebarGroup>
 	);
-}
+});