stream-chat-angular 2.19.0 → 2.20.2

package/assets/version.d.ts

@@ -1 +1 @@
-export declare const version = "2.19.0";
+export declare const version = "2.20.2";

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

@@ -354,7 +354,7 @@
         return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
     }
 
-    var version = '2.19.0';
+    var version = '2.20.2';
 
     /**
      * The `NotificationService` can be used to add or remove notifications. By default the [`NotificationList`](../components/NotificationListComponent.mdx) component displays the currently active notifications.
@@ -366,44 +366,61 @@
         }
         /**
          * Displays a notification for the given amount of time.
-         * @param text The text of the notification
+         * @param content The text of the notification or the HTML template for the notification
          * @param type The type of the notification
          * @param timeout The number of milliseconds while the notification should be visible
-         * @param translateParams Translation parameters for the `text`
+         * @param translateParams Translation parameters for the `content` (for text notifications)
+         * @param templateContext The input of the notification template (for HTML notifications)
          * @returns A method to clear the notification (before the timeout).
          */
-        NotificationService.prototype.addTemporaryNotification = function (text, type, timeout, translateParams) {
+        NotificationService.prototype.addTemporaryNotification = function (content, type, timeout, translateParams, templateContext) {
             var _this = this;
             if (type === void 0) { type = 'error'; }
             if (timeout === void 0) { timeout = 5000; }
-            this.addNotification(text, type, translateParams);
-            var id = setTimeout(function () { return _this.removeNotification(text); }, timeout);
-            return function () {
+            var notification = this.createNotification(content, type, translateParams, templateContext);
+            var id = setTimeout(function () { return _this.removeNotification(notification.id); }, timeout);
+            notification.dismissFn = function () {
                 clearTimeout(id);
-                _this.removeNotification(text);
+                _this.removeNotification(notification.id);
             };
+            this.notificationsSubject.next(__spreadArray(__spreadArray([], __read(this.notificationsSubject.getValue())), [
+                notification,
+            ]));
+            return notification.dismissFn;
         };
         /**
          * Displays a notification, that will be visible until it's removed.
-         * @param text The text of the notification
+         * @param content The text of the notification or the HTML template for the notification
          * @param type The type of the notification
-         * @param translateParams Translation parameters for the `text`
+         * @param translateParams Translation parameters for the `content` (for text notifications)
+         * @param templateContext The input of the notification template (for HTML notifications)
          * @returns A method to clear the notification.
          */
-        NotificationService.prototype.addPermanentNotification = function (text, type, translateParams) {
-            var _this = this;
+        NotificationService.prototype.addPermanentNotification = function (content, type, translateParams, templateContext) {
             if (type === void 0) { type = 'error'; }
-            this.addNotification(text, type, translateParams);
-            return function () { return _this.removeNotification(text); };
-        };
-        NotificationService.prototype.addNotification = function (text, type, translateParams) {
+            var notification = this.createNotification(content, type, translateParams, templateContext);
             this.notificationsSubject.next(__spreadArray(__spreadArray([], __read(this.notificationsSubject.getValue())), [
-                { text: text, type: type, translateParams: translateParams },
+                notification,
             ]));
+            return notification.dismissFn;
         };
-        NotificationService.prototype.removeNotification = function (text) {
+        NotificationService.prototype.createNotification = function (content, type, translateParams, templateContext) {
+            var _a;
+            var _this = this;
+            var id = new Date().getTime().toString() + Math.random().toString();
+            return _a = {
+                    id: id
+                },
+                _a[typeof content === 'string' ? 'text' : 'template'] = content,
+                _a.type = type,
+                _a.translateParams = translateParams,
+                _a.templateContext = templateContext,
+                _a.dismissFn = function () { return _this.removeNotification(id); },
+                _a;
+        };
+        NotificationService.prototype.removeNotification = function (id) {
             var notifications = this.notificationsSubject.getValue();
-            var index = notifications.findIndex(function (n) { return n.text === text; });
+            var index = notifications.findIndex(function (n) { return n.id === id; });
             if (index === -1) {
                 return;
             }
@@ -431,9 +448,11 @@
             this.notificationSubject = new rxjs.ReplaySubject(1);
             this.connectionStateSubject = new rxjs.ReplaySubject(1);
             this.appSettingsSubject = new rxjs.BehaviorSubject(undefined);
+            this.pendingInvitesSubject = new rxjs.BehaviorSubject([]);
             this.notification$ = this.notificationSubject.asObservable();
             this.connectionState$ = this.connectionStateSubject.asObservable();
             this.appSettings$ = this.appSettingsSubject.asObservable();
+            this.pendingInvites$ = this.pendingInvitesSubject.asObservable();
         }
         /**
          * Creates a [`StreamChat`](https://github.com/GetStream/stream-chat-js/blob/668b3e5521339f4e14fc657834531b4c8bf8176b/src/client.ts#L124) instance using the provided `apiKey`, and connects a user with the given meta data and token. More info about [connecting users](https://getstream.io/chat/docs/javascript/init_and_users/?language=javascript) can be found in the platform documentation.
@@ -442,32 +461,38 @@
          * @param userTokenOrProvider
          */
         ChatClientService.prototype.init = function (apiKey, userOrId, userTokenOrProvider) {
+            var _a;
             return __awaiter(this, void 0, void 0, function () {
-                var removeNotification;
+                var channels, removeNotification;
                 var _this = this;
-                return __generator(this, function (_a) {
-                    switch (_a.label) {
+                return __generator(this, function (_d) {
+                    switch (_d.label) {
                         case 0:
                             this.chatClient = streamChat.StreamChat.getInstance(apiKey);
+                            this.chatClient.devToken;
                             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) {
+                                    return __generator(this, function (_d) {
+                                        switch (_d.label) {
                                             case 0:
                                                 user = typeof userOrId === 'string' ? { id: userOrId } : userOrId;
                                                 return [4 /*yield*/, this.chatClient.connectUser(user, userTokenOrProvider)];
                                             case 1:
-                                                _a.sent();
+                                                _d.sent();
                                                 this.chatClient.setUserAgent("stream-chat-angular-" + version + "-" + this.chatClient.getUserAgent());
-                                                this.chatClient.getAppSettings;
                                                 return [2 /*return*/];
                                         }
                                     });
                                 }); })];
                         case 1:
-                            _a.sent();
+                            _d.sent();
+                            return [4 /*yield*/, this.chatClient.queryChannels({ invite: 'pending' }, {}, { user_id: (_a = this.chatClient.user) === null || _a === void 0 ? void 0 : _a.id })];
+                        case 2:
+                            channels = _d.sent();
+                            this.pendingInvitesSubject.next(channels);
                             this.appSettingsSubject.next(undefined);
                             this.chatClient.on(function (e) {
+                                _this.updatePendingInvites(e);
                                 _this.notificationSubject.next({
                                     eventType: e.type,
                                     event: e,
@@ -498,11 +523,13 @@
          */
         ChatClientService.prototype.disconnectUser = function () {
             return __awaiter(this, void 0, void 0, function () {
-                return __generator(this, function (_a) {
-                    switch (_a.label) {
-                        case 0: return [4 /*yield*/, this.chatClient.disconnectUser()];
+                return __generator(this, function (_d) {
+                    switch (_d.label) {
+                        case 0:
+                            this.pendingInvitesSubject.next([]);
+                            return [4 /*yield*/, this.chatClient.disconnectUser()];
                         case 1:
-                            _a.sent();
+                            _d.sent();
                             return [2 /*return*/];
                     }
                 });
@@ -514,15 +541,15 @@
         ChatClientService.prototype.getAppSettings = function () {
             return __awaiter(this, void 0, void 0, function () {
                 var settings;
-                return __generator(this, function (_a) {
-                    switch (_a.label) {
+                return __generator(this, function (_d) {
+                    switch (_d.label) {
                         case 0:
                             if (this.appSettingsSubject.getValue()) {
                                 return [2 /*return*/];
                             }
                             return [4 /*yield*/, this.chatClient.getAppSettings()];
                         case 1:
-                            settings = _a.sent();
+                            settings = _d.sent();
                             this.appSettingsSubject.next(settings.app || {});
                             return [2 /*return*/];
                     }
@@ -535,11 +562,11 @@
          */
         ChatClientService.prototype.flagMessage = function (messageId) {
             return __awaiter(this, void 0, void 0, function () {
-                return __generator(this, function (_a) {
-                    switch (_a.label) {
+                return __generator(this, function (_d) {
+                    switch (_d.label) {
                         case 0: return [4 /*yield*/, this.chatClient.flagMessage(messageId)];
                         case 1:
-                            _a.sent();
+                            _d.sent();
                             return [2 /*return*/];
                     }
                 });
@@ -553,8 +580,8 @@
         ChatClientService.prototype.autocompleteUsers = function (searchTerm) {
             return __awaiter(this, void 0, void 0, function () {
                 var result;
-                return __generator(this, function (_a) {
-                    switch (_a.label) {
+                return __generator(this, function (_d) {
+                    switch (_d.label) {
                         case 0:
                             if (!searchTerm) {
                                 return [2 /*return*/, []];
@@ -567,12 +594,29 @@
                                     id: { $ne: this.chatClient.userID },
                                 })];
                         case 1:
-                            result = _a.sent();
+                            result = _d.sent();
                             return [2 /*return*/, result.users];
                     }
                 });
             });
         };
+        ChatClientService.prototype.updatePendingInvites = function (e) {
+            var _a, _b, _c;
+            if (((_b = (_a = e.member) === null || _a === void 0 ? void 0 : _a.user) === null || _b === void 0 ? void 0 : _b.id) === ((_c = this.chatClient.user) === null || _c === void 0 ? void 0 : _c.id) && e.channel) {
+                var pendingInvites = this.pendingInvitesSubject.getValue();
+                if (e.type === 'notification.invited') {
+                    this.pendingInvitesSubject.next(__spreadArray(__spreadArray([], __read(pendingInvites)), [e.channel]));
+                }
+                else if (e.type === 'notification.invite_accepted' ||
+                    e.type === 'notification.invite_rejected') {
+                    var index = pendingInvites.findIndex(function (i) { var _a; return (i === null || i === void 0 ? void 0 : i.cid) === ((_a = e.channel) === null || _a === void 0 ? void 0 : _a.cid); });
+                    if (index !== -1) {
+                        pendingInvites.splice(index, 1);
+                        this.pendingInvitesSubject.next(__spreadArray([], __read(pendingInvites)));
+                    }
+                }
+            }
+        };
         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: NotificationService }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
@@ -641,7 +685,14 @@
             this.usersTypingInChannelSubject = new rxjs.BehaviorSubject([]);
             this.usersTypingInThreadSubject = new rxjs.BehaviorSubject([]);
             this.channelListSetter = function (channels) {
-                _this.channelsSubject.next(channels);
+                var currentChannels = _this.channelsSubject.getValue() || [];
+                var newChannels = channels.filter(function (c) { return !currentChannels.find(function (channel) { return channel.cid === c.cid; }); });
+                var deletedChannels = currentChannels.filter(function (c) { return !(channels === null || channels === void 0 ? void 0 : channels.find(function (channel) { return channel.cid === c.cid; })); });
+                _this.addChannelsFromNotification(newChannels);
+                _this.removeChannelsFromChannelList(deletedChannels.map(function (c) { return c.cid; }));
+                if (!newChannels.length && !deletedChannels.length) {
+                    _this.channelsSubject.next(channels);
+                }
             };
             this.messageListSetter = function (messages) {
                 _this.activeChannelMessagesSubject.next(messages);
@@ -1168,126 +1219,79 @@
             });
         };
         ChannelService.prototype.handleNotification = function (notification) {
-            return __awaiter(this, void 0, void 0, function () {
-                var _h;
-                var _this = this;
-                return __generator(this, function (_j) {
-                    switch (_j.label) {
-                        case 0:
-                            _h = notification.eventType;
-                            switch (_h) {
-                                case 'notification.message_new': return [3 /*break*/, 1];
-                                case 'notification.added_to_channel': return [3 /*break*/, 3];
-                                case 'notification.removed_from_channel': return [3 /*break*/, 5];
-                            }
-                            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 (_h) {
-                                    switch (_h.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:
-                                            _h.sent();
-                                            _h.label = 3;
-                                        case 3: return [2 /*return*/];
-                                    }
-                                });
-                            }); })];
-                        case 2:
-                            _j.sent();
-                            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 (_h) {
-                                    switch (_h.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:
-                                            _h.sent();
-                                            _h.label = 3;
-                                        case 3: return [2 /*return*/];
-                                    }
-                                });
-                            }); })];
-                        case 4:
-                            _j.sent();
-                            return [3 /*break*/, 6];
-                        case 5:
-                            {
-                                this.ngZone.run(function () {
-                                    if (_this.customRemovedFromChannelNotificationHandler) {
-                                        _this.customRemovedFromChannelNotificationHandler(notification, _this.channelListSetter);
-                                    }
-                                    else {
-                                        _this.handleRemovedFromChannelNotification(notification);
-                                    }
-                                });
-                            }
-                            _j.label = 6;
-                        case 6: return [2 /*return*/];
-                    }
-                });
-            });
+            var _this = this;
+            switch (notification.eventType) {
+                case 'notification.message_new': {
+                    this.ngZone.run(function () {
+                        if (_this.customNewMessageNotificationHandler) {
+                            _this.customNewMessageNotificationHandler(notification, _this.channelListSetter);
+                        }
+                        else {
+                            _this.handleNewMessageNotification(notification);
+                        }
+                    });
+                    break;
+                }
+                case 'notification.added_to_channel': {
+                    this.ngZone.run(function () {
+                        if (_this.customAddedToChannelNotificationHandler) {
+                            _this.customAddedToChannelNotificationHandler(notification, _this.channelListSetter);
+                        }
+                        else {
+                            _this.handleAddedToChannelNotification(notification);
+                        }
+                    });
+                    break;
+                }
+                case 'notification.removed_from_channel': {
+                    this.ngZone.run(function () {
+                        if (_this.customRemovedFromChannelNotificationHandler) {
+                            _this.customRemovedFromChannelNotificationHandler(notification, _this.channelListSetter);
+                        }
+                        else {
+                            _this.handleRemovedFromChannelNotification(notification);
+                        }
+                    });
+                }
+            }
         };
         ChannelService.prototype.handleRemovedFromChannelNotification = function (notification) {
             var channelIdToBeRemoved = notification.event.channel.cid;
-            this.removeFromChannelList(channelIdToBeRemoved);
+            this.removeChannelsFromChannelList([channelIdToBeRemoved]);
         };
         ChannelService.prototype.handleNewMessageNotification = function (notification) {
-            return __awaiter(this, void 0, void 0, function () {
-                return __generator(this, function (_h) {
-                    switch (_h.label) {
-                        case 0: return [4 /*yield*/, this.addChannelFromNotification(notification)];
-                        case 1:
-                            _h.sent();
-                            return [2 /*return*/];
-                    }
-                });
-            });
+            if (notification.event.channel) {
+                this.addChannelsFromNotification([notification.event.channel]);
+            }
         };
         ChannelService.prototype.handleAddedToChannelNotification = function (notification) {
-            return __awaiter(this, void 0, void 0, function () {
-                return __generator(this, function (_h) {
-                    switch (_h.label) {
-                        case 0: return [4 /*yield*/, this.addChannelFromNotification(notification)];
-                        case 1:
-                            _h.sent();
-                            return [2 /*return*/];
-                    }
-                });
-            });
+            if (notification.event.channel) {
+                this.addChannelsFromNotification([notification.event.channel]);
+            }
         };
-        ChannelService.prototype.addChannelFromNotification = function (notification) {
-            var _a, _b;
-            return __awaiter(this, void 0, void 0, function () {
-                var channel;
-                return __generator(this, function (_h) {
-                    switch (_h.label) {
-                        case 0:
-                            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);
-                            return [4 /*yield*/, channel.watch()];
-                        case 1:
-                            _h.sent();
-                            this.watchForChannelEvents(channel);
-                            this.channelsSubject.next(__spreadArray([
-                                channel
-                            ], __read((this.channelsSubject.getValue() || []))));
-                            return [2 /*return*/];
-                    }
-                });
+        ChannelService.prototype.addChannelsFromNotification = function (channelResponses) {
+            var _this = this;
+            var newChannels = [];
+            channelResponses.forEach(function (channelResponse) {
+                var channel = _this.chatClientService.chatClient.channel(channelResponse.type, channelResponse.id);
+                void channel.watch();
+                _this.watchForChannelEvents(channel);
+                newChannels.push(channel);
             });
+            this.channelsSubject.next(__spreadArray(__spreadArray([], __read(newChannels)), __read((this.channelsSubject.getValue() || []))));
         };
-        ChannelService.prototype.removeFromChannelList = function (cid) {
-            var channels = this.channels.filter(function (c) { return c.cid !== cid; });
+        ChannelService.prototype.removeChannelsFromChannelList = function (cids) {
+            var _a;
+            var channels = this.channels.filter(function (c) { return !cids.includes(c.cid || ''); });
             if (channels.length < this.channels.length) {
                 this.channelsSubject.next(channels);
-                if (this.activeChannelSubject.getValue().cid === cid) {
-                    this.setAsActiveChannel(channels[0]);
+                if (cids.includes(((_a = this.activeChannelSubject.getValue()) === null || _a === void 0 ? void 0 : _a.cid) || '')) {
+                    if (channels.length > 0) {
+                        this.setAsActiveChannel(channels[0]);
+                    }
+                    else {
+                        this.activeChannelSubject.next(undefined);
+                    }
                 }
             }
         };
@@ -1535,10 +1539,10 @@
             this.channelsSubject.next(__spreadArray([channel], __read(this.channels)));
         };
         ChannelService.prototype.handleChannelHidden = function (event) {
-            this.removeFromChannelList(event.channel.cid);
+            this.removeChannelsFromChannelList([event.channel.cid]);
         };
         ChannelService.prototype.handleChannelDeleted = function (event) {
-            this.removeFromChannelList(event.channel.cid);
+            this.removeChannelsFromChannelList([event.channel.cid]);
         };
         ChannelService.prototype.handleChannelVisible = function (event, channel) {
             var _this = this;
@@ -3125,13 +3129,16 @@
             this.notificationService = notificationService;
             this.notifications$ = this.notificationService.notifications$;
         }
-        NotificationListComponent.prototype.trackByItem = function (_, item) {
-            return item;
+        NotificationListComponent.prototype.trackById = function (_, item) {
+            return item.id;
+        };
+        NotificationListComponent.prototype.getTemplateContext = function (notification) {
+            return Object.assign(Object.assign({}, notification.templateContext), { dismissFn: notification.dismissFn });
         };
         return NotificationListComponent;
     }());
     NotificationListComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: NotificationListComponent, deps: [{ token: NotificationService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    NotificationListComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: NotificationListComponent, selector: "stream-notification-list", ngImport: i0__namespace, template: "<div class=\"str-chat__list-notifications\">\n  <stream-notification\n    *ngFor=\"let notification of notifications$ | async; trackBy: trackByItem\"\n    [type]=\"notification.type\"\n    ><div data-testclass=\"notification-content\">\n      {{ notification.text | translate: notification.translateParams }}\n    </div></stream-notification\n  >\n</div>\n", components: [{ type: NotificationComponent, selector: "stream-notification", inputs: ["type"] }], directives: [{ type: i6__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i6__namespace.AsyncPipe, "translate": i2__namespace.TranslatePipe } });
+    NotificationListComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: NotificationListComponent, selector: "stream-notification-list", ngImport: i0__namespace, template: "<div class=\"str-chat__list-notifications\">\n  <stream-notification\n    *ngFor=\"let notification of notifications$ | async; trackBy: trackById\"\n    [type]=\"notification.type\"\n  >\n    <div\n      *ngIf=\"notification.text !== undefined\"\n      data-testclass=\"notification-content\"\n    >\n      {{ notification.text | translate: notification.translateParams }}\n    </div>\n    <ng-container *ngIf=\"notification.template !== undefined\">\n      <ng-container\n        *ngTemplateOutlet=\"\n          notification.template;\n          context: getTemplateContext(notification)\n        \"\n      ></ng-container>\n    </ng-container>\n  </stream-notification>\n</div>\n", components: [{ type: NotificationComponent, selector: "stream-notification", inputs: ["type"] }], directives: [{ type: i6__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "async": i6__namespace.AsyncPipe, "translate": i2__namespace.TranslatePipe } });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: NotificationListComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -3492,7 +3499,7 @@
         return ChannelHeaderComponent;
     }());
     ChannelHeaderComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: ChannelHeaderComponent, deps: [{ token: ChannelService }, { token: ChannelListToggleService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    ChannelHeaderComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: ChannelHeaderComponent, selector: "stream-channel-header", ngImport: i0__namespace, template: "<div class=\"str-chat__header-livestream\">\n  <div\n    class=\"str-chat__header-hamburger\"\n    (click)=\"toggleMenu($event)\"\n    (keyup.enter)=\"toggleMenu($event)\"\n  >\n    <stream-icon icon=\"menu\"></stream-icon>\n  </div>\n  <stream-avatar\n    imageUrl=\"{{ activeChannel?.data?.image }}\"\n    name=\"{{ activeChannel?.data?.name }}\"\n  ></stream-avatar>\n  <div class=\"str-chat__header-livestream-left\">\n    <p data-testid=\"name\" class=\"str-chat__header-livestream-left--title\">\n      {{ activeChannel?.data?.name }}\n    </p>\n    <p data-testid=\"info\" class=\"str-chat__header-livestream-left--members\">\n      {{'streamChat.{{ memberCount }} members' | translate:memberCountParam}}\n      {{canReceiveConnectEvents ? ('streamChat.{{ watcherCount }} online' |\n      translate:watcherCountParam) : ''}}\n    </p>\n  </div>\n</div>\n", components: [{ type: IconComponent, selector: "stream-icon", inputs: ["icon", "size"] }, { type: AvatarComponent, selector: "stream-avatar", inputs: ["name", "imageUrl", "size"] }], pipes: { "translate": i2__namespace.TranslatePipe } });
+    ChannelHeaderComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: ChannelHeaderComponent, selector: "stream-channel-header", inputs: { channelActionsTemplate: "channelActionsTemplate" }, ngImport: i0__namespace, template: "<div class=\"str-chat__header-livestream\">\n  <div\n    class=\"str-chat__header-hamburger\"\n    (click)=\"toggleMenu($event)\"\n    (keyup.enter)=\"toggleMenu($event)\"\n  >\n    <stream-icon icon=\"menu\"></stream-icon>\n  </div>\n  <stream-avatar\n    imageUrl=\"{{ activeChannel?.data?.image }}\"\n    name=\"{{ activeChannel?.data?.name }}\"\n  ></stream-avatar>\n  <div class=\"str-chat__header-livestream-left\">\n    <p data-testid=\"name\" class=\"str-chat__header-livestream-left--title\">\n      {{ activeChannel?.data?.name }}\n    </p>\n    <p data-testid=\"info\" class=\"str-chat__header-livestream-left--members\">\n      {{'streamChat.{{ memberCount }} members' | translate:memberCountParam}}\n      {{canReceiveConnectEvents ? ('streamChat.{{ watcherCount }} online' |\n      translate:watcherCountParam) : ''}}\n    </p>\n  </div>\n  <ng-container *ngIf=\"channelActionsTemplate\">\n    <ng-container\n      *ngTemplateOutlet=\"\n        channelActionsTemplate;\n        context: { channel: activeChannel }\n      \"\n    ></ng-container>\n  </ng-container>\n</div>\n", components: [{ type: IconComponent, selector: "stream-icon", inputs: ["icon", "size"] }, { type: AvatarComponent, selector: "stream-avatar", inputs: ["name", "imageUrl", "size"] }], directives: [{ type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "translate": i2__namespace.TranslatePipe } });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: ChannelHeaderComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -3500,7 +3507,9 @@
                         templateUrl: './channel-header.component.html',
                         styles: [],
                     }]
-            }], ctorParameters: function () { return [{ type: ChannelService }, { type: ChannelListToggleService }]; } });
+            }], ctorParameters: function () { return [{ type: ChannelService }, { type: ChannelListToggleService }]; }, propDecorators: { channelActionsTemplate: [{
+                    type: i0.Input
+                }] } });
 
     /**
      * The `ChannelPreview` component displays a channel preview in the channel list, it consists of the image, name and latest message of the channel.
@@ -4051,7 +4060,12 @@
                     this.message.mentioned_users.length === 0) {
                     // Wrap emojis in span to display emojis correctly in Chrome https://bugs.chromium.org/p/chromium/issues/detail?id=596223
                     var regex = new RegExp(emojiRegex__default['default'](), 'g');
-                    content = content.replace(regex, function (match) { return "<span class=\"str-chat__emoji-display-fix\">" + match + "</span>"; });
+                    // Based on this: https://stackoverflow.com/questions/4565112/javascript-how-to-find-out-if-the-user-browser-is-chrome
+                    /* eslint-disable @typescript-eslint/no-unsafe-member-access */
+                    var isChrome_1 = !!window.chrome &&
+                        typeof window.opr === 'undefined';
+                    /* eslint-enable @typescript-eslint/no-unsafe-member-access */
+                    content = content.replace(regex, function (match) { return "<span " + (isChrome_1 ? 'class="str-chat__emoji-display-fix"' : '') + ">" + match + "</span>"; });
                     this.messageTextParts = [{ content: content, type: 'text' }];
                 }
                 else {
@@ -4725,7 +4739,7 @@
         return MessageListComponent;
     }());
     MessageListComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: MessageListComponent, deps: [{ token: ChannelService }, { token: ChatClientService }, { token: ImageLoadService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    MessageListComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: MessageListComponent, selector: "stream-message-list", inputs: { messageTemplate: "messageTemplate", messageInputTemplate: "messageInputTemplate", mentionTemplate: "mentionTemplate", typingIndicatorTemplate: "typingIndicatorTemplate", areReactionsEnabled: "areReactionsEnabled", enabledMessageActionsInput: ["enabledMessageActions", "enabledMessageActionsInput"], mode: "mode" }, host: { properties: { "class": "this.class" } }, viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], descendants: true }, { propertyName: "parentMessageElement", first: true, predicate: ["parentMessageElement"], descendants: true }], usesOnChanges: true, ngImport: i0__namespace, template: "<div\n  #scrollContainer\n  data-testid=\"scroll-container\"\n  class=\"str-chat__list\"\n  (scroll)=\"scrolled()\"\n>\n  <div class=\"str-chat__reverse-infinite-scroll\">\n    <ul class=\"str-chat__ul\">\n      <li\n        #parentMessageElement\n        *ngIf=\"mode === 'thread'\"\n        data-testid=\"parent-message\"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"\n            messageTemplateContainer;\n            context: { message: parentMessage }\n          \"\n        ></ng-container>\n        <div class=\"str-chat__thread-start\" translate>\n          streamChat.Start of a new thread\n        </div>\n      </li>\n      <li\n        data-testclass=\"message\"\n        *ngFor=\"\n          let message of messages$ | async;\n          let i = index;\n          trackBy: trackByMessageId\n        \"\n        class=\"str-chat__li str-chat__li--{{ groupStyles[i] }}\"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"\n            messageTemplateContainer;\n            context: { message: message }\n          \"\n        ></ng-container>\n      </li>\n    </ul>\n    <ng-container *ngIf=\"typingIndicatorTemplate; else defaultTypingIndicator\">\n      <ng-container\n        *ngTemplateOutlet=\"\n          typingIndicatorTemplate;\n          context: { usersTyping$: usersTyping$ }\n        \"\n      ></ng-container>\n    </ng-container>\n    <ng-template #defaultTypingIndicator>\n      <div\n        *ngIf=\"(usersTyping$ | async)?.length\"\n        data-testid=\"typing-indicator\"\n        class=\"str-chat__typing-indicator str-chat__typing-indicator--typing\"\n      >\n        <stream-avatar\n          *ngFor=\"let user of usersTyping$ | async; trackBy: trackByUserId\"\n          [name]=\"user.name || user.id\"\n          [imageUrl]=\"user.image\"\n        ></stream-avatar>\n        <div class=\"str-chat__typing-indicator__dots\">\n          <span class=\"str-chat__typing-indicator__dot\"></span>\n          <span class=\"str-chat__typing-indicator__dot\"></span>\n          <span class=\"str-chat__typing-indicator__dot\"></span>\n        </div>\n      </div>\n    </ng-template>\n  </div>\n</div>\n<div class=\"str-chat__list-notifications\">\n  <button\n    data-testid=\"scroll-to-bottom\"\n    *ngIf=\"isUserScrolledUp\"\n    class=\"\n      str-chat__message-notification\n      str-chat__message-notification-right\n      str-chat__message-notification-scroll-down\n    \"\n    (keyup.enter)=\"scrollToBottom()\"\n    (click)=\"scrollToBottom()\"\n  >\n    <div\n      *ngIf=\"unreadMessageCount > 0\"\n      class=\"\n        str-chat__message-notification\n        str-chat__message-notification-scroll-down-unread-count\n      \"\n    >\n      {{ unreadMessageCount }}\n    </div>\n  </button>\n</div>\n\n<ng-template #messageTemplateContainer let-message=\"message\">\n  <ng-container *ngIf=\"messageTemplate; else defaultMessageTemplate\">\n    <ng-container\n      *ngTemplateOutlet=\"\n        messageTemplate;\n        context: {\n          message: message,\n          areReactionsEnabled: areReactionsEnabled,\n          canReactToMessage: canReactToMessage,\n          lastSentMessageId: !!(\n            lastSentMessageId && message?.id === lastSentMessageId\n          ),\n          canReceiveReadEvents: canReceiveReadEvents,\n          messageInputTemplate: messageInputTemplate,\n          mentionTemplate: mentionTemplate,\n          mode: mode\n        }\n      \"\n    ></ng-container>\n  </ng-container>\n  <ng-template #defaultMessageTemplate>\n    <stream-message\n      [message]=\"message\"\n      [areReactionsEnabled]=\"areReactionsEnabled\"\n      [canReactToMessage]=\"canReactToMessage\"\n      [isLastSentMessage]=\"\n        !!(lastSentMessageId && message?.id === lastSentMessageId)\n      \"\n      [enabledMessageActions]=\"enabledMessageActions\"\n      [canReceiveReadEvents]=\"canReceiveReadEvents\"\n      [messageInputTemplate]=\"messageInputTemplate\"\n      [mentionTemplate]=\"mentionTemplate\"\n      [mode]=\"mode\"\n    ></stream-message>\n  </ng-template>\n</ng-template>\n", components: [{ type: AvatarComponent, selector: "stream-avatar", inputs: ["name", "imageUrl", "size"] }, { type: MessageComponent, selector: "stream-message", inputs: ["messageInputTemplate", "mentionTemplate", "message", "enabledMessageActions", "areReactionsEnabled", "canReactToMessage", "isLastSentMessage", "canReceiveReadEvents", "mode"] }], directives: [{ type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2__namespace.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { type: i6__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i6__namespace.AsyncPipe } });
+    MessageListComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: MessageListComponent, selector: "stream-message-list", inputs: { messageTemplate: "messageTemplate", messageInputTemplate: "messageInputTemplate", mentionTemplate: "mentionTemplate", typingIndicatorTemplate: "typingIndicatorTemplate", areReactionsEnabled: "areReactionsEnabled", enabledMessageActionsInput: ["enabledMessageActions", "enabledMessageActionsInput"], mode: "mode" }, host: { properties: { "class": "this.class" } }, viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], descendants: true }, { propertyName: "parentMessageElement", first: true, predicate: ["parentMessageElement"], descendants: true }], usesOnChanges: true, ngImport: i0__namespace, template: "<div\n  #scrollContainer\n  data-testid=\"scroll-container\"\n  class=\"str-chat__list\"\n  (scroll)=\"scrolled()\"\n>\n  <div class=\"str-chat__reverse-infinite-scroll\">\n    <ul class=\"str-chat__ul\">\n      <li\n        #parentMessageElement\n        *ngIf=\"mode === 'thread'\"\n        data-testid=\"parent-message\"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"\n            messageTemplateContainer;\n            context: { message: parentMessage }\n          \"\n        ></ng-container>\n        <div class=\"str-chat__thread-start\" translate>\n          streamChat.Start of a new thread\n        </div>\n      </li>\n      <li\n        data-testclass=\"message\"\n        *ngFor=\"\n          let message of messages$ | async;\n          let i = index;\n          trackBy: trackByMessageId\n        \"\n        class=\"str-chat__li str-chat__li--{{ groupStyles[i] }}\"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"\n            messageTemplateContainer;\n            context: { message: message }\n          \"\n        ></ng-container>\n      </li>\n    </ul>\n    <ng-container *ngIf=\"typingIndicatorTemplate; else defaultTypingIndicator\">\n      <ng-container\n        *ngTemplateOutlet=\"\n          typingIndicatorTemplate;\n          context: { usersTyping$: usersTyping$ }\n        \"\n      ></ng-container>\n    </ng-container>\n    <ng-template #defaultTypingIndicator>\n      <div\n        *ngIf=\"(usersTyping$ | async)?.length\"\n        data-testid=\"typing-indicator\"\n        class=\"str-chat__typing-indicator str-chat__typing-indicator--typing\"\n      >\n        <stream-avatar\n          *ngFor=\"let user of usersTyping$ | async; trackBy: trackByUserId\"\n          [name]=\"user.name || user.id\"\n          [imageUrl]=\"user.image\"\n        ></stream-avatar>\n        <div class=\"str-chat__typing-indicator__dots\">\n          <span class=\"str-chat__typing-indicator__dot\"></span>\n          <span class=\"str-chat__typing-indicator__dot\"></span>\n          <span class=\"str-chat__typing-indicator__dot\"></span>\n        </div>\n      </div>\n    </ng-template>\n  </div>\n</div>\n<div class=\"str-chat__list-notifications\">\n  <button\n    data-testid=\"scroll-to-bottom\"\n    *ngIf=\"isUserScrolledUp\"\n    class=\"\n      str-chat__message-notification\n      str-chat__message-notification-right\n      str-chat__message-notification-scroll-down\n    \"\n    (keyup.enter)=\"scrollToBottom()\"\n    (click)=\"scrollToBottom()\"\n  >\n    <div\n      *ngIf=\"unreadMessageCount > 0\"\n      class=\"\n        str-chat__message-notification\n        str-chat__message-notification-scroll-down-unread-count\n      \"\n    >\n      {{ unreadMessageCount }}\n    </div>\n  </button>\n</div>\n\n<ng-template #messageTemplateContainer let-message=\"message\">\n  <ng-container *ngIf=\"messageTemplate; else defaultMessageTemplate\">\n    <ng-container\n      *ngTemplateOutlet=\"\n        messageTemplate;\n        context: {\n          message: message,\n          areReactionsEnabled: areReactionsEnabled,\n          canReactToMessage: canReactToMessage,\n          lastSentMessageId: !!(\n            lastSentMessageId && message?.id === lastSentMessageId\n          ),\n          canReceiveReadEvents: canReceiveReadEvents,\n          messageInputTemplate: messageInputTemplate,\n          mentionTemplate: mentionTemplate,\n          mode: mode,\n          enabledMessageActions: enabledMessageActions\n        }\n      \"\n    ></ng-container>\n  </ng-container>\n  <ng-template #defaultMessageTemplate>\n    <stream-message\n      [message]=\"message\"\n      [areReactionsEnabled]=\"areReactionsEnabled\"\n      [canReactToMessage]=\"canReactToMessage\"\n      [isLastSentMessage]=\"\n        !!(lastSentMessageId && message?.id === lastSentMessageId)\n      \"\n      [enabledMessageActions]=\"enabledMessageActions\"\n      [canReceiveReadEvents]=\"canReceiveReadEvents\"\n      [messageInputTemplate]=\"messageInputTemplate\"\n      [mentionTemplate]=\"mentionTemplate\"\n      [mode]=\"mode\"\n    ></stream-message>\n  </ng-template>\n</ng-template>\n", components: [{ type: AvatarComponent, selector: "stream-avatar", inputs: ["name", "imageUrl", "size"] }, { type: MessageComponent, selector: "stream-message", inputs: ["messageInputTemplate", "mentionTemplate", "message", "enabledMessageActions", "areReactionsEnabled", "canReactToMessage", "isLastSentMessage", "canReceiveReadEvents", "mode"] }], directives: [{ type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2__namespace.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { type: i6__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i6__namespace.AsyncPipe } });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: MessageListComponent, decorators: [{
                 type: i0.Component,
                 args: [{