All components (204)

Search the conversation

AI · FindBar

What it is and when to use it

The search bar INSIDE something -a long conversation, a document-: the field, the match counter, next, previous and close. It exists because the browser's only sees what has been loaded, and in a conversation with hundreds of messages that gives "no results" for something that was in fact discussed.

When to use it

To search content that the server loads in parts, where the browser's search falls short.
With useHotkeys to open it with Ctrl/Cmd+F instead of leaving the browser's one.

When not to

To filter a list: that is a SearchField or the filter of a Table.
To search among options when choosing: that is a ComboBox.

What it does and does not do: it does not search or move through the content. It announces what is typed (onChange) and pressed (onNext, onPrevious, onClose), and whoever uses it sets count and current, brings the match into view and marks it (for example with highlighted of ChatMessage). Put it OUTSIDE the area that scrolls, as a sibling: inside, it would go up when moving through the matches.

Keyboard: on opening, focus goes to the field and its text is selected (autoFocus={false} avoids it). Enter goes to the next one, Shift+Enter to the previous one and Escape closes; while composing with an IME they do nothing. The buttons announce their shortcut with aria-keyshortcuts.

Accessibility: it is a role="search" area with the name passed in label (required). The counter is a status region: "3 of 12", "5 matches", "No results" and "Searching…" are announced without taking focus away from the field. Previous and next turn off without matches.

Fine-tuning: it has no variables of its own: it inherits the surface and the field tokens, and is positioned with className.

What it looks like

How many pending orders do I have?

Search match

You have three pending orders: #1042, #1043 and #1047.

Does any of them have an unreviewed payment?

Yes, order #1047: its payment has been unreviewed since Monday.

<FindBar
  label="Search the conversation"
  placeholder="Search this conversation…"
  value={texto}
  onChange={buscar}
  count={coincidencias.length}
  current={posicion + 1}
  onNext={siguiente}
  onPrevious={anterior}
  onClose={cerrar}
/>
<ChatMessage from={mensaje.de} highlighted={mensaje.id === resaltado}>
  {mensaje.texto}
</ChatMessage>

Props

Import it with import { FindBar } from '@amset/ui'. Required props are marked.

Prop	Type	What it does
`label`required	`string`	What it searches, for whoever cannot see the box: "Search the conversation". Required.
`onChange`required	`(value: string) => void`	—
`onClose`required	`() => void`	Escape, or the cross. Whoever opened it closes it: here it is only announced.
`onNext`required	`() => void`	Enter, or the button below.
`onPrevious`required	`() => void`	Shift+Enter, or the button above.
`value`required	`string`	—
`autoFocus`	`boolean`	On opening, focus goes to the field and its text is selected, as in a page finder. Defaults to true.
`className`	`string`	Merged with the library classes; it does not replace them.
`count`	`number`	How many matches there are. Without it nothing is said (nothing has been searched yet, or it is not known).
`current`	`number`	The match you are on, from 1 to `count`. Without it, only the total.
`hasMore`	`boolean`	There are more matches not loaded yet (only part of the conversation has been fetched): the total is written "12+" instead of "12", so it does not promise to be final.
`inputRef`	`Ref<HTMLInputElement>`	The field, to focus it again from outside (when repeating the shortcut that opens it).
`loading`	`boolean`	Searching is under way: the counter says "Searching…".
`placeholder`	`string`	—

It also accepts the attributes of the element it renders: className, style, data-*, aria-* and its events.

In the test bench

Every state and variant, to try one at a time, on its page at ui.amset.tech: