Styled Paper - Copy this React, Mui Component to your project

Design Concept: Message Search and Chat Dialog Search Bar: A prominent search bar at the top of the interface, allowing users to search for specific messages within conversations. As users type, search results will dynamically update below the search bar, showing message snippets, along with the conversation name or participant details. Each search result will include a small icon (e.g., a person or chat bubble) to identify the conversation. Search Results: The search results will be listed below the search bar in a clean and compact format, showing message previews, and indicating the specific text that matches the search term. Each result will display the conversation's name (for group chats, or the participant's name for one-on-one chats) along with the message snippet that contains the search keyword. Results will be scrollable, and users can select a result by clicking on it. Clicking on Search Result: When a user clicks on a search result, a dialog (or modal) will appear, displaying the full message or chat where the search term was found. This dialog will have a compact design, showing the conversation history, with the specific message highlighted or at the top of the dialog. Below the highlighted message, users can scroll through the rest of the conversation for context. Dialog Design: The chat dialog will feature a header with the name or avatar of the participant (or group name for group chats) to indicate which conversation the message belongs to. A close button at the top-right corner of the dialog will allow users to exit the modal and return to the search results. The dialog should have a modern and clean design, with the background dimmed to emphasize the chat message area. Responsive Design: The search interface should be mobile-responsive, adapting to different screen sizes. On mobile, the dialog may take up the full screen or a large portion of it, with swipe gestures available for easy navigation between messages.