stream-chat-angular 2.6.0 → 2.8.0

package/bundles/stream-chat-angular.umd.js

@@ -353,7 +353,7 @@
         return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
     }
 
-    var version = '2.6.0';
+    var version = '2.8.0';
 
     var NotificationService = /** @class */ (function () {
         function NotificationService() {
@@ -403,9 +403,8 @@
             }], ctorParameters: function () { return []; } });
 
     var ChatClientService = /** @class */ (function () {
-        function ChatClientService(ngZone, appRef, notificationService) {
+        function ChatClientService(ngZone, notificationService) {
             this.ngZone = ngZone;
-            this.appRef = appRef;
             this.notificationService = notificationService;
             this.notificationSubject = new rxjs.ReplaySubject(1);
             this.connectionStateSubject = new rxjs.ReplaySubject(1);
@@ -414,7 +413,7 @@
             this.connectionState$ = this.connectionStateSubject.asObservable();
             this.appSettings$ = this.appSettingsSubject.asObservable();
         }
-        ChatClientService.prototype.init = function (apiKey, userId, userToken) {
+        ChatClientService.prototype.init = function (apiKey, userOrId, userTokenOrProvider) {
             return __awaiter(this, void 0, void 0, function () {
                 var removeNotification;
                 var _this = this;
@@ -423,12 +422,16 @@
                         case 0:
                             this.chatClient = streamChat.StreamChat.getInstance(apiKey);
                             return [4 /*yield*/, this.ngZone.runOutsideAngular(function () { return __awaiter(_this, void 0, void 0, function () {
+                                    var user;
                                     return __generator(this, function (_a) {
                                         switch (_a.label) {
-                                            case 0: return [4 /*yield*/, this.chatClient.connectUser({ id: userId }, userToken)];
+                                            case 0:
+                                                user = typeof userOrId === 'string' ? { id: userOrId } : userOrId;
+                                                return [4 /*yield*/, this.chatClient.connectUser(user, userTokenOrProvider)];
                                             case 1:
                                                 _a.sent();
                                                 this.chatClient.setUserAgent("stream-chat-angular-" + version + "-" + this.chatClient.getUserAgent());
+                                                this.chatClient.getAppSettings;
                                                 return [2 /*return*/];
                                         }
                                     });
@@ -436,39 +439,26 @@
                         case 1:
                             _a.sent();
                             this.appSettingsSubject.next(undefined);
-                            this.chatClient.on('notification.added_to_channel', function (e) {
+                            this.chatClient.on(function (e) {
                                 _this.notificationSubject.next({
-                                    eventType: 'notification.added_to_channel',
+                                    eventType: e.type,
                                     event: e,
                                 });
-                                _this.appRef.tick();
-                            });
-                            this.chatClient.on('notification.message_new', function (e) {
-                                _this.notificationSubject.next({
-                                    eventType: 'notification.message_new',
-                                    event: e,
-                                });
-                                _this.appRef.tick();
-                            });
-                            this.chatClient.on('notification.removed_from_channel', function (e) {
-                                _this.notificationSubject.next({
-                                    eventType: 'notification.removed_from_channel',
-                                    event: e,
-                                });
-                                _this.appRef.tick();
                             });
                             this.chatClient.on('connection.changed', function (e) {
-                                var isOnline = e.online;
-                                if (isOnline) {
-                                    if (removeNotification) {
-                                        removeNotification();
+                                _this.ngZone.run(function () {
+                                    var 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');
+                                });
                             });
                             return [2 /*return*/];
                     }
@@ -530,14 +520,14 @@
         };
         return ChatClientService;
     }());
-    ChatClientService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: ChatClientService, deps: [{ token: i0__namespace.NgZone }, { token: i0__namespace.ApplicationRef }, { token: NotificationService }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    ChatClientService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: ChatClientService, deps: [{ token: i0__namespace.NgZone }, { token: NotificationService }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
     ChatClientService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: ChatClientService, providedIn: 'root' });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: ChatClientService, decorators: [{
                 type: i0.Injectable,
                 args: [{
                         providedIn: 'root',
                     }]
-            }], ctorParameters: function () { return [{ type: i0__namespace.NgZone }, { type: i0__namespace.ApplicationRef }, { type: NotificationService }]; } });
+            }], ctorParameters: function () { return [{ type: i0__namespace.NgZone }, { type: NotificationService }]; } });
 
     var createMessagePreview = function (user, text, attachments, mentionedUsers) {
         var clientSideId = user.id + "-" + uuid.v4();
@@ -570,10 +560,9 @@
     };
 
     var ChannelService = /** @class */ (function () {
-        function ChannelService(chatClientService, appRef, ngZone) {
+        function ChannelService(chatClientService, ngZone) {
             var _this = this;
             this.chatClientService = chatClientService;
-            this.appRef = appRef;
             this.ngZone = ngZone;
             this.channelsSubject = new rxjs.BehaviorSubject(undefined);
             this.activeChannelSubject = new rxjs.BehaviorSubject(undefined);
@@ -840,10 +829,7 @@
                                 return [2 /*return*/, []];
                             }
                             return [4 /*yield*/, activeChannel.queryMembers({
-                                    $or: [
-                                        { id: { $autocomplete: searchTerm } },
-                                        { name: { $autocomplete: searchTerm } },
-                                    ],
+                                    name: { $autocomplete: searchTerm },
                                     id: { $ne: this.chatClientService.chatClient.userID },
                                 })];
                         case 2:
@@ -891,55 +877,73 @@
         ChannelService.prototype.handleNotification = function (notification) {
             return __awaiter(this, void 0, void 0, function () {
                 var _e;
+                var _this = this;
                 return __generator(this, function (_f) {
                     switch (_f.label) {
                         case 0:
                             _e = notification.eventType;
                             switch (_e) {
                                 case 'notification.message_new': return [3 /*break*/, 1];
-                                case 'notification.added_to_channel': return [3 /*break*/, 5];
-                                case 'notification.removed_from_channel': return [3 /*break*/, 9];
+                                case 'notification.added_to_channel': return [3 /*break*/, 3];
+                                case 'notification.removed_from_channel': return [3 /*break*/, 5];
                             }
-                            return [3 /*break*/, 10];
-                        case 1:
-                            if (!this.customNewMessageNotificationHandler) return [3 /*break*/, 2];
-                            this.customNewMessageNotificationHandler(notification, this.channelListSetter);
-                            return [3 /*break*/, 4];
-                        case 2: return [4 /*yield*/, this.handleNewMessageNotification(notification)];
-                        case 3:
+                            return [3 /*break*/, 6];
+                        case 1: return [4 /*yield*/, this.ngZone.run(function () { return __awaiter(_this, void 0, void 0, function () {
+                                return __generator(this, function (_e) {
+                                    switch (_e.label) {
+                                        case 0:
+                                            if (!this.customNewMessageNotificationHandler) return [3 /*break*/, 1];
+                                            this.customNewMessageNotificationHandler(notification, this.channelListSetter);
+                                            return [3 /*break*/, 3];
+                                        case 1: return [4 /*yield*/, this.handleNewMessageNotification(notification)];
+                                        case 2:
+                                            _e.sent();
+                                            _e.label = 3;
+                                        case 3: return [2 /*return*/];
+                                    }
+                                });
+                            }); })];
+                        case 2:
                             _f.sent();
-                            _f.label = 4;
-                        case 4: return [3 /*break*/, 10];
-                        case 5:
-                            if (!this.customAddedToChannelNotificationHandler) return [3 /*break*/, 6];
-                            this.customAddedToChannelNotificationHandler(notification, this.channelListSetter);
-                            return [3 /*break*/, 8];
-                        case 6: return [4 /*yield*/, this.handleAddedToChannelNotification(notification)];
-                        case 7:
+                            return [3 /*break*/, 6];
+                        case 3: return [4 /*yield*/, this.ngZone.run(function () { return __awaiter(_this, void 0, void 0, function () {
+                                return __generator(this, function (_e) {
+                                    switch (_e.label) {
+                                        case 0:
+                                            if (!this.customAddedToChannelNotificationHandler) return [3 /*break*/, 1];
+                                            this.customAddedToChannelNotificationHandler(notification, this.channelListSetter);
+                                            return [3 /*break*/, 3];
+                                        case 1: return [4 /*yield*/, this.handleAddedToChannelNotification(notification)];
+                                        case 2:
+                                            _e.sent();
+                                            _e.label = 3;
+                                        case 3: return [2 /*return*/];
+                                    }
+                                });
+                            }); })];
+                        case 4:
                             _f.sent();
-                            _f.label = 8;
-                        case 8: return [3 /*break*/, 10];
-                        case 9:
+                            return [3 /*break*/, 6];
+                        case 5:
                             {
-                                if (this.customRemovedFromChannelNotificationHandler) {
-                                    this.customRemovedFromChannelNotificationHandler(notification, this.channelListSetter);
-                                }
-                                else {
-                                    this.handleRemovedFromChannelNotification(notification);
-                                }
+                                this.ngZone.run(function () {
+                                    if (_this.customRemovedFromChannelNotificationHandler) {
+                                        _this.customRemovedFromChannelNotificationHandler(notification, _this.channelListSetter);
+                                    }
+                                    else {
+                                        _this.handleRemovedFromChannelNotification(notification);
+                                    }
+                                });
                             }
-                            _f.label = 10;
-                        case 10: return [2 /*return*/];
+                            _f.label = 6;
+                        case 6: return [2 /*return*/];
                     }
                 });
             });
         };
         ChannelService.prototype.handleRemovedFromChannelNotification = function (notification) {
-            var _this = this;
-            this.ngZone.run(function () {
-                var channelIdToBeRemoved = notification.event.channel.cid;
-                _this.removeFromChannelList(channelIdToBeRemoved);
-            });
+            var channelIdToBeRemoved = notification.event.channel.cid;
+            this.removeFromChannelList(channelIdToBeRemoved);
         };
         ChannelService.prototype.handleNewMessageNotification = function (notification) {
             return __awaiter(this, void 0, void 0, function () {
@@ -969,7 +973,6 @@
             var _a, _b;
             return __awaiter(this, void 0, void 0, function () {
                 var channel;
-                var _this = this;
                 return __generator(this, function (_e) {
                     switch (_e.label) {
                         case 0:
@@ -978,11 +981,9 @@
                         case 1:
                             _e.sent();
                             this.watchForChannelEvents(channel);
-                            this.ngZone.run(function () {
-                                _this.channelsSubject.next(__spreadArray([
-                                    channel
-                                ], __read((_this.channelsSubject.getValue() || []))));
-                            });
+                            this.channelsSubject.next(__spreadArray([
+                                channel
+                            ], __read((this.channelsSubject.getValue() || []))));
                             return [2 /*return*/];
                     }
                 });
@@ -1015,15 +1016,17 @@
             this.activeChannelSubscriptions.push(channel.on('reaction.deleted', function (e) { return _this.messageReactionEventReceived(e); }));
             this.activeChannelSubscriptions.push(channel.on('reaction.updated', function (e) { return _this.messageReactionEventReceived(e); }));
             this.activeChannelSubscriptions.push(channel.on('message.read', function (e) {
-                var latestMessage;
-                _this.activeChannelMessages$.pipe(operators.first()).subscribe(function (messages) {
-                    latestMessage = messages[messages.length - 1];
+                _this.ngZone.run(function () {
+                    var latestMessage;
+                    _this.activeChannelMessages$.pipe(operators.first()).subscribe(function (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());
             }));
         };
         ChannelService.prototype.messageUpdated = function (event) {
@@ -1112,66 +1115,72 @@
             channel.on(function (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(function () {
+                            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(function () {
+                            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(function () {
+                            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(function () {
+                            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(function () {
+                            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(function () {
+                            if (_this.customChannelTruncatedHandler) {
+                                _this.customChannelTruncatedHandler(event, channel, _this.channelListSetter, _this.messageListSetter);
+                            }
+                            else {
+                                _this.handleChannelTruncate(event);
+                            }
+                        });
                         break;
                     }
                 }
-                setTimeout(function () { return _this.appRef.tick(); }, 0);
             });
         };
         ChannelService.prototype.handleNewMessage = function (_, channel) {
@@ -1240,14 +1249,14 @@
         });
         return ChannelService;
     }());
-    ChannelService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: ChannelService, deps: [{ token: ChatClientService }, { token: i0__namespace.ApplicationRef }, { token: i0__namespace.NgZone }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    ChannelService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: ChannelService, deps: [{ token: ChatClientService }, { token: i0__namespace.NgZone }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
     ChannelService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: ChannelService, providedIn: 'root' });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: ChannelService, decorators: [{
                 type: i0.Injectable,
                 args: [{
                         providedIn: 'root',
                     }]
-            }], ctorParameters: function () { return [{ type: ChatClientService }, { type: i0__namespace.ApplicationRef }, { type: i0__namespace.NgZone }]; } });
+            }], ctorParameters: function () { return [{ type: ChatClientService }, { type: i0__namespace.NgZone }]; } });
 
     var ThemeService = /** @class */ (function () {
         function ThemeService() {
@@ -1880,7 +1889,7 @@
         return AttachmentPreviewListComponent;
     }());
     AttachmentPreviewListComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: AttachmentPreviewListComponent, deps: [{ token: AttachmentService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    AttachmentPreviewListComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: AttachmentPreviewListComponent, selector: "stream-attachment-preview-list", ngImport: i0__namespace, 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__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i10__namespace.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }], pipes: { "async": i3__namespace.AsyncPipe } });
+    AttachmentPreviewListComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: AttachmentPreviewListComponent, selector: "stream-attachment-preview-list", ngImport: i0__namespace, 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__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i10__namespace.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }], pipes: { "async": i3__namespace.AsyncPipe } });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: AttachmentPreviewListComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -2427,7 +2436,7 @@
         return MessageActionsBoxComponent;
     }());
     MessageActionsBoxComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: MessageActionsBoxComponent, deps: [{ token: ChatClientService }, { token: NotificationService }, { token: ChannelService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    MessageActionsBoxComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, 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__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i10__namespace.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }], pipes: { "translate": i10__namespace.TranslatePipe } });
+    MessageActionsBoxComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, 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__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i10__namespace.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }], pipes: { "translate": i10__namespace.TranslatePipe } });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: MessageActionsBoxComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -2588,8 +2597,9 @@
             }], ctorParameters: function () { return [{ type: ChannelService }, { type: ChannelListToggleService }]; } });
 
     var ChannelPreviewComponent = /** @class */ (function () {
-        function ChannelPreviewComponent(channelService) {
+        function ChannelPreviewComponent(channelService, ngZone) {
             this.channelService = channelService;
+            this.ngZone = ngZone;
             this.isActive = false;
             this.isUnread = false;
             this.latestMessage = 'Nothing yet...';
@@ -2611,8 +2621,10 @@
             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', function () { return (_this.isUnread =
-                !!_this.channel.countUnread() && _this.canSendReadEvents); }));
+            this.subscriptions.push(this.channel.on('message.read', function () { return _this.ngZone.run(function () {
+                _this.isUnread =
+                    !!_this.channel.countUnread() && _this.canSendReadEvents;
+            }); }));
         };
         ChannelPreviewComponent.prototype.ngOnDestroy = function () {
             this.subscriptions.forEach(function (s) { return s.unsubscribe(); });
@@ -2645,17 +2657,20 @@
             void this.channelService.setAsActiveChannel(this.channel);
         };
         ChannelPreviewComponent.prototype.handleMessageEvent = function (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;
+            var _this = this;
+            this.ngZone.run(function () {
+                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;
+            });
         };
         ChannelPreviewComponent.prototype.setLatestMessage = function (message) {
             if (message === null || message === void 0 ? void 0 : message.deleted_at) {
@@ -2670,7 +2685,7 @@
         };
         return ChannelPreviewComponent;
     }());
