@cometchat/chat-uikit-react 6.0.6 → 6.1.0

package/dist/styles/CometChatThreadHeader.css

@@ -21,18 +21,33 @@
     background: var(--cometchat-background-color-01, #FFF);
 }
 
-.cometchat-thread-header__top-bar-title {
+.cometchat-thread-header__top-bar-title-container {
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: flex-start;
     flex: 1 0 0;
     overflow: hidden;
+}
+
+.cometchat-thread-header__top-bar-title {
     color: var(--cometchat-text-color-primary, #141414);
     text-overflow: ellipsis;
     font: var(--cometchat-font-heading3-bold, 700 20px Roboto);
 }
 
+.cometchat-thread-header__top-bar-subtitle-text{
+    color: var(--cometchat-text-color-secondary, #727272);
+    font: var(--cometchat-font-caption1-regular, 400 12px Roboto);
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+}
+
+.cometchat-thread-header__top-bar-subtitle-text-clickable {
+    cursor: pointer;
+}
+
 .cometchat-thread-header__top-bar-close {
     display: flex;
     width: 24px;
@@ -102,8 +117,8 @@
     flex: 1 0 0;
 }
 
-.cometchat-thread-header__message::-webkit-scrollbar,
-.cometchat-thread-header__message::-webkit-scrollbar-thumb {
+.cometchat-thread-header-hide-scrollbar .cometchat-thread-header__message::-webkit-scrollbar,
+.cometchat-thread-header-hide-scrollbar .cometchat-thread-header__message::-webkit-scrollbar-thumb {
     display: none;
 }
 

package/dist/styles/StickersKeyboard.css

@@ -77,26 +77,6 @@
   cursor: pointer;
 }
 
-.cometchat-sticker-keyboard__tabs::-webkit-scrollbar {
-  background: transparent;
-  height: 0px;
-  width: 0px;
-}
-
-.cometchat-sticker-keyboard__tabs::-webkit-scrollbar-thumb {
-  background: rgb(232, 229, 229);
-  border-radius: 8px;
-}
-
-.cometchat-sticker-keyboard__list::-webkit-scrollbar {
-  background: transparent;
-  width: 0px;
-}
-
-.cometchat-sticker-keyboard__list::-webkit-scrollbar-thumb {
-  background: rgb(232, 229, 229);
-  border-radius: 8px;
-}
 
 
 

package/dist/styles/components/CometChatActionSheet.css

@@ -15,10 +15,7 @@
     justify-content: flex-start;
 }
 
-.cometchat-action-sheet::-webkit-scrollbar,
-.cometchat-action-sheet::-webkit-scrollbar-thumb {
-    display: none;
-}
+
 
 .cometchat-action-sheet__item-icon {
     display: flex;

package/dist/styles/components/CometChatChangeScope.css

@@ -81,10 +81,7 @@
     overflow: auto;
 }
 
-.cometchat-change-scope__list::-webkit-scrollbar,
-.cometchat-change-scope__list::-webkit-scrollbar-thumb {
-    display: none;
-}
+
 
 .cometchat-change-scope__list-item {
     display: flex;

package/dist/styles/components/CometChatConversations.css

@@ -573,7 +573,22 @@ width: 100%;
   display: none;
   }
 
-
+.cometchat-conversations .cometchat-search-bar__input{
+  cursor: pointer;
+}
+.cometchat-conversations .cometchat-list-item__body{
+  position: relative;
+}
+.cometchat-conversations .cometchat-list-item__menu-view{
+  position: absolute;
+  top: 0;
+  right: 0;
+  z-index: 1;
+}
+.cometchat-conversations .cometchat-list-item__trailing-view-hidden {
+  visibility: hidden;
+  display: initial;
+}
 @keyframes shimmerAnimation {
     0% {
       background-position: -468px 0;

package/dist/styles/components/CometChatEmojiKeyboard.css

@@ -109,12 +109,7 @@
     border-radius: var(--cometchat-radius-2, 8px);
 }
 
-.cometchat-emoji-keyboard__list::-webkit-scrollbar,
-.cometchat-emoji-keyboard__list::-webkit-scrollbar-thumb,
-.cometchat-emoji-keyboard__tabs::-webkit-scrollbar,
-.cometchat-emoji-keyboard__tabs::-webkit-scrollbar-thumb {
-    display: none;
-}
+
 
 .cometchat-emoji-keyboard__list {
     width: 100%;

package/dist/styles/components/CometChatGroupMembers.css

@@ -23,13 +23,13 @@
 }
 
 
-.cometchat-group-members .cometchat-list__body::-webkit-scrollbar {
+.cometchat-group-members-hide-scrollbar .cometchat-list__body::-webkit-scrollbar {
   background: transparent;
   height: 0px;
   width: 0px;
 }
 
-.cometchat-group-members .cometchat-list__body::-webkit-scrollbar-thumb {
+.cometchat-group-members-hide-scrollbar .cometchat-list__body::-webkit-scrollbar-thumb {
   background: transparent;
   border-radius: 8px;
 }
@@ -224,4 +224,9 @@
   100% {
     background-position: 468px 0;
   }
+}
+
+ .cometchat-group-members-hide-scrollbar .cometchat-change-scope__list::-webkit-scrollbar,
+ .cometchat-group-members-hide-scrollbar .cometchat-change-scope__list::-webkit-scrollbar-thumb {
+    display: none;
 }

package/dist/styles/components/CometChatList.css

@@ -64,7 +64,8 @@
     width: 100%;
     height: 100%;
     box-sizing: border-box;
-    border-right: 1px solid var(--cometchat-border-color-light)
+    border-right: 1px solid var(--cometchat-border-color-light);
+    position: relative;
 }
 
 /* Styles for loading, error, and empty views, taking up the remaining space */
@@ -75,6 +76,14 @@
     overflow: hidden;
     width: 100%;
 }
+.cometchat-list__loading-view-top{
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    height: 100%;
+    width: 100%;
+    z-index: 2;
+}
 
 /* Section header text styling */
 .cometchat-list__section-header {
@@ -96,8 +105,8 @@
     justify-content: flex-start;
 }
 
-.cometchat-list__body::-webkit-scrollbar,
-.cometchat-list__body::-webkit-scrollbar-thumb {
+.cometchat-list-hide-scrollbar .cometchat-list__body::-webkit-scrollbar,
+.cometchat-list-hide-scrollbar .cometchat-list__body::-webkit-scrollbar-thumb {
     display: none;
 }
 

package/dist/styles/components/CometChatMessageComposer.css

@@ -324,6 +324,39 @@ height: 58px;
     height: fit-content;
     max-height: 100px;
     overflow: hidden;
-    text-overflow: ellipsis;
+    text-overflow: ellipsis; 
     white-space: nowrap;
+}
+.cometchat-message-composer-hide-scrollbar .cometchat-action-sheet::-webkit-scrollbar,
+.cometchat-message-composer-hide-scrollbar .cometchat-action-sheet::-webkit-scrollbar-thumb {
+    display: none;
+}
+
+.cometchat-message-composer-hide-scrollbar .cometchat-emoji-keyboard__list::-webkit-scrollbar,
+.cometchat-message-composer-hide-scrollbar .cometchat-emoji-keyboard__list::-webkit-scrollbar-thumb,
+.cometchat-message-composer-hide-scrollbar .cometchat-emoji-keyboard__tabs::-webkit-scrollbar,
+.cometchat-message-composer-hide-scrollbar .cometchat-emoji-keyboard__tabs::-webkit-scrollbar-thumb {
+    display: none;
+}
+
+
+.cometchat-message-composer-hide-scrollbar .cometchat-sticker-keyboard__tabs::-webkit-scrollbar {
+    background: transparent;
+    height: 0px;
+    width: 0px;
+}
+
+.cometchat-message-composer-hide-scrollbar .cometchat-sticker-keyboard__tabs::-webkit-scrollbar-thumb {
+    background: rgb(232, 229, 229);
+    border-radius: 8px;
+}
+
+.cometchat-message-composer-hide-scrollbar .cometchat-sticker-keyboard__list::-webkit-scrollbar {
+    background: transparent;
+    width: 0px;
+}
+
+.cometchat-message-composer-hide-scrollbar .cometchat-sticker-keyboard__list::-webkit-scrollbar-thumb {
+    background: rgb(232, 229, 229);
+    border-radius: 8px;
 }

package/dist/styles/components/CometChatMessageHeader.css

@@ -55,7 +55,8 @@
     width: 100%;
     overflow: hidden;
 }
-.cometchat-message-header  .cometchat-list-item__trailing-view{
+
+.cometchat-message-header .cometchat-list-item__trailing-view {
     display: none;
 }
 
@@ -73,19 +74,60 @@
     cursor: pointer;
 }
 
-.cometchat-message-header .cometchat-message-header__conversation-summary-button .cometchat-button{
-background: transparent;
-border: none;
-justify-content: center;
-align-items: center;
-height: fit-content;
-width: fit-content;
-padding: 0;
+.cometchat-message-header .cometchat-message-header__conversation-summary-button .cometchat-button {
+    background: transparent;
+    border: none;
+    justify-content: center;
+    align-items: center;
+    height: fit-content;
+    width: fit-content;
+    padding: 0;
+}
+
+.cometchat-message-header .cometchat-message-header__conversation-summary-button .cometchat-button .cometchat-button__icon {
+    height: 24px;
+    width: 24px;
+    background: var(--cometchat-icon-color-primary, #141414);
+}
+
+/* Styling for the search button in the message header */
+.cometchat-message-header .cometchat-message-header__search-button .cometchat-button {
+    background: transparent;
+    border: none;
+    justify-content: center;
+    align-items: center;
+    height: fit-content;
+    width: fit-content;
+    padding: 0;
+}
+
+.cometchat-message-header .cometchat-message-header__search-button  .cometchat-button__icon,.cometchat-message-header .cometchat-menu-list__sub-menu-icon {
+    height: 24px;
+    width: 24px;
+    background: var(--cometchat-icon-color-primary, #141414);
 }
-.cometchat-message-header .cometchat-message-header__conversation-summary-button .cometchat-button .cometchat-button__icon{
+
+/* Styling for the menu in the message header */
+.cometchat-message-header .cometchat-message-header__menu {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: fit-content;
+    width: fit-content;
+}
+
+.cometchat-message-header .cometchat-message-header__menu .cometchat-button {
+    background: transparent;
+    border: none;
+    justify-content: center;
+    align-items: center;
     height: 24px;
     width: 24px;
-    background: var(--cometchat-icon-color-primary, #141414);;
+    padding: 0;
+}
+
+.cometchat-message-header .cometchat-menu-list__sub-menu-list {
+    width: max-content;
 }
 /* List item container within the message header */
 
@@ -173,7 +215,8 @@ padding: 0;
     .cometchat-message-header__back-button {
         display: block;
     }
+
     .cometchat-message-header .cometchat-list-item .cometchat-list-item__body-title {
-      display: initial;
+        display: initial;
     }
 }

package/dist/styles/components/CometChatMessageInformation.css

@@ -81,10 +81,7 @@
     border-bottom: 1px solid var(--cometchat-border-color-light);
 }
 
-.cometchat-message-information__message::-webkit-scrollbar,
-.cometchat-message-information__message::-webkit-scrollbar-thumb {
-    display: none;
-}
+
 
 
 .cometchat-message-information__message .cometchat-message-bubble__wrapper {
@@ -106,12 +103,15 @@
     flex-direction: column;
     gap: 0px;
 }
-
-.cometchat-message-information__receipts::-webkit-scrollbar,
-.cometchat-message-information__receipts::-webkit-scrollbar-thumb {
+.cometchat-message-information-hide-scrollbar .cometchat-message-information__receipts::-webkit-scrollbar,
+.cometchat-message-information-hide-scrollbar .cometchat-message-information__receipts::-webkit-scrollbar-thumb {
     display: none;
 }
 
+.cometchat-message-information-hide-scrollbar .cometchat-message-information__message::-webkit-scrollbar,
+.cometchat-message-information-hide-scrollbar .cometchat-message-information__message::-webkit-scrollbar-thumb {
+    display: none;
+}
 .cometchat-message-information__receipts .cometchat-list-item__body {
     padding: 0px;
 }

package/dist/styles/components/CometChatMessageList.css

@@ -312,12 +312,9 @@ width: fit-content;
 
 /* Message indicator inside message list */
 .cometchat-message-list__message-indicator {
-    margin-bottom: 8px;
-    display: flex;
-    width: 100;
-    justify-content: center;
-    align-items: center;
-    width: 100%;
+    position: absolute;
+    right: 12px;
+    bottom: 8px;
 }
 
 .cometchat-message-list__message-indicator>.cometchat {
@@ -330,13 +327,13 @@ width: fit-content;
     height: fit-content;
     width: fit-content;
     display: flex;
-    padding: 8px var(--cometchat-padding-2, 8px);
-    flex-direction: column;
+    padding: var(--cometchat-padding-2, 8px);
+    flex-direction: column-reverse;
     align-items: flex-start;
     border-radius: var(--cometchat-radius-max, 4px);
-    flex-direction: row;
     justify-content: center;
     align-items: center;
+    gap: 4px;
 }
 
 /* Text inside message indicator button */
@@ -344,13 +341,20 @@ width: fit-content;
     color: var(--cometchat-static-white);
     text-align: center;
     font: var(--cometchat-font-caption1-regular);
+    background: var(--cometchat-primary-color, #6852D6);
+    border-radius: var(--cometchat-radius-max);
+    height: 20px;
+    padding: 0px var(--cometchat-padding-2, 8px);
+    justify-content: center;
+    align-items: center;
+    display: flex;
 }
 
 /* Icon inside message indicator button */
 .cometchat-message-list__message-indicator .cometchat-button__icon {
     display: flex;
-    width: 16px;
-    height: 16px;
+    width: 24px;
+    height: 24px;
     justify-content: center;
     align-items: center;
     background: var(--cometchat-static-white);
@@ -363,6 +367,7 @@ width: fit-content;
     width: 100%;
     box-sizing: border-box;
     background: transparent;
+    z-index: 1;
 }
 
 /* Leading view inside message bubble */
@@ -720,12 +725,36 @@ width: fit-content;
     justify-content: flex-end;
 }
 
-.cometchat-message-list .cometchat-message-list__body  .cometchat-list__body{
+.cometchat-message-list-loaded .cometchat-message-list__body  .cometchat-list__body{
     height: fit-content;
     max-height: 100%;
 }
 
-.cometchat-message-list > .cometchat-message-list__body > .cometchat {
+.cometchat-message-list-loaded > .cometchat-message-list__body > .cometchat {
     height: fit-content !important;
     max-height: 100%;
+}
+
+@keyframes backgroundFade {
+    0% { background-color: var(--cometchat-extended-primary-color-200); }
+    50% { background-color: var(--cometchat-extended-primary-color-100); }
+    75%, 100% { background-color: transparent; }
+}
+
+.cometchat-message-list__bubble-highlight {
+    animation: backgroundFade 3s ease-out forwards;
+}
+
+.cometchat-message-list-hide-scrollbar .cometchat-reaction-list__list::-webkit-scrollbar,
+.cometchat-message-list-hide-scrollbar .cometchat-reaction-list__list::-webkit-scrollbar-thumb,
+.cometchat-message-list-hide-scrollbar .cometchat-reaction-list__tabs::-webkit-scrollbar,
+.cometchat-message-list-hide-scrollbar .cometchat-reaction-list__tabs::-webkit-scrollbar-thumb {
+    display: none;
+}
+
+.cometchat-message-list-hide-scrollbar .cometchat-emoji-keyboard__list::-webkit-scrollbar,
+.cometchat-message-list-hide-scrollbar .cometchat-emoji-keyboard__list::-webkit-scrollbar-thumb,
+.cometchat-message-list-hide-scrollbar .cometchat-emoji-keyboard__tabs::-webkit-scrollbar,
+.cometchat-message-list-hide-scrollbar .cometchat-emoji-keyboard__tabs::-webkit-scrollbar-thumb {
+    display: none;
 }

package/dist/styles/components/CometChatReactionList.css

@@ -34,12 +34,6 @@
     background: var(--cometchat-background-color-01, #FFF);
 }
 
-.cometchat-reaction-list__list::-webkit-scrollbar,
-.cometchat-reaction-list__list::-webkit-scrollbar-thumb,
-.cometchat-reaction-list__tabs::-webkit-scrollbar,
-.cometchat-reaction-list__tabs::-webkit-scrollbar-thumb {
-    display: none;
-}
 
 .cometchat-reaction-list__tabs-tab {
     display: flex;