Knowledge base

Project files the assistant reads in every chat, each with its indexing state: queued, indexing with progress, ready with the tokens it adds, or failed with the reason and Retry.

Markdown

On this page

Files move from queued to indexing to ready; a password-protected PDF fails with the fix and Retry.

Installation

$ pnpm dlx shadcn@latest add https://chatcn.dev/r/knowledge-base.json

Usage

tsx

import { KnowledgeBase } from "@/components/ui/chatcn/knowledge-base"

<KnowledgeBase
  files={files}
  capacity={200_000}
  accept=".pdf,.md,.csv,.docx"
  onAdd={(list) => upload(list)}
  onRemove={(id) => remove(id)}
  onRetry={(id) => reindex(id)}
/>

Examples

Empty

No files yet: drop anywhere or pick from disk.

Props

Prop	Type	Notes
`files`	`KnowledgeFile[]`	`{ id, name, status, size?, progress?, tokens?, error?, detail? }`
`onAdd`	`(files: File[]) => void`	Add files and drop. Omit to hide both
`onRemove`, `onRetry`	`(id) => void`
`accept`, `maxSize`		Checked while dragging, before the drop
`capacity`	`number`	Tokens the project holds. Shows how much ready files use
`title`, `description`, `hint`	`ReactNode`

Keyboard

Key	Action
`Tab`	Move to Add files, Retry and Remove
`Enter`, `Space`	Open the file picker or act

Accessibility

Indexing progress is a progressbar named after the file. Capacity is a meter with its percentage as text.
The summary (12 files, 3 indexing) is a polite live region. Dragging is never the only way in: Add files is always there.

Motion

Progress fills linearly. Indexing to ready swaps with the 150 ms blur crossfade, as one object changing.
The drop overlay fades in over 150 ms and says before the drop if files will be refused.