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';
  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
availableAuthors	string[]	[]	Authors to offer as scope filters. Set as a JS property.
availableTags	string[]	[]	Tags to offer as scope filters. Set as a JS property.
currentLabel	string	'All Content'	The label shown on the trigger for the active scope.

Events

Event	Detail	Notes
kai-scope-change	{ … }	A scope was chosen (`undefined` filters = "All Content").

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