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

package/dist/styles/CometChatEditPreview.css

@@ -53,6 +53,7 @@
 */
 .cometchat-edit-preview__subtitle {
     font-style: normal;
+    text-align: left;
     color: var(--cometchat-text-color-secondary);
     font: var(--cometchat-font-caption1-regular);
 }

package/dist/styles/CometChatFileBubble.css

@@ -21,6 +21,8 @@
     justify-content: flex-start;
     gap: var(--cometchat-padding-2, 8px);
     flex: 1 0 0;
+    width: inherit;
+    overflow: hidden;
 }
 /* Body section of the file bubble with text alignment and overflow settings */
 .cometchat-file-bubble__body {

package/dist/styles/CometChatMessageComposer.css

@@ -141,6 +141,7 @@
     justify-content: space-between;
     align-items: flex-start;
     align-self: stretch;
+    flex-direction: column;
 }
 
 .cometchat-message-composer__header-error-state {
@@ -294,4 +295,8 @@
 /* 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);
 }

package/dist/styles/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__tail-view{
+    display: none;
 }
 
 /* Styling for the back button in the message header */
@@ -75,6 +82,7 @@
     display: flex;
     align-items: center;
     justify-content: flex-start;
+    overflow: hidden;
 }
 
 /* Menu container within the message header, aligned to the right */
@@ -148,6 +156,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/CometChatEditPreview.css

@@ -53,6 +53,7 @@
 */
 .cometchat-edit-preview__subtitle {
     font-style: normal;
+    text-align: left;
     color: var(--cometchat-text-color-secondary);
     font: var(--cometchat-font-caption1-regular);
 }

package/dist/styles/components/CometChatFileBubble.css

@@ -21,6 +21,8 @@
     justify-content: flex-start;
     gap: var(--cometchat-padding-2, 8px);
     flex: 1 0 0;
+    width: inherit;
+    overflow: hidden;
 }
 /* Body section of the file bubble with text alignment and overflow settings */
 .cometchat-file-bubble__body {

package/dist/styles/components/CometChatMessageComposer.css

@@ -141,6 +141,7 @@
     justify-content: space-between;
     align-items: flex-start;
     align-self: stretch;
+    flex-direction: column;
 }
 
 .cometchat-message-composer__header-error-state {
@@ -294,4 +295,8 @@
 /* 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);
 }

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__tail-view{
+    display: none;
 }
 
 /* Styling for the back button in the message header */
@@ -75,6 +82,7 @@
     display: flex;
     align-items: center;
     justify-content: flex-start;
+    overflow: hidden;
 }
 
 /* Menu container within the message header, aligned to the right */
@@ -148,6 +156,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/index.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

@@ -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/events/CometChatUIEvents.d.ts

@@ -1,5 +1,6 @@
 import { Subject } from "rxjs";
 import { MouseEventSource, PanelAlignment } from "../Enums/Enums";
+import { ComposerId } from "../utils/MessagesDataSource";
 /**
  * UI event subjects for handling various UI-related actions (e.g., showing panels, modals, dialogs, etc.)
 
@@ -37,6 +38,7 @@ export interface IPanel {
 }
 export interface IModal {
     child?: any;
+    composerId?: ComposerId;
 }
 export interface IActiveChatChanged {
     user?: CometChat.User;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cometchat/chat-uikit-react",
-  "version": "5.0.0-beta1",
+  "version": "5.0.0-beta2",
   "description": "Ready-to-use Chat UI Components for React(Javascript/Web)",
   "author": "CometChat",
   "dependencies": {

package/dist/styles/CometChatBadge.css

@@ -1,15 +0,0 @@
-.cometchat-badge {
-    height: min-content;
-    width: min-content;
-    border-radius: 20px;
-    background: #6852D6;
-    font-weight: 400;
-    font-size: 12px;
-    color: white;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 4px;
-    min-width: 26px;
-    min-height: 16px;
-}

package/dist/styles/CometChatCard.css

@@ -1,41 +0,0 @@
-* {
-    box-sizing: border-box;
-}
-
-.cometchat-card {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    padding: 8px;
-    justify-content: space-between;
-    height: 100%;
-    width: 100%;
-}
-
-.cometchat-card__details {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-}
-
-.cometchat-card__subtitle-view {
-    margin-bottom: 20px;
-}
-
-.cometchat-card__image {
-    height: fit-content;
-    width: fit-content;
-    margin-bottom: 20px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.cometchat-card__bottom-view {
-    cursor: pointer;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-}

package/dist/styles/components/CometChatBadge.css

@@ -1,15 +0,0 @@
-.cometchat-badge {
-    height: min-content;
-    width: min-content;
-    border-radius: 20px;
-    background: #6852D6;
-    font-weight: 400;
-    font-size: 12px;
-    color: white;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 4px;
-    min-width: 26px;
-    min-height: 16px;
-}

package/dist/styles/components/CometChatCard.css

@@ -1,41 +0,0 @@
-* {
-    box-sizing: border-box;
-}
-
-.cometchat-card {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    padding: 8px;
-    justify-content: space-between;
-    height: 100%;
-    width: 100%;
-}
-
-.cometchat-card__details {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-}
-
-.cometchat-card__subtitle-view {
-    margin-bottom: 20px;
-}
-
-.cometchat-card__image {
-    height: fit-content;
-    width: fit-content;
-    margin-bottom: 20px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.cometchat-card__bottom-view {
-    cursor: pointer;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-}

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

@@ -1,8 +0,0 @@
-/**
- * Global settings object for CometChat UIKit.
- *
- * This variable holds shared configurations and settings that can be accessed
- * throughout the CometChat UIKit. It can be used to store and retrieve
- * various settings that affect the behavior of the UIKit components.
- */
-export declare var CometChatUIKitSharedSettings: any;

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

