@cometchat/chat-uikit-react 5.0.3 → 6.0.0

package/dist/styles/CometChatFullScreenViewer.css

@@ -17,7 +17,7 @@
   width:fit-content;
   position: absolute;
   left: 10px;
-  top: 10px;
+  top: 0px;
 }
 
 .cometchat-fullscreen-viewer .cometchat-fullscreen-viewer__header-item .cometchat-list-item {

package/dist/styles/{CometChatThreadedMessagePreview.css → CometChatThreadHeader.css}

@@ -1,4 +1,4 @@
-.cometchat-threaded-message-preview {
+.cometchat-thread-header {
     display: flex;
     width: 420px;
     flex-direction: column;
@@ -9,7 +9,7 @@
     background: var(--cometchat-background-color-01, #FFF);
 }
 
-.cometchat-threaded-message-preview__header {
+.cometchat-thread-header__top-bar {
     display: flex;
     padding: var(--cometchat-padding-2, 8px) var(--cometchat-padding-4, 16px);
     align-items: center;
@@ -21,7 +21,7 @@
     background: var(--cometchat-background-color-01, #FFF);
 }
 
-.cometchat-threaded-message-preview__header-title {
+.cometchat-thread-header__top-bar-title {
     display: flex;
     flex-direction: column;
     justify-content: center;
@@ -33,7 +33,7 @@
     font: var(--cometchat-font-heading3-bold, 700 20px Roboto);
 }
 
-.cometchat-threaded-message-preview__header-close {
+.cometchat-thread-header__top-bar-close {
     display: flex;
     width: 24px;
     height: 24px;
@@ -42,7 +42,7 @@
     cursor: pointer;
 }
 
-.cometchat-threaded-message-preview__header-close .cometchat-button {
+.cometchat-thread-header__top-bar-close .cometchat-button {
     height: 24px;
     width: 24px;
     padding: 0px;
@@ -50,23 +50,23 @@
     background: transparent;
 }
 
-.cometchat-threaded-message-preview__header-close .cometchat-button:hover {
+.cometchat-thread-header__top-bar-close .cometchat-button:hover {
     background: transparent;
 }
 
-.cometchat-threaded-message-preview__header-close .cometchat-button:active {
+.cometchat-thread-header__top-bar-close .cometchat-button:active {
     background: transparent;
 }
 
-.cometchat-threaded-message-preview__header-close .cometchat-button__icon {
+.cometchat-thread-header__top-bar-close .cometchat-button__icon {
     background: var(--cometchat-icon-color-primary, #141414);
 }
 
-.cometchat-threaded-message-preview__header-close .cometchat-button__icon:hover {
+.cometchat-thread-header__top-bar-close .cometchat-button__icon:hover {
     background: var(--cometchat-icon-color-highlight);
 }
 
-.cometchat-threaded-message-preview__content {
+.cometchat-thread-header__body {
     display: flex;
     width: 100%;
     padding-top: var(--cometchat-padding-3, 12px);
@@ -74,7 +74,7 @@
     flex-shrink: 0;
 }
 
-.cometchat-threaded-message-preview__content-time {
+.cometchat-thread-header__body-timestamp {
     display: flex;
     padding: var(--cometchat-padding-1, 4px) var(--cometchat-padding-2, 8px);
     align-self: center;
@@ -84,7 +84,7 @@
     box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
 }
 
-.cometchat-threaded-message-preview__content-time .cometchat-date {
+.cometchat-thread-header__body-timestamp .cometchat-date {
     color: var(--cometchat-text-color-primary, #141414);
     text-align: center;
     font: var(--cometchat-font-caption1-medium, 500 12px Roboto);
@@ -92,7 +92,7 @@
     display: flex;
 }
 
-.cometchat-threaded-message-preview__message {
+.cometchat-thread-header__message {
     display: flex;
     padding: var(--cometchat-padding-2, 8px) var(--cometchat-padding-4, 16px);
     gap: 0px;
@@ -102,34 +102,34 @@
     flex: 1 0 0;
 }
 
-.cometchat-threaded-message-preview__message::-webkit-scrollbar,
-.cometchat-threaded-message-preview__message::-webkit-scrollbar-thumb {
+.cometchat-thread-header__message::-webkit-scrollbar,
+.cometchat-thread-header__message::-webkit-scrollbar-thumb {
     display: none;
 }
 
-.cometchat-threaded-message-preview__message .cometchat-text-bubble .cometchat-text-bubble__read-more {
+.cometchat-thread-header__message .cometchat-text-bubble .cometchat-text-bubble__read-more {
     display: none;
 }
 
-.cometchat-threaded-message-preview__message-small {
+.cometchat-thread-header__message-small {
     min-height: fit-content;
     max-height: 150px;
 }
 
-.cometchat-threaded-message-preview__message-incoming {
+.cometchat-thread-header__message-incoming {
     align-self: flex-start;
 }
 
-.cometchat-threaded-message-preview__message-outgoing {
+.cometchat-thread-header__message-outgoing {
     align-self: flex-end;
 }
 
-.cometchat-threaded-message-preview__message .cometchat-message-bubble__wrapper {
+.cometchat-thread-header__message .cometchat-message-bubble__wrapper {
     padding: 0px;
     width: 100%;
 }
 
-.cometchat-threaded-message-preview__footer {
+.cometchat-thread-header__reply-bar {
     display: flex;
     padding: var(--cometchat-padding-1, 4px) var(--cometchat-padding-5, 20px);
     justify-content: center;
@@ -138,13 +138,13 @@
     align-self: stretch;
 }
 
-.cometchat-threaded-message-preview__footer-reply-count {
+.cometchat-thread-header__reply-bar-count {
     color: var(--cometchat-text-color-secondary, #727272);
     text-align: center;
     font: var(--cometchat-font-body-regular, 400 14px Roboto);
 }
 
-.cometchat-threaded-message-preview__footer-divider {
+.cometchat-thread-header__reply-bar-divider {
     width: 100%;
     height: 1px;
     background: var(--cometchat-border-color-default, #E8E8E8);

package/dist/styles/components/CometChatFullScreenViewer.css

@@ -17,7 +17,7 @@
   width:fit-content;
   position: absolute;
   left: 10px;
-  top: 10px;
+  top: 0px;
 }
 
 .cometchat-fullscreen-viewer .cometchat-fullscreen-viewer__header-item .cometchat-list-item {

package/dist/styles/components/{CometChatThreadedMessagePreview.css → CometChatThreadHeader.css}

@@ -1,4 +1,4 @@
-.cometchat-threaded-message-preview {
+.cometchat-thread-header {
     display: flex;
     width: 420px;
     flex-direction: column;
@@ -9,7 +9,7 @@
     background: var(--cometchat-background-color-01, #FFF);
 }
 
-.cometchat-threaded-message-preview__header {
+.cometchat-thread-header__top-bar {
     display: flex;
     padding: var(--cometchat-padding-2, 8px) var(--cometchat-padding-4, 16px);
     align-items: center;
@@ -21,7 +21,7 @@
     background: var(--cometchat-background-color-01, #FFF);
 }
 
-.cometchat-threaded-message-preview__header-title {
+.cometchat-thread-header__top-bar-title {
     display: flex;
     flex-direction: column;
     justify-content: center;
@@ -33,7 +33,7 @@
     font: var(--cometchat-font-heading3-bold, 700 20px Roboto);
 }
 
-.cometchat-threaded-message-preview__header-close {
+.cometchat-thread-header__top-bar-close {
     display: flex;
     width: 24px;
     height: 24px;
@@ -42,7 +42,7 @@
     cursor: pointer;
 }
 
-.cometchat-threaded-message-preview__header-close .cometchat-button {
+.cometchat-thread-header__top-bar-close .cometchat-button {
     height: 24px;
     width: 24px;
     padding: 0px;
@@ -50,23 +50,23 @@
     background: transparent;
 }
 
-.cometchat-threaded-message-preview__header-close .cometchat-button:hover {
+.cometchat-thread-header__top-bar-close .cometchat-button:hover {
     background: transparent;
 }
 
-.cometchat-threaded-message-preview__header-close .cometchat-button:active {
+.cometchat-thread-header__top-bar-close .cometchat-button:active {
     background: transparent;
 }
 
-.cometchat-threaded-message-preview__header-close .cometchat-button__icon {
+.cometchat-thread-header__top-bar-close .cometchat-button__icon {
     background: var(--cometchat-icon-color-primary, #141414);
 }
 
-.cometchat-threaded-message-preview__header-close .cometchat-button__icon:hover {
+.cometchat-thread-header__top-bar-close .cometchat-button__icon:hover {
     background: var(--cometchat-icon-color-highlight);
 }
 
-.cometchat-threaded-message-preview__content {
+.cometchat-thread-header__body {
     display: flex;
     width: 100%;
     padding-top: var(--cometchat-padding-3, 12px);
@@ -74,7 +74,7 @@
     flex-shrink: 0;
 }
 
-.cometchat-threaded-message-preview__content-time {
+.cometchat-thread-header__body-timestamp {
     display: flex;
     padding: var(--cometchat-padding-1, 4px) var(--cometchat-padding-2, 8px);
     align-self: center;
@@ -84,7 +84,7 @@
     box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
 }
 
-.cometchat-threaded-message-preview__content-time .cometchat-date {
+.cometchat-thread-header__body-timestamp .cometchat-date {
     color: var(--cometchat-text-color-primary, #141414);
     text-align: center;
     font: var(--cometchat-font-caption1-medium, 500 12px Roboto);
@@ -92,7 +92,7 @@
     display: flex;
 }
 
-.cometchat-threaded-message-preview__message {
+.cometchat-thread-header__message {
     display: flex;
     padding: var(--cometchat-padding-2, 8px) var(--cometchat-padding-4, 16px);
     gap: 0px;
@@ -102,34 +102,34 @@
     flex: 1 0 0;
 }
 
-.cometchat-threaded-message-preview__message::-webkit-scrollbar,
-.cometchat-threaded-message-preview__message::-webkit-scrollbar-thumb {
+.cometchat-thread-header__message::-webkit-scrollbar,
+.cometchat-thread-header__message::-webkit-scrollbar-thumb {
     display: none;
 }
 
-.cometchat-threaded-message-preview__message .cometchat-text-bubble .cometchat-text-bubble__read-more {
+.cometchat-thread-header__message .cometchat-text-bubble .cometchat-text-bubble__read-more {
     display: none;
 }
 
-.cometchat-threaded-message-preview__message-small {
+.cometchat-thread-header__message-small {
     min-height: fit-content;
     max-height: 150px;
 }
 
-.cometchat-threaded-message-preview__message-incoming {
+.cometchat-thread-header__message-incoming {
     align-self: flex-start;
 }
 
-.cometchat-threaded-message-preview__message-outgoing {
+.cometchat-thread-header__message-outgoing {
     align-self: flex-end;
 }
 
-.cometchat-threaded-message-preview__message .cometchat-message-bubble__wrapper {
+.cometchat-thread-header__message .cometchat-message-bubble__wrapper {
     padding: 0px;
     width: 100%;
 }
 
-.cometchat-threaded-message-preview__footer {
+.cometchat-thread-header__reply-bar {
     display: flex;
     padding: var(--cometchat-padding-1, 4px) var(--cometchat-padding-5, 20px);
     justify-content: center;
@@ -138,13 +138,13 @@
     align-self: stretch;
 }
 
-.cometchat-threaded-message-preview__footer-reply-count {
+.cometchat-thread-header__reply-bar-count {
     color: var(--cometchat-text-color-secondary, #727272);
     text-align: center;
     font: var(--cometchat-font-body-regular, 400 14px Roboto);
 }
 
-.cometchat-threaded-message-preview__footer-divider {
+.cometchat-thread-header__reply-bar-divider {
     width: 100%;
     height: 1px;
     background: var(--cometchat-border-color-default, #E8E8E8);

package/dist/styles/components/index.css

@@ -52,7 +52,7 @@
 @import url('./CometChatIncomingCall.css');
 @import url('./CometChatMessageInformation.css');
 @import url('./CometChatOngoingCall.css');
-@import url('./CometChatThreadedMessagePreview.css');
+@import url('./CometChatThreadHeader.css');
 @import url('./CometChatToast.css');
 
 

package/dist/styles/index.css

@@ -52,7 +52,7 @@
 @import url('./CometChatIncomingCall.css');
 @import url('./CometChatMessageInformation.css');
 @import url('./CometChatOngoingCall.css');
-@import url('./CometChatThreadedMessagePreview.css');
+@import url('./CometChatThreadHeader.css');
 @import url('./CometChatToast.css');
 
 

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

@@ -1,13 +1,3 @@
-/**
- * This is used for providing the required date configs.
- * It is used in components where the date field is present.
- */
-export declare enum DatePatterns {
-    time = 0,
-    DayDate = 1,
-    DayDateTime = 2,
-    DateTime = 3
-}
 /**
  * It is used for specifying the position of the auxiliary buttons.
  * It is used in CometChatMessageComposer component.

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

@@ -1,8 +1,7 @@
-import { DatePatterns } from "../../../Enums/Enums";
+import { CalendarObject } from "../../../utils/CalendarObject";
 interface DateProps {
     timestamp: number;
-    pattern?: DatePatterns;
-    customDateString?: string | null;
+    calendarObject: CalendarObject;
 }
 /**
  * CometChatDate is a generic component used to display dates in the required format.

package/dist/types/components/BaseComponents/CometChatEmojiKeyboard/emojis.d.ts

@@ -1,7 +1,7 @@
 export declare const Emojis: ({
     people: {
         id: string;
-        name: any;
+        name: string;
         symbol: string;
         emojis: {
             grinning: {
@@ -1546,7 +1546,7 @@ export declare const Emojis: ({
 } | {
     animals_and_nature: {
         id: string;
-        name: any;
+        name: string;
         symbol: string;
         emojis: {
             dog: {
@@ -2269,7 +2269,7 @@ export declare const Emojis: ({
 } | {
     food_and_drink: {
         id: string;
-        name: any;
+        name: string;
         symbol: string;
         emojis: {
             green_apple: {
@@ -2704,7 +2704,7 @@ export declare const Emojis: ({
 } | {
     activity: {
         id: string;
-        name: any;
+        name: string;
         symbol: string;
         emojis: {
             soccer: {
@@ -3130,7 +3130,7 @@ export declare const Emojis: ({
 } | {
     travel_and_places: {
         id: string;
-        name: any;
+        name: string;
         symbol: string;
         emojis: {
             red_car: {
@@ -3621,7 +3621,7 @@ export declare const Emojis: ({
 } | {
     objects: {
         id: string;
-        name: any;
+        name: string;
         symbol: string;
         emojis: {
             watch: {
@@ -4445,7 +4445,7 @@ export declare const Emojis: ({
 } | {
     symbols: {
         id: string;
-        name: any;
+        name: string;
         symbol: string;
         emojis: {
             heart: {
@@ -5556,7 +5556,7 @@ export declare const Emojis: ({
 } | {
     flags: {
         id: string;
-        name: any;
+        name: string;
         symbol: string;
         emojis: {
             afghanistan: {

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

@@ -1,13 +1,9 @@
 import React from 'react';
+import { CalendarObject } from '../../../utils/CalendarObject';
 /**
  * Props for the CometChatFullScreenViewer component.
  */
 interface FullScreenViewerProps {
-    /**
-     * @deprecated
-     *  Use 'url' prop instead. This prop is deprecated and will be removed in future versions.
-     * */
-    URL?: string;
     /**
      * URL of the image to be displayed
      */
@@ -20,6 +16,10 @@ interface FullScreenViewerProps {
      * The media message containing the image.
      */
     message: CometChat.MediaMessage;
+    /**
+     * Format for timestamps associated with images in the message list.
+     */
+    imageSentAtDateTimeFormat?: CalendarObject;
 }
 /**
  * CometChatFullScreenViewer is a full-screen image viewer component with a customizable close button.

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

@@ -1,7 +1,9 @@
 import { CometChatUIKitCalls } from "../../CometChatUIKit/CometChatCalls";
+import { CalendarObject } from "../../utils/CalendarObject";
 import { CallButtonConfiguration } from "./CallButtonConfiguration";
 export declare class CallingConfiguration {
     groupCallSettingsBuilder?: (message: CometChat.CustomMessage) => typeof CometChatUIKitCalls.CallSettingsBuilder;
     callButtonConfiguration?: CallButtonConfiguration;
+    callInitiatedDateTimeFormat?: CalendarObject;
     constructor(configuration?: CallingConfiguration);
 }

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

@@ -3,6 +3,7 @@ import { DataSourceDecorator } from "../../utils/DataSourceDecorator";
 import { CallingConfiguration } from "./CallingConfiguration";
 import { MessageBubbleAlignment } from "../../Enums/Enums";
 import { CometChatMessageTemplate } from "../../modals";
+import { CalendarObject } from "../../utils/CalendarObject";
 export declare class CallingExtensionDecorator extends DataSourceDecorator {
     loggedInUser: CometChat.User | null;
     configuration?: CallingConfiguration;
@@ -18,6 +19,11 @@ export declare class CallingExtensionDecorator extends DataSourceDecorator {
     getDirectCallTemplate(): CometChatMessageTemplate;
     getDefaultCallTemplate(): CometChatMessageTemplate[];
     getSessionId(_message: CometChat.CustomMessage): any;
+    /**
+   *  Function for displaying the call initiation time in call logs.
+   * @returns CalendarObject
+    */
+    getDateFormat(): CalendarObject;
     getDirectCallMessageBubble(_message: CometChat.CustomMessage, _alignment: MessageBubbleAlignment): import("react/jsx-runtime").JSX.Element;
     startDirectCall(sessionId: string, message: CometChat.CustomMessage): void;
     getCallActionMessage(_message: CometChat.Call): string;

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { DatePatterns } from "../../../Enums/Enums";
+import { CalendarObject } from "../../../utils/CalendarObject";
 interface CallLogsProps {
     /**
      * Object representing the active call that is currently selected.
@@ -11,9 +11,9 @@ interface CallLogsProps {
      */
     callLogRequestBuilder?: any;
     /**
-     * Specifies the date format for rendering dates in the call logs.
-     */
-    datePattern?: DatePatterns;
+    *  Format for displaying the call initiation time in call logs.
+    */
+    callInitiatedDateTimeFormat?: CalendarObject;
     /**
      * Callback function triggered when a call log list item is clicked.
      * @returns void

package/dist/types/components/Calling/Utils/utils.d.ts

@@ -1,7 +1,6 @@
 export declare function isSentByMe(call: CometChat.Call | any, loggedInUser: CometChat.User): boolean;
 export declare function isMissedCall(call: CometChat.Call, loggedInUser: CometChat.User): boolean;
 export declare function verifyCallUser(call: any, loggedInUser: CometChat.User): any;
-export declare function getCallStatusWithType(call: any, loggedInUser: CometChat.User, includeType?: boolean): string;
 export declare function convertMinutesToHoursMinutesSeconds(minutes: number): string;
 export declare function convertSecondsToHoursMinutesSeconds(seconds: number): string;
 export declare function downloadRecordingFromURL(url: string): void;

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

@@ -1,7 +1,8 @@
 import { JSX } from "react";
 import { CometChatTextFormatter } from "../../formatters/CometChatFormatters/CometChatTextFormatter";
-import { DatePatterns, SelectionMode, States } from "../../Enums/Enums";
+import { SelectionMode, States } from "../../Enums/Enums";
 import { CometChatOption } from "../../modals";
+import { CalendarObject } from "../../utils/CalendarObject";
 interface ConversationsProps {
     /**
      * Disables the display of message read receipts.
@@ -63,9 +64,9 @@ interface ConversationsProps {
      */
     options?: ((conversation: CometChat.Conversation) => CometChatOption[]) | null;
     /**
-     * Specifies the format for displaying dates within the component.
+     * Format for displaying the timestamp of the last message in the conversations list.
      */
-    datePattern?: DatePatterns;
+    lastMessageDateTimeFormat?: CalendarObject;
     /**
      * Disables sound for incoming messages.
      *

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

@@ -1,4 +1,5 @@
 import { JSX } from "react";
+import { CalendarObject } from "../../utils/CalendarObject";
 /**
  * Interface for the props accepted by the CometChatMessageHeader component.
  */
@@ -84,6 +85,10 @@ interface MessageHeaderProps {
      * A function that renders a JSX element to display the trailing view.
      */
     trailingView?: JSX.Element;
+    /**
+    * Format for displaying the "last active" timestamp in the message header.
+    */
+    lastActiveAtDateTimeFormat?: CalendarObject;
 }
 /** Functional component for rendering the CometChatMessageHeader */
 export declare const CometChatMessageHeader: (props: MessageHeaderProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,3 +1,4 @@
+import { CalendarObject } from "../../utils/CalendarObject";
 interface MessageInformationProps {
     message: CometChat.BaseMessage;
     onClose?: () => void;
@@ -6,6 +7,14 @@ interface MessageInformationProps {
      * @param error - CometChatException object representing the error.
      */
     onError?: ((error: CometChat.CometChatException) => void) | null;
+    /**
+    * Format for timestamps displayed in message details (e.g., delivery or read time).
+    */
+    messageInfoDateTimeFormat?: CalendarObject;
+    /**
+     * Format for the timestamp displayed next to messages.
+     */
+    messageSentAtDateTimeFormat?: CalendarObject;
 }
 declare const CometChatMessageInformation: (props: MessageInformationProps) => import("react/jsx-runtime").JSX.Element;
 export { CometChatMessageInformation };

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

@@ -1,7 +1,8 @@
 /// <reference types="react" />
 import { CometChatMessageTemplate } from "../../modals";
-import { DatePatterns, MessageListAlignment } from "../../Enums/Enums";
+import { MessageListAlignment } from "../../Enums/Enums";
 import { CometChatTextFormatter } from "../../formatters/CometChatFormatters/CometChatTextFormatter";
+import { CalendarObject } from "../../utils/CalendarObject";
 /**
  * Props for the MessageList component.
  */
@@ -119,14 +120,6 @@ interface MessageListProps {
      * @default MessageListAlignment.standard
      */
     messageAlignment?: MessageListAlignment;
-    /**
-     * User-defined time format for displaying message timestamps.
-     */
-    timePattern?: DatePatterns;
-    /**
-     * User-defined date format for displaying message timestamps.
-     */
-    datePattern?: DatePatterns;
     /**
      * Automatically scrolls the message list to the bottom when a new message arrives.
      * @default false
@@ -205,6 +198,22 @@ interface MessageListProps {
      * A custom footer view component for the message list.
      */
     footerView?: JSX.Element;
+    /**
+   * Format for the date separators in the message list.
+   */
+    separatorDateTimeFormat?: CalendarObject;
+    /**
+    * Format for sticky date headers displayed in the message list.
+    */
+    stickyDateTimeFormat?: CalendarObject;
+    /**
+   * Format for the timestamp displayed next to messages.
+   */
+    messageSentAtDateTimeFormat?: CalendarObject;
+    /**
+   * Format for timestamps displayed in message details (e.g., delivery or read time).
+   */
+    messageInfoDateTimeFormat?: CalendarObject;
 }
 declare const CometChatMessageList: (props: MessageListProps) => import("react/jsx-runtime").JSX.Element;
 export { CometChatMessageList };