@cometchat/chat-uikit-react 6.1.2 → 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/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.

package/dist/styles/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/types/components/BaseComponents/CometChatAIAssistantMessageBubble/CometChatAIAssistantMessageBubble.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+interface CometChatAIAssistantMessageBubbleProps {
+    message?: CometChat.AIAssistantMessage;
+}
+declare const CometChatAIAssistantMessageBubble: React.FC<CometChatAIAssistantMessageBubbleProps>;
+export { CometChatAIAssistantMessageBubble };

package/dist/types/components/BaseComponents/CometChatErrorView/CometChatErrorView.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+interface CometChatErrorViewProps {
+    /**
+     * Custom error message to display
+     */
+    message: string;
+}
+export declare const CometChatErrorView: React.FC<CometChatErrorViewProps>;
+export default CometChatErrorView;

package/dist/types/components/BaseComponents/CometChatList/CometChatList.d.ts

@@ -140,6 +140,13 @@ interface ListProps<T> {
      * @defaultValue `false`
     */
     showScrollbar?: boolean;
+    /**
+     * Set the scrollbar to the bottom-most position of the scrollable list in Agent Chat
+     *
+     * @remarks
+     *
+     */
+    scrollToEnd?: boolean;
 }
 /**
  * Renders a list component that can display a title, search bar,

package/dist/types/components/BaseComponents/CometChatSendButtonView/CometChatSendButtonView.d.ts

@@ -0,0 +1,4 @@
+declare const CometChatSendButtonView: ({ isButtonDisabled }: {
+    isButtonDisabled: boolean;
+}) => import("react/jsx-runtime").JSX.Element;
+export { CometChatSendButtonView };

package/dist/types/components/BaseComponents/CometChatStreamMessageBubble/CometChatStreamMessageBubble.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+interface CometChatStreamMessageBubbleProps {
+    message?: CometChat.AIAssistantBaseEvent;
+}
+declare const CometChatStreamMessageBubble: React.FC<CometChatStreamMessageBubbleProps>;
+export { CometChatStreamMessageBubble };

package/dist/types/components/BaseComponents/CometChatToolCallArgumentBubble/CometChatToolCallArgumentBubble.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+interface CometChatToolCallArgumentBubbleProps {
+    message?: CometChat.AIToolArgumentMessage;
+}
+declare const CometChatToolCallArgumentBubble: React.FC<CometChatToolCallArgumentBubbleProps>;
+export { CometChatToolCallArgumentBubble };

package/dist/types/components/BaseComponents/CometChatToolCallResultBubble/CometChatToolCallResultBubble.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+interface CometChatToolCallResultBubbleProps {
+    message?: CometChat.AIToolResultMessage;
+}
+declare const CometChatToolCallResultBubble: React.FC<CometChatToolCallResultBubbleProps>;
+export { CometChatToolCallResultBubble };

package/dist/types/components/CometChatAIAssistantChat/CometChatAIAssistantChat.d.ts

@@ -0,0 +1,30 @@
+import React from 'react';
+import { CometChatAIAssistantTools } from '../../modals/CometChatAIAssistantTools';
+interface AIAssistantChatProps {
+    hideChatHistory?: boolean;
+    hideNewChat?: boolean;
+    user: CometChat.User;
+    onBackButtonClicked?: () => void;
+    onCloseButtonClicked?: () => void;
+    showBackButton?: boolean;
+    showCloseButton?: boolean;
+    headerItemView?: React.JSX.Element;
+    headerTitleView?: React.JSX.Element;
+    headerSubtitleView?: React.JSX.Element;
+    headerLeadingView?: React.JSX.Element;
+    headerTrailingView?: React.JSX.Element;
+    headerAuxiliaryButtonView?: React.JSX.Element;
+    streamingSpeed?: number;
+    suggestedMessages?: Array<string>;
+    hideSuggestedMessages?: boolean;
+    emptyView?: React.JSX.Element;
+    loadingView?: React.JSX.Element;
+    errorView?: React.JSX.Element;
+    onError?: (e: CometChat.CometChatException) => void;
+    emptyChatGreetingView?: React.JSX.Element;
+    emptyChatIntroMessageView?: React.JSX.Element;
+    emptyChatImageView?: React.JSX.Element;
+    aiAssistantTools?: CometChatAIAssistantTools;
+}
+export declare const CometChatAIAssistantChat: React.MemoExoticComponent<(props: AIAssistantChatProps) => import("react/jsx-runtime").JSX.Element>;
+export {};