Updated UIKit version to 6.0.0

Author: raj-dubey1

README.md

@@ -12,7 +12,7 @@ The CometChat React UI Kit provides a pre-built user interface kit that develope
 
 ## 🚀 Explore the Sample App!
 
-Dive straight into our [Sample App](https://github.com/cometchat/cometchat-uikit-react/blob/v5/sample-app/README.md#installation) to see CometChat UI Kit in action! Whether you're building a messaging app or enhancing your existing project, this sample app showcases the full potential of our React UI components.  
+Dive straight into our [Sample App](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/README.md#installation) to see CometChat UI Kit in action! Whether you're building a messaging app or enhancing your existing project, this sample app showcases the full potential of our React UI components.  
 
 ## Prerequisites
 
@@ -26,8 +26,8 @@ To set up CometChat React UI Kit and utilize CometChat for your chat and calls f
 - Register at the [CometChat Dashboard](https://app.cometchat.com/) to create an account.
 - After registering, log into your CometChat account and create a new app. Once created, CometChat will generate an Auth Key and App ID for you. Keep these credentials secure as you'll need them later.
 - Check the [Key Concepts](https://www.cometchat.com/docs/fundamentals/key-concepts) to understand the basic components of CometChat.
-- Refer to the [Integration Steps](https://www.cometchat.com/docs/ui-kit/react/integration) in our documentation to integrate the UI Kit into your React app.
+- Refer to the [Integration Steps](https://www.cometchat.com/docs/ui-kit/react/v6/integration) in our documentation to integrate the UI Kit into your React app.
 
 ## Help and Support
 
-For issues running the project or integrating with our UI Kits, consult our [documentation](https://www.cometchat.com/docs/ui-kit/react/integration) or create a [support ticket](https://help.cometchat.com/hc/en-us) or seek real-time support via the [CometChat Dashboard](https://app.cometchat.com/).
+For issues running the project or integrating with our UI Kits, consult our [documentation](https://www.cometchat.com/docs/ui-kit/react/v6/integration) or create a [support ticket](https://help.cometchat.com/hc/en-us) or seek real-time support via the [CometChat Dashboard](https://app.cometchat.com/).

SUPPORT.md

@@ -1,3 +1,3 @@
 # Help and Support
 
-For issues integrating our UI Kits, consult our [documentation](https://www.cometchat.com/docs/ui-kit/react/integration) or create a [support ticket](https://help.cometchat.com/hc/en-us) or seek real-time support via the [CometChat Dashboard](http://app.cometchat.com/).
+For issues integrating our UI Kits, consult our [documentation](https://www.cometchat.com/docs/ui-kit/react/v6/integration) or create a [support ticket](https://help.cometchat.com/hc/en-us) or seek real-time support via the [CometChat Dashboard](http://app.cometchat.com/).

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cometchat/chat-uikit-react",
-  "version": "5.0.3",
+  "version": "6.0.0",
   "description": "Ready-to-use Chat UI Components for React(Javascript/Web)",
   "author": "CometChat",
   "dependencies": {
@@ -41,7 +41,7 @@
     "webpack-dev-server": "^4.7.4"
   },
   "homepage": "https://www.cometchat.com",
-  "repository": "https://github.com/cometchat/cometchat-uikit-react",
+  "repository": "https://github.com/cometchat/cometchat-uikit-react/tree/v6",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "keywords": [

sample-app/CHANGELOG.md

@@ -1,65 +1,17 @@
-## [5.0.3] - 13-02-2025
+## [6.0.0] - 14-02-2025  
 
 ## New
-- None
+- Added support for new languages: Italian, Japanese, Korean, Turkish, and Dutch.
+- Added date localization support using `CometChatLocalize` for consistent datetime formatting.
 
 ## Enhancements
-- None
-
-## Fixes
-- Fixed a visibility issue where the `Unblock` button was displayed to the logged-in user even when they were blocked by the other user.
-
-## [5.0.2] - 30-01-2025
-
-## New
-- None
-
-## Enhancements
-- None
+- Refactored localization handling to align with the updated `CometChatLocalization` class.
 
 ## Fixes
-- Fixed an issue where clicking on a mentioned user did not redirect to their message screen.
-- Fixed an issue where a newly added group member's avatar was not displayed in the Group Member View.
-- Resolved an issue where the group details component re-rendered unexpectedly after each operation.
-- Corrected the position of the profile info popup in mobile view to improve the user experience on smaller screens.
-
-## [5.0.1] - 13-01-2025
-
-#### New
-- None  
-
-#### Enhancements
 - None  
 
-#### Fixes
-- Removed unused dependencies to improve application performance and reduce build size.  
-- Adjusted the minimum width of the sidebar and tabs to ensure proper layout rendering when the sample app is displayed within fixed-width containers.  
-- Resolved a flickering issue on the **Banned Member** page when clicking the "Banned Member" option, ensuring a smoother user experience.  
-
-## [5.0.0] - 03-01-2025
-
-### New
+## Removals
 - None
 
-### Enhancements
-- Updated CometChat React UI Kit version to v5.0.0
-
-### Fixes
-- Fixed an issue where the empty state in the Group Members component was not fully visible.
-- Fixed an issue where the Transfer Ownership prompt incorrectly appeared when attempting to leave a group with only one member.
-- Fixed an issue where the selected call log was not highlighted as active in the call logs list.
-- Fixed an issue where the unban option was not visible in the Banned Members View.
-- Fixed an issue where the avatar in Outgoing call was not proper when a call is initiated via Call log detail.
-
-## [5.0.0-beta2] - 10-12-2024
-
-### New
-- Introduced a feature to seamlessly open a user's conversation by clicking on their mention.
-
-### Enhancements
-- Updated the incoming call icon in Call History component.
-- Refined the group listing in new conversations to display only the groups the logged-in user is a member of.
-
-### Fixes
-- Resolved an issue where the Details component did not open with the correct width in iPad browsers.
-- Fixed an issue where unblocking a user from the composer did not update the "Unblock User" menu to "Block User" in the user details.
+## Deprecations
+- None 

sample-app/README.md

@@ -4,7 +4,7 @@
 
 # React Sample App by CometChat
 
-This is a reference application showcasing the integration of [CometChat's React UI Kit](https://www.cometchat.com/docs/ui-kit/react/overview) within a React framework. It provides developers with examples of implementing real-time messaging and voice and video calling features in their own React-based applications.
+This is a reference application showcasing the integration of [CometChat's React UI Kit](https://www.cometchat.com/docs/ui-kit/react/v6/overview) within a React framework. It provides developers with examples of implementing real-time messaging and voice and video calling features in their own React-based applications.
 
 <div style="display: flex; align-items: center; justify-content: center">
    <img src="../screenshots/sample_app_overview.png" />
@@ -27,23 +27,26 @@ This is a reference application showcasing the integration of [CometChat's React
      git clone https://github.com/cometchat/cometchat-uikit-react.git
    ```
 
-2. Navigate to the cloned directory:
+2. Checkout v6 branch:
    ```sh
-     cd cometchat-uikit-react/sample-app
+     git checkout v6
    ```
 
-3. Install dependencies:
+3. Navigate to the cloned directory:
+   ```sh
+     cd cometchat-uikit-react/sample-app
+   ```
+4. Install dependencies:
    ```sh
      npm install
    ```
-   
-4. `[Optional]` Enter your CometChat _`App ID`_, _`Region`_, and _`Auth Key`_ in the [sample-app/src/AppConstants.ts](https://github.com/cometchat/cometchat-sample-app-react/blob/v5/sample-app/src/AppConstants.ts) file:https://github.com/cometchat/cometchat-uikit-react/blob/2dba5e2e781db6d2f20c59803ff7f8cef4e7c187/sample-app/src/AppConstants.ts#L1-L5
+5. `[Optional]` Enter your CometChat _`App ID`_, _`Region`_, and _`Auth Key`_ in the [sample-app/src/AppConstants.ts](https://github.com/cometchat/cometchat-sample-app-react/blob/v6/sample-app/src/AppConstants.ts) file:https://github.com/cometchat/cometchat-uikit-react/blob/2dba5e2e781db6d2f20c59803ff7f8cef4e7c187/sample-app/src/AppConstants.ts#L1-L5
 
-5. Run the project locally to see all CometChat features in action:
+6. Run the project locally to see all CometChat features in action:
    ```
      npm start
    ```
 
 ## Help and Support
 
-For issues running the project or integrating with our UI Kits, consult our [documentation](https://www.cometchat.com/docs/ui-kit/react/integration) or create a [support ticket](https://help.cometchat.com/hc/en-us) or seek real-time support via the [CometChat Dashboard](http://app.cometchat.com/).
+For issues running the project or integrating with our UI Kits, consult our [documentation](https://www.cometchat.com/docs/ui-kit/react/v6/integration) or create a [support ticket](https://help.cometchat.com/hc/en-us) or seek real-time support via the [CometChat Dashboard](http://app.cometchat.com/).

sample-app/package.json

@@ -1,13 +1,13 @@
 {
   "name": "sample-app",
-  "version": "5.0.3",
-  "description": "React App made using CometChat React v5 UI Kit.",
+  "version": "6.0.0",
+  "description": "React App made using CometChat React v6 UI Kit.",
   "author": "CometChat",
   "private": true,
   "dependencies": {
     "@cometchat/calls-sdk-javascript": "^4.0.11",
     "@cometchat/chat-sdk-javascript": "^4.0.10",
-    "@cometchat/chat-uikit-react": "~5.0.3",
+    "@cometchat/chat-uikit-react": "~6.0.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-router-dom": "6.14.2",
@@ -66,7 +66,7 @@
     ]
   },
   "homepage": "https://www.cometchat.com",
-  "repository": "https://github.com/cometchat/cometchat-uikit-react",
+  "repository": "https://github.com/cometchat/cometchat-uikit-react/tree/v6",
   "main": "src/index.tsx",
   "keywords": [
     "CometChat",

sample-app/screenshots/sample_app_overview.png

@@ -7,7 +7,7 @@ import SearchIcon from "../../assets/search.svg";
 import SpinnerIcon from "../../assets/Spinner.svg";
 import backbutton from "../../assets/arrow_back.svg"
 import closeButton from "../../assets/close2x.svg";
-import { CometChatButton, CometChatGroupEvents, CometChatOption, CometChatUIKitConstants, CometChatUIKitUtility, CometChatUsers, SelectionMode, localize, useCometChatErrorHandler, useRefSync } from "@cometchat/chat-uikit-react";
+import { CometChatButton, CometChatGroupEvents, CometChatOption, CometChatUIKitConstants, CometChatUIKitUtility, CometChatUsers, SelectionMode, getLocalizedString, useCometChatErrorHandler, useRefSync } from "@cometchat/chat-uikit-react";
 
 interface IAddMembersProps {
     /**
@@ -29,12 +29,6 @@ interface IAddMembersProps {
      * Function to call when the back button is clicked
      */
     onBack?: () => void,
-    /**
-     * Title of the component
-     *
-     * @defaultValue `localize("ADD_MEMBERS")`
-    */
-    title?: string,
     /**
      * Hide the search bar
      *
@@ -47,12 +41,6 @@ interface IAddMembersProps {
      * @defaultValue `./assets/search.svg`
      */
     searchIconURL?: string,
-    /**
-     * Text to be displayed when the search input has no value
-     *
-     * @defaultValue `localize("SEARCH")`
-     */
-    searchPlaceholderText?: string,
     /**
      * Show alphabetical header
      *
@@ -78,22 +66,11 @@ interface IAddMembersProps {
      * Custom view for the loading state of the component
      */
     loadingStateView?: JSX.Element,
-    /**
-     * Text to display in the default empty view
-     *
-     * @defaultValue `localize("NO_USERS_FOUND")`
-     */
-    emptyStateText?: string,
+
     /**
      * Custom view for the empty state of the component
      */
     emptyStateView?: JSX.Element,
-    /**
-     * Text to display in the default error view
-     *
-     * @defaultValue `localize("SOMETHING_WRONG")`
-     */
-    errorStateText?: string,
     /**
      * Custom view for the error state of the component
      */
@@ -193,7 +170,7 @@ interface IAddMembersProps {
     /**
      * Text to display for the default add button
      *
-     * @defaultValue `localize("ADD_MEMBERS")`
+     * @defaultValue `getLocalizedString("add_members")`
      */
     buttonText?: string,
     /**
@@ -217,26 +194,16 @@ interface IAddMembersProps {
  */
 export function CometChatAddMembers(props: IAddMembersProps) {
     const {
-        backButtonIconURL = backbutton,
         showBackButton = false,
         onBack,
-        title = localize("ADD_MEMBERS"),
         hideSearch = false,
-        searchIconURL = SearchIcon,
-        searchPlaceholderText = localize("SEARCH"),
         showSectionHeader = false,
         sectionHeaderField = "getName",
-        loadingIconURL = SpinnerIcon,
         loadingStateView,
-        emptyStateText = localize("NO_USERS_FOUND"),
         emptyStateView,
-        errorStateText = localize("SOMETHING_WRONG"),
         errorStateView,
         hideError = false,
-        disableUsersPresence = false,
-        hideSeparator = false,
         onError,
-        menus,
         options,
         selectionMode = SelectionMode.multiple,
         onSelect,
@@ -246,10 +213,7 @@ export function CometChatAddMembers(props: IAddMembersProps) {
         subtitleView,
         group,
         onAddMembersButtonClick = null,
-        buttonText = localize("ADD_MEMBERS"),
-        closeButtonIconURL = closeButton,
-        onClose,
-        statusIndicatorStyle,
+        buttonText = getLocalizedString("add_members"),
     } = props;
 
     const membersToAddRef = useRef<CometChat.GroupMember[]>([]);
@@ -472,7 +436,7 @@ export function CometChatAddMembers(props: IAddMembersProps) {
 
             />
             {isError ? <div className="cometchat-add-members_error-view">
-                {localize("SOMETHING_WRONG")}
+                {getLocalizedString("member_error_subtitle")}
             </div> : null}
             {getAddMembersBtnView()}
             {getBackBtnView()}

sample-app/src/components/CometChatAddMembers/CometChatAddMembers.tsx

@@ -1,4 +1,4 @@
-import { CometChatButton, localize } from "@cometchat/chat-uikit-react";
+import { CometChatButton, getLocalizedString } from "@cometchat/chat-uikit-react";
 import "../../styles/CometChatAlertPopup/CometChatAlertPopup.css";
 
 export const CometChatAlertPopup = (props: { onConfirmClick?: () => void, title?: string, description?: string }) => {
@@ -22,7 +22,7 @@ export const CometChatAlertPopup = (props: { onConfirmClick?: () => void, title?
 
                     <div className="cometchat-alert-popup__button-wrapper">
                         <CometChatButton
-                            text={localize("UNDERSTOOD")}
+                            text={getLocalizedString("understood")}
                             onClick={onConfirmClick}
                         />
                     </div>

sample-app/src/components/CometChatAlertPopup/CometChatAlertPopup.tsx

@@ -2,7 +2,7 @@ import { useCallback, useEffect, useRef, useState } from "react";
 import { CometChat } from "@cometchat/chat-sdk-javascript";
 import unbanIconURL from "../../assets/close.svg";
 import "../../styles/CometChatBannedMembers/CometChatBannedMembers.css";
-import { CometChatButton, CometChatGroupEvents, CometChatList, CometChatListItem, CometChatUIKitLoginListener, IGroupMemberUnBanned, States, localize } from "@cometchat/chat-uikit-react";
+import { CometChatButton, CometChatGroupEvents, CometChatList, CometChatListItem, CometChatUIKitLoginListener, IGroupMemberUnBanned, States, getLocalizedString } from "@cometchat/chat-uikit-react";
 
 interface bannedMembersProp {
     group: CometChat.Group;
@@ -56,7 +56,7 @@ export const CometChatBannedMembers = (props: bannedMembersProp) => {
             <CometChatButton
                 iconURL={unbanIconURL}
                 onClick={() => unbanMember(bannedMember)}
-                hoverText={localize('UNBAN')}
+                hoverText={getLocalizedString('unban')}
             />
         );
     }
@@ -196,7 +196,7 @@ export const CometChatBannedMembers = (props: bannedMembersProp) => {
                         <div className="cometchat-banned-members__empty">
                             <div className="cometchat-banned-members__empty-icon" />
                             <div className="cometchat-banned-members__empty-text">
-                                {localize("NO_BANNED_MEMBERS")}
+                                {getLocalizedString("no_banned_members")}
                             </div>
                         </div>
                         :