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

package/dist/styles/components/CometChatMessageHeader.css

@@ -55,7 +55,7 @@
     width: 100%;
     overflow: hidden;
 }
-.cometchat-message-header  .cometchat-list-item__tail-view{
+.cometchat-message-header  .cometchat-list-item__trailing-view{
     display: none;
 }
 
@@ -73,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 {
@@ -87,11 +100,13 @@
 
 /* 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 */
@@ -100,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 {
@@ -145,7 +162,7 @@
     width: 100%;
 }
 
-.cometchat-message-header .cometchat-button__icon:hover{
+.cometchat-message-header .cometchat-button__icon:hover {
     background: var(--cometchat-primary-color);
 }
 

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');

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');

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 };

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

@@ -2,18 +2,12 @@ import { JSX } from "react";
 import { States, TitleAlignment } from "../../../Enums/Enums";
 export type DivElementRef = HTMLDivElement | null;
 interface ListProps<T> {
-    /**
-     * Title of the component
-     *
-     * @defaultValue `""`
-     */
-    title?: string;
     /**
      * Menu view of the component
      *
      * @defaultValue `""`
      */
-    menu?: JSX.Element;
+    headerView?: JSX.Element;
     /**
      * Alignment of the `title` text
      *
@@ -56,7 +50,7 @@ interface ListProps<T> {
     /**
      * Custom list item view to be rendered for each object in the `list` prop
      */
-    listItem: (item: T, itemIndex: number) => JSX.Element;
+    itemView: (item: T, itemIndex: number) => JSX.Element;
     /**
      * Function to call when the scrollbar is at the top-most position of the scrollable list
      */
@@ -81,14 +75,14 @@ interface ListProps<T> {
      * @remarks
      * This property will be used to extract the section header character from each object in the `list` prop
      */
-    sectionHeaderKey?: keyof T;
+    sectionHeaderKey?: keyof T | string;
     /**
      * Property on each object in the `list` prop
      *
      * @remarks
      * This property will be used to extract the key value from each object in the `list` prop. The extracted key value is set as a `key` of a React element
      */
-    listItemKey?: keyof T;
+    listItemKey?: keyof T | string;
     /**
      * Fetch state of the component
      */
@@ -113,7 +107,7 @@ interface ListProps<T> {
     /**
      * Custom view for the error state of the component
      */
-    errorStateView?: JSX.Element;
+    errorView?: JSX.Element;
     /**
      * Text to display in the default error view
      *
@@ -123,7 +117,7 @@ interface ListProps<T> {
     /**
      * Custom view for the empty state of the component
      */
-    emptyStateView?: JSX.Element;
+    emptyView?: JSX.Element;
     /**
      * Text to display in the default empty view
      *
@@ -141,6 +135,12 @@ interface ListProps<T> {
      * Function to call whenever the component encounters an error
      */
     onError?: ((error: CometChat.CometChatException) => void) | null;
+    /**
+   * Title of the component
+   *
+   * @defaultValue `""`
+   */
+    title?: string;
 }
 /**
  * Renders a list component that can display a title, search bar,

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

@@ -9,7 +9,9 @@ interface ListItemProps {
     }) => void;
     menuView?: ReactNode;
     subtitleView?: ReactNode;
-    tailView?: ReactNode;
+    trailingView?: ReactNode;
+    titleView?: ReactNode;
+    leadingView?: ReactNode;
 }
 declare const CometChatListItem: (props: ListItemProps) => import("react/jsx-runtime").JSX.Element;
 export { CometChatListItem };

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

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

package/dist/types/components/Calling/CallButtonConfiguration.d.ts

@@ -4,7 +4,7 @@ export declare class CallButtonConfiguration {
     callSettingsBuilder?: (isAudioOnlyCall: boolean, user?: CometChat.User, group?: CometChat.Group) => typeof CometChatUIKitCalls.CallSettingsBuilder;
     onVoiceCallClick?: () => void;
     onVideoCallClick?: () => void;
-    onError?: (error: CometChat.CometChatException) => void;
+    onError?: ((error: CometChat.CometChatException) => void) | null;
     outgoingCallConfiguration?: OutgoingCallConfiguration;
     constructor(configuration?: CallButtonConfiguration);
 }

package/dist/types/components/Calling/CallingExtensionDecorator.d.ts

@@ -11,7 +11,7 @@ export declare class CallingExtensionDecorator extends DataSourceDecorator {
     getLoggedInUser(): Promise<void>;
     getAllMessageTypes(): string[];
     getId(): string;
-    getAllMessageCategories(): string[];
+    getAllMessageCategories(additionalConfigurations?: Object | undefined): string[];
     checkIfTemplateTypeExist(template: CometChatMessageTemplate[], type: string): boolean;
     checkIfTemplateCategoryExist(template: CometChatMessageTemplate[], category: string): boolean;
     getAllMessageTemplates(additionalConfigurations?: any): CometChatMessageTemplate[];
@@ -25,5 +25,5 @@ export declare class CallingExtensionDecorator extends DataSourceDecorator {
     getDefaultAudioCallMessageBubble(_message: CometChat.Call, _alignment: MessageBubbleAlignment): import("react/jsx-runtime").JSX.Element;
     getDefaultVideoCallMessageBubble(_message: CometChat.Call, _alignment: MessageBubbleAlignment): import("react/jsx-runtime").JSX.Element;
     getLastConversationMessage(conversation: CometChat.Conversation, loggedInUser: CometChat.User, additionalParams?: any): string;
-    getAuxiliaryHeaderMenu(user?: CometChat.User, group?: CometChat.Group): any[];
+    getAuxiliaryHeaderMenu(user?: CometChat.User, group?: CometChat.Group, additionalConfigurations?: any): any[];
 }