@kitnai/chat 0.7.0 → 0.8.1

package/src/components/file-tree.tsx

@@ -0,0 +1,383 @@
+import {
+  type JSX,
+  For,
+  Show,
+  splitProps,
+  createSignal,
+  createMemo,
+  mergeProps,
+} from 'solid-js';
+import { cn } from '../utils/cn';
+import {
+  ChevronRight,
+  Folder,
+  FolderOpen,
+  FileText,
+  FileImage,
+  FileType,
+  File as FileIcon,
+} from 'lucide-solid';
+
+/** A single artifact file the tree can show + the preview can load. */
+export interface FileTreeFile {
+  /** Tree label/key. Folders are built from `/`-delimited segments. */
+  path: string;
+  /** Where the preview loads it (CDN/S3/dev-server/API). */
+  url?: string;
+  /** Source for the Code tab. */
+  code?: string;
+  /** Language id for syntax highlighting (e.g. `html`, `css`, `tsx`). */
+  language?: string;
+  /** Kind — drives the icon + whether Code applies. */
+  type?: 'html' | 'pdf' | 'image' | 'other';
+}
+
+/** A folder node in the built tree. */
+export interface FileTreeFolderNode {
+  kind: 'folder';
+  /** Last path segment (the folder's display name). */
+  name: string;
+  /** Full `/`-joined path to this folder (stable key). */
+  path: string;
+  children: FileTreeNode[];
+}
+
+/** A leaf (file) node in the built tree. */
+export interface FileTreeFileNode {
+  kind: 'file';
+  name: string;
+  path: string;
+  file: FileTreeFile;
+}
+
+export type FileTreeNode = FileTreeFolderNode | FileTreeFileNode;
+
+/**
+ * Build a nested folder/file tree from a flat list of `/`-delimited paths.
+ *
+ * - `a/b/c.html` nests `c.html` under `b` under `a`.
+ * - Folders are de-duplicated and reused across files.
+ * - Insertion order is preserved per level, with folders sorted before files
+ *   and each group sorted alphabetically (case-insensitive) for a stable,
+ *   readable tree regardless of input order.
+ */
+export function buildFileTree(files: FileTreeFile[]): FileTreeNode[] {
+  const root: FileTreeFolderNode = { kind: 'folder', name: '', path: '', children: [] };
+
+  for (const file of files) {
+    const segments = file.path.split('/').filter((s) => s.length > 0);
+    if (segments.length === 0) continue;
+
+    let cursor = root;
+    // Walk/create folder nodes for every segment except the last (the file).
+    for (let i = 0; i < segments.length - 1; i++) {
+      const name = segments[i];
+      const folderPath = segments.slice(0, i + 1).join('/');
+      let next = cursor.children.find(
+        (c): c is FileTreeFolderNode => c.kind === 'folder' && c.name === name,
+      );
+      if (!next) {
+        next = { kind: 'folder', name, path: folderPath, children: [] };
+        cursor.children.push(next);
+      }
+      cursor = next;
+    }
+
+    const leafName = segments[segments.length - 1];
+    // De-dupe by path: last write wins (a re-declared file updates its node).
+    const existing = cursor.children.find(
+      (c): c is FileTreeFileNode => c.kind === 'file' && c.name === leafName,
+    );
+    if (existing) {
+      existing.file = file;
+    } else {
+      cursor.children.push({ kind: 'file', name: leafName, path: file.path, file });
+    }
+  }
+
+  sortTree(root.children);
+  return root.children;
+}
+
+/** Folders first, then files; each group alphabetical (case-insensitive). */
+function sortTree(nodes: FileTreeNode[]): void {
+  nodes.sort((a, b) => {
+    if (a.kind !== b.kind) return a.kind === 'folder' ? -1 : 1;
+    return a.name.localeCompare(b.name, undefined, { sensitivity: 'base' });
+  });
+  for (const n of nodes) if (n.kind === 'folder') sortTree(n.children);
+}
+
+/** Flatten the visible (expanded-aware) leaves in render order — used for keyboard nav. */
+function flattenVisible(
+  nodes: FileTreeNode[],
+  isOpen: (path: string) => boolean,
+  out: FileTreeNode[] = [],
+): FileTreeNode[] {
+  for (const n of nodes) {
+    out.push(n);
+    if (n.kind === 'folder' && isOpen(n.path)) flattenVisible(n.children, isOpen, out);
+  }
+  return out;
+}
+
+function iconFor(type: FileTreeFile['type']) {
+  switch (type) {
+    case 'image':
+      return FileImage;
+    case 'pdf':
+      return FileType;
+    case 'html':
+      return FileText;
+    default:
+      return FileIcon;
+  }
+}
+
+export interface FileTreeProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, 'onSelect'> {
+  /** Flat file list; folders are derived from `/`-delimited paths. */
+  files: FileTreeFile[];
+  /** Currently-selected file path (highlighted). */
+  activeFile?: string;
+  /** Called with a file's path when the user selects it. */
+  onSelect?: (path: string, file: FileTreeFile) => void;
+  /** Folder paths expanded by default. When omitted, all folders start open. */
+  defaultExpanded?: string[];
+}
+
+/**
+ * `FileTree` — a collapsible, keyboard-navigable file explorer built from a flat
+ * list of `/`-delimited paths. ARIA `tree`/`treeitem`/`group`. Selecting a file
+ * calls `onSelect(path, file)`.
+ */
+export function FileTree(props: FileTreeProps): JSX.Element {
+  const merged = mergeProps({ files: [] as FileTreeFile[] }, props);
+  const [local, rest] = splitProps(merged, [
+    'files',
+    'activeFile',
+    'onSelect',
+    'defaultExpanded',
+    'class',
+  ]);
+
+  const tree = createMemo(() => buildFileTree(local.files));
+
+  // Open-state semantics differ by mode so the default is robust to files that
+  // arrive AFTER mount (the element sets `files` as a property post-construction):
+  //   - explicit `defaultExpanded` → an OPEN set (only listed folders open).
+  //   - no `defaultExpanded` (default = all open) → a CLOSED set: every folder is
+  //     open unless the user explicitly collapsed it, so late-discovered nested
+  //     folders are open by default without re-seeding on each `files` change.
+  const defaultAllOpen = () => local.defaultExpanded === undefined;
+  const [openSet, setOpenSet] = createSignal<Set<string>>(
+    new Set(local.defaultExpanded ?? []),
+    { equals: false },
+  );
+  const [closedSet, setClosedSet] = createSignal<Set<string>>(new Set(), { equals: false });
+
+  const isOpen = (path: string) =>
+    defaultAllOpen() ? !closedSet().has(path) : openSet().has(path);
+
+  const toggle = (path: string) => {
+    if (defaultAllOpen()) {
+      setClosedSet((prev) => {
+        const next = new Set(prev);
+        if (next.has(path)) next.delete(path);
+        else next.add(path);
+        return next;
+      });
+    } else {
+      setOpenSet((prev) => {
+        const next = new Set(prev);
+        if (next.has(path)) next.delete(path);
+        else next.add(path);
+        return next;
+      });
+    }
+  };
+
+  const [focusedPath, setFocusedPath] = createSignal<string | undefined>();
+
+  const selectFile = (node: FileTreeFileNode) => {
+    setFocusedPath(node.path);
+    local.onSelect?.(node.path, node.file);
+  };
+
+  const onKeyDown = (e: KeyboardEvent, node: FileTreeNode) => {
+    const visible = flattenVisible(tree(), isOpen);
+    const idx = visible.findIndex((n) => n.path === node.path && n.kind === node.kind);
+    const focus = (n: FileTreeNode | undefined) => {
+      if (!n) return;
+      setFocusedPath(n.path);
+      const sel = `[data-tree-path="${cssEscape(n.path)}"][data-tree-kind="${n.kind}"]`;
+      (e.currentTarget as HTMLElement)
+        .closest('[role="tree"]')
+        ?.querySelector<HTMLElement>(sel)
+        ?.focus();
+    };
+    switch (e.key) {
+      case 'ArrowDown':
+        e.preventDefault();
+        focus(visible[idx + 1]);
+        break;
+      case 'ArrowUp':
+        e.preventDefault();
+        focus(visible[idx - 1]);
+        break;
+      case 'ArrowRight':
+        e.preventDefault();
+        if (node.kind === 'folder') {
+          if (!isOpen(node.path)) toggle(node.path);
+          else focus(visible[idx + 1]);
+        }
+        break;
+      case 'ArrowLeft':
+        e.preventDefault();
+        if (node.kind === 'folder' && isOpen(node.path)) {
+          toggle(node.path);
+        }
+        break;
+      case 'Enter':
+      case ' ':
+        e.preventDefault();
+        if (node.kind === 'folder') toggle(node.path);
+        else selectFile(node);
+        break;
+    }
+  };
+
+  return (
+    <div
+      role="tree"
+      aria-label="Files"
+      class={cn('text-sm select-none', local.class)}
+      {...rest}
+    >
+      <For each={tree()}>
+        {(node) => (
+          <TreeNode
+            node={node}
+            depth={0}
+            isOpen={isOpen}
+            toggle={toggle}
+            activeFile={() => local.activeFile}
+            focusedPath={focusedPath}
+            onSelectFile={selectFile}
+            onKeyDown={onKeyDown}
+          />
+        )}
+      </For>
+    </div>
+  );
+}
+
+interface TreeNodeProps {
+  node: FileTreeNode;
+  depth: number;
+  isOpen: (path: string) => boolean;
+  toggle: (path: string) => void;
+  activeFile: () => string | undefined;
+  focusedPath: () => string | undefined;
+  onSelectFile: (node: FileTreeFileNode) => void;
+  onKeyDown: (e: KeyboardEvent, node: FileTreeNode) => void;
+}
+
+function TreeNode(props: TreeNodeProps): JSX.Element {
+  const node = () => props.node;
+  const open = () => props.node.kind === 'folder' && props.isOpen(props.node.path);
+  const isActive = () =>
+    props.node.kind === 'file' && props.activeFile() === props.node.path;
+  // Roving tabindex: the focused row (or the active file as a fallback) is the
+  // single tab stop into the tree.
+  const tabIndex = () => {
+    const focused = props.focusedPath();
+    if (focused !== undefined) return props.node.path === focused ? 0 : -1;
+    return isActive() ? 0 : -1;
+  };
+
+  const indent = () => ({ 'padding-left': `${props.depth * 12 + 8}px` });
+
+  return (
+    <Show
+      when={props.node.kind === 'folder'}
+      fallback={
+        <div
+          role="treeitem"
+          aria-selected={isActive()}
+          data-tree-path={props.node.path}
+          data-tree-kind="file"
+          tabindex={tabIndex()}
+          class={cn(
+            'flex items-center gap-1.5 rounded-md py-1 pr-2 cursor-pointer outline-none',
+            'focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset',
+            isActive()
+              ? 'bg-primary/10 text-foreground font-medium'
+              : 'text-muted-foreground hover:bg-muted hover:text-foreground',
+          )}
+          style={indent()}
+          onClick={() => props.onSelectFile(props.node as FileTreeFileNode)}
+          onKeyDown={(e) => props.onKeyDown(e, props.node)}
+        >
+          <span class="w-3.5 shrink-0" />
+          {(() => {
+            const Icon = iconFor((props.node as FileTreeFileNode).file.type);
+            return <Icon size={14} class="shrink-0 opacity-70" aria-hidden="true" />;
+          })()}
+          <span class="truncate">{node().name}</span>
+        </div>
+      }
+    >
+      <div role="none">
+        <div
+          role="treeitem"
+          aria-expanded={open()}
+          data-tree-path={props.node.path}
+          data-tree-kind="folder"
+          tabindex={tabIndex()}
+          class={cn(
+            'flex items-center gap-1.5 rounded-md py-1 pr-2 cursor-pointer outline-none text-foreground',
+            'hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset',
+          )}
+          style={indent()}
+          onClick={() => props.toggle(props.node.path)}
+          onKeyDown={(e) => props.onKeyDown(e, props.node)}
+        >
+          <ChevronRight
+            size={14}
+            class={cn('shrink-0 transition-transform opacity-70', open() && 'rotate-90')}
+            aria-hidden="true"
+          />
+          {(() => {
+            const Icon = open() ? FolderOpen : Folder;
+            return <Icon size={14} class="shrink-0 text-primary/80" aria-hidden="true" />;
+          })()}
+          <span class="truncate font-medium">{node().name}</span>
+        </div>
+        <Show when={open()}>
+          <div role="group">
+            <For each={(props.node as FileTreeFolderNode).children}>
+              {(child) => (
+                <TreeNode
+                  node={child}
+                  depth={props.depth + 1}
+                  isOpen={props.isOpen}
+                  toggle={props.toggle}
+                  activeFile={props.activeFile}
+                  focusedPath={props.focusedPath}
+                  onSelectFile={props.onSelectFile}
+                  onKeyDown={props.onKeyDown}
+                />
+              )}
+            </For>
+          </div>
+        </Show>
+      </div>
+    </Show>
+  );
+}
+
+/** Minimal CSS.escape fallback for attribute-selector building (paths with `/`, `.`). */
+function cssEscape(s: string): string {
+  if (typeof CSS !== 'undefined' && typeof CSS.escape === 'function') return CSS.escape(s);
+  return s.replace(/["\\]/g, '\\$&');
+}

package/src/components/file-upload.stories.tsx

@@ -3,6 +3,7 @@ import { fn } from 'storybook/test';
 import { createSignal, For } from 'solid-js';
 import { FileUpload, FileUploadTrigger, FileUploadContent } from './file-upload';
 import { Upload } from 'lucide-solid';
+import { componentDescription } from '../stories/docs/element-controls';
 
 const meta = {
   title: 'Components/FileUpload',
@@ -12,14 +13,12 @@ const meta = {
     layout: 'padded',
     docs: {
       controls: { exclude: ['use:eventListener'] },
-      description: {
-        component: [
-          'A headless file-upload root that handles window-wide drag-and-drop plus a hidden file input, composed with `FileUploadTrigger` (opens the picker) and `FileUploadContent` (full-screen drop overlay).',
-          '**When to use:** to let users attach files to a chat — via a button click or by dragging files anywhere onto the page.',
-          '**How to use:** wrap a `FileUploadTrigger` and optional `FileUploadContent` in `FileUpload`, and read selected files from `onFilesAdded`. Set `multiple`, `accept`, or `disabled` as needed.',
-          '**Placement:** in the prompt input area or composer toolbar where attachments are added.',
-        ].join('\n\n'),
-      },
+      description: componentDescription([
+        'A headless file-upload root that handles window-wide drag-and-drop plus a hidden file input, composed with `FileUploadTrigger` (opens the picker) and `FileUploadContent` (full-screen drop overlay).',
+        '**When to use:** to let users attach files to a chat — via a button click or by dragging files anywhere onto the page.',
+        '**How to use:** wrap a `FileUploadTrigger` and optional `FileUploadContent` in `FileUpload`, and read selected files from `onFilesAdded`. Set `multiple`, `accept`, or `disabled` as needed.',
+        '**Placement:** in the prompt input area or composer toolbar where attachments are added.',
+      ]),
     },
   },
   argTypes: {