Skip to content

Commit d162aec

Browse files
raj-dubey1raj-dubey1
committed
Updated UIKit version to 5.0.2
1 parent c1143e0 commit d162aec

File tree

33 files changed

+666
-584
lines changed

33 files changed

+666
-584
lines changed

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@cometchat/chat-uikit-react",
3-
"version": "5.0.1",
3+
"version": "5.0.2",
44
"description": "Ready-to-use Chat UI Components for React(Javascript/Web)",
55
"author": "CometChat",
66
"dependencies": {
@@ -31,7 +31,7 @@
3131
"react-dom": "^18.2.0",
3232
"rollup": "^3.23.0",
3333
"rollup-plugin-copy": "^3.4.0",
34-
"rollup-plugin-dts": "^5.3.1",
34+
"rollup-plugin-dts": "^6.1.1",
3535
"rollup-plugin-postcss": "^4.0.2",
3636
"rollup-plugin-sourcemaps": "^0.6.3",
3737
"tslib": "^2.5.2",

‎sample-app/CHANGELOG.md‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,17 @@
1+
## [5.0.2] - 30-01-2025
2+
3+
## New
4+
- None
5+
6+
## Enhancements
7+
- None
8+
9+
## Fixes
10+
- Fixed an issue where clicking on a mentioned user did not redirect to their message screen.
11+
- Fixed an issue where a newly added group member's avatar was not displayed in the Group Member View.
12+
- Resolved an issue where the group details component re-rendered unexpectedly after each operation.
13+
- Corrected the position of the profile info popup in mobile view to improve the user experience on smaller screens.
14+
115
## [5.0.1] - 13-01-2025
216

317
#### New

‎sample-app/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
{
22
"name": "sample-app",
3-
"version": "5.0.1",
3+
"version": "5.0.2",
44
"description": "React App made using CometChat React v5 UI Kit.",
55
"author": "CometChat",
66
"private": true,
77
"dependencies": {
88
"@cometchat/calls-sdk-javascript": "^4.0.11",
99
"@cometchat/chat-sdk-javascript": "^4.0.10",
10-
"@cometchat/chat-uikit-react": "~5.0.1",
10+
"@cometchat/chat-uikit-react": "~5.0.2",
1111
"react": "18.2.0",
1212
"react-dom": "18.2.0",
1313
"react-router-dom": "6.14.2",

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -271,6 +271,7 @@ export function CometChatAddMembers(props: IAddMembersProps) {
271271
const groupMember = new CometChat.GroupMember(user.getUid(), CometChatUIKitConstants.groupMemberScope.participant);
272272
groupMember.setName(user.getName());
273273
groupMember.setGuid(groupPropRef.current.getGuid());
274+
groupMember.setAvatar(user?.getAvatar())
274275
return groupMember;
275276
}, [groupPropRef]);
276277

‎sample-app/src/components/CometChatHome/CometChatHome.tsx‎

Lines changed: 71 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { useCallback, useContext, useEffect, useRef, useState } from "react";
1+
import { useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
22
import blockIcon from "../../assets/block.svg";
33
import deleteIcon from "../../assets/delete.svg";
44
import { COMETCHAT_CONSTANTS } from "../../AppConstants";
@@ -480,6 +480,69 @@ function CometChatHome(props: { theme?: string }) {
480480
}
481481
}, [newChat]);
482482

483+
const updateGroupDetails = (eventGroup: CometChat.Group) => {
484+
if (eventGroup.getGuid() === group?.getGuid()) {
485+
setGroup(eventGroup);
486+
}
487+
}
488+
489+
const attachSDKGroupListenerForDetails = () => {
490+
const listenerId = "GroupDetailsListener_" + String(Date.now());
491+
CometChat.addGroupListener(
492+
listenerId,
493+
new CometChat.GroupListener({
494+
onGroupMemberBanned: (
495+
message: CometChat.Action,
496+
bannedUser: CometChat.User,
497+
bannedBy: CometChat.User,
498+
bannedFrom: CometChat.Group
499+
) => {
500+
updateGroupDetails(bannedFrom);
501+
},
502+
onGroupMemberKicked: (
503+
message: CometChat.Action,
504+
kickedUser: CometChat.User,
505+
kickedBy: CometChat.User,
506+
kickedFrom: CometChat.Group
507+
) => {
508+
updateGroupDetails(kickedFrom);
509+
},
510+
onMemberAddedToGroup: (
511+
message: CometChat.Action,
512+
userAdded: CometChat.User,
513+
userAddedBy: CometChat.User,
514+
userAddedIn: CometChat.Group
515+
) => {
516+
updateGroupDetails(userAddedIn);
517+
},
518+
onGroupMemberJoined: (
519+
message: CometChat.Action,
520+
joinedUser: CometChat.User,
521+
joinedGroup: CometChat.Group
522+
) => {
523+
updateGroupDetails(joinedGroup);
524+
},
525+
onGroupMemberLeft: (
526+
message: CometChat.Action,
527+
leavingUser: CometChat.User,
528+
group: CometChat.Group
529+
) => {
530+
updateGroupDetails(group);
531+
},
532+
})
533+
);
534+
return () => CometChat.removeGroupListener(listenerId);
535+
}
536+
537+
useEffect(() => {
538+
if (loggedInUser) {
539+
const unsubscribeFromGroupEvents = attachSDKGroupListenerForDetails();
540+
return () => {
541+
unsubscribeFromGroupEvents();
542+
};
543+
}
544+
}, [loggedInUser, attachSDKGroupListenerForDetails]);
545+
483546
return (
484547
<>
485548
{appState.sideComponent.visible && (
@@ -1245,6 +1308,12 @@ function CometChatHome(props: { theme?: string }) {
12451308
}
12461309
}
12471310

1311+
const SideComponentWrapper = useMemo(() => {
1312+
return (
1313+
<SideComponent />
1314+
)
1315+
}, [appState.sideComponent]);
1316+
12481317
return (
12491318
loggedInUser && <div className='cometchat-root' data-theme={theme}>
12501319
{showAlertPopup.visible &&
@@ -1278,7 +1347,7 @@ function CometChatHome(props: { theme?: string }) {
12781347
<div className='messages-wrapper'>
12791348
<InformationComponent />
12801349
</div>
1281-
<SideComponent />
1350+
{SideComponentWrapper}
12821351
<CometChatIncomingCall />
12831352
{showToast ? <CometChatToast text={toastTextRef.current} onClose={closeToast} /> : null}
12841353
</div>

‎sample-app/src/metaInfo.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
export const metaInfo = {
22
name: "sample-app",
3-
version: "5.0.1",
3+
version: "5.0.2",
44
type: "sample",
55
platform: "React",
66
};

‎sample-app/src/styles/CometChatSelector/CometChatSelector.css‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -164,8 +164,6 @@
164164

165165
.cometchat .cometchat-conversations-header .cometchat-menu-list__sub-menu-list {
166166
width: 212px;
167-
top: 40px !important;
168-
left: 172px !important;
169167
}
170168

171169
#logged-in-user {

‎src/CometChatUIKit/CometChatUIKit.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -99,7 +99,7 @@ class CometChatUIKit {
9999
return new Promise((resolve, reject) => {
100100
window.CometChatUiKit = {
101101
name: "@cometchat/chat-uikit-react",
102-
version: "5.0.1",
102+
version: "5.0.2",
103103
};
104104
CometChat.init(uiKitSettings?.appId, appSettings).then(() => {
105105
CometChat.getLoggedinUser().then((user: CometChat.User | null) => {

‎src/components/BaseComponents/CometChatChangeScope/CometChatChangeScope.tsx‎

Lines changed: 23 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { localize } from "../../../resources/CometChatLocalize/cometchat-localiz
33
import { CometChatRadioButton } from "../CometChatRadioButton/CometChatRadioButton";
44
import { CometChatButton } from "../CometChatButton/CometChatButton";
55
import { useState } from "react";
6+
import { CometChatUIKitConstants } from "../../../constants/CometChatUIKitConstants";
67

78

89
interface ChangeScopeProps {
@@ -40,29 +41,29 @@ const CometChatChangeScope = (props: ChangeScopeProps) => {
4041
selectedValue,
4142
selectionChanged,
4243
} = useCometChatChangeScope({ defaultSelection });
43-
/* This function is used to trigger the "onScopeChanged" callback with the user selected value information. */
44-
const scopeChangeClicked = () => {
45-
setIsError(false);
46-
setIsLoading(true);
47-
if(onScopeChanged)
44+
/* This function is used to trigger the "onScopeChanged" callback with the user selected value information. */
45+
const scopeChangeClicked = () => {
46+
setIsError(false);
47+
setIsLoading(true);
48+
if (onScopeChanged)
4849
onScopeChanged(selectedValue)
4950
.then(() => {
5051
setIsLoading(false);
5152
setIsError(false);
52-
if(onCloseClick){
53+
if (onCloseClick) {
5354
onCloseClick()
5455
}
5556
})
5657
.catch((error) => {
5758
setIsError(true);
5859
setIsLoading(false);
5960
});
60-
};
61+
};
6162
return (
6263
<div className="cometchat">
63-
64+
6465
<div className="cometchat-change-scope">
65-
66+
6667
<div className="cometchat-change-scope__icon-container">
6768
<div className="cometchat-change-scope__icon" />
6869
</div>
@@ -78,23 +79,28 @@ const CometChatChangeScope = (props: ChangeScopeProps) => {
7879
{options.map((listItr, index) => (
7980
<div key={index} className="cometchat-change-scope__list-item">
8081
<div className="cometchat-change-scope__list-item-label">
81-
{localize(listItr.toUpperCase())}
82+
{localize(listItr.toUpperCase())}
8283
</div>
83-
<CometChatRadioButton name="changeScopeInput" id={listItr} checked={listItr === defaultSelection} onRadioButtonChanged={selectionChanged} />
84+
<CometChatRadioButton
85+
name={CometChatUIKitConstants.radioNames.changeScope}
86+
id={listItr}
87+
checked={listItr === defaultSelection}
88+
onRadioButtonChanged={selectionChanged}
89+
/>
8490
</div>
8591
))}
8692
</div>
87-
{isError ? <div className="cometchat-change-scope__error-view">
93+
{isError ? <div className="cometchat-change-scope__error-view">
8894
{localize("SOMETHING_WRONG")}
8995
</div> : null}
9096
<div className="cometchat-change-scope__button-container">
91-
<div className="cometchat-change-scope__cancel-button">
92-
<CometChatButton text={localize("CANCEL")} onClick={onCloseClick} />
93-
</div>
97+
<div className="cometchat-change-scope__cancel-button">
98+
<CometChatButton text={localize("CANCEL")} onClick={onCloseClick} />
99+
</div>
94100
<div className={`cometchat-change-scope__submit-button ${defaultSelection == selectedValue ? "cometchat-change-scope__submit-button-disabled" : ""}`}>
95-
<CometChatButton isLoading={defaultSelection !== selectedValue && isLoading} disabled={defaultSelection === selectedValue || isLoading} text={buttonText} onClick={scopeChangeClicked} />
101+
<CometChatButton isLoading={defaultSelection !== selectedValue && isLoading} disabled={defaultSelection === selectedValue || isLoading} text={buttonText} onClick={scopeChangeClicked} />
96102
</div>
97-
103+
98104
</div>
99105
</div>
100106
</div>

‎src/components/BaseComponents/CometChatEmojiKeyboard/CometChatEmojiKeyboard.tsx‎

Lines changed: 38 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ const CometChatEmojiKeyboard = (props: EmojiKeyboardProps) => {
2525
const {
2626
emojiDataState,
2727
activeCategory,
28+
setActiveCategory,
2829
searchEmojiData,
2930
searchString,
3031
getEmojiData,
@@ -33,12 +34,18 @@ const CometChatEmojiKeyboard = (props: EmojiKeyboardProps) => {
3334
filterEmojis,
3435
} = useCometChatEmojiKeyboard({ emojiData });
3536

36-
const scrollRef = useRef<HTMLDivElement | null>(null);
37+
const scrollRef = useRef<HTMLDivElement | null>(null);
3738

3839
useEffect(() => {
3940
getEmojiCategory()
4041
}, [])
4142

43+
useEffect(() => {
44+
if (!activeCategory) {
45+
setActiveCategory(emojiDataState[0]?.id);
46+
}
47+
}, [emojiDataState]);
48+
4249
const getEmojiListComponent = (emojiData: { [key: string]: CometChatEmoji }) => {
4350
return (
4451
<div className="cometchat-emoji-keyboard__emoji-list">
@@ -57,34 +64,34 @@ const CometChatEmojiKeyboard = (props: EmojiKeyboardProps) => {
5764
}
5865

5966

60-
/**
61-
* Handles the wheel event to enable smooth horizontal scrolling of the container.
62-
*
63-
* @param {React.WheelEvent<HTMLDivElement>} e - The wheel event triggered on the scrollable container.
64-
* This event provides information about the scrolling direction and distance.
65-
*
66-
* @returns {void} - This function does not return a value.
67-
*/
68-
const onWheel = useCallback((e: React.WheelEvent<HTMLDivElement>) => {
69-
const container = scrollRef.current;
70-
71-
if (container) {
72-
const containerScrollPosition = container.scrollLeft;
73-
74-
let scrollAmount = e.deltaY * 0.5; // Default for normal mice
75-
76-
if (e.deltaMode === 1 || e.deltaY > 100) {
77-
// Handle hyper scroll or fast-scrolling devices
78-
scrollAmount = e.deltaY * 0.2; // Slow down for hyper scroll
79-
}
80-
81-
container.scrollTo({
82-
top: 0,
83-
left: containerScrollPosition + scrollAmount,
84-
behavior: 'auto', // Use 'auto' to avoid jitter on hyper scroll
85-
});
86-
}
87-
}, []);
67+
/**
68+
* Handles the wheel event to enable smooth horizontal scrolling of the container.
69+
*
70+
* @param {React.WheelEvent<HTMLDivElement>} e - The wheel event triggered on the scrollable container.
71+
* This event provides information about the scrolling direction and distance.
72+
*
73+
* @returns {void} - This function does not return a value.
74+
*/
75+
const onWheel = useCallback((e: React.WheelEvent<HTMLDivElement>) => {
76+
const container = scrollRef.current;
77+
78+
if (container) {
79+
const containerScrollPosition = container.scrollLeft;
80+
81+
let scrollAmount = e.deltaY * 0.5; // Default for normal mice
82+
83+
if (e.deltaMode === 1 || e.deltaY > 100) {
84+
// Handle hyper scroll or fast-scrolling devices
85+
scrollAmount = e.deltaY * 0.2; // Slow down for hyper scroll
86+
}
87+
88+
container.scrollTo({
89+
top: 0,
90+
left: containerScrollPosition + scrollAmount,
91+
behavior: 'auto', // Use 'auto' to avoid jitter on hyper scroll
92+
});
93+
}
94+
}, []);
8895

8996
return (
9097
<div className="cometchat" style={{
@@ -93,8 +100,8 @@ const onWheel = useCallback((e: React.WheelEvent<HTMLDivElement>) => {
93100
}}>
94101
<div className="cometchat-emoji-keyboard">
95102
<div className="cometchat-emoji-keyboard__tabs"
96-
ref={scrollRef}
97-
onWheel={onWheel}
103+
ref={scrollRef}
104+
onWheel={onWheel}
98105
>
99106
{emojiDataState.map((emoji: CometChatEmojiCategory, counter: number) =>
100107
<div

0 commit comments

Comments
 (0)