8.0k New

File Tree

Previous Next

The files the agent changed, as a folder tree.

Epicenter

Local-first, open source apps

Special Sponsor 
<script lang="ts">
  import FileTreeNode, {
    type FileNode
  } from "$lib/components/file-tree/file-tree-node.svelte";
 
  const files: FileNode[] = [
    {
      type: "folder",
      name: "app",
      path: "app",
      children: [
        { type: "file", name: "layout.tsx", path: "app/layout.tsx" },
        { type: "file", name: "page.tsx", path: "app/page.tsx" }
      ]
    },
    {
      type: "folder",
      name: "components",
      path: "components",
      children: [
        {
          type: "folder",
          name: "ui",
          path: "components/ui",
          children: [
            {
              type: "file",
              name: "button.tsx",
              path: "components/ui/button.tsx"
            }
          ]
        },
        {
          type: "file",
          name: "login-form.tsx",
          path: "components/login-form.tsx"
        }
      ]
    }
  ];
 
  let selected = $state("components/ui/button.tsx");
</script>
 
<div class="flex w-full max-w-xs flex-col py-6 text-sm">
  {#each files as node (node.path)}
    <FileTreeNode {node} {selected} onSelect={(path) => (selected = path)} />
  {/each}
</div>

File Tree is the files the agent changed, shown as folders you can open. A folder is a Collapsible. A file is a Button. For a single file the agent read or edited, use a Tool line instead.

Installation

File Tree is built with the Collapsible and Button components.

pnpm dlx shadcn-svelte@latest add collapsible button

Usage

Render nodes recursively. Nest each folder's children in its Collapsible.Content.

{#if node.type === "folder"}
  <Collapsible.Root open class="group/folder">
    <Collapsible.Trigger>
      {#snippet child({ props })}
        <Button
          {...props}
          variant="ghost"
          size="sm"
          class="w-full justify-start"
        >
          <ChevronRightIcon
            class="transition-transform group-data-[state=open]/folder:rotate-90"
          />
          <FolderIcon />
          {node.name}
        </Button>
      {/snippet}
    </Collapsible.Trigger>
    <Collapsible.Content>
      <div class="ml-4 flex flex-col">
        {#each node.children as child (child.path)}
          <FileTreeNode node={child} />
        {/each}
      </div>
    </Collapsible.Content>
  </Collapsible.Root>
{/if}
<Button
  variant="ghost"
  size="sm"
  class="w-full justify-start"
  onclick={() => onSelect(node.path)}
>
  <FileIcon />
  {node.name}
</Button>

See Collapsible.