-    ChannelPreviewComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: ChannelPreviewComponent, deps: [{ token: ChannelService }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    ChannelPreviewComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: ChannelPreviewComponent, deps: [{ token: ChannelService }, { token: i0__namespace.NgZone }], target: i0__namespace.ɵɵFactoryTarget.Component });
     ChannelPreviewComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: ChannelPreviewComponent, selector: "stream-channel-preview", inputs: { channel: "channel" }, ngImport: i0__namespace, 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__namespace.TranslatePipe } });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: ChannelPreviewComponent, decorators: [{
                 type: i0.Component,
@@ -2679,7 +2694,7 @@
                         templateUrl: './channel-preview.component.html',
                         styles: [],
                     }]
-            }], ctorParameters: function () { return [{ type: ChannelService }]; }, propDecorators: { channel: [{
+            }], ctorParameters: function () { return [{ type: ChannelService }, { type: i0__namespace.NgZone }]; }, propDecorators: { channel: [{
                     type: i0.Input
                 }] } });
 
@@ -3159,7 +3174,7 @@
         return MessageComponent;
     }());
     MessageComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: MessageComponent, deps: [{ token: ChatClientService }, { token: ChannelService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    MessageComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, 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__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i10__namespace.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }], pipes: { "translate": i10__namespace.TranslatePipe } });
