# Auto-resizing AI Input

> This React component creates a modern and user-friendly input field for interacting with an AI or search engine.  It features auto-resizing text area, image drag-and-drop functionality, animated placeholders, and smooth transitions. The component solves the problem of creating a visually appealing and functional input area that adapts to user input and provides a rich user experience.   Here's a step-by-step breakdown:  1. **Auto-resizing Textarea:** The `useAutoResizeTextarea` custom hook dynamically adjusts the height of the textarea based on its content, ensuring optimal display without excessive vertical space.  `minHeight` and `maxHeight` props control the size limits.  It utilizes `useRef`, `useCallback`, and `useEffect` hooks for efficient state management and DOM manipulation.  2. **Animated Placeholders:**  `AnimatedPlaceholder` uses `framer-motion` to provide smooth, animated transitions between "Ask AI anything..." and "Search the web for real-time information..." placeholders depending on the `showSearch` state.  3. **Image Upload:** The component allows users to upload images via drag-and-drop or by selecting a file.  Drag-and-drop functionality is implemented using event listeners (`onDragOver`, `onDragLeave`, `onDrop`). Image previews are displayed using `URL.createObjectURL` for efficient handling of file URLs.  The `AnimatePresence` component ensures smooth entry and exit animations for the image preview.  4. **Submission Handling:** The `handleSubmit` function logs the input text and image data to the console (in a real application, this would send the data to the AI or search engine). The component prevents submission if both the text input and image upload are empty.   5. **UI Enhancements:**  The component uses motion transitions for visual appeal and employs a clean, modern design. Lucide React icons enhance the user interface.  Clear visual feedback is given to the user through status indicators (e.g., web search enabled) and drag-and-drop highlights.  Example Scenarios:  * AI chatbot interface * Web search input field * Multimodal input for image captioning or question answering applications  Key libraries and concepts:  * React:  The core JavaScript library for building user interfaces. * Framer Motion: For smooth animations and transitions. * Lucide React: For providing icons. * Custom Hooks:  For encapsulating reusable logic (auto-resizing textarea). * State Management: `useState` for managing component state. * Event Handling:  For handling user interactions (e.g., drag-and-drop, input changes).

- Author: [Sonu](https://21st.dev/@uniquesonu)
- License: unknown
- npm dependencies: lucide-react, framer-motion
- Live preview: https://21st.dev/@uniquesonu/components/auto-resizing-ai-input

## Install

```bash
npx shadcn@latest add "https://21st.dev/r/uniquesonu/auto-resizing-ai-input?api_key=$API_KEY_21ST"
```

Requires a 21st API key (generate one at https://21st.dev/mcp) passed as `API_KEY_21ST`. Free accounts get a limited number of installs per day; unlimited on a paid plan — see https://21st.dev/pricing.

Full component directory: https://21st.dev/llms.txt