@cometchat/chat-uikit-react 6.3.6 → 6.3.8

package/dist/styles/CometChatConversations.css

@@ -259,13 +259,13 @@ box-sizing: border-box;
 .cometchat-conversations__trailing-view {
   display: flex;
   flex-direction: column;
-  gap: var(--cometchat-padding-1,4px);
+  gap: var(--cometchat-padding-1, 4px);
 }
 
 .cometchat-conversations__trailing-view-badge {
   display: flex;
   justify-content: flex-end;
-  gap: var(--cometchat-padding-1,4px);
+  gap: var(--cometchat-padding-1, 4px);
 }
 
 .cometchat-conversations__trailing-view-badge-count {

package/dist/styles/CometChatEditPreview.css

@@ -46,12 +46,14 @@
     font: var(--cometchat-font-body-regular);
     color: var(--cometchat-text-color-primary);
     font-style: normal;
+    margin: 0;
 }
 
 /*
    Subtitle text inside the edit preview, containing the actual text being edited.
 */
 .cometchat-edit-preview__subtitle {
+    margin: 0;
     font-style: normal;
     text-align: left;
     color: var(--cometchat-text-color-secondary);

package/dist/styles/CometChatMessageBubble.css

@@ -16,6 +16,18 @@
     width: 100%;
     margin-bottom: 5px;
 }
+
+.cometchat-message-bubble .cometchat-menu-list__sub-menu-list{
+    height: auto;
+    max-height: 216px;
+    overflow: auto;
+}
+
+.cometchat-message-bubble .cometchat-menu-list__sub-menu-list::-webkit-scrollbar,
+.cometchat-message-bubble .cometchat-menu-list__sub-menu-list::-webkit-scrollbar-thumb {
+    display: none;
+}
+
 .cometchat-message-bubble .cometchat-reactions{
     width: 100%;
     margin-top: -4px;

package/dist/styles/CometChatMessageList.css

@@ -753,6 +753,27 @@
     max-height: 100%;
 }
 