@@ -1,10 +0,0 @@
-interface BadgeProps {
-    count: number | string;
-}
-/**
-    The CometChatBadge component is a generic component used to display numbers as a label.
-    It is generally used to display unread message count.
-    It accepts a count as an input, and developers can override the "cometchat-badge" class for customization purposes.
-*/
-declare const CometChatBadge: (props: BadgeProps) => import("react/jsx-runtime").JSX.Element | null;
-export { CometChatBadge };

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

@@ -1,15 +0,0 @@
-interface BaseProps {
-    /** URL of the avatar to be displayed. */
-    avatarURL?: string;
-    /** Name used for displaying initials in the avatar. */
-    avatarName?: string;
-    /** Title to be displayed for the card. */
-    title: string;
-}
-type CometChatAvatarProps = BaseProps & {
-    avatarURL: string;
-} | BaseProps & {
-    avatarName: string;
-};
-declare const CometChatCard: (props: CometChatAvatarProps) => import("react/jsx-runtime").JSX.Element;
-export { CometChatCard };

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

@@ -1,9 +0,0 @@
-interface BaseProps {
-    title: string;
-    subtitle: string;
-    closeIconURL?: string;
-    hideCloseIcon: boolean;
-    onCloseButtonClicked: () => void;
-}
-declare const CometChatQuickView: (props: BaseProps) => import("react/jsx-runtime").JSX.Element;
-export { CometChatQuickView };

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

@@ -1,8 +0,0 @@
-import React from "react";
-interface CometChatSingleSelectProps {
-    options: string[];
-    selectedOption?: string;
-    onOptionChange?: (selectedOption: string) => void;
-}
-declare const CometChatSingleSelect: React.FC<CometChatSingleSelectProps>;
-export { CometChatSingleSelect };

package/dist/types/components/CometChatUserMemberWrapper/index.d.ts

@@ -1,23 +0,0 @@
-import { CSSProperties } from 'react';
-import { UserMemberListType, UserPresencePlacement } from '../../Enums/Enums';
-export interface IMentionsProps {
-    userMemberListType?: UserMemberListType;
-    onItemClick?: (user: CometChat.User | CometChat.GroupMember) => void;
-    listItemView?: (item?: CometChat.User | CometChat.GroupMember) => JSX.Element;
-    statusIndicatorStyle?: CSSProperties;
-    searchKeyword?: string;
-    group?: CometChat.Group;
-    subtitleView?: (item?: CometChat.User | CometChat.GroupMember) => JSX.Element;
-    usersRequestBuilder?: CometChat.UsersRequestBuilder;
-    disableUsersPresence?: boolean;
-    userPresencePlacement?: UserPresencePlacement;
-    hideSeparator?: boolean;
-    loadingStateView?: JSX.Element;
-    onEmpty?: () => void;
-    groupMemberRequestBuilder?: CometChat.GroupMembersRequestBuilder;
-    loadingIconUrl?: string;
-    disableLoadingState?: boolean;
-    onError?: () => void;
-}
-declare function CometChatUserMemberWrapper(props: IMentionsProps): import("react/jsx-runtime").JSX.Element;
-export default CometChatUserMemberWrapper;

