Components
Loading preview...
An enhanced chat input component with file upload capabilities. It features an auto-resizing textarea, file attachment preview, and submit button. Features: • File upload with preview • Auto-resizing textarea • File type restrictions • File size limits • Dark mode support • Mobile responsiveness • Keyboard shortcuts • Animated UI elements
@kokonutd
npx shadcn@latest add https://21st.dev/r/kokonutd/ai-input-with-fileimport { AIInputWithFile } from "@/components/ui/ai-input-with-file"
export function AIInputWithFileDemo() {
const handleSubmit = (message: string, file?: File) => {
console.log('Message:', message);
console.log('File:', file);
};
return (
<div className="space-y-8 min-w-[400px]">
<AIInputWithFile
onSubmit={handleSubmit}
/>
</div>
);
}