| import { useMemo } from "react"; | |
| import { useTranslation } from "react-i18next"; | |
| import { I18nKey } from "#/i18n/declaration"; | |
| import { buildFileTree } from "#/utils/file-tree"; | |
| import { TreeNode } from "./tree-node"; | |
| interface FileTreeViewProps { | |
| paths: string[]; | |
| selectedPath: string | null; | |
| onSelectFile: (path: string) => void; | |
| } | |
| export function FileTreeView({ | |
| paths, | |
| selectedPath, | |
| onSelectFile, | |
| }: FileTreeViewProps) { | |
| const { t } = useTranslation("openhands"); | |
| const root = useMemo(() => buildFileTree(paths), [paths]); | |
| if (root.children.length === 0) { | |
| return ( | |
| <div className="px-3 py-4 text-sm text-[var(--oh-muted)]"> | |
| {t(I18nKey.FILES$NO_FILES)} | |
| </div> | |
| ); | |
| } | |
| return ( | |
| <ul className="py-1 custom-scrollbar-always" data-testid="file-tree-view"> | |
| {root.children.map((child) => ( | |
| <TreeNode | |
| key={child.path} | |
| node={child} | |
| depth={0} | |
| selectedPath={selectedPath} | |
| onSelectFile={onSelectFile} | |
| /> | |
| ))} | |
| </ul> | |
| ); | |
| } | |