package/dist/types/modals/InteractiveActions/APIAction.d.ts

@@ -1,108 +0,0 @@
-import { ButtonAction, DateTimePickerMode, ElementType } from "../../Enums/Enums";
-import { OptionElement } from "../InteractiveElements";
-import { ActionEntity } from "../InteractiveEntities/ActionEntity";
-import { CardData } from "../InteractiveMessage/CardMessage";
-import { FormData } from "../InteractiveMessage/FormMessage";
-import { InteractiveData } from "../InteractiveMessage/SchedulerMessage";
-import { CustomAction } from "./CustomAction";
-import { URLNavigationAction } from "./URLNavigationAction";
-export interface fromJsonType {
-    url?: string;
-    method?: string;
-    payload?: Object;
-    headers?: Object;
-    actionType?: ButtonAction;
-    elementType?: string | ElementType;
-    data?: {
-        interactiveData: CardData & FormData & InteractiveData;
-    };
-    receiverId?: string;
-    receiverType?: string;
-    receiver?: string;
-    optional?: boolean | string;
-    elementId?: string;
-    action?: (APIAction | URLNavigationAction | CustomAction) & fromJsonType;
-    buttonText?: string;
-    disableAfterInteracted?: boolean;
-    label?: string;
-    defaultValue?: string[] & string;
-    options?: OptionElement[];
-    mode?: DateTimePickerMode;
-    timezoneCode?: string;
-    from?: string;
-    to?: string;
-    dateTimeFormat?: string;
-    text?: string;
-    value?: string;
-    maxLines?: number;
-    placeholder?: {
-        text: string;
-    };
-}
-/**
- * Represents an API action that can be performed on a dynamic form.
- */
-export declare class APIAction extends ActionEntity {
-    /**
-     * The URL to which the API action should be performed.
-     */
-    private url;
-    /**
-     * The HTTP method to be used for the API action.
-     */
-    private method;
-    /**
-     * The payload to be sent with the API action.
-     */
-    private payload?;
-    /**
-     * The headers to be sent with the API action.
-     */
-    private headers?;
-    /**
-     * Creates a new instance of the APIAction class.
-     * @param {string} url - The URL to which the API action should be performed.
-     * @param {string} method - The HTTP method to be used for the API action.
-     */
-    constructor(url: string, method: string);
-    /**
-     * Returns the URL to which the API action should be performed.
-     * @returns {string} The URL to which the API action should be performed.
-     */
-    getURL(): string;
-    /**
-     * Returns the HTTP method to be used for the API action.
-     * @returns {string} The HTTP method to be used for the API action.
-     */
-    getMethod(): string;
-    /**
-     * Returns the payload to be sent with the API action.
-     * @returns {Object} The payload to be sent with the API action.
-     */
-    getPayload(): Object | undefined;
-    /**
-     * Sets the payload to be sent with the API action.
-     * @param {Object} payload - The payload to be sent with the API action.
-     */
-    setPayload(payload: Object): void;
-    /**
-     * Returns the headers to be sent with the API action.
-     * @returns {Object} The headers to be sent with the API action.
-     */
-    getHeaders(): Object | undefined;
-    /**
-     * Sets the headers to be sent with the API action.
-     * @param {Object} headers - The headers to be sent with the API action.
-     */
-    setHeaders(headers: Object): void;
-    /**
-     * Creates an `APIAction` instance from a JSON object.
-     *
-     * Initializes the `APIAction` with URL and method, and sets payload
-     * and headers if provided.
-     *
-     * @param {fromJsonType} json - The JSON object with API action properties.
-     * @returns {APIAction} The `APIAction` instance.
-     */
-    static fromJSON(json: fromJsonType): APIAction;
-}

package/dist/types/modals/InteractiveActions/CustomAction.d.ts

@@ -1,12 +0,0 @@
-import { ActionEntity } from "../InteractiveEntities/ActionEntity";
-/**
- * Represents a custom action entity.
- */
-export declare class CustomAction extends ActionEntity {
-    constructor();
-    /**
-     * Creates a new CustomAction object from a JSON object.
-     * @returns A new CustomAction object created from the JSON object.
-     */
-    static fromJSON(): CustomAction;
-}

package/dist/types/modals/InteractiveActions/URLNavigationAction.d.ts

