AI Input With File

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

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds AI Input With File to your project and fits it to your theme.

import { 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>
  );
}