CommandList

The slash commands of an agent behind a search field. Pick it in a ToolbarMenu or beside a composer, wherever the user picks one command to type into the session.

CommandList

PreviewLink to the section Preview

Live in all three themes. Everything here is interactive.

Light theme, CommandList

Dark theme, CommandList

High contrast theme, CommandList

UsageLink to the section Usage

tsx

import { CommandList } from '@skribly/ui/agents'

tsx

<CommandList
  commands={toolbox.commands}
  searchLabel={t('searchCommands')}
  listLabel={t('commands')}
  emptyLabel={(q) => t('noCommand', { q })}
  onRun={(c) => send('/' + c.name)}
/>

Every label is a prop, so the app passes its own words in its own language. See no built-in text.

AccessibilityLink to the section Accessibility

React Aria’s Autocomplete with a menu: the field keeps focus while arrow keys move through the matches, each row is read as it is reached with its description, and Enter runs it.
The number of matches is read politely as the query changes.
Names that start with the query come first.
Long descriptions wrap to two lines and are read in full.

This demo runs through axe in all three themes on every test run. See what the tests check.