@cometchat/chat-uikit-react 6.0.7 → 6.1.1

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;

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/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 {

package/dist/styles/components/CometChatMessageHeader.css

@@ -90,6 +90,45 @@
     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);
+}
+
+/* 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;
+    padding: 0;
+}
+
+.cometchat-message-header .cometchat-menu-list__sub-menu-list {
+    width: max-content;
+}
 /* List item container within the message header */
 
 .cometchat-message-header__listitem {

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,16 +725,26 @@ 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,