ai-design-system 0.1.52 → 0.1.54

package/components/ai-elements/file-tree.tsx

@@ -0,0 +1,304 @@
+"use client";
+
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";
+import { cn } from "@/lib/utils";
+import {
+  ChevronRightIcon,
+  FileIcon,
+  FolderIcon,
+  FolderOpenIcon,
+} from "lucide-react";
+import type { HTMLAttributes, ReactNode } from "react";
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useMemo,
+  useState,
+} from "react";
+
+interface FileTreeContextType {
+  expandedPaths: Set<string>;
+  togglePath: (path: string) => void;
+  selectedPath?: string;
+  onSelect?: (path: string) => void;
+}
+
+// Default noop for context default value
+// oxlint-disable-next-line eslint(no-empty-function)
+const noop = () => {};
+
+const FileTreeContext = createContext<FileTreeContextType>({
+  // oxlint-disable-next-line eslint-plugin-unicorn(no-new-builtin)
+  expandedPaths: new Set(),
+  togglePath: noop,
+});
+
+export type FileTreeProps = Omit<HTMLAttributes<HTMLDivElement>, "onSelect"> & {
+  expanded?: Set<string>;
+  defaultExpanded?: Set<string>;
+  selectedPath?: string;
+  onSelect?: (path: string) => void;
+  onExpandedChange?: (expanded: Set<string>) => void;
+};
+
+export const FileTree = ({
+  expanded: controlledExpanded,
+  defaultExpanded = new Set(),
+  selectedPath,
+  onSelect,
+  onExpandedChange,
+  className,
+  children,
+  ...props
+}: FileTreeProps) => {
+  const [internalExpanded, setInternalExpanded] = useState(defaultExpanded);
+  const expandedPaths = controlledExpanded ?? internalExpanded;
+
+  const togglePath = useCallback(
+    (path: string) => {
+      const newExpanded = new Set(expandedPaths);
+      if (newExpanded.has(path)) {
+        newExpanded.delete(path);
+      } else {
+        newExpanded.add(path);
+      }
+      setInternalExpanded(newExpanded);
+      onExpandedChange?.(newExpanded);
+    },
+    [expandedPaths, onExpandedChange]
+  );
+
+  const contextValue = useMemo(
+    () => ({ expandedPaths, onSelect, selectedPath, togglePath }),
+    [expandedPaths, onSelect, selectedPath, togglePath]
+  );
+
+  return (
+    <FileTreeContext.Provider value={contextValue}>
+      <div
+        className={cn(
+          "rounded-lg border bg-background font-mono text-sm",
+          className
+        )}
+        role="tree"
+        {...props}
+      >
+        <div className="p-2">{children}</div>
+      </div>
+    </FileTreeContext.Provider>
+  );
+};
+
+export type FileTreeIconProps = HTMLAttributes<HTMLSpanElement>;
+
+export const FileTreeIcon = ({
+  className,
+  children,
+  ...props
+}: FileTreeIconProps) => (
+  <span className={cn("shrink-0", className)} {...props}>
+    {children}
+  </span>
+);
+
+export type FileTreeNameProps = HTMLAttributes<HTMLSpanElement>;
+
+export const FileTreeName = ({
+  className,
+  children,
+  ...props
+}: FileTreeNameProps) => (
+  <span className={cn("truncate", className)} {...props}>
+    {children}
+  </span>
+);
+
+interface FileTreeFolderContextType {
+  path: string;
+  name: string;
+  isExpanded: boolean;
+}
+
+const FileTreeFolderContext = createContext<FileTreeFolderContextType>({
+  isExpanded: false,
+  name: "",
+  path: "",
+});
+
+export type FileTreeFolderProps = HTMLAttributes<HTMLDivElement> & {
+  path: string;
+  name: string;
+};
+
+export const FileTreeFolder = ({
+  path,
+  name,
+  className,
+  children,
+  ...props
+}: FileTreeFolderProps) => {
+  const { expandedPaths, togglePath, selectedPath, onSelect } =
+    useContext(FileTreeContext);
+  const isExpanded = expandedPaths.has(path);
+  const isSelected = selectedPath === path;
+
+  const handleOpenChange = useCallback(() => {
+    togglePath(path);
+  }, [togglePath, path]);
+
+  const handleSelect = useCallback(() => {
+    onSelect?.(path);
+  }, [onSelect, path]);
+
+  const folderContextValue = useMemo(
+    () => ({ isExpanded, name, path }),
+    [isExpanded, name, path]
+  );
+
+  return (
+    <FileTreeFolderContext.Provider value={folderContextValue}>
+      <Collapsible onOpenChange={handleOpenChange} open={isExpanded}>
+        <div
+          className={cn("", className)}
+          role="treeitem"
+          tabIndex={0}
+          {...props}
+        >
+          <div
+            className={cn(
+              "flex w-full items-center gap-1 rounded px-2 py-1 text-left transition-colors hover:bg-muted/50",
+              isSelected && "bg-muted"
+            )}
+          >
+            <CollapsibleTrigger asChild>
+              <button
+                className="flex shrink-0 cursor-pointer items-center border-none bg-transparent p-0"
+                type="button"
+              >
+                <ChevronRightIcon
+                  className={cn(
+                    "size-4 shrink-0 text-muted-foreground transition-transform",
+                    isExpanded && "rotate-90"
+                  )}
+                />
+              </button>
+            </CollapsibleTrigger>
+            <button
+              className="flex min-w-0 flex-1 cursor-pointer items-center gap-1 border-none bg-transparent p-0 text-left"
+              onClick={handleSelect}
+              type="button"
+            >
+              <FileTreeIcon>
+                {isExpanded ? (
+                  <FolderOpenIcon className="size-4 text-blue-500" />
+                ) : (
+                  <FolderIcon className="size-4 text-blue-500" />
+                )}
+              </FileTreeIcon>
+              <FileTreeName>{name}</FileTreeName>
+            </button>
+          </div>
+          <CollapsibleContent>
+            <div className="ml-4 border-l pl-2">{children}</div>
+          </CollapsibleContent>
+        </div>
+      </Collapsible>
+    </FileTreeFolderContext.Provider>
+  );
+};
+
+interface FileTreeFileContextType {
+  path: string;
+  name: string;
+}
+
+const FileTreeFileContext = createContext<FileTreeFileContextType>({
+  name: "",
+  path: "",
+});
+
+export type FileTreeFileProps = HTMLAttributes<HTMLDivElement> & {
+  path: string;
+  name: string;
+  icon?: ReactNode;
+};
+
+export const FileTreeFile = ({
+  path,
+  name,
+  icon,
+  className,
+  children,
+  ...props
+}: FileTreeFileProps) => {
+  const { selectedPath, onSelect } = useContext(FileTreeContext);
+  const isSelected = selectedPath === path;
+
+  const handleClick = useCallback(() => {
+    onSelect?.(path);
+  }, [onSelect, path]);
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === "Enter" || e.key === " ") {
+        onSelect?.(path);
+      }
+    },
+    [onSelect, path]
+  );
+
+  const fileContextValue = useMemo(() => ({ name, path }), [name, path]);
+
+  return (
+    <FileTreeFileContext.Provider value={fileContextValue}>
+      <div
+        className={cn(
+          "flex cursor-pointer items-center gap-1 rounded px-2 py-1 transition-colors hover:bg-muted/50",
+          isSelected && "bg-muted",
+          className
+        )}
+        onClick={handleClick}
+        onKeyDown={handleKeyDown}
+        role="treeitem"
+        tabIndex={0}
+        {...props}
+      >
+        {children ?? (
+          <>
+            {/* Spacer for alignment */}
+            <span className="size-4 shrink-0" />
+            <FileTreeIcon>
+              {icon ?? <FileIcon className="size-4 text-muted-foreground" />}
+            </FileTreeIcon>
+            <FileTreeName>{name}</FileTreeName>
+          </>
+        )}
+      </div>
+    </FileTreeFileContext.Provider>
+  );
+};
+
+export type FileTreeActionsProps = HTMLAttributes<HTMLDivElement>;
+
+const stopPropagation = (e: React.SyntheticEvent) => e.stopPropagation();
+
+export const FileTreeActions = ({
+  className,
+  children,
+  ...props
+}: FileTreeActionsProps) => (
+  <div
+    className={cn("ml-auto flex items-center gap-1", className)}
+    onClick={stopPropagation}
+    onKeyDown={stopPropagation}
+    role="group"
+    {...props}
+  >
+    {children}
+  </div>
+);

