import { useEffect, useRef, useState } from "react"; import { useTranslation } from "react-i18next"; import { IconHistory, IconHome, IconLayoutSidebar, IconLayoutSidebarFilled, IconRobotFace, IconSearch, IconSettings, IconStack, } from "@tabler/icons-react"; import { getDisplaySessionTitle } from "@/features/chat/lib/sessionTitle"; import { GooseIcon } from "@/shared/ui/icons/GooseIcon"; import { cn } from "@/shared/lib/cn"; import type { AppView } from "@/app/AppShell"; import type { ProjectInfo } from "@/features/projects/api/projects"; import { useChatStore } from "@/features/chat/stores/chatStore"; import { getVisibleSessions, useChatSessionStore, } from "@/features/chat/stores/chatSessionStore"; import { isSessionRunning } from "@/features/chat/lib/sessionActivity"; import { useAgentStore } from "@/features/agents/stores/agentStore"; import { useProjectStore } from "@/features/projects/stores/projectStore"; import { Button } from "@/shared/ui/button"; import { useSessionSearch } from "@/features/sessions/hooks/useSessionSearch"; import { SidebarProjectsSection } from "./SidebarProjectsSection"; import { SidebarNavItem } from "./SidebarNavItem"; import { SidebarSearchResults } from "./SidebarSearchResults"; interface SidebarProps { collapsed: boolean; width?: number; isResizing?: boolean; onCollapse: () => void; onSettingsClick?: () => void; onNewChatInProject?: (projectId: string) => void; onNewChat?: () => void; onCreateProject?: () => void; onEditProject?: (projectId: string) => void; onArchiveProject?: (projectId: string) => void; onArchiveChat?: (sessionId: string) => void; onRenameChat?: (sessionId: string, nextTitle: string) => void; onMoveToProject?: (sessionId: string, projectId: string | null) => void; onReorderProject?: (fromId: string, toId: string) => void; onNavigate?: (view: AppView) => void; onSelectSession?: (sessionId: string) => void; onSelectSearchResult?: ( sessionId: string, messageId?: string, query?: string, ) => void; activeView?: AppView; activeSessionId?: string | null; className?: string; projects: ProjectInfo[]; } const EXPANDED_PROJECTS_STORAGE_KEY = "goose:sidebar:expanded-projects"; export function Sidebar({ collapsed, width = 240, isResizing = false, onCollapse, onSettingsClick, onNewChatInProject, onNewChat, onCreateProject, onEditProject, onArchiveProject, onArchiveChat, onRenameChat, onMoveToProject, onReorderProject, onNavigate, onSelectSession, onSelectSearchResult, activeView, activeSessionId, className, projects, }: SidebarProps) { const { t, i18n } = useTranslation(["sidebar", "common", "settings"]); const [expanded, setExpanded] = useState(!collapsed); const searchInputRef = useRef(null); const prevCollapsed = useRef(collapsed); const [expandedProjects, setExpandedProjects] = useState< Record >(() => { if (typeof window === "undefined") return {}; try { const stored = window.localStorage.getItem(EXPANDED_PROJECTS_STORAGE_KEY); if (!stored) return {}; const parsed = JSON.parse(stored); return parsed && typeof parsed === "object" ? parsed : {}; } catch { return {}; } }); const chatStore = useChatStore(); const { sessions } = useChatSessionStore(); const visibleSessions = getVisibleSessions( sessions, chatStore.messagesBySession, ); const activeSessions = visibleSessions.filter( (session) => !session.archivedAt, ); useEffect(() => { if (collapsed) { setExpanded(false); } else if (prevCollapsed.current && !collapsed) { const timer = setTimeout(() => setExpanded(true), 60); return () => clearTimeout(timer); } else { setExpanded(true); } prevCollapsed.current = collapsed; }, [collapsed]); const labelTransition = "transition-[opacity,width] duration-300 ease-out"; const labelVisible = expanded && !collapsed; const defaultTitle = t("common:session.defaultTitle"); const navItems: readonly { id: AppView; label: string; icon: typeof IconRobotFace; }[] = [ { id: "agents", label: t("navigation.agents"), icon: IconRobotFace }, { id: "skills", label: t("navigation.skills"), icon: IconStack }, { id: "session-history", label: t("navigation.sessionHistory"), icon: IconHistory, }, ]; const MAX_RECENTS = 20; const validProjectIds = new Set(projects.map((project) => project.id)); const projectSessions = (() => { type SessionItem = { id: string; title: string; sessionId: string; projectId?: string; updatedAt: string; isRunning: boolean; hasUnread: boolean; }; const byProject: Record = {}; const standalone: SessionItem[] = []; for (const session of visibleSessions) { if (session.archivedAt) continue; const runtime = chatStore.getSessionRuntime(session.id); const item: SessionItem = { id: session.id, title: session.title, sessionId: session.id, projectId: session.projectId ?? undefined, updatedAt: session.updatedAt, isRunning: isSessionRunning(runtime.chatState), hasUnread: runtime.hasUnread, }; if (session.projectId && validProjectIds.has(session.projectId)) { if (!byProject[session.projectId]) byProject[session.projectId] = []; byProject[session.projectId].push(item); } else { standalone.push(item); } } for (const chats of Object.values(byProject)) { chats.sort( (a, b) => new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime(), ); } standalone.sort( (a, b) => new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime(), ); const limitedStandalone = standalone.slice(0, MAX_RECENTS); return { byProject, standalone: limitedStandalone }; })(); const agentStoreState = useAgentStore(); const projectStoreState = useProjectStore(); const sidebarResolvers = { getPersonaName: (personaId: string) => agentStoreState.getPersonaById(personaId)?.displayName, getProjectName: (projectId: string) => projectStoreState.projects.find((p: { id: string }) => p.id === projectId) ?.name, }; const sidebarSearch = useSessionSearch({ sessions: activeSessions, resolvers: sidebarResolvers, locale: i18n.resolvedLanguage, getDisplayTitle: (session) => getDisplaySessionTitle(session.title, defaultTitle), }); useEffect(() => { if (!activeSessionId) return; const activeSession = visibleSessions.find((s) => s.id === activeSessionId); const projectId = activeSession?.projectId; if (projectId) { setExpandedProjects((prev) => { if (prev[projectId]) return prev; return { ...prev, [projectId]: true }; }); } }, [activeSessionId, visibleSessions]); useEffect(() => { try { window.localStorage.setItem( EXPANDED_PROJECTS_STORAGE_KEY, JSON.stringify(expandedProjects), ); } catch { // localStorage may be unavailable } }, [expandedProjects]); useEffect(() => { if (projects.length === 0) return; const validProjectIds = new Set(projects.map((project) => project.id)); setExpandedProjects((prev) => { const next = Object.fromEntries( Object.entries(prev).filter(([projectId]) => validProjectIds.has(projectId), ), ); return Object.keys(next).length === Object.keys(prev).length ? prev : next; }); }, [projects]); useEffect(() => { const handler = (e: KeyboardEvent) => { if (e.key === "k" && e.metaKey) { e.preventDefault(); searchInputRef.current?.focus(); } }; window.addEventListener("keydown", handler); return () => window.removeEventListener("keydown", handler); }, []); const toggleProject = (projectId: string) => setExpandedProjects((prev) => ({ ...prev, [projectId]: !prev[projectId] })); return (

{!collapsed && ( )}

{collapsed && ( )}

{!collapsed && ( sidebarSearch.setQuery(e.target.value)} onKeyDown={(e) => { if (e.key === "Enter") { e.preventDefault(); void sidebarSearch.search(); } }} placeholder={t("search.placeholder")} className={cn( "focus-override appearance-none bg-transparent border-none text-xs flex-1 min-w-0 placeholder:text-placeholder outline-none focus-visible:ring-0 focus-visible:ring-offset-0", labelTransition, labelVisible ? "opacity-100 w-auto" : "opacity-0 w-0 overflow-hidden", )} onClick={(e) => e.stopPropagation()} /> )}

onNavigate?.("home")} /> {navItems.map((item, index) => { const isActive = activeView === item.id; return ( onNavigate?.(item.id)} itemTransitionDelay={ !collapsed && expanded ? `${index * 30}ms` : "0ms" } labelTransitionDelay={ labelVisible ? `${index * 30 + 60}ms` : "0ms" } /> ); })}

{!collapsed && (sidebarSearch.submittedQuery ? (

{sidebarSearch.error && (

{t("search.error")}

)} {sidebarSearch.isSearching && sidebarSearch.results.length === 0 && (

{t("search.searching")}

)} {(!sidebarSearch.isSearching || sidebarSearch.results.length > 0) && ( { if (messageId) { onSelectSearchResult?.( sessionId, messageId, sidebarSearch.submittedQuery, ); return; } onSelectSession?.(sessionId); }} getPersonaName={sidebarResolvers.getPersonaName} getProjectName={sidebarResolvers.getProjectName} /> )}

) : ( ))}

); }