@cometchat/chat-uikit-react 6.1.1 → 6.2.0

package/dist/styles/components/CometChatConversations.css

@@ -493,6 +493,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/components/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/components/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/components/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/components/CometChatMessageList.css

@@ -482,7 +482,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 +515,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 +524,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 +653,7 @@ width: fit-content;
 }
 
 
-@keyframes shimmer {
+@keyframes listLoadingAnimation {
     0% {
         background-position: 200% 0;
     }

package/dist/styles/components/CometChatOutgoingCall.css

@@ -24,6 +24,7 @@
 .cometchat-outgoing-call__title-container {
     display: flex;
     flex-direction: column;
+    gap: var(--cometchat-spacing-2);
 }
 
 /* Subtitle text for the outgoing call UI */
@@ -82,6 +83,9 @@
 
 /* Media query for screens with a max width of 600px */
 @media (max-width: 600px) {
+    .cometchat-outgoing-call{
+        padding: var(--cometchat-spacing-20) var(--cometchat-spacing-5) var(--cometchat-spacing-15) var(--cometchat-spacing-5);
+    }
 
     /* Font size for avatar text in smaller screens */
     .cometchat-outgoing-call__avatar .cometchat-avatar__text {
@@ -103,12 +107,17 @@
     .cometchat-outgoing-call__subtitle {
         font: var(--cometchat-font-body-regular);
     }
+    .cometchat-outgoing-call__avatar{
+        margin-bottom: auto;
+        margin-top: var(--cometchat-margin-10);
+    }
 
     /* Size and border radius adjustment for the container in smaller screens */
-    .cometchat-outgoing-call {
+    .cometchat-outgoing-call,.cometchat:has(> .cometchat-outgoing-call) {
         height: 100%;
         width: 100%;
         border-radius: 0;
     }
 
+
 }

package/dist/styles/components/CometChatSearch.css

@@ -16,6 +16,7 @@
   justify-content: flex-start;
   min-height: 64px;
   padding: var(--cometchat-padding-3, 12px) var(--cometchat-padding-4, 16px);
+  padding-bottom: 0;
 
 }
 
@@ -253,6 +254,10 @@
   color: var(--cometchat-text-color-primary);
 
 }
+.cometchat-search__results .cometchat-list__header-title {
+  min-height: 20px;
+  margin-bottom: var(--cometchat-margin-1);
+}
 
 .cometchat-search__results,
 .cometchat-search__conversations,
@@ -266,10 +271,6 @@
   height: 100%;
 }
 
-.cometchat-search__conversations-full,
-.cometchat-search__messages-full {
-  height: 100%;
-}
 
 .cometchat-search__conversations-list-item {
   cursor: pointer;
@@ -559,6 +560,7 @@
   justify-content: center;
   align-items: center;
   background: var(--cometchat-background-color-01, #FFF);
+  padding: var(--cometchat-padding-3, 12px) var(--cometchat-padding-4, 16px);
 }
 
 .cometchat-search__empty-view-icon {
@@ -578,14 +580,16 @@
 }
 
 .cometchat-search__empty-view-body-title {
-  width: 280px;
+  max-width: 280px;
+  width: auto;
   color: var(--cometchat-text-color-primary, #141414);
   text-align: center;
   font: var(--cometchat-font-heading3-bold);
 }
 
 .cometchat-search__empty-view-body-description {
-  width: 280px;
+   max-width: 280px;
+  width: auto;
   color: var(--cometchat-text-color-secondary, #727272);
   text-align: center;
   font: var(--cometchat-font-body-regular);
@@ -639,8 +643,7 @@
 
 .cometchat-search-messages__list-item .cometchat-list-item__body-subtitle,
 .cometchat-search-messages__list-item .cometchat-search-messages__subtitle {
-  display: flex;
-  gap: var(--cometchat-padding-1, 4px);
+  display: block;
   width: 100%;
   max-width: 98%;
   overflow: hidden;
@@ -768,7 +771,7 @@
 }
 
 .cometchat-search__messages-trailing-view {
-  height: 80px;
+  min-height: 50px;
   width: 80px;
   display: flex;
   align-items: center;
@@ -818,7 +821,7 @@
 .cometchat-search .cometchat-list__header-title {
   color: var(--cometchat-text-color-secondary, #727272);
 
-  font: var(--cometchat-font-body-regular)
+  font: var(--cometchat-font-caption1-medium)
 }
 
 .cometchat-search__conversations,
@@ -826,6 +829,10 @@
   min-height: 110px;
   height: fit-content;
 }
+.cometchat-search__conversations-full,
+.cometchat-search__messages-full {
+  height: 100%;
+}
 
 .cometchat-search__results::-webkit-scrollbar,
 .cometchat-search__input::-webkit-scrollbar {
@@ -931,7 +938,7 @@
   width: 32px;
 }
 
-.cometchat-list-item__body-title {
+.cometchat-search__messages  .cometchat-list-item__body-title {
   color: var(--cometchat-text-color-secondary, #727272);
 }
 

package/dist/styles/components/CometChatStreamMessageBubble.css

@@ -0,0 +1,154 @@
+.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 pre>div {
+  max-height: 300px;
+  overflow: scroll;
+  border: 1px solid var(--cometchat-border-color-default);
+}
+
+@media (min-width: 620px) and (max-width: 780px) {
+  .cometchat-stream-message-bubble pre>div {
+    /* max-width: 600px; */
+  }
+}
+
+@media (min-width: 480px) and (max-width: 619px) {
+  .cometchat-stream-message-bubble pre>div {
+    /* max-width: 400px; */
+  }
+}
+
+@media (min-width: 320px) and (max-width: 479px) {
+  .cometchat-stream-message-bubble pre>div {
+    /* max-width: 300px; */
+  }
+}
+
+.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);
+}
+
+@keyframes shimmer {
+  0% {
+    left: -60%;
+  }
+
+  100% {
+    left: 100%;
+  }
+}

package/dist/styles/components/CometChatToolCallArgumentBubble.css

@@ -0,0 +1,100 @@
+.cometchat-toolcall-argument-bubble {
+  flex-direction: column;
+  gap: 12px;
+  display: flex;
+  text-align: left;
+  justify-content: flex-start;
+  width: 100%;
+  max-width: 100%;
+  overflow: hidden;
+  padding: 12px;
+  border-radius: 8px;
+  background: transparent;
+}
+
+.cometchat-toolcall-argument-bubble * {
+  box-sizing: border-box;
+  max-width: 100%;
+  overflow: hidden;
+}
+
+.cometchat-toolcall-argument-bubble .cometchat-toolcall-argument__item {
+  margin-bottom: 16px;
+}
+
+.cometchat-toolcall-argument-bubble .cometchat-toolcall-argument__item:last-child {
+  margin-bottom: 0;
+}
+
+.cometchat-toolcall-argument-bubble .cometchat-toolcall-argument__name {
+  margin-bottom: 8px;
+  color: var(--cometchat-text-color-primary, #141414);
+  font: var(--cometchat-font-subtitle-medium) !important;
+}
+
+.cometchat-toolcall-argument-bubble .cometchat-toolcall-argument__label {
+  margin-bottom: 4px;
+  /* color: var(--cometchat-text-color-secondary, #666666); */
+  font: var(--cometchat-font-body-regular) !important;
+  font-size: 12px;
+}
+
+.cometchat-toolcall-argument-bubble .cometchat-toolcall-argument__arguments {
+  display: flex;
+  flex-direction: column;
+}
+
+.cometchat-toolcall-argument-bubble pre > div {
+  max-height: 200px;
+  overflow: scroll;
+  border-radius: 4px;
+}
+
+@media (min-width: 620px) and (max-width: 780px) {
+  .cometchat-toolcall-argument-bubble pre > div {
+    max-width: 600px;
+  }
+}
+
+@media (min-width: 480px) and (max-width: 619px) {
+  .cometchat-toolcall-argument-bubble pre > div {
+    max-width: 400px;
+  }
+}
+
+@media (min-width: 320px) and (max-width: 479px) {
+  .cometchat-toolcall-argument-bubble pre > div {
+    max-width: 320px;
+  }
+}
+
+.cometchat-toolcall-argument-bubble pre   *{
+    font-size: 14px;
+
+  /* font: var(--cometchat-font-body-regular) !important; */
+}
+
+/* Target all <p> tags without a class */
+.cometchat-toolcall-argument-bubble >  p:not([class]) {
+  text-align: left;
+  line-height: 1.4 !important;
+  /* color: var(--cometchat-text-color-secondary); */
+}
+.cometchat-toolcall-argument-bubble >  ol:not([class]){
+  padding-left: 0px !important;
+  margin-top: 0px !important;
+  text-align: left !important;
+    /* color: var(--cometchat-text-color-secondary); */
+
+}
+.cometchat-toolcall-argument-bubble >  ol:not([class]) ul:not([class]) {
+  padding-left: 20px !important;
+  text-align: left !important;
+    /* color: var(--cometchat-text-color-secondary); */
+
+}
+.cometchat-toolcall-argument-bubble >   ul:not([class]){
+  text-align: left !important;
+    /* color: var(--cometchat-text-color-secondary); */
+
+}

package/dist/styles/components/CometChatToolCallResultBubble.css

@@ -0,0 +1,91 @@
+.cometchat-toolcall-result-bubble {
+  flex-direction: column;
+  gap: 12px;
+  display: flex;
+  text-align: left;
+  justify-content: flex-start;
+  width: 100%;
+  max-width: 100%;
+  overflow: hidden;
+  padding: 12px;
+  border-radius: 8px;
+  background: transparent;
+}
+
+.cometchat-toolcall-result-bubble * {
+  box-sizing: border-box;
+  max-width: 100%;
+  overflow: hidden;
+}
+
+.cometchat-toolcall-result-bubble .cometchat-toolcall-result__item {
+  display: flex;
+  flex-direction: column;
+}
+
+.cometchat-toolcall-result-bubble .cometchat-toolcall-result__label {
+  margin-bottom: 4px;
+  /* color: var(--cometchat-text-color-secondary, #666666); */
+  font: var(--cometchat-font-body-regular) !important;
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.cometchat-toolcall-result-bubble pre > div {
+  max-height: 300px;
+  overflow: scroll;
+  border-radius: 4px;
+}
+
+@media (min-width: 620px) and (max-width: 780px) {
+  .cometchat-toolcall-result-bubble pre > div {
+    max-width: 600px;
+  }
+}
+
+@media (min-width: 480px) and (max-width: 619px) {
+  .cometchat-toolcall-result-bubble pre > div {
+    max-width: 400px;
+  }
+}
+
+@media (min-width: 320px) and (max-width: 479px) {
+  .cometchat-toolcall-result-bubble pre > div {
+    max-width: 320px;
+  }
+}
+.cometchat-toolcall-result-bubble pre   *{
+  /* font: var(--cometchat-font-body-regular) !important; */
+  font-size: 14px;
+
+}
+
+/* Target all <p> tags without a class */
+.cometchat-toolcall-result-bubble >  p:not([class]) {
+  text-align: left;
+  line-height: 1.4 !important;
+  /* color: var(--cometchat-text-color-secondary); */
+}
+.cometchat-toolcall-result-bubble >  ol:not([class]){
+  padding-left: 0px !important;
+  margin-top: 0px !important;
+  text-align: left !important;
+    /* color: var(--cometchat-text-color-secondary); */
+
+}
+.cometchat-toolcall-result-bubble >  ol:not([class]) ul:not([class]) {
+  padding-left: 20px !important;
+  text-align: left !important;
+    /* color: var(--cometchat-text-color-secondary); */
+
+}
+.cometchat-toolcall-result-bubble    li:not([class]){
+  text-align: left !important;
+    /* color: var(--cometchat-text-color-secondary); */
+
+}
+.cometchat-toolcall-result-bubble >   ul:not([class]){
+  text-align: left !important;
+    /* color: var(--cometchat-text-color-secondary); */
+
+}

package/dist/styles/components/index.css

@@ -55,7 +55,13 @@
 @import url('./CometChatThreadHeader.css');
 @import url('./CometChatToast.css');
 @import url('./CometChatSearch.css');
-
+@import url('./CometChatAIAssistantChat.css');
+@import url('./CometChatAIAssistantMessageBubble.css');
+@import url('./CometChatStreamMessageBubble.css');
+@import url('./CometChatAIAssistantChatHistory.css');
+@import url('./CometChatErrorView.css');
+/* @import url('./CometChatToolCallResultBubble.css');
+@import url('./CometChatToolCallArgumentBubble.css'); */
 .cometchat * {
     box-sizing: border-box;
 }
@@ -114,4 +120,4 @@ font:var(--cometchat-font-body-regular);
 
 .cometchat-text-bubble .cometchat-text-highlight {
     font: var(--cometchat-font-body-bold);
-}
+}

package/dist/styles/css-variables.css

@@ -235,6 +235,7 @@ and errors.
   --cometchat-warning-color: #FFAB00;
   --cometchat-success-color: #09C26F;
   --cometchat-error-color: #F44649;
+  --cometchat-error-color-100: #FEF3F2;
 
   /*
     Static colors
@@ -293,6 +294,8 @@ Define border colors for UI elements,
      */
   --cometchat-shimmer-background-color: var(--cometchat-neutral-color-200);
   --cometchat-shimmer-gradient-color: linear-gradient(90deg, #E0E0E0 0%, #EEE 100%);
+  --cometchat-text-shimmer-gradient-color: linear-gradient(270deg, rgba(255, 255, 255, 0.00) 0%, rgba(255, 255, 255, 0.70) 50%, rgba(255, 255, 255, 0.00) 100%);
+
 
   /*
     Styling for buttons.
@@ -347,6 +350,7 @@ Define border colors for UI elements,
   --cometchat-success-color: #0B9F5D;
   --cometchat-message-seen-color: #56E8A7;
   --cometchat-error-color: #C73C3E;
+  --cometchat-error-color-100: #3A0C05;
   
     /*
     Static colors
@@ -401,6 +405,7 @@ Define border colors for UI elements,
    */
   --cometchat-shimmer-background-color: var(--cometchat-background-color-01);
   --cometchat-shimmer-gradient-color: linear-gradient(90deg, #383838 0%, #272727 100%);
+  --cometchat-text-shimmer-gradient-color: linear-gradient(270deg, rgba(26, 26, 26, 0.00) 0%, rgba(26, 26, 26, 0.70) 50%, rgba(26, 26, 26, 0.00) 100%);
 
   /*
    Styling for buttons.