Web Chat Interface - Copy this Html, Bootstrap Component to your project

Create a web chat interface with a clean, modern design that includes three main sections: a "Contacts" sidebar, a "User Search" section, and a "Chat" section. The layout should be responsive, adapting to both desktop and mobile views. Here's a breakdown of each section: Contacts Section (Sidebar on the left): This section lists all contacts with whom the user has started a chat. Each contact should display: An avatar or profile picture. The contact's username. The timestamp of the last message sent or received. An indicator (e.g., a badge or dot) showing unread messages. At the top of the section, include a search bar to search through contacts or to start a new chat. Each contact should be clickable, opening the corresponding chat in the main chat section. Chat Section (Main content in the center): This is the primary area where the conversation happens. Display a chat header at the top showing the username of the contact the user is currently chatting with. Below the header, display the chat messages. The messages should alternate between: Messages sent by the user (aligned to the right, with a different background color). Messages received from the contact (aligned to the left). Each message should display: The message content. A small timestamp showing the time the message was sent. At the bottom of the chat section, include an input field where the user can type new messages. Next to the input field, include a "Send" button to send the message. User Search Section (Top or right of the interface): Include a search bar for users to search for other registered users by username. When the user types in the search bar, display a list of results below. Each result should include: The user's avatar/profile picture. The username. A "Start chat" button to send a chat request to the user. This section can either be collapsible or displayed prominently on the screen. Additional notes: The chat messages should scroll smoothly, with new messages appearing at the bottom. The interface should be minimalistic, using soft colors, rounded buttons, and clean fonts. Ensure the design is mobile friendly, with a collapsible contact list and easy navigation between chats and user search.