@cometchat/chat-uikit-react 5.0.0-beta1 → 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/components/{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/{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/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/components/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/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;
 }