@manta-eu/react 0.1.8 → 0.1.10

package/src/components/layouts/RouteLayout.tsx

@@ -0,0 +1,201 @@
+import type { MantaModelId } from "@manta-eu/client/shared/model";
+import { useCallback, useState, type ReactNode } from "react";
+import { Chat } from "../chat-view/index";
+import { LoadingView } from "../chat-view/LoadingView";
+import {
+  defaultOnboardingSteps,
+  OnboardingModal,
+  SidebarSpotlight,
+  type OnboardingDismissReason,
+  type OnboardingStep,
+} from "../onboarding/index";
+import { ChatSplitLayout } from "./ChatSplitLayout";
+import { ConnectionBanner } from "./ConnectionBanner";
+import { InstallPrompt } from "./InstallPrompt";
+import { KnowledgeGraphStartupGate } from "./KnowledgeGraphStartupGate";
+import { Sidebar } from "./Sidebar";
+import { SidebarMobileToggle } from "./SidebarMobileToggle";
+import { MainContent } from "#components/main-content/index";
+import { SidebarInset, SidebarProvider, useSidebar } from "#components/sidebar/index";
+import { useShouldAutoFocusInput } from "#hooks/use-should-auto-focus-input";
+import { useChatPanelSync } from "#hooks/useChatPanelSync";
+import { useDatastoreSelection } from "#hooks/useDatastoreSelection";
+import { useOnboardingState } from "#hooks/useOnboardingState";
+import type { Datastore, User } from "#lib/chat-types";
+import { ChatPanelProvider } from "#providers/ChatPanelContext";
+import { CommandProvider } from "#providers/commands/CommandContext";
+import { KnowledgeGraphStateProvider } from "#providers/KnowledgeGraphStateProvider";
+
+const expandedSidebarWidth = 232;
+const collapsedSidebarWidth = 68;
+
+export type RouteLayoutProps = {
+  user: User;
+  datastore?: Datastore;
+  datastores?: Datastore[];
+  isOperator: boolean;
+  canSwitchDatastore?: boolean;
+  logout?: () => void;
+  floatingMobileMenu?: boolean;
+  allowedModels?: MantaModelId[];
+  title?: string;
+  mark?: ReactNode;
+  children: ReactNode;
+};
+
+export function RouteLayout(props: RouteLayoutProps) {
+  const {
+    user,
+    datastore,
+    datastores,
+    isOperator,
+    canSwitchDatastore,
+    logout,
+    floatingMobileMenu,
+    allowedModels,
+    title,
+    mark,
+    children,
+  } = props;
+  const { setSelectedDatastore, isSwitching } = useDatastoreSelection({ canSwitchDatastore });
+
+  const handleDatastoreSelected = useCallback(
+    (id: string) => void setSelectedDatastore(id, "datastore"),
+    [setSelectedDatastore],
+  );
+
+  const body = (
+    <RouteLayoutBody
+      user={user}
+      datastore={datastore}
+      isOperator={isOperator}
+      allowedModels={allowedModels}
+      title={title}
+      mark={mark}
+    >
+      {children}
+    </RouteLayoutBody>
+  );
+
+  return (
+    <KnowledgeGraphStateProvider datastoreId={datastore?.id}>
+      <CommandProvider>
+        <SidebarProvider className="h-dvh">
+          <ChatPanelProvider>
+            <Sidebar
+              user={user}
+              datastore={datastore}
+              datastores={datastores}
+              isOperator={isOperator}
+              isSwitching={isSwitching}
+              canSwitchDatastore={canSwitchDatastore}
+              onLogout={logout}
+              onDatastoreSelected={handleDatastoreSelected}
+            />
+            <SidebarInset className="min-w-0 overflow-hidden">
+              <MainContent className="relative flex min-w-0 flex-col overflow-hidden">
+                <ConnectionBanner />
+                <InstallPrompt />
+                {floatingMobileMenu && <SidebarMobileToggle className="absolute left-3.5 top-3 z-30 shadow-sm" />}
+                <KnowledgeGraphStartupGate>{body}</KnowledgeGraphStartupGate>
+              </MainContent>
+            </SidebarInset>
+            <OnboardingLayer />
+          </ChatPanelProvider>
+        </SidebarProvider>
+      </CommandProvider>
+    </KnowledgeGraphStateProvider>
+  );
+}
+
+function OnboardingLayer() {
+  const { shouldShow, complete, dismiss } = useOnboardingState();
+  const { state, isMobile } = useSidebar();
+  const shouldAutoFocusInput = useShouldAutoFocusInput();
+  const [highlightId, setHighlightId] = useState<string | undefined>(undefined);
+
+  const contentOffsetLeft = isMobile ? 0 : state === "expanded" ? expandedSidebarWidth : collapsedSidebarWidth;
+
+  const handleComplete = useCallback(() => {
+    complete();
+    if (!shouldAutoFocusInput) return;
+
+    requestAnimationFrame(() => {
+      const input = document.querySelector<HTMLTextAreaElement>("[data-chat-input]");
+      input?.focus();
+    });
+  }, [complete, shouldAutoFocusInput]);
+
+  const handleDismiss = useCallback(
+    (reason: OnboardingDismissReason) => {
+      if (reason === "skip") {
+        complete();
+      } else {
+        dismiss();
+      }
+    },
+    [complete, dismiss],
+  );
+
+  const handleStepChange = useCallback((step: OnboardingStep) => {
+    setHighlightId(step.sidebarHighlightId);
+  }, []);
+
+  return (
+    <>
+      <OnboardingModal
+        open={shouldShow}
+        steps={defaultOnboardingSteps}
+        contentOffsetLeft={contentOffsetLeft}
+        onStepChange={handleStepChange}
+        onComplete={handleComplete}
+        onDismiss={handleDismiss}
+      />
+      {/* Desktop-only: on mobile the sidebar lives in a closed Sheet, so the highlight target isn't
+          in the DOM and the onboarding modal covers the viewport anyway. */}
+      <SidebarSpotlight active={shouldShow && !isMobile} targetId={highlightId} />
+    </>
+  );
+}
+
+type RouteLayoutBodyProps = {
+  user: User;
+  datastore?: Datastore;
+  isOperator: boolean;
+  allowedModels?: MantaModelId[];
+  title?: string;
+  mark?: ReactNode;
+  children: ReactNode;
+};
+
+function RouteLayoutBody(props: RouteLayoutBodyProps) {
+  const { user, datastore, isOperator, allowedModels, title, mark, children } = props;
+
+  const { splitEligible, chatOpen, chatReady, closeChat } = useChatPanelSync();
+
+  if (!splitEligible) return children;
+
+  return (
+    <ChatSplitLayout
+      chat={
+        chatReady ? (
+          <Chat
+            user={user}
+            datastore={datastore}
+            isCopilot
+            isOperator={isOperator}
+            allowedModels={allowedModels}
+            title={title}
+            mark={mark}
+            onCloseAction={closeChat}
+          />
+        ) : (
+          <LoadingView />
+        )
+      }
+      chatOpen={chatOpen}
+    >
+      {children}
+    </ChatSplitLayout>
+  );
+}

