stream-chat-angular 2.18.0 → 2.20.1

package/assets/version.d.ts

@@ -1 +1 @@
-export declare const version = "2.18.0";
+export declare const version = "2.20.1";

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.18.0';
+    var version = '2.20.1';
 
     /**
      * 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;
@@ -2218,7 +2222,7 @@
         return IconComponent;
     }());
     IconComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: IconComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    IconComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: IconComponent, selector: "stream-icon", inputs: { icon: "icon", size: "size" }, ngImport: i0__namespace, template: "<svg\n  data-testid=\"action-icon\"\n  *ngIf=\"icon === 'action-icon'\"\n  height=\"4\"\n  viewBox=\"0 0 11 4\"\n  width=\"11\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n>\n  <path\n    d=\"M1.5 3a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm4 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm4 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z\"\n    fillRule=\"nonzero\"\n  />\n</svg>\n<svg\n  *ngIf=\"icon === 'delivered-icon'\"\n  height=\"16\"\n  width=\"16\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n  data-testid=\"delivered-icon\"\n>\n  <path\n    d=\"M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0zm3.72 6.633a.955.955 0 1 0-1.352-1.352L6.986 8.663 5.633 7.31A.956.956 0 1 0 4.28 8.663l2.029 2.028a.956.956 0 0 0 1.353 0l4.058-4.058z\"\n    fill=\"#006CFF\"\n    fillRule=\"evenodd\"\n  />\n</svg>\n<svg\n  *ngIf=\"icon === 'reaction-icon'\"\n  height=\"12\"\n  viewBox=\"0 0 12 12\"\n  width=\"12\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n  data-testid=\"reaction-icon\"\n>\n  <g clipRule=\"evenodd\" fillRule=\"evenodd\">\n    <path\n      d=\"M6 1.2C3.3 1.2 1.2 3.3 1.2 6c0 2.7 2.1 4.8 4.8 4.8 2.7 0 4.8-2.1 4.8-4.8 0-2.7-2.1-4.8-4.8-4.8zM0 6c0-3.3 2.7-6 6-6s6 2.7 6 6-2.7 6-6 6-6-2.7-6-6z\"\n    ></path>\n    <path\n      d=\"M5.4 4.5c0 .5-.4.9-.9.9s-.9-.4-.9-.9.4-.9.9-.9.9.4.9.9zM8.4 4.5c0 .5-.4.9-.9.9s-.9-.4-.9-.9.4-.9.9-.9.9.4.9.9zM3.3 6.7c.3-.2.6-.1.8.1.3.4.8.9 1.5 1 .6.2 1.4.1 2.4-1 .2-.2.6-.3.8 0 .2.2.3.6 0 .8-1.1 1.3-2.4 1.7-3.5 1.5-1-.2-1.8-.9-2.2-1.5-.2-.3-.1-.7.2-.9z\"\n    ></path>\n  </g>\n</svg>\n<svg\n  data-testid=\"connection-error\"\n  *ngIf=\"icon === 'connection-error'\"\n  width=\"78px\"\n  height=\"78px\"\n  viewBox=\"0 0 78 78\"\n  version=\"1.1\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n  xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n>\n  <!-- Generator: Sketch 52.6 (67491) - http://www.bohemiancoding.com/sketch -->\n  <title>Combined Shape</title>\n  <desc>Created with Sketch.</desc>\n  <g\n    id=\"Interactions\"\n    stroke=\"none\"\n    stroke-width=\"1\"\n    fill=\"none\"\n    fill-rule=\"evenodd\"\n  >\n    <g\n      id=\"Connection-Error-_-Connectivity\"\n      transform=\"translate(-270.000000, -30.000000)\"\n      fill=\"#CF1F25\"\n    >\n      <g\n        id=\"109-network-connection\"\n        transform=\"translate(270.000000, 30.000000)\"\n      >\n        <path\n          d=\"M66.4609744,11.414231 C81.6225232,26.5757798 81.6225232,51.157545 66.4609744,66.3188467 C51.2994256,81.4803954 26.7176604,81.4803954 11.5563587,66.3188467 C-3.60519004,51.1572979 -3.60519004,26.5755327 11.5563587,11.414231 C26.7179075,-3.74731776 51.2996727,-3.74731776 66.4609744,11.414231 Z M54.7853215,45.8823776 L54.7853215,40.5882574 C54.7853215,39.613638 53.9952341,38.8235506 53.0206147,38.8235506 L44.9576695,38.8235506 L41.428256,42.3529641 L51.255555,42.3529641 L51.255555,45.8823776 L54.7853215,45.8823776 Z M40.6659027,43.1153174 L37.8988425,45.8823776 L40.6659027,45.8823776 L40.6659027,43.1153174 Z M51.1764962,56.4702653 L58.2353232,56.4702653 C59.2099355,56.4702653 60.00003,55.6801708 60.00003,54.7055585 L60.00003,51.176145 C60.00003,50.2015327 59.2099355,49.4114382 58.2353232,49.4114382 L51.1764962,49.4114382 C50.2018839,49.4114382 49.4117894,50.2015327 49.4117894,51.176145 L49.4117894,54.7055585 C49.4117894,55.6801708 50.2018839,56.4702653 51.1764962,56.4702653 Z M35.2941353,56.4702653 L42.3529624,56.4702653 C43.3275746,56.4702653 44.1176691,55.6801708 44.1176691,54.7055585 L44.1176691,51.176145 C44.1176691,50.2015327 43.3275746,49.4114382 42.3529624,49.4114382 L35.2941353,49.4114382 C34.319523,49.4114382 33.5294285,50.2015327 33.5294285,51.176145 L33.5294285,54.7055585 C33.5294285,55.6801708 34.319523,56.4702653 35.2941353,56.4702653 Z M56.6964989,19.0874231 C56.007381,18.3985134 54.8903216,18.3985134 54.2012036,19.087423 L45.882376,27.4062507 L45.882376,19.4117761 C45.882376,18.4371568 45.0922885,17.6470693 44.1176692,17.6470693 L33.5294286,17.6470693 C32.5548092,17.6470694 31.7647218,18.4371568 31.7647218,19.4117761 L31.7647218,30.0000167 C31.7647219,30.9746363 32.5548092,31.7647237 33.5294285,31.7647237 L41.5239031,31.7647237 L34.4650761,38.8235508 L24.7058947,38.8235508 C23.7312753,38.8235508 22.9411879,39.6136382 22.9411879,40.5882575 L22.9411879,45.8823778 L26.4706014,45.8823778 L26.4706014,42.3529643 L30.9356624,42.3529643 L23.8768354,49.4117914 L19.4117743,49.4117914 C18.4371549,49.4117914 17.6470675,50.2018788 17.6470675,51.1764981 L17.6470675,54.7059117 C17.6504049,54.9674302 17.7129076,55.2248042 17.8298886,55.4587302 L16.4456526,56.8429662 C15.7446193,57.5200453 15.7252005,58.6372282 16.4022825,59.3382615 C17.0793616,60.0392948 18.1965445,60.0587136 18.8975778,59.3816316 C18.9122847,59.3674273 18.9267436,59.3529684 18.940948,59.3382615 L56.6964963,21.5830662 C57.3856425,20.8939094 57.3856425,19.7765747 56.6964963,19.0874179 Z\"\n          id=\"Combined-Shape\"\n        ></path>\n      </g>\n    </g>\n  </g>\n</svg>\n<svg\n  *ngIf=\"icon === 'send'\"\n  data-testid=\"send\"\n  height=\"17\"\n  viewBox=\"0 0 18 17\"\n  width=\"18\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n>\n  <title translate>streamChat.Send</title>\n  <path\n    d=\"M0 17.015l17.333-8.508L0 0v6.617l12.417 1.89L0 10.397z\"\n    fill=\"#006cff\"\n    fillRule=\"evenodd\"\n  />\n</svg>\n<svg\n  *ngIf=\"icon === 'file-upload'\"\n  data-testid=\"file-upload\"\n  height=\"14\"\n  width=\"14\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n>\n  <title translate>streamChat.Attach files</title>\n  <path\n    d=\"M1.667.333h10.666c.737 0 1.334.597 1.334 1.334v10.666c0 .737-.597 1.334-1.334 1.334H1.667a1.333 1.333 0 0 1-1.334-1.334V1.667C.333.93.93.333 1.667.333zm2 1.334a1.667 1.667 0 1 0 0 3.333 1.667 1.667 0 0 0 0-3.333zm-2 9.333v1.333h10.666v-4l-2-2-4 4-2-2L1.667 11z\"\n    fillRule=\"nonzero\"\n  />\n</svg>\n<svg\n  data-testid=\"retry\"\n  *ngIf=\"icon === 'retry'\"\n  width=\"22\"\n  height=\"20\"\n  viewBox=\"0 0 22 20\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n>\n  <path\n    d=\"M20 5.535V2a1 1 0 0 1 2 0v6a1 1 0 0 1-1 1h-6a1 1 0 0 1 0-2h3.638l-2.975-2.653a8 8 0 1 0 1.884 8.32 1 1 0 1 1 1.886.666A10 10 0 1 1 5.175 1.245c3.901-2.15 8.754-1.462 11.88 1.667L20 5.535z\"\n    fill=\"#FFF\"\n    fill-rule=\"nonzero\"\n  />\n</svg>\n<svg\n  *ngIf=\"icon === 'close'\"\n  data-testid=\"close\"\n  width=\"28\"\n  height=\"28\"\n  viewBox=\"0 0 28 28\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n  xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n>\n  <defs>\n    <path\n      d=\"M465 5c5.53 0 10 4.47 10 10s-4.47 10-10 10-10-4.47-10-10 4.47-10 10-10zm3.59 5L465 13.59 461.41 10 460 11.41l3.59 3.59-3.59 3.59 1.41 1.41 3.59-3.59 3.59 3.59 1.41-1.41-3.59-3.59 3.59-3.59-1.41-1.41z\"\n      id=\"b\"\n    />\n    <filter\n      x=\"-30%\"\n      y=\"-30%\"\n      width=\"160%\"\n      height=\"160%\"\n      filterUnits=\"objectBoundingBox\"\n      id=\"a\"\n    >\n      <feOffset in=\"SourceAlpha\" result=\"shadowOffsetOuter1\" />\n      <feGaussianBlur\n        stdDeviation=\"2\"\n        in=\"shadowOffsetOuter1\"\n        result=\"shadowBlurOuter1\"\n      />\n      <feColorMatrix\n        values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0\"\n        in=\"shadowBlurOuter1\"\n      />\n    </filter>\n  </defs>\n  <g transform=\"translate(-451 -1)\" fill-rule=\"nonzero\" fill=\"none\">\n    <use fill=\"#000\" filter=\"url(#a)\" xlink:href=\"#b\" />\n    <use fill=\"#FFF\" fill-rule=\"evenodd\" xlink:href=\"#b\" />\n  </g>\n</svg>\n<svg\n  *ngIf=\"icon === 'file'\"\n  data-testid=\"file\"\n  className=\"rfu-file-icon--small fa-file-fallback\"\n  [attr.height]=\"size || 20\"\n  [attr.width]=\"size || 20\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n  viewBox=\"0 0 384 512\"\n>\n  <path\n    d=\"M369.9 97.9L286 14C277 5 264.8-.1 252.1-.1H48C21.5 0 0 21.5 0 48v416c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48V131.9c0-12.7-5.1-25-14.1-34zM332.1 128H256V51.9l76.1 76.1zM48 464V48h160v104c0 13.3 10.7 24 24 24h104v288H48z\"\n    fill=\"#414D54\"\n  />\n</svg>\n<svg\n  *ngIf=\"icon === 'reply'\"\n  data-testid=\"reply\"\n  height=\"15\"\n  width=\"18\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n>\n  <path\n    d=\"M.56 10.946H.06l-.002-.498L.025.92a.5.5 0 1 1 1-.004l.032 9.029H9.06v-4l9 4.5-9 4.5v-4H.56z\"\n    fillRule=\"nonzero\"\n  />\n</svg>\n<svg\n  height=\"10\"\n  width=\"10\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n  data-testid=\"close-no-outline\"\n  *ngIf=\"icon === 'close-no-outline'\"\n>\n  <path\n    d=\"M9.916 1.027L8.973.084 5 4.058 1.027.084l-.943.943L4.058 5 .084 8.973l.943.943L5 5.942l3.973 3.974.943-.943L5.942 5z\"\n    fillRule=\"evenodd\"\n  />\n</svg>\n<svg\n  height=\"10\"\n  width=\"14\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n  data-testid=\"reply-in-thread\"\n  *ngIf=\"icon === 'reply-in-thread'\"\n>\n  <path\n    d=\"M8.516 3c4.78 0 4.972 6.5 4.972 6.5-1.6-2.906-2.847-3.184-4.972-3.184v2.872L3.772 4.994 8.516.5V3zM.484 5l4.5-4.237v1.78L2.416 5l2.568 2.125v1.828L.484 5z\"\n    fillRule=\"evenodd\"\n  />\n</svg>\n<svg\n  *ngIf=\"icon === 'arrow-left'\"\n  data-testid=\"arrow-left\"\n  width=\"24\"\n  height=\"24\"\n  viewBox=\"0 0 24 24\"\n  fill=\"none\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n>\n  <path\n    d=\"M15.7049 7.41L14.2949 6L8.29492 12L14.2949 18L15.7049 16.59L11.1249 12L15.7049 7.41Z\"\n    fill=\"var(--black)\"\n  />\n</svg>\n\n<svg\n  *ngIf=\"icon === 'arrow-right'\"\n  data-testid=\"arrow-right\"\n  width=\"24\"\n  height=\"24\"\n  viewBox=\"0 0 24 24\"\n  fill=\"none\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n>\n  <path\n    d=\"M9.70492 6L8.29492 7.41L12.8749 12L8.29492 16.59L9.70492 18L15.7049 12L9.70492 6Z\"\n    fill=\"var(--black)\"\n  />\n</svg>\n", directives: [{ type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }] });
+    IconComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: IconComponent, selector: "stream-icon", inputs: { icon: "icon", size: "size" }, ngImport: i0__namespace, template: "<svg\n  data-testid=\"action-icon\"\n  *ngIf=\"icon === 'action-icon'\"\n  height=\"4\"\n  viewBox=\"0 0 11 4\"\n  width=\"11\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n>\n  <path\n    d=\"M1.5 3a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm4 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm4 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z\"\n    fillRule=\"nonzero\"\n  />\n</svg>\n<svg\n  *ngIf=\"icon === 'delivered-icon'\"\n  height=\"16\"\n  width=\"16\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n  data-testid=\"delivered-icon\"\n>\n  <path\n    d=\"M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0zm3.72 6.633a.955.955 0 1 0-1.352-1.352L6.986 8.663 5.633 7.31A.956.956 0 1 0 4.28 8.663l2.029 2.028a.956.956 0 0 0 1.353 0l4.058-4.058z\"\n    fill=\"#006CFF\"\n    fillRule=\"evenodd\"\n  />\n</svg>\n<svg\n  *ngIf=\"icon === 'reaction-icon'\"\n  height=\"12\"\n  viewBox=\"0 0 12 12\"\n  width=\"12\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n  data-testid=\"reaction-icon\"\n>\n  <g clipRule=\"evenodd\" fillRule=\"evenodd\">\n    <path\n      d=\"M6 1.2C3.3 1.2 1.2 3.3 1.2 6c0 2.7 2.1 4.8 4.8 4.8 2.7 0 4.8-2.1 4.8-4.8 0-2.7-2.1-4.8-4.8-4.8zM0 6c0-3.3 2.7-6 6-6s6 2.7 6 6-2.7 6-6 6-6-2.7-6-6z\"\n    ></path>\n    <path\n      d=\"M5.4 4.5c0 .5-.4.9-.9.9s-.9-.4-.9-.9.4-.9.9-.9.9.4.9.9zM8.4 4.5c0 .5-.4.9-.9.9s-.9-.4-.9-.9.4-.9.9-.9.9.4.9.9zM3.3 6.7c.3-.2.6-.1.8.1.3.4.8.9 1.5 1 .6.2 1.4.1 2.4-1 .2-.2.6-.3.8 0 .2.2.3.6 0 .8-1.1 1.3-2.4 1.7-3.5 1.5-1-.2-1.8-.9-2.2-1.5-.2-.3-.1-.7.2-.9z\"\n    ></path>\n  </g>\n</svg>\n<svg\n  data-testid=\"connection-error\"\n  *ngIf=\"icon === 'connection-error'\"\n  width=\"78px\"\n  height=\"78px\"\n  viewBox=\"0 0 78 78\"\n  version=\"1.1\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n  xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n>\n  <!-- Generator: Sketch 52.6 (67491) - http://www.bohemiancoding.com/sketch -->\n  <title>Combined Shape</title>\n  <desc>Created with Sketch.</desc>\n  <g\n    id=\"Interactions\"\n    stroke=\"none\"\n    stroke-width=\"1\"\n    fill=\"none\"\n    fill-rule=\"evenodd\"\n  >\n    <g\n      id=\"Connection-Error-_-Connectivity\"\n      transform=\"translate(-270.000000, -30.000000)\"\n      fill=\"#CF1F25\"\n    >\n      <g\n        id=\"109-network-connection\"\n        transform=\"translate(270.000000, 30.000000)\"\n      >\n        <path\n          d=\"M66.4609744,11.414231 C81.6225232,26.5757798 81.6225232,51.157545 66.4609744,66.3188467 C51.2994256,81.4803954 26.7176604,81.4803954 11.5563587,66.3188467 C-3.60519004,51.1572979 -3.60519004,26.5755327 11.5563587,11.414231 C26.7179075,-3.74731776 51.2996727,-3.74731776 66.4609744,11.414231 Z M54.7853215,45.8823776 L54.7853215,40.5882574 C54.7853215,39.613638 53.9952341,38.8235506 53.0206147,38.8235506 L44.9576695,38.8235506 L41.428256,42.3529641 L51.255555,42.3529641 L51.255555,45.8823776 L54.7853215,45.8823776 Z M40.6659027,43.1153174 L37.8988425,45.8823776 L40.6659027,45.8823776 L40.6659027,43.1153174 Z M51.1764962,56.4702653 L58.2353232,56.4702653 C59.2099355,56.4702653 60.00003,55.6801708 60.00003,54.7055585 L60.00003,51.176145 C60.00003,50.2015327 59.2099355,49.4114382 58.2353232,49.4114382 L51.1764962,49.4114382 C50.2018839,49.4114382 49.4117894,50.2015327 49.4117894,51.176145 L49.4117894,54.7055585 C49.4117894,55.6801708 50.2018839,56.4702653 51.1764962,56.4702653 Z M35.2941353,56.4702653 L42.3529624,56.4702653 C43.3275746,56.4702653 44.1176691,55.6801708 44.1176691,54.7055585 L44.1176691,51.176145 C44.1176691,50.2015327 43.3275746,49.4114382 42.3529624,49.4114382 L35.2941353,49.4114382 C34.319523,49.4114382 33.5294285,50.2015327 33.5294285,51.176145 L33.5294285,54.7055585 C33.5294285,55.6801708 34.319523,56.4702653 35.2941353,56.4702653 Z M56.6964989,19.0874231 C56.007381,18.3985134 54.8903216,18.3985134 54.2012036,19.087423 L45.882376,27.4062507 L45.882376,19.4117761 C45.882376,18.4371568 45.0922885,17.6470693 44.1176692,17.6470693 L33.5294286,17.6470693 C32.5548092,17.6470694 31.7647218,18.4371568 31.7647218,19.4117761 L31.7647218,30.0000167 C31.7647219,30.9746363 32.5548092,31.7647237 33.5294285,31.7647237 L41.5239031,31.7647237 L34.4650761,38.8235508 L24.7058947,38.8235508 C23.7312753,38.8235508 22.9411879,39.6136382 22.9411879,40.5882575 L22.9411879,45.8823778 L26.4706014,45.8823778 L26.4706014,42.3529643 L30.9356624,42.3529643 L23.8768354,49.4117914 L19.4117743,49.4117914 C18.4371549,49.4117914 17.6470675,50.2018788 17.6470675,51.1764981 L17.6470675,54.7059117 C17.6504049,54.9674302 17.7129076,55.2248042 17.8298886,55.4587302 L16.4456526,56.8429662 C15.7446193,57.5200453 15.7252005,58.6372282 16.4022825,59.3382615 C17.0793616,60.0392948 18.1965445,60.0587136 18.8975778,59.3816316 C18.9122847,59.3674273 18.9267436,59.3529684 18.940948,59.3382615 L56.6964963,21.5830662 C57.3856425,20.8939094 57.3856425,19.7765747 56.6964963,19.0874179 Z\"\n          id=\"Combined-Shape\"\n        ></path>\n      </g>\n    </g>\n  </g>\n</svg>\n<svg\n  *ngIf=\"icon === 'send'\"\n  data-testid=\"send\"\n  height=\"17\"\n  viewBox=\"0 0 18 17\"\n  width=\"18\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n>\n  <title translate>streamChat.Send</title>\n  <path\n    d=\"M0 17.015l17.333-8.508L0 0v6.617l12.417 1.89L0 10.397z\"\n    fill=\"#006cff\"\n    fillRule=\"evenodd\"\n  />\n</svg>\n<svg\n  *ngIf=\"icon === 'file-upload'\"\n  data-testid=\"file-upload\"\n  height=\"14\"\n  width=\"14\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n>\n  <title translate>streamChat.Attach files</title>\n  <path\n    d=\"M1.667.333h10.666c.737 0 1.334.597 1.334 1.334v10.666c0 .737-.597 1.334-1.334 1.334H1.667a1.333 1.333 0 0 1-1.334-1.334V1.667C.333.93.93.333 1.667.333zm2 1.334a1.667 1.667 0 1 0 0 3.333 1.667 1.667 0 0 0 0-3.333zm-2 9.333v1.333h10.666v-4l-2-2-4 4-2-2L1.667 11z\"\n    fillRule=\"nonzero\"\n  />\n</svg>\n<svg\n  data-testid=\"retry\"\n  *ngIf=\"icon === 'retry'\"\n  width=\"22\"\n  height=\"20\"\n  viewBox=\"0 0 22 20\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n>\n  <path\n    d=\"M20 5.535V2a1 1 0 0 1 2 0v6a1 1 0 0 1-1 1h-6a1 1 0 0 1 0-2h3.638l-2.975-2.653a8 8 0 1 0 1.884 8.32 1 1 0 1 1 1.886.666A10 10 0 1 1 5.175 1.245c3.901-2.15 8.754-1.462 11.88 1.667L20 5.535z\"\n    fill=\"#FFF\"\n    fill-rule=\"nonzero\"\n  />\n</svg>\n<svg\n  *ngIf=\"icon === 'close'\"\n  data-testid=\"close\"\n  width=\"28\"\n  height=\"28\"\n  viewBox=\"0 0 28 28\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n  xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n>\n  <defs>\n    <path\n      d=\"M465 5c5.53 0 10 4.47 10 10s-4.47 10-10 10-10-4.47-10-10 4.47-10 10-10zm3.59 5L465 13.59 461.41 10 460 11.41l3.59 3.59-3.59 3.59 1.41 1.41 3.59-3.59 3.59 3.59 1.41-1.41-3.59-3.59 3.59-3.59-1.41-1.41z\"\n      id=\"b\"\n    />\n    <filter\n      x=\"-30%\"\n      y=\"-30%\"\n      width=\"160%\"\n      height=\"160%\"\n      filterUnits=\"objectBoundingBox\"\n      id=\"a\"\n    >\n      <feOffset in=\"SourceAlpha\" result=\"shadowOffsetOuter1\" />\n      <feGaussianBlur\n        stdDeviation=\"2\"\n        in=\"shadowOffsetOuter1\"\n        result=\"shadowBlurOuter1\"\n      />\n      <feColorMatrix\n        values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0\"\n        in=\"shadowBlurOuter1\"\n      />\n    </filter>\n  </defs>\n  <g transform=\"translate(-451 -1)\" fill-rule=\"nonzero\" fill=\"none\">\n    <use fill=\"#000\" filter=\"url(#a)\" xlink:href=\"#b\" />\n    <use fill=\"#FFF\" fill-rule=\"evenodd\" xlink:href=\"#b\" />\n  </g>\n</svg>\n<svg\n  *ngIf=\"icon === 'file'\"\n  data-testid=\"file\"\n  className=\"rfu-file-icon--small fa-file-fallback\"\n  [attr.height]=\"size || 20\"\n  [attr.width]=\"size || 20\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n  viewBox=\"0 0 384 512\"\n>\n  <path\n    d=\"M369.9 97.9L286 14C277 5 264.8-.1 252.1-.1H48C21.5 0 0 21.5 0 48v416c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48V131.9c0-12.7-5.1-25-14.1-34zM332.1 128H256V51.9l76.1 76.1zM48 464V48h160v104c0 13.3 10.7 24 24 24h104v288H48z\"\n    fill=\"#414D54\"\n  />\n</svg>\n<svg\n  *ngIf=\"icon === 'reply'\"\n  data-testid=\"reply\"\n  height=\"15\"\n  width=\"18\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n>\n  <path\n    d=\"M.56 10.946H.06l-.002-.498L.025.92a.5.5 0 1 1 1-.004l.032 9.029H9.06v-4l9 4.5-9 4.5v-4H.56z\"\n    fillRule=\"nonzero\"\n  />\n</svg>\n<svg\n  height=\"10\"\n  width=\"10\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n  data-testid=\"close-no-outline\"\n  *ngIf=\"icon === 'close-no-outline'\"\n>\n  <path\n    d=\"M9.916 1.027L8.973.084 5 4.058 1.027.084l-.943.943L4.058 5 .084 8.973l.943.943L5 5.942l3.973 3.974.943-.943L5.942 5z\"\n    fillRule=\"evenodd\"\n  />\n</svg>\n<svg\n  height=\"10\"\n  width=\"14\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n  data-testid=\"reply-in-thread\"\n  *ngIf=\"icon === 'reply-in-thread'\"\n>\n  <path\n    d=\"M8.516 3c4.78 0 4.972 6.5 4.972 6.5-1.6-2.906-2.847-3.184-4.972-3.184v2.872L3.772 4.994 8.516.5V3zM.484 5l4.5-4.237v1.78L2.416 5l2.568 2.125v1.828L.484 5z\"\n    fillRule=\"evenodd\"\n  />\n</svg>\n<svg\n  *ngIf=\"icon === 'arrow-left'\"\n  data-testid=\"arrow-left\"\n  width=\"24\"\n  height=\"24\"\n  viewBox=\"0 0 24 24\"\n  fill=\"none\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n>\n  <path\n    d=\"M15.7049 7.41L14.2949 6L8.29492 12L14.2949 18L15.7049 16.59L11.1249 12L15.7049 7.41Z\"\n    fill=\"var(--black)\"\n  />\n</svg>\n\n<svg\n  *ngIf=\"icon === 'arrow-right'\"\n  data-testid=\"arrow-right\"\n  width=\"24\"\n  height=\"24\"\n  viewBox=\"0 0 24 24\"\n  fill=\"none\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n>\n  <path\n    d=\"M9.70492 6L8.29492 7.41L12.8749 12L8.29492 16.59L9.70492 18L15.7049 12L9.70492 6Z\"\n    fill=\"var(--black)\"\n  />\n</svg>\n<svg\n  *ngIf=\"icon === 'menu'\"\n  data-testid=\"menu\"\n  width=\"24\"\n  height=\"24\"\n  viewBox=\"0 0 24 24\"\n  fill=\"none\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n>\n  <path\n    fill-rule=\"evenodd\"\n    clip-rule=\"evenodd\"\n    d=\"M3 8V6H21V8H3ZM3 13H21V11H3V13ZM3 18H21V16H3V18Z\"\n    fill=\"black\"\n  />\n</svg>\n", directives: [{ type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: IconComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -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    <span class=\"str-chat__header-hamburger--line\"></span>\n    <span class=\"str-chat__header-hamburger--line\"></span>\n    <span class=\"str-chat__header-hamburger--line\"></span>\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: 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 {