@cometchat/chat-uikit-react 6.2.6 → 6.3.0

package/dist/styles/CometChatAIAssistantChat.css

@@ -352,6 +352,7 @@ padding-bottom: var(--cometchat-padding-2);
 .cometchat-ai-assistant-chat .cometchat-text-bubble.cometchat-text-bubble-outgoing .cometchat-text-bubble__body-text {
     -webkit-line-clamp: initial !important;
     line-clamp: initial !important;
+    line-height: 1.75;
 }
 .cometchat-ai-assistant-chat .cometchat-text-bubble.cometchat-text-bubble-outgoing .cometchat-text-bubble__read-more,
 .cometchat-ai-assistant-chat .cometchat-text-bubble.cometchat-text-bubble-outgoing .cometchat-text-bubble__read-less {

package/dist/styles/CometChatAIAssistantMessageBubble.css

@@ -12,8 +12,14 @@
   box-sizing: border-box;
   max-width: 100%;
   overflow: hidden;
+  line-height: 1.75;
+  margin: 0;
+  margin-bottom: var(--cometchat-margin-2);
 }
 
+.cometchat-ai-assistant-message-bubble {
+  margin-top: calc(var(--cometchat-margin-1) * -1)
+}
 
 .cometchat-ai-assistant-message-bubble>p:not([class]) {
   text-align: left;
@@ -34,6 +40,10 @@
 
 }
 
+.cometchat-ai-assistant-message-bubble li *{
+  vertical-align: top;
+}
+
 .cometchat-ai-assistant-message-bubble ol:not([class]),.cometchat-ai-assistant-message-bubble ul:not([class]) {
   padding-left: var(--cometchat-padding-5) !important;
   text-align: left !important;
@@ -147,8 +157,7 @@
 }
 .cometchat-ai-assistant-message-bubble li{
   overflow: visible !important;
-  line-height: 20px;
-  padding: 0px 0px 6px 0px;
+  padding: 0;
 }
 .cometchat-ai-assistant-message-bubble > ol:first-child > li:first-child,
 .cometchat-ai-assistant-message-bubble > ul:first-child > li:first-child
@@ -162,11 +171,15 @@
 .cometchat-ai-assistant-message-bubble h4,
 .cometchat-ai-assistant-message-bubble h5,
 .cometchat-ai-assistant-message-bubble h6 {
-  line-height: 20px;
   font-size: initial;
   padding: var(--cometchat-padding-2) 0px;
   margin: 0;
 }
+
+.cometchat-ai-assistant-message-bubble > *:first-child *:first-child:not(:has(*)) ~ img{
+  margin-top: var(--cometchat-margin-1);
+}
+
 .cometchat-ai-assistant-message-bubble > h1:first-child,
 .cometchat-ai-assistant-message-bubble > h2:first-child,
 .cometchat-ai-assistant-message-bubble > h3:first-child,
@@ -179,10 +192,23 @@
   max-height: 300px;
   width: fit-content;
   border-radius: var(--cometchat-radius-2);
+  margin-block: var(--cometchat-margin-2) 0;
 }
