@cometchat/chat-uikit-react 5.0.0-beta1 → 5.0.0

package/dist/styles/components/CometChatMessageComposer.css

@@ -62,41 +62,7 @@
     width: fit-content;
 }
 
-/* AI button popover content */
-.cometchat-message-composer__auxilary-button-view-ai-button .cometchat-popover__content {
-    min-height: 110px;
-    width: fit-content;
-    min-width: 280px;
-    max-height: 240px;
-    max-width: 280px;
-}
-
-.cometchat-message-composer__auxilary-button-view-ai-button .cometchat-popover__content>.cometchat {
-    border-radius: inherit;
-}
-
-.cometchat-message-composer__auxilary-button-view-ai-button .cometchat-popover__content .cometchat-ai-smart-replies {
-    height: 200px;
-}
-
-.cometchat-message-composer__auxilary-button-view-ai-button .cometchat-action-sheet__item {
-    padding: var(--cometchat-padding-3, 12px);
-}
 
-.cometchat-message-composer__auxilary-button-view-ai-button .cometchat-action-sheet__item-body {
-    font: var(--cometchat-font-body-regular);
-
-}
-
-.cometchat-message-composer__auxilary-button-view-ai-button .cometchat-action-sheet {
-    justify-content: center;
-    border: none;
-    border-radius: inherit;
-    background: inherit;
-    box-shadow: none;
-    width: 100%;
-    height: 100%;
-}
 
 .cometchat-message-composer__input .cometchat-mentions>span {
     color: var(--cometchat-text-color-highlight, #6852D6);
@@ -141,6 +107,7 @@
     justify-content: space-between;
     align-items: flex-start;
     align-self: stretch;
+    flex-direction: column;
 }
 
 .cometchat-message-composer__header-error-state {
@@ -185,7 +152,6 @@
     flex-direction: column;
     justify-content: flex-end;
     z-index: 2;
-    height: fit-content;
     min-height: 45px;
     padding: 0 0 1px 0;
     width: fit-content;
@@ -209,6 +175,9 @@
     overflow: hidden;
     border-radius: inherit;
 }
+.cometchat-mention-list .cometchat-list .cometchat-list__header-title{
+    display: none;
+}
 
 /* Message input area */
 .cometchat-message-composer__input {
@@ -240,7 +209,24 @@
     width: 100%;
     align-items: center;
 }
-
+/* sticker button placement */
+.cometchat-message-composer__sticker-button-view {
+    display: flex;
+    justify-content: flex-start;
+    gap: 12px;
+    width: fit-content;
+    align-items: center;
+}
+/* default  buttons placement */
+.cometchat-message-composer__default-buttons{
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    gap: var(--cometchat-padding-4);
+    width:fit-content;
+    margin-right: auto;
+}
 /* Placeholder styling when input is empty */
 .cometchat-message-composer__input:empty:before {
     content: attr(data-placeholder);
@@ -286,12 +272,34 @@
     background: var(--cometchat-primary-color);
 }
 
-/* Active AI button icon */
-.cometchat-message-composer div:not([class]) .cometchat-message-composer__auxilary-button-view-ai-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 {
     background: var(--cometchat-primary-color);
+}
+.cometchat-message-composer__input-mobile{
+    font: var( --cometchat-font-heading4-regular);
+}
+/**
+ * Default styling for each options in actionsheet
+ */
+.cometchat-message-composer__secondary-button-view-attachment-button .cometchat-action-sheet{
+    min-width: 200px;
+}
+.cometchat-message-composer__secondary-button-view-attachment-button-1 .cometchat-popover__content{
+height: 58px;
+}
+.cometchat-message-composer__secondary-button-view-attachment-button-2 .cometchat-popover__content{
+    height: 114px; 
+}
+.cometchat-message-composer__secondary-button-view-attachment-button-3 .cometchat-popover__content{
+    height: 170px; 
+
+}
+.cometchat-message-composer__secondary-button-view-attachment-button-4 .cometchat-popover__content{
+    height: 230px; 
+
+}
+.cometchat-message-composer__secondary-button-view-attachment-button-5 .cometchat-popover__content{
+    height: 285px; 
 }

package/dist/styles/components/CometChatMessageHeader.css

@@ -10,6 +10,8 @@
     justify-content: space-between;
     height: 64px;
     background: var(--cometchat-background-color-01);
+    width: 100%;
+    overflow: hidden;
 }
 
 /* Subtitle styling within the message header */
