apunkt/SurfSense
1
0
Fork 0
mirror of https://github.com/MODSetter/SurfSense.git synced 2026-04-25 00:36:31 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

refactor: remove old chat components and implement new sidebar structure

Browse source 
- Deleted `chats-client.tsx` and `page.tsx` as part of the chat management overhaul.
- Introduced `AllChatsSidebar` and `NavChats` components for improved chat navigation and management.
- Updated sidebar to integrate new chat components and removed the deprecated `NavProjects`.
- Enhanced chat deletion handling and added loading states for better user experience.
- Added new translation keys for chat-related UI strings.
This commit is contained in:
Anish Sarkar 2025-12-19 03:53:40 +05:30
parent 90b4ce6e43
commit 79e552520a
11 changed files with 500 additions and 672 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,458 +0,0 @@
"use client";
import { format } from "date-fns";
import { useAtom, useAtomValue } from "jotai";
import {
Calendar,
ExternalLink,
MessageCircleMore,
MoreHorizontal,
Search,
Tag,
Trash2,
} from "lucide-react";
import { AnimatePresence, motion, type Variants } from "motion/react";
import { useRouter, useSearchParams } from "next/navigation";
import { useEffect, useState } from "react";
import { deleteChatMutationAtom } from "@/atoms/chats/chat-mutation.atoms";
import { chatsAtom } from "@/atoms/chats/chat-query.atoms";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
import {
Dialog,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
} from "@/components/ui/dialog";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuSeparator,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { Input } from "@/components/ui/input";
import {
Pagination,
PaginationContent,
PaginationItem,
PaginationLink,
PaginationNext,
PaginationPrevious,
} from "@/components/ui/pagination";
import {
Select,
SelectContent,
SelectGroup,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
export interface Chat {
created_at: string;
id: number;
type: "QNA";
title: string;
search_space_id: number;
state_version: number;
}
export interface ChatDetails {
type: "QNA";
title: string;
initial_connectors: string[];
messages: any[];
created_at: string;
id: number;
search_space_id: number;
state_version: number;
}
interface ChatsPageClientProps {
searchSpaceId: string;
}
const pageVariants: Variants = {
initial: { opacity: 0 },
enter: { opacity: 1, transition: { duration: 0.3, ease: "easeInOut" } },
exit: { opacity: 0, transition: { duration: 0.3, ease: "easeInOut" } },
};
const chatCardVariants: Variants = {
initial: { y: 20, opacity: 0 },
animate: { y: 0, opacity: 1 },
exit: { y: -20, opacity: 0 },
};
const MotionCard = motion(Card);
export default function ChatsPageClient({ searchSpaceId }: ChatsPageClientProps) {
const router = useRouter();
const [filteredChats, setFilteredChats] = useState<Chat[]>([]);
const [searchQuery, setSearchQuery] = useState("");
const [currentPage, setCurrentPage] = useState(1);
const [totalPages, setTotalPages] = useState(1);
const [selectedType, setSelectedType] = useState<string>("all");
const [sortOrder, setSortOrder] = useState<string>("newest");
const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
const [chatToDelete, setChatToDelete] = useState<{
id: number;
title: string;
} | null>(null);
const { isFetching: isFetchingChats, data: chats, error: fetchError } = useAtomValue(chatsAtom);
const [{ isPending: isDeletingChat, mutateAsync: deleteChat, error: deleteError }] =
useAtom(deleteChatMutationAtom);
const chatsPerPage = 9;
const searchParams = useSearchParams();
// Get initial page from URL params if it exists
useEffect(() => {
const pageParam = searchParams.get("page");
if (pageParam) {
const pageNumber = parseInt(pageParam, 10);
if (!Number.isNaN(pageNumber) && pageNumber > 0) {
setCurrentPage(pageNumber);
}
}
}, [searchParams]);
// Filter and sort chats based on search query, type, and sort order
useEffect(() => {
let result = [...(chats || [])];
// Filter by search term
if (searchQuery) {
const query = searchQuery.toLowerCase();
result = result.filter((chat) => chat.title.toLowerCase().includes(query));
}
// Filter by type
if (selectedType !== "all") {
result = result.filter((chat) => chat.type === selectedType);
}
// Sort chats
result.sort((a, b) => {
const dateA = new Date(a.created_at).getTime();
const dateB = new Date(b.created_at).getTime();
return sortOrder === "newest" ? dateB - dateA : dateA - dateB;
});
setFilteredChats(result);
setTotalPages(Math.max(1, Math.ceil(result.length / chatsPerPage)));
// Reset to first page when filters change
if (currentPage !== 1 && (searchQuery || selectedType !== "all" || sortOrder !== "newest")) {
setCurrentPage(1);
}
}, [chats, searchQuery, selectedType, sortOrder, currentPage]);
// Function to handle chat deletion
const handleDeleteChat = async () => {
if (!chatToDelete) return;
await deleteChat({ id: chatToDelete.id });
setDeleteDialogOpen(false);
setChatToDelete(null);
};
// Calculate pagination
const indexOfLastChat = currentPage * chatsPerPage; // Index of last chat in the current page
const indexOfFirstChat = indexOfLastChat - chatsPerPage; // Index of first chat in the current page
const currentChats = filteredChats.slice(indexOfFirstChat, indexOfLastChat);
// Get unique chat types for filter dropdown
const chatTypes = chats ? ["all", ...Array.from(new Set(chats.map((chat) => chat.type)))] : [];
return (
<motion.div
className="container p-6 mx-auto"
initial="initial"
animate="enter"
exit="exit"
variants={pageVariants}
>
<div className="flex flex-col space-y-4 md:space-y-6">
<div className="flex flex-col space-y-2">
<h1 className="text-3xl font-bold tracking-tight">All Chats</h1>
<p className="text-muted-foreground">View, search, and manage all your chats.</p>
</div>
{/* Filter and Search Bar */}
<div className="flex flex-col space-y-4 md:flex-row md:items-center md:justify-between md:space-y-0">
<div className="flex flex-1 items-center gap-2">
<div className="relative w-full md:w-80">
<Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
<Input
type="text"
placeholder="Search chats..."
className="pl-8"
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
/>
</div>
<Select value={selectedType} onValueChange={setSelectedType}>
<SelectTrigger className="w-full md:w-40">
<SelectValue placeholder="Filter by type" />
</SelectTrigger>
<SelectContent>
<SelectGroup>
{chatTypes.map((type) => (
<SelectItem key={type} value={type}>
{type === "all" ? "All Types" : type.charAt(0).toUpperCase() + type.slice(1)}
</SelectItem>
))}
</SelectGroup>
</SelectContent>
</Select>
</div>
<div className="flex items-center gap-2">
<Select value={sortOrder} onValueChange={setSortOrder}>
<SelectTrigger className="w-40">
<SelectValue placeholder="Sort order" />
</SelectTrigger>
<SelectContent>
<SelectGroup>
<SelectItem value="newest">Newest First</SelectItem>
<SelectItem value="oldest">Oldest First</SelectItem>
</SelectGroup>
</SelectContent>
</Select>
</div>
</div>
{/* Status Messages */}
{isFetchingChats && (
<div className="flex items-center justify-center h-40">
<div className="flex flex-col items-center gap-2">
<div className="h-8 w-8 animate-spin rounded-full border-4 border-primary border-t-transparent"></div>
<p className="text-sm text-muted-foreground">Loading chats...</p>
</div>
</div>
)}
{fetchError && !isFetchingChats && (
<div className="border border-destructive/50 text-destructive p-4 rounded-md">
<h3 className="font-medium">Error loading chats</h3>
<p className="text-sm">{fetchError.message}</p>
</div>
)}
{!isFetchingChats && !fetchError && filteredChats.length === 0 && (
<div className="flex flex-col items-center justify-center h-40 gap-2 text-center">
<MessageCircleMore className="h-8 w-8 text-muted-foreground" />
<h3 className="font-medium">No chats found</h3>
<p className="text-sm text-muted-foreground">
{searchQuery || selectedType !== "all"
? "Try adjusting your search filters"
: "Start a new chat to get started"}
</p>
</div>
)}
{/* Chat Grid */}
{!isFetchingChats && !fetchError && filteredChats.length > 0 && (
<AnimatePresence mode="wait">
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
{currentChats.map((chat, index) => (
<MotionCard
key={chat.id}
variants={chatCardVariants}
initial="initial"
animate="animate"
exit="exit"
transition={{ duration: 0.2, delay: index * 0.05 }}
className="overflow-hidden hover:shadow-md transition-shadow"
>
<CardHeader className="pb-3">
<div className="flex justify-between items-start">
<div className="space-y-1">
<CardTitle className="line-clamp-1">
{chat.title || `Chat ${chat.id}`}
</CardTitle>
<CardDescription>
<span className="flex items-center gap-1">
<Calendar className="h-3.5 w-3.5" />
<span>{format(new Date(chat.created_at), "MMM d, yyyy")}</span>
</span>
</CardDescription>
</div>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="ghost" size="icon" className="h-8 w-8">
<MoreHorizontal className="h-4 w-4" />
<span className="sr-only">Open menu</span>
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuItem
onClick={() =>
router.push(
`/dashboard/${chat.search_space_id}/researcher/${chat.id}`
)
}
>
<ExternalLink className="mr-2 h-4 w-4" />
<span>View Chat</span>
</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem
className="text-destructive focus:text-destructive"
onClick={(e) => {
e.stopPropagation();
setChatToDelete({
id: chat.id,
title: chat.title || `Chat ${chat.id}`,
});
setDeleteDialogOpen(true);
}}
>
<Trash2 className="mr-2 h-4 w-4" />
<span>Delete Chat</span>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</div>
</CardHeader>
<CardFooter className="flex items-center justify-between gap-2 w-full">
<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>
))}
</div>
</AnimatePresence>
)}
{/* Pagination */}
{!isFetchingChats && !fetchError && totalPages > 1 && (
<Pagination className="mt-8">
<PaginationContent>
<PaginationItem>
<PaginationPrevious
href={`?page=${Math.max(1, currentPage - 1)}`}
onClick={(e) => {
e.preventDefault();
if (currentPage > 1) setCurrentPage(currentPage - 1);
}}
className={currentPage <= 1 ? "pointer-events-none opacity-50" : ""}
/>
</PaginationItem>
{Array.from({ length: totalPages }).map((_, index) => {
const pageNumber = index + 1;
const isVisible =
pageNumber === 1 ||
pageNumber === totalPages ||
(pageNumber >= currentPage - 1 && pageNumber <= currentPage + 1);
if (!isVisible) {
// Show ellipsis at appropriate positions
if (pageNumber === 2 || pageNumber === totalPages - 1) {
return (
<PaginationItem key={pageNumber}>
<span className="flex h-9 w-9 items-center justify-center">...</span>
</PaginationItem>
);
}
return null;
}
return (
<PaginationItem key={pageNumber}>
<PaginationLink
href={`?page=${pageNumber}`}
onClick={(e) => {
e.preventDefault();
setCurrentPage(pageNumber);
}}
isActive={pageNumber === currentPage}
>
{pageNumber}
</PaginationLink>
</PaginationItem>
);
})}
<PaginationItem>
<PaginationNext
href={`?page=${Math.min(totalPages, currentPage + 1)}`}
onClick={(e) => {
e.preventDefault();
if (currentPage < totalPages) setCurrentPage(currentPage + 1);
}}
className={currentPage >= totalPages ? "pointer-events-none opacity-50" : ""}
/>
</PaginationItem>
</PaginationContent>
</Pagination>
)}
</div>
{/* Delete Confirmation Dialog */}
<Dialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
<DialogContent className="sm:max-w-md">
<DialogHeader>
<DialogTitle className="flex items-center gap-2">
<Trash2 className="h-5 w-5 text-destructive" />
<span>Delete Chat</span>
</DialogTitle>
<DialogDescription>
Are you sure you want to delete{" "}
<span className="font-medium">{chatToDelete?.title}</span>? This action cannot be
undone.
</DialogDescription>
</DialogHeader>
<DialogFooter className="flex gap-2 sm:justify-end">
<Button
variant="outline"
onClick={() => setDeleteDialogOpen(false)}
disabled={isDeletingChat}
>
Cancel
</Button>
<Button
variant="destructive"
onClick={handleDeleteChat}
disabled={isDeletingChat}
className="gap-2"
>
{isDeletingChat ? (
<>
<span className="h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent" />
Deleting...
</>
) : (
<>
<Trash2 className="h-4 w-4" />
Delete
</>
)}
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
</motion.div>
);
}

25
surfsense_web/app/dashboard/[search_space_id]/chats/page.tsx
View file

@ -1,25 +0,0 @@
import { Suspense } from "react";
import ChatsPageClient from "./chats-client";
interface PageProps {
params: {
search_space_id: string;
};
}
export default async function ChatsPage({ params }: PageProps) {
// Get search space ID from the route parameter
const { search_space_id: searchSpaceId } = await Promise.resolve(params);
return (
<Suspense
fallback={
<div className="flex items-center justify-center h-[60vh]">
<div className="h-8 w-8 animate-spin rounded-full border-4 border-primary border-t-transparent"></div>
</div>
}
>
<ChatsPageClient searchSpaceId={searchSpaceId} />
</Suspense>
);
}

6
surfsense_web/app/dashboard/[search_space_id]/researcher/[[...chat_id]]/page.tsx
View file

@ -134,9 +134,13 @@ export default function ResearcherPage() {
message: Message | CreateMessage,
chatRequestOptions?: { data?: any }
) => {
// Use the first message content as the chat title (truncated to 100 chars)
const messageContent = typeof message.content === 'string' ? message.content : '';
const chatTitle = messageContent.slice(0, 100) || "Untitled Chat";
const newChat = await createChat({
type: researchMode,
title: "Untitled Chat",
title: chatTitle,
initial_connectors: selectedConnectors,
messages: [
{

4
surfsense_web/atoms/chats/chat-mutation.atoms.ts
View file

@ -1,7 +1,7 @@
import { atomWithMutation } from "jotai-tanstack-query";
import { toast } from "sonner";
import type { Chat } from "@/app/dashboard/[search_space_id]/chats/chats-client";
import type {
ChatSummary,
CreateChatRequest,
DeleteChatRequest,
UpdateChatRequest,
@ -29,7 +29,7 @@ export const deleteChatMutationAtom = atomWithMutation((get) => {
toast.success("Chat deleted successfully");
queryClient.setQueryData(
cacheKeys.chats.globalQueryParams(chatsQueryParams),
(oldData: Chat[]) => {
(oldData: ChatSummary[]) => {
return oldData.filter((chat) => chat.id !== request.id);
}
);

241
surfsense_web/components/sidebar/all-chats-sidebar.tsx Normal file
View file

@ -0,0 +1,241 @@
"use client";
import { useQuery, useQueryClient } from "@tanstack/react-query";
import { Loader2, MessageCircleMore, MoreHorizontal, Search, Trash2, X } from "lucide-react";
import { useRouter } from "next/navigation";
import { useTranslations } from "next-intl";
import { useCallback, useMemo, useState } from "react";
import { toast } from "sonner";
import { Button } from "@/components/ui/button";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { Input } from "@/components/ui/input";
import { ScrollArea } from "@/components/ui/scroll-area";
import {
Sheet,
SheetContent,
SheetDescription,
SheetHeader,
SheetTitle,
} from "@/components/ui/sheet";
import { useDebouncedValue } from "@/hooks/use-debounced-value";
import { chatsApiService } from "@/lib/apis/chats-api.service";
import { cn } from "@/lib/utils";
interface AllChatsSidebarProps {
open: boolean;
onOpenChange: (open: boolean) => void;
searchSpaceId: string;
}
export function AllChatsSidebar({
open,
onOpenChange,
searchSpaceId,
}: AllChatsSidebarProps) {
const t = useTranslations("sidebar");
const router = useRouter();
const queryClient = useQueryClient();
const [deletingChatId, setDeletingChatId] = useState<number | null>(null);
const [searchQuery, setSearchQuery] = useState("");
const debouncedSearchQuery = useDebouncedValue(searchQuery, 300);
// Fetch all chats
const {
data: chatsData,
error: chatsError,
isLoading: isLoadingChats,
} = useQuery({
queryKey: ["all-chats", searchSpaceId],
queryFn: () =>
chatsApiService.getChats({
queryParams: {
search_space_id: Number(searchSpaceId),
},
}),
enabled: !!searchSpaceId && open,
});
// Handle chat navigation
const handleChatClick = useCallback(
(chatId: number, chatSearchSpaceId: number) => {
router.push(`/dashboard/${chatSearchSpaceId}/researcher/${chatId}`);
onOpenChange(false);
},
[router, onOpenChange]
);
// Handle chat deletion
const handleDeleteChat = useCallback(
async (chatId: number) => {
setDeletingChatId(chatId);
try {
await chatsApiService.deleteChat({ id: chatId });
toast.success(t("chat_deleted") || "Chat deleted successfully");
// Invalidate queries to refresh the list
queryClient.invalidateQueries({ queryKey: ["all-chats", searchSpaceId] });
queryClient.invalidateQueries({ queryKey: ["chats"] });
} catch (error) {
console.error("Error deleting chat:", error);
toast.error(t("error_deleting_chat") || "Failed to delete chat");
} finally {
setDeletingChatId(null);
}
},
[queryClient, searchSpaceId, t]
);
// Clear search
const handleClearSearch = useCallback(() => {
setSearchQuery("");
}, []);
// Filter chats based on search query (client-side filtering)
const chats = useMemo(() => {
const allChats = chatsData ?? [];
if (!debouncedSearchQuery) {
return allChats;
}
const query = debouncedSearchQuery.toLowerCase();
return allChats.filter((chat) =>
chat.title.toLowerCase().includes(query)
);
}, [chatsData, debouncedSearchQuery]);
const isSearchMode = !!debouncedSearchQuery;
return (
<Sheet open={open} onOpenChange={onOpenChange}>
<SheetContent side="left" className="w-80 p-0 flex flex-col">
<SheetHeader className="px-4 py-4 border-b space-y-3">
<SheetTitle>{t("all_chats") || "All Chats"}</SheetTitle>
<SheetDescription className="sr-only">
{t("all_chats_description") || "Browse and manage all your chats"}
</SheetDescription>
{/* Search Input */}
<div className="relative">
<Search className="absolute left-2.5 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
<Input
type="text"
placeholder={t("search_chats") || "Search chats..."}
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
className="pl-9 pr-8 h-9"
/>
{searchQuery && (
<Button
variant="ghost"
size="icon"
className="absolute right-1 top-1/2 -translate-y-1/2 h-6 w-6"
onClick={handleClearSearch}
>
<X className="h-3.5 w-3.5" />
<span className="sr-only">Clear search</span>
</Button>
)}
</div>
</SheetHeader>
<ScrollArea className="flex-1">
<div className="p-2">
{isLoadingChats ? (
<div className="flex items-center justify-center py-8">
<Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
</div>
) : chatsError ? (
<div className="text-center py-8 text-sm text-destructive">
{t("error_loading_chats") || "Error loading chats"}
</div>
) : chats.length > 0 ? (
<div className="space-y-1">
{chats.map((chat) => {
const isDeleting = deletingChatId === chat.id;
return (
<div
key={chat.id}
className={cn(
"group flex items-center gap-2 rounded-md px-2 py-1.5 text-sm",
"hover:bg-accent hover:text-accent-foreground",
"transition-colors cursor-pointer",
isDeleting && "opacity-50 pointer-events-none"
)}
>
{/* Main clickable area for navigation */}
<button
type="button"
onClick={() => handleChatClick(chat.id, chat.search_space_id)}
disabled={isDeleting}
className="flex items-center gap-2 flex-1 min-w-0 text-left"
>
<MessageCircleMore className="h-4 w-4 shrink-0 text-muted-foreground" />
<span className="truncate">{chat.title}</span>
</button>
{/* Actions dropdown - separate from main click area */}
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button
variant="ghost"
size="icon"
className={cn(
"h-6 w-6 shrink-0",
"opacity-0 group-hover:opacity-100 focus:opacity-100",
"transition-opacity"
)}
disabled={isDeleting}
>
{isDeleting ? (
<Loader2 className="h-3.5 w-3.5 animate-spin" />
) : (
<MoreHorizontal className="h-3.5 w-3.5" />
)}
<span className="sr-only">More options</span>
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end" className="w-40">
<DropdownMenuItem
onClick={() => handleDeleteChat(chat.id)}
className="text-destructive focus:text-destructive"
>
<Trash2 className="mr-2 h-4 w-4" />
<span>Delete</span>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</div>
);
})}
</div>
) : isSearchMode ? (
<div className="text-center py-8">
<Search className="h-12 w-12 mx-auto text-muted-foreground/50 mb-3" />
<p className="text-sm text-muted-foreground">
{t("no_chats_found") || "No chats found"}
</p>
<p className="text-xs text-muted-foreground/70 mt-1">
{t("try_different_search") || "Try a different search term"}
</p>
</div>
) : (
<div className="text-center py-8">
<MessageCircleMore className="h-12 w-12 mx-auto text-muted-foreground/50 mb-3" />
<p className="text-sm text-muted-foreground">
{t("no_chats") || "No chats yet"}
</p>
<p className="text-xs text-muted-foreground/70 mt-1">
{t("start_new_chat_hint") || "Start a new chat from the researcher"}
</p>
</div>
)}
</div>
</ScrollArea>
</SheetContent>
</Sheet>
);
}

13
surfsense_web/components/sidebar/app-sidebar.tsx
View file

@ -113,9 +113,9 @@ function UserAvatar({ email, size = 32 }: { email: string; size?: number }) {
);
}
import { NavChats } from "@/components/sidebar/nav-chats";
import { NavMain } from "@/components/sidebar/nav-main";
import { NavNotes } from "@/components/sidebar/nav-notes";
import { NavProjects } from "@/components/sidebar/nav-projects";
import { NavSecondary } from "@/components/sidebar/nav-secondary";
import { PageUsageDisplay } from "@/components/sidebar/page-usage-display";
import {
@ -446,11 +446,12 @@ export const AppSidebar = memo(function AppSidebar({
<SidebarContent className="space-y-6">
<NavMain items={processedNavMain} />
{processedRecentChats.length > 0 && (
<div className="space-y-2">
<NavProjects chats={processedRecentChats} />
</div>
)}
<div className="space-y-2">
<NavChats
chats={processedRecentChats}
searchSpaceId={searchSpaceId}
/>
</div>
<div className="space-y-2">
<NavNotes

230
surfsense_web/components/sidebar/nav-chats.tsx Normal file
View file

@ -0,0 +1,230 @@
"use client";
import {
ChevronRight,
FolderOpen,
type LucideIcon,
Loader2,
MessageCircleMore,
MoreHorizontal,
Search,
Trash2,
} from "lucide-react";
import { useRouter } from "next/navigation";
import { useTranslations } from "next-intl";
import { useCallback, useState } from "react";
import { Button } from "@/components/ui/button";
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import {
SidebarGroup,
SidebarGroupContent,
SidebarGroupLabel,
SidebarMenu,
SidebarMenuButton,
SidebarMenuItem,
} from "@/components/ui/sidebar";
import { cn } from "@/lib/utils";
import { AllChatsSidebar } from "./all-chats-sidebar";
interface ChatAction {
name: string;
icon: string;
onClick: () => void;
}
interface ChatItem {
name: string;
url: string;
icon: LucideIcon;
id?: number;
search_space_id?: number;
actions?: ChatAction[];
}
interface NavChatsProps {
chats: ChatItem[];
defaultOpen?: boolean;
searchSpaceId?: string;
}
// Map of icon names to their components
const actionIconMap: Record<string, LucideIcon> = {
MessageCircleMore,
Trash2,
MoreHorizontal,
};
export function NavChats({ chats, defaultOpen = true, searchSpaceId }: NavChatsProps) {
const t = useTranslations("sidebar");
const router = useRouter();
const [isDeleting, setIsDeleting] = useState<number | null>(null);
const [isOpen, setIsOpen] = useState(defaultOpen);
const [isAllChatsSidebarOpen, setIsAllChatsSidebarOpen] = useState(false);
// Handle chat deletion with loading state
const handleDeleteChat = useCallback(async (chatId: number, deleteAction: () => void) => {
setIsDeleting(chatId);
try {
await deleteAction();
} finally {
setIsDeleting(null);
}
}, []);
// Handle chat navigation
const handleChatClick = useCallback(
(url: string) => {
router.push(url);
},
[router]
);
return (
<SidebarGroup className="group-data-[collapsible=icon]:hidden">
<Collapsible open={isOpen} onOpenChange={setIsOpen}>
<div className="flex items-center group/header">
<CollapsibleTrigger asChild>
<SidebarGroupLabel className="cursor-pointer rounded-md px-2 py-1.5 -mx-2 transition-colors flex items-center gap-1.5 flex-1">
<ChevronRight
className={cn(
"h-3.5 w-3.5 text-muted-foreground transition-all duration-200 shrink-0",
isOpen && "rotate-90"
)}
/>
<span>{t("recent_chats") || "Recent Chats"}</span>
</SidebarGroupLabel>
</CollapsibleTrigger>
{/* Action buttons - always visible on hover */}
<div className="flex items-center gap-0.5 opacity-0 group-hover/header:opacity-100 transition-opacity pr-1">
{searchSpaceId && chats.length > 0 && (
<Button
variant="ghost"
size="icon"
className="h-5 w-5"
onClick={(e) => {
e.stopPropagation();
setIsAllChatsSidebarOpen(true);
}}
aria-label="View all chats"
>
<FolderOpen className="h-3.5 w-3.5" />
</Button>
)}
</div>
</div>
<CollapsibleContent>
<SidebarGroupContent>
<SidebarMenu>
{chats.length > 0 ? (
chats.map((chat) => {
const isDeletingChat = isDeleting === chat.id;
return (
<SidebarMenuItem key={chat.id || chat.name} className="group/chat">
{/* Main navigation button */}
<SidebarMenuButton
onClick={() => handleChatClick(chat.url)}
disabled={isDeletingChat}
className={cn(
"pr-8", // Make room for the action button
isDeletingChat && "opacity-50"
)}
>
<chat.icon className="h-4 w-4 shrink-0" />
<span className="truncate">{chat.name}</span>
</SidebarMenuButton>
{/* Actions dropdown - positioned absolutely */}
{chat.actions && chat.actions.length > 0 && (
<div className="absolute right-1 top-1/2 -translate-y-1/2">
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button
variant="ghost"
size="icon"
className={cn(
"h-6 w-6",
"opacity-0 group-hover/chat:opacity-100 focus:opacity-100",
"data-[state=open]:opacity-100",
"transition-opacity"
)}
disabled={isDeletingChat}
>
{isDeletingChat ? (
<Loader2 className="h-3.5 w-3.5 animate-spin" />
) : (
<MoreHorizontal className="h-3.5 w-3.5" />
)}
<span className="sr-only">More options</span>
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end" side="right" className="w-40">
{chat.actions.map((action, actionIndex) => {
const ActionIcon = actionIconMap[action.icon] || MessageCircleMore;
const isDeleteAction = action.name.toLowerCase().includes("delete");
return (
<DropdownMenuItem
key={`${action.name}-${actionIndex}`}
onClick={() => {
if (isDeleteAction) {
handleDeleteChat(chat.id || 0, action.onClick);
} else {
action.onClick();
}
}}
disabled={isDeletingChat}
className={
isDeleteAction
? "text-destructive focus:text-destructive"
: ""
}
>
<ActionIcon className="mr-2 h-4 w-4" />
<span>
{isDeletingChat && isDeleteAction
? "Deleting..."
: action.name}
</span>
</DropdownMenuItem>
);
})}
</DropdownMenuContent>
</DropdownMenu>
</div>
)}
</SidebarMenuItem>
);
})
) : (
<SidebarMenuItem>
<SidebarMenuButton disabled className="text-muted-foreground text-xs">
<Search className="h-4 w-4" />
<span>{t("no_recent_chats") || "No recent chats"}</span>
</SidebarMenuButton>
</SidebarMenuItem>
)}
</SidebarMenu>
</SidebarGroupContent>
</CollapsibleContent>
</Collapsible>
{/* All Chats Sheet */}
{searchSpaceId && (
<AllChatsSidebar
open={isAllChatsSidebarOpen}
onOpenChange={setIsAllChatsSidebarOpen}
searchSpaceId={searchSpaceId}
/>
)}
</SidebarGroup>
);
}

177
surfsense_web/components/sidebar/nav-projects.tsx
View file

@ -1,177 +0,0 @@
"use client";
import {
ExternalLink,
Folder,
type LucideIcon,
MoreHorizontal,
RefreshCw,
Search,
Share,
Trash2,
} from "lucide-react";
import { useRouter } from "next/navigation";
import { useTranslations } from "next-intl";
import { useCallback, useMemo, useState } from "react";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import {
SidebarGroup,
SidebarGroupLabel,
SidebarInput,
SidebarMenu,
SidebarMenuAction,
SidebarMenuButton,
SidebarMenuItem,
useSidebar,
} from "@/components/ui/sidebar";
// Map of icon names to their components
const actionIconMap: Record<string, LucideIcon> = {
ExternalLink,
Folder,
Share,
Trash2,
MoreHorizontal,
Search,
RefreshCw,
};
interface ChatAction {
name: string;
icon: string;
onClick: () => void;
}
interface ChatItem {
name: string;
url: string;
icon: LucideIcon;
id?: number;
search_space_id?: number;
actions?: ChatAction[];
}
export function NavProjects({ chats }: { chats: ChatItem[] }) {
const t = useTranslations("sidebar");
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 (
<SidebarMenuItem key={chat.id ? `chat-${chat.id}` : `chat-${chat.name}`}>
<SidebarMenuButton
onClick={() => router.push(chat.url)}
disabled={isDeletingChat}
className={isDeletingChat ? "opacity-50" : ""}
>
<chat.icon />
<span className={isDeletingChat ? "opacity-50" : ""}>{chat.name}</span>
</SidebarMenuButton>
{chat.actions && chat.actions.length > 0 && (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<SidebarMenuAction showOnHover>
<MoreHorizontal />
<span className="sr-only">More</span>
</SidebarMenuAction>
</DropdownMenuTrigger>
<DropdownMenuContent
className="w-48"
side={isMobile ? "bottom" : "right"}
align={isMobile ? "end" : "start"}
>
{chat.actions.map((action, actionIndex) => {
const ActionIcon = actionIconMap[action.icon] || Folder;
const isDeleteAction = action.name.toLowerCase().includes("delete");
return (
<DropdownMenuItem
key={`${action.name}-${actionIndex}`}
onClick={() => {
if (isDeleteAction) {
handleDeleteChat(chat.id || 0, action.onClick);
} else {
action.onClick();
}
}}
disabled={isDeletingChat}
className={isDeleteAction ? "text-destructive" : ""}
>
<ActionIcon className="text-muted-foreground" />
<span>{isDeletingChat && isDeleteAction ? "Deleting..." : action.name}</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>{t("recent_chats")}</SidebarGroupLabel>
<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 ? t("no_chats_found") : t("no_recent_chats")}</span>
</SidebarMenuButton>
</SidebarMenuItem>
)}
{/* View All Chats */}
{chats.length > 0 && (
<SidebarMenuItem>
<SidebarMenuButton onClick={() => router.push(`/dashboard/${searchSpaceId}/chats`)}>
<MoreHorizontal />
<span>{t("view_all_chats")}</span>
</SidebarMenuButton>
</SidebarMenuItem>
)}
</SidebarMenu>
</SidebarGroup>
);
}

4
surfsense_web/hooks/use-chat.ts
View file

@ -1,6 +1,4 @@
import type { Message } from "@ai-sdk/react";
import { useCallback, useEffect, useState } from "react";
import type { ChatDetails } from "@/app/dashboard/[search_space_id]/chats/chats-client";
import { useEffect, useState } from "react";
import type { ResearchMode } from "@/components/chat";
import type { Document } from "@/contracts/types/document.types";
import { getBearerToken } from "@/lib/auth-utils";

7
surfsense_web/messages/en.json
View file

@ -642,6 +642,13 @@
"no_chats_found": "No chats found",
"no_recent_chats": "No recent chats",
"view_all_chats": "View All Chats",
"all_chats": "All Chats",
"all_chats_description": "Browse and manage all your chats",
"no_chats": "No chats yet",
"start_new_chat_hint": "Start a new chat from the researcher",
"error_loading_chats": "Error loading chats",
"chat_deleted": "Chat deleted successfully",
"error_deleting_chat": "Failed to delete chat",
"search_space": "Search Space",
"notes": "Notes",
"all_notes": "All Notes",

7
surfsense_web/messages/zh.json
View file

@ -642,6 +642,13 @@
"no_chats_found": "未找到对话",
"no_recent_chats": "暂无最近对话",
"view_all_chats": "查看所有对话",
"all_chats": "所有对话",
"all_chats_description": "浏览和管理您的所有对话",
"no_chats": "暂无对话",
"start_new_chat_hint": "从研究员开始新对话",
"error_loading_chats": "加载对话时出错",
"chat_deleted": "对话删除成功",
"error_deleting_chat": "删除对话失败",
"search_space": "搜索空间",
"notes": "笔记",
"all_notes": "所有笔记",