@harbinger-ai/harbinger 0.1.0

package/lib/chat/components/ui/sheet.jsx

@@ -0,0 +1,95 @@
+'use client';
+
+import { createContext, useContext, useEffect } from 'react';
+import { cn } from '../../utils.js';
+
+const SheetContext = createContext({ open: false, onOpenChange: () => {} });
+
+export function Sheet({ children, open, onOpenChange }) {
+  return (
+    <SheetContext.Provider value={{ open, onOpenChange }}>
+      {children}
+    </SheetContext.Provider>
+  );
+}
+
+export function SheetTrigger({ children, asChild, ...props }) {
+  const { onOpenChange } = useContext(SheetContext);
+  if (asChild && children) {
+    return (
+      <span onClick={() => onOpenChange(true)} {...props}>
+        {children}
+      </span>
+    );
+  }
+  return (
+    <button onClick={() => onOpenChange(true)} {...props}>
+      {children}
+    </button>
+  );
+}
+
+export function SheetContent({ children, className, side = 'left', ...props }) {
+  const { open, onOpenChange } = useContext(SheetContext);
+
+  useEffect(() => {
+    if (!open) return;
+    const handleEsc = (e) => {
+      if (e.key === 'Escape') onOpenChange(false);
+    };
+    document.addEventListener('keydown', handleEsc);
+    return () => document.removeEventListener('keydown', handleEsc);
+  }, [open, onOpenChange]);
+
+  if (!open) return null;
+
+  return (
+    <div className="fixed inset-0 z-50">
+      {/* Overlay */}
+      <div
+        className="fixed inset-0 bg-black/50"
+        onClick={() => onOpenChange(false)}
+      />
+      {/* Content */}
+      <div
+        className={cn(
+          'fixed z-50 bg-background shadow-lg transition-transform',
+          side === 'left' && 'inset-y-0 left-0 w-3/4 max-w-sm border-r border-border',
+          side === 'right' && 'inset-y-0 right-0 w-3/4 max-w-sm border-l border-border',
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </div>
+    </div>
+  );
+}
+
+export function SheetHeader({ children, className }) {
+  return <div className={cn('flex flex-col space-y-2 p-4', className)}>{children}</div>;
+}
+
+export function SheetTitle({ children, className }) {
+  return <h2 className={cn('text-lg font-semibold text-foreground', className)}>{children}</h2>;
+}
+
+export function SheetDescription({ children, className }) {
+  return <p className={cn('text-sm text-muted-foreground', className)}>{children}</p>;
+}
+
+export function SheetClose({ children, asChild, ...props }) {
+  const { onOpenChange } = useContext(SheetContext);
+  if (asChild && children) {
+    return (
+      <span onClick={() => onOpenChange(false)} {...props}>
+        {children}
+      </span>
+    );
+  }
+  return (
+    <button onClick={() => onOpenChange(false)} {...props}>
+      {children}
+    </button>
+  );
+}

package/lib/chat/components/ui/sidebar.js

@@ -0,0 +1,227 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createContext, useContext, useState, useEffect, useCallback, useMemo } from "react";
+import { cn } from "../../utils.js";
+import { Sheet, SheetContent } from "./sheet.js";
+const SIDEBAR_WIDTH = "16rem";
+const SIDEBAR_WIDTH_ICON = "3rem";
+const SIDEBAR_WIDTH_MOBILE = "18rem";
+const SIDEBAR_COOKIE_NAME = "sidebar:state";
+const SIDEBAR_KEYBOARD_SHORTCUT = "b";
+const SidebarContext = createContext(null);
+function useSidebar() {
+  const context = useContext(SidebarContext);
+  if (!context) {
+    throw new Error("useSidebar must be used within a SidebarProvider");
+  }
+  return context;
+}
+function SidebarProvider({
+  children,
+  defaultOpen = true,
+  open: openProp,
+  onOpenChange: setOpenProp
+}) {
+  const [isMobile, setIsMobile] = useState(false);
+  const [openMobile, setOpenMobile] = useState(false);
+  const [_open, _setOpen] = useState(defaultOpen);
+  const open = openProp !== void 0 ? openProp : _open;
+  const setOpen = useCallback(
+    (value) => {
+      const newOpen = typeof value === "function" ? value(open) : value;
+      if (setOpenProp) {
+        setOpenProp(newOpen);
+      } else {
+        _setOpen(newOpen);
+      }
+      try {
+        document.cookie = `${SIDEBAR_COOKIE_NAME}=${newOpen}; path=/; max-age=${60 * 60 * 24 * 7}`;
+      } catch (e) {
+      }
+    },
+    [setOpenProp, open]
+  );
+  const toggleSidebar = useCallback(() => {
+    if (isMobile) {
+      setOpenMobile((prev) => !prev);
+    } else {
+      setOpen((prev) => !prev);
+    }
+  }, [isMobile, setOpen]);
+  useEffect(() => {
+    const check = () => setIsMobile(window.innerWidth < 768);
+    check();
+    window.addEventListener("resize", check);
+    return () => window.removeEventListener("resize", check);
+  }, []);
+  useEffect(() => {
+    const handleKeyDown = (e) => {
+      if (e.key === SIDEBAR_KEYBOARD_SHORTCUT && (e.metaKey || e.ctrlKey)) {
+        e.preventDefault();
+        toggleSidebar();
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [toggleSidebar]);
+  const state = open ? "expanded" : "collapsed";
+  const contextValue = useMemo(
+    () => ({
+      state,
+      open,
+      setOpen,
+      isMobile,
+      openMobile,
+      setOpenMobile,
+      toggleSidebar
+    }),
+    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
+  );
+  return /* @__PURE__ */ jsx(SidebarContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "group/sidebar-wrapper flex min-h-svh w-full",
+      style: {
+        "--sidebar-width": SIDEBAR_WIDTH,
+        "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
+        "--sidebar-width-mobile": SIDEBAR_WIDTH_MOBILE
+      },
+      "data-sidebar-state": state,
+      children
+    }
+  ) });
+}
+function Sidebar({ children, className, side = "left" }) {
+  const { isMobile, open, openMobile, setOpenMobile } = useSidebar();
+  if (isMobile) {
+    return /* @__PURE__ */ jsx(Sheet, { open: openMobile, onOpenChange: setOpenMobile, children: /* @__PURE__ */ jsx(
+      SheetContent,
+      {
+        side,
+        className: cn("w-[var(--sidebar-width-mobile)] p-0 [&>button]:hidden", className),
+        children: /* @__PURE__ */ jsx("div", { className: "flex h-full w-full flex-col", children })
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "sticky top-0 flex h-svh flex-col border-r border-border bg-muted transition-[width] duration-200",
+        open ? "w-[var(--sidebar-width)]" : "w-[var(--sidebar-width-icon)]",
+        className
+      ),
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(
+            "flex h-full flex-col overflow-hidden",
+            open ? "w-[var(--sidebar-width)]" : "w-[var(--sidebar-width-icon)]"
+          ),
+          children
+        }
+      )
+    }
+  );
+}
+function SidebarHeader({ children, className }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("flex flex-col gap-2 p-2", className), children });
+}
+function SidebarContent({ children, className }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("flex min-h-0 flex-1 flex-col overflow-y-auto", className), children });
+}
+function SidebarFooter({ children, className }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("flex flex-col gap-2 p-2", className), children });
+}
+function SidebarMenu({ children, className }) {
+  return /* @__PURE__ */ jsx("ul", { className: cn("flex w-full min-w-0 flex-col gap-1", className), children });
+}
+function SidebarMenuItem({ children, className }) {
+  return /* @__PURE__ */ jsx("li", { className: cn("group/menu-item relative", className), children });
+}
+function SidebarMenuButton({ children, className, isActive, asChild, tooltip, ...props }) {
+  const Tag = asChild ? "span" : "button";
+  return /* @__PURE__ */ jsx(
+    Tag,
+    {
+      className: cn(
+        "flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none transition-colors",
+        "hover:bg-background hover:text-foreground",
+        isActive && "bg-background text-foreground font-medium",
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+}
+function SidebarGroup({ children, className }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("relative flex w-full min-w-0 flex-col p-2", className), children });
+}
+function SidebarGroupLabel({ children, className }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-muted-foreground",
+        className
+      ),
+      children
+    }
+  );
+}
+function SidebarGroupContent({ children, className }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("w-full", className), children });
+}
+function SidebarInset({ children, className }) {
+  return /* @__PURE__ */ jsx("main", { className: cn("relative flex min-h-svh flex-1 flex-col bg-background", className), children });
+}
+function SidebarTrigger({ className, ...props }) {
+  const { toggleSidebar } = useSidebar();
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      className: cn(
+        "inline-flex items-center justify-center rounded-md p-2 text-foreground hover:bg-muted",
+        className
+      ),
+      onClick: toggleSidebar,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", className: "size-4", children: [
+          /* @__PURE__ */ jsx("rect", { width: "18", height: "18", x: "3", y: "3", rx: "2" }),
+          /* @__PURE__ */ jsx("path", { d: "M9 3v18" })
+        ] }),
+        /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Toggle Sidebar" })
+      ]
+    }
+  );
+}
+function SidebarRail() {
+  const { toggleSidebar } = useSidebar();
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      className: "absolute inset-y-0 right-0 w-1 cursor-col-resize hover:bg-border",
+      onClick: toggleSidebar,
+      "aria-label": "Toggle Sidebar"
+    }
+  );
+}
+export {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarProvider,
+  SidebarRail,
+  SidebarTrigger,
+  useSidebar
+};

