51: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"] 52: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"] 53:T3c5e,"use client"; import type { AttachmentData } from "@/components/ai-elements/attachments"; import { Attachment, AttachmentInfo, AttachmentPreview, AttachmentRemove, Attachments, } from "@/components/ai-elements/attachments"; import { ModelSelector, ModelSelectorContent, ModelSelectorEmpty, ModelSelectorGroup, ModelSelectorInput, ModelSelectorItem, ModelSelectorList, ModelSelectorLogo, ModelSelectorLogoGroup, ModelSelectorName, ModelSelectorTrigger, } from "@/components/ai-elements/model-selector"; import type { PromptInputMessage } from "@/components/ai-elements/prompt-input"; import { PromptInput, PromptInputBody, PromptInputButton, PromptInputCommand, PromptInputCommandEmpty, PromptInputCommandGroup, PromptInputCommandInput, PromptInputCommandItem, PromptInputCommandList, PromptInputCommandSeparator, PromptInputFooter, PromptInputHeader, PromptInputHoverCard, PromptInputHoverCardContent, PromptInputHoverCardTrigger, PromptInputProvider, PromptInputSubmit, PromptInputTab, PromptInputTabBody, PromptInputTabItem, PromptInputTabLabel, PromptInputTextarea, PromptInputTools, usePromptInputAttachments, usePromptInputReferencedSources, } from "@/components/ai-elements/prompt-input"; import { Button } from "@/registry/default/ui/button"; import type { SourceDocumentUIPart } from "ai"; import { AtSignIcon, CheckIcon, FilesIcon, GlobeIcon, ImageIcon, RulerIcon, } from "lucide-react"; import { memo, useCallback, useState } from "react"; const models = [ { chef: "OpenAI", chefSlug: "openai", id: "gpt-4o", name: "GPT-4o", providers: ["openai", "azure"], }, { chef: "OpenAI", chefSlug: "openai", id: "gpt-4o-mini", name: "GPT-4o Mini", providers: ["openai", "azure"], }, { chef: "Anthropic", chefSlug: "anthropic", id: "claude-opus-4-20250514", name: "Claude 4 Opus", providers: ["anthropic", "azure", "google", "amazon-bedrock"], }, { chef: "Anthropic", chefSlug: "anthropic", id: "claude-sonnet-4-20250514", name: "Claude 4 Sonnet", providers: ["anthropic", "azure", "google", "amazon-bedrock"], }, { chef: "Google", chefSlug: "google", id: "gemini-2.0-flash-exp", name: "Gemini 2.0 Flash", providers: ["google"], }, ]; const SUBMITTING_TIMEOUT = 200; const STREAMING_TIMEOUT = 2000; interface AttachmentItemProps { attachment: AttachmentData; onRemove: (id: string) => void; } const AttachmentItem = memo(({ attachment, onRemove }: AttachmentItemProps) => { const handleRemove = useCallback( () => onRemove(attachment.id), [onRemove, attachment.id] ); return ( ); }); AttachmentItem.displayName = "AttachmentItem"; interface SourceItemProps { source: AttachmentData; onRemove: (id: string) => void; } const SourceItem = memo(({ source, onRemove }: SourceItemProps) => { const handleRemove = useCallback( () => onRemove(source.id), [onRemove, source.id] ); return ( ); }); SourceItem.displayName = "SourceItem"; interface ModelItemProps { m: (typeof models)[0]; selectedModel: string; onSelect: (id: string) => void; } const ModelItem = memo(({ m, selectedModel, onSelect }: ModelItemProps) => { const handleSelect = useCallback(() => onSelect(m.id), [onSelect, m.id]); return ( {m.name} {m.providers.map((provider) => ( ))} {selectedModel === m.id ? ( ) : (

)} ); }); ModelItem.displayName = "ModelItem"; interface SourceCommandItemProps { source: SourceDocumentUIPart; onAdd: (source: SourceDocumentUIPart) => void; } const SourceCommandItem = memo(({ source, onAdd }: SourceCommandItemProps) => { const handleSelect = useCallback(() => onAdd(source), [onAdd, source]); return (

{source.title} {source.filename}

); }); SourceCommandItem.displayName = "SourceCommandItem"; const sampleSources: SourceDocumentUIPart[] = [ { filename: "packages/elements/src", mediaType: "text/plain", sourceId: "1", title: "prompt-input.tsx", type: "source-document", }, { filename: "apps/test/app/examples", mediaType: "text/plain", sourceId: "2", title: "queue.tsx", type: "source-document", }, { filename: "packages/elements/src", mediaType: "text/plain", sourceId: "3", title: "queue.tsx", type: "source-document", }, ]; const sampleTabs = { active: [{ path: "packages/elements/src/task-queue-panel.tsx" }], recents: [ { path: "apps/test/app/examples/task-queue-panel.tsx" }, { path: "apps/test/app/page.tsx" }, { path: "packages/elements/src/task.tsx" }, { path: "apps/test/app/examples/prompt-input.tsx" }, { path: "packages/elements/src/queue.tsx" }, { path: "apps/test/app/examples/queue.tsx" }, ], }; const PromptInputAttachmentsDisplay = () => { const attachments = usePromptInputAttachments(); const handleRemove = useCallback( (id: string) => attachments.remove(id), [attachments] ); if (attachments.files.length === 0) { return null; } return ( {attachments.files.map((attachment) => ( ))} ); }; const PromptInputReferencedSourcesDisplay = () => { const refs = usePromptInputReferencedSources(); const handleRemove = useCallback((id: string) => refs.remove(id), [refs]); if (refs.sources.length === 0) { return null; } return ( {refs.sources.map((source) => ( ))} ); }; const SampleFilesMenu = () => { const refs = usePromptInputReferencedSources(); const handleAdd = useCallback( (source: SourceDocumentUIPart) => refs.add(source), [refs] ); return ( No results found. Active Tabs ✓ {sampleSources .filter( (source) => !refs.sources.some( (s) => s.title === source.title && s.filename === source.filename ) ) .map((source) => ( ))} ); }; const Example = () => { const [model, setModel] = useState(models[0].id); const [modelSelectorOpen, setModelSelectorOpen] = useState(false); const [status, setStatus] = useState< "submitted" | "streaming" | "ready" | "error" >("ready"); const selectedModelData = models.find((m) => m.id === model); const handleModelSelect = useCallback((id: string) => { setModel(id); setModelSelectorOpen(false); }, []); const handleSubmit = useCallback((message: PromptInputMessage) => { const hasText = Boolean(message.text); const hasAttachments = Boolean(message.files?.length); if (!(hasText || hasAttachments)) { return; } setStatus("submitted"); setTimeout(() => { setStatus("streaming"); }, SUBMITTING_TIMEOUT); setTimeout(() => { setStatus("ready"); }, STREAMING_TIMEOUT); }, []); return (

Attached Project Rules

Always Apply:

ultracite.mdc

Click to manage

1 Tab Active Tabs {sampleTabs.active.map((tab) => ( {tab.path} ))} Recents {sampleTabs.recents.map((tab) => ( {tab.path} ))}

Only file paths are included

{selectedModelData?.chefSlug && ( )} {selectedModelData?.name && ( {selectedModelData.name} )} No models found. {["OpenAI", "Anthropic", "Google"].map((chef) => ( {models .filter((m) => m.chef === chef) .map((m) => ( ))} ))}

); }; export default Example; 50:["$","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":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","ai",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/ai","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"ai"}]]}]}],["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}]]}],["$","$L51",null,{"namespace":"@ai-elements","registryDependencies":["https://elements.ai-sdk.dev/attachments.json","https://elements.ai-sdk.dev/model-selector.json","https://elements.ai-sdk.dev/prompt-input.json","button"]}]]}],null]}],["$","$L52",null,{"files":[{"path":"registry/default/examples/prompt-input-cursor.tsx","content":"$53","type":"registry:block","target":"components/ai-elements/example-prompt-input-cursor.tsx"}],"className":"h-[70svh] min-h-80"}]]}]