# Prompt Input > An auto-growing composer with attachments by click, paste or drop, a token counter and a send button that becomes Stop. Category: AI. Docs: https://neonkit.heyaadi.com/components/prompt-input ## Installation ```bash npx shadcn@latest add https://neonkit.heyaadi.com/r/prompt-input.json ``` With the `@neonkit` namespace configured: `npx shadcn@latest add @neonkit/prompt-input`. npm dependencies: none. Also needs `lib/utils.ts` (`cn`) and `lib/neon.ts` (`neonVars`), which the CLI adds. Builds on: [Icons](https://neonkit.heyaadi.com/components/icons.md). The CLI installs them too. ## Usage ```tsx import { PromptInput } from "@/components/ui/prompt-input" send(text, attachments)} streaming={streaming} onStop={stop} /> ``` ## Examples ### Composer The edge brightens while you type and settles when you pause. The send button lights once there's something to send, and turns into Stop while a reply arrives. ```tsx "use client"; import * as React from "react"; import { Globe } from "@/components/ui/icons"; import { PromptInput, type PromptMessage } from "@/components/ui/prompt-input"; import { Select } from "@/components/ui/select"; import { Toggle } from "@/components/ui/toggle-group"; const MODELS = [ { value: "argon-2", label: "Argon 2", description: "Best for code review and refactors" }, { value: "argon-2-mini", label: "Argon 2 Mini", description: "Faster, for quick questions" }, ]; export default function PromptInputDemo() { const [model, setModel] = React.useState("argon-2"); const [web, setWeb] = React.useState(false); const [streaming, setStreaming] = React.useState(false); const [sent, setSent] = React.useState(null); const timer = React.useRef | undefined>(undefined); React.useEffect(() => () => clearTimeout(timer.current), []); const send = (message: PromptMessage) => { setSent(message); setStreaming(true); timer.current = setTimeout(() => setStreaming(false), 4000); }; return (
{ clearTimeout(timer.current); setStreaming(false); }} onSubmit={send} toolbar={ <> . | | `maxFiles` | `number` | — | Files past this are rejected with reason "count". | | `maxFileSize` | `number` | — | Bytes per file. | | `onRejectFiles` | `(files: File[], reason: "type" \| "size" \| "count") => void` | — | Called with the files that didn't make it. | | `toolbar` | `ReactNode` | — | Controls after the clip: a model picker, tool toggles. | | `counter` | `"characters" \| "tokens"` | — | Show a running count next to send. | | `limit` | `number` | — | Upper bound for the counter. Over it, send is disabled. | | `countTokens` | `(text: string) => number` | `length / 4` | Swap in a real tokenizer for exact counts. | | `color` | `NeonColor` | `inherited` | Palette name or hex. Falls back to --neon-accent, then cyan. | ## Accessibility - Enter is ignored while an IME composition is open, so confirming Japanese, Chinese or Korean input never sends half a word. - The textarea is labelled and points at the counter with aria-describedby; going over the limit sets aria-invalid. - Send is a real submit button; it's disabled until there's text or a file. Stop is a separate button named Stop. - Each attachment chip has a Remove button named after the file. Removing one returns focus to the textarea. - Image previews use object URLs that are revoked when the chip is removed or the composer unmounts; sent ones are left for you to show. - Under prefers-reduced-motion the send button lights without the flicker. ## Source `components/ui/prompt-input.tsx` ```tsx "use client"; import * as React from "react"; import { ArrowUp, Paperclip, X } from "@/components/ui/icons"; import { cn } from "@/lib/utils"; import { neonVars, type NeonColor } from "@/lib/neon"; const css = ` @keyframes nk-prompt-ignite{0%{filter:brightness(.35) saturate(.6)}9%{filter:brightness(1.35)}15%{filter:brightness(.55)}26%{filter:brightness(1.2)}38%{filter:brightness(.85)}100%{filter:none}} .nk-prompt-ignite{animation:nk-prompt-ignite 460ms linear both} @media (prefers-reduced-motion:reduce){.nk-prompt-ignite{animation:none}} `; const useIsomorphicLayoutEffect = typeof window !== "undefined" ? React.useLayoutEffect : React.useEffect; export interface PromptAttachment { id: string; name: string; /** Bytes. */ size?: number; /** MIME type. */ type?: string; /** Preview URL. Set automatically for images added from a file. */ url?: string; file?: File; } export interface PromptMessage { text: string; attachments: PromptAttachment[]; } export type PromptRejection = "type" | "size" | "count"; function matchesAccept(file: File, accept?: string) { if (!accept) return true; const name = file.name.toLowerCase(); const type = file.type.toLowerCase(); return accept .split(",") .map((rule) => rule.trim().toLowerCase()) .filter(Boolean) .some((rule) => { if (rule.startsWith(".")) return name.endsWith(rule); if (rule.endsWith("/*")) return type.startsWith(rule.slice(0, -1)); return type === rule; }); } function formatBytes(bytes?: number) { if (bytes === undefined) return ""; if (bytes < 1024) return `${bytes} B`; if (bytes < 1024 * 1024) return `${Math.round(bytes / 1024)} KB`; return `${(bytes / (1024 * 1024)).toFixed(1)} MB`; } function extension(name: string) { const ext = name.includes(".") ? name.split(".").pop() : ""; return (ext ?? "").slice(0, 4).toLowerCase() || "file"; } /** About four characters per token for English prose and code. Pass your own counter for exact numbers. */ function estimateTokens(text: string) { return text.trim() ? Math.ceil(text.length / 4) : 0; } const numberFormat = new Intl.NumberFormat("en-US"); const iconButton = cn( "inline-flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-lg text-white/55 outline-none", "transition-[background-color,color,transform] duration-150 ease-out hover:bg-white/[0.06] hover:text-white/90 active:scale-[0.94]", "focus-visible:ring-2 focus-visible:ring-[rgb(var(--neon)/0.6)] focus-visible:ring-offset-1 focus-visible:ring-offset-[#0a0c12]", "disabled:pointer-events-none disabled:opacity-40 [&_svg]:size-4", ); export interface PromptInputProps extends Omit, "onSubmit" | "color" | "onChange" | "defaultValue"> { value?: string; defaultValue?: string; onValueChange?: (value: string) => void; /** Called with the text and attachments. Uncontrolled state clears afterwards. */ onSubmit?: (message: PromptMessage) => void; placeholder?: string; /** Accessible name of the textarea. */ label?: string; minRows?: number; maxRows?: number; /** Which key sends. The other combination (or Shift+Enter) adds a newline. */ submitOn?: "enter" | "mod-enter"; /** A reply is arriving: the send button becomes Stop, and Escape stops too. */ streaming?: boolean; onStop?: () => void; disabled?: boolean; attachments?: PromptAttachment[]; defaultAttachments?: PromptAttachment[]; onAttachmentsChange?: (attachments: PromptAttachment[]) => void; /** Turns off the attach button, paste and drop. */ allowAttachments?: boolean; /** File types, as in ``. */ accept?: string; maxFiles?: number; /** Bytes per file. */ maxFileSize?: number; onRejectFiles?: (files: File[], reason: PromptRejection) => void; /** Controls after the attach button: a model picker, tool toggles. */ toolbar?: React.ReactNode; /** Show a running count. */ counter?: "characters" | "tokens"; /** Upper bound for the counter. Going over disables send. */ limit?: number; /** Replaces the four-characters-per-token estimate. */ countTokens?: (text: string) => number; autoFocus?: boolean; /** Form field name for the textarea. */ name?: string; color?: NeonColor; } const PromptInput = React.forwardRef( ( { value: valueProp, defaultValue = "", onValueChange, onSubmit, placeholder = "Write a message", label = "Message", minRows = 1, maxRows = 8, submitOn = "enter", streaming = false, onStop, disabled = false, attachments: attachmentsProp, defaultAttachments = [], onAttachmentsChange, allowAttachments = true, accept, maxFiles, maxFileSize, onRejectFiles, toolbar, counter, limit, countTokens = estimateTokens, autoFocus, name, className, style, color, ...props }, ref, ) => { const textareaRef = React.useRef(null); const fileRef = React.useRef(null); React.useImperativeHandle(ref, () => textareaRef.current as HTMLTextAreaElement); const id = React.useId(); const [innerValue, setInnerValue] = React.useState(defaultValue); const value = valueProp ?? innerValue; const [innerAttachments, setInnerAttachments] = React.useState(defaultAttachments); const attachments = attachmentsProp ?? innerAttachments; const attachmentsRef = React.useRef(attachments); React.useEffect(() => { attachmentsRef.current = attachments; }); const [typing, setTyping] = React.useState(false); const [dragging, setDragging] = React.useState(false); const typingTimer = React.useRef | undefined>(undefined); const dragDepth = React.useRef(0); const nextId = React.useRef(0); // Preview URLs this component created, revoked when their chip is removed or on unmount. const ownedUrls = React.useRef(new Set()); React.useEffect(() => { const urls = ownedUrls.current; return () => { clearTimeout(typingTimer.current); urls.forEach((url) => URL.revokeObjectURL(url)); }; }, []); const count = counter === "tokens" ? countTokens(value) : value.length; const over = limit !== undefined && count > limit; const near = limit !== undefined && !over && count >= limit * 0.9; const hasContent = value.trim().length > 0 || attachments.length > 0; const ready = hasContent && !over && !disabled && !streaming; const setValue = (next: string) => { if (valueProp === undefined) setInnerValue(next); onValueChange?.(next); }; const setAttachments = (next: PromptAttachment[]) => { attachmentsRef.current = next; if (attachmentsProp === undefined) setInnerAttachments(next); onAttachmentsChange?.(next); }; const resize = React.useCallback(() => { const el = textareaRef.current; if (!el) return; const styles = window.getComputedStyle(el); const lineHeight = parseFloat(styles.lineHeight) || parseFloat(styles.fontSize) * 1.5; const chrome = parseFloat(styles.paddingTop) + parseFloat(styles.paddingBottom); const min = lineHeight * minRows + chrome; const max = lineHeight * Math.max(maxRows, minRows) + chrome; el.style.height = `${min}px`; const next = Math.min(Math.max(el.scrollHeight, min), max); el.style.height = `${next}px`; el.style.overflowY = el.scrollHeight > max ? "auto" : "hidden"; }, [minRows, maxRows]); useIsomorphicLayoutEffect(() => { resize(); }, [resize, value]); React.useEffect(() => { const el = textareaRef.current; if (!el || typeof ResizeObserver === "undefined") return; let width = el.offsetWidth; const observer = new ResizeObserver(() => { if (el.offsetWidth === width) return; width = el.offsetWidth; resize(); }); observer.observe(el); return () => observer.disconnect(); }, [resize]); const addFiles = (files: File[]) => { if (!allowAttachments || disabled || files.length === 0) return; const wrongType = files.filter((file) => !matchesAccept(file, accept)); const tooBig = files.filter((file) => matchesAccept(file, accept) && maxFileSize !== undefined && file.size > maxFileSize); let accepted = files.filter((file) => !wrongType.includes(file) && !tooBig.includes(file)); if (wrongType.length) onRejectFiles?.(wrongType, "type"); if (tooBig.length) onRejectFiles?.(tooBig, "size"); const current = attachmentsRef.current; if (maxFiles !== undefined && current.length + accepted.length > maxFiles) { const room = Math.max(0, maxFiles - current.length); onRejectFiles?.(accepted.slice(room), "count"); accepted = accepted.slice(0, room); } if (!accepted.length) return; const added = accepted.map((file) => { let url: string | undefined; if (file.type.startsWith("image/") && typeof URL.createObjectURL === "function") { url = URL.createObjectURL(file); ownedUrls.current.add(url); } nextId.current += 1; return { id: `${id}-file-${nextId.current}`, name: file.name, size: file.size, type: file.type, url, file }; }); setAttachments([...current, ...added]); }; const removeAttachment = (attachment: PromptAttachment) => { if (attachment.url && ownedUrls.current.has(attachment.url)) { URL.revokeObjectURL(attachment.url); ownedUrls.current.delete(attachment.url); } setAttachments(attachmentsRef.current.filter((item) => item.id !== attachment.id)); textareaRef.current?.focus(); }; const submit = () => { if (!ready) return; const message = { text: value.trim(), attachments }; // The previews now belong to whoever shows the sent message. attachments.forEach((item) => item.url && ownedUrls.current.delete(item.url)); onSubmit?.(message); if (valueProp === undefined) setInnerValue(""); if (attachmentsProp === undefined) setInnerAttachments([]); attachmentsRef.current = attachmentsProp ?? []; setTyping(false); }; const onKeyDown = (event: React.KeyboardEvent) => { // Enter also confirms an IME composition (Japanese, Chinese, Korean); that must not send. if (event.nativeEvent.isComposing || event.keyCode === 229) return; if (event.key === "Escape" && streaming) { event.preventDefault(); onStop?.(); return; } if (event.key !== "Enter") return; const mod = event.metaKey || event.ctrlKey; const sends = submitOn === "enter" ? !event.shiftKey && !mod && !event.altKey : mod; if (!sends) return; event.preventDefault(); submit(); }; const onChange = (event: React.ChangeEvent) => { setValue(event.target.value); setTyping(true); clearTimeout(typingTimer.current); typingTimer.current = setTimeout(() => setTyping(false), 420); }; const onPaste = (event: React.ClipboardEvent) => { const files = Array.from(event.clipboardData?.files ?? []); if (!files.length || !allowAttachments) return; event.preventDefault(); addFiles(files); }; const hasFiles = (event: React.DragEvent) => Array.from(event.dataTransfer?.types ?? []).includes("Files"); const dropHandlers = allowAttachments ? { onDragEnter: (event: React.DragEvent) => { if (!hasFiles(event) || disabled) return; event.preventDefault(); dragDepth.current += 1; setDragging(true); }, onDragOver: (event: React.DragEvent) => { if (!hasFiles(event) || disabled) return; event.preventDefault(); event.dataTransfer.dropEffect = "copy"; }, onDragLeave: () => { dragDepth.current = Math.max(0, dragDepth.current - 1); if (dragDepth.current === 0) setDragging(false); }, onDrop: (event: React.DragEvent) => { if (!hasFiles(event)) return; event.preventDefault(); dragDepth.current = 0; setDragging(false); addFiles(Array.from(event.dataTransfer.files)); textareaRef.current?.focus(); }, } : {}; const countId = counter ? `${id}-count` : undefined; return (
{ event.preventDefault(); submit(); }} onMouseDown={(event) => { // Clicking the padding focuses the textarea, like one big field. const target = event.target as HTMLElement; if (target === event.currentTarget || target.dataset.slot === "body") { event.preventDefault(); textareaRef.current?.focus(); } }} className={cn( "[--neon:var(--neon-accent,34_211_238)]", "relative flex w-full cursor-text flex-col rounded-[14px] border border-white/10 bg-[#0a0c12] text-white/90", "shadow-[0_16px_40px_-24px_rgb(0_0_0/0.9)]", "transition-[border-color,box-shadow,background-color] duration-700 ease-[cubic-bezier(0.23,1,0.32,1)]", "hover:border-white/[0.16]", "focus-within:border-[rgb(var(--neon)/0.4)] focus-within:shadow-[0_0_0_1px_rgb(var(--neon)/0.06),0_0_18px_-8px_rgb(var(--neon)/CALC(0.4*var(--neon-glow,1))),0_16px_40px_-24px_rgb(0_0_0/0.9)]", "data-[typing]:duration-100 data-[typing]:focus-within:border-[rgb(var(--neon)/0.85)]", "data-[typing]:focus-within:shadow-[0_0_0_1px_rgb(var(--neon)/0.28),0_0_30px_-4px_rgb(var(--neon)/CALC(0.55*var(--neon-glow,1))),inset_0_0_18px_-8px_rgb(var(--neon)/CALC(0.3*var(--neon-glow,1))),0_16px_40px_-24px_rgb(0_0_0/0.9)]", disabled && "cursor-not-allowed opacity-55 hover:border-white/10", className, )} {...dropHandlers} {...props} > {attachments.length > 0 && (
    {attachments.map((attachment) => ( removeAttachment(attachment)} /> ))}
)}