shadcn.io is not affiliated with official shadcn/ui
Files Prompt AI Block for React Aria
A prompt box that budgets its files: a drop zone, one row per file with its size, estimated tokens and a Queued, Reading, Ready bar, a context meter against a 32K or 128K window, and a request preview.
Installation
Overview
Show people what their files will cost before they send, with this file-aware prompt for React with React Aria. A Textarea holds the question, and a File Upload drop zone takes real files or a typed sample. Each file is a row with a glyph, its name, its size, "about 7.2K tokens" worked out from the size, and a state, Queued, Reading, Ready, shown by a Progress bar that fills over 1.2 seconds. A context meter shows how much of the chosen window, 32K or 128K, the prompt and the files use; a file that does not fit says "Skipped: no room" and a problem line says by how much. A Switch names the files in the prompt, and the request preview follows every change. The Shine Button sends, the only colored control. It's built from Textarea, File Upload, Progress, Native Select, Switch, Button, Shine Button and Guides, with a CSS entrance only. For contract review, research and any assistant that reads attachments.
FAQ
Are my files uploaded or read?
No. The browser gives the page each file's name and size and nothing else is used: the contents are never read, uploaded or stored, and the rows disappear with the tab. Send builds the request line and says "Request ready. Nothing was uploaded or sent: this demo has no model." To make it real, upload the files to your storage in the accept handler, and let your server report the Queued, Reading and Ready states in place of the timer.
How are the token counts worked out?
A file's tokens are its size in bytes divided by four, and the prompt's are its length divided by four. These are rough rules, not a tokenizer, and the page says so. The meter adds the prompt and every file that fits, in the order they were added; a file that would overflow the window is skipped and listed under "Skipped", and the files after it are still tried.
How do I change the windows or the samples?
The window select reads WINDOWS (32K and 128K here) and the sample files come from SAMPLES, each a name and a size in bytes. Add a window by adding its size as a string and giving it a label in windowLabel.
How does it work from the keyboard?
Enter sends and Shift+Enter breaks the line. Browse and Add a sample file are buttons; every row has a Remove button named for its file, and after a removal focus moves to the Files heading so it never falls to the page. The window is a native select and the switch is named.