@cometchat/chat-uikit-react 6.1.2 → 6.2.1

package/dist/styles/CometChatAIAssistantMessageBubble.css

@@ -0,0 +1,118 @@
+.cometchat-ai-assistant-message-bubble {
+  flex-direction: column;
+  /* gap: 12px; */
+  display: flex;
+  text-align: left;
+  justify-content: flex-start;
+  width: 100%;
+  max-width: 100%;
+  overflow: hidden;
+}
+
+.cometchat-ai-assistant-message-bubble * {
+  box-sizing: border-box;
+  max-width: 100%;
+  overflow: hidden;
+}
+
+.cometchat-ai-assistant-message-bubble pre {
+  /* border: 1px solid var(--cometchat-border-color-default); */
+}
+
+.cometchat-ai-assistant-message-bubble>p:not([class]) {
+  text-align: left;
+  line-height: 1.4 !important;
+  color: var(--cometchat-text-color-primary);
+}
+
+.cometchat-ai-assistant-message-bubble>ol:not([class]) {
+  padding-left: 0px !important;
+  margin-top: 0px !important;
+  text-align: left !important;
+  color: var(--cometchat-text-color-primary);
+
+}
+
+.cometchat-ai-assistant-message-bubble li:not([class]) {
+  text-align: left !important;
+  color: var(--cometchat-text-color-primary);
+
+}
+
+.cometchat-ai-assistant-message-bubble>ol:not([class]) ul:not([class]) {
+  padding-left: 20px !important;
+  text-align: left !important;
+  color: var(--cometchat-text-color-primary);
+
+}
+
+.cometchat-ai-assistant-message-bubble>ul:not([class]) {
+  text-align: left !important;
+  color: var(--cometchat-text-color-primary);
+
+}
+
+.cometchat-ai-assistant-message-bubble__code-block {
+  max-height: 300px;
+  overflow: auto;
+  border: 1px solid var(--cometchat-border-color-default);
+  width: 100%;
+}
+
+
+
+.cometchat-ai-assistant-message-bubble *:not(pre *) {
+  color: var(--cometchat-text-color-primary);
+  font-size: 14px;
+  font-family: var(--cometchat-font-family);
+}
+.cometchat-ai-assistant-message-bubble .cometchat-ai-assistant-message-bubble__code-block,.cometchat-ai-assistant-message-bubble .cometchat-ai-assistant-message-bubble__code-block *{
+  font-size: 14px;
+}
+
+.cometchat-ai-assistant-message-bubble__code-block::-webkit-scrollbar {
+  width: 0px;
+  height: 8px;
+  background: transparent;
+}
+
+.cometchat-ai-assistant-message-bubble__code-block::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.cometchat-ai-assistant-message-bubble__code-block::-webkit-scrollbar-thumb {
+  background: var(--cometchat-icon-color-secondary);
+  border-radius: var(--cometchat-radius-2);
+}
+
+.cometchat-ai-assistant-message-bubble table {
+  width: 100%;
+  border-collapse: collapse;
+  table-layout: auto;
+  display: block;
+  overflow-x: auto;
+}
+
+.cometchat-ai-assistant-message-bubble th,
+.cometchat-ai-assistant-message-bubble td {
+  padding: var(--cometchat-padding-2);
+  border: 1px solid var(--cometchat-border-color-light);
+  text-align: left;
+  word-break: break-word; /* prevents text overflow in cells */
+  min-width: 100px;
+}
+
+.cometchat-ai-assistant-message-bubble table::-webkit-scrollbar {
+  width: 0px;
+  height: 8px;
+  background: transparent;
+}
+
+.cometchat-ai-assistant-message-bubble table::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.cometchat-ai-assistant-message-bubble table::-webkit-scrollbar-thumb {
+  background: var(--cometchat-icon-color-secondary);
+  border-radius: var(--cometchat-radius-2);
+}

package/dist/styles/CometChatConversations.css

@@ -56,6 +56,22 @@
   mask-size: contain;
 }
 
