- @if (user) { + @if (user()) { } @@ -3293,11 +3307,11 @@ import { CometChatMessageListComponent } from '@cometchat/chat-uikit-angular'; ` }) export class AccessibleChatComponent implements OnInit { - user?: CometChat.User; + user = signal(undefined); async ngOnInit(): Promise { try { - this.user = await CometChat.getUser('RECEIVER_UID'); + this.user.set(await CometChat.getUser('RECEIVER_UID')); } catch (error) { console.error('Error fetching user:', error); } @@ -5180,7 +5194,7 @@ export class GroupChatComponent implements OnInit { * Use this as a starting point and add features as needed */ -import { Component, OnInit } from '@angular/core'; +import { Component, OnInit, signal } from '@angular/core'; import { CometChat } from '@cometchat/chat-sdk-javascript'; import { CometChatMessageListComponent } from '@cometchat/chat-uikit-angular'; @@ -5189,9 +5203,9 @@ import { CometChatMessageListComponent } from '@cometchat/chat-uikit-angular'; standalone: true, imports: [CometChatMessageListComponent], template: ` - @if (user) { + @if (user()) { } @@ -5204,11 +5218,11 @@ import { CometChatMessageListComponent } from '@cometchat/chat-uikit-angular'; `], }) export class MinimalChatComponent implements OnInit { - user?: CometChat.User; + user = signal(undefined); async ngOnInit(): Promise { // Assumes CometChat is already initialized and user is logged in - this.user = await CometChat.getUser('RECEIVER_UID'); + this.user.set(await CometChat.getUser('RECEIVER_UID')); } onError(error: CometChat.CometChatException): void { diff --git a/ui-kit/angular/guides/block-unblock-user.mdx b/ui-kit/angular/guides/block-unblock-user.mdx index c4f5b43d0..7885c3576 100644 --- a/ui-kit/angular/guides/block-unblock-user.mdx +++ b/ui-kit/angular/guides/block-unblock-user.mdx @@ -56,8 +56,9 @@ async blockUser(user: CometChat.User): Promise { await CometChat.blockUsers([uid]); user.setBlockedByMe(true); CometChatUserEvents.ccUserBlocked.next(user); - this.toastMessage = CometChatLocalize.getLocalizedString('blocked_successfully'); - this.showToast = true; + // toastMessage and showToast are signals on the component (set after an await) + this.toastMessage.set(CometChatLocalize.getLocalizedString('blocked_successfully')); + this.showToast.set(true); } catch (error) { console.error('Blocking user failed:', error); } @@ -125,7 +126,7 @@ async onBlockConfirmed(): Promise { When a user is blocked, the composer is replaced with an unblock prompt. ```html expandable -@if (showComposer) { +@if (showComposer()) { @@ -146,7 +147,7 @@ When a user is blocked, the composer is replaced with an unblock prompt. Subscribe to block/unblock events to update the UI in real time. Clean up subscriptions in `ngOnDestroy`. ```typescript expandable -import { Component, OnInit, OnDestroy } from '@angular/core'; +import { Component, OnInit, OnDestroy, signal } from '@angular/core'; import { Subscription } from 'rxjs'; import { CometChatUserEvents } from '@cometchat/chat-uikit-angular'; @@ -157,14 +158,16 @@ import { CometChatUserEvents } from '@cometchat/chat-uikit-angular'; template: `` }) export class ChatMessagesComponent implements OnInit, OnDestroy { - showComposer = true; + // A signal: the events fire after an SDK call resolves, outside Angular's + // change detection in zoneless apps, so a plain field would not re-render. + showComposer = signal(true); private subscriptions: Subscription[] = []; ngOnInit(): void { this.subscriptions.push( CometChatUserEvents.ccUserBlocked.subscribe((user) => { if (user.getBlockedByMe()) { - this.showComposer = false; + this.showComposer.set(false); } }) ); @@ -172,7 +175,7 @@ export class ChatMessagesComponent implements OnInit, OnDestroy { this.subscriptions.push( CometChatUserEvents.ccUserUnblocked.subscribe((user) => { if (!user.getBlockedByMe()) { - this.showComposer = true; + this.showComposer.set(true); } }) ); diff --git a/ui-kit/angular/guides/custom-message-types.mdx b/ui-kit/angular/guides/custom-message-types.mdx index c4a2b2c9e..7c839a226 100644 --- a/ui-kit/angular/guides/custom-message-types.mdx +++ b/ui-kit/angular/guides/custom-message-types.mdx @@ -218,7 +218,7 @@ A complete example showing a custom "location" message type with bubble template ```typescript expandable import { - Component, ViewChild, TemplateRef, AfterViewInit, inject, OnInit + Component, ViewChild, TemplateRef, AfterViewInit, inject, OnInit, signal } from '@angular/core'; import { CometChat } from '@cometchat/chat-sdk-javascript'; import { @@ -243,13 +243,14 @@ import { - + ` }) export class LocationDemoComponent implements OnInit, AfterViewInit { @ViewChild('locationBubble') locationBubble!: TemplateRef; - user: CometChat.User | undefined; + // A signal so the view updates when the promise resolves, with or without zone.js. + user = signal(undefined); private bubbleConfig = inject(MessageBubbleConfigService); private subtitleService = inject(ConversationSubtitleService); @@ -266,7 +267,7 @@ export class LocationDemoComponent implements OnInit, AfterViewInit { }); // Load user - CometChat.getUser('uid').then(u => this.user = u); + CometChat.getUser('uid').then(u => this.user.set(u)); } ngAfterViewInit() { diff --git a/ui-kit/angular/guides/custom-text-formatter.mdx b/ui-kit/angular/guides/custom-text-formatter.mdx index b09e4aeb7..795bcc7d5 100644 --- a/ui-kit/angular/guides/custom-text-formatter.mdx +++ b/ui-kit/angular/guides/custom-text-formatter.mdx @@ -269,7 +269,7 @@ export class ColorFormatter extends CometChatTextFormatter { ```typescript expandable -import { Component, OnInit } from '@angular/core'; +import { Component, OnInit, signal } from '@angular/core'; import { CometChat } from '@cometchat/chat-sdk-javascript'; import { CometChatMessageListComponent, @@ -287,7 +287,8 @@ import { ColorFormatter, COLORS } from '../formatters/color-formatter'; templateUrl: './chat.component.html', }) export class ChatComponent implements OnInit { - user?: CometChat.User; + // A signal so the view updates when the promise resolves, with or without zone.js. + user = signal(undefined); colors = COLORS; formatters = [ new CometChatMentionsFormatter(), @@ -297,7 +298,7 @@ export class ChatComponent implements OnInit { ]; ngOnInit(): void { - CometChat.getUser('uid').then(user => (this.user = user)); + CometChat.getUser('uid').then(user => this.user.set(user)); } } ``` @@ -307,10 +308,10 @@ export class ChatComponent implements OnInit { ```html expandable -@if (user) { - +@if (user()) { + } - @if (error) { + @if (error()) {

Failed to join group. Check the password.

} ` @@ -132,7 +132,7 @@ export class JoinGroupComponent { @Output() groupJoined = new EventEmitter(); password = ''; - error = false; + error = signal(false); // set after an await, so a signal keeps zoneless apps in sync async joinGroup(): Promise { try { @@ -150,7 +150,7 @@ export class JoinGroupComponent { } this.groupJoined.emit(joinedGroup); } catch { - this.error = true; + this.error.set(true); } } } diff --git a/ui-kit/angular/guides/hashtag-formatter.mdx b/ui-kit/angular/guides/hashtag-formatter.mdx index fcaadc632..ed8b4eaad 100644 --- a/ui-kit/angular/guides/hashtag-formatter.mdx +++ b/ui-kit/angular/guides/hashtag-formatter.mdx @@ -105,7 +105,7 @@ Key points: Pass the formatter to both the message list (for rendering) and the composer (for live preview and edit view): ```typescript expandable -import { Component, OnInit } from "@angular/core"; +import { Component, OnInit, signal } from "@angular/core"; import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatMessageListComponent, @@ -122,17 +122,18 @@ import { HashtagFormatter } from "./hashtag-formatter"; imports: [CometChatMessageListComponent, CometChatMessageComposerComponent], template: ` `, }) export class ChatComponent implements OnInit { - chatUser: CometChat.User | undefined; + // A signal so the view updates when the promise resolves, with or without zone.js. + chatUser = signal(undefined); // Passing textFormatters replaces the built-ins, so keep them in the list. formatters = [ new CometChatMentionsFormatter(), @@ -143,7 +144,7 @@ export class ChatComponent implements OnInit { ngOnInit(): void { CometChat.getUser("uid").then((user) => { - this.chatUser = user; + this.chatUser.set(user); }); } } diff --git a/ui-kit/angular/guides/mentions-formatter.mdx b/ui-kit/angular/guides/mentions-formatter.mdx index a24fdc496..d265e910f 100644 --- a/ui-kit/angular/guides/mentions-formatter.mdx +++ b/ui-kit/angular/guides/mentions-formatter.mdx @@ -55,7 +55,7 @@ The output contains HTML with styled mentions ready for rendering. Use the `textFormatters` input on `cometchat-message-list`, `cometchat-message-composer`, or `cometchat-conversations`. ```typescript expandable -import { Component, OnInit } from "@angular/core"; +import { Component, OnInit, signal } from "@angular/core"; import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatMessageListComponent, @@ -69,22 +69,23 @@ import { imports: [CometChatMessageListComponent, CometChatMessageComposerComponent], template: ` `, }) export class MentionsDemoComponent implements OnInit { - chatUser: CometChat.User | undefined; + // A signal so the view updates when the promise resolves, with or without zone.js. + chatUser = signal(undefined); textFormatters = [new CometChatMentionsFormatter()]; ngOnInit() { CometChat.getUser("uid").then((user) => { - this.chatUser = user; + this.chatUser.set(user); }); } } diff --git a/ui-kit/angular/guides/state-management.mdx b/ui-kit/angular/guides/state-management.mdx index f0fd3e13c..7a630421c 100644 --- a/ui-kit/angular/guides/state-management.mdx +++ b/ui-kit/angular/guides/state-management.mdx @@ -255,7 +255,7 @@ export class ChatNavComponent { For applications that display multiple chat panels side by side (e.g., a support dashboard), use the props-based pattern to give each panel its own independent state: ```typescript expandable -import { Component } from '@angular/core'; +import { Component, signal } from '@angular/core'; import { CometChat } from '@cometchat/chat-sdk-javascript'; import { CometChatMessageHeaderComponent, @@ -274,20 +274,20 @@ import { template: `
- @if (userA) { + @if (userA(); as user) {
- - - + + +
} - @if (teamGroup) { + @if (teamGroup(); as group) {
- - - + + +
}
@@ -298,13 +298,14 @@ import { `] }) export class MultiPanelComponent { - userA: CometChat.User | null = null; - teamGroup: CometChat.Group | null = null; + // Signals so the panels render when the awaits resolve, with or without zone.js. + userA = signal(null); + teamGroup = signal(null); async ngOnInit(): Promise { // Fetch specific entities for each panel - this.userA = await CometChat.getUser('alice'); - this.teamGroup = await CometChat.getGroup('team-engineering'); + this.userA.set(await CometChat.getUser('alice')); + this.teamGroup.set(await CometChat.getGroup('team-engineering')); } } ``` diff --git a/ui-kit/angular/guides/url-formatter.mdx b/ui-kit/angular/guides/url-formatter.mdx index 1e8820ea5..b0d058cb0 100644 --- a/ui-kit/angular/guides/url-formatter.mdx +++ b/ui-kit/angular/guides/url-formatter.mdx @@ -56,7 +56,7 @@ export class CometChatUrlsFormatter extends CometChatTextFormatter { ```typescript expandable -import { Component, OnInit } from "@angular/core"; +import { Component, OnInit, signal } from "@angular/core"; import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatMessageListComponent } from "@cometchat/chat-uikit-angular"; import { CometChatUrlsFormatter } from "./CometChatUrlsFormatter"; @@ -67,18 +67,19 @@ import { CometChatUrlsFormatter } from "./CometChatUrlsFormatter"; imports: [CometChatMessageListComponent], template: ` `, }) export class UrlDemoComponent implements OnInit { - chatUser: CometChat.User | undefined; + // A signal so the view updates when the promise resolves, with or without zone.js. + chatUser = signal(undefined); textFormatters = [new CometChatUrlsFormatter()]; ngOnInit() { CometChat.getUser("uid").then((user) => { - this.chatUser = user; + this.chatUser.set(user); }); } } diff --git a/ui-kit/angular/integration.mdx b/ui-kit/angular/integration.mdx index 72ce5cfa2..b1a291423 100644 --- a/ui-kit/angular/integration.mdx +++ b/ui-kit/angular/integration.mdx @@ -143,7 +143,7 @@ Angular 20+ names the root component `App` in `src/app/app.ts`, as below. A proj ```ts title="src/app/app.ts" expandable -import { Component, OnInit } from "@angular/core"; +import { Component, OnInit, signal } from "@angular/core"; import { CometChatUIKit } from "@cometchat/chat-uikit-angular"; import { CometChat } from "@cometchat/chat-sdk-javascript"; @@ -152,7 +152,7 @@ import { CometChat } from "@cometchat/chat-sdk-javascript"; standalone: true, imports: [], template: ` - @if (isLoggedIn) { + @if (isLoggedIn()) {
@@ -162,7 +162,9 @@ import { CometChat } from "@cometchat/chat-sdk-javascript"; `, }) export class App implements OnInit { - isLoggedIn = false; + // A signal, not a plain boolean: Angular 21 apps are zoneless by default, so a + // plain field changed inside a promise callback never re-renders the view. + isLoggedIn = signal(false); ngOnInit(): void { const UID = "cometchat-uid-1"; // Replace with your actual UID @@ -172,12 +174,12 @@ export class App implements OnInit { CometChatUIKit.login(UID) .then((user: CometChat.User) => { console.log("Login Successful:", { user }); - this.isLoggedIn = true; + this.isLoggedIn.set(true); }) .catch(console.log); } else { // Already logged in - this.isLoggedIn = true; + this.isLoggedIn.set(true); } }); } @@ -187,7 +189,8 @@ export class App implements OnInit { Key points: - `getLoggedinUser()` checks for an existing session so you don't re-login unnecessarily. - `login(uid)` skips the API call if a session already exists and returns the cached user. -- Components must not render until login resolves — use a boolean flag to gate rendering with `@if`. +- Components must not render until login resolves — gate rendering with `@if` on a signal. +- Keep state that changes in a promise or subscription callback in a `signal()`. New Angular 21 projects are zoneless (no `zone.js`), so assigning a plain field there (`this.isLoggedIn = true`) doesn't refresh the view — the app stays on "Loading..." and dev mode can throw `NG0100: ExpressionChangedAfterItHasBeenChecked`. Signals work the same with and without `zone.js`, so this code also runs on Angular 17–19. For production, use `loginWithAuthToken()` instead of Auth Key. Generate tokens server-side via the REST API. @@ -239,7 +242,7 @@ Without this import, components will render with broken or missing styles. ### Register UIKit Assets -The UIKit ships icons, images, and audio files that Angular's build system won't serve automatically. Add the assets path to your `angular.json` so they are copied to the build output: +The UIKit ships icons, images, and audio files that Angular's build system won't serve automatically. Append the UIKit entry to the existing `assets` array in your `angular.json` (under `architect.build.options`) so they are copied to the build output: ```json title="angular.json" expandable { @@ -249,6 +252,10 @@ The UIKit ships icons, images, and audio files that Angular's build system won't "build": { "options": { "assets": [ + { + "glob": "**/*", + "input": "public" + }, { "glob": "**/*", "input": "node_modules/@cometchat/chat-uikit-angular/src/lib/assets", @@ -263,13 +270,15 @@ The UIKit ships icons, images, and audio files that Angular's build system won't } ``` +Keep the entries the CLI generated (`public` on Angular 18+; `src/favicon.ico` and `src/assets` on Angular 17) — replacing the array instead of appending to it stops your own static files from being served. + Skipping this step will cause all UIKit icons, empty-state images, and notification sounds to fail with 404 errors. ### Raise the Production Bundle Budget -`ng build` uses the production configuration, whose default `initial` budget errors at 1 MB. The UI Kit and SDK put the initial bundle above that (about 2.3 MB), so the build fails with `bundle initial exceeded maximum budget`. Raise the limit in `angular.json`, and list the SDK under `allowedCommonJsDependencies` to silence its CommonJS warning: +`ng build` uses the production configuration, whose default `initial` budget errors at 1 MB. The UI Kit and SDK put the initial bundle well above that — a production build of the app in this guide (UI Kit 5.2, the [conversation list + message view](/ui-kit/angular/angular-conversation) layout) is about 4.4 MB raw (about 630 kB gzipped), on Angular 19 and 21 alike — so the build fails with `bundle initial exceeded maximum budget`. Raise the limit in `angular.json`, and list the SDK under `allowedCommonJsDependencies` to silence its CommonJS warning: ```json title="angular.json" expandable { @@ -285,8 +294,8 @@ The UIKit ships icons, images, and audio files that Angular's build system won't "budgets": [ { "type": "initial", - "maximumWarning": "3MB", - "maximumError": "5MB" + "maximumWarning": "5MB", + "maximumError": "8MB" } ] } @@ -298,7 +307,7 @@ The UIKit ships icons, images, and audio files that Angular's build system won't } ``` -Edit the existing `initial` entry in place and keep the `anyComponentStyle` budget the CLI generated. +Edit the existing `initial` entry in place and keep the `anyComponentStyle` budget the CLI generated. With these values a clean build of the sample app has no budget warning. The warning appears once the initial bundle passes 5 MB as you add your own code or optional packages such as the calling SDK; the 8 MB error leaves headroom before the build fails. --- diff --git a/ui-kit/angular/quickstart.mdx b/ui-kit/angular/quickstart.mdx index 15cc06ccd..5672e5e18 100644 --- a/ui-kit/angular/quickstart.mdx +++ b/ui-kit/angular/quickstart.mdx @@ -57,7 +57,7 @@ Use the relative `node_modules` path. The package's `exports` map doesn't expose ## Step 3: Register UIKit Assets -The UIKit ships icons, images, and audio files that Angular's build system won't serve automatically. Add the assets path to your `angular.json` so they are copied to the output: +The UIKit ships icons, images, and audio files that Angular's build system won't serve automatically. Append the UIKit entry to the existing `assets` array in your `angular.json` (under `architect.build.options`) so they are copied to the output: ```json expandable { @@ -67,6 +67,10 @@ The UIKit ships icons, images, and audio files that Angular's build system won't "build": { "options": { "assets": [ + { + "glob": "**/*", + "input": "public" + }, { "glob": "**/*", "input": "node_modules/@cometchat/chat-uikit-angular/src/lib/assets", @@ -81,6 +85,8 @@ The UIKit ships icons, images, and audio files that Angular's build system won't } ``` +Keep the entries the CLI generated (`public` on Angular 18+; `src/favicon.ico` and `src/assets` on Angular 17) — replacing the array instead of appending to it stops your own static files from being served. + Skipping this step will cause all UIKit icons, empty-state images, and notification sounds to fail with 404 errors. diff --git a/ui-kit/angular/troubleshooting.mdx b/ui-kit/angular/troubleshooting.mdx index df0fa8f5a..3440c2267 100644 --- a/ui-kit/angular/troubleshooting.mdx +++ b/ui-kit/angular/troubleshooting.mdx @@ -22,6 +22,7 @@ description: "Common failure modes and fixes for the CometChat Angular UIKit." | Component renders but shows no data | User not logged in | Call `CometChatUIKit.login()` after init | | Login fails with "UID not found" | UID doesn't exist in your CometChat app | Create the user via Dashboard, SDK, or API first | | Blank screen after login | Component mounted before init/login completes | Use state to conditionally render after login resolves | +| Stuck on "Loading..." after login succeeds, or `NG0100: ExpressionChangedAfterItHasBeenChecked` (Angular 21) | New Angular 21 apps are zoneless, so a plain field set in a promise, `await` or subscription callback (`this.isLoggedIn = true`) doesn't re-render | Keep that state in a `signal()` and update it with `.set()`, as in [Integration](/ui-kit/angular/integration) Step 4. Works with and without `zone.js` | | `getLoggedinUser()` returns null | User not logged in or session expired | Call `login()` or `loginWithAuthToken()` first | | `sendTextMessage()` fails | User not logged in or invalid receiver | Ensure login completes before sending messages | | Auth Key exposed in production | Using Auth Key instead of Auth Token | Switch to [Auth Token](/ui-kit/angular/methods#login-using-auth-token) for production | @@ -160,14 +161,14 @@ Ensure you're calling `setSuccess()` and then hiding the dialog: async handleConfirm(): Promise { await this.performAction(); this.dialog.setSuccess(); - this.showDialog = false; // Hide the dialog + this.showDialog.set(false); // Hide the dialog (showDialog is a signal, so this re-renders after the await) } // ❌ Incorrect - dialog stays visible async handleConfirm(): Promise { await this.performAction(); this.dialog.setSuccess(); - // Missing: this.showDialog = false; + // Missing: this.showDialog.set(false); } ``` @@ -862,16 +863,18 @@ Below are the most frequently encountered issues and their solutions. ```typescript expandable // Verify CometChat initialization -import { Component, OnInit } from '@angular/core'; -import { CometChatUIKit } from '@cometchat/chat-uikit-angular'; +import { Component, OnInit, signal } from '@angular/core'; +import { CometChatUIKit, CometChatMessageListComponent } from '@cometchat/chat-uikit-angular'; import { CometChat } from '@cometchat/chat-sdk-javascript'; @Component({ selector: 'app-debug-init', - template: `` + standalone: true, + imports: [CometChatMessageListComponent], + template: `` }) export class DebugInitComponent implements OnInit { - user?: CometChat.User; + user = signal(undefined); async ngOnInit(): Promise { try { @@ -894,8 +897,8 @@ export class DebugInitComponent implements OnInit { } // Step 3: Fetch the conversation user/group - this.user = await CometChat.getUser('RECEIVER_UID'); - console.log('Fetched user:', this.user); + this.user.set(await CometChat.getUser('RECEIVER_UID')); + console.log('Fetched user:', this.user()); } catch (error) { console.error('Initialization error:', error); @@ -1843,14 +1846,15 @@ Pass a `CometChat.User` object to the `user` input: ```typescript expandable @Component({ template: ` - + ` }) export class ChatComponent implements OnInit { - chatUser?: CometChat.User; + // A signal (from @angular/core) so the view updates after the await — required in zoneless apps + chatUser = signal(undefined); async ngOnInit(): Promise { - this.chatUser = await CometChat.getUser('USER_UID'); + this.chatUser.set(await CometChat.getUser('USER_UID')); } } ``` @@ -1862,14 +1866,15 @@ Pass a `CometChat.Group` object to the `group` input: ```typescript expandable @Component({ template: ` - + ` }) export class GroupChatComponent implements OnInit { - chatGroup?: CometChat.Group; + // A signal (from @angular/core) so the view updates after the await — required in zoneless apps + chatGroup = signal(undefined); async ngOnInit(): Promise { - this.chatGroup = await CometChat.getGroup('GROUP_GUID'); + this.chatGroup.set(await CometChat.getGroup('GROUP_GUID')); } } ``` From bdd5c48e47de0214a88d6f0768fb98080ac420d7 Mon Sep 17 00:00:00 2001 From: rajdubey Date: Mon, 19 Oct 2026 15:35:57 +0530 Subject: [PATCH 05/13] Angular: request builders as field initializers; showComposer is a signal Co-Authored-By: Claude Opus 5.5 Claude-Session: https://claude.ai/code/session_01Efu4EKfePzK3Z6QQVp2hm4 --- .../components/cometchat-message-list.mdx | 19 +++++++------------ ui-kit/angular/guides/block-unblock-user.mdx | 2 +- 2 files changed, 8 insertions(+), 13 deletions(-) diff --git a/ui-kit/angular/components/cometchat-message-list.mdx b/ui-kit/angular/components/cometchat-message-list.mdx index d52dc5386..cff3fde67 100644 --- a/ui-kit/angular/components/cometchat-message-list.mdx +++ b/ui-kit/angular/components/cometchat-message-list.mdx @@ -289,17 +289,15 @@ import { CometChatMessageListComponent } from '@cometchat/chat-uikit-angular'; }) export class FilteredMessagesComponent implements OnInit { chatUser = signal(undefined); - messagesBuilder?: CometChat.MessagesRequestBuilder; + // Custom messages request builder (set before the user loads, so it is in place on first render) + messagesBuilder = new CometChat.MessagesRequestBuilder() + .setLimit(30) + .setTypes(['text', 'image', 'video']) + .hideReplies(true); async ngOnInit(): Promise { try { this.chatUser.set(await CometChat.getUser('RECEIVER_UID')); - - // Create custom messages request builder - this.messagesBuilder = new CometChat.MessagesRequestBuilder() - .setLimit(30) - .setTypes(['text', 'image', 'video']) - .hideReplies(true); } catch (error) { console.error('Error:', error); } @@ -2660,15 +2658,12 @@ import { CometChatMessageListComponent } from '@cometchat/chat-uikit-angular'; }) export class CustomReactionsComponent implements OnInit { user = signal(undefined); - reactionsBuilder?: CometChat.ReactionsRequestBuilder; + // Custom reactions request builder: limit reactions per request + reactionsBuilder = new CometChat.ReactionsRequestBuilder().setLimit(10); async ngOnInit(): Promise { try { this.user.set(await CometChat.getUser('RECEIVER_UID')); - - // Configure custom reactions request builder - this.reactionsBuilder = new CometChat.ReactionsRequestBuilder() - .setLimit(10); // Limit reactions per request } catch (error) { console.error('Error:', error); } diff --git a/ui-kit/angular/guides/block-unblock-user.mdx b/ui-kit/angular/guides/block-unblock-user.mdx index 7885c3576..43d6c23e6 100644 --- a/ui-kit/angular/guides/block-unblock-user.mdx +++ b/ui-kit/angular/guides/block-unblock-user.mdx @@ -197,7 +197,7 @@ export class ChatMessagesComponent implements OnInit, OnDestroy { | Unblock user | `CometChat.unblockUsers([uid])` | Unblocks a previously blocked user | | Check blocked status | `user.getBlockedByMe()` | Returns whether the user is blocked | | Block confirmation | `cometchat-confirm-dialog` | Prevents accidental blocks | -| Blocked composer state | `showComposer` flag | Hides composer and shows unblock prompt | +| Blocked composer state | `showComposer` signal | Hides composer and shows unblock prompt | | Block event | `CometChatUserEvents.ccUserBlocked` | RxJS subject for block notifications | | Unblock event | `CometChatUserEvents.ccUserUnblocked` | RxJS subject for unblock notifications | | Subscription cleanup | `ngOnDestroy` | Unsubscribes from all event listeners | From a12a3b9d3299247640b71dc902283b94243bee00 Mon Sep 17 00:00:00 2001 From: rajdubey Date: Mon, 19 Oct 2026 15:39:45 +0530 Subject: [PATCH 06/13] Angular: create the environments file, unused scaffold files, allowSignalWrites warning Co-Authored-By: Claude Opus 5.5 Claude-Session: https://claude.ai/code/session_01Efu4EKfePzK3Z6QQVp2hm4 --- ui-kit/angular/integration.mdx | 4 +++- ui-kit/angular/troubleshooting.mdx | 1 + 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/ui-kit/angular/integration.mdx b/ui-kit/angular/integration.mdx index b1a291423..7424c103b 100644 --- a/ui-kit/angular/integration.mdx +++ b/ui-kit/angular/integration.mdx @@ -84,6 +84,8 @@ npm install @cometchat/calls-sdk-javascript Initialize the UI Kit in `main.ts` before bootstrapping the Angular app. This uses the static `CometChatUIKit.init()` method — the dual-API pattern lets you call it outside Angular's dependency injection context. +New Angular projects don't include an `environments` folder: create `src/environments/environment.ts` with your credentials. + ```ts title="src/environments/environment.ts" export const environment = { production: false, @@ -136,7 +138,7 @@ After init resolves, log the user in. For development, use one of the pre-create `cometchat-uid-1` · `cometchat-uid-2` · `cometchat-uid-3` · `cometchat-uid-4` · `cometchat-uid-5` -Add the login logic to your root component — replace the contents of `src/app/app.ts`. Use `CometChatUIKit.getLoggedinUser()` to check for an existing session before calling `login()`. +Add the login logic to your root component — replace the contents of `src/app/app.ts`. The component below uses an inline template, so the generated `app.html` and `app.css` are no longer used; you can delete them. Use `CometChatUIKit.getLoggedinUser()` to check for an existing session before calling `login()`. Angular 20+ names the root component `App` in `src/app/app.ts`, as below. A project created with Angular 17–19 uses `AppComponent` in `src/app/app.component.ts` — use that file and class name here and in `main.ts` instead. diff --git a/ui-kit/angular/troubleshooting.mdx b/ui-kit/angular/troubleshooting.mdx index 3440c2267..42881a7cc 100644 --- a/ui-kit/angular/troubleshooting.mdx +++ b/ui-kit/angular/troubleshooting.mdx @@ -22,6 +22,7 @@ description: "Common failure modes and fixes for the CometChat Angular UIKit." | Component renders but shows no data | User not logged in | Call `CometChatUIKit.login()` after init | | Login fails with "UID not found" | UID doesn't exist in your CometChat app | Create the user via Dashboard, SDK, or API first | | Blank screen after login | Component mounted before init/login completes | Use state to conditionally render after login resolves | +| Console warns "The 'allowSignalWrites' flag is deprecated" on Angular 19+ | Emitted by the UI Kit's own code; Angular 19 made the flag a no-op | Harmless — it doesn't affect behavior and needs no change in your app | | Stuck on "Loading..." after login succeeds, or `NG0100: ExpressionChangedAfterItHasBeenChecked` (Angular 21) | New Angular 21 apps are zoneless, so a plain field set in a promise, `await` or subscription callback (`this.isLoggedIn = true`) doesn't re-render | Keep that state in a `signal()` and update it with `.set()`, as in [Integration](/ui-kit/angular/integration) Step 4. Works with and without `zone.js` | | `getLoggedinUser()` returns null | User not logged in or session expired | Call `login()` or `loginWithAuthToken()` first | | `sendTextMessage()` fails | User not logged in or invalid receiver | Ensure login completes before sending messages | From 5bc1b619e104a6d5a214c8858cdcca6a6d402725 Mon Sep 17 00:00:00 2001 From: rajdubey Date: Mon, 19 Oct 2026 16:31:22 +0530 Subject: [PATCH 07/13] Review fixes: RN iOS 15.1 and Podfile, async-storage 2.x, Angular main.ts and App names, React imports and v7 APIs - React Native: iOS 15.1 everywhere; drop the arm64 simulator exclusion and bitcode lines; install async-storage ^2.1.2 up front (Calls SDK range) and drop the stale local_repo step and the unused datetimepicker; call-features installs the Calls SDK peers. - Angular: init()?.then and App/app.ts in main.ts samples; css import path in the migration guide and troubleshooting; calls init sample corrected. - React: missing SDK imports, CometChatMessages and .AIButton (not in v7), ButtonIcon children, callSettingsBuilder is a SessionSettings object; escape the <21 peer ranges so the pages parse. - iOS: 'needs CometChatSDK 4.1.9 or later' instead of an exact dependency. - Android: explicit AGP 8 comment on the Kotlin plugin line. Co-Authored-By: Claude Opus 5.5 Claude-Session: https://claude.ai/code/session_01Efu4EKfePzK3Z6QQVp2hm4 --- sdk/react-native/llms-react-native-v4.mdx | 5 ++- sdk/react-native/setup-sdk.mdx | 40 ++++++------------ ui-kit/android/getting-started-jetpack.mdx | 2 +- ui-kit/android/getting-started-kotlin.mdx | 2 +- .../formatter-config-service.mdx | 20 +++++---- .../api-reference/templates-service.mdx | 4 +- .../components/cometchat-conversations.mdx | 6 ++- .../components/cometchat-message-list.mdx | 19 +++++---- .../customization/date-time-formatting.mdx | 10 ++++- .../angular/customization/migration-guide.mdx | 21 ++++++---- .../angular/guides/custom-message-types.mdx | 6 ++- ui-kit/angular/troubleshooting.mdx | 26 ++++++------ ui-kit/ios/guide-pin-save-message.mdx | 2 +- ui-kit/ios/guide-thread-subscription.mdx | 2 +- ui-kit/ios/pinned-messages.mdx | 2 +- ui-kit/ios/saved-messages.mdx | 2 +- ui-kit/react-native/call-features.mdx | 28 ++++++++----- ui-kit/react-native/calling-integration.mdx | 6 --- ui-kit/react-native/expo-integration.mdx | 6 +-- ui-kit/react-native/llms-react-native-v5.mdx | 7 ++-- .../react-native-cli-integration.mdx | 6 +-- ui-kit/react-native/troubleshooting.mdx | 3 +- ui-kit/react/calling-integration.mdx | 2 + ui-kit/react/components/call-buttons.mdx | 42 ++++++++++--------- ui-kit/react/components/conversations.mdx | 4 +- ui-kit/react/components/group-members.mdx | 15 +++---- ui-kit/react/components/groups.mdx | 2 +- ui-kit/react/components/message-composer.mdx | 19 +++++---- ui-kit/react/components/message-header.mdx | 9 ++-- ui-kit/react/components/message-list.mdx | 6 ++- ui-kit/react/components/outgoing-call.mdx | 1 + ui-kit/react/components/pinned-messages.mdx | 3 +- ui-kit/react/components/thread-header.mdx | 6 ++- ui-kit/react/components/users.mdx | 2 +- ui-kit/react/guide-group-chat-setup.mdx | 8 +++- ui-kit/react/guide-threaded-messages.mdx | 6 ++- ui-kit/react/integration-astro.mdx | 2 +- ui-kit/react/integration-nextjs.mdx | 2 +- ui-kit/react/integration-react-router.mdx | 2 +- ui-kit/react/integration-react.mdx | 2 +- ui-kit/react/overview.mdx | 2 +- 41 files changed, 196 insertions(+), 164 deletions(-) diff --git a/sdk/react-native/llms-react-native-v4.mdx b/sdk/react-native/llms-react-native-v4.mdx index cb7a843d8..2322acc7c 100644 --- a/sdk/react-native/llms-react-native-v4.mdx +++ b/sdk/react-native/llms-react-native-v4.mdx @@ -33,8 +33,9 @@ intent, then read the API there. This is the **SDK**, not the UI Kit: it ships no components. You own every view. Also: - **`@react-native-async-storage/async-storage` is required** — the SDK persists session state through it and ships it as a direct dependency, so RN autolinking needs it present and - pod-installed. On Android, async-storage v3 also needs the `local_repo` Maven entry in - `android/build.gradle` or the build fails. + pod-installed. Install `@react-native-async-storage/async-storage@^2.1.2` (the range the + Calls SDK declares). No extra Gradle repository is needed: 2.x autolinks and 3.1+ resolves + from Maven Central, so do not add the old `local_repo` Maven entry. - **No DOM.** There is no `window`/`document`/`localStorage`; render with React Native primitives and drive them from the listener callbacks below. - **Listeners must be removed on unmount.** Every `add*Listener(id, …)` needs the matching diff --git a/sdk/react-native/setup-sdk.mdx b/sdk/react-native/setup-sdk.mdx index c932c27bb..2e5fa88f6 100644 --- a/sdk/react-native/setup-sdk.mdx +++ b/sdk/react-native/setup-sdk.mdx @@ -20,7 +20,7 @@ description: "Install, configure, initialize, and log in users with the CometCha ```bash -npm install @cometchat/chat-sdk-react-native @react-native-async-storage/async-storage +npm install @cometchat/chat-sdk-react-native @react-native-async-storage/async-storage@^2.1.2 ``` ```typescript @@ -72,43 +72,27 @@ npm install @cometchat/chat-sdk-react-native The React Native SDK requires `async-storage` as a peer dependency: ```bash -npm install @react-native-async-storage/async-storage +npm install @react-native-async-storage/async-storage@^2.1.2 ``` - -**Android only:** `@react-native-async-storage/async-storage` v3 ships a local Maven artifact. Add this to your `android/build.gradle` or the Android build will fail: - -```gradle -allprojects { - repositories { - google() - mavenCentral() - maven { - url = uri(project(":react-native-async-storage_async-storage").file("local_repo")) - } - } -} -``` - + +**No extra Gradle repository is needed.** Async-storage 2.x autolinks like any native module, and 3.1+ resolves its Android artifact from Maven Central, so the old `local_repo` Maven entry in `android/build.gradle` is not required. The `^2.1.2` range is also what the Calls SDK declares, so the same install works if you add calling later. + ### Voice & Video Calling (Optional) v2.4+ onwards, calling functionality lives in a separate package. Install it only if you need voice/video: ```bash -npm install @cometchat/calls-sdk-react-native +npm install @cometchat/calls-sdk-react-native \ + react-native-webrtc@^124.0.7 \ + react-native-background-timer@^2.4.1 \ + react-native-performance@^5.1.2 \ + react-native-url-polyfill@^2.0.0 \ + react-native-svg@^15.12.0 ``` -Required additional dependencies for calling: - -```json -{ - "@react-native-community/netinfo": "^11.3.1", - "react-native-background-timer": "^2.4.1", - "react-native-callstats": "^3.73.7", - "react-native-webrtc": "^1.106.1" -} -``` +These are the Calls SDK's peer dependencies at the ranges it declares (`@react-native-async-storage/async-storage` ^2.1.2 is the sixth, already installed above); unpinned latest majors fail with `ERESOLVE`. See [Calls SDK setup](/calls/react-native/setup) for the full calling setup. diff --git a/ui-kit/android/getting-started-jetpack.mdx b/ui-kit/android/getting-started-jetpack.mdx index 6bd7fafb3..a3eaaa3bc 100644 --- a/ui-kit/android/getting-started-jetpack.mdx +++ b/ui-kit/android/getting-started-jetpack.mdx @@ -98,7 +98,7 @@ import org.jetbrains.kotlin.gradle.dsl.JvmTarget plugins { alias(libs.plugins.android.application) - // AGP 8.x only — AGP 9 has built-in Kotlin: + // AGP 8.x: uncomment the next line. AGP 9+ has Kotlin built in — leave it commented. // alias(libs.plugins.kotlin.android) alias(libs.plugins.kotlin.compose) } diff --git a/ui-kit/android/getting-started-kotlin.mdx b/ui-kit/android/getting-started-kotlin.mdx index e1d44588a..8d3c40aff 100644 --- a/ui-kit/android/getting-started-kotlin.mdx +++ b/ui-kit/android/getting-started-kotlin.mdx @@ -99,7 +99,7 @@ import org.jetbrains.kotlin.gradle.dsl.JvmTarget plugins { alias(libs.plugins.android.application) - // AGP 8.x only — AGP 9 has built-in Kotlin: + // AGP 8.x: uncomment the next line. AGP 9+ has Kotlin built in — leave it commented. // alias(libs.plugins.kotlin.android) } diff --git a/ui-kit/angular/api-reference/formatter-config-service.mdx b/ui-kit/angular/api-reference/formatter-config-service.mdx index d31bd089e..2506ec418 100644 --- a/ui-kit/angular/api-reference/formatter-config-service.mdx +++ b/ui-kit/angular/api-reference/formatter-config-service.mdx @@ -97,9 +97,11 @@ Replaces the built-in default formatters with custom formatters. **Use Case:** When you want complete control over which formatters are used globally. **Example:** +Angular 20+ names the root component `App` in `src/app/app.ts`, as below. A project created with Angular 17–19 uses `AppComponent` in `src/app/app.component.ts` — use that file and class name instead. + ```typescript expandable -// In app initialization (main.ts or app.component.ts) -export class AppComponent implements OnInit { +// In app initialization (main.ts or app.ts) +export class App implements OnInit { private formatterConfig = inject(FormatterConfigService); ngOnInit() { @@ -129,7 +131,7 @@ Adds additional formatters to the built-in defaults without replacing them. **Example:** ```typescript expandable -export class AppComponent implements OnInit { +export class App implements OnInit { private formatterConfig = inject(FormatterConfigService); ngOnInit() { @@ -286,8 +288,8 @@ export class TextBubbleComponent implements OnInit { Replace the built-in formatters with your own custom set. ```typescript expandable -// In app initialization (main.ts or app.component.ts) -export class AppComponent implements OnInit { +// In app initialization (main.ts or app.ts) +export class App implements OnInit { private formatterConfig = inject(FormatterConfigService); ngOnInit() { @@ -311,7 +313,7 @@ export class AppComponent implements OnInit { Keep the built-in formatters and add custom ones. ```typescript expandable -export class AppComponent implements OnInit { +export class App implements OnInit { private formatterConfig = inject(FormatterConfigService); ngOnInit() { @@ -557,8 +559,8 @@ export class CometChatConversations implements OnInit { Set formatters globally in app initialization: ```typescript expandable -// ✅ GOOD: Configure once in AppComponent -export class AppComponent implements OnInit { +// ✅ GOOD: Configure once in the root component (`App`) +export class App implements OnInit { private formatterConfig = inject(FormatterConfigService); ngOnInit() { @@ -649,7 +651,7 @@ format(text: string): string { Enable/disable formatters based on feature flags: ```typescript expandable -export class AppComponent implements OnInit { +export class App implements OnInit { private formatterConfig = inject(FormatterConfigService); ngOnInit() { diff --git a/ui-kit/angular/api-reference/templates-service.mdx b/ui-kit/angular/api-reference/templates-service.mdx index 3774b91d4..1ced859bc 100644 --- a/ui-kit/angular/api-reference/templates-service.mdx +++ b/ui-kit/angular/api-reference/templates-service.mdx @@ -261,6 +261,8 @@ interface MessageListTemplates { ### Shared Loading + Component-Specific Override +Angular 20+ names the root component `App` in `src/app/app.ts`, as below. A project created with Angular 17–19 uses `AppComponent` in `src/app/app.component.ts` — use that file and class name instead. + ```typescript expandable @Component({ template: ` @@ -277,7 +279,7 @@ interface MessageListTemplates { ` }) -export class AppComponent implements AfterViewInit { +export class App implements AfterViewInit { @ViewChild('sharedLoading', { static: true }) sharedLoading!: TemplateRef; @ViewChild('usersEmpty', { static: true }) usersEmpty!: TemplateRef; private templatesService = inject(CometChatTemplatesService); diff --git a/ui-kit/angular/components/cometchat-conversations.mdx b/ui-kit/angular/components/cometchat-conversations.mdx index 3cc5c64bc..a17131283 100644 --- a/ui-kit/angular/components/cometchat-conversations.mdx +++ b/ui-kit/angular/components/cometchat-conversations.mdx @@ -1127,18 +1127,22 @@ The component supports both service-level and component-level configuration. Ser Configure the ConversationsService to set defaults for all component instances: +Angular 20+ names the root component `App` in `src/app/app.ts`, as below. A project created with Angular 17–19 uses `AppComponent` in `src/app/app.component.ts` — use that file and class name instead. + ```typescript expandable import { Component, OnInit } from '@angular/core'; +import { RouterOutlet } from '@angular/router'; import { CometChat } from '@cometchat/chat-sdk-javascript'; import { ConversationsService } from '@cometchat/chat-uikit-angular'; @Component({ selector: 'app-root', + imports: [RouterOutlet], template: ` ` }) -export class AppComponent implements OnInit { +export class App implements OnInit { constructor(private conversationsService: ConversationsService) {} ngOnInit(): void { diff --git a/ui-kit/angular/components/cometchat-message-list.mdx b/ui-kit/angular/components/cometchat-message-list.mdx index cff3fde67..4c713e11b 100644 --- a/ui-kit/angular/components/cometchat-message-list.mdx +++ b/ui-kit/angular/components/cometchat-message-list.mdx @@ -4708,6 +4708,8 @@ This section provides comprehensive, copy-paste ready code examples for common u This example demonstrates the complete setup process for integrating CometChatMessageList into your Angular application, including CometChat initialization, user login, and component configuration. +Angular 20+ names the root component `App` in `src/app/app.ts`, as below. A project created with Angular 17–19 uses `AppComponent` in `src/app/app.component.ts` — use that file and class name in `main.ts` instead. + @@ -4726,9 +4728,6 @@ This example demonstrates the complete setup process for integrating CometChatMe * - CometChat account with App ID and Auth Key * - @cometchat/chat-sdk-javascript installed * - @cometchat/chat-uikit-angular installed - * - * @see Requirements 10.1 - Basic setup example - * @see Requirements 10.8 - Copy-paste ready */ // ============================================================ @@ -4736,7 +4735,7 @@ This example demonstrates the complete setup process for integrating CometChatMe // ============================================================ import { bootstrapApplication } from '@angular/platform-browser'; -import { AppComponent } from './app/app.component'; +import { App } from './app/app'; import { appConfig } from './app/app.config'; import { CometChatUIKit, UIKitSettingsBuilder } from '@cometchat/chat-uikit-angular'; @@ -4758,10 +4757,11 @@ const UIKitSettings = new UIKitSettingsBuilder() .subscribePresenceForAllUsers() .build(); +// init() is typed Promise | undefined (it returns undefined only for null settings), hence ?. CometChatUIKit.init(UIKitSettings) - .then(() => { + ?.then(() => { console.log('✅ CometChat UIKit initialized successfully'); - bootstrapApplication(AppComponent, appConfig).catch(console.error); + bootstrapApplication(App, appConfig).catch(console.error); }) .catch((error) => { console.error('❌ CometChat UIKit initialization failed:', error); @@ -5075,7 +5075,7 @@ export class ChatComponent implements OnInit, OnDestroy { import { bootstrapApplication } from '@angular/platform-browser'; import { appConfig } from './app/app.config'; -import { AppComponent } from './app/app.component'; +import { App } from './app/app'; import { CometChatUIKit, UIKitSettingsBuilder } from '@cometchat/chat-uikit-angular'; const UIKitSettings = new UIKitSettingsBuilder() @@ -5085,9 +5085,10 @@ const UIKitSettings = new UIKitSettingsBuilder() .subscribePresenceForAllUsers() .build(); +// init() is typed Promise | undefined (it returns undefined only for null settings), hence ?. CometChatUIKit.init(UIKitSettings) - .then(() => { - bootstrapApplication(AppComponent, appConfig).catch(console.error); + ?.then(() => { + bootstrapApplication(App, appConfig).catch(console.error); }) .catch((error) => { console.error('CometChat UIKit initialization failed:', error); diff --git a/ui-kit/angular/customization/date-time-formatting.mdx b/ui-kit/angular/customization/date-time-formatting.mdx index 255c23ce8..a1448aa20 100644 --- a/ui-kit/angular/customization/date-time-formatting.mdx +++ b/ui-kit/angular/customization/date-time-formatting.mdx @@ -201,15 +201,21 @@ const tz = CometChatLocalize.getTimezone(); +Angular 20+ names the root component `App` in `src/app/app.ts`, as below. A project created with Angular 17–19 uses `AppComponent` in `src/app/app.component.ts` — use that file and class name instead. + ```typescript expandable import { Component, OnInit } from '@angular/core'; -import { CometChatLocalize } from '@cometchat/chat-uikit-angular'; +import { CometChat } from '@cometchat/chat-sdk-javascript'; +import { CometChatLocalize, CometChatMessageListComponent } from '@cometchat/chat-uikit-angular'; @Component({ selector: 'app-root', + imports: [CometChatMessageListComponent], template: `` }) -export class AppComponent implements OnInit { +export class App implements OnInit { + user?: CometChat.User; // set after login, e.g. from CometChat.getUser() + ngOnInit() { // All dates in the app use this format CometChatLocalize.setGlobalCalendarObject({ diff --git a/ui-kit/angular/customization/migration-guide.mdx b/ui-kit/angular/customization/migration-guide.mdx index 228b0fbe2..b70610c64 100644 --- a/ui-kit/angular/customization/migration-guide.mdx +++ b/ui-kit/angular/customization/migration-guide.mdx @@ -89,7 +89,7 @@ In **v5**, theming has been completely revamped. The older `CometChatThemeServic To ensure consistency and scalability, the new theming system adheres to the **BEM** (Block Element Modifier) methodology for class naming. The new theming approach enables developers to style components either globally or at a component-specific level with precision. For example, applying a unique style to a particular element within a component or globally is now straightforward. This move to CSS variables and thoughtful class naming marks a significant improvement in theming flexibility and simplicity. ```css styles.css -@import '@cometchat/chat-uikit-angular/styles/css-variables.css'; +@import '../node_modules/@cometchat/chat-uikit-angular/styles/css-variables.css'; .cometchat { --cometchat-primary-color: #f76808; @@ -106,26 +106,29 @@ To ensure consistency and scalability, the new theming system adheres to the **B } ``` -```typescript app.component.ts -import { Component, OnInit } from '@angular/core'; +Angular 20+ names the root component `App` in `src/app/app.ts`, as below. A project created with Angular 17–19 uses `AppComponent` in `src/app/app.component.ts` — use that file and class name instead. + +```typescript app.ts +import { Component, OnInit, signal } from '@angular/core'; @Component({ selector: 'app-root', standalone: true, template: ` -
+
` }) -export class AppComponent implements OnInit { - theme = 'light'; +export class App implements OnInit { + // A signal, so the template refreshes from the media-query listener on zoneless Angular 21 + theme = signal<'light' | 'dark'>('light'); ngOnInit(): void { const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)'); - this.theme = mediaQuery.matches ? 'dark' : 'light'; + this.theme.set(mediaQuery.matches ? 'dark' : 'light'); mediaQuery.addEventListener('change', (e) => { - this.theme = e.matches ? 'dark' : 'light'; + this.theme.set(e.matches ? 'dark' : 'light'); }); } } @@ -272,7 +275,7 @@ v5 also introduces a `translate` pipe for use directly in templates: - [ ] Remove `CUSTOM_ELEMENTS_SCHEMA` from NgModule schemas - [ ] Remove `import "@cometchat/uikit-elements"` side-effect imports - [ ] Convert components to standalone (recommended) or update module imports -- [ ] Import CSS variables in global styles: `@import '@cometchat/chat-uikit-angular/styles/css-variables.css'` +- [ ] Import CSS variables in global styles: `@import '../node_modules/@cometchat/chat-uikit-angular/styles/css-variables.css'` (the package's `exports` map doesn't expose `./styles`) - [ ] Remove `CometChatThemeService` injection — use CSS variables instead - [ ] Remove all `*Style` input properties (`[conversationsStyle]`, `[avatarStyle]`, etc.) - [ ] Replace style objects with CSS variable overrides diff --git a/ui-kit/angular/guides/custom-message-types.mdx b/ui-kit/angular/guides/custom-message-types.mdx index 7c839a226..aee824546 100644 --- a/ui-kit/angular/guides/custom-message-types.mdx +++ b/ui-kit/angular/guides/custom-message-types.mdx @@ -106,11 +106,13 @@ Use `ConversationSubtitleService` to control the last message text shown in the ### Register a Subtitle Formatter +Angular 20+ names the root component `App` in `src/app/app.ts`, as below. A project created with Angular 17–19 uses `AppComponent` in `src/app/app.component.ts` — use that file and class name instead. + ```typescript expandable import { inject } from '@angular/core'; import { ConversationSubtitleService } from '@cometchat/chat-uikit-angular'; -export class AppComponent { +export class App { private subtitleService = inject(ConversationSubtitleService); ngOnInit() { @@ -156,7 +158,7 @@ By default, the message list fetches these types and categories: import { inject } from '@angular/core'; import { MessageListService } from '@cometchat/chat-uikit-angular'; -export class AppComponent { +export class App { private messageListService = inject(MessageListService); ngOnInit() { diff --git a/ui-kit/angular/troubleshooting.mdx b/ui-kit/angular/troubleshooting.mdx index 42881a7cc..e825d84de 100644 --- a/ui-kit/angular/troubleshooting.mdx +++ b/ui-kit/angular/troubleshooting.mdx @@ -34,7 +34,7 @@ description: "Common failure modes and fixes for the CometChat Angular UIKit." | Symptom | Cause | Fix | | --- | --- | --- | -| CSS/theme not applied | Missing CSS import | Add `@import url("@cometchat/chat-uikit-angular/styles/css-variables.css");` in your global styles | +| CSS/theme not applied | Missing CSS import | Add `@import '../node_modules/@cometchat/chat-uikit-angular/styles/css-variables.css';` at the top of `src/styles.css` (the package `exports` map doesn't expose `./styles`, so the bare package path fails to resolve) | | Overrides not applying | Missing `.cometchat` scope in selector | Scope overrides under `.cometchat` | | Component-level override not working | Missing `.cometchat` parent in selector | Use `.cometchat .cometchat-conversations` not just `.cometchat-conversations` | | Dark mode unchanged | `data-theme` missing or mismatch | Set `data-theme="dark"` on the wrapper | @@ -791,7 +791,7 @@ const UIKitSettings = new UIKitSettingsBuilder() .subscribePresenceForAllUsers() .build(); -CometChatUIKit.init(UIKitSettings).then(() => { +CometChatUIKit.init(UIKitSettings)?.then(() => { CometChatUIKit.login('UID').then(user => { // Now real-time updates will work }); @@ -2929,23 +2929,25 @@ try { **Solutions**: 1. Ensure the `@cometchat/calls-sdk-javascript` package is installed -2. Initialize the Calls SDK before rendering the component: +2. Enable calling on the UI Kit settings. `CometChatUIKit.init()` then loads and initializes the Calls SDK for you and connects it to the logged-in user's session — don't call `CometChatUIKitCalls.init()` yourself: ```typescript expandable -import { CometChatUIKitCalls } from '@cometchat/chat-uikit-angular'; +import { CometChatUIKit, UIKitSettingsBuilder } from '@cometchat/chat-uikit-angular'; -// Initialize in your app bootstrap or auth flow -const callAppSetting = new CometChatUIKitCalls.CallAppSettingBuilder() - .setAppId(APP_ID) - .setRegion(REGION) +const UIKitSettings = new UIKitSettingsBuilder() + .setAppId('YOUR_APP_ID') + .setRegion('YOUR_REGION') + .setAuthKey('YOUR_AUTH_KEY') + .setCallingEnabled(true) .build(); -CometChatUIKitCalls.init(callAppSetting).then( - () => console.log('CometChatUIKitCalls initialized'), - (error) => console.error('CometChatUIKitCalls init failed:', error) -); +CometChatUIKit.init(UIKitSettings)?.then(() => { + // bootstrap the app, then log in +}); ``` +3. Check the console for `CometChatUIKitCalls initialization failed`. The Calls SDK reports invalid app settings in its resolved value (`{ success: false, error }`) instead of rejecting, and the UI Kit logs that error. + ##### Outgoing Call Overlay Not Showing **Problem**: After clicking the call button, no outgoing call screen appears. diff --git a/ui-kit/ios/guide-pin-save-message.mdx b/ui-kit/ios/guide-pin-save-message.mdx index 70bafd9f9..47ee25718 100644 --- a/ui-kit/ios/guide-pin-save-message.mdx +++ b/ui-kit/ios/guide-pin-save-message.mdx @@ -7,7 +7,7 @@ description: "Enable pin and save messages in the CometChat iOS UI Kit, wire the Let users mark messages for later: **pin** a message so everyone in the conversation sees it, or **save** one privately for yourself. -**Available from UI Kit v5.1.22.** This feature requires `CometChatUIKitSwift` v5.1.22 or later, which depends on `CometChatSDK` v4.1.9. +**Available from UI Kit v5.1.22.** This feature requires `CometChatUIKitSwift` v5.1.22 or later, which needs `CometChatSDK` 4.1.9 or later (Swift Package Manager resolves it with the UI Kit). ## Overview diff --git a/ui-kit/ios/guide-thread-subscription.mdx b/ui-kit/ios/guide-thread-subscription.mdx index 6741a7082..1944a26b7 100644 --- a/ui-kit/ios/guide-thread-subscription.mdx +++ b/ui-kit/ios/guide-thread-subscription.mdx @@ -5,7 +5,7 @@ description: "Let users subscribe to or unsubscribe from message threads in the --- -**Available from UI Kit v5.1.22.** This feature requires `CometChatUIKitSwift` v5.1.22 or later, which depends on `CometChatSDK` v4.1.9. +**Available from UI Kit v5.1.22.** This feature requires `CometChatUIKitSwift` v5.1.22 or later, which needs `CometChatSDK` 4.1.9 or later (Swift Package Manager resolves it with the UI Kit). ## Overview diff --git a/ui-kit/ios/pinned-messages.mdx b/ui-kit/ios/pinned-messages.mdx index 06494025c..226caae0c 100644 --- a/ui-kit/ios/pinned-messages.mdx +++ b/ui-kit/ios/pinned-messages.mdx @@ -6,7 +6,7 @@ description: "Display and manage CometChat iOS UI Kit pinned messages for a conv `CometChatPinnedMessages` is a full-screen list of the messages pinned in a single conversation, newest pin first. Pins are conversation-wide: everyone in the chat sees the same list, and moderators can unpin from any row. -**Available from UI Kit v5.1.22.** These components require `CometChatUIKitSwift` v5.1.22 or later, which depends on `CometChatSDK` v4.1.9. +**Available from UI Kit v5.1.22.** These components require `CometChatUIKitSwift` v5.1.22 or later, which needs `CometChatSDK` 4.1.9 or later (Swift Package Manager resolves it with the UI Kit). diff --git a/ui-kit/ios/saved-messages.mdx b/ui-kit/ios/saved-messages.mdx index abe4daf2e..c3fc774a6 100644 --- a/ui-kit/ios/saved-messages.mdx +++ b/ui-kit/ios/saved-messages.mdx @@ -6,7 +6,7 @@ description: "Display CometChat iOS UI Kit saved messages for the logged-in user `CometChatSavedMessages` is a full-screen list of the messages the logged-in user has saved, newest save first. Saves are **private to the user** and **span every conversation**, so each row is labelled with the chat it came from. -**Available from UI Kit v5.1.22.** These components require `CometChatUIKitSwift` v5.1.22 or later, which depends on `CometChatSDK` v4.1.9. +**Available from UI Kit v5.1.22.** These components require `CometChatUIKitSwift` v5.1.22 or later, which needs `CometChatSDK` 4.1.9 or later (Swift Package Manager resolves it with the UI Kit). diff --git a/ui-kit/react-native/call-features.mdx b/ui-kit/react-native/call-features.mdx index d439f7b88..e508eb001 100644 --- a/ui-kit/react-native/call-features.mdx +++ b/ui-kit/react-native/call-features.mdx @@ -22,8 +22,13 @@ description: "Integrate one-on-one and group audio/video calling into your React **Quick Reference for AI Agents & Developers** ```bash -# Install the Calls SDK (required for calling features) -npm install @cometchat/calls-sdk-react-native +# Install the Calls SDK with its peer dependencies at the ranges it declares +npm install @cometchat/calls-sdk-react-native \ + @react-native-async-storage/async-storage@^2.1.2 \ + react-native-webrtc@^124.0.7 \ + react-native-background-timer@^2.4.1 \ + react-native-performance@^5.1.2 \ + react-native-url-polyfill@^2.0.0 ``` ```tsx @@ -62,13 +67,20 @@ Once you've successfully integrated the UI Kit, the next step is to add the Come ```sh -npm install @cometchat/calls-sdk-react-native +npm install @cometchat/calls-sdk-react-native \ + @react-native-async-storage/async-storage@^2.1.2 \ + react-native-webrtc@^124.0.7 \ + react-native-background-timer@^2.4.1 \ + react-native-performance@^5.1.2 \ + react-native-url-polyfill@^2.0.0 ``` +These are the Calls SDK's peer dependencies (`react-native-svg`, the sixth, comes with the UI Kit setup). Keep the version ranges: the latest majors of these packages are outside the ranges the Calls SDK declares, so unpinned installs fail with `ERESOLVE`. See [Calling Integration](/ui-kit/react-native/calling-integration) for the full setup. + Once the dependency is added, the React Native UI Kit will automatically detect it and enable calling features. Your application will now support both audio and video calls, and the [CallButtons](/ui-kit/react-native/call-buttons) component will appear within the [MessageHeader](/ui-kit/react-native/message-header) component. @@ -155,7 +167,7 @@ android { -For iOS, open the `.xcworkspace` in Xcode and set `IPHONEOS_DEPLOYMENT_TARGET` to 12.0. +For iOS, open the `.xcworkspace` in Xcode and set `IPHONEOS_DEPLOYMENT_TARGET` to 15.1 (the minimum for React Native 0.76 and later). Alternatively, you can specify it in the `post_install` hook of the Podfile: @@ -165,9 +177,7 @@ Alternatively, you can specify it in the `post_install` hook of the Podfile: post_install do |installer| installer.pods_project.targets.each do |target| target.build_configurations.each do |build_configuration| - build_configuration.build_settings['IPHONEOS_DEPLOYMENT_TARGET'] = '12.0' - build_configuration.build_settings['EXCLUDED_ARCHS[sdk=iphonesimulator*]'] = 'arm64 i386' - build_configuration.build_settings['ENABLE_BITCODE'] = 'NO' + build_configuration.build_settings['IPHONEOS_DEPLOYMENT_TARGET'] = '15.1' end end end @@ -177,10 +187,6 @@ end - -**Apple Silicon (M1/M2/M3) users:** Excluding `arm64` from the simulator build prevents the app from running natively on Apple Silicon Macs. If you are developing on an Apple Silicon Mac, consider excluding only `i386` instead of `arm64 i386` to enable native simulator builds. - - ## Add the Call Listeners In addition to CallButtons, the Calls UI Kit offers fully functional UI components for handling Incoming, Outgoing, and Ongoing calls. To receive call events in your desired component or screen, you must register a call listener using the `addCallListener()` method. The `onIncomingCallReceived()` event is triggered whenever an incoming call is received. diff --git a/ui-kit/react-native/calling-integration.mdx b/ui-kit/react-native/calling-integration.mdx index 4a6d14d8f..d73c4b891 100644 --- a/ui-kit/react-native/calling-integration.mdx +++ b/ui-kit/react-native/calling-integration.mdx @@ -116,17 +116,11 @@ post_install do |installer| installer.pods_project.targets.each do |target| target.build_configurations.each do |build_configuration| build_configuration.build_settings['IPHONEOS_DEPLOYMENT_TARGET'] = '15.1' - build_configuration.build_settings['EXCLUDED_ARCHS[sdk=iphonesimulator*]'] = 'arm64 i386' - build_configuration.build_settings['ENABLE_BITCODE'] = 'NO' end end end ``` - -**Apple Silicon (M1/M2/M3) users:** Excluding `arm64` from the simulator build prevents the app from running natively on Apple Silicon Macs. If you are developing on an Apple Silicon Mac, consider excluding only `i386` instead of `arm64 i386` to enable native simulator builds. - - ## Set Up Call Listeners Register a call listener to receive call events in your component: diff --git a/ui-kit/react-native/expo-integration.mdx b/ui-kit/react-native/expo-integration.mdx index 94e4cf937..b7bb90f98 100644 --- a/ui-kit/react-native/expo-integration.mdx +++ b/ui-kit/react-native/expo-integration.mdx @@ -91,12 +91,11 @@ Install the SDK and peer dependencies: ```bash npm install @cometchat/chat-sdk-react-native -npm install @react-native-community/datetimepicker npm install @react-native-clipboard/clipboard npm install react-native-svg npm install react-native-video npm install dayjs -npm install @react-native-async-storage/async-storage +npm install @react-native-async-storage/async-storage@^2.1.2 npm install react-native-gesture-handler npm install react-native-localize npm install react-native-safe-area-context @@ -138,14 +137,13 @@ To enable voice/video calling: ```bash npm install @cometchat/calls-sdk-react-native \ - @react-native-async-storage/async-storage@^2.1.2 \ react-native-webrtc@^124.0.7 \ react-native-background-timer@^2.4.1 \ react-native-performance@^5.1.2 \ react-native-url-polyfill@^2.0.0 ``` -These are the Calls SDK's peer dependencies (`react-native-svg` ^15.12.0 is the sixth, already installed above). Install them in one command with the version ranges shown: the latest majors of `react-native-webrtc`, `react-native-performance`, `react-native-url-polyfill` and `@react-native-async-storage/async-storage` are outside the ranges the Calls SDK declares, so a bare `npm install ` fails with `ERESOLVE`. This moves `@react-native-async-storage/async-storage` from 3.x to 2.x, which the Calls SDK requires. Check the current ranges with `npm view @cometchat/calls-sdk-react-native peerDependencies`. +These are the Calls SDK's peer dependencies (`react-native-svg` ^15.12.0 and `@react-native-async-storage/async-storage` ^2.1.2 are the other two, already installed in Step 2). Install them in one command with the version ranges shown: the latest majors of `react-native-webrtc`, `react-native-performance` and `react-native-url-polyfill` are outside the ranges the Calls SDK declares, so a bare `npm install ` fails with `ERESOLVE`. Check the current ranges with `npm view @cometchat/calls-sdk-react-native peerDependencies`. --- diff --git a/ui-kit/react-native/llms-react-native-v5.mdx b/ui-kit/react-native/llms-react-native-v5.mdx index 15131026c..3db603cbe 100644 --- a/ui-kit/react-native/llms-react-native-v5.mdx +++ b/ui-kit/react-native/llms-react-native-v5.mdx @@ -42,9 +42,10 @@ This kit renders **native views**, not DOM. Code that works in the React UI Kit (+ `punycode` on Expo). Install and pod-install them before first render; a missing native module fails at mount, not at build. Take the exact list from the integration page — do not infer it. -- **No extra Gradle repository for async-storage.** Current `@react-native-async-storage/async-storage` - (3.1+) resolves its Android artifact from Maven Central; the old `local_repo` entry in - `android/build.gradle` is not needed. +- **Async-storage at `^2.1.2`, no extra Gradle repository.** Install + `@react-native-async-storage/async-storage@^2.1.2` in the base step (the range the Calls SDK + declares, so it works for chat and calling). 2.x autolinks and 3.1+ resolves from Maven + Central; the old `local_repo` entry in `android/build.gradle` is not needed. - **Calling pins its peers.** `@cometchat/calls-sdk-react-native` declares `@react-native-async-storage/async-storage@^2.1.2`, `react-native-webrtc@^124.0.7`, `react-native-background-timer@^2.4.1`, `react-native-performance@^5.1.2`, diff --git a/ui-kit/react-native/react-native-cli-integration.mdx b/ui-kit/react-native/react-native-cli-integration.mdx index 8a298c627..27546e80c 100644 --- a/ui-kit/react-native/react-native-cli-integration.mdx +++ b/ui-kit/react-native/react-native-cli-integration.mdx @@ -92,12 +92,11 @@ This installs the UI Kit. You also need to install the SDK and peer dependencies ```bash npm install @cometchat/chat-sdk-react-native -npm install @react-native-community/datetimepicker npm install @react-native-clipboard/clipboard npm install react-native-svg npm install react-native-video npm install dayjs -npm install @react-native-async-storage/async-storage +npm install @react-native-async-storage/async-storage@^2.1.2 npm install react-native-gesture-handler npm install react-native-localize npm install react-native-safe-area-context @@ -164,14 +163,13 @@ To enable voice/video calling: ```bash npm install @cometchat/calls-sdk-react-native \ - @react-native-async-storage/async-storage@^2.1.2 \ react-native-webrtc@^124.0.7 \ react-native-background-timer@^2.4.1 \ react-native-performance@^5.1.2 \ react-native-url-polyfill@^2.0.0 ``` -These are the Calls SDK's peer dependencies (`react-native-svg` ^15.12.0 is the sixth, already installed above). Install them in one command with the version ranges shown: the latest majors of `react-native-webrtc`, `react-native-performance`, `react-native-url-polyfill` and `@react-native-async-storage/async-storage` are outside the ranges the Calls SDK declares, so a bare `npm install ` fails with `ERESOLVE`. This moves `@react-native-async-storage/async-storage` from 3.x to 2.x, which the Calls SDK requires. Check the current ranges with `npm view @cometchat/calls-sdk-react-native peerDependencies`. +These are the Calls SDK's peer dependencies (`react-native-svg` ^15.12.0 and `@react-native-async-storage/async-storage` ^2.1.2 are the other two, already installed in Step 2). Install them in one command with the version ranges shown: the latest majors of `react-native-webrtc`, `react-native-performance` and `react-native-url-polyfill` are outside the ranges the Calls SDK declares, so a bare `npm install ` fails with `ERESOLVE`. Check the current ranges with `npm view @cometchat/calls-sdk-react-native peerDependencies`. Add iOS permissions to `ios/MyApp/Info.plist`: diff --git a/ui-kit/react-native/troubleshooting.mdx b/ui-kit/react-native/troubleshooting.mdx index 0ebb6d8c0..5317b0cb1 100644 --- a/ui-kit/react-native/troubleshooting.mdx +++ b/ui-kit/react-native/troubleshooting.mdx @@ -93,7 +93,7 @@ description: "Troubleshoot CometChat React Native UI Kit setup, initialization, | Call accepted but no audio/video | Missing call session setup | After `acceptCall()`, generate a token and render the call component | | `onIncomingCallReceived` not firing | Call listener not registered or registered too late | Register `CometChat.addCallListener()` after login completes | | Call fails on Android | Missing permissions or wrong SDK version | Ensure `minSdkVersion` is 24+, `compileSdkVersion` is 33+, and permissions are added | -| Call fails on iOS | Missing permissions or wrong deployment target | Set `IPHONEOS_DEPLOYMENT_TARGET` to 12.0+ and add camera/microphone permissions to Info.plist | +| Call fails on iOS | Missing permissions or wrong deployment target | Set `IPHONEOS_DEPLOYMENT_TARGET` to 15.1+ (React Native 0.76+ requires it) and add camera/microphone permissions to Info.plist | | WebRTC errors | Missing peer dependencies | Install the Calls SDK peers at their declared ranges — see [Calling Integration](/ui-kit/react-native/calling-integration#add-the-calls-sdk) | --- @@ -161,5 +161,4 @@ description: "Troubleshoot CometChat React Native UI Kit setup, initialization, | `react-native-video` not working | Native module not linked | For React Native CLI, run `cd ios && pod install`. For Expo, use development builds | | `react-native-svg` icons not rendering | Package not installed or linked | Install `react-native-svg` and run `pod install` for iOS | | `@react-native-clipboard/clipboard` errors | Package not installed | Install `@react-native-clipboard/clipboard` | -| `@react-native-community/datetimepicker` errors | Package not installed | Install `@react-native-community/datetimepicker` | | `dayjs` date formatting issues | Package not installed | Install `dayjs` | diff --git a/ui-kit/react/calling-integration.mdx b/ui-kit/react/calling-integration.mdx index 2d332380a..cc0e1377b 100644 --- a/ui-kit/react/calling-integration.mdx +++ b/ui-kit/react/calling-integration.mdx @@ -178,6 +178,8 @@ No additional configuration is needed to switch between audio-only and video cal `CometChatIncomingCall` must be rendered in your app — it is NOT auto-rendered by the UI Kit. Place it at the root level of your authenticated layout so it can display the incoming call overlay from anywhere: ```tsx +import { useState } from "react"; +import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatProvider, CometChatIncomingCall, diff --git a/ui-kit/react/components/call-buttons.mdx b/ui-kit/react/components/call-buttons.mdx index 938ccca0f..2d8ea8280 100644 --- a/ui-kit/react/components/call-buttons.mdx +++ b/ui-kit/react/components/call-buttons.mdx @@ -67,9 +67,10 @@ export default CallButtonsDemo; ## Minimal Render ```tsx +import type { User } from "@cometchat/chat-sdk-javascript"; import { CometChatCallButtons } from "@cometchat/chat-uikit-react"; -function CallButtonsMinimal({ chatUser }: { chatUser: CometChat.User }) { +function CallButtonsMinimal({ chatUser }: { chatUser: User }) { return ; } ``` @@ -141,9 +142,10 @@ function CallButtonsVideoOverride() { Fires after an ongoing call session ends and the component has reset its internal state. ```tsx +import type { User } from "@cometchat/chat-sdk-javascript"; import { CometChatCallButtons } from "@cometchat/chat-uikit-react"; -function CallButtonsWithEndHandler({ chatUser }: { chatUser: CometChat.User }) { +function CallButtonsWithEndHandler({ chatUser }: { chatUser: User }) { return ( - new CometChatUIKitCalls.CallSettingsBuilder() - .enableDefaultLayout(true) - .setIsAudioOnlyCall(isAudioOnlyCall) - } - /> - ); + return ; } ``` + +The object replaces the built-in defaults, including the `sessionType` the component would pick for a voice call (`"VOICE"`). Set `sessionType` yourself if the same settings must also serve voice calls, or hide the button that doesn't match. + + --- ## Customization @@ -237,9 +239,10 @@ function CallButtonsCustomSettings({ chatUser }: { chatUser: User }) { Use `voiceCallButtonView` and `videoCallButtonView` to replace the default buttons while keeping the component's call lifecycle behavior intact. ```tsx +import type { User } from "@cometchat/chat-sdk-javascript"; import { CometChatCallButtons } from "@cometchat/chat-uikit-react"; -function CallButtonsCustomViews({ chatUser }: { chatUser: CometChat.User }) { +function CallButtonsCustomViews({ chatUser }: { chatUser: User }) { return ( ; } ``` @@ -342,7 +346,7 @@ The component uses CSS custom properties (design tokens) provided by the UI Kit. | Override call initiation | Component props | `onVoiceCallClick` / `onVideoCallClick` | `onVoiceCallClick={(entity) => customCall(entity)}` | | Hide a call button | Component props | `hideVoiceCallButton` / `hideVideoCallButton` | `hideVideoCallButton={true}` | | Replace a button view | Component props | `voiceCallButtonView` / `videoCallButtonView` | `voiceCallButtonView={}` | -| Customize call settings | Component props | `callSettingsBuilder` | `callSettingsBuilder={(audio) => builder}` | +| Customize call settings | Component props | `callSettingsBuilder` | `callSettingsBuilder={{ layout: "SIDEBAR" }}` | | Change colors, fonts, spacing | Global CSS | Target `.cometchat-call-buttons` class | `.cometchat-call-buttons__button-icon { background: red; }` | --- @@ -353,11 +357,11 @@ All props are optional. Sorted alphabetically. ### callSettingsBuilder -Builder function for customizing the ongoing call settings, built via `callSettings`. See [Calling Integration](/ui-kit/react/calling-integration) for call-settings setup. +Session settings for the ongoing call this component starts, passed unchanged to `CometChatOngoingCall` as `callSettings` (it replaces the built-in defaults). Falls back to `GlobalConfig.callSettingsBuilder`. See [Calling Integration](/ui-kit/react/calling-integration) for call-settings setup. | | | | --- | --- | -| Type | `(isAudioOnlyCall: boolean, user?: CometChat.User, group?: CometChat.Group) => CallSettingsBuilder` | +| Type | `SessionSettings` (typed `any` in the 7.2.4 declarations) | | Default | `undefined` | --- diff --git a/ui-kit/react/components/conversations.mdx b/ui-kit/react/components/conversations.mdx index 6feb489c8..877ae739a 100644 --- a/ui-kit/react/components/conversations.mdx +++ b/ui-kit/react/components/conversations.mdx @@ -800,7 +800,9 @@ function CustomHeaderConversations() { {getLocalizedString("chats")}
{ /* handle click */ }}> - + + New chat +