File libraryPro
The files behind a knowledge base: type, size, index state and how often chats cite them.
On this page
Installation
Usage
import { FileLibrary } from "@/components/ui/chatcn/pro/file-library"
<FileLibrary files={files} onAction={(action, ids) => run(action, ids)} />Grid shows each file as a plain page with its type set in mono, so a library of PDFs and sheets reads by shape rather than by colored tiles. Names truncate in the middle of the stem and always keep the extension. Selecting any file swaps the toolbar for bulk actions in the same footprint. The detail drawer slides in from the end edge inside the library, says why a file failed to index and how to fix it, and offers the same actions for that one file.
Examples
States
Props
| Prop | Type | Notes |
|---|---|---|
files | LibraryFile[] | { id, name, kind?, size, state, progress?, error?, chats, chunks?, addedAt?, addedBy?, lastUsedAt? } |
view, defaultView, onViewChange | "grid" | "list" | Default grid |
selected, defaultSelected, onSelectedChange | string[] | Bulk selection |
onAction | ("reindex" | "download" | "remove", ids) => void | Adds the actions |
actions | LibraryAction[] | Which actions to offer |
openId, onOpenChange | string | null | Controlled drawer |
loading, disabled | boolean | Request and read only states |
now, locale | number, string | Relative times, sizes and numbers |
labels | Partial<FileLibraryLabels> | Every string |
Keyboard
| Key | Action |
|---|---|
| Space | Toggle the focused checkbox |
| Enter | Open the focused file in the drawer |
| Escape | Close the drawer |
| Arrow keys | Switch between grid and list in the view toggle |
Accessibility
- Checkboxes are native and named with the file; select all goes indeterminate for a partial selection.
- The selection count is announced politely. The drawer is a non modal dialog named with the file and takes focus when it opens.
- Index state is always a word with a glyph; indexing shows its percentage.
Motion
The drawer slides in from the end edge in 280 ms and leaves in 200 ms. With reduced motion it only fades. Grid selection rings and the indexing bar change with short transitions; nothing scales or lifts on hover.