4f: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"] 50: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"] 51:T88f7,"use client" import { Children, createContext, Fragment, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState, type ChangeEvent, type ChangeEventHandler, type ClipboardEventHandler, type ComponentProps, type FormEvent, type FormEventHandler, type HTMLAttributes, type KeyboardEventHandler, type PropsWithChildren, type ReactNode, type RefObject, } from "react" import type { ChatStatus, FileUIPart } from "ai" import { ImageIcon, Loader2Icon, MicIcon, PaperclipIcon, PlusIcon, SendIcon, SquareIcon, XIcon, } from "lucide-react" import { nanoid } from "nanoid" import { cn } from "@/lib/utils" import { Button } from "@/registry/new-york/ui/button" import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, } from "@/registry/new-york/ui/command" import { HoverCard, HoverCardContent } from "@/registry/new-york/ui/hover-card" import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupTextarea, } from "@/registry/new-york/ui/input-group" import { Menu, MenuItem, MenuTrigger } from "@/registry/new-york/ui/menu" import { Select, SelectItem } from "@/registry/new-york/ui/select" import { Tooltip, TooltipTrigger } from "@/registry/new-york/ui/tooltip" // ============================================================================ // Provider Context & Types // ============================================================================ export type AttachmentsContext = { files: (FileUIPart & { id: string })[] add: (files: File[] | FileList) => void remove: (id: string) => void clear: () => void openFileDialog: () => void fileInputRef: RefObject } export type TextInputContext = { value: string setInput: (v: string) => void clear: () => void } export type PromptInputControllerProps = { textInput: TextInputContext attachments: AttachmentsContext /** INTERNAL: Allows PromptInput to register its file textInput + "open" callback */ __registerFileInput: ( ref: RefObject, open: () => void ) => void } const PromptInputController = createContext( null ) const ProviderAttachmentsContext = createContext( null ) export const usePromptInputController = () => { const ctx = useContext(PromptInputController) if (!ctx) { throw new Error( "Wrap your component inside to use usePromptInputController()." ) } return ctx } // Optional variants (do NOT throw). Useful for dual-mode components. const useOptionalPromptInputController = () => useContext(PromptInputController) export const useProviderAttachments = () => { const ctx = useContext(ProviderAttachmentsContext) if (!ctx) { throw new Error( "Wrap your component inside to use useProviderAttachments()." ) } return ctx } const useOptionalProviderAttachments = () => useContext(ProviderAttachmentsContext) export type PromptInputProviderProps = PropsWithChildren<{ initialInput?: string }> /** * Optional global provider that lifts PromptInput state outside of PromptInput. * If you don't use it, PromptInput stays fully self-managed. */ export function PromptInputProvider({ initialInput: initialTextInput = "", children, }: PromptInputProviderProps) { // ----- textInput state const [textInput, setTextInput] = useState(initialTextInput) const clearInput = useCallback(() => setTextInput(""), []) // ----- attachments state (global when wrapped) const [attachements, setAttachements] = useState< (FileUIPart & { id: string })[] >([]) const fileInputRef = useRef(null) const openRef = useRef<() => void>(() => {}) const add = useCallback((files: File[] | FileList) => { const incoming = Array.from(files) if (incoming.length === 0) return setAttachements((prev) => prev.concat( incoming.map((file) => ({ id: nanoid(), type: "file" as const, url: URL.createObjectURL(file), mediaType: file.type, filename: file.name, })) ) ) }, []) const remove = useCallback((id: string) => { setAttachements((prev) => { const found = prev.find((f) => f.id === id) if (found?.url) URL.revokeObjectURL(found.url) return prev.filter((f) => f.id !== id) }) }, []) const clear = useCallback(() => { setAttachements((prev) => { for (const f of prev) if (f.url) URL.revokeObjectURL(f.url) return [] }) }, []) const openFileDialog = useCallback(() => { openRef.current?.() }, []) const attachments = useMemo( () => ({ files: attachements, add, remove, clear, openFileDialog, fileInputRef, }), [attachements, add, remove, clear, openFileDialog] ) const __registerFileInput = useCallback( (ref: RefObject, open: () => void) => { fileInputRef.current = ref.current openRef.current = open }, [] ) const controller = useMemo( () => ({ textInput: { value: textInput, setInput: setTextInput, clear: clearInput, }, attachments, __registerFileInput, }), [textInput, clearInput, attachments, __registerFileInput] ) return ( {children} ) } // ============================================================================ // Component Context & Hooks // ============================================================================ const LocalAttachmentsContext = createContext(null) export const usePromptInputAttachments = () => { // Dual-mode: prefer provider if present, otherwise use local const provider = useOptionalProviderAttachments() const local = useContext(LocalAttachmentsContext) const context = provider ?? local if (!context) { throw new Error( "usePromptInputAttachments must be used within a PromptInput or PromptInputProvider" ) } return context } export type PromptInputAttachmentProps = HTMLAttributes & { data: FileUIPart & { id: string } className?: string } export function PromptInputAttachment({ data, className, ...props }: PromptInputAttachmentProps) { const attachments = usePromptInputAttachments() const mediaType = data.mediaType?.startsWith("image/") && data.url ? "image" : "file" return (

