Rich prompt input

Installation

Built on TipTap 3 with only what a prompt needs: paragraphs, text and three inline atoms (mention, command, variable). No StarterKit, no marks, no extra extensions; @tiptap/core and @tiptap/pm come along as peers of @tiptap/react (install them yourself if your package manager does not add peers). Undo and redo come from a small snapshot history instead of the full ProseMirror plugin.

Usage

import {
  PromptInputActions,
  PromptInputSubmit,
  PromptInputToolbar,
} from "@/components/ui/chatcn/prompt-input"
import {
  RichPromptInput,
  RichPromptInputEditor,
} from "@/components/ui/chatcn/rich-prompt-input"

<RichPromptInput
  mentions={files}
  commands={commands}
  onSubmit={({ text, mentions, commands }) => send(text, { mentions, commands })}
  status={status}
  onStop={stop}
>
  <RichPromptInputEditor placeholder="Ask anything, @ to mention, / for commands…" />
  <PromptInputToolbar>
    <PromptInputActions>
      <PromptInputSubmit />
    </PromptInputActions>
  </PromptInputToolbar>
</RichPromptInput>

RichPromptInput renders a PromptInput underneath, so every slot and control from it works unchanged: PromptInputHeader, PromptInputAttachments, PromptInputToolbar, PromptInputAttachButton, PromptInputButton and PromptInputSubmit. Only the text area changes: use RichPromptInputEditor in place of PromptInputTextarea.

The submitted value

{
  text: "Ask @agent:reviewer to compare @src/server/runs.ts with @src/lib/pagination.ts",
  mentions: [
    { id: "a-reviewer", kind: "agent", label: "Reviewer", value: "agent:reviewer" },
    { id: "f-runs", kind: "file", label: "runs.ts", value: "src/server/runs.ts" },
    { id: "f-pagination", kind: "file", label: "pagination.ts", value: "src/lib/pagination.ts" },
  ],
  commands: [],          // [{ name: "review", args: "412" }] for "/review 412"
  variables: [],         // names still waiting for a value
  segments: [...],       // ordered text and chips, to render the sent message
  json: {...},           // the editor document, for drafts
}

text is model-ready: mentions become @value (the path for files), commands /name, unfilled variables {{name}}. Render the sent message from segments with InlineChip so it matches the editor. Save json and pass it back as defaultValue to restore a draft.

Examples

Prompt variables

Write {{name}} in defaultValue, a command's template, or insertTemplate. The first variable is selected after insertion; typing replaces it, Tab and Shift+Tab move between the rest. With unfilled variables, Enter selects the first one instead of sending (turn off with requireVariables={false}).

Paste as attachment

Set pasteTextAsFileAt and onFiles, exactly as on PromptInput: a paste that long becomes Pasted text.txt. Images pasted or dropped become files too.

Async mentions

Pass a function to mentions to search on the server. It gets the query and returns items or a promise. The latest request wins, earlier results stay until it lands, and a searching row shows meanwhile. Results are shown in your order, with the matched characters still emphasized.

States

Buttons that open the menus

function MentionButton() {
  const rich = useRichPromptInput()
  return (
    <PromptInputButton tooltip="Mention a file, agent or person" onClick={() => rich.openMenu("@")}>
      <AtSignIcon />
    </PromptInputButton>
  )
}

Props

Everything else comes from PromptInput and behaves the same: status, onStop, disabled, variant, submitOn, clearOnSubmit, onFiles, onFilesRejected, accept, maxFileSize, maxFiles, pasteTextAsFileAt and hasContent.

Keyboard

Accessibility

• The editor is a labelled multiline textbox with aria-autocomplete="list". While a menu is open it carries aria-expanded, aria-controls and aria-activedescendant, so screen readers follow the active option without focus leaving the text.
• Chips read as their kind and name ("File: runs.ts", "Command: /review", "Variable: symptom").
• Enter never sends while an IME is composing, including the Safari confirm keystroke.
• Blocked sends with unfilled variables are announced in a polite live region with what to do next.
• Type is at least 16 px on touch screens so iOS never zooms in.

Motion

• Menus open from typing and are used all day, so they appear, filter and close without animation. The active row moves instantly.
• The menu picks a side of the caret once per opening and keeps it, so it never jumps across the text while results shrink.
• Send to Stop is the SendButton morph from PromptInput. Nothing else moves.