Chat File Tree

Рекурсивное дерево файлов/папок с выбором и индентацией.

Выбрано: apps/ui/registry/default/ui/chat-message.tsx

"use client";

import { useState } from "react";
import {
  ChatFileTree,
  ChatFileTreeFile,
  ChatFileTreeFolder,
} from "@/components/ui/chat-file-tree";

export default function Particle() {
  const [selected, setSelected] = useState<string>(
    "apps/ui/registry/default/ui/chat-message.tsx",
  );

  return (
    <div className="flex w-full max-w-md flex-col gap-3 p-4">
      <ChatFileTree
        onSelect={(node) => setSelected(node.id)}
        selectedId={selected}
      >
        <ChatFileTreeFolder name="apps">
          <ChatFileTreeFolder name="ui" level={1}>
            <ChatFileTreeFolder name="registry" level={2}>
              <ChatFileTreeFolder name="default" level={3}>
                <ChatFileTreeFolder name="ui" level={4}>
                  <ChatFileTreeFile
                    badge="M"
                    id="apps/ui/registry/default/ui/chat-message.tsx"
                    level={5}
                    name="chat-message.tsx"
                  />
                  <ChatFileTreeFile
                    id="apps/ui/registry/default/ui/chat-prompt-input.tsx"
                    level={5}
                    name="chat-prompt-input.tsx"
                  />
                  <ChatFileTreeFile
                    badge="A"
                    id="apps/ui/registry/default/ui/chat-snippet.tsx"
                    level={5}
                    name="chat-snippet.tsx"
                  />
                </ChatFileTreeFolder>
              </ChatFileTreeFolder>
            </ChatFileTreeFolder>
          </ChatFileTreeFolder>
        </ChatFileTreeFolder>
      </ChatFileTree>
      <p className="text-muted-foreground text-sm">
        Выбрано:{" "}
        <span className="font-mono text-foreground text-xs">{selected}</span>
      </p>
    </div>
  );
}

Установка


pnpm dlx shadcn@latest add @oracul/chat-file-tree

Использование

Композиция вручную

import {
  ChatFileTree,
  ChatFileTreeFile,
  ChatFileTreeFolder,
} from "@/components/ui/chat-file-tree";
 
<ChatFileTree onSelect={(node) => openFile(node.id)}>
  <ChatFileTreeFolder name="app" defaultOpen>
    <ChatFileTreeFile id="app/page.tsx" name="page.tsx" level={1} />
    <ChatFileTreeFolder name="components" level={1}>
      <ChatFileTreeFile id="app/components/button.tsx" name="button.tsx" level={2} />
    </ChatFileTreeFolder>
  </ChatFileTreeFolder>
</ChatFileTree>

Из массива данных

import { ChatFileTree, ChatFileTreeFolder, type ChatFileTreeNode } from "@/components/ui/chat-file-tree";
 
const tree: ChatFileTreeNode[] = [
  {
    id: "app",
    name: "app",
    children: [
      { id: "app/page.tsx", name: "page.tsx" },
      {
        id: "app/components",
        name: "components",
        children: [{ id: "app/components/button.tsx", name: "button.tsx" }],
      },
    ],
  },
];
 
<ChatFileTree onSelect={(n) => openFile(n.id)}>
  <ChatFileTreeFolder data={tree[0].children!} name={tree[0].name} />
</ChatFileTree>

Выбор

selectedId / defaultSelectedId для controlled / uncontrolled выбора.
onSelect(node) — срабатывает только при клике на файл (не на папку).
Выбранный файл получает data-state="selected" и подсветку фона.

На этой странице

Установка Использование Композиция вручную Из массива данных Выбор