Chatly User Interface

"Design a sleek and modern user interface for a random chat application called Chatly. The interface should be divided into two primary sections: a left sidebar for contacts and a right section for the chat itself. Left Sidebar (ID: sidebar): At the top, display a logo with the text Chatly (ID: logo). Below the logo, include a search bar for users to search for contacts (ID: search input). Display a list of contact names or chat topics (ID: contacts), each of which is represented as a clickable list item (class: contact). Main Chat Section: At the top, include a header (ID: header) with the title Chatly in bold. Below the header, provide a large area for displaying chat messages (ID: messages), where users can see incoming and outgoing messages. Input Area (ID: input container): Include an upload button (ID: upload button) on the left to allow users to upload files, which triggers a hidden file input (ID: file input) that supports images and videos. Place an input field (ID: message input) where users can type their messages, enclosed in a wrapper (class: input wrapper). To the right of the input field, add an emoji button (ID: emoji button) that opens an emoji picker. Add a send button (ID: send button) for sending messages, featuring an icon of a paper plane. Also include a skip button (ID: skip button) that allows users to skip to the next random chat, featuring a fast forward icon. Image Preview: Provide an image preview container (ID: image preview container) for uploaded images, which includes a close button (class: close btn) to remove the preview. Ensure the interface is responsive, user friendly, and optimized for both desktop and mobile devices. The color scheme should be clean and modern, with a minimalist design that enhances the user experience."