Scope Picker

kai-scope-picker

A lightweight filter dropdown for narrowing a conversation or search to a specific author or tag — drop it in a chat header and listen for one event.

• Shadow DOM
• 1 event
• Authors + tags sections
• 2 array properties
• Pairs with any header control

Preview

When to use

Use <kai-scope-picker> when your interface has multiple authors or content tags and users need to narrow a view. It fits naturally alongside <kai-model-switcher> in a chat header or above a conversation list. In SolidJS, compose ChatScopePicker directly for full reactivity.

Usage

Set availableAuthors and availableTags in JavaScript (arrays can’t be HTML attributes) and listen for kai-scope-change:

<kai-scope-picker id="scope"></kai-scope-picker>

<script type="module">
  import '@kitn.ai/ui/elements';

  await customElements.whenDefined('kai-scope-picker');

  const el = document.getElementById('scope');

  el.availableAuthors = ['Alex Chen', 'Jordan Lee'];
  el.availableTags    = ['design', 'engineering'];

  el.addEventListener('kai-scope-change', (e) => {
    const { filters } = e.detail;
    console.log(filters ?? 'all');
  });
</script>

• current-label — HTML attribute controlling the trigger button text (default 'All Content'). Update it after each kai-scope-change to reflect the active filter.
• kai-scope-change — detail.filters is undefined when “All Content” is selected, or { authors?: string[], tags?: string[] } for a specific filter.
• Passing an empty array for either property hides that section entirely.

Examples

Authors and Tags

Both sections populated — the dropdown shows an Authors group and a Tags group below “All Content”.

Code

Authors Only

Non-empty availableAuthors, empty availableTags — renders only the Authors section.

Code

Tags Only

Non-empty availableTags, empty availableAuthors — renders only the Tags section.

Code

Minimal (No Filters)

Both arrays empty — the dropdown shows only “All Content”. Useful while options are loading asynchronously.

Code

Custom Trigger Label

Set current-label to reflect an already-active scope. Your app owns this state and updates the attribute on each kai-scope-change.

Code

Props

Property	Type	Default	Notes
theme	"light" | "dark" | "auto"	'auto'	Color mode (`auto` follows prefers-color-scheme).
availableAuthors	string[]	[]	Authors to offer as scope filters. Omit to drop the Authors section (for a tag-only picker). Set as a JS property.
availableTags	string[]	[]	Tags to offer as scope filters. Omit to drop the Tags section (for an author-only picker). Set as a JS property.
currentLabel	string	'All Content'	The label shown on the trigger for the active scope.
open	boolean	—	Drive/observe the dropdown's open state (Shoelace-style: settable + reflected to the `open` attribute, the dropdown still self-manages on click/keyboard). Set `el.open = true`, or `<kai-scope-picker open>`; listen for `kai-open-change`.
defaultOpen	boolean	—	Initial open state on mount (uncontrolled seed).
disabled	boolean	—	Disable the trigger: click/keyboard and `show()` no longer open the dropdown.

Events

Event	Detail	Notes
kai-open-change	{ … }	The scope dropdown opened or closed (by click, keyboard, Escape, outside-click, or a method).
kai-scope-change	{ … }	A scope was chosen (`undefined` filters = "All Content").

Methods

Method	Signature	Notes
show	(): void	Open it programmatically (no-op while disabled).
hide	(): void	Close it programmatically.
toggle	(): void	Flip the open state (closes while disabled).

Composed from

This element wraps these SolidJS components — reach for them directly when you need finer control than the props expose.

ChatScopePicker

---

Need a hand? Report a bug Ask for help