stream-chat-angular 2.6.0 → 2.8.0

package/fesm2015/stream-chat-angular.js

@@ -16,7 +16,7 @@ import transliterate from '@stream-io/transliterate';
 import * as i5 from 'angular-mentions';
 import { MentionModule } from 'angular-mentions';
 
-const version = '2.6.0';
+const version = '2.8.0';
 
 class NotificationService {
     constructor() {
@@ -61,9 +61,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImpor
         }], ctorParameters: function () { return []; } });
 
 class ChatClientService {
-    constructor(ngZone, appRef, notificationService) {
+    constructor(ngZone, notificationService) {
         this.ngZone = ngZone;
-        this.appRef = appRef;
         this.notificationService = notificationService;
         this.notificationSubject = new ReplaySubject(1);
         this.connectionStateSubject = new ReplaySubject(1);
@@ -72,48 +71,37 @@ class ChatClientService {
         this.connectionState$ = this.connectionStateSubject.asObservable();
         this.appSettings$ = this.appSettingsSubject.asObservable();
     }
-    init(apiKey, userId, userToken) {
+    init(apiKey, userOrId, userTokenOrProvider) {
         return __awaiter(this, void 0, void 0, function* () {
             this.chatClient = StreamChat.getInstance(apiKey);
             yield this.ngZone.runOutsideAngular(() => __awaiter(this, void 0, void 0, function* () {
-                yield this.chatClient.connectUser({ id: userId }, userToken);
+                const user = typeof userOrId === 'string' ? { id: userOrId } : userOrId;
+                yield this.chatClient.connectUser(user, userTokenOrProvider);
                 this.chatClient.setUserAgent(`stream-chat-angular-${version}-${this.chatClient.getUserAgent()}`);
+                this.chatClient.getAppSettings;
             }));
             this.appSettingsSubject.next(undefined);
-            this.chatClient.on('notification.added_to_channel', (e) => {
+            this.chatClient.on((e) => {
                 this.notificationSubject.next({
-                    eventType: 'notification.added_to_channel',
+                    eventType: e.type,
                     event: e,
                 });
-                this.appRef.tick();
-            });
-            this.chatClient.on('notification.message_new', (e) => {
-                this.notificationSubject.next({
-                    eventType: 'notification.message_new',
-                    event: e,
-                });
-                this.appRef.tick();
-            });
-            this.chatClient.on('notification.removed_from_channel', (e) => {
-                this.notificationSubject.next({
-                    eventType: 'notification.removed_from_channel',
-                    event: e,
-                });
-                this.appRef.tick();
             });
             let removeNotification;
             this.chatClient.on('connection.changed', (e) => {
-                const isOnline = e.online;
-                if (isOnline) {
-                    if (removeNotification) {
-                        removeNotification();
+                this.ngZone.run(() => {
+                    const isOnline = e.online;
+                    if (isOnline) {
+                        if (removeNotification) {
+                            removeNotification();
+                        }
                     }
-                }
-                else {
-                    removeNotification = this.notificationService.addPermanentNotification('streamChat.Connection failure, reconnecting now...');
-                }
-                this.connectionStateSubject.next(isOnline ? 'online' : 'offline');
-                this.appRef.tick();
+                    else {
+                        removeNotification =
+                            this.notificationService.addPermanentNotification('streamChat.Connection failure, reconnecting now...');
+                    }
+                    this.connectionStateSubject.next(isOnline ? 'online' : 'offline');
+                });
             });
         });
     }
@@ -147,14 +135,14 @@ class ChatClientService {
         });
     }
 }
-ChatClientService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: ChatClientService, deps: [{ token: i0.NgZone }, { token: i0.ApplicationRef }, { token: NotificationService }], target: i0.ɵɵFactoryTarget.Injectable });
+ChatClientService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: ChatClientService, deps: [{ token: i0.NgZone }, { token: NotificationService }], target: i0.ɵɵFactoryTarget.Injectable });
 ChatClientService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: ChatClientService, providedIn: 'root' });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: ChatClientService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i0.ApplicationRef }, { type: NotificationService }]; } });
