{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "prompt-bar", "title": "Prompt bar", "description": "Rounded or Pill composer with source mentions, slash commands, attachments, model selection, and dictation state.", "registryDependencies": [ "https://beadkit.dev/r/ai-core.json" ], "files": [ { "path": "components/ai/PromptBar.tsx", "content": "\"use client\";\n\nimport { useEffect, useId, useRef, useState, type KeyboardEvent, type ReactNode } from \"react\";\n\nexport type PromptBarVariant = \"Rounded\" | \"Pill\";\nexport interface PromptSource { id: string; name: string; description?: string; icon?: ReactNode; connected?: boolean; }\nexport interface PromptCommand { id: string; name: string; description?: string; }\nexport interface PromptModel { id: string; name: string; description?: string; tag?: string; }\nexport interface PromptAttachment { id: string; name: string; }\nexport interface PromptBarProps {\n sources?: readonly PromptSource[]; commands?: readonly PromptCommand[]; models?: readonly PromptModel[];\n value?: string; defaultValue?: string; selectedModel?: PromptModel; attachments?: readonly PromptAttachment[];\n variant?: PromptBarVariant; placeholder?: string; listening?: boolean; disabled?: boolean;\n busy?: boolean;\n onChange?: (value: string) => void; onSubmit?: (value: string, attachments: readonly PromptAttachment[], model?: PromptModel) => void;\n onSelectSource?: (source: PromptSource) => void; onSelectCommand?: (command: PromptCommand) => void; onSelectModel?: (model: PromptModel) => void;\n onAttach?: () => void; onRemoveAttachment?: (attachment: PromptAttachment) => void; onDictate?: () => void; onStop?: () => void; className?: string;\n}\nconst Icon = ({ children, size = 16 }: { children: ReactNode; size?: number }) => {children};\nconst Caret = () => ;\nfunction parseToken(value: string) { const match = /(^|\\s)([@/])([\\w-]*)$/.exec(value); return match ? { kind: match[2] as \"@\" | \"/\", query: match[3].toLowerCase(), start: match.index + match[1].length } : null; }\n\nexport function PromptBar({ sources = [], commands = [], models = [], value, defaultValue = \"\", selectedModel, attachments = [], variant = \"Rounded\", placeholder = \"Ask anything…\", listening = false, disabled = false, busy = false, onChange, onSubmit, onSelectSource, onSelectCommand, onSelectModel, onAttach, onRemoveAttachment, onDictate, onStop, className = \"\" }: PromptBarProps) {\n const controlled = value !== undefined; const [draft, setDraft] = useState(defaultValue); const [menuOpen, setMenuOpen] = useState<\"@\" | \"/\" | false | null>(null); const [modelOpen, setModelOpen] = useState(false); const [active, setActive] = useState(0); const [internalModel, setInternalModel] = useState(selectedModel ?? models[0]);\n const listboxId = useId();\n const modelListboxId = useId();\n const inputRef = useRef(null); const menuRef = useRef(null); const modelButtonRef = useRef(null); const modelOptionRefs = useRef>([]); const current = controlled ? value : draft; const parsed = parseToken(current); const kind = menuOpen === false ? null : menuOpen ?? parsed?.kind ?? null; const query = menuOpen ? \"\" : parsed?.query ?? \"\";\n const options = kind === \"@\" ? sources.filter((item) => item.name.toLowerCase().includes(query)) : commands.filter((item) => item.name.toLowerCase().replace(/^\\//, \"\").startsWith(query)); const model = selectedModel ?? internalModel;\n const setValue = (next: string) => { if (!controlled) setDraft(next); onChange?.(next); }; useEffect(() => setActive(0), [kind, query]);\n useEffect(() => { if (!kind && !modelOpen) return; const close = (event: MouseEvent) => { if (!(event.target instanceof Node) || !menuRef.current?.contains(event.target)) { setMenuOpen(false); setModelOpen(false); } }; document.addEventListener(\"mousedown\", close); return () => document.removeEventListener(\"mousedown\", close); }, [kind, modelOpen]);\n const choose = (item: PromptSource | PromptCommand) => { const name = kind === \"/\" && !item.name.startsWith(\"/\") ? `/${item.name}` : item.name; setValue(parsed ? `${current.slice(0, parsed.start)}${kind === \"@\" ? `@${name}` : name} ` : `${current}${name} `); if (kind === \"@\") onSelectSource?.(item as PromptSource); else onSelectCommand?.(item as PromptCommand); setMenuOpen(false); inputRef.current?.focus(); };\n const submit = () => { if (!disabled && !busy && (current.trim() || attachments.length)) { onSubmit?.(current.trim(), attachments, model); setValue(\"\"); } };\n const onKeyDown = (event: KeyboardEvent) => { if (kind) { if (options.length && (event.key === \"ArrowDown\" || event.key === \"ArrowUp\")) { event.preventDefault(); setActive((index) => (index + (event.key === \"ArrowDown\" ? 1 : -1) + options.length) % options.length); return; } if (options.length && event.key === \"Enter\" && !event.shiftKey) { event.preventDefault(); choose(options[active]); return; } if (event.key === \"Escape\") { event.preventDefault(); setMenuOpen(false); return; } } if (event.key === \"Enter\" && !event.shiftKey) { event.preventDefault(); submit(); } };\n const onInput = (next: string) => { setValue(next); setMenuOpen(parseToken(next)?.kind ?? null); };\n const chooseModel = (item: PromptModel) => { setInternalModel(item); onSelectModel?.(item); setModelOpen(false); window.requestAnimationFrame(() => modelButtonRef.current?.focus()); };\n const toggleModels = () => { if (modelOpen) { setModelOpen(false); return; } const selected = Math.max(0, models.findIndex((item) => item.id === model?.id)); setModelOpen(true); window.requestAnimationFrame(() => modelOptionRefs.current[selected]?.focus()); };\n const onModelKeyDown = (event: KeyboardEvent, index: number) => { if (event.key === \"ArrowDown\" || event.key === \"ArrowUp\") { event.preventDefault(); const next = (index + (event.key === \"ArrowDown\" ? 1 : -1) + models.length) % models.length; modelOptionRefs.current[next]?.focus(); } else if (event.key === \"Escape\") { event.preventDefault(); setModelOpen(false); window.requestAnimationFrame(() => modelButtonRef.current?.focus()); } };\n return
\n {kind ?
{options.length ? options.map((item, index) => ) :

No matching {kind === \"@\" ? \"sources\" : \"commands\"}.

}
: null}\n {modelOpen && models.length ?
{models.map((item, index) => )}
: null}\n
\n {attachments.length ?
{attachments.map((file) => {file.name}{onRemoveAttachment ? : null})}
: null}\n \n