Chat Search Interface - Copy this React, Tailwind Component to your project

**Prompt:** Design a modern, responsive chat based search interface with a clean and intuitive user experience. The aim is to create an advanced search engine like page with subtle animations and a sleek UI. Key requirements: ### 1. **Layout:** Split the page into two sections: **Search Bar Area**: A top or side section for users to input queries. **Results Area**: A space to display search results with document previews, metadata (author, date), and download links. ### 2. **Search Bar:** Large, modern text input field with rounded corners and a submit button featuring subtle animations. Optional voice search button styled as a small microphone icon. Smooth animation expands the search bar as users type. ### 3. **Results Display:** Use a **card based design** for search results with sections for the document title, metadata, document preview, and download link. Provide pagination or a "Load More" button with animated feedback. ### 4. **Animations & Interactions:** Include engaging loading animations (spinners, bouncing dots) during query processing. Smooth fade in transitions for search results and hover effects for result cards. ### 5. **Styling:** Minimalist color scheme with a clean background, accent colors for buttons, and clear typography. Responsive design for different screen sizes with a mobile friendly layout. ### 6. **User Feedback:** Display friendly error messages if no results are found, with suggestions for alternative queries. Implement real time query suggestions and autocomplete options as users type. ### 7. **Advanced Features:** Add collapsible filters (e.g., by date, type, author) for more refined search options. Optional dark mode with smooth transition animations. The goal is a sleek, intuitive interface that feels like a modern search engine but is tailored for querying a document database with natural language.