Updated UIKit v.6.2.1

Author: gauravd-cometchat

package.json

@@ -1,19 +1,20 @@
 {
  "name": "@cometchat/chat-uikit-react",
- "version": "6.2.0",
+ "version": "6.2.1",
  "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.0",
+ "@cometchat/chat-sdk-javascript": "^4.1.1",
  "@rollup/plugin-json": "^6.1.0",
  "rxjs": "^7.8.1",
  "react-markdown": "^10.1.0",
  "@types/react-syntax-highlighter": "^15.5.13",
- "react-syntax-highlighter": "^15.6.1"
+ "react-syntax-highlighter": "^15.6.1",
+ "remark-gfm": "^4.0.1"
  },
  "scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",

sample-app/CHANGELOG.md

@@ -1,3 +1,19 @@
+## [6.2.1] - 22-08-2025
+
+## New
+- None
+
+## Enhancements
+- None
+
+## Fixes
+- Resolved a bug where the search input remained active even when the **Message Information** modal was open.
+- User detail shimmer was missing in the call log detail view.
+- Fixed an issue where the **Messages Search** component did not close if its conversation was deleted from the details page.
+
+## Removals
+- None
+
 ## [6.2.0] - 14-08-2025
 
 ## New

sample-app/package.json

@@ -1,13 +1,13 @@
 {
  "name": "sample-app",
- "version": "6.2.0",
+ "version": "6.2.1",
  "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.1.0",
- "@cometchat/chat-uikit-react": "~6.2.0",
+ "@cometchat/chat-sdk-javascript": "^4.1.1",
+ "@cometchat/chat-uikit-react": "~6.2.1",
  "react": "18.2.0",
  "react-dom": "18.2.0",
  "react-router-dom": "6.14.2",

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

@@ -13,7 +13,6 @@ export const CometChatCallDetails = (props: { selectedItem: any, onBack?: () =>
  const [activeTab, setActiveTab] = useState("Participants");
  const [user, setUser] = useState<CometChat.User>();
  const [subtitleText, setSubtitleText] = useState<string>();
-
  function verifyCallUser(call: any, loggedInUser: CometChat.User) {
  if (call.getInitiator().getUid() === loggedInUser.getUid()) {
  return call.getReceiver();
@@ -70,16 +69,37 @@ export const CometChatCallDetails = (props: { selectedItem: any, onBack?: () =>
  </div>
  }
 
+ const getLoadingView = () => {
+ return (
+ <div className='cometchat-call-logs-details__header__shimmer__shimmer'>
+ {[...Array(1)].map((_, index) => (
+ <div key={index} className='cometchat-call-logs-details__header__shimmer-item'>
+ <div className='cometchat-call-logs-details__header__shimmer-item-avatar'></div>
+ <div className='cometchat-call-logs-details__header__shimmer-item-body'>
+ <div className='cometchat-call-logs-details__header__shimmer-item-body-title-wrapper'>
+ <div className='cometchat-call-logs-details__header__shimmer-item-body-title'></div>
+ <div className='cometchat-call-logs-details__shimmer-item-body-subtitle'></div>
+ </div>
+ 
+ <div className='cometchat-call-logs-details__header__shimmer-item-body-tail'></div>
+ <div className='cometchat-call-logs-details__header__shimmer-item-body-tail'></div>
+ </div>
+ </div>
+ ))}
+ </div>
+ );
+ };
+
  return (
  <div className="cometchat-call-log-details">
  <div className="cometchat-call-log-details__header">
  <div className="cometchat-call-log-details__header-back" onClick={onBack} />
  {getLocalizedString("call_details")}
  </div>
  <div className="cometchat-call-log-details__call-log-item">
- <CometChatListItem avatarName={user?.getName()}
+ {user ? <CometChatListItem avatarName={user?.getName()}
  avatarURL={user?.getAvatar()}
- title={user?.getName() || ""} subtitleView={getSubtitleView()} trailingView={getTrailingView()}/>
+ title={user?.getName() || ""} subtitleView={getSubtitleView()} trailingView={getTrailingView()}/>: getLoadingView()}
  </div>
  <CometChatCallDetailsInfo call={selectedItem} />
  <div className="cometchat-call-log-details__tabs">

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

@@ -593,7 +593,7 @@ function CometChatHome(props: { theme?: string }) {
 
  const updateGroupDetails = (eventGroup: CometChat.Group) => {
  if (eventGroup.getGuid() === group?.getGuid()) {
- group.setMembersCount(eventGroup.getMembersCount());
+ group.setMembersCount(eventGroup.getMembersCount()); 
  group.setScope(eventGroup.getScope())
  group.setOwner(eventGroup.getOwner())
  setGroup(group);
@@ -658,7 +658,7 @@ function CometChatHome(props: { theme?: string }) {
  }, [loggedInUser, attachSDKGroupListenerForDetails]);
 
  const onBack = () => {
- setAppState({ type: "updateShowMessagesSearch", payload: false })
+ setAppState({ type: "updateShowMessagesSearch", payload: false });
  setAppState({ type: 'updateSideComponentTop', payload: null });
  activeSideComponentRef.current = appState.sideComponent.type;
 
@@ -1410,7 +1410,7 @@ function CometChatHome(props: { theme?: string }) {
  setAppState({ type: 'updateThreadSearchMessage', payload: undefined });
  setAppState({ type: 'updateThreadedMessage', payload: undefined });
  setAppState({ type: 'updateGoToMessageId', payload: undefined });
- setAppState({ type: "updateShowMessagesSearch", payload: false })
+ setAppState({ type: "updateShowMessagesSearch", payload: false });
  setShowNewChat(false);
  if (type === "updateSelectedItemGroup" && !(e as CometChat.Group).getHasJoined()) {
  if ((e as CometChat.Group).getType() === CometChatUIKitConstants.GroupTypes.public) {
@@ -1469,6 +1469,8 @@ function CometChatHome(props: { theme?: string }) {
  setAppState({ type: "updateSelectedItem", payload: undefined });
  }
  }
+ setAppState({ type: "updateShowMessagesSearch", payload: false });
+ setAppState({ type: "updateSideComponent", payload: { visible: false, type: "" } });
  })
 
  const ccOpenChat = CometChatUIEvents.ccOpenChat.subscribe((item) => {
@@ -1592,17 +1594,17 @@ function CometChatHome(props: { theme?: string }) {
  }, [appState.sideComponent, appState.showMessagesSearch, appState.sideComponentTop, appState.threadSearchMessage]);
 
  const openSearchComponent = () => {
- setAppState({ type: "updateShowConversationsSearch", payload: true })
+ setAppState({ type: "updateShowConversationsSearch", payload: true });
  }
  const closeSearch = () => {
- setAppState({ type: "updateShowConversationsSearch", payload: false })
+ setAppState({ type: "updateShowConversationsSearch", payload: false });
  }
  const resetSideComponent = (conversationId:string) => {
  if(selectedItem && selectedItem instanceof CometChat.Conversation && (selectedItem as CometChat.Conversation).getConversationId() !== conversationId){
  setAppState({ type: "updateSideComponent", payload: { visible: false, type: "" } });
  setAppState({ type: 'updateThreadSearchMessage', payload: undefined });
  setAppState({ type: 'updateThreadedMessage', payload: undefined });
- setAppState({ type: "updateShowMessagesSearch", payload: false })
+ setAppState({ type: "updateShowMessagesSearch", payload: false });
  activeSideComponentRef.current = "";
  }
 
@@ -1699,7 +1701,7 @@ function CometChatHome(props: { theme?: string }) {
  }}
  onGroupCreated={(group) => {
  setAppState({ type: "updateSideComponent", payload: { visible: false, type: "" } })
- setSelectedItem(group)
+ setSelectedItem(group);
  }
  }
 

sample-app/src/metaInfo.ts

@@ -1,6 +1,6 @@
 export const metaInfo = {
  name: "sample-app",
- version: "6.2.0",
+ version: "6.2.1",
  type: "sample",
  platform: "React",
 };

sample-app/src/styles/CometChatCallLog/CometChatCallLogDetails.css

@@ -176,4 +176,89 @@
  .cometchat-call-log-details__header-back {
  display: none;
  }
-}
+}
+
+.cometchat-call-logs-details__header__shimmer {
+ width: 100%;
+ height: 100%;
+ background: var(--cometchat-background-color-01, #FFF);
+ 
+ }
+ 
+ .cometchat-call-logs-details__header__shimmer-item {
+ width: 100%;
+ height: 68px;
+ display: flex;
+ min-width: 240px;
+ padding: var(--cometchat-padding-2, 8px) var(--cometchat-padding-4, 16px);
+ align-items: center;
+ gap: 12px;
+ }
+ 
+ .cometchat-call-logs-details__header__shimmer-item-avatar {
+ display: flex;
+ flex-shrink: 0;
+ width: 60px;
+ height: 60px;
+ margin-left: -4px;
+ border-radius: var(--cometchat-radius-max,1000px);
+ background: var(
+ --cometchat-shimmer-gradient-color,
+ linear-gradient(90deg, #e0e0e0 0%, #eee 100%)
+ );
+ }
+ 
+ .cometchat-call-logs-details__header__shimmer-item-body {
+ display: flex;
+ width: 100%;
+ height: 100%;
+ align-items: center;
+ 
+ gap: var(--cometchat-padding-2, 8px);
+ }
+ 
+ .cometchat-call-logs-details__header__shimmer-item-body-title-wrapper {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+ }
+ 
+ .cometchat-call-logs-details__header__shimmer-item-body-title {
+ width: 50%;
+ height: 22px;
+ flex-shrink: 0;
+ border-radius: var(--cometchat-radius-2, 8px);
+ background: var(
+ --cometchat-shimmer-gradient-color,
+ linear-gradient(90deg, #e0e0e0 0%, #eee 100%)
+ );
+ animation: shimmerAnimation 1.5s infinite linear;
+ 
+ }
+ 
+ .cometchat-call-logs-details__shimmer-item-body-subtitle {
+ width: 10%;
+ height: 12px;
+ flex-shrink: 0;
+ border-radius: var(--cometchat-radius-2, 8px);
+ background: var(
+ --cometchat-shimmer-gradient-color,
+ linear-gradient(90deg, #e0e0e0 0%, #eee 100%)
+ );
+ animation: shimmerAnimation 1.5s infinite linear;
+ 
+ }
+ 
+ .cometchat-call-logs-details__header__shimmer-item-body-tail {
+ width: 80px;
+ height: 40px;
+ min-height: 32px;
+ border-radius: var(--cometchat-radius-2, 8px);
+ background: var(
+ --cometchat-shimmer-gradient-color,
+ linear-gradient(90deg, #e0e0e0 0%, #eee 100%)
+ );
+ animation: shimmerAnimation 1.5s infinite linear;
+ }

src/CometChatUIKit/CometChatUIKit.ts

@@ -100,7 +100,7 @@ class CometChatUIKit {
  return new Promise((resolve, reject) => {
  window.CometChatUiKit = {
  name: "@cometchat/chat-uikit-react",
- version: "6.2.0",
+ version: "6.2.1",
  };
  CometChat.init(uiKitSettings?.appId, appSettings).then(() => {
  CometChat.getLoggedinUser().then((user: CometChat.User | null) => {

src/assets/message_blocked.svg

@@ -2,6 +2,7 @@ import React, { useState, useEffect, useRef } from 'react';
 import ReactMarkdown from 'react-markdown';
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
 import { oneDark, oneLight } from 'react-syntax-highlighter/dist/esm/styles/prism';
+import remarkGfm from 'remark-gfm';
 
 interface CometChatAIAssistantMessageBubbleProps {
  message?: CometChat.AIAssistantMessage
@@ -33,8 +34,7 @@ const CometChatAIAssistantMessageBubble: React.FC<CometChatAIAssistantMessageBub
  className='cometchat-ai-assistant-message-bubble'
  >
  <ReactMarkdown
-
-
+ remarkPlugins={[remarkGfm]}
  children={message?.getAssistantMessageData()?.getText() || ''}
  components={{
  code({ node, className, children, ...props }: any) {