@cometchat/chat-uikit-react 6.1.2 → 6.2.0

package/dist/styles/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/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

@@ -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/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/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/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); */
+
+}