@cometchat/chat-uikit-react 5.0.4 → 5.0.6

package/dist/styles/CometChatCallLogs.css

@@ -78,8 +78,8 @@
 }
 
 .cometchat-call-logs__list-item-subtitle-icon-missed-call {
-  -webkit-mask: url("../../assets/call_received.svg") center center no-repeat;
-  mask: url("../../assets/call_received.svg") center center no-repeat;
+  -webkit-mask: url("../../assets/missedCallIcon.svg") center center no-repeat;
+  mask: url("../../assets/missedCallIcon.svg") center center no-repeat;
   background-color: var(--cometchat-error-color,#F44649);
 }
 

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/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);

package/dist/styles/CometChatMessageInformation.css

@@ -1,6 +1,8 @@
 .cometchat-message-information {
-    width: 420px;
+    max-width: 420px;
+    width: 100%;
     height: fit-content;
+    max-height: 100%;
     flex-shrink: 0;
     border-radius: var(--cometchat-radius-5, 20px);
     border: 1px solid var(--cometchat-border-color-light, #F5F5F5);
@@ -229,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

@@ -173,7 +173,7 @@ width: fit-content;
 .cometchat-message-list__date-header {
     position: absolute;
     top: 12px;
-    z-index: 1;
+    z-index: 2;
 }
 .cometchat-message-list__bubble-date-header{
     margin: auto;
@@ -490,7 +490,10 @@ width: fit-content;
     align-items: center;
     align-self: center;
     border-radius: var(--cometchat-radius-2, 8px);
+    margin: auto;
     margin-top: 10px;
+    z-index: 1;
+    position: relative;
 
 
 }
@@ -656,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
@@ -707,5 +704,20 @@ width: fit-content;
     justify-content: center;
     align-items: center;
     overflow: auto;
-    background-color: rgba(0, 0, 0, 0.4);
+    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;

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/CometChatThreadedMessagePreview.css

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

package/dist/styles/PollsBubble.css

@@ -8,6 +8,11 @@
   width: 240px;
   max-width: 240px;
 }
+.cometchat-polls-bubble  * {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
 
 .cometchat-polls-bubble-incoming {
   background: var(--cometchat-neutral-color-300, #E8E8E8);

package/dist/styles/StickersKeyboard.css

@@ -1,9 +1,3 @@
-* {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-}
-
 .cometchat-sticker-keyboard {
   display: flex;
   width: 100%;

package/dist/styles/components/CometChatCallLogs.css

@@ -78,8 +78,8 @@
 }
 
 .cometchat-call-logs__list-item-subtitle-icon-missed-call {
-  -webkit-mask: url("../../assets/call_received.svg") center center no-repeat;
-  mask: url("../../assets/call_received.svg") center center no-repeat;
+  -webkit-mask: url("../../assets/missedCallIcon.svg") center center no-repeat;
+  mask: url("../../assets/missedCallIcon.svg") center center no-repeat;
   background-color: var(--cometchat-error-color,#F44649);
 }
 

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/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/components/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/components/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);

package/dist/styles/components/CometChatMessageInformation.css

@@ -1,6 +1,8 @@
 .cometchat-message-information {
-    width: 420px;
+    max-width: 420px;
+    width: 100%;
     height: fit-content;
+    max-height: 100%;
     flex-shrink: 0;
     border-radius: var(--cometchat-radius-5, 20px);
     border: 1px solid var(--cometchat-border-color-light, #F5F5F5);
@@ -229,4 +231,8 @@
 
 .cometchat-message-information .cometchat-list__header {
     border-bottom: none;
+}
+
+.cometchat-message-information .cometchat-message-bubble {
+    pointer-events: none;
 }

package/dist/styles/components/CometChatMessageList.css

@@ -173,7 +173,7 @@ width: fit-content;
 .cometchat-message-list__date-header {
     position: absolute;
     top: 12px;
-    z-index: 1;
+    z-index: 2;
 }
 .cometchat-message-list__bubble-date-header{
     margin: auto;
@@ -490,7 +490,10 @@ width: fit-content;
     align-items: center;
     align-self: center;
     border-radius: var(--cometchat-radius-2, 8px);
+    margin: auto;
     margin-top: 10px;
+    z-index: 1;
+    position: relative;
 
 
 }
@@ -656,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
@@ -707,5 +704,20 @@ width: fit-content;
     justify-content: center;
     align-items: center;
     overflow: auto;
-    background-color: rgba(0, 0, 0, 0.4);
+    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/components/CometChatOngoingCall.css

@@ -1,4 +1,4 @@
-.cometchat-ongoing-call {
+.cometchat-ongoing-call,.cometchat:has(> .cometchat-ongoing-call) {
     width: 100%;
     height: 100%;
     border-radius: 0;

package/dist/styles/components/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/components/CometChatThreadedMessagePreview.css

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

package/dist/styles/components/PollsBubble.css

@@ -8,6 +8,11 @@
   width: 240px;
   max-width: 240px;
 }
+.cometchat-polls-bubble  * {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
 
 .cometchat-polls-bubble-incoming {
   background: var(--cometchat-neutral-color-300, #E8E8E8);

package/dist/styles/components/StickersKeyboard.css

@@ -1,9 +1,3 @@
-* {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-}
-
 .cometchat-sticker-keyboard {
   display: flex;
   width: 100%;

package/dist/styles/components/index.css

@@ -55,6 +55,9 @@
 @import url('./CometChatThreadedMessagePreview.css');
 @import url('./CometChatToast.css');
 
+.cometchat * {
+    box-sizing: border-box;
+}
 
 
 

package/dist/styles/index.css

@@ -55,6 +55,9 @@
 @import url('./CometChatThreadedMessagePreview.css');
 @import url('./CometChatToast.css');
 
+.cometchat * {
+    box-sizing: border-box;
+}
 
 
 

package/dist/types/components/BaseComponents/CometChatContextMenu/CometChatContextMenu.d.ts

@@ -7,6 +7,8 @@ interface ContextMenuProps {
     onOptionClicked?: (option: CometChatActionsIcon | CometChatActionsView | CometChatOption) => void;
     placement?: Placement;
     closeOnOutsideClick?: boolean;
+    disableBackgroundInteraction?: boolean;
+    useParentContainer?: boolean;
 }
 /**
  * CometChatContextMenu is a composite component used to display menu data in required format.

package/dist/types/components/BaseComponents/CometChatListItem/CometChatListItem.d.ts

@@ -12,6 +12,7 @@ interface ListItemProps {
     trailingView?: ReactNode;
     titleView?: ReactNode;
     leadingView?: ReactNode;
+    stopEventPropagation?: boolean;
 }
 declare const CometChatListItem: (props: ListItemProps) => import("react/jsx-runtime").JSX.Element;
 export { CometChatListItem };