AI Elements
File Tree
The files the agent changed, as a folder tree.
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.
Usage
Render nodes recursively. Nest each folder's children in its UiCollapsibleContent. A component can render itself by its file name, so FileTreeNode.vue renders <FileTreeNode> for each child.
<template>
<UiCollapsible v-if="node.type === 'folder'" default-open>
<UiCollapsibleTrigger as-child>
<UiButton variant="ghost" size="sm" class="w-full justify-start">
<UiIcon
name="lucide:chevron-right"
class="transition-transform group-data-[state=open]/button:rotate-90"
/>
<UiIcon name="lucide:folder" />
{{ node.name }}
</UiButton>
</UiCollapsibleTrigger>
<UiCollapsibleContent>
<div class="ml-4 flex flex-col">
<FileTreeNode
v-for="child in node.children"
:key="child.path"
:node="child"
@select="emit('select', $event)"
/>
</div>
</UiCollapsibleContent>
</UiCollapsible>
<UiButton
v-else
variant="ghost"
size="sm"
class="w-full justify-start"
@click="emit('select', node.path)"
>
<UiIcon name="lucide:file" />
{{ node.name }}
</UiButton>
</template>
<script lang="ts" setup>
type FileNode =
| { type: "file"; name: string; path: string }
| { type: "folder"; name: string; path: string; children: FileNode[] };
defineProps<{ node: FileNode }>();
const emit = defineEmits<{ select: [path: string] }>();
</script>
See Collapsible.