50: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"] 51: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"] 52:T1d7d,"use client"; import { Attachment, 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, PromptInputActionAddAttachments, PromptInputActionAddScreenshot, PromptInputActionMenu, PromptInputActionMenuContent, PromptInputActionMenuTrigger, PromptInputBody, PromptInputButton, PromptInputFooter, PromptInputProvider, PromptInputSubmit, PromptInputTextarea, PromptInputTools, usePromptInputAttachments, } from "@/components/ai-elements/prompt-input"; import { CheckIcon, GlobeIcon } 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: { id: string; type: "file"; filename?: string; mediaType?: string; url: string; }; onRemove: (id: string) => void; } const AttachmentItem = memo(({ attachment, onRemove }: AttachmentItemProps) => { const handleRemove = useCallback( () => onRemove(attachment.id), [onRemove, attachment.id] ); return ( ); }); AttachmentItem.displayName = "AttachmentItem"; 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"; 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 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"); // eslint-disable-next-line no-console console.log("Submitting message:", message); setTimeout(() => { setStatus("streaming"); }, SUBMITTING_TIMEOUT); setTimeout(() => { setStatus("ready"); }, STREAMING_TIMEOUT); }, []); return (

Search {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; 4f:["$","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","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"}]]}]}]]}],["$","$L50",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"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/default/examples/prompt-input.tsx","content":"$52","type":"registry:block","target":"components/ai-elements/example-prompt-input.tsx"}],"className":"h-[70svh] min-h-80"}]]}]