4e:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 4f:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 50:T2c22,"use client"; import { useEffect, useId, useRef, useState, type KeyboardEvent, type ReactNode } from "react"; export type PromptBarVariant = "Rounded" | "Pill"; export interface PromptSource { id: string; name: string; description?: string; icon?: ReactNode; connected?: boolean; } export interface PromptCommand { id: string; name: string; description?: string; } export interface PromptModel { id: string; name: string; description?: string; tag?: string; } export interface PromptAttachment { id: string; name: string; } export interface PromptBarProps { sources?: readonly PromptSource[]; commands?: readonly PromptCommand[]; models?: readonly PromptModel[]; value?: string; defaultValue?: string; selectedModel?: PromptModel; attachments?: readonly PromptAttachment[]; variant?: PromptBarVariant; placeholder?: string; listening?: boolean; disabled?: boolean; busy?: boolean; onChange?: (value: string) => void; onSubmit?: (value: string, attachments: readonly PromptAttachment[], model?: PromptModel) => void; onSelectSource?: (source: PromptSource) => void; onSelectCommand?: (command: PromptCommand) => void; onSelectModel?: (model: PromptModel) => void; onAttach?: () => void; onRemoveAttachment?: (attachment: PromptAttachment) => void; onDictate?: () => void; onStop?: () => void; className?: string; } const Icon = ({ children, size = 16 }: { children: ReactNode; size?: number }) => ; const Caret = () => ; function 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; } export 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) { 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]); const listboxId = useId(); const modelListboxId = useId(); 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 ?? ""; const options = kind === "@" ? sources.filter((item) => item.name.toLowerCase().includes(query)) : commands.filter((item) => item.name.toLowerCase().replace(/^\//, "").startsWith(query)); const model = selectedModel ?? internalModel; const setValue = (next: string) => { if (!controlled) setDraft(next); onChange?.(next); }; useEffect(() => setActive(0), [kind, query]); 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]); 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(); }; const submit = () => { if (!disabled && !busy && (current.trim() || attachments.length)) { onSubmit?.(current.trim(), attachments, model); setValue(""); } }; 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(); } }; const onInput = (next: string) => { setValue(next); setMenuOpen(parseToken(next)?.kind ?? null); }; const chooseModel = (item: PromptModel) => { setInternalModel(item); onSelectModel?.(item); setModelOpen(false); window.requestAnimationFrame(() => modelButtonRef.current?.focus()); }; 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()); }; 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()); } }; return

{kind ? : null} {modelOpen && models.length ? : null}

{attachments.length ?

{attachments.map((file) => {file.name}{onRemoveAttachment ? : null})}

: null}

onInput(event.target.value)} onKeyDown={onKeyDown} className="min-h-9 min-w-[120px] flex-1 resize-none bg-transparent px-1 py-2 text-sm outline-none placeholder:text-muted-foreground disabled:opacity-50" />
      <div className="flex shrink-0 items-center gap-1"><button type="button" aria-label={listening ? "Stop dictation" : "Start dictation"} aria-pressed={listening} disabled={disabled || busy || !onDictate} onClick={onDictate} className={`text-muted-foreground hover:bg-muted rounded-lg p-2 disabled:opacity-50 ${listening ? "text-destructive" : ""}`}><Icon><path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3zM19 10v2a7 7 0 0 1-14 0v-2M12 19v3M8 22h8" /></Icon></button><button ref={modelButtonRef} type="button" aria-label="Model" aria-haspopup="listbox" aria-controls={modelListboxId} aria-expanded={modelOpen} disabled={disabled || busy || !models.length} onClick={toggleModels} className="text-muted-foreground hover:bg-muted flex max-w-32 items-center gap-1 rounded-lg px-2 py-2 text-xs disabled:opacity-50"><span className="truncate">{model?.name ?? "Model"}</span><Caret /></button>{busy ? <button type="button" aria-label="Stop generating" disabled={!onStop} onClick={onStop} className="bg-secondary text-secondary-foreground hover:bg-muted rounded-lg p-2 disabled:opacity-40"><Icon><rect x="8" y="8" width="8" height="8" rx="1" fill="currentColor" stroke="none" /></Icon></button> : <button type="button" aria-label="Send prompt" disabled={disabled || (!current.trim() && !attachments.length)} onClick={submit} className="bg-primary text-primary-foreground hover:bg-primary/90 rounded-lg p-2 disabled:opacity-40"><Icon><path d="m5 12 14-7-3 14-4-6-7-1z" /><path d="m12 13 4 6" /></Icon></button>}</div>
    </div>
  </div>;
}
export default PromptBar;
4d:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L4e",null,{"namespace":"@beadkit","registryDependencies":["https://beadkit.dev/r/ai-core.json"]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"components/ai/PromptBar.tsx","content":"$50","type":"registry:component","target":"@components/ai/PromptBar.tsx"}],"className":"h-[70svh] min-h-80"}]]}]
</article></body></html>