File Tree for Svelte

The files the agent changed show as a tree of folders, each open to start with, and the file the reader picked stays marked.

Use it at the end of a turn that touched several files, so the reader sees where the changes are and opens the one they want. A folder is a Collapsible and a file is a Button, so there is no File Tree component to install in Svelte. For a single file the agent read or edited, use a Tool line instead. For a large tree the reader browses with the arrow keys, with selection and lazy loading, use a Tree View.

Installation

File Tree is a pattern. The command adds the parts it's built from, Collapsible and Button, and the code to copy is the demo's.

Anatomy

Collapsible (one per folder)
├── CollapsibleTrigger (a ghost Button)
│   ├── ChevronRightIcon
│   └── FolderIcon
└── CollapsibleContent
    └── div (ms-4)
        ├── Collapsible (a folder inside)
        └── Button (one per file)

Usage

Render the nodes recursively, and nest each folder's children in its CollapsibleContent.

<script lang="ts">
import { ChevronRightIcon, FileIcon, FolderIcon } from "lucide-svelte";
import { Button } from "@/components/ui/button";
import {
  Collapsible, CollapsibleContent, CollapsibleTrigger,
} from "@/components/ui/collapsible";
</script>

interface FileNode {
  children?: FileNode[];
  name: string;
  path: string;
  type: "file" | "folder";
}

export function FileTreeNode(props: {
  node: FileNode;
  onSelect: (path: string) => void;
}) {
  const { node, onSelect } = props;

  if (node.type === "folder") {
    return (
      <Collapsible defaultOpen>
        <CollapsibleTrigger asChild>
          <Button className="w-full justify-start" size="sm" variant="ghost">
            <ChevronRightIcon
              aria-hidden="true"
              className="transition-transform group-aria-expanded/button:rotate-90 rtl:-scale-x-100 rtl:group-aria-expanded/button:-rotate-90"
            />
            <FolderIcon aria-hidden="true" />
            {node.name}
          </Button>
        </CollapsibleTrigger>
        <CollapsibleContent>
          <div className="ms-4 flex flex-col">
            {node.children?.map((child) => (
              <FileTreeNode key={child.path} node={child} onSelect={onSelect} />
            ))}
          </div>
        </CollapsibleContent>
      </Collapsible>
    );
  }

  return (
    <Button
      className="w-full justify-start"
      onClick={() => onSelect(node.path)}
      size="sm"
      variant="ghost"
    >
      <FileIcon aria-hidden="true" />
      {node.name}
    </Button>
  );
}

The chevron turns on the trigger's own aria-expanded, through the Button's group/button, so a closed folder inside an open one keeps its chevron pointing at the name. It points to the reading end, and down once open, in both directions. The demo marks the picked file with aria-current and the accent background, and its folder buttons keep the ghost hover instead of Button's open fill. See Collapsible.

AI SDK

The tree comes from the paths the agent wrote. Collect them from the turn's tool parts (here a writeFile tool with a path input), then fold the flat paths into folders.

const paths = message.parts.flatMap((part) =>
  part.type === "tool-writeFile" && part.state === "output-available"
    ? [part.input.path]
    : []
);

/** "app/page.tsx" and "app/layout.tsx" become the app folder with two files. */
function toTree(paths: string[]): FileNode[] {
  const root: FileNode[] = [];
  for (const path of paths) {
    const names = path.split("/");
    let level = root;
    names.forEach((name, index) => {
      const at = names.slice(0, index + 1).join("/");
      if (index === names.length - 1) {
        level.push({ name, path: at, type: "file" });
        return;
      }
      let folder = level.find(
        (node) => node.type === "folder" && node.path === at
      );
      if (!folder) {
        folder = { children: [], name, path: at, type: "folder" };
        level.push(folder);
      }
      folder.children ??= [];
      level = folder.children;
    });
  }
  return root;
}

The parts' shape is the AI SDK's own on every target, so the same code reads useChat's messages in React and Chat's in Vue and Svelte.

Migrating from AI SDK Elements

AI SDK Elements is for React. In Svelte, start from the demo above: its folders and files are all there is to File Tree.

FAQ

API Reference

File Tree has no props of its own. Each folder is a Collapsible: defaultOpen and the trigger and content are Collapsible's. Each folder's trigger and each file is a Button, with variant and size from Button.