Enhanced notesPro

Meeting notes after the assistant reads the transcript: your lines stay in ink, what it added sits a gray step back, editing an added line makes it yours, and every added line jumps to the moment it came from.

Markdown

On this page

ProRough notes from an offline sync review fill in from the transcript; edit a gray line and it turns ink, a timestamp jumps to its moment.

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/enhanced-notes

Usage

tsx

import { EnhancedNotes } from "@/components/ui/chatcn/pro/enhanced-notes"

<EnhancedNotes
  title="Offline sync rollout review"
  meta="Tue 3 Nov · 38 min"
  sections={sections}
  status={enhancing ? "enhancing" : "done"}
  onLineChange={saveLine}
  onSource={(line) => seek(line.at)}
/>

Provenance is carried twice: by the gray step and by the bullet, filled for yours and a ring for added lines, so it survives grayscale, forced colors and screen readers. Lines are edited in place; once an added line's text changes it turns ink and reports edited. Pair it with the free transcript and pass the matching segment as activeId to scroll it into view. Show only mine filters the additions out without losing them.

Examples

States

ProEmpty during the meeting, loading, an error that keeps your notes, only mine, read only and long content.

Props

Prop	Type	Notes
`title`, `meta`	`string`, `ReactNode`	Heading and the line under it
`sections`	`{ id, title, lines: NoteLine[] }[]`	The notes
`NoteLine`	`{ id, text, author: you \| ai, at?, depth?, edited? }`	`at` in ms shows the source button
`status`	`idle \| loading \| enhancing \| done \| error`	`enhancing` shows the caret on the newest line
`error`, `onRetry`	`ReactNode`, `() => void`	Your notes stay visible under the error
`onLineChange`	`(id, text) => void`	Fires on Enter or blur when the text changed
`onSource`, `activeLineId`	`(line) => void`, `string`	Source button and its line
`showAdded`, `defaultShowAdded`, `onShowAddedChange`	`boolean`	Show only mine, controlled or not
`disabled`	`boolean`	Read only; sources still play
`empty`	`ReactNode`	Replaces the empty hint

Keyboard

Key	Action
Tab	Moves through lines and their source buttons
Enter	Saves the line being edited
Escape	Reverts the line being edited
Enter or Space on a timestamp	Jumps to the source moment

Accessibility

Each line is a labelled textbox: Your note or Added from the transcript, so provenance is spoken, not only seen.
Source buttons say the time they play and are pressed while their line is active.
The article is busy while loading or enhancing; the toggle is a pressed state button.
Timestamps are always visible on touch screens, where there is no hover.

Motion

Added lines appear whole, never word by word, with the kit's streaming caret on the newest one. Source buttons fade in on hover over 150 ms. Editing changes color instantly, since it is typing.