-.cometchat-ai-assistant-message-bubble p{
-  line-height: 20px;
-  padding: var(--cometchat-padding-2) 0px;
+
+.cometchat-ai-assistant-message-bubble__image-intersection-start, .cometchat-ai-assistant-message-bubble__image-intersection-end{
+  display: none;
+}
+
+.cometchat-ai-assistant-message-bubble .cometchat-ai-assistant-message-bubble__image-intersection-start:not(.cometchat-ai-assistant-message-bubble__image-intersection-end ~ .cometchat-ai-assistant-message-bubble__image-intersection-start) {
+  display: block;
+  margin-top: -0.5em;
+}
+.cometchat-ai-assistant-message-bubble .cometchat-ai-assistant-message-bubble__image-intersection-end:not(:has(+ .cometchat-ai-assistant-message-bubble__image-intersection-start)) {
+  display: block;
+}
+
+.cometchat-ai-assistant-message-bubble .cometchat-ai-assistant-message-bubble__image-intersection-end:last-child {
+  margin-bottom: 0;
 }
 
 .cometchat-ai-assistant-message-bubble > ul:first-child li:first-child > p:first-child{

package/dist/styles/CometChatConversations.css

@@ -219,8 +219,8 @@ box-sizing: border-box;
 
 
 .cometchat-conversations__subtitle-icon-collaborative-whiteboard{
-  -webkit-mask: url("../../assets/conversations_collaborative-whiteboard-message.svg") center center no-repeat;
-  mask: url("../../assets/conversations_collaborative-whiteboard-message.svg") center center no-repeat;
+  -webkit-mask: url("../../assets/collaborative_whiteboard.svg") center center no-repeat;
+  mask: url("../../assets/collaborative_whiteboard.svg") center center no-repeat;
   -webkit-mask-size: contain;
   mask-size: contain;
 }

package/dist/styles/CometChatMessageBubble.css

@@ -11,6 +11,11 @@
     gap: var(--cometchat-padding-2, 8px);
     flex: 1 0 0;
 }
+
+.cometchat-message-bubble__body-reply-view{
+    width: 100%;
+    margin-bottom: 5px;
+}
 .cometchat-message-bubble .cometchat-reactions{
     width: 100%;
     margin-top: -4px;

package/dist/styles/CometChatMessageHeader.css

@@ -8,7 +8,7 @@
     flex: 1 0 0;
     align-self: stretch;
     justify-content: space-between;
-    height: 64px;
+    height: 63px;
     background: var(--cometchat-background-color-01);
     width: 100%;
     overflow: hidden;

package/dist/styles/CometChatMessageList.css

@@ -684,7 +684,6 @@
  * Setting transparent background and gap for sticker message bubble
  */
 .cometchat-message-bubble__body-wrapper .cometchat-message-bubble__sticker-message {
-    background-color: transparent;
     gap: var(--cometchat-padding-2, 8px);
 }
 
@@ -760,6 +759,10 @@
     animation: backgroundFade 3s ease-out forwards;
 }
 
+.cometchat-message-list__bubble-highlight-longer {
+    animation: backgroundFade 5s 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,

package/dist/styles/CometChatMessagePreview.css

@@ -0,0 +1,275 @@
+/*
+   Main container for the reply-message preview area.
+*/
+.cometchat-message-preview {
+    padding: var(--cometchat-padding-2, 8px);
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: flex-start;
+    margin: 0;
+    min-height: 30px;
+    height: 100%;
+    width: 100%;
+    min-width: 100px;
+    cursor: pointer;
+    border: none;
+    border-radius: var(--cometchat-radius-1, 4px);
+    box-sizing: border-box;
+    gap: var(--cometchat-padding-1, 4px);
+    position: relative;
+    background-color: var(--cometchat-background-color-03);
+  }
+
+
+.cometchat-message-bubble-incoming .cometchat-message-preview{
+  background-color: var(--cometchat-neutral-color-400);
+  color: var( --cometchat-primary-color);
+}
+
+.cometchat-message-bubble-outgoing .cometchat-message-preview{
+  background: var(--cometchat-extended-primary-color-700);
+}
+  
+  /*
+     Close button for the reply-message preview.
+  */
+  .cometchat-message-preview__close {
+    mask: url("../../assets/close.svg") center center no-repeat;
+    -webkit-mask: url("../../assets/close.svg") center center no-repeat;
+    height: 20px;
+    width: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--cometchat-icon-color-primary);
+    -webkit-mask-size: contain;
+    mask-size: contain;
+    position: absolute;
+    top: var(--cometchat-padding-2, 8px);
+    right: var(--cometchat-padding-2, 8px);
+    cursor: pointer;
+  }
+
+  /*
+     Text shown when a message is deleted.
+  */
+  .cometchat-message-bubble-outgoing .cometchat-message-preview-deleted__message{
+    color: var(--cometchat-static-white);
+  }
+
+  .cometchat-message-preview-deleted__message {
+    display: flex;  
+    gap: 2px;
+    height: 100%;
+    justify-content: left;
+    width: 100%;
+  }
+
+  .cometchat-message-preview-deleted__message__text{
+    font: var(--cometchat-font-caption1-regular, 12px);
+    white-space: nowrap;    
+    overflow: hidden;         
+    text-overflow: ellipsis; 
+    max-width: 100%;
+  }
+  .cometchat-message-bubble-incoming .cometchat-message-preview-deleted__message{
+    color: var(--cometchat-neutral-color-600);
+  }
+  
+  /*
+     Title text inside the reply-message preview.
+  */
+  .cometchat-message-preview__title {
+    font: var(--cometchat-font-caption1-regular, 12px);
+    width: 100%; 
+    text-align: left;
+    color: var(--cometchat-primary-color);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  
+  /*
+     Subtitle text inside the reply-message preview, containing the actual text being reply-messageed.
+  */
+  .cometchat-message-preview__subtitle {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+    font-style: normal;
+    width: 100%;    
+    text-align: left;
+    color: var(--cometchat-text-color-secondary);
+    font: var(--cometchat-font-caption1-regular, 12px);
+    overflow: hidden;
+  }
+  
+  .cometchat-message-bubble-outgoing .bubble-view{
+    border-left: 3px solid var(--cometchat-static-white); 
+  }
+
+  .composer-view .cometchat-message-preview {
+    border-left: 3px solid var(--cometchat-primary-color); 
+  }
+  .cometchat-message-bubble-outgoing .bubble-view .cometchat-message-preview__subtitle-icon{
+    background-color: var(--cometchat-static-white);
+  }
+
+    
+  .cometchat-message-bubble-incoming .bubble-view{
+    border-left: 3px solid var(--cometchat-primary-color); 
+  }
+
+  .cometchat-message-bubble-outgoing .cometchat-message-preview__title, .cometchat-message-bubble-outgoing .cometchat-message-preview__subtitle{
+    color: var(--cometchat-static-white);
+  }
+
+  .bubble-view{
+    border-radius: 4px;
+  }
+  
+  .cometchat-message-preview_others{
+    border-left: 3px solid var(--cometchat-primary-color);
+  }
+
+  .cometchat-message-preview__subtitle-text{
+    text-align: left;
+    overflow: hidden;
+    font: var(--cometchat-font-caption1-regular, 12px);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    width: 100%;
+  }
+  
+  .cometchat-message-preview__subtitle-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    -webkit-mask-size: contain;
+    mask-size: contain;
+    border: none;
+    align-self: center;
+    background: var(--cometchat-icon-color-secondary, #A1A1A1);
+    height: 16px;
+    width: 16px;
+    flex-shrink: 0;
+  }
+  
+  .cometchat-message-preview__subtitle-icon-image {
+    -webkit-mask: url("../../assets/conversations_image-message.svg") center center no-repeat;
+    mask: url("../../assets/conversations_image-message.svg") center center no-repeat;
+    -webkit-mask-size: contain;
+    mask-size: contain;
+  }
+
+   .cometchat-message-bubble-incoming  .cometchat-message-preview-deleted__message__icon{
+    background: var(--cometchat-neutral-color-600);
+  }
+
+  .cometchat-message-bubble-outgoing .cometchat-message-preview-deleted__message__icon{
+    background: var(--cometchat-static-white, #fff);
+  }
+
+
+  .cometchat-message-preview-deleted__message__icon{
+    height: 14px;
+    width: 14px;
+    flex: 0 0 auto;
+    -webkit-mask: url("../../assets/message_delete.svg") center center no-repeat;
+    mask: url("../../assets/message_delete.svg") center center no-repeat;
+    -webkit-mask-size: contain;
+    mask-size: contain;
+  }
+
+.cometchat-message-preview__subtitle-icon-meeting-incoming-audio{
+    -webkit-mask: url("../../assets/phone_incoming.svg") center center no-repeat;
+    mask: url("../../assets/phone_incoming.svg") center center no-repeat;
+    -webkit-mask-size: contain;
+    mask-size: contain;
+  }
+
+ .cometchat-message-preview__subtitle-icon-meeting-outgoing-audio{
+    -webkit-mask: url("../../assets/phone_outgoing.svg") center center no-repeat;
+    mask: url("../../assets/phone_outgoing.svg") center center no-repeat;
+    -webkit-mask-size: contain;
+    mask-size: contain;
+  }
+  
+.cometchat-message-preview__subtitle-icon-meeting-incoming-video {
+    -webkit-mask: url("../../assets/incoming_video.svg") center center no-repeat;
+    mask: url("../../assets/incoming_video.svg") center center no-repeat;
+    -webkit-mask-size: contain;
+    mask-size: contain;
+  }
+
+.cometchat-message-preview__subtitle-icon-meeting-outgoing-video{
+    -webkit-mask: url("../../assets/outgoing_video.svg") center center no-repeat;
+    mask: url("../../assets/outgoing_video.svg") center center no-repeat;
+    -webkit-mask-size: contain;
+    mask-size: contain;
+  }
+  
+
+  .cometchat-message-preview__subtitle-icon-file {
+    -webkit-mask: url("../../assets/conversations_file-message.svg") center center no-repeat;
+    mask: url("../../assets/conversations_file-message.svg") center center no-repeat;
+    -webkit-mask-size: contain;
+    mask-size: contain;
+  }
+  
+  .cometchat-message-preview__subtitle-icon-video {
+    -webkit-mask: url("../../assets/conversations_video-message.svg") center center no-repeat;
+    mask: url("../../assets/conversations_video-message.svg") center center no-repeat;
+    -webkit-mask-size: contain;
+    mask-size: contain;
+  }
+  
+  .cometchat-message-preview__subtitle-icon-audio {
+    -webkit-mask: url("../../assets/conversations_audio-message.svg") center center no-repeat;
+    mask: url("../../assets/conversations_audio-message.svg") center center no-repeat;
+    -webkit-mask-size: contain;
+    mask-size: contain;
+  }
+  
+  .cometchat-message-preview__subtitle-icon-poll {
+    -webkit-mask: url("../../assets/conversations_poll-message.svg") center center no-repeat;
+    mask: url("../../assets/conversations_poll-message.svg") center center no-repeat;
+    -webkit-mask-size: contain;
+    mask-size: contain;
+  }
+  
+  
+  .cometchat-message-preview__subtitle-icon-sticker {
+    -webkit-mask: url("../../assets/conversations_sticker-message.svg") center center no-repeat;
+    mask: url("../../assets/conversations_sticker-message.svg") center center no-repeat;
+    -webkit-mask-size: contain;
+    mask-size: contain;
+  }
+  
+  
+  .cometchat-message-preview__subtitle-icon-collaborative-document {
+    -webkit-mask: url("../../assets/conversations_collaborative-document-message.svg") center center no-repeat;
+    mask: url("../../assets/conversations_collaborative-document-message.svg") center center no-repeat;
+    -webkit-mask-size: contain;
+    mask-size: contain;
+  }
+  
+  
+  .cometchat-message-preview__subtitle-icon-collaborative-whiteboard {
+    -webkit-mask: url("../../assets/collaborative_whiteboard.svg") center center no-repeat;
+    mask: url("../../assets/collaborative_whiteboard.svg") center center no-repeat;
+    -webkit-mask-size: contain;
+    mask-size: contain;
+  }
+  
+  .cometchat-message-preview__subtitle-icon-link {
+    -webkit-mask: url("../../assets/conversations_link.svg") center center no-repeat;
+    mask: url("../../assets/conversations_link.svg") center center no-repeat;
+    -webkit-mask-size: contain;
+    mask-size: contain;
+  }
+  
+  .cometchat-message-preview__subtitle-icon-none {
+    display: none;
+  }

package/dist/styles/CometChatStreamMessageBubble.css

@@ -2,6 +2,9 @@
   box-sizing: border-box;
   max-width: 100%;
   overflow: hidden;
+  line-height: 1.75;
+  margin: 0;
+  margin-bottom: var(--cometchat-margin-2);
 }
 
 .cometchat-stream-message-bubble .cometchat-stream-message-bubble__copy {
@@ -20,6 +23,10 @@
 
 }
 
+.cometchat-stream-message-bubble {
+  margin-top: calc(var(--cometchat-margin-1) * -1)
+}
+
 .cometchat-stream-message-bubble {
   overflow: hidden;
   text-align: left;
@@ -42,6 +49,10 @@
 
 }
 
+.cometchat-stream-message-bubble li *{
+  vertical-align: top;
+}
+
 .cometchat-stream-message-bubble li:not([class]) {
   text-align: left !important;
 
@@ -210,14 +221,35 @@
 }
 .cometchat-stream-message-bubble li{
   overflow: visible !important;
-  line-height: 20px;
-  padding: 0px 0px 6px 0px;
+  padding: 0;
 }
 .cometchat-stream-message-bubble img{
   max-height: 300px;
   width: fit-content;
   border-radius: var(--cometchat-radius-2);
+  margin-block: var(--cometchat-margin-2) 0;
+}
+
+.cometchat-stream-message-bubble > *:first-child *:first-child:not(:has(*)) ~ img{
+  margin-top: var(--cometchat-margin-1);
+}
+
+.cometchat-stream-message-bubble__image-intersection-start, .cometchat-stream-message-bubble__image-intersection-end{
+  display: none;
+}
+
+.cometchat-stream-message-bubble .cometchat-stream-message-bubble__image-intersection-start:not(.cometchat-stream-message-bubble__image-intersection-end ~ .cometchat-stream-message-bubble__image-intersection-start) {
+  display: block;
+  margin-top: -0.5em;
 }
+.cometchat-stream-message-bubble .cometchat-stream-message-bubble__image-intersection-end:not(:has(+ .cometchat-stream-message-bubble__image-intersection-start)) {
+  display: block;
+}
+
+.cometchat-stream-message-bubble .cometchat-stream-message-bubble__image-intersection-end:last-child {
+  margin-bottom: 0;
+}
+
 .cometchat-stream-message-bubble > ol:first-child > li:first-child,
 .cometchat-stream-message-bubble > ul:first-child > li:first-child
 {
@@ -230,7 +262,6 @@
 .cometchat-stream-message-bubble h4,
 .cometchat-stream-message-bubble h5,
 .cometchat-stream-message-bubble h6 {
-  line-height: 20px;
   font-size: initial;
   padding: var(--cometchat-padding-2) 0px;
   margin: 0;
@@ -244,9 +275,20 @@
   padding-top: 0px;
 }
 
-.cometchat-stream-message-bubble p{
-  line-height: 20px;
-  padding: var(--cometchat-padding-2) 0px;
+.cometchat-stream-message-bubble__image-intersection-start, .cometchat-stream-message-bubble__image-intersection-end{
+  display: none;
+}
+
+.cometchat-stream-message-bubble .cometchat-stream-message-bubble__image-intersection-start:not(.cometchat-stream-message-bubble__image-intersection-end ~ .cometchat-stream-message-bubble__image-intersection-start) {
+  display: block;
+  margin-top: -0.5em;
+}
+.cometchat-stream-message-bubble .cometchat-stream-message-bubble__image-intersection-end:not(:has(+ .cometchat-stream-message-bubble__image-intersection-start)) {
+  display: block;
+}
+
+.cometchat-stream-message-bubble .cometchat-stream-message-bubble__image-intersection-end:last-child {
+  margin-bottom: 0;
 }
 
 .cometchat-stream-message-bubble > ul:first-child li:first-child > p:first-child{

package/dist/styles/components/CometChatAIAssistantChat.css

@@ -352,6 +352,7 @@ padding-bottom: var(--cometchat-padding-2);
 .cometchat-ai-assistant-chat .cometchat-text-bubble.cometchat-text-bubble-outgoing .cometchat-text-bubble__body-text {
     -webkit-line-clamp: initial !important;
     line-clamp: initial !important;
+    line-height: 1.75;
 }
 .cometchat-ai-assistant-chat .cometchat-text-bubble.cometchat-text-bubble-outgoing .cometchat-text-bubble__read-more,
 .cometchat-ai-assistant-chat .cometchat-text-bubble.cometchat-text-bubble-outgoing .cometchat-text-bubble__read-less {

package/dist/styles/components/CometChatAIAssistantMessageBubble.css

@@ -12,8 +12,14 @@
   box-sizing: border-box;
   max-width: 100%;
   overflow: hidden;
+  line-height: 1.75;
+  margin: 0;
+  margin-bottom: var(--cometchat-margin-2);
 }
 
+.cometchat-ai-assistant-message-bubble {
+  margin-top: calc(var(--cometchat-margin-1) * -1)
+}
 
 .cometchat-ai-assistant-message-bubble>p:not([class]) {
   text-align: left;
@@ -34,6 +40,10 @@
 
 }
 
+.cometchat-ai-assistant-message-bubble li *{
+  vertical-align: top;
+}
+
 .cometchat-ai-assistant-message-bubble ol:not([class]),.cometchat-ai-assistant-message-bubble ul:not([class]) {
   padding-left: var(--cometchat-padding-5) !important;
   text-align: left !important;
@@ -147,8 +157,7 @@
 }
 .cometchat-ai-assistant-message-bubble li{
   overflow: visible !important;
-  line-height: 20px;
-  padding: 0px 0px 6px 0px;
+  padding: 0;
 }
 .cometchat-ai-assistant-message-bubble > ol:first-child > li:first-child,
 .cometchat-ai-assistant-message-bubble > ul:first-child > li:first-child
@@ -162,11 +171,15 @@
 .cometchat-ai-assistant-message-bubble h4,
 .cometchat-ai-assistant-message-bubble h5,
 .cometchat-ai-assistant-message-bubble h6 {
-  line-height: 20px;
   font-size: initial;
   padding: var(--cometchat-padding-2) 0px;
   margin: 0;
 }
+
+.cometchat-ai-assistant-message-bubble > *:first-child *:first-child:not(:has(*)) ~ img{
+  margin-top: var(--cometchat-margin-1);
+}
+
 .cometchat-ai-assistant-message-bubble > h1:first-child,
 .cometchat-ai-assistant-message-bubble > h2:first-child,
 .cometchat-ai-assistant-message-bubble > h3:first-child,
@@ -179,10 +192,23 @@
   max-height: 300px;
   width: fit-content;
   border-radius: var(--cometchat-radius-2);
+  margin-block: var(--cometchat-margin-2) 0;
 }
-.cometchat-ai-assistant-message-bubble p{
-  line-height: 20px;
-  padding: var(--cometchat-padding-2) 0px;
+
+.cometchat-ai-assistant-message-bubble__image-intersection-start, .cometchat-ai-assistant-message-bubble__image-intersection-end{
+  display: none;
+}
+
+.cometchat-ai-assistant-message-bubble .cometchat-ai-assistant-message-bubble__image-intersection-start:not(.cometchat-ai-assistant-message-bubble__image-intersection-end ~ .cometchat-ai-assistant-message-bubble__image-intersection-start) {
+  display: block;
+  margin-top: -0.5em;
+}
+.cometchat-ai-assistant-message-bubble .cometchat-ai-assistant-message-bubble__image-intersection-end:not(:has(+ .cometchat-ai-assistant-message-bubble__image-intersection-start)) {
+  display: block;
+}
+
+.cometchat-ai-assistant-message-bubble .cometchat-ai-assistant-message-bubble__image-intersection-end:last-child {
+  margin-bottom: 0;
 }
 
 .cometchat-ai-assistant-message-bubble > ul:first-child li:first-child > p:first-child{

package/dist/styles/components/CometChatConversations.css

@@ -219,8 +219,8 @@ box-sizing: border-box;
 
 
 .cometchat-conversations__subtitle-icon-collaborative-whiteboard{
-  -webkit-mask: url("../../assets/conversations_collaborative-whiteboard-message.svg") center center no-repeat;
-  mask: url("../../assets/conversations_collaborative-whiteboard-message.svg") center center no-repeat;
+  -webkit-mask: url("../../assets/collaborative_whiteboard.svg") center center no-repeat;
+  mask: url("../../assets/collaborative_whiteboard.svg") center center no-repeat;
   -webkit-mask-size: contain;
   mask-size: contain;
 }

package/dist/styles/components/CometChatMessageBubble.css

@@ -11,6 +11,11 @@
     gap: var(--cometchat-padding-2, 8px);
     flex: 1 0 0;
 }
+
+.cometchat-message-bubble__body-reply-view{
+    width: 100%;
+    margin-bottom: 5px;
+}
 .cometchat-message-bubble .cometchat-reactions{
     width: 100%;
     margin-top: -4px;

package/dist/styles/components/CometChatMessageHeader.css

@@ -8,7 +8,7 @@
     flex: 1 0 0;
     align-self: stretch;
     justify-content: space-between;
-    height: 64px;
+    height: 63px;
     background: var(--cometchat-background-color-01);
     width: 100%;
     overflow: hidden;

package/dist/styles/components/CometChatMessageList.css

@@ -684,7 +684,6 @@
  * Setting transparent background and gap for sticker message bubble
  */
 .cometchat-message-bubble__body-wrapper .cometchat-message-bubble__sticker-message {
-    background-color: transparent;
     gap: var(--cometchat-padding-2, 8px);
 }
 
@@ -760,6 +759,10 @@
     animation: backgroundFade 3s ease-out forwards;
 }
 
+.cometchat-message-list__bubble-highlight-longer {
+    animation: backgroundFade 5s 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,