Components
Loading preview...
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).
npx shadcn@latest add https://21st.dev/r/uniquesonu/auto-resizing-ai-inputimport ModernAiInput from "@/components/ui/auto-resizing-ai-input";
export default function DemoOne() {
return <ModernAiInput />;
}