shadcn.io is not affiliated with official shadcn/ui
Message Search Chat Block for Solid
A messenger thread with search in the top bar that marks every match in 20 messages over two days, steps through them with Enter and Shift and Enter and rings each one.
Installation
Overview
Find a word in a long thread and walk through the hits with this message search chat for Solid with Ark UI. A hairline frame with a plus mark on each corner holds a window of fixed height for the Van crew thread of Lookback, a messenger with a deep history: twenty messages over yesterday and today as flat rows. The top bar holds an Input with a Kbd hint, and typing marks every match in the whole log with Search Highlight Text while the status line says "1 of 4 messages". The up and down buttons, or Enter and Shift and Enter, step to the previous or next message, scrolling the log to it and ringing it. The composer's Shine Button is the only colored control, the frame is ruled by Guides, and everything moves with CSS only.
FAQ
What stays in the page, and how do I make it real?
Everything. The twenty messages are typed in SEED and searched in the browser by matchesOf, replies to what you send come from a short script and nothing is sent. To search a real history, ask your server for the matching message ids and pass them where matches is read; the marks, the count and the stepping work from that list.
What counts as a match?
A message matches when its text contains the query, ignoring case and accents, so "cafe" finds "café". The count is of messages, not of occurrences: a message that mentions the word twice is one stop. Nothing is removed from the log, only marked, so the thread never reflows while you type.
How does stepping work?
Enter or the down button goes to the next match and Shift and Enter or the up button to the previous one, wrapping at the ends. Each step scrolls the log, never the page, so the message sits about a third from the top, and rings it for a moment. Focus stays in the field, so you can keep pressing Enter. With reduced motion the ring stays until the next step.
Which keys does the search answer?
"/" focuses the field while focus is anywhere inside the window and is ignored while you are typing in a field. Escape clears the query. A query with no result reads "No messages mention" and the word in the status line, in the same space as the count, and the step buttons are disabled.
Is it usable with a screen reader?
The field is named "Search messages", the status line is the page's one live region and announces the position, and the buttons carry hidden names. The marks are real mark elements underlined by the highlight, and every message starts with a hidden "Tamar Soutine, 09:20".