@@ -1,30 +0,0 @@
-import { ActionEntity } from "../InteractiveEntities/ActionEntity";
-import { fromJsonType } from "./APIAction";
-/**
- * Represents a URL navigation action that can be performed on a dynamic form.
- */
-export declare class URLNavigationAction extends ActionEntity {
-    /**
-     * The URL to navigate to.
-     */
-    private url;
-    /**
-     * Creates a new instance of the URLNavigationAction class.
-     * @param {string} url - The URL to navigate to.
-     */
-    constructor(url: string);
-    /**
-     * Returns the URL to navigate to.
-     * @returns {string} The URL to navigate to.
-     */
-    getURL(): string;
-    /**
-     * Creates a `URLNavigationAction` instance from a JSON object.
-     *
-     * Initializes the `URLNavigationAction` with the provided URL.
-     *
-     * @param {fromJsonType} json - The JSON object containing the URL.
-     * @returns {URLNavigationAction} The `URLNavigationAction` instance.
-     */
-    static fromJSON(json: fromJsonType): URLNavigationAction;
-}

package/dist/types/modals/InteractiveActions/index.d.ts

@@ -1,3 +0,0 @@
-export { APIAction } from "./APIAction";
-export { URLNavigationAction } from "./URLNavigationAction";
-export { CustomAction } from "./CustomAction";

package/dist/types/modals/InteractiveElements/BaseInputElement.d.ts

@@ -1,50 +0,0 @@
-import { ElementEntity } from "../InteractiveEntities/ElementEntity";
-import { fromJsonType } from "../InteractiveActions/APIAction";
-/**
- * Represents the base input for a dynamic form element.
- */
-export declare class BaseInputElement<T> extends ElementEntity {
-    /**
-     * The response of an input.
-     */
-    private response?;
-    /**
-     * Whether the input element is optional or required.
-     * */
-    private optional?;
-    /**
-     * Creates a new instance of the BaseInputElement class.
-     * @param {string} elementId - The unique identifier of the form element.
-     * @param {string} elementType - The type of the form element.
-     */
-    constructor(elementId: string, elementType: string);
-    /**
-     * Sets the response of an input.
-     */
-    setResponse(response: T): void;
-    /**
-     * Returns the response of an input.
-     * @returns {T} The response of an input.
-     */
-    getResponse(): T | undefined;
-    /**
- * Returns whether the element is optional or required.
- * @returns {boolean} Whether the element is optional or required.
- */
-    getOptional(): boolean | undefined;
-    /**
-     * Sets whether the element is optional or required.
-     * @param {boolean} optional - Whether the element is optional or required.
-     */
-    setOptional(optional: boolean | string): void;
-    /**
-      * Creates an `ElementEntity` from a JSON object based on the `elementType`.
-      *
-      * Initializes the element type (e.g., text, checkbox) and sets the optional property.
-      * Creates a default `TextInputElement` if the `elementType` is unrecognized.
-      *
-      * @param {fromJsonType} json - The JSON object with element properties, including `elementType` and `optional`.
-      * @returns {ElementEntity} The constructed `ElementEntity`.
-      */
-    static fromJSON(json: fromJsonType): ElementEntity;
-}

package/dist/types/modals/InteractiveElements/BaseInteractiveElement.d.ts

@@ -1,25 +0,0 @@
-import { APIAction, CustomAction, URLNavigationAction } from "../InteractiveActions";
-import { ElementEntity } from "../InteractiveEntities";
-import { fromJsonType } from "../InteractiveActions/APIAction";
-/**
- * Represents a base interactive element in a interactive message.
- */
-export declare class BaseInteractiveElement extends ElementEntity {
-    /**
-     * Represents an action that can be performed on the message.
-     */
-    private action;
-    constructor(elementId: string, elementType: string, action: APIAction | URLNavigationAction | CustomAction);
-    /**
-     * Returns the action associated with the bubble.
-     * @returns {APIAction | URLNavigationAction | CustomAction} The action associated with the bubble.
-     */
-    getAction(): APIAction | URLNavigationAction | CustomAction;
-    /**
-     * Creates a `BaseInteractiveElement` instance from a JSON object based on the element type.
-     * @param {fromJsonType} json - The JSON object containing the properties of the interactive element, including `elementType`.
-     * @param {string} json.elementType - The type of the element to create (e.g., `button`).
-     * @returns {BaseInteractiveElement} The constructed `BaseInteractiveElement` instance.
-     */
-    static fromJSON(json: fromJsonType): BaseInteractiveElement;
-}