Knowledge workspace appPro

A knowledge workspace on scripted fixtures: sources with indexing and connected drives, a chat whose answers cite the exact passage, flag claims no source backs and show their grounding and retrieval, a two host audio overview you can cut into, flashcards, a quiz and a briefing, and a mind map and graph of the sources.

Markdown

On this page

ProA psychology student's notebook the week before the memory exam. Open a citation to see its passage beside the chat, ask a follow up and watch the searches tick off, then try the audio overview, flashcards and mind map.

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/knowledge-workspace-app

The template installs as a folder under components/chatcn/pro/knowledge-workspace-app/: the app, the rail, the chat, the side panel, sources, study tools, the map and the data model.

Usage

tsx

import { KnowledgeWorkspaceApp } from "@/components/chatcn/pro/knowledge-workspace-app/knowledge-workspace-app"

<KnowledgeWorkspaceApp
  notebook="Sleep and memory"
  sources={sources}
  respond={answerFromSources}
  overview={overview}
  study={study}
  mindMap={mindMap}
/>

Give it a height: it fills its parent. Sources carry their parsed text page by page in the PdfDocument shape, so a citation opens on its exact passage. respond receives the question and the ids of the selected sources and returns Markdown where [2](#cite-2) is a citation and [the words](#claim-0) flags a claim no source backs, plus the searches, grounding and retrieval behind it. Every Pro part reads plain data, so your own pipeline maps onto it directly.

Examples

Citation open beside the chat

Citation 3 open in the review with every citation into the same source numbered on the page. Chunks shows how the index split the source, and Show retrieval swaps the panel for the Pro RetrievalDebugger.

ProCitation 3 open in the review: the passage marked, the other citations into the same source numbered, the chunks one tab away and the retrieval behind the answer.

Flashcards, quiz and briefing

Flashcards turn on Space and grade on 1 and 2; Again brings a card back three cards later. The quiz explains every answer with where it comes from, and the briefing sits beside the PDF it cites in the Pro CitedSpanPdf.

ProStudy tools made from the selected sources: flashcards where Again brings a card back three cards later, a quiz that explains each answer, and a briefing beside the PDF it cites.

On a phone

Below 768 px the rail moves into a drawer, the first tap on a citation opens its card and the second opens the passage as a full screen sheet. Pass layout="mobile" to force it inside a device frame.

ProThe same notebook at phone width: views in a drawer, citations that open as a full screen sheet and 44 px targets.

States

A notebook with no sources, sources before the first question, no source selected, an answer that failed with a retry, and every view loading with its layout held.

ProA new notebook, sources before the first question, no source selected, an answer that failed with a retry, and every view loading.

What is inside

The shell is the free ChatLayout: the rail collapses to icons with Cmd+B, the source and retrieval panels are its resizable side panel.
Chat: the free Conversation, Message, Markdown, PromptInput, Suggestions and FollowUps. Each answer shows the Pro QueryRewrite as its searches tick off, streams with free Citation numbers that open the passage, marks unbacked claims with the Pro UnsupportedClaim, and closes with SourceDocument chips and the Pro GroundingMeter.
Side panel: the Pro PdfViewer with every citation marked, the Pro ChunkInspector with the chunk that holds the passage selected, or the Pro RetrievalDebugger for the answer.
Sources: the Pro NotebookSources with select all, the Pro IngestionPipeline while new files are read, and the Pro SourceSyncGrid for connected drives. A source turns ready and selected when it finishes.
Audio overview: the Pro AudioOverview with two hosts, captions and Ask a question, plus a note when the selected sources change after it was made.
Study: a briefing in the Pro CitedSpanPdf, flashcards with Again and Got it, and a quiz with explanations and a score that lists what to go over.
Map: the Pro MindMap, where choosing a topic asks the chat about it, and the Pro KnowledgeGraph.

Props

Prop	Type	Notes
`notebook`, `detail`	`string`	At the top of the rail
`sources`	`KwSource[]`	With their parsed pages. Processing and failed sources say so
`defaultSelected`	`string[]`	Sources answers come from. Default every ready one
`respond`	`KwRespond`	Answers a question from the selected sources
`thread`, `summary`, `suggestions`		Earlier answers, and what an empty chat shows
`ingest`, `onAddSource`	`IngestionFile[]`, `() => …`	Files being read, and Add source
`connections`	`SyncSource[]`	Connected drives and libraries
`overview`, `onOverviewAsk`	`KwOverview`, `(q, at) => turns`	The audio overview
`study`	`KwStudy`	Briefing, flashcards and quiz
`mindMap`, `graph`	`MindMapNode`, `{ entities, relations }`	The map view
`defaultView`, `defaultStudyTab`, `defaultCitation`		Where the app opens
`loading`	`boolean`	Every view shows its loading state
`account`	`{ name, plan }`	The account menu at the foot of the rail
`layout`	`"auto" \| "desktop" \| "mobile"`	Force the phone layout inside a device frame

Keyboard

Key	Action
`Cmd+B` or `Ctrl+B`	Collapse or expand the rail
`Cmd+/` or `Ctrl+/`	Every shortcut, grouped by area
`Enter`, `Shift+Enter`	Ask, or add a line
`Escape`	Stop the answer, or close the source panel
`Space`, `1`, `2`	Turn a flashcard, then Again or Got it

Accessibility

Landmarks from the layout, a skip link, a named navigation with aria-current, and one heading level 1 per view.
Finished answers are announced once, never token by token. Selecting sources, a deck's progress and quiz results are announced politely.
Every citation is a button named with its source; a flagged claim opens its note on Enter. Grounding pairs its hatching with words.
Quiz options are native radios in a fieldset with the question as its legend; right and wrong pair their tint with an icon and a word.

Motion

Answers append with no effect on the words. Searches tick off as they finish, then collapse to one line.
Citation cards open from their number; the source panel slides 16 px on the panel curve, a sheet on phones.
Moving between views and turning a card is instant: both are used all day and from the keyboard. Reduced motion is handled by each composed part.