mirror of
https://github.com/MODSetter/SurfSense.git
synced 2026-04-25 08:46:22 +02:00
285 lines
9.2 KiB
TypeScript
285 lines
9.2 KiB
TypeScript
"use client";
|
|
|
|
import { PenSquare } from "lucide-react";
|
|
import { useTranslations } from "next-intl";
|
|
import { useState } from "react";
|
|
import { Skeleton } from "@/components/ui/skeleton";
|
|
import { cn } from "@/lib/utils";
|
|
import { SIDEBAR_MIN_WIDTH } from "../../hooks/useSidebarResize";
|
|
import type { ChatItem, NavItem, PageUsage, SearchSpace, User } from "../../types/layout.types";
|
|
import { ChatListItem } from "./ChatListItem";
|
|
import { NavSection } from "./NavSection";
|
|
import { PageUsageDisplay } from "./PageUsageDisplay";
|
|
import { SidebarButton } from "./SidebarButton";
|
|
import { SidebarCollapseButton } from "./SidebarCollapseButton";
|
|
import { SidebarHeader } from "./SidebarHeader";
|
|
import { SidebarSection } from "./SidebarSection";
|
|
import { SidebarUserProfile } from "./SidebarUserProfile";
|
|
|
|
function ChatListItemSkeleton() {
|
|
return (
|
|
<div className="flex w-full items-center gap-2 rounded-md p-2">
|
|
<Skeleton className="h-4 w-4 shrink-0 rounded" />
|
|
<Skeleton className="h-4 w-full max-w-[180px]" />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
interface SidebarProps {
|
|
searchSpace: SearchSpace | null;
|
|
isCollapsed?: boolean;
|
|
onToggleCollapse?: () => void;
|
|
navItems: NavItem[];
|
|
onNavItemClick?: (item: NavItem) => void;
|
|
chats: ChatItem[];
|
|
sharedChats?: ChatItem[];
|
|
activeChatId?: number | null;
|
|
onNewChat: () => void;
|
|
onChatSelect: (chat: ChatItem) => void;
|
|
onChatRename?: (chat: ChatItem) => void;
|
|
onChatDelete?: (chat: ChatItem) => void;
|
|
onChatArchive?: (chat: ChatItem) => void;
|
|
onViewAllSharedChats?: () => void;
|
|
onViewAllPrivateChats?: () => void;
|
|
isSharedChatsPanelOpen?: boolean;
|
|
isPrivateChatsPanelOpen?: boolean;
|
|
user: User;
|
|
onSettings?: () => void;
|
|
onManageMembers?: () => void;
|
|
onUserSettings?: () => void;
|
|
onLogout?: () => void;
|
|
pageUsage?: PageUsage;
|
|
theme?: string;
|
|
setTheme?: (theme: "light" | "dark" | "system") => void;
|
|
className?: string;
|
|
isLoadingChats?: boolean;
|
|
disableTooltips?: boolean;
|
|
sidebarWidth?: number;
|
|
isResizing?: boolean;
|
|
}
|
|
|
|
export function Sidebar({
|
|
searchSpace,
|
|
isCollapsed = false,
|
|
onToggleCollapse,
|
|
navItems,
|
|
onNavItemClick,
|
|
chats,
|
|
sharedChats = [],
|
|
activeChatId,
|
|
onNewChat,
|
|
onChatSelect,
|
|
onChatRename,
|
|
onChatDelete,
|
|
onChatArchive,
|
|
onViewAllSharedChats,
|
|
onViewAllPrivateChats,
|
|
isSharedChatsPanelOpen = false,
|
|
isPrivateChatsPanelOpen = false,
|
|
user,
|
|
onSettings,
|
|
onManageMembers,
|
|
onUserSettings,
|
|
onLogout,
|
|
pageUsage,
|
|
theme,
|
|
setTheme,
|
|
className,
|
|
isLoadingChats = false,
|
|
disableTooltips = false,
|
|
sidebarWidth = SIDEBAR_MIN_WIDTH,
|
|
isResizing = false,
|
|
}: SidebarProps) {
|
|
const t = useTranslations("sidebar");
|
|
const [openDropdownChatId, setOpenDropdownChatId] = useState<number | null>(null);
|
|
|
|
return (
|
|
<div
|
|
className={cn(
|
|
"relative flex h-full flex-col bg-sidebar text-sidebar-foreground overflow-hidden select-none",
|
|
isCollapsed ? "w-[60px] transition-all duration-200" : "",
|
|
!isCollapsed && !isResizing ? "transition-all duration-200" : "",
|
|
className
|
|
)}
|
|
style={!isCollapsed ? { width: sidebarWidth } : undefined}
|
|
>
|
|
{/* Header - search space name or collapse button when collapsed */}
|
|
{isCollapsed ? (
|
|
<div className="flex h-12 shrink-0 items-center justify-center border-b">
|
|
<SidebarCollapseButton
|
|
isCollapsed={isCollapsed}
|
|
onToggle={onToggleCollapse ?? (() => {})}
|
|
disableTooltip={disableTooltips}
|
|
/>
|
|
</div>
|
|
) : (
|
|
<div className="flex h-12 shrink-0 items-center gap-0 px-1 border-b">
|
|
<SidebarHeader
|
|
searchSpace={searchSpace}
|
|
isCollapsed={isCollapsed}
|
|
onSettings={onSettings}
|
|
onManageMembers={onManageMembers}
|
|
/>
|
|
<div className="shrink-0">
|
|
<SidebarCollapseButton
|
|
isCollapsed={isCollapsed}
|
|
onToggle={onToggleCollapse ?? (() => {})}
|
|
disableTooltip={disableTooltips}
|
|
/>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* New chat button */}
|
|
<div className={cn("flex flex-col gap-0.5 py-2", isCollapsed && "items-center")}>
|
|
<SidebarButton
|
|
icon={PenSquare}
|
|
label={t("new_chat")}
|
|
onClick={onNewChat}
|
|
isCollapsed={isCollapsed}
|
|
/>
|
|
</div>
|
|
|
|
{/* Chat sections - fills available space */}
|
|
{isCollapsed ? (
|
|
<div className="flex-1 w-[60px]" />
|
|
) : (
|
|
<div className="flex-1 flex flex-col gap-1 py-2 w-full min-h-0 overflow-hidden">
|
|
{/* Shared Chats Section - takes only space needed, max 50% */}
|
|
<SidebarSection
|
|
title={t("shared_chats")}
|
|
defaultOpen={true}
|
|
fillHeight={false}
|
|
className="shrink-0 max-h-[50%] flex flex-col"
|
|
alwaysShowAction={!disableTooltips && isSharedChatsPanelOpen}
|
|
action={
|
|
onViewAllSharedChats ? (
|
|
<button
|
|
type="button"
|
|
onClick={onViewAllSharedChats}
|
|
className="text-xs font-medium text-muted-foreground/60 hover:text-muted-foreground transition-colors whitespace-nowrap cursor-pointer bg-transparent border-none p-0 focus:outline-none"
|
|
>
|
|
{!disableTooltips && isSharedChatsPanelOpen ? t("hide") : t("show_all")}
|
|
</button>
|
|
) : undefined
|
|
}
|
|
>
|
|
{isLoadingChats ? (
|
|
<div className="flex flex-col gap-0.5">
|
|
<ChatListItemSkeleton />
|
|
<ChatListItemSkeleton />
|
|
<ChatListItemSkeleton />
|
|
<ChatListItemSkeleton />
|
|
<ChatListItemSkeleton />
|
|
</div>
|
|
) : sharedChats.length > 0 ? (
|
|
<div className="relative min-h-0 flex-1">
|
|
<div
|
|
className={`flex flex-col gap-0.5 max-h-full overflow-y-auto scrollbar-thin scrollbar-thumb-muted-foreground/20 scrollbar-track-transparent ${sharedChats.length > 4 ? "pb-8" : ""}`}
|
|
>
|
|
{sharedChats.slice(0, 20).map((chat) => (
|
|
<ChatListItem
|
|
key={chat.id}
|
|
name={chat.name}
|
|
isActive={chat.id === activeChatId}
|
|
archived={chat.archived}
|
|
dropdownOpen={openDropdownChatId === chat.id}
|
|
onDropdownOpenChange={(open) => setOpenDropdownChatId(open ? chat.id : null)}
|
|
onClick={() => onChatSelect(chat)}
|
|
onRename={() => onChatRename?.(chat)}
|
|
onArchive={() => onChatArchive?.(chat)}
|
|
onDelete={() => onChatDelete?.(chat)}
|
|
/>
|
|
))}
|
|
</div>
|
|
{/* Gradient fade indicator when more than 4 items */}
|
|
{sharedChats.length > 4 && (
|
|
<div className="pointer-events-none absolute bottom-0 left-0 right-0 h-8 bg-gradient-to-t from-sidebar via-sidebar/90 to-transparent" />
|
|
)}
|
|
</div>
|
|
) : (
|
|
<p className="px-2 py-1 text-xs text-muted-foreground">{t("no_shared_chats")}</p>
|
|
)}
|
|
</SidebarSection>
|
|
|
|
{/* Private Chats Section - fills remaining space */}
|
|
<SidebarSection
|
|
title={t("chats")}
|
|
defaultOpen={true}
|
|
fillHeight={true}
|
|
alwaysShowAction={!disableTooltips && isPrivateChatsPanelOpen}
|
|
action={
|
|
onViewAllPrivateChats ? (
|
|
<button
|
|
type="button"
|
|
onClick={onViewAllPrivateChats}
|
|
className="text-xs font-medium text-muted-foreground/60 hover:text-muted-foreground transition-colors whitespace-nowrap cursor-pointer bg-transparent border-none p-0 focus:outline-none"
|
|
>
|
|
{!disableTooltips && isPrivateChatsPanelOpen ? t("hide") : t("show_all")}
|
|
</button>
|
|
) : undefined
|
|
}
|
|
>
|
|
{isLoadingChats ? (
|
|
<div className="flex flex-col gap-0.5">
|
|
<ChatListItemSkeleton />
|
|
<ChatListItemSkeleton />
|
|
<ChatListItemSkeleton />
|
|
<ChatListItemSkeleton />
|
|
<ChatListItemSkeleton />
|
|
</div>
|
|
) : chats.length > 0 ? (
|
|
<div className="relative flex-1 min-h-0">
|
|
<div
|
|
className={`flex flex-col gap-0.5 h-full overflow-y-auto scrollbar-thin scrollbar-thumb-muted-foreground/20 scrollbar-track-transparent ${chats.length > 4 ? "pb-8" : ""}`}
|
|
>
|
|
{chats.slice(0, 20).map((chat) => (
|
|
<ChatListItem
|
|
key={chat.id}
|
|
name={chat.name}
|
|
isActive={chat.id === activeChatId}
|
|
archived={chat.archived}
|
|
dropdownOpen={openDropdownChatId === chat.id}
|
|
onDropdownOpenChange={(open) => setOpenDropdownChatId(open ? chat.id : null)}
|
|
onClick={() => onChatSelect(chat)}
|
|
onRename={() => onChatRename?.(chat)}
|
|
onArchive={() => onChatArchive?.(chat)}
|
|
onDelete={() => onChatDelete?.(chat)}
|
|
/>
|
|
))}
|
|
</div>
|
|
{/* Gradient fade indicator when more than 4 items */}
|
|
{chats.length > 4 && (
|
|
<div className="pointer-events-none absolute bottom-0 left-0 right-0 h-8 bg-gradient-to-t from-sidebar via-sidebar/90 to-transparent" />
|
|
)}
|
|
</div>
|
|
) : (
|
|
<p className="px-2 py-1 text-xs text-muted-foreground">{t("no_chats")}</p>
|
|
)}
|
|
</SidebarSection>
|
|
</div>
|
|
)}
|
|
|
|
{/* Footer */}
|
|
<div className="mt-auto border-t">
|
|
{/* Platform navigation */}
|
|
{navItems.length > 0 && (
|
|
<NavSection items={navItems} onItemClick={onNavItemClick} isCollapsed={isCollapsed} />
|
|
)}
|
|
|
|
{pageUsage && !isCollapsed && (
|
|
<PageUsageDisplay pagesUsed={pageUsage.pagesUsed} pagesLimit={pageUsage.pagesLimit} />
|
|
)}
|
|
|
|
<SidebarUserProfile
|
|
user={user}
|
|
onUserSettings={onUserSettings}
|
|
onLogout={onLogout}
|
|
isCollapsed={isCollapsed}
|
|
theme={theme}
|
|
setTheme={setTheme}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|