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

package/dist/styles/{AISmartReplies.css → CometChatSmartReplies.css}

@@ -1,122 +1,115 @@
-* {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
+.cometchat-smart-replies__wrapper {
+  width: 100%;
+  height: 100%;
+  padding: var(--cometchat-padding-1, 4px) var(--cometchat-padding-2, 8px);
 }
 
-.cometchat-ai-smart-replies {
+.cometchat-smart-replies {
   display: flex;
-  width: 100%;
   height: 100%;
-  padding: var(--cometchat-padding-3, 12px);
+  width: 100%;
+  padding: var(--cometchat-padding-3, 12px) var(--cometchat-padding-4, 16px);
   flex-direction: column;
   align-items: flex-start;
-  gap: var(--cometchat-padding-4, 16px);
+  border: 1px solid var(--cometchat-border-color-light, #F5F5F5);
   border-radius: var(--cometchat-radius-4, 16px);
+  background: var(--cometchat-background-color-01, #FFF);
+  box-shadow: 0px 12px 16px -4px rgb(16 24 40 / 2%), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
+  gap: var(--cometchat-padding-2, 8px);
 }
 
-.cometchat-ai-smart-replies__header {
+.cometchat-smart-replies__header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   align-self: stretch;
 }
 
-.cometchat-ai-smart-replies__header-title {
+.cometchat-smart-replies__header-title {
   overflow: hidden;
   color: var(--cometchat-text-color-primary, #141414);
   text-overflow: ellipsis;
-  font: var(--cometchat-font-heading4-medium);
+  font: var(--cometchat-font-body-medium);
   font-style: normal;
 }
 
-.cometchat-ai-smart-replies__item-wrapper {
-  display: flex;
-  flex-direction: column;
-  gap: var(--cometchat-padding-2, 8px);
-  overflow: scroll;
+.cometchat-smart-replies__header-close-button {
+  mask: url("../../assets/close.svg");
+  -webkit-mask: url("../../assets/close.svg");
+  background-color: var(--cometchat-icon-color-primary, #141414);
+  width: 20px;
+  height: 20px;
+  cursor: pointer;
 }
 
-.cometchat-ai-smart-replies__item-wrapper::-webkit-scrollbar,
-.cometchat-ai-smart-replies__item-wrapper::-webkit-scrollbar-thumb {
-    display: none;
+.cometchat-smart-replies__body {
+  width: 100%;
+  flex: 1 0 0;
+  color: var(--cometchat-text-color-primary, #141414);
+  font: var(--cometchat-font-body-regular);
+  font-style: normal;
+  text-align: left;
 }
 
-.cometchat-ai-smart-replies__item {
+.cometchat-smart-replies__shimmer-container {
   display: flex;
-  flex: 1 0 0;
-  padding: var(--cometchat-padding-2, 8px) var(--cometchat-padding-3, 12px);
-  align-items: center;
-  align-content: center;
-  gap: 4px var(--cometchat-padding-1, 4px);
-  align-self: stretch;
+  width: 100%;
   flex-wrap: wrap;
-  border-radius: var(--cometchat-radius-2, 8px);
-  border: 1px solid var(--cometchat-border-color-light, #F5F5F5);
-  background: var(--cometchat-background-color-01, #FFF);
-  text-align: left;
+  justify-content: flex-start;
+  align-items: center;
+  gap: var(--cometchat-padding-2, 8px);
+  flex-direction: row;
 }
 
-.cometchat-ai-smart-replies__item:hover {
-  background: var(--cometchat-white-hover, #FAFAFA);
-  cursor: pointer;
+.cometchat-smart-replies__shimmer-item {
+  flex-wrap: wrap;
+  width: 20%;
+  display: flex;
+  height: 33px;
+  border-radius: var(--cometchat-radius-max, 1000px);
+  background: var(--cometchat-shimmer-gradient-color, linear-gradient(90deg, #E0E0E0 0%, #EEE 100%));
+  background-size: 800px 104px;
+  animation: shimmerAnimation 1.5s infinite linear;
 }
 
-.cometchat-ai-smart-replies__item-button {
-  background: transparent;
-  border: none;
-  text-align: left;
-  color: var(--cometchat-text-color-primary, #141414);
+@keyframes shimmerAnimation {
+  0% {
+    background-position: -468px 0;
+  }
+
+  100% {
+    background-position: 468px 0;
+  }
 }
 
-.cometchat-ai-smart-replies__header-close-button {
-  cursor: pointer;
-  mask-repeat: no-repeat;
-  background-color: var(--cometchat-icon-color-primary, #141414);
-  height: 20px;
-  width: 20px;
-  -webkit-mask: url("../../assets/close.svg");
-  mask: url("../../assets/close.svg");
-  -webkit-mask-size: 100%;
-  mask-size: 100%;
+.cometchat-smart-replies__items-container {
+  display: flex;
+ flex-direction: column;
+  gap: var(--cometchat-padding-2, 8px);
+  justify-content: flex-start;
 }
 
-.cometchat-ai-smart-replies__shimmer-item {
-  max-height: 33px;
+.cometchat-smart-replies__item {
   display: flex;
   padding: var(--cometchat-padding-2, 8px) var(--cometchat-padding-3, 12px);
   align-items: center;
-  align-content: center;
-  gap: 4px var(--cometchat-padding-1, 4px);
-  align-self: stretch;
-  flex-wrap: wrap;
-  border-radius: var(--cometchat-radius-2, 8px);
+  border-radius: var(--cometchat-radius-max, 1000px);
   border: 1px solid var(--cometchat-border-color-light, #F5F5F5);
-  flex: 1 0 0;
-  background: var(--cometchat-shimmer-gradient-color, linear-gradient(90deg, #E0E0E0 0%, #EEE 100%));
-  animation: shimmerAnimation 1.5s infinite linear;
-}
-
-.cometchat-ai-smart-replies__error-view,
-.cometchat-ai-smart-replies__empty-view {
+  background: var(--cometchat-background-color-01, #FFF);
+  cursor: pointer;
   width: 100%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--cometchat-text-color-secondary, #727272);
-  text-align: center;
-  font: var(--cometchat-font-body-regular);
-  font-style: normal;
 }
 
+.cometchat-smart-replies__item:hover {
+  background: var(--cometchat-white-hover, #FAFAFA);
+  cursor: pointer;
+}
 
-@keyframes shimmerAnimation {
-  0% {
-    background-position: -468px 0;
-  }
-
-  100% {
-    background-position: 468px 0;
-  }
-}
+.cometchat-smart-replies__item-button {
+  background-color: transparent;
+  border: none;
+  color: var(--cometchat-text-color-primary);
+  cursor: pointer;
+  width: 100%;
+  text-align: left;
+}

package/dist/styles/PollsBubble.css

@@ -55,6 +55,9 @@
   font: var(--cometchat-font-heading4-bold);
   font-style: normal;
   text-align: left;
+  width: 100%;
+  text-overflow: ellipsis;
+  word-wrap: break-word;
 }
 
 .cometchat-polls-bubble-incoming .cometchat-polls-bubble__question {
@@ -157,6 +160,9 @@
   font: var(--cometchat-font-body-regular);
   font-style: normal;
   text-align: left;
+  word-wrap: break-word;
+  width: 100%;
+  overflow: hidden;
 }
 
 .cometchat-polls-bubble-incoming .cometchat-poll-bubble__option-item-body-content-title {
@@ -173,7 +179,7 @@
   max-width: 100px;
   position: relative;
   height: 20px;
-  width: 100px;
+  width: fit-content;
   gap: var(--cometchat-padding-1);
 }
 

package/dist/styles/components/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/components/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 → components/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/{AIConversationSummary.css → components/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/components/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/components/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/components/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/components/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/components/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/components/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);
@@ -186,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;
@@ -210,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 {
@@ -241,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);
@@ -287,16 +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; 
 }