Updated UIKit version to 5.0.0

README.md

@@ -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/5.0/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/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/5.0/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/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/).

package.json

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

sample-app/CHANGELOG.md

@@ -1,4 +1,20 @@
+## [5.0.0] - 03-01-2025
+
+### New
+- 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.
 

sample-app/README.md

@@ -49,4 +49,4 @@ This is a reference application showcasing the integration of [CometChat's React
 
 ## 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/5.0/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/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.0-beta2",
+  "version": "5.0.0",
   "description": "React App made using CometChat React v5 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.0-beta2",
+    "@cometchat/chat-uikit-react": "~5.0.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-router-dom": "6.14.2",

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

@@ -451,24 +451,20 @@ export function CometChatAddMembers(props: IAddMembersProps) {
             className="cometchat-add-members"
         >
             <CometChatUsers
-                title={title}
                 hideSearch={hideSearch}
-                searchPlaceholderText={searchPlaceholderText}
                 showSectionHeader={showSectionHeader}
                 sectionHeaderKey={sectionHeaderField}
-                loadingStateView={loadingStateView}
-                emptyStateView={emptyStateView}
-                errorStateView={errorStateView}
+                loadingView={loadingStateView}
+                emptyView={emptyStateView}
+                errorView={errorStateView}
                 hideError={hideError}
-                disableUsersPresence={disableUsersPresence}
                 onError={onError}
-                menu={menus}
                 options={options}
                 selectionMode={selectionMode}
                 onSelect={onSelectWrapper}
                 usersRequestBuilder={usersRequestBuilder}
                 searchRequestBuilder={searchRequestBuilder}
-                listItemView={listItemView}
+                itemView={listItemView}
                 subtitleView={subtitleView}
                 onItemClick={onUsersSelected}
                 activeUser={undefined}

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

@@ -71,7 +71,7 @@ export const CometChatBannedMembers = (props: bannedMembersProp) => {
                     title={bannedMember.getName()}
                     avatarURL={bannedMember.getAvatar()}
                     avatarName={bannedMember.getName()}
-                    tailView={getDefaultListTailView(bannedMember)}
+                    trailingView={getDefaultListTailView(bannedMember)}
                 />
             );
         };
@@ -189,7 +189,7 @@ export const CometChatBannedMembers = (props: bannedMembersProp) => {
                     hideSearch={true}
                     list={bannedMembers}
                     listItemKey="getUid"
-                    listItem={getListItem()}
+                    itemView={getListItem()}
                     showSectionHeader={false}
                     onScrolledToBottom={() => fetchNextAndAppendBannedMembers()}
                     state={bannedMembers.length === 0

sample-app/src/components/CometChatCallLog/CometChatCallLogDetails.tsx

@@ -1,17 +1,18 @@
-import { useEffect, useState } from "react";
+import { ReactNode, useCallback, useEffect, useState } from "react";
 import "../../styles/CometChatCallLog/CometChatCallLogDetails.css";
 import { CometChat, User } from "@cometchat/chat-sdk-javascript";
 import { CometChatCallDetailsInfo } from "./CometChatCallLogInfo";
 import { CometChatCallDetailsParticipants } from "./CometChatCallLogParticipants";
 import { CometChatCallDetailsRecording } from "./CometChatCallLogRecordings";
 import { CometChatCallDetailsHistory } from "./CometChatCallLogHistory";
-import { CometChatMessageHeader, CometChatUIKitConstants, CometChatUIKitLoginListener, localize } from "@cometchat/chat-uikit-react";
+import { ChatConfigurator, CometChatListItem, CometChatMessageHeader, CometChatUIKitConstants, CometChatUIKitLoginListener, localize, MessageUtils } from "@cometchat/chat-uikit-react";
 
 export const CometChatCallDetails = (props: { selectedItem: any, onBack?: () => void }) => {
     const { selectedItem, onBack } = props;
     const callDetailTabItems = [localize("PARTICIPANTS"), localize("RECORDING"), localize("HISTORY")];
     const [activeTab, setActiveTab] = useState("Participants");
     const [user, setUser] = useState<User>();
+    const [subtitleText, setSubtitleText] = useState<string>();
 
     function verifyCallUser(call: any, loggedInUser: CometChat.User) {
         if (call.getInitiator().getUid() === loggedInUser.getUid()) {
@@ -20,6 +21,33 @@ export const CometChatCallDetails = (props: { selectedItem: any, onBack?: () =>
             return call.getInitiator();
         }
     }
+    useEffect(()=>{
+        let isBlocked = new MessageUtils().getUserStatusVisible(user);
+        const userListenerId = "users_custom" + Date.now();
+        if(isBlocked){
+            setSubtitleText("")
+            return;
+        }
+        setSubtitleText(user?.getStatus());
+        CometChat.addUserListener(
+            userListenerId,
+            new CometChat.UserListener({
+                onUserOnline: (onlineUser: CometChat.User) => {
+                    if (user?.getUid() === onlineUser.getUid()) {
+                        setSubtitleText(onlineUser?.getStatus())
+                    }
+                },
+                onUserOffline: (offlineUser: CometChat.User) => {
+                    if (user?.getUid() === offlineUser?.getUid()) {
+                        setSubtitleText(offlineUser?.getStatus())
+                    }
+                },
+            })
+        );
+        return () => {
+            CometChat.removeUserListener(userListenerId);
+        };
+    },[user])
 
     useEffect(() => {
         const loggedInUser = CometChatUIKitLoginListener.getLoggedInUser();
@@ -29,7 +57,18 @@ export const CometChatCallDetails = (props: { selectedItem: any, onBack?: () =>
                 setUser(response);
             });
         }
+
     }, [selectedItem]);
+    const  getSubtitleView = useCallback(() => {
+        return <div className={`cometchat-call-log-details__subtitle`}>
+        {subtitleText}
+    </div>
+    },[subtitleText,user])
+    function getTrailingView(){
+        return <div className={`cometchat-call-log-details__trailing-view`}>
+        {ChatConfigurator.getDataSource().getAuxiliaryHeaderMenu(user) as  ReactNode}
+    </div>
+    }
 
     return (
         <div className="cometchat-call-log-details">
@@ -38,14 +77,11 @@ export const CometChatCallDetails = (props: { selectedItem: any, onBack?: () =>
                 {localize("CALL_DETAILS")}
             </div>
             <div className="cometchat-call-log-details__call-log-item">
-                <CometChatMessageHeader
-                    user={user}
-                    disableTyping={true}
-                />
+            <CometChatListItem avatarName={user?.getName()}
+                        avatarURL={user?.getAvatar()}
+                        title={user?.getName() || ""} subtitleView={getSubtitleView()}  trailingView={getTrailingView()}/>
             </div>
-
             <CometChatCallDetailsInfo call={selectedItem} />
-
             <div className="cometchat-call-log-details__tabs">
                 {callDetailTabItems.map((tabItem) => (
                     <div

sample-app/src/components/CometChatCallLog/CometChatCallLogHistory.tsx

@@ -110,7 +110,7 @@ export const CometChatCallDetailsHistory = (props: { call: any }) => {
 
     const getListItemTailView = useCallback((item: any): JSX.Element => {
         return (
-            <div className={getCallDuration(item) ? "cometchat-call-log-history__tail-view" : "cometchat-call-log-history__tail-view-disabled"}>
+            <div className={getCallDuration(item) ? "cometchat-call-log-history__trailing-view" : "cometchat-call-log-history__trailing-view-disabled"}>
                 {getCallDuration(item) ? getCallDuration(item) : '00:00'}
             </div>
         );
@@ -227,7 +227,7 @@ export const CometChatCallDetailsHistory = (props: { call: any }) => {
                         title={getCallStatus(item, loggedInUser!)}
                         avatarURL={getAvatarUrlForCall(item)}
                         subtitleView={getListItemSubtitleView(item)}
-                        tailView={getListItemTailView(item)}
+                        trailingView={getListItemTailView(item)}
                     />
                 </>
             )
@@ -241,7 +241,7 @@ export const CometChatCallDetailsHistory = (props: { call: any }) => {
                 list={callList}
                 onScrolledToBottom={getCallList}
                 listItemKey="getSessionID"
-                listItem={getListItem}
+                itemView={getListItem}
                 state={callListState}
                 showSectionHeader={false}
             />

sample-app/src/components/CometChatCallLog/CometChatCallLogInfo.tsx

@@ -47,7 +47,7 @@ export const CometChatCallDetailsInfo = (props: { call: any }) => {
 
     const getListItemTailView = useCallback((item: any): JSX.Element => {
         return (
-            <div className={getCallDuration(item) ? "cometchat-call-log-info__tail-view" : "cometchat-call-log-info__tail-view-disabled"}>
+            <div className={getCallDuration(item) ? "cometchat-call-log-info__trailing-view" : "cometchat-call-log-info__trailing-view-disabled"}>
                 {getCallDuration(item) ? getCallDuration(item) : '00:00'}
             </div>
         );
@@ -162,7 +162,7 @@ export const CometChatCallDetailsInfo = (props: { call: any }) => {
                 title={getCallStatus(call, loggedInUser!)}
                 avatarURL={getAvatarUrlForCall(call)}
                 subtitleView={getListItemSubtitleView(call)}
-                tailView={getListItemTailView(call)}
+                trailingView={getListItemTailView(call)}
             />
         </div>
     )

sample-app/src/components/CometChatCallLog/CometChatCallLogParticipants.tsx

@@ -53,7 +53,7 @@ export const CometChatCallDetailsParticipants = (props: { call: any }) => {
     const getListItemTailView = useCallback((item: any): JSX.Element => {
         return (
             <div
-                className={item?.getHasJoined() || item?.getJoinedAt() ? "cometchat-call-log-participants__tail-view" : "cometchat-call-log-participants__tail-view-disabled" }
+                className={item?.getHasJoined() || item?.getJoinedAt() ? "cometchat-call-log-participants__trailing-view" : "cometchat-call-log-participants__trailing-view-disabled" }
             >
                 {getDurationOfCall(item)}
             </div>
@@ -70,7 +70,7 @@ export const CometChatCallDetailsParticipants = (props: { call: any }) => {
                         avatarURL={item?.getAvatar()}
                         avatarName={item?.getName()}
                         subtitleView={getListItemSubtitleView(item)}
-                        tailView={getListItemTailView(item)}
+                        trailingView={getListItemTailView(item)}
                     />
                 </>
             )
@@ -83,7 +83,7 @@ export const CometChatCallDetailsParticipants = (props: { call: any }) => {
             <CometChatList
                 hideSearch={true}
                 list={getCallParticipants() || []}
-                listItem={getListItem}
+                itemView={getListItem}
                 listItemKey="getUid"
                 state={States.loaded}
                 showSectionHeader={false}

sample-app/src/components/CometChatCallLog/CometChatCallLogRecordings.tsx

@@ -65,7 +65,7 @@ export const CometChatCallDetailsRecording = (props: { call: any }) => {
                         avatarURL=""
                         title={item?.getRid()}
                         subtitleView={getListItemSubtitleView(item)}
-                        tailView={getListItemTailView(item)}
+                        trailingView={getListItemTailView(item)}
                     />
                 </>
             )
@@ -85,7 +85,7 @@ export const CometChatCallDetailsRecording = (props: { call: any }) => {
                 <CometChatList
                     hideSearch={true}
                     list={getRecordings()}
-                    listItem={getListItem}
+                    itemView={getListItem}
                     listItemKey="getRid"
                     state={States.loaded}
                     showSectionHeader={false}