Menu

Individual skill

cometchat-react-v7-migration

Upgrade a React app from CometChat UI Kit v6 → v7 (`@cometchat/chat-uikit-react` ^6 → ^7). Reads the repo's CometChat usage, applies the breaking-change map (deps, symbol renames, RxJS events → `useCometChatEvents`, DataSource → plugins, templates → plugins, theme prop, calling), fetches the prop-by-prop guide, and verifies the build. Triggers: 'upgrade my v6 uikit to v7', 'migrate cometchat react v6 to v7', 'upgrade @cometchat/chat-uikit-react to v7', 'cometchat v6 to v7', 'bump cometchat uikit'.

plugins/cometchat/cometchat-skills/skills/cometchat-react-v7-migration/SKILL.md

Read pinned source

Source commit d780783eba4ecc7c8b9429f95c9362df95f07c61

What was checked

Matches the observed repository HEAD
Yes
Scanner rules are current
Yes
Repository scan complete
No
Skill scan complete
No
Observed behavior
Network or broad shell
Last checked
Nov 4, 2026

These are observations at the recorded commit, not a guarantee of safety. Review the source before running it.

Install this skill

Choose an agent in your Stack or copy a command below. Commands fetch the pinned commit and copy only this skill directory. Existing destinations are refused. Copying a command does not install anything.

An install command is unavailable: current rules, complete repository and skill scans, an eligible behavior level and a permitted license are required.

Repository context

Repository stars (not skill ratings)
1,530
Repository last updated
Nov 6, 2026
License
Apache-2.0

Observed agent integration: No specific integration evidence. Standard SKILL.md installation does not imply verified compatibility.

Files and excerpt

File metadata and permitted, redacted excerpts come from the recorded scan. Source links are pinned to that commit.

Browse files
Read excerpt

> **Ground truth:** migrates a React app **FROM `@cometchat/chat-uikit-react@6` TO `@7`**. v7 target symbols are catalog-verified vs installed 7.1.0; the v6→v7 breaking-change map is BAKED in `references/migration-guide.md` (distilled from the official migration docs + a real v6.5.4→v7.1.0 export diff). The exhaustive prop-by-prop table is FETCHED from the docs migration `.md` twins. **APPEND/transform the user's code — never wipe it; work on a branch and confirm before bulk edits** (`RULES.md`).

## Companion skills (read first)
- `cometchat-react-v7-core` — the v7 init/login/render + `CometChatProvider` the migrated app lands on. This skill ASSUMES it.
- `cometchat-react-v7-components` — the v7 component catalog (the target names).

## Use this skill when
"upgrade my v6 UI Kit to v7", "migrate CometChat React v6→v7", "bump `@cometchat/chat-uikit-react` to v7". Precondition: the project currently has `@cometchat/chat-uikit-react@6`.

## Migration workflow (BAKED)
1. **Detect the starting point.** Confirm `package.json` has `@cometchat/chat-uikit-react@6` (already `@7` → STOP, nothing to migrate). Note the bundler (Vite/Next/CRA/React-Router/Astro → env prefix, per `cometchat-react-v7-patterns`) and whether the app uses calls / `rxjs` events / `DataSource` / message templates. **Work on a branch; transform in place, never delete the user's code.**
2. **Update dependencies.** `npm install @cometchat/chat-uikit-react@7 @cometchat/chat-sdk-javascript@^4.1.13 dompurify@^3.3.1` then `npm uninstall rxjs` (v7 drops rxjs; **`dompurify` is required** — the kit imports it at runtime; install it explicitly per the official docs, even though it's in the kit's `dependencies`). If the app uses calling, bump the Calls SDK to the v7 major: `npm install @cometchat/calls-sdk-javascript@5` (v7 pins `^5.x` — verified; it is NOT the same major as the v6-era build). Enabling calling also moves: on the mandated `initFromSettings` path use `uiKit:{callsSDK:{}}` (not the classic `setCallingEnabled(true)`).
3. **Scan the repo for v6 usage.** Grep for the removed/renamed symbols + patterns from `references/migration-guide.md`: `CometChatDocumentBubble`, `CometChatCompactMessageComposer`, `CometChatUrlsFormatter`, `CometChatTextHighlightFormatter`, any `*Events` (`CometChatMessageEvents`/`CometChatGroupEvents`/`CometChatCallEvents`/`CometChatUserEvents`/`CometChatConversationEvents`/`CometChatUIEvents`), `DataSource`/`DataSourceDecorator`/`ChatConfigurator`, `CometChatMessageTemplate` / `templates` prop, `textFormatters` prop **on `CometChatMessageList`/`CometChatConversations`** (gone from the lists in v7 — `textFormatters` itself is NOT removed; see pitfalls), `hideError`/`disableLoadingState` props, `data-theme` attribute, **localization** (`getLocalizedString(...)`, `CometChatLocalize`, unprefixed i18n keys like `group_info` that v7 moved under `sample_` — §7), `CometChatUIKitLoginListener`, and the removed standalone components (`CometChatEmojiKeyboard`/`CometChatMediaRecorder`/`CometChatToast`/`CometChatListItem`/`CometChatNotificationBadge`). Produce the concrete change list.
4. **Apply the breaking-change map** (`references/migration-guide.md`): symbol renames, RxJS `*Events` → the `useCometChatEvents` hook, `DataSource`/`ChatConfigurator` → `CometChatMessagePlugin` + the `plugins` prop, `templates` prop → plugins (`textFormatters` is NOT removed — relocate it, see pitfalls), `data-theme` → the `theme` prop, calling → `uiKit:{callsSDK:{}}` on `initFromSettings` (step 2), **localization → the v7 method + map v6 keys to the bundled `sample_*` keys (or register via the INSTANCE method `CometChatLocalize.getSharedInstance()?.addTranslation(...)` — NOT a static) — see `migration-guide.md` §7; look up the EXACT key in the uikit source (`resources/<lang>/translation.json`) / docs / GitHub, never guess**. For any component's exact prop change NOT in the baked map, FETCH the prop-by-prop table via `cometchat-react-v7-core/references/docs-map.md` → `migration-property-changes`.