KQ-895 · SEARCH/INLINE

Search Inline

Find in the thread, without leaving it. Every occurrence takes a wash that sweeps in from its left edge — scaleX on a layer behind the words, staggered by cascade and capped at the 600ms budget — while messages with no match recede on a tween, so the hits read as a set. Enter steps to the next match and the box slides to it on glide with every scroll frame rounded, Shift+Enter steps back, Escape clears the term, and the 3 / 7 readout rolls a digit at a time on snap.

KQ-895 · SEARCH/INLINE

Ines Moreau, 14:38.Coldbrook depot closes Thursday at noon.
Marta Ferreira, 14:41.Do the pallets go out before that?
Ines Moreau, 14:44.Two pallets, both labelled, on dock two.
Rui Baptista, 14:52.Dock two is short a loader until nine.
Marta Ferreira, 14:55.Then take dock three.
Rui Baptista, 15:02.Dock three is free from nine, yes.
Ines Moreau, 15:11.Waylight Pay reference is 4471-CB.
Marta Ferreira, 15:18.On the sheet. Pallets are stacked.
Rui Baptista, 15:24.Loader is booked at the dock until half past.

dock · no matches

Install

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

$ pnpm dlx shadcn@latest add @kinetiq/search-inline

Props

messages: SearchMessage[]; default —; The thread, oldest first: id, author, text, a preformatted time and an own flag.
query / defaultQuery: string; default ""; Controlled or initial search term.
onQueryChange: (query: string) => void; default —; Fires from every keystroke and from Escape's clear.
onMatchChange: (index: number, total: number) => void; default —; Fires when the current match or the total changes; index is 1-based and 0 when there is nothing to step to. Memoise it.
onAnnounce: (sentence: string) => void; default —; Fires once per frozen change sentence, for a parent's own status line.
caseSensitive: boolean; default false; Match case.
label: string; default "Find in thread"; Names the field for assistive technology.
placeholder: string; default "Find in thread"; Placeholder text in the field.
threadLabel: string; default —; Names the thread's scroll region.
maxHeight: number; default 260; Tallest the thread grows before it scrolls inside its own box.

Prop	Type	Default	Description
messages	SearchMessage[]	—	The thread, oldest first: id, author, text, a preformatted time and an own flag.
query / defaultQuery	string	""	Controlled or initial search term.
onQueryChange	(query: string) => void	—	Fires from every keystroke and from Escape's clear.
onMatchChange	(index: number, total: number) => void	—	Fires when the current match or the total changes; index is 1-based and 0 when there is nothing to step to. Memoise it.
onAnnounce	(sentence: string) => void	—	Fires once per frozen change sentence, for a parent's own status line.
caseSensitive	boolean	false	Match case.
label	string	"Find in thread"	Names the field for assistive technology.
placeholder	string	"Find in thread"	Placeholder text in the field.
threadLabel	string	—	Names the thread's scroll region.
maxHeight	number	260	Tallest the thread grows before it scrolls inside its own box.