diff --git a/package.json b/package.json
index e7b5af0..09e9f53 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@cometchat/chat-uikit-react",
-  "version": "5.0.0",
+  "version": "5.0.1",
   "description": "Ready-to-use Chat UI Components for React(Javascript/Web)",
   "author": "CometChat",
   "dependencies": {
diff --git a/sample-app/CHANGELOG.md b/sample-app/CHANGELOG.md
index 5fc6fd5..d0233ef 100644
--- a/sample-app/CHANGELOG.md
+++ b/sample-app/CHANGELOG.md
@@ -1,3 +1,16 @@
+## [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
diff --git a/sample-app/package-lock.json b/sample-app/package-lock.json
index a307c0b..d67a828 100644
--- a/sample-app/package-lock.json
+++ b/sample-app/package-lock.json
@@ -1,17 +1,17 @@
 {
   "name": "sample-app",
-  "version": "5.0.0-beta1",
+  "version": "5.0.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "sample-app",
-      "version": "5.0.0-beta1",
+      "version": "5.0.0",
       "license": "SEE LICENSE IN LICENSE.md",
       "dependencies": {
         "@cometchat/calls-sdk-javascript": "^4.0.11",
         "@cometchat/chat-sdk-javascript": "^4.0.10",
-        "@cometchat/chat-uikit-react": "^5.0.0-beta1",
+        "@cometchat/chat-uikit-react": "~5.0.0",
         "react": "18.2.0",
         "react-dom": "18.2.0",
         "react-router-dom": "6.14.2",
@@ -29,7 +29,6 @@
         "@typescript-eslint/eslint-plugin": "^8.15.0",
         "@typescript-eslint/parser": "^8.15.0",
         "eslint": "^8.0.0",
-        "sass": "^1.78.0",
         "typescript": "4.9.5"
       }
     },
@@ -2002,9 +2001,9 @@
       "integrity": "sha512-AQ8DuVkCbsOUl3jzqyYdPafVZQbFzN5zYrb/RFCo6iIJPIsAlPIPz3YMi0vvl2rsIz+dJvyp2FNwEWUAyLechQ=="
     },
     "node_modules/@cometchat/chat-uikit-react": {
-      "version": "5.0.0-beta1",
-      "resolved": "https://registry.npmjs.org/@cometchat/chat-uikit-react/-/chat-uikit-react-5.0.0-beta1.tgz",
-      "integrity": "sha512-EOJYNsKsAjLhevGyNDpjVNzi1S0tq8W4siv48kJQ+s5Y6JGJf42oIla0R/FuBviF7lqNBmY66XU0S8ySzsfUOg==",
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/@cometchat/chat-uikit-react/-/chat-uikit-react-5.0.0.tgz",
+      "integrity": "sha512-9um/sifyQ0Zjpi63/eHVeTUGl8Z1zy3UpH0aVvnPFtPzuHZyF0oHC4Ii7pWq7Plxg295TzzRxE4nA6Y4NNLTZg==",
       "dependencies": {
         "@cometchat/chat-sdk-javascript": "^4.0.10",
         "@rollup/plugin-json": "^6.1.0",
@@ -2901,302 +2900,6 @@
         "node": ">= 8"
       }
     },