@@ -50,6 +52,11 @@
     justify-content: flex-start;
     gap: var(--cometchat-padding-2, 8px);
     flex: 1 0 0;
+    width: 100%;
+    overflow: hidden;
+}
+.cometchat-message-header  .cometchat-list-item__trailing-view{
+    display: none;
 }
 
 /* Styling for the back button in the message header */
@@ -66,7 +73,20 @@
     cursor: pointer;
 }
 
-
+.cometchat-message-header .cometchat-message-header__conversation-summary-button .cometchat-button{
+background: transparent;
+border: none;
+justify-content: center;
+align-items: center;
+height: fit-content;
+width: fit-content;
+padding: 0;
+}
+.cometchat-message-header .cometchat-message-header__conversation-summary-button .cometchat-button .cometchat-button__icon{
+    height: 24px;
+    width: 24px;
+    background: var(--cometchat-icon-color-primary, #141414);;
+}
 /* List item container within the message header */
 
 .cometchat-message-header__listitem {
@@ -75,15 +95,18 @@
     display: flex;
     align-items: center;
     justify-content: flex-start;
+    overflow: hidden;
 }
 
 /* Menu container within the message header, aligned to the right */
 
-.cometchat-message-header__menu {
+.cometchat-message-header__auxiliary-button-view {
     width: fit-content;
     display: flex;
+    gap: var(--cometchat-padding-4, 16px);
     align-items: center;
     justify-content: flex-end;
+    gap: 16px;
 }
 
 /* Removes padding for list items within the message header */
@@ -92,10 +115,12 @@
     padding: 0;
 
 }
-.cometchat-message-header .cometchat-list-item:hover{
+
+.cometchat-message-header .cometchat-list-item:hover {
     background: transparent;
     cursor: default;
 }
+
 /* Removes padding for the body of the list item within the message header */
 
 .cometchat-message-header .cometchat-list-item__body {
@@ -137,7 +162,7 @@
     width: 100%;
 }
 
-.cometchat-message-header .cometchat-button__icon:hover{
+.cometchat-message-header .cometchat-button__icon:hover {
     background: var(--cometchat-primary-color);
 }
 
@@ -148,6 +173,9 @@
     .cometchat-message-header__back-button {
         display: block;
     }
+    .cometchat-message-header .cometchat-list-item .cometchat-list-item__body-title {
+      display: initial;
+    }
 }
 
 @media (min-width: 769px) {

package/dist/styles/components/CometChatMessageInformation.css

@@ -145,7 +145,7 @@
     align-items: flex-start;
 }
 
-.cometchat-message-information__receipts .cometchat-list-item__tail-view {
+.cometchat-message-information__receipts .cometchat-list-item__trailing-view {
     display: none;
 }
 
@@ -204,7 +204,8 @@
     }
 }
 
-.cometchat-message-information .cometchat-date,
+.cometchat-message-information__receipts-subtite-text,
+.cometchat-message-information__receipts-subtitle .cometchat-date,
 .cometchat-message-information__receipts-subtite-text .cometchat-date {
     padding: 0px;
     overflow: hidden;

package/dist/styles/components/CometChatMessageList.css

@@ -20,7 +20,9 @@
     border: none;
     align-self: center;
 }
-
+.cometchat-message-list .cometchat-message-list__footer-smart-replies,.cometchat-message-list__footer-conversation-starter{
+    width: 100%;
+}
 /* Body of the error state view */
 .cometchat-message-list__error-state-view-body {
     display: flex;
@@ -310,9 +312,7 @@ width: fit-content;
 
 /* Message indicator inside message list */
 .cometchat-message-list__message-indicator {
-    z-index: 1;
-    position: absolute;
-    bottom: 8px;
+    margin-bottom: 8px;
     display: flex;
     width: 100;
     justify-content: center;
@@ -362,6 +362,7 @@ width: fit-content;
     justify-content: flex-start;
     width: 100%;
     box-sizing: border-box;
+    background: transparent;
 }
 
 /* Leading view inside message bubble */
@@ -698,7 +699,7 @@ width: fit-content;
 .cometchat-message-information__popup-wrapper {
     display: flex;
     position: fixed;
-    z-index: 1;
+    z-index: 2;
     left: 0;
     top: 0;
     width: 100%;

package/dist/styles/components/CometChatOutgoingCall.css

@@ -21,6 +21,11 @@
     font: var(--cometchat-font-title-medium);
 }
 
+.cometchat-outgoing-call__title-container {
+    display: flex;
+    flex-direction: column;
+}
+
 /* Subtitle text for the outgoing call UI */
 .cometchat-outgoing-call__subtitle {
     color: var(--cometchat-text-color-secondary);

package/dist/styles/components/{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/components/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/index.css

@@ -1,6 +1,6 @@
-@import url('./AIConversationStarter.css');
-@import url('./AIConversationSummary.css');
-@import url('./AISmartReplies.css');
+@import url('./CometChatConversationStarter.css');
+@import url('./CometChatSmartReplies.css');
+@import url('./CometChatConversationSummary.css');
 @import url('./CometChatActionSheet.css');
 @import url('./CometChatAudioBubble.css');
 @import url('./CometChatAvatar.css');
@@ -72,6 +72,7 @@ font:var(--cometchat-font-body-regular);
     padding: 0px var(--cometchat-padding, 2px);
     justify-content: center;
     align-items: center;
+    cursor: pointer;
 }
 .cometchat-mentions-outgoing.cometchat-mentions-you{
     background: rgba(255, 171, 0, 0.20);

package/dist/styles/index.css

@@ -1,6 +1,6 @@
-@import url('./AIConversationStarter.css');
-@import url('./AIConversationSummary.css');
-@import url('./AISmartReplies.css');
+@import url('./CometChatConversationStarter.css');
+@import url('./CometChatSmartReplies.css');
+@import url('./CometChatConversationSummary.css');
 @import url('./CometChatActionSheet.css');
 @import url('./CometChatAudioBubble.css');
 @import url('./CometChatAvatar.css');
@@ -72,6 +72,7 @@ font:var(--cometchat-font-body-regular);
     padding: 0px var(--cometchat-padding, 2px);
     justify-content: center;
     align-items: center;
+    cursor: pointer;
 }
 .cometchat-mentions-outgoing.cometchat-mentions-you{
     background: rgba(255, 171, 0, 0.20);

package/dist/types/CometChatCustomHooks.d.ts

@@ -24,4 +24,4 @@ export declare function useRefSync<T>(value: T): React.MutableRefObject<T>;
  * ```
  */
 export declare function useStateRef<T>(initialValue: T): [T, (node: T) => void];
-export declare function useCometChatErrorHandler(onError?: ((error: CometChat.CometChatException) => void) | null): (error: unknown) => void;
+export declare function useCometChatErrorHandler(onError?: ((error: CometChat.CometChatException) => void) | null): (error: unknown, source?: string) => void;

package/dist/types/CometChatUIKit/CometChatUIKit.d.ts

@@ -1,4 +1,3 @@
-import { AIExtensionDataSource } from "../components/AI/AIExtensionDataSource";
 import { CallingExtension } from "../components/Calling/CallingExtension";
 import { ExtensionsDataSource } from "../components/Extensions/ExtensionsDataSource";
 import { CometChatLocalize } from "../resources/CometChatLocalize/cometchat-localize";
@@ -63,11 +62,6 @@ declare class CometChatUIKit {
 * @type {CallingExtension}
 */
     static defaultCallingExtension: CallingExtension;
-    /**
-    * Default AI features included in the UI Kit.
-    * @type {AIExtensionDataSource[]}
-    */
-    static defaultAIFeatures: AIExtensionDataSource[];
     /**
      * Checking if the SDK is initialized.
      */

package/dist/types/CometChatUIKit/UIKitSettings.d.ts

@@ -1,4 +1,3 @@
-import { AIExtensionDataSource } from "../components/AI/AIExtensionDataSource";
 import { CallingExtension } from "../components/Calling/CallingExtension";
 import { ExtensionsDataSource } from "../components/Extensions/ExtensionsDataSource";
 /**
@@ -75,11 +74,6 @@ export declare class UIKitSettings {
    * @type {ExtensionsDataSource}
    */
     readonly callingExtension?: CallingExtension;
-    /**
-     * Data source for managing AI features.
-     * @type {AIExtensionDataSource[]}
-     */
-    readonly aiFeatures?: AIExtensionDataSource[];
     /**
      * Private constructor to initialize the settings using the provided builder.
      * @param {UIKitSettingsBuilder} builder - The builder instance containing the settings configuration.
@@ -141,11 +135,6 @@ export declare class UIKitSettings {
    * @returns {ExtensionsDataSource[]}
    */
     getCallsExtension(): ExtensionsDataSource;
-    /**
-     * Retrieves the list of AI features.
-     * @returns {AIExtensionDataSource[]} The list of AI features.
-     */
-    getAiFeatures(): AIExtensionDataSource[];
 }
 export declare class UIKitSettingsBuilder {
     /**
@@ -214,11 +203,6 @@ export declare class UIKitSettingsBuilder {
      * @type {string}
      */
     clientHost?: string;
-    /**
-     * Data source for managing AI features.
-     * @type {AIExtensionDataSource[]}
-     */
-    aiFeatures?: AIExtensionDataSource[];
     /**
     * Builds and returns an instance of UIKitSettings.
     * @returns {UIKitSettings} A new instance of UIKitSettings with the specified configuration.
@@ -295,10 +279,4 @@ export declare class UIKitSettingsBuilder {
    * @returns {UIKitSettingsBuilder} The builder instance.
    */
     setCallsExtension(callingExtension: CallingExtension): UIKitSettingsBuilder;
-    /**
-     * Sets the list of AI features.
-     * @param {AIExtensionDataSource[]} aiFeatures - The list of AI features.
-     * @returns {UIKitSettingsBuilder} The builder instance.
-     */
-    setAiFeatures(aiFeatures: AIExtensionDataSource[]): UIKitSettingsBuilder;
 }

package/dist/types/Enums/Enums.d.ts

@@ -16,6 +16,15 @@ export declare enum AuxiliaryButtonAlignment {
     left = 0,
     right = 1
 }
+/**
+ * It is used for specifying the function of enter button
+ * It is used in CometChatMessageComposer component.
+ */
+export declare enum EnterKeyBehavior {
+    SendMessage = "sendMessage",
+    NewLine = "newLine",
+    None = "none"
+}
 /**
  * It is used for describing the position of the element on the UI.
  * It is used in CometChatContextualMenu, CometChatMessageBubble, CometChatUsers and CometChatGroupMembers components.

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

@@ -0,0 +1,6 @@
+interface CometChatConversationStarterProps {
+    getConversationStarters?: () => Promise<string[]>;
+    onSuggestionClicked?: (reply: string) => void;
+}
+declare const CometChatConversationStarter: (props: CometChatConversationStarterProps) => import("react/jsx-runtime").JSX.Element;
+export { CometChatConversationStarter };

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

@@ -0,0 +1,6 @@
+interface CometChatConversationSummaryProps {
+    getConversationSummary?: () => Promise<string>;
+    closeCallback?: () => void;
+}
+declare const CometChatConversationSummary: (props: CometChatConversationSummaryProps) => import("react/jsx-runtime").JSX.Element;
+export { CometChatConversationSummary };