+    MessageComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, 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__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i10__namespace.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }], pipes: { "translate": i10__namespace.TranslatePipe } });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: MessageComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -3257,24 +3272,28 @@
             this.send = new i0.EventEmitter();
             this.userMentions = new i0.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: function (searchString, items) { return _this.filter(searchString, items); },
-                mentionSelect: function (item, triggerChar) { return _this.mentioned(item, triggerChar); },
+                mentionSelect: function (item, triggerChar) { return _this.itemSelectedFromAutocompleteList(item, triggerChar); },
             };
             this.searchTerm$ = new rxjs.BehaviorSubject('');
             this.searchTerm$
                 .pipe(operators.debounceTime(300), operators.distinctUntilChanged())
-                .subscribe(function (searchTerm) { return void _this.updateMentionOptions(searchTerm); });
+                .subscribe(function (searchTerm) {
+                if (searchTerm.startsWith(_this.mentionTriggerChar)) {
+                    void _this.updateMentionOptions(searchTerm);
+                }
+            });
             this.subscriptions.push(this.channelService.activeChannel$.subscribe(function () {
                 _this.mentionedUsers = [];
                 _this.userMentions.next(__spreadArray([], __read(_this.mentionedUsers)));
@@ -3300,18 +3319,20 @@
             var _this = this;
             return items.filter(function (item) { return _this.transliterate(item.autocompleteLabel.toLowerCase()).includes(_this.transliterate(searchString.toLowerCase())); });
         };
-        AutocompleteTextareaComponent.prototype.mentioned = function (item, triggerChar) {
+        AutocompleteTextareaComponent.prototype.itemSelectedFromAutocompleteList = function (item, triggerChar) {
             if (triggerChar === void 0) { triggerChar = ''; }
-            this.mentionedUsers.push((item.user ? item.user : item));
-            this.userMentions.next(__spreadArray([], __read(this.mentionedUsers)));
+            if (triggerChar === this.mentionTriggerChar) {
+                this.mentionedUsers.push((item.user ? item.user : item));
+                this.userMentions.next(__spreadArray([], __read(this.mentionedUsers)));
+            }
             return triggerChar + item.autocompleteLabel;
         };
         AutocompleteTextareaComponent.prototype.autcompleteSearchTermChanged = function (searchTerm) {
-            if (searchTerm === this.triggerChar) {
+            if (searchTerm === this.mentionTriggerChar) {
                 void this.updateMentionOptions();
             }
             else {
-                this.searchTerm$.next(searchTerm.replace(this.triggerChar, ''));
+                this.searchTerm$.next(searchTerm);
             }
         };
         AutocompleteTextareaComponent.prototype.inputChanged = function () {
@@ -3343,6 +3364,7 @@
                             if (!this.areMentionsEnabled) {
                                 return [2 /*return*/];
                             }
+                            searchTerm = searchTerm === null || searchTerm === void 0 ? void 0 : searchTerm.replace(this.mentionTriggerChar, '');
                             request = this.mentionScope === 'application'
                                 ? function (s) { return _this.chatClientService.autocompleteUsers(s); }
                                 : function (s) { return _this.channelService.autocompleteMembers(s); };
@@ -3366,7 +3388,7 @@
             var updatedMentionedUsers = [];
             this.mentionedUsers.forEach(function (u) {
                 var key = u.name || u.id;
-                if (_this.value.includes("" + _this.triggerChar + key)) {
+                if (_this.value.includes("" + _this.mentionTriggerChar + key)) {
                     updatedMentionedUsers.push(u);
                 }
             });