Chat Application Component - Copy this Angular, Css Component to your project
Core Features Contact List Display: Display a visually appealing and scrollable contact list. Show user avatars, names, and a snippet of the latest message. Include a search bar for easy filtering of contacts. Sort contacts by activity (e.g., recent chats appear at the top). Option to categorize or favorite certain contacts for quick access. One to One Chat: Private, real time messaging between two users. Support for text, multimedia, and file sharing within the chat window. Allow quick actions like replying, quoting, forwarding, and deleting messages. Group Chat: Create and manage groups with multiple participants. Group admin features (e.g., adding/removing members, assigning roles). Support for group notifications and mentions. Presence Notifications: Future feature to display user statuses such as "Online," "Offline," and "Away." Add customizable status messages (e.g., "In a meeting," "Back in 5 mins"). Highlight active users in the contact list for visibility. Message Formatting: Options for rich text formatting: Bold, Italic, Strikethrough, and Code blocks. Bulleted and numbered lists. Keyboard shortcuts for quick formatting (e.g., Ctrl+B for bold). Read Receipts: Display a visual indicator (e.g., double ticks, "Seen" labels) when a message is read. Include timestamps for when messages are read. Per user read receipt tracking in group chats. Delivery Receipts: Show a single tick or similar icon when the message is delivered to the recipient’s device. Indicate if the message is pending or failed due to connectivity issues. Emoji Reactions: Allow users to react to messages using emojis (e.g., 👍, ❤️, 😂). Display reactions in a compact and organized manner below the message. Include a customizable reaction picker with recently used emojis. Multimedia and File Sharing: Support sending and viewing images, videos, audio files, and documents. Include preview thumbnails for images and videos directly in the chat. Offer a progress bar for uploading/downloading files. Provide limits for file size to ensure optimal performance. Mentions: Highlight messages where the user is mentioned using "@username." Notify users when they are mentioned, even if they have muted the chat. Unread Message Count: Show the count of unread messages for each chat. Reset the count when the chat is opened or scrolled to the last message. Typing Indicators: Display real time typing status ("[User] is typing...") in the chat window. Support typing indicators for group chats, showing multiple users typing simultaneously. URL Enrichment: Automatically generate previews for URLs, including: Title: Fetch the webpage title. Description: Extract a short summary from the page. Thumbnail: Show an image or video preview. Ensure previews are responsive and don't clutter the chat. RTL Support: Adapt the layout for right to left languages (e.g., Arabic, Hebrew). Align messages, text, and UI components correctly for RTL users.
