Prompt Context
The sources attached to a prompt shown as removable chips, each with its type and ready / processing status.
Loading demo: prompt-context-real-world
Installation
npx sdaia-ui@latest add prompt-context
Usage
import { PromptContext } from "sdaia-ui"1<PromptContext2filename="customer_churn_logs_june.csv"3tokens="14.8k tokens"4fileType="CSV"5status="Loaded"6onRemove={() => {}}7/>
Examples
Brand
A raised surface — the default style.
Loading demo: prompt-context-brand
Neutral
A subtle surface.
Loading demo: prompt-context-neutral
Outline
A transparent surface with a default border.
Loading demo: prompt-context-outline
Optional slots
Toggle the type badge, status badge and remove action.
Loading demo: prompt-context-toggles
API Reference
Prop | Type | Default | Required |
|---|---|---|---|
variant | 'brand' | 'neutral' | 'outline' | 'brand' | optional |
filename | ReactNode | — | required |
tokens | ReactNode | — | optional |
fileType | ReactNode | — | optional |
status | ReactNode | — | optional |
statusColor | BadgeColor | 'primary' | optional |
showType / showStatus / showRemove | boolean | true | optional |
onRemove | MouseEventHandler | — | optional |
dir | 'ltr' | 'rtl' | — | optional |