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

Create-a-chat-UI-that-have-a-side-bar-to-the-left-and-display-following-icons-in-vertical:---rounded-app-logo---Message-Icon---Friend-Icon-next,-split-screen-to-2-part,-that-can-be-resizable.-The-left-will-be-split-vertical-with-2-part,-Part-1-is-above-with-search-bar,-below-the-searchbar-will-have-the-label-list-dropdown.-This-dropdown-will-show-full-of-the-label-list-and-one-option-is-manage-label.-if-i-click-to-manage-label-option,-it-will-show-a-modal-to-manage-label,-this-modal-will-let-me-to-add,-edit-or-remove-the-label.-the-label-have-2-properties-is:-color-and-name.-If-add-label,-show-the-color-select-to-let-me-select-color-and-get-the-hex-to-send-to-server.-Set-the-label-icon-color-by-hex-color.-If-I-click-to-edit-icon-in-label,-it-will-show-me-the-conversation-is-assign-with-label-that-I-have-click,-include-conversation-name-and-its'-avatar,-then-I-can-click-to-Add-Conversation-to-add-more-conversation-to-this-label.-If-I-click-into-Add-conversation-button,-show-me-conversation-list-include-conversation-name-and-avatar,-with-round-checkbox-to-the-left.-After-I-select-all-the-conversation,-I-will-click-Add-to-add-Conversations-to-the-label.-Part-2-is-the-list-of-conversation,-each-conversation-will-have-avatar,-name,-the-last-message-and-sent-time-of-it.-The-right-screen-will-be-conversation-content-space,-that-will-have-the-header-with-name-of-conversation,-avatar,-label-and-search-icon-to-search-message-in-conversation.-If-I-click-the-search-Icon,-show-the-search-bar,-if-i-change-value-of-the-search-bar,-active-event-to-search-conversation.-the-middle-of-the-chat-space-will-show-the-content-of-conversation,-with-image,-link,-text-content,....-and-reaction-type-+-amount-of-a-message-and-the-context-menu-to-send-reaction-this-message.-In-the-footer,-show-the-area-to-input-text-message,-with-file-icon,-image-icon,-sticker-icon,-emoji-icon,-fast-message-icon.