@cometchat/chat-uikit-react 6.0.2 → 6.0.4

package/dist/styles/CometChatAudioBubble.css

@@ -15,8 +15,8 @@
 
 /* Download icon for the tail view (right side of the audio bubble) */
 .cometchat-audio-bubble__tail-view-download {
-    mask: url("../../assets/download.svg");
-    -webkit-mask: url("../../assets/download.svg");
+    mask: url("../../assets/download.svg") center center no-repeat;
+    -webkit-mask: url("../../assets/download.svg") center center no-repeat;
     display: flex;
     width: 24px;
     height: 24px;
@@ -54,8 +54,8 @@
 
 /* Close/stop icon inside the progress view (positioned in the center) */
 .cometchat-audio-bubble__tail-view-download-stop {
-    mask: url("../../assets/close.svg");
-    -webkit-mask: url("../../assets/close.svg");
+    mask: url("../../assets/close.svg") center center no-repeat;
+    -webkit-mask: url("../../assets/close.svg") center center no-repeat;
     background: var(--cometchat-static-white);
     display: flex;
     width: 15px;

package/dist/styles/CometChatConversationStarter.css

@@ -12,7 +12,8 @@
 
 .cometchat-conversation-starter__item {
   display: flex;
-  height: 33px;
+  min-height: 33px;
+  height: fit-content;
   padding: var(--cometchat-padding-2, 8px) var(--cometchat-padding-5, 20px);
   align-items: center;
   align-content: center;

package/dist/styles/CometChatConversationSummary.css

@@ -34,8 +34,8 @@
 }
 
 .cometchat-conversation-summary__header-close-button {
-  mask: url("../../assets/close.svg");
-  -webkit-mask: url("../../assets/close.svg");
+  mask: url("../../assets/close.svg") center center no-repeat;
+  -webkit-mask: url("../../assets/close.svg") center center no-repeat;
   background-color: var(--cometchat-icon-color-primary, #141414);
   width: 20px;
   height: 20px;

package/dist/styles/CometChatEditPreview.css

@@ -56,4 +56,7 @@
     text-align: left;
     color: var(--cometchat-text-color-secondary);
     font: var(--cometchat-font-caption1-regular);
+    word-break: break-word;
+    width: 100%;
+    overflow: hidden;
 }

package/dist/styles/CometChatFileBubble.css

@@ -65,8 +65,8 @@
 
 /* Download icon for the tail view (right side of the file bubble) */
 .cometchat-file-bubble__tail-view-download {
-    mask: url("../../assets/download.svg");
-    -webkit-mask: url("../../assets/download.svg");
+    mask: url("../../assets/download.svg") center center no-repeat;
+    -webkit-mask: url("../../assets/download.svg") center center no-repeat;
     display: flex;
     width: 20px;
     height: 20px;
@@ -125,8 +125,8 @@
 
 /* Close icon in the progress view to stop/cancel download */
 .cometchat-file-bubble__tail-view-download-stop {
-    mask: url("../../assets/close.svg");
-    -webkit-mask: url("../../assets/close.svg");
+    mask: url("../../assets/close.svg") center center no-repeat;
+    -webkit-mask: url("../../assets/close.svg") center center no-repeat;
     background: var(--cometchat-primary-color);
     display: flex;
     width: 12px;

package/dist/styles/CometChatFullScreenViewer.css

@@ -61,8 +61,8 @@
   background-color: var(--cometchat-primary-button-icon, #FFFFFF);
   height: 32px;
   width: 32px;
-  -webkit-mask: url("../../assets/close.svg");
-  mask: url("../../assets/close.svg");
+  -webkit-mask: url("../../assets/close.svg") center center no-repeat;
+  mask: url("../../assets/close.svg") center center no-repeat;
   -webkit-mask-size: 100%;
   mask-size: 100%;
 }

package/dist/styles/CometChatMediaRecorder.css

@@ -13,6 +13,9 @@
     box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
 }
 
+.cometchat-media-recorder__recording{
+    justify-content: space-between;
+}
 .cometchat-media-recorder {
     width: max-content;
 }
@@ -127,11 +130,8 @@
     background: var(--cometchat-background-color-01, #FFF);
     box-shadow: 0px 4px 8px -2px rgba(16, 24, 40, 0.10), 0px 2px 4px -2px rgba(16, 24, 40, 0.06);
 }
-
+.cometchat-media-recorder__recording-control-error>.cometchat-media-recorder__recording-control-record-icon,
 .cometchat-media-recorder__recording-control-record-icon {
-    -webkit-mask: url("../../assets/recording_resume.svg") center center no-repeat;
-    mask: url("../../assets/recording_resume.svg") center center no-repeat;
-    background: var(--cometchat-error-color, #F44649);
     width: 32px;
     height: 32px;
     flex-shrink: 0;
@@ -139,6 +139,21 @@
     mask-size: contain;
 }
 
+.cometchat-media-recorder__recording-control-record-icon {
+    -webkit-mask: url("../../assets/recording_resume.svg") center center no-repeat;
+    mask: url("../../assets/recording_resume.svg") center center no-repeat;
+    background: var(--cometchat-error-color, #F44649);
+}
+
+.cometchat-media-recorder__recording-control-error>.cometchat-media-recorder__recording-control-record-icon {
+    -webkit-mask: url("../../assets/mic_off.svg") center center no-repeat;
+    mask: url("../../assets/mic_off.svg") center center no-repeat;
+    background: var(--cometchat-text-color-tertiary, #A1A1A1);
+}
+
+.cometchat-media-recorder__recording-control-error {
+    pointer-events: none;
+}
 .cometchat-media-recorder__recording-control-pause-icon {
     -webkit-mask: url("../../assets/pause.svg") center center no-repeat;
     mask: url("../../assets/pause.svg") center center no-repeat;
@@ -214,4 +229,61 @@
     text-align: center;
     font: var(--cometchat-font-heading4-regular, 400 16px Roboto);
     line-height: 120%;
+}
+.cometchat-media-recorder__error {
+    display: flex;
+    justify-content: flex-start;
+    align-items: flex-start;
+    background: var(--cometchat-background-color-02, #FAFAFA);
+    border-radius: var(--cometchat-radius-4) var(--cometchat-radius-4) 0px 0px;
+    padding: var(--cometchat-padding-2);
+    gap: var(--cometchat-padding-2);
+    width: 260px;
+    position: absolute;
+    z-index: 2;
+    bottom: 100%;
+}
+
+.cometchat-media-recorder__error-content {
+    display: flex;
+    flex-direction: column;
+    gap: var(--cometchat-padding-1);
+}
+
+.cometchat-media-recorder__error-content-title {
+    font: var(--cometchat-font-caption1-bold);
+}
+
+.cometchat-media-recorder__error-content-subtitle {
+    font: var(--cometchat-font-caption1-regular);
+
+}
+
+.cometchat-media-recorder__error-content-title,
+.cometchat-media-recorder__error-content-subtitle {
+    text-align: left;
+    color: var(--cometchat-text-color-secondary, #727272);
+
+}
+
+.cometchat-media-recorder__error-icon-wrapper {
+    width: 16px;
+    height: 16px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: var(--cometchat-error-color);
+    border-radius: var(--cometchat-radius-max);
+}
+
+.cometchat-media-recorder__error-icon {
+    width: 16px;
+    height: 16px;
+    flex-shrink: 0;
+    background: var(--cometchat-static-white);
+    -webkit-mask: url("../../assets/error_info.svg") center center no-repeat;
+    mask: url("../../assets/error_info.svg") center center no-repeat;
+    -webkit-mask-size: contain;
+    transform: rotate(180deg);
+    mask-size: contain;
 }

package/dist/styles/CometChatMessageBubble.css

@@ -49,7 +49,10 @@
     align-items: flex-start;
 }
 .cometchat-message-bubble__text-message .cometchat-message-bubble__body-content-view{
-    width: 100%;
+    width: fit-content;
+    display: flex;
+    align-self: flex-start;
+    max-width: 100%;
 }
 .cometchat-message-bubble  .cometchat-text-bubble__body-text{
 text-align: left;

package/dist/styles/CometChatMessageComposer.css

@@ -57,12 +57,29 @@
     border: none;
 }
 
-/* Voice recording button popover content */
-.cometchat-message-composer__voice-recording-button .cometchat-popover__content {
+/* Voice recording button popover content */ .cometchat-message-composer__voice-recording-button .cometchat-popover__content {
     width: fit-content;
+    max-height: 300px;
+    height: fit-content;
+    min-height: 200px;
 }
 
+.cometchat-message-composer__voice-recording-button .cometchat-media-recorder {
+    max-height: 300px;
+    min-height: 220px;
+    overflow: hidden;
+}
 
+.cometchat-message-composer__voice-recording-button .cometchat-media-recorder__recording {
+    max-height: 300px;
+    min-height: 220px;
+}
+
+.cometchat-message-composer__voice-recording-button .cometchat-media-recorder__recorded {
+    max-height: 300px;
+    min-height: 220px;
+    justify-content: space-between;
+}
 
 .cometchat-message-composer__input .cometchat-mentions>span {
     color: var(--cometchat-text-color-highlight, #6852D6);
@@ -132,7 +149,7 @@
 }
 
 .cometchat-message-composer__header-error-state-icon {
-    -webkit-mask: url("../../assets/error_info.svg");
+    -webkit-mask: url("../../assets/error_info.svg") center center no-repeat;
     width: 20px;
     height: 20px;
     -webkit-mask-size: contain;

package/dist/styles/CometChatMessageInformation.css

@@ -98,7 +98,7 @@
     padding: 0px;
     flex-direction: column;
     align-items: flex-start;
-    max-height: 300px;
+    height: 260px;
     overflow: hidden auto;
 }
 
@@ -160,7 +160,7 @@
 
 .cometchat-message-information__shimmer {
     width: 100%;
-    height: 100%;
+    height: 260px;
     background: var(--cometchat-background-color-01, #FFF);
 
 }
@@ -231,4 +231,8 @@
 
 .cometchat-message-information .cometchat-list__header {
     border-bottom: none;
+}
+
+.cometchat-message-information .cometchat-message-bubble {
+    pointer-events: none;
 }

package/dist/styles/CometChatMessageList.css

@@ -554,96 +554,96 @@ width: fit-content;
 }
 
 .cometchat-message-bubble__video-call .cometchat-message-bubble__missed-call .cometchat-action-bubble__icon {
-    -webkit-mask: url("../../assets/missed_video_call_no_fill.svg");
+    -webkit-mask: url("../../assets/missed_video_call_no_fill.svg") center center no-repeat;
     -webkit-mask-size: contain;
     background: var(--cometchat-error-color);
 }
 
 .cometchat-message-bubble__video-call .cometchat-message-bubble__ended-call .cometchat-action-bubble__icon {
-    -webkit-mask: url("../../assets/call_end_no_fill.svg");
+    -webkit-mask: url("../../assets/call_end_no_fill.svg") center center no-repeat;
     -webkit-mask-size: contain;
 }
 
 .cometchat-message-bubble__video-call .cometchat-message-bubble__outgoing-call .cometchat-action-bubble__icon {
-    -webkit-mask: url("../../assets/outgoing_video_no_fill.svg");
+    -webkit-mask: url("../../assets/outgoing_video_no_fill.svg") center center no-repeat;
     -webkit-mask-size: contain;
 }
 
 .cometchat-message-bubble__video-call .cometchat-message-bubble__incoming-call .cometchat-action-bubble__icon {
-    -webkit-mask: url("../../assets/incoming_video_no_fill.svg");
+    -webkit-mask: url("../../assets/incoming_video_no_fill.svg") center center no-repeat;
     -webkit-mask-size: contain;
 }
 
 .cometchat-message-bubble__video-call .cometchat-message-bubble__busy-call .cometchat-action-bubble__icon {
-    -webkit-mask: url("../../assets/video_call_button.svg");
+    -webkit-mask: url("../../assets/video_call_button.svg") center center no-repeat;
     -webkit-mask-size: contain;
 }
 
 .cometchat-message-bubble__video-call .cometchat-message-bubble__answered-call .cometchat-action-bubble__icon {
-    -webkit-mask: url("../../assets/video_call_button.svg");
+    -webkit-mask: url("../../assets/video_call_button.svg") center center no-repeat;
     -webkit-mask-size: contain;
 }
 
 .cometchat-message-bubble__video-call .cometchat-message-bubble__unanswered-call .cometchat-action-bubble__icon {
-    -webkit-mask: url("../../assets/video_call_button.svg");
+    -webkit-mask: url("../../assets/video_call_button.svg") center center no-repeat;
     -webkit-mask-size: contain;
 }
 
 .cometchat-message-bubble__video-call .cometchat-message-bubble__cancelled-call .cometchat-action-bubble__icon {
-    -webkit-mask: url("../../assets/video_call_button.svg");
+    -webkit-mask: url("../../assets/video_call_button.svg") center center no-repeat;
     -webkit-mask-size: contain;
 }
 
 .cometchat-message-bubble__video-call .cometchat-message-bubble__rejected-call .cometchat-action-bubble__icon {
-    -webkit-mask: url("../../assets/video_call_button.svg");
+    -webkit-mask: url("../../assets/video_call_button.svg") center center no-repeat;
     -webkit-mask-size: contain;
 }
 
 
 .cometchat-message-bubble__audio-call .cometchat-message-bubble__missed-call .cometchat-action-bubble__icon {
-    -webkit-mask: url("../../assets/phone_missed_no_fill.svg");
+    -webkit-mask: url("../../assets/phone_missed_no_fill.svg") center center no-repeat;
     -webkit-mask-size: contain;
     background: var(--cometchat-error-color);
 
 }
 
 .cometchat-message-bubble__audio-call .cometchat-message-bubble__ended-call .cometchat-action-bubble__icon {
-    -webkit-mask: url("../../assets/call_end_no_fill.svg");
+    -webkit-mask: url("../../assets/call_end_no_fill.svg") center center no-repeat;
     -webkit-mask-size: contain;
 }
 
 .cometchat-message-bubble__audio-call .cometchat-message-bubble__outgoing-call .cometchat-action-bubble__icon {
-    -webkit-mask: url("../../assets/phone_outgoing_no_fill.svg");
+    -webkit-mask: url("../../assets/phone_outgoing_no_fill.svg") center center no-repeat;
     -webkit-mask-size: contain;
 }
 
 .cometchat-message-bubble__audio-call .cometchat-message-bubble__incoming-call .cometchat-action-bubble__icon {
-    -webkit-mask: url("../../assets/phone_incoming_no_fill.svg");
+    -webkit-mask: url("../../assets/phone_incoming_no_fill.svg") center center no-repeat;
     -webkit-mask-size: contain;
 }
 
 .cometchat-message-bubble__audio-call .cometchat-message-bubble__busy-call .cometchat-action-bubble__icon {
-    -webkit-mask: url("../../assets/audio_call_button.svg");
+    -webkit-mask: url("../../assets/audio_call_button.svg") center center no-repeat;
     -webkit-mask-size: contain;
 }
 
 .cometchat-message-bubble__audio-call .cometchat-message-bubble__answered-call .cometchat-action-bubble__icon {
-    -webkit-mask: url("../../assets/audio_call_button.svg");
+    -webkit-mask: url("../../assets/audio_call_button.svg") center center no-repeat;
     -webkit-mask-size: contain;
 }
 
 .cometchat-message-bubble__audio-call .cometchat-message-bubble__unanswered-call .cometchat-action-bubble__icon {
-    -webkit-mask: url("../../assets/audio_call_button.svg");
+    -webkit-mask: url("../../assets/audio_call_button.svg") center center no-repeat;
     -webkit-mask-size: contain;
 }
 
 .cometchat-message-bubble__audio-call .cometchat-message-bubble__cancelled-call .cometchat-action-bubble__icon {
-    -webkit-mask: url("../../assets/audio_call_button.svg");
+    -webkit-mask: url("../../assets/audio_call_button.svg") center center no-repeat;
     -webkit-mask-size: contain;
 }
 
 .cometchat-message-bubble__audio-call .cometchat-message-bubble__rejected-call .cometchat-action-bubble__icon {
-    -webkit-mask: url("../../assets/audio_call_button.svg");
+    -webkit-mask: url("../../assets/audio_call_button.svg") center center no-repeat;
     -webkit-mask-size: contain;
 }
 
@@ -659,12 +659,6 @@ width: fit-content;
 
 
 }
-/**
- * Adding margin on first message to avoid overlap for message and date header.
- */
-.cometchat-message-list__body .cometchat-list__body .cometchat-list__item-wrapper:nth-of-type(2) {
-    margin-top: 30px;
-  }
 
  /**
  * Setting transparent background and gap for sticker message bubble
@@ -687,6 +681,14 @@ width: fit-content;
  */
 .cometchat-message-bubble__sticker-message .cometchat-message-bubble__status-info-view {
     background: rgba(20, 20, 20, 0.60);
+    align-items: center;
+}
+
+.cometchat-message-bubble__sticker-message .cometchat-message-bubble__status-info-view > .cometchat{
+    box-sizing: border-box;
+    align-items: center;
+    justify-content: center;
+    display: flex;
 }
 
 /**
@@ -711,4 +713,19 @@ width: fit-content;
     align-items: center;
     overflow: auto;
     background-color: rgba(0, 0, 0, 0.6);
+}
+
+.cometchat-message-list__body
+{
+    justify-content: flex-end;
+}
+
+.cometchat-message-list .cometchat-message-list__body  .cometchat-list__body{
+    height: fit-content;
+    max-height: 100%;
+}
+
+.cometchat-message-list > .cometchat-message-list__body > .cometchat {
+    height: fit-content !important;
+    max-height: 100%;
 }

package/dist/styles/CometChatOngoingCall.css

@@ -1,4 +1,4 @@
-.cometchat-ongoing-call {
+.cometchat-ongoing-call,.cometchat:has(> .cometchat-ongoing-call) {
     width: 100%;
     height: 100%;
     border-radius: 0;
@@ -7,4 +7,4 @@
     left: 0px;
     top: 0px;
     z-index: 10;
-}
+}

package/dist/styles/CometChatPopover.css

@@ -7,4 +7,23 @@
     border: 1px solid var(--cometchat-border-color-light, #F5F5F5);
     background: var(--cometchat-background-color-01, #FFF);
     box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
+}
+
+.cometchat-popover__content-tooltip-top,
+.cometchat-popover__content-tooltip-bottom {
+  position: absolute;
+  width: 100%;
+  height: 6px;
+  background: var(--cometchat-static-black, #141414);
+  -webkit-mask: url("../../assets/tooltip.svg") center center no-repeat;
+  -webkit-mask-size: contain;
+}
+
+.cometchat-popover__content-tooltip-top {
+  bottom: -7px;
+}
+
+.cometchat-popover__content-tooltip-bottom {
+  transform: rotate(180deg);
+  top: -7px;
 }

package/dist/styles/CometChatReactionInfo.css

@@ -19,21 +19,6 @@
     justify-content: center;
 }
 
-.cometchat-reaction-info__tooltip {
-    width: 32px;
-    height: 6px;
-    background: var(--cometchat-static-black, #141414);
-    -webkit-mask: url("../../assets/tooltip.svg") center center no-repeat;
-    -webkit-mask-size: contain;
-}
-
-.cometchat-reaction-info__tooltip-side {
-    width: 6px;
-    height: 32px;
-    background: var(--cometchat-static-black, #141414);
-    -webkit-mask: url("../../assets/tooltip-side.svg") center center no-repeat;
-    -webkit-mask-size: contain;
-}
 
 .cometchat-reaction-info__emoji-text {
     display: flex;

package/dist/styles/CometChatReactionList.css

@@ -71,12 +71,12 @@
     display: flex;
     padding: 0px;
     flex-direction: column;
-    max-height: 300px;
     align-items: flex-start;
     align-self: stretch;
     border-radius: var(--cometchat-radius-0, 0px);
     background: var(--cometchat-background-color-01, #FFF);
     overflow-y: auto;
+    height: 200px;
 }
 
 .cometchat-reaction-list .cometchat-list-item {
@@ -120,7 +120,6 @@
     display: flex;
     width: 280px;
     max-height: 300px;
-    padding: var(--cometchat-padding-2, 8px) 0px;
     flex-direction: column;
     align-items: flex-start;
     align-self: stretch;
@@ -165,8 +164,8 @@
     background: var(--cometchat-shimmer-gradient-color);
     display: flex;
     border-radius: var(--cometchat-radius-max, 1000px);
-    width: 40px;
-    height: 40px;
+    width: 32px;
+    height: 32px;
     justify-content: center;
     align-items: center;
     animation: shimmerAnimation 10s infinite linear;

package/dist/styles/CometChatSmartReplies.css

@@ -34,8 +34,8 @@
 }
 
 .cometchat-smart-replies__header-close-button {
-  mask: url("../../assets/close.svg");
-  -webkit-mask: url("../../assets/close.svg");
+  mask: url("../../assets/close.svg") center center no-repeat;
+  -webkit-mask: url("../../assets/close.svg") center center no-repeat;
   background-color: var(--cometchat-icon-color-primary, #141414);
   width: 20px;
   height: 20px;

package/dist/styles/CometChatThreadHeader.css

@@ -1,6 +1,6 @@
 .cometchat-thread-header {
     display: flex;
-    width: 420px;
+    width: 100%;
     flex-direction: column;
     justify-content: center;
     align-items: flex-start;

package/dist/styles/CreatePolls.css

@@ -173,7 +173,7 @@
 }
 
 .cometchat-create-poll__button {
-  width: 388px;
+  width: 100%;
   height: 40px;
 }
 
@@ -236,6 +236,7 @@
   bottom: 0px;
   border-top: 1px solid var(--cometchat-border-color-light, #F5F5F5);
   padding: var(--cometchat-padding-3, 12px) var(--cometchat-padding-4, 16px) var(--cometchat-padding-5) var(--cometchat-padding-4, 16px);
+  width: 100%;
 
 }
 
@@ -290,4 +291,10 @@
 .cometchat-create-poll__body-options-add-button-disabled{
   color: var(--cometchat-text-color-disabled, #DCDCDC);
   font: var(--cometchat-font-caption1-medium);
+}
+
+@media (max-width: 768px) {
+ .cometchat-create-poll{
+  width: 360px;
+ }
 }

package/dist/styles/StickersKeyboard.css

@@ -168,8 +168,8 @@
 .cometchat-sticker-keyboard__empty-view-icon {
   width: 60px;
   height: 60px;
-  -webkit-mask-image: url("../../assets/sticker.svg");
-  mask-image: url("../../assets/sticker.svg");
+  -webkit-mask-image: url("../../assets/sticker.svg") center center no-repeat;
+  mask-image: url("../../assets/sticker.svg") center center no-repeat;
   -webkit-mask-size: 100%;
   mask-size: 100%;
   -webkit-mask-repeat: no-repeat;

package/dist/styles/components/CometChatAudioBubble.css

@@ -15,8 +15,8 @@
 
 /* Download icon for the tail view (right side of the audio bubble) */
 .cometchat-audio-bubble__tail-view-download {
-    mask: url("../../assets/download.svg");
-    -webkit-mask: url("../../assets/download.svg");
+    mask: url("../../assets/download.svg") center center no-repeat;
+    -webkit-mask: url("../../assets/download.svg") center center no-repeat;
     display: flex;
     width: 24px;
     height: 24px;
@@ -54,8 +54,8 @@
 
 /* Close/stop icon inside the progress view (positioned in the center) */
 .cometchat-audio-bubble__tail-view-download-stop {
-    mask: url("../../assets/close.svg");
-    -webkit-mask: url("../../assets/close.svg");
+    mask: url("../../assets/close.svg") center center no-repeat;
+    -webkit-mask: url("../../assets/close.svg") center center no-repeat;
     background: var(--cometchat-static-white);
     display: flex;
     width: 15px;

package/dist/styles/components/CometChatConversationStarter.css

@@ -12,7 +12,8 @@
 
 .cometchat-conversation-starter__item {
   display: flex;
-  height: 33px;
+  min-height: 33px;
+  height: fit-content;
   padding: var(--cometchat-padding-2, 8px) var(--cometchat-padding-5, 20px);
   align-items: center;
   align-content: center;

package/dist/styles/components/CometChatConversationSummary.css

@@ -34,8 +34,8 @@
 }
 
 .cometchat-conversation-summary__header-close-button {
-  mask: url("../../assets/close.svg");
-  -webkit-mask: url("../../assets/close.svg");
+  mask: url("../../assets/close.svg") center center no-repeat;
+  -webkit-mask: url("../../assets/close.svg") center center no-repeat;
   background-color: var(--cometchat-icon-color-primary, #141414);
   width: 20px;
   height: 20px;

package/dist/styles/components/CometChatEditPreview.css

@@ -56,4 +56,7 @@
     text-align: left;
     color: var(--cometchat-text-color-secondary);
     font: var(--cometchat-font-caption1-regular);
+    word-break: break-word;
+    width: 100%;
+    overflow: hidden;
 }

package/dist/styles/components/CometChatFileBubble.css

@@ -65,8 +65,8 @@
 
 /* Download icon for the tail view (right side of the file bubble) */
 .cometchat-file-bubble__tail-view-download {
-    mask: url("../../assets/download.svg");
-    -webkit-mask: url("../../assets/download.svg");
+    mask: url("../../assets/download.svg") center center no-repeat;
+    -webkit-mask: url("../../assets/download.svg") center center no-repeat;
     display: flex;
     width: 20px;
     height: 20px;
@@ -125,8 +125,8 @@
 
 /* Close icon in the progress view to stop/cancel download */
 .cometchat-file-bubble__tail-view-download-stop {
-    mask: url("../../assets/close.svg");
-    -webkit-mask: url("../../assets/close.svg");
+    mask: url("../../assets/close.svg") center center no-repeat;
+    -webkit-mask: url("../../assets/close.svg") center center no-repeat;
     background: var(--cometchat-primary-color);
     display: flex;
     width: 12px;