Chat U I - Copy this React, Tailwind Component to your project

**Create a chat UI layout with the following optimized design and features:** ### **Overall Layout** 1. **Sidebar (Left)** **Icons (Vertical, Rounded):** **App Logo** at the top. **Message Icon.** **Friend Icon.** **Resizable Split Screen:** Divide the UI into two parts: Left and Right. 2. **Left Pane:** **Upper Section:** **Search Bar** at the top. **Label List Dropdown:** Shows all labels. **"Manage Label" Option:** Clicking this opens a **modal** for managing labels. **Lower Section:** Displays a **list of conversations** with: **Avatar.** **Name.** **Last message.** **Sent time.** 3. **Right Pane:** **Conversation Content Space:** **Header:** **Conversation Name.** **Avatar.** **Assigned Label.** **Search Icon:** Opens a search bar to search within the conversation. **Middle Section:** **Message Content:** Supports text, images, links, reactions (types + amounts), and a **context menu** for sending reactions. **Footer:** **Message Input Area:** Includes icons for: File. Image. Sticker. Emoji. Fast Message. ### **Detailed Features** #### **1. Label Management Modal:** **Add/Edit/Remove Labels:** Labels have **two properties:** **Color:** Hexadecimal color selected using a **color picker.** **Name.** **Display Label Icon** in the color chosen (hex color). **Edit Label:** Displays all conversations assigned to the label: **Conversation Name.** **Avatar.** **Add Conversation Button:** Opens a **list of all conversations** (with a round checkbox to the left of each). **Select and Add Conversations:** Users can select multiple conversations and click **Add** to assign them to the label. #### **2. Conversation List:** Each conversation displays: **Avatar.** **Name.** **Last Message.** **Time Sent.** #### **3. Search Functionality:** **Conversation Header Search:** Clicking the search icon displays a **search bar.** Typing in the bar triggers an **event to search messages** within the conversation. #### **4. Conversation Content Display:** Messages show: **Text, Images, Links.** **Reactions (Type + Amount):** With a **context menu** to react to messages. #### **5. Message Input Area:** **Icons for attachments and communication tools:** File. Image. Sticker. Emoji. Fast Message. This layout ensures a clean, user friendly, and feature rich chat interface suitable for modern applications.