package/components/blocks/AIConversation/AIConversation.tsx

@@ -61,6 +61,10 @@ export interface AIConversationProps
     description?: string
     icon?: React.ReactNode
   }
+  /**
+   * Callback fired when a tool action (like a link click) is triggered
+   */
+  onToolAction?: (toolCall: ToolCall, action: string) => void
 }
 
 /**
@@ -73,6 +77,7 @@ export const AIConversation = React.memo<AIConversationProps>(
     onSelectSubAgent,
     selectedSubAgent,
     emptyState,
+    onToolAction,
     ...conversationProps
   }) => {
     const isEmpty = React.useMemo(
@@ -146,7 +151,7 @@ export const AIConversation = React.memo<AIConversationProps>(
               >
                 {/* Render direct tool calls */}
                 {directToolCalls.map((tc) => (
-                  <ToolCallDisplay key={tc.id} toolCall={tc} />
+                  <ToolCallDisplay key={tc.id} toolCall={tc} onToolAction={onToolAction} />
                 ))}
 
                 {/* Render specialist sub-agents */}

package/components/composites/AdjustableLayout/AdjustableLayout.tsx

@@ -220,36 +220,45 @@ export const AdjustableLayout = React.memo<AdjustableLayoutProps>(
             {section.content}
           </div>
 
-          {/* Show drag handle after this panel if it's not the last one */}
-          {isResizable && (
-            <div
-              className={cn(
-                "flex-shrink-0 flex items-center justify-center relative group",
-                orientation === "vertical"
-                  ? "cursor-row-resize h-2 w-full"
-                  : "cursor-col-resize w-2 h-full"
-              )}
-              onMouseDown={(e) => handleMouseDown(index, e)}
-            >
-              {/* Visible pill */}
+          {/* Show drag handle or spacer after this panel if it's not the last one */}
+          {index < sections.length - 1 && (
+            isResizable ? (
               <div
                 className={cn(
-                  `${colorMap[dragHandleColor]} transition-colors duration-200 rounded-full`,
+                  "flex-shrink-0 flex items-center justify-center relative group",
                   orientation === "vertical"
-                    ? "h-1 w-8"
-                    : "w-1 h-8"
+                    ? "cursor-row-resize h-2 w-full"
+                    : "cursor-col-resize w-2 h-full"
                 )}
-              />
-              {/* Invisible large hit area */}
+                onMouseDown={(e) => handleMouseDown(index, e)}
+              >
+                {/* Visible pill */}
+                <div
+                  className={cn(
+                    `${colorMap[dragHandleColor]} transition-colors duration-200 rounded-full`,
+                    orientation === "vertical"
+                      ? "h-1 w-8"
+                      : "w-1 h-8"
+                  )}
+                />
+                {/* Invisible large hit area */}
+                <div
+                  className={cn(
+                    "absolute z-10",
+                    orientation === "vertical"
+                      ? "inset-x-0 -top-2 -bottom-2"
+                      : "inset-y-0 -left-2 -right-2"
+                  )}
+                />
+              </div>
+            ) : (
               <div
                 className={cn(
-                  "absolute z-10",
-                  orientation === "vertical"
-                    ? "inset-x-0 -top-2 -bottom-2"
-                    : "inset-y-0 -left-2 -right-2"
+                  "flex-shrink-0",
+                  orientation === "vertical" ? "h-2 w-full" : "w-2 h-full"
                 )}
               />
-            </div>
+            )
           )}
         </React.Fragment>
       )

package/components/composites/FileTreeExplorer/FileTreeExplorer.stories.tsx

@@ -0,0 +1,73 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { fn } from '@storybook/test'
+import { FileTreeExplorer } from './FileTreeExplorer'
+
+const sampleTree = [
+  {
+    name: 'src',
+    path: 'src',
+    type: 'folder' as const,
+    children: [
+      {
+        name: 'components',
+        path: 'src/components',
+        type: 'folder' as const,
+        children: [
+          { name: 'Button.tsx', path: 'src/components/Button.tsx', type: 'file' as const },
+          { name: 'Input.tsx', path: 'src/components/Input.tsx', type: 'file' as const },
+        ],
+      },
+      {
+        name: 'hooks',
+        path: 'src/hooks',
+        type: 'folder' as const,
+        children: [
+          { name: 'use-toast.ts', path: 'src/hooks/use-toast.ts', type: 'file' as const },
+        ],
+      },
+      { name: 'index.ts', path: 'src/index.ts', type: 'file' as const },
+    ],
+  },
+  { name: 'package.json', path: 'package.json', type: 'file' as const },
+]
+
+const meta = {
+  title: 'Composites/FileTreeExplorer',
+  component: FileTreeExplorer,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'padded',
+  },
+} satisfies Meta<typeof FileTreeExplorer>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    tree: sampleTree,
+    defaultExpanded: new Set(['src', 'src/components']),
+    selectedPath: 'src/components/Button.tsx',
+    onSelect: fn(),
+    createButtonLabel: 'New File',
+  },
+}
+
+export const Empty: Story = {
+  args: {
+    tree: [],
+    createButtonLabel: 'New File',
+  },
+}
+
+export const DarkMode: Story = {
+  args: {
+    tree: sampleTree,
+    defaultExpanded: new Set(['src']),
+    selectedPath: 'src/index.ts',
+    onSelect: fn(),
+  },
+  parameters: {
+    backgrounds: { disable: true },
+  },
+}