+
+.cometchat-conversations__subtitle-receipts-wait{
+  -webkit-mask: url("../../assets/status_sending.svg") center center no-repeat;
+  mask: url("../../assets/status_sending.svg") center center no-repeat;
+  -webkit-mask-size: contain;
+  mask-size: contain;
+}
+
+.cometchat-conversations__subtitle-receipts-error{
+  -webkit-mask: url("../../assets/error_icon.svg") center center no-repeat;
+  mask: url("../../assets/error_icon.svg") center center no-repeat;
+  -webkit-mask-size: contain;
+  mask-size: contain;
+  background-color: var(--cometchat-error-color);
+}
+
 .cometchat-conversations__subtitle-receipts-delivered{
   -webkit-mask: url("../../assets/conversations_delivered.svg") center center no-repeat;
   mask: url("../../assets/conversations_delivered.svg") center center no-repeat;
@@ -493,6 +509,9 @@ background: var(--cometchat-icon-color-secondary, #A1A1A1);
   background: var(--cometchat-background-color-01, #FFF);
 
 }
+.cometchat-conversations .cometchat-conversations__list-item-agent .cometchat-list-item__title-container {
+  max-width: 90%;
+}
 
 .cometchat-conversations__shimmer-item {
   width: 100%;

package/dist/styles/CometChatErrorView.css

@@ -0,0 +1,22 @@
+.cometchat-error-view {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+  padding: var(--cometchat-padding-4);
+  box-sizing: border-box;
+  border-radius: var(--cometchat-radius-2);
+  border: 1px solid var(--cometchat-border-color-default);
+  background: var(--cometchat-error-color-100);
+  width: fit-content;
+  margin-top: var(--cometchat-margin-2);
+}
+.cometchat-error-view__message {
+  font: var(--cometchat-font-caption1-regular);
+  text-align: left;
+  line-height: 1.4;
+  margin: 0;
+  word-wrap: break-word;
+  hyphens: auto;
+  color: var(--cometchat-error-color);
+}

package/dist/styles/CometChatMessageComposer.css

@@ -92,7 +92,7 @@
 }
 
 /* Styling for buttons with no specific class */
-.cometchat-message-composer div:not([class]) .cometchat-button {
+ .cometchat-message-composer__buttons .cometchat-button {
     width: fit-content;
     background: transparent;
     padding: 0;
@@ -257,41 +257,41 @@
 }
 
 /* Send button icon default styling */
-.cometchat-message-composer div:not([class]) .cometchat-message-composer__send-button .cometchat-button .cometchat-button__icon {
+ .cometchat-message-composer__buttons .cometchat-message-composer__send-button .cometchat-button .cometchat-button__icon {
     background: var(--cometchat-static-white);
 }
 
 /* Icon styling for buttons with no specific class */
-.cometchat-message-composer div:not([class]) .cometchat-button .cometchat-button__icon {
+ .cometchat-message-composer__buttons .cometchat-button .cometchat-button__icon {
     background: var(--cometchat-icon-color-secondary);
 }
 
-.cometchat-message-composer div:not([class]) .cometchat-button .cometchat-button__icon:hover {
+ .cometchat-message-composer__buttons .cometchat-button .cometchat-button__icon:hover {
     background: var(--cometchat-primary-color, #6852D6);
 }
 
-.cometchat-message-composer div:not([class]) .cometchat-message-composer__send-button .cometchat-button .cometchat-button__icon:hover {
+ .cometchat-message-composer__buttons .cometchat-message-composer__send-button .cometchat-button .cometchat-button__icon:hover {
     background: var(--cometchat-static-white);
 }
 
 /* Active emoji keyboard button icon */
-.cometchat-message-composer div:not([class]) .cometchat-message-composer__emoji-keyboard-button-active .cometchat-button__icon {
+ .cometchat-message-composer__buttons .cometchat-message-composer__emoji-keyboard-button-active .cometchat-button__icon {
     background: var(--cometchat-primary-color);
 }
 
 /* Active action sheet button icon */
-.cometchat-message-composer div:not([class]) .cometchat-message-composer__secondary-button-view-attachment-button-active .cometchat-button__icon {
+ .cometchat-message-composer__buttons .cometchat-message-composer__secondary-button-view-attachment-button-active .cometchat-button__icon {
     background: var(--cometchat-primary-color);
 }
 
 /* Active voice recording button icon */
-.cometchat-message-composer div:not([class]) .cometchat-message-composer__voice-recording-button-active .cometchat-button__icon {
+ .cometchat-message-composer__buttons .cometchat-message-composer__voice-recording-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 {
+ .cometchat-message-composer__buttons .cometchat-message-composer__auxilary-button-view-sticker-button-active .cometchat-button__icon {
     background: var(--cometchat-primary-color);
 }
 .cometchat-message-composer__input-mobile{

package/dist/styles/CometChatMessageHeader.css

@@ -25,10 +25,8 @@
     width: 100%;
     text-align: left;
     height: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: flex-start;
     min-height: 17px;
+    display: block;
 }
 
 /* Subtitle styling for typing state in the message header */
@@ -57,7 +55,7 @@
 }
 
 .cometchat-message-header .cometchat-list-item__trailing-view {
-    display: none;
+    width: auto;
 }
 
 /* Styling for the back button in the message header */

package/dist/styles/CometChatMessageList.css

@@ -144,31 +144,32 @@
     padding: var(--cometchat-padding-2, 8px) var(--cometchat-padding-2, 8px) var(--cometchat-padding-3, 12px) var(--cometchat-padding-2, 8px);
     ;
 }
-.cometchat-fullscreen-viewer .cometchat-fullscreen-viewer__body-image{
-   max-width: 100%;
-   max-height: 84vh;
-   object-fit: contain;
+.cometchat-fullscreen-viewer .cometchat-fullscreen-viewer__body-image {
+    max-width: 100%;
+    max-height: 84vh;
+    object-fit: contain;
 }
 
 .cometchat-message-bubble__audio-call .cometchat-call-bubble .cometchat-call-bubble__body {
     padding: 0;
 }
-.cometchat-message-bubble__thread-view-replies .cometchat-button{
+.cometchat-message-bubble__thread-view-replies .cometchat-button {
     align-items: flex-end;
-    
+
 }
-.cometchat-reactions-info-wrapper > .cometchat{
-    width:fit-content;
+.cometchat-reactions-info-wrapper>.cometchat {
+    width: fit-content;
 }
-.cometchat-message-bubble__thread-view-replies .cometchat-button .cometchat-button__text{
+.cometchat-message-bubble__thread-view-replies .cometchat-button .cometchat-button__text {
     margin-bottom: -2px;
 }
-.cometchat-message-bubble__body-footer-view .cometchat-reactions  .cometchat{
+.cometchat-message-bubble__body-footer-view .cometchat-reactions .cometchat {
     width: fit-content;
 }
-.cometchat-reactions  .cometchat-popover,.cometchat-reactions  .cometchat-popover__button{
-width: fit-content;
+.cometchat-reactions .cometchat-popover, .cometchat-reactions .cometchat-popover__button{
+    width: fit-content;
 }
+
 /* Date header inside message list */
 .cometchat-message-list__date-header {
     position: absolute;
@@ -416,6 +417,20 @@ width: fit-content;
 
 }
 
+.cometchat-message-list__bubble-moderation-disapproved .cometchat-message-bubble__body {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+}
+
+
+.cometchat-message-list__bubble-moderation-disapproved .cometchat-message-bubble__body-content-view .cometchat-video-bubble{
+    min-width: 240px;
+}
+
+.cometchat-message-list__bubble-moderation-disapproved .cometchat-message-bubble__body-content-view .cometchat-image-bubble{
+    min-width: 240px;
+}
+
 /* Status view for "delivered" receipt inside message bubble */
 .cometchat-message-bubble__status-info-view-receipts-delivered .cometchat-message-list__receipt {
     -webkit-mask: url("../../assets/status_delivered.svg") center center no-repeat;
@@ -429,7 +444,7 @@ width: fit-content;
     -webkit-mask: url("../../assets/status_read.svg") center center no-repeat;
     -webkit-mask-size: contain;
     background: var(--cometchat-message-seen-color,#56E8A7);
-    
+
 
 }
 
@@ -482,7 +497,7 @@ width: fit-content;
     border-radius: var(--cometchat-radius-max, 8px);
     background: var(--cometchat-shimmer-gradient-color);
     background-size: 200% 100%;
-    animation: shimmer .8s infinite;
+    animation: listLoadingAnimation .8s infinite;
     margin-right: var(--cometchat-margin-2);
 
 }
@@ -515,7 +530,7 @@ width: fit-content;
     align-items: center;
     background: var(--cometchat-shimmer-gradient-color);
     background-size: 200% 100%;
-    animation: shimmer .8s infinite;
+    animation: listLoadingAnimation .8s infinite;
     border-radius: var(--cometchat-radius-2, 8px);
 }
 
@@ -524,7 +539,7 @@ width: fit-content;
     height: 53px;
     background: var(--cometchat-shimmer-gradient-color);
     background-size: 200% 100%;
-    animation: shimmer .8s infinite;
+    animation: listLoadingAnimation .8s infinite;
     border-radius: var(--cometchat-radius-2, 8px);
 }
 
@@ -653,7 +668,7 @@ width: fit-content;
 }
 
 
-@keyframes shimmer {
+@keyframes listLoadingAnimation {
     0% {
         background-position: 200% 0;
     }
@@ -665,7 +680,7 @@ width: fit-content;
 
 }
 
- /**
+/**
  * Setting transparent background and gap for sticker message bubble
  */
 .cometchat-message-bubble__body-wrapper .cometchat-message-bubble__sticker-message {
@@ -709,7 +724,7 @@ width: fit-content;
 .cometchat-message-information__popup-wrapper {
     display: flex;
     position: fixed;
-    z-index: 2;
+    z-index: 3;
     left: 0;
     top: 0;
     width: 100%;

package/dist/styles/CometChatModerationView.css

@@ -0,0 +1,25 @@
+/* Bottom view for "blocked" messages inside message bubble */
+.cometchat-moderation-status__icon{
+    min-width: 16px;
+    min-height: 16px;
+    -webkit-mask: url("../../assets/message_blocked.svg") center center no-repeat;
+    -webkit-mask-size: contain;
+    background-color: var(--cometchat-error-color);
+    display: inline-block;
+}
+
+.cometchat-moderation-status {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    background-color: var(--cometchat-error-color-100);
+    padding: var(--cometchat-padding-1) var(--cometchat-padding-2);
+    gap: var(--cometchat-spacing-1, 4px);
+    border-radius: 0 0 var(--cometchat-radius-3, 12px) var(--cometchat-radius-3, 12px);
+}
+
+.cometchat-moderation-status .cometchat-moderation-status__message {
+    color: var(--cometchat-error-color, #F44649);
+    text-align: left;
+    font: var(--cometchat-font-body-regular);
+}

package/dist/styles/CometChatSearch.css

@@ -231,6 +231,12 @@
   -webkit-mask-size: contain;
   mask-size: contain;
 }
+.cometchat-search__conversations-subtitle-receipts-wait{
+  -webkit-mask: url("../../assets/status_sending.svg") center center no-repeat;
+  mask: url("../../assets/status_sending.svg") center center no-repeat;
+  -webkit-mask-size: contain;
+  mask-size: contain;
+}
 
 .cometchat-search__conversations-subtitle-receipts-delivered {
   -webkit-mask: url("../../assets/conversations_delivered.svg") center center no-repeat;
@@ -239,6 +245,13 @@
   mask-size: contain;
 }
 
+.cometchat-search__conversations-subtitle-receipts-error{
+  -webkit-mask: url("../../assets/error_icon.svg") center center no-repeat;
+  mask: url("../../assets/error_icon.svg") center center no-repeat;
+  -webkit-mask-size: contain;
+  mask-size: contain;
+  background-color: var(--cometchat-error-color);
+}
 
 .cometchat-search__conversations-subtitle-receipts-read {
   -webkit-mask: url("../../assets/conversations_read.svg") center center no-repeat;

package/dist/styles/CometChatStreamMessageBubble.css

@@ -0,0 +1,183 @@
+.cometchat-stream-message-bubble * {
+  box-sizing: border-box;
+  max-width: 100%;
+  overflow: hidden;
+}
+
+.cometchat-stream-message-bubble .cometchat-stream-message-bubble__copy {
+  mask: url("../../assets/Copy.svg") center center no-repeat;
+  -webkit-mask: url("../../assets/Copy.svg") center center no-repeat;
+  mask-size: contain;
+  -webkit-mask-size: contain;
+  align-self: flex-start;
+  display: flex;
+  justify-content: flex-start;
+  align-items: flex-start;
+  margin-top: var(--cometchat-margin-3);
+  height: 20px;
+  width: 20px;
+  background: var(--cometchat-icon-color-secondary);
+
+}
+
+.cometchat-stream-message-bubble {
+  overflow: hidden;
+  text-align: left;
+}
+
+.cometchat-message-bubble__wrapper {
+  align-items: center;
+}
+
+
+/* Target all <p> tags without a class */
+.cometchat-stream-message-bubble>p:not([class]) {
+  text-align: left;
+  line-height: 1.4 !important;
+  /* color: var(--cometchat-text-color-secondary); */
+}
+
+.cometchat-stream-message-bubble>ol:not([class]) {
+  padding-left: 0px !important;
+  margin-top: 0px !important;
+  text-align: left !important;
+  /* color: var(--cometchat-text-color-secondary); */
+
+}
+
+.cometchat-stream-message-bubble li:not([class]) {
+  text-align: left !important;
+  /* color: var(--cometchat-text-color-secondary); */
+
+}
+
+.cometchat-stream-message-bubble>ol:not([class]) ul:not([class]) {
+  padding-left: 20px !important;
+  text-align: left !important;
+  /* color: var(--cometchat-text-color-secondary); */
+
+}
+
+.cometchat-stream-message-bubble>ul:not([class]) {
+  text-align: left !important;
+  /* color: var(--cometchat-text-color-secondary); */
+
+}
+
+.cometchat-stream-message-bubble__code-block {
+  max-height: 300px;
+  overflow: auto;
+  border: 1px solid var(--cometchat-border-color-default);
+  width: 100%;
+
+}
+
+.cometchat-stream-message-bubble *:not(pre *) {
+  color: var(--cometchat-text-color-primary);
+  font-size: 14px;
+  font-family: var(--cometchat-font-family);
+}
+.cometchat-stream-message-bubble .cometchat-stream-message-bubble__code-block,.cometchat-stream-message-bubble .cometchat-stream-message-bubble__code-block *{
+  font-size: 14px;
+}
+.cometchat-stream-message-bubble__thinking {
+  border-radius: 16px;
+  animation: fadeIn 0.5s ease;
+  position: relative;
+  overflow: hidden;
+  color: #717680;
+  font: var(--cometchat-font-body-regular);
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  align-self: flex-start;
+  height: fit-content;
+  width: fit-content;
+  min-width: fit-content;
+}
+
+
+.cometchat-stream-message-bubble__thinking::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: -60%;
+  width: 60%;
+  height: 100%;
+  background: var( --cometchat-text-shimmer-gradient-color);
+  animation: shimmer 1.5s infinite;
+  pointer-events: none;
+  opacity: 0.7;
+}
+
+.cometchat-stream-message-bubble__tool-call-text {
+  width: fit-content;
+  text-align: left;
+  color: var(--cometchat-text-color-secondary);
+
+}
+
+.cometchat-stream-message-bubble__thinking {
+  align-items: flex-start;
+  border-radius: 0px;
+}
+
+.cometchat-stream-message-bubble__thinking>.cometchat-stream-message-bubble__thinking-text {
+  border-radius: 0px;
+  color: var(--cometchat-text-color-secondary);
+}
+.cometchat-stream-message-bubble__code-block::-webkit-scrollbar {
+  width: 0px;
+  height: 8px;
+  background: transparent;
+}
+
+.cometchat-stream-message-bubble__code-block::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.cometchat-stream-message-bubble__code-block::-webkit-scrollbar-thumb {
+  background: var(--cometchat-icon-color-secondary);
+  border-radius: 4px;
+}
+
+.cometchat-stream-message-bubble table {
+  width: 100%;
+  border-collapse: collapse;
+  table-layout: auto;
+  display: block;
+  overflow-x: auto;
+}
+
+.cometchat-stream-message-bubble th,
+.cometchat-stream-message-bubble td {
+  padding: var(--cometchat-padding-2);
+  border: 1px solid var(--cometchat-border-color-light);
+  text-align: left;
+  word-break: break-word; /* prevents text overflow in cells */
+  min-width: 100px;
+}
+
+.cometchat-stream-message-bubble table::-webkit-scrollbar {
+  width: 0px;
+  height: 8px;
+  background: transparent;
+}
+
+.cometchat-stream-message-bubble table::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.cometchat-stream-message-bubble table::-webkit-scrollbar-thumb {
+  background: var(--cometchat-icon-color-secondary);
+  border-radius: var(--cometchat-radius-2);
+}
+@keyframes shimmer {
+  0% {
+    left: -60%;
+  }
+
+  100% {
+    left: 100%;
+  }
+}