package/lib/chat/components/ui/sidebar.jsx

@@ -0,0 +1,245 @@
+'use client';
+
+import { createContext, useContext, useState, useEffect, useCallback, useMemo } from 'react';
+import { cn } from '../../utils.js';
+import { Sheet, SheetContent } from './sheet.js';
+
+const SIDEBAR_WIDTH = '16rem';
+const SIDEBAR_WIDTH_ICON = '3rem';
+const SIDEBAR_WIDTH_MOBILE = '18rem';
+const SIDEBAR_COOKIE_NAME = 'sidebar:state';
+const SIDEBAR_KEYBOARD_SHORTCUT = 'b';
+
+const SidebarContext = createContext(null);
+
+export function useSidebar() {
+  const context = useContext(SidebarContext);
+  if (!context) {
+    throw new Error('useSidebar must be used within a SidebarProvider');
+  }
+  return context;
+}
+
+export function SidebarProvider({
+  children,
+  defaultOpen = true,
+  open: openProp,
+  onOpenChange: setOpenProp,
+}) {
+  const [isMobile, setIsMobile] = useState(false);
+  const [openMobile, setOpenMobile] = useState(false);
+  const [_open, _setOpen] = useState(defaultOpen);
+  const open = openProp !== undefined ? openProp : _open;
+  const setOpen = useCallback(
+    (value) => {
+      const newOpen = typeof value === 'function' ? value(open) : value;
+      if (setOpenProp) {
+        setOpenProp(newOpen);
+      } else {
+        _setOpen(newOpen);
+      }
+      try {
+        document.cookie = `${SIDEBAR_COOKIE_NAME}=${newOpen}; path=/; max-age=${60 * 60 * 24 * 7}`;
+      } catch (e) {
+        // SSR safety
+      }
+    },
+    [setOpenProp, open]
+  );
+
+  const toggleSidebar = useCallback(() => {
+    if (isMobile) {
+      setOpenMobile((prev) => !prev);
+    } else {
+      setOpen((prev) => !prev);
+    }
+  }, [isMobile, setOpen]);
+
+  // Detect mobile
+  useEffect(() => {
+    const check = () => setIsMobile(window.innerWidth < 768);
+    check();
+    window.addEventListener('resize', check);
+    return () => window.removeEventListener('resize', check);
+  }, []);
+
+  // Keyboard shortcut (Cmd/Ctrl + B)
+  useEffect(() => {
+    const handleKeyDown = (e) => {
+      if (e.key === SIDEBAR_KEYBOARD_SHORTCUT && (e.metaKey || e.ctrlKey)) {
+        e.preventDefault();
+        toggleSidebar();
+      }
+    };
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [toggleSidebar]);
+
+  const state = open ? 'expanded' : 'collapsed';
+
+  const contextValue = useMemo(
+    () => ({
+      state,
+      open,
+      setOpen,
+      isMobile,
+      openMobile,
+      setOpenMobile,
+      toggleSidebar,
+    }),
+    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
+  );
+
+  return (
+    <SidebarContext.Provider value={contextValue}>
+      <div
+        className="group/sidebar-wrapper flex min-h-svh w-full"
+        style={{
+          '--sidebar-width': SIDEBAR_WIDTH,
+          '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,
+          '--sidebar-width-mobile': SIDEBAR_WIDTH_MOBILE,
+        }}
+        data-sidebar-state={state}
+      >
+        {children}
+      </div>
+    </SidebarContext.Provider>
+  );
+}
+
+export function Sidebar({ children, className, side = 'left' }) {
+  const { isMobile, open, openMobile, setOpenMobile } = useSidebar();
+
+  if (isMobile) {
+    return (
+      <Sheet open={openMobile} onOpenChange={setOpenMobile}>
+        <SheetContent
+          side={side}
+          className={cn('w-[var(--sidebar-width-mobile)] p-0 [&>button]:hidden', className)}
+        >
+          <div className="flex h-full w-full flex-col">{children}</div>
+        </SheetContent>
+      </Sheet>
+    );
+  }
+
+  return (
+    <div
+      className={cn(
+        'sticky top-0 flex h-svh flex-col border-r border-border bg-muted transition-[width] duration-200',
+        open ? 'w-[var(--sidebar-width)]' : 'w-[var(--sidebar-width-icon)]',
+        className
+      )}
+    >
+      <div
+        className={cn(
+          'flex h-full flex-col overflow-hidden',
+          open ? 'w-[var(--sidebar-width)]' : 'w-[var(--sidebar-width-icon)]'
+        )}
+      >
+        {children}
+      </div>
+    </div>
+  );
+}
+
+export function SidebarHeader({ children, className }) {
+  return <div className={cn('flex flex-col gap-2 p-2', className)}>{children}</div>;
+}
+
+export function SidebarContent({ children, className }) {
+  return (
+    <div className={cn('flex min-h-0 flex-1 flex-col overflow-y-auto', className)}>
+      {children}
+    </div>
+  );
+}
+
+export function SidebarFooter({ children, className }) {
+  return <div className={cn('flex flex-col gap-2 p-2', className)}>{children}</div>;
+}
+
+export function SidebarMenu({ children, className }) {
+  return <ul className={cn('flex w-full min-w-0 flex-col gap-1', className)}>{children}</ul>;
+}
+
+export function SidebarMenuItem({ children, className }) {
+  return <li className={cn('group/menu-item relative', className)}>{children}</li>;
+}
+
+export function SidebarMenuButton({ children, className, isActive, asChild, tooltip, ...props }) {
+  const Tag = asChild ? 'span' : 'button';
+  return (
+    <Tag
+      className={cn(
+        'flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none transition-colors',
+        'hover:bg-background hover:text-foreground',
+        isActive && 'bg-background text-foreground font-medium',
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </Tag>
+  );
+}
+
+export function SidebarGroup({ children, className }) {
+  return <div className={cn('relative flex w-full min-w-0 flex-col p-2', className)}>{children}</div>;
+}
+
+export function SidebarGroupLabel({ children, className }) {
+  return (
+    <div
+      className={cn(
+        'flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-muted-foreground',
+        className
+      )}
+    >
+      {children}
+    </div>
+  );
+}
+
+export function SidebarGroupContent({ children, className }) {
+  return <div className={cn('w-full', className)}>{children}</div>;
+}
+
+export function SidebarInset({ children, className }) {
+  return (
+    <main className={cn('relative flex min-h-svh flex-1 flex-col bg-background', className)}>
+      {children}
+    </main>
+  );
+}
+
+export function SidebarTrigger({ className, ...props }) {
+  const { toggleSidebar } = useSidebar();
+  return (
+    <button
+      className={cn(
+        'inline-flex items-center justify-center rounded-md p-2 text-foreground hover:bg-muted',
+        className
+      )}
+      onClick={toggleSidebar}
+      {...props}
+    >
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" className="size-4">
+        <rect width="18" height="18" x="3" y="3" rx="2" />
+        <path d="M9 3v18" />
+      </svg>
+      <span className="sr-only">Toggle Sidebar</span>
+    </button>
+  );
+}
+
+export function SidebarRail() {
+  const { toggleSidebar } = useSidebar();
+  return (
+    <button
+      className="absolute inset-y-0 right-0 w-1 cursor-col-resize hover:bg-border"
+      onClick={toggleSidebar}
+      aria-label="Toggle Sidebar"
+    />
+  );
+}

package/lib/chat/components/ui/tooltip.js

@@ -0,0 +1,56 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useState, useRef, useEffect, createContext, useContext, cloneElement } from "react";
+import { cn } from "../../utils.js";
+const TooltipContext = createContext({ open: false });
+function TooltipProvider({ children, delayDuration = 200 }) {
+  return children;
+}
+function Tooltip({ children }) {
+  const [open, setOpen] = useState(false);
+  const timeoutRef = useRef(null);
+  const handleOpen = () => {
+    timeoutRef.current = setTimeout(() => setOpen(true), 200);
+  };
+  const handleClose = () => {
+    clearTimeout(timeoutRef.current);
+    setOpen(false);
+  };
+  useEffect(() => () => clearTimeout(timeoutRef.current), []);
+  return /* @__PURE__ */ jsx(TooltipContext.Provider, { value: { open, handleOpen, handleClose }, children: /* @__PURE__ */ jsx("div", { className: "relative inline-flex", onMouseEnter: handleOpen, onMouseLeave: handleClose, children }) });
+}
+function TooltipTrigger({ children, asChild }) {
+  if (asChild && children) {
+    return children;
+  }
+  return children;
+}
+function TooltipContent({ children, className, align = "center", side = "bottom", ...props }) {
+  const { open } = useContext(TooltipContext);
+  if (!open) return null;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "absolute z-50 overflow-hidden rounded-md border border-border bg-muted px-3 py-1.5 text-sm text-foreground shadow-md",
+        "animate-in fade-in-0 zoom-in-95",
+        side === "bottom" && "top-full mt-1",
+        side === "top" && "bottom-full mb-1",
+        side === "right" && "left-full ml-1 top-1/2 -translate-y-1/2",
+        side === "left" && "right-full mr-1 top-1/2 -translate-y-1/2",
+        side !== "right" && side !== "left" && align === "center" && "left-1/2 -translate-x-1/2",
+        side !== "right" && side !== "left" && align === "end" && "right-0",
+        side !== "right" && side !== "left" && align === "start" && "left-0",
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+}
+export {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger
+};

package/lib/chat/components/ui/tooltip.jsx

@@ -0,0 +1,66 @@
+'use client';
+
+import { useState, useRef, useEffect, createContext, useContext, cloneElement } from 'react';
+import { cn } from '../../utils.js';
+
+const TooltipContext = createContext({ open: false });
+
+export function TooltipProvider({ children, delayDuration = 200 }) {
+  return children;
+}
+
+export function Tooltip({ children }) {
+  const [open, setOpen] = useState(false);
+  const timeoutRef = useRef(null);
+
+  const handleOpen = () => {
+    timeoutRef.current = setTimeout(() => setOpen(true), 200);
+  };
+
+  const handleClose = () => {
+    clearTimeout(timeoutRef.current);
+    setOpen(false);
+  };
+
+  useEffect(() => () => clearTimeout(timeoutRef.current), []);
+
+  return (
+    <TooltipContext.Provider value={{ open, handleOpen, handleClose }}>
+      <div className="relative inline-flex" onMouseEnter={handleOpen} onMouseLeave={handleClose}>
+        {children}
+      </div>
+    </TooltipContext.Provider>
+  );
+}
+
+export function TooltipTrigger({ children, asChild }) {
+  if (asChild && children) {
+    return children;
+  }
+  return children;
+}
+
+export function TooltipContent({ children, className, align = 'center', side = 'bottom', ...props }) {
+  const { open } = useContext(TooltipContext);
+  if (!open) return null;
+
+  return (
+    <div
+      className={cn(
+        'absolute z-50 overflow-hidden rounded-md border border-border bg-muted px-3 py-1.5 text-sm text-foreground shadow-md',
+        'animate-in fade-in-0 zoom-in-95',
+        side === 'bottom' && 'top-full mt-1',
+        side === 'top' && 'bottom-full mb-1',
+        side === 'right' && 'left-full ml-1 top-1/2 -translate-y-1/2',
+        side === 'left' && 'right-full mr-1 top-1/2 -translate-y-1/2',
+        side !== 'right' && side !== 'left' && align === 'center' && 'left-1/2 -translate-x-1/2',
+        side !== 'right' && side !== 'left' && align === 'end' && 'right-0',
+        side !== 'right' && side !== 'left' && align === 'start' && 'left-0',
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}