@cometchat/skills 4.2.0 → 4.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +33 -12
- package/bin/install.js +34 -6
- package/package.json +1 -1
- package/skills/cometchat/SKILL.md +236 -17
- package/skills/cometchat-android-v5-core/SKILL.md +16 -0
- package/skills/cometchat-android-v6-calls/SKILL.md +1 -1
- package/skills/cometchat-android-v6-core/SKILL.md +202 -2
- package/skills/cometchat-android-v6-migration/SKILL.md +1 -1
- package/skills/cometchat-angular-core/SKILL.md +22 -0
- package/skills/cometchat-astro-patterns/SKILL.md +20 -0
- package/skills/cometchat-core/SKILL.md +163 -0
- package/skills/cometchat-flutter-v5-core/SKILL.md +17 -0
- package/skills/cometchat-flutter-v6-calls/SKILL.md +10 -10
- package/skills/cometchat-flutter-v6-calls/references/add-calls-to-existing-chat.md +3 -3
- package/skills/cometchat-flutter-v6-core/SKILL.md +178 -1
- package/skills/cometchat-flutter-v6-push/SKILL.md +2 -2
- package/skills/cometchat-flutter-v6-testing/SKILL.md +2 -2
- package/skills/cometchat-ios-core/SKILL.md +142 -0
- package/skills/cometchat-native-bare-patterns/SKILL.md +22 -1
- package/skills/cometchat-native-calls/SKILL.md +63 -5
- package/skills/cometchat-native-components/SKILL.md +7 -5
- package/skills/cometchat-native-core/SKILL.md +209 -6
- package/skills/cometchat-native-expo-patterns/SKILL.md +20 -1
- package/skills/cometchat-native-features/SKILL.md +57 -34
- package/skills/cometchat-native-troubleshooting/SKILL.md +62 -0
- package/skills/cometchat-nextjs-patterns/SKILL.md +28 -0
- package/skills/cometchat-react-patterns/SKILL.md +13 -0
- package/skills/cometchat-react-router-patterns/SKILL.md +33 -0
- package/LICENSE +0 -21
|
@@ -90,14 +90,17 @@ Duplicate class android.support.v4.os.ResultReceiver$1 found in modules
|
|
|
90
90
|
(com.android.support:support-compat:26.1.0)
|
|
91
91
|
```
|
|
92
92
|
|
|
93
|
-
**Add these
|
|
93
|
+
**Add these three lines to `gradle.properties` at the project root** before any UI Kit code is wired in:
|
|
94
94
|
|
|
95
95
|
```properties
|
|
96
|
+
org.gradle.jvmargs=-Xmx4096m -XX:MaxMetaspaceSize=1024m
|
|
96
97
|
android.useAndroidX=true
|
|
97
98
|
android.enableJetifier=true
|
|
98
99
|
```
|
|
99
100
|
|
|
100
|
-
|
|
101
|
+
All three are **mandatory**. Jetifier rewrites the legacy `android.support.*` references in the CometChat SDK's transitive deps to their `androidx.*` equivalents at build time, so the duplicate-class error doesn't happen.
|
|
102
|
+
|
|
103
|
+
**Why the heap setting matters (F47, 2026-05-22)**: a fresh Android Studio scaffold's default `org.gradle.jvmargs=-Xmx2048m` is **insufficient** when calls features are enabled — `com.cometchat:calls-sdk-android:4.+` transitively pulls `react-native` and other heavy deps that Jetifier has to rewrite. The first `assembleDebug` OOMs partway through with `OutOfMemoryError: Java heap space`. Bumping to `4096m` + `MaxMetaspaceSize=1024m` is the validated minimum. If you skip this, the customer sees a confusing mid-build crash with no actionable error.
|
|
101
104
|
|
|
102
105
|
A freshly-created Android Studio project usually has `android.useAndroidX=true` already (Arctic Fox+) but **Jetifier is OFF by default** since it's deprecated in newer SDK landscapes. Both V5 and V6 CometChat SDKs still need it. If `gradle.properties` doesn't have either line, append both. If it has `useAndroidX=true` but no Jetifier line, add the Jetifier line. Idempotent.
|
|
103
106
|
|
|
@@ -352,3 +355,200 @@ All send methods automatically:
|
|
|
352
355
|
- `compileSdk` should be 36 for full compatibility
|
|
353
356
|
- Both UI stacks depend on `chatuikit-core` transitively — do NOT add core as a separate dependency when using a UI stack
|
|
354
357
|
- `gradle.properties` MUST contain `android.useAndroidX=true` AND `android.enableJetifier=true` — see § 1.3a. Without Jetifier, the build fails with "Duplicate class android.support.v4.os.ResultReceiver$1" because the CometChat SDK's transitive `com.android.support:support-compat` collides with `androidx.core` in any modern Android Studio project
|
|
358
|
+
|
|
359
|
+
## Visual Builder integration
|
|
360
|
+
|
|
361
|
+
> **⚠ The Visual Builder emits V5-shaped code.** The canonical builder repo at the Android Visual Builder ZIP (download from https://preview.cometchat.com/downloads/cometchat-builder-android.zip) uses `com.cometchat:chat-uikit-android:5.2.6` — the **V5** Android UI Kit. There is no V6-native Visual Builder canonical from vendor side yet ([F22 finding, 2026-05-22](https://github.com/cometchat/cometchat-skills/issues)). When a V6 project picks the Visually path, skills emits V5 deps (`chat-uikit-android:5.+`) into `app/build.gradle` — your V6 Compose / Kotlin Views code in the rest of the project is untouched, but the Visual-Builder-emitted screens are V5-flavored. Treat as transitional until vendor publishes a V6 canonical. V6 customers preferring a single-version dep tree should use the In-code path.
|
|
362
|
+
>
|
|
363
|
+
> The recipe below is identical to what `cometchat-android-v5-core` §"Visual Builder integration" prescribes (both reference the same canonical). This page kept for V6 customers who still hit the Visually flow.
|
|
364
|
+
|
|
365
|
+
When the dispatcher's Step 3.1 sets `customize=visual` and the platform resolves to `android`, skills runs **`cometchat builder export --platform android`** — a single CLI command that downloads the canonical static template ZIP from `preview.cometchat.com/downloads/cometchat-builder-android.zip`, fetches the per-builder settings JSON, applies F3 + F10 missing-field defaults, and writes 2 files to `--output` (default: `cometchat/`):
|
|
366
|
+
|
|
367
|
+
- `BuilderSettingsHelper.kt` — verbatim helper (with original `package com.cometchat.builder` declaration; **skills patches the package to the customer's app package** before final placement at `app/src/main/java/<package>/cometchat/`)
|
|
368
|
+
- `cometchat-builder-settings.json` — **envelope-shape JSON** `{ builderId, name, settings: {...} }` (no sentinel — JSON forbids `//` comments)
|
|
369
|
+
|
|
370
|
+
### 1. Run `cometchat builder export`
|
|
371
|
+
|
|
372
|
+
```bash
|
|
373
|
+
cometchat builder export --platform android --json
|
|
374
|
+
```
|
|
375
|
+
|
|
376
|
+
Defaults to `--output cometchat/`. The CLI emits the helper with the original `com.cometchat.builder` package declaration. **You must then move the files** to the customer's project + rewrite the package, per the table below:
|
|
377
|
+
|
|
378
|
+
### 2. Place + patch (after `builder export`)
|
|
379
|
+
|
|
380
|
+
| Source (from `--output`) | Destination | Notes |
|
|
381
|
+
|---|---|---|
|
|
382
|
+
| `cometchat/cometchat-builder-settings.json` | `app/cometchat-builder-settings.json` | Move to app module root (sibling of `build.gradle.kts`). The Gradle plugin requires the envelope shape — already provided by the CLI. |
|
|
383
|
+
| `cometchat/BuilderSettingsHelper.kt` | `app/src/main/java/<customer-package>/cometchat/BuilderSettingsHelper.kt` | **Move + 3 transforms** — see F50/F51 below. |
|
|
384
|
+
| `cometchat/font/*` | `app/src/main/res/font/*` | 12 font files (Arial / Inter / Roboto / Times — regular/medium/bold). Auto-emitted by `builder export --platform android` since F48 (2026-05-22). Just move them. |
|
|
385
|
+
| (skills-emitted, not from ZIP) | `app/src/main/java/<customer-package>/cometchat/CometChatApp.kt` | Compose wrapper that mounts kit View components via `AndroidView` and applies `BuilderSettingsHelper.applySettings*` to each |
|
|
386
|
+
|
|
387
|
+
#### F50 + F51 — BuilderSettingsHelper.kt requires 3 transforms on move (NON-NEGOTIABLE)
|
|
388
|
+
|
|
389
|
+
After moving `cometchat/BuilderSettingsHelper.kt` to
|
|
390
|
+
`app/src/main/java/<customer-package>/cometchat/BuilderSettingsHelper.kt`,
|
|
391
|
+
the file needs these 3 transforms before it compiles:
|
|
392
|
+
|
|
393
|
+
**1. Rewrite the package line:**
|
|
394
|
+
|
|
395
|
+
```kotlin
|
|
396
|
+
package com.cometchat.builder // before
|
|
397
|
+
package com.example.myapp.cometchat // after (match customer's applicationId + .cometchat suffix)
|
|
398
|
+
```
|
|
399
|
+
|
|
400
|
+
**2. Add 3 explicit imports** under the existing import block:
|
|
401
|
+
|
|
402
|
+
```kotlin
|
|
403
|
+
import com.cometchat.builder.CometChatBuilderSettings // auto-generated constants class — stays at original package
|
|
404
|
+
import com.example.myapp.BuildConfig // customer's BuildConfig — must use their applicationId
|
|
405
|
+
import com.example.myapp.R // customer's R class — same applicationId
|
|
406
|
+
```
|
|
407
|
+
|
|
408
|
+
Without these, the file fails to compile with `Unresolved reference 'R'`, `Unresolved reference 'BuildConfig'`, `Unresolved reference 'CometChatBuilderSettings'`. (When the file was in the original `com.cometchat.builder` package, these resolved implicitly via same-package; after the rewrite, they need explicit imports.)
|
|
409
|
+
|
|
410
|
+
**3. Strip the entire `applySettingsToBottomNavigationView` method** (per README option 2 — skills doesn't emit the bottom-nav shape). The method references `R.id.nav_chats`, `R.id.nav_calls`, `R.id.nav_users`, `R.id.nav_groups` which don't exist in the customer's `res/menu/`. Removing the method removes the references.
|
|
411
|
+
|
|
412
|
+
```kotlin
|
|
413
|
+
// Delete the entire function from `fun applySettingsToBottomNavigationView(...)` to its closing `}` —
|
|
414
|
+
// roughly lines 27-54 in the canonical file. Leave a comment in its place so future readers
|
|
415
|
+
// understand why:
|
|
416
|
+
//
|
|
417
|
+
// // applySettingsToBottomNavigationView removed per cometchat-android-v6-core
|
|
418
|
+
// // SKILL.md (README option 2 — no bottom-nav module in app integration).
|
|
419
|
+
```
|
|
420
|
+
|
|
421
|
+
Validated on `/Users/swapnil/Downloads/builder-demo/my-android-app/` 2026-05-25 — after all 3 transforms, `./gradlew :app:assembleDebug` → `BUILD SUCCESSFUL in 6s`. F50 + F51 findings.
|
|
422
|
+
|
|
423
|
+
The Gradle plugin REQUIRES the `{ builderId, settings: {...} }` envelope — writing the raw settings blob produces an empty `CometChatBuilderSettings` constants class and Kotlin compile fails with `Unresolved reference 'ChatFeatures'` / `'CallFeatures'`. The CLI always writes the envelope shape.
|
|
424
|
+
|
|
425
|
+
Resync = re-run `cometchat builder export --platform android --force`. Re-apply the move+package-rewrite each time (Skills should automate this in a future release).
|
|
426
|
+
|
|
427
|
+
### Files patched
|
|
428
|
+
|
|
429
|
+
| Path | Patch |
|
|
430
|
+
|---|---|
|
|
431
|
+
| `settings.gradle.kts` | Add `maven("https://dl.cloudsmith.io/public/cometchat/cometchat/maven/")` to BOTH `pluginManagement.repositories` AND `dependencyResolutionManagement.repositories` |
|
|
432
|
+
| `app/build.gradle.kts` | Add `id("com.cometchat.builder.settings") version "5.0.1"` to the `plugins { }` block. Add `implementation("com.cometchat:chat-uikit-android:5.1.+")`. Add `implementation("com.cometchat:calls-sdk-android:4.1.+")` if `cometchat-builder-settings.json` has any call feature enabled |
|
|
433
|
+
| `gradle.properties` | `android.useAndroidX=true` + `android.enableJetifier=true` per §1.3a (non-negotiable) |
|
|
434
|
+
| `AndroidManifest.xml` | Set `android:theme="@style/CometChat.Builder.Theme"` on `<application>`. Add `RECORD_AUDIO` + `CAMERA` permissions if any `CallFeatures.*` flag is true |
|
|
435
|
+
| `Application` subclass | Call `CometChatUIKit.init(this, uiKitSettings)` in `onCreate()` per §2 — credentials from `BuildConfig.COMETCHAT_*` via §1.4 |
|
|
436
|
+
|
|
437
|
+
### Init flow (build-time + runtime)
|
|
438
|
+
|
|
439
|
+
**Build time** — the Gradle plugin:
|
|
440
|
+
1. Reads `app/cometchat-builder-settings.json`
|
|
441
|
+
2. Generates `com.cometchat.builder.CometChatBuilderSettings` (typed Kotlin constants: `ChatFeatures.CoreMessagingExperience.PHOTOSSHARING`, `Style.Color.BRANDCOLOR`, etc.)
|
|
442
|
+
3. Injects style values into `@style/CometChat.Builder.Theme` so the kit's `CometChatTheme` resolves builder tokens automatically
|
|
443
|
+
|
|
444
|
+
**Runtime** — customer code accesses both:
|
|
445
|
+
```kotlin
|
|
446
|
+
import com.cometchat.builder.CometChatBuilderSettings // generated by plugin
|
|
447
|
+
import <package>.cometchat.BuilderSettingsHelper // copied helper
|
|
448
|
+
|
|
449
|
+
if (CometChatBuilderSettings.ChatFeatures.CoreMessagingExperience.PHOTOSSHARING) {
|
|
450
|
+
// photo attachment enabled
|
|
451
|
+
}
|
|
452
|
+
BuilderSettingsHelper.applySettingsToMessageList(binding.messageList)
|
|
453
|
+
```
|
|
454
|
+
|
|
455
|
+
### The wrapper template
|
|
456
|
+
|
|
457
|
+
```kotlin
|
|
458
|
+
// app/src/main/java/<package>/cometchat/CometChatApp.kt
|
|
459
|
+
package <package>.cometchat
|
|
460
|
+
|
|
461
|
+
import androidx.compose.foundation.layout.Column
|
|
462
|
+
import androidx.compose.foundation.layout.fillMaxSize
|
|
463
|
+
import androidx.compose.runtime.Composable
|
|
464
|
+
import androidx.compose.runtime.getValue
|
|
465
|
+
import androidx.compose.runtime.mutableStateOf
|
|
466
|
+
import androidx.compose.runtime.remember
|
|
467
|
+
import androidx.compose.runtime.setValue
|
|
468
|
+
import androidx.compose.ui.Modifier
|
|
469
|
+
import androidx.compose.ui.viewinterop.AndroidView
|
|
470
|
+
import com.cometchat.chat.models.Group
|
|
471
|
+
import com.cometchat.chat.models.User
|
|
472
|
+
import com.cometchat.chatuikit.conversations.CometChatConversations
|
|
473
|
+
import com.cometchat.chatuikit.messagecomposer.CometChatMessageComposer
|
|
474
|
+
import com.cometchat.chatuikit.messageheader.CometChatMessageHeader
|
|
475
|
+
import com.cometchat.chatuikit.messagelist.CometChatMessageList
|
|
476
|
+
|
|
477
|
+
/**
|
|
478
|
+
* Top-level chat surface emitted by the Visual Builder Visually path.
|
|
479
|
+
*
|
|
480
|
+
* Hosts the kit's View-based components via AndroidView; BuilderSettingsHelper
|
|
481
|
+
* (copied from the builder repo) wires CometChatBuilderSettings → component
|
|
482
|
+
* visibility on each instance.
|
|
483
|
+
*
|
|
484
|
+
* CometChatUIKit.init(...) must have been called in Application.onCreate()
|
|
485
|
+
* BEFORE this composable mounts — see §2.
|
|
486
|
+
*/
|
|
487
|
+
@Composable
|
|
488
|
+
fun CometChatApp() {
|
|
489
|
+
var selectedUser by remember { mutableStateOf<User?>(null) }
|
|
490
|
+
var selectedGroup by remember { mutableStateOf<Group?>(null) }
|
|
491
|
+
val hasSelection = selectedUser != null || selectedGroup != null
|
|
492
|
+
|
|
493
|
+
if (!hasSelection) {
|
|
494
|
+
AndroidView(
|
|
495
|
+
modifier = Modifier.fillMaxSize(),
|
|
496
|
+
factory = { ctx ->
|
|
497
|
+
CometChatConversations(ctx).apply {
|
|
498
|
+
BuilderSettingsHelper.applySettingsToConversations(this)
|
|
499
|
+
setOnItemClickListener { _, conversation ->
|
|
500
|
+
when (val entity = conversation.conversationWith) {
|
|
501
|
+
is User -> { selectedUser = entity; selectedGroup = null }
|
|
502
|
+
is Group -> { selectedUser = null; selectedGroup = entity }
|
|
503
|
+
}
|
|
504
|
+
}
|
|
505
|
+
}
|
|
506
|
+
},
|
|
507
|
+
)
|
|
508
|
+
return
|
|
509
|
+
}
|
|
510
|
+
|
|
511
|
+
Column(Modifier.fillMaxSize()) {
|
|
512
|
+
AndroidView(factory = { ctx ->
|
|
513
|
+
CometChatMessageHeader(ctx).apply {
|
|
514
|
+
user = selectedUser
|
|
515
|
+
group = selectedGroup
|
|
516
|
+
BuilderSettingsHelper.applySettingsToMessageHeader(this)
|
|
517
|
+
}
|
|
518
|
+
})
|
|
519
|
+
AndroidView(modifier = Modifier.weight(1f), factory = { ctx ->
|
|
520
|
+
CometChatMessageList(ctx).apply {
|
|
521
|
+
user = selectedUser
|
|
522
|
+
group = selectedGroup
|
|
523
|
+
BuilderSettingsHelper.applySettingsToMessageList(this)
|
|
524
|
+
}
|
|
525
|
+
})
|
|
526
|
+
AndroidView(factory = { ctx ->
|
|
527
|
+
CometChatMessageComposer(ctx).apply {
|
|
528
|
+
user = selectedUser
|
|
529
|
+
group = selectedGroup
|
|
530
|
+
BuilderSettingsHelper.applySettingsToMessageComposer(this)
|
|
531
|
+
}
|
|
532
|
+
})
|
|
533
|
+
}
|
|
534
|
+
}
|
|
535
|
+
```
|
|
536
|
+
|
|
537
|
+
`BuilderSettingsHelper.kt` is copied verbatim from the builder repo. Methods used above:
|
|
538
|
+
- `applySettingsToConversations(...)` → user-status / receipts / search-box visibility
|
|
539
|
+
- `applySettingsToMessageHeader(...)` → voice/video call buttons + user-status visibility (group vs user-aware)
|
|
540
|
+
- `applySettingsToMessageList(...)` → edit/delete/reply-in-thread/reactions/translation/conversation-starter/smart-replies/message-privately visibility
|
|
541
|
+
- `applySettingsToMessageComposer(...)` → attachment/voice-note/poll/sticker/etc. visibility
|
|
542
|
+
|
|
543
|
+
For a Compose-native stack (`chatuikit-compose-android` instead of `chatuikit-android` Views), skip the `AndroidView` + `BuilderSettingsHelper` indirection and read `CometChatBuilderSettings.ChatFeatures.*` constants directly into the Compose components' visibility/feature props — see `cometchat-android-v6-compose-components`. The Views-via-AndroidView path above matches the canonical builder repo, which is Views-based.
|
|
544
|
+
|
|
545
|
+
### Calls + builder
|
|
546
|
+
|
|
547
|
+
If any `CometChatBuilderSettings.CallFeatures.*` flag is true:
|
|
548
|
+
1. Init Calls SDK in `Application.onCreate()` alongside UI Kit (see `cometchat-android-v6-calls`)
|
|
549
|
+
2. Mount `CometChatIncomingCall` overlay — the builder repo's `BuilderApplication.kt` registers `ActivityLifecycleCallbacks` and shows a `Snackbar`-hosted incoming-call view at the top of the foreground activity. Copy that pattern verbatim from `chat-builder/src/main/java/com/cometchat/builder/utils/BuilderApplication.kt` (inside the Android Visual Builder ZIP at https://preview.cometchat.com/downloads/cometchat-builder-android.zip)
|
|
550
|
+
3. FCM data-message wiring — defer to `cometchat-android-v6-push`
|
|
551
|
+
|
|
552
|
+
### What is NOT honored in v1
|
|
553
|
+
|
|
554
|
+
The builder repo's `HomeActivity` exposes a `BottomNavigationView` with up to 4 tabs (Chats / Calls / Users / Groups) driven by `CometChatBuilderSettings.Layout.TABS`. Skills emits a single Compose conversations surface, not the tabbed shape. The corresponding `applySettingsToBottomNavigationView` method is also **intentionally removed** when emitting `BuilderSettingsHelper.kt` (per README option 2). Theme + typography + chat-feature toggles ARE honored. For the full tabbed shape, copy the builder repo's `HomeActivity` + per-tab fragments alongside skills' emission (or use README option 1 — "Import as module").
|
|
@@ -12,7 +12,7 @@ metadata:
|
|
|
12
12
|
|
|
13
13
|
## Purpose
|
|
14
14
|
|
|
15
|
-
Migration recipes for moving from CometChat Android UIKit V5 (`chat-uikit-android:5.x`) to V6 (`chatuikit-{compose,kotlin}-android:6.0.0-beta2`). V6 is
|
|
15
|
+
Migration recipes for moving from CometChat Android UIKit V5 (`chat-uikit-android:5.x`) to V6 (`chatuikit-{compose,kotlin}-android:6.0.0-beta2`). V6 is stable (GA 2026-05-25) — most production apps should stay on V5 today; this skill is for teams evaluating V6 or planning the eventual migration.
|
|
16
16
|
|
|
17
17
|
V6 is a different SDK, not a drop-in replacement. The migration is roughly the size of jumping from React Native UIKit v5 to v6 — package coordinates, builder APIs, theme system, calls handling all change.
|
|
18
18
|
|
|
@@ -429,6 +429,28 @@ Use the MCP to verify prop names, callback signatures, theme token names, or err
|
|
|
429
429
|
|
|
430
430
|
---
|
|
431
431
|
|
|
432
|
+
## 11. Visual Builder integration — not available for Angular
|
|
433
|
+
|
|
434
|
+
When the dispatcher's Step 3.1 (Customization preference) runs on an Angular project, **it auto-routes to the code-driven path**. The dashboard's Visual Builder export pipeline at `https://preview.cometchat.com/downloads/cometchat-builder-{platform}.zip` ships ZIPs for `react`, `react-native`, `ios`, `android`, and `flutter` — there's no `angular` emitter. Skills can't bridge that gap by translating React/JSON output into Angular code because the kit's Angular package (`@cometchat/chat-uikit-angular`) has different selectors (`<cometchat-conversations>`), module shapes (`CometChatConversationsModule`), and content-projection slot APIs than React.
|
|
435
|
+
|
|
436
|
+
For comparison, the other family core skills have a `## Visual Builder integration` section that documents per-platform copy-the-canonical-app recipes. Angular has no equivalent; this section is the intentional empty entry.
|
|
437
|
+
|
|
438
|
+
**What the dispatcher does on an Angular project:**
|
|
439
|
+
|
|
440
|
+
1. Skips the Visually-vs-In-code prompt entirely.
|
|
441
|
+
2. Surfaces a one-time message in the chat:
|
|
442
|
+
|
|
443
|
+
> *"The Visual Builder doesn't ship Angular code yet (the dashboard's export covers React / React Native / iOS / Android / Flutter today). I'll set up the code-driven Angular integration instead — you can theme via `CometChatThemeService` later. Want to be notified when an Angular Visual Builder lands? Drop a 👍 on https://github.com/cometchat/cometchat-skills/discussions/categories/feature-requests."*
|
|
444
|
+
|
|
445
|
+
3. Sets `customize=code` in `.cometchat/config.json` via `npx @cometchat/skills-cli config save --customize code --json`.
|
|
446
|
+
4. Continues to the standard Angular flow (§3a intent → §3b recommendation → §3c placement → §5 code emission via this skill + `cometchat-angular-{components,placement,patterns,theming}`).
|
|
447
|
+
|
|
448
|
+
If a customer arrives at an Angular project with a stale `customize=visual` value (carried over from a previous run on a React/Flutter/etc. project), the dispatcher OVERWRITES it to `code` before routing — calling `builder create --platform angular` would fail at the CLI layer (rejected: "Missing or invalid --platform"). The override prevents the customer from seeing a confusing error instead of the explanatory note above.
|
|
449
|
+
|
|
450
|
+
**For when Visual Builder Angular support lands** — track [issue link TBD] on the public repo. At that point, this section gets a full canonical-app recipe (parallel to `cometchat-core` §11) and the dispatcher's §3.1 table flips `angular` from "not supported" to a `platform: angular` row.
|
|
451
|
+
|
|
452
|
+
---
|
|
453
|
+
|
|
432
454
|
## Skill routing reference
|
|
433
455
|
|
|
434
456
|
| Skill | When to load |
|
|
@@ -685,3 +685,23 @@ const handleClose = () => console.log("closed");
|
|
|
685
685
|
1. Always `client:only="react"` -- never `client:load`
|
|
686
686
|
2. CSS imports go INSIDE the React component -- never in `.astro` files
|
|
687
687
|
3. Each island wraps its own `CometChatProvider` -- there is no global provider at the Astro level
|
|
688
|
+
|
|
689
|
+
## 11. Visual Builder integration (v4.3)
|
|
690
|
+
|
|
691
|
+
If the customer picks **Visually** in dispatcher Step 3.1, skills runs `cometchat builder export --platform react --output src/CometChat --json` to download the canonical + patch settings in one step.
|
|
692
|
+
|
|
693
|
+
**Full recipe lives in `cometchat-core` §11 "Visual Builder integration".** This section is a pointer + Astro-specific gotchas:
|
|
694
|
+
|
|
695
|
+
- Run `cometchat builder export --platform react --output src/CometChat --json`.
|
|
696
|
+
- Create a React island wrapper at `src/components/CometChatIsland.tsx` (or similar) that does init + login + renders `<CometChatProvider><CometChatApp /></CometChatProvider>`.
|
|
697
|
+
- Mount in `src/pages/chat.astro` as `<CometChatIsland client:only="react" />` — **never** `client:load`. The canonical CometChat/ uses `window` / `document` at module scope; `client:load` will SSR the import resolution and crash.
|
|
698
|
+
- Use `import.meta.env.PUBLIC_COMETCHAT_*` (Astro's public-env prefix).
|
|
699
|
+
- Astro's Vite-based build uses rollup (not Rolldown), so it tolerates the canonical's type-as-value imports as warning — Astro is **the most reliable Visual Builder host** in the v4.3.0 web matrix (validated 2026-05-22).
|
|
700
|
+
|
|
701
|
+
### Both Astro and other Vite hosts
|
|
702
|
+
|
|
703
|
+
- Pin `@cometchat/chat-uikit-react@6.4.3` + `@cometchat/calls-sdk-javascript@4.2.5`.
|
|
704
|
+
- `package.json` needs `cometChatCustomConfig` block (Finding F2).
|
|
705
|
+
- Vite 7+ `tsconfig.app.json` requires the relaxation set from `cometchat-core` §11.2.
|
|
706
|
+
|
|
707
|
+
If the customer picks **In code**, ignore this section.
|
|
@@ -645,3 +645,166 @@ CometChat.TextMessage // A text message specifically
|
|
|
645
645
|
CometChat.getUser(uid: string): Promise<CometChat.User>
|
|
646
646
|
CometChat.getGroup(guid: string): Promise<CometChat.Group>
|
|
647
647
|
```
|
|
648
|
+
|
|
649
|
+
## 11. Visual Builder integration
|
|
650
|
+
|
|
651
|
+
When the dispatcher's Step 3.1 sets `customize=visual`, skills runs **`cometchat builder export --platform react`** — a single CLI command that mirrors the dashboard's Export-button workflow. It downloads the canonical static template ZIP from `preview.cometchat.com/downloads/cometchat-builder-react.zip`, fetches the per-builder settings JSON via `GET /vcb/builders/{id}`, unzips the template, patches `CometChatSettings.ts` with the fetched JSON + missing-field defaults + a sentinel comment, and writes the result to `--output` (default: `src/CometChat/`).
|
|
652
|
+
|
|
653
|
+
The `src/CometChat/` directory contains `CometChatApp.tsx`, the repo's own `CometChatProvider`-style context, `CometChatHome` with tabs (Chats / Calls / Users / Groups), theme hooks (`useThemeStyles`, `useSystemColorScheme`), login listener wiring, and 13 supporting components. Skills does NOT hand-roll a wrapper — the canonical app IS the wrapper.
|
|
654
|
+
|
|
655
|
+
This is the same pattern iOS (verbatim `MessagesVC.swift`), Android v6 (verbatim `BuilderSettingsHelper.kt`), and Flutter v6 (verbatim `chat_builder/` package) use. React just happens to copy a directory of TSX files instead of a single class.
|
|
656
|
+
|
|
657
|
+
### 11.1 Run `cometchat builder export`
|
|
658
|
+
|
|
659
|
+
After Step 3.1.v step 4 (customer says "Done" + skills caches the builderId in `.cometchat/builder.json`), run:
|
|
660
|
+
|
|
661
|
+
```bash
|
|
662
|
+
cometchat builder export --platform react --json
|
|
663
|
+
```
|
|
664
|
+
|
|
665
|
+
This produces the full per-builder integration in one shot:
|
|
666
|
+
|
|
667
|
+
| What | Where |
|
|
668
|
+
|---|---|
|
|
669
|
+
| Downloads static template ZIP | `https://preview.cometchat.com/downloads/cometchat-builder-react.zip` |
|
|
670
|
+
| Fetches per-builder settings | `GET /vcb/builders/{builderId}` via the same `Bearer` token used elsewhere |
|
|
671
|
+
| Applies F3 + F10 missing-field defaults | `chatFeatures.inAppSounds` + `chatFeatures.deeperUserEngagement.mentionAll` |
|
|
672
|
+
| Unzips template into temp dir | `/tmp/cometchat-builder-export-XXXX/extracted/` |
|
|
673
|
+
| Patches `CometChatSettings.ts` | Per-builder JSON + sentinel comment ("SKILLS-AUTO-GENERATED — do not edit by hand. Last sync: <ISO>") |
|
|
674
|
+
| Copies to `--output` | Default `src/CometChat/` |
|
|
675
|
+
| Reports JSON | `{ status: "exported", builderId, appId, platform, output, settings_file, builder_name }` |
|
|
676
|
+
|
|
677
|
+
**For Next.js App Router**, pass `--output src/app/CometChat`. For React Router v7 framework mode, pass `--output app/CometChat`. The CLI's F25 case-collision pre-check warns if a lowercase `src/cometchat/` exists with In-code-shape files (init.ts / CometChatProvider.tsx).
|
|
678
|
+
|
|
679
|
+
**For resync** (Step 7 iteration menu → Re-sync visual builder), re-run the SAME command with `--force`. This re-downloads the latest canonical template + re-fetches the latest settings + replaces the `--output` directory entirely. Customer hand-edits inside the `CometChat/` directory are lost — matches the "SKILLS-AUTO-GENERATED" contract on the sentinel.
|
|
680
|
+
|
|
681
|
+
### 11.2 Files patched (after export)
|
|
682
|
+
|
|
683
|
+
The `builder export` command writes the canonical files. Skills then patches the customer's existing project to wire it in:
|
|
684
|
+
|
|
685
|
+
| Path | Patch |
|
|
686
|
+
|---|---|
|
|
687
|
+
| `package.json` | (1) `npm install @cometchat/chat-uikit-react@6.4.3 @cometchat/calls-sdk-javascript@4.2.5` — **pinned versions from the canonical repo's README**. Older/newer versions of `chat-uikit-react` may drift from the exported `src/CometChat/` directory's expected API surface. (2) **Add a top-level `cometChatCustomConfig` block** — the canonical context reads it via `import packageJson from "../../../package.json"` and accesses `packageJson.cometChatCustomConfig.name` / `.version` / `.production` for init wiring. Without it, the build fails with `TS2339: Property 'cometChatCustomConfig' does not exist`. Shape: `"cometChatCustomConfig": { "name": "<your-app-name>", "version": "<your-app-version>", "production": true }`. |
|
|
688
|
+
| Entry file — `src/main.tsx` (Vite) / `src/index.tsx` (CRA) / new client component (Next.js) / route file (React Router) / `.astro` page (Astro) | Init UI Kit + render `<CometChatProvider><App /></CometChatProvider>`. Pattern below — varies by framework. |
|
|
689
|
+
| `tsconfig.app.json` (Vite 7+) or `tsconfig.json` (CRA / older Vite) | **Multiple non-negotiable adjustments** beyond `resolveJsonModule` + `jsx`. The canonical `src/CometChat/` was authored under CRA's looser TS settings; Vite 7+ template defaults are too strict and will fail the build with dozens of `TS6133` / `TS1484` errors:<br>• `"resolveJsonModule": true` — non-negotiable (`utils/utils.ts` imports a JSON locale)<br>• `"jsx": "react-jsx"` — non-negotiable<br>• `"verbatimModuleSyntax": false` — Vite 7+ default is `true`; canonical code uses mixed value + type imports without the `type` modifier<br>• `"noUnusedLocals": false` — Vite 7+ default is `true`; canonical code has many unused-by-default destructured listener args (e.g. `({ groupOwner, kickedUser, ... })`)<br>• `"noUnusedParameters": false` — same rationale<br>• `"erasableSyntaxOnly": false` — Vite 7+ template flag; canonical code uses const enums / namespace patterns<br>• `"allowJs": true` — canonical app's tsconfig sets this; some kit internals may rely on JS fallthrough<br>Validated 2026-05-21 against `create-vite@8` + canonical `uikit-builder-app-master` + `@cometchat/chat-uikit-react@6.4.3`. |
|
|
690
|
+
| `.env` (framework-prefixed) | Already written by Step 2c provision. Skip if present; warn if missing. |
|
|
691
|
+
|
|
692
|
+
The `builder export` command handles the JSON patching + sentinel comment automatically. Skills only needs to patch the four files above (package.json, entry file, tsconfig, .env).
|
|
693
|
+
|
|
694
|
+
### 11.3 Entry-file init pattern (Vite + React)
|
|
695
|
+
|
|
696
|
+
```tsx
|
|
697
|
+
// src/main.tsx
|
|
698
|
+
import { createRoot } from "react-dom/client";
|
|
699
|
+
import "./index.css";
|
|
700
|
+
import App from "./App.tsx";
|
|
701
|
+
import {
|
|
702
|
+
UIKitSettingsBuilder,
|
|
703
|
+
CometChatUIKit,
|
|
704
|
+
} from "@cometchat/chat-uikit-react";
|
|
705
|
+
import { CometChat } from "@cometchat/chat-sdk-javascript";
|
|
706
|
+
import { setupLocalization } from "./CometChat/utils/utils.ts";
|
|
707
|
+
import { CometChatProvider } from "./CometChat/context/CometChatContext.tsx";
|
|
708
|
+
|
|
709
|
+
export const COMETCHAT_CONSTANTS = {
|
|
710
|
+
APP_ID: import.meta.env.VITE_COMETCHAT_APP_ID!,
|
|
711
|
+
REGION: import.meta.env.VITE_COMETCHAT_REGION!,
|
|
712
|
+
AUTH_KEY: import.meta.env.VITE_COMETCHAT_AUTH_KEY!,
|
|
713
|
+
};
|
|
714
|
+
|
|
715
|
+
const uiKitSettings = new UIKitSettingsBuilder()
|
|
716
|
+
.setAppId(COMETCHAT_CONSTANTS.APP_ID)
|
|
717
|
+
.setRegion(COMETCHAT_CONSTANTS.REGION)
|
|
718
|
+
.setAuthKey(COMETCHAT_CONSTANTS.AUTH_KEY)
|
|
719
|
+
.subscribePresenceForAllUsers()
|
|
720
|
+
.build();
|
|
721
|
+
|
|
722
|
+
CometChatUIKit.init(uiKitSettings)?.then(() => {
|
|
723
|
+
setupLocalization();
|
|
724
|
+
createRoot(document.getElementById("root")!).render(
|
|
725
|
+
<CometChatProvider>
|
|
726
|
+
<App />
|
|
727
|
+
</CometChatProvider>
|
|
728
|
+
);
|
|
729
|
+
});
|
|
730
|
+
```
|
|
731
|
+
|
|
732
|
+
Then in `src/App.tsx`:
|
|
733
|
+
|
|
734
|
+
```tsx
|
|
735
|
+
import CometChatApp from "./CometChat/CometChatApp";
|
|
736
|
+
|
|
737
|
+
export default function App() {
|
|
738
|
+
return (
|
|
739
|
+
// CometChatApp requires an explicit width and height to render. Adjust as needed
|
|
740
|
+
// for your Step 3c placement (full route, drawer, modal, embedded panel).
|
|
741
|
+
<div style={{ width: "100vw", height: "100dvh" }}>
|
|
742
|
+
<CometChatApp />
|
|
743
|
+
</div>
|
|
744
|
+
);
|
|
745
|
+
}
|
|
746
|
+
```
|
|
747
|
+
|
|
748
|
+
**Critical:**
|
|
749
|
+
|
|
750
|
+
- `CometChatProvider` is the **repo's own context** from `./CometChat/context/CometChatContext`, NOT the kit's `CometChatUIKit` export. It manages the builder's `styleFeatures` / `chatFeatures` state and is required for `CometChatHome`, `useThemeStyles`, and the customization toggles to work.
|
|
751
|
+
- `setupLocalization()` from `./CometChat/utils/utils` is required before render — it wires the builder's i18n catalog into the kit. Skipping it leaves UI strings empty.
|
|
752
|
+
- `CometChatUIKit.init(...)` returns a Promise — render only AFTER it resolves. Rendering before init resolves causes `CometChatHome` to throw on first listener attach.
|
|
753
|
+
- Login is handled by `CometChatApp` itself (the canonical component uses `CometChat.addLoginListener` + `CometChatUIKit.getLoggedinUser`). For dev mode, the customer's `App.tsx` should call `CometChatUIKit.login("cometchat-uid-1")` after init resolves but BEFORE rendering — see §2's login order. The canonical app shows a `LoginPlaceholder` until a user is present.
|
|
754
|
+
|
|
755
|
+
### 11.4 Per-framework variants
|
|
756
|
+
|
|
757
|
+
| Framework | Where to put `CometChat/` | Entry-file pattern | SSR notes |
|
|
758
|
+
|---|---|---|---|
|
|
759
|
+
| **Vite + React** | `src/CometChat/` | `src/main.tsx` (above) | N/A |
|
|
760
|
+
| **Create React App** | `src/CometChat/` | `src/index.tsx` — same as Vite but use `ReactDOM.createRoot` from `react-dom/client` | N/A |
|
|
761
|
+
| **Next.js App Router** | `src/app/CometChat/` | Create `src/app/CometChatNoSSR/CometChatNoSSR.tsx` (client component) that does init + login + renders `<CometChatProvider><CometChatApp /></CometChatProvider>`. Then create `src/app/CometChatAppWrapper.tsx` with `"use client"` + `dynamic(() => import("../app/CometChatNoSSR/CometChatNoSSR"), { ssr: false })`. Import the wrapper in `src/app/page.tsx`. | The canonical `src/CometChat/` uses `window` / `document` / WebSocket APIs at module scope. `{ ssr: false }` on the wrapper is **non-negotiable** — direct import from a server component causes hydration errors. Use `process.env.NEXT_PUBLIC_COMETCHAT_*` instead of `import.meta.env.*`. |
|
|
762
|
+
| **Next.js Pages Router** | `src/CometChat/` | `pages/chat.tsx` — `const CometChatApp = dynamic(() => import("../src/CometChat/CometChatApp"), { ssr: false });` Init in `pages/_app.tsx` inside `useEffect`. | Same SSR rationale as App Router. |
|
|
763
|
+
| **React Router v7** | `app/CometChat/` (framework mode) or `src/CometChat/` (data mode) | Framework mode: use a `.client.tsx` suffix or `<ClientOnly>` from `remix-utils/client-only`. Data mode: same as Vite. | Framework mode SSRs by default — `.client.tsx` suffix OR `<ClientOnly>` is the only safe pattern. |
|
|
764
|
+
| **Astro** | `src/CometChat/` | `<CometChatApp client:only="react" />` inside an `.astro` page. Init runs in a sibling `.tsx` component that mounts before `CometChatApp`. | `client:only="react"` — never `client:load` (Astro will still SSR the import resolution and crash). |
|
|
765
|
+
|
|
766
|
+
### 11.5 Calls + builder
|
|
767
|
+
|
|
768
|
+
If `CometChatSettings.callFeatures` has any `true` value (`oneOnOneVoiceCalling`, `oneOnOneVideoCalling`, `groupVideoConference`, `groupVoiceConference`):
|
|
769
|
+
|
|
770
|
+
1. The canonical `src/CometChat/` already wires `CometChatIncomingCall` inside `CometChatHome` — no extra mount required.
|
|
771
|
+
2. Skills patches `package.json` to add `@cometchat/calls-sdk-javascript@4.2.5` (already in the canonical install command above) and the Cloudsmith-hosted `@cometchat/calls-lib-webrtc` per `cometchat-react-calls`.
|
|
772
|
+
3. Calls SDK init runs alongside UI Kit init — pattern in `cometchat-react-calls § 2`.
|
|
773
|
+
|
|
774
|
+
Invoke `cometchat-react-calls` after this section with `{ mode: "additive" }` so it adds Calls SDK init + lib-webrtc without duplicating the kit-level wiring already present in the copied `src/CometChat/`.
|
|
775
|
+
|
|
776
|
+
### 11.6 Resync flow
|
|
777
|
+
|
|
778
|
+
The "Re-sync visual builder" iteration menu option (see `cometchat/SKILL.md § Step 7`) is a **one-command re-run**:
|
|
779
|
+
|
|
780
|
+
```bash
|
|
781
|
+
cometchat builder export --platform react --force
|
|
782
|
+
```
|
|
783
|
+
|
|
784
|
+
The `--force` flag is mandatory: it explicitly authorizes replacing the existing `src/CometChat/` directory. Without it, the CLI bails with *"--output directory \`src/CometChat\` already exists. Pass --force to replace it (full re-download per the resync flow), or pick a different --output path."*
|
|
785
|
+
|
|
786
|
+
This matches the product contract for step 7 of the UI Kit Builder workflow:
|
|
787
|
+
|
|
788
|
+
1. Re-download the canonical static template ZIP (in case vendor has shipped fixes)
|
|
789
|
+
2. Re-fetch the customer's current settings JSON (in case they tweaked in browser)
|
|
790
|
+
3. Apply the F3 + F10 missing-field defaults
|
|
791
|
+
4. Replace the `src/CometChat/` directory entirely
|
|
792
|
+
|
|
793
|
+
**Customer hand-edits inside `src/CometChat/` are lost on resync.** This is intentional — the SKILLS-AUTO-GENERATED sentinel comment on `CometChatSettings.ts` documents the "do not edit by hand" contract.
|
|
794
|
+
|
|
795
|
+
If a customer needs to override beyond what the Visual Builder exposes, the supported escape hatches are:
|
|
796
|
+
- Edit the entry file (e.g., `src/main.tsx`) — outside `src/CometChat/`, never touched by resync
|
|
797
|
+
- Edit `src/App.tsx` to wrap `<CometChatApp />` with additional providers / styling
|
|
798
|
+
- Use `cometchat apply-feature <id>` for extension toggles (server-side, survives resync)
|
|
799
|
+
- For one-off CSS overrides, edit `src/index.css` or equivalent — also outside `src/CometChat/`
|
|
800
|
+
|
|
801
|
+
The `cometchat-core` §11.7 "Override hook pattern" documents the recommended places to override without touching the canonical.
|
|
802
|
+
|
|
803
|
+
`verify --builder` runs after resync to confirm the new export is structurally sound.
|
|
804
|
+
|
|
805
|
+
### 11.7 What this section does NOT emit
|
|
806
|
+
|
|
807
|
+
The canonical `src/CometChat/` honors every Builder setting it supports — theme colors, typography, dark/light, sidebar toggle, layout tabs, `chatFeatures.*`, `callFeatures.*`, `agent.*` (per the repo's `CometChatHome` + `styleConfig.ts`). The only setting that isn't auto-applied is `noCode.docked` (the floating-widget shape) — that's a runtime DOM injection that requires the customer to mount `<CometChatApp />` inside a docked overlay container. Surface this in the post-emit summary:
|
|
808
|
+
|
|
809
|
+
> Builder settings honored: theme, typography, layout/tabs, sidebar, chat features (mentions/reactions/threads/media/etc.), call features, agent UI.
|
|
810
|
+
> Builder settings deferred: `noCode.docked` floating-widget mode — requires manual mount inside a positioned overlay; see `cometchat-placement § Floating widget`.
|
|
@@ -219,3 +219,20 @@ void dispose() {
|
|
|
219
219
|
- [ ] SDK listeners registered with unique ID, removed in `dispose()`
|
|
220
220
|
- [ ] Colors from `CometChatThemeHelper`, never hardcoded
|
|
221
221
|
- [ ] Imports: `package:cometchat_chat_uikit/cometchat_chat_uikit.dart` always; ADD `package:cometchat_calls_uikit/cometchat_calls_uikit.dart` if you use voice/video
|
|
222
|
+
|
|
223
|
+
## Visual Builder integration
|
|
224
|
+
|
|
225
|
+
**Flutter V5 is the primary home for Visual Builder integration.** The canonical repo at the `chat_builder/` directory inside the Flutter Visual Builder ZIP (download from https://preview.cometchat.com/downloads/cometchat-builder-flutter.zip) ships **V5-shaped code** — `cometchat_chat_uikit: ^5.2.12` + `cometchat_calls_uikit: ^5.0.13`. The integration copies the entire `chat_builder/` directory as a `path:` dependency, then `BuilderSettingsHelper.loadFromAsset()` reads `chat_builder/assets/sample_app/cometchat-builder-settings.json` and configures the bundled chat UI accordingly.
|
|
226
|
+
|
|
227
|
+
**The full recipe lives in `cometchat-flutter-v6-core` §"Visual Builder integration"** because that's where the V6-prep restructure originally landed the validated content. Both skills reference the same canonical; the V6 page carries a "V5-shaped code" warning at the top. V5 customers should follow that recipe AS-IS — the canonical IS V5-targeted.
|
|
228
|
+
|
|
229
|
+
Validated 2026-05-21 against Flutter 3.38.3: `flutter build apk --debug` produces `app-debug.apk` after applying:
|
|
230
|
+
- Envelope-wrapped JSON at `chat_builder/assets/sample_app/cometchat-builder-settings.json` (`{ builderId, name, settings: {...} }`)
|
|
231
|
+
- Two missing-field defaults injected pre-write (mentionAll + inAppSounds — same as Android)
|
|
232
|
+
- `android.enableJetifier=true` in `android/gradle.properties` (the chat SDK pulls `com.android.support` transitively)
|
|
233
|
+
- `await BuilderSettingsHelper.loadFromAsset()` in `lib/main.dart` before `runApp()`
|
|
234
|
+
- `chat_builder: { path: ./chat_builder }` in host `pubspec.yaml`
|
|
235
|
+
|
|
236
|
+
Differences from the V6 page's recipe text:
|
|
237
|
+
- V5 host code uses `StatefulWidget` with direct listener management (V6 uses BLoC pattern); both work with the embedded chat_builder package since it owns its own state.
|
|
238
|
+
- V5 calls work via the standard `cometchat-flutter-v5-calls` flow — no [[project_v6_flutter_calls_partial]] navigatorKey workaround needed (that's a V6-beta-specific issue).
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
---
|
|
2
2
|
name: cometchat-flutter-v6-calls
|
|
3
|
-
description: CometChat Calls integration for Flutter UIKit v6 (Bloc-based,
|
|
3
|
+
description: "CometChat Calls integration for Flutter UIKit v6 (Bloc-based, stable). Production-ready at v6.0.1 GA (validated 2026-05-27 on Pixel 3) with ONE explicit MaterialApp wiring requirement still active from v6.0.0-beta2 — MaterialApp MUST wire navigatorKey to CallNavigationContext.navigatorKey or the outgoing-call screen never renders. (Vendor's own 6.0.1 sample is missing this line and broken out-of-the-box — file a vendor ticket if you find that sample first.) The earlier outgoing-to-in-call BLoC transition bug from beta2 is FIXED in 6.0.1 GA per the v6.0.0 changelog's 'Refreshed BLoC implementations across ongoing call flows' entry. Customers can now use V6 for calls. Covers UIKitSettings calling block, CometChatUIKitCalls.init() after CometChatUIKit.init() (CALLS_INIT_AFTER_CHAT_INIT), the kit's Bloc-driven CometChatCallButtons / CometChatIncomingCall / CometChatOutgoingCall / CometChatOngoingCall / CometChatCallLogs / CometChatCallBubble widgets, CallingConfiguration, native_call_kit module (iOS CallKit + Android ConnectionService), CallOperationsServiceLocator lifecycle, FCM + PushKit VoIP push, and additive-vs-standalone modes."
|
|
4
4
|
license: "MIT"
|
|
5
|
-
compatibility: "Flutter >= 2.5, Dart >= 3.0; cometchat_chat_uikit ^6.0.
|
|
5
|
+
compatibility: "Flutter >= 2.5, Dart >= 3.0; cometchat_chat_uikit ^6.0.1 (calls bundled in); minSdk 26+ on Android; iOS 13+"
|
|
6
6
|
allowed-tools: "shell, file-read, file-search, file-list, ask-user"
|
|
7
7
|
metadata:
|
|
8
8
|
author: "CometChat"
|
|
@@ -12,7 +12,7 @@ metadata:
|
|
|
12
12
|
|
|
13
13
|
## Purpose
|
|
14
14
|
|
|
15
|
-
Production-grade voice + video calling for Flutter UIKit v6 (
|
|
15
|
+
Production-grade voice + video calling for Flutter UIKit v6 (stable, Bloc-based). Loaded by `cometchat-calls` when `framework === "flutter"` and `flutter_version === "v6"`. Operates in two modes:
|
|
16
16
|
|
|
17
17
|
- **Standalone** — calls is the product. Chat SDK + Calls SDK without the v6 UI Kit (rare today, since the UI Kit ships calling bundled). Custom call screens on the SDKs.
|
|
18
18
|
- **Additive** — calls layered onto an existing v6 chat integration. The v6 UI Kit ships call widgets in the same package (`cometchat_chat_uikit`) — no extra dependency. The skill enables calling on `UIKitSettings`, calls `CometChatUIKitCalls.init()` in the chat-init success callback, mounts the global incoming-call overlay at app root.
|
|
@@ -29,7 +29,7 @@ Production-grade voice + video calling for Flutter UIKit v6 (beta, Bloc-based).
|
|
|
29
29
|
- V6 `CometChatUIKitCalls.init(appId, region)` must run AFTER `CometChatUIKit.init()` succeeds; V5 hides this via `CometChatCallingExtension`
|
|
30
30
|
|
|
31
31
|
**Ground truth:**
|
|
32
|
-
- SDK source — installed `cometchat_chat_uikit@6.0.
|
|
32
|
+
- SDK source — installed `cometchat_chat_uikit@6.0.1` artifacts under `~/.pub-cache/`
|
|
33
33
|
- Sample app — `~/Downloads/calls-sdk/calls-sdk-flutter-5/sample-apps/` (V5 sample; V6 sample app may not exist yet — verify before citing)
|
|
34
34
|
- Public docs — https://www.cometchat.com/docs/calls/flutter/overview (note: V6 docs may still reference V5 module split)
|
|
35
35
|
|
|
@@ -167,11 +167,11 @@ MaterialApp(
|
|
|
167
167
|
);
|
|
168
168
|
```
|
|
169
169
|
|
|
170
|
-
**⚠️ `navigatorKey: CallNavigationContext.navigatorKey` is REQUIRED on MaterialApp
|
|
170
|
+
**⚠️ `navigatorKey: CallNavigationContext.navigatorKey` is REQUIRED on MaterialApp — still active in v6.0.1 GA.** The kit's `CometChatCallButtons` and outgoing-call flow navigate via `CallNavigationContext.navigatorKey.currentContext`. Without this line, `CometChat.initiateCall` succeeds (CALL-TRAP confirms `onSuccess` fires with a valid sessionId) but `currentContext` is null so `CometChatOutgoingCall` never mounts. Symptom: user taps call button, peer rings, but the Flutter app shows nothing. **Note: the vendor's own 6.0.1 sample app (`examples/sample_app`) is missing this line and is broken out-of-the-box** — its `user_info_screen.dart` reads `CallNavigationContext.navigatorKey.currentContext` but `main.dart`'s MaterialApp never sets the key. Don't copy the vendor sample's `main.dart` verbatim; add the navigatorKey.
|
|
171
171
|
|
|
172
172
|
Import: `import 'package:cometchat_chat_uikit/cometchat_calls_uikit.dart' show CallNavigationContext;` (use `show` to avoid a name collision with kit-exported `IncomingCallOverlay`).
|
|
173
173
|
|
|
174
|
-
|
|
174
|
+
**✅ Outgoing → in-call screen transition is FIXED in v6.0.1 GA.** (It was broken in v6.0.0-beta2 — the outgoing-call screen stayed on "Calling…" indefinitely after the peer accepted.) Validated end-to-end 2026-05-27 on Pixel 3 with full CALL-TRAP instrumentation: with the navigatorKey wired (above), when the peer accepts, the kit's `OutgoingCallBloc` fires `pushReplacement` and the screen transitions automatically from `CometChatOutgoingCall` ("Calling…") to the in-call surface — observed call-duration timer ticking + WebRTC rendering frames @ ~27 fps. The v6.0.0 changelog's "Refreshed BLoC implementations across … call buttons, and ongoing call flows" was the fix. No client-side workaround needed beyond the navigatorKey wiring.
|
|
175
175
|
|
|
176
176
|
In standalone mode, `native_call_kit` owns the OS-level ring UI; the in-app overlay only fires when the app is foregrounded.
|
|
177
177
|
|
|
@@ -184,7 +184,7 @@ In standalone mode, `native_call_kit` owns the OS-level ring UI; the in-app over
|
|
|
184
184
|
dependencies:
|
|
185
185
|
flutter:
|
|
186
186
|
sdk: flutter
|
|
187
|
-
cometchat_chat_uikit: ^6.0
|
|
187
|
+
cometchat_chat_uikit: ^6.0 # calls bundled in
|
|
188
188
|
permission_handler: ^11.0.0
|
|
189
189
|
flutter_callkit_incoming: ^2.0.0 # standalone — VoIP UI bridge
|
|
190
190
|
firebase_messaging: ^14.0.0 # standalone — Android FCM
|
|
@@ -195,7 +195,7 @@ If pub.dev resolution lags, use the Cloudsmith hosted pin:
|
|
|
195
195
|
```yaml
|
|
196
196
|
cometchat_chat_uikit:
|
|
197
197
|
hosted: https://dart.cloudsmith.io/cometchat/cometchat/
|
|
198
|
-
version: ^6.0.
|
|
198
|
+
version: ^6.0.1
|
|
199
199
|
```
|
|
200
200
|
|
|
201
201
|
Init (additive mode):
|
|
@@ -337,7 +337,7 @@ Dual-SDK + UIKit. Scaffold:
|
|
|
337
337
|
|
|
338
338
|
When chat is already integrated. The skill:
|
|
339
339
|
|
|
340
|
-
1. Confirms `cometchat_chat_uikit` is on `^6.0.
|
|
340
|
+
1. Confirms `cometchat_chat_uikit` is on `^6.0.1` — calls are already bundled.
|
|
341
341
|
2. Patches the `CometChatUIKit.init` call to add `CometChatUIKitCalls.init` in the success callback (rule 1.1).
|
|
342
342
|
3. Adds `CometChatDisplayIncomingCallOverlay` to `MaterialApp.builder` (rule 1.7).
|
|
343
343
|
4. Confirms `CometChatMessageHeader` shows call buttons by default (`hideVoiceCallButton: false`, `hideVideoCallButton: false`).
|
|
@@ -359,7 +359,7 @@ When chat is already integrated. The skill:
|
|
|
359
359
|
|
|
360
360
|
**Static:**
|
|
361
361
|
|
|
362
|
-
- [ ] `cometchat_chat_uikit ^6.0.
|
|
362
|
+
- [ ] `cometchat_chat_uikit ^6.0.1` in pubspec.yaml (V6 bundles calls — no separate calls package)
|
|
363
363
|
- [ ] `CometChatUIKitCalls.init` called inside `CometChatUIKit.init`'s `onSuccess` (rule 1.1)
|
|
364
364
|
- [ ] `CometChatUIKitCalls.init` called exactly once per app lifecycle
|
|
365
365
|
- [ ] `CometChatDisplayIncomingCallOverlay` mounted in `MaterialApp.builder` (rule 1.7)
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# Adding calls to an existing chat integration (Flutter V6 / Bloc)
|
|
2
2
|
|
|
3
|
-
V6 calls are **bundled** into `cometchat_chat_uikit: ^6.0
|
|
3
|
+
V6 calls are **bundled** into `cometchat_chat_uikit: ^6.0` — no separate calls package. Toggle on by enabling calling in the UIKit settings.
|
|
4
4
|
|
|
5
5
|
**Read first:** `cometchat-flutter-v6-calls/SKILL.md` — V6 architecture (Bloc).
|
|
6
6
|
|
|
@@ -11,7 +11,7 @@ V6 calls are **bundled** into `cometchat_chat_uikit: ^6.0.0-beta2` — no separa
|
|
|
11
11
|
```yaml
|
|
12
12
|
# pubspec.yaml
|
|
13
13
|
dependencies:
|
|
14
|
-
cometchat_chat_uikit: ^6.0
|
|
14
|
+
cometchat_chat_uikit: ^6.0 # V6 — calls bundled
|
|
15
15
|
```
|
|
16
16
|
|
|
17
17
|
If you see `cometchat_calls_uikit` separately listed, you're on V5 cohort — see `cometchat-flutter-v5-calls/references/add-calls-to-existing-chat.md`.
|
|
@@ -118,7 +118,7 @@ class CallBloc extends Bloc<CallEvent, CallState> {
|
|
|
118
118
|
|
|
119
119
|
## Verification checklist
|
|
120
120
|
|
|
121
|
-
- [ ] `cometchat_chat_uikit: ^6.0
|
|
121
|
+
- [ ] `cometchat_chat_uikit: ^6.0` (or higher V6) in pubspec
|
|
122
122
|
- [ ] `..enableCalling()` chained in UIKitSettingsBuilder
|
|
123
123
|
- [ ] Native config (iOS + Android) same as V5
|
|
124
124
|
- [ ] `CometChatIncomingCall` sibling-overlay at root
|