An "In scope" panel showing what the AI is working with — header (title + status + token usage), category tabs, a list of context items with status badges and toggles, a detail column for the selected item, and a context-limit warning.
Loading demo: context-manager-realworld
npx sdaia-ui@latest add context-manager
import { ContextManager } from "sdaia-ui"1<ContextManager2variant="panel"3title="Context"4headerStatus="Active"5subtitle="12 active items · 2 disabled · ~28k tokens"6tabs={tabs}7activeTabId={activeTab}8onTabChange={setActiveTab}9items={items}10detail={detail}11warning="Context limit nearly full. Some older items may be truncated."12onToggleItem={(id, on) => setEnabled(id, on)}13onAddContext={() => addContext()}14/>
A compact in-conversation strip — a header, dismissible context chips and Add / Manage actions.
Loading demo: context-manager-inline
A focused "Manage context" dialog — search, a flat item list with toggles and Cancel / Save actions.
Loading demo: context-manager-modal
Brand style — a high-emphasis, brand-tinted surface with a brand border for a primary, standalone manager.
Loading demo: context-manager-brand
Outline style — a transparent surface with a neutral border for quietly embedding the manager in busier layouts.
Loading demo: context-manager-outline
Prop | Type | Default | Required |
|---|---|---|---|
variant | 'panel' | 'inline' | 'modal' | 'panel' | optional |
surface | 'neutral' | 'brand' | 'outline' | 'neutral' | optional |
dir | 'ltr' | 'rtl' | 'ltr' | optional |
title | ReactNode | 'Context' / 'Manage context' | optional |
headerStatus | ReactNode | — | optional |
subtitle | ReactNode | — | optional |
count | number | — | optional |
activeCount | number | — | optional |
activeLabel | string | 'active' | optional |
items | ContextItem[] | [] | optional |
onToggleItem | (id: string, on: boolean) => void | — | optional |
tabs | ContextTab[] | — | optional |
activeTabId / onTabChange | string / (id) => void | — | optional |
detail | ContextDetail | null | — | optional |
moreCount | number | — | optional |
onRemoveItem | (id: string) => void | — | optional |
searchPlaceholder / searchValue / onSearchChange | string / string / (v) => void | — | optional |
footerSummary | ReactNode | — | optional |
warning | ReactNode | — | optional |
addLabel / manageLabel / previewLabel / openSourceLabel / removeLabel / cancelLabel / saveLabel | string | — | optional |
onAddContext / onManage / onSearch / onFilter / onSort / onClose / onCancel / onSave / onPreview / onOpenSource / onRemove | () => void | — | optional |