@cometchat/chat-uikit-react 5.0.0-beta1 → 5.0.0

package/dist/styles/CometChatCallButtons.css

@@ -31,7 +31,7 @@
 .cometchat-outgoing-call__backdrop {
     display: flex;
     position: fixed;
-    z-index: 1;
+    z-index: 3;
     left: 0;
     top: 0;
     justify-content: center;

package/dist/styles/CometChatCallLogs.css

@@ -27,7 +27,7 @@
    background-color: var(--cometchat-white-pressed, #E8E8E8);
  }
 
-.cometchat-call-logs__list-item-tail {
+.cometchat-call-logs__list-item-trailing-view {
   height: 24px;
   width: 24px;
   display: flex;
@@ -40,12 +40,12 @@
   background:var(--cometchat-icon-color-primary,#FFF)
 }
 
-.cometchat-call-logs__list-item-tail-video {
+.cometchat-call-logs__list-item-trailing-view-video {
   -webkit-mask: url("../../assets/call-log_video.svg") center center no-repeat;
   mask: url("../../assets/call-log_video.svg") center center no-repeat;
 }
 
-.cometchat-call-logs__list-item-tail-audio {
+.cometchat-call-logs__list-item-trailing-view-audio {
   -webkit-mask: url("../../assets/call-log-audio.svg") center center no-repeat;
   mask: url("../../assets/call-log-audio.svg") center center no-repeat;
 }

package/dist/styles/{AIConversationStarter.css → CometChatConversationStarter.css}

@@ -1,4 +1,4 @@
-.cometchat-ai-conversation-starter {
+.cometchat-conversation-starter {
   width: 100%;
   display: flex;
   justify-content: center;
@@ -61,7 +61,7 @@
   animation: shimmerAnimation 1.5s infinite linear;
 }
 
-.cometchat-ai-conversation-stater__error-view {
+.cometchat-conversation-starter__error-view {
   color: var(--cometchat-text-color-secondary, #727272);
   text-align: center;
   font: var(--cometchat-font-body-regular);

package/dist/styles/{components/AIConversationSummary.css → CometChatConversationSummary.css}

@@ -1,10 +1,10 @@
-.cometchat-ai-conversation-summary__wrapper {
+.cometchat-conversation-summary__wrapper {
   width: 100%;
   height: 100%;
   padding: var(--cometchat-padding-1, 4px) var(--cometchat-padding-2, 8px);
 }
 
-.cometchat-ai-conversation-summary {
+.cometchat-conversation-summary {
   display: flex;
   height: 100%;
   width: 100%;
@@ -18,14 +18,14 @@
   gap: var(--cometchat-padding-2, 8px);
 }
 
-.cometchat-ai-conversation-summary__header {
+.cometchat-conversation-summary__header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   align-self: stretch;
 }
 
-.cometchat-ai-conversation-summary__header-title {
+.cometchat-conversation-summary__header-title {
   overflow: hidden;
   color: var(--cometchat-text-color-primary, #141414);
   text-overflow: ellipsis;
@@ -33,7 +33,7 @@
   font-style: normal;
 }
 
-.cometchat-ai-conversation-summary__header-close-button {
+.cometchat-conversation-summary__header-close-button {
   mask: url("../../assets/close.svg");
   -webkit-mask: url("../../assets/close.svg");
   background-color: var(--cometchat-icon-color-primary, #141414);
@@ -42,7 +42,7 @@
   cursor: pointer;
 }
 
-.cometchat-ai-conversation-summary__body {
+.cometchat-conversation-summary__body {
   width: 100%;
   flex: 1 0 0;
   color: var(--cometchat-text-color-primary, #141414);
@@ -51,7 +51,7 @@
   text-align: left;
 }
 
-.cometchat-ai-conversation-summary__shimmer {
+.cometchat-conversation-summary__shimmer {
   display: flex;
   width: 100%;
   flex-direction: column;
@@ -60,7 +60,7 @@
   gap: var(--cometchat-padding-2, 8px);
 }
 
-.cometchat-ai-conversation-summary__shimmer-item {
+.cometchat-conversation-summary__shimmer-item {
   width: 100%;
   display: flex;
   height: 14px;
@@ -78,7 +78,7 @@
   /* Add animation properties */
 }
 
-.cometchat-ai-conversation-summary__shimmer .cometchat-ai-conversation-summary__shimmer-item:last-child {
+.cometchat-conversation-summary__shimmer .cometchat-conversation-summary__shimmer-item:last-child {
   width: 70%;
 }
 
@@ -92,7 +92,7 @@
   }
 }
 
-.cometchat-ai-conversation-summary__shimmer-item {
+.cometchat-conversation-summary__shimmer-item {
   background: var(--cometchat-shimmer-gradient-color, linear-gradient(90deg, #E0E0E0 0%, #EEE 100%));
   background-size: 800px 104px;
   /* Consistent background size for animation */
@@ -101,8 +101,8 @@
 }
 
 
-.cometchat-ai-conversation-summary__error-view,
-.cometchat-ai-conversation-summary__empty-view {
+.cometchat-conversation-summary__error-view,
+.cometchat-conversation-summary__empty-view {
   color: var(--cometchat-text-color-secondary, #727272);
   text-align: center;
   font: var(--cometchat-font-body-regular);

package/dist/styles/CometChatConversations.css

@@ -26,7 +26,7 @@
   min-height: 43px;
 }
 
-.cometchat-conversations .cometchat-list-item__tail-view{
+.cometchat-conversations .cometchat-list-item__trailing-view{
   width: auto;
   height: 40px;
 }
@@ -230,19 +230,19 @@
   display: none;
 }
 
-.cometchat-conversations__tail-view {
+.cometchat-conversations__trailing-view {
   display: flex;
   flex-direction: column;
   gap: var(--cometchat-padding-1,4px);
 }
 
-.cometchat-conversations__tail-view-badge {
+.cometchat-conversations__trailing-view-badge {
   display: flex;
   justify-content: flex-end;
   gap: var(--cometchat-padding-1,4px);
 }
 
-.cometchat-conversations__tail-view-badge-count {
+.cometchat-conversations__trailing-view-badge-count {
   display: flex;
   height: 20px;
   padding: 0px 8px;
@@ -356,7 +356,7 @@
   background:var(--cometchat-static-white,#FFF);
 }
 
-.cometchat-conversations__tail-view-options-delete-backdrop {
+.cometchat-conversations__trailing-view-options-delete-backdrop {
   background: rgba(0, 0, 0, 0.5);
   position: absolute;
   top: 0;
@@ -370,17 +370,17 @@
 }
 
 
-.cometchat-conversations__tail-view-options .cometchat-menu-list__menu {
+.cometchat-conversations__trailing-view-options .cometchat-menu-list__menu {
   background-color: transparent;
 }
 
-.cometchat-conversations__tail-view-options .cometchat-menu-list__main-menu-item{
+.cometchat-conversations__trailing-view-options .cometchat-menu-list__main-menu-item{
   background-color: transparent;
   box-shadow: none;
 }
 
 
-.cometchat-conversations__tail-view-options .cometchat-menu-list__main-menu-item-icon-delete {
+.cometchat-conversations__trailing-view-options .cometchat-menu-list__main-menu-item-icon-delete {
  -webkit-mask: url("../../assets/delete_icon.svg") center center no-repeat;
   mask: url("../../assets/delete_icon.svg") center center no-repeat;
   background: var(--cometchat-error-color,#F44649);
@@ -389,14 +389,14 @@
   -webkit-mask-size: contain;
 }
 
-.cometchat-conversations__tail-view-options .cometchat-menu-list__sub-menu-icon {
+.cometchat-conversations__trailing-view-options .cometchat-menu-list__sub-menu-icon {
 width: 20px;
 height: 20px;
 background: var(--cometchat-icon-color-secondary, #A1A1A1);
 }
 
 
-.cometchat-conversations__tail-view-options .cometchat-menu-list__sub-menu {
+.cometchat-conversations__trailing-view-options .cometchat-menu-list__sub-menu {
   display: flex;
   width: 20px;
   height: 20px;

package/dist/styles/CometChatEditPreview.css

@@ -53,6 +53,7 @@
 */
 .cometchat-edit-preview__subtitle {
     font-style: normal;
+    text-align: left;
     color: var(--cometchat-text-color-secondary);
     font: var(--cometchat-font-caption1-regular);
 }

package/dist/styles/CometChatFileBubble.css

@@ -21,6 +21,8 @@
     justify-content: flex-start;
     gap: var(--cometchat-padding-2, 8px);
     flex: 1 0 0;
+    width: inherit;
+    overflow: hidden;
 }
 /* Body section of the file bubble with text alignment and overflow settings */
 .cometchat-file-bubble__body {

package/dist/styles/CometChatGroupMembers.css

@@ -34,7 +34,7 @@
   border-radius: 8px;
 }
 
-.cometchat-group-members .cometchat-group-members__tail-view-options {
+.cometchat-group-members .cometchat-group-members__trailing-view-options {
   display: flex;
   padding: var(--cometchat-padding-1, 4px) var(--cometchat-padding-3, 12px);
   justify-content: center;
@@ -50,20 +50,20 @@
   text-transform: capitalize;
 }
 
-.cometchat-group-members .cometchat-group-members__tail-view-options-admin {
+.cometchat-group-members .cometchat-group-members__trailing-view-options-admin {
   border: 1px solid var(--cometchat-border-color-highlight, #6852D6);
 }
 
-.cometchat-group-members .cometchat-group-members__tail-view-options-owner {
+.cometchat-group-members .cometchat-group-members__trailing-view-options-owner {
   color: var(--cometchat-static-white, #F9F8FD);
   background: var(--cometchat-primary-color, #6852D6);
 }
 
-.cometchat-group-members .cometchat-group-members__tail-view-options-participant {
+.cometchat-group-members .cometchat-group-members__trailing-view-options-participant {
   display: none;
 }
 
-.cometchat-group-members .cometchat-list-item__tail-view {
+.cometchat-group-members .cometchat-list-item__trailing-view {
   width: auto;
   height: fit-content;
 }

package/dist/styles/CometChatIncomingCall.css

@@ -32,7 +32,7 @@
     justify-content: space-around;
 }
 
-.cometchat-incoming-call .cometchat-list-item__tail-view {
+.cometchat-incoming-call .cometchat-list-item__trailing-view {
     width: fit-content;
     height: fit-content;
 }

package/dist/styles/CometChatList.css

@@ -9,28 +9,6 @@
     overflow: hidden;
     position: relative;
 }
-
-/* Header section of the list, containing title and possibly other elements */
-.cometchat-list__header {
-    flex-shrink: 0;
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    padding: 0;
-    margin: 0;
-    box-sizing: border-box;
-    background: var(--cometchat-background-color-01);
-    border-right: 1px solid var(--cometchat-border-color-light);
-    border-bottom: 1px solid var(--cometchat-border-color-light);
-}
-
-/* Menu section of the header, containing custom view */
-.cometchat-list__header-menu {
-    position: absolute;
-    right: 16px;
-    top: 20px;
-}
-
 /* Title section of the header, containing text or other elements */
 .cometchat-list__header-title {
     display: flex;
@@ -52,6 +30,21 @@
     align-self: stretch;
 }
 
+/* Header section of the list, containing title and possibly other elements */
+.cometchat-list__header {
+    flex-shrink: 0;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    padding: 0;
+    margin: 0;
+    box-sizing: border-box;
+    background: var(--cometchat-background-color-01);
+    border-right: 1px solid var(--cometchat-border-color-light);
+    border-bottom: 1px solid var(--cometchat-border-color-light);
+}
+
+
 /* Search bar section in the header */
 .cometchat-list__header-search-bar {
     display: flex;

package/dist/styles/CometChatListItem.css

@@ -51,7 +51,7 @@
 }
 
 .cometchat-list-item__menu-view,
-.cometchat-list-item__tail-view {
+.cometchat-list-item__trailing-view {
     display: flex;
     width: 24px;
     height: 24px;
@@ -59,7 +59,7 @@
     align-items: center;
 }
 
-.cometchat-list-item__tail-view-hidden {
+.cometchat-list-item__trailing-view-hidden {
     display: none;
 }
 

package/dist/styles/CometChatMessageComposer.css

@@ -62,41 +62,7 @@
     width: fit-content;
 }
 
-/* AI button popover content */
-.cometchat-message-composer__auxilary-button-view-ai-button .cometchat-popover__content {
-    min-height: 110px;
-    width: fit-content;
-    min-width: 280px;
-    max-height: 240px;
-    max-width: 280px;
-}
-
-.cometchat-message-composer__auxilary-button-view-ai-button .cometchat-popover__content>.cometchat {
-    border-radius: inherit;
-}
-
-.cometchat-message-composer__auxilary-button-view-ai-button .cometchat-popover__content .cometchat-ai-smart-replies {
-    height: 200px;
-}
-
-.cometchat-message-composer__auxilary-button-view-ai-button .cometchat-action-sheet__item {
-    padding: var(--cometchat-padding-3, 12px);
-}
 
-.cometchat-message-composer__auxilary-button-view-ai-button .cometchat-action-sheet__item-body {
-    font: var(--cometchat-font-body-regular);
-
-}
-
-.cometchat-message-composer__auxilary-button-view-ai-button .cometchat-action-sheet {
-    justify-content: center;
-    border: none;
-    border-radius: inherit;
-    background: inherit;
-    box-shadow: none;
-    width: 100%;
-    height: 100%;
-}
 
 .cometchat-message-composer__input .cometchat-mentions>span {
     color: var(--cometchat-text-color-highlight, #6852D6);
@@ -141,6 +107,7 @@
     justify-content: space-between;
     align-items: flex-start;
     align-self: stretch;
+    flex-direction: column;
 }
 
 .cometchat-message-composer__header-error-state {
@@ -185,7 +152,6 @@
     flex-direction: column;
     justify-content: flex-end;
     z-index: 2;
-    height: fit-content;
     min-height: 45px;
     padding: 0 0 1px 0;
     width: fit-content;
@@ -209,6 +175,9 @@
     overflow: hidden;
     border-radius: inherit;
 }
+.cometchat-mention-list .cometchat-list .cometchat-list__header-title{
+    display: none;
+}
 
 /* Message input area */
 .cometchat-message-composer__input {
@@ -240,7 +209,24 @@
     width: 100%;
     align-items: center;
 }
-
+/* sticker button placement */
+.cometchat-message-composer__sticker-button-view {
+    display: flex;
+    justify-content: flex-start;
+    gap: 12px;
+    width: fit-content;
+    align-items: center;
+}
+/* default  buttons placement */
+.cometchat-message-composer__default-buttons{
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    gap: var(--cometchat-padding-4);
+    width:fit-content;
+    margin-right: auto;
+}
 /* Placeholder styling when input is empty */
 .cometchat-message-composer__input:empty:before {
     content: attr(data-placeholder);
@@ -286,12 +272,34 @@
     background: var(--cometchat-primary-color);
 }
 
-/* Active AI button icon */
-.cometchat-message-composer div:not([class]) .cometchat-message-composer__auxilary-button-view-ai-button-active .cometchat-button__icon {
-    background: var(--cometchat-primary-color);
-}
 
 /* Active stickerkeyboard button icon */
 .cometchat-message-composer div:not([class]) .cometchat-message-composer__auxilary-button-view-sticker-button-active .cometchat-button__icon {
     background: var(--cometchat-primary-color);
+}
+.cometchat-message-composer__input-mobile{
+    font: var( --cometchat-font-heading4-regular);
+}
+/**
+ * Default styling for each options in actionsheet
+ */
+.cometchat-message-composer__secondary-button-view-attachment-button .cometchat-action-sheet{
+    min-width: 200px;
+}
+.cometchat-message-composer__secondary-button-view-attachment-button-1 .cometchat-popover__content{
+height: 58px;
+}
+.cometchat-message-composer__secondary-button-view-attachment-button-2 .cometchat-popover__content{
+    height: 114px; 
+}
+.cometchat-message-composer__secondary-button-view-attachment-button-3 .cometchat-popover__content{
+    height: 170px; 
+
+}
+.cometchat-message-composer__secondary-button-view-attachment-button-4 .cometchat-popover__content{
+    height: 230px; 
+
+}
+.cometchat-message-composer__secondary-button-view-attachment-button-5 .cometchat-popover__content{
+    height: 285px; 
 }

package/dist/styles/CometChatMessageHeader.css

@@ -10,6 +10,8 @@
     justify-content: space-between;
     height: 64px;
     background: var(--cometchat-background-color-01);
+    width: 100%;
+    overflow: hidden;
 }
 
 /* Subtitle styling within the message header */
@@ -50,6 +52,11 @@
     justify-content: flex-start;
     gap: var(--cometchat-padding-2, 8px);
     flex: 1 0 0;
+    width: 100%;
+    overflow: hidden;
+}
+.cometchat-message-header  .cometchat-list-item__trailing-view{
+    display: none;
 }
 
 /* Styling for the back button in the message header */
@@ -66,7 +73,20 @@
     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 .cometchat-button__icon{
+    height: 24px;
+    width: 24px;
+    background: var(--cometchat-icon-color-primary, #141414);;
+}
 /* List item container within the message header */
 
 .cometchat-message-header__listitem {
@@ -75,15 +95,18 @@
     display: flex;
     align-items: center;
     justify-content: flex-start;
+    overflow: hidden;
 }
 
 /* Menu container within the message header, aligned to the right */
 
-.cometchat-message-header__menu {
+.cometchat-message-header__auxiliary-button-view {
     width: fit-content;
     display: flex;
+    gap: var(--cometchat-padding-4, 16px);
     align-items: center;
     justify-content: flex-end;
+    gap: 16px;
 }
 
 /* Removes padding for list items within the message header */
@@ -92,10 +115,12 @@
     padding: 0;
 
 }
-.cometchat-message-header .cometchat-list-item:hover{
+
+.cometchat-message-header .cometchat-list-item:hover {
     background: transparent;
     cursor: default;
 }
+
 /* Removes padding for the body of the list item within the message header */
 
 .cometchat-message-header .cometchat-list-item__body {
@@ -137,7 +162,7 @@
     width: 100%;
 }
 
-.cometchat-message-header .cometchat-button__icon:hover{
+.cometchat-message-header .cometchat-button__icon:hover {
     background: var(--cometchat-primary-color);
 }
 
@@ -148,6 +173,9 @@
     .cometchat-message-header__back-button {
         display: block;
     }
+    .cometchat-message-header .cometchat-list-item .cometchat-list-item__body-title {
+      display: initial;
+    }
 }
 
 @media (min-width: 769px) {

package/dist/styles/CometChatMessageInformation.css

@@ -145,7 +145,7 @@
     align-items: flex-start;
 }
 
-.cometchat-message-information__receipts .cometchat-list-item__tail-view {
+.cometchat-message-information__receipts .cometchat-list-item__trailing-view {
     display: none;
 }
 
@@ -204,7 +204,8 @@
     }
 }
 
-.cometchat-message-information .cometchat-date,
+.cometchat-message-information__receipts-subtite-text,
+.cometchat-message-information__receipts-subtitle .cometchat-date,
 .cometchat-message-information__receipts-subtite-text .cometchat-date {
     padding: 0px;
     overflow: hidden;

package/dist/styles/CometChatMessageList.css

@@ -20,7 +20,9 @@
     border: none;
     align-self: center;
 }
-
+.cometchat-message-list .cometchat-message-list__footer-smart-replies,.cometchat-message-list__footer-conversation-starter{
+    width: 100%;
+}
 /* Body of the error state view */
 .cometchat-message-list__error-state-view-body {
     display: flex;
@@ -310,9 +312,7 @@ width: fit-content;
 
 /* Message indicator inside message list */
 .cometchat-message-list__message-indicator {
-    z-index: 1;
-    position: absolute;
-    bottom: 8px;
+    margin-bottom: 8px;
     display: flex;
     width: 100;
     justify-content: center;
@@ -362,6 +362,7 @@ width: fit-content;
     justify-content: flex-start;
     width: 100%;
     box-sizing: border-box;
+    background: transparent;
 }
 
 /* Leading view inside message bubble */
@@ -698,7 +699,7 @@ width: fit-content;
 .cometchat-message-information__popup-wrapper {
     display: flex;
     position: fixed;
-    z-index: 1;
+    z-index: 2;
     left: 0;
     top: 0;
     width: 100%;

package/dist/styles/CometChatOutgoingCall.css

@@ -21,6 +21,11 @@
     font: var(--cometchat-font-title-medium);
 }
 
+.cometchat-outgoing-call__title-container {
+    display: flex;
+    flex-direction: column;
+}
+
 /* Subtitle text for the outgoing call UI */
 .cometchat-outgoing-call__subtitle {
     color: var(--cometchat-text-color-secondary);