Updated UIKit version to 5.0.17

PrajwalDhuleCC · PrajwalDhuleCC · commit 907524a10ac0 · 2025-10-16T12:49:28.000+05:30
diff --git a/package.json b/package.json
@@ -1,14 +1,14 @@
 {
   "name": "@cometchat/chat-uikit-react",
-  "version": "5.0.16",
+  "version": "5.0.17",
   "description": "Ready-to-use Chat UI Components for React(Javascript/Web)",
   "author": "CometChat",
   "exports": {
     ".": "./dist/index.js",
     "./css-variables.css": "./dist/styles/css-variables.css"
   },
   "dependencies": {
-    "@cometchat/chat-sdk-javascript": "^4.1.1",
+    "@cometchat/chat-sdk-javascript": "^4.1.2",
     "@rollup/plugin-json": "^6.1.0",
     "rxjs": "^7.8.1"
   },  
diff --git a/sample-app/CHANGELOG.md b/sample-app/CHANGELOG.md
@@ -1,3 +1,15 @@
+## [5.0.13] - 15-10-2025
+
+## New
+- None
+
+## Enhancements
+- None
+
+## Fixes
+- Fixed an issue where the details components did not close when switching chats by clicking on a mentioned user.
+- Resolved an issue where user statuses were not updating in real time in the Group Members section after adding users to a group.
+
 ## [5.0.12] - 17-09-2025
 
 ## New
diff --git a/sample-app/package.json b/sample-app/package.json
@@ -1,13 +1,13 @@
 {
   "name": "sample-app",
-  "version": "5.0.12",
+  "version": "5.0.13",
   "description": "React App made using CometChat React v5 UI Kit.",
   "author": "CometChat",
   "private": true,
   "dependencies": {
     "@cometchat/calls-sdk-javascript": "^4.1.0",
-    "@cometchat/chat-sdk-javascript": "^4.1.1",
-    "@cometchat/chat-uikit-react": "~5.0.16",
+    "@cometchat/chat-sdk-javascript": "^4.1.2",
+    "@cometchat/chat-uikit-react": "~5.0.17",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-router-dom": "6.14.2",
diff --git a/sample-app/src/components/CometChatAddMembers/CometChatAddMembers.tsx b/sample-app/src/components/CometChatAddMembers/CometChatAddMembers.tsx
@@ -272,6 +272,7 @@ export function CometChatAddMembers(props: IAddMembersProps) {
         groupMember.setName(user.getName());
         groupMember.setGuid(groupPropRef.current.getGuid());
         groupMember.setAvatar(user?.getAvatar())
+        groupMember.setStatus(user.getStatus());
         return groupMember;
     }, [groupPropRef]);
 
diff --git a/sample-app/src/components/CometChatHome/CometChatHome.tsx b/sample-app/src/components/CometChatHome/CometChatHome.tsx
@@ -1383,26 +1383,34 @@ function CometChatHome(props: { theme?: string }) {
         const openChatForUser = (user?: CometChat.User) => {
             const uid = user?.getUid();
             if (uid) {
-                setAppState({ type: "updateSideComponent", payload: { visible: false, type: "" } });
+                const closeSide = () => {
+                    setAppState({ type: "updateSideComponent", payload: { visible: false, type: "" } });
+                }
                 if (activeTab === "chats") {
                     CometChat.getConversation(uid!, CometChatUIKitConstants.MessageReceiverType.user).then(
                         (conversation) => {
-                            setNewChat(undefined);
-                            setSelectedItem(conversation);
-                            setAppState({ type: "updateSelectedItem", payload: conversation });
+                            if(!selectedItem  || !(selectedItem instanceof CometChat.Conversation) || selectedItem?.getConversationId() !== conversation.getConversationId()) {
+                                setNewChat(undefined);
+                                setSelectedItem(conversation);
+                                setAppState({ type: "updateSelectedItem", payload: conversation });
+                                closeSide();
+                            }
                         },
                         (error) => {
                             setNewChat({ user, group: undefined });
                             setSelectedItem(undefined);
+                            closeSide();
                         }
                     );
                 } else if (activeTab === "users") {
                     setNewChat(undefined);
                     setSelectedItem(user);
                     setAppState({ type: "updateSelectedItemUser", payload: user });
+                    closeSide();
                 } else if (activeTab === "groups") {
                     setNewChat({ user, group: undefined });
                     setSelectedItem(undefined);
+                    closeSide();
                 }
             }
         }
diff --git a/sample-app/src/metaInfo.ts b/sample-app/src/metaInfo.ts
@@ -1,6 +1,6 @@
 export const metaInfo = {
   name: "sample-app",
-  version: "5.0.12",
+  version: "5.0.13",
   type: "sample",
   platform: "React",
 };
diff --git a/src/CometChatUIKit/CometChatUIKit.ts b/src/CometChatUIKit/CometChatUIKit.ts
@@ -100,7 +100,7 @@ class CometChatUIKit {
         return new Promise((resolve, reject) => {
             window.CometChatUiKit = {
                 name: "@cometchat/chat-uikit-react",
-                version: "5.0.16",
+                version: "5.0.17",
             };
             CometChat.init(uiKitSettings?.appId, appSettings).then(() => {
                 CometChat.getLoggedinUser().then((user: CometChat.User | null) => {
diff --git a/src/components/BaseComponents/CometChatTextBubble/CometChatTextBubble.tsx b/src/components/BaseComponents/CometChatTextBubble/CometChatTextBubble.tsx
@@ -86,7 +86,7 @@ const CometChatTextBubble = (props: TextBubbleProps) => {
             const isOverflowing = textRef.current.scrollHeight >= 80;
             setIsTruncated(isOverflowing);
         }
-    },[text, setIsTruncated])
+    },[text, textState, setIsTruncated])
     
     return (
         <div className="cometchat">
diff --git a/src/components/CometChatGroupMembers/controller.ts b/src/components/CometChatGroupMembers/controller.ts
@@ -83,6 +83,7 @@ export class GroupMembersManager {
         groupMember.setGuid(group.getGuid());
         groupMember.setUid(user.getUid());
         groupMember.setAvatar(user?.getAvatar())
+        groupMember.setStatus(user.getStatus());
         return groupMember;
     }
 
diff --git a/src/components/CometChatMessageComposer/CometChatMessageComposer.tsx b/src/components/CometChatMessageComposer/CometChatMessageComposer.tsx
@@ -38,7 +38,7 @@ import { CometChatEditPreview } from "../BaseComponents/CometChatEditPreview/Com
 import { CometChatActionSheet } from "../BaseComponents/CometChatActionSheet/CometChatActionSheet";
 import { CometChatEmojiKeyboard } from "../BaseComponents/CometChatEmojiKeyboard/CometChatEmojiKeyboard";
 import { ComposerId } from '../../utils/MessagesDataSource';
-import { decodeHTML, getThemeVariable, isMobileDevice, isSafari, processFileForAudio, sanitizeHtmlStringToFragment } from '../../utils/util';
+import { decodeHTML, getThemeVariable, isMobileDevice, isSafari, processFileForAudio, sanitizeHtmlStringToFragment, shouldShowCustomMimeTypes } from '../../utils/util';
 import { CometChatMessageEvents } from '../../events/CometChatMessageEvents';
 import { CometChatUIEvents } from '../../events/CometChatUIEvents';
 import { CometChatSoundManager } from "../../resources/CometChatSoundManager/CometChatSoundManager";
@@ -1255,7 +1255,8 @@ try {
     }
   
     const file = mediaFilePickerElement.files[0];
-    const expectedFileType = mediaFilePickerElement.accept.slice(0, -2);
+    const acceptAttr = mediaFilePickerElement.accept;
+    let expectedFileType = !acceptAttr || acceptAttr === "*/*" ? "file" : acceptAttr.split("/")[0]
     const actualFileType = expectedFileType === "file" ? "file" : file.type.split('/')[0];
     if (expectedFileType !== "file" && expectedFileType !== actualFileType) {
       dispatch({ type: "setShowValidationError", showValidationError: true });
@@ -1711,8 +1712,20 @@ return hideAttachmentButton || (hideAudioAttachmentOption && hideVideoAttachment
       if (typeof actionOnClick === "function") {
         actionOnClick();
       } else {
+        let acceptMap: Record<string, string> = {
+          [CometChatUIKitConstants.MessageTypes.image]: "image/*",
+          [CometChatUIKitConstants.MessageTypes.video]: "video/*",
+          [CometChatUIKitConstants.MessageTypes.audio]: "audio/*",
+          [CometChatUIKitConstants.MessageTypes.file]: "*/*"
+        };
+        if(shouldShowCustomMimeTypes()){
+          acceptMap[CometChatUIKitConstants.MessageTypes.image] = CometChatUIKitConstants.mimeTypes.image;
+          acceptMap[CometChatUIKitConstants.MessageTypes.video] = CometChatUIKitConstants.mimeTypes.video;
+          acceptMap[CometChatUIKitConstants.MessageTypes.audio] = CometChatUIKitConstants.mimeTypes.audio;
+        }
+        const acceptValue = acceptMap[action.id] ?? "*/*";
         // Open the correct file picker
-        mediaFilePickerRef.current!.accept = `${action.id}/*`;
+        mediaFilePickerRef.current!.accept = acceptValue;
         mediaFilePickerRef.current!.click();
       }
       dispatch({ type: "setContentToDisplay", contentToDisplay: "none" });
diff --git a/src/components/CometChatMessageList/CometChatMessageList.tsx b/src/components/CometChatMessageList/CometChatMessageList.tsx
@@ -1243,7 +1243,9 @@ const CometChatMessageList = (props: MessageListProps) => {
             message: message,
             status: MessageStatus.inprogress,
           });
-
+          if(isOnBottomRef.current) setTimeout(() => {
+            scrollToBottom()
+          }, 100)
         }
 
       } catch (error: any) {
diff --git a/src/constants/CometChatUIKitConstants.ts b/src/constants/CometChatUIKitConstants.ts
@@ -8,6 +8,11 @@ export class CometChatUIKitConstants {
         call: CometChat.CATEGORY_CALL,
         interactive: CometChat.CATEGORY_INTERACTIVE
     })
+    static mimeTypes = Object.freeze({
+        audio: "audio/*, .aac, .aif, .aiff, .caf, .mp3, .mp4, .wav, .m4a, .wma, .flac, .alac, .oga, .ra, .ram, .mid, .midi, .mka, .opus, .ac3, .amr, .ape, .dts, .wv, .tta, .pcm, .snd, .au, .cda, .vox, .m4b, .m3u, .pls, .ogg",
+        video: "video/*, .mov, .mp4, .m4v, .avi, .mpg, .mpeg, .m2ts, .mts, .3gp, .3g2, .flv, .wmv, .vob, .ts, .webm, .f4v, .f4a, .f4b, .swf, .rm, .rmvb, .divx, .xvid, .mxf, .asf, .amv, .smv, .avchd, .qt",
+        image: "image/*, .heic, .heif, .jpg, .jpeg, .png, .gif, .bmp, .tiff, .tif, .psd, .svg, .ico, .raw, .dng, .eps, .webp, .jfif, .jp2, .jpf, .jpx, .jpm, .mj2, .hdr, .exr, .pbm, .pgm, .ppm, .pnm, .tga, .dds, .svgz, .djvu, .ai, .cdr",
+    })
     static MessageTypes = Object.freeze({
         text: CometChat.MESSAGE_TYPE.TEXT,
         file: CometChat.MESSAGE_TYPE.FILE,
diff --git a/src/utils/util.ts b/src/utils/util.ts
@@ -357,4 +357,44 @@ export const sanitizeToSpanOnly = (htmlString: string, regexPatterns: RegExp[][]
   // The pasteHtml function will handle rendering only span tags as HTML
   // and everything else as plain text
   return sanitized;
-};
+};
+
+/**
+ * @function isIOS
+ * @description Checks if the current device is running iOS (iPhone, iPad, or iPod).
+ * It handles modern iPads (iOS 13+) which often report as 'Mac' but support touch.
+ * @returns {boolean} True if the device is running iOS, false otherwise.
+ */
+const isIOS = (): boolean => { 
+  if (navigator.userAgent.includes("Mac") && 'ontouchend' in document) {
+    return true;
+}
+
+// 2. Check for classic iOS user agent strings (iPhone, iPad, iPod).
+const userAgent = navigator.userAgent.toLowerCase();
+return /iphone|ipad|ipod/.test(userAgent);
+}
+
+/**
+* @function isMac
+* @description Checks if the current device is running macOS.
+* It explicitly excludes modern iPads that mimic the Mac user agent but support touch.
+* @returns {boolean} True if the device is running macOS, false otherwise.
+*/
+const isMac = (): boolean => {
+  if (navigator.userAgent.includes("Mac") && 'ontouchend' in document) {
+    return false;
+}
+
+  const userAgent = navigator.userAgent.toLowerCase();
+  return /macintosh|mac os x/.test(userAgent);
+}
+
+/**
+* @function shouldShowCustomMimeTypes
+* @description Returns true if the device is running either iOS (iPhone, iPad, iPod) or macOS.
+* @returns {boolean} True if the device is an Apple device (iOS or macOS), false otherwise.
+*/
+export const shouldShowCustomMimeTypes = (): boolean=>{
+return isIOS() || isMac();
+}

Original file line number	Diff line number	Diff line change
`@@ -86,7 +86,7 @@ const CometChatTextBubble = (props: TextBubbleProps) => {`
`86`	`86`	`const isOverflowing = textRef.current.scrollHeight >= 80;`
`87`	`87`	`setIsTruncated(isOverflowing);`
`88`	`88`	`}`
`89`		`- },[text, setIsTruncated])`
	`89`	`+ },[text, textState, setIsTruncated])`
`90`	`90`
`91`	`91`	`return (`
`92`	`92`	`<div className="cometchat">`
Original file line number	Diff line number	Diff line change
`@@ -83,6 +83,7 @@ export class GroupMembersManager {`
`83`	`83`	`groupMember.setGuid(group.getGuid());`
`84`	`84`	`groupMember.setUid(user.getUid());`
`85`	`85`	`groupMember.setAvatar(user?.getAvatar())`
	`86`	`+ groupMember.setStatus(user.getStatus());`
`86`	`87`	`return groupMember;`
`87`	`88`	`}`
`88`	`89`