package/components/composites/FileTreeExplorer/FileTreeExplorer.tsx

@@ -0,0 +1,145 @@
+import * as React from "react"
+
+import {
+  FileTree,
+  FileTreeFolder,
+  FileTreeFile,
+} from "@/components/ai-elements/file-tree"
+import { Icon } from "@/components/primitives/Icon"
+import { Input } from "@/components/primitives/Input"
+import { cn } from "@/lib/utils"
+
+export type FileTreeNode = {
+  name: string
+  path: string
+  type: "file" | "folder"
+  children?: FileTreeNode[]
+}
+
+export interface FileTreeExplorerProps {
+  tree: FileTreeNode[]
+  defaultExpanded?: Set<string>
+  selectedPath?: string
+  onSelect?: (path: string) => void
+  searchPlaceholder?: string
+  onCreateClick?: () => void
+  createButtonLabel?: string
+  headerClassName?: string
+  className?: string
+}
+
+function renderTree(nodes: FileTreeNode[]): React.ReactNode {
+  return nodes.map((node) => {
+    if (node.type === "folder") {
+      return (
+        <FileTreeFolder key={node.path} name={node.name} path={node.path}>
+          {node.children ? renderTree(node.children) : null}
+        </FileTreeFolder>
+      )
+    }
+    return <FileTreeFile key={node.path} name={node.name} path={node.path} />
+  })
+}
+
+function filterTree(nodes: FileTreeNode[], query: string): FileTreeNode[] {
+  if (!query) return nodes;
+  const lowerQuery = query.toLowerCase();
+
+  return nodes.reduce<FileTreeNode[]>((acc, node) => {
+    if (node.type === 'file') {
+      if (node.name.toLowerCase().includes(lowerQuery)) {
+        acc.push(node);
+      }
+    } else if (node.type === 'folder' && node.children) {
+      const filteredChildren = filterTree(node.children, query);
+      // Keep the folder if it matches the query itself, or if any of its children match
+      if (node.name.toLowerCase().includes(lowerQuery) || filteredChildren.length > 0) {
+        acc.push({ ...node, children: filteredChildren });
+      }
+    }
+    return acc;
+  }, []);
+}
+
+function getAllFolderPaths(nodes: FileTreeNode[]): Set<string> {
+  const paths = new Set<string>();
+  function traverse(n: FileTreeNode[]) {
+    for (const node of n) {
+      if (node.type === 'folder') {
+        paths.add(node.path);
+        if (node.children) traverse(node.children);
+      }
+    }
+  }
+  traverse(nodes);
+  return paths;
+}
+
+export const FileTreeExplorer = React.memo<FileTreeExplorerProps>(
+  ({
+    tree,
+    defaultExpanded,
+    selectedPath,
+    onSelect,
+    searchPlaceholder = "Filter files...",
+    onCreateClick,
+    createButtonLabel,
+    headerClassName,
+    className,
+  }) => {
+    const [searchQuery, setSearchQuery] = React.useState("")
+
+    const filteredTree = React.useMemo(() => {
+      return filterTree(tree, searchQuery)
+    }, [tree, searchQuery])
+
+    const expandedPaths = React.useMemo(() => {
+      if (searchQuery) {
+        return getAllFolderPaths(filteredTree)
+      }
+      return defaultExpanded
+    }, [searchQuery, filteredTree, defaultExpanded])
+
+    return (
+      <div className={cn("flex flex-col rounded-lg border bg-background", className)}>
+        <div className={cn("flex items-center gap-2 border-b px-3 py-2", headerClassName)}>
+          <div className="relative flex-1">
+            <Icon
+              name="search"
+              size="sm"
+              className="absolute left-2 top-1/2 -translate-y-1/2 text-muted-foreground"
+            />
+            <Input
+              placeholder={searchPlaceholder}
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              className="pl-8"
+            />
+          </div>
+          {onCreateClick ? (
+            <button
+              type="button"
+              onClick={onCreateClick}
+              className="inline-flex items-center gap-1 rounded-md bg-primary px-3 py-1.5 text-xs font-medium text-primary-foreground transition-colors hover:bg-primary/90"
+            >
+              <Icon name="plus" size="sm" />
+              {createButtonLabel ?? "New"}
+            </button>
+          ) : null}
+        </div>
+        <div className="p-2">
+          <FileTree
+            className="border-none bg-transparent"
+            defaultExpanded={expandedPaths}
+            selectedPath={selectedPath}
+            onSelect={onSelect}
+          >
+            {renderTree(filteredTree)}
+          </FileTree>
+        </div>
+      </div>
+    )
+  }
+)
+
+FileTreeExplorer.displayName = "FileTreeExplorer"

