Context Picker

Picks what an assistant can see. A dropdown rather than a dialog, because attaching context happens mid-thought and a modal takes focus off the prompt you were writing.

src/components/ui/context-picker.tsx

About

From the component's own source, where it was written.

Picks what an assistant can see: files, selections, docs, tools.

A dropdown rather than a dialog, because attaching context happens mid-thought — a modal would take focus away from the prompt you were part-way through writing. Already-attached sources stay in the list with a tick rather than disappearing, so the menu does not reshuffle under the pointer.

Install

npx astralyx-ui add context-picker

Usage

import { ContextPicker } from '@/components/ui/context-picker'

<ContextPicker
  sources={sources}
  selected={attached}
  onSelect={attach}
  onDeselect={detach}
/>

Composer

Change the props and the source below follows.

Props

preselected

tsx

<ContextPicker
  sources={sources}
  selected={attached}
  onSelect={attach}
  onDeselect={detach}
/>

Examples

Attaching files and docs

tsx

<ContextPicker sources={sources} selected={attached} />

API

Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.

`ContextPicker`

Extends Omit<ComponentProps<typeof DropdownMenuContent>, 'children' | 'onSelect'>.

Prop	Type	Default	Description
offset	number	—	—
side	Side	—	—
align	Align	—	—
sources	ContextSource[]	required	{ id, label, group?, detail?, icon?, disabled? }
selected	string[]	[]	Attached ids. Selected sources stay in the list with a tick rather than disappearing, so the menu does not reshuffle under the pointer.
onSelect	(id: string) => void	—	Attach and detach.
onDeselect	(id: string) => void	—	Attach and detach.
trigger	ReactNode	—	Replaces the default "Context" button.
emptyMessage	string	'Nothing matches'	—
triggerLabel	ReactNode	'Context'	Text on the default trigger. Ignored when `trigger` is given.
searchPlaceholder	string	'Search files and docs'	—
searchLabel	string	'Search context sources'	Accessible name for the search field.

Types

`ContextSource`

Picks what an assistant can see: files, selections, docs, tools.

Field	Type	Description
id	string	—
label	string	—
group?	string	—
detail?	string	—
icon?	ReactNode	—
disabled?	boolean	—