-    "node_modules/@parcel/watcher": {
-      "version": "2.5.0",
-      "resolved": "https://registry.npmjs.org/@parcel/watcher/-/watcher-2.5.0.tgz",
-      "integrity": "sha512-i0GV1yJnm2n3Yq1qw6QrUrd/LI9bE8WEBOTtOkpCXHHdyN3TAGgqAK/DAT05z4fq2x04cARXt2pDmjWjL92iTQ==",
-      "dev": true,
-      "hasInstallScript": true,
-      "optional": true,
-      "dependencies": {
-        "detect-libc": "^1.0.3",
-        "is-glob": "^4.0.3",
-        "micromatch": "^4.0.5",
-        "node-addon-api": "^7.0.0"
-      },
-      "engines": {
-        "node": ">= 10.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      },
-      "optionalDependencies": {
-        "@parcel/watcher-android-arm64": "2.5.0",
-        "@parcel/watcher-darwin-arm64": "2.5.0",
-        "@parcel/watcher-darwin-x64": "2.5.0",
-        "@parcel/watcher-freebsd-x64": "2.5.0",
-        "@parcel/watcher-linux-arm-glibc": "2.5.0",
-        "@parcel/watcher-linux-arm-musl": "2.5.0",
-        "@parcel/watcher-linux-arm64-glibc": "2.5.0",
-        "@parcel/watcher-linux-arm64-musl": "2.5.0",
-        "@parcel/watcher-linux-x64-glibc": "2.5.0",
-        "@parcel/watcher-linux-x64-musl": "2.5.0",
-        "@parcel/watcher-win32-arm64": "2.5.0",
-        "@parcel/watcher-win32-ia32": "2.5.0",
-        "@parcel/watcher-win32-x64": "2.5.0"
-      }
-    },
-    "node_modules/@parcel/watcher-android-arm64": {
-      "version": "2.5.0",
-      "resolved": "https://registry.npmjs.org/@parcel/watcher-android-arm64/-/watcher-android-arm64-2.5.0.tgz",
-      "integrity": "sha512-qlX4eS28bUcQCdribHkg/herLe+0A9RyYC+mm2PXpncit8z5b3nSqGVzMNR3CmtAOgRutiZ02eIJJgP/b1iEFQ==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "android"
-      ],
-      "engines": {
-        "node": ">= 10.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/@parcel/watcher-darwin-arm64": {
-      "version": "2.5.0",
-      "resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-arm64/-/watcher-darwin-arm64-2.5.0.tgz",
-      "integrity": "sha512-hyZ3TANnzGfLpRA2s/4U1kbw2ZI4qGxaRJbBH2DCSREFfubMswheh8TeiC1sGZ3z2jUf3s37P0BBlrD3sjVTUw==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": ">= 10.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/@parcel/watcher-darwin-x64": {
-      "version": "2.5.0",
-      "resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-x64/-/watcher-darwin-x64-2.5.0.tgz",
-      "integrity": "sha512-9rhlwd78saKf18fT869/poydQK8YqlU26TMiNg7AIu7eBp9adqbJZqmdFOsbZ5cnLp5XvRo9wcFmNHgHdWaGYA==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": ">= 10.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/@parcel/watcher-freebsd-x64": {
-      "version": "2.5.0",
-      "resolved": "https://registry.npmjs.org/@parcel/watcher-freebsd-x64/-/watcher-freebsd-x64-2.5.0.tgz",
-      "integrity": "sha512-syvfhZzyM8kErg3VF0xpV8dixJ+RzbUaaGaeb7uDuz0D3FK97/mZ5AJQ3XNnDsXX7KkFNtyQyFrXZzQIcN49Tw==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "freebsd"
-      ],
-      "engines": {
-        "node": ">= 10.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/@parcel/watcher-linux-arm-glibc": {
-      "version": "2.5.0",
-      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-glibc/-/watcher-linux-arm-glibc-2.5.0.tgz",
-      "integrity": "sha512-0VQY1K35DQET3dVYWpOaPFecqOT9dbuCfzjxoQyif1Wc574t3kOSkKevULddcR9znz1TcklCE7Ht6NIxjvTqLA==",
-      "cpu": [
-        "arm"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/@parcel/watcher-linux-arm-musl": {
-      "version": "2.5.0",
-      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-musl/-/watcher-linux-arm-musl-2.5.0.tgz",
-      "integrity": "sha512-6uHywSIzz8+vi2lAzFeltnYbdHsDm3iIB57d4g5oaB9vKwjb6N6dRIgZMujw4nm5r6v9/BQH0noq6DzHrqr2pA==",
-      "cpu": [
-        "arm"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/@parcel/watcher-linux-arm64-glibc": {
-      "version": "2.5.0",
-      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-glibc/-/watcher-linux-arm64-glibc-2.5.0.tgz",
-      "integrity": "sha512-BfNjXwZKxBy4WibDb/LDCriWSKLz+jJRL3cM/DllnHH5QUyoiUNEp3GmL80ZqxeumoADfCCP19+qiYiC8gUBjA==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/@parcel/watcher-linux-arm64-musl": {
-      "version": "2.5.0",
-      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-musl/-/watcher-linux-arm64-musl-2.5.0.tgz",
-      "integrity": "sha512-S1qARKOphxfiBEkwLUbHjCY9BWPdWnW9j7f7Hb2jPplu8UZ3nes7zpPOW9bkLbHRvWM0WDTsjdOTUgW0xLBN1Q==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/@parcel/watcher-linux-x64-glibc": {
-      "version": "2.5.0",
-      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-glibc/-/watcher-linux-x64-glibc-2.5.0.tgz",
-      "integrity": "sha512-d9AOkusyXARkFD66S6zlGXyzx5RvY+chTP9Jp0ypSTC9d4lzyRs9ovGf/80VCxjKddcUvnsGwCHWuF2EoPgWjw==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/@parcel/watcher-linux-x64-musl": {
-      "version": "2.5.0",
-      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-musl/-/watcher-linux-x64-musl-2.5.0.tgz",
-      "integrity": "sha512-iqOC+GoTDoFyk/VYSFHwjHhYrk8bljW6zOhPuhi5t9ulqiYq1togGJB5e3PwYVFFfeVgc6pbz3JdQyDoBszVaA==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/@parcel/watcher-win32-arm64": {
-      "version": "2.5.0",
-      "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-arm64/-/watcher-win32-arm64-2.5.0.tgz",
-      "integrity": "sha512-twtft1d+JRNkM5YbmexfcH/N4znDtjgysFaV9zvZmmJezQsKpkfLYJ+JFV3uygugK6AtIM2oADPkB2AdhBrNig==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">= 10.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/@parcel/watcher-win32-ia32": {
-      "version": "2.5.0",
-      "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-ia32/-/watcher-win32-ia32-2.5.0.tgz",
-      "integrity": "sha512-+rgpsNRKwo8A53elqbbHXdOMtY/tAtTzManTWShB5Kk54N8Q9mzNWV7tV+IbGueCbcj826MfWGU3mprWtuf1TA==",
-      "cpu": [
-        "ia32"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">= 10.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/@parcel/watcher-win32-x64": {
-      "version": "2.5.0",
-      "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-x64/-/watcher-win32-x64-2.5.0.tgz",
-      "integrity": "sha512-lPrxve92zEHdgeff3aiu4gDOIt4u7sJYha6wbdEZDCDUhtjTsOMiaJzG5lMY4GkWH8p0fMmO2Ppq5G5XXG+DQw==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">= 10.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
     "node_modules/@pmmmwh/react-refresh-webpack-plugin": {
       "version": "0.5.15",
       "resolved": "https://registry.npmjs.org/@pmmmwh/react-refresh-webpack-plugin/-/react-refresh-webpack-plugin-0.5.15.tgz",
@@ -3705,26 +3408,6 @@
         "url": "https://github.com/sponsors/gregberge"
       }
     },
-    "node_modules/@testing-library/dom": {
-      "version": "10.4.0",
-      "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.0.tgz",
-      "integrity": "sha512-pemlzrSESWbdAloYml3bAJMEfNh1Z7EduzqPKprCH5S341frlpYnUEW0H72dLxa6IsYr+mPno20GiSm+h9dEdQ==",
-      "dev": true,
-      "peer": true,
-      "dependencies": {
-        "@babel/code-frame": "^7.10.4",
-        "@babel/runtime": "^7.12.5",
-        "@types/aria-query": "^5.0.1",
-        "aria-query": "5.3.0",
-        "chalk": "^4.1.0",
-        "dom-accessibility-api": "^0.5.9",
-        "lz-string": "^1.5.0",
-        "pretty-format": "^27.0.2"
-      },
-      "engines": {
-        "node": ">=18"
-      }
-    },
     "node_modules/@testing-library/jest-dom": {
       "version": "5.17.0",
       "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-5.17.0.tgz",
@@ -6758,19 +6441,6 @@
         "npm": "1.2.8000 || >= 1.4.16"
       }
     },
-    "node_modules/detect-libc": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz",
-      "integrity": "sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg==",
-      "dev": true,
-      "optional": true,
-      "bin": {
-        "detect-libc": "bin/detect-libc.js"
-      },
-      "engines": {
-        "node": ">=0.10"
-      }
-    },
     "node_modules/detect-newline": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/detect-newline/-/detect-newline-3.1.0.tgz",
@@ -9431,12 +9101,6 @@
         "url": "https://opencollective.com/immer"
       }
     },
-    "node_modules/immutable": {
-      "version": "5.0.3",
-      "resolved": "https://registry.npmjs.org/immutable/-/immutable-5.0.3.tgz",
-      "integrity": "sha512-P8IdPQHq3lA1xVeBRi5VPqUm5HDgKnx0Ru51wZz5mjxHr5n3RWhjIpOFU7ybkUxfB+5IToy+OLaHYDBIWsv+uw==",
-      "devOptional": true
-    },
     "node_modules/import-fresh": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -11663,13 +11327,6 @@
         "tslib": "^2.0.3"
       }
     },
-    "node_modules/node-addon-api": {
-      "version": "7.1.1",
-      "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-7.1.1.tgz",
-      "integrity": "sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==",
-      "dev": true,
-      "optional": true
-    },
     "node_modules/node-forge": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-1.3.1.tgz",
@@ -14457,26 +14114,6 @@
       "resolved": "https://registry.npmjs.org/sanitize.css/-/sanitize.css-13.0.0.tgz",
       "integrity": "sha512-ZRwKbh/eQ6w9vmTjkuG0Ioi3HBwPFce0O+v//ve+aOq1oeCy7jMV2qzzAlpsNuqpqCBjjriM1lbtZbF/Q8jVyA=="
     },
-    "node_modules/sass": {
-      "version": "1.81.0",
-      "resolved": "https://registry.npmjs.org/sass/-/sass-1.81.0.tgz",
-      "integrity": "sha512-Q4fOxRfhmv3sqCLoGfvrC9pRV8btc0UtqL9mN6Yrv6Qi9ScL55CVH1vlPP863ISLEEMNLLuu9P+enCeGHlnzhA==",
-      "devOptional": true,
-      "dependencies": {
-        "chokidar": "^4.0.0",
-        "immutable": "^5.0.2",
-        "source-map-js": ">=0.6.2 <2.0.0"
-      },
-      "bin": {
-        "sass": "sass.js"
-      },
-      "engines": {
-        "node": ">=14.0.0"
-      },
-      "optionalDependencies": {
-        "@parcel/watcher": "^2.4.1"
-      }
-    },
     "node_modules/sass-loader": {
       "version": "12.6.0",
       "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-12.6.0.tgz",
@@ -14514,34 +14151,6 @@
         }
       }
     },
-    "node_modules/sass/node_modules/chokidar": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.1.tgz",
-      "integrity": "sha512-n8enUVCED/KVRQlab1hr3MVpcVMvxtZjmEa956u+4YijlmQED223XMSYj2tLuKvr4jcCTzNNMpQDUer72MMmzA==",
-      "devOptional": true,
-      "dependencies": {
-        "readdirp": "^4.0.1"
-      },
-      "engines": {
-        "node": ">= 14.16.0"
-      },
-      "funding": {
-        "url": "https://paulmillr.com/funding/"
-      }
-    },
-    "node_modules/sass/node_modules/readdirp": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.0.2.tgz",
-      "integrity": "sha512-yDMz9g+VaZkqBYS/ozoBJwaBhTbZo3UNYQHNRw1D3UFQB8oHB4uS/tAODO+ZLjGWmUbKnIlOWO+aaIiAxrUWHA==",
-      "devOptional": true,
-      "engines": {
-        "node": ">= 14.16.0"
-      },
-      "funding": {
-        "type": "individual",
-        "url": "https://paulmillr.com/funding/"
-      }
-    },
     "node_modules/sax": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",
@@ -16086,6 +15695,7 @@
       "version": "4.9.5",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz",
       "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==",
+      "dev": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
diff --git a/sample-app/package.json b/sample-app/package.json
index ca6d12e..89efead 100644
--- a/sample-app/package.json
+++ b/sample-app/package.json
@@ -1,13 +1,13 @@
 {
   "name": "sample-app",
-  "version": "5.0.0",
+  "version": "5.0.1",
   "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",
+    "@cometchat/chat-uikit-react": "~5.0.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-router-dom": "6.14.2",
@@ -37,7 +37,6 @@
     "@typescript-eslint/eslint-plugin": "^8.15.0",
     "@typescript-eslint/parser": "^8.15.0",
     "eslint": "^8.0.0",
-    "sass": "^1.78.0",
     "typescript": "4.9.5"
   },
   "overrides": {
diff --git a/sample-app/src/App.scss b/sample-app/src/App.scss
deleted file mode 100644
index 0292b46..0000000
--- a/sample-app/src/App.scss
+++ /dev/null
@@ -1,37 +0,0 @@
-@import url('../node_modules/@cometchat/chat-uikit-react/dist/styles/css-variables.css');
-
-.App {
-  text-align: center;
-  width: 100vw;
-  height: 100vh;
-  background-color: #282c34;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  height: 100px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-
-  to {
-    transform: rotate(360deg);
-  }
-}
\ No newline at end of file
diff --git a/sample-app/src/App.tsx b/sample-app/src/App.tsx
index c5e8a87..40318aa 100644
--- a/sample-app/src/App.tsx
+++ b/sample-app/src/App.tsx
@@ -1,5 +1,3 @@
-import { useEffect, useState } from 'react';
-import './App.scss';
 import "./styles/App.css";
 import { BrowserRouter } from 'react-router-dom';
 import Login from "./components/CometChatLogin/CometChatLogin";
diff --git a/sample-app/src/components/CometChatBannedMembers/CometChatBannedMembers.tsx b/sample-app/src/components/CometChatBannedMembers/CometChatBannedMembers.tsx
index e3bc734..63dcbb6 100644
--- a/sample-app/src/components/CometChatBannedMembers/CometChatBannedMembers.tsx
+++ b/sample-app/src/components/CometChatBannedMembers/CometChatBannedMembers.tsx
@@ -10,6 +10,7 @@ interface bannedMembersProp {
 export const CometChatBannedMembers = (props: bannedMembersProp) => {
     const { group } = props;
     const [bannedMembers, setBannedMembers] = useState<CometChat.User[]>([]);
+    const [state, setState] = useState<States>(States.loading);
     const bannedMembersRequestBuilderRef = useRef<any>({});
 
     useEffect(() => {
@@ -79,6 +80,7 @@ export const CometChatBannedMembers = (props: bannedMembersProp) => {
 
     const fetchNextAndAppendBannedMembers = useCallback(async (): Promise<void> => {
         try {
+            setState(States.loading);
             if (Object.keys(bannedMembersRequestBuilderRef.current).length == 0) {
                 let finalBannedMembersRequestBuilder = new CometChat.BannedMembersRequestBuilder(group.getGuid()).setLimit(30).build();
                 bannedMembersRequestBuilderRef.current = finalBannedMembersRequestBuilder;
@@ -93,9 +95,11 @@ export const CometChatBannedMembers = (props: bannedMembersProp) => {
                     return unique;
                 })
             }
+            setState(States.loaded);
         }
         catch (error) {
             console.log(error);
+            setState(States.error);
         }
     }, [group, bannedMembersRequestBuilderRef]);
 
@@ -177,26 +181,39 @@ export const CometChatBannedMembers = (props: bannedMembersProp) => {
 
     return (
         <div className="cometchat-banned-members">
-            {bannedMembers.length == 0 ?
-                <div className="cometchat-banned-members__empty">
-                    <div className="cometchat-banned-members__empty-icon" />
-                    <div className="cometchat-banned-members__empty-text">
-                        {localize("NO_BANNED_MEMBERS")}
-                    </div>
+            {state === States.loading ?
+                <div className="cometchat-banned-members__shimmer">
+                    {[...Array(3)].map((_, index) => (
+                        <div key={index} className="cometchat-banned-members__shimmer-item">
+                            <div className="cometchat-banned-members__shimmer-item-avatar"></div>
+                            <div className="cometchat-banned-members__shimmer-item-title"></div>
+                        </div>
+                    ))}
                 </div>
                 :
-                <CometChatList
-                    hideSearch={true}
-                    list={bannedMembers}
-                    listItemKey="getUid"
-                    itemView={getListItem()}
-                    showSectionHeader={false}
-                    onScrolledToBottom={() => fetchNextAndAppendBannedMembers()}
-                    state={bannedMembers.length === 0
-                        ? States.loading
-                        : States.loaded}
-                />
+                <>
+                    {bannedMembers.length == 0 ?
+                        <div className="cometchat-banned-members__empty">
+                            <div className="cometchat-banned-members__empty-icon" />
+                            <div className="cometchat-banned-members__empty-text">
+                                {localize("NO_BANNED_MEMBERS")}
+                            </div>
+                        </div>
+                        :
+                        <CometChatList
+                            hideSearch={true}
+                            list={bannedMembers}
+                            listItemKey="getUid"
+                            itemView={getListItem()}
+                            showSectionHeader={false}
+                            onScrolledToBottom={() => fetchNextAndAppendBannedMembers()}
+                            state={bannedMembers.length === 0
+                                ? States.loading
+                                : States.loaded}
+                        />
+                    }
+                </>
             }
-        </div>
+        </div >
     )
 }
\ No newline at end of file
diff --git a/sample-app/src/metaInfo.ts b/sample-app/src/metaInfo.ts
index 1550778..e2d4f81 100644
--- 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.0",
+  version: "5.0.1",
   type: "sample",
   platform: "React",
 };
diff --git a/sample-app/src/styles/App.css b/sample-app/src/styles/App.css
index bdc684f..c1c08b5 100644
--- a/sample-app/src/styles/App.css
+++ b/sample-app/src/styles/App.css
@@ -1,3 +1,41 @@
+@import url('../../node_modules/@cometchat/chat-uikit-react/dist/styles/css-variables.css');
+
+.App {
+    text-align: center;
+    width: 100vw;
+    height: 100vh;
+    background-color: #282c34;
+}
+
+.App-logo {
+    height: 40vmin;
+    pointer-events: none;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+    .App-logo {
+        animation: App-logo-spin infinite 20s linear;
+    }
+}
+
+.App-header {
+    height: 100px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+
+@keyframes App-logo-spin {
+    from {
+        transform: rotate(0deg);
+    }
+
+    to {
+        transform: rotate(360deg);
+    }
+}
+
 .cometchat-root {
     width: 100%;
     height: 100%;
@@ -8,7 +46,7 @@
 
 .conversations-wrapper {
     display: flex;
-    width: 30vw;
+    width: 30%;
     max-width: 420px;
     height: 100vh;
     flex-direction: column;
@@ -69,7 +107,7 @@
 }
 
 .messages-wrapper {
-    width: 40vw;
+    width: 40%;
     height: 100%;
     display: flex;
     flex-direction: column;
diff --git a/sample-app/src/styles/CometChatBannedMembers/CometChatBannedMembers.css b/sample-app/src/styles/CometChatBannedMembers/CometChatBannedMembers.css
index 177a429..0ebd4ce 100644
--- a/sample-app/src/styles/CometChatBannedMembers/CometChatBannedMembers.css
+++ b/sample-app/src/styles/CometChatBannedMembers/CometChatBannedMembers.css
@@ -34,4 +34,52 @@
 
 .cometchat-banned-members .cometchat-list-item__trailing-view .cometchat-button__icon-default {
     background: var(--cometchat-icon-color-secondary, #A1A1A1);
+}
+
+.cometchat-banned-members__shimmer {
+    width: 100%;
+    height: 100%;
+    background: var(--cometchat-background-color-01, #fff);
+}
+
+.cometchat-banned-members__shimmer-item {
+    width: 100%;
+    height: 72px;
+    display: flex;
+    width: 100%;
+    min-width: 240px;
+    max-width: 1440px;
+    padding: var(--cometchat-padding-3, 12px) var(--cometchat-padding-4, 16px);
+    align-items: center;
+    gap: 12px;
+}
+
+.cometchat-banned-members__shimmer-item-avatar {
+    display: flex;
+    flex-shrink: 0;
+    width: 48px;
+    height: 48px;
+    border-radius: var(--cometchat-radius-max, 1000px);
+    background: var(--cometchat-shimmer-gradient-color,
+            linear-gradient(90deg, #e0e0e0 0%, #eee 100%));
+}
+
+.cometchat-banned-members__shimmer-item-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;
+}
+
+@keyframes shimmerAnimation {
+    0% {
+        background-position: -468px 0;
+    }
+
+    100% {
+        background-position: 468px 0;
+    }
 }
\ No newline at end of file
diff --git a/sample-app/src/styles/CometChatDetails/CometChatDetails.css b/sample-app/src/styles/CometChatDetails/CometChatDetails.css
index 50dd7e2..eb00b21 100644
--- a/sample-app/src/styles/CometChatDetails/CometChatDetails.css
+++ b/sample-app/src/styles/CometChatDetails/CometChatDetails.css
@@ -1,6 +1,6 @@
 .side-component-wrapper {
     display: flex;
-    width: 30vw;
+    width: 30%;
     max-width: 420px;
     flex-direction: column;
     align-items: flex-start;
@@ -84,6 +84,11 @@
     border-left: 1px solid var(--cometchat-border-color-light, #F5F5F5);
 }
 
+.side-component-content::-webkit-scrollbar,
+.side-component-content::-webkit-scrollbar-thumb {
+    display: none;
+}
+
 .side-component-content__group {
     display: flex;
     flex-direction: column;
diff --git a/src/CometChatUIKit/CometChatUIKit.ts b/src/CometChatUIKit/CometChatUIKit.ts
index 4597d49..f1d1e64 100644
--- a/src/CometChatUIKit/CometChatUIKit.ts
+++ b/src/CometChatUIKit/CometChatUIKit.ts
@@ -99,7 +99,7 @@ class CometChatUIKit {
         return new Promise((resolve, reject) => {
             window.CometChatUiKit = {
                 name: "@cometchat/chat-uikit-react",
-                version: "5.0.0",
+                version: "5.0.1",
             };
             CometChat.init(uiKitSettings?.appId, appSettings).then(() => {
                 CometChat.getLoggedinUser().then((user: CometChat.User | null) => {
diff --git a/src/assets/image_placeholder.png b/src/assets/image_placeholder.png
new file mode 100644
index 0000000..32c54f3
Binary files /dev/null and b/src/assets/image_placeholder.png differ
diff --git a/src/components/BaseComponents/CometChatAudioBubble/CometChatAudioBubble.tsx b/src/components/BaseComponents/CometChatAudioBubble/CometChatAudioBubble.tsx
index a5a52ef..f0e5267 100644
--- a/src/components/BaseComponents/CometChatAudioBubble/CometChatAudioBubble.tsx
+++ b/src/components/BaseComponents/CometChatAudioBubble/CometChatAudioBubble.tsx
@@ -1,20 +1,12 @@
 import { useRef, useState, useEffect, useCallback } from "react";
 import WaveSurfer from "./src/wavesurfer";
-
+import { closeCurrentMediaPlayer, currentAudioPlayer } from "../../../utils/util";
 interface AudioBubbleProps {
     /* URL of the audio to be played. */
     src: string;
     /* flag for toggle styling for audio bubble */
     isSentByMe?: boolean;
 }
-/*
-global instance of waveSurfer.
-*/
-let currentPlayingWaveSurfer: {
-    instance: WaveSurfer | null;
-    setIsPlaying: ((isPlaying: boolean) => void) | null;
-  } = { instance: null, setIsPlaying: null };
-
 /*
     CometChatAudioBubble is a generic component used to play audio. It is generally used for audio messages in chat.
     It accepts the URL of the audio to be played, along with other props like autoPlay, loop, and muted for customization purposes.
@@ -23,14 +15,12 @@ const CometChatAudioBubble = (props: AudioBubbleProps) => {
     const { src = "", isSentByMe = true } = props;
     const waveformRef = useRef<HTMLDivElement | null>(null);
     const abortControllerRef = useRef<AbortController | null>(null);
-
     const [waveSurfer, setWaveSurfer] = useState<WaveSurfer | null>(null);
     const [isPlaying, setIsPlaying] = useState(false);
     const [progress, setProgress] = useState(0);
     const [isDownloading, setIsDownloading] = useState(false);
     const [currentTime, setCurrentTime] = useState(0);
     const [duration, setDuration] = useState(0);
-
     // Moved useEffect logic to a separate function
     const initializeWaveSurfer = useCallback(() => {
         if (waveformRef.current) {
@@ -70,7 +60,6 @@ const CometChatAudioBubble = (props: AudioBubbleProps) => {
                 width: 140,
 
             });
-
             wave.load(src);
             setWaveSurfer(wave);
             // Set duration when audio is ready
@@ -93,7 +82,11 @@ const CometChatAudioBubble = (props: AudioBubbleProps) => {
             });
 
             // Clean up WaveSurfer instance on unmount
-            return () => wave.destroy();
+            return () => {
+                waveformRef.current = null;
+                currentAudioPlayer.instance = null;
+                closeCurrentMediaPlayer(false);
+            }
         }
     }, [src, isSentByMe]);
 
@@ -112,27 +105,25 @@ const CometChatAudioBubble = (props: AudioBubbleProps) => {
     // Handle play/pause functionality
     const handlePlayPause = () => {
         if (waveSurfer) {
+            closeCurrentMediaPlayer(false);
           // Pause the currently playing instance
           if (
-            currentPlayingWaveSurfer.instance &&
-            currentPlayingWaveSurfer.instance !== waveSurfer
+            currentAudioPlayer.instance &&
+            currentAudioPlayer.instance !== waveSurfer
           ) {
-            currentPlayingWaveSurfer.instance.pause();
-            if (currentPlayingWaveSurfer.setIsPlaying) {
-              currentPlayingWaveSurfer.setIsPlaying(false);
+            currentAudioPlayer.instance.pause();
+            if (currentAudioPlayer.setIsPlaying) {
+              currentAudioPlayer.setIsPlaying(false);
             }
           }
-    
           // Play or pause the current instance
           waveSurfer.playPause();
           const currentlyPlaying = waveSurfer.isPlaying();
           setIsPlaying(currentlyPlaying);
-    
           // Update the global reference
-          currentPlayingWaveSurfer = {
-            instance: currentlyPlaying ? waveSurfer : null,
-            setIsPlaying: currentlyPlaying ? setIsPlaying : null,
-          };
+          currentAudioPlayer.instance =  currentlyPlaying ? waveSurfer : null;
+          currentAudioPlayer.setIsPlaying  = currentlyPlaying ? setIsPlaying : null;
+
         }
       };
 
@@ -169,7 +160,7 @@ const CometChatAudioBubble = (props: AudioBubbleProps) => {
     
             // Use the original URL to extract the filename
             const urlParts = src.split('/');
-            const fileName = urlParts[urlParts.length - 1]; // Extracts "1729545215_1928686939_84043460f10973c094be04725f4cc776.mp3"
+            const fileName = urlParts[urlParts.length - 1];
     
             // Set the download attribute with the correct filename
             link.href = URL.createObjectURL(blob);
diff --git a/src/components/BaseComponents/CometChatImageBubble/CometChatImageBubble.tsx b/src/components/BaseComponents/CometChatImageBubble/CometChatImageBubble.tsx
index 9ca30be..5c6f36c 100644
--- a/src/components/BaseComponents/CometChatImageBubble/CometChatImageBubble.tsx
+++ b/src/components/BaseComponents/CometChatImageBubble/CometChatImageBubble.tsx
@@ -1,5 +1,5 @@
 import { useEffect } from "react";
-import placeholderIcon from "../../../assets/placeholder.png"
+import placeholderIcon from "../../../assets/image_placeholder.png"
 import { useCometChatImageBubble } from "./useCometChatImageBubble";
 
 interface ImageBubbleProps {
@@ -9,8 +9,10 @@ interface ImageBubbleProps {
     placeholderImage?: string;
     /* callback which is triggered on click of the image. */
     onImageClicked?: (input: { src: string }) => void;
-    /* boolean to oggle bubble styling. */
+    /* boolean to toggle bubble styling. */
     isSentByMe?: boolean;
+    /* boolean flag to hide the placeholder image while loading. */
+    disableLoadingState?: boolean;
 }
 /*
     CometChatImageBubble is a generic component used to display images. It is generally used for image messages in chat.
@@ -23,19 +25,28 @@ const CometChatImageBubble = (props: ImageBubbleProps) => {
         placeholderImage = placeholderIcon,
         onImageClicked = () => { },
         isSentByMe = true,
+        disableLoadingState = false
     } = props;
 
     const { image, updateImage } = useCometChatImageBubble({ src, placeholderImage });
 
     useEffect(() => {
-        updateImage()
-    }, []);
+        if (!disableLoadingState) {
+            updateImage();
+        }
+    }, [disableLoadingState]);
 
-    return (
-        <div className="cometchat">
+    const getImageBubbleView = () => {
+        return (
             <div className={`cometchat-image-bubble ${isSentByMe ? "cometchat-image-bubble-outgoing" : "cometchat-image-bubble-incoming"}`} onClick={() => onImageClicked({ src })}>
-                <img className="cometchat-image-bubble__body" src={image} />
+                <img className="cometchat-image-bubble__body" src={disableLoadingState ? src : image} />
             </div >
+        )
+    }
+
+    return (
+        <div className="cometchat">
+            {getImageBubbleView()}
         </div>
     )
 }
diff --git a/src/components/BaseComponents/CometChatMediaRecorder/CometChatMediaRecorder.tsx b/src/components/BaseComponents/CometChatMediaRecorder/CometChatMediaRecorder.tsx
index 9f198c0..383626c 100644
--- a/src/components/BaseComponents/CometChatMediaRecorder/CometChatMediaRecorder.tsx
+++ b/src/components/BaseComponents/CometChatMediaRecorder/CometChatMediaRecorder.tsx
@@ -1,6 +1,7 @@
 import React, { useState, useEffect, useRef } from "react";
 import Recorder from "./Helper/index.js";
 import { CometChatAudioBubble } from "../CometChatAudioBubble/CometChatAudioBubble";
+import { closeCurrentMediaPlayer, currentMediaPlayer } from "../../../utils/util";
 
 interface MediaRecorderProps {
     autoRecording?: boolean;
@@ -85,6 +86,7 @@ const CometChatMediaRecorder: React.FC<MediaRecorderProps> = ({
     };
 
     const handleStartRecording = async () => {
+        closeCurrentMediaPlayer();
         const hasAudioInput = await navigator.mediaDevices.enumerateDevices()
             .then(devices => {
                 let hasMic = false;
@@ -100,6 +102,7 @@ const CometChatMediaRecorder: React.FC<MediaRecorderProps> = ({
             counterRunning.current = true;
             createMedia.current = true;
             if (isPaused) {
+                currentMediaPlayer.mediaRecorder = mediaRecorder as MediaRecorder;
                 (mediaRecorder as MediaRecorder)?.resume();
                 setIsPaused(false);
                 startTimer();
@@ -108,6 +111,7 @@ const CometChatMediaRecorder: React.FC<MediaRecorderProps> = ({
                 reset();
                 initMediaRecorder().then(() => {
                     (mediaRecorder as MediaRecorder)?.start();
+                    currentMediaPlayer.mediaRecorder = mediaRecorder as MediaRecorder;
                     setCounter(0);
                     startTimer();
                     setIsRecording(true);
@@ -122,6 +126,7 @@ const CometChatMediaRecorder: React.FC<MediaRecorderProps> = ({
 
     const handleStopRecording = () => {
         setIsPaused(false);
+        closeCurrentMediaPlayer();
         (mediaRecorder as MediaRecorder)?.stop();
         setIsRecording(false);
         stopTimer();
@@ -130,12 +135,15 @@ const CometChatMediaRecorder: React.FC<MediaRecorderProps> = ({
     };
 
     const handleCloseRecording = () => {
+        closeCurrentMediaPlayer();
+        currentMediaPlayer.mediaRecorder = null;
         createMedia.current = false
         onCloseRecording?.();
         reset();
     };
 
     const handleSubmitRecording = () => {
+        closeCurrentMediaPlayer();
         if (blobRef.current) {
             onSubmitRecording?.(blobRef.current);
             reset();
@@ -143,6 +151,7 @@ const CometChatMediaRecorder: React.FC<MediaRecorderProps> = ({
     };
 
     const reset = () => {
+        closeCurrentMediaPlayer();
         setMediaRecorder(undefined);
         setMediaPreviewUrl(undefined);
         setIsRecording(false);
diff --git a/src/components/BaseComponents/CometChatTextBubble/useCometChatTextBubble.ts b/src/components/BaseComponents/CometChatTextBubble/useCometChatTextBubble.ts
index c7c1098..93e8734 100644
--- a/src/components/BaseComponents/CometChatTextBubble/useCometChatTextBubble.ts
+++ b/src/components/BaseComponents/CometChatTextBubble/useCometChatTextBubble.ts
@@ -12,30 +12,32 @@ export const useCometChatTextBubble = (props: { textFormatters: Array<CometChatT
         try {
             let el = document.createElement("div");
             el.innerHTML = text;
-            let frag = document.createDocumentFragment(),
-                node,
-                lastNode;
-            while ((node = el.firstChild)) {
-                if (node instanceof HTMLElement) {
-                    if (textFormatters && textFormatters.length) {
-                        for (let i = 0; i < textFormatters.length; i++) {
-                            node = textFormatters[i].registerEventListeners(
-                                node,
-                                node.classList
-                            );
-                        }
-                    }
+            let frag = document.createDocumentFragment();
+            const clonedNodes = Array.from(el.childNodes);
+            clonedNodes.forEach((node) => {
+                if (node.nodeType === Node.TEXT_NODE) {
+                    const span = document.createElement("span");
+                    span.style.whiteSpace = "pre-wrap";
+                    span.textContent = node.textContent ?? "";
+                    frag.appendChild(span);
+                }
+                else if (node instanceof HTMLElement) {
                     frag.appendChild(node);
                 }
-                lastNode = frag.appendChild(node);
-            }
-            textElement!.textContent = "";
-
+            });
+            textElement.textContent = "";
             textElement.appendChild(frag);
+
         } catch (error) {
-            console.log(error);
+            console.error(error);
         }
-    }
+    };
+
+
+
+
+
+
 
     return {
         pasteHtml,
diff --git a/src/components/BaseComponents/CometChatVideoBubble/CometChatVideoBubble.tsx b/src/components/BaseComponents/CometChatVideoBubble/CometChatVideoBubble.tsx
index ef234d2..fb95a47 100644
--- a/src/components/BaseComponents/CometChatVideoBubble/CometChatVideoBubble.tsx
+++ b/src/components/BaseComponents/CometChatVideoBubble/CometChatVideoBubble.tsx
@@ -1,5 +1,6 @@
 import { useEffect, useRef } from "react";
 import { useCometChatVideoBubble } from "./useCometChatVideoBubble";
+import { closeCurrentMediaPlayer, currentMediaPlayer } from "../../../utils/util";
 interface VideoBubbleProps {
     /* URL of the video to be played. */
     src: string;
@@ -34,7 +35,9 @@ const CometChatVideoBubble = (props: VideoBubbleProps) => {
      * Function to request fullscreen when video starts to play.
      */
     const startVideoInFullscreen = () => {
+        closeCurrentMediaPlayer();
         const videoElement: any = videoRef.current;
+        currentMediaPlayer.video = videoElement;
         if (videoElement) {
             if (videoElement && !document.fullscreenElement) {
                 if (videoElement.requestFullscreen) {
diff --git a/src/components/CometChatConversations/CometChatConversations.tsx b/src/components/CometChatConversations/CometChatConversations.tsx
index 3e7b352..85029ef 100644
--- a/src/components/CometChatConversations/CometChatConversations.tsx
+++ b/src/components/CometChatConversations/CometChatConversations.tsx
@@ -45,6 +45,7 @@ import { getThemeMode, isURL } from "../../utils/util";
 import { CometChatConversationEvents } from "../../events/CometChatConversationEvents";
 import CometChatToast from "../BaseComponents/CometChatToast/CometChatToast";
 import { throwError } from "rxjs";
+import { CometChatUIKit } from "../../CometChatUIKit/CometChatUIKit";
 type Message =
   | CometChat.TextMessage
   | CometChat.MediaMessage
@@ -696,13 +697,14 @@ function stateReducer(state: State, action: Action): State {
         return conv.getConversationId() === message.getConversationId();
       });
       if (targetIdx > -1) {
+        let msg = conversationList[targetIdx].getLastMessage();
+
         newState = {
           ...state,
           conversationList: conversationList.map((conv, i) => {
-            if (i === targetIdx) {
+            if (i === targetIdx && msg?.getId() == message?.getId()) {
               const newConv = CometChatUIKitUtility.clone(conv);
               newConv.setUnreadMessageCount(0);
-              // newConv.setUnreadMentionInMessageCount(0);
               if (newConv.getLastMessage()) {
                 newConv.getLastMessage().setReadAt(messageReadAt);
               }
@@ -801,11 +803,11 @@ export function CometChatConversations(props: ConversationsProps) {
     unreadMentions: false,
   });
   const [showToast, setShowToast] = useState<boolean>(false);
-    const confirmDialogTitleRef = useRef<string>(localize("DELETE_CONVERSATION"));
-    const confirmDialogMessageRef = useRef<string>(localize("WOULD__YOU_LIKE_TO_DELETE_THIS_CONVERSATION"));
-    const cancelButtonTextRef = useRef<string>(localize("CANCEL"));
-    const confirmButtonTextRef = useRef<string>(localize("DELETE"));
-    const titleRef = useRef<string>(localize("CHATS"));
+  const confirmDialogTitleRef = useRef<string>(localize("DELETE_CONVERSATION"));
+  const confirmDialogMessageRef = useRef<string>(localize("WOULD__YOU_LIKE_TO_DELETE_THIS_CONVERSATION"));
+  const cancelButtonTextRef = useRef<string>(localize("CANCEL"));
+  const confirmButtonTextRef = useRef<string>(localize("DELETE"));
+  const titleRef = useRef<string>(localize("CHATS"));
 
   const conversationsManagerRef = useRef<ConversationsManager | null>(null);
   const fetchNextIdRef = useRef("");
@@ -833,15 +835,15 @@ export function CometChatConversations(props: ConversationsProps) {
   const fetchNextAndAppendConversations = useCallback(
     async (fetchId: string): Promise<void> => {
       try {
-      const conversationManager = conversationsManagerRef.current;
-      if (!conversationManager) {
-        return;
-      }
-      let initialState = isConnectionReestablished.current
-        ? States.loaded
-        : States.loading;
-      dispatch({ type: "setFetchState", fetchState: initialState });
-     
+        const conversationManager = conversationsManagerRef.current;
+        if (!conversationManager) {
+          return;
+        }
+        let initialState = isConnectionReestablished.current
+          ? States.loaded
+          : States.loading;
+        dispatch({ type: "setFetchState", fetchState: initialState });
+
         const conversations = await conversationManager.fetchNext();
 
         if (conversations.length !== 0 && fetchNextIdRef.current === fetchId) {
@@ -878,29 +880,29 @@ export function CometChatConversations(props: ConversationsProps) {
         if (state.conversationList.length <= 0) {
           dispatch({ type: "setFetchState", fetchState: States.error });
         }
-        errorHandler(error,"fetchNextAndAppendConversations");
+        errorHandler(error, "fetchNextAndAppendConversations");
       }
     },
-    [ dispatch]
+    [dispatch]
   );
 
   const getIncrementUnreadCountBoolFromMetaData = useCallback(
     (message: CometChat.BaseMessage) => {
-try {
-  const metaDataGetterName = "getMetadata";
-  const incrementUnreadCountFieldName = "incrementUnreadCount";
-  let metaData: Object;
-  return (
-    metaDataGetterName in message &&
-    typeof message![metaDataGetterName] === "function" &&
-    (metaData = message![metaDataGetterName]!()) &&
-    typeof metaData === "object" &&
-    incrementUnreadCountFieldName in metaData &&
-    Boolean(metaData["incrementUnreadCount"])
-  ) || (message instanceof CometChat.CustomMessage && message.willUpdateConversation());
-} catch (error) {
-  errorHandler(error,"getIncrementUnreadCountBoolFromMetaData")
-}
+      try {
+        const metaDataGetterName = "getMetadata";
+        const incrementUnreadCountFieldName = "incrementUnreadCount";
+        let metaData: Object;
+        return (
+          metaDataGetterName in message &&
+          typeof message![metaDataGetterName] === "function" &&
+          (metaData = message![metaDataGetterName]!()) &&
+          typeof metaData === "object" &&
+          incrementUnreadCountFieldName in metaData &&
+          Boolean(metaData["incrementUnreadCount"])
+        ) || (message instanceof CometChat.CustomMessage && message.willUpdateConversation());
+      } catch (error) {
+        errorHandler(error, "getIncrementUnreadCountBoolFromMetaData")
+      }
     },
     []
   );
@@ -914,24 +916,24 @@ try {
       newMessage: CometChat.BaseMessage
     ): void => {
       try {
-      
+
         const message = newMessage || conversation.getLastMessage();
         // Exit if conversation type passed in ConversationsRequestBuilder doesn't match the message receiver type.
         if (conversationsRequestBuilder && conversationsRequestBuilder.build().getConversationType() && message.getReceiverType() !== conversationsRequestBuilder.build().getConversationType()) {
           return;
         }
-  
+
         if (!isAMessage(message)) {
           return;
         }
         if (!ConversationsManager.shouldLastMessageAndUnreadCountBeUpdated(message)) {
           return;
         }
-        if(message.getSender().getUid() != state.loggedInUser?.getUid()){
+        if (message.getSender().getUid() != state.loggedInUser?.getUid()) {
           conversation.setUnreadMessageCount(
             (conversation.getUnreadMessageCount() ?? 0) + 1);
         }
-  
+
         if (message instanceof CometChat.Action &&
           message.getReceiverType() === CometChatUIKitConstants.MessageReceiverType.group &&
           conversation.getConversationType() === CometChatUIKitConstants.MessageReceiverType.group) {
@@ -945,9 +947,9 @@ try {
         }
         conversation.setLastMessage(message);
         dispatch({ type: "fromUpdateConversationListFn", conversation });
-    } catch (error) {
-      errorHandler(error,"updateConversationList")
-    }
+      } catch (error) {
+        errorHandler(error, "updateConversationList")
+      }
     },
     [dispatch, state.loggedInUser, getIncrementUnreadCountBoolFromMetaData]
   );
@@ -985,7 +987,7 @@ try {
 
         }
       } catch (error) {
-        errorHandler(error,"refreshSingleConversation");
+        errorHandler(error, "refreshSingleConversation");
       }
     },
     [errorHandler, updateConversationList, state.conversationList]
@@ -997,13 +999,14 @@ try {
   const onMessageReceived = useCallback(
     async (message: CometChat.BaseMessage): Promise<void> => {
       try {
-      if (
-        message.getSender().getUid() !== state.loggedInUser?.getUid() &&
-        !hideReceipts &&
-        !message.getDeliveredAt()
-      ) {
+        let shouldRefreshConversation = true;
+        if (
+          message.getSender().getUid() !== state.loggedInUser?.getUid() &&
+          !hideReceipts &&
+          !message.getDeliveredAt()
+        ) {
           CometChat.markAsDelivered(message);
-        } 
+        }
         if (
           !disableSoundForMessages &&
           !(
@@ -1015,20 +1018,26 @@ try {
               message.getConversationId())
           )
         ) {
-          refreshSingleConversation(message);
           CometChatSoundManager.play(
             CometChatSoundManager.Sound.incomingMessageFromOther!,
             customSoundForMessagesRef.current
           );
-  
+        }
+        if (!CometChatUIKit.conversationUpdateSettings?.shouldUpdateOnCustomMessages() && message.getCategory() === CometChatUIKitConstants.MessageCategory.custom) {
+          shouldRefreshConversation = false;
+        }
+        if (!CometChatUIKit.conversationUpdateSettings?.shouldUpdateOnGroupActions() && message.getCategory() === CometChatUIKitConstants.MessageCategory.action) {
+          shouldRefreshConversation = false;
         }
 
-      
+        if (shouldRefreshConversation) {
+          refreshSingleConversation(message);
+        }
       }
       catch (error) {
         errorHandler(error);
       }
- 
+
     },
     [
       hideReceipts,
@@ -1065,19 +1074,19 @@ try {
       typingStarted: boolean
     ): void => {
       try {
-        
-      if (
-        state.loggedInUser?.getUid() === typingIndicator.getSender()?.getUid()
-      ) {
-        return;
-      }
-      if (typingStarted) {
-        dispatch({ type: "addTypingIndicator", typingIndicator });
-      } else {
-        dispatch({ type: "removeTypingIndicator", typingIndicator });
-      }
+
+        if (
+          state.loggedInUser?.getUid() === typingIndicator.getSender()?.getUid()
+        ) {
+          return;
+        }
+        if (typingStarted) {
+          dispatch({ type: "addTypingIndicator", typingIndicator });
+        } else {
+          dispatch({ type: "removeTypingIndicator", typingIndicator });
+        }
       } catch (error) {
-        errorHandler(error,"setTypingIndicator")
+        errorHandler(error, "setTypingIndicator")
       }
     },
     [state.loggedInUser]
@@ -1090,11 +1099,11 @@ try {
   function getListItemAvatarURL(conversation: CometChat.Conversation): string {
     try {
       const convWith = conversation.getConversationWith();
-    return convWith instanceof CometChat.User
-      ? convWith.getAvatar()
-      : convWith.getIcon();
+      return convWith instanceof CometChat.User
+        ? convWith.getAvatar()
+        : convWith.getIcon();
     } catch (error) {
-      errorHandler(error,"getListItemAvatarURL");
+      errorHandler(error, "getListItemAvatarURL");
       throw error;
     }
   }
@@ -1105,19 +1114,19 @@ try {
   function getSubtitleThreadView(
     conversation: CometChat.Conversation
   ): JSX.Element | null {
-try {
-  const lastMessage = conversation.getLastMessage();
-  if (!isAMessage(lastMessage) || !lastMessage.getParentMessageId()) {
-    // parentMessageId is falsy, it is not a valid parent message id
-    return null;
-  }
-  return (
-    <div className='cometchat-conversations__subtitle-icon cometchat-conversations__subtitle-icon-thread' />
-  );
-} catch (error) {
-  errorHandler(error,"getSubtitleThreadView");
-  throw error;
-}
+    try {
+      const lastMessage = conversation.getLastMessage();
+      if (!isAMessage(lastMessage) || !lastMessage.getParentMessageId()) {
+        // parentMessageId is falsy, it is not a valid parent message id
+        return null;
+      }
+      return (
+        <div className='cometchat-conversations__subtitle-icon cometchat-conversations__subtitle-icon-thread' />
+      );
+    } catch (error) {
+      errorHandler(error, "getSubtitleThreadView");
+      throw error;
+    }
   }
 
   /**
@@ -1129,28 +1138,28 @@ try {
   function shouldDisplaySubtitleReceipt(
     conversation: CometChat.Conversation
   ): boolean {
- try {
-  const lastMessage = conversation.getLastMessage();
-  const convWith = conversation.getConversationWith();
-  const id =
-    convWith instanceof CometChat.User
-      ? convWith?.getUid()
-      : convWith.getGuid();
-  return (
-    !hideReceipts &&
-    isAMessage(lastMessage) &&
-    !lastMessage.getDeletedAt() &&
-    lastMessage.getCategory() !==
-    CometChatUIKitConstants.MessageCategory.action &&
-    lastMessage.getSender()?.getUid() === state.loggedInUser?.getUid() &&
-    (lastMessage.getCategory() != CometChatUIKitConstants.MessageCategory.custom || (lastMessage.getCategory() == CometChatUIKitConstants.MessageCategory.custom && 
-    lastMessage.getType() !== CometChatUIKitConstants.calls.meeting)) &&
-    state.typingIndicatorMap.get(id) === undefined
-  );
- } catch (error) {
-  errorHandler(error,"shouldDisplaySubtitleReceipt");
-  return false;
- }
+    try {
+      const lastMessage = conversation.getLastMessage();
+      const convWith = conversation.getConversationWith();
+      const id =
+        convWith instanceof CometChat.User
+          ? convWith?.getUid()
+          : convWith.getGuid();
+      return (
+        !hideReceipts &&
+        isAMessage(lastMessage) &&
+        !lastMessage.getDeletedAt() &&
+        lastMessage.getCategory() !==
+        CometChatUIKitConstants.MessageCategory.action &&
+        lastMessage.getSender()?.getUid() === state.loggedInUser?.getUid() &&
+        (lastMessage.getCategory() != CometChatUIKitConstants.MessageCategory.custom || (lastMessage.getCategory() == CometChatUIKitConstants.MessageCategory.custom &&
+          lastMessage.getType() !== CometChatUIKitConstants.calls.meeting)) &&
+        state.typingIndicatorMap.get(id) === undefined
+      );
+    } catch (error) {
+      errorHandler(error, "shouldDisplaySubtitleReceipt");
+      return false;
+    }
   }
 
   /**
@@ -1163,10 +1172,10 @@ try {
       if (!shouldDisplaySubtitleReceipt(conversation)) {
         return null;
       }
-  
+
       const receipt = MessageReceiptUtils.getReceiptStatus(conversation.getLastMessage())
       let messageStatus = "";
-  
+
       if (receipt === receipts.sent) {
         messageStatus = "sent";
       } else if (receipt === receipts.delivered) {
@@ -1174,10 +1183,10 @@ try {
       } else if (receipt === receipts.read) {
         messageStatus = "read";
       }
-  
-  
-  
-  
+
+
+
+
       return (
         <div className={`
         cometchat-receipts cometchat-conversations__subtitle-receipts cometchat-conversations__subtitle-receipts-${messageStatus} cometchat-receipts-${messageStatus}`}
@@ -1185,7 +1194,7 @@ try {
         </div>
       );
     } catch (error) {
-      errorHandler(error,"getSubtitleReadReceiptView");
+      errorHandler(error, "getSubtitleReadReceiptView");
       throw error;
     }
   }
@@ -1195,100 +1204,101 @@ try {
    */
   function getSubtitleText(
     conversation: CometChat.Conversation
-  ): string | JSX.Element {try {
-    
-    const convWith = conversation.getConversationWith();
-    const id =
-      convWith instanceof CometChat.Group
-        ? convWith.getGuid()
-        : convWith?.getUid();
-    const typingIndicator = state.typingIndicatorMap.get(id);
-    if (typingIndicator !== undefined) {
-      if (convWith instanceof CometChat.Group) {
-        return <div className="cometchat-conversations__subtitle-typing">
+  ): string | JSX.Element {
+    try {
 
-          {
-            typingIndicator.getSender().getName()
-          }
-          {": "}
-          {
-            localize(
-              "TYPING"
-            )
-          }
-        </div>;
-      } else {
+      const convWith = conversation.getConversationWith();
+      const id =
+        convWith instanceof CometChat.Group
+          ? convWith.getGuid()
+          : convWith?.getUid();
+      const typingIndicator = state.typingIndicatorMap.get(id);
+      if (typingIndicator !== undefined) {
+        if (convWith instanceof CometChat.Group) {
+          return <div className="cometchat-conversations__subtitle-typing">
+
+            {
+              typingIndicator.getSender().getName()
+            }
+            {": "}
+            {
+              localize(
+                "TYPING"
+              )
+            }
+          </div>;
+        } else {
 
-        return <div className="cometchat-conversations__subtitle-typing">{localize("TYPING")}</div>;
+          return <div className="cometchat-conversations__subtitle-typing">{localize("TYPING")}</div>;
+        }
       }
-    }
-    if (state.loggedInUser) {
-      let iconName = ""
-      const lastMessage = conversation.getLastMessage();
-      const isGroupSubtitle = lastMessage && conversation?.getConversationType() != CometChat.RECEIVER_TYPE.USER;
-      const isMessageFromLoggedInUser = lastMessage?.getSender().getUid() == state.loggedInUser?.getUid();
-      const getLastMessageSenderName = isMessageFromLoggedInUser ? localize("YOU") : lastMessage?.getSender().getName()
-
-      let subtitle =
-        ChatConfigurator.getDataSource().getLastConversationMessage(
-          conversation,
-          state.loggedInUser!,
-          {
-            mentionsTargetElement: MentionsTargetElement.conversation,
-            textFormattersList: textFormatters
-          }
-        );
-      if (
-        lastMessage &&
-        lastMessage.getCategory() ===
-        CometChatUIKitConstants.MessageCategory.call
-      ) {
-        iconName = getIconNameByCallType(lastMessage)
+      if (state.loggedInUser) {
+        let iconName = ""
+        const lastMessage = conversation.getLastMessage();
+        const isGroupSubtitle = lastMessage && conversation?.getConversationType() != CometChat.RECEIVER_TYPE.USER;
+        const isMessageFromLoggedInUser = lastMessage?.getSender().getUid() == state.loggedInUser?.getUid();
+        const getLastMessageSenderName = isMessageFromLoggedInUser ? localize("YOU") : lastMessage?.getSender().getName()
+
+        let subtitle =
+          ChatConfigurator.getDataSource().getLastConversationMessage(
+            conversation,
+            state.loggedInUser!,
+            {
+              mentionsTargetElement: MentionsTargetElement.conversation,
+              textFormattersList: textFormatters
+            }
+          );
+        if (
+          lastMessage &&
+          lastMessage.getCategory() ===
+          CometChatUIKitConstants.MessageCategory.call
+        ) {
+          iconName = getIconNameByCallType(lastMessage)
 
-        if (iconName.includes("video")) {
-          subtitle = localize("VIDEO_CALL")
-        } else {
-          subtitle = localize("VOICE_CALL")
+          if (iconName.includes("video")) {
+            subtitle = localize("VIDEO_CALL")
+          } else {
+            subtitle = localize("VOICE_CALL")
+          }
         }
-      }
 
-      if (lastMessage &&
-        lastMessage.getCategory() !==
-        CometChatUIKitConstants.MessageCategory.call &&
-        lastMessage.getType()
-      ) {
-        iconName = getIconNameByMessageType(lastMessage);
-      }
+        if (lastMessage &&
+          lastMessage.getCategory() !==
+          CometChatUIKitConstants.MessageCategory.call &&
+          lastMessage.getType()
+        ) {
+          iconName = getIconNameByMessageType(lastMessage);
+        }
 
-      if (lastMessage?.getDeletedAt()) {
-        subtitle = localize("MESSAGE_IS_DELETED");
-      }
+        if (lastMessage?.getDeletedAt()) {
+          subtitle = localize("MESSAGE_IS_DELETED");
+        }
 
-      return (
-        <div
-          className="cometchat-conversations__subtitle-text-wrapper"
-        >
-          {isGroupSubtitle &&
-            lastMessage.getCategory() != CometChatUIKitConstants.MessageCategory.action &&
-            (lastMessage.getCategory() != CometChatUIKitConstants.MessageCategory.custom || (lastMessage.getCategory() == CometChatUIKitConstants.MessageCategory.custom && 
-            lastMessage.getType() !== CometChatUIKitConstants.calls.meeting))  && <span className={`cometchat-conversations__subtitle-text-sender`}>{getLastMessageSenderName}:</span>}
-          <div
-            className={`cometchat-conversations__subtitle-icon ${iconName ? `cometchat-conversations__subtitle-icon-${iconName}` : "cometchat-conversations__subtitle-icon-none"}`}
-          />
+        return (
           <div
-            className={`cometchat-conversations__subtitle-text`}
-            dangerouslySetInnerHTML={{ __html: subtitle }}
+            className="cometchat-conversations__subtitle-text-wrapper"
           >
+            {isGroupSubtitle &&
+              lastMessage.getCategory() != CometChatUIKitConstants.MessageCategory.action &&
+              (lastMessage.getCategory() != CometChatUIKitConstants.MessageCategory.custom || (lastMessage.getCategory() == CometChatUIKitConstants.MessageCategory.custom &&
+                lastMessage.getType() !== CometChatUIKitConstants.calls.meeting)) && <span className={`cometchat-conversations__subtitle-text-sender`}>{getLastMessageSenderName}:</span>}
+            <div
+              className={`cometchat-conversations__subtitle-icon ${iconName ? `cometchat-conversations__subtitle-icon-${iconName}` : "cometchat-conversations__subtitle-icon-none"}`}
+            />
+            <div
+              className={`cometchat-conversations__subtitle-text`}
+              dangerouslySetInnerHTML={{ __html: subtitle }}
+            >
 
+            </div>
           </div>
-        </div>
-      );
+        );
+      }
+      return "";
+    } catch (error) {
+      errorHandler(error, "getSubtitleText");
+      return "";
     }
-    return "";
-  } catch (error) {
-    errorHandler(error,"getSubtitleText");
-    return "";
-  }
   }
 
   /**
@@ -1299,30 +1309,30 @@ try {
    * @returns {string} The name of the icon to be used based on the call type.
    */
   function getIconNameByCallType(message: CometChat.Call): string {
-try {
-  
-  let iconName = ""
-  let isMissedCallMessage = isMissedCall(message as CometChat.Call, state.loggedInUser!);
-
-  if (isMissedCallMessage) {
-    if (message.getType() === CometChatUIKitConstants.MessageTypes.audio) {
-      iconName = "incoming-audio-call"
-    } else {
-      iconName = "incoming-video-call"
-    }
-  } else {
-    if (message.getType() === CometChatUIKitConstants.MessageTypes.audio) {
-      iconName = "outgoing-audio-call"
-    } else {
-      iconName = "outgoing-video-call"
-    }
-  }
+    try {
 
-  return iconName
-} catch (error) {
-  errorHandler(error,"getIconNameByCallType");
-  return "";
-}
+      let iconName = ""
+      let isMissedCallMessage = isMissedCall(message as CometChat.Call, state.loggedInUser!);
+
+      if (isMissedCallMessage) {
+        if (message.getType() === CometChatUIKitConstants.MessageTypes.audio) {
+          iconName = "incoming-audio-call"
+        } else {
+          iconName = "incoming-video-call"
+        }
+      } else {
+        if (message.getType() === CometChatUIKitConstants.MessageTypes.audio) {
+          iconName = "outgoing-audio-call"
+        } else {
+          iconName = "outgoing-video-call"
+        }
+      }
+
+      return iconName
+    } catch (error) {
+      errorHandler(error, "getIconNameByCallType");
+      return "";
+    }
   }
 
 
@@ -1336,50 +1346,50 @@ try {
    */
   function getIconNameByMessageType(message: CometChat.BaseMessage): string {
     try {
-      
-    let iconName = "";
-    switch (message.getType()) {
-
-      case CometChatUIKitConstants.MessageTypes.text:
-        const messageText = (message as CometChat.TextMessage).getText();
-        if (isURL(messageText)) {
-          iconName = "link";
-        }
-        break;
-      case CometChatUIKitConstants.MessageTypes.image:
-        iconName = "image";
-        break;
-      case CometChatUIKitConstants.MessageTypes.file:
-        iconName = "file";
-        break;
-      case CometChatUIKitConstants.MessageTypes.video:
-        iconName = "video";
-        break;
-      case CometChatUIKitConstants.MessageTypes.audio:
-        iconName = "audio";
-        break;
-      case PollsConstants.extension_poll:
-        iconName = "poll";
-        break;
-      case StickersConstants.sticker:
-        iconName = "sticker";
-        break;
-      case CollaborativeWhiteboardConstants.extension_whiteboard:
-        iconName = "collaborative-whiteboard";
-        break;
-      case CollaborativeDocumentConstants.extension_document:
-        iconName = "collaborative-document";
-        break;
-      default:
-        iconName = "";
-        break;
-    }
-    if (message.getDeletedAt()) {
-      iconName = "deleted";
-    }
-    return iconName
+
+      let iconName = "";
+      switch (message.getType()) {
+
+        case CometChatUIKitConstants.MessageTypes.text:
+          const messageText = (message as CometChat.TextMessage).getText();
+          if (isURL(messageText)) {
+            iconName = "link";
+          }
+          break;
+        case CometChatUIKitConstants.MessageTypes.image:
+          iconName = "image";
+          break;
+        case CometChatUIKitConstants.MessageTypes.file:
+          iconName = "file";
+          break;
+        case CometChatUIKitConstants.MessageTypes.video:
+          iconName = "video";
+          break;
+        case CometChatUIKitConstants.MessageTypes.audio:
+          iconName = "audio";
+          break;
+        case PollsConstants.extension_poll:
+          iconName = "poll";
+          break;
+        case StickersConstants.sticker:
+          iconName = "sticker";
+          break;
+        case CollaborativeWhiteboardConstants.extension_whiteboard:
+          iconName = "collaborative-whiteboard";
+          break;
+        case CollaborativeDocumentConstants.extension_document:
+          iconName = "collaborative-document";
+          break;
+        default:
+          iconName = "";
+          break;
+      }
+      if (message.getDeletedAt()) {
+        iconName = "deleted";
+      }
+      return iconName
     } catch (error) {
-      errorHandler(error,"getIconNameByMessageType");
+      errorHandler(error, "getIconNameByMessageType");
       return "";
     }
   }
@@ -1442,49 +1452,49 @@ try {
   function getListItemMenuView(
     conversation: CometChat.Conversation,
   ) {
-   try {
-    if (selectionMode !== SelectionMode.none) {
-      return null;
-    }
-    let curOptions: CometChatOption[] | null;
-    if (!options) {
-      const defaultOptions = hideDeleteConversation ? [] :  ConversationUtils.getDefaultOptions();
-      for (let i = 0; i < defaultOptions.length; i++) {
-        if (
-          defaultOptions[i].id ===
-          CometChatUIKitConstants.ConversationOptions.delete
-        ) {
-          defaultOptions[i].onClick = () => deleteOptionCallback(conversation);
+    try {
+      if (selectionMode !== SelectionMode.none) {
+        return null;
+      }
+      let curOptions: CometChatOption[] | null;
+      if (!options) {
+        const defaultOptions = hideDeleteConversation ? [] : ConversationUtils.getDefaultOptions();
+        for (let i = 0; i < defaultOptions.length; i++) {
+          if (
+            defaultOptions[i].id ===
+            CometChatUIKitConstants.ConversationOptions.delete
+          ) {
+            defaultOptions[i].onClick = () => deleteOptionCallback(conversation);
+          }
         }
+        curOptions = defaultOptions;
+      } else {
+        curOptions = options?.(conversation);
       }
-      curOptions = defaultOptions;
-    } else {
-      curOptions = options?.(conversation);
-    }
-    if (curOptions?.length === 0) {
-      return null;
-    }
-    return (
-      <div className="cometchat-conversations__trailing-view-options">
-        <CometChatContextMenu
-          data={curOptions as unknown as CometChatActionsIcon[]}
-          topMenuSize={2}
-          placement={Placement.left}
-          onOptionClicked={() => {
-            curOptions && curOptions.forEach((option: CometChatOption) => {
-              if (option) {
-                if (option.id) {
-                  option.onClick?.(parseInt(String(option.id)));
+      if (curOptions?.length === 0) {
+        return null;
+      }
+      return (
+        <div className="cometchat-conversations__trailing-view-options">
+          <CometChatContextMenu
+            data={curOptions as unknown as CometChatActionsIcon[]}
+            topMenuSize={2}
+            placement={Placement.left}
+            onOptionClicked={() => {
+              curOptions && curOptions.forEach((option: CometChatOption) => {
+                if (option) {
+                  if (option.id) {
+                    option.onClick?.(parseInt(String(option.id)));
+                  }
                 }
-              }
-            });
-          }}
-        />
-      </div>
-    );
-   } catch (error) {
-    errorHandler(error,"getListItemMenuView")
-   }
+              });
+            }}
+          />
+        </div>
+      );
+    } catch (error) {
+      errorHandler(error, "getListItemMenuView")
+    }
   }
 
   /**
@@ -1493,58 +1503,58 @@ try {
   function getListItemTailContentView(
     conversation: CometChat.Conversation
   ): JSX.Element | null {
-   try {
-    if (trailingView) {
-      return <>{trailingView(conversation)}</>
-    }
+    try {
+      if (trailingView) {
+        return <>{trailingView(conversation)}</>
+      }
 
-    switch (selectionMode) {
-      case SelectionMode.none: {
-        const lastMessage = conversation.getLastMessage();
-        if (!lastMessage) {
-          return null;
-        }
-        return (
-          <div
-            className='cometchat-conversations__trailing-view'
-          >
-            <div className="cometchat-conversations__trailing-view-date">
-              <CometChatDate timestamp={lastMessage.getSentAt()} pattern={datePattern} />
-            </div>
+      switch (selectionMode) {
+        case SelectionMode.none: {
+          const lastMessage = conversation.getLastMessage();
+          if (!lastMessage) {
+            return null;
+          }
+          return (
             <div
-              className="cometchat-conversations__trailing-view-badge"
+              className='cometchat-conversations__trailing-view'
             >
-              {conversation.getUnreadMessageCount() > 0 && <div className="cometchat-badge cometchat-conversations__trailing-view-badge-count">
-                {conversation.getUnreadMessageCount() <= 999 ? conversation.getUnreadMessageCount() : `999+`}
+              <div className="cometchat-conversations__trailing-view-date">
+                <CometChatDate timestamp={lastMessage.getSentAt()} pattern={datePattern} />
+              </div>
+              <div
+                className="cometchat-conversations__trailing-view-badge"
+              >
+                {conversation.getUnreadMessageCount() > 0 && <div className="cometchat-badge cometchat-conversations__trailing-view-badge-count">
+                  {conversation.getUnreadMessageCount() <= 999 ? conversation.getUnreadMessageCount() : `999+`}
+                </div>
+                }
               </div>
-              }
             </div>
-          </div>
-        );
+          );
+        }
+        case SelectionMode.single:
+          return (
+            <div className='cometchat-conversations__single-select'>
+              <CometChatRadioButton
+                onRadioButtonChanged={(e) => onSelect?.(conversation, e.checked)}
+              />
+            </div>
+          );
+        case SelectionMode.multiple:
+          return (
+            <div className='cometchat-conversations__multiple-select'>
+              <CometChatCheckbox
+                onCheckBoxValueChanged={(e) => onSelect?.(conversation, e.checked)}
+              />
+            </div>
+          );
+        default:
+          return null;
       }
-      case SelectionMode.single:
-        return (
-          <div className='cometchat-conversations__single-select'>
-            <CometChatRadioButton
-              onRadioButtonChanged={(e) => onSelect?.(conversation, e.checked)}
-            />
-          </div>
-        );
-      case SelectionMode.multiple:
-        return (
-          <div className='cometchat-conversations__multiple-select'>
-            <CometChatCheckbox
-              onCheckBoxValueChanged={(e) => onSelect?.(conversation, e.checked)}
-            />
-          </div>
-        );
-      default:
-        return null;
+    } catch (error) {
+      errorHandler(error, "getListItemTailContentView");
+      return null;
     }
-   } catch (error) {
-    errorHandler(error,"getListItemTailContentView");
-    return null;
-   }
   }
 
   /**
@@ -1559,55 +1569,55 @@ try {
     return function (conversation: CometChat.Conversation) {
 
 
-     try {
-      const isActive = conversation.getConversationId() === activeConversationState?.getConversationId();
-      let conversationType = conversation.getConversationType();
-      let groupType;
-      let status
+      try {
+        const isActive = conversation.getConversationId() === activeConversationState?.getConversationId();
+        let conversationType = conversation.getConversationType();
+        let groupType;
+        let status
 
-      if (conversationType === CometChatUIKitConstants.MessageReceiverType.group) {
-        groupType = (conversation.getConversationWith() as CometChat.Group).getType()
-      };
+        if (conversationType === CometChatUIKitConstants.MessageReceiverType.group) {
+          groupType = (conversation.getConversationWith() as CometChat.Group).getType()
+        };
 
-      if (conversationType === CometChatUIKitConstants.MessageReceiverType.user) {
-        status = (conversation.getConversationWith() as CometChat.User).getStatus()
-      };
+        if (conversationType === CometChatUIKitConstants.MessageReceiverType.user) {
+          status = (conversation.getConversationWith() as CometChat.User).getStatus()
+        };
 
-      return (
-        <div className={`cometchat-conversations__list-item
+        return (
+          <div className={`cometchat-conversations__list-item
           ${groupType && !hideGroupType ? `cometchat-conversations__list-item-${groupType}` : ""}
            ${status && !hideUserStatus ? `cometchat-conversations__list-item-${status}` : ""}
            ${isActive ? `cometchat-conversations__list-item-active` : ""}
         
         ` }>
-          <CometChatListItem
-            id={conversation.getConversationId()}
-            avatarURL={getListItemAvatarURL(conversation)}
-            avatarName={conversation.getConversationWith().getName()}
-            title={conversation.getConversationWith().getName()}
-            titleView={titleView  ? titleView(conversation) : undefined}
-            leadingView={leadingView  ? leadingView(conversation) : undefined}
-            onListItemClicked={(e) => onItemClick?.(conversation)}
-            subtitleView={getListItemSubtitleView(conversation)}
-            menuView={getListItemMenuView(conversation)}
-            trailingView={getListItemTailContentView(conversation)}
-          />
-        </div>
-      );
-     } catch (error) {
-      errorHandler(error,"getListItem");
-      throw error;
-     }
+            <CometChatListItem
+              id={conversation.getConversationId()}
+              avatarURL={getListItemAvatarURL(conversation)}
+              avatarName={conversation.getConversationWith().getName()}
+              title={conversation.getConversationWith().getName()}
+              titleView={titleView ? titleView(conversation) : undefined}
+              leadingView={leadingView ? leadingView(conversation) : undefined}
+              onListItemClicked={(e) => onItemClick?.(conversation)}
+              subtitleView={getListItemSubtitleView(conversation)}
+              menuView={getListItemMenuView(conversation)}
+              trailingView={getListItemTailContentView(conversation)}
+            />
+          </div>
+        );
+      } catch (error) {
+        errorHandler(error, "getListItem");
+        throw error;
+      }
     };
   }
 
   function handleConfirmClick(): Promise<void> {
     return new Promise(async (resolve, reject) => {
       try {
-      if (state.conversationToBeDeleted) {
-        const convWith = state.conversationToBeDeleted.getConversationWith();
-        const id = convWith instanceof CometChat.Group ? convWith.getGuid() : convWith.getUid();
-     
+        if (state.conversationToBeDeleted) {
+          const convWith = state.conversationToBeDeleted.getConversationWith();
+          const id = convWith instanceof CometChat.Group ? convWith.getGuid() : convWith.getUid();
+
           await CometChat.deleteConversation(id, state.conversationToBeDeleted.getConversationType());
           setShowToast(true)
           CometChatConversationEvents.ccConversationDeleted.next(CometChatUIKitUtility.clone(state.conversationToBeDeleted));
@@ -1615,14 +1625,14 @@ try {
           dispatch({ type: "setConversationToBeDeleted", conversation: null });
           return resolve();
 
-        
-      
+
+
+        }
+      }
+      catch (error) {
+        errorHandler(error);
+        return reject();
       }
-    }
-    catch (error) {
-      errorHandler(error);
-      return reject();
-    }
     })
   }
   function handleCancelClick() {
@@ -1773,7 +1783,7 @@ try {
         className='cometchat-conversations'
       >
         <CometChatList
-        title={titleRef.current}
+          title={titleRef.current}
           hideSearch={true}
           list={state.conversationList}
           listItemKey='getConversationId'
diff --git a/src/components/CometChatConversations/controller.ts b/src/components/CometChatConversations/controller.ts
index 4a3423e..c3fbf10 100644
--- a/src/components/CometChatConversations/controller.ts
+++ b/src/components/CometChatConversations/controller.ts
@@ -159,10 +159,14 @@ export class ConversationsManager {
 
         CometChat.addMessageListener(messageListenerId, new CometChat.MessageListener({
             onMessagesRead: (messageReceipt: CometChat.MessageReceipt) => {
+               if(messageReceipt.getReceiptType() == CometChatUIKitConstants.MessageReceiverType.user){
                 callback(messageReceipt, true);
+               }
             },
             onMessagesDelivered: (messageReceipt: CometChat.MessageReceipt) => {
-                callback(messageReceipt, false);
+                if(messageReceipt.getReceiptType() == CometChatUIKitConstants.MessageReceiverType.user){
+                    callback(messageReceipt, false);
+                   }
             },
             onMessagesDeliveredToAll: (messageReceipt: CometChat.MessageReceipt) => {
                 callback(messageReceipt, false);
diff --git a/src/components/CometChatMessageList/CometChatMessageList.tsx b/src/components/CometChatMessageList/CometChatMessageList.tsx
index a146993..2c195a3 100644
--- a/src/components/CometChatMessageList/CometChatMessageList.tsx
+++ b/src/components/CometChatMessageList/CometChatMessageList.tsx
@@ -24,7 +24,7 @@ import { DatePatterns, MessageBubbleAlignment, MessageListAlignment, MessageStat
 import { CometChatUIKitConstants } from "../../constants/CometChatUIKitConstants";
 import { localize } from "../../resources/CometChatLocalize/cometchat-localize";
 import { CometChatTextFormatter } from "../../formatters/CometChatFormatters/CometChatTextFormatter";
-import {CometChatReactions} from "../Reactions/CometChatReactions/CometChatReactions";
+import { CometChatReactions } from "../Reactions/CometChatReactions/CometChatReactions";
 import { CometChatDate } from "../BaseComponents/CometChatDate/CometChatDate";
 import { CometChatEmojiKeyboard } from "../BaseComponents/CometChatEmojiKeyboard/CometChatEmojiKeyboard";
 import { CometChatAvatar } from "../BaseComponents/CometChatAvatar/CometChatAvatar";
@@ -47,17 +47,17 @@ import { CometChatSmartReplies } from "../BaseComponents/CometChatSmartReplies/C
  * Props for the MessageList component.
  */
 interface MessageListProps {
-   /**
-    * Enables conversation starters for new chats.
-    * @default false
-    */
-   showConversationStarters?: boolean;
+  /**
+   * Enables conversation starters for new chats.
+   * @default false
+   */
+  showConversationStarters?: boolean;
 
-   /**
-    * Enables the generation of Smart Replies for incoming messages.
-    * @default false
-    */
-   showSmartReplies?: boolean;
+  /**
+   * Enables the generation of Smart Replies for incoming messages.
+   * @default false
+   */
+  showSmartReplies?: boolean;
 
   /**
    * Hides the visibility of the date separator in the message list.
@@ -244,7 +244,7 @@ interface MessageListProps {
    *
    * @param parentMessageId - The ID of the parent message to which replies belong.
    */
-  onThreadRepliesClick?: (message:CometChat.BaseMessage)=>void;
+  onThreadRepliesClick?: (message: CometChat.BaseMessage) => void;
 
   /**
    * Callback function that triggers when a reaction is clicked.
@@ -291,7 +291,7 @@ interface MessageListProps {
 
 const defaultProps: MessageListProps = {
   disableSoundForMessages: false,
-  customSoundForMessages:"",
+  customSoundForMessages: "",
   parentMessageId: 0,
   user: undefined,
   group: undefined,
@@ -329,8 +329,8 @@ const defaultProps: MessageListProps = {
   hideGroupActionMessages: false,
   hideStickyDate: false,
   quickOptionsCount: 2,
-  showConversationStarters:false,
-  showSmartReplies:false,
+  showConversationStarters: false,
+  showSmartReplies: false,
   smartRepliesKeywords: ['what', 'when', 'why', 'who', 'where', 'how', '?'],
   smartRepliesDelayDuration: 10000,
 };
@@ -426,30 +426,65 @@ const CometChatMessageList = (props: MessageListProps) => {
   const isConnectionReestablishedRef = useRef<boolean>(false);
   const isOnBottomRef = useRef<boolean>(false);
   const showSmartRepliesRef = useRef<boolean>(props.showSmartReplies || false);
-  var timeoutId: NodeJS.Timeout | null  | number = null;
-/**
-    * Function to play an audio notification for new messages if sound is enabled.
-    * @returns {void}
-    */
+  var timeoutId: NodeJS.Timeout | null | number = null;
+
+  useEffect((() => {
+    let ccOwnershipChanged = CometChatGroupEvents.ccOwnershipChanged.subscribe((groupMember) => {
+      if (groupMember.group.getGuid() === groupRef.current?.getGuid?.()) {
+        groupRef.current = groupMember.group;
+      }
+    })
+    let ccGroupMemberScopeChanged = CometChatGroupEvents.ccGroupMemberScopeChanged.subscribe((groupMember) => {
+      if (groupMember.group.getGuid() === groupRef.current?.getGuid?.()) {
+        groupRef.current = groupMember.group;
+      }
+    })
+    let ccGroupMemberAdded = CometChatGroupEvents.ccGroupMemberAdded.subscribe((groupMember) => {
+      if (groupMember.userAddedIn.getGuid() === groupRef.current?.getGuid?.()) {
+        groupRef.current = groupMember.userAddedIn;
+      }
+    })
+    let ccGroupMemberBanned = CometChatGroupEvents.ccGroupMemberBanned.subscribe((groupMember) => {
+      if (groupMember.kickedFrom.getGuid() === groupRef.current?.getGuid?.()) {
+        groupRef.current = groupMember.kickedFrom;
+      }
+    })
+    let ccGroupMemberKicked = CometChatGroupEvents.ccGroupMemberKicked.subscribe((groupMember) => {
+      if (groupMember.kickedFrom.getGuid() === groupRef.current?.getGuid?.()) {
+        groupRef.current = groupMember.kickedFrom;
+      }
+    })
+    return () => {
+      ccOwnershipChanged?.unsubscribe();
+      ccGroupMemberScopeChanged?.unsubscribe();
+      ccGroupMemberAdded?.unsubscribe();
+      ccGroupMemberBanned?.unsubscribe();
+      ccGroupMemberKicked?.unsubscribe();
+    }
+  }), [groupRef]);
 
-const playAudio: () => void = useCallback(() => {
-  try {
-    if (!disableSoundForMessages) {
-      if (customSoundForMessages) {
-        CometChatSoundManager.play(
-          CometChatSoundManager.Sound.incomingMessage!,
-          customSoundForMessages
-        );
-      } else {
-        CometChatSoundManager.play(
-          CometChatSoundManager.Sound.incomingMessage!
-        );
+  /**
+      * Function to play an audio notification for new messages if sound is enabled.
+      * @returns {void}
+      */
+  const playAudio: () => void = useCallback(() => {
+    try {
+      if (!disableSoundForMessages) {
+        if (customSoundForMessages) {
+          CometChatSoundManager.play(
+            CometChatSoundManager.Sound.incomingMessage!,
+            customSoundForMessages
+          );
+        } else {
+          CometChatSoundManager.play(
+            CometChatSoundManager.Sound.incomingMessage!
+          );
+        }
       }
+    } catch (error: any) {
+      errorHandler(error, "playAudio");
     }
-  } catch (error: any) {
-    errorHandler(error,"playAudio");
-  }
-}, [disableSoundForMessages, customSoundForMessages]);
+  }, [disableSoundForMessages, customSoundForMessages]);
   const renderShimmerBubble = (align: 'start' | 'end', key: number) => {
     return user || align == 'end' ? (
       <div key={key} className="cometchat-message-list__shimmer-body" style={{
@@ -577,33 +612,33 @@ const playAudio: () => void = useCallback(() => {
   const isPartOfCurrentChatForUIEvent: (message: CometChat.BaseMessage) => boolean | undefined = useCallback(
     (message: CometChat.BaseMessage) => {
       try {
-        
-      const receiverId = message?.getReceiverId();
-      const receiverType = message?.getReceiverType();
-      if (parentMessageIdRef.current) {
-        if (message.getParentMessageId() === parentMessageIdRef.current) {
-          return true;
-        }
-      } else {
-        if (message.getParentMessageId()) {
-          return false
-        }
 
-        if (userRef.current) {
-          if (receiverType === CometChatUIKitConstants.MessageReceiverType.user && receiverId === userRef.current.getUid()) {
-            return true
+        const receiverId = message?.getReceiverId();
+        const receiverType = message?.getReceiverType();
+        if (parentMessageIdRef.current) {
+          if (message.getParentMessageId() === parentMessageIdRef.current) {
+            return true;
           }
-        } else if (groupRef.current) {
-          if (receiverType === CometChatUIKitConstants.MessageReceiverType.group && receiverId === groupRef.current.getGuid()) {
-            return true
+        } else {
+          if (message.getParentMessageId()) {
+            return false
           }
-        }
 
-        return false
+          if (userRef.current) {
+            if (receiverType === CometChatUIKitConstants.MessageReceiverType.user && receiverId === userRef.current.getUid()) {
+              return true
+            }
+          } else if (groupRef.current) {
+            if (receiverType === CometChatUIKitConstants.MessageReceiverType.group && receiverId === groupRef.current.getGuid()) {
+              return true
+            }
+          }
 
-      }
+          return false
+
+        }
       } catch (error) {
-        errorHandler(error,"isPartOfCurrentChatForUIEvent")
+        errorHandler(error, "isPartOfCurrentChatForUIEvent")
       }
     },
     []
@@ -620,25 +655,25 @@ const playAudio: () => void = useCallback(() => {
     (message: CometChat.TransientMessage) => {
       try {
         const receiverId = message?.getReceiverId();
-      const receiverType = message?.getReceiverType();
-      const senderId = message?.getSender()?.getUid();
-      if (parentMessageIdRef.current) {
-        return false;
-      } else {
-        if (userRef.current) {
-          if (receiverType === CometChatUIKitConstants.MessageReceiverType.user && (receiverId === userRef.current.getUid() || senderId === userRef.current.getUid())) {
-            return true
-          }
-        } else if (groupRef.current) {
-          if (receiverType === CometChatUIKitConstants.MessageReceiverType.group && (receiverId === groupRef.current.getGuid())) {
-            return true
+        const receiverType = message?.getReceiverType();
+        const senderId = message?.getSender()?.getUid();
+        if (parentMessageIdRef.current) {
+          return false;
+        } else {
+          if (userRef.current) {
+            if (receiverType === CometChatUIKitConstants.MessageReceiverType.user && (receiverId === userRef.current.getUid() || senderId === userRef.current.getUid())) {
+              return true
+            }
+          } else if (groupRef.current) {
+            if (receiverType === CometChatUIKitConstants.MessageReceiverType.group && (receiverId === groupRef.current.getGuid())) {
+              return true
+            }
           }
-        }
-        return false
+          return false
 
-      }
+        }
       } catch (error) {
-        errorHandler(error,"validateTransientMessage")
+        errorHandler(error, "validateTransientMessage")
       }
     }, []
   )
@@ -651,33 +686,33 @@ const playAudio: () => void = useCallback(() => {
   const isPartOfCurrentChatForSDKEvent: (message: CometChat.BaseMessage) => boolean | undefined = useCallback(
     (message: CometChat.BaseMessage) => {
       try {
-        
-      const receiverId = message?.getReceiverId();
-      const receiverType = message?.getReceiverType();
-      const senderId = message?.getSender()?.getUid();
-      if (parentMessageIdRef.current) {
-        if (message.getParentMessageId() === parentMessageIdRef.current) {
-          return true;
-        }
-      } else {
-        if (message.getParentMessageId()) {
-          return false
-        }
-        if (userRef.current) {
-          if (receiverType === CometChatUIKitConstants.MessageReceiverType.user && (receiverId === userRef.current.getUid() || senderId === userRef.current.getUid())) {
-            return true
+
+        const receiverId = message?.getReceiverId();
+        const receiverType = message?.getReceiverType();
+        const senderId = message?.getSender()?.getUid();
+        if (parentMessageIdRef.current) {
+          if (message.getParentMessageId() === parentMessageIdRef.current) {
+            return true;
           }
-        } else if (groupRef.current) {
-          if (receiverType === CometChatUIKitConstants.MessageReceiverType.group && (receiverId === groupRef.current.getGuid())) {
-            return true
+        } else {
+          if (message.getParentMessageId()) {
+            return false
+          }
+          if (userRef.current) {
+            if (receiverType === CometChatUIKitConstants.MessageReceiverType.user && (receiverId === userRef.current.getUid() || senderId === userRef.current.getUid())) {
+              return true
+            }
+          } else if (groupRef.current) {
+            if (receiverType === CometChatUIKitConstants.MessageReceiverType.group && (receiverId === groupRef.current.getGuid())) {
+              return true
+            }
           }
-        }
 
-        return false
+          return false
 
-      }
+        }
       } catch (error) {
-        errorHandler(error,"isPartOfCurrentChatForSDKEvent")
+        errorHandler(error, "isPartOfCurrentChatForSDKEvent")
       }
     }, []
   )
@@ -689,27 +724,27 @@ const playAudio: () => void = useCallback(() => {
   */
   const isThreadOfCurrentChatForUIEvent: (message: CometChat.BaseMessage) => boolean | undefined = useCallback(
     (message: CometChat.BaseMessage) => {
-     try {
-      if (!message.getParentMessageId()) {
-        return false
-      }
+      try {
+        if (!message.getParentMessageId()) {
+          return false
+        }
 
-      const receiverId = message?.getReceiverId();
+        const receiverId = message?.getReceiverId();
 
-      if (userRef.current) {
-        if (receiverId === userRef.current.getUid()) {
-          return true
-        }
-      } else if (groupRef.current) {
-        if (receiverId === groupRef.current.getGuid()) {
-          return true
+        if (userRef.current) {
+          if (receiverId === userRef.current.getUid()) {
+            return true
+          }
+        } else if (groupRef.current) {
+          if (receiverId === groupRef.current.getGuid()) {
+            return true
+          }
         }
-      }
 
-      return false
-     } catch (error) {
-      errorHandler(error,"isThreadOfCurrentChatForUIEvent")
-     }
+        return false
+      } catch (error) {
+        errorHandler(error, "isThreadOfCurrentChatForUIEvent")
+      }
     }, []
   );
 
@@ -722,14 +757,14 @@ const playAudio: () => void = useCallback(() => {
   const isThreadOfCurrentChatForSDKEvent: (message: CometChat.BaseMessage) => boolean | undefined = useCallback(
     (message: CometChat.BaseMessage) => {
       try {
-      
+
         if (!message.getParentMessageId()) {
           return false;
         }
-  
+
         const receiverId = message?.getReceiverId();
         const senderId = message?.getSender()?.getUid();
-  
+
         if (userRef.current) {
           if (receiverId === userRef.current.getUid() || senderId === userRef.current.getUid()) {
             return true;
@@ -739,11 +774,11 @@ const playAudio: () => void = useCallback(() => {
             return true;
           }
         }
-  
+
         return false;
-    } catch (error) {
-      errorHandler(error,"isThreadOfCurrentChatForSDKEvent")
-    }
+      } catch (error) {
+        errorHandler(error, "isThreadOfCurrentChatForSDKEvent")
+      }
     },
     []
   );
@@ -764,7 +799,7 @@ const playAudio: () => void = useCallback(() => {
         );
         return messageObject;
       } catch (error: any) {
-        errorHandler(error,"getMessageById");
+        errorHandler(error, "getMessageById");
       }
     },
     [messageList, errorHandler]
@@ -782,7 +817,7 @@ const playAudio: () => void = useCallback(() => {
           onThreadRepliesClick(message);
         }
       } catch (error: any) {
-        errorHandler(error,"openThreadView");
+        errorHandler(error, "openThreadView");
       }
     },
     [onThreadRepliesClick, errorHandler, isOnBottomRef]
@@ -798,6 +833,7 @@ const playAudio: () => void = useCallback(() => {
     (hasScrolled?: boolean) => {
       if (hasScrolled !== undefined) {
         isOnBottomRef.current = hasScrolled;
+        setScrollListToBottom(isOnBottomRef.current);
       }
     },
     [isOnBottomRef]
@@ -809,29 +845,29 @@ const playAudio: () => void = useCallback(() => {
 * @returns {string} The message text, with  mention replaced by the actual name of the user.
 */
   const getMentionsTextWithoutStyle: (message: CometChat.TextMessage) => string = (message: CometChat.TextMessage) => {
-  try {
-    const regex = /<@uid:(.*?)>/g;
-    let messageText = message.getText();
-    let messageTextTmp = message.getText();
-    let match = regex.exec(messageText);
-    let mentionedUsers = message.getMentionedUsers();
-    while (match !== null) {
-      let user;
-      for (let i = 0; i < mentionedUsers.length; i++) {
-        if (match[1] === mentionedUsers[i].getUid()) {
-          user = mentionedUsers[i];
-        }
-      }
-      if (user) {
-        messageTextTmp = messageTextTmp.replace(match[0], "@" + user?.getName());
-      }
-      match = regex.exec(messageText);
+    try {
+      const regex = /<@uid:(.*?)>/g;
+      let messageText = message.getText();
+      let messageTextTmp = message.getText();
+      let match = regex.exec(messageText);
+      let mentionedUsers = message.getMentionedUsers();
+      while (match !== null) {
+        let user;
+        for (let i = 0; i < mentionedUsers.length; i++) {
+          if (match[1] === mentionedUsers[i].getUid()) {
+            user = mentionedUsers[i];
+          }
+        }
+        if (user) {
+          messageTextTmp = messageTextTmp.replace(match[0], "@" + user?.getName());
+        }
+        match = regex.exec(messageText);
+      }
+      return messageTextTmp;
+    } catch (error) {
+      errorHandler(error, "getMentionsTextWithoutStyle");
+      throw error;
     }
-    return messageTextTmp;
-  } catch (error) {
-    errorHandler(error,"getMentionsTextWithoutStyle");
-    throw error;
-  }
   };
 
   /**
@@ -853,7 +889,7 @@ const playAudio: () => void = useCallback(() => {
           return messages;
         });
       } catch (error: any) {
-        errorHandler(error,"updateMessageByMuid");
+        errorHandler(error, "updateMessageByMuid");
       }
     },
     [errorHandler]
@@ -880,7 +916,7 @@ const playAudio: () => void = useCallback(() => {
           return messages;
         });
       } catch (error: any) {
-        errorHandler(error,"updateMessageByMessageId");
+        errorHandler(error, "updateMessageByMessageId");
       }
     },
     [errorHandler]
@@ -898,7 +934,7 @@ const playAudio: () => void = useCallback(() => {
           updateMessageByMessageId(editedMessage);
         }
       } catch (error: any) {
-        errorHandler(error,"replaceUpdatedMessage");
+        errorHandler(error, "replaceUpdatedMessage");
       }
     },
     [updateMessageByMessageId, errorHandler, isPartOfCurrentChatForSDKEvent]
@@ -921,7 +957,7 @@ const playAudio: () => void = useCallback(() => {
           updateMessageByMessageId(message);
         }
       } catch (error: any) {
-        errorHandler(error,"updateMessage");
+        errorHandler(error, "updateMessage");
       }
     },
     [
@@ -939,75 +975,75 @@ const playAudio: () => void = useCallback(() => {
    */
   const reactToMessages: (emoji: string, messageObject: CometChat.BaseMessage) => void = useCallback(
     (emoji: string, messageObject: CometChat.BaseMessage) => {
-     try {
-      const messageId = messageObject?.getId();
-      const msgObject = getMessageById(messageId) as CometChat.BaseMessage;
-      const reactions = msgObject?.getReactions() || [];
-      const emojiObject = reactions?.find((reaction: any) => {
-        return reaction?.reaction === emoji;
-      });
+      try {
+        const messageId = messageObject?.getId();
+        const msgObject = getMessageById(messageId) as CometChat.BaseMessage;
+        const reactions = msgObject?.getReactions() || [];
+        const emojiObject = reactions?.find((reaction: any) => {
+          return reaction?.reaction === emoji;
+        });
 
-      if (emojiObject && emojiObject?.getReactedByMe()) {
-        const updatedReactions: CometChat.ReactionCount[] = [];
-        reactions.forEach((reaction) => {
-          if (reaction?.getReaction() === emoji) {
-            if (reaction?.getCount() === 1) {
-              return;
+        if (emojiObject && emojiObject?.getReactedByMe()) {
+          const updatedReactions: CometChat.ReactionCount[] = [];
+          reactions.forEach((reaction) => {
+            if (reaction?.getReaction() === emoji) {
+              if (reaction?.getCount() === 1) {
+                return;
+              } else {
+                reaction.setCount(reaction?.getCount() - 1);
+                reaction.setReactedByMe(false);
+                updatedReactions.push(reaction);
+              }
             } else {
-              reaction.setCount(reaction?.getCount() - 1);
-              reaction.setReactedByMe(false);
               updatedReactions.push(reaction);
             }
-          } else {
-            updatedReactions.push(reaction);
-          }
-        });
-        const newMessageObj = CometChatUIKitUtility.clone(msgObject);
-        newMessageObj.setReactions(updatedReactions);
-        updateMessage(newMessageObj);
-        CometChat.removeReaction(messageId, emoji)
-          .then((message) => { })
-          .catch((error) => {
-            updateMessage(msgObject);
-            console.log(error);
           });
-      } else {
-        const updatedReactions = [];
-        const reactionAvailable = reactions.find((reaction) => {
-          return reaction?.getReaction() === emoji;
-        });
+          const newMessageObj = CometChatUIKitUtility.clone(msgObject);
+          newMessageObj.setReactions(updatedReactions);
+          updateMessage(newMessageObj);
+          CometChat.removeReaction(messageId, emoji)
+            .then((message) => { })
+            .catch((error) => {
+              updateMessage(msgObject);
+              console.log(error);
+            });
+        } else {
+          const updatedReactions = [];
+          const reactionAvailable = reactions.find((reaction) => {
+            return reaction?.getReaction() === emoji;
+          });
 
-        reactions.forEach((reaction) => {
-          if (reaction?.getReaction() === emoji) {
-            reaction.setCount(reaction?.getCount() + 1);
-            reaction.setReactedByMe(true);
-            updatedReactions.push(reaction);
-          } else {
-            updatedReactions.push(reaction);
+          reactions.forEach((reaction) => {
+            if (reaction?.getReaction() === emoji) {
+              reaction.setCount(reaction?.getCount() + 1);
+              reaction.setReactedByMe(true);
+              updatedReactions.push(reaction);
+            } else {
+              updatedReactions.push(reaction);
+            }
+          });
+          if (!reactionAvailable) {
+            const react: CometChat.ReactionCount = new CometChat.ReactionCount(emoji, 1, true);
+            updatedReactions.push(react);
           }
-        });
-        if (!reactionAvailable) {
-          const react: CometChat.ReactionCount = new CometChat.ReactionCount(emoji, 1, true);
-          updatedReactions.push(react);
-        }
 
-        const newMessageObj = CometChatUIKitUtility.clone(msgObject);
-        newMessageObj.setReactions(updatedReactions);
-        updateMessage(newMessageObj);
-        if (newMessageObj.getReactions() && newMessageObj.getReactions().length == 1 && isOnBottomRef.current) {
-          scrollToBottom()
+          const newMessageObj = CometChatUIKitUtility.clone(msgObject);
+          newMessageObj.setReactions(updatedReactions);
+          updateMessage(newMessageObj);
+          if (newMessageObj.getReactions() && newMessageObj.getReactions().length == 1 && isOnBottomRef.current) {
+            scrollToBottom()
+          }
+          CometChat.addReaction(messageId, emoji)
+            .then(() => { })
+            .catch((error: CometChat.CometChatException) => {
+              errorHandler(error, "addReaction");
+              updateMessage(msgObject);
+            });
         }
-        CometChat.addReaction(messageId, emoji)
-          .then(() => { })
-          .catch((error: CometChat.CometChatException) => {
-            errorHandler(error,"addReaction");
-            updateMessage(msgObject);
-          });
-      }
-     } catch (error) {
-      errorHandler(error,"reactToMessages");
+      } catch (error) {
+        errorHandler(error, "reactToMessages");
 
-     }
+      }
     }, [getMessageById, errorHandler, updateMessage]
   );
 
@@ -1035,10 +1071,10 @@ const playAudio: () => void = useCallback(() => {
               reactToMessages(args, messageObject);
             }}
           />
-  
+
         }
       } catch (error) {
-        errorHandler(error,"onReactMessage");
+        errorHandler(error, "onReactMessage");
         throw error;
       }
     },
@@ -1068,7 +1104,7 @@ const playAudio: () => void = useCallback(() => {
         }
 
       } catch (error: any) {
-        errorHandler(error,"onCopyMessage");
+        errorHandler(error, "onCopyMessage");
       }
     },
     [getMessageById, errorHandler, setShowToast]
@@ -1093,7 +1129,7 @@ const playAudio: () => void = useCallback(() => {
         }
 
       } catch (error: any) {
-        errorHandler(error,"onOpenMessageInfo");
+        errorHandler(error, "onOpenMessageInfo");
       }
     },
     [errorHandler, isOnBottomRef, getMessageById]
@@ -1115,7 +1151,7 @@ const playAudio: () => void = useCallback(() => {
 
         }
       } catch (error: any) {
-        errorHandler(error,"onOpenThread");
+        errorHandler(error, "onOpenThread");
       }
     },
     [openThreadView, errorHandler, getMessageById]
@@ -1140,7 +1176,7 @@ const playAudio: () => void = useCallback(() => {
 
         }
       } catch (error: any) {
-        errorHandler(error,"onMessagePrivately");
+        errorHandler(error, "onMessagePrivately");
       }
     },
     [getMessageById, errorHandler]
@@ -1166,12 +1202,12 @@ const playAudio: () => void = useCallback(() => {
               setShowToast(true);
             },
             (error: CometChat.CometChatException) => {
-              errorHandler(error,"onDeleteMessage");
+              errorHandler(error, "onDeleteMessage");
             }
           );
         }
       } catch (error: any) {
-        errorHandler(error,"onDeleteMessage");
+        errorHandler(error, "onDeleteMessage");
       }
     },
     [replaceUpdatedMessage, errorHandler, getMessageById]
@@ -1196,7 +1232,7 @@ const playAudio: () => void = useCallback(() => {
         }
 
       } catch (error: any) {
-        errorHandler(error,"onEditMessage");
+        errorHandler(error, "onEditMessage");
       }
     },
     [errorHandler, getMessageById]
@@ -1256,7 +1292,7 @@ const playAudio: () => void = useCallback(() => {
         );
         return options;
       } catch (error: any) {
-        errorHandler(error,"setDefaultOptionsCallback");
+        errorHandler(error, "setDefaultOptionsCallback");
         return options;
       }
     },
@@ -1322,7 +1358,7 @@ const playAudio: () => void = useCallback(() => {
         }
         return options;
       } catch (error: any) {
-        errorHandler(error,"getMessageOptions");
+        errorHandler(error, "getMessageOptions");
         return options;
       }
     },
@@ -1351,7 +1387,7 @@ const playAudio: () => void = useCallback(() => {
           if (messageAlignment === MessageListAlignment.left) {
             bubbleAlignment = MessageBubbleAlignment.left;
           }
-           else if (
+          else if (
             !message.getSender() ||
             (message?.getSender().getUid() === loggedInUserRef.current?.getUid())
           ) {
@@ -1362,7 +1398,7 @@ const playAudio: () => void = useCallback(() => {
         }
         return bubbleAlignment;
       } catch (error: any) {
-        errorHandler(error,"setBubbleAlignment");
+        errorHandler(error, "setBubbleAlignment");
         return bubbleAlignment;
       }
     },
@@ -1389,7 +1425,7 @@ const playAudio: () => void = useCallback(() => {
         }
         return null;
       } catch (error: any) {
-        errorHandler(error,"getContentView");
+        errorHandler(error, "getContentView");
         return null;
       }
     },
@@ -1416,7 +1452,7 @@ const playAudio: () => void = useCallback(() => {
         }
         return null;
       } catch (error: any) {
-        errorHandler(error,"getBottomView");
+        errorHandler(error, "getBottomView");
         return null;
       }
     },
@@ -1441,7 +1477,7 @@ const playAudio: () => void = useCallback(() => {
         }
         return view;
       } catch (error: any) {
-        errorHandler(error,"getHeaderView");
+        errorHandler(error, "getHeaderView");
         return null;
       }
     },
@@ -1466,7 +1502,7 @@ const playAudio: () => void = useCallback(() => {
         }
         return view;
       } catch (error: any) {
-        errorHandler(error,"getFooterView");
+        errorHandler(error, "getFooterView");
         return null;
       }
     },
@@ -1491,7 +1527,7 @@ const playAudio: () => void = useCallback(() => {
         }
         return view;
       } catch (error: any) {
-        errorHandler(error,"getBubbleWrapper");
+        errorHandler(error, "getBubbleWrapper");
         return view;
       }
     },
@@ -1509,7 +1545,7 @@ const playAudio: () => void = useCallback(() => {
         CometChatMessageEvents.ccMessageRead.next(message);
       },
       (error: unknown) => {
-        errorHandler(error,"markAsRead");
+        errorHandler(error, "markAsRead");
       }
     );
   }, [errorHandler])
@@ -1521,14 +1557,14 @@ const playAudio: () => void = useCallback(() => {
      */
   const checkAndMarkMessageAsRead: (message: CometChat.BaseMessage) => void = useCallback(
     (message: CometChat.BaseMessage) => {
-    try {
-      if (!hideReceipts &&
-        message.getSender().getUid() !== loggedInUserRef.current?.getUid()) {
-        markMessageRead(message);
+      try {
+        if (!hideReceipts &&
+          message.getSender().getUid() !== loggedInUserRef.current?.getUid()) {
+          markMessageRead(message);
+        }
+      } catch (error) {
+        errorHandler(error, "checkAndMarkMessageAsRead")
       }
-    } catch (error) {
-      errorHandler(error,"checkAndMarkMessageAsRead")
-    }
     }, [hideReceipts, markMessageRead])
 
   /**
@@ -1538,23 +1574,23 @@ const playAudio: () => void = useCallback(() => {
 
   const clearNewMessagesCount: () => void = useCallback(() => {
     try {
-      
-    isOnBottomRef.current = true;
-    const lastMessage: CometChat.BaseMessage =
-      UnreadMessagesRef.current[UnreadMessagesRef.current.length - 1];
-    if (lastMessage) {
-      checkAndMarkMessageAsRead(lastMessage);
-    }
-    UnreadMessagesRef.current = [];
-    if (newMessageTextRef.current) {
-      newMessageTextRef.current = "";
-    }
 
-    if (showNewMessagesBanner) {
-      setShowNewMessagesBanner(false)
-    }
+      isOnBottomRef.current = true;
+      const lastMessage: CometChat.BaseMessage =
+        UnreadMessagesRef.current[UnreadMessagesRef.current.length - 1];
+      if (lastMessage) {
+        checkAndMarkMessageAsRead(lastMessage);
+      }
+      UnreadMessagesRef.current = [];
+      if (newMessageTextRef.current) {
+        newMessageTextRef.current = "";
+      }
+
+      if (showNewMessagesBanner) {
+        setShowNewMessagesBanner(false)
+      }
     } catch (error) {
-      errorHandler(error,"clearNewMessagesCount")
+      errorHandler(error, "clearNewMessagesCount")
     }
   }, [checkAndMarkMessageAsRead, showNewMessagesBanner])
 
@@ -1580,7 +1616,7 @@ const playAudio: () => void = useCallback(() => {
             if (messageList?.length <= 0) {
               setMessageListState(States.error);
             }
-            errorHandler(error,"prependMessages");
+            errorHandler(error, "prependMessages");
             reject(error);
           }
         }
@@ -1631,7 +1667,7 @@ const playAudio: () => void = useCallback(() => {
 
         if (!isFetchingPreviousMessages) {
           isFetchingPreviousMessages = true;
-          if (!messageListManagerRef.current.previous) {
+          if (!messageListManagerRef.current.previous && messageIdRef.current.prevMessageId) {
             messageListManagerRef.current.previous = new MessageListManager(
               errorHandler,
               messagesRequestBuilder,
@@ -1654,13 +1690,13 @@ const playAudio: () => void = useCallback(() => {
                     unreadMessageCount
                   });
                 }
-                if(messagesList.length > 0 && showSmartRepliesRef.current){
-                toggleSmartReplyView(messagesList[messagesList.length - 1])
+                if (messagesList.length > 0 && showSmartRepliesRef.current) {
+                  toggleSmartReplyView(messagesList[messagesList.length - 1])
                 }
-                if(messagesList.length == 0 && showConversationStarters){
+                if (messagesList.length == 0 && showConversationStarters) {
                   setShowConversationStarter(true);
                 }
-                else{
+                else {
                   setShowConversationStarter(false);
 
                 };
@@ -1679,7 +1715,7 @@ const playAudio: () => void = useCallback(() => {
                         }
                       )
                       .catch((error: CometChat.CometChatException) => {
-                        errorHandler(error,"fetchActionMessages");
+                        errorHandler(error, "fetchActionMessages");
                       });
                   });
                 });
@@ -1758,7 +1794,7 @@ const playAudio: () => void = useCallback(() => {
                 setMessageListState(States.error);
               }
               if (error.code != "REQUEST_IN_PROGRESS") {
-                errorHandler(error,"fetchPreviousMessages");
+                errorHandler(error, "fetchPreviousMessages");
                 reject(error);
               }
               else {
@@ -1773,7 +1809,7 @@ const playAudio: () => void = useCallback(() => {
         if (messageList?.length <= 0) {
           setMessageListState(States.error);
         }
-        errorHandler(error,"fetchPreviousMessages");
+        errorHandler(error, "fetchPreviousMessages");
       }
     });
   }, [
@@ -1792,35 +1828,35 @@ const playAudio: () => void = useCallback(() => {
     setShowConversationStarter(false);
     setEnableSmartReplies(false);
   }
-/**
- * Retrieves smart replies for the current user or group context.
- * @returns A promise resolving to an array of smart replies.
- */
- const  getSmartReplies = (): Promise<string[]> => {
+  /**
+   * Retrieves smart replies for the current user or group context.
+   * @returns A promise resolving to an array of smart replies.
+   */
+  const getSmartReplies = (): Promise<string[]> => {
     return new Promise(async (resolve, reject) => {
-        try {
-            let receiverId: string = userRef.current
-                ? userRef.current?.getUid()
-                : groupRef.current?.getGuid()!;
-            let receiverType: string = userRef.current
-                ? CometChatUIKitConstants.MessageReceiverType.user
-                : CometChatUIKitConstants.MessageReceiverType.group;
-            const response: any = await CometChat.getSmartReplies(
-                receiverId,
-                receiverType,
-            );
+      try {
+        let receiverId: string = userRef.current
+          ? userRef.current?.getUid()
+          : groupRef.current?.getGuid()!;
+        let receiverType: string = userRef.current
+          ? CometChatUIKitConstants.MessageReceiverType.user
+          : CometChatUIKitConstants.MessageReceiverType.group;
+        const response: any = await CometChat.getSmartReplies(
+          receiverId,
+          receiverType,
+        );
 
-            return resolve(Object.values(response));
-        } catch (e) {
-          errorHandler(e,"getSmartReplies")
-            reject(e);
-        }
+        return resolve(Object.values(response));
+      } catch (e) {
+        errorHandler(e, "getSmartReplies")
+        reject(e);
+      }
     });
-};
-/**
- * Retrieves conversation starters for the current user or group context.
- * @returns A promise resolving to an array of conversation starters.
- */
+  };
+  /**
+   * Retrieves conversation starters for the current user or group context.
+   * @returns A promise resolving to an array of conversation starters.
+   */
   const getConversationStarter = (): Promise<string[]> => {
     return new Promise(async (resolve, reject) => {
       try {
@@ -1836,31 +1872,31 @@ const playAudio: () => void = useCallback(() => {
         );
         return resolve(response);
       } catch (e) {
-        errorHandler(e,"getConversationStarter")
+        errorHandler(e, "getConversationStarter")
         reject(e);
       }
     });
   };
-/**
- * Loads and displays either conversation starters or smart replies based on current conditions.
- * @returns A JSX element rendering the appropriate suggestions or null if none are applicable.
- */
+  /**
+   * Loads and displays either conversation starters or smart replies based on current conditions.
+   * @returns A JSX element rendering the appropriate suggestions or null if none are applicable.
+   */
   function loadFooterViewContent() {
-    if(showConversationStarter){
+    if (showConversationStarter) {
       return <div className="cometchat-message-list__footer-conversation-starter">
         <CometChatConversationStarter getConversationStarters={getConversationStarter} onSuggestionClicked={onSuggestionClicked} />
       </div>
     }
-    if(enableSmartReplies && showSmartRepliesRef.current){
+    if (enableSmartReplies && showSmartRepliesRef.current) {
       return <div className="cometchat-message-list__footer-smart-replies">
-        <CometChatSmartReplies getSmartReplies={getSmartReplies} onSuggestionClicked={onSuggestionClicked} closeCallback={()=>{
+        <CometChatSmartReplies getSmartReplies={getSmartReplies} onSuggestionClicked={onSuggestionClicked} closeCallback={() => {
           setEnableSmartReplies(false);
         }} />
       </div>
 
     }
     return null;
- 
+
   }
 
   /**
@@ -1911,8 +1947,8 @@ const playAudio: () => void = useCallback(() => {
               setScrollListToBottom(false);
             }
             let countText = UnreadMessagesRef.current.length > 1
-                ? localize("NEW_MESSAGES")
-                : localize("NEW_MESSAGE");
+              ? localize("NEW_MESSAGES")
+              : localize("NEW_MESSAGE");
             UnreadMessagesRef.current.push(...messages);
             newMessageTextRef.current =
               + UnreadMessagesRef.current.length + " " + countText;
@@ -1924,7 +1960,7 @@ const playAudio: () => void = useCallback(() => {
           if (messageList?.length <= 0) {
             setMessageListState(States.error);
           }
-          errorHandler(error,"appendMessages");
+          errorHandler(error, "appendMessages");
           reject(error);
         }
       });
@@ -1943,41 +1979,41 @@ const playAudio: () => void = useCallback(() => {
     return new Promise((resolve, reject) => {
       try {
         let requestBuilder = new CometChat.MessagesRequestBuilder()
-        .setType(CometChatUIKitConstants.MessageCategory.message)
-        .setCategory(CometChatUIKitConstants.MessageCategory.action)
-        .setMessageId(messageIdRef.current.nextMessageId)
-        .setLimit(30);
-      if (userRef.current) {
-        requestBuilder.setUID(userRef.current.getUid());
-      } else if (groupRef.current) {
-        requestBuilder.setGUID(groupRef.current.getGuid());
-      }
-      requestBuilder
-        .build()
-        .fetchNext()
-        .then((messages) => {
-          if (messages && messages.length > 0) {
-            messages.forEach((message: CometChat.BaseMessage) => {
-              replaceUpdatedMessage(
-                (
-                  message as CometChat.Action
-                ).getActionOn() as CometChat.BaseMessage
-              );
-            });
-            return resolve(true);
-          } else {
-            return resolve(true);
-          }
-        })
-        .catch((error: CometChat.CometChatException) => {
-          errorHandler(error,"MessagesRequestBuilder");
-          if (messageList?.length <= 0) {
-            setMessageListState(States.error);
-          }
-          return reject(error);
-        });
+          .setType(CometChatUIKitConstants.MessageCategory.message)
+          .setCategory(CometChatUIKitConstants.MessageCategory.action)
+          .setMessageId(messageIdRef.current.nextMessageId)
+          .setLimit(30);
+        if (userRef.current) {
+          requestBuilder.setUID(userRef.current.getUid());
+        } else if (groupRef.current) {
+          requestBuilder.setGUID(groupRef.current.getGuid());
+        }
+        requestBuilder
+          .build()
+          .fetchNext()
+          .then((messages) => {
+            if (messages && messages.length > 0) {
+              messages.forEach((message: CometChat.BaseMessage) => {
+                replaceUpdatedMessage(
+                  (
+                    message as CometChat.Action
+                  ).getActionOn() as CometChat.BaseMessage
+                );
+              });
+              return resolve(true);
+            } else {
+              return resolve(true);
+            }
+          })
+          .catch((error: CometChat.CometChatException) => {
+            errorHandler(error, "MessagesRequestBuilder");
+            if (messageList?.length <= 0) {
+              setMessageListState(States.error);
+            }
+            return reject(error);
+          });
       } catch (error) {
-        errorHandler(error,"fetchActionMessages")
+        errorHandler(error, "fetchActionMessages")
       }
     });
   }, [errorHandler]);
@@ -2029,7 +2065,7 @@ const playAudio: () => void = useCallback(() => {
               if (messageList?.length <= 0) {
                 setMessageListState(States.error);
               }
-              errorHandler(error,"fetchNextMessages");
+              errorHandler(error, "fetchNextMessages");
               reject(error);
             }
           );
@@ -2037,7 +2073,7 @@ const playAudio: () => void = useCallback(() => {
           resolve(true);
         }
       } catch (error: any) {
-        errorHandler(error,"fetchNextMessages");
+        errorHandler(error, "fetchNextMessages");
       }
     });
   }, [
@@ -2074,7 +2110,7 @@ const playAudio: () => void = useCallback(() => {
           return messages;
         });
       } catch (error: any) {
-        errorHandler(error,"updateReplyCount");
+        errorHandler(error, "updateReplyCount");
       }
     },
     [errorHandler]
@@ -2100,7 +2136,7 @@ const playAudio: () => void = useCallback(() => {
         return prevMessageList;
       });
     } catch (error: any) {
-      errorHandler(error,"updateUnreadReplyCount");
+      errorHandler(error, "updateUnreadReplyCount");
     }
   }, [errorHandler])
   /**
@@ -2158,10 +2194,10 @@ const playAudio: () => void = useCallback(() => {
   const addMessage: (message: CometChat.BaseMessage) => void = useCallback(
     (message: CometChat.BaseMessage) => {
       try {
-        if(showSmartRepliesRef.current){
+        if (showSmartRepliesRef.current) {
           toggleSmartReplyView(message);
         }
-       setShowConversationStarter(false)
+        setShowConversationStarter(false)
         totalMessagesCountRef.current += 1;
         if (totalMessagesCountRef.current > 0 && messageListState != States.loaded) {
           setMessageListState(States.loaded)
@@ -2184,10 +2220,10 @@ const playAudio: () => void = useCallback(() => {
         }
 
       } catch (error: any) {
-        errorHandler(error,"addMessage");
+        errorHandler(error, "addMessage");
       }
     },
-    [ errorHandler, scrollListToBottom]
+    [errorHandler, scrollListToBottom]
   );
 
 
@@ -2200,19 +2236,19 @@ const playAudio: () => void = useCallback(() => {
      * @returns {void}
      */
   const showAndIncrementUnreadCount: (message: CometChat.BaseMessage) => void = useCallback((message: CometChat.BaseMessage) => {
-try {
-  if (!isOnBottomRef.current && message.getSender() && message.getSender().getUid() != loggedInUserRef.current?.getUid()) {
-    let countText = UnreadMessagesRef.current.length > 1
-        ? localize("NEW_MESSAGES")
-        : localize("NEW_MESSAGE");
-    UnreadMessagesRef.current.push(message);
-    newMessageTextRef.current =
-      + UnreadMessagesRef.current.length + " " + countText;
-    setShowNewMessagesBanner(true);
-  }
-} catch (error) {
-  errorHandler(error,"showAndIncrementUnreadCount")
-}
+    try {
+      if (!isOnBottomRef.current && message.getSender() && message.getSender().getUid() != loggedInUserRef.current?.getUid()) {
+        let countText = UnreadMessagesRef.current.length > 1
+          ? localize("NEW_MESSAGES")
+          : localize("NEW_MESSAGE");
+        UnreadMessagesRef.current.push(message);
+        newMessageTextRef.current =
+          + UnreadMessagesRef.current.length + " " + countText;
+        setShowNewMessagesBanner(true);
+      }
+    } catch (error) {
+      errorHandler(error, "showAndIncrementUnreadCount")
+    }
   }, []);
 
   /**
@@ -2239,7 +2275,7 @@ try {
           return messages;
         });
       } catch (error: any) {
-        errorHandler(error,"markAllMessagAsDelivered");
+        errorHandler(error, "markAllMessagAsDelivered");
       }
     },
     [errorHandler]
@@ -2278,7 +2314,7 @@ try {
           return messages;
         });
       } catch (error: any) {
-        errorHandler(error,"markAllMessageAsRead");
+        errorHandler(error, "markAllMessageAsRead");
       }
     },
     [errorHandler]
@@ -2304,7 +2340,7 @@ try {
             : markAllMessageAsRead(messageReceipt);
         }
       } catch (error: any) {
-        errorHandler(error,"messageReadAndDelivered");
+        errorHandler(error, "messageReadAndDelivered");
       }
     },
     [
@@ -2321,18 +2357,18 @@ try {
     */
   const checkAndScrollToBottom: (forceScroll?: boolean) => void = useCallback((forceScroll: boolean = false) => {
 
-   try {
-    if (forceScroll || scrollToBottomOnNewMessages) {
-      setTimeout(() => {
-        setScrollListToBottom(true);
-        isOnBottomRef.current = true;
-        UnreadMessagesRef.current = [];
-      }, 100);
-      return;
+    try {
+      if (forceScroll || scrollToBottomOnNewMessages) {
+        setTimeout(() => {
+          setScrollListToBottom(true);
+          isOnBottomRef.current = true;
+          UnreadMessagesRef.current = [];
+        }, 100);
+        return;
+      }
+    } catch (error) {
+      errorHandler(error, "checkAndScrollToBottom")
     }
-   } catch (error) {
-    errorHandler(error,"checkAndScrollToBottom")
-   }
   }, [scrollToBottomOnNewMessages]);
 
   /**
@@ -2369,7 +2405,7 @@ try {
           }
         }
       } catch (error) {
-        errorHandler(error,"messageReceivedHandler");
+        errorHandler(error, "messageReceivedHandler");
       }
     },
     [
@@ -2413,7 +2449,7 @@ try {
           }
         }
       } catch (error) {
-        errorHandler(error,"groupActionMessageReceived");
+        errorHandler(error, "groupActionMessageReceived");
       }
     },
     [
@@ -2431,38 +2467,38 @@ try {
      * @returns {boolean} - Returns true if the receipt is of the current list, otherwise returns false.
      */
   const isReactionOfThisList: (receipt: CometChat.ReactionEvent) => boolean = useCallback((receipt: CometChat.ReactionEvent) => {
-   try {
-    const receiverId = receipt?.getReceiverId();
-    const receiverType = receipt?.getReceiverType();
-    const reactedById = receipt?.getReaction()?.getReactedBy()?.getUid();
-    const parentMessageId = receipt?.getParentMessageId();
-    const listParentMessageId = parentMessageId && String(parentMessageId);
-    if (listParentMessageId) {
-      if (parentMessageId === listParentMessageId) {
-        return true;
+    try {
+      const receiverId = receipt?.getReceiverId();
+      const receiverType = receipt?.getReceiverType();
+      const reactedById = receipt?.getReaction()?.getReactedBy()?.getUid();
+      const parentMessageId = receipt?.getParentMessageId();
+      const listParentMessageId = parentMessageId && String(parentMessageId);
+      if (listParentMessageId) {
+        if (parentMessageId === listParentMessageId) {
+          return true;
+        } else {
+          return false
+        }
       } else {
-        return false
-      }
-    } else {
-      if (receipt.getParentMessageId()) {
-        return false
-      }
-
-      if (userRef.current) {
-        if (receiverType === CometChatUIKitConstants.MessageReceiverType.user && (receiverId === userRef.current?.getUid() || reactedById === userRef.current?.getUid())) {
-          return true
+        if (receipt.getParentMessageId()) {
+          return false
         }
-      } else if (groupRef.current) {
-        if (receiverType === CometChatUIKitConstants.MessageReceiverType.group && (receiverId === groupRef.current?.getGuid())) {
-          return true
+
+        if (userRef.current) {
+          if (receiverType === CometChatUIKitConstants.MessageReceiverType.user && (receiverId === userRef.current?.getUid() || reactedById === userRef.current?.getUid())) {
+            return true
+          }
+        } else if (groupRef.current) {
+          if (receiverType === CometChatUIKitConstants.MessageReceiverType.group && (receiverId === groupRef.current?.getGuid())) {
+            return true
+          }
         }
       }
+      return false
+    } catch (error) {
+      errorHandler(error, "isReactionOfThisList");
+      throw error;
     }
-    return false
-   } catch (error) {
-    errorHandler(error,"isReactionOfThisList");
-    throw error;
-   }
   }, [])
 
   /**
@@ -2473,41 +2509,41 @@ try {
   const messageReactionUpdated: (receipt: CometChat.ReactionEvent, isAdded: boolean) => boolean | undefined = useCallback(
     (receipt: CometChat.ReactionEvent, isAdded: boolean) => {
       try {
-        
-      if (!isReactionOfThisList(receipt)) {
-        return false;
-      }
 
-      setMessageList((prevMessageList: CometChat.BaseMessage[]) => {
-        const index = prevMessageList.findIndex(
-          (i) =>
-            i.getId().toString() ===
-            receipt.getReaction()?.getMessageId().toString()
-        );
-        if (index === -1) {
-          return prevMessageList;
-        }
-        const messageObject = prevMessageList[index];
-        let action: CometChat.REACTION_ACTION;
-        if (isAdded) {
-          action = CometChat.REACTION_ACTION.REACTION_ADDED;
-        } else {
-          action = CometChat.REACTION_ACTION.REACTION_REMOVED;
-        }
-        const modifiedMessage = CometChat.CometChatHelper.updateMessageWithReactionInfo(messageObject, receipt.getReaction(), action) as CometChat.BaseMessage;
-        if (isAdded && modifiedMessage.getReactions() && modifiedMessage.getReactions().length == 1 && isOnBottomRef.current) {
-          scrollToBottom()
+        if (!isReactionOfThisList(receipt)) {
+          return false;
         }
-        return prevMessageList.map((m) => {
-          if (m.getId().toString() === modifiedMessage?.getId().toString()) {
-            return CometChatUIKitUtility.clone(modifiedMessage)
+
+        setMessageList((prevMessageList: CometChat.BaseMessage[]) => {
+          const index = prevMessageList.findIndex(
+            (i) =>
+              i.getId().toString() ===
+              receipt.getReaction()?.getMessageId().toString()
+          );
+          if (index === -1) {
+            return prevMessageList;
+          }
+          const messageObject = prevMessageList[index];
+          let action: CometChat.REACTION_ACTION;
+          if (isAdded) {
+            action = CometChat.REACTION_ACTION.REACTION_ADDED;
           } else {
-            return m
+            action = CometChat.REACTION_ACTION.REACTION_REMOVED;
+          }
+          const modifiedMessage = CometChat.CometChatHelper.updateMessageWithReactionInfo(messageObject, receipt.getReaction(), action) as CometChat.BaseMessage;
+          if (isAdded && modifiedMessage.getReactions() && modifiedMessage.getReactions().length == 1 && isOnBottomRef.current) {
+            scrollToBottom()
           }
+          return prevMessageList.map((m) => {
+            if (m.getId().toString() === modifiedMessage?.getId().toString()) {
+              return CometChatUIKitUtility.clone(modifiedMessage)
+            } else {
+              return m
+            }
+          });
         });
-      });
       } catch (error) {
-        errorHandler(error,"messageReactionUpdated")
+        errorHandler(error, "messageReactionUpdated")
       }
     }, [isReactionOfThisList]
   );
@@ -2539,7 +2575,7 @@ try {
           }
         }
       } catch (error) {
-        errorHandler(error,"callActionMessageReceived");
+        errorHandler(error, "callActionMessageReceived");
       }
     },
     [
@@ -2580,7 +2616,7 @@ try {
           }
         }
       } catch (error: any) {
-        errorHandler(error,"handleGroupAndCallActions");
+        errorHandler(error, "handleGroupAndCallActions");
       }
     },
     [
@@ -2611,7 +2647,7 @@ try {
           }
         );
       } catch (error: any) {
-        errorHandler(error,"onBottomCallback");
+        errorHandler(error, "onBottomCallback");
       }
     });
   }, [
@@ -2644,7 +2680,7 @@ try {
           }
         );
       } catch (error: any) {
-        errorHandler(error,"onTopCallback");
+        errorHandler(error, "onTopCallback");
       }
     });
   }, [fetchPreviousMessages, errorHandler, isOnBottomRef]);
@@ -2656,13 +2692,13 @@ try {
  */
   const updateView: (message: CometChat.BaseMessage) => void = useCallback(
     (message: CometChat.BaseMessage) => {
-     try {
-      elementRefs.current[message.getId()].current?.scrollIntoView({
-        block: "center",
-      });
-     } catch (error) {
-      errorHandler(error,"updateView")
-     }
+      try {
+        elementRefs.current[message.getId()].current?.scrollIntoView({
+          block: "center",
+        });
+      } catch (error) {
+        errorHandler(error, "updateView")
+      }
     },
     []
   );
@@ -2676,7 +2712,7 @@ try {
       clearNewMessagesCount()
       setScrollListToBottom(true);
     } catch (error: any) {
-      errorHandler(error,"scrollToBottom");
+      errorHandler(error, "scrollToBottom");
     }
   }, [markMessageRead, errorHandler, clearNewMessagesCount]);
 
@@ -2688,19 +2724,19 @@ try {
 
   const resetCountForUnreadMessagesInThread: (parentMessageId: number | string) => void = useCallback(
     (parentMessageId: number | string) => {
- try {
-  setMessageList((prevMessageList: CometChat.BaseMessage[]) => {
-    return prevMessageList.map((m: CometChat.BaseMessage) => {
-      if (m?.getId() === parentMessageId) {
-        return m;
-      } else {
-        return m;
+      try {
+        setMessageList((prevMessageList: CometChat.BaseMessage[]) => {
+          return prevMessageList.map((m: CometChat.BaseMessage) => {
+            if (m?.getId() === parentMessageId) {
+              return m;
+            } else {
+              return m;
+            }
+          });
+        });
+      } catch (error) {
+        errorHandler(error, "resetCountForUnreadMessagesInThread")
       }
-    });
-  });
- } catch (error) {
-  errorHandler(error,"resetCountForUnreadMessagesInThread")
- }
     },
     []
   );
@@ -2745,7 +2781,7 @@ try {
       );
       const ccMessageRead = CometChatMessageEvents.ccMessageRead.subscribe(
         (message: CometChat.BaseMessage) => {
-          if (isThreadOfCurrentChatForSDKEvent(message)) {
+          if (isThreadOfCurrentChatForSDKEvent(message) && message.getReceiverType() == CometChatUIKitConstants.MessageReceiverType.user) {
             resetCountForUnreadMessagesInThread(message.getParentMessageId());
           }
         }
@@ -2906,12 +2942,12 @@ try {
         messageReceivedHandler(customMessage);
       });
       const onMessagesDelivered = CometChatMessageEvents.onMessagesDelivered.subscribe((messageReceipt: CometChat.MessageReceipt) => {
-        if (!hideReceipts) {
+        if (!hideReceipts && messageReceipt.getReceiptType() == CometChatUIKitConstants.MessageReceiverType.user) {
           messageReadAndDelivered(messageReceipt);
         }
       });
       const onMessagesRead = CometChatMessageEvents.onMessagesRead.subscribe((messageReceipt: CometChat.MessageReceipt) => {
-        if (!hideReceipts) {
+        if (!hideReceipts && messageReceipt.getReceiptType() == CometChatUIKitConstants.MessageReceiverType.user) {
           messageReadAndDelivered(messageReceipt);
         }
       });
@@ -2987,11 +3023,11 @@ try {
           onMessageReactionAdded?.unsubscribe();
           onMessageReactionRemoved?.unsubscribe();
         } catch (error: any) {
-          errorHandler(error,"subscribeToUIEvents");
+          errorHandler(error, "subscribeToUIEvents");
         }
       };
     } catch (error: any) {
-      errorHandler(error,"subscribeToUIEvents");
+      errorHandler(error, "subscribeToUIEvents");
     }
   }, [
     validateTransientMessage,
@@ -3016,52 +3052,52 @@ try {
    */
   const handleScroll = useCallback(() => {
     try {
-      
-    const messageListBody = document.querySelector(".cometchat-message-list .cometchat-list__body");
-    if (!messageListBody) return;
-    let firstVisibleMessageId: any = null;
-    Object.keys(elementRefs.current).some((messageId) => {
-      const element = elementRefs.current[messageId];
-      if (element.current) {
-        const rect = element.current.getBoundingClientRect();
-        const containerRect = messageListBody.getBoundingClientRect();
-        if (rect.top >= containerRect.top && rect.bottom <= containerRect.bottom) {
-          firstVisibleMessageId = messageId;
-          return true;
+
+      const messageListBody = document.querySelector(".cometchat-message-list .cometchat-list__body");
+      if (!messageListBody) return;
+      let firstVisibleMessageId: any = null;
+      Object.keys(elementRefs.current).some((messageId) => {
+        const element = elementRefs.current[messageId];
+        if (element.current) {
+          const rect = element.current.getBoundingClientRect();
+          const containerRect = messageListBody.getBoundingClientRect();
+          if (rect.top >= containerRect.top && rect.bottom <= containerRect.bottom) {
+            firstVisibleMessageId = messageId;
+            return true;
+          }
         }
-      }
-      return false;
-    });
-    if (firstVisibleMessageId) {
-      const currentVisibleMessage = getMessageById(firstVisibleMessageId);
-      if (currentVisibleMessage) {
-        const messageDate = currentVisibleMessage.getSentAt();
-        if (isDateDifferent(dateHeaderRef.current, messageDate)) {
-          setDateHeader(messageDate);
-          dateHeaderRef.current = messageDate;
+        return false;
+      });
+      if (firstVisibleMessageId) {
+        const currentVisibleMessage = getMessageById(firstVisibleMessageId);
+        if (currentVisibleMessage) {
+          const messageDate = currentVisibleMessage.getSentAt();
+          if (isDateDifferent(dateHeaderRef.current, messageDate)) {
+            setDateHeader(messageDate);
+            dateHeaderRef.current = messageDate;
 
+          }
         }
       }
-    }
     } catch (error) {
-      errorHandler(error,"handleScroll")
+      errorHandler(error, "handleScroll")
     }
   }, [getMessageById, setDateHeader, messageList])
 
   useEffect(() => {
- try {
-  let listElement = document.querySelector(".cometchat-message-list .cometchat-list__body");
-  if (listElement) {
-    listElement.addEventListener("scroll", handleScroll)
-  }
-  return () => {
-    if (listElement) {
-      listElement.removeEventListener("scroll", handleScroll);
+    try {
+      let listElement = document.querySelector(".cometchat-message-list .cometchat-list__body");
+      if (listElement) {
+        listElement.addEventListener("scroll", handleScroll)
+      }
+      return () => {
+        if (listElement) {
+          listElement.removeEventListener("scroll", handleScroll);
+        }
+      }
+    } catch (error) {
+      errorHandler(error, "addEventListener")
     }
-  }
- } catch (error) {
-  errorHandler(error,"addEventListener")
- }
 
   }, [handleScroll])
   /**
@@ -3089,7 +3125,7 @@ try {
           firstDateObj.getFullYear() !== secondDateObj.getFullYear()
         );
       } catch (error: any) {
-        errorHandler(error,"isDateDifferent");
+        errorHandler(error, "isDateDifferent");
       }
     },
     [errorHandler]
@@ -3104,25 +3140,25 @@ try {
   const showHeaderTitle: (message: CometChat.BaseMessage) => boolean = useCallback(
     (message: CometChat.BaseMessage) => {
       try {
-        
-      if (messageAlignment === MessageListAlignment.left) {
-        return true;
-      } else {
-        if (
-          groupRef.current &&
-          message?.getCategory() !==
-          CometChatUIKitConstants.MessageCategory.action &&
-          message?.getSender() &&
-          message?.getSender()?.getUid() !== loggedInUserRef.current?.getUid() &&
-          messageAlignment === MessageListAlignment.standard
-        ) {
+
+        if (messageAlignment === MessageListAlignment.left) {
           return true;
         } else {
-          return false;
+          if (
+            groupRef.current &&
+            message?.getCategory() !==
+            CometChatUIKitConstants.MessageCategory.action &&
+            message?.getSender() &&
+            message?.getSender()?.getUid() !== loggedInUserRef.current?.getUid() &&
+            messageAlignment === MessageListAlignment.standard
+          ) {
+            return true;
+          } else {
+            return false;
+          }
         }
-      }
       } catch (error) {
-        errorHandler(error,"showHeaderTitle");
+        errorHandler(error, "showHeaderTitle");
         throw error;
       }
     },
@@ -3138,28 +3174,28 @@ try {
   const getBubbleLeadingView: (message: CometChat.BaseMessage) => any = useCallback(
     (item: CometChat.BaseMessage) => {
       try {
-        
-      if (
-        item?.getCategory() !==
-        CometChatUIKitConstants.MessageCategory.action &&
-        item?.getCategory() !== CometChatUIKitConstants.MessageCategory.call &&
-        showHeaderTitle(item) &&
-        !hideAvatar
-      ) {
-        return (
-          <CometChatAvatar
-            name={item?.getSender()?.getName() || loggedInUserRef.current?.getName()!}
-            image={item?.getSender()?.getAvatar() || loggedInUserRef.current?.getAvatar()!}
-          ></CometChatAvatar>
-        );
-      } else {
-        return null;
-      }
+
+        if (
+          item?.getCategory() !==
+          CometChatUIKitConstants.MessageCategory.action &&
+          item?.getCategory() !== CometChatUIKitConstants.MessageCategory.call &&
+          showHeaderTitle(item) &&
+          !hideAvatar
+        ) {
+          return (
+            <CometChatAvatar
+              name={item?.getSender() ? item?.getSender()?.getName() : loggedInUserRef.current?.getName()!}
+              image={item?.getSender() ? item?.getSender()?.getAvatar() : loggedInUserRef.current?.getAvatar()!}
+            ></CometChatAvatar>
+          );
+        } else {
+          return null;
+        }
       } catch (error) {
-        errorHandler(error,"getBubbleLeadingView")
+        errorHandler(error, "getBubbleLeadingView")
       }
     },
-    [showHeaderTitle,hideAvatar]
+    [showHeaderTitle, hideAvatar]
   );
 
   /**
@@ -3204,24 +3240,24 @@ try {
 
   const getBubbleHeader: (item: CometChat.BaseMessage) => any = useCallback(
     (item: CometChat.BaseMessage) => {
-   try {
-    if (getHeaderView(item)) {
-      return getHeaderView(item);
-    } else {
-      if (
-        item?.getCategory() !==
-        CometChatUIKitConstants.MessageCategory.action &&
-        item?.getCategory() !== CometChatUIKitConstants.MessageCategory.call
-      ) {
-        return showHeaderTitle(item) ? getBubbleHeaderTitle(item) : null
-      }
-    }
+      try {
+        if (getHeaderView(item)) {
+          return getHeaderView(item);
+        } else {
+          if (
+            item?.getCategory() !==
+            CometChatUIKitConstants.MessageCategory.action &&
+            item?.getCategory() !== CometChatUIKitConstants.MessageCategory.call
+          ) {
+            return showHeaderTitle(item) ? getBubbleHeaderTitle(item) : null
+          }
+        }
 
-    return null;
-   } catch (error) {
-    errorHandler(error,"getBubbleHeader");
-    return null;
-   }
+        return null;
+      } catch (error) {
+        errorHandler(error, "getBubbleHeader");
+        return null;
+      }
     },
     [
 
@@ -3237,13 +3273,13 @@ try {
     reaction: CometChat.Reaction,
     message: CometChat.BaseMessage
   ) => {
-  try {
-    if (reaction?.getReactedBy()?.getUid() === loggedInUserRef.current?.getUid()) {
-      reactToMessages(reaction?.getReaction(), message);
+    try {
+      if (reaction?.getReactedBy()?.getUid() === loggedInUserRef.current?.getUid()) {
+        reactToMessages(reaction?.getReaction(), message);
+      }
+    } catch (error) {
+      errorHandler(error, "reactionItemClicked")
     }
-  } catch (error) {
-    errorHandler(error,"reactionItemClicked")
-  }
   }, [reactToMessages])
 
 
@@ -3344,7 +3380,7 @@ try {
           return null;
         }
       } catch (error: any) {
-        errorHandler(error,"getStatusInfoView");
+        errorHandler(error, "getStatusInfoView");
         return null;
       }
     },
@@ -3544,7 +3580,7 @@ try {
   const getMessageListFooter: () => JSX.Element = useCallback(() => {
     return (
       <>
-      {(showConversationStarter || enableSmartReplies ) && !showFooterPanelView ? loadFooterViewContent() : null}
+        {(showConversationStarter || enableSmartReplies) && !showFooterPanelView ? loadFooterViewContent() : null}
         {showFooterPanelView && panelViewRef.current ? panelViewRef.current : null}
         {footerView && !panelViewRef.current ? footerView : null}
       </>
@@ -3738,23 +3774,23 @@ try {
               emptyView={getEmptyHtml}
               scrollToBottom={scrollListToBottom}
             />
-      
+
 
           </div>
           {showNewMessagesBanner &&
-              UnreadMessagesRef.current &&
-              UnreadMessagesRef.current.length > 0 &&
-              !isOnBottomRef.current ? (
-              <div
-                className='cometchat-message-list__message-indicator'>
-                <CometChatButton
-                  text={newMessageTextRef.current}
-                  iconURL={downArrow}
-                  onClick={scrollToBottom}
-                ></CometChatButton>
-
-              </div>
-            ) : null}
+            UnreadMessagesRef.current &&
+            UnreadMessagesRef.current.length > 0 &&
+            !isOnBottomRef.current ? (
+            <div
+              className='cometchat-message-list__message-indicator'>
+              <CometChatButton
+                text={newMessageTextRef.current}
+                iconURL={downArrow}
+                onClick={scrollToBottom}
+              ></CometChatButton>
+
+            </div>
+          ) : null}
           <div
             className='cometchat-message-list__footer'
           >
diff --git a/src/components/Extensions/Stickers/StickersExtensionDecorator.tsx b/src/components/Extensions/Stickers/StickersExtensionDecorator.tsx
index 279a0f0..935a328 100644
--- a/src/components/Extensions/Stickers/StickersExtensionDecorator.tsx
+++ b/src/components/Extensions/Stickers/StickersExtensionDecorator.tsx
@@ -117,25 +117,25 @@ export class StickersExtensionDecorator extends DataSourceDecorator {
 
     // Use state to track whether the keyboard is open or not
     const [showKeyboard, setShowKeyboard] = useState(false);
-    var activePopoverSub:any = null;
-    const closeSticker = ()=>{
-      if(stickerKeyboardRef){
+    var activePopoverSub: any = null;
+    const closeSticker = () => {
+      if (stickerKeyboardRef) {
         stickerKeyboardRef?.current?.closePopover()
       }
       setShowKeyboard(false)
-      if(activePopoverSub){
+      if (activePopoverSub) {
         activePopoverSub.unsubscribe();
 
       }
     }
-    if(showKeyboard){
-      activePopoverSub =  CometChatUIEvents.ccActivePopover.subscribe((id:string)=>{
-        if(id != StickersConstants.sticker){
+    if (showKeyboard) {
+      activePopoverSub = CometChatUIEvents.ccActivePopover.subscribe((id: string) => {
+        if (id != StickersConstants.sticker) {
           closeSticker()
         }
-          })
+      })
     }
- 
+
     let openIconURL = StickerIcon;
     let closeIconURL = StickerIconFill;
 
@@ -144,7 +144,7 @@ export class StickersExtensionDecorator extends DataSourceDecorator {
     return (
       <div className={`cometchat-message-composer__auxilary-button-view-sticker-button ${showKeyboard ? "cometchat-message-composer__auxilary-button-view-sticker-button-active" : ""}`}>
         <CometChatPopover
-              ref={stickerKeyboardRef}
+          ref={stickerKeyboardRef}
           placement={Placement.top}
           closeOnOutsideClick={true}
           onOutsideClick={() => setShowKeyboard(false)}
@@ -152,7 +152,7 @@ export class StickersExtensionDecorator extends DataSourceDecorator {
           debounceOnHover={0}
           content={
             <StickersKeyboard
-              ccStickerClicked={(e: any) => this.sendSticker(e,closeSticker)}
+              ccStickerClicked={(e: any) => this.sendSticker(e, closeSticker)}
             />
           }
         >
@@ -175,15 +175,15 @@ export class StickersExtensionDecorator extends DataSourceDecorator {
    * Sends a sticker message.
    * @param event - The event object containing sticker details.
    */
-  sendSticker(event: any,closeSticker:Function) {
+  sendSticker(event: any, closeSticker: Function) {
     try {
-closeSticker()
+      closeSticker()
       let details = event?.detail;
       let sticker = {
         name: details?.stickerName,
         URL: details?.stickerURL,
       };
-      const receiverId: string|undefined =  this.user?.getUid() ||   this.group?.getGuid();
+      const receiverId: string | undefined = this.user?.getUid() || this.group?.getGuid();
       const receiverType: string = this.user
         ? CometChatUIKitConstants.MessageReceiverType.user
         : CometChatUIKitConstants.MessageReceiverType.group;
@@ -285,7 +285,9 @@ closeSticker()
     return (
       <CometChatImageBubble
         src={this.getSticker(stickerMessage)}
-        isSentByMe={isSentByMe} />
+        isSentByMe={isSentByMe}
+        disableLoadingState={true}
+      />
     );
   }
 
@@ -306,7 +308,7 @@ closeSticker()
         let stickerMessage: CometChat.CustomMessage =
           message as CometChat.CustomMessage;
         if (stickerMessage.getDeletedAt()) {
-          return super.getDeleteMessageBubble(stickerMessage,undefined,_alignment);
+          return super.getDeleteMessageBubble(stickerMessage, undefined, _alignment);
         }
         return this.getStickerMessageContentView(stickerMessage);
       },
diff --git a/src/components/Extensions/ThumbnailGeneration/ThumbnailGenerationExtensionDecorator.ts b/src/components/Extensions/ThumbnailGeneration/ThumbnailGenerationExtensionDecorator.ts
index 27565c0..864a5af 100755
--- a/src/components/Extensions/ThumbnailGeneration/ThumbnailGenerationExtensionDecorator.ts
+++ b/src/components/Extensions/ThumbnailGeneration/ThumbnailGenerationExtensionDecorator.ts
@@ -1,7 +1,7 @@
 import { CometChat } from "@cometchat/chat-sdk-javascript";
 import { ChatConfigurator } from "../../../utils/ChatConfigurator";
 import { DataSourceDecorator } from "../../../utils/DataSourceDecorator";
-import PlaceholderImage from './assets/placeholder.png';
+import PlaceholderImage from '../../../assets/image_placeholder.png';
 
 /**
  * Class representing a Thumbnail Generation extension decorator.
@@ -36,7 +36,7 @@ export class ThumbnailGenerationExtensionDecorator extends DataSourceDecorator {
         if (ChatConfigurator.names.includes("imagemoderation")) {
             return super.getImageMessageBubble(imageUrl, placeholderImage, message);
         } else {
-            let imageUrl = message.getAttachments()[0].getUrl();
+            let imageUrl = message.getAttachments() ? message?.getAttachments()[0]?.getUrl() : (message.getData() as any)?.url;
             let metadata: any = message.getMetadata();
             if (metadata && metadata.hasOwnProperty("@injected") && metadata["@injected"].hasOwnProperty("extensions") && metadata["@injected"]["extensions"].hasOwnProperty("thumbnail-generation") && metadata["@injected"]["extensions"]["thumbnail-generation"]["url_medium"]) {
                 imageUrl = metadata["@injected"]["extensions"]["thumbnail-generation"]["url_medium"];
diff --git a/src/components/Extensions/ThumbnailGeneration/assets/placeholder.png b/src/components/Extensions/ThumbnailGeneration/assets/placeholder.png
deleted file mode 100644
index 0f0e2d9..0000000
Binary files a/src/components/Extensions/ThumbnailGeneration/assets/placeholder.png and /dev/null differ
diff --git a/src/utils/MessagesDataSource.tsx b/src/utils/MessagesDataSource.tsx
index cc021fc..f3a718c 100644
--- a/src/utils/MessagesDataSource.tsx
+++ b/src/utils/MessagesDataSource.tsx
@@ -21,7 +21,7 @@ import EditIcon from "../assets/edit_icon.svg";
 import FileIcon from "../assets/document_icon.svg";
 import ImageIcon from "../assets/photo.svg";
 import InformationIcon from "../assets/info_icon.svg";
-import PlaceholderImage from "../assets/placeholder.png";
+import PlaceholderImage from "../assets/image_placeholder.png";
 import PrivateMessageIcon from "../assets/send_message_privately.svg";
 import ReactionIcon from "../assets/add_reaction_icon.svg";
 import ThreadIcon from "../assets/reply_in_thread.svg";
diff --git a/src/utils/util.ts b/src/utils/util.ts
index 1fcf9a4..bbaddea 100644
--- a/src/utils/util.ts
+++ b/src/utils/util.ts
@@ -1,3 +1,40 @@
+import WaveSurfer from "../components/BaseComponents/CometChatAudioBubble/src/wavesurfer";
+
+interface MediaPlayer {
+video?:HTMLVideoElement | null,
+mediaRecorder?:MediaRecorder | null
+}
+/**
+ * storing current media which is being played.
+ */
+export const currentMediaPlayer:MediaPlayer = {
+  video:null,
+  mediaRecorder:null
+}
+export const  currentAudioPlayer: {
+  instance: WaveSurfer | null;
+  setIsPlaying: ((isPlaying: boolean) => void) | null;
+} = { instance: null, setIsPlaying: null };
+
+/**
+ * Function to stop current media playback.
+ */
+
+export function closeCurrentMediaPlayer(pauseAudio: boolean = true) {
+  if (pauseAudio && currentAudioPlayer.instance && currentAudioPlayer.setIsPlaying) {
+    currentAudioPlayer.instance.pause();
+    if (currentAudioPlayer.setIsPlaying) {
+      currentAudioPlayer.setIsPlaying(false);
+    }
+  }
+
+  if (currentMediaPlayer.video && !currentMediaPlayer.video.paused) {
+    currentMediaPlayer.video.pause();
+  }
+  if (currentMediaPlayer.mediaRecorder) {
+    currentMediaPlayer.mediaRecorder.stop();
+  }
+}
 export function sanitizeHtml(htmlString: string, whitelistRegExes: RegExp[]) {
     if (!htmlString) {
         return "";