package/components/composites/FileTreeExplorer/index.ts

@@ -0,0 +1,8 @@
+export {
+  FileTreeExplorer,
+} from "./FileTreeExplorer"
+
+export type {
+  FileTreeExplorerProps,
+  FileTreeNode,
+} from "./FileTreeExplorer"

package/components/composites/FormReports/FormReports.stories.tsx

@@ -1,5 +1,25 @@
 import type { Meta, StoryObj } from '@storybook/react'
 import { FormReports } from './FormReports'
+import type { FormReportsFieldDefinition } from './FormReportsDrawerForm'
+import type { FormReportsColumn, FormReportsEntity } from './FormReportsTable'
+
+const sampleColumns: FormReportsColumn[] = [
+  { key: "name", label: "Name" },
+  { key: "email", label: "Email" },
+  { key: "role", label: "Role" },
+]
+
+const sampleItems: FormReportsEntity[] = [
+  { id: 1, name: "Alice Smith", email: "alice@example.com", role: "Admin" },
+  { id: 2, name: "Bob Jones", email: "bob@example.com", role: "Editor" },
+  { id: 3, name: "Carol Lee", email: "carol@example.com", role: "Viewer" },
+]
+
+const sampleFields: FormReportsFieldDefinition[] = [
+  { name: "name", label: "Name", type: "text", required: true },
+  { name: "email", label: "Email", type: "text", required: true },
+  { name: "role", label: "Role", type: "select", options: [{ value: "Admin", label: "Admin" }, { value: "Editor", label: "Editor" }, { value: "Viewer", label: "Viewer" }] },
+]
 
 const meta = {
   title: 'Composites/FormReports',
@@ -14,5 +34,17 @@ export default meta
 type Story = StoryObj<typeof meta>
 
 export const Default: Story = {
-  args: {} as any,
+  args: {
+    items: sampleItems,
+    columns: sampleColumns,
+    fields: sampleFields,
+  },
+}
+
+export const Empty: Story = {
+  args: {
+    items: [],
+    columns: sampleColumns,
+    fields: sampleFields,
+  },
 }