- @if (user) { + @if (user()) { } @@ -3292,11 +3302,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); } @@ -4698,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. + @@ -4716,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 */ // ============================================================ @@ -4726,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'; @@ -4748,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); @@ -5065,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() @@ -5075,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); @@ -5179,7 +5190,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'; @@ -5188,9 +5199,9 @@ import { CometChatMessageListComponent } from '@cometchat/chat-uikit-angular'; standalone: true, imports: [CometChatMessageListComponent], template: ` - @if (user) { + @if (user()) { } @@ -5203,11 +5214,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 { @@ -5237,7 +5248,7 @@ Sign up at [cometchat.com](https://www.cometchat.com) and create a new app to ge ```bash -npm install @cometchat/chat-sdk-javascript @cometchat/chat-uikit-angular +npm install @cometchat/chat-uikit-angular @cometchat/chat-sdk-javascript @cometchat/cards-angular dompurify ``` @@ -5277,7 +5288,6 @@ Here are the most commonly used configuration options for the message list: [scrollToBottomOnNewMessages]="true" [disableSoundForMessages]="false" - [messageAlignment]="'standard'" [hideReceipts]="false" diff --git a/ui-kit/angular/components/cometchat-reactions.mdx b/ui-kit/angular/components/cometchat-reactions.mdx index e67378c12..a7e0c687a 100644 --- a/ui-kit/angular/components/cometchat-reactions.mdx +++ b/ui-kit/angular/components/cometchat-reactions.mdx @@ -58,7 +58,7 @@ The Reactions component provides interactive emoji reaction display: ```typescript expandable import { Component } from '@angular/core'; import { CometChat } from '@cometchat/chat-sdk-javascript'; -import { CometChatReactionsComponent } from '@cometchat/chat-uikit-angular'; +import { CometChatReactionsComponent, MessageBubbleAlignment } from '@cometchat/chat-uikit-angular'; @Component({ selector: 'app-reactions-demo', @@ -67,13 +67,14 @@ import { CometChatReactionsComponent } from '@cometchat/chat-uikit-angular'; template: ` ` }) export class ReactionsDemoComponent { message!: CometChat.BaseMessage; + alignment = MessageBubbleAlignment.left; // a numeric enum, not the string 'left' onReactionClick(event: { reaction: CometChat.ReactionCount; message: CometChat.BaseMessage }): void { const emoji = event.reaction.getReaction(); diff --git a/ui-kit/angular/customization/date-time-formatting.mdx b/ui-kit/angular/customization/date-time-formatting.mdx index 255c23ce8..afd1b72b0 100644 --- a/ui-kit/angular/customization/date-time-formatting.mdx +++ b/ui-kit/angular/customization/date-time-formatting.mdx @@ -201,15 +201,28 @@ 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 { Component, OnInit, signal } from '@angular/core'; +import { CometChat } from '@cometchat/chat-sdk-javascript'; +import { CometChatLocalize, CometChatMessageListComponent } from '@cometchat/chat-uikit-angular'; @Component({ selector: 'app-root', - template: `` + standalone: true, + imports: [CometChatMessageListComponent], + template: ` + @if (user(); as u) { + + } + ` }) -export class AppComponent implements OnInit { +export class App implements OnInit { + // A signal, so a value set later (after login, e.g. from CometChat.getUser()) + // re-renders on zoneless Angular too. + user = signal(undefined); + ngOnInit() { // All dates in the app use this format CometChatLocalize.setGlobalCalendarObject({ @@ -224,6 +237,12 @@ export class AppComponent implements OnInit { hours: '%d hrs ago' } }); + + // Load the user to chat with. Runs after CometChatUIKit.init() and login() have resolved. + CometChat.getUser('cometchat-uid-2').then( + (u) => this.user.set(u), + (error) => console.error('getUser failed', error) + ); } } ``` @@ -231,14 +250,23 @@ export class AppComponent implements OnInit { ```typescript expandable -import { Component } from '@angular/core'; -import { CalendarObject } from '@cometchat/chat-uikit-angular'; +import { Component, OnInit, signal } from '@angular/core'; +import { CometChat } from '@cometchat/chat-sdk-javascript'; +import { + CalendarObject, + CometChatDateComponent, + CometChatMessageListComponent, +} from '@cometchat/chat-uikit-angular'; @Component({ selector: 'app-chat', + standalone: true, + imports: [CometChatMessageListComponent, CometChatDateComponent], template: ` - - + @if (user(); as u) { + + + } ` }) -export class ChatComponent { +export class ChatComponent implements OnInit { + user = signal(undefined); lastSeen = 1640000000; compactFormat: CalendarObject = { @@ -256,6 +285,14 @@ export class ChatComponent { lastWeek: 'ddd', otherDays: 'DD/MM' }; + + ngOnInit() { + // Runs after CometChatUIKit.init() and login() have resolved. + CometChat.getUser('cometchat-uid-2').then( + (u) => this.user.set(u), + (error) => console.error('getUser failed', error) + ); + } } ``` diff --git a/ui-kit/angular/customization/migration-guide.mdx b/ui-kit/angular/customization/migration-guide.mdx index 228b0fbe2..9dd66af92 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'); }); } } @@ -267,12 +270,12 @@ v5 also introduces a `translate` pipe for use directly in templates: ## Quick Migration Checklist -- [ ] Update package: `npm install @cometchat/chat-uikit-angular` +- [ ] Update package: `npm install @cometchat/chat-uikit-angular @cometchat/chat-sdk-javascript @cometchat/cards-angular dompurify` (the last two are peer dependencies of v5) - [ ] Remove peer dependencies: `npm uninstall @cometchat/uikit-elements @cometchat/uikit-resources @cometchat/uikit-shared` - [ ] 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/block-unblock-user.mdx b/ui-kit/angular/guides/block-unblock-user.mdx index c4f5b43d0..43d6c23e6 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); } }) ); @@ -194,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 | diff --git a/ui-kit/angular/guides/custom-message-types.mdx b/ui-kit/angular/guides/custom-message-types.mdx index c4a2b2c9e..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() { @@ -218,7 +220,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 +245,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 +269,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 dcf024e49..dc9fc019d 100644 --- a/ui-kit/angular/integration.mdx +++ b/ui-kit/angular/integration.mdx @@ -8,13 +8,14 @@ description: "Add CometChat to an Angular app in 6 steps: create project, instal | Field | Value | | --- | --- | -| Package | `@cometchat/chat-uikit-angular` | -| Peer deps | `@cometchat/chat-sdk-javascript`, `rxjs` ^7.8.1 | +| Package | `@cometchat/chat-uikit-angular` v5 | +| Angular | 17–21 (`@angular/core` / `@angular/common` `>=17.0.0 <22.0.0`). Angular 22 is not supported yet — scaffold with `npx @angular/cli@21 new` | +| Peer deps | `@cometchat/chat-sdk-javascript` ^4.2.0, `@cometchat/cards-angular` ^1.0.0, `dompurify` ^3.0.0; optional `@cometchat/calls-sdk-javascript` ^5.0.3 (calling only) | | Init | `CometChatUIKit.init(UIKitSettings)` — must resolve before `login()` | | Login | `CometChatUIKit.login("UID")` — must resolve before rendering components | | Order | `init()` → `login()` → render. Breaking this order = blank screen | | Auth Key | Dev/testing only. Use Auth Token in production | -| CSS | Add `css-variables.css` to `angular.json` styles array or import in global `styles.css` via `@cometchat/chat-uikit-angular/styles/css-variables.css` | +| CSS | Add `node_modules/@cometchat/chat-uikit-angular/styles/css-variables.css` to the `angular.json` styles array, or `@import '../node_modules/@cometchat/chat-uikit-angular/styles/css-variables.css';` in `src/styles.css` (the package `exports` map has no `./styles` entry, so a bare package specifier does not resolve) | | Calling | Optional. Install `@cometchat/calls-sdk-javascript` and call `.setCallingEnabled(true)` on the builder to enable | @@ -34,8 +35,8 @@ You need three things from the [CometChat Dashboard](https://app.cometchat.com/) | Region | Dashboard → Your App → Credentials (e.g. `us`, `eu`, `in`) | You also need: -- Node.js (v18+) and npm installed -- Angular CLI (`npm install -g @angular/cli`) +- Node.js 20.19+, 22.12+ or 24+ (what Angular 21 requires) and npm installed +- Angular 17–21. The UI Kit declares `@angular/core` `>=17.0.0 <22.0.0`, so Angular 22 — what an unversioned `ng new` / `@angular/cli@latest` now creates — fails `npm install` with `ERESOLVE` Auth Key is for development only. In production, generate Auth Tokens server-side via the [REST API](/rest-api/chat-apis) and use `loginWithAuthToken()`. Never ship Auth Keys in client code. @@ -46,11 +47,11 @@ Auth Key is for development only. In production, generate Auth Tokens server-sid ## Step 1 — Create an Angular Project ```bash -ng new my-app --style css --ssr false +npx @angular/cli@21 new my-app --style css --ssr false cd my-app ``` -This creates a new Angular project with CSS styling and no server-side rendering. CometChat UIKit components require a browser environment. +This creates a new Angular 21 project with CSS styling and no server-side rendering. CometChat UIKit components require a browser environment. Pin the CLI major (`@21`) — the latest CLI scaffolds Angular 22, which the UI Kit does not support yet. For an existing app, check the major with `npx ng version`. --- @@ -59,23 +60,17 @@ This creates a new Angular project with CSS styling and no server-side rendering ```bash -npm install @cometchat/chat-uikit-angular @cometchat/chat-sdk-javascript +npm install @cometchat/chat-uikit-angular @cometchat/chat-sdk-javascript @cometchat/cards-angular dompurify ``` ```bash -yarn add @cometchat/chat-uikit-angular @cometchat/chat-sdk-javascript +yarn add @cometchat/chat-uikit-angular @cometchat/chat-sdk-javascript @cometchat/cards-angular dompurify ``` - -`@cometchat/chat-sdk-javascript` and `dompurify` are required peer dependencies. npm may install them automatically alongside the UIKit, but this is not guaranteed — it depends on your npm version and whether there are version conflicts. If you see errors related to missing `CometChat` or `DOMPurify` at runtime, install them explicitly: - -```bash -npm install @cometchat/chat-sdk-javascript dompurify -``` - +`@cometchat/chat-sdk-javascript`, `@cometchat/cards-angular` and `dompurify` are required peer dependencies of the UI Kit. Install them explicitly as shown — yarn and older npm versions don't add peer dependencies for you. Don't use `--legacy-peer-deps`: an `ERESOLVE` here almost always means the Angular major is outside 17–21. If you want voice/video calling, also install: @@ -89,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, @@ -102,7 +99,7 @@ export const environment = { ```ts title="src/main.ts" expandable 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"; import { environment } from "./environments/environment"; @@ -115,10 +112,11 @@ const UIKitSettings = new UIKitSettingsBuilder() // .setCallingEnabled(true) // uncomment to enable voice/video calling .build(); +// init() is typed Promise | undefined (it returns undefined only for null settings), hence ?. CometChatUIKit.init(UIKitSettings) - .then(() => { + ?.then(() => { console.log("CometChat UI Kit initialized successfully."); - bootstrapApplication(AppComponent, appConfig).catch((err) => + bootstrapApplication(App, appConfig).catch((err) => console.error(err) ); }) @@ -140,10 +138,14 @@ 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. 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. + -```ts title="src/app/app.component.ts" expandable -import { Component, OnInit } from "@angular/core"; +```ts title="src/app/app.ts" expandable +import { Component, OnInit, signal } from "@angular/core"; import { CometChatUIKit } from "@cometchat/chat-uikit-angular"; import { CometChat } from "@cometchat/chat-sdk-javascript"; @@ -152,7 +154,7 @@ import { CometChat } from "@cometchat/chat-sdk-javascript"; standalone: true, imports: [], template: ` - @if (isLoggedIn) { + @if (isLoggedIn()) {
@@ -161,8 +163,10 @@ import { CometChat } from "@cometchat/chat-sdk-javascript"; } `, }) -export class AppComponent implements OnInit { - isLoggedIn = false; +export class App implements OnInit { + // 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 +176,12 @@ export class AppComponent 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 +191,8 @@ export class AppComponent 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–20. For production, use `loginWithAuthToken()` instead of Auth Key. Generate tokens server-side via the REST API. @@ -226,15 +231,11 @@ Add the CSS file to the `styles` array in your `angular.json`: Import at the top of your global `styles.css`: ```css title="src/styles.css" -@import '@cometchat/chat-uikit-angular/styles/css-variables.css'; +@import '../node_modules/@cometchat/chat-uikit-angular/styles/css-variables.css'; ``` -If the `@import` doesn't resolve, use the full `node_modules` path instead: - -```css title="src/styles.css" -@import 'node_modules/@cometchat/chat-uikit-angular/styles/css-variables.css'; -``` +Use the relative `node_modules` path. The package's `exports` map doesn't expose `./styles`, so `@import '@cometchat/chat-uikit-angular/styles/css-variables.css'` fails with `Could not resolve`. @@ -243,7 +244,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 { @@ -253,6 +254,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", @@ -267,10 +272,45 @@ 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 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 +{ + "projects": { + "my-app": { + "architect": { + "build": { + "options": { + "allowedCommonJsDependencies": ["@cometchat/chat-sdk-javascript"] + }, + "configurations": { + "production": { + "budgets": [ + { + "type": "initial", + "maximumWarning": "5MB", + "maximumError": "8MB" + } + ] + } + } + } + } + } + } +} +``` + +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. + --- ## Step 6 — Choose a Chat Experience diff --git a/ui-kit/angular/overview.mdx b/ui-kit/angular/overview.mdx index ee0f4ebb8..aaee7d875 100644 --- a/ui-kit/angular/overview.mdx +++ b/ui-kit/angular/overview.mdx @@ -11,7 +11,7 @@ description: "Use CometChat Angular UI Kit to add standalone chat components, vo | Package | `@cometchat/chat-uikit-angular` v5.x | | Peer deps | `@cometchat/chat-sdk-javascript`, `@cometchat/cards-angular`, `dompurify` | | Calling | Optional — `@cometchat/calls-sdk-javascript` | -| Angular | v18, v19, v20, v21, v22 (v22 requires Node.js 24+) | +| Angular | v17, v18, v19, v20, v21 (peer range `>=17 <22`; Angular 22 is not supported yet) | | Localization | 19 languages built-in | | Source | [GitHub](https://github.com/cometchat/cometchat-uikit-angular/tree/v5) | | AI Skills | `npx @cometchat/skills add` — [GitHub](https://github.com/cometchat/cometchat-skills) | diff --git a/ui-kit/angular/quickstart.mdx b/ui-kit/angular/quickstart.mdx index cf076780f..5672e5e18 100644 --- a/ui-kit/angular/quickstart.mdx +++ b/ui-kit/angular/quickstart.mdx @@ -6,27 +6,21 @@ Follow these steps to integrate CometChat UIKit into your Angular application. ## Prerequisites -- Node.js 18 or higher -- Angular 18, 19, 20, 21, or 22 +- Node.js 20.19+, 22.12+ or 24+ (what Angular 21 requires) +- Angular 17, 18, 19, 20 or 21 — the UI Kit declares `@angular/core` `>=17.0.0 <22.0.0` - A CometChat account with App ID and Auth Key -Angular 22 requires a minimum Node.js version of 24. +Angular 22 is not supported yet: installing the UI Kit into an Angular 22 app fails with `ERESOLVE`. The latest Angular CLI scaffolds Angular 22, so create new apps with a pinned CLI: `npx @angular/cli@21 new my-app --style css --ssr false`. ## Step 1: Install the Package ```bash -npm install @cometchat/chat-uikit-angular +npm install @cometchat/chat-uikit-angular @cometchat/chat-sdk-javascript @cometchat/cards-angular dompurify ``` - -`@cometchat/chat-sdk-javascript` and `dompurify` are required peer dependencies. npm may install them automatically alongside the UIKit, but this is not guaranteed — it depends on your npm version and whether there are version conflicts. If you see errors related to missing `CometChat` or `DOMPurify` at runtime, install them explicitly: - -```bash -npm install @cometchat/chat-sdk-javascript dompurify -``` - +`@cometchat/chat-sdk-javascript`, `@cometchat/cards-angular` and `dompurify` are required peer dependencies — install them explicitly as shown. ## Step 2: Import Styles @@ -54,20 +48,16 @@ Add the CSS variables to your `angular.json`: Or import in your global `styles.css`: ```css -@import '@cometchat/chat-uikit-angular/styles/css-variables.css'; +@import '../node_modules/@cometchat/chat-uikit-angular/styles/css-variables.css'; ``` -If the `@import` doesn't resolve, use the full `node_modules` path instead: - -```css -@import 'node_modules/@cometchat/chat-uikit-angular/styles/css-variables.css'; -``` +Use the relative `node_modules` path. The package's `exports` map doesn't expose `./styles`, so `@import '@cometchat/chat-uikit-angular/styles/css-variables.css'` fails with `Could not resolve`. ## 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 { @@ -77,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", @@ -91,10 +85,16 @@ 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. + +`ng build` fails with `bundle initial exceeded maximum budget` under the CLI's default 1 MB production budget. Raise the `initial` budget in `angular.json` — see [Raise the Production Bundle Budget](/ui-kit/angular/integration#raise-the-production-bundle-budget). + + ## Step 4: Initialize CometChat Initialize CometChat in `main.ts` before bootstrapping the Angular app, using `UIKitSettingsBuilder`: @@ -110,7 +110,7 @@ const uiKitSettings = new UIKitSettingsBuilder() .build(); CometChatUIKit.init(uiKitSettings) - .then(() => { + ?.then(() => { console.log('CometChat UIKit initialized successfully'); }) .catch((error) => { diff --git a/ui-kit/angular/troubleshooting.mdx b/ui-kit/angular/troubleshooting.mdx index df0fa8f5a..3f4f03e02 100644 --- a/ui-kit/angular/troubleshooting.mdx +++ b/ui-kit/angular/troubleshooting.mdx @@ -22,6 +22,8 @@ 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 | | 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 | @@ -32,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 | @@ -160,14 +162,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); } ``` @@ -766,13 +768,30 @@ CometChatUIKit.getLoggedinUser().then( Ensure you're passing a valid `CometChat.User` or `CometChat.Group` object: ```typescript -// ✅ Correct - fetch user from SDK -CometChat.getUser('user-id').then(user => { - this.selectedUser = user; -}); +import { Component, OnInit, signal } from '@angular/core'; +import { CometChatMessageHeaderComponent } from '@cometchat/chat-uikit-angular'; +import { CometChat } from '@cometchat/chat-sdk-javascript'; -// ❌ Incorrect - plain object won't work -this.selectedUser = { uid: 'user-id', name: 'John' }; +@Component({ + selector: 'app-chat-header', + standalone: true, + imports: [CometChatMessageHeaderComponent], + template: `` +}) +export class ChatHeaderComponent implements OnInit { + // A signal so the view updates after the promise resolves (required on zoneless Angular 21) + selectedUser = signal(undefined); + + ngOnInit(): void { + // ✅ Correct - fetch the user from the SDK + CometChat.getUser('user-id').then(user => { + this.selectedUser.set(user); + }); + + // ❌ Incorrect - a plain object is not a CometChat.User and won't work: + // this.selectedUser.set({ uid: 'user-id', name: 'John' } as any); + } +} ``` **2. Status not updating in real-time** @@ -789,7 +808,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 }); @@ -862,16 +881,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 +915,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); @@ -1841,16 +1862,24 @@ function getVersionInfo(): void { Pass a `CometChat.User` object to the `user` input: ```typescript expandable +import { Component, OnInit, signal } from '@angular/core'; +import { CometChatMessageListComponent } from '@cometchat/chat-uikit-angular'; +import { CometChat } from '@cometchat/chat-sdk-javascript'; + @Component({ + selector: 'app-chat', + standalone: true, + imports: [CometChatMessageListComponent], template: ` - + ` }) export class ChatComponent implements OnInit { - chatUser?: CometChat.User; + // A signal 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')); } } ``` @@ -1860,16 +1889,24 @@ export class ChatComponent implements OnInit { Pass a `CometChat.Group` object to the `group` input: ```typescript expandable +import { Component, OnInit, signal } from '@angular/core'; +import { CometChatMessageListComponent } from '@cometchat/chat-uikit-angular'; +import { CometChat } from '@cometchat/chat-sdk-javascript'; + @Component({ + selector: 'app-group-chat', + standalone: true, + imports: [CometChatMessageListComponent], template: ` - + ` }) export class GroupChatComponent implements OnInit { - chatGroup?: CometChat.Group; + // A signal 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')); } } ``` @@ -2152,13 +2189,30 @@ If your question isn't answered here, check the [CometChat documentation](https: Ensure you have a valid user or group set: ```typescript -// ✅ Correct - fetch user from SDK -CometChat.getUser('user-id').then(user => { - this.selectedUser = user; -}); +import { Component, OnInit, signal } from '@angular/core'; +import { CometChatMessageComposerComponent } from '@cometchat/chat-uikit-angular'; +import { CometChat } from '@cometchat/chat-sdk-javascript'; -// ❌ Incorrect - plain object won't work -this.selectedUser = { uid: 'user-id', name: 'John' }; +@Component({ + selector: 'app-chat-composer', + standalone: true, + imports: [CometChatMessageComposerComponent], + template: `` +}) +export class ChatComposerComponent implements OnInit { + // A signal so the view updates after the promise resolves (required on zoneless Angular 21) + selectedUser = signal(undefined); + + ngOnInit(): void { + // ✅ Correct - fetch the user from the SDK + CometChat.getUser('user-id').then(user => { + this.selectedUser.set(user); + }); + + // ❌ Incorrect - a plain object is not a CometChat.User and won't work: + // this.selectedUser.set({ uid: 'user-id', name: 'John' } as any); + } +} ``` **2. Typing indicators not working** @@ -2923,23 +2977,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/ai-assistant-chat-history.mdx b/ui-kit/ios/ai-assistant-chat-history.mdx index 66c7baac0..980e1d9a3 100644 --- a/ui-kit/ios/ai-assistant-chat-history.mdx +++ b/ui-kit/ios/ai-assistant-chat-history.mdx @@ -56,11 +56,7 @@ The `CometChatAIAssistanceChatHistory` component displays past conversations bet -Add to your Podfile: -```ruby -pod 'CometChatUIKitSwift', '5.1.9' -``` -Run `pod install` +In Xcode, go to **File → Add Package Dependencies**, enter `https://github.com/cometchat/cometchat-uikit-ios`, select **Up to Next Major Version** from `5.2.3`, and add the `CometChatUIKitSwift` product. See [Getting Started](/ui-kit/ios/getting-started). diff --git a/ui-kit/ios/call-features.mdx b/ui-kit/ios/call-features.mdx index 890844cda..3dde67856 100644 --- a/ui-kit/ios/call-features.mdx +++ b/ui-kit/ios/call-features.mdx @@ -17,7 +17,7 @@ description: "Complete guide to adding voice and video calling to iOS apps with {"name": "ongoingCall", "description": "Active call interface with controls", "component": "CometChatOngoingCall", "enabledByDefault": true} ], "sdkDependencies": { - "required": "CometChatCallsSDK 4.2.2", + "required": "CometChatCallsSDK 5.0.4 (SPM, Up to Next Major)", "permissions": ["NSCameraUsageDescription", "NSMicrophoneUsageDescription"] }, "relatedComponents": ["CometChatCallButtons", "CometChatCallLogs", "CometChatIncomingCall", "CometChatOutgoingCall", "CometChatOngoingCall"] @@ -39,21 +39,14 @@ Add one-on-one and group audio/video calling to your iOS app. Once integrated, c -Add to your `Podfile`: -```ruby -platform :ios, '13.0' -use_frameworks! - -target 'YourApp' do - pod 'CometChatUIKitSwift', '5.1.9' - pod 'CometChatCallsSDK', '4.2.2' -end -``` +In Xcode, go to **File → Add Package Dependencies** and add both packages with **Up to Next Major Version**: -Run: -```bash -pod install -``` +| Package URL | Version | Product | +| --- | --- | --- | +| `https://github.com/cometchat/cometchat-uikit-ios` | `5.2.3` | `CometChatUIKitSwift` | +| `https://github.com/cometchat/calls-sdk-ios` | `5.0.4` | `CometChatCallsSDK` | + +The UI Kit brings in `CometChatSDK` itself, and requires iOS 15.1+. CocoaPods stops at UI Kit 5.1.18, so use Swift Package Manager for current releases. diff --git a/ui-kit/ios/calling-integration.mdx b/ui-kit/ios/calling-integration.mdx index 6c25e0830..8cfcd6ac3 100644 --- a/ui-kit/ios/calling-integration.mdx +++ b/ui-kit/ios/calling-integration.mdx @@ -1,6 +1,6 @@ --- title: "Calling Integration" -description: "Add voice and video calling to CometChat iOS UI Kit with Calls SDK installation, CocoaPods or Swift Package Manager, and verification." +description: "Add voice and video calling to CometChat iOS UI Kit with Calls SDK installation via Swift Package Manager and verification." --- ## Overview @@ -13,65 +13,25 @@ Make sure you've completed the [Getting Started](/ui-kit/ios/getting-started) gu ## Add the Calls SDK -You can install the CometChat Calls SDK using either CocoaPods or Swift Package Manager. +Add the Calls SDK with Swift Package Manager: - -- CometChatCallsSDK supports iOS 13 and above -- CometChatCallsSDK supports Swift 5.0+ - - -### Option 1: CocoaPods - -Open a terminal window, navigate to your project directory, and create a Podfile: - -```ruby -$ pod init -``` - -Add the following lines to the Podfile: - -```ruby -platform :ios, '13.0' -use_frameworks! - -target 'YourApp' do - pod 'CometChatUIKitSwift', '4.3.15' - pod 'CometChatCallsSDK', '4.0.6' -end -``` - -Install the dependencies: +1. Go to **File → Add Package Dependencies** in Xcode +2. Enter the CometChat Calls SDK repository URL: -```ruby -$ pod install ``` - -If you encounter issues, try: - -```ruby -$ pod install --repo-update -``` - -To update to the latest version: - -```ruby -$ pod update CometChatCallsSDK +https://github.com/cometchat/calls-sdk-ios ``` - -Always open the `.xcworkspace` file after adding the dependencies. - - -### Option 2: Swift Package Manager +3. Select **Up to Next Major Version**, enter `5.0.4`, and add the **CometChatCallsSDK** product to your app target. -1. Go to File → Add Packages in Xcode -2. Add the CometChat Calls SDK repository: - -``` -https://github.com/cometchat/calls-sdk-ios.git -``` + +- Your app target needs iOS 15.1 or later, the UI Kit's minimum deployment target. +- Keep the UI Kit on **Up to Next Major Version** from `5.2.3`, as set up in [Getting Started](/ui-kit/ios/getting-started). + -3. Select Version Rules, enter the version (e.g., 4.0.5), and click Next + +**CocoaPods:** the latest UI Kit on CocoaPods is 5.1.18, and new releases ship through Swift Package Manager only. Move CocoaPods projects to Swift Package Manager to get current releases and fixes. + Make sure you have completed the Chat UI Kit integration before adding the Calls SDK. diff --git a/ui-kit/ios/campaigns.mdx b/ui-kit/ios/campaigns.mdx index 1ba5268ee..958d3028d 100644 --- a/ui-kit/ios/campaigns.mdx +++ b/ui-kit/ios/campaigns.mdx @@ -99,7 +99,13 @@ Both your main app and the extension need to share data via an App Group: ### Step 3: Add CometChatSDK to the Extension -Add `CometChatSDK` as a dependency to the extension target (via SPM or CocoaPods). +The app target gets `CometChatSDK` through the UI Kit package, but that package's only product is `CometChatUIKitSwift`, so the extension can't link `CometChatSDK` from it. Link the chat SDK package to the extension directly: + +1. Go to **File → Add Package Dependencies** and enter `https://github.com/cometchat/chat-sdk-ios`. +2. Select **Up to Next Major Version** from `4.1.10` (the same floor the UI Kit declares, so SPM resolves one shared version). +3. Add the **CometChatSDK** product to the **extension target** only — not the app target, which already gets it from the UI Kit. + +Use Swift Package Manager rather than CocoaPods here: the `CometChatSDK` pod stops at 4.1.9, older than the 4.1.10 the UI Kit resolves. ### Step 4: Implement the Extension diff --git a/ui-kit/ios/components-overview.mdx b/ui-kit/ios/components-overview.mdx index 5fa1c3e80..5540fb5c9 100644 --- a/ui-kit/ios/components-overview.mdx +++ b/ui-kit/ios/components-overview.mdx @@ -9,7 +9,7 @@ description: "Understand CometChat iOS UI Kit component types, base components, { "platform": "iOS UI Kit", "package": "CometChatUIKitSwift", - "version": "5.1.9", + "version": "5.2.3", "componentTypes": { "base": "Simple UI elements with no business logic", "components": "UI elements with built-in business logic", diff --git a/ui-kit/ios/core-features.mdx b/ui-kit/ios/core-features.mdx index 17c68d34c..803f8232a 100644 --- a/ui-kit/ios/core-features.mdx +++ b/ui-kit/ios/core-features.mdx @@ -450,7 +450,7 @@ Rich Text Formatting allows users to style their messages with bold, italic, str `enableRichTextFormatting` and `showRichTextFormattingOptions` are `true` by default. See the [CompactMessageComposer Rich Text Formatting](/ui-kit/ios/compact-message-composer#rich-text-formatting) section for full configuration details. -Rich text formatting in message bubbles (rendering formatted text in the MessageList) is supported from UI Kit version 5.2.11 onwards. Earlier versions will display the raw markdown syntax instead of formatted text. +Rich text formatting in message bubbles (rendering formatted text in the MessageList) is supported from UI Kit version 5.1.12 onwards. Earlier versions will display the raw markdown syntax instead of formatted text. | Component | Functionality | diff --git a/ui-kit/ios/getting-started.mdx b/ui-kit/ios/getting-started.mdx index b9abeb260..5db0e5e1c 100644 --- a/ui-kit/ios/getting-started.mdx +++ b/ui-kit/ios/getting-started.mdx @@ -9,14 +9,14 @@ description: "Integrate CometChat iOS UI Kit with project setup, package install | Field | Value | | --- | --- | | Package | `CometChatUIKitSwift` | -| Version | `5.1.22` | -| Requirements | Xcode 16+, iOS 13.0+, Swift 5.0+ | +| Version | `5.2.3` (Swift Package Manager, Up to Next Major Version) | +| Requirements | Xcode 16+, iOS 15.1+, Swift 5.3+ | | Init | `CometChatUIKit.init(uiKitSettings:)` — must complete before `login()` | | Login | `CometChatUIKit.login(uid:)` — must complete before rendering components | | Order | `init()` → `login()` → render. Breaking this order = blank screen | | Auth Key | Dev/testing only. Use Auth Token in production | -| Calling | Optional. Install `CometChatCallsSDK 4.2.3` to enable | -| Dependencies | `CometChatSDK 4.1.9` (installed automatically) | +| Calling | Optional. Add `CometChatCallsSDK` 5.0.4 (Up to Next Major Version) to enable | +| Dependencies | `CometChatSDK` 4.1.10+ (resolved automatically by the UI Kit package) | | AI Skills | `npx @cometchat/skills add` — [GitHub](https://github.com/cometchat/cometchat-skills) | @@ -65,8 +65,8 @@ You need three things from the [CometChat Dashboard](https://app.cometchat.com/) You also need: - Xcode 16 or later -- iOS device or simulator running iOS 13.0+ -- Swift 5.0+ +- iOS device or simulator running iOS 15.1+ +- Swift 5.3+ (Xcode 16 ships Swift 6, which satisfies this) - macOS @@ -88,42 +88,8 @@ Open Xcode and create a new project: ## Step 2 — Install the UI Kit - - -1. Create a Podfile in your project root: +Add the UI Kit with Swift Package Manager: -```bash -pod init -``` - -2. Add CometChat to your Podfile: - -```ruby title="Podfile" -platform :ios, '13.0' -use_frameworks! - -target 'YourApp' do - pod 'CometChatUIKitSwift', '5.1.22' - - # Optional: Voice/Video Calling - pod 'CometChatCallsSDK', '4.2.3' -end -``` - -3. Install dependencies: - -```bash -pod install --repo-update -``` - -4. Close the `.xcodeproj` file and open the `.xcworkspace` file instead. CocoaPods creates a workspace that includes your project and the installed pods. - - -Always open the `.xcworkspace` file after installing pods — opening the `.xcodeproj` will cause build errors. Having issues? See [CocoaPods Troubleshooting](/ui-kit/ios/troubleshooting#cocoapods-issues). - - - - 1. Go to **File → Add Package Dependencies** 2. Enter the repository URL: @@ -132,29 +98,20 @@ Always open the `.xcworkspace` file after installing pods — opening the `.xcod https://github.com/cometchat/cometchat-uikit-ios ``` -3. Select **Up to Exact Version** and enter: +3. Select **Up to Next Major Version** and enter: ``` -5.1.22 +5.2.3 ``` -4. Add the Chat SDK separately using: +4. Add the **CometChatUIKitSwift** product to your app target. -``` -https://github.com/cometchat/chat-sdk-ios -``` +The UI Kit package declares its own dependencies, so SPM also resolves `CometChatSDK` (4.1.10 or later) and `CometChatCardsSwift`. Don't add `chat-sdk-ios` to the app target yourself (a [Notification Service Extension](/ui-kit/ios/campaigns#step-3-add-cometchatsdk-to-the-extension) is the exception: it links `CometChatSDK` from `chat-sdk-ios` directly). If an older integration pins it to an exact version, remove that pin or change it to **Up to Next Major Version** from 4.1.10; an exact pin below 4.1.10 makes package resolution fail. - Exact Version: `4.1.9` - - +For voice and video calling, also add `https://github.com/cometchat/calls-sdk-ios` with **Up to Next Major Version** from `5.0.4`. A chat-only app doesn't need it. -**Pin the Chat SDK to the exact version the UI Kit requires.** `CometChatUIKitSwift` ships as a prebuilt binary compiled against one specific `CometChatSDK` version — for UI Kit `5.1.22` that is `CometChatSDK 4.1.9` (see the version table at the top of this page). - -- **CocoaPods** installs the matching `CometChatSDK` automatically when you run `pod install`. Don't add your own `CometChatSDK` pod pinned to a different version. -- **Swift Package Manager** does not resolve it for you — add `chat-sdk-ios` with **Up to Exact Version** set to the version the UI Kit depends on. Forcing a newer or older Chat SDK (an SPM override) is unsupported and typically fails to build or crashes at runtime. - -To adopt a newer Chat SDK release, upgrade to a UI Kit version that depends on it rather than overriding the SDK version directly. The full list of Chat SDK releases is on [GitHub](https://github.com/cometchat/chat-sdk-ios/releases). +**CocoaPods:** the latest UI Kit on CocoaPods is 5.1.18, and new releases ship through Swift Package Manager only. Move CocoaPods projects to Swift Package Manager to get current releases and fixes. --- diff --git a/ui-kit/ios/guide-group-chat.mdx b/ui-kit/ios/guide-group-chat.mdx index 68282b75c..7875069e3 100644 --- a/ui-kit/ios/guide-group-chat.mdx +++ b/ui-kit/ios/guide-group-chat.mdx @@ -20,7 +20,7 @@ Provide a detailed view for CometChat groups in your iOS app, enabling users to Before implementing group details, ensure you have: - Completed [Getting Started](/ui-kit/ios/getting-started) setup -- CometChat UIKit v5+ installed via CocoaPods or Swift Package Manager +- CometChat UIKit v5+ installed via Swift Package Manager (CocoaPods stops at 5.1.18) - Valid CometChat App ID, Region, and Auth Key - User logged in with `CometChatUIKit.login()` - Navigation controller (`UINavigationController`) configured diff --git a/ui-kit/ios/guide-group-ownership.mdx b/ui-kit/ios/guide-group-ownership.mdx index 93ece0232..5a1ac1dec 100644 --- a/ui-kit/ios/guide-group-ownership.mdx +++ b/ui-kit/ios/guide-group-ownership.mdx @@ -20,7 +20,7 @@ The Transfer Group Ownership feature provides a modal interface where the group Before implementing ownership transfer, ensure you have: - Completed [Getting Started](/ui-kit/ios/getting-started) setup -- CometChat UIKit v5+ installed via CocoaPods or Swift Package Manager +- CometChat UIKit v5+ installed via Swift Package Manager (CocoaPods stops at 5.1.18) - CometChatSDK and CometChatUIKitSwift integrated - User logged in with `CometChatUIKit.login()` - `UINavigationController` or modal presentation flow set up diff --git a/ui-kit/ios/guide-new-chat.mdx b/ui-kit/ios/guide-new-chat.mdx index a70c34446..00232bad8 100644 --- a/ui-kit/ios/guide-new-chat.mdx +++ b/ui-kit/ios/guide-new-chat.mdx @@ -21,7 +21,7 @@ The `CreateConversation` component enables users to: Before implementing this feature, ensure you have: - Completed [Getting Started](/ui-kit/ios/getting-started) setup -- CometChat UIKit v5+ installed via CocoaPods or Swift Package Manager +- CometChat UIKit v5+ installed via Swift Package Manager (CocoaPods stops at 5.1.18) - User authenticated with `CometChatUIKit.login()` before presenting this screen - A `UINavigationController` embedded in your flow - `MessagesVC` implemented to handle chat screens diff --git a/ui-kit/ios/guide-pin-save-message.mdx b/ui-kit/ios/guide-pin-save-message.mdx index 70bafd9f9..598501231 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, installed with Swift Package Manager (CocoaPods stops at 5.1.18), which resolves the `CometChatSDK` it needs. ## Overview @@ -27,7 +27,7 @@ With the iOS UI Kit you get: the action-sheet options, pin and bookmark indicato ## Prerequisites 1. Completed [Getting Started](/ui-kit/ios/getting-started) setup -2. CometChat UI Kit for iOS v5.1.22 or later installed +2. CometChat UI Kit for iOS v5.1.22 or later, installed with Swift Package Manager (CocoaPods stops at 5.1.18) 3. User logged in with `CometChatUIKit.login()` 4. Pin and save enabled for your app diff --git a/ui-kit/ios/guide-thread-subscription.mdx b/ui-kit/ios/guide-thread-subscription.mdx index 6741a7082..d1b9cea09 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, installed with Swift Package Manager (CocoaPods stops at 5.1.18), which resolves the `CometChatSDK` it needs. ## Overview @@ -17,7 +17,7 @@ The UI Kit ships the toggle as a **Subscribe to thread / Unsubscribe from thread ## Prerequisites - Threaded messages working in your app — see [Threaded Messages](/ui-kit/ios/guide-threaded-messages). -- CometChat UI Kit for iOS v5.1.22 or later, with Chat SDK v4.1.9 or later. +- CometChat UI Kit for iOS v5.1.22 or later, installed with Swift Package Manager (CocoaPods stops at 5.1.18). ## Enable the Feature diff --git a/ui-kit/ios/llms-ios-v5.mdx b/ui-kit/ios/llms-ios-v5.mdx index 0afaf95f4..45bffa8d2 100644 --- a/ui-kit/ios/llms-ios-v5.mdx +++ b/ui-kit/ios/llms-ios-v5.mdx @@ -34,15 +34,18 @@ the page for the intent, then read the API there. component page rather than assuming a setter exists. ## Install facts an agent must not guess -- **SPM is the supported path.** CocoaPods distribution is winding down; `Podfile`/`.xcworkspace` - remain valid *detection* signals for an existing project, but new integration uses SPM. -- **All three packages are required, even for a chat-only app.** The UI Kit ships as a prebuilt - binary whose public `.swiftinterface` imports both `CometChatSDK` and `CometChatCallsSDK`, so - the module fails to resolve unless every one is declared and linked: - `cometchat-uikit-ios` · `chat-sdk-ios` · `calls-sdk-ios`. -- **Pin exact versions, not floors.** The UI Kit binary is compiled against one specific Chat SDK - version and SPM will not resolve that transitively; a floating `from:` can drift into a - mismatch on the next SDK publish. +- **SPM is the supported path.** CocoaPods is deprecated: the last pod is `CometChatUIKitSwift` + 5.1.18 and new releases ship through Swift Package Manager only. `Podfile`/`.xcworkspace` remain + valid *detection* signals for an existing project, but new integration uses SPM. +- **Add one package for chat:** `https://github.com/cometchat/cometchat-uikit-ios`, rule + **Up to Next Major Version** from `5.2.3`, product `CometChatUIKitSwift`. +- **The Chat SDK comes in transitively.** The UI Kit package declares `CometChatSDK` + (`chat-sdk-ios`, `from: "4.1.10"`) and `CometChatCardsSwift` itself, so do not add + `chat-sdk-ios` separately. An exact pin below 4.1.10 left over from an older integration makes + resolution fail — remove it or change it to Up to Next Major from 4.1.10. +- **Calls SDK is optional.** Add `https://github.com/cometchat/calls-sdk-ios`, Up to Next Major + from `5.0.4`, only for voice/video calling; the kit weak-links it, so a chat-only app builds + without it. - **Deployment target is iOS 15.1**, set by the package itself — not iOS 13. - Credentials: `.xcconfig` → matching `$(VAR)` entries in **Info.plist** → read via `Bundle.main.object(forInfoDictionaryKey:)`. The Info.plist step is mandatory and is the most diff --git a/ui-kit/ios/message-list.mdx b/ui-kit/ios/message-list.mdx index 07995141c..45c34fb35 100644 --- a/ui-kit/ios/message-list.mdx +++ b/ui-kit/ios/message-list.mdx @@ -43,7 +43,7 @@ The `CometChatMessageList` component displays a scrollable list of messages in a "onLoad": "([BaseMessage]) -> Void" }, "visibility": { - "hideAvatar": { "type": "Bool", "default": false }, + "hideAvatar": { "type": "Bool?", "default": "nil" }, "hideReceipts": { "type": "Bool", "default": false }, "hideDateSeparator": { "type": "Bool", "default": false }, "hideHeaderView": { "type": "Bool", "default": false }, @@ -75,7 +75,7 @@ The `CometChatMessageList` component displays a scrollable list of messages in a "enablePinMessage": { "type": "Bool", "default": false, "note": "Also requires CometChat.isPinMessageEnabled()" }, "enableSaveMessage": { "type": "Bool", "default": false, "note": "Also requires CometChat.isSaveMessageEnabled()" }, "enableThreadSubscription": { "type": "Bool", "default": false, "note": "Offered on parent messages only, never on a reply" }, - "messageAlignment": { "type": "MessageAlignment", "default": ".standard" } + "messageAlignment": { "type": "MessageListAlignment", "default": ".standard" } }, "viewSlots": { "headerView": "() -> UIView", @@ -116,9 +116,9 @@ The `CometChatMessageList` component displays a scrollable list of messages in a "type": "String", "category": "String" }, - "MessageAlignment": { + "MessageListAlignment": { "standard": "Outgoing messages on right, incoming on left", - "left": "All messages aligned to left" + "leftAligned": "All messages aligned to left" } } } @@ -1578,12 +1578,12 @@ messageList.errorTitleText = "Unable to load messages" ### hideAvatar -Hides the sender's avatar in message bubbles. +Hides the sender's avatar in message bubbles. When it is not set (`nil`), avatars show on incoming messages in group chats and are hidden in one-to-one chats. Set it to `false` to show avatars in one-to-one chats too. | | | |---|---| -| Type | `Bool` | -| Default | `false` | +| Type | `Bool?` | +| Default | `nil` | ### hideBubbleHeader @@ -1851,13 +1851,17 @@ Hides the message translation option. ### messageAlignment -Sets the alignment of messages in the list. +Sets the alignment of messages in the list: `.standard` (outgoing on the right, incoming on the left) or `.leftAligned` (all messages on the left). | | | |---|---| -| Type | `MessageAlignment` | +| Type | `MessageListAlignment` | | Default | `.standard` | +```swift +messageList.set(messageAlignment: .leftAligned) +``` + ### messageBubbleStyle Customizes the appearance of message bubbles. diff --git a/ui-kit/ios/overview.mdx b/ui-kit/ios/overview.mdx index b12e44b7d..c0b589aeb 100644 --- a/ui-kit/ios/overview.mdx +++ b/ui-kit/ios/overview.mdx @@ -9,14 +9,14 @@ description: "Integrate chat functionality into iOS applications with prebuilt, { "platform": "iOS UI Kit", "package": "CometChatUIKitSwift", - "version": "5.1.9", + "version": "5.2.3", "description": "Pre-built UI components for iOS chat applications using SwiftUI", "metadata": { "peerDependencies": { - "CometChatSDK": ">= 4.0.0" + "CometChatSDK": ">= 4.1.10 (resolved by SPM)" }, - "supportedPlatforms": ["iOS 13.0+", "iPadOS 13.0+", "Mac Catalyst 13.0+"], - "language": "Swift 5.0+", + "supportedPlatforms": ["iOS 15.1+", "iPadOS 15.1+"], + "language": "Swift 5.3+", "license": "MIT" }, "quickLinks": { @@ -31,10 +31,10 @@ description: "Integrate chat functionality into iOS applications with prebuilt, | Property | Value | |----------|-------| | Package | CometChatUIKitSwift | -| Version | 5.1.9 | -| Peer Dependencies | CometChatSDK >= 4.0.0 | -| Platforms | iOS 13.0+, iPadOS 13.0+, Mac Catalyst 13.0+ | -| Language | Swift 5.0+ | +| Version | 5.2.3 | +| Dependencies | CometChatSDK >= 4.1.10 (resolved by SPM) | +| Platforms | iOS 15.1+, iPadOS 15.1+ | +| Language | Swift 5.3+ | | AI Skills | `npx @cometchat/skills add` — [GitHub](https://github.com/cometchat/cometchat-skills) | | License | MIT | diff --git a/ui-kit/ios/pinned-messages.mdx b/ui-kit/ios/pinned-messages.mdx index 06494025c..bee4da897 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, installed with Swift Package Manager (CocoaPods stops at 5.1.18), which resolves the `CometChatSDK` it needs. diff --git a/ui-kit/ios/saved-messages.mdx b/ui-kit/ios/saved-messages.mdx index abe4daf2e..7cde7c852 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, installed with Swift Package Manager (CocoaPods stops at 5.1.18), which resolves the `CometChatSDK` it needs. diff --git a/ui-kit/ios/threaded-messages-header.mdx b/ui-kit/ios/threaded-messages-header.mdx index e370cbe8d..7f3ab9520 100644 --- a/ui-kit/ios/threaded-messages-header.mdx +++ b/ui-kit/ios/threaded-messages-header.mdx @@ -189,7 +189,7 @@ Below is a list of customizations along with corresponding code snippets: | hideReceipts | Hides read and delivery receipts for messages. | `hideReceipts = true` | | hideAvatar | Hides the avatar in the threaded message view. | `hideAvatar = true` | | setMaxHeight | Sets the maximum height for the threaded message view. | `setMaxHeight(300)` | -| setMessageAlignment | Sets the alignment of messages (e.g., left or right). | `setMessageAlignment(.right)` | +| set(messageAlignment:) | Sets the alignment of messages (`.standard` or `.leftAligned`). | `set(messageAlignment: .leftAligned)` | | setParentMessage | Sets the parent message for the threaded conversation. | `setParentMessage(parentMessage)` | | enableThreadSubscription | Shows the subscribe/unsubscribe bell on the reply-count bar. | `set(enableThreadSubscription: true)` | | hideThreadSubscriptionButton | Hides the bell while leaving the feature on, for a screen that draws its own control. | `set(hideThreadSubscriptionButton: true)` | diff --git a/ui-kit/ios/troubleshooting.mdx b/ui-kit/ios/troubleshooting.mdx index e12f75469..eb70c2241 100644 --- a/ui-kit/ios/troubleshooting.mdx +++ b/ui-kit/ios/troubleshooting.mdx @@ -22,6 +22,10 @@ This guide covers common issues and solutions when working with the CometChat iO ## CocoaPods Issues + +CocoaPods is deprecated for the UI Kit: the last pod is 5.1.18, and new releases ship through Swift Package Manager only. Use these steps only for an existing CocoaPods project, and plan to [move to SPM](#fallback-to-swift-package-manager). + + | Issue | Solution | |-------|----------| | "Could not find compatible versions" | Run `pod install --repo-update` to refresh spec repos | @@ -51,11 +55,11 @@ pod install --repo-update If CocoaPods continues to fail, use SPM instead: -1. Remove Podfile and Pods folder -2. Open your `.xcodeproj` in Xcode +1. In your project folder (where the `Podfile` is), run `pod deintegrate` to take CocoaPods out of the Xcode project, then delete the `Podfile`, `Podfile.lock`, `Pods` folder and `.xcworkspace` +2. Open your `.xcodeproj` in Xcode and set the app target's **Minimum Deployments** to iOS 15.1 or later (the UI Kit package requires it) 3. Go to **File → Add Package Dependencies** -4. Add `https://github.com/cometchat/cometchat-uikit-ios` with version `5.1.9` -5. Add `https://github.com/cometchat/chat-sdk-ios` with version `4.1.0` +4. Add `https://github.com/cometchat/cometchat-uikit-ios` with **Up to Next Major Version** from `5.2.3` +5. Don't add `chat-sdk-ios` yourself — the UI Kit package resolves `CometChatSDK` 4.1.10 or later. For calling, add `https://github.com/cometchat/calls-sdk-ios` with **Up to Next Major Version** from `5.0.4`. --- @@ -172,7 +176,7 @@ If CocoaPods continues to fail, use SPM instead: | Issue | Solution | |-------|----------| -| Call buttons not showing | Verify `CometChatCallsSDK` is in Podfile and run `pod install` | +| Call buttons not showing | Verify the `calls-sdk-ios` package (5.0.4+) is added and the `CometChatCallsSDK` product is linked to your app target | | "Permission denied" error | Add camera/microphone permissions to Info.plist | | Calls not connecting | Check network connection and CometChat credentials | | No incoming call UI | Verify `CometChatCallsSDK` is installed and user is logged in | diff --git a/ui-kit/ios/upgrading-from-v4.mdx b/ui-kit/ios/upgrading-from-v4.mdx index 21f974ad7..a1064c44e 100644 --- a/ui-kit/ios/upgrading-from-v4.mdx +++ b/ui-kit/ios/upgrading-from-v4.mdx @@ -378,7 +378,7 @@ In v5, the approach to properties has been refined: | Name | Type | Description | | --- | --- | --- | -| hideAvatar | Bool | Hides sender avatar | +| hideAvatar | Bool? | Hides sender avatar; `nil` (default) shows avatars in group chats and hides them in one-to-one chats | | hideGroupActionMessages | Bool | Hides group action messages | | hideReplyInThreadOption | Bool | Hides reply in thread option | | hideTranslateMessageOption | Bool | Hides translation option | diff --git a/ui-kit/react-native/call-features.mdx b/ui-kit/react-native/call-features.mdx index d439f7b88..24751ba20 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 (react-native-svg comes from the UI Kit setup) +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. @@ -130,24 +142,17 @@ Open `Info.plist` located at `ios/{appname}` in your React Native project and ad ## Setup Minimum Android and iOS Versions -For Android, open the app-level `build.gradle` and set `minSdkVersion` to 24, and both `targetSdkVersion` and `compileSdkVersion` to 33. +For Android, make sure `minSdkVersion` is at least 24. React Native templates set it in the `ext` block of the project-level `android/build.gradle`. Keep the `compileSdkVersion` and `targetSdkVersion` your template sets; don't lower them. -```gradle -android { - namespace "com.org.name_of_your_app" - - compileSdkVersion 33 - - defaultConfig { - - minSdkVersion 24 - - targetSdkVersion 33 - +```groovy +// android/build.gradle (project level) +buildscript { + ext { + minSdkVersion = 24 // the Calls SDK minimum; the React Native template already sets 24 + // keep the compileSdkVersion, targetSdkVersion and buildToolsVersion the template sets } - } ``` @@ -155,19 +160,30 @@ android { -For iOS, open the `.xcworkspace` in Xcode and set `IPHONEOS_DEPLOYMENT_TARGET` to 12.0. - -Alternatively, you can specify it in the `post_install` hook of the Podfile: +For iOS, the deployment target must be at least 15.1 (the minimum for React Native 0.76 and later). The React Native template's Podfile already sets it with `platform :ios, min_ios_version_supported`. If you need to force it on every pod, add the loop inside the template's existing `post_install` block. CocoaPods allows only one `post_install` hook, so don't add a second one: ```ruby -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' +# ios/Podfile: keep the template's platform line; it resolves to 15.1 on React Native 0.76 and later +platform :ios, min_ios_version_supported + +target 'YourApp' do + # ... + + # The template already has a post_install block, and CocoaPods allows only one. + # Add the deployment-target loop INSIDE it; don't add a second post_install. + post_install do |installer| + react_native_post_install( + installer, + config[:reactNativePath], + :mac_catalyst_enabled => false, + ) + + installer.pods_project.targets.each do |target| + target.build_configurations.each do |build_configuration| + build_configuration.build_settings['IPHONEOS_DEPLOYMENT_TARGET'] = '15.1' + end end end end @@ -177,10 +193,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 37af136d5..94ee9d262 100644 --- a/ui-kit/react-native/calling-integration.mdx +++ b/ui-kit/react-native/calling-integration.mdx @@ -9,9 +9,9 @@ description: "Add voice and video calling to your React Native UI Kit applicatio | --- | --- | | Components | `CometChatIncomingCall` | | Package | `@cometchat/calls-sdk-react-native` — **not** `@cometchat/calls-sdk-javascript` (that is the web package) | -| Extra deps | `@react-native-community/netinfo` · `react-native-background-timer` · `react-native-callstats` · `react-native-webrtc` | +| Extra deps | Peer deps of the Calls SDK, installed at their declared ranges: `@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` · `react-native-svg@^15.12.0`. Unpinned installs of the latest majors fail with `ERESOLVE` | | Enabling | **Installing the package is the switch** — the UI Kit detects it at startup. There is no `setCallingEnabled()` in React Native. Opt out with `disableCalling: true` in your settings | -| Version floors | Android `minSdkVersion 24` · iOS deployment target `12.0` — below these the **build fails** | +| Version floors | Android `minSdkVersion 24` · iOS deployment target `15.1` (React Native 0.76+ requires it) — below these the **build fails** | | Permissions | iOS `NSCameraUsageDescription` + `NSMicrophoneUsageDescription`; Android `CAMERA`, `RECORD_AUDIO`, `MODIFY_AUDIO_SETTINGS` | | After installing | `pod install` (bare) or a fresh development build (Expo). A JS reload will not pick up the native module | | Testing | **Simulators cannot capture camera or microphone** — verify calls on real devices | @@ -32,9 +32,16 @@ Make sure you've completed the [Getting Started](/ui-kit/react-native/react-nati Install the CometChat Calls SDK: ```bash -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`. Check the current ranges with `npm view @cometchat/calls-sdk-react-native peerDependencies`. + Once added, the React Native UI Kit will automatically detect it and enable calling features. The [CallButtons](/ui-kit/react-native/call-buttons) component will appear within the [MessageHeader](/ui-kit/react-native/message-header) component. @@ -87,39 +94,47 @@ Add the following entries to `ios/{appname}/Info.plist`: ### Android -In `android/app/build.gradle`, set the SDK versions: +The Calls SDK needs `minSdkVersion` 24 or higher. React Native templates set it in the `ext` block of `android/build.gradle`, and `android/app/build.gradle` reads it from there. Keep the `compileSdkVersion` and `targetSdkVersion` your template sets; don't lower them: ```groovy -android { - compileSdkVersion 33 - - defaultConfig { - minSdkVersion 24 - targetSdkVersion 33 +// android/build.gradle (project level) +buildscript { + ext { + minSdkVersion = 24 // the Calls SDK minimum; the React Native template already sets 24 + // keep the compileSdkVersion, targetSdkVersion and buildToolsVersion the template sets } } ``` ### iOS -In Xcode, set `IPHONEOS_DEPLOYMENT_TARGET` to 12.0, or add to your Podfile: +The deployment target must be at least 15.1 (the minimum for React Native 0.76 and later). The React Native template's Podfile already sets it with `platform :ios, min_ios_version_supported`, so a current template needs no change. If you need to force it on every pod, add the loop inside the template's existing `post_install` block: ```ruby -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' +# ios/Podfile: keep the template's platform line; it resolves to 15.1 on React Native 0.76 and later +platform :ios, min_ios_version_supported + +target 'YourApp' do + # ... + + # The template already has a post_install block, and CocoaPods allows only one. + # Add the deployment-target loop INSIDE it; don't add a second post_install. + post_install do |installer| + react_native_post_install( + installer, + config[:reactNativePath], + :mac_catalyst_enabled => false, + ) + + installer.pods_project.targets.each do |target| + target.build_configurations.each do |build_configuration| + build_configuration.build_settings['IPHONEOS_DEPLOYMENT_TARGET'] = '15.1' + end 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 7cab22bc9..5dd0be9a5 100644 --- a/ui-kit/react-native/expo-integration.mdx +++ b/ui-kit/react-native/expo-integration.mdx @@ -63,8 +63,7 @@ You need three things from the [CometChat Dashboard](https://app.cometchat.com/) | Region | Dashboard → Your App → Credentials (e.g. `us`, `eu`, `in`) | You also need: -- Node.js (v16+) and npm/yarn installed -- Expo CLI installed (`npm install -g expo-cli`) +- Node.js 22.13+ (or 24.3+) and npm/yarn installed (the minimum the current Expo SDK, 58, requires) - Xcode (for iOS) and Android Studio (for Android) for development builds @@ -92,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-svg@^15.12.0 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,13 +136,15 @@ Add required permissions for camera and microphone: To enable voice/video calling: ```bash -npm install @cometchat/calls-sdk-react-native -npm install @react-native-community/netinfo -npm install react-native-background-timer -npm install react-native-callstats -npm install react-native-webrtc +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 ``` +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`. + --- ## Step 3 — Initialize CometChat diff --git a/ui-kit/react-native/llms-react-native-v5.mdx b/ui-kit/react-native/llms-react-native-v5.mdx index 0e0233d05..000599d8d 100644 --- a/ui-kit/react-native/llms-react-native-v5.mdx +++ b/ui-kit/react-native/llms-react-native-v5.mdx @@ -35,17 +35,23 @@ This kit renders **native views**, not DOM. Code that works in the React UI Kit 1:1. Non-negotiables: - **No CSS, no `className`, no `
`/``, no `document.*`/`window.*`.** Styling is `StyleSheet` objects and the theme API — see [Theming](/ui-kit/react-native/theme). -- **Native peer deps are required**, not optional. Verified against - `@cometchat/chat-uikit-react-native@5.4.0`: `@cometchat/chat-sdk-react-native`, - `@react-native-clipboard/clipboard`, `@react-native-community/datetimepicker`, - `react-native-gesture-handler`, `react-native-svg`, `react-native-video`, - `react-native-localize`, `react-native-safe-area-context`, - `@react-native-async-storage/async-storage`, `dayjs` (+ `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. -- **Android + async-storage v3 needs an extra Gradle line.** `@react-native-async-storage/async-storage` - v3 ships a local Maven artifact; without the `local_repo` entry in `android/build.gradle` the - Android build fails. See the integration page. +- **Native peer deps are required**, not optional. As of + `@cometchat/chat-uikit-react-native@5.5.2` the peers are `@cometchat/chat-sdk-react-native`, + `@react-native-clipboard/clipboard`, `react-native-gesture-handler`, `react-native-svg`, + `react-native-video`, `react-native-localize` and `react-native-safe-area-context` + (+ `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. +- **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, so the old `local_repo` entry + in `android/build.gradle` is not needed. +- **Calling peers go in at their declared ranges.** `@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`, + `react-native-url-polyfill@^2.0.0` and `react-native-svg@^15.12.0` — install them at those + ranges in the same command (unpinned latest majors fail with `ERESOLVE`). See + [Calling Integration](/ui-kit/react-native/calling-integration). - **One screen per route.** Use a stack navigator and a real hardware/gesture back button — do not stack components on a single screen the way a web layout would. - **Two toolchains, different setup:** React Native CLI (bare) and Expo. Pick the matching diff --git a/ui-kit/react-native/overview.mdx b/ui-kit/react-native/overview.mdx index 3008f688a..9f3722fd7 100644 --- a/ui-kit/react-native/overview.mdx +++ b/ui-kit/react-native/overview.mdx @@ -9,7 +9,7 @@ description: "Prebuilt React Native components for chat, voice, and video callin | Field | Value | | --- | --- | | Package | `@cometchat/chat-uikit-react-native` v5.x | -| Peer deps | `react-native` >=0.70, `@cometchat/chat-sdk-react-native`, `react-native-gesture-handler`, `react-native-safe-area-context` | +| Peer deps | `@cometchat/chat-sdk-react-native`, `@react-native-clipboard/clipboard`, `react-native-gesture-handler`, `react-native-svg`, `react-native-video`, `react-native-localize`, `react-native-safe-area-context`. Built and tested with React Native 0.77 and later | | Calling | Optional — `@cometchat/calls-sdk-react-native` | | Localization | Built-in localization support | | Source | [GitHub](https://github.com/cometchat/cometchat-uikit-react-native/tree/v5) | diff --git a/ui-kit/react-native/react-native-cli-integration.mdx b/ui-kit/react-native/react-native-cli-integration.mdx index 7271525c9..404f2463d 100644 --- a/ui-kit/react-native/react-native-cli-integration.mdx +++ b/ui-kit/react-native/react-native-cli-integration.mdx @@ -59,7 +59,7 @@ You need three things from the [CometChat Dashboard](https://app.cometchat.com/) | Region | Dashboard → Your App → Credentials (e.g. `us`, `eu`, `in`) | You also need: -- Node.js (v16+) and npm/yarn installed +- Node.js 22.13+ (or 24.3+) and npm/yarn installed — the Node.js minimum for React Native 0.88, the current release that `npx @react-native-community/cli init` creates - React Native development environment set up ([React Native CLI Quickstart](https://reactnative.dev/docs/environment-setup)) - Xcode (for iOS) and Android Studio (for Android) @@ -77,7 +77,7 @@ cd MyApp ``` -The CometChat React Native UI Kit is officially built and tested with React Native version 0.77.0 and above. While it may work with older versions, they are not officially supported. +The CometChat React Native UI Kit supports React Native 0.77.0 and above; older versions may work but aren't officially supported. This guide was verified on React Native 0.88.0 (the version the command above creates today). --- @@ -92,35 +92,16 @@ 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-svg@^15.12.0 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 ``` -### Android: Add Local Maven Repository for Async Storage - - -**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 title="android/build.gradle" -allprojects { - repositories { - google() - mavenCentral() - maven { - url = uri(project(":react-native-async-storage_async-storage").file("local_repo")) - } - } -} -``` - ### Add Permissions for Android Open `android/app/src/main/AndroidManifest.xml` and add: @@ -181,13 +162,15 @@ This import must be at the top of your entry file. Failing to do so may cause cr To enable voice/video calling: ```bash -npm install @cometchat/calls-sdk-react-native -npm install @react-native-community/netinfo -npm install react-native-background-timer -npm install react-native-callstats -npm install react-native-webrtc +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 ``` +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`: ```xml diff --git a/ui-kit/react-native/troubleshooting.mdx b/ui-kit/react-native/troubleshooting.mdx index 0d8ec0812..d6b7f6805 100644 --- a/ui-kit/react-native/troubleshooting.mdx +++ b/ui-kit/react-native/troubleshooting.mdx @@ -32,7 +32,6 @@ description: "Troubleshoot CometChat React Native UI Kit setup, initialization, | Symptom | Cause | Fix | | --- | --- | --- | -| Android build fails with Maven error | Missing local Maven repository for `@react-native-async-storage/async-storage` | Add the Maven URL to `android/build.gradle`. See [Integration](/ui-kit/react-native/react-native-cli-integration#android-add-local-maven-repository-for-async-storage) | | iOS build fails | Pods not installed | Run `cd ios && pod install && cd ..` | | App crashes on launch | `react-native-gesture-handler` not imported at top of entry file | Add `import 'react-native-gesture-handler';` at the very top of `index.js` before any other imports | | Permission denied errors on Android | Missing permissions in AndroidManifest.xml | Add required permissions (INTERNET, CAMERA, RECORD_AUDIO, etc.). See [Integration](/ui-kit/react-native/react-native-cli-integration#add-permissions-for-android) | @@ -89,13 +88,13 @@ description: "Troubleshoot CometChat React Native UI Kit setup, initialization, | Symptom | Cause | Fix | | --- | --- | --- | -| Call buttons not appearing in Message Header | `@cometchat/calls-sdk-react-native` not installed | Run `npm install @cometchat/calls-sdk-react-native` — UI Kit auto-detects it | +| Call buttons not appearing in Message Header | `@cometchat/calls-sdk-react-native` not installed | Install the Calls SDK with its peer dependencies at the ranges it declares (a bare `npm install @cometchat/calls-sdk-react-native` can fail with `ERESOLVE` when newer peer majors are already installed); see [Calling Integration](/ui-kit/react-native/calling-integration). The UI Kit auto-detects it | | Incoming call screen not showing | `CometChatIncomingCall` not mounted or call listener not registered | Render `CometChatIncomingCall` at app root and register `CometChat.addCallListener()`. See [Call Features](/ui-kit/react-native/call-features) | | 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 | -| WebRTC errors | Missing peer dependencies | Install `react-native-webrtc`, `@react-native-community/netinfo`, `react-native-background-timer` | +| Call fails on Android | Missing permissions or wrong SDK version | Ensure `minSdkVersion` is 24+ (keep the `compileSdkVersion` and `targetSdkVersion` your React Native template sets) and permissions are added | +| 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) | --- @@ -162,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/astro-conversation.mdx b/ui-kit/react/astro-conversation.mdx index 22f15a876..c1fd46871 100644 --- a/ui-kit/react/astro-conversation.mdx +++ b/ui-kit/react/astro-conversation.mdx @@ -45,7 +45,7 @@ Create a React island component with the chat UI, then render it in an Astro pag ```tsx title="src/components/ConversationChat.tsx" import { useEffect, useState } from "react"; -import { CometChat } from "@cometchat/chat-sdk-javascript"; +import type { User, Group, Conversation } from "@cometchat/chat-sdk-javascript"; import { CometChatUIKit, UIKitSettingsBuilder, @@ -58,8 +58,8 @@ import { export default function ConversationChat() { const [ready, setReady] = useState(false); - const [selectedUser, setSelectedUser] = useState(undefined); - const [selectedGroup, setSelectedGroup] = useState(undefined); + const [selectedUser, setSelectedUser] = useState(undefined); + const [selectedGroup, setSelectedGroup] = useState(undefined); useEffect(() => { const settings = new UIKitSettingsBuilder() @@ -77,13 +77,13 @@ export default function ConversationChat() { if (!ready) return
Loading chat...
; - const handleConversationClick = (conversation: CometChat.Conversation) => { + const handleConversationClick = (conversation: Conversation) => { const entity = conversation.getConversationWith(); if (conversation.getConversationType() === "user") { - setSelectedUser(entity as CometChat.User); + setSelectedUser(entity as User); setSelectedGroup(undefined); } else { - setSelectedGroup(entity as CometChat.Group); + setSelectedGroup(entity as Group); setSelectedUser(undefined); } }; diff --git a/ui-kit/react/calling-integration.mdx b/ui-kit/react/calling-integration.mdx index 48857f176..cc0e1377b 100644 --- a/ui-kit/react/calling-integration.mdx +++ b/ui-kit/react/calling-integration.mdx @@ -76,14 +76,14 @@ The `config` prop on `CometChatProvider` accepts a `CometChatGlobalConfig` objec `CometChatMessageHeader` automatically renders voice and video call buttons when calling is enabled. No extra configuration needed — just render the header with a `user` or `group`: ```tsx -import { CometChat } from "@cometchat/chat-sdk-javascript"; +import type { User } from "@cometchat/chat-sdk-javascript"; import { CometChatMessageHeader, CometChatMessageList, CometChatMessageComposer, } from "@cometchat/chat-uikit-react"; -function ChatPanel({ user }: { user: CometChat.User }) { +function ChatPanel({ user }: { user: User }) { return (
@@ -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/audio-bubble.mdx b/ui-kit/react/components/audio-bubble.mdx index 0c5b4e41f..3d7afd903 100644 --- a/ui-kit/react/components/audio-bubble.mdx +++ b/ui-kit/react/components/audio-bubble.mdx @@ -60,10 +60,10 @@ Key capabilities: ## Usage ```tsx -import { CometChat } from "@cometchat/chat-sdk-javascript"; +import type { MediaMessage } from "@cometchat/chat-sdk-javascript"; import { CometChatAudiosBubble } from "@cometchat/chat-uikit-react"; -function AudioFilesMessage({ message }: { message: CometChat.MediaMessage }) { +function AudioFilesMessage({ message }: { message: MediaMessage }) { return ; } ``` diff --git a/ui-kit/react/components/call-action-bubble.mdx b/ui-kit/react/components/call-action-bubble.mdx index c6dc8dfa6..e2a9794c1 100644 --- a/ui-kit/react/components/call-action-bubble.mdx +++ b/ui-kit/react/components/call-action-bubble.mdx @@ -47,10 +47,10 @@ It is the component the [Call Action Plugin](/ui-kit/react/plugins/overview#buil ## Usage ```tsx -import { CometChat } from "@cometchat/chat-sdk-javascript"; +import type { BaseMessage } from "@cometchat/chat-sdk-javascript"; import { CometChatCallActionBubble } from "@cometchat/chat-uikit-react"; -function CallStatusMessage({ message }: { message: CometChat.BaseMessage }) { +function CallStatusMessage({ message }: { message: BaseMessage }) { return ; } ``` diff --git a/ui-kit/react/components/call-bubble.mdx b/ui-kit/react/components/call-bubble.mdx index c4e6b8eae..e10c7fa87 100644 --- a/ui-kit/react/components/call-bubble.mdx +++ b/ui-kit/react/components/call-bubble.mdx @@ -43,10 +43,10 @@ description: "A self-extracting bubble for direct-call / meeting messages, with ## Usage ```tsx -import { CometChat } from "@cometchat/chat-sdk-javascript"; +import type { BaseMessage } from "@cometchat/chat-sdk-javascript"; import { CometChatCallBubble } from "@cometchat/chat-uikit-react"; -function MeetingMessage({ message }: { message: CometChat.BaseMessage }) { +function MeetingMessage({ message }: { message: BaseMessage }) { 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 ( { + onError={(error: CometChatException) => { console.error("CallButtons error:", error); }} /> @@ -208,26 +210,26 @@ The component attaches SDK call listeners internally: ## Call Settings -Customize the calling experience via `callSettingsBuilder`. The builder is forwarded to the internal `CometChatOngoingCall` session. +Customize the calling experience via `callSettingsBuilder`. In v7 this prop takes a session-settings **object** (`SessionSettings`), not a function: `CometChatCallButtons` passes it unchanged to the internal `CometChatOngoingCall` as its `callSettings`. ```tsx -import { CometChat } from "@cometchat/chat-sdk-javascript"; -import { CometChatCallButtons, CometChatUIKitCalls } from "@cometchat/chat-uikit-react"; +import type { User } from "@cometchat/chat-sdk-javascript"; +import { CometChatCallButtons, type SessionSettings } from "@cometchat/chat-uikit-react"; -function CallButtonsCustomSettings({ chatUser }: { chatUser: CometChat.User }) { - return ( - - new CometChatUIKitCalls.CallSettingsBuilder() - .enableDefaultLayout(true) - .setIsAudioOnlyCall(isAudioOnlyCall) - } - /> - ); +const callSettings: SessionSettings = { + layout: "SIDEBAR", + startVideoPaused: true, +}; + +function CallButtonsCustomSettings({ chatUser }: { chatUser: User }) { + 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: CometChat.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/card-bubble.mdx b/ui-kit/react/components/card-bubble.mdx index 2eb011be9..0b9548e9b 100644 --- a/ui-kit/react/components/card-bubble.mdx +++ b/ui-kit/react/components/card-bubble.mdx @@ -46,10 +46,10 @@ In the message list, card messages are routed to this bubble automatically by th Card messages render automatically inside `CometChatMessageList`. To render one directly — for example in a custom layout — pass the SDK `CardMessage` to the bubble: ```tsx -import { CometChat } from "@cometchat/chat-sdk-javascript"; +import type { CardMessage } from "@cometchat/chat-sdk-javascript"; import { CometChatCardBubble } from "@cometchat/chat-uikit-react"; -function CardMessageItem({ message }: { message: CometChat.CardMessage }) { +function CardMessageItem({ message }: { message: CardMessage }) { return ; } ``` @@ -57,16 +57,22 @@ function CardMessageItem({ message }: { message: CometChat.CardMessage }) { To receive card actions without going through the [event bus](/ui-kit/react/event-system), pass an `onCardAction` callback: ```tsx -import { CometChat } from "@cometchat/chat-sdk-javascript"; +import type { CardMessage, BaseMessage } from "@cometchat/chat-sdk-javascript"; import { CometChatCardBubble, - type CometChatCardAction, + type CometChatCardBubbleProps, } from "@cometchat/chat-uikit-react"; -function CardMessageItem({ message }: { message: CometChat.CardMessage }) { +// Derive the action type from the UI Kit's own props, so you don't import +// @cometchat/cards-react (a UI Kit dependency, not one of yours). +type CardBubbleAction = Parameters< + NonNullable +>[1]; + +function CardMessageItem({ message }: { message: CardMessage }) { const handleAction = ( - msg: CometChat.BaseMessage, - action: CometChatCardAction + msg: BaseMessage, + action: CardBubbleAction ) => { // Your app owns the behavior — open a URL, start a call, call an API, etc. console.log("Card action", action, "on message", msg.getId()); diff --git a/ui-kit/react/components/collaborative-document-bubble.mdx b/ui-kit/react/components/collaborative-document-bubble.mdx index 4bc808e9d..445f03096 100644 --- a/ui-kit/react/components/collaborative-document-bubble.mdx +++ b/ui-kit/react/components/collaborative-document-bubble.mdx @@ -47,10 +47,10 @@ description: "A self-extracting bubble that renders a collaborative document car ## Usage ```tsx -import { CometChat } from "@cometchat/chat-sdk-javascript"; +import type { BaseMessage } from "@cometchat/chat-sdk-javascript"; import { CometChatCollaborativeDocumentBubble } from "@cometchat/chat-uikit-react"; -function DocumentMessage({ message }: { message: CometChat.BaseMessage }) { +function DocumentMessage({ message }: { message: BaseMessage }) { return ; } ``` diff --git a/ui-kit/react/components/collaborative-whiteboard-bubble.mdx b/ui-kit/react/components/collaborative-whiteboard-bubble.mdx index 8b0cb0741..44b4260aa 100644 --- a/ui-kit/react/components/collaborative-whiteboard-bubble.mdx +++ b/ui-kit/react/components/collaborative-whiteboard-bubble.mdx @@ -47,10 +47,10 @@ description: "A self-extracting bubble that renders a collaborative whiteboard c ## Usage ```tsx -import { CometChat } from "@cometchat/chat-sdk-javascript"; +import type { BaseMessage } from "@cometchat/chat-sdk-javascript"; import { CometChatCollaborativeWhiteboardBubble } from "@cometchat/chat-uikit-react"; -function WhiteboardMessage({ message }: { message: CometChat.BaseMessage }) { +function WhiteboardMessage({ message }: { message: BaseMessage }) { return ; } ``` diff --git a/ui-kit/react/components/conversations.mdx b/ui-kit/react/components/conversations.mdx index 5f244ff86..e997cd480 100644 --- a/ui-kit/react/components/conversations.mdx +++ b/ui-kit/react/components/conversations.mdx @@ -214,7 +214,7 @@ function Sidebar() { ```tsx import { useState } from "react"; -import { CometChat } from "@cometchat/chat-sdk-javascript"; +import type { User, Group, Conversation } from "@cometchat/chat-sdk-javascript"; import { CometChatConversations, CometChatMessageHeader, @@ -223,18 +223,18 @@ import { } from "@cometchat/chat-uikit-react"; function ChatApp() { - const [user, setUser] = useState(); - const [group, setGroup] = useState(); - const [activeConversation, setActiveConversation] = useState(); + const [user, setUser] = useState(); + const [group, setGroup] = useState(); + const [activeConversation, setActiveConversation] = useState(); - const handleConversationClick = (conversation: CometChat.Conversation) => { + const handleConversationClick = (conversation: Conversation) => { setActiveConversation(conversation); // highlights the open row in the list const entity = conversation.getConversationWith(); if (conversation.getConversationType() === "user") { - setUser(entity as CometChat.User); + setUser(entity as User); setGroup(undefined); } else { - setGroup(entity as CometChat.Group); + setGroup(entity as Group); setUser(undefined); } }; @@ -421,7 +421,7 @@ Customized: ```tsx -import { CometChat } from "@cometchat/chat-sdk-javascript"; +import type { Conversation } from "@cometchat/chat-sdk-javascript"; import { CometChatConversations, CometChatAvatar, @@ -429,7 +429,7 @@ import { } from "@cometchat/chat-uikit-react"; function CustomItemViewConversations() { - const getItemView = (conversation: CometChat.Conversation) => { + const getItemView = (conversation: Conversation) => { const title = conversation.getConversationWith().getName(); const timestamp = conversation?.getLastMessage()?.getSentAt(); @@ -571,14 +571,14 @@ Replace the name / title text. Inline user status example. ```tsx -import { CometChat } from "@cometchat/chat-sdk-javascript"; +import type { Conversation, User } from "@cometchat/chat-sdk-javascript"; import { CometChatConversations } from "@cometchat/chat-uikit-react"; function StatusTitleConversations() { - const getTitleView = (conversation: CometChat.Conversation) => { + const getTitleView = (conversation: Conversation) => { const user = conversation.getConversationType() === "user" - ? (conversation.getConversationWith() as CometChat.User) + ? (conversation.getConversationWith() as User) : undefined; return ( @@ -641,7 +641,7 @@ Customized: ```tsx -import { CometChat } from "@cometchat/chat-sdk-javascript"; +import type { Conversation, User, Group } from "@cometchat/chat-sdk-javascript"; import { CometChatConversations } from "@cometchat/chat-uikit-react"; function formatTimestamp(timestamp: number): string { @@ -649,13 +649,13 @@ function formatTimestamp(timestamp: number): string { } function SubtitleConversations() { - const getSubtitleView = (conversation: CometChat.Conversation) => { + const getSubtitleView = (conversation: Conversation) => { if (conversation.getConversationType() === "user") { return ( Last active:{" "} {new Date( - (conversation.getConversationWith() as CometChat.User).getLastActiveAt() * 1000 + (conversation.getConversationWith() as User).getLastActiveAt() * 1000 ).toLocaleString()} ); @@ -664,7 +664,7 @@ function SubtitleConversations() { Created:{" "} {new Date( - (conversation.getConversationWith() as CometChat.Group).getCreatedAt() * 1000 + (conversation.getConversationWith() as Group).getCreatedAt() * 1000 ).toLocaleString()} ); @@ -698,11 +698,11 @@ Replace the timestamp / badge / right section. Relative time badge example. ```tsx -import { CometChat } from "@cometchat/chat-sdk-javascript"; +import type { Conversation } from "@cometchat/chat-sdk-javascript"; import { CometChatConversations } from "@cometchat/chat-uikit-react"; function RelativeTimeConversations() { - const getTrailingView = (conv: CometChat.Conversation) => { + const getTrailingView = (conv: Conversation) => { if (!conv.getLastMessage()) return <>; const timestamp = conv.getLastMessage()?.getSentAt() * 1000; @@ -800,7 +800,10 @@ function CustomHeaderConversations() { {getLocalizedString("chats")}
{ /* handle click */ }}> - + + {/* Placeholder: point src at an icon in your app's public folder */} + New chat +
} @@ -863,14 +866,14 @@ Customized: ```tsx -import { CometChat } from "@cometchat/chat-sdk-javascript"; +import type { Conversation } from "@cometchat/chat-sdk-javascript"; import { CometChatConversations, type CometChatConversationOption, } from "@cometchat/chat-uikit-react"; function CustomOptionsConversations() { - const getOptions = (conversation: CometChat.Conversation): CometChatConversationOption[] => [ + const getOptions = (conversation: Conversation): CometChatConversationOption[] => [ { id: "delete", title: "Delete", diff --git a/ui-kit/react/components/file-bubble.mdx b/ui-kit/react/components/file-bubble.mdx index f15f3dcb9..d7dd901b2 100644 --- a/ui-kit/react/components/file-bubble.mdx +++ b/ui-kit/react/components/file-bubble.mdx @@ -52,10 +52,10 @@ Key capabilities: ## Usage ```tsx -import { CometChat } from "@cometchat/chat-sdk-javascript"; +import type { MediaMessage } from "@cometchat/chat-sdk-javascript"; import { CometChatFilesBubble } from "@cometchat/chat-uikit-react"; -function FileMessage({ message }: { message: CometChat.MediaMessage }) { +function FileMessage({ message }: { message: MediaMessage }) { return ; } ``` diff --git a/ui-kit/react/components/flag-message-dialog.mdx b/ui-kit/react/components/flag-message-dialog.mdx index 6d5336dbf..1aaf64f1c 100644 --- a/ui-kit/react/components/flag-message-dialog.mdx +++ b/ui-kit/react/components/flag-message-dialog.mdx @@ -42,10 +42,10 @@ Use it when a user chooses "Report" on a message. The parent owns the open state ```tsx lines import { useState } from "react"; -import { CometChat } from "@cometchat/chat-sdk-javascript"; +import type { BaseMessage } from "@cometchat/chat-sdk-javascript"; import { CometChatFlagMessageDialog } from "@cometchat/chat-uikit-react"; -function FlagMessageExample({ message }: { message: CometChat.BaseMessage }) { +function FlagMessageExample({ message }: { message: BaseMessage }) { const [open, setOpen] = useState(false); const handleSubmit = async ( diff --git a/ui-kit/react/components/group-action-bubble.mdx b/ui-kit/react/components/group-action-bubble.mdx index 190edd8fb..23216a32e 100644 --- a/ui-kit/react/components/group-action-bubble.mdx +++ b/ui-kit/react/components/group-action-bubble.mdx @@ -47,10 +47,10 @@ It is the component the [Group Action Plugin](/ui-kit/react/plugins/overview#bui ## Usage ```tsx -import { CometChat } from "@cometchat/chat-sdk-javascript"; +import type { BaseMessage } from "@cometchat/chat-sdk-javascript"; import { CometChatGroupActionBubble } from "@cometchat/chat-uikit-react"; -function GroupActionMessage({ message }: { message: CometChat.BaseMessage }) { +function GroupActionMessage({ message }: { message: BaseMessage }) { return ; } ``` diff --git a/ui-kit/react/components/group-members.mdx b/ui-kit/react/components/group-members.mdx index 0da173864..f69f0b1f5 100644 --- a/ui-kit/react/components/group-members.mdx +++ b/ui-kit/react/components/group-members.mdx @@ -52,9 +52,10 @@ The component handles: ### Flat API ```tsx +import type { Group } from "@cometchat/chat-sdk-javascript"; import { CometChatGroupMembers } from "@cometchat/chat-uikit-react"; -function MemberList({ group }: { group: CometChat.Group }) { +function MemberList({ group }: { group: Group }) { return ( @@ -91,15 +93,12 @@ function MemberList({ group }: { group: CometChat.Group }) { ```tsx import { useState } from "react"; -import { CometChat } from "@cometchat/chat-sdk-javascript"; -import { - CometChatGroupMembers, - CometChatMessages, -} from "@cometchat/chat-uikit-react"; +import type { Group, GroupMember } from "@cometchat/chat-sdk-javascript"; +import { CometChatGroupMembers } from "@cometchat/chat-uikit-react"; -function GroupDetailsPanel({ group }: { group: CometChat.Group }) { +function GroupDetailsPanel({ group }: { group: Group }) { const [selectedMember, setSelectedMember] = useState< - CometChat.GroupMember | undefined + GroupMember | undefined >(); return ( @@ -247,14 +246,14 @@ Customized: ```tsx -import { CometChat } from "@cometchat/chat-sdk-javascript"; +import type { Group, GroupMember } from "@cometchat/chat-sdk-javascript"; import { CometChatAvatar, CometChatGroupMembers, } from "@cometchat/chat-uikit-react"; -function CustomItemViewMembers({ group }: { group: CometChat.Group }) { - const getItemView = (member: CometChat.GroupMember) => { +function CustomItemViewMembers({ group }: { group: Group }) { + const getItemView = (member: GroupMember) => { const scope = member.getScope(); return (
@@ -351,11 +350,11 @@ Customized: ```tsx -import { CometChat } from "@cometchat/chat-sdk-javascript"; +import type { Group, GroupMember } from "@cometchat/chat-sdk-javascript"; import { CometChatGroupMembers } from "@cometchat/chat-uikit-react"; -function SubtitleMembers({ group }: { group: CometChat.Group }) { - const getSubtitleView = (member: CometChat.GroupMember) => { +function SubtitleMembers({ group }: { group: Group }) { + const getSubtitleView = (member: GroupMember) => { const date = new Date(member.getJoinedAt() * 1000).toLocaleDateString(); return
Joined: {date}
; }; @@ -396,11 +395,11 @@ Customized: ```tsx -import { CometChat } from "@cometchat/chat-sdk-javascript"; +import type { Group, GroupMember } from "@cometchat/chat-sdk-javascript"; import { CometChatGroupMembers } from "@cometchat/chat-uikit-react"; -function TrailingViewMembers({ group }: { group: CometChat.Group }) { - const getTrailingView = (member: CometChat.GroupMember) => { +function TrailingViewMembers({ group }: { group: Group }) { + const getTrailingView = (member: GroupMember) => { return (
{member.getScope()} @@ -437,14 +436,14 @@ Replace the entire header bar. ```tsx -import { CometChat } from "@cometchat/chat-sdk-javascript"; +import type { Group } from "@cometchat/chat-sdk-javascript"; import { CometChatGroupMembers, CometChatButton, useLocale, } from "@cometchat/chat-uikit-react"; -function CustomHeaderMembers({ group }: { group: CometChat.Group }) { +function CustomHeaderMembers({ group }: { group: Group }) { const { getLocalizedString } = useLocale(); return ( @@ -456,7 +455,9 @@ function CustomHeaderMembers({ group }: { group: CometChat.Group }) { {getLocalizedString("group_members")}
{ /* handle click */ }}> - + + Add members +
} @@ -500,14 +501,14 @@ Replace the context menu / hover actions on each member item. ```tsx -import { CometChat } from "@cometchat/chat-sdk-javascript"; +import type { Group, GroupMember } from "@cometchat/chat-sdk-javascript"; import { CometChatGroupMembers, type CometChatGroupMemberOption, } from "@cometchat/chat-uikit-react"; -function CustomOptionsMembers({ group }: { group: CometChat.Group }) { - const getOptions = (member: CometChat.GroupMember): CometChatGroupMemberOption[] => [ +function CustomOptionsMembers({ group }: { group: Group }) { + const getOptions = (member: GroupMember): CometChatGroupMemberOption[] => [ { id: "kick", title: "Kick User", diff --git a/ui-kit/react/components/groups.mdx b/ui-kit/react/components/groups.mdx index cc2b6dd51..0a3b8ae83 100644 --- a/ui-kit/react/components/groups.mdx +++ b/ui-kit/react/components/groups.mdx @@ -23,7 +23,7 @@ description: "Searchable, scrollable list of groups with selection support and r ## Overview -`CometChatGroups` is a list component that renders all available groups in the app. It emits the selected `CometChat.Group` via `onItemClick`. Wire it to `CometChatMessages` or use it as a group picker in flows like "join group" or "group details." +`CometChatGroups` is a list component that renders all available groups in the app. It emits the selected `CometChat.Group` via `onItemClick`. Wire it to the message components (`CometChatMessageHeader`, `CometChatMessageList`, `CometChatMessageComposer`) or use it as a group picker in flows like "join group" or "group details." **Live Preview** — interact with the default groups list. @@ -93,7 +93,7 @@ function GroupList() { ```tsx import { useState } from "react"; -import { CometChat } from "@cometchat/chat-sdk-javascript"; +import type { Group } from "@cometchat/chat-sdk-javascript"; import { CometChatGroups, CometChatMessageHeader, @@ -102,7 +102,7 @@ import { } from "@cometchat/chat-uikit-react"; function GroupChat() { - const [group, setGroup] = useState(); + const [group, setGroup] = useState(); return (
@@ -247,11 +247,11 @@ Customized: ```tsx -import { CometChat } from "@cometchat/chat-sdk-javascript"; +import type { Group } from "@cometchat/chat-sdk-javascript"; import { CometChatGroups } from "@cometchat/chat-uikit-react"; function CustomItemViewGroups() { - const getItemView = (group: CometChat.Group) => { + const getItemView = (group: Group) => { return (
@@ -336,11 +336,11 @@ Replace the name / title text. Group type badge inline example. ```tsx -import { CometChat } from "@cometchat/chat-sdk-javascript"; +import type { Group } from "@cometchat/chat-sdk-javascript"; import { CometChatGroups } from "@cometchat/chat-uikit-react"; function GroupTypeTitleGroups() { - const getTitleView = (group: CometChat.Group) => { + const getTitleView = (group: Group) => { return (
{group.getName()} @@ -408,11 +408,11 @@ Customized: ```tsx -import { CometChat } from "@cometchat/chat-sdk-javascript"; +import type { Group } from "@cometchat/chat-sdk-javascript"; import { CometChatGroups } from "@cometchat/chat-uikit-react"; function SubtitleGroups() { - const getSubtitleView = (group: CometChat.Group) => { + const getSubtitleView = (group: Group) => { return (
{group.getMembersCount()} Members • {group.getDescription()} diff --git a/ui-kit/react/components/image-bubble.mdx b/ui-kit/react/components/image-bubble.mdx index e00a2020e..edc864c52 100644 --- a/ui-kit/react/components/image-bubble.mdx +++ b/ui-kit/react/components/image-bubble.mdx @@ -51,10 +51,10 @@ Key capabilities: ## Usage ```tsx -import { CometChat } from "@cometchat/chat-sdk-javascript"; +import type { MediaMessage } from "@cometchat/chat-sdk-javascript"; import { CometChatImagesBubble } from "@cometchat/chat-uikit-react"; -function ImageMessage({ message }: { message: CometChat.MediaMessage }) { +function ImageMessage({ message }: { message: MediaMessage }) { return ; } ``` diff --git a/ui-kit/react/components/incoming-call.mdx b/ui-kit/react/components/incoming-call.mdx index af4260f57..26bbe0504 100644 --- a/ui-kit/react/components/incoming-call.mdx +++ b/ui-kit/react/components/incoming-call.mdx @@ -11,7 +11,7 @@ description: "Displays an incoming call notification with caller info, accept/de | Package | `@cometchat/chat-uikit-react` | | Import | `import { CometChatIncomingCall } from "@cometchat/chat-uikit-react";` | | CSS root class | `.cometchat-incoming-call` | -| Primary output | `onAccept: (call: CometChat.Call) => void` — fires when the call is accepted | +| Primary output | `onAccept: (call: Call) => void` — fires when the call is accepted | | Prerequisites | App wrapped in [`CometChatProvider`](/ui-kit/react/cometchat-provider) with valid credentials + a logged-in user | | Stitching | Mount at the app root to catch incoming calls; wire `onAccept` / `onDecline` | | Events emitted | `ui:call/rejected`, `ui:call/ended` — see [Event System](/ui-kit/react/event-system) | @@ -115,12 +115,14 @@ function ChatApp() { ### Callback Props +`Call` and `CometChatException` are the SDK types — `import type { Call, CometChatException } from "@cometchat/chat-sdk-javascript";`. + | Prop | Signature | Fires when | | --- | --- | --- | -| `onAccept` | `(call: CometChat.Call) => void` | User clicks the accept button | -| `onDecline` | `(call: CometChat.Call) => void` | User clicks the decline button | +| `onAccept` | `(call: Call) => void` | User clicks the accept button | +| `onDecline` | `(call: Call) => void` | User clicks the decline button | | `onCallEnded` | `() => void` | Ongoing call session ends | -| `onError` | `((error: CometChat.CometChatException) => void) \| null` | SDK error occurs | +| `onError` | `((error: CometChatException) => void) \| null` | SDK error occurs | ### Events Emitted @@ -162,11 +164,11 @@ Use view props to replace sections of the default UI while keeping the component | Slot | Signature | Replaces | | --- | --- | --- | -| `itemView` | `(call: CometChat.Call) => ReactNode` | Entire call notification card | -| `leadingView` | `(call: CometChat.Call) => ReactNode` | Avatar section | -| `titleView` | `(call: CometChat.Call) => ReactNode` | Caller name | -| `subtitleView` | `(call: CometChat.Call) => ReactNode` | Call type label | -| `trailingView` | `(call: CometChat.Call) => ReactNode` | Trailing section | +| `itemView` | `(call: Call) => ReactNode` | Entire call notification card | +| `leadingView` | `(call: Call) => ReactNode` | Avatar section | +| `titleView` | `(call: Call) => ReactNode` | Caller name | +| `subtitleView` | `(call: Call) => ReactNode` | Call type label | +| `trailingView` | `(call: Call) => ReactNode` | Trailing section | #### leadingView @@ -175,13 +177,13 @@ Use view props to replace sections of the default UI while keeping the component ```tsx -import { CometChat } from "@cometchat/chat-sdk-javascript"; +import type { Call } from "@cometchat/chat-sdk-javascript"; import { CometChatAvatar, CometChatIncomingCall } from "@cometchat/chat-uikit-react"; function CustomLeadingIncoming() { return ( ( + leadingView={(call: Call) => ( ```tsx -import { CometChat } from "@cometchat/chat-sdk-javascript"; +import type { Call } from "@cometchat/chat-sdk-javascript"; import { CometChatIncomingCall } from "@cometchat/chat-uikit-react"; function CustomTitleIncoming() { return ( ( + titleView={(call: Call) => (
{call.getCallInitiator()?.getName()}
)} /> @@ -223,13 +225,13 @@ function CustomTitleIncoming() { ```tsx -import { CometChat } from "@cometchat/chat-sdk-javascript"; +import type { Call } from "@cometchat/chat-sdk-javascript"; import { CometChatAvatar, CometChatIncomingCall } from "@cometchat/chat-uikit-react"; function CustomItemViewIncoming() { return ( ( + itemView={(call: Call) => (
void` | +| Type | `(call: Call) => void` | | Default | `undefined` | --- @@ -290,7 +292,7 @@ Custom decline handler. When provided, overrides the default `CometChat.rejectCa | | | | --- | --- | -| Type | `(call: CometChat.Call) => void` | +| Type | `(call: Call) => void` | | Default | `undefined` | --- @@ -330,24 +332,32 @@ Custom sound URL to play for incoming calls (replaces the built-in ringtone). ### callSettingsBuilder -Custom call settings builder for the ongoing call session after accepting. If not provided, the component uses default settings. +Meant to customize the session that starts when the call is accepted: a function that receives the call and returns session settings (`SessionSettings`, the same object [`CometChatCallButtons`](/ui-kit/react/components/call-buttons#call-settings) takes). | | | | --- | --- | -| Type | `(call: CometChat.Call) => any` | +| Type | `(call: Call) => SessionSettings` | | Default | `undefined` | + +In 7.2.4 the value this function returns is not applied: `CometChatIncomingCall` hands it to the ongoing call under a prop name the ongoing call does not read, so an accepted call uses the global or default settings. Set session settings for every call on `CometChatProvider` instead, which the ongoing call does read: + ```tsx - { - return new CometChat.CallSettingsBuilder() - .enableDefaultLayout(true) - .setIsAudioOnlyCall(call.getType() === "audio") - .build(); - }} -/> +import { CometChatProvider, type SessionSettings } from "@cometchat/chat-uikit-react"; + +const callSettings: SessionSettings = { + layout: "SIDEBAR", + startVideoPaused: true, +}; + + + {/* ...your app, including */} + ``` +`CometChat.CallSettingsBuilder` belongs to the older Calls SDK v4 integration; v7 calling takes a plain `SessionSettings` object. + + --- ### onError @@ -356,7 +366,7 @@ Callback when an SDK error occurs. | | | | --- | --- | -| Type | `((error: CometChat.CometChatException) => void) \| null` | +| Type | `((error: CometChatException) => void) \| null` | | Default | `null` | --- @@ -367,7 +377,7 @@ Custom renderer for the entire incoming call notification card. | | | | --- | --- | -| Type | `(call: CometChat.Call) => ReactNode` | +| Type | `(call: Call) => ReactNode` | | Default | `undefined` | --- @@ -378,7 +388,7 @@ Custom renderer for the avatar section. | | | | --- | --- | -| Type | `(call: CometChat.Call) => ReactNode` | +| Type | `(call: Call) => ReactNode` | | Default | `undefined` | --- @@ -389,7 +399,7 @@ Custom renderer for the caller name. | | | | --- | --- | -| Type | `(call: CometChat.Call) => ReactNode` | +| Type | `(call: Call) => ReactNode` | | Default | `undefined` | --- @@ -400,7 +410,7 @@ Custom renderer for the call type label (Voice/Video). | | | | --- | --- | -| Type | `(call: CometChat.Call) => ReactNode` | +| Type | `(call: Call) => ReactNode` | | Default | `undefined` | --- @@ -411,7 +421,7 @@ Custom renderer for the trailing section. | | | | --- | --- | -| Type | `(call: CometChat.Call) => ReactNode` | +| Type | `(call: Call) => ReactNode` | | Default | `undefined` | --- diff --git a/ui-kit/react/components/message-composer.mdx b/ui-kit/react/components/message-composer.mdx index ebd0d658a..892cb3317 100644 --- a/ui-kit/react/components/message-composer.mdx +++ b/ui-kit/react/components/message-composer.mdx @@ -170,9 +170,10 @@ The component handles: ### Flat API ```tsx +import type { User } from "@cometchat/chat-sdk-javascript"; import { CometChatMessageComposer } from "@cometchat/chat-uikit-react"; -function ChatPanel({ user }: { user: CometChat.User }) { +function ChatPanel({ user }: { user: User }) { return ( @@ -200,7 +202,6 @@ function ChatPanel({ user }: { user: CometChat.User }) { - @@ -212,7 +213,7 @@ function ChatPanel({ user }: { user: CometChat.User }) { ```tsx import { useState } from "react"; -import { CometChat } from "@cometchat/chat-sdk-javascript"; +import type { User, Group, Conversation } from "@cometchat/chat-sdk-javascript"; import { CometChatConversations, CometChatMessageHeader, @@ -221,16 +222,16 @@ import { } from "@cometchat/chat-uikit-react"; function ChatApp() { - const [user, setUser] = useState(); - const [group, setGroup] = useState(); + const [user, setUser] = useState(); + const [group, setGroup] = useState(); - const handleConversationClick = (conversation: CometChat.Conversation) => { + const handleConversationClick = (conversation: Conversation) => { const entity = conversation.getConversationWith(); if (conversation.getConversationType() === "user") { - setUser(entity as CometChat.User); + setUser(entity as User); setGroup(undefined); } else { - setGroup(entity as CometChat.Group); + setGroup(entity as Group); setUser(undefined); } }; @@ -406,10 +407,10 @@ Override the default attachment options. ```tsx -import { CometChat } from "@cometchat/chat-sdk-javascript"; +import type { User } from "@cometchat/chat-sdk-javascript"; import { CometChatMessageComposer } from "@cometchat/chat-uikit-react"; -function ComposerCustomAttachments({ chatUser }: { chatUser: CometChat.User }) { +function ComposerCustomAttachments({ chatUser }: { chatUser: User }) { return ( ```tsx -import { CometChat } from "@cometchat/chat-sdk-javascript"; +import type { User } from "@cometchat/chat-sdk-javascript"; import { CometChatMessageComposer, CometChatButton } from "@cometchat/chat-uikit-react"; -function ComposerCustomAuxiliary({ chatUser }: { chatUser: CometChat.User }) { +function ComposerCustomAuxiliary({ chatUser }: { chatUser: User }) { return ( {}}> - + + Stickers + } /> @@ -457,11 +460,12 @@ function ComposerCustomAuxiliary({ chatUser }: { chatUser: CometChat.User }) { Render a node at the trailing end of the rich-text formatting toolbar, after the built-in buttons and an auto-inserted separator. This is the place for a button that drives a custom formatter from `textFormatters` — for example, a color button that wraps the selected text. ```tsx +import type { User } from "@cometchat/chat-sdk-javascript"; import { CometChatMessageComposer } from "@cometchat/chat-uikit-react"; import { ColorFormatter } from "./formatters/ColorFormatter"; import { ColorButton } from "./components/ColorButton"; -function ComposerWithColor({ chatUser }: { chatUser: CometChat.User }) { +function ComposerWithColor({ chatUser }: { chatUser: User }) { return ( ```tsx -import { CometChat } from "@cometchat/chat-sdk-javascript"; +import type { User } from "@cometchat/chat-sdk-javascript"; import { CometChatMessageComposer, CometChatButton } from "@cometchat/chat-uikit-react"; -function ComposerCustomSend({ chatUser }: { chatUser: CometChat.User }) { +function ComposerCustomSend({ chatUser }: { chatUser: User }) { return ( {}}> - + + Send + } /> @@ -530,7 +536,6 @@ Available sub-components: | `EditPreview` | Edit mode preview banner | `className` | — | | `ReplyPreview` | Reply mode preview banner | `className` | — | | `AuxiliaryButtons` | Custom auxiliary buttons | `children`, `className` | `auxiliaryButtonView` | -| `AIButton` | AI features toggle | `className` | — | | `Header` | Header area | `children`, `className` | `headerView` | | `Footer` | Footer area | `children`, `className` | — | diff --git a/ui-kit/react/components/message-header.mdx b/ui-kit/react/components/message-header.mdx index b937d8a84..97b85d112 100644 --- a/ui-kit/react/components/message-header.mdx +++ b/ui-kit/react/components/message-header.mdx @@ -28,9 +28,9 @@ description: "Toolbar displaying conversation details with avatar, name, presenc "note": "For group conversations. Mutually exclusive with user." }, "callSettingsBuilder": { - "type": "any", + "type": "SessionSettings (typed any in the 7.2.4 declarations)", "default": "GlobalConfig.callSettingsBuilder or built-in default", - "note": "Custom call settings builder for ongoing call sessions." + "note": "Session-settings object (not a function) for calls started from the header; passed unchanged to CometChatCallButtons, which hands it to CometChatOngoingCall as callSettings." }, "lastActiveAtDateTimeFormat": { "type": "CometChatDateFormatConfig", @@ -197,9 +197,10 @@ The component handles: ### Flat API (User Conversation) ```tsx +import type { User } from "@cometchat/chat-sdk-javascript"; import { CometChatMessageHeader } from "@cometchat/chat-uikit-react"; -function MessagePanel({ user }: { user: CometChat.User }) { +function MessagePanel({ user }: { user: User }) { return ( navigateBack()}> @@ -250,7 +253,7 @@ function CustomHeader({ user }: { user: CometChat.User }) { ```tsx import { useState } from "react"; -import { CometChat } from "@cometchat/chat-sdk-javascript"; +import type { User, Group, Conversation } from "@cometchat/chat-sdk-javascript"; import { CometChatConversations, CometChatMessageHeader, @@ -259,16 +262,16 @@ import { } from "@cometchat/chat-uikit-react"; function ChatApp() { - const [user, setUser] = useState(); - const [group, setGroup] = useState(); + const [user, setUser] = useState(); + const [group, setGroup] = useState(); - const handleConversationClick = (conversation: CometChat.Conversation) => { + const handleConversationClick = (conversation: Conversation) => { const entity = conversation.getConversationWith(); if (conversation.getConversationType() === "user") { - setUser(entity as CometChat.User); + setUser(entity as User); setGroup(undefined); } else { - setGroup(entity as CometChat.Group); + setGroup(entity as Group); setUser(undefined); } }; @@ -374,10 +377,10 @@ Combine `leadingView`, `titleView`, and `subtitleView` to fully replace the head ```tsx -import { CometChat } from "@cometchat/chat-sdk-javascript"; +import type { User } from "@cometchat/chat-sdk-javascript"; import { CometChatMessageHeader, CometChatAvatar } from "@cometchat/chat-uikit-react"; -function CustomItemViewHeader({ user }: { user: CometChat.User }) { +function CustomItemViewHeader({ user }: { user: User }) { return ( ```tsx -import { CometChat } from "@cometchat/chat-sdk-javascript"; +import type { User } from "@cometchat/chat-sdk-javascript"; import { CometChatMessageHeader } from "@cometchat/chat-uikit-react"; -function CustomTitleHeader({ user }: { user: CometChat.User }) { +function CustomTitleHeader({ user }: { user: User }) { return ( ```tsx -import { CometChat } from "@cometchat/chat-sdk-javascript"; +import type { Group } from "@cometchat/chat-sdk-javascript"; import { CometChatMessageHeader } from "@cometchat/chat-uikit-react"; -function CustomSubtitleHeader({ group }: { group: CometChat.Group }) { +function CustomSubtitleHeader({ group }: { group: Group }) { return ( ```tsx -import { CometChat } from "@cometchat/chat-sdk-javascript"; +import type { User } from "@cometchat/chat-sdk-javascript"; import { CometChatMessageHeader, CometChatAvatar } from "@cometchat/chat-uikit-react"; -function CustomLeadingHeader({ user }: { user: CometChat.User }) { +function CustomLeadingHeader({ user }: { user: User }) { return ( @@ -296,7 +298,7 @@ function ChatPanel({ group }: { group: CometChat.Group }) { ```tsx import { useState } from "react"; -import { CometChat } from "@cometchat/chat-sdk-javascript"; +import type { User, Group, BaseMessage, Conversation } from "@cometchat/chat-sdk-javascript"; import { CometChatConversations, CometChatMessageHeader, @@ -305,17 +307,17 @@ import { } from "@cometchat/chat-uikit-react"; function ChatApp() { - const [user, setUser] = useState(); - const [group, setGroup] = useState(); - const [threadMessage, setThreadMessage] = useState(); + const [user, setUser] = useState(); + const [group, setGroup] = useState(); + const [threadMessage, setThreadMessage] = useState(); - const handleConversationClick = (conversation: CometChat.Conversation) => { + const handleConversationClick = (conversation: Conversation) => { const entity = conversation.getConversationWith(); if (conversation.getConversationType() === "user") { - setUser(entity as CometChat.User); + setUser(entity as User); setGroup(undefined); } else { - setGroup(entity as CometChat.Group); + setGroup(entity as Group); setUser(undefined); } setThreadMessage(undefined); @@ -627,10 +629,10 @@ Custom view below the message list. ```tsx -import { CometChat } from "@cometchat/chat-sdk-javascript"; +import type { User } from "@cometchat/chat-sdk-javascript"; import { CometChatMessageList, CometChatButton } from "@cometchat/chat-uikit-react"; -function MessageListWithFooter({ chatUser }: { chatUser: CometChat.User }) { +function MessageListWithFooter({ chatUser }: { chatUser: User }) { return ( ```tsx -import { CometChat } from "@cometchat/chat-sdk-javascript"; +import type { Call } from "@cometchat/chat-sdk-javascript"; import { CometChatOutgoingCall } from "@cometchat/chat-uikit-react"; -function OutgoingCallCustomTitle({ call }: { call: CometChat.Call }) { +function OutgoingCallCustomTitle({ call }: { call: Call }) { return ( ```tsx -import { CometChat } from "@cometchat/chat-sdk-javascript"; +import type { Call } from "@cometchat/chat-sdk-javascript"; import { CometChatOutgoingCall } from "@cometchat/chat-uikit-react"; -function OutgoingCallCustomSubtitle({ call }: { call: CometChat.Call }) { +function OutgoingCallCustomSubtitle({ call }: { call: Call }) { return ( ```tsx -import { CometChat } from "@cometchat/chat-sdk-javascript"; +import type { Call, User } from "@cometchat/chat-sdk-javascript"; import { CometChatOutgoingCall, CometChatAvatar } from "@cometchat/chat-uikit-react"; -function OutgoingCallCustomAvatar({ call }: { call: CometChat.Call }) { +function OutgoingCallCustomAvatar({ call }: { call: Call }) { return ( diff --git a/ui-kit/react/components/pinned-messages.mdx b/ui-kit/react/components/pinned-messages.mdx index 6b998d12a..75dbb3fb4 100644 --- a/ui-kit/react/components/pinned-messages.mdx +++ b/ui-kit/react/components/pinned-messages.mdx @@ -140,14 +140,14 @@ Pinning must be enabled for your app through the `features.ux.messages.pinned.en Pass the `user` or `group` whose pins you want to show. ```tsx -import { CometChat } from "@cometchat/chat-sdk-javascript"; +import type { Group } from "@cometchat/chat-sdk-javascript"; import { CometChatPinnedMessages } from "@cometchat/chat-uikit-react"; function PinnedPanel({ group, onClose, }: { - group: CometChat.Group; + group: Group; onClose: () => void; }) { return ; @@ -176,12 +176,13 @@ Wire the panel to the header's pinned-messages action with `onPinnedMessagesClic ```tsx import { useState } from "react"; +import type { Group } from "@cometchat/chat-sdk-javascript"; import { CometChatMessageHeader, CometChatPinnedMessages, } from "@cometchat/chat-uikit-react"; -function ChatWithPins({ group }: { group: CometChat.Group }) { +function ChatWithPins({ group }: { group: Group }) { const [showPins, setShowPins] = useState(false); return ( diff --git a/ui-kit/react/components/poll-bubble.mdx b/ui-kit/react/components/poll-bubble.mdx index f3c371d70..0b077a7ba 100644 --- a/ui-kit/react/components/poll-bubble.mdx +++ b/ui-kit/react/components/poll-bubble.mdx @@ -47,10 +47,10 @@ description: "A self-extracting bubble that renders a poll with its question, se ## Usage ```tsx -import { CometChat } from "@cometchat/chat-sdk-javascript"; +import type { CustomMessage } from "@cometchat/chat-sdk-javascript"; import { CometChatPollBubble } from "@cometchat/chat-uikit-react"; -function PollMessage({ message }: { message: CometChat.CustomMessage }) { +function PollMessage({ message }: { message: CustomMessage }) { return ( (); - const [group, setGroup] = useState(); + const [user, setUser] = useState(); + const [group, setGroup] = useState(); return (
@@ -138,10 +138,10 @@ function ChatApp() { onConversationClicked={(event) => { const entity = event.conversation.getConversationWith(); if (event.conversation.getConversationType() === "user") { - setUser(entity as CometChat.User); + setUser(entity as User); setGroup(undefined); } else { - setGroup(entity as CometChat.Group); + setGroup(entity as Group); setUser(undefined); } setShowSearch(false); @@ -154,10 +154,10 @@ function ChatApp() { onItemClick={(conversation) => { const entity = conversation.getConversationWith(); if (conversation.getConversationType() === "user") { - setUser(entity as CometChat.User); + setUser(entity as User); setGroup(undefined); } else { - setGroup(entity as CometChat.Group); + setGroup(entity as Group); setUser(undefined); } }} @@ -365,11 +365,11 @@ Replace the message avatar / left section. ```tsx -import { CometChat } from "@cometchat/chat-sdk-javascript"; +import type { BaseMessage } from "@cometchat/chat-sdk-javascript"; import { CometChatSearch } from "@cometchat/chat-uikit-react"; function SearchCustomMessageLeading() { - const getMessageLeadingView = (message: CometChat.BaseMessage) => ( + const getMessageLeadingView = (message: BaseMessage) => (
@@ -410,11 +410,11 @@ Replace the message title text. ```tsx -import { CometChat } from "@cometchat/chat-sdk-javascript"; +import type { BaseMessage } from "@cometchat/chat-sdk-javascript"; import { CometChatSearch } from "@cometchat/chat-uikit-react"; function SearchCustomMessageTitle() { - const getMessageTitleView = (message: CometChat.BaseMessage) => ( + const getMessageTitleView = (message: BaseMessage) => (
{message.getSender()?.getName()} diff --git a/ui-kit/react/components/sticker-bubble.mdx b/ui-kit/react/components/sticker-bubble.mdx index 23836999c..2d287e6fa 100644 --- a/ui-kit/react/components/sticker-bubble.mdx +++ b/ui-kit/react/components/sticker-bubble.mdx @@ -47,10 +47,10 @@ description: "A self-extracting bubble that renders a sticker image from a stick ## Usage ```tsx -import { CometChat } from "@cometchat/chat-sdk-javascript"; +import type { CustomMessage } from "@cometchat/chat-sdk-javascript"; import { CometChatStickerBubble } from "@cometchat/chat-uikit-react"; -function StickerMessage({ message }: { message: CometChat.CustomMessage }) { +function StickerMessage({ message }: { message: CustomMessage }) { return ; } ``` diff --git a/ui-kit/react/components/text-bubble.mdx b/ui-kit/react/components/text-bubble.mdx index 92f61052a..bc8090eea 100644 --- a/ui-kit/react/components/text-bubble.mdx +++ b/ui-kit/react/components/text-bubble.mdx @@ -45,10 +45,10 @@ Text is run through the formatter pipeline — markdown (`**bold**`, `_italic_`, ## Usage ```tsx -import { CometChat } from "@cometchat/chat-sdk-javascript"; +import type { BaseMessage } from "@cometchat/chat-sdk-javascript"; import { CometChatTextBubble } from "@cometchat/chat-uikit-react"; -function TextMessage({ message }: { message: CometChat.BaseMessage }) { +function TextMessage({ message }: { message: BaseMessage }) { return ; } ``` diff --git a/ui-kit/react/components/thread-header.mdx b/ui-kit/react/components/thread-header.mdx index cb9f8c297..1ad4023d0 100644 --- a/ui-kit/react/components/thread-header.mdx +++ b/ui-kit/react/components/thread-header.mdx @@ -138,13 +138,14 @@ The component handles: ### Flat API ```tsx +import type { BaseMessage } from "@cometchat/chat-sdk-javascript"; import { CometChatThreadHeader } from "@cometchat/chat-uikit-react"; function ThreadPanel({ parentMessage, onClose, }: { - parentMessage: CometChat.BaseMessage; + parentMessage: BaseMessage; onClose: () => void; }) { return ( @@ -159,13 +160,14 @@ function ThreadPanel({ ### Compound Composition ```tsx +import type { BaseMessage } from "@cometchat/chat-sdk-javascript"; import { CometChatThreadHeader } from "@cometchat/chat-uikit-react"; function ThreadPanel({ parentMessage, onClose, }: { - parentMessage: CometChat.BaseMessage; + parentMessage: BaseMessage; onClose: () => void; }) { return ( @@ -185,8 +187,7 @@ function ThreadPanel({ ### Full Layout Example ```tsx -import { useState } from "react"; -import { CometChat } from "@cometchat/chat-sdk-javascript"; +import type { BaseMessage, User, Group } from "@cometchat/chat-sdk-javascript"; import { CometChatThreadHeader, CometChatMessageList, @@ -199,9 +200,9 @@ function ThreadView({ group, onClose, }: { - parentMessage: CometChat.BaseMessage; - user?: CometChat.User; - group?: CometChat.Group; + parentMessage: BaseMessage; + user?: User; + group?: Group; onClose: () => void; }) { const parentMessageId = parentMessage.getId(); @@ -305,10 +306,10 @@ Use view props to replace sections of the default UI while keeping the component Replace the parent message bubble with a custom view. ```tsx -import { CometChat } from "@cometchat/chat-sdk-javascript"; +import type { BaseMessage } from "@cometchat/chat-sdk-javascript"; import { CometChatThreadHeader } from "@cometchat/chat-uikit-react"; -function CustomBubbleThread({ parentMessage }: { parentMessage: CometChat.BaseMessage }) { +function CustomBubbleThread({ parentMessage }: { parentMessage: BaseMessage }) { return ( **Live Preview** — interact with the default users list. @@ -93,7 +93,7 @@ function UserPicker() { ```tsx import { useState } from "react"; -import { CometChat } from "@cometchat/chat-sdk-javascript"; +import type { User } from "@cometchat/chat-sdk-javascript"; import { CometChatUsers, CometChatMessageHeader, @@ -102,7 +102,7 @@ import { } from "@cometchat/chat-uikit-react"; function NewChat() { - const [user, setUser] = useState(); + const [user, setUser] = useState(); return (
@@ -241,11 +241,11 @@ Customized: ```tsx -import { CometChat } from "@cometchat/chat-sdk-javascript"; +import type { User } from "@cometchat/chat-sdk-javascript"; import { CometChatUsers } from "@cometchat/chat-uikit-react"; function UsersDemo() { - const getItemView = (user: CometChat.User) => { + const getItemView = (user: User) => { const status = user.getStatus(); return ( @@ -291,11 +291,11 @@ Replace the avatar / left section. ```tsx -import { CometChat } from "@cometchat/chat-sdk-javascript"; +import type { User } from "@cometchat/chat-sdk-javascript"; import { CometChatUsers, CometChatAvatar } from "@cometchat/chat-uikit-react"; function LeadingViewUsers() { - const getLeadingView = (user: CometChat.User) => { + const getLeadingView = (user: User) => { return (
@@ -336,11 +336,11 @@ Replace the name / title text. Role badge inline example. ```tsx -import { CometChat } from "@cometchat/chat-sdk-javascript"; +import type { User } from "@cometchat/chat-sdk-javascript"; import { CometChatUsers } from "@cometchat/chat-uikit-react"; function TitleViewUsers() { - const getTitleView = (user: CometChat.User) => { + const getTitleView = (user: User) => { return (
{user.getName()} @@ -403,11 +403,11 @@ Customized: ```tsx -import { CometChat } from "@cometchat/chat-sdk-javascript"; +import type { User } from "@cometchat/chat-sdk-javascript"; import { CometChatUsers } from "@cometchat/chat-uikit-react"; function SubtitleViewUsers() { - const getSubtitleView = (user: CometChat.User) => { + const getSubtitleView = (user: User) => { return (
{user.getStatusMessage() || user.getStatus()} @@ -443,11 +443,11 @@ Replace the right section. ```tsx -import { CometChat } from "@cometchat/chat-sdk-javascript"; +import type { User } from "@cometchat/chat-sdk-javascript"; import { CometChatUsers } from "@cometchat/chat-uikit-react"; function TrailingViewUsers() { - const getTrailingView = (user: CometChat.User) => { + const getTrailingView = (user: User) => { const tag = user.getTags()?.[0] ?? ""; return (
diff --git a/ui-kit/react/components/video-bubble.mdx b/ui-kit/react/components/video-bubble.mdx index c06aae093..90bf286dd 100644 --- a/ui-kit/react/components/video-bubble.mdx +++ b/ui-kit/react/components/video-bubble.mdx @@ -57,10 +57,10 @@ Auto poster thumbnails are produced by the **Thumbnail Generation** extension ## Usage ```tsx -import { CometChat } from "@cometchat/chat-sdk-javascript"; +import type { MediaMessage } from "@cometchat/chat-sdk-javascript"; import { CometChatVideosBubble } from "@cometchat/chat-uikit-react"; -function VideoMessage({ message }: { message: CometChat.MediaMessage }) { +function VideoMessage({ message }: { message: MediaMessage }) { return ; } ``` diff --git a/ui-kit/react/components/voice-note-bubble.mdx b/ui-kit/react/components/voice-note-bubble.mdx index 1b8efa6c1..29843de14 100644 --- a/ui-kit/react/components/voice-note-bubble.mdx +++ b/ui-kit/react/components/voice-note-bubble.mdx @@ -65,10 +65,10 @@ Key characteristics: ## Usage ```tsx -import { CometChat } from "@cometchat/chat-sdk-javascript"; +import type { MediaMessage } from "@cometchat/chat-sdk-javascript"; import { CometChatVoiceNoteBubble } from "@cometchat/chat-uikit-react"; -function VoiceNoteMessage({ message }: { message: CometChat.MediaMessage }) { +function VoiceNoteMessage({ message }: { message: MediaMessage }) { return ; } ``` @@ -142,10 +142,10 @@ Additional CSS class applied to the root element. Voice notes render with the `CometChatAudioBubble` waveform player — a compact single-audio player with play/pause controls, a waveform progress bar, elapsed/total time, and a download control. It self-extracts the audio attachment from the `message`, so it can also be used standalone to render a single audio waveform. ```tsx -import { CometChat } from "@cometchat/chat-sdk-javascript"; +import type { MediaMessage } from "@cometchat/chat-sdk-javascript"; import { CometChatAudioBubble } from "@cometchat/chat-uikit-react"; -function Waveform({ message }: { message: CometChat.MediaMessage }) { +function Waveform({ message }: { message: MediaMessage }) { return ; } ``` diff --git a/ui-kit/react/guide-custom-text-formatter.mdx b/ui-kit/react/guide-custom-text-formatter.mdx index 69ac375c1..424a26518 100644 --- a/ui-kit/react/guide-custom-text-formatter.mdx +++ b/ui-kit/react/guide-custom-text-formatter.mdx @@ -331,12 +331,12 @@ _File: ChatScreen.tsx_ ```tsx import { useMemo } from "react"; -import type { CometChat } from "@cometchat/chat-sdk-javascript"; +import type { Group } from "@cometchat/chat-sdk-javascript"; import { CometChatMessageComposer, CometChatMessageList } from "@cometchat/chat-uikit-react"; import { ColorFormatter } from "./formatters/ColorFormatter"; import { ColorPickerButton } from "./formatters/ColorPickerButton"; -function ChatScreen({ group }: { group: CometChat.Group }) { +function ChatScreen({ group }: { group: Group }) { // One instance, shared by the list, the composer, and the button. const colorFormatter = useMemo(() => new ColorFormatter(), []); const formatters = useMemo(() => [colorFormatter], [colorFormatter]); diff --git a/ui-kit/react/guide-group-chat-setup.mdx b/ui-kit/react/guide-group-chat-setup.mdx index b67873882..9f26ff8cd 100644 --- a/ui-kit/react/guide-group-chat-setup.mdx +++ b/ui-kit/react/guide-group-chat-setup.mdx @@ -36,8 +36,6 @@ By the end of this guide you will have a working group chat where users can crea Wrap your application in `CometChatProvider` and create a layout with a sidebar for conversations and a main area for messages. ```tsx App.tsx -import { useState } from "react"; -import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatProvider } from "@cometchat/chat-uikit-react"; import { GroupChat } from "./GroupChat"; @@ -65,6 +63,8 @@ A group has one of three types, and the type decides how other users can get in. Create a group with `CometChat.createGroup()`. The `CometChat.Group` constructor takes a **fourth `password` argument** — it is required for password-protected groups and ignored for the other two types. ```tsx +import { CometChat } from "@cometchat/chat-sdk-javascript"; + async function createGroup( name: string, type: string, @@ -100,6 +100,8 @@ When a group is created through the UI Kit's built-in flow, it publishes the `ui The creator becomes the group **owner** (with admin privileges). Add members with `CometChat.addMembersToGroup()` — each member is a `CometChat.GroupMember` with a UID and a scope (`ADMIN`, `MODERATOR`, or `PARTICIPANT`). ```tsx +import { CometChat } from "@cometchat/chat-sdk-javascript"; + async function addMembers(guid: string, memberUids: string[]) { const members = memberUids.map( (uid) => @@ -124,6 +126,8 @@ Adding members requires an **admin** or **moderator** scope in the target group How a user joins depends on the group type: ```tsx +import { CometChat, type GroupType } from "@cometchat/chat-sdk-javascript"; + async function joinGroup(group: CometChat.Group, password = "") { const guid = group.getGuid(); const type = group.getType(); @@ -136,7 +140,8 @@ async function joinGroup(group: CometChat.Group, password = "") { try { // Pass the password only for password-protected groups; "" for public. - const joined = await CometChat.joinGroup(guid, type, password); + // getType() returns a string; joinGroup() takes the GroupType enum. + const joined = await CometChat.joinGroup(guid, type as GroupType, password); console.log("Joined group:", joined.getName()); return joined; } catch (error) { @@ -155,9 +160,10 @@ Only **public** and **password-protected** groups can be joined. A **private** g The `CometChatGroupMembers` component renders the member list with built-in **kick**, **ban**, and **change-scope** actions. It shows or hides those actions based on the **logged-in user's role**, so you don't have to gate them yourself. ```tsx +import type { Group } from "@cometchat/chat-sdk-javascript"; import { CometChatGroupMembers } from "@cometchat/chat-uikit-react"; -function GroupMembersPanel({ group }: { group: CometChat.Group }) { +function GroupMembersPanel({ group }: { group: Group }) { return ( (null); function handleConversationClick(conversation: CometChat.Conversation) { @@ -264,13 +276,14 @@ function GroupChat() { Combine `CometChatMessageList` and `CometChatMessageComposer` to display messages and allow sending within the selected group. ```tsx +import type { Group } from "@cometchat/chat-sdk-javascript"; import { CometChatMessageList, CometChatMessageComposer, CometChatMessageHeader, } from "@cometchat/chat-uikit-react"; -function GroupMessageView({ group }: { group: CometChat.Group }) { +function GroupMessageView({ group }: { group: Group }) { return (
diff --git a/ui-kit/react/guide-message-privately.mdx b/ui-kit/react/guide-message-privately.mdx index ae0bf8111..939cc1655 100644 --- a/ui-kit/react/guide-message-privately.mdx +++ b/ui-kit/react/guide-message-privately.mdx @@ -29,16 +29,10 @@ By the end of this guide you will have a group chat interface where users can se Start with a layout that includes a conversations sidebar and a main chat area wrapped in `CometChatProvider`. ```tsx App.tsx -import { useState } from "react"; -import { CometChat } from "@cometchat/chat-sdk-javascript"; -import { - CometChatProvider, - CometChatConversations, - CometChatMessageList, - CometChatMessageComposer, - CometChatMessageHeader, -} from "@cometchat/chat-uikit-react"; +import { CometChatProvider } from "@cometchat/chat-uikit-react"; +// ChatWithPrivateMessaging is built up in the same file in Steps 2–6 +// (see the Complete Example below). function App() { return ( @@ -54,8 +48,9 @@ export default App; Maintain state for the active group conversation and a separate state for the private user when a user initiates a private message. -```tsx ChatWithPrivateMessaging.tsx +```tsx App.tsx import { useState } from "react"; +// A value import: Steps 3 and 4 use CometChat.getUser and instanceof. import { CometChat } from "@cometchat/chat-sdk-javascript"; function ChatWithPrivateMessaging() { @@ -88,7 +83,7 @@ function handleConversationClick(conversation: CometChat.Conversation) { ## Step 4: Initiate a private message from a group member -Use the message header or a custom action to let users pick a group member for private messaging. You can fetch the user from a member click event or from the message sender's info. +Optional: the built-in **Message Privately** option opens the panel through the event in Step 5. For your own trigger (a member list, a custom action), fetch the user by UID and open the panel. The Complete Example below leaves this out, since an unused function fails a strict build. ```tsx async function handleMessagePrivately(uid: string) { @@ -189,15 +184,8 @@ function ChatWithPrivateMessaging() { } } - async function handleMessagePrivately(uid: string) { - try { - const targetUser = await CometChat.getUser(uid); - setPrivateUser(targetUser); - } catch (error) { - console.error("Failed to fetch user for private messaging:", error); - } - } - + // To open the panel from your own trigger, add handleMessagePrivately from + // Step 4 here and call it; the built-in option arrives through the event below. useCometChatEvents( (event: CometChatEvent) => { if (event.type === "ui:open-chat" && event.user) { diff --git a/ui-kit/react/guide-new-chat-creation.mdx b/ui-kit/react/guide-new-chat-creation.mdx index 67d708109..dc98c3863 100644 --- a/ui-kit/react/guide-new-chat-creation.mdx +++ b/ui-kit/react/guide-new-chat-creation.mdx @@ -31,8 +31,6 @@ By the end of this guide you will have a chat interface where users can initiate Wrap your application in `CometChatProvider` and create a layout that will hold the conversation area and a trigger for starting new chats. ```tsx App.tsx -import { useState } from "react"; -import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatProvider } from "@cometchat/chat-uikit-react"; import { NewChatApp } from "./NewChatApp"; @@ -60,7 +58,7 @@ type ChatTarget = | { type: "user"; entity: CometChat.User } | { type: "group"; entity: CometChat.Group }; -function NewChatApp() { +export function NewChatApp() { const [showNewChat, setShowNewChat] = useState(false); const [activeChat, setActiveChat] = useState(null); @@ -122,7 +120,7 @@ Use `CometChatUsers` and `CometChatGroups` to let the user pick a chat target. A ```tsx UserGroupSelector.tsx import { useState } from "react"; -import { CometChat } from "@cometchat/chat-sdk-javascript"; +import type { User, Group } from "@cometchat/chat-sdk-javascript"; import { CometChatUsers, CometChatGroups } from "@cometchat/chat-uikit-react"; function UserGroupSelector({ @@ -131,8 +129,8 @@ function UserGroupSelector({ onSelectGroup, }: { onCancel: () => void; - onSelectUser: (user: CometChat.User) => void; - onSelectGroup: (group: CometChat.Group) => void; + onSelectUser: (user: User) => void; + onSelectGroup: (group: Group) => void; }) { const [tab, setTab] = useState<"users" | "groups">("users"); @@ -182,7 +180,7 @@ function UserGroupSelector({ When a user is selected from the list, pass the `CometChat.User` object to `CometChatMessageList` and `CometChatMessageComposer`. The SDK automatically creates the conversation when the first message is sent — no explicit creation step is needed. ```tsx ChatView.tsx -import { CometChat } from "@cometchat/chat-sdk-javascript"; +import type { User, Group } from "@cometchat/chat-sdk-javascript"; import { CometChatMessageList, CometChatMessageComposer, @@ -190,8 +188,8 @@ import { } from "@cometchat/chat-uikit-react"; type ChatTarget = - | { type: "user"; entity: CometChat.User } - | { type: "group"; entity: CometChat.Group }; + | { type: "user"; entity: User } + | { type: "group"; entity: Group }; function ChatView({ target }: { target: ChatTarget }) { const userProp = target.type === "user" ? target.entity : undefined; @@ -216,13 +214,15 @@ function ChatView({ target }: { target: ChatTarget }) { For groups, the flow is the same — select a group from `CometChatGroups` and pass the `CometChat.Group` object to the message components. If the user hasn't joined the group yet, you can call `CometChat.joinGroup()` before opening the chat. ```tsx +import { CometChat } from "@cometchat/chat-sdk-javascript"; + async function handleGroupSelect(group: CometChat.Group) { // For public groups, join if not already a member if (!group.getHasJoined()) { try { const joinedGroup = await CometChat.joinGroup( group.getGuid(), - CometChat.GROUP_TYPE.PUBLIC + CometChat.GroupType.Public ); onSelectGroup(joinedGroup); } catch (error) { @@ -239,6 +239,8 @@ async function handleGroupSelect(group: CometChat.Group) { If you want to send an initial message when starting a new chat (for example, an icebreaker), use the SDK directly after selecting a user. ```tsx +import { CometChat } from "@cometchat/chat-sdk-javascript"; + async function sendFirstMessage(uid: string, text: string) { const receiverType = CometChat.RECEIVER_TYPE.USER; const textMessage = new CometChat.TextMessage(uid, text, receiverType); @@ -287,7 +289,7 @@ function UserGroupSelector({ try { const joinedGroup = await CometChat.joinGroup( group.getGuid(), - CometChat.GROUP_TYPE.PUBLIC + CometChat.GroupType.Public ); onSelectGroup(joinedGroup); } catch (error) { diff --git a/ui-kit/react/guide-pin-and-save-messages.mdx b/ui-kit/react/guide-pin-and-save-messages.mdx index d4301f255..fa59bed16 100644 --- a/ui-kit/react/guide-pin-and-save-messages.mdx +++ b/ui-kit/react/guide-pin-and-save-messages.mdx @@ -55,7 +55,7 @@ _File: ChatScreen.tsx_ ```tsx import { useState } from "react"; -import { CometChat } from "@cometchat/chat-sdk-javascript"; +import type { Group } from "@cometchat/chat-sdk-javascript"; import { CometChatMessageHeader, CometChatMessageList, @@ -63,7 +63,7 @@ import { CometChatPinnedMessages, } from "@cometchat/chat-uikit-react"; -function ChatScreen({ group }: { group: CometChat.Group }) { +function ChatScreen({ group }: { group: Group }) { const [showPins, setShowPins] = useState(false); return ( diff --git a/ui-kit/react/guide-threaded-messages.mdx b/ui-kit/react/guide-threaded-messages.mdx index 20bd6af10..52acf42f7 100644 --- a/ui-kit/react/guide-threaded-messages.mdx +++ b/ui-kit/react/guide-threaded-messages.mdx @@ -30,12 +30,12 @@ _File: ChatWithThreads.tsx_ ```tsx import { useState } from "react"; -import { CometChat } from "@cometchat/chat-sdk-javascript"; +import type { User, Group, BaseMessage } from "@cometchat/chat-sdk-javascript"; function ChatWithThreads() { - const [user, setUser] = useState(null); - const [group, setGroup] = useState(null); - const [threadedMessage, setThreadedMessage] = useState(null); + const [user, setUser] = useState(null); + const [group, setGroup] = useState(null); + const [threadedMessage, setThreadedMessage] = useState(null); // Thread opens when threadedMessage is set, closes when cleared } @@ -258,9 +258,10 @@ Pass `onThreadSubscriptionChange` to the thread header to run your own logic whe For custom UI, the `useThreadSubscription` hook exposes the same state and toggle. Pass an optional second argument to react when the subscription flips (from the toggle here, or from any automatic or manual change elsewhere): ```tsx +import type { BaseMessage } from "@cometchat/chat-sdk-javascript"; import { useThreadSubscription } from "@cometchat/chat-uikit-react"; -function SubscribeButton({ parentMessage }: { parentMessage: CometChat.BaseMessage }) { +function SubscribeButton({ parentMessage }: { parentMessage: BaseMessage }) { const { isSubscribed, toggle } = useThreadSubscription(parentMessage, (subscribed) => console.log(subscribed ? "Subscribed" : "Unsubscribed") ); @@ -275,9 +276,10 @@ function SubscribeButton({ parentMessage }: { parentMessage: CometChat.BaseMessa If you only need to read the state — for example, to render an indicator without a toggle — use `useThreadSubscriptionState`, which returns the boolean alone and stays in sync with every automatic and manual change: ```tsx +import type { BaseMessage } from "@cometchat/chat-sdk-javascript"; import { useThreadSubscriptionState } from "@cometchat/chat-uikit-react"; -function SubscribedDot({ parentMessage }: { parentMessage: CometChat.BaseMessage }) { +function SubscribedDot({ parentMessage }: { parentMessage: BaseMessage }) { const isSubscribed = useThreadSubscriptionState(parentMessage); return isSubscribed ? : null; } diff --git a/ui-kit/react/integration-astro.mdx b/ui-kit/react/integration-astro.mdx index 371ab3439..6163d3a48 100644 --- a/ui-kit/react/integration-astro.mdx +++ b/ui-kit/react/integration-astro.mdx @@ -9,7 +9,7 @@ description: "Add CometChat to an Astro app in 5 steps: create project, install, | Field | Value | | --- | --- | | Package | `@cometchat/chat-uikit-react` v7.x | -| Peer deps | `react` >=18 <21, `react-dom` >=18 <21, `@cometchat/chat-sdk-javascript` ^4.2.0 | +| Peer deps | `react` `>=18 <21`, `react-dom` `>=18 <21`, `@cometchat/chat-sdk-javascript` ^4.2.0; optional `@cometchat/calls-sdk-javascript` ^5.0.3 (calling only) | | Bundled deps | `dompurify`, `@cometchat/cards-react` — regular dependencies, installed automatically. Do not add them yourself | | Init | `CometChatUIKit.init(UIKitSettings)` — must resolve before `login()` | | Login | `CometChatUIKit.login("UID")` — must resolve before rendering components | @@ -92,7 +92,7 @@ For development, use one of the pre-created test UIDs: ```tsx title="src/components/CometChatApp.tsx" import { useEffect, useState } from "react"; -import { CometChat } from "@cometchat/chat-sdk-javascript"; +import type { User, Group, Conversation } from "@cometchat/chat-sdk-javascript"; import { CometChatUIKit, UIKitSettingsBuilder, @@ -105,8 +105,8 @@ import { export default function CometChatApp() { const [ready, setReady] = useState(false); - const [chatUser, setChatUser] = useState(); - const [chatGroup, setChatGroup] = useState(); + const [chatUser, setChatUser] = useState(); + const [chatGroup, setChatGroup] = useState(); useEffect(() => { const settings = new UIKitSettingsBuilder() @@ -124,13 +124,13 @@ export default function CometChatApp() { if (!ready) return
Loading chat...
; - const handleConversationClick = (conversation: CometChat.Conversation) => { + const handleConversationClick = (conversation: Conversation) => { const entity = conversation.getConversationWith(); if (conversation.getConversationType() === "user") { - setChatUser(entity as CometChat.User); + setChatUser(entity as User); setChatGroup(undefined); } else { - setChatGroup(entity as CometChat.Group); + setChatGroup(entity as Group); setChatUser(undefined); } }; diff --git a/ui-kit/react/integration-nextjs.mdx b/ui-kit/react/integration-nextjs.mdx index c9d18d76b..3f4866176 100644 --- a/ui-kit/react/integration-nextjs.mdx +++ b/ui-kit/react/integration-nextjs.mdx @@ -9,7 +9,7 @@ description: "Add CometChat to a Next.js (App Router) app in 5 steps: create pro | Field | Value | | --- | --- | | Package | `@cometchat/chat-uikit-react` v7.x | -| Peer deps | `react` >=18 <21, `react-dom` >=18 <21, `@cometchat/chat-sdk-javascript` ^4.2.0 | +| Peer deps | `react` `>=18 <21`, `react-dom` `>=18 <21`, `@cometchat/chat-sdk-javascript` ^4.2.0; optional `@cometchat/calls-sdk-javascript` ^5.0.3 (calling only) | | Bundled deps | `dompurify`, `@cometchat/cards-react` — regular dependencies, installed automatically. Do not add them yourself | | Init | `CometChatUIKit.init(UIKitSettings)` — must resolve before `login()` | | Login | `CometChatUIKit.login("UID")` — must resolve before rendering components | @@ -92,7 +92,7 @@ For development, use one of the pre-created test UIDs: 'use client'; import { useEffect, useState } from "react"; -import { CometChat } from "@cometchat/chat-sdk-javascript"; +import type { User, Group, Conversation } from "@cometchat/chat-sdk-javascript"; import { CometChatUIKit, UIKitSettingsBuilder, @@ -105,8 +105,8 @@ import { export default function CometChatClient() { const [ready, setReady] = useState(false); - const [chatUser, setChatUser] = useState(); - const [chatGroup, setChatGroup] = useState(); + const [chatUser, setChatUser] = useState(); + const [chatGroup, setChatGroup] = useState(); useEffect(() => { const settings = new UIKitSettingsBuilder() @@ -124,13 +124,13 @@ export default function CometChatClient() { if (!ready) return
Loading chat...
; - const handleConversationClick = (conversation: CometChat.Conversation) => { + const handleConversationClick = (conversation: Conversation) => { const entity = conversation.getConversationWith(); if (conversation.getConversationType() === "user") { - setChatUser(entity as CometChat.User); + setChatUser(entity as User); setChatGroup(undefined); } else { - setChatGroup(entity as CometChat.Group); + setChatGroup(entity as Group); setChatUser(undefined); } }; diff --git a/ui-kit/react/integration-react-router.mdx b/ui-kit/react/integration-react-router.mdx index 9db06cccf..0dfa7d272 100644 --- a/ui-kit/react/integration-react-router.mdx +++ b/ui-kit/react/integration-react-router.mdx @@ -9,7 +9,7 @@ description: "Add CometChat to a React Router app in 5 steps: create project, in | Field | Value | | --- | --- | | Package | `@cometchat/chat-uikit-react` v7.x | -| Peer deps | `react` >=18 <21, `react-dom` >=18 <21, `@cometchat/chat-sdk-javascript` ^4.2.0 | +| Peer deps | `react` `>=18 <21`, `react-dom` `>=18 <21`, `@cometchat/chat-sdk-javascript` ^4.2.0; optional `@cometchat/calls-sdk-javascript` ^5.0.3 (calling only) | | Bundled deps | `dompurify`, `@cometchat/cards-react` — regular dependencies, installed automatically. Do not add them yourself | | Init | `CometChatUIKit.init(UIKitSettings)` — must resolve before `login()` | | Login | `CometChatUIKit.login("UID")` — must resolve before rendering components | @@ -129,7 +129,7 @@ export default App; ```tsx title="src/pages/ChatPage.tsx" import { useState } from "react"; -import { CometChat } from "@cometchat/chat-sdk-javascript"; +import type { User, Group, Conversation } from "@cometchat/chat-sdk-javascript"; import { CometChatProvider, CometChatConversations, @@ -139,16 +139,16 @@ import { } from "@cometchat/chat-uikit-react"; export default function ChatPage() { - const [chatUser, setChatUser] = useState(); - const [chatGroup, setChatGroup] = useState(); + const [chatUser, setChatUser] = useState(); + const [chatGroup, setChatGroup] = useState(); - const handleConversationClick = (conversation: CometChat.Conversation) => { + const handleConversationClick = (conversation: Conversation) => { const entity = conversation.getConversationWith(); if (conversation.getConversationType() === "user") { - setChatUser(entity as CometChat.User); + setChatUser(entity as User); setChatGroup(undefined); } else { - setChatGroup(entity as CometChat.Group); + setChatGroup(entity as Group); setChatUser(undefined); } }; diff --git a/ui-kit/react/integration-react.mdx b/ui-kit/react/integration-react.mdx index 5fba7aab8..6fcdb00f2 100644 --- a/ui-kit/react/integration-react.mdx +++ b/ui-kit/react/integration-react.mdx @@ -9,7 +9,7 @@ description: "Add CometChat to a React.js app in 4 steps: create project, instal | Field | Value | | --- | --- | | Package | `@cometchat/chat-uikit-react` v7.x | -| Peer deps | `react` >=18 <21, `react-dom` >=18 <21, `@cometchat/chat-sdk-javascript` ^4.2.0 | +| Peer deps | `react` `>=18 <21`, `react-dom` `>=18 <21`, `@cometchat/chat-sdk-javascript` ^4.2.0; optional `@cometchat/calls-sdk-javascript` ^5.0.3 (calling only) | | Bundled deps | `dompurify`, `@cometchat/cards-react` — regular dependencies, installed automatically. Do not add them yourself | | Init | `CometChatUIKit.init(UIKitSettings)` — must resolve before `login()` | | Login | `CometChatUIKit.login("UID")` — must resolve before rendering components | @@ -55,11 +55,8 @@ npm create vite@latest my-app -- --template react-ts cd my-app ``` - -```bash -npx create-react-app my-app --template typescript -cd my-app -``` + +Create React App is deprecated and no longer recommended for new projects — start new apps with Vite. If you already have a CRA app, the steps below work the same; use `src/index.tsx` wherever this guide says `src/main.tsx`. @@ -97,8 +94,10 @@ For development, use one of the pre-created test UIDs: `cometchat-uid-1` · `cometchat-uid-2` · `cometchat-uid-3` · `cometchat-uid-4` · `cometchat-uid-5` ```tsx title="src/main.tsx" -import ReactDOM from "react-dom/client"; +import { StrictMode } from "react"; +import { createRoot } from "react-dom/client"; import { CometChatUIKit, UIKitSettingsBuilder } from "@cometchat/chat-uikit-react"; +import "./index.css"; import App from "./App"; const settings = new UIKitSettingsBuilder() @@ -110,13 +109,19 @@ const settings = new UIKitSettingsBuilder() CometChatUIKit.init(settings).then(async () => { await CometChatUIKit.login("cometchat-uid-1"); - ReactDOM.createRoot(document.getElementById("root")!).render(); + createRoot(document.getElementById("root")!).render( + + + + ); }); ``` +This replaces the whole template `src/main.tsx`. Keep the `./index.css` import — the Layout & Sizing section below edits that file. The UI Kit's own stylesheet is imported by the package itself, so you don't add a CSS import for it. `init()` and `login()` run before React renders, so `StrictMode`'s double-invoked effects don't log in twice. + ```tsx title="src/App.tsx" import { useState } from "react"; -import { CometChat } from "@cometchat/chat-sdk-javascript"; +import type { User, Group, Conversation } from "@cometchat/chat-sdk-javascript"; import { CometChatProvider, CometChatConversations, @@ -126,16 +131,16 @@ import { } from "@cometchat/chat-uikit-react"; function App() { - const [chatUser, setChatUser] = useState(); - const [chatGroup, setChatGroup] = useState(); + const [chatUser, setChatUser] = useState(); + const [chatGroup, setChatGroup] = useState(); - const handleConversationClick = (conversation: CometChat.Conversation) => { + const handleConversationClick = (conversation: Conversation) => { const entity = conversation.getConversationWith(); if (conversation.getConversationType() === "user") { - setChatUser(entity as CometChat.User); + setChatUser(entity as User); setChatGroup(undefined); } else { - setChatGroup(entity as CometChat.Group); + setChatGroup(entity as Group); setChatUser(undefined); } }; @@ -181,7 +186,7 @@ By default, session data is stored in `localStorage`. To use `sessionStorage` in npm run dev ``` -Open `http://localhost:5173` (Vite) or `http://localhost:3000` (CRA). You should see the conversation list on the left. Click a conversation to open the message panel. +Open `http://localhost:5173` (Vite). On an existing CRA app, run `npm start` and open `http://localhost:3000`. You should see the conversation list on the left. Click a conversation to open the message panel. diff --git a/ui-kit/react/migration-overview.mdx b/ui-kit/react/migration-overview.mdx index 1635e1c39..e066c8bf0 100644 --- a/ui-kit/react/migration-overview.mdx +++ b/ui-kit/react/migration-overview.mdx @@ -48,7 +48,7 @@ npm uninstall rxjs # No longer needed for CometChat | Package | v6 | v7 | | --- | --- | --- | -| `@cometchat/chat-uikit-react` | `^6.x` | `^7.2.1` | +| `@cometchat/chat-uikit-react` | `^6.x` | `^7.2.4` | | `@cometchat/chat-sdk-javascript` | `^4.x` | `^4.2.0` — peer dep, required by 7.2.x | | `react` | `>=18` | `>=18 <21` | | `rxjs` | Required | Not needed — uninstall it | diff --git a/ui-kit/react/migration-property-changes.mdx b/ui-kit/react/migration-property-changes.mdx index 446d5d14c..282a51c80 100644 --- a/ui-kit/react/migration-property-changes.mdx +++ b/ui-kit/react/migration-property-changes.mdx @@ -294,7 +294,7 @@ A v6 formatter that relied on that inherited behaviour compiles, and then does n | `onSummaryClick` | `() => void` | 7.0.0 | Summary button click | | `onVoiceCallClick` | `(entity: User \| Group) => void` | 7.0.0 | Voice call button click | | `onVideoCallClick` | `(entity: User \| Group) => void` | 7.0.0 | Video call button click | -| `callSettingsBuilder` | `any` | 7.0.0 | Custom call settings builder | +| `callSettingsBuilder` | `SessionSettings` (typed `any` in the 7.2.4 declarations) | 7.0.0 | Session settings **object** (not a builder function) for calls started from the header, passed unchanged to `CometChatCallButtons` and on to `CometChatOngoingCall` as `callSettings` — see [Message Header](/ui-kit/react/components/message-header#callsettingsbuilder) | --- diff --git a/ui-kit/react/next-conversation.mdx b/ui-kit/react/next-conversation.mdx index cae559c83..49e268ae1 100644 --- a/ui-kit/react/next-conversation.mdx +++ b/ui-kit/react/next-conversation.mdx @@ -47,7 +47,7 @@ Create the client component with the chat UI, then import it dynamically in your 'use client'; import { useEffect, useState } from "react"; -import { CometChat } from "@cometchat/chat-sdk-javascript"; +import type { User, Group, Conversation } from "@cometchat/chat-sdk-javascript"; import { CometChatUIKit, UIKitSettingsBuilder, @@ -60,8 +60,8 @@ import { export default function CometChatClient() { const [ready, setReady] = useState(false); - const [selectedUser, setSelectedUser] = useState(undefined); - const [selectedGroup, setSelectedGroup] = useState(undefined); + const [selectedUser, setSelectedUser] = useState(undefined); + const [selectedGroup, setSelectedGroup] = useState(undefined); useEffect(() => { const settings = new UIKitSettingsBuilder() @@ -79,13 +79,13 @@ export default function CometChatClient() { if (!ready) return
Loading chat...
; - const handleConversationClick = (conversation: CometChat.Conversation) => { + const handleConversationClick = (conversation: Conversation) => { const entity = conversation.getConversationWith(); if (conversation.getConversationType() === "user") { - setSelectedUser(entity as CometChat.User); + setSelectedUser(entity as User); setSelectedGroup(undefined); } else { - setSelectedGroup(entity as CometChat.Group); + setSelectedGroup(entity as Group); setSelectedUser(undefined); } }; diff --git a/ui-kit/react/overview.mdx b/ui-kit/react/overview.mdx index 99668a302..0e05a1456 100644 --- a/ui-kit/react/overview.mdx +++ b/ui-kit/react/overview.mdx @@ -9,7 +9,7 @@ description: "Prebuilt React components for chat, voice, and video calling. Supp | Field | Value | | --- | --- | | Package | `@cometchat/chat-uikit-react` v7.x | -| Peer deps | `react` >=18 <21, `react-dom` >=18 <21, `@cometchat/chat-sdk-javascript` ^4.2.0 | +| Peer deps | `react` `>=18 <21`, `react-dom` `>=18 <21`, `@cometchat/chat-sdk-javascript` ^4.2.0; optional `@cometchat/calls-sdk-javascript` ^5.0.3 (calling only) | | Bundled deps | `dompurify`, `@cometchat/cards-react` — regular dependencies, installed automatically. Do not add them yourself | | Calling | Optional — `@cometchat/calls-sdk-javascript` | | SSR | SSR-safe — no browser APIs at module scope. Next.js App Router compatible. | @@ -45,7 +45,7 @@ Pick your framework and follow the step-by-step integration guide: - Vite or Create React App + Vite (Create React App is deprecated) App Router with client-side rendering @@ -92,7 +92,7 @@ npm install @cometchat/chat-uikit-react @cometchat/chat-sdk-javascript react rea | Package | Version | Install | |---------|---------|---------| -| `@cometchat/chat-uikit-react` | `^7.2.1` | Yes | +| `@cometchat/chat-uikit-react` | `^7.2.4` (latest) | Yes | | `@cometchat/chat-sdk-javascript` | `^4.2.0` | Yes — peer dependency | | `react` | `>=18.0.0 <21.0.0` | Yes — peer dependency | | `react-dom` | `>=18.0.0 <21.0.0` | Yes — peer dependency | diff --git a/ui-kit/react/plugins/custom-plugin.mdx b/ui-kit/react/plugins/custom-plugin.mdx index 51b6d7450..9af1dd232 100644 --- a/ui-kit/react/plugins/custom-plugin.mdx +++ b/ui-kit/react/plugins/custom-plugin.mdx @@ -12,7 +12,7 @@ Create a file that implements `CometChatMessagePlugin`: ```tsx title="src/plugins/LocationPlugin.tsx" import React from "react"; -import type { CometChat } from "@cometchat/chat-sdk-javascript"; +import type { BaseMessage, CustomMessage } from "@cometchat/chat-sdk-javascript"; import type { CometChatMessagePlugin, CometChatMessagePluginContext, @@ -20,8 +20,8 @@ import type { } from "@cometchat/chat-uikit-react"; // Extract location data from the custom message -function getLocationData(message: CometChat.BaseMessage) { - const customMessage = message as CometChat.CustomMessage; +function getLocationData(message: BaseMessage) { + const customMessage = message as CustomMessage; const data = customMessage.getCustomData() as { latitude?: number; longitude?: number; @@ -39,7 +39,7 @@ export const LocationPlugin: CometChatMessagePlugin = { messageTypes: ["location"], messageCategories: ["custom"], - renderBubble(message: CometChat.BaseMessage, context: CometChatMessagePluginContext) { + renderBubble(message: BaseMessage, context: CometChatMessagePluginContext) { const { latitude, longitude, address } = getLocationData(message); const mapUrl = `https://maps.googleapis.com/maps/api/staticmap?center=${latitude},${longitude}&zoom=15&size=300x200&markers=${latitude},${longitude}&key=YOUR_API_KEY`; @@ -68,7 +68,7 @@ export const LocationPlugin: CometChatMessagePlugin = { }, getOptions( - message: CometChat.BaseMessage, + message: BaseMessage, context: CometChatMessagePluginContext ): CometChatMessageOption[] { const options: CometChatMessageOption[] = []; @@ -96,7 +96,7 @@ export const LocationPlugin: CometChatMessagePlugin = { }, getLastMessagePreview( - message: CometChat.BaseMessage + message: BaseMessage ): string { const { address } = getLocationData(message); return address ? `📍 ${address}` : "📍 Location"; diff --git a/ui-kit/react/react-conversation.mdx b/ui-kit/react/react-conversation.mdx index 342ffaab5..fb4f75efa 100644 --- a/ui-kit/react/react-conversation.mdx +++ b/ui-kit/react/react-conversation.mdx @@ -44,7 +44,7 @@ Replace your `src/App.tsx` with the following. Init and login must complete befo ```tsx title="src/App.tsx" import { useState } from "react"; -import { CometChat } from "@cometchat/chat-sdk-javascript"; +import type { User, Group, Conversation } from "@cometchat/chat-sdk-javascript"; import { CometChatProvider, CometChatConversations, @@ -56,19 +56,19 @@ import { import "./App.css"; function App() { - const [selectedUser, setSelectedUser] = useState(undefined); - const [selectedGroup, setSelectedGroup] = useState(undefined); - const [selectedConversation, setSelectedConversation] = useState(undefined); + const [selectedUser, setSelectedUser] = useState(undefined); + const [selectedGroup, setSelectedGroup] = useState(undefined); + const [selectedConversation, setSelectedConversation] = useState(undefined); const [showDetails, setShowDetails] = useState(false); - const handleConversationClick = (conversation: CometChat.Conversation) => { + const handleConversationClick = (conversation: Conversation) => { setSelectedConversation(conversation); // highlights the open row in the Conversations list const entity = conversation.getConversationWith(); if (conversation.getConversationType() === "user") { - setSelectedUser(entity as CometChat.User); + setSelectedUser(entity as User); setSelectedGroup(undefined); } else { - setSelectedGroup(entity as CometChat.Group); + setSelectedGroup(entity as Group); setSelectedUser(undefined); } }; diff --git a/ui-kit/react/react-router-conversation.mdx b/ui-kit/react/react-router-conversation.mdx index fc8325b47..7d23bd543 100644 --- a/ui-kit/react/react-router-conversation.mdx +++ b/ui-kit/react/react-router-conversation.mdx @@ -45,7 +45,7 @@ Create a chat route component. Init and login must complete before the provider ```tsx title="src/pages/ChatPage.tsx" import { useState } from "react"; -import { CometChat } from "@cometchat/chat-sdk-javascript"; +import type { User, Group, Conversation } from "@cometchat/chat-sdk-javascript"; import { CometChatProvider, CometChatConversations, @@ -56,16 +56,16 @@ import { import "./ChatPage.css"; export default function ChatPage() { - const [selectedUser, setSelectedUser] = useState(undefined); - const [selectedGroup, setSelectedGroup] = useState(undefined); + const [selectedUser, setSelectedUser] = useState(undefined); + const [selectedGroup, setSelectedGroup] = useState(undefined); - const handleConversationClick = (conversation: CometChat.Conversation) => { + const handleConversationClick = (conversation: Conversation) => { const entity = conversation.getConversationWith(); if (conversation.getConversationType() === "user") { - setSelectedUser(entity as CometChat.User); + setSelectedUser(entity as User); setSelectedGroup(undefined); } else { - setSelectedGroup(entity as CometChat.Group); + setSelectedGroup(entity as Group); setSelectedUser(undefined); } };