Spaces:
Running
Running
| import PersistenceWarning from "./PersistenceWarning"; | |
| import { useState } from "react"; | |
| import { Outlet, useLocation, useNavigate } from "react-router-dom"; | |
| import { | |
| AppShell, | |
| AppShellMain, | |
| AppShellSidebar, | |
| AppShellSidebarContent, | |
| AppShellSidebarFooter, | |
| AppShellSidebarHeader, | |
| Button, | |
| Field, | |
| FieldLabel, | |
| GlobalHeader, | |
| GlobalHeaderActions, | |
| GlobalHeaderBrand, | |
| GlobalHeaderInner, | |
| Select, | |
| SideNav, | |
| SideNavGroup, | |
| SideNavGroupLabel, | |
| SideNavItem, | |
| SideNavLink, | |
| SideNavList, | |
| SkipLink, | |
| StatusIndicator, | |
| } from "lumen-ui-kit"; | |
| import { logoutSession } from "../lib/api"; | |
| import { useWorkspace } from "../workspaces/WorkspaceProvider"; | |
| import { workspacePath, workspaceSection } from "../workspaces/workspaceRoutes"; | |
| import CreateWorkspaceDialog from "./CreateWorkspaceDialog"; | |
| const groups = [ | |
| { label: "Explore", items: [["", "Overview"], ["graph", "Graph"]] }, | |
| { label: "Memory", items: [["data", "Data"], ["observations", "Observations"], ["vectors", "Vectors"]] }, | |
| { label: "Operations", items: [["tasks", "Tasks"], ["ingest", "Ingest"], ["settings", "Settings"]] }, | |
| ] as const; | |
| export default function Layout() { | |
| const navigate = useNavigate(); | |
| const location = useLocation(); | |
| const { | |
| workspaces, | |
| activeWorkspace, | |
| switchWorkspace, | |
| canManageWorkspaces, | |
| } = useWorkspace(); | |
| const [createOpen, setCreateOpen] = useState(false); | |
| const section = workspaceSection(location.pathname); | |
| const visible = workspaces.filter((workspace) => !workspace.archived); | |
| async function logout() { | |
| try { await logoutSession(); } | |
| finally { navigate("/login"); } | |
| } | |
| const navigation = activeWorkspace ? ( | |
| <SideNav expression="compact" aria-label="Console sections"> | |
| <SideNavList> | |
| {groups.map((group) => ( | |
| <SideNavGroup key={group.label}> | |
| <SideNavGroupLabel>{group.label}</SideNavGroupLabel> | |
| <SideNavList> | |
| {group.items.map(([to, label]) => ( | |
| <SideNavItem key={to}> | |
| <SideNavLink | |
| href={`/console${workspacePath(activeWorkspace.slug, to)}`} | |
| current={section === to} | |
| onClick={(event) => { | |
| event.preventDefault(); | |
| navigate(workspacePath(activeWorkspace.slug, to)); | |
| }} | |
| > | |
| {label} | |
| </SideNavLink> | |
| </SideNavItem> | |
| ))} | |
| </SideNavList> | |
| </SideNavGroup> | |
| ))} | |
| </SideNavList> | |
| </SideNav> | |
| ) : null; | |
| return ( | |
| <div className="flex min-h-screen flex-col bg-lumen-background"> | |
| <PersistenceWarning /> | |
| <SkipLink href="#console-main">Skip to main content</SkipLink> | |
| <GlobalHeader sticky className="border-b border-lumen-border"> | |
| <GlobalHeaderInner className="max-w-none"> | |
| <GlobalHeaderBrand href="/console/"> | |
| <span className="grid size-8 place-items-center bg-lumen-primary text-xs font-bold text-lumen-on-primary">B</span> | |
| <span className="font-semibold">BrainAPI</span> | |
| </GlobalHeaderBrand> | |
| <div className="mx-4 hidden min-w-0 flex-1 items-center gap-1 overflow-x-auto md:flex" role="tablist" aria-label="Workspaces"> | |
| {visible.map((workspace) => ( | |
| <Button | |
| key={workspace.slug} | |
| role="tab" | |
| aria-selected={workspace.slug === activeWorkspace?.slug} | |
| variant={workspace.slug === activeWorkspace?.slug ? "primary" : "ghost"} | |
| size="small" | |
| className="shrink-0" | |
| onClick={() => switchWorkspace(workspace.slug)} | |
| title={workspace.slug} | |
| > | |
| {workspace.display_name} | |
| </Button> | |
| ))} | |
| {canManageWorkspaces ? ( | |
| <Button size="small" variant="secondary" className="shrink-0" aria-label="Create workspace" onClick={() => setCreateOpen(true)}>+</Button> | |
| ) : null} | |
| </div> | |
| <div className="mr-2 min-w-0 flex-1 md:hidden"> | |
| {visible.length > 1 ? ( | |
| <Field> | |
| <FieldLabel htmlFor="mobile-workspace">Workspace</FieldLabel> | |
| <Select id="mobile-workspace" value={activeWorkspace?.slug ?? ""} onChange={(event) => switchWorkspace(event.target.value)}> | |
| {visible.map((workspace) => <option key={workspace.slug} value={workspace.slug}>{workspace.display_name}</option>)} | |
| </Select> | |
| </Field> | |
| ) : <span className="text-sm font-medium">{activeWorkspace?.display_name}</span>} | |
| </div> | |
| <GlobalHeaderActions> | |
| <StatusIndicator status="success" className="hidden sm:inline-flex">Live</StatusIndicator> | |
| <Button size="small" variant="secondary" onClick={logout}>Log out</Button> | |
| </GlobalHeaderActions> | |
| </GlobalHeaderInner> | |
| </GlobalHeader> | |
| <AppShell layout="sidebar" className="min-h-0 flex-1 overflow-hidden"> | |
| <AppShellSidebar className="hidden min-h-0 lg:flex"> | |
| <AppShellSidebarHeader> | |
| <p className="text-xs uppercase text-lumen-muted-foreground">Workspace</p> | |
| <p className="font-medium">{activeWorkspace?.display_name ?? "None"}</p> | |
| <p className="font-mono text-xs text-lumen-muted-foreground">{activeWorkspace?.brain_id}</p> | |
| </AppShellSidebarHeader> | |
| <AppShellSidebarContent>{navigation}</AppShellSidebarContent> | |
| <AppShellSidebarFooter className="text-xs text-lumen-muted-foreground">{canManageWorkspaces ? "System credentials" : "Scoped credentials"}</AppShellSidebarFooter> | |
| </AppShellSidebar> | |
| <AppShellMain as="main" id="console-main" className="min-h-0 min-w-0 overflow-hidden"> | |
| <Outlet key={activeWorkspace?.brain_id} /> | |
| </AppShellMain> | |
| </AppShell> | |
| <CreateWorkspaceDialog open={createOpen} onClose={() => setCreateOpen(false)} /> | |
| </div> | |
| ); | |
| } | |