+.cometchat-message-list__new-message-divider {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--cometchat-spacing-4);
+    width: 100%;
+    padding: var(--cometchat-margin-4) var(--cometchat-spacing-7);
+}
+
+.cometchat-message-list__new-message-divider span{
+    text-wrap: nowrap;
+    font: var(--cometchat-font-body-medium);
+    color: var(--cometchat-error-color);
+}
+
+.cometchat-message-list__new-message-divider div {
+    width: 100%;
+    height: 1px;
+    background-color: var(--cometchat-error-color);
+}
+
 @keyframes backgroundFade {
     0% { background-color: var(--cometchat-extended-primary-color-200); }
     50% { background-color: var(--cometchat-extended-primary-color-100); }

package/dist/styles/CometChatModerationView.css

@@ -22,4 +22,5 @@
     color: var(--cometchat-error-color, #F44649);
     text-align: left;
     font: var(--cometchat-font-body-regular);
+    margin: 0;
 }

package/dist/styles/CometChatThreadHeader.css

@@ -164,4 +164,8 @@
     height: 1px;
     background: var(--cometchat-border-color-default, #E8E8E8);
     flex: 1;
+}
+
+.cometchat-thread-header__message .cometchat-message-preview {
+    cursor: not-allowed;
 }

package/dist/styles/CometChatUsers.css

@@ -7,6 +7,28 @@
   gap: 0px;
   flex-shrink: 0;
   background: var(--cometchat-background-color-01, #FFF);
+  position: relative;
+  /* Prevent native text selection highlight when using Shift+Click to select user ranges */
+  user-select: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+}
+
+/* Allow text selection in input fields */
+.cometchat-users input,
+.cometchat-users .cometchat-search-bar__input {
+  user-select: text;
+  -webkit-user-select: text;
+  -moz-user-select: text;
+  -ms-user-select: text;
+}
+
+/* Hide selection highlight only for list items (not inputs) */
+.cometchat-users__list-item::selection,
+.cometchat-users__list-item *::selection {
+  background: transparent;
+  color: inherit;
 }
 
 .cometchat-users__empty-state-view {
@@ -132,6 +154,10 @@
 
 .cometchat-users__list-item {
   cursor: pointer;
+  user-select: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
 }
 
 .cometchat-users__list-item .cometchat-avatar {
@@ -157,4 +183,131 @@
   100% {
     background-position: 468px 0;
   }
+}
+
+.cometchat-users__selected-preview {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  width: 100%;
+  max-height: 30vh;
+  padding-top: var(--cometchat-padding-4, 16px);
+  padding-left: var(--cometchat-padding-4, 16px);
+  padding-right: var(--cometchat-padding-4, 16px);
+  padding-bottom: 0;
+  background: var(--cometchat-background-color-01, #FFF);
+  border-top: 1px solid var(--cometchat-border-color-light, #F5F5F5);
+  box-sizing: border-box;
+  overflow-y: auto;
+  overflow-x: hidden;
+  z-index: 10;
+}
+
+/* Hide scrollbar when showScrollbar is false */
+.cometchat-users__selected-preview-hide-scrollbar {
+  scrollbar-width: none; /* Firefox */
+  -ms-overflow-style: none; /* IE and Edge */
+}
+
+.cometchat-users__selected-preview-hide-scrollbar::-webkit-scrollbar {
+  display: none; /* Chrome, Safari, Opera */
+}
+
+.cometchat-users__selected-preview-container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--cometchat-padding-2, 8px);
+  max-height: calc(2 * (32px + var(--cometchat-padding-2, 8px)));
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+/* Hide scrollbar when showScrollbar is false */
+.cometchat-users__selected-preview-container-hide-scrollbar {
+  scrollbar-width: none; /* Firefox */
+  -ms-overflow-style: none; /* IE and Edge */
+}
+
+.cometchat-users__selected-preview-container-hide-scrollbar::-webkit-scrollbar {
+  display: none; /* Chrome, Safari, Opera */
+}
+
+.cometchat-users__selected-preview-chip {
+  display: flex;
+  align-items: center;
+  gap: var(--cometchat-padding-2, 8px);
+  border: 1px solid var(--cometchat-border-color-default, #E8E8E8);
+  padding: var(--cometchat-padding-1, 4px);
+  background: var(--cometchat-background-color-03, #F5F5F5);
+  border-radius: var(--cometchat-radius-max, 1000px);
+  height: 32px;
+  box-sizing: border-box;
+  flex-shrink: 0;
+}
+
+.cometchat-users__selected-preview-chip .cometchat-avatar {
+  width: 24px;
+  height: 24px;
+  flex-shrink: 0;
+}
+.cometchat-users__selected-preview-chip .cometchat-avatar .cometchat-avatar__text {
+  font: var( --cometchat-font-caption1-bold);
+}
+
+.cometchat-users__selected-preview-chip-name {
+  color: var(--cometchat-text-color-primary, #141414);
+  font: var(--cometchat-font-body-medium);
+  max-width: 48px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.cometchat-users__selected-preview-chip-close {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  padding: 0;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  flex-shrink: 0;
+}
+
+.cometchat-users__selected-preview-chip-close img {
+  width: 16px;
+  height: 16px;
+  opacity: 0.6;
+  transition: opacity 0.2s;
+}
+
+.cometchat-users__selected-preview-chip-close:hover img {
+  opacity: 1;
+}
+
+.cometchat-users__selected-preview-chip-close-button {
+  border: none;
+  background: none;
+  cursor: pointer;
+  user-select: none;
+  flex-shrink: 0;
+}
+
+.cometchat-users__selected-preview-chip-close-button .cometchat-button {
+  background: transparent;
+  border: none;
+  border-radius: 0;
+  padding: 0;
+  margin: 0;
+  height: fit-content;
+  width: fit-content;
+}
+
+.cometchat-users__selected-preview-chip-close-button .cometchat-button .cometchat-button__icon {
+  height: 24px;
+  width: 24px;
+  background: var(--cometchat-icon-color-secondary);
 }

package/dist/styles/StickersKeyboard.css

@@ -30,7 +30,7 @@
 
 
 .cometchat-sticker-keyboard__tab{
-  padding: var(--cometchat-padding-1,4px);
+  padding: var(--cometchat-padding-1, 4px);
 }
 .cometchat-sticker-keyboard__tab-active{
   border-bottom: 2px solid var(--cometchat-primary-color, #6852D6);

package/dist/styles/components/CometChatConversations.css

@@ -259,13 +259,13 @@ box-sizing: border-box;
 .cometchat-conversations__trailing-view {
   display: flex;
   flex-direction: column;
-  gap: var(--cometchat-padding-1,4px);
+  gap: var(--cometchat-padding-1, 4px);
 }
 
 .cometchat-conversations__trailing-view-badge {
   display: flex;
   justify-content: flex-end;
-  gap: var(--cometchat-padding-1,4px);
+  gap: var(--cometchat-padding-1, 4px);
 }
 
 .cometchat-conversations__trailing-view-badge-count {

package/dist/styles/components/CometChatEditPreview.css

@@ -46,12 +46,14 @@
     font: var(--cometchat-font-body-regular);
     color: var(--cometchat-text-color-primary);
     font-style: normal;
+    margin: 0;
 }
 
 /*
    Subtitle text inside the edit preview, containing the actual text being edited.
 */
 .cometchat-edit-preview__subtitle {
+    margin: 0;
     font-style: normal;
     text-align: left;
     color: var(--cometchat-text-color-secondary);

package/dist/styles/components/CometChatMessageBubble.css

@@ -16,6 +16,18 @@
     width: 100%;
     margin-bottom: 5px;
 }
+
+.cometchat-message-bubble .cometchat-menu-list__sub-menu-list{
+    height: auto;
+    max-height: 216px;
+    overflow: auto;
+}
+
+.cometchat-message-bubble .cometchat-menu-list__sub-menu-list::-webkit-scrollbar,
+.cometchat-message-bubble .cometchat-menu-list__sub-menu-list::-webkit-scrollbar-thumb {
+    display: none;
+}
+
 .cometchat-message-bubble .cometchat-reactions{
     width: 100%;
     margin-top: -4px;

package/dist/styles/components/CometChatMessageList.css

@@ -753,6 +753,27 @@
     max-height: 100%;
 }
 
+.cometchat-message-list__new-message-divider {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--cometchat-spacing-4);
+    width: 100%;
+    padding: var(--cometchat-margin-4) var(--cometchat-spacing-7);
+}
+
+.cometchat-message-list__new-message-divider span{
+    text-wrap: nowrap;
+    font: var(--cometchat-font-body-medium);
+    color: var(--cometchat-error-color);
+}
+
+.cometchat-message-list__new-message-divider div {
+    width: 100%;
+    height: 1px;
+    background-color: var(--cometchat-error-color);
+}
+
 @keyframes backgroundFade {
     0% { background-color: var(--cometchat-extended-primary-color-200); }
     50% { background-color: var(--cometchat-extended-primary-color-100); }

package/dist/styles/components/CometChatModerationView.css

@@ -22,4 +22,5 @@
     color: var(--cometchat-error-color, #F44649);
     text-align: left;
     font: var(--cometchat-font-body-regular);
+    margin: 0;
 }

package/dist/styles/components/CometChatThreadHeader.css

@@ -164,4 +164,8 @@
     height: 1px;
     background: var(--cometchat-border-color-default, #E8E8E8);
     flex: 1;
+}
+
+.cometchat-thread-header__message .cometchat-message-preview {
+    cursor: not-allowed;
 }

package/dist/styles/components/CometChatUsers.css

@@ -7,6 +7,28 @@
   gap: 0px;
   flex-shrink: 0;
   background: var(--cometchat-background-color-01, #FFF);
+  position: relative;
+  /* Prevent native text selection highlight when using Shift+Click to select user ranges */
+  user-select: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+}
+
+/* Allow text selection in input fields */
+.cometchat-users input,
+.cometchat-users .cometchat-search-bar__input {
+  user-select: text;
+  -webkit-user-select: text;
+  -moz-user-select: text;
+  -ms-user-select: text;
+}
+
+/* Hide selection highlight only for list items (not inputs) */
+.cometchat-users__list-item::selection,
+.cometchat-users__list-item *::selection {
+  background: transparent;
+  color: inherit;
 }
 
 .cometchat-users__empty-state-view {
@@ -132,6 +154,10 @@
 
 .cometchat-users__list-item {
   cursor: pointer;
+  user-select: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
 }
 
 .cometchat-users__list-item .cometchat-avatar {
@@ -157,4 +183,131 @@
   100% {
     background-position: 468px 0;
   }
+}
+
+.cometchat-users__selected-preview {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  width: 100%;
+  max-height: 30vh;
+  padding-top: var(--cometchat-padding-4, 16px);
+  padding-left: var(--cometchat-padding-4, 16px);
+  padding-right: var(--cometchat-padding-4, 16px);
+  padding-bottom: 0;
+  background: var(--cometchat-background-color-01, #FFF);
+  border-top: 1px solid var(--cometchat-border-color-light, #F5F5F5);
+  box-sizing: border-box;
+  overflow-y: auto;
+  overflow-x: hidden;
+  z-index: 10;
+}
+
+/* Hide scrollbar when showScrollbar is false */
+.cometchat-users__selected-preview-hide-scrollbar {
+  scrollbar-width: none; /* Firefox */
+  -ms-overflow-style: none; /* IE and Edge */
+}
+
+.cometchat-users__selected-preview-hide-scrollbar::-webkit-scrollbar {
+  display: none; /* Chrome, Safari, Opera */
+}
+
+.cometchat-users__selected-preview-container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--cometchat-padding-2, 8px);
+  max-height: calc(2 * (32px + var(--cometchat-padding-2, 8px)));
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+/* Hide scrollbar when showScrollbar is false */
+.cometchat-users__selected-preview-container-hide-scrollbar {
+  scrollbar-width: none; /* Firefox */
+  -ms-overflow-style: none; /* IE and Edge */
+}
+
+.cometchat-users__selected-preview-container-hide-scrollbar::-webkit-scrollbar {
+  display: none; /* Chrome, Safari, Opera */
+}
+
+.cometchat-users__selected-preview-chip {
+  display: flex;
+  align-items: center;
+  gap: var(--cometchat-padding-2, 8px);
+  border: 1px solid var(--cometchat-border-color-default, #E8E8E8);
+  padding: var(--cometchat-padding-1, 4px);
+  background: var(--cometchat-background-color-03, #F5F5F5);
+  border-radius: var(--cometchat-radius-max, 1000px);
+  height: 32px;
+  box-sizing: border-box;
+  flex-shrink: 0;
+}
+
+.cometchat-users__selected-preview-chip .cometchat-avatar {
+  width: 24px;
+  height: 24px;
+  flex-shrink: 0;
+}
+.cometchat-users__selected-preview-chip .cometchat-avatar .cometchat-avatar__text {
+  font: var( --cometchat-font-caption1-bold);
+}
+
+.cometchat-users__selected-preview-chip-name {
+  color: var(--cometchat-text-color-primary, #141414);
+  font: var(--cometchat-font-body-medium);
+  max-width: 48px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.cometchat-users__selected-preview-chip-close {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  padding: 0;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  flex-shrink: 0;
+}
+
+.cometchat-users__selected-preview-chip-close img {
+  width: 16px;
+  height: 16px;
+  opacity: 0.6;
+  transition: opacity 0.2s;
+}
+
+.cometchat-users__selected-preview-chip-close:hover img {
+  opacity: 1;
+}
+
+.cometchat-users__selected-preview-chip-close-button {
+  border: none;
+  background: none;
+  cursor: pointer;
+  user-select: none;
+  flex-shrink: 0;
+}
+
+.cometchat-users__selected-preview-chip-close-button .cometchat-button {
+  background: transparent;
+  border: none;
+  border-radius: 0;
+  padding: 0;
+  margin: 0;
+  height: fit-content;
+  width: fit-content;
+}
+
+.cometchat-users__selected-preview-chip-close-button .cometchat-button .cometchat-button__icon {
+  height: 24px;
+  width: 24px;
+  background: var(--cometchat-icon-color-secondary);
 }

package/dist/styles/components/StickersKeyboard.css

@@ -30,7 +30,7 @@
 
 
 .cometchat-sticker-keyboard__tab{
-  padding: var(--cometchat-padding-1,4px);
+  padding: var(--cometchat-padding-1, 4px);
 }
 .cometchat-sticker-keyboard__tab-active{
   border-bottom: 2px solid var(--cometchat-primary-color, #6852D6);

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

@@ -5,6 +5,8 @@ interface CheckboxProps {
     onCheckBoxValueChanged: (input: {
         checked: boolean;
         labelText: string | undefined;
+        shiftKey?: boolean;
+        metaKey?: boolean;
     }) => void;
 }
 declare const CometChatCheckbox: (props: CheckboxProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/BaseComponents/CometChatCheckbox/useCometChatCheckbox.d.ts

@@ -1,11 +1,14 @@
-import { ChangeEvent } from "react";
+import { ChangeEvent, MouseEvent } from "react";
 export declare const useCometChatCheckbox: ({ checked, onCheckBoxValueChanged }: {
     checked?: boolean | undefined;
     onCheckBoxValueChanged?: ((input: {
         checked: boolean;
         labelText: string | undefined;
+        shiftKey?: boolean;
+        metaKey?: boolean;
     }) => void) | undefined;
 }) => {
     isChecked: boolean;
     updateCheckbox: (event: ChangeEvent<HTMLInputElement>) => void;
+    handleClick: (event: MouseEvent<HTMLInputElement>) => void;
 };

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

@@ -6,6 +6,8 @@ interface ListItemProps {
     title: string;
     onListItemClicked?: (input: {
         id?: string;
+        shiftKey?: boolean;
+        metaKey?: boolean;
     }) => void;
     menuView?: ReactNode;
     subtitleView?: ReactNode;

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

@@ -3,6 +3,8 @@ interface ICometChatListItem {
     id?: string;
     onListItemClicked?: (input: {
         id: string;
+        shiftKey?: boolean;
+        metaKey?: boolean;
     }) => void;
     menuRef: React.RefObject<HTMLDivElement | null>;
 }

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

@@ -224,6 +224,9 @@ export type Action = {
 } | {
     type: "resetUnreadCountAndSetReadAtIfLastMessage";
     message: CometChat.BaseMessage;
+} | {
+    type: "resetUnreadCount";
+    conversation: CometChat.Conversation;
 } | {
     type: "setLastMessageReadOrDeliveredAt";
     updateReadAt: boolean;
@@ -234,6 +237,9 @@ export type Action = {
 } | {
     type: "setIsFirstReload";
     isFirstReload: boolean;
+} | {
+    type: "updateConversation";
+    conversation: CometChat.Conversation;
 };
 /**
  * Renders a scrollable list of conversations that has been created in a CometChat app

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

@@ -87,6 +87,11 @@ interface MessageListProps {
      * @default false
      */
     hideMessageInfoOption?: boolean;
+    /**
+     * Shows the option to mark messages as unread.
+     * @default false
+     */
+    showMarkAsUnreadOption?: boolean;
     /**
      * Hides avatars for messages.
      * @default false
@@ -97,6 +102,11 @@ interface MessageListProps {
      * @default false
      */
     hideGroupActionMessages?: boolean;
+    /**
+     * If set to true, the message list will start from unread messages.
+     * @default false
+     */
+    startFromUnreadMessages?: boolean;
     /**
      * Unique identifier of the parent message for displaying threaded conversations.
      */
@@ -137,7 +147,7 @@ interface MessageListProps {
     scrollToBottomOnNewMessages?: boolean;
     /**
      * Specifies how many message options are visible in the main menu by default.
-     * @default 2
+     * @default 3
      */
     quickOptionsCount?: number;
     /**

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

@@ -32,6 +32,12 @@ export declare class MessageListManager {
     * @returns {Promise}
     */
     fetchPreviousMessages: () => Promise<CometChat.BaseMessage[] | []> | undefined;
+    /**
+     * Function to get the limit set in the messagesRequestBuilder.
+     *
+     * @returns {number | undefined}
+     */
+    getLimit: () => number | undefined;
     /**
      * Function to attach the group and call listeners for a particular user/group. This listener is attached when the chat is opened and is removed once the chat is closed or when switching to a new chat, where it creates a new listener for the particular chat.
      *

package/dist/types/components/CometChatSearch/useCometChatSearchConversationsList.d.ts

@@ -184,6 +184,9 @@ export type Action = {
 } | {
     type: "resetUnreadCountAndSetReadAtIfLastMessage";
     message: CometChat.BaseMessage;
+} | {
+    type: "resetUnreadCount";
+    conversation: CometChat.Conversation;
 } | {
     type: "setLastMessageReadOrDeliveredAt";
     updateReadAt: boolean;
@@ -191,6 +194,9 @@ export type Action = {
 } | {
     type: "setHasMoreResults";
     hasMoreResults: boolean;
+} | {
+    type: "updateConversation";
+    conversation: CometChat.Conversation;
 };
 /**
  * Hook for managing and rendering a list of conversations in the search component