Doc chat splitPro

The document on the left, the chat on the right. A selection in the document becomes a quote chip in the composer, quotes point back to their passage, and answers insert into the document after the passage they are about.

Markdown

On this page

ProA spec beside a chat: select a sentence to quote it, ask, and insert the answer after the passage it is about.

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/doc-chat-split

Usage

tsx

import { DocChatSplit } from "@/components/ui/chatcn/pro/doc-chat-split"

<DocChatSplit
  title="Conflict screen for offline edits"
  blocks={blocks}
  messages={messages}
  status={status}
  onSend={({ text, context }) => ask(text, context)}
  onInsert={(message, afterBlockId) => insertAfter(afterBlockId, message.text)}
  onKeepInsert={keep}
  onUndoInsert={undo}
/>

Select text in the document and an Ask about this button appears over the selection; it, or Mod+L, attaches the passage as a quote chip. Pointing at a chip, in the composer or in the thread, marks its passage in the margin and tints it. Answers flagged insertable get Insert in document, which calls onInsert with the block of the last quote; inserted blocks keep an accent margin and Keep or Undo until you decide. The composer is the free prompt-input, so Enter, Shift+Enter, IME and Stop behave as everywhere else.

Examples

States

ProA quote waiting in an empty chat, an inserted answer waiting to be kept, an error with a fix and disabled.

Props

Prop	Type	Notes
`title`, `meta`	`string`, `ReactNode`	The document heading
`blocks`	`{ id, kind?, text, inserted? }[]`	The document
`messages`	`{ id, role, text, context?, insertable?, streaming? }[]`	The thread
`context`, `defaultContext`, `onContextChange`	`DocQuote[]`	Quote chips in the composer
`onSend`	`({ text, context }) => void`	Clears the chips after sending
`onInsert`, `onKeepInsert`, `onUndoInsert`	callbacks	Answers going into the document
`status`, `onStop`	`idle \| submitting \| streaming \| error`	Send becomes Stop while streaming
`error`, `onRetry`	`ReactNode`, `() => void`	The question and quotes are kept
`disabled`	`boolean`	Read only: no quoting, sending or inserting

Keyboard

Key	Action
Mod+L	Quotes the selected text in the composer
Enter	Sends; Shift+Enter adds a line
Escape	Stops a streaming answer

Accessibility

The document is an article and the chat a labelled region; quote chips have a named remove button.
Quoting and inserting are announced in a polite live region.
Margin marks are a second cue beside the tint, so linked passages read without color.

Motion

The margin mark and passage tint fade over 150 ms when a quote is pointed at. The Ask button appears with the selection and does not animate. Answers stream with the kit's caret and no per word effects.