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).