AI Sidebar

1"use client";
2// beui.dev/components/agents/ai-sidebar
3 
4import {
5  Bookmark,
6  FileText,
7  Folder,
8  FolderOpen,
9  MoreHorizontal,
10  Pencil,
11} from "lucide-react";
12import { AnimatePresence, motion, useReducedMotion } from "motion/react";
13import {
14  type DragEvent,
15  type KeyboardEvent,
16  type ReactNode,
17  useCallback,
18  useEffect,
19  useMemo,
20  useRef,
21  useState,
22} from "react";
23import {
24  MorphPopover,
25  MorphPopoverContent,
26  MorphPopoverTrigger,
27} from "@/components/motion/popover-morph";
28import { EASE_OUT, SPRING_LAYOUT } from "@/lib/ease";
29import { cn } from "@/lib/utils";
30 
31export type SidebarResourceKind =
32  | "folder"
33  | "project"
34  | "file"
35  | "bookmark";
36 
37export interface SidebarResource {
38  id: string;
39  label: string;
40  kind: SidebarResourceKind;
41  children?: SidebarResource[];
42  disabled?: boolean;
43}
44 
45export type SidebarResourceDropPosition = "before" | "inside" | "after";
46 
47export interface SidebarResourceMove {
48  itemId: string;
49  targetId: string | null;
50  position: SidebarResourceDropPosition;
51}
52 
53export interface SidebarResourceMenuControls {
54  close: () => void;
55  rename: () => void;
56}
57 
58export interface AISidebarProps {
59  items?: SidebarResource[];
60  defaultItems?: SidebarResource[];
61  onItemsChange?: (items: SidebarResource[]) => void;
62  /** Reject the promise to roll the optimistic move back. */
63  onMove?: (move: SidebarResourceMove) => void | Promise<void>;
64  onMoveError?: (error: unknown, move: SidebarResourceMove) => void;
65  onRename?: (item: SidebarResource, label: string) => void | Promise<void>;
66  activeId?: string | null;
67  defaultActiveId?: string | null;
68  onActiveChange?: (id: string) => void;
69  defaultExpandedIds?: string[];
70  renderIcon?: (item: SidebarResource) => ReactNode;
71  renderMenu?: (
72    item: SidebarResource,
73    controls: SidebarResourceMenuControls,
74  ) => ReactNode;
75  ariaLabel?: string;
76  className?: string;
77}
78 
79interface FlatResource {
80  item: SidebarResource;
81  depth: number;
82  parentId: string | null;
83}
84 
85interface DropTarget {
86  id: string | null;
87  position: SidebarResourceDropPosition;
88}
89 
90const ROW_REVEAL = {
91  duration: 0.16,
92  ease: EASE_OUT,
93} as const;
94 
95function canContain(item: SidebarResource) {
96  return item.kind === "folder" || item.kind === "project";
97}
98 
99function flattenResources(
100  items: SidebarResource[],
101  expanded: Set<string>,
102  depth = 0,
103  parentId: string | null = null,
104): FlatResource[] {
105  return items.flatMap((item) => {
106    const row = { item, depth, parentId };
107// … truncated