# Prompt input (Notchset): prompt.md (v2.0.0) - id: `prompt-input` · version 2.0.0 · component · free - category: AI interfaces - build: one set of files for every shadcn style - install: `npx shadcn@latest add https://notchset.dev/r/prompt-input.json` - npm dependencies: lucide-react@^1 - registry dependencies: utils, https://notchset.dev/r/notchset-foundation.json, @notchset/button, @notchset/icon-button - docs: https://notchset.dev/components/prompt-input - The install command carries everything this item needs (files, CSS, tokens, npm and registry dependencies). Prefer it to copying source by hand. Enter sends, Shift+Enter makes a new line, an input method's keys stay its own. While a reply runs it is Stop and a new message waits with Send now. Dictation shows your words live. Microphone refused, offline or at the plan's limit, the draft is kept and the line says why.. ## Build it - Stack: React 18.3 or 19, TypeScript, Tailwind CSS v4 utility classes on the foundation's roles, a components.json (imports use its aliases). - Packages: `lucide-react@^1`. - Files: `components/ui/notchset/prompt-input.tsx`. - Registry dependencies, installed with it automatically: shadcn `utils` (cn), `notchset-foundation`, `button`, `icon-button`. - Builds: one set of files, the same for every shadcn style. - Exports to keep: `PromptInput`, and every exported type. - CSS: the install adds the notchset foundation (its roles, keyframes and motion switch, reading your shadcn tokens for colour) to your global stylesheet once. Nothing to import by hand. - Re-running `add` (or `--overwrite`) re-applies those rules: put overrides in your own CSS, never in the installed rules. - Colours: every part reads the foundation's roles (`--ns-canvas`, `--ns-ink`, `--ns-line`, `--ns-signal` …), which read your shadcn tokens (`--background`, `--foreground`, `--border`, `--destructive` …), plus the optional `--success` and `--warning`. Retheme on `:root` or any container; never add Tailwind colour classes inside the component. - This item reads `--ns-bezel`, `--ns-font-body`, `--ns-ink`, `--ns-ink-2`, `--ns-ink-3`, `--ns-radius`, `--ns-radius-xl`, `--ns-raised`, `--ns-selected`, `--ns-signal`, `--ns-text-body`, `--ns-text-control`, `--ns-text-meta`, `--ns-text-small`, `--ns-time-color`, `--ns-weight-medium`. - Retune it (on any ancestor) with the foundation's roles and hooks: `--ns-bad`, `--ns-bad-ink`, `--ns-band`, `--ns-band-edge`, `--ns-band-grade`, `--ns-band-optimal`, `--ns-beat`, `--ns-bezel`, `--ns-canvas`, `--ns-cat-1`, `--ns-cat-2`, `--ns-cat-3`, `--ns-cat-4`, `--ns-cat-5`, `--ns-cat-6`, `--ns-check`, `--ns-chip`, `--ns-control`, `--ns-control-pad`, `--ns-control-sm`, `--ns-deep`, `--ns-deep-ink`, `--ns-deep-ink-2`, `--ns-deep-line`, `--ns-dialog`, `--ns-dialog-lg`, `--ns-dialog-sm`, `--ns-ease`, `--ns-ease-in`, `--ns-ease-panel`, `--ns-ease-pop`, `--ns-field`, `--ns-flood-arc`, `--ns-flood-aurora`, `--ns-flood-behind-1`, `--ns-flood-behind-2`, `--ns-flood-bloom`, `--ns-flood-deep`, `--ns-flood-dial-bloom`, `--ns-flood-glass`, `--ns-flood-grain`, `--ns-flood-image`, `--ns-flood-ink`, `--ns-flood-ink-low`, `--ns-flood-light`, `--ns-flood-mid`, `--ns-flood-pale`, `--ns-flood-pane`, `--ns-flood-pane-edge`, `--ns-flood-pill-ink`, `--ns-flood-ribbon`, `--ns-flood-ribbon-core`, `--ns-flood-shadow`, `--ns-flood-sheen`, `--ns-flood-wash`, `--ns-font-body`, `--ns-font-display`, `--ns-font-mono`, `--ns-font-script`, `--ns-glass`, `--ns-glass-blur`, `--ns-glass-shadow`, `--ns-glow`, `--ns-grain`, `--ns-gutter`, `--ns-header`, `--ns-heat`, `--ns-hover`, `--ns-ink`, `--ns-ink-2`, `--ns-ink-3`, `--ns-ink-4`, `--ns-leading`, `--ns-lift`, `--ns-light-1`, `--ns-light-2`, `--ns-light-3`, `--ns-light-spread`, `--ns-light-strength`, `--ns-line`, `--ns-line-soft`, `--ns-lit-edge`, `--ns-menu-dy`, `--ns-menu-row`, `--ns-mesh`, `--ns-mesh-frost`, `--ns-ok`, `--ns-ok-ink`, `--ns-orb-body`, `--ns-orb-cool`, `--ns-orb-core`, `--ns-orb-dawn`, `--ns-orb-deep`, `--ns-orb-edge`, `--ns-orb-grain`, `--ns-orb-ground`, `--ns-orb-halo`, `--ns-orb-inner`, `--ns-orb-key`, `--ns-orb-lift`, `--ns-orb-limb`, `--ns-orb-limb-from`, `--ns-orb-rim`, `--ns-orb-skin-hi`, `--ns-orb-skin-lo`, `--ns-orb-skin-mid`, `--ns-orb-warm`, `--ns-panel`, `--ns-panel-w`, `--ns-prism-edge`, `--ns-prism-glint`, `--ns-prism-sheen`, `--ns-prism-tint`, `--ns-pulse`, `--ns-radius`, `--ns-radius-card`, `--ns-radius-full`, `--ns-radius-lg`, `--ns-radius-sm`, `--ns-radius-xl`, `--ns-raised`, `--ns-range`, `--ns-row`, `--ns-row-compact`, `--ns-segment`, `--ns-selected`, `--ns-series`, `--ns-series-core`, `--ns-series-lilac`, `--ns-series-tint`, `--ns-shadow-dialog`, `--ns-shadow-float`, `--ns-shadow-panel`, `--ns-sheet`, `--ns-sheet-bottom`, `--ns-side`, `--ns-signal`, `--ns-sleep-awake`, `--ns-sleep-deep`, `--ns-sleep-light`, `--ns-sleep-rem`, `--ns-space-1`, `--ns-space-2`, `--ns-space-3`, `--ns-space-4`, `--ns-space-5`, `--ns-space-6`, `--ns-space-8`, `--ns-space-section`, `--ns-stack-on`, `--ns-standing-critical`, `--ns-standing-in`, `--ns-standing-out`, `--ns-state-doing`, `--ns-state-done`, `--ns-state-review`, `--ns-state-todo`, `--ns-switch-h`, `--ns-switch-w`, `--ns-text-body`, `--ns-text-control`, `--ns-text-display`, `--ns-text-figure`, `--ns-text-headline`, `--ns-text-hero`, `--ns-text-lede`, `--ns-text-meta`, `--ns-text-page`, `--ns-text-record`, `--ns-text-small`, `--ns-text-strong`, `--ns-text-sub`, `--ns-text-title`, `--ns-tile-shadow`, `--ns-time-born`, `--ns-time-color`, `--ns-time-dialog`, `--ns-time-menu`, `--ns-time-page`, `--ns-time-panel`, `--ns-time-toast`, `--ns-tint`, `--ns-tint-ink`, `--ns-toast-bottom`, `--ns-toast-left`, `--ns-touch`, `--ns-tracking-display`, `--ns-tracking-headline`, `--ns-warn`, `--ns-warn-ink`, `--ns-wash-clay`, `--ns-wash-dusk`, `--ns-wash-graphite`, `--ns-wash-ink`, `--ns-wash-sage`, `--ns-wash-sand`, `--ns-weight-light`, `--ns-weight-medium`, `--ns-weight-regular`, `--ns-weight-strong`, `--ns-well`. - Never add Tailwind colour classes inside the component. ```tsx import { PromptInput, type Dictation } from "@/components/ui/notchset/prompt-input"; ``` ## Parts - A single export that takes props. ## Match the original - Read `components/ui/notchset/prompt-input.tsx` as the reference implementation before changing or recreating anything, and match it: sizes, colours per theme, motion timings, copy and behaviour. - If you deviate (a prop you can't honour, a style you changed, a dependency you swapped), say so in your reply, part by part. - Keep the accessibility contract, the keyboard map and the motion levels listed below. ## Use it when ### Not when ## Built from - button (`button`), installed with it: reuse it, don't rebuild it - icon-button (`icon-button`), installed with it: reuse it, don't rebuild it ## Mistakes - Recreating the component instead of installing it ## Usage ```tsx "use client"; import * as React from "react"; import { PromptInput, type Dictation } from "@/components/ui/notchset/prompt-input"; /* the sample "hears" these words; the template's voice adapter listens for real */ const HEARD = ["Draft", "a short", "note to", "the beta list", "about Tuesday"]; export default function PromptInputDemo() { const [value, setValue] = React.useState(""); const [sent, setSent] = React.useState([]); const [running, setRunning] = React.useState(false); const [queued, setQueued] = React.useState(null); const [dict, setDict] = React.useState<{ on: boolean; heard: number }>({ on: false, heard: 0 }); /* a sample reply runs for three seconds, then a waiting message goes */ React.useEffect(() => { if (!running) return; const t = setTimeout(() => { setRunning(false); if (queued) { setSent((s) => [...s, queued]); setQueued(null); setRunning(true); } }, 3000); return () => clearTimeout(t); }, [running, queued]); React.useEffect(() => { if (!dict.on) return; const t = setTimeout(() => { if (dict.heard < HEARD.length) return setDict({ on: true, heard: dict.heard + 1 }); /* the phrase ends: the words land in the box, nothing is sent */ setValue((v) => `${v}${v ? " " : ""}${HEARD.join(" ")}.`); setDict({ on: false, heard: 0 }); }, 420); return () => clearTimeout(t); }, [dict]); const dictation: Dictation = { state: dict.on ? "listening" : "off", interim: dict.heard ? HEARD.slice(0, dict.heard).join(" ") : undefined, onToggle: () => setDict((d) => ({ on: !d.on, heard: 0 })) }; return (
{sent.length > 0 && (
    {sent.map((s, i) => (
  • Sent: {s}
    • ))}
)} { if (running) setQueued(t); else { setSent((s) => [...s, t]); setRunning(true); } setValue(""); }} running={running} onStop={() => setRunning(false)} queued={queued ? { text: queued, onSendNow: () => (setRunning(false), setSent((s) => [...s, queued]), setQueued(null), setRunning(true)), onCancel: () => (setValue(queued), setQueued(null)) } : undefined} dictation={dictation} attach={{ onFiles: () => {} }} placeholder="Ask anything" />
); } ``` ## Props | Prop | Type | Default | What it does | |---|---|---|---| | `value` | `string` | | Required. | | `onValueChange` | `(value: string) => void` | | Required. | | `onSubmit` | `(text: string) => void` | | send (or, while a reply runs, queue) the text | | `running` | `boolean` | `false` | a reply is running: the button is Stop | | `onStop` | `() => void` | | | | `queued` | `{ text: string; onSendNow: () => void; onCancel: () => void }` | | a message waiting for the reply to finish | | `dictation` | `Dictation` | | | | `attach` | `{ onFiles: (files: File[]) => void; refused?: string \| undefined; count?: number \| undefined; busy?: boolean \| undefined; /** the file picker's types ("image/*,application/pdf") */ accept?: string \| undefined }` | | add files (the paperclip, paste, drop); with `refused` the button stays and says why it can't ("This model can't read files"). `count`: files ready, so Send works without words; `busy`: one is still reading, so Send waits. | | `attachments` | `React.ReactNode` | | the attached files' chips, above the words | | `tools` | `React.ReactNode` | | a tools menu, after the paperclip (Search the web, Deep research) | | `limit` | `{ line: string; onSendWhenReset: () => void }` | | at the plan's limit: what it says and the way on | | `offline` | `boolean` | `false` | the connection is gone: the draft stays and says it will wait | | `onEditLast` | `() => void` | | ↑ in an empty box edits your last message | | `model` | `React.ReactNode` | | the model selector | | `voice` | `React.ReactNode` | | the voice button | | `footer` | `React.ReactNode` | | the usage line, under the box | | `placeholder` | `string` | `"Ask anything"` | | | `label` | `string` | `"Message"` | | Full docs: https://notchset.dev/components/prompt-input ## Customising - Colours: every part reads the foundation's roles (`--ns-canvas`, `--ns-ink`, `--ns-line`, `--ns-signal` …), which read your shadcn tokens (`--background`, `--foreground`, `--border`, `--destructive` …), plus the optional `--success` and `--warning`. Retheme on `:root` or any container; never add Tailwind colour classes inside the component. - Dark mode follows the `.dark` class or `data-theme="dark"` on an ancestor (the shadcn and next-themes conventions). - Update later: Commit or stash local changes first (or copy the files), so the update can be undone. Read https://notchset.dev/r/changelog.json for the new versions: a major version, an entry marked breaking or a merge says what to change. Then re-run the install with `--overwrite`, on a branch. It replaces the component's files, the shared helper files they import, and the item's CSS rules in the global stylesheet, so review the whole diff (components, shared files, CSS), re-apply your own edits, and run the app's typecheck, tests and build. ## Accessibility contract (preserve when editing) ## Install ```bash npx shadcn@latest add https://notchset.dev/r/prompt-input.json ``` Or add the `@notchset` registry to components.json and run `npx shadcn@latest add @notchset/prompt-input`. Every components.json style gets the same files. ## Continue the workflow - [Message](https://notchset.dev/components/message) - [Model selector](https://notchset.dev/components/model-selector) - [Receipt](https://notchset.dev/blocks/receipt) ## Source ### components/ui/notchset/prompt-input.tsx ```tsx // Notchset prompt-input 2.0.0 · https://notchset.dev/changelog "use client"; import * as React from "react"; import { ArrowUp, Mic, MicOff, Paperclip, Square, X } from "lucide-react"; import { cn } from "@/lib/utils"; import { Button } from "@/components/ui/notchset/button"; import { IconButton } from "@/components/ui/notchset/icon-button"; /* * Prompt input: where you ask. Enter sends, Shift+Enter starts a new line, and keys an input method is composing with * stay its own. It grows with what you write. While a reply runs the send button is Stop; a message sent meanwhile * waits above the box ("Sends after this reply") with Send now, never refused. Dictation is its own key: while it * listens your words appear live as a caption above the box and land in it as you finish each phrase; nothing is * sent until you send. With the microphone refused it says how to allow it and typing carries on. At the plan's * limit the button becomes "Send when it resets" and the draft is kept; offline, the draft is kept and says so. * * Files come by the paperclip, by pasting and by dropping onto the box (it says "Drop to attach" while one is over * it); the host checks and uploads them and passes their chips back in `attachments`. A message with files ready can * go without words; while one is still reading, Send waits. * * The host owns the draft, the reply's life, dictation (the template's voice adapter) and the files; this piece * draws them. Slots: the model selector, a tools menu and the voice button sit in its toolbar, the files' chips above * the words, the usage line under it. */ type Dictation = { state: "off" | "listening" | "blocked" | "unsupported"; /** the words heard so far in this phrase, not yet in the box */ interim?: string | undefined; onToggle: () => void; /** false: the host draws the one voice control itself (the Assistant's Voice menu, dictation and talk in one); the composer still says what it hears and when the microphone is blocked */ button?: boolean | undefined; }; type PromptInputProps = { value: string; onValueChange: (value: string) => void; /** send (or, while a reply runs, queue) the text */ onSubmit: (text: string) => void; /** a reply is running: the button is Stop */ running?: boolean | undefined; onStop?: (() => void) | undefined; /** a message waiting for the reply to finish */ queued?: { text: string; onSendNow: () => void; onCancel: () => void } | undefined; dictation?: Dictation | undefined; /** * add files (the paperclip, paste, drop); with `refused` the button stays and says why it can't ("This model can't * read files"). `count`: files ready, so Send works without words; `busy`: one is still reading, so Send waits. */ attach?: { onFiles: (files: File[]) => void; refused?: string | undefined; count?: number | undefined; busy?: boolean | undefined; /** the file picker's types ("image/*,application/pdf") */ accept?: string | undefined } | undefined; /** the attached files' chips, above the words */ attachments?: React.ReactNode; /** a tools menu, after the paperclip (Search the web, Deep research) */ tools?: React.ReactNode; /** at the plan's limit: what it says and the way on */ limit?: { line: string; onSendWhenReset: () => void } | undefined; /** the connection is gone: the draft stays and says it will wait */ offline?: boolean | undefined; /** ↑ in an empty box edits your last message */ onEditLast?: (() => void) | undefined; /** the model selector */ model?: React.ReactNode; /** the voice button */ voice?: React.ReactNode; /** the usage line, under the box */ footer?: React.ReactNode; placeholder?: string | undefined; label?: string | undefined; className?: string | undefined; }; /* a layout effect in the browser, an ordinary one on the server (no SSR warning) */ const useIsomorphicLayoutEffect = typeof window === "undefined" ? React.useEffect : React.useLayoutEffect; const PromptInput = React.forwardRef(function PromptInput( { value, onValueChange, onSubmit, running = false, onStop, queued, dictation, attach, attachments, tools, limit, offline = false, onEditLast, model, voice, footer, placeholder = "Ask anything", label = "Message", className }, ref, ) { const ta = React.useRef(null); const file = React.useRef(null); /* the host's ref reaches the textarea (React 18 and 19 alike) */ React.useImperativeHandle(ref, () => ta.current as HTMLTextAreaElement, []); useIsomorphicLayoutEffect(() => { const t = ta.current; if (!t) return; t.style.height = "auto"; t.style.height = `${Math.min(t.scrollHeight, 240)}px`; }, [value]); const text = value.trim(); const withFiles = !!attach?.count; const ready = (!!text || withFiles) && !attach?.busy; const send = () => { if (!ready || offline) return; if (limit) return limit.onSendWhenReset(); onSubmit(text); }; const [over, setOver] = React.useState(false); const canTake = !!attach && !attach.refused; const take = (list: FileList | null | undefined) => { const files = [...(list ?? [])]; if (files.length && attach && !attach.refused) attach.onFiles(files); return files.length > 0; }; const listening = dictation?.state === "listening"; return (
{queued && (
Sends after this reply {queued.text}
)}
(e.preventDefault(), setOver(true)) : undefined} onDragLeave={canTake ? (e) => !e.currentTarget.contains(e.relatedTarget as Node | null) && setOver(false) : undefined} onDrop={canTake ? (e) => (e.preventDefault(), setOver(false), take(e.dataTransfer?.files)) : undefined} className={cn( "relative flex flex-col gap-1 rounded-[var(--ns-radius-xl)] bg-[var(--ns-raised)] p-2 shadow-[var(--ns-bezel)] [transition:box-shadow_var(--ns-time-color)] has-[textarea:focus-visible]:shadow-[0_0_0_1px_var(--ns-ink-3),var(--ns-bezel)]", over && "shadow-[0_0_0_1.5px_var(--ns-signal),var(--ns-bezel)]", )} > {over && ( Drop to attach )} {attachments} {listening && (

{dictation.interim ? dictation.interim : "Listening. Speak, then press the microphone again."}

)}