{mediaType === "image" ? (

) : (

{data.filename || "Unknown file"}

{data.mediaType &&

{data.mediaType}

}

)}

) } export type PromptInputAttachmentsProps = Omit< HTMLAttributes, "children" > & { children: (attachment: FileUIPart & { id: string }) => ReactNode } export function PromptInputAttachments({ className, children, ...props }: PromptInputAttachmentsProps) { const attachments = usePromptInputAttachments() const [height, setHeight] = useState(0) const contentRef = useRef(null) useLayoutEffect(() => { const el = contentRef.current if (!el) { return } const ro = new ResizeObserver(() => { setHeight(el.getBoundingClientRect().height) }) ro.observe(el) setHeight(el.getBoundingClientRect().height) return () => ro.disconnect() }, []) // biome-ignore lint/correctness/useExhaustiveDependencies: Force height measurement when attachments change useLayoutEffect(() => { const el = contentRef.current if (!el) { return } setHeight(el.getBoundingClientRect().height) }, [attachments.files.length]) if (attachments.files.length === 0) { return null } return (

{attachments.files .filter((f) => !(f.mediaType?.startsWith("image/") && f.url)) .map((file) => ( {children(file)} ))}

{attachments.files .filter((f) => f.mediaType?.startsWith("image/") && f.url) .map((file) => ( {children(file)} ))}

) } export type PromptInputActionAddAttachmentsProps = ComponentProps< typeof MenuItem > & { label?: string } export const PromptInputActionAddAttachments = ({ label = "Add photos or files", ...props }: PromptInputActionAddAttachmentsProps) => { const attachments = usePromptInputAttachments() return ( { attachments.openFileDialog() }} > {label} ) } export type PromptInputMessage = { text?: string files?: FileUIPart[] } export type PromptInputProps = Omit< HTMLAttributes, "onSubmit" | "onError" > & { accept?: string // e.g., "image/*" or leave undefined for any multiple?: boolean // When true, accepts drops anywhere on document. Default false (opt-in). globalDrop?: boolean // Render a hidden input with given name and keep it in sync for native form posts. Default false. syncHiddenInput?: boolean // Minimal constraints maxFiles?: number maxFileSize?: number // bytes onError?: (err: { code: "max_files" | "max_file_size" | "accept" message: string }) => void onSubmit: ( message: PromptInputMessage, event: FormEvent ) => void | Promise } export const PromptInput = ({ className, accept, multiple, globalDrop, syncHiddenInput, maxFiles, maxFileSize, onError, onSubmit, children, ...props }: PromptInputProps) => { // Try to use a provider controller if present const controller = useOptionalPromptInputController() const usingProvider = !!controller // Refs const inputRef = useRef(null) const anchorRef = useRef(null) const formRef = useRef(null) // Find nearest form to scope drag & drop useEffect(() => { const root = anchorRef.current?.closest("form") if (root instanceof HTMLFormElement) { formRef.current = root } }, []) // ----- Local attachments (only used when no provider) const [items, setItems] = useState<(FileUIPart & { id: string })[]>([]) const files = usingProvider ? controller.attachments.files : items const openFileDialogLocal = useCallback(() => { inputRef.current?.click() }, []) const matchesAccept = useCallback( (f: File) => { if (!accept || accept.trim() === "") { return true } if (accept.includes("image/*")) { return f.type.startsWith("image/") } // NOTE: keep simple; expand as needed return true }, [accept] ) const addLocal = useCallback( (fileList: File[] | FileList) => { const incoming = Array.from(fileList) const accepted = incoming.filter((f) => matchesAccept(f)) if (incoming.length && accepted.length === 0) { onError?.({ code: "accept", message: "No files match the accepted types.", }) return } const withinSize = (f: File) => maxFileSize ? f.size <= maxFileSize : true const sized = accepted.filter(withinSize) if (accepted.length > 0 && sized.length === 0) { onError?.({ code: "max_file_size", message: "All files exceed the maximum size.", }) return } setItems((prev) => { const capacity = typeof maxFiles === "number" ? Math.max(0, maxFiles - prev.length) : undefined const capped = typeof capacity === "number" ? sized.slice(0, capacity) : sized if (typeof capacity === "number" && sized.length > capacity) { onError?.({ code: "max_files", message: "Too many files. Some were not added.", }) } const next: (FileUIPart & { id: string })[] = [] for (const file of capped) { next.push({ id: nanoid(), type: "file", url: URL.createObjectURL(file), mediaType: file.type, filename: file.name, }) } return prev.concat(next) }) }, [matchesAccept, maxFiles, maxFileSize, onError] ) const add = usingProvider ? (files: File[] | FileList) => controller.attachments.add(files) : addLocal const remove = usingProvider ? (id: string) => controller.attachments.remove(id) : (id: string) => setItems((prev) => { const found = prev.find((file) => file.id === id) if (found?.url) { URL.revokeObjectURL(found.url) } return prev.filter((file) => file.id !== id) }) const clear = usingProvider ? () => controller.attachments.clear() : () => setItems((prev) => { for (const file of prev) { if (file.url) { URL.revokeObjectURL(file.url) } } return [] }) const openFileDialog = usingProvider ? () => controller.attachments.openFileDialog() : openFileDialogLocal // Let provider know about our hidden file input so external menus can call openFileDialog() useEffect(() => { if (!usingProvider) return controller.__registerFileInput(inputRef, () => inputRef.current?.click()) }, [usingProvider, controller]) // Note: File input cannot be programmatically set for security reasons // The syncHiddenInput prop is no longer functional useEffect(() => { if (syncHiddenInput && inputRef.current && files.length === 0) { inputRef.current.value = "" } }, [files, syncHiddenInput]) // Attach drop handlers on nearest form and document (opt-in) useEffect(() => { const form = formRef.current if (!form) return const onDragOver = (e: DragEvent) => { if (e.dataTransfer?.types?.includes("Files")) { e.preventDefault() } } const onDrop = (e: DragEvent) => { if (e.dataTransfer?.types?.includes("Files")) { e.preventDefault() } if (e.dataTransfer?.files && e.dataTransfer.files.length > 0) { add(e.dataTransfer.files) } } form.addEventListener("dragover", onDragOver) form.addEventListener("drop", onDrop) return () => { form.removeEventListener("dragover", onDragOver) form.removeEventListener("drop", onDrop) } }, [add]) useEffect(() => { if (!globalDrop) return const onDragOver = (e: DragEvent) => { if (e.dataTransfer?.types?.includes("Files")) { e.preventDefault() } } const onDrop = (e: DragEvent) => { if (e.dataTransfer?.types?.includes("Files")) { e.preventDefault() } if (e.dataTransfer?.files && e.dataTransfer.files.length > 0) { add(e.dataTransfer.files) } } document.addEventListener("dragover", onDragOver) document.addEventListener("drop", onDrop) return () => { document.removeEventListener("dragover", onDragOver) document.removeEventListener("drop", onDrop) } }, [add, globalDrop]) useEffect( () => () => { if (!usingProvider) { for (const f of files) { if (f.url) URL.revokeObjectURL(f.url) } } }, [usingProvider, files] ) const handleChange: ChangeEventHandler = (event) => { if (event.currentTarget.files) { add(event.currentTarget.files) } } const convertBlobUrlToDataUrl = async (url: string): Promise => { const response = await fetch(url) const blob = await response.blob() return new Promise((resolve, reject) => { const reader = new FileReader() reader.onloadend = () => resolve(reader.result as string) reader.onerror = reject reader.readAsDataURL(blob) }) } const ctx = useMemo( () => ({ files: files.map((item) => ({ ...item, id: item.id })), add, remove, clear, openFileDialog, fileInputRef: inputRef, }), [files, add, remove, clear, openFileDialog] ) const handleSubmit: FormEventHandler = (event) => { event.preventDefault() const form = event.currentTarget const text = usingProvider ? controller.textInput.value : (() => { const formData = new FormData(form) return (formData.get("message") as string) || "" })() // Reset form immediately after capturing text to avoid race condition // where user input during async blob conversion would be lost if (!usingProvider) { form.reset() } // Convert blob URLs to data URLs asynchronously Promise.all( files.map(async ({ id, ...item }) => { if (item.url && item.url.startsWith("blob:")) { return { ...item, url: await convertBlobUrlToDataUrl(item.url), } } return item }) ).then((convertedFiles: FileUIPart[]) => { try { const result = onSubmit({ text, files: convertedFiles }, event) // Handle both sync and async onSubmit if (result instanceof Promise) { result .then(() => { clear() if (usingProvider) { controller.textInput.clear() } }) .catch(() => { // Don't clear on error - user may want to retry }) } else { // Sync function completed without throwing, clear attachments clear() if (usingProvider) { controller.textInput.clear() } } } catch (error) { // Don't clear on error - user may want to retry } }) } // Render with or without local provider const inner = ( <> ) return usingProvider ? ( inner ) : ( {inner} ) } export type PromptInputBodyProps = HTMLAttributes export const PromptInputBody = ({ className, ...props }: PromptInputBodyProps) => (

) export type PromptInputTextareaProps = ComponentProps export const PromptInputTextarea = ({ onChange, className, placeholder = "What would you like to know?", ...props }: PromptInputTextareaProps) => { const controller = useOptionalPromptInputController() const attachments = usePromptInputAttachments() const [isComposing, setIsComposing] = useState(false) const handleKeyDown: KeyboardEventHandler = (e) => { if (e.key === "Enter") { if (isComposing || e.nativeEvent.isComposing) { return } if (e.shiftKey) { return } e.preventDefault() e.currentTarget.form?.requestSubmit() } // Remove last attachment when Backspace is pressed and textarea is empty if ( e.key === "Backspace" && e.currentTarget.value === "" && attachments.files.length > 0 ) { e.preventDefault() const lastAttachment = attachments.files.at(-1) if (lastAttachment) { attachments.remove(lastAttachment.id) } } } const handlePaste: ClipboardEventHandler = (event) => { const items = event.clipboardData?.items if (!items) { return } const files: File[] = [] for (const item of items) { if (item.kind === "file") { const file = item.getAsFile() if (file) { files.push(file) } } } if (files.length > 0) { event.preventDefault() attachments.add(files) } } const controlledProps = controller ? { value: controller.textInput.value, onChange: (e: ChangeEvent) => { controller.textInput.setInput(e.currentTarget.value) onChange?.(e) }, } : { onChange, } return ( setIsComposing(false)} onCompositionStart={() => setIsComposing(true)} onKeyDown={handleKeyDown} onPaste={handlePaste} placeholder={placeholder} {...props} {...controlledProps} /> ) } export type PromptInputHeaderProps = Omit< ComponentProps, "align" > export const PromptInputHeader = ({ className, ...props }: PromptInputHeaderProps) => ( ) export type PromptInputFooterProps = Omit< ComponentProps, "align" > export const PromptInputFooter = ({ className, ...props }: PromptInputFooterProps) => ( ) export type PromptInputToolsProps = HTMLAttributes export const PromptInputTools = ({ className, ...props }: PromptInputToolsProps) => (

) export type PromptInputButtonProps = ComponentProps export const PromptInputButton = ({ variant = "ghost", className, size, ...props }: PromptInputButtonProps) => { const newSize = size ?? (Children.count(props.children) > 1 ? "sm" : "icon-sm") return ( ) } export type PromptInputActionMenuProps = ComponentProps export const PromptInputActionMenu = (props: PromptInputActionMenuProps) => ( ) export type PromptInputActionMenuTriggerProps = PromptInputButtonProps export const PromptInputActionMenuTrigger = ({ className, children, ...props }: PromptInputActionMenuTriggerProps) => ( {children ?? } ) export type PromptInputActionMenuContentProps = ComponentProps export const PromptInputActionMenuContent = ({ className, ...props }: PromptInputActionMenuContentProps) => ( ) export type PromptInputActionMenuItemProps = ComponentProps export const PromptInputActionMenuItem = ({ className, ...props }: PromptInputActionMenuItemProps) => ( ) // Note: Actions that perform side-effects (like opening a file dialog) // are provided in opt-in modules (e.g., prompt-input-attachments). export type PromptInputSubmitProps = ComponentProps & { status?: ChatStatus } export const PromptInputSubmit = ({ className, variant = "default", size = "icon-sm", status, children, ...props }: PromptInputSubmitProps) => { let Icon = if (status === "submitted") { Icon = } else if (status === "streaming") { Icon = } else if (status === "error") { Icon = } return ( {children ?? Icon} ) } interface SpeechRecognition extends EventTarget { continuous: boolean interimResults: boolean lang: string start(): void stop(): void onstart: ((this: SpeechRecognition, ev: Event) => any) | null onend: ((this: SpeechRecognition, ev: Event) => any) | null onresult: | ((this: SpeechRecognition, ev: SpeechRecognitionEvent) => any) | null onerror: | ((this: SpeechRecognition, ev: SpeechRecognitionErrorEvent) => any) | null } interface SpeechRecognitionEvent extends Event { results: SpeechRecognitionResultList } type SpeechRecognitionResultList = { readonly length: number item(index: number): SpeechRecognitionResult [index: number]: SpeechRecognitionResult } type SpeechRecognitionResult = { readonly length: number item(index: number): SpeechRecognitionAlternative [index: number]: SpeechRecognitionAlternative isFinal: boolean } type SpeechRecognitionAlternative = { transcript: string confidence: number } interface SpeechRecognitionErrorEvent extends Event { error: string } declare global { interface Window { SpeechRecognition: { new (): SpeechRecognition } webkitSpeechRecognition: { new (): SpeechRecognition } } } export type PromptInputSpeechButtonProps = ComponentProps< typeof PromptInputButton > & { textareaRef?: RefObject onTranscriptionChange?: (text: string) => void } export const PromptInputSpeechButton = ({ className, textareaRef, onTranscriptionChange, ...props }: PromptInputSpeechButtonProps) => { const [isListening, setIsListening] = useState(false) const [recognition, setRecognition] = useState(null) const recognitionRef = useRef(null) useEffect(() => { if ( typeof window !== "undefined" && ("SpeechRecognition" in window || "webkitSpeechRecognition" in window) ) { const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition const speechRecognition = new SpeechRecognition() speechRecognition.continuous = true speechRecognition.interimResults = true speechRecognition.lang = "en-US" speechRecognition.onstart = () => { setIsListening(true) } speechRecognition.onend = () => { setIsListening(false) } speechRecognition.onresult = (event) => { let finalTranscript = "" const results = Array.from(event.results) for (const result of results) { if (result.isFinal) { finalTranscript += result[0].transcript } } if (finalTranscript && textareaRef?.current) { const textarea = textareaRef.current const currentValue = textarea.value const newValue = currentValue + (currentValue ? " " : "") + finalTranscript textarea.value = newValue textarea.dispatchEvent(new Event("input", { bubbles: true })) onTranscriptionChange?.(newValue) } } speechRecognition.onerror = (event) => { console.error("Speech recognition error:", event.error) setIsListening(false) } recognitionRef.current = speechRecognition setRecognition(speechRecognition) } return () => { if (recognitionRef.current) { recognitionRef.current.stop() } } }, [textareaRef, onTranscriptionChange]) const toggleListening = useCallback(() => { if (!recognition) { return } if (isListening) { recognition.stop() } else { recognition.start() } }, [recognition, isListening]) return ( ) } export type PromptInputModelSelectProps = ComponentProps> & { className?: string } export const PromptInputModelSelect = ({ className, ...props }: PromptInputModelSelectProps) => ( className={cn( "[&_button]:text-muted-foreground [&_button]:h-auto [&_button]:border-none [&_button]:bg-transparent [&_button]:px-2 [&_button]:py-1 [&_button]:font-medium [&_button]:shadow-none [&_button]:transition-colors", "[&_button:hover]:bg-accent [&_button:hover]:text-foreground [&_button[data-pressed]]:bg-accent [&_button[data-pressed]]:text-foreground", className )} {...props} /> ) export type PromptInputModelSelectItemProps = ComponentProps export const PromptInputModelSelectItem = ({ className, ...props }: PromptInputModelSelectItemProps) => ( ) export type PromptInputHoverCardProps = ComponentProps export const PromptInputHoverCard = ({ delay = 0, closeDelay = 0, ...props }: PromptInputHoverCardProps) => ( ) export type PromptInputHoverCardContentProps = ComponentProps< typeof HoverCardContent > export const PromptInputHoverCardContent = ({ placement = "start", ...props }: PromptInputHoverCardContentProps) => ( ) export type PromptInputTabsListProps = HTMLAttributes export const PromptInputTabsList = ({ className, ...props }: PromptInputTabsListProps) =>

export type PromptInputTabProps = HTMLAttributes export const PromptInputTab = ({ className, ...props }: PromptInputTabProps) =>

export type PromptInputTabLabelProps = HTMLAttributes export const PromptInputTabLabel = ({ className, ...props }: PromptInputTabLabelProps) => (

) export type PromptInputTabBodyProps = HTMLAttributes export const PromptInputTabBody = ({ className, ...props }: PromptInputTabBodyProps) => (
) export type PromptInputTabItemProps = HTMLAttributes export const PromptInputTabItem = ({ className, ...props }: PromptInputTabItemProps) => (
) export type PromptInputCommandProps = ComponentProps export const PromptInputCommand = ({ className, ...props }: PromptInputCommandProps) => export type PromptInputCommandInputProps = ComponentProps export const PromptInputCommandInput = ({ className, ...props }: PromptInputCommandInputProps) => ( ) export type PromptInputCommandListProps = ComponentProps export const PromptInputCommandList = ({ className, ...props }: PromptInputCommandListProps) => ( ) export type PromptInputCommandEmptyProps = ComponentProps export const PromptInputCommandEmpty = ({ className, ...props }: PromptInputCommandEmptyProps) => ( ) export type PromptInputCommandGroupProps = ComponentProps export const PromptInputCommandGroup = ({ className, ...props }: PromptInputCommandGroupProps) => ( ) export type PromptInputCommandItemProps = ComponentProps export const PromptInputCommandItem = ({ className, ...props }: PromptInputCommandItemProps) => ( ) export type PromptInputCommandSeparatorProps = ComponentProps< typeof CommandSeparator > export const PromptInputCommandSeparator = ({ className, ...props }: PromptInputCommandSeparatorProps) => ( ) 4e:["$","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","nanoid",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/nanoid","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":"nanoid"}]]}]}]]}],["$","$L4f",null,{"namespace":"@taki","registryDependencies":["https://taki-ui.com/r/button.json","https://taki-ui.com/r/command.json","https://taki-ui.com/r/menu.json","https://taki-ui.com/r/hover-card.json","https://taki-ui.com/r/input-group.json","https://taki-ui.com/r/select.json","https://taki-ui.com/r/tooltip.json"]}]]}],null]}],["$","$L50",null,{"files":[{"path":"registry/new-york/ai-elements/prompt-input.tsx","content":"$51","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]