package/src/components/layouts/Shell.tsx

@@ -0,0 +1,136 @@
+"use client";
+
+import { Menu, PanelLeft } from "lucide-react";
+import type { ReactNode } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { useLocalStorage, useToggle } from "usehooks-ts";
+import { Button } from "#components/button/index";
+import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "#components/resizable/index";
+import type { ImperativePanelHandle } from "#components/resizable/index";
+import { Sheet, SheetContent, SheetTrigger } from "#components/sheet/index";
+import { useIsMobile } from "#hooks/use-is-mobile";
+import { cn } from "#lib/utils";
+
+type MainProps = {
+  sidebar: ReactNode;
+  main: ReactNode;
+};
+
+function MobileShell(props: MainProps) {
+  const { main, sidebar } = props;
+
+  return (
+    <div className="flex h-svh w-full flex-col text-default-foreground bg-background">
+      <div className="flex items-center gap-2 border-b border-muted-border/20 p-4">
+        <Sheet>
+          <SheetTrigger asChild>
+            <Button variant="ghost" size="sm" iconOnly icon={Menu} aria-label="Open menu" />
+          </SheetTrigger>
+
+          <SheetContent side="left" className="w-80 p-0">
+            {sidebar}
+          </SheetContent>
+        </Sheet>
+      </div>
+      <main className="flex-1 overflow-hidden">{main}</main>
+    </div>
+  );
+}
+
+type ResizableShellProps = MainProps & {
+  defaultSidebarWidth?: number;
+  minSidebarWidth?: number;
+  maxSidebarWidth?: number;
+  storageKey?: string;
+};
+
+type CollapsibleShellProps = ResizableShellProps & {
+  collapsible: true;
+  isCollapsed: boolean;
+};
+
+type NonCollapsibleShellProps = ResizableShellProps & {
+  collapsible?: never;
+  isCollapsed?: never;
+};
+
+type ShellProps = CollapsibleShellProps | NonCollapsibleShellProps;
+
+export function Shell(props: ShellProps) {
+  const {
+    sidebar,
+    main,
+    collapsible = false,
+    isCollapsed = false,
+    defaultSidebarWidth = 30,
+    maxSidebarWidth = 40,
+    storageKey = "sidebar-width-percent",
+  } = props;
+
+  const isMobile = useIsMobile();
+  const [sidebarWidth, setSidebarWidth] = useLocalStorage(storageKey, defaultSidebarWidth);
+  const [isInitialized, setIsInitialized] = useState(false);
+  const [isSidebarCollapsed, toggleSidebar] = useToggle(isCollapsed);
+  const minSidebarWidth = isSidebarCollapsed ? 0 : (props.minSidebarWidth ?? 25);
+  const leftPanelRef = useRef<ImperativePanelHandle>(null);
+
+  useEffect(() => setIsInitialized(true), []);
+
+  const handleLayout = useCallback(
+    (sizes: number[]) => {
+      if (!isInitialized) return;
+
+      const [width] = sizes;
+
+      if (width) setSidebarWidth(width);
+    },
+    [isInitialized, minSidebarWidth, maxSidebarWidth, setSidebarWidth],
+  );
+
+  useEffect(() => {
+    leftPanelRef?.current?.collapse();
+  }, [isSidebarCollapsed]);
+
+  if (isMobile) {
+    return <MobileShell {...{ main, sidebar }} />;
+  }
+
+  return (
+    <ResizablePanelGroup direction="horizontal" onLayout={handleLayout} className="w-full h-svh bg-secondary">
+      <ResizablePanel
+        collapsible={collapsible}
+        defaultSize={sidebarWidth}
+        minSize={minSidebarWidth}
+        maxSize={maxSidebarWidth}
+        className="overflow-hidden border-r border-muted-border/20"
+        ref={leftPanelRef}
+      >
+        {sidebar}
+      </ResizablePanel>
+
+      {isSidebarCollapsed ? (
+        <div className="w-px" />
+      ) : (
+        <ResizableHandle withHandle className="bg-background/20 border-muted-border/20" />
+      )}
+
+      <ResizablePanel
+        defaultSize={100 - sidebarWidth}
+        minSize={100 - maxSidebarWidth}
+        maxSize={100 - minSidebarWidth}
+        className="relative"
+      >
+        {collapsible && (
+          <PanelLeft
+            size={16}
+            className="absolute z-10 top-2 left-2 cursor-pointer"
+            onClick={toggleSidebar}
+            aria-label="Toggle sidebar"
+          />
+        )}
+
+        <main className={cn("h-full overflow-hidden", collapsible && "pl-4")}>{main}</main>
+      </ResizablePanel>
+    </ResizablePanelGroup>
+  );
+}