KQ-1494 · ASK/BAR

Ask Bar

A compact prompt input that becomes the turn it starts: typing grows the field on springs.glide up to `rows` lines, the empty placeholder rolls through its lines on springs.snap, attachments drop in as chips with a bounce on springs.recoil, and while the host is busy the round send arrow morphs into a stop square on springs.snap with a thin arc orbiting it. Sending lifts the prompt out of the field — a copy set exactly over the text rises to its bubble on springs.snap, its ink and plate changing and lifted off the page as it travels, while the field collapses under it — and the host's answer grows in below on springs.glide. Enter sends, Shift+Enter breaks the line, Escape stops while busy and Backspace in an empty field drops the last chip.

KQ-1494 · ASK/BAR

fern-photo.jpg2.1 MB

ready · enter sends, shift+enter for a line

Open it on the Canvas stage

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/ask-bar

Props

value / defaultValue: string; default — / ""; The draft, controlled or uncontrolled.
onValueChange: (value: string) => void; default —; Fires with the draft as it is typed, and with "" when it is sent.
onSubmit: (prompt: string, attachments: AskBarAttachment[]) => void; default —; A prompt was sent (Enter or the send button), with the attachments it carried.
busy: boolean; default false; The host is answering: the send button becomes a stop button and Enter waits.
onStop: () => void; default —; The stop button, or Escape while busy.
answer: React.ReactNode; default —; The host's answer, shown under the asked prompt; its height glides as it grows.
attachments: { id: string; name: string; meta?: string }[]; default []; Files riding with the next prompt, shown as chips above the text.
onAttach: () => void; default —; Shows the attach button; the host adds what was attached.
onRemoveAttachment: (id: string) => void; default —; A chip's remove button, or Backspace in an empty field.
placeholders: string[]; default ["Ask anything"]; Placeholder lines, rolled through while the field is empty.
cycle: number; default 3; Seconds between placeholder lines; 0 holds the first.
rows: number; default 5; How many lines the field grows to before it scrolls.
lift: number; default 12; How high the prompt rises off the page as it flies to its bubble, in px (its shadow and scale at the top of the flight); 0 slides it flat.
label: string; default "Ask"; The field's accessible name.
size: "sm" | "md" | "lg"; default "md"; Type and control size.
sound: boolean; default false; A click on send and stop, and a whoosh as the prompt lifts.
disabled: boolean; default false; Disables the field and its buttons.
className: string; default —; Classes for the root column.

Prop	Type	Default	Description
value / defaultValue	string	— / ""	The draft, controlled or uncontrolled.
onValueChange	(value: string) => void	—	Fires with the draft as it is typed, and with "" when it is sent.
onSubmit	(prompt: string, attachments: AskBarAttachment[]) => void	—	A prompt was sent (Enter or the send button), with the attachments it carried.
busy	boolean	false	The host is answering: the send button becomes a stop button and Enter waits.
onStop	() => void	—	The stop button, or Escape while busy.
answer	React.ReactNode	—	The host's answer, shown under the asked prompt; its height glides as it grows.
attachments	{ id: string; name: string; meta?: string }[]	[]	Files riding with the next prompt, shown as chips above the text.
onAttach	() => void	—	Shows the attach button; the host adds what was attached.
onRemoveAttachment	(id: string) => void	—	A chip's remove button, or Backspace in an empty field.
placeholders	string[]	["Ask anything"]	Placeholder lines, rolled through while the field is empty.
cycle	number	3	Seconds between placeholder lines; 0 holds the first.
rows	number	5	How many lines the field grows to before it scrolls.
lift	number	12	How high the prompt rises off the page as it flies to its bubble, in px (its shadow and scale at the top of the flight); 0 slides it flat.
label	string	"Ask"	The field's accessible name.
size	"sm" \| "md" \| "lg"	"md"	Type and control size.
sound	boolean	false	A click on send and stop, and a whoosh as the prompt lifts.
disabled	boolean	false	Disables the field and its buttons.
className	string	—	Classes for the root column.