+        }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: NotificationService }]; } });
 
 const createMessagePreview = (user, text, attachments, mentionedUsers) => {
     const clientSideId = `${user.id}-${v4()}`;
@@ -187,9 +175,8 @@ const getReadBy = (message, channel) => {
 };
 
 class ChannelService {
-    constructor(chatClientService, appRef, ngZone) {
+    constructor(chatClientService, ngZone) {
         this.chatClientService = chatClientService;
-        this.appRef = appRef;
         this.ngZone = ngZone;
         this.channelsSubject = new BehaviorSubject(undefined);
         this.activeChannelSubject = new BehaviorSubject(undefined);
@@ -363,10 +350,7 @@ class ChannelService {
                     return [];
                 }
                 const result = yield activeChannel.queryMembers({
-                    $or: [
-                        { id: { $autocomplete: searchTerm } },
-                        { name: { $autocomplete: searchTerm } },
-                    ],
+                    name: { $autocomplete: searchTerm },
                     id: { $ne: this.chatClientService.chatClient.userID },
                 });
                 return Object.values(result.members);
@@ -400,39 +384,43 @@ class ChannelService {
         return __awaiter(this, void 0, void 0, function* () {
             switch (notification.eventType) {
                 case 'notification.message_new': {
-                    if (this.customNewMessageNotificationHandler) {
-                        this.customNewMessageNotificationHandler(notification, this.channelListSetter);
-                    }
-                    else {
-                        yield this.handleNewMessageNotification(notification);
-                    }
+                    yield this.ngZone.run(() => __awaiter(this, void 0, void 0, function* () {
+                        if (this.customNewMessageNotificationHandler) {
+                            this.customNewMessageNotificationHandler(notification, this.channelListSetter);
+                        }
+                        else {
+                            yield this.handleNewMessageNotification(notification);
+                        }
+                    }));
                     break;
                 }
                 case 'notification.added_to_channel': {
-                    if (this.customAddedToChannelNotificationHandler) {
-                        this.customAddedToChannelNotificationHandler(notification, this.channelListSetter);
-                    }
-                    else {
-                        yield this.handleAddedToChannelNotification(notification);
-                    }
+                    yield this.ngZone.run(() => __awaiter(this, void 0, void 0, function* () {
+                        if (this.customAddedToChannelNotificationHandler) {
+                            this.customAddedToChannelNotificationHandler(notification, this.channelListSetter);
+                        }
+                        else {
+                            yield this.handleAddedToChannelNotification(notification);
+                        }
+                    }));
                     break;
                 }
                 case 'notification.removed_from_channel': {
-                    if (this.customRemovedFromChannelNotificationHandler) {
-                        this.customRemovedFromChannelNotificationHandler(notification, this.channelListSetter);
-                    }
-                    else {
-                        this.handleRemovedFromChannelNotification(notification);
-                    }
+                    this.ngZone.run(() => {
+                        if (this.customRemovedFromChannelNotificationHandler) {
+                            this.customRemovedFromChannelNotificationHandler(notification, this.channelListSetter);
+                        }
+                        else {
+                            this.handleRemovedFromChannelNotification(notification);
+                        }
+                    });
                 }
             }
         });
     }
     handleRemovedFromChannelNotification(notification) {
-        this.ngZone.run(() => {
-            const channelIdToBeRemoved = notification.event.channel.cid;
-            this.removeFromChannelList(channelIdToBeRemoved);
-        });
+        const channelIdToBeRemoved = notification.event.channel.cid;
+        this.removeFromChannelList(channelIdToBeRemoved);
     }
     handleNewMessageNotification(notification) {
         return __awaiter(this, void 0, void 0, function* () {
@@ -450,12 +438,10 @@ class ChannelService {
             const channel = this.chatClientService.chatClient.channel((_a = notification.event.channel) === null || _a === void 0 ? void 0 : _a.type, (_b = notification.event.channel) === null || _b === void 0 ? void 0 : _b.id);
             yield channel.watch();
             this.watchForChannelEvents(channel);
-            this.ngZone.run(() => {
-                this.channelsSubject.next([
-                    channel,
-                    ...(this.channelsSubject.getValue() || []),
-                ]);
-            });
+            this.channelsSubject.next([
+                channel,
+                ...(this.channelsSubject.getValue() || []),
+            ]);
         });
     }
     removeFromChannelList(cid) {
@@ -484,15 +470,17 @@ class ChannelService {
         this.activeChannelSubscriptions.push(channel.on('reaction.deleted', (e) => this.messageReactionEventReceived(e)));
         this.activeChannelSubscriptions.push(channel.on('reaction.updated', (e) => this.messageReactionEventReceived(e)));
         this.activeChannelSubscriptions.push(channel.on('message.read', (e) => {
-            let latestMessage;
-            this.activeChannelMessages$.pipe(first()).subscribe((messages) => {
-                latestMessage = messages[messages.length - 1];
+            this.ngZone.run(() => {
+                let latestMessage;
+                this.activeChannelMessages$.pipe(first()).subscribe((messages) => {
+                    latestMessage = messages[messages.length - 1];
+                });
+                if (!latestMessage || !e.user) {
+                    return;
+                }
+                latestMessage.readBy = getReadBy(latestMessage, channel);
+                this.activeChannelMessagesSubject.next(this.activeChannelMessagesSubject.getValue());
             });
-            if (!latestMessage || !e.user) {
-                return;
-            }
-            latestMessage.readBy = getReadBy(latestMessage, channel);
-            this.activeChannelMessagesSubject.next(this.activeChannelMessagesSubject.getValue());
         }));
     }
     messageUpdated(event) {
@@ -566,66 +554,72 @@ class ChannelService {
         channel.on((event) => {
             switch (event.type) {
                 case 'message.new': {
-                    if (this.customNewMessageHandler) {
-                        this.customNewMessageHandler(event, channel, this.channelListSetter, this.messageListSetter);
-                    }
-                    else {
-                        this.handleNewMessage(event, channel);
-                    }
+                    this.ngZone.run(() => {
+                        if (this.customNewMessageHandler) {
+                            this.customNewMessageHandler(event, channel, this.channelListSetter, this.messageListSetter);
+                        }
+                        else {
+                            this.handleNewMessage(event, channel);
+                        }
+                    });
                     break;
                 }
                 case 'channel.hidden': {
-                    if (this.customChannelHiddenHandler) {
-                        this.customChannelHiddenHandler(event, channel, this.channelListSetter, this.messageListSetter);
-                    }
-                    else {
-                        this.handleChannelHidden(event);
-                    }
-                    this.appRef.tick();
+                    this.ngZone.run(() => {
+                        if (this.customChannelHiddenHandler) {
+                            this.customChannelHiddenHandler(event, channel, this.channelListSetter, this.messageListSetter);
+                        }
+                        else {
+                            this.handleChannelHidden(event);
+                        }
+                    });
                     break;
                 }
                 case 'channel.deleted': {
-                    if (this.customChannelDeletedHandler) {
-                        this.customChannelDeletedHandler(event, channel, this.channelListSetter, this.messageListSetter);
-                    }
-                    else {
-                        this.handleChannelDeleted(event);
-                    }
-                    this.appRef.tick();
+                    this.ngZone.run(() => {
+                        if (this.customChannelDeletedHandler) {
+                            this.customChannelDeletedHandler(event, channel, this.channelListSetter, this.messageListSetter);
+                        }
+                        else {
+                            this.handleChannelDeleted(event);
+                        }
+                    });
                     break;
                 }
                 case 'channel.visible': {
-                    if (this.customChannelVisibleHandler) {
-                        this.customChannelVisibleHandler(event, channel, this.channelListSetter, this.messageListSetter);
-                    }
-                    else {
-                        this.handleChannelVisible(event, channel);
-                    }
-                    this.appRef.tick();
+                    this.ngZone.run(() => {
+                        if (this.customChannelVisibleHandler) {
+                            this.customChannelVisibleHandler(event, channel, this.channelListSetter, this.messageListSetter);
+                        }
+                        else {
+                            this.handleChannelVisible(event, channel);
+                        }
+                    });
                     break;
                 }
                 case 'channel.updated': {
-                    if (this.customChannelUpdatedHandler) {
-                        this.customChannelUpdatedHandler(event, channel, this.channelListSetter, this.messageListSetter);
-                    }
-                    else {
-                        this.handleChannelUpdate(event);
-                    }
-                    this.appRef.tick();
+                    this.ngZone.run(() => {
+                        if (this.customChannelUpdatedHandler) {
+                            this.customChannelUpdatedHandler(event, channel, this.channelListSetter, this.messageListSetter);
+                        }
+                        else {
+                            this.handleChannelUpdate(event);
+                        }
+                    });
                     break;
                 }
                 case 'channel.truncated': {
-                    if (this.customChannelTruncatedHandler) {
-                        this.customChannelTruncatedHandler(event, channel, this.channelListSetter, this.messageListSetter);
-                    }
-                    else {
-                        this.handleChannelTruncate(event);
-                    }
-                    this.appRef.tick();
+                    this.ngZone.run(() => {
+                        if (this.customChannelTruncatedHandler) {
+                            this.customChannelTruncatedHandler(event, channel, this.channelListSetter, this.messageListSetter);
+                        }
+                        else {
+                            this.handleChannelTruncate(event);
+                        }
+                    });
                     break;
                 }
             }
-            setTimeout(() => this.appRef.tick(), 0);
         });
     }
     handleNewMessage(_, channel) {
@@ -684,14 +678,14 @@ class ChannelService {
         return capabilites.indexOf('read-events') !== -1;
     }
 }
-ChannelService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: ChannelService, deps: [{ token: ChatClientService }, { token: i0.ApplicationRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
+ChannelService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: ChannelService, deps: [{ token: ChatClientService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
 ChannelService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: ChannelService, providedIn: 'root' });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: ChannelService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: function () { return [{ type: ChatClientService }, { type: i0.ApplicationRef }, { type: i0.NgZone }]; } });
+        }], ctorParameters: function () { return [{ type: ChatClientService }, { type: i0.NgZone }]; } });
 
 class ThemeService {
     constructor() {
@@ -1251,7 +1245,7 @@ class AttachmentPreviewListComponent {
     }
 }
 AttachmentPreviewListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: AttachmentPreviewListComponent, deps: [{ token: AttachmentService }], target: i0.ɵɵFactoryTarget.Component });
-AttachmentPreviewListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: AttachmentPreviewListComponent, selector: "stream-attachment-preview-list", ngImport: i0, template: "<div class=\"rfu-image-previewer\">\n  <ng-container\n    *ngFor=\"\n      let attachmentUpload of attachmentUploads$ | async;\n      trackBy: trackByFile\n    \"\n  >\n    <div\n      *ngIf=\"attachmentUpload.type === 'image'\"\n      class=\"rfu-image-previewer__image\"\n      [class.rfu-image-previewer__image--loaded]=\"\n        attachmentUpload.state === 'success'\n      \"\n      data-testclass=\"attachment-image-preview\"\n    >\n      <div\n        *ngIf=\"attachmentUpload.state === 'error'\"\n        class=\"rfu-image-previewer__retry\"\n        (click)=\"retryAttachmentUpload(attachmentUpload.file)\"\n        (keyup.enter)=\"retryAttachmentUpload(attachmentUpload.file)\"\n        data-testclass=\"upload-error\"\n      >\n        <stream-icon icon=\"retry\"></stream-icon>\n      </div>\n      <div class=\"rfu-thumbnail__wrapper\" style=\"width: 100; height: 100\">\n        <div class=\"rfu-thumbnail__overlay\">\n          <div\n            class=\"rfu-icon-button\"\n            data-testclass=\"delete-attachment\"\n            role=\"button\"\n            (click)=\"deleteAttachment(attachmentUpload)\"\n            (keyup.enter)=\"deleteAttachment(attachmentUpload)\"\n          >\n            <stream-icon icon=\"close\"></stream-icon>\n          </div>\n        </div>\n        <img\n          *ngIf=\"attachmentUpload.url || attachmentUpload.previewUri\"\n          src=\"{{\n            attachmentUpload.url\n              ? attachmentUpload.url\n              : attachmentUpload.previewUri\n          }}\"\n          alt=\"attachmentUpload.file.name\"\n          class=\"rfu-thumbnail__image\"\n          data-testclass=\"attachment-image\"\n        />\n      </div>\n      <stream-loading-indicator\n        data-testclass=\"loading-indicator\"\n        color=\"rgba(255,255,255,0.7)\"\n        *ngIf=\"attachmentUpload.state === 'uploading'\"\n      ></stream-loading-indicator>\n    </div>\n    <div\n      class=\"rfu-file-previewer\"\n      *ngIf=\"attachmentUpload.type === 'file'\"\n      data-testclass=\"attachment-file-preview\"\n    >\n      <ol>\n        <li\n          class=\"rfu-file-previewer__file\"\n          [class.rfu-file-previewer__file--uploading]=\"\n            attachmentUpload.state === 'uploading'\n          \"\n          [class.rfu-file-previewer__file--failed]=\"\n            attachmentUpload.state === 'error'\n          \"\n        >\n          <stream-icon icon=\"file\"></stream-icon>\n\n          <a\n            data-testclass=\"file-download-link\"\n            href=\"{{ attachmentUpload.url }}\"\n            (click)=\"attachmentUpload.url ? null : $event.preventDefault()\"\n            (keyup.enter)=\"\n              attachmentUpload.url ? null : $event.preventDefault()\n            \"\n            download\n          >\n            {{ attachmentUpload.file.name }}\n            <ng-container *ngIf=\"attachmentUpload.state === 'error'\">\n              <div\n                data-testclass=\"file-upload-retry\"\n                class=\"rfu-file-previewer__failed\"\n                (click)=\"retryAttachmentUpload(attachmentUpload.file)\"\n                (keyup.enter)=\"retryAttachmentUpload(attachmentUpload.file)\"\n                translate\n              >\n                streamChat.failed\n              </div>\n              <div\n                class=\"rfu-file-previewer__retry\"\n                (click)=\"retryAttachmentUpload(attachmentUpload.file)\"\n                (keyup.enter)=\"retryAttachmentUpload(attachmentUpload.file)\"\n                translate\n              >\n                streamChat.retry\n              </div>\n            </ng-container>\n          </a>\n\n          <span\n            data-testclass=\"file-delete\"\n            class=\"rfu-file-previewer__close-button\"\n            (click)=\"deleteAttachment(attachmentUpload)\"\n            (keyup.enter)=\"deleteAttachment(attachmentUpload)\"\n          >\n            \u2718\n          </span>\n          <div\n            *ngIf=\"attachmentUpload.state === 'uploading'\"\n            class=\"rfu-file-previewer__loading-indicator\"\n          >\n            <stream-loading-indicator></stream-loading-indicator>\n          </div>\n        </li>\n      </ol>\n    </div>\n  </ng-container>\n</div>\n", components: [{ type: IconComponent, selector: "stream-icon", inputs: ["icon", "size"] }, { type: LoadingIndicatorComponent, selector: "stream-loading-indicator", inputs: ["size", "color"] }], directives: [{ type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i10.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }], pipes: { "async": i3.AsyncPipe } });
+AttachmentPreviewListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: AttachmentPreviewListComponent, selector: "stream-attachment-preview-list", ngImport: i0, template: "<div class=\"rfu-image-previewer\" *ngIf=\"(attachmentUploads$ | async)?.length\">\n  <ng-container\n    *ngFor=\"\n      let attachmentUpload of attachmentUploads$ | async;\n      trackBy: trackByFile\n    \"\n  >\n    <div\n      *ngIf=\"attachmentUpload.type === 'image'\"\n      class=\"rfu-image-previewer__image\"\n      [class.rfu-image-previewer__image--loaded]=\"\n        attachmentUpload.state === 'success'\n      \"\n      data-testclass=\"attachment-image-preview\"\n    >\n      <div\n        *ngIf=\"attachmentUpload.state === 'error'\"\n        class=\"rfu-image-previewer__retry\"\n        (click)=\"retryAttachmentUpload(attachmentUpload.file)\"\n        (keyup.enter)=\"retryAttachmentUpload(attachmentUpload.file)\"\n        data-testclass=\"upload-error\"\n      >\n        <stream-icon icon=\"retry\"></stream-icon>\n      </div>\n      <div class=\"rfu-thumbnail__wrapper\" style=\"width: 100; height: 100\">\n        <div class=\"rfu-thumbnail__overlay\">\n          <div\n            class=\"rfu-icon-button\"\n            data-testclass=\"delete-attachment\"\n            role=\"button\"\n            (click)=\"deleteAttachment(attachmentUpload)\"\n            (keyup.enter)=\"deleteAttachment(attachmentUpload)\"\n          >\n            <stream-icon icon=\"close\"></stream-icon>\n          </div>\n        </div>\n        <img\n          *ngIf=\"attachmentUpload.url || attachmentUpload.previewUri\"\n          src=\"{{\n            attachmentUpload.url\n              ? attachmentUpload.url\n              : attachmentUpload.previewUri\n          }}\"\n          alt=\"attachmentUpload.file.name\"\n          class=\"rfu-thumbnail__image\"\n          data-testclass=\"attachment-image\"\n        />\n      </div>\n      <stream-loading-indicator\n        data-testclass=\"loading-indicator\"\n        color=\"rgba(255,255,255,0.7)\"\n        *ngIf=\"attachmentUpload.state === 'uploading'\"\n      ></stream-loading-indicator>\n    </div>\n    <div\n      class=\"rfu-file-previewer\"\n      *ngIf=\"attachmentUpload.type === 'file'\"\n      data-testclass=\"attachment-file-preview\"\n    >\n      <ol>\n        <li\n          class=\"rfu-file-previewer__file\"\n          [class.rfu-file-previewer__file--uploading]=\"\n            attachmentUpload.state === 'uploading'\n          \"\n          [class.rfu-file-previewer__file--failed]=\"\n            attachmentUpload.state === 'error'\n          \"\n        >\n          <stream-icon icon=\"file\"></stream-icon>\n\n          <a\n            data-testclass=\"file-download-link\"\n            href=\"{{ attachmentUpload.url }}\"\n            (click)=\"attachmentUpload.url ? null : $event.preventDefault()\"\n            (keyup.enter)=\"\n              attachmentUpload.url ? null : $event.preventDefault()\n            \"\n            download\n          >\n            {{ attachmentUpload.file.name }}\n            <ng-container *ngIf=\"attachmentUpload.state === 'error'\">\n              <div\n                data-testclass=\"file-upload-retry\"\n                class=\"rfu-file-previewer__failed\"\n                (click)=\"retryAttachmentUpload(attachmentUpload.file)\"\n                (keyup.enter)=\"retryAttachmentUpload(attachmentUpload.file)\"\n                translate\n              >\n                streamChat.failed\n              </div>\n              <div\n                class=\"rfu-file-previewer__retry\"\n                (click)=\"retryAttachmentUpload(attachmentUpload.file)\"\n                (keyup.enter)=\"retryAttachmentUpload(attachmentUpload.file)\"\n                translate\n              >\n                streamChat.retry\n              </div>\n            </ng-container>\n          </a>\n\n          <span\n            data-testclass=\"file-delete\"\n            class=\"rfu-file-previewer__close-button\"\n            (click)=\"deleteAttachment(attachmentUpload)\"\n            (keyup.enter)=\"deleteAttachment(attachmentUpload)\"\n          >\n            \u2718\n          </span>\n          <div\n            *ngIf=\"attachmentUpload.state === 'uploading'\"\n            class=\"rfu-file-previewer__loading-indicator\"\n          >\n            <stream-loading-indicator></stream-loading-indicator>\n          </div>\n        </li>\n      </ol>\n    </div>\n  </ng-container>\n</div>\n", components: [{ type: IconComponent, selector: "stream-icon", inputs: ["icon", "size"] }, { type: LoadingIndicatorComponent, selector: "stream-loading-indicator", inputs: ["size", "color"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i10.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }], pipes: { "async": i3.AsyncPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: AttachmentPreviewListComponent, decorators: [{
             type: Component,
             args: [{
@@ -1700,7 +1694,7 @@ class MessageActionsBoxComponent {
     }
 }
 MessageActionsBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: MessageActionsBoxComponent, deps: [{ token: ChatClientService }, { token: NotificationService }, { token: ChannelService }], target: i0.ɵɵFactoryTarget.Component });
-MessageActionsBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: MessageActionsBoxComponent, selector: "stream-message-actions-box", inputs: { messageInputTemplate: "messageInputTemplate", isOpen: "isOpen", isMine: "isMine", message: "message", enabledActions: "enabledActions" }, outputs: { displayedActionsCount: "displayedActionsCount", isEditing: "isEditing" }, viewQueries: [{ propertyName: "messageInput", first: true, predicate: MessageInputComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  data-testid=\"action-box\"\n  class=\"str-chat__message-actions-box\"\n  [class.str-chat__message-actions-box--open]=\"isOpen\"\n  [class.str-chat__message-actions-box--mine]=\"isMine\"\n>\n  <ul class=\"str-chat__message-actions-list\">\n    <button\n      data-testid=\"quote-action\"\n      *ngIf=\"isQuoteVisible\"\n      (click)=\"quoteClicked()\"\n    >\n      <li class=\"str-chat__message-actions-list-item\">\n        {{ \"streamChat.Reply\" | translate }}\n      </li>\n    </button>\n    <button\n      data-testid=\"pin-action\"\n      *ngIf=\"isPinVisible\"\n      (click)=\"pinClicked()\"\n    >\n      <li class=\"str-chat__message-actions-list-item\">\n        {{\n          (message?.pinned ? \"streamChat.Unpin\" : \"streamChat.Pin\") | translate\n        }}\n      </li>\n    </button>\n    <button\n      data-testid=\"flag-action\"\n      *ngIf=\"isFlagVisible\"\n      (click)=\"flagClicked()\"\n    >\n      <li class=\"str-chat__message-actions-list-item\">\n        {{ \"streamChat.Flag\" | translate }}\n      </li>\n    </button>\n    <button\n      data-testid=\"mute-action\"\n      *ngIf=\"isMuteVisible\"\n      (click)=\"muteClicked()\"\n    >\n      <li class=\"str-chat__message-actions-list-item\">\n        {{ \"streamChat.Mute\" | translate }}\n      </li>\n    </button>\n    <button\n      data-testid=\"edit-action\"\n      *ngIf=\"isEditVisible\"\n      (click)=\"editClicked()\"\n    >\n      <li class=\"str-chat__message-actions-list-item\">\n        {{ \"streamChat.Edit Message\" | translate }}\n      </li>\n    </button>\n    <button\n      data-testid=\"delete-action\"\n      *ngIf=\"isDeleteVisible\"\n      (click)=\"deleteClicked()\"\n    >\n      <li class=\"str-chat__message-actions-list-item\">\n        {{ \"streamChat.Delete\" | translate }}\n      </li>\n    </button>\n  </ul>\n</div>\n\n<stream-modal\n  [isOpen]=\"isEditModalOpen\"\n  (isOpenChange)=\"\n    isEditModalOpen = $event; isEditModalOpen ? '' : modalClosed()\n  \"\n>\n  <div class=\"str-chat__edit-message-form\" *ngIf=\"isEditModalOpen\">\n    <ng-container *ngIf=\"messageInputTemplate; else defaultInput\">\n      <ng-container\n        *ngTemplateOutlet=\"\n          messageInputTemplate;\n          context: {\n            message: message,\n            messageUpdateHandler: modalClosed\n          }\n        \"\n      ></ng-container>\n    </ng-container>\n    <ng-template #defaultInput>\n      <stream-message-input\n        [message]=\"message\"\n        (messageUpdate)=\"modalClosed()\"\n      ></stream-message-input>\n    </ng-template>\n    <stream-notification-list></stream-notification-list>\n    <div class=\"str-chat__message-team-form-footer\">\n      <div></div>\n      <div>\n        <button translate data-testid=\"cancel-button\" (click)=\"modalClosed()\">\n          streamChat.Cancel\n        </button>\n        <button\n          type=\"submit\"\n          translate\n          data-testid=\"send-button\"\n          (click)=\"sendClicked()\"\n          (keyup.enter)=\"sendClicked()\"\n        >\n          streamChat.Send\n        </button>\n      </div>\n    </div>\n  </div>\n</stream-modal>\n", components: [{ type: ModalComponent, selector: "stream-modal", inputs: ["isOpen"], outputs: ["isOpenChange"] }, { type: MessageInputComponent, selector: "stream-message-input", inputs: ["isFileUploadEnabled", "areMentionsEnabled", "mentionScope", "mentionAutocompleteItemTemplate", "acceptedFileTypes", "isMultipleFileUploadEnabled", "message"], outputs: ["messageUpdate"] }, { type: NotificationListComponent, selector: "stream-notification-list" }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i10.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }], pipes: { "translate": i10.TranslatePipe } });
+MessageActionsBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: MessageActionsBoxComponent, selector: "stream-message-actions-box", inputs: { messageInputTemplate: "messageInputTemplate", isOpen: "isOpen", isMine: "isMine", message: "message", enabledActions: "enabledActions" }, outputs: { displayedActionsCount: "displayedActionsCount", isEditing: "isEditing" }, viewQueries: [{ propertyName: "messageInput", first: true, predicate: MessageInputComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  data-testid=\"action-box\"\n  class=\"str-chat__message-actions-box\"\n  [class.str-chat__message-actions-box--open]=\"isOpen\"\n  [class.str-chat__message-actions-box--mine]=\"isMine\"\n>\n  <ul class=\"str-chat__message-actions-list\">\n    <button\n      data-testid=\"quote-action\"\n      *ngIf=\"isQuoteVisible\"\n      (click)=\"quoteClicked()\"\n    >\n      <li class=\"str-chat__message-actions-list-item\">\n        {{ \"streamChat.Reply\" | translate }}\n      </li>\n    </button>\n    <button\n      data-testid=\"pin-action\"\n      *ngIf=\"isPinVisible\"\n      (click)=\"pinClicked()\"\n    >\n      <li class=\"str-chat__message-actions-list-item\">\n        {{\n          (message?.pinned ? \"streamChat.Unpin\" : \"streamChat.Pin\") | translate\n        }}\n      </li>\n    </button>\n    <button\n      data-testid=\"flag-action\"\n      *ngIf=\"isFlagVisible\"\n      (click)=\"flagClicked()\"\n    >\n      <li class=\"str-chat__message-actions-list-item\">\n        {{ \"streamChat.Flag\" | translate }}\n      </li>\n    </button>\n    <button\n      data-testid=\"mute-action\"\n      *ngIf=\"isMuteVisible\"\n      (click)=\"muteClicked()\"\n    >\n      <li class=\"str-chat__message-actions-list-item\">\n        {{ \"streamChat.Mute\" | translate }}\n      </li>\n    </button>\n    <button\n      data-testid=\"edit-action\"\n      *ngIf=\"isEditVisible\"\n      (click)=\"editClicked()\"\n    >\n      <li class=\"str-chat__message-actions-list-item\">\n        {{ \"streamChat.Edit Message\" | translate }}\n      </li>\n    </button>\n    <button\n      data-testid=\"delete-action\"\n      *ngIf=\"isDeleteVisible\"\n      (click)=\"deleteClicked()\"\n    >\n      <li class=\"str-chat__message-actions-list-item\">\n        {{ \"streamChat.Delete\" | translate }}\n      </li>\n    </button>\n  </ul>\n</div>\n\n<stream-modal\n  [isOpen]=\"isEditModalOpen\"\n  (isOpenChange)=\"\n    isEditModalOpen = $event; isEditModalOpen ? '' : modalClosed()\n  \"\n>\n  <div class=\"str-chat__edit-message-form\" *ngIf=\"isEditModalOpen\">\n    <ng-container *ngIf=\"messageInputTemplate; else defaultInput\">\n      <ng-container\n        *ngTemplateOutlet=\"\n          messageInputTemplate;\n          context: {\n            message: message,\n            messageUpdateHandler: modalClosed\n          }\n        \"\n      ></ng-container>\n    </ng-container>\n    <ng-template #defaultInput>\n      <stream-message-input\n        [message]=\"message\"\n        (messageUpdate)=\"modalClosed()\"\n      ></stream-message-input>\n    </ng-template>\n    <stream-notification-list></stream-notification-list>\n    <div\n      class=\"\n        str-chat__message-team-form-footer\n        str-chat__message-team-form-footer-angular\n      \"\n    >\n      <div class=\"str-chat__edit-message-form-options\">\n        <button translate data-testid=\"cancel-button\" (click)=\"modalClosed()\">\n          streamChat.Cancel\n        </button>\n        <button\n          type=\"submit\"\n          translate\n          data-testid=\"send-button\"\n          (click)=\"sendClicked()\"\n          (keyup.enter)=\"sendClicked()\"\n        >\n          streamChat.Send\n        </button>\n      </div>\n    </div>\n  </div>\n</stream-modal>\n", components: [{ type: ModalComponent, selector: "stream-modal", inputs: ["isOpen"], outputs: ["isOpenChange"] }, { type: MessageInputComponent, selector: "stream-message-input", inputs: ["isFileUploadEnabled", "areMentionsEnabled", "mentionScope", "mentionAutocompleteItemTemplate", "acceptedFileTypes", "isMultipleFileUploadEnabled", "message"], outputs: ["messageUpdate"] }, { type: NotificationListComponent, selector: "stream-notification-list" }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i10.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }], pipes: { "translate": i10.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: MessageActionsBoxComponent, decorators: [{
             type: Component,
             args: [{
@@ -1847,8 +1841,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImpor
         }], ctorParameters: function () { return [{ type: ChannelService }, { type: ChannelListToggleService }]; } });
 
 class ChannelPreviewComponent {
-    constructor(channelService) {
+    constructor(channelService, ngZone) {
         this.channelService = channelService;
+        this.ngZone = ngZone;
         this.isActive = false;
         this.isUnread = false;
         this.latestMessage = 'Nothing yet...';
@@ -1869,8 +1864,10 @@ class ChannelPreviewComponent {
         this.subscriptions.push(this.channel.on('message.updated', this.handleMessageEvent.bind(this)));
         this.subscriptions.push(this.channel.on('message.deleted', this.handleMessageEvent.bind(this)));
         this.subscriptions.push(this.channel.on('channel.truncated', this.handleMessageEvent.bind(this)));
-        this.subscriptions.push(this.channel.on('message.read', () => (this.isUnread =
-            !!this.channel.countUnread() && this.canSendReadEvents)));
+        this.subscriptions.push(this.channel.on('message.read', () => this.ngZone.run(() => {
+            this.isUnread =
+                !!this.channel.countUnread() && this.canSendReadEvents;
+        })));
     }
     ngOnDestroy() {
         this.subscriptions.forEach((s) => s.unsubscribe());
@@ -1891,17 +1888,19 @@ class ChannelPreviewComponent {
         void this.channelService.setAsActiveChannel(this.channel);
     }
     handleMessageEvent(event) {
-        var _a, _b, _c;
-        if (((_a = this.channel) === null || _a === void 0 ? void 0 : _a.state.messages.length) === 0) {
-            this.latestMessage = 'Nothing yet...';
-            return;
-        }
-        if (!event.message ||
-            ((_b = this.channel) === null || _b === void 0 ? void 0 : _b.state.messages[((_c = this.channel) === null || _c === void 0 ? void 0 : _c.state.messages.length) - 1].id) !== event.message.id) {
-            return;
-        }
-        this.setLatestMessage(event.message);
-        this.isUnread = !!this.channel.countUnread() && this.canSendReadEvents;
+        this.ngZone.run(() => {
+            var _a, _b, _c;
+            if (((_a = this.channel) === null || _a === void 0 ? void 0 : _a.state.messages.length) === 0) {
+                this.latestMessage = 'Nothing yet...';
+                return;
+            }
+            if (!event.message ||
+                ((_b = this.channel) === null || _b === void 0 ? void 0 : _b.state.messages[((_c = this.channel) === null || _c === void 0 ? void 0 : _c.state.messages.length) - 1].id) !== event.message.id) {
+                return;
+            }
+            this.setLatestMessage(event.message);
+            this.isUnread = !!this.channel.countUnread() && this.canSendReadEvents;
+        });
     }
     setLatestMessage(message) {
         if (message === null || message === void 0 ? void 0 : message.deleted_at) {
@@ -1915,7 +1914,7 @@ class ChannelPreviewComponent {
         }
     }
 }
-ChannelPreviewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: ChannelPreviewComponent, deps: [{ token: ChannelService }], target: i0.ɵɵFactoryTarget.Component });
+ChannelPreviewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: ChannelPreviewComponent, deps: [{ token: ChannelService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
 ChannelPreviewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: ChannelPreviewComponent, selector: "stream-channel-preview", inputs: { channel: "channel" }, ngImport: i0, template: "<button\n  class=\"str-chat__channel-preview-messenger\"\n  [class.str-chat__channel-preview-messenger--active]=\"isActive\"\n  [class.str-chat__channel-preview-messenger--unread]=\"isUnread\"\n  (click)=\"setAsActiveChannel()\"\n  data-testid=\"channel-preview-container\"\n>\n  <div class=\"str-chat__channel-preview-messenger--left\">\n    <stream-avatar\n      imageUrl=\"{{ avatarImage }}\"\n      name=\"{{ avatarName }}\"\n      [size]=\"40\"\n    ></stream-avatar>\n  </div>\n  <div class=\"str-chat__channel-preview-messenger--right\">\n    <div class=\"str-chat__channel-preview-messenger--name\">\n      <span data-testid=\"channel-preview-title\">{{ title }}</span>\n    </div>\n    <div\n      data-testid=\"latest-message\"\n      class=\"str-chat__channel-preview-messenger--last-message\"\n    >\n      {{ latestMessage | translate }}\n    </div>\n  </div>\n</button>\n", components: [{ type: AvatarComponent, selector: "stream-avatar", inputs: ["name", "imageUrl", "size"] }], pipes: { "translate": i10.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: ChannelPreviewComponent, decorators: [{
             type: Component,
@@ -1924,7 +1923,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImpor
                     templateUrl: './channel-preview.component.html',
                     styles: [],
                 }]
-        }], ctorParameters: function () { return [{ type: ChannelService }]; }, propDecorators: { channel: [{
+        }], ctorParameters: function () { return [{ type: ChannelService }, { type: i0.NgZone }]; }, propDecorators: { channel: [{
                 type: Input
             }] } });
 
@@ -2336,7 +2335,7 @@ class MessageComponent {
     }
 }
 MessageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: MessageComponent, deps: [{ token: ChatClientService }, { token: ChannelService }], target: i0.ɵɵFactoryTarget.Component });
-MessageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: MessageComponent, selector: "stream-message", inputs: { messageInputTemplate: "messageInputTemplate", mentionTemplate: "mentionTemplate", message: "message", enabledMessageActions: "enabledMessageActions", areReactionsEnabled: "areReactionsEnabled", canReactToMessage: "canReactToMessage", isLastSentMessage: "isLastSentMessage", canReceiveReadEvents: "canReceiveReadEvents" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  #container\n  class=\"str-chat__message-simple str-chat__message str-chat__message--{{\n    message?.type\n  }} str-chat__message--{{ message?.status }} {{\n    message?.text ? 'str-chat__message--has-text' : 'has-no-text'\n  }}\"\n  [class.str-chat__message--me]=\"isSentByCurrentUser\"\n  [class.str-chat__message-simple--me]=\"isSentByCurrentUser\"\n  [class.mobile-press]=\"isPressedOnMobile\"\n  [class.str-chat__message--has-attachment]=\"hasAttachment\"\n  [class.str-chat__message--with-reactions]=\"\n    areReactionsEnabled && hasReactions\n  \"\n  data-testid=\"message-container\"\n>\n  <ng-container *ngIf=\"!message?.deleted_at; else deletedMessage\">\n    <ng-container *ngIf=\"message?.type !== 'system'; else systemMessage\">\n      <ng-container\n        *ngIf=\"\n          isSentByCurrentUser &&\n          ((isLastSentMessage && message?.status === 'received') ||\n            message?.status === 'sending')\n        \"\n      >\n        <ng-container *ngIf=\"message?.status === 'sending'; else sentStatus\">\n          <ng-container *ngTemplateOutlet=\"sendingStatus\"></ng-container>\n        </ng-container>\n        <ng-template #sentStatus>\n          <ng-container\n            *ngIf=\"\n              isMessageDeliveredAndRead && canReceiveReadEvents;\n              else deliveredStatus\n            \"\n          >\n            <ng-container *ngTemplateOutlet=\"readStatus\"></ng-container>\n          </ng-container>\n        </ng-template>\n      </ng-container>\n      <stream-avatar\n        data-testid=\"avatar\"\n        class=\"str-chat-angular__avatar-host\"\n        [imageUrl]=\"message?.user?.image\"\n        [name]=\"message?.user?.name || message?.user?.id\"\n      ></stream-avatar>\n      <div class=\"str-chat__message-inner\">\n        <div\n          class=\"str-chat__message-simple__actions\"\n          data-testid=\"message-options\"\n          *ngIf=\"areOptionsVisible\"\n        >\n          <div\n            data-testid=\"message-actions-container\"\n            class=\"\n              str-chat__message-simple__actions__action\n              str-chat__message-simple__actions__action--options\n            \"\n            [class.str-chat-angular__message-simple__actions__action--options--editing]=\"\n              isEditing\n            \"\n          >\n            <stream-message-actions-box\n              [isOpen]=\"isActionBoxOpen\"\n              [isMine]=\"isSentByCurrentUser\"\n              [enabledActions]=\"enabledMessageActions\"\n              [message]=\"message\"\n              (displayedActionsCount)=\"visibleMessageActionsCount = $event\"\n              (isEditing)=\"isEditing = $event; isActionBoxOpen = !isEditing\"\n              [messageInputTemplate]=\"messageInputTemplate\"\n            ></stream-message-actions-box>\n            <stream-icon\n              *ngIf=\"visibleMessageActionsCount > 0\"\n              data-testid=\"action-icon\"\n              icon=\"action-icon\"\n              (keyup.enter)=\"isActionBoxOpen = !isActionBoxOpen\"\n              (click)=\"isActionBoxOpen = !isActionBoxOpen\"\n            ></stream-icon>\n          </div>\n          <div\n            *ngIf=\"areReactionsEnabled && canReactToMessage\"\n            class=\"\n              str-chat__message-simple__actions__action\n              str-chat__message-simple__actions__action--reactions\n            \"\n            data-testid=\"reaction-icon\"\n            (click)=\"isReactionSelectorOpen = !isReactionSelectorOpen\"\n            (keyup.enter)=\"isReactionSelectorOpen = !isReactionSelectorOpen\"\n          >\n            <stream-icon icon=\"reaction-icon\"></stream-icon>\n          </div>\n        </div>\n        <stream-message-reactions\n          *ngIf=\"areReactionsEnabled\"\n          [messageReactionCounts]=\"message?.reaction_counts || {}\"\n          [latestReactions]=\"message?.latest_reactions || []\"\n          [(isSelectorOpen)]=\"isReactionSelectorOpen\"\n          [messageId]=\"message?.id\"\n          [ownReactions]=\"message?.own_reactions || []\"\n        ></stream-message-reactions>\n        <stream-attachment-list\n          *ngIf=\"hasAttachment\"\n          [attachments]=\"message!.attachments!\"\n        ></stream-attachment-list>\n        <div class=\"str-chat__message-text\" *ngIf=\"message?.text\">\n          <div\n            data-testid=\"inner-message\"\n            class=\"\n              str-chat__message-text-inner str-chat__message-simple-text-inner\n            \"\n            [class.str-chat__message-light-text-inner--has-attachment]=\"\n              hasAttachment\n            \"\n            (click)=\"\n              message?.status === 'failed' && message?.errorStatusCode !== 403\n                ? resendMessage()\n                : undefined\n            \"\n            (keyup.enter)=\"\n              message?.status === 'failed' && message?.errorStatusCode !== 403\n                ? resendMessage()\n                : undefined\n            \"\n          >\n            <div\n              data-testid=\"client-error-message\"\n              *ngIf=\"message?.type === 'error'\"\n              class=\"str-chat__simple-message--error-message\"\n            >\n              {{ \"streamChat.Error \u00B7 Unsent\" | translate }}\n            </div>\n            <div\n              data-testid=\"error-message\"\n              *ngIf=\"message?.status === 'failed'\"\n              class=\"str-chat__simple-message--error-message\"\n            >\n              {{\n                (message?.errorStatusCode === 403\n                  ? \"streamChat.Message Failed \u00B7 Unauthorized\"\n                  : \"streamChat.Message Failed \u00B7 Click to try again\"\n                ) | translate\n              }}\n            </div>\n            <div\n              (click)=\"textClicked()\"\n              (keyup.enter)=\"textClicked()\"\n              data-testid=\"text\"\n            >\n              <p>\n                <!-- eslint-disable-next-line @angular-eslint/template/use-track-by-function -->\n                <ng-container *ngFor=\"let part of messageTextParts\">\n                  <span\n                    *ngIf=\"part.type === 'text'; else mention\"\n                    [innerHTML]=\"part.content\"\n                  ></span>\n                  <ng-template #mention>\n                    <ng-container *ngIf=\"mentionTemplate; else defaultMention\">\n                      <ng-container\n                        *ngTemplateOutlet=\"\n                          mentionTemplate;\n                          context: { user: part.user! }\n                        \"\n                      ></ng-container>\n                    </ng-container>\n                    <ng-template #defaultMention>\n                      <b>{{ part.content }}</b>\n                    </ng-template>\n                  </ng-template>\n                </ng-container>\n              </p>\n            </div>\n          </div>\n        </div>\n        <div class=\"str-chat__message-data str-chat__message-simple-data\">\n          <span\n            data-testid=\"sender\"\n            *ngIf=\"!isSentByCurrentUser\"\n            class=\"str-chat__message-simple-name\"\n          >\n            {{ message?.user?.name ? message?.user?.name : message?.user?.id }}\n          </span>\n          <span data-testid=\"date\" class=\"str-chat__message-simple-timestamp\">\n            {{ parsedDate }}\n          </span>\n        </div>\n      </div>\n    </ng-container>\n  </ng-container>\n</div>\n\n<ng-template #sendingStatus>\n  <span class=\"str-chat__message-simple-status\" data-testid=\"sending-indicator\">\n    <div class=\"str-chat__tooltip\">\n      {{ \"streamChat.Sending...\" | translate }}\n    </div>\n    <stream-loading-indicator\n      data-testid=\"loading-indicator\"\n    ></stream-loading-indicator>\n  </span>\n</ng-template>\n<ng-template #readStatus>\n  <span class=\"str-chat__message-simple-status\" data-testid=\"read-indicator\">\n    <div class=\"str-chat__tooltip\" data-testid=\"read-by-tooltip\">\n      {{ readByText }}\n    </div>\n    <stream-avatar\n      class=\"str-chat-angular__avatar-host\"\n      data-test-id=\"last-read-user-avatar\"\n      [size]=\"15\"\n      [imageUrl]=\"lastReadUser?.image\"\n      [name]=\"lastReadUser?.name || lastReadUser?.id\"\n    ></stream-avatar>\n    <span\n      data-test-id=\"read-by-length\"\n      *ngIf=\"isReadByMultipleUsers\"\n      class=\"str-chat__message-simple-status-number\"\n    >\n      {{ (message?.readBy)!.length }}\n    </span>\n  </span>\n</ng-template>\n<ng-template #deliveredStatus>\n  <span\n    class=\"str-chat__message-simple-status\"\n    data-testid=\"delivered-indicator\"\n  >\n    <div class=\"str-chat__tooltip\">\n      {{ \"streamChat.Delivered\" | translate }}\n    </div>\n    <stream-icon\n      data-testid=\"delivered-icon\"\n      icon=\"delivered-icon\"\n    ></stream-icon>\n  </span>\n</ng-template>\n\n<ng-template #deletedMessage>\n  <div data-testid=\"message-deleted-component\">\n    <div class=\"str-chat__message--deleted-inner\" translate>\n      streamChat.This message was deleted...\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #systemMessage>\n  <div data-testid=\"system-message\" class=\"str-chat__message--system\">\n    <div class=\"str-chat__message--system__text\">\n      <div class=\"str-chat__message--system__line\"></div>\n      <p>{{ message?.text }}</p>\n      <div class=\"str-chat__message--system__line\"></div>\n    </div>\n    <div class=\"str-chat__message--system__date\">\n      {{ parsedDate }}\n    </div>\n  </div>\n</ng-template>\n", components: [{ type: AvatarComponent, selector: "stream-avatar", inputs: ["name", "imageUrl", "size"] }, { type: MessageActionsBoxComponent, selector: "stream-message-actions-box", inputs: ["messageInputTemplate", "isOpen", "isMine", "message", "enabledActions"], outputs: ["displayedActionsCount", "isEditing"] }, { type: IconComponent, selector: "stream-icon", inputs: ["icon", "size"] }, { type: MessageReactionsComponent, selector: "stream-message-reactions", inputs: ["messageId", "messageReactionCounts", "isSelectorOpen", "latestReactions", "ownReactions"], outputs: ["isSelectorOpenChange"] }, { type: AttachmentListComponent, selector: "stream-attachment-list", inputs: ["attachments"] }, { type: LoadingIndicatorComponent, selector: "stream-loading-indicator", inputs: ["size", "color"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i10.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }], pipes: { "translate": i10.TranslatePipe } });
+MessageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: MessageComponent, selector: "stream-message", inputs: { messageInputTemplate: "messageInputTemplate", mentionTemplate: "mentionTemplate", message: "message", enabledMessageActions: "enabledMessageActions", areReactionsEnabled: "areReactionsEnabled", canReactToMessage: "canReactToMessage", isLastSentMessage: "isLastSentMessage", canReceiveReadEvents: "canReceiveReadEvents" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  #container\n  class=\"str-chat__message-simple str-chat__message str-chat__message--{{\n    message?.type\n  }} str-chat__message--{{ message?.status }} {{\n    message?.text ? 'str-chat__message--has-text' : 'has-no-text'\n  }}\"\n  [class.str-chat__message--me]=\"isSentByCurrentUser\"\n  [class.str-chat__message-simple--me]=\"isSentByCurrentUser\"\n  [class.mobile-press]=\"isPressedOnMobile\"\n  [class.str-chat__message--has-attachment]=\"hasAttachment\"\n  [class.str-chat__message--with-reactions]=\"\n    areReactionsEnabled && hasReactions\n  \"\n  data-testid=\"message-container\"\n>\n  <ng-container *ngIf=\"!message?.deleted_at; else deletedMessage\">\n    <ng-container *ngIf=\"message?.type !== 'system'; else systemMessage\">\n      <ng-container\n        *ngIf=\"\n          isSentByCurrentUser &&\n          ((isLastSentMessage && message?.status === 'received') ||\n            message?.status === 'sending')\n        \"\n      >\n        <ng-container *ngIf=\"message?.status === 'sending'; else sentStatus\">\n          <ng-container *ngTemplateOutlet=\"sendingStatus\"></ng-container>\n        </ng-container>\n        <ng-template #sentStatus>\n          <ng-container\n            *ngIf=\"\n              isMessageDeliveredAndRead && canReceiveReadEvents;\n              else deliveredStatus\n            \"\n          >\n            <ng-container *ngTemplateOutlet=\"readStatus\"></ng-container>\n          </ng-container>\n        </ng-template>\n      </ng-container>\n      <stream-avatar\n        data-testid=\"avatar\"\n        class=\"str-chat-angular__avatar-host\"\n        [imageUrl]=\"message?.user?.image\"\n        [name]=\"message?.user?.name || message?.user?.id\"\n      ></stream-avatar>\n      <div class=\"str-chat__message-inner\">\n        <div\n          class=\"str-chat__message-simple__actions\"\n          data-testid=\"message-options\"\n          *ngIf=\"areOptionsVisible\"\n        >\n          <div\n            data-testid=\"message-actions-container\"\n            class=\"\n              str-chat__message-simple__actions__action\n              str-chat__message-simple__actions__action--options\n            \"\n            [class.str-chat-angular__message-simple__actions__action--options--editing]=\"\n              isEditing\n            \"\n          >\n            <stream-message-actions-box\n              [isOpen]=\"isActionBoxOpen\"\n              [isMine]=\"isSentByCurrentUser\"\n              [enabledActions]=\"enabledMessageActions\"\n              [message]=\"message\"\n              (displayedActionsCount)=\"visibleMessageActionsCount = $event\"\n              (isEditing)=\"isEditing = $event; isActionBoxOpen = !isEditing\"\n              [messageInputTemplate]=\"messageInputTemplate\"\n            ></stream-message-actions-box>\n            <stream-icon\n              *ngIf=\"visibleMessageActionsCount > 0\"\n              data-testid=\"action-icon\"\n              icon=\"action-icon\"\n              (keyup.enter)=\"isActionBoxOpen = !isActionBoxOpen\"\n              (click)=\"isActionBoxOpen = !isActionBoxOpen\"\n            ></stream-icon>\n          </div>\n          <div\n            *ngIf=\"areReactionsEnabled && canReactToMessage\"\n            class=\"\n              str-chat__message-simple__actions__action\n              str-chat__message-simple__actions__action--reactions\n            \"\n            data-testid=\"reaction-icon\"\n            (click)=\"isReactionSelectorOpen = !isReactionSelectorOpen\"\n            (keyup.enter)=\"isReactionSelectorOpen = !isReactionSelectorOpen\"\n          >\n            <stream-icon icon=\"reaction-icon\"></stream-icon>\n          </div>\n        </div>\n        <stream-message-reactions\n          *ngIf=\"areReactionsEnabled\"\n          [messageReactionCounts]=\"message?.reaction_counts || {}\"\n          [latestReactions]=\"message?.latest_reactions || []\"\n          [(isSelectorOpen)]=\"isReactionSelectorOpen\"\n          [messageId]=\"message?.id\"\n          [ownReactions]=\"message?.own_reactions || []\"\n        ></stream-message-reactions>\n        <stream-attachment-list\n          *ngIf=\"hasAttachment\"\n          [attachments]=\"message!.attachments!\"\n        ></stream-attachment-list>\n        <div class=\"str-chat__message-text\" *ngIf=\"message?.text\">\n          <div\n            data-testid=\"inner-message\"\n            class=\"\n              str-chat__message-text-inner str-chat__message-simple-text-inner\n            \"\n            [class.str-chat__message-light-text-inner--has-attachment]=\"\n              hasAttachment\n            \"\n            (click)=\"\n              message?.status === 'failed' && message?.errorStatusCode !== 403\n                ? resendMessage()\n                : undefined\n            \"\n            (keyup.enter)=\"\n              message?.status === 'failed' && message?.errorStatusCode !== 403\n                ? resendMessage()\n                : undefined\n            \"\n          >\n            <div\n              data-testid=\"client-error-message\"\n              *ngIf=\"message?.type === 'error'\"\n              class=\"str-chat__simple-message--error-message\"\n            >\n              {{ \"streamChat.Error \u00B7 Unsent\" | translate }}\n            </div>\n            <div\n              data-testid=\"error-message\"\n              *ngIf=\"message?.status === 'failed'\"\n              class=\"str-chat__simple-message--error-message\"\n            >\n              {{\n                (message?.errorStatusCode === 403\n                  ? \"streamChat.Message Failed \u00B7 Unauthorized\"\n                  : \"streamChat.Message Failed \u00B7 Click to try again\"\n                ) | translate\n              }}\n            </div>\n            <div\n              (click)=\"textClicked()\"\n              (keyup.enter)=\"textClicked()\"\n              data-testid=\"text\"\n            >\n              <p>\n                <!-- eslint-disable-next-line @angular-eslint/template/use-track-by-function -->\n                <ng-container *ngFor=\"let part of messageTextParts\">\n                  <span\n                    *ngIf=\"part.type === 'text'; else mention\"\n                    [innerHTML]=\"part.content\"\n                  ></span>\n                  <ng-template #mention>\n                    <ng-container *ngIf=\"mentionTemplate; else defaultMention\">\n                      <ng-container\n                        *ngTemplateOutlet=\"\n                          mentionTemplate;\n                          context: { user: part.user! }\n                        \"\n                      ></ng-container>\n                    </ng-container>\n                    <ng-template #defaultMention>\n                      <b>{{ part.content }}</b>\n                    </ng-template>\n                  </ng-template>\n                </ng-container>\n              </p>\n            </div>\n          </div>\n        </div>\n        <div class=\"str-chat__message-data str-chat__message-simple-data\">\n          <span\n            data-testid=\"sender\"\n            *ngIf=\"!isSentByCurrentUser\"\n            class=\"str-chat__message-simple-name\"\n          >\n            {{ message?.user?.name ? message?.user?.name : message?.user?.id }}\n          </span>\n          <span data-testid=\"date\" class=\"str-chat__message-simple-timestamp\">\n            {{ parsedDate }}\n          </span>\n        </div>\n      </div>\n    </ng-container>\n  </ng-container>\n</div>\n\n<ng-template #sendingStatus>\n  <span\n    class=\"\n      str-chat__message-simple-status str-chat__message-simple-status-angular\n    \"\n    data-testid=\"sending-indicator\"\n  >\n    <div class=\"str-chat__tooltip\">\n      {{ \"streamChat.Sending...\" | translate }}\n    </div>\n    <stream-loading-indicator\n      data-testid=\"loading-indicator\"\n    ></stream-loading-indicator>\n  </span>\n</ng-template>\n<ng-template #readStatus>\n  <span\n    class=\"\n      str-chat__message-simple-status str-chat__message-simple-status-angular\n    \"\n    data-testid=\"read-indicator\"\n  >\n    <div class=\"str-chat__tooltip\" data-testid=\"read-by-tooltip\">\n      {{ readByText }}\n    </div>\n    <stream-avatar\n      class=\"str-chat-angular__avatar-host\"\n      data-test-id=\"last-read-user-avatar\"\n      [size]=\"15\"\n      [imageUrl]=\"lastReadUser?.image\"\n      [name]=\"lastReadUser?.name || lastReadUser?.id\"\n    ></stream-avatar>\n    <span\n      data-test-id=\"read-by-length\"\n      *ngIf=\"isReadByMultipleUsers\"\n      class=\"str-chat__message-simple-status-number\"\n    >\n      {{ (message?.readBy)!.length }}\n    </span>\n  </span>\n</ng-template>\n<ng-template #deliveredStatus>\n  <span\n    class=\"\n      str-chat__message-simple-status str-chat__message-simple-status-angular\n    \"\n    data-testid=\"delivered-indicator\"\n  >\n    <div class=\"str-chat__tooltip\">\n      {{ \"streamChat.Delivered\" | translate }}\n    </div>\n    <stream-icon\n      data-testid=\"delivered-icon\"\n      icon=\"delivered-icon\"\n    ></stream-icon>\n  </span>\n</ng-template>\n\n<ng-template #deletedMessage>\n  <div data-testid=\"message-deleted-component\">\n    <div class=\"str-chat__message--deleted-inner\" translate>\n      streamChat.This message was deleted...\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #systemMessage>\n  <div data-testid=\"system-message\" class=\"str-chat__message--system\">\n    <div class=\"str-chat__message--system__text\">\n      <div class=\"str-chat__message--system__line\"></div>\n      <p>{{ message?.text }}</p>\n      <div class=\"str-chat__message--system__line\"></div>\n    </div>\n    <div class=\"str-chat__message--system__date\">\n      {{ parsedDate }}\n    </div>\n  </div>\n</ng-template>\n", components: [{ type: AvatarComponent, selector: "stream-avatar", inputs: ["name", "imageUrl", "size"] }, { type: MessageActionsBoxComponent, selector: "stream-message-actions-box", inputs: ["messageInputTemplate", "isOpen", "isMine", "message", "enabledActions"], outputs: ["displayedActionsCount", "isEditing"] }, { type: IconComponent, selector: "stream-icon", inputs: ["icon", "size"] }, { type: MessageReactionsComponent, selector: "stream-message-reactions", inputs: ["messageId", "messageReactionCounts", "isSelectorOpen", "latestReactions", "ownReactions"], outputs: ["isSelectorOpenChange"] }, { type: AttachmentListComponent, selector: "stream-attachment-list", inputs: ["attachments"] }, { type: LoadingIndicatorComponent, selector: "stream-loading-indicator", inputs: ["size", "color"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i10.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }], pipes: { "translate": i10.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: MessageComponent, decorators: [{
             type: Component,
             args: [{
@@ -2430,24 +2429,28 @@ class AutocompleteTextareaComponent {
         this.send = new EventEmitter();
         this.userMentions = new EventEmitter();
         this.labelKey = 'autocompleteLabel';
-        this.triggerChar = '@';
+        this.mentionTriggerChar = '@';
         this.autocompleteConfig = {
             mentions: [],
         };
         this.subscriptions = [];
         this.mentionedUsers = [];
         this.userMentionConfig = {
-            triggerChar: this.triggerChar,
+            triggerChar: this.mentionTriggerChar,
             dropUp: true,
             labelKey: this.labelKey,
             returnTrigger: true,
             mentionFilter: (searchString, items) => this.filter(searchString, items),
-            mentionSelect: (item, triggerChar) => this.mentioned(item, triggerChar),
+            mentionSelect: (item, triggerChar) => this.itemSelectedFromAutocompleteList(item, triggerChar),
         };
         this.searchTerm$ = new BehaviorSubject('');
         this.searchTerm$
             .pipe(debounceTime(300), distinctUntilChanged())
-            .subscribe((searchTerm) => void this.updateMentionOptions(searchTerm));
+            .subscribe((searchTerm) => {
+            if (searchTerm.startsWith(this.mentionTriggerChar)) {
+                void this.updateMentionOptions(searchTerm);
+            }
+        });
         this.subscriptions.push(this.channelService.activeChannel$.subscribe(() => {
             this.mentionedUsers = [];
             this.userMentions.next([...this.mentionedUsers]);
@@ -2472,17 +2475,19 @@ class AutocompleteTextareaComponent {
     filter(searchString, items) {
         return items.filter((item) => this.transliterate(item.autocompleteLabel.toLowerCase()).includes(this.transliterate(searchString.toLowerCase())));
     }
-    mentioned(item, triggerChar = '') {
-        this.mentionedUsers.push((item.user ? item.user : item));
-        this.userMentions.next([...this.mentionedUsers]);
+    itemSelectedFromAutocompleteList(item, triggerChar = '') {
+        if (triggerChar === this.mentionTriggerChar) {
+            this.mentionedUsers.push((item.user ? item.user : item));
+            this.userMentions.next([...this.mentionedUsers]);
+        }
         return triggerChar + item.autocompleteLabel;
     }
     autcompleteSearchTermChanged(searchTerm) {
-        if (searchTerm === this.triggerChar) {
+        if (searchTerm === this.mentionTriggerChar) {
             void this.updateMentionOptions();
         }
         else {
-            this.searchTerm$.next(searchTerm.replace(this.triggerChar, ''));
+            this.searchTerm$.next(searchTerm);
         }
     }
     inputChanged() {
@@ -2509,6 +2514,7 @@ class AutocompleteTextareaComponent {
             if (!this.areMentionsEnabled) {
                 return;
             }
+            searchTerm = searchTerm === null || searchTerm === void 0 ? void 0 : searchTerm.replace(this.mentionTriggerChar, '');
             const request = this.mentionScope === 'application'
                 ? (s) => this.chatClientService.autocompleteUsers(s)
                 : (s) => this.channelService.autocompleteMembers(s);
@@ -2526,7 +2532,7 @@ class AutocompleteTextareaComponent {
         const updatedMentionedUsers = [];
         this.mentionedUsers.forEach((u) => {
             const key = u.name || u.id;
-            if (this.value.includes(`${this.triggerChar}${key}`)) {
+            if (this.value.includes(`${this.mentionTriggerChar}${key}`)) {
                 updatedMentionedUsers.push(u);
             }
         });