stream-chat-angular 1.3.0 → 2.0.0

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

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('rxjs'), require('stream-chat'), require('rxjs/operators'), require('uuid'), require('@ngx-translate/core'), require('@angular/common'), require('dayjs'), require('dayjs/plugin/calendar'), require('@ctrl/ngx-emoji-mart/ngx-emoji'), require('pretty-bytes')) :
-    typeof define === 'function' && define.amd ? define('stream-chat-angular', ['exports', '@angular/core', 'rxjs', 'stream-chat', 'rxjs/operators', 'uuid', '@ngx-translate/core', '@angular/common', 'dayjs', 'dayjs/plugin/calendar', '@ctrl/ngx-emoji-mart/ngx-emoji', 'pretty-bytes'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global['stream-chat-angular'] = {}, global.ng.core, global.rxjs, global.streamChat, global.rxjs.operators, global.uuid, global.i4, global.ng.common, global.Dayjs, global.calendar, global.i2, global.prettybytes));
-}(this, (function (exports, i0, rxjs, streamChat, operators, uuid, i4, i5, Dayjs, calendar, i2, prettybytes) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('rxjs'), require('stream-chat'), require('rxjs/operators'), require('uuid'), require('@ngx-translate/core'), require('@angular/common'), require('dayjs'), require('dayjs/plugin/calendar'), require('@ctrl/ngx-emoji-mart/ngx-emoji'), require('pretty-bytes'), require('angular-mentions')) :
+    typeof define === 'function' && define.amd ? define('stream-chat-angular', ['exports', '@angular/core', 'rxjs', 'stream-chat', 'rxjs/operators', 'uuid', '@ngx-translate/core', '@angular/common', 'dayjs', 'dayjs/plugin/calendar', '@ctrl/ngx-emoji-mart/ngx-emoji', 'pretty-bytes', 'angular-mentions'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global['stream-chat-angular'] = {}, global.ng.core, global.rxjs, global.streamChat, global.rxjs.operators, global.uuid, global.i1, global.ng.common, global.Dayjs, global.calendar, global.i2, global.prettybytes, global.i4));
+}(this, (function (exports, i0, rxjs, streamChat, operators, uuid, i1, i5, Dayjs, calendar, i2, prettybytes, i4) { 'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -27,12 +27,13 @@
     }
 
     var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
-    var i4__namespace = /*#__PURE__*/_interopNamespace(i4);
+    var i1__namespace = /*#__PURE__*/_interopNamespace(i1);
     var i5__namespace = /*#__PURE__*/_interopNamespace(i5);
     var Dayjs__default = /*#__PURE__*/_interopDefaultLegacy(Dayjs);
     var calendar__default = /*#__PURE__*/_interopDefaultLegacy(calendar);
     var i2__namespace = /*#__PURE__*/_interopNamespace(i2);
     var prettybytes__default = /*#__PURE__*/_interopDefaultLegacy(prettybytes);
+    var i4__namespace = /*#__PURE__*/_interopNamespace(i4);
 
     /*! *****************************************************************************
     Copyright (c) Microsoft Corporation.
@@ -352,7 +353,7 @@
         return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
     }
 
-    var version = '1.3.0';
+    var version = '2.0.0';
 
     var NotificationService = /** @class */ (function () {
         function NotificationService() {
@@ -483,6 +484,29 @@
                 });
             });
         };
+        ChatClientService.prototype.autocompleteUsers = function (searchTerm) {
+            return __awaiter(this, void 0, void 0, function () {
+                var result;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            if (!searchTerm) {
+                                return [2 /*return*/, []];
+                            }
+                            return [4 /*yield*/, this.chatClient.queryUsers({
+                                    $or: [
+                                        { id: { $autocomplete: searchTerm } },
+                                        { name: { $autocomplete: searchTerm } },
+                                    ],
+                                    id: { $ne: this.chatClient.userID },
+                                })];
+                        case 1:
+                            result = _a.sent();
+                            return [2 /*return*/, result.users];
+                    }
+                });
+            });
+        };
         return ChatClientService;
     }());
     ChatClientService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: ChatClientService, deps: [{ token: i0__namespace.NgZone }, { token: i0__namespace.ApplicationRef }, { token: NotificationService }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
@@ -494,7 +518,7 @@
                     }]
             }], ctorParameters: function () { return [{ type: i0__namespace.NgZone }, { type: i0__namespace.ApplicationRef }, { type: NotificationService }]; } });
 
-    var createMessagePreview = function (user, text, attachments) {
+    var createMessagePreview = function (user, text, attachments, mentionedUsers) {
         var clientSideId = user.id + "-" + uuid.v4();
         return {
             __html: text,
@@ -507,6 +531,7 @@
             type: 'regular',
             user: user,
             attachments: attachments,
+            mentioned_users: mentionedUsers,
         };
     };
 
@@ -545,7 +570,8 @@
             this.activeChannelMessages$ = this.activeChannelMessagesSubject.pipe(operators.map(function (messages) {
                 var channel = _this.activeChannelSubject.getValue();
                 return messages.map(function (message) {
-                    if (_this.isStreamMessage(message)) {
+                    if (_this.isStreamMessage(message) &&
+                        _this.isFormatMessageResponse(message)) {
                         return message;
                     }
                     else if (_this.isFormatMessageResponse(message)) {
@@ -663,14 +689,15 @@
                 });
             });
         };
-        ChannelService.prototype.sendMessage = function (text, attachments) {
+        ChannelService.prototype.sendMessage = function (text, attachments, mentionedUsers) {
             if (attachments === void 0) { attachments = []; }
+            if (mentionedUsers === void 0) { mentionedUsers = []; }
             return __awaiter(this, void 0, void 0, function () {
                 var preview, channel;
                 return __generator(this, function (_e) {
                     switch (_e.label) {
                         case 0:
-                            preview = createMessagePreview(this.chatClientService.chatClient.user, text, attachments);
+                            preview = createMessagePreview(this.chatClientService.chatClient.user, text, attachments, mentionedUsers);
                             channel = this.activeChannelSubject.getValue();
                             preview.readBy = [];
                             channel.state.addMessageSorted(preview, true);
@@ -698,6 +725,30 @@
                 });
             });
         };
+        ChannelService.prototype.updateMessage = function (message) {
+            return __awaiter(this, void 0, void 0, function () {
+                return __generator(this, function (_e) {
+                    switch (_e.label) {
+                        case 0: return [4 /*yield*/, this.chatClientService.chatClient.updateMessage(message)];
+                        case 1:
+                            _e.sent();
+                            return [2 /*return*/];
+                    }
+                });
+            });
+        };
+        ChannelService.prototype.deleteMessage = function (message) {
+            return __awaiter(this, void 0, void 0, function () {
+                return __generator(this, function (_e) {
+                    switch (_e.label) {
+                        case 0: return [4 /*yield*/, this.chatClientService.chatClient.deleteMessage(message.id)];
+                        case 1:
+                            _e.sent();
+                            return [2 /*return*/];
+                    }
+                });
+            });
+        };
         ChannelService.prototype.uploadAttachments = function (uploads) {
             return __awaiter(this, void 0, void 0, function () {
                 var result, channel, uploadResults;
@@ -748,7 +799,39 @@
                 });
             });
         };
+        ChannelService.prototype.autocompleteMembers = function (searchTerm) {
+            return __awaiter(this, void 0, void 0, function () {
+                var activeChannel, result;
+                var _this = this;
+                return __generator(this, function (_e) {
+                    switch (_e.label) {
+                        case 0:
+                            activeChannel = this.activeChannelSubject.getValue();
+                            if (!activeChannel) {
+                                return [2 /*return*/, []];
+                            }
+                            if (!(Object.keys(activeChannel.state.members).length <= 100)) return [3 /*break*/, 1];
+                            return [2 /*return*/, Object.values(activeChannel.state.members).filter(function (m) { var _a; return ((_a = m.user) === null || _a === void 0 ? void 0 : _a.id) !== _this.chatClientService.chatClient.userID; })];
+                        case 1:
+                            if (!searchTerm) {
+                                return [2 /*return*/, []];
+                            }
+                            return [4 /*yield*/, activeChannel.queryMembers({
+                                    $or: [
+                                        { id: { $autocomplete: searchTerm } },
+                                        { name: { $autocomplete: searchTerm } },
+                                    ],
+                                    id: { $ne: this.chatClientService.chatClient.userID },
+                                })];
+                        case 2:
+                            result = _e.sent();
+                            return [2 /*return*/, Object.values(result.members)];
+                    }
+                });
+            });
+        };
         ChannelService.prototype.sendMessageRequest = function (preview) {
+            var _a;
             return __awaiter(this, void 0, void 0, function () {
                 var channel, error_1, stringError, parsedError;
                 return __generator(this, function (_e) {
@@ -762,6 +845,7 @@
                             return [4 /*yield*/, channel.sendMessage({
                                     text: preview.text,
                                     attachments: preview.attachments,
+                                    mentioned_users: (_a = preview.mentioned_users) === null || _a === void 0 ? void 0 : _a.map(function (u) { return u.id; }),
                                     id: preview.id,
                                 })];
                         case 2:
@@ -900,6 +984,8 @@
                         .subscribe(function (c) { return void (c === null || c === void 0 ? void 0 : c.markRead()); });
                 });
             }));
+            this.activeChannelSubscriptions.push(channel.on('message.updated', function (event) { return _this.messageUpdated(event); }));
+            this.activeChannelSubscriptions.push(channel.on('message.deleted', function (event) { return _this.messageUpdated(event); }));
             this.activeChannelSubscriptions.push(channel.on('reaction.new', function (e) { return _this.messageReactionEventReceived(e); }));
             this.activeChannelSubscriptions.push(channel.on('reaction.deleted', function (e) { return _this.messageReactionEventReceived(e); }));
             this.activeChannelSubscriptions.push(channel.on('reaction.updated', function (e) { return _this.messageReactionEventReceived(e); }));
@@ -915,6 +1001,17 @@
                 _this.activeChannelMessagesSubject.next(_this.activeChannelMessagesSubject.getValue());
             }));
         };
+        ChannelService.prototype.messageUpdated = function (event) {
+            var _this = this;
+            this.ngZone.run(function () {
+                var messages = _this.activeChannelMessagesSubject.getValue();
+                var messageIndex = messages.findIndex(function (m) { var _a; return m.id === ((_a = event.message) === null || _a === void 0 ? void 0 : _a.id); });
+                if (messageIndex !== -1 && event.message) {
+                    messages[messageIndex] = event.message;
+                    _this.activeChannelMessagesSubject.next(__spreadArray([], __read(messages)));
+                }
+            });
+        };
         ChannelService.prototype.messageReactionEventReceived = function (e) {
             var _this = this;
             this.ngZone.run(function () {
@@ -1202,6 +1299,230 @@
                     }]
             }], ctorParameters: function () { return []; } });
 
+    var isImageAttachment = function (attachment) {
+        return (attachment.type === 'image' &&
+            !attachment.title_link &&
+            !attachment.og_scrape_url);
+    };
+
+    var AttachmentService = /** @class */ (function () {
+        function AttachmentService(channelService, notificationService) {
+            this.channelService = channelService;
+            this.notificationService = notificationService;
+            this.attachmentUploadInProgressCounterSubject = new rxjs.BehaviorSubject(0);
+            this.attachmentUploadsSubject = new rxjs.BehaviorSubject([]);
+            this.attachmentUploadInProgressCounter$ =
+                this.attachmentUploadInProgressCounterSubject.asObservable();
+            this.attachmentUploads$ = this.attachmentUploadsSubject.asObservable();
+        }
+        AttachmentService.prototype.resetAttachmentUploads = function () {
+            this.attachmentUploadsSubject.next([]);
+        };
+        AttachmentService.prototype.filesSelected = function (fileList) {
+            return __awaiter(this, void 0, void 0, function () {
+                var imageFiles, dataFiles, newUploads;
+                var _this = this;
+                return __generator(this, function (_d) {
+                    switch (_d.label) {
+                        case 0:
+                            if (!fileList) {
+                                return [2 /*return*/];
+                            }
+                            imageFiles = [];
+                            dataFiles = [];
+                            Array.from(fileList).forEach(function (file) {
+                                if (file.type.startsWith('image/') && !file.type.endsWith('.photoshop')) {
+                                    // photoshop files begin with 'image/'
+                                    imageFiles.push(file);
+                                }
+                                else {
+                                    dataFiles.push(file);
+                                }
+                            });
+                            imageFiles.forEach(function (f) { return _this.createPreview(f); });
+                            newUploads = __spreadArray(__spreadArray([], __read(imageFiles.map(function (file) { return ({
+                                file: file,
+                                state: 'uploading',
+                                type: 'image',
+                            }); }))), __read(dataFiles.map(function (file) { return ({
+                                file: file,
+                                state: 'uploading',
+                                type: 'file',
+                            }); })));
+                            this.attachmentUploadsSubject.next(__spreadArray(__spreadArray([], __read(this.attachmentUploadsSubject.getValue())), __read(newUploads)));
+                            return [4 /*yield*/, this.uploadAttachments(newUploads)];
+                        case 1:
+                            _d.sent();
+                            return [2 /*return*/];
+                    }
+                });
+            });
+        };
+        AttachmentService.prototype.retryAttachmentUpload = function (file) {
+            return __awaiter(this, void 0, void 0, function () {
+                var attachmentUploads, upload;
+                return __generator(this, function (_d) {
+                    switch (_d.label) {
+                        case 0:
+                            attachmentUploads = this.attachmentUploadsSubject.getValue();
+                            upload = attachmentUploads.find(function (u) { return u.file === file; });
+                            if (!upload) {
+                                return [2 /*return*/];
+                            }
+                            upload.state = 'uploading';
+                            this.attachmentUploadsSubject.next(__spreadArray([], __read(attachmentUploads)));
+                            return [4 /*yield*/, this.uploadAttachments([upload])];
+                        case 1:
+                            _d.sent();
+                            return [2 /*return*/];
+                    }
+                });
+            });
+        };
+        AttachmentService.prototype.deleteAttachment = function (upload) {
+            return __awaiter(this, void 0, void 0, function () {
+                var attachmentUploads, error_1;
+                return __generator(this, function (_d) {
+                    switch (_d.label) {
+                        case 0:
+                            attachmentUploads = this.attachmentUploadsSubject.getValue();
+                            if (!(upload.state === 'success')) return [3 /*break*/, 5];
+                            _d.label = 1;
+                        case 1:
+                            _d.trys.push([1, 3, , 4]);
+                            return [4 /*yield*/, this.channelService.deleteAttachment(upload)];
+                        case 2:
+                            _d.sent();
+                            attachmentUploads.splice(attachmentUploads.indexOf(upload), 1);
+                            return [3 /*break*/, 4];
+                        case 3:
+                            error_1 = _d.sent();
+                            this.notificationService.addTemporaryNotification('streamChat.Error deleting attachment');
+                            return [3 /*break*/, 4];
+                        case 4: return [3 /*break*/, 6];
+                        case 5:
+                            attachmentUploads.splice(attachmentUploads.indexOf(upload), 1);
+                            _d.label = 6;
+                        case 6:
+                            this.attachmentUploadsSubject.next(__spreadArray([], __read(attachmentUploads)));
+                            return [2 /*return*/];
+                    }
+                });
+            });
+        };
+        AttachmentService.prototype.mapToAttachments = function () {
+            var attachmentUploads = this.attachmentUploadsSubject.getValue();
+            return attachmentUploads
+                .filter(function (r) { return r.state === 'success'; })
+                .map(function (r) {
+                var _a, _b, _c;
+                var attachment = {
+                    type: r.type,
+                };
+                if (r.type === 'image') {
+                    attachment.fallback = (_a = r.file) === null || _a === void 0 ? void 0 : _a.name;
+                    attachment.image_url = r.url;
+                }
+                else {
+                    attachment.asset_url = r.url;
+                    attachment.title = (_b = r.file) === null || _b === void 0 ? void 0 : _b.name;
+                    attachment.file_size = (_c = r.file) === null || _c === void 0 ? void 0 : _c.size;
+                }
+                return attachment;
+            });
+        };
+        AttachmentService.prototype.createFromAttachments = function (attachments) {
+            var attachmentUploads = [];
+            attachments.forEach(function (attachment) {
+                if (isImageAttachment(attachment)) {
+                    attachmentUploads.push({
+                        url: (attachment.img_url ||
+                            attachment.thumb_url ||
+                            attachment.image_url),
+                        state: 'success',
+                        type: 'image',
+                        file: {
+                            name: attachment.fallback,
+                        },
+                    });
+                }
+                else if (attachment.type === 'file') {
+                    attachmentUploads.push({
+                        url: attachment.asset_url,
+                        state: 'success',
+                        file: {
+                            name: attachment.title,
+                            size: attachment.file_size,
+                        },
+                        type: 'file',
+                    });
+                }
+            });
+            if (attachmentUploads.length > 0) {
+                this.attachmentUploadsSubject.next(__spreadArray(__spreadArray([], __read(this.attachmentUploadsSubject.getValue())), __read(attachmentUploads)));
+            }
+        };
+        AttachmentService.prototype.createPreview = function (file) {
+            var _this = this;
+            var reader = new FileReader();
+            reader.onload = function (event) {
+                var _a;
+                var attachmentUploads = _this.attachmentUploadsSubject.getValue();
+                var upload = attachmentUploads.find(function (upload) { return upload.file === file; });
+                if (!upload) {
+                    return;
+                }
+                upload.previewUri = ((_a = event.target) === null || _a === void 0 ? void 0 : _a.result) || undefined;
+                _this.attachmentUploadsSubject.next(__spreadArray([], __read(attachmentUploads)));
+            };
+            reader.readAsDataURL(file);
+        };
+        AttachmentService.prototype.uploadAttachments = function (uploads) {
+            return __awaiter(this, void 0, void 0, function () {
+                var attachmentUploads, result;
+                var _this = this;
+                return __generator(this, function (_d) {
+                    switch (_d.label) {
+                        case 0:
+                            attachmentUploads = this.attachmentUploadsSubject.getValue();
+                            this.attachmentUploadInProgressCounterSubject.next(this.attachmentUploadInProgressCounterSubject.getValue() + 1);
+                            return [4 /*yield*/, this.channelService.uploadAttachments(uploads)];
+                        case 1:
+                            result = _d.sent();
+                            result.forEach(function (r) {
+                                var upload = attachmentUploads.find(function (upload) { return upload.file === r.file; });
+                                if (!upload) {
+                                    if (r.url) {
+                                        void _this.channelService.deleteAttachment(r);
+                                    }
+                                    return;
+                                }
+                                upload.state = r.state;
+                                upload.url = r.url;
+                                if (upload.state === 'error') {
+                                    _this.notificationService.addTemporaryNotification(upload.type === 'image'
+                                        ? 'streamChat.Error uploading image'
+                                        : 'streamChat.Error uploading file');
+                                }
+                            });
+                            this.attachmentUploadInProgressCounterSubject.next(this.attachmentUploadInProgressCounterSubject.getValue() - 1);
+                            this.attachmentUploadsSubject.next(__spreadArray([], __read(attachmentUploads)));
+                            return [2 /*return*/];
+                    }
+                });
+            });
+        };
+        return AttachmentService;
+    }());
+    AttachmentService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: AttachmentService, deps: [{ token: ChannelService }, { token: NotificationService }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    AttachmentService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: AttachmentService, providedIn: 'root' });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: AttachmentService, decorators: [{
+                type: i0.Injectable,
+                args: [{
+                        providedIn: 'root',
+                    }]
+            }], ctorParameters: function () { return [{ type: ChannelService }, { type: NotificationService }]; } });
+
     var en = {
         streamChat: {
             '1 reply': '1 reply',
@@ -1227,6 +1548,7 @@
             'Error unmuting a user ...': 'Error unmuting a user ...',
             'Error uploading file': 'Error uploading file',
             'Error uploading image': 'Error uploading image',
+            'Error deleting attachment': 'Error deleting attachment',
             'Error · Unsent': 'Error · Unsent',
             'Error: {{ errorMessage }}': 'Error: {{ errorMessage }}',
             Flag: 'Flag',
@@ -1296,14 +1618,14 @@
         };
         return StreamI18nService;
     }());
-    StreamI18nService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: StreamI18nService, deps: [{ token: i4__namespace.TranslateService }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    StreamI18nService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: StreamI18nService, deps: [{ token: i1__namespace.TranslateService }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
     StreamI18nService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: StreamI18nService, providedIn: 'root' });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: StreamI18nService, decorators: [{
                 type: i0.Injectable,
                 args: [{
                         providedIn: 'root',
                     }]
-            }], ctorParameters: function () { return [{ type: i4__namespace.TranslateService }]; } });
+            }], ctorParameters: function () { return [{ type: i1__namespace.TranslateService }]; } });
 
     var AvatarComponent = /** @class */ (function () {
         function AvatarComponent() {
@@ -1344,7 +1666,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", directives: [{ type: i5__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4__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", directives: [{ type: i5__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__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: [{
@@ -1380,80 +1702,515 @@
                     type: i0.Input
                 }] } });
 
-    var MessageActionsBoxComponent = /** @class */ (function () {
-        function MessageActionsBoxComponent(chatClientService, notificationService) {
-            this.chatClientService = chatClientService;
-            this.notificationService = notificationService;
-            this.isOpen = false;
-            this.isMine = false;
-            this.enabledActions = [];
-            this.displayedActionsCount = new i0.EventEmitter();
+    var textareaInjectionToken = new i0.InjectionToken('textareaInjectionToken');
+
+    var TextareaDirective = /** @class */ (function () {
+        function TextareaDirective(viewContainerRef) {
+            this.viewContainerRef = viewContainerRef;
+            this.value = '';
+            this.valueChange = new i0.EventEmitter();
+            this.send = new i0.EventEmitter();
+            this.userMentions = new i0.EventEmitter();
+            this.subscriptions = [];
         }
-        MessageActionsBoxComponent.prototype.ngOnChanges = function (changes) {
-            if (changes.isMine || changes.enabledActions) {
-                var displayedActionsCount = 0;
-                if (this.isQuoteVisible) {
-                    displayedActionsCount++;
-                }
-                if (this.isEditVisible) {
-                    displayedActionsCount++;
-                }
-                if (this.isDeleteVisible) {
-                    displayedActionsCount++;
-                }
-                if (this.isMuteVisible) {
-                    displayedActionsCount++;
-                }
-                if (this.isFlagVisible) {
-                    displayedActionsCount++;
-                }
-                if (this.isPinVisible) {
-                    displayedActionsCount++;
+        TextareaDirective.prototype.ngOnChanges = function (changes) {
+            var _this = this;
+            if (!this.componentRef) {
+                return;
+            }
+            if (changes.componentRef) {
+                this.subscriptions.forEach(function (s) { return s.unsubscribe(); });
+                if (this.componentRef) {
+                    this.subscriptions.push(this.componentRef.instance.valueChange.subscribe(function (value) { return _this.valueChange.next(value); }));
+                    this.subscriptions.push(this.componentRef.instance.send.subscribe(function (value) { return _this.send.next(value); }));
+                    if (this.componentRef.instance.userMentions) {
+                        this.subscriptions.push(this.componentRef.instance.userMentions.subscribe(function (value) { return _this.userMentions.next(value); }));
+                    }
                 }
-                this.displayedActionsCount.next(displayedActionsCount);
             }
+            if (changes.areMentionsEnabled) {
+                this.componentRef.instance.areMentionsEnabled = this.areMentionsEnabled;
+            }
+            if (changes.mentionAutocompleteItemTemplate) {
+                this.componentRef.instance.mentionAutocompleteItemTemplate =
+                    this.mentionAutocompleteItemTemplate;
+            }
+            if (changes.mentionScope) {
+                this.componentRef.instance.mentionScope = this.mentionScope;
+            }
+            if (changes.value) {
+                this.componentRef.instance.value = this.value;
+            }
+            // ngOnChanges not called for dynamic components since we don't use template binding
+            // eslint-disable-next-line @angular-eslint/no-lifecycle-call
+            this.componentRef.instance.ngOnChanges(changes);
         };
-        Object.defineProperty(MessageActionsBoxComponent.prototype, "isQuoteVisible", {
-            get: function () {
-                return this.enabledActions.indexOf('quote') !== -1;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(MessageActionsBoxComponent.prototype, "isEditVisible", {
-            get: function () {
-                return this.enabledActions.indexOf('edit') !== -1;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(MessageActionsBoxComponent.prototype, "isDeleteVisible", {
-            get: function () {
-                return this.enabledActions.indexOf('delete') !== -1;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(MessageActionsBoxComponent.prototype, "isMuteVisible", {
-            get: function () {
-                return this.enabledActions.indexOf('mute') !== -1;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(MessageActionsBoxComponent.prototype, "isFlagVisible", {
-            get: function () {
-                return this.enabledActions.indexOf('flag') !== -1 && !this.isMine;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(MessageActionsBoxComponent.prototype, "isPinVisible", {
-            get: function () {
-                return this.enabledActions.indexOf('pin') !== -1;
-            },
-            enumerable: false,
-            configurable: true
+        return TextareaDirective;
+    }());
+    TextareaDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: TextareaDirective, deps: [{ token: i0__namespace.ViewContainerRef }], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    TextareaDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.5", type: TextareaDirective, selector: "[streamTextarea]", inputs: { componentRef: "componentRef", areMentionsEnabled: "areMentionsEnabled", mentionAutocompleteItemTemplate: "mentionAutocompleteItemTemplate", mentionScope: "mentionScope", value: "value" }, outputs: { valueChange: "valueChange", send: "send", userMentions: "userMentions" }, usesOnChanges: true, ngImport: i0__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: TextareaDirective, decorators: [{
+                type: i0.Directive,
+                args: [{
+                        selector: '[streamTextarea]',
+                    }]
+            }], ctorParameters: function () { return [{ type: i0__namespace.ViewContainerRef }]; }, propDecorators: { componentRef: [{
+                    type: i0.Input
+                }], areMentionsEnabled: [{
+                    type: i0.Input
+                }], mentionAutocompleteItemTemplate: [{
+                    type: i0.Input
+                }], mentionScope: [{
+                    type: i0.Input
+                }], value: [{
+                    type: i0.Input
+                }], valueChange: [{
+                    type: i0.Output
+                }], send: [{
+                    type: i0.Output
+                }], userMentions: [{
+                    type: i0.Output
+                }] } });
+
+    var MessageInputConfigService = /** @class */ (function () {
+        function MessageInputConfigService() {
+            this.isFileUploadEnabled = true;
+            this.areMentionsEnabled = true;
+            this.isMultipleFileUploadEnabled = true;
+            this.mentionScope = 'channel';
+        }
+        return MessageInputConfigService;
+    }());
+    MessageInputConfigService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: MessageInputConfigService, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    MessageInputConfigService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: MessageInputConfigService, providedIn: 'root' });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: MessageInputConfigService, decorators: [{
+                type: i0.Injectable,
+                args: [{
+                        providedIn: 'root',
+                    }]
+            }], ctorParameters: function () { return []; } });
+
+    var AttachmentPreviewListComponent = /** @class */ (function () {
+        function AttachmentPreviewListComponent(attachmentService) {
+            this.attachmentService = attachmentService;
+            this.attachmentUploads$ = this.attachmentService.attachmentUploads$;
+        }
+        AttachmentPreviewListComponent.prototype.retryAttachmentUpload = function (file) {
+            return __awaiter(this, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0: return [4 /*yield*/, this.attachmentService.retryAttachmentUpload(file)];
+                        case 1:
+                            _a.sent();
+                            return [2 /*return*/];
+                    }
+                });
+            });
+        };
+        AttachmentPreviewListComponent.prototype.deleteAttachment = function (upload) {
+            return __awaiter(this, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0: return [4 /*yield*/, this.attachmentService.deleteAttachment(upload)];
+                        case 1:
+                            _a.sent();
+                            return [2 /*return*/];
+                    }
+                });
+            });
+        };
+        AttachmentPreviewListComponent.prototype.trackByFile = function (_, item) {
+            return item.file;
+        };
+        return AttachmentPreviewListComponent;
+    }());
+    AttachmentPreviewListComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: AttachmentPreviewListComponent, deps: [{ token: AttachmentService }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    AttachmentPreviewListComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: AttachmentPreviewListComponent, selector: "stream-attachment-preview-list", ngImport: i0__namespace, template: "<div class=\"rfu-image-previewer\">\n  <ng-container\n    *ngFor=\"\n      let attachmentUpload of attachmentUploads$ | async;\n      trackBy: trackByFile\n    \"\n  >\n    <div\n      *ngIf=\"attachmentUpload.type === 'image'\"\n      class=\"rfu-image-previewer__image\"\n      [class.rfu-image-previewer__image--loaded]=\"\n        attachmentUpload.state === 'success'\n      \"\n      data-testclass=\"attachment-image-preview\"\n    >\n      <div\n        *ngIf=\"attachmentUpload.state === 'error'\"\n        class=\"rfu-image-previewer__retry\"\n        (click)=\"retryAttachmentUpload(attachmentUpload.file)\"\n        (keyup.enter)=\"retryAttachmentUpload(attachmentUpload.file)\"\n        data-testclass=\"upload-error\"\n      >\n        <stream-icon icon=\"retry\"></stream-icon>\n      </div>\n      <div class=\"rfu-thumbnail__wrapper\" style=\"width: 100; height: 100\">\n        <div class=\"rfu-thumbnail__overlay\">\n          <div\n            class=\"rfu-icon-button\"\n            data-testclass=\"delete-attachment\"\n            role=\"button\"\n            (click)=\"deleteAttachment(attachmentUpload)\"\n            (keyup.enter)=\"deleteAttachment(attachmentUpload)\"\n          >\n            <stream-icon icon=\"close\"></stream-icon>\n          </div>\n        </div>\n        <img\n          *ngIf=\"attachmentUpload.url || attachmentUpload.previewUri\"\n          src=\"{{\n            attachmentUpload.url\n              ? attachmentUpload.url\n              : attachmentUpload.previewUri\n          }}\"\n          alt=\"attachmentUpload.file.name\"\n          class=\"rfu-thumbnail__image\"\n          data-testclass=\"attachment-image\"\n        />\n      </div>\n      <stream-loading-indicator\n        data-testclass=\"loading-indicator\"\n        color=\"rgba(255,255,255,0.7)\"\n        *ngIf=\"attachmentUpload.state === 'uploading'\"\n      ></stream-loading-indicator>\n    </div>\n    <div\n      class=\"rfu-file-previewer\"\n      *ngIf=\"attachmentUpload.type === 'file'\"\n      data-testclass=\"attachment-file-preview\"\n    >\n      <ol>\n        <li\n          class=\"rfu-file-previewer__file\"\n          [class.rfu-file-previewer__file--uploading]=\"\n            attachmentUpload.state === 'uploading'\n          \"\n          [class.rfu-file-previewer__file--failed]=\"\n            attachmentUpload.state === 'error'\n          \"\n        >\n          <stream-icon icon=\"file\"></stream-icon>\n\n          <a\n            data-testclass=\"file-download-link\"\n            href=\"{{ attachmentUpload.url }}\"\n            (click)=\"attachmentUpload.url ? null : $event.preventDefault()\"\n            (keyup.enter)=\"\n              attachmentUpload.url ? null : $event.preventDefault()\n            \"\n            download\n          >\n            {{ attachmentUpload.file.name }}\n            <ng-container *ngIf=\"attachmentUpload.state === 'error'\">\n              <div\n                data-testclass=\"file-upload-retry\"\n                class=\"rfu-file-previewer__failed\"\n                (click)=\"retryAttachmentUpload(attachmentUpload.file)\"\n                (keyup.enter)=\"retryAttachmentUpload(attachmentUpload.file)\"\n                translate\n              >\n                streamChat.failed\n              </div>\n              <div\n                class=\"rfu-file-previewer__retry\"\n                (click)=\"retryAttachmentUpload(attachmentUpload.file)\"\n                (keyup.enter)=\"retryAttachmentUpload(attachmentUpload.file)\"\n                translate\n              >\n                streamChat.retry\n              </div>\n            </ng-container>\n          </a>\n\n          <span\n            data-testclass=\"file-delete\"\n            class=\"rfu-file-previewer__close-button\"\n            (click)=\"deleteAttachment(attachmentUpload)\"\n            (keyup.enter)=\"deleteAttachment(attachmentUpload)\"\n          >\n            \u2718\n          </span>\n          <div\n            *ngIf=\"attachmentUpload.state === 'uploading'\"\n            class=\"rfu-file-previewer__loading-indicator\"\n          >\n            <stream-loading-indicator></stream-loading-indicator>\n          </div>\n        </li>\n      </ol>\n    </div>\n  </ng-container>\n</div>\n", components: [{ type: IconComponent, selector: "stream-icon", inputs: ["icon", "size"] }, { type: LoadingIndicatorComponent, selector: "stream-loading-indicator", inputs: ["size", "color"] }], directives: [{ type: i5__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }], pipes: { "async": i5__namespace.AsyncPipe } });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: AttachmentPreviewListComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'stream-attachment-preview-list',
+                        templateUrl: './attachment-preview-list.component.html',
+                        styles: [],
+                    }]
+            }], ctorParameters: function () { return [{ type: AttachmentService }]; } });
+
+    var MessageInputComponent = /** @class */ (function () {
+        function MessageInputComponent(channelService, notificationService, attachmentService, configService, textareaType, componentFactoryResolver) {
+            var _this = this;
+            this.channelService = channelService;
+            this.notificationService = notificationService;
+            this.attachmentService = attachmentService;
+            this.configService = configService;
+            this.textareaType = textareaType;
+            this.componentFactoryResolver = componentFactoryResolver;
+            this.messageUpdate = new i0.EventEmitter();
+            this.textareaValue = '';
+            this.mentionedUsers = [];
+            this.subscriptions = [];
+            this.subscriptions.push(this.channelService.activeChannel$.subscribe(function (channel) {
+                var _a;
+                _this.textareaValue = '';
+                _this.attachmentService.resetAttachmentUploads();
+                var capabilities = (_a = channel === null || channel === void 0 ? void 0 : channel.data) === null || _a === void 0 ? void 0 : _a.own_capabilities;
+                if (capabilities) {
+                    _this.isFileUploadAuthorized =
+                        capabilities.indexOf('upload-file') !== -1;
+                }
+            }));
+            this.subscriptions.push(this.attachmentService.attachmentUploadInProgressCounter$.subscribe(function (counter) {
+                if (counter === 0 && _this.hideNotification) {
+                    _this.hideNotification();
+                    _this.hideNotification = undefined;
+                }
+            }));
+            this.attachmentUploads$ = this.attachmentService.attachmentUploads$;
+            this.isFileUploadEnabled = this.configService.isFileUploadEnabled;
+            this.acceptedFileTypes = this.configService.acceptedFileTypes;
+            this.isMultipleFileUploadEnabled =
+                this.configService.isMultipleFileUploadEnabled;
+            this.areMentionsEnabled = this.configService.areMentionsEnabled;
+            this.mentionAutocompleteItemTemplate =
+                this.configService.mentionAutocompleteItemTemplate;
+            this.mentionScope = this.configService.mentionScope;
+        }
+        MessageInputComponent.prototype.ngOnInit = function () {
+            var componentFactory = this.componentFactoryResolver.resolveComponentFactory(this.textareaType);
+            this.textareaRef =
+                this.textareaAnchor.viewContainerRef.createComponent(componentFactory);
+        };
+        MessageInputComponent.prototype.ngOnChanges = function (changes) {
+            if (changes.message) {
+                this.attachmentService.resetAttachmentUploads();
+                if (this.isUpdate) {
+                    this.attachmentService.createFromAttachments(this.message.attachments || []);
+                    this.textareaValue = this.message.text || '';
+                }
+            }
+            if (changes.isFileUploadEnabled) {
+                this.configService.isFileUploadEnabled = this.isFileUploadEnabled;
+            }
+            if (changes.acceptedFileTypes) {
+                this.configService.acceptedFileTypes = this.acceptedFileTypes;
+            }
+            if (changes.isMultipleFileUploadEnabled) {
+                this.configService.isMultipleFileUploadEnabled =
+                    this.isMultipleFileUploadEnabled;
+            }
+            if (changes.areMentionsEnabled) {
+                this.configService.areMentionsEnabled = this.areMentionsEnabled;
+            }
+            if (changes.mentionAutocompleteItemTemplate) {
+                this.configService.mentionAutocompleteItemTemplate =
+                    this.mentionAutocompleteItemTemplate;
+            }
+            if (changes.mentionScope) {
+                this.configService.mentionScope = this.mentionScope;
+            }
+        };
+        MessageInputComponent.prototype.ngOnDestroy = function () {
+            this.subscriptions.forEach(function (s) { return s.unsubscribe(); });
+        };
+        MessageInputComponent.prototype.messageSent = function () {
+            return __awaiter(this, void 0, void 0, function () {
+                var attachmentUploadInProgressCounter, attachments, text, error_1;
+                return __generator(this, function (_b) {
+                    switch (_b.label) {
+                        case 0:
+                            this.attachmentService.attachmentUploadInProgressCounter$
+                                .pipe(operators.first())
+                                .subscribe(function (counter) { return (attachmentUploadInProgressCounter = counter); });
+                            if (attachmentUploadInProgressCounter > 0) {
+                                if (!this.hideNotification) {
+                                    this.hideNotification =
+                                        this.notificationService.addPermanentNotification('streamChat.Wait until all attachments have uploaded');
+                                }
+                                return [2 /*return*/];
+                            }
+                            attachments = this.attachmentService.mapToAttachments();
+                            text = this.textareaValue;
+                            if (!text && (!attachments || attachments.length === 0)) {
+                                return [2 /*return*/];
+                            }
+                            if (!this.isUpdate) {
+                                this.textareaValue = '';
+                            }
+                            _b.label = 1;
+                        case 1:
+                            _b.trys.push([1, 3, , 4]);
+                            return [4 /*yield*/, (this.isUpdate
+                                    ? this.channelService.updateMessage(Object.assign(Object.assign({}, this.message), { text: text, attachments: attachments }))
+                                    : this.channelService.sendMessage(text, attachments, this.mentionedUsers))];
+                        case 2:
+                            _b.sent();
+                            this.messageUpdate.emit();
+                            if (!this.isUpdate) {
+                                this.attachmentService.resetAttachmentUploads();
+                            }
+                            return [3 /*break*/, 4];
+                        case 3:
+                            error_1 = _b.sent();
+                            if (this.isUpdate) {
+                                this.notificationService.addTemporaryNotification('streamChat.Edit message request failed');
+                            }
+                            return [3 /*break*/, 4];
+                        case 4: return [2 /*return*/];
+                    }
+                });
+            });
+        };
+        Object.defineProperty(MessageInputComponent.prototype, "accept", {
+            get: function () {
+                var _a;
+                return this.acceptedFileTypes ? (_a = this.acceptedFileTypes) === null || _a === void 0 ? void 0 : _a.join(',') : '';
+            },
+            enumerable: false,
+            configurable: true
+        });
+        MessageInputComponent.prototype.filesSelected = function (fileList) {
+            return __awaiter(this, void 0, void 0, function () {
+                return __generator(this, function (_b) {
+                    switch (_b.label) {
+                        case 0: return [4 /*yield*/, this.attachmentService.filesSelected(fileList)];
+                        case 1:
+                            _b.sent();
+                            this.clearFileInput();
+                            return [2 /*return*/];
+                    }
+                });
+            });
+        };
+        MessageInputComponent.prototype.clearFileInput = function () {
+            this.fileInput.nativeElement.value = '';
+        };
+        Object.defineProperty(MessageInputComponent.prototype, "isUpdate", {
+            get: function () {
+                return !!this.message;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        return MessageInputComponent;
+    }());
+    MessageInputComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: MessageInputComponent, deps: [{ token: ChannelService }, { token: NotificationService }, { token: AttachmentService }, { token: MessageInputConfigService }, { token: textareaInjectionToken }, { token: i0__namespace.ComponentFactoryResolver }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    MessageInputComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: MessageInputComponent, selector: "stream-message-input", inputs: { isFileUploadEnabled: "isFileUploadEnabled", areMentionsEnabled: "areMentionsEnabled", mentionScope: "mentionScope", mentionAutocompleteItemTemplate: "mentionAutocompleteItemTemplate", acceptedFileTypes: "acceptedFileTypes", isMultipleFileUploadEnabled: "isMultipleFileUploadEnabled", message: "message" }, outputs: { messageUpdate: "messageUpdate" }, providers: [AttachmentService], viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }, { propertyName: "textareaAnchor", first: true, predicate: TextareaDirective, descendants: true, static: true }], usesOnChanges: true, ngImport: i0__namespace, template: "<div\n  class=\"str-chat__input-flat\"\n  [class.str-chat__input-flat-has-attachments]=\"\n    (attachmentUploads$ | async)!.length > 0\n  \"\n>\n  <div class=\"str-chat__input-flat-wrapper\">\n    <div class=\"str-chat__input-flat--textarea-wrapper\">\n      <stream-attachment-preview-list\n        class=\"rfu-image-previewer-angular-host\"\n      ></stream-attachment-preview-list>\n      <div class=\"rta str-chat__textarea\">\n        <ng-template\n          streamTextarea\n          [(value)]=\"textareaValue\"\n          (send)=\"messageSent()\"\n          [componentRef]=\"textareaRef\"\n          (userMentions)=\"mentionedUsers = $event\"\n          [areMentionsEnabled]=\"areMentionsEnabled\"\n          [mentionAutocompleteItemTemplate]=\"mentionAutocompleteItemTemplate\"\n          [mentionScope]=\"mentionScope\"\n        ></ng-template>\n      </div>\n      <div\n        *ngIf=\"isFileUploadEnabled && isFileUploadAuthorized\"\n        class=\"str-chat__fileupload-wrapper\"\n        data-testid=\"file-upload-button\"\n      >\n        <div class=\"str-chat__tooltip\">\n          {{ \"streamChat.Attach files\" | translate }}\n        </div>\n        <div class=\"rfu-file-upload-button\">\n          <label>\n            <input\n              #fileInput\n              type=\"file\"\n              class=\"rfu-file-input\"\n              data-testid=\"file-input\"\n              [accept]=\"accept\"\n              [multiple]=\"isMultipleFileUploadEnabled\"\n              (change)=\"filesSelected(fileInput.files)\"\n            />\n            <span class=\"str-chat__input-flat-fileupload\">\n              <stream-icon icon=\"file-upload\"></stream-icon>\n            </span>\n          </label>\n        </div>\n      </div>\n    </div>\n    <button\n      data-testid=\"send-button\"\n      class=\"str-chat__send-button\"\n      (click)=\"messageSent()\"\n      (keyup.enter)=\"messageSent()\"\n    >\n      <stream-icon icon=\"send\"></stream-icon>\n    </button>\n  </div>\n</div>\n", components: [{ type: AttachmentPreviewListComponent, selector: "stream-attachment-preview-list" }, { type: IconComponent, selector: "stream-icon", inputs: ["icon", "size"] }], directives: [{ type: TextareaDirective, selector: "[streamTextarea]", inputs: ["componentRef", "areMentionsEnabled", "mentionAutocompleteItemTemplate", "mentionScope", "value"], outputs: ["valueChange", "send", "userMentions"] }, { type: i5__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i5__namespace.AsyncPipe, "translate": i1__namespace.TranslatePipe } });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: MessageInputComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'stream-message-input',
+                        templateUrl: './message-input.component.html',
+                        styles: [],
+                        providers: [AttachmentService],
+                    }]
+            }], ctorParameters: function () {
+            return [{ type: ChannelService }, { type: NotificationService }, { type: AttachmentService }, { type: MessageInputConfigService }, { type: i0__namespace.Type, decorators: [{
+                            type: i0.Inject,
+                            args: [textareaInjectionToken]
+                        }] }, { type: i0__namespace.ComponentFactoryResolver }];
+        }, propDecorators: { isFileUploadEnabled: [{
+                    type: i0.Input
+                }], areMentionsEnabled: [{
+                    type: i0.Input
+                }], mentionScope: [{
+                    type: i0.Input
+                }], mentionAutocompleteItemTemplate: [{
+                    type: i0.Input
+                }], acceptedFileTypes: [{
+                    type: i0.Input
+                }], isMultipleFileUploadEnabled: [{
+                    type: i0.Input
+                }], message: [{
+                    type: i0.Input
+                }], messageUpdate: [{
+                    type: i0.Output
+                }], fileInput: [{
+                    type: i0.ViewChild,
+                    args: ['fileInput']
+                }], textareaAnchor: [{
+                    type: i0.ViewChild,
+                    args: [TextareaDirective, { static: true }]
+                }] } });
+
+    var ModalComponent = /** @class */ (function () {
+        function ModalComponent() {
+            var _this = this;
+            this.isOpen = false;
+            this.isOpenChange = new i0.EventEmitter();
+            this.watchForEscPress = function (event) {
+                if (event.key === 'Escape') {
+                    _this.close();
+                }
+            };
+            this.stopWatchForEscPress = function () {
+                window.removeEventListener('keyup', _this.watchForEscPress);
+            };
+            this.watchForOutsideClicks = function (event) {
+                var _a;
+                if (!((_a = _this.content) === null || _a === void 0 ? void 0 : _a.nativeElement.contains(event.target))) {
+                    _this.close();
+                }
+            };
+        }
+        ModalComponent.prototype.ngOnChanges = function (changes) {
+            var _this = this;
+            if (changes.isOpen) {
+                if (this.isOpen) {
+                    window.addEventListener('keyup', this.watchForEscPress);
+                    setTimeout(function () { return window.addEventListener('click', _this.watchForOutsideClicks); }, 0);
+                }
+                else {
+                    this.stopWatchForOutsideClicks();
+                    this.stopWatchForEscPress();
+                }
+            }
+        };
+        ModalComponent.prototype.close = function () {
+            this.isOpen = false;
+            this.isOpenChange.emit(false);
+            this.stopWatchForOutsideClicks();
+            this.stopWatchForEscPress();
+        };
+        ModalComponent.prototype.stopWatchForOutsideClicks = function () {
+            window.removeEventListener('click', this.watchForOutsideClicks);
+        };
+        return ModalComponent;
+    }());
+    ModalComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: ModalComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    ModalComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: ModalComponent, selector: "stream-modal", inputs: { isOpen: "isOpen" }, outputs: { isOpenChange: "isOpenChange" }, viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true }], usesOnChanges: true, ngImport: i0__namespace, template: "<div\n  data-testid=\"modal\"\n  class=\"str-chat__modal str-chat__modal--{{ isOpen ? 'open' : 'close' }}\"\n>\n  <div\n    data-testid=\"close\"\n    class=\"str-chat__modal__close-button\"\n    (click)=\"close()\"\n    (keyup.enter)=\"close()\"\n    translate\n  >\n    streamChat.Close\n    <stream-icon icon=\"close\"></stream-icon>\n  </div>\n  <div class=\"str-chat__modal__inner\" #content>\n    <ng-content></ng-content>\n  </div>\n</div>\n", components: [{ type: IconComponent, selector: "stream-icon", inputs: ["icon", "size"] }], directives: [{ type: i1__namespace.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: ModalComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'stream-modal',
+                        templateUrl: './modal.component.html',
+                        styles: [],
+                    }]
+            }], ctorParameters: function () { return []; }, propDecorators: { isOpen: [{
+                    type: i0.Input
+                }], isOpenChange: [{
+                    type: i0.Output
+                }], content: [{
+                    type: i0.ViewChild,
+                    args: ['content']
+                }] } });
+
+    var NotificationComponent = /** @class */ (function () {
+        function NotificationComponent() {
+        }
+        return NotificationComponent;
+    }());
+    NotificationComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: NotificationComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    NotificationComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: NotificationComponent, selector: "stream-notification", inputs: { type: "type" }, ngImport: i0__namespace, template: "<div\n  class=\"str-chat__custom-notification notification-{{ type }}\"\n  data-testid=\"custom-notification\"\n>\n  <ng-content></ng-content>\n</div>\n" });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: NotificationComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'stream-notification',
+                        templateUrl: './notification.component.html',
+                        styles: [],
+                    }]
+            }], ctorParameters: function () { return []; }, propDecorators: { type: [{
+                    type: i0.Input
+                }] } });
+
+    var NotificationListComponent = /** @class */ (function () {
+        function NotificationListComponent(notificationService) {
+            this.notificationService = notificationService;
+            this.notifications$ = this.notificationService.notifications$;
+        }
+        NotificationListComponent.prototype.trackByItem = function (_, item) {
+            return item;
+        };
+        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\" translate>\n      {{ notification.text }}\n    </div></stream-notification\n  >\n</div>\n", components: [{ type: NotificationComponent, selector: "stream-notification", inputs: ["type"] }], directives: [{ type: i5__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1__namespace.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }], pipes: { "async": i5__namespace.AsyncPipe } });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: NotificationListComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'stream-notification-list',
+                        templateUrl: './notification-list.component.html',
+                        styles: [],
+                    }]
+            }], ctorParameters: function () { return [{ type: NotificationService }]; } });
+
+    var MessageActionsBoxComponent = /** @class */ (function () {
+        function MessageActionsBoxComponent(chatClientService, notificationService, channelService) {
+            this.chatClientService = chatClientService;
+            this.notificationService = notificationService;
+            this.channelService = channelService;
+            this.isOpen = false;
+            this.isMine = false;
+            this.enabledActions = [];
+            this.displayedActionsCount = new i0.EventEmitter();
+            this.isEditing = new i0.EventEmitter();
+            this.isEditModalOpen = false;
+        }
+        MessageActionsBoxComponent.prototype.ngOnChanges = function (changes) {
+            if (changes.isMine || changes.enabledActions) {
+                var displayedActionsCount = 0;
+                if (this.isQuoteVisible) {
+                    displayedActionsCount++;
+                }
+                if (this.isEditVisible) {
+                    displayedActionsCount++;
+                }
+                if (this.isDeleteVisible) {
+                    displayedActionsCount++;
+                }
+                if (this.isMuteVisible) {
+                    displayedActionsCount++;
+                }
+                if (this.isFlagVisible) {
+                    displayedActionsCount++;
+                }
+                if (this.isPinVisible) {
+                    displayedActionsCount++;
+                }
+                this.displayedActionsCount.next(displayedActionsCount);
+            }
+        };
+        Object.defineProperty(MessageActionsBoxComponent.prototype, "isQuoteVisible", {
+            get: function () {
+                return this.enabledActions.indexOf('quote') !== -1;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(MessageActionsBoxComponent.prototype, "isEditVisible", {
+            get: function () {
+                return ((this.enabledActions.indexOf('edit') !== -1 && this.isMine) ||
+                    this.enabledActions.indexOf('edit-any') !== -1);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(MessageActionsBoxComponent.prototype, "isDeleteVisible", {
+            get: function () {
+                return ((this.enabledActions.indexOf('delete') !== -1 && this.isMine) ||
+                    this.enabledActions.indexOf('delete-any') !== -1);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(MessageActionsBoxComponent.prototype, "isMuteVisible", {
+            get: function () {
+                return this.enabledActions.indexOf('mute') !== -1;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(MessageActionsBoxComponent.prototype, "isFlagVisible", {
+            get: function () {
+                return this.enabledActions.indexOf('flag') !== -1 && !this.isMine;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(MessageActionsBoxComponent.prototype, "isPinVisible", {
+            get: function () {
+                return this.enabledActions.indexOf('pin') !== -1;
+            },
+            enumerable: false,
+            configurable: true
         });
         MessageActionsBoxComponent.prototype.pinClicked = function () {
             alert('Feature not yet implemented');
@@ -1461,17 +2218,17 @@
         MessageActionsBoxComponent.prototype.flagClicked = function () {
             return __awaiter(this, void 0, void 0, function () {
                 var err_1;
-                return __generator(this, function (_a) {
-                    switch (_a.label) {
+                return __generator(this, function (_b) {
+                    switch (_b.label) {
                         case 0:
-                            _a.trys.push([0, 2, , 3]);
+                            _b.trys.push([0, 2, , 3]);
                             return [4 /*yield*/, this.chatClientService.flagMessage(this.message.id)];
                         case 1:
-                            _a.sent();
+                            _b.sent();
                             this.notificationService.addTemporaryNotification('streamChat.Message has been successfully flagged', 'success');
                             return [3 /*break*/, 3];
                         case 2:
-                            err_1 = _a.sent();
+                            err_1 = _b.sent();
                             this.notificationService.addTemporaryNotification('streamChat.Error adding flag');
                             return [3 /*break*/, 3];
                         case 3: return [2 /*return*/];
@@ -1486,15 +2243,41 @@
             alert('Feature not yet implemented');
         };
         MessageActionsBoxComponent.prototype.editClicked = function () {
-            alert('Feature not yet implemented');
+            this.isEditing.emit(true);
+            this.isEditModalOpen = true;
+        };
+        MessageActionsBoxComponent.prototype.sendClicked = function () {
+            var _a;
+            (_a = this.messageInput) === null || _a === void 0 ? void 0 : _a.messageSent();
+        };
+        MessageActionsBoxComponent.prototype.modalClosed = function () {
+            this.isEditModalOpen = false;
+            this.isEditing.emit(false);
         };
         MessageActionsBoxComponent.prototype.deleteClicked = function () {
-            alert('Feature not yet implemented');
+            return __awaiter(this, void 0, void 0, function () {
+                var error_1;
+                return __generator(this, function (_b) {
+                    switch (_b.label) {
+                        case 0:
+                            _b.trys.push([0, 2, , 3]);
+                            return [4 /*yield*/, this.channelService.deleteMessage(this.message)];
+                        case 1:
+                            _b.sent();
+                            return [3 /*break*/, 3];
+                        case 2:
+                            error_1 = _b.sent();
+                            this.notificationService.addTemporaryNotification('streamChat.Error deleting message');
+                            return [3 /*break*/, 3];
+                        case 3: return [2 /*return*/];
+                    }
+                });
+            });
         };
         return MessageActionsBoxComponent;
     }());
-    MessageActionsBoxComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: MessageActionsBoxComponent, deps: [{ token: ChatClientService }, { token: NotificationService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    MessageActionsBoxComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: MessageActionsBoxComponent, selector: "stream-message-actions-box", inputs: { isOpen: "isOpen", isMine: "isMine", message: "message", enabledActions: "enabledActions" }, outputs: { displayedActionsCount: "displayedActionsCount" }, usesOnChanges: true, ngImport: i0__namespace, template: "<div\n  data-testid=\"action-box\"\n  class=\"str-chat__message-actions-box\"\n  [class.str-chat__message-actions-box--open]=\"isOpen\"\n  [class.str-chat__message-actions-box--mine]=\"isMine\"\n>\n  <ul class=\"str-chat__message-actions-list\">\n    <button\n      data-testid=\"quote-action\"\n      *ngIf=\"isQuoteVisible\"\n      (click)=\"quoteClicked()\"\n    >\n      <li class=\"str-chat__message-actions-list-item\">\n        {{ \"streamChat.Reply\" | translate }}\n      </li>\n    </button>\n    <button\n      data-testid=\"pin-action\"\n      *ngIf=\"isPinVisible\"\n      (click)=\"pinClicked()\"\n    >\n      <li class=\"str-chat__message-actions-list-item\">\n        {{\n          (message?.pinned ? \"streamChat.Unpin\" : \"streamChat.Pin\") | translate\n        }}\n      </li>\n    </button>\n    <button\n      data-testid=\"flag-action\"\n      *ngIf=\"isFlagVisible\"\n      (click)=\"flagClicked()\"\n    >\n      <li class=\"str-chat__message-actions-list-item\">\n        {{ \"streamChat.Flag\" | translate }}\n      </li>\n    </button>\n    <button\n      data-testid=\"mute-action\"\n      *ngIf=\"isMuteVisible\"\n      (click)=\"muteClicked()\"\n    >\n      <li class=\"str-chat__message-actions-list-item\">\n        {{ \"streamChat.Mute\" | translate }}\n      </li>\n    </button>\n    <button\n      data-testid=\"edit-action\"\n      *ngIf=\"isEditVisible\"\n      (click)=\"editClicked()\"\n    >\n      <li class=\"str-chat__message-actions-list-item\">\n        {{ \"streamChat.Edit Message\" | translate }}\n      </li>\n    </button>\n    <button\n      data-testid=\"delete-action\"\n      *ngIf=\"isDeleteVisible\"\n      (click)=\"deleteClicked()\"\n    >\n      <li class=\"str-chat__message-actions-list-item\">\n        {{ \"streamChat.Delete\" | translate }}\n      </li>\n    </button>\n  </ul>\n</div>\n", directives: [{ type: i5__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "translate": i4__namespace.TranslatePipe } });
+    MessageActionsBoxComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: MessageActionsBoxComponent, deps: [{ token: ChatClientService }, { token: NotificationService }, { token: ChannelService }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    MessageActionsBoxComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: MessageActionsBoxComponent, selector: "stream-message-actions-box", inputs: { isOpen: "isOpen", isMine: "isMine", message: "message", enabledActions: "enabledActions" }, outputs: { displayedActionsCount: "displayedActionsCount", isEditing: "isEditing" }, viewQueries: [{ propertyName: "messageInput", first: true, predicate: MessageInputComponent, descendants: true }], usesOnChanges: true, ngImport: i0__namespace, template: "<div\n  data-testid=\"action-box\"\n  class=\"str-chat__message-actions-box\"\n  [class.str-chat__message-actions-box--open]=\"isOpen\"\n  [class.str-chat__message-actions-box--mine]=\"isMine\"\n>\n  <ul class=\"str-chat__message-actions-list\">\n    <button\n      data-testid=\"quote-action\"\n      *ngIf=\"isQuoteVisible\"\n      (click)=\"quoteClicked()\"\n    >\n      <li class=\"str-chat__message-actions-list-item\">\n        {{ \"streamChat.Reply\" | translate }}\n      </li>\n    </button>\n    <button\n      data-testid=\"pin-action\"\n      *ngIf=\"isPinVisible\"\n      (click)=\"pinClicked()\"\n    >\n      <li class=\"str-chat__message-actions-list-item\">\n        {{\n          (message?.pinned ? \"streamChat.Unpin\" : \"streamChat.Pin\") | translate\n        }}\n      </li>\n    </button>\n    <button\n      data-testid=\"flag-action\"\n      *ngIf=\"isFlagVisible\"\n      (click)=\"flagClicked()\"\n    >\n      <li class=\"str-chat__message-actions-list-item\">\n        {{ \"streamChat.Flag\" | translate }}\n      </li>\n    </button>\n    <button\n      data-testid=\"mute-action\"\n      *ngIf=\"isMuteVisible\"\n      (click)=\"muteClicked()\"\n    >\n      <li class=\"str-chat__message-actions-list-item\">\n        {{ \"streamChat.Mute\" | translate }}\n      </li>\n    </button>\n    <button\n      data-testid=\"edit-action\"\n      *ngIf=\"isEditVisible\"\n      (click)=\"editClicked()\"\n    >\n      <li class=\"str-chat__message-actions-list-item\">\n        {{ \"streamChat.Edit Message\" | translate }}\n      </li>\n    </button>\n    <button\n      data-testid=\"delete-action\"\n      *ngIf=\"isDeleteVisible\"\n      (click)=\"deleteClicked()\"\n    >\n      <li class=\"str-chat__message-actions-list-item\">\n        {{ \"streamChat.Delete\" | translate }}\n      </li>\n    </button>\n  </ul>\n</div>\n\n<stream-modal\n  [isOpen]=\"isEditModalOpen\"\n  (isOpenChange)=\"\n    isEditModalOpen = $event; isEditModalOpen ? '' : modalClosed()\n  \"\n>\n  <div class=\"str-chat__edit-message-form\" *ngIf=\"isEditModalOpen\">\n    <stream-message-input\n      [message]=\"message\"\n      (messageUpdate)=\"modalClosed()\"\n    ></stream-message-input>\n    <stream-notification-list></stream-notification-list>\n    <div class=\"str-chat__message-team-form-footer\">\n      <div></div>\n      <div>\n        <button translate data-testid=\"cancel-button\" (click)=\"modalClosed()\">\n          streamChat.Cancel\n        </button>\n        <button\n          type=\"submit\"\n          translate\n          data-testid=\"send-button\"\n          (click)=\"sendClicked()\"\n          (keyup.enter)=\"sendClicked()\"\n        >\n          streamChat.Send\n        </button>\n      </div>\n    </div>\n  </div>\n</stream-modal>\n", components: [{ type: ModalComponent, selector: "stream-modal", inputs: ["isOpen"], outputs: ["isOpenChange"] }, { type: MessageInputComponent, selector: "stream-message-input", inputs: ["isFileUploadEnabled", "areMentionsEnabled", "mentionScope", "mentionAutocompleteItemTemplate", "acceptedFileTypes", "isMultipleFileUploadEnabled", "message"], outputs: ["messageUpdate"] }, { type: NotificationListComponent, selector: "stream-notification-list" }], directives: [{ type: i5__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }], pipes: { "translate": i1__namespace.TranslatePipe } });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: MessageActionsBoxComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -1502,7 +2285,7 @@
                         templateUrl: './message-actions-box.component.html',
                         styles: [],
                     }]
-            }], ctorParameters: function () { return [{ type: ChatClientService }, { type: NotificationService }]; }, propDecorators: { isOpen: [{
+            }], ctorParameters: function () { return [{ type: ChatClientService }, { type: NotificationService }, { type: ChannelService }]; }, propDecorators: { isOpen: [{
                     type: i0.Input
                 }], isMine: [{
                     type: i0.Input
@@ -1512,6 +2295,11 @@
                     type: i0.Input
                 }], displayedActionsCount: [{
                     type: i0.Output
+                }], isEditing: [{
+                    type: i0.Output
+                }], messageInput: [{
+                    type: i0.ViewChild,
+                    args: [MessageInputComponent]
                 }] } });
 
     var ChannelComponent = /** @class */ (function () {
@@ -1628,7 +2416,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 class=\"str-chat__header-livestream-left--title\">\n      {{ activeChannel?.data?.name }}\n    </p>\n    <p class=\"str-chat__header-livestream-left--members\">\n      {{'streamChat.{{ memberCount }} members' | translate:memberCountParam}}\n      {{'streamChat.{{ watcherCount }} online' | translate:watcherCountParam}}\n    </p>\n  </div>\n</div>\n", components: [{ type: AvatarComponent, selector: "stream-avatar", inputs: ["name", "imageUrl", "size"] }], pipes: { "translate": i4__namespace.TranslatePipe } });
+    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 class=\"str-chat__header-livestream-left--title\">\n      {{ activeChannel?.data?.name }}\n    </p>\n    <p class=\"str-chat__header-livestream-left--members\">\n      {{'streamChat.{{ memberCount }} members' | translate:memberCountParam}}\n      {{'streamChat.{{ watcherCount }} online' | translate:watcherCountParam}}\n    </p>\n  </div>\n</div>\n", components: [{ type: AvatarComponent, selector: "stream-avatar", inputs: ["name", "imageUrl", "size"] }], pipes: { "translate": i1__namespace.TranslatePipe } });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: ChannelHeaderComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -1718,7 +2506,7 @@
         return ChannelPreviewComponent;
     }());
     ChannelPreviewComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: ChannelPreviewComponent, deps: [{ token: ChannelService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    ChannelPreviewComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: ChannelPreviewComponent, selector: "stream-channel-preview", inputs: { channel: "channel" }, ngImport: i0__namespace, template: "<button\n  class=\"str-chat__channel-preview-messenger\"\n  [class.str-chat__channel-preview-messenger--active]=\"isActive\"\n  [class.str-chat__channel-preview-messenger--unread]=\"isUnread\"\n  (click)=\"setAsActiveChannel()\"\n  data-testid=\"channel-preview-container\"\n>\n  <div class=\"str-chat__channel-preview-messenger--left\">\n    <stream-avatar\n      imageUrl=\"{{ avatarImage }}\"\n      name=\"{{ avatarName }}\"\n      [size]=\"40\"\n    ></stream-avatar>\n  </div>\n  <div class=\"str-chat__channel-preview-messenger--right\">\n    <div class=\"str-chat__channel-preview-messenger--name\">\n      <span data-testid=\"channel-preview-title\">{{ title }}</span>\n    </div>\n    <div\n      data-testid=\"latest-message\"\n      class=\"str-chat__channel-preview-messenger--last-message\"\n    >\n      {{ latestMessage | translate }}\n    </div>\n  </div>\n</button>\n", components: [{ type: AvatarComponent, selector: "stream-avatar", inputs: ["name", "imageUrl", "size"] }], pipes: { "translate": i4__namespace.TranslatePipe } });
+    ChannelPreviewComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: ChannelPreviewComponent, selector: "stream-channel-preview", inputs: { channel: "channel" }, ngImport: i0__namespace, template: "<button\n  class=\"str-chat__channel-preview-messenger\"\n  [class.str-chat__channel-preview-messenger--active]=\"isActive\"\n  [class.str-chat__channel-preview-messenger--unread]=\"isUnread\"\n  (click)=\"setAsActiveChannel()\"\n  data-testid=\"channel-preview-container\"\n>\n  <div class=\"str-chat__channel-preview-messenger--left\">\n    <stream-avatar\n      imageUrl=\"{{ avatarImage }}\"\n      name=\"{{ avatarName }}\"\n      [size]=\"40\"\n    ></stream-avatar>\n  </div>\n  <div class=\"str-chat__channel-preview-messenger--right\">\n    <div class=\"str-chat__channel-preview-messenger--name\">\n      <span data-testid=\"channel-preview-title\">{{ title }}</span>\n    </div>\n    <div\n      data-testid=\"latest-message\"\n      class=\"str-chat__channel-preview-messenger--last-message\"\n    >\n      {{ latestMessage | translate }}\n    </div>\n  </div>\n</button>\n", components: [{ type: AvatarComponent, selector: "stream-avatar", inputs: ["name", "imageUrl", "size"] }], pipes: { "translate": i1__namespace.TranslatePipe } });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: ChannelPreviewComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -1768,7 +2556,7 @@
         return ChannelListComponent;
     }());
     ChannelListComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: ChannelListComponent, deps: [{ token: ChannelService }, { token: ChannelListToggleService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    ChannelListComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: ChannelListComponent, selector: "stream-channel-list", inputs: { customChannelPreviewTemplate: "customChannelPreviewTemplate" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], ngImport: i0__namespace, template: "<div\n  #container\n  data-testid=\"channel-list-container\"\n  class=\"str-chat str-chat-channel-list messaging\"\n  [class.str-chat-channel-list--open]=\"(isOpen$ | async) === true\"\n>\n  <div\n    *ngIf=\"\n      (isError$ | async) === false && (isInitializing$ | async) === false;\n      else statusIndicator\n    \"\n    class=\"str-chat__channel-list-messenger\"\n  >\n    <div class=\"str-chat__channel-list-messenger__main\">\n      <p\n        data-testid=\"empty-channel-list-indicator\"\n        *ngIf=\"!(channels$ | async)?.length\"\n      >\n        {{ \"streamChat.You have no channels currently\" | translate }}\n      </p>\n      <ng-container\n        *ngFor=\"let channel of channels$ | async; trackBy: trackByChannelId\"\n      >\n        <ng-container\n          *ngIf=\"customChannelPreviewTemplate; else defaultTemplate\"\n        >\n          <div (click)=\"channelSelected()\" (keyup.enter)=\"channelSelected()\">\n            <ng-container\n              *ngTemplateOutlet=\"\n                customChannelPreviewTemplate;\n                context: { channel: channel }\n              \"\n            ></ng-container>\n          </div>\n        </ng-container>\n        <ng-template #defaultTemplate>\n          <stream-channel-preview\n            data-testclass=\"channel-preview\"\n            [channel]=\"channel\"\n            (click)=\"channelSelected()\"\n            (keyup.enter)=\"channelSelected()\"\n          ></stream-channel-preview>\n        </ng-template>\n      </ng-container>\n      <div\n        *ngIf=\"hasMoreChannels$ | async\"\n        class=\"str-chat__load-more-button\"\n        (click)=\"loadMoreChannels()\"\n        (keyup.enter)=\"loadMoreChannels()\"\n        data-testid=\"load-more\"\n      >\n        <button\n          class=\"str-chat__load-more-button__button\"\n          data-testid=\"load-more-button\"\n          [disabled]=\"isLoadingMoreChannels\"\n        >\n          <span *ngIf=\"!isLoadingMoreChannels; else loadingIndicator\">{{\n            \"Load more\" | translate\n          }}</span>\n          <ng-template #loadingIndicator\n            ><stream-loading-indicator></stream-loading-indicator\n          ></ng-template>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n\n<ng-template #statusIndicator>\n  <ng-container *ngIf=\"isError$ | async\">\n    <ng-container *ngTemplateOutlet=\"chatDown\"></ng-container>\n  </ng-container>\n  <ng-container *ngIf=\"isInitializing$ | async\">\n    <ng-container *ngTemplateOutlet=\"loadingChannels\"></ng-container>\n  </ng-container>\n</ng-template>\n\n<ng-template #chatDown>\n  <div data-testid=\"chatdown-container\" class=\"str-chat__down\">\n    <ng-container *ngTemplateOutlet=\"loadingChannels\"></ng-container>\n    <div class=\"str-chat__down-main\">\n      <stream-icon icon=\"connection-error\"></stream-icon>\n      <h1>{{ \"streamChat.Connection error\" | translate }}</h1>\n      <h3>\n        {{\n          \"streamChat.Error connecting to chat, refresh the page to try again.\"\n            | translate\n        }}\n      </h3>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #loadingChannels>\n  <div data-testid=\"loading-indicator\" class=\"str-chat__loading-channels\">\n    <ng-container *ngTemplateOutlet=\"loadingChannel\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"loadingChannel\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"loadingChannel\"></ng-container>\n  </div>\n</ng-template>\n\n<ng-template #loadingChannel>\n  <div class=\"str-chat__loading-channels-item\">\n    <div class=\"str-chat__loading-channels-avatar\"></div>\n    <div class=\"str-chat__loading-channels-meta\">\n      <div class=\"str-chat__loading-channels-username\"></div>\n      <div class=\"str-chat__loading-channels-status\"></div>\n    </div>\n  </div>\n</ng-template>\n", components: [{ type: ChannelPreviewComponent, selector: "stream-channel-preview", inputs: ["channel"] }, { type: LoadingIndicatorComponent, selector: "stream-loading-indicator", inputs: ["size", "color"] }, { type: IconComponent, selector: "stream-icon", inputs: ["icon", "size"] }], directives: [{ type: i5__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "async": i5__namespace.AsyncPipe, "translate": i4__namespace.TranslatePipe } });
+    ChannelListComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: ChannelListComponent, selector: "stream-channel-list", inputs: { customChannelPreviewTemplate: "customChannelPreviewTemplate" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], ngImport: i0__namespace, template: "<div\n  #container\n  data-testid=\"channel-list-container\"\n  class=\"str-chat str-chat-channel-list messaging\"\n  [class.str-chat-channel-list--open]=\"(isOpen$ | async) === true\"\n>\n  <div\n    *ngIf=\"\n      (isError$ | async) === false && (isInitializing$ | async) === false;\n      else statusIndicator\n    \"\n    class=\"str-chat__channel-list-messenger\"\n  >\n    <div class=\"str-chat__channel-list-messenger__main\">\n      <p\n        data-testid=\"empty-channel-list-indicator\"\n        *ngIf=\"!(channels$ | async)?.length\"\n      >\n        {{ \"streamChat.You have no channels currently\" | translate }}\n      </p>\n      <ng-container\n        *ngFor=\"let channel of channels$ | async; trackBy: trackByChannelId\"\n      >\n        <ng-container\n          *ngIf=\"customChannelPreviewTemplate; else defaultTemplate\"\n        >\n          <div (click)=\"channelSelected()\" (keyup.enter)=\"channelSelected()\">\n            <ng-container\n              *ngTemplateOutlet=\"\n                customChannelPreviewTemplate;\n                context: { channel: channel }\n              \"\n            ></ng-container>\n          </div>\n        </ng-container>\n        <ng-template #defaultTemplate>\n          <stream-channel-preview\n            data-testclass=\"channel-preview\"\n            [channel]=\"channel\"\n            (click)=\"channelSelected()\"\n            (keyup.enter)=\"channelSelected()\"\n          ></stream-channel-preview>\n        </ng-template>\n      </ng-container>\n      <div\n        *ngIf=\"hasMoreChannels$ | async\"\n        class=\"str-chat__load-more-button\"\n        (click)=\"loadMoreChannels()\"\n        (keyup.enter)=\"loadMoreChannels()\"\n        data-testid=\"load-more\"\n      >\n        <button\n          class=\"str-chat__load-more-button__button\"\n          data-testid=\"load-more-button\"\n          [disabled]=\"isLoadingMoreChannels\"\n        >\n          <span *ngIf=\"!isLoadingMoreChannels; else loadingIndicator\">{{\n            \"Load more\" | translate\n          }}</span>\n          <ng-template #loadingIndicator\n            ><stream-loading-indicator></stream-loading-indicator\n          ></ng-template>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n\n<ng-template #statusIndicator>\n  <ng-container *ngIf=\"isError$ | async\">\n    <ng-container *ngTemplateOutlet=\"chatDown\"></ng-container>\n  </ng-container>\n  <ng-container *ngIf=\"isInitializing$ | async\">\n    <ng-container *ngTemplateOutlet=\"loadingChannels\"></ng-container>\n  </ng-container>\n</ng-template>\n\n<ng-template #chatDown>\n  <div data-testid=\"chatdown-container\" class=\"str-chat__down\">\n    <ng-container *ngTemplateOutlet=\"loadingChannels\"></ng-container>\n    <div class=\"str-chat__down-main\">\n      <stream-icon icon=\"connection-error\"></stream-icon>\n      <h1>{{ \"streamChat.Connection error\" | translate }}</h1>\n      <h3>\n        {{\n          \"streamChat.Error connecting to chat, refresh the page to try again.\"\n            | translate\n        }}\n      </h3>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #loadingChannels>\n  <div data-testid=\"loading-indicator\" class=\"str-chat__loading-channels\">\n    <ng-container *ngTemplateOutlet=\"loadingChannel\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"loadingChannel\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"loadingChannel\"></ng-container>\n  </div>\n</ng-template>\n\n<ng-template #loadingChannel>\n  <div class=\"str-chat__loading-channels-item\">\n    <div class=\"str-chat__loading-channels-avatar\"></div>\n    <div class=\"str-chat__loading-channels-meta\">\n      <div class=\"str-chat__loading-channels-username\"></div>\n      <div class=\"str-chat__loading-channels-status\"></div>\n    </div>\n  </div>\n</ng-template>\n", components: [{ type: ChannelPreviewComponent, selector: "stream-channel-preview", inputs: ["channel"] }, { type: LoadingIndicatorComponent, selector: "stream-loading-indicator", inputs: ["size", "color"] }, { type: IconComponent, selector: "stream-icon", inputs: ["icon", "size"] }], directives: [{ type: i5__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "async": i5__namespace.AsyncPipe, "translate": i1__namespace.TranslatePipe } });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: ChannelListComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -1992,9 +2780,7 @@
             return index;
         };
         AttachmentListComponent.prototype.isImage = function (attachment) {
-            return (attachment.type === 'image' &&
-                !attachment.title_link &&
-                !attachment.og_scrape_url);
+            return isImageAttachment(attachment);
         };
         AttachmentListComponent.prototype.isFile = function (attachment) {
             return attachment.type === 'file';
@@ -2036,6 +2822,30 @@
                     type: i0.Input
                 }] } });
 
+    var HighlightMentionsPipe = /** @class */ (function () {
+        function HighlightMentionsPipe() {
+        }
+        HighlightMentionsPipe.prototype.transform = function (value, mentionedUsers) {
+            if (!value || !mentionedUsers) {
+                return value || '';
+            }
+            var result = value;
+            mentionedUsers.forEach(function (u) {
+                result = result.replace(new RegExp("@" + (u.name || u.id), 'g'), "<b>@" + (u.name || u.id) + "</b>");
+            });
+            return result;
+        };
+        return HighlightMentionsPipe;
+    }());
+    HighlightMentionsPipe.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: HighlightMentionsPipe, deps: [], target: i0__namespace.ɵɵFactoryTarget.Pipe });
+    HighlightMentionsPipe.ɵpipe = i0__namespace.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: HighlightMentionsPipe, name: "highlightMentions" });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: HighlightMentionsPipe, decorators: [{
+                type: i0.Pipe,
+                args: [{
+                        name: 'highlightMentions',
+                    }]
+            }] });
+
     var MessageComponent = /** @class */ (function () {
         function MessageComponent(chatClientService, channelService) {
             this.chatClientService = chatClientService;
@@ -2163,7 +2973,7 @@
         return MessageComponent;
     }());
     MessageComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: MessageComponent, deps: [{ token: ChatClientService }, { token: ChannelService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    MessageComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: MessageComponent, selector: "stream-message", inputs: { message: "message", enabledMessageActions: "enabledMessageActions", areReactionsEnabled: "areReactionsEnabled", canReactToMessage: "canReactToMessage", isLastSentMessage: "isLastSentMessage" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], ngImport: i0__namespace, template: "<div\n  #container\n  class=\"str-chat__message-simple str-chat__message str-chat__message--{{\n    message?.type\n  }} str-chat__message--{{ message?.status }} {{\n    message?.text ? 'str-chat__message--has-text' : 'has-no-text'\n  }}\"\n  [class.str-chat__message--me]=\"isSentByCurrentUser\"\n  [class.str-chat__message-simple--me]=\"isSentByCurrentUser\"\n  [class.mobile-press]=\"isPressedOnMobile\"\n  [class.str-chat__message--has-attachment]=\"hasAttachment\"\n  [class.str-chat__message--with-reactions]=\"\n    areReactionsEnabled && hasReactions\n  \"\n  data-testid=\"message-container\"\n>\n  <ng-container *ngIf=\"!message?.deleted_at; else deletedMessage\">\n    <ng-container *ngIf=\"message?.type !== 'system'; else systemMessage\">\n      <ng-container\n        *ngIf=\"\n          isSentByCurrentUser &&\n          ((isLastSentMessage && message?.status === 'received') ||\n            message?.status === 'sending')\n        \"\n      >\n        <ng-container *ngIf=\"message?.status === 'sending'; else sentStatus\">\n          <ng-container *ngTemplateOutlet=\"sendingStatus\"></ng-container>\n        </ng-container>\n        <ng-template #sentStatus>\n          <ng-container *ngIf=\"isMessageDeliveredAndRead; else deliveredStatus\">\n            <ng-container *ngTemplateOutlet=\"readStatus\"></ng-container>\n          </ng-container>\n        </ng-template>\n      </ng-container>\n      <stream-avatar\n        data-testid=\"avatar\"\n        class=\"str-chat-angular__avatar-host\"\n        [imageUrl]=\"message?.user?.image\"\n        [name]=\"message?.user?.name || message?.user?.id\"\n      ></stream-avatar>\n      <div class=\"str-chat__message-inner\">\n        <div\n          class=\"str-chat__message-simple__actions\"\n          data-testid=\"message-options\"\n          *ngIf=\"areOptionsVisible\"\n        >\n          <div\n            class=\"\n              str-chat__message-simple__actions__action\n              str-chat__message-simple__actions__action--options\n            \"\n          >\n            <stream-message-actions-box\n              [isOpen]=\"isActionBoxOpen\"\n              [isMine]=\"isSentByCurrentUser\"\n              [enabledActions]=\"enabledMessageActions\"\n              [message]=\"message\"\n              (displayedActionsCount)=\"visibleMessageActionsCount = $event\"\n            ></stream-message-actions-box>\n            <stream-icon\n              *ngIf=\"visibleMessageActionsCount > 0\"\n              data-testid=\"action-icon\"\n              icon=\"action-icon\"\n              (keyup.enter)=\"isActionBoxOpen = !isActionBoxOpen\"\n              (click)=\"isActionBoxOpen = !isActionBoxOpen\"\n            ></stream-icon>\n          </div>\n          <div\n            *ngIf=\"areReactionsEnabled && canReactToMessage\"\n            class=\"\n              str-chat__message-simple__actions__action\n              str-chat__message-simple__actions__action--reactions\n            \"\n            data-testid=\"reaction-icon\"\n            (click)=\"isReactionSelectorOpen = !isReactionSelectorOpen\"\n            (keyup.enter)=\"isReactionSelectorOpen = !isReactionSelectorOpen\"\n          >\n            <stream-icon icon=\"reaction-icon\"></stream-icon>\n          </div>\n        </div>\n        <stream-message-reactions\n          *ngIf=\"areReactionsEnabled\"\n          [messageReactionCounts]=\"message?.reaction_counts || {}\"\n          [latestReactions]=\"message?.latest_reactions || []\"\n          [(isSelectorOpen)]=\"isReactionSelectorOpen\"\n          [messageId]=\"message?.id\"\n          [ownReactions]=\"message?.own_reactions || []\"\n        ></stream-message-reactions>\n        <stream-attachment-list\n          *ngIf=\"hasAttachment\"\n          [attachments]=\"message!.attachments!\"\n        ></stream-attachment-list>\n        <div class=\"str-chat__message-text\" *ngIf=\"message?.text\">\n          <div\n            data-testid=\"inner-message\"\n            class=\"\n              str-chat__message-text-inner str-chat__message-simple-text-inner\n            \"\n            [class.str-chat__message-light-text-inner--has-attachment]=\"\n              hasAttachment\n            \"\n            (click)=\"\n              message?.status === 'failed' && message?.errorStatusCode !== 403\n                ? resendMessage()\n                : undefined\n            \"\n            (keyup.enter)=\"\n              message?.status === 'failed' && message?.errorStatusCode !== 403\n                ? resendMessage()\n                : undefined\n            \"\n          >\n            <div\n              data-testid=\"client-error-message\"\n              *ngIf=\"message?.type === 'error'\"\n              class=\"str-chat__simple-message--error-message\"\n            >\n              {{ \"streamChat.Error \u00B7 Unsent\" | translate }}\n            </div>\n            <div\n              data-testid=\"error-message\"\n              *ngIf=\"message?.status === 'failed'\"\n              class=\"str-chat__simple-message--error-message\"\n            >\n              {{\n                (message?.errorStatusCode === 403\n                  ? \"streamChat.Message Failed \u00B7 Unauthorized\"\n                  : \"streamChat.Message Failed \u00B7 Click to try again\"\n                ) | translate\n              }}\n            </div>\n            <div\n              (click)=\"textClicked()\"\n              (keyup.enter)=\"textClicked()\"\n              data-testid=\"text\"\n              [innerHTML]=\"message?.html || message?.text\"\n            ></div>\n          </div>\n        </div>\n        <div class=\"str-chat__message-data str-chat__message-simple-data\">\n          <span\n            data-testid=\"sender\"\n            *ngIf=\"!isSentByCurrentUser\"\n            class=\"str-chat__message-simple-name\"\n          >\n            {{ message?.user?.name ? message?.user?.name : message?.user?.id }}\n          </span>\n          <span data-testid=\"date\" class=\"str-chat__message-simple-timestamp\">\n            {{ parsedDate }}\n          </span>\n        </div>\n      </div>\n    </ng-container>\n  </ng-container>\n</div>\n\n<ng-template #sendingStatus>\n  <span class=\"str-chat__message-simple-status\" data-testid=\"sending-indicator\">\n    <div class=\"str-chat__tooltip\">\n      {{ \"streamChat.Sending...\" | translate }}\n    </div>\n    <stream-loading-indicator\n      data-testid=\"loading-indicator\"\n    ></stream-loading-indicator>\n  </span>\n</ng-template>\n<ng-template #readStatus>\n  <span class=\"str-chat__message-simple-status\" data-testid=\"read-indicator\">\n    <div class=\"str-chat__tooltip\" data-testid=\"read-by-tooltip\">\n      {{ readByText }}\n    </div>\n    <stream-avatar\n      class=\"str-chat-angular__avatar-host\"\n      data-test-id=\"last-read-user-avatar\"\n      [size]=\"15\"\n      [imageUrl]=\"lastReadUser?.image\"\n      [name]=\"lastReadUser?.name || lastReadUser?.id\"\n    ></stream-avatar>\n    <span\n      data-test-id=\"read-by-length\"\n      *ngIf=\"isReadByMultipleUsers\"\n      class=\"str-chat__message-simple-status-number\"\n    >\n      {{ (message?.readBy)!.length }}\n    </span>\n  </span>\n</ng-template>\n<ng-template #deliveredStatus>\n  <span\n    class=\"str-chat__message-simple-status\"\n    data-testid=\"delivered-indicator\"\n  >\n    <div class=\"str-chat__tooltip\">\n      {{ \"streamChat.Delivered\" | translate }}\n    </div>\n    <stream-icon\n      data-testid=\"delivered-icon\"\n      icon=\"delivered-icon\"\n    ></stream-icon>\n  </span>\n</ng-template>\n\n<ng-template #deletedMessage>\n  <div data-testid=\"message-deleted-component\">\n    <div class=\"str-chat__message--deleted-inner\" translate>\n      streamChat.This message was deleted...\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #systemMessage>\n  <div data-testid=\"system-message\" class=\"str-chat__message--system\">\n    <div class=\"str-chat__message--system__text\">\n      <div class=\"str-chat__message--system__line\"></div>\n      <p>{{ message?.text }}</p>\n      <div class=\"str-chat__message--system__line\"></div>\n    </div>\n    <div class=\"str-chat__message--system__date\">\n      {{ parsedDate }}\n    </div>\n  </div>\n</ng-template>\n", components: [{ type: AvatarComponent, selector: "stream-avatar", inputs: ["name", "imageUrl", "size"] }, { type: MessageActionsBoxComponent, selector: "stream-message-actions-box", inputs: ["isOpen", "isMine", "message", "enabledActions"], outputs: ["displayedActionsCount"] }, { type: IconComponent, selector: "stream-icon", inputs: ["icon", "size"] }, { type: MessageReactionsComponent, selector: "stream-message-reactions", inputs: ["messageId", "messageReactionCounts", "isSelectorOpen", "latestReactions", "ownReactions"], outputs: ["isSelectorOpenChange"] }, { type: AttachmentListComponent, selector: "stream-attachment-list", inputs: ["attachments"] }, { type: LoadingIndicatorComponent, selector: "stream-loading-indicator", inputs: ["size", "color"] }], directives: [{ type: i5__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i4__namespace.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }], pipes: { "translate": i4__namespace.TranslatePipe } });
+    MessageComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: MessageComponent, selector: "stream-message", inputs: { message: "message", enabledMessageActions: "enabledMessageActions", areReactionsEnabled: "areReactionsEnabled", canReactToMessage: "canReactToMessage", isLastSentMessage: "isLastSentMessage" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], ngImport: i0__namespace, template: "<div\n  #container\n  class=\"str-chat__message-simple str-chat__message str-chat__message--{{\n    message?.type\n  }} str-chat__message--{{ message?.status }} {{\n    message?.text ? 'str-chat__message--has-text' : 'has-no-text'\n  }}\"\n  [class.str-chat__message--me]=\"isSentByCurrentUser\"\n  [class.str-chat__message-simple--me]=\"isSentByCurrentUser\"\n  [class.mobile-press]=\"isPressedOnMobile\"\n  [class.str-chat__message--has-attachment]=\"hasAttachment\"\n  [class.str-chat__message--with-reactions]=\"\n    areReactionsEnabled && hasReactions\n  \"\n  data-testid=\"message-container\"\n>\n  <ng-container *ngIf=\"!message?.deleted_at; else deletedMessage\">\n    <ng-container *ngIf=\"message?.type !== 'system'; else systemMessage\">\n      <ng-container\n        *ngIf=\"\n          isSentByCurrentUser &&\n          ((isLastSentMessage && message?.status === 'received') ||\n            message?.status === 'sending')\n        \"\n      >\n        <ng-container *ngIf=\"message?.status === 'sending'; else sentStatus\">\n          <ng-container *ngTemplateOutlet=\"sendingStatus\"></ng-container>\n        </ng-container>\n        <ng-template #sentStatus>\n          <ng-container *ngIf=\"isMessageDeliveredAndRead; else deliveredStatus\">\n            <ng-container *ngTemplateOutlet=\"readStatus\"></ng-container>\n          </ng-container>\n        </ng-template>\n      </ng-container>\n      <stream-avatar\n        data-testid=\"avatar\"\n        class=\"str-chat-angular__avatar-host\"\n        [imageUrl]=\"message?.user?.image\"\n        [name]=\"message?.user?.name || message?.user?.id\"\n      ></stream-avatar>\n      <div class=\"str-chat__message-inner\">\n        <div\n          class=\"str-chat__message-simple__actions\"\n          data-testid=\"message-options\"\n          *ngIf=\"areOptionsVisible\"\n        >\n          <div\n            data-testid=\"message-actions-container\"\n            class=\"\n              str-chat__message-simple__actions__action\n              str-chat__message-simple__actions__action--options\n            \"\n            [class.str-chat-angular__message-simple__actions__action--options--editing]=\"\n              isEditing\n            \"\n          >\n            <stream-message-actions-box\n              [isOpen]=\"isActionBoxOpen\"\n              [isMine]=\"isSentByCurrentUser\"\n              [enabledActions]=\"enabledMessageActions\"\n              [message]=\"message\"\n              (displayedActionsCount)=\"visibleMessageActionsCount = $event\"\n              (isEditing)=\"isEditing = $event; isActionBoxOpen = !isEditing\"\n            ></stream-message-actions-box>\n            <stream-icon\n              *ngIf=\"visibleMessageActionsCount > 0\"\n              data-testid=\"action-icon\"\n              icon=\"action-icon\"\n              (keyup.enter)=\"isActionBoxOpen = !isActionBoxOpen\"\n              (click)=\"isActionBoxOpen = !isActionBoxOpen\"\n            ></stream-icon>\n          </div>\n          <div\n            *ngIf=\"areReactionsEnabled && canReactToMessage\"\n            class=\"\n              str-chat__message-simple__actions__action\n              str-chat__message-simple__actions__action--reactions\n            \"\n            data-testid=\"reaction-icon\"\n            (click)=\"isReactionSelectorOpen = !isReactionSelectorOpen\"\n            (keyup.enter)=\"isReactionSelectorOpen = !isReactionSelectorOpen\"\n          >\n            <stream-icon icon=\"reaction-icon\"></stream-icon>\n          </div>\n        </div>\n        <stream-message-reactions\n          *ngIf=\"areReactionsEnabled\"\n          [messageReactionCounts]=\"message?.reaction_counts || {}\"\n          [latestReactions]=\"message?.latest_reactions || []\"\n          [(isSelectorOpen)]=\"isReactionSelectorOpen\"\n          [messageId]=\"message?.id\"\n          [ownReactions]=\"message?.own_reactions || []\"\n        ></stream-message-reactions>\n        <stream-attachment-list\n          *ngIf=\"hasAttachment\"\n          [attachments]=\"message!.attachments!\"\n        ></stream-attachment-list>\n        <div class=\"str-chat__message-text\" *ngIf=\"message?.text\">\n          <div\n            data-testid=\"inner-message\"\n            class=\"\n              str-chat__message-text-inner str-chat__message-simple-text-inner\n            \"\n            [class.str-chat__message-light-text-inner--has-attachment]=\"\n              hasAttachment\n            \"\n            (click)=\"\n              message?.status === 'failed' && message?.errorStatusCode !== 403\n                ? resendMessage()\n                : undefined\n            \"\n            (keyup.enter)=\"\n              message?.status === 'failed' && message?.errorStatusCode !== 403\n                ? resendMessage()\n                : undefined\n            \"\n          >\n            <div\n              data-testid=\"client-error-message\"\n              *ngIf=\"message?.type === 'error'\"\n              class=\"str-chat__simple-message--error-message\"\n            >\n              {{ \"streamChat.Error \u00B7 Unsent\" | translate }}\n            </div>\n            <div\n              data-testid=\"error-message\"\n              *ngIf=\"message?.status === 'failed'\"\n              class=\"str-chat__simple-message--error-message\"\n            >\n              {{\n                (message?.errorStatusCode === 403\n                  ? \"streamChat.Message Failed \u00B7 Unauthorized\"\n                  : \"streamChat.Message Failed \u00B7 Click to try again\"\n                ) | translate\n              }}\n            </div>\n            <div\n              (click)=\"textClicked()\"\n              (keyup.enter)=\"textClicked()\"\n              data-testid=\"text\"\n              [innerHTML]=\"\n                message?.html || message?.text\n                  | highlightMentions: message?.mentioned_users\n              \"\n            ></div>\n          </div>\n        </div>\n        <div class=\"str-chat__message-data str-chat__message-simple-data\">\n          <span\n            data-testid=\"sender\"\n            *ngIf=\"!isSentByCurrentUser\"\n            class=\"str-chat__message-simple-name\"\n          >\n            {{ message?.user?.name ? message?.user?.name : message?.user?.id }}\n          </span>\n          <span data-testid=\"date\" class=\"str-chat__message-simple-timestamp\">\n            {{ parsedDate }}\n          </span>\n        </div>\n      </div>\n    </ng-container>\n  </ng-container>\n</div>\n\n<ng-template #sendingStatus>\n  <span class=\"str-chat__message-simple-status\" data-testid=\"sending-indicator\">\n    <div class=\"str-chat__tooltip\">\n      {{ \"streamChat.Sending...\" | translate }}\n    </div>\n    <stream-loading-indicator\n      data-testid=\"loading-indicator\"\n    ></stream-loading-indicator>\n  </span>\n</ng-template>\n<ng-template #readStatus>\n  <span class=\"str-chat__message-simple-status\" data-testid=\"read-indicator\">\n    <div class=\"str-chat__tooltip\" data-testid=\"read-by-tooltip\">\n      {{ readByText }}\n    </div>\n    <stream-avatar\n      class=\"str-chat-angular__avatar-host\"\n      data-test-id=\"last-read-user-avatar\"\n      [size]=\"15\"\n      [imageUrl]=\"lastReadUser?.image\"\n      [name]=\"lastReadUser?.name || lastReadUser?.id\"\n    ></stream-avatar>\n    <span\n      data-test-id=\"read-by-length\"\n      *ngIf=\"isReadByMultipleUsers\"\n      class=\"str-chat__message-simple-status-number\"\n    >\n      {{ (message?.readBy)!.length }}\n    </span>\n  </span>\n</ng-template>\n<ng-template #deliveredStatus>\n  <span\n    class=\"str-chat__message-simple-status\"\n    data-testid=\"delivered-indicator\"\n  >\n    <div class=\"str-chat__tooltip\">\n      {{ \"streamChat.Delivered\" | translate }}\n    </div>\n    <stream-icon\n      data-testid=\"delivered-icon\"\n      icon=\"delivered-icon\"\n    ></stream-icon>\n  </span>\n</ng-template>\n\n<ng-template #deletedMessage>\n  <div data-testid=\"message-deleted-component\">\n    <div class=\"str-chat__message--deleted-inner\" translate>\n      streamChat.This message was deleted...\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #systemMessage>\n  <div data-testid=\"system-message\" class=\"str-chat__message--system\">\n    <div class=\"str-chat__message--system__text\">\n      <div class=\"str-chat__message--system__line\"></div>\n      <p>{{ message?.text }}</p>\n      <div class=\"str-chat__message--system__line\"></div>\n    </div>\n    <div class=\"str-chat__message--system__date\">\n      {{ parsedDate }}\n    </div>\n  </div>\n</ng-template>\n", components: [{ type: AvatarComponent, selector: "stream-avatar", inputs: ["name", "imageUrl", "size"] }, { type: MessageActionsBoxComponent, selector: "stream-message-actions-box", inputs: ["isOpen", "isMine", "message", "enabledActions"], outputs: ["displayedActionsCount", "isEditing"] }, { type: IconComponent, selector: "stream-icon", inputs: ["icon", "size"] }, { type: MessageReactionsComponent, selector: "stream-message-reactions", inputs: ["messageId", "messageReactionCounts", "isSelectorOpen", "latestReactions", "ownReactions"], outputs: ["isSelectorOpenChange"] }, { type: AttachmentListComponent, selector: "stream-attachment-list", inputs: ["attachments"] }, { type: LoadingIndicatorComponent, selector: "stream-loading-indicator", inputs: ["size", "color"] }], directives: [{ type: i5__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1__namespace.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }], pipes: { "translate": i1__namespace.TranslatePipe, "highlightMentions": HighlightMentionsPipe } });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: MessageComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -2171,263 +2981,207 @@
                         templateUrl: './message.component.html',
                         styles: [],
                     }]
-            }], ctorParameters: function () { return [{ type: ChatClientService }, { type: ChannelService }]; }, propDecorators: { message: [{
-                    type: i0.Input
-                }], enabledMessageActions: [{
-                    type: i0.Input
-                }], areReactionsEnabled: [{
-                    type: i0.Input
-                }], canReactToMessage: [{
-                    type: i0.Input
-                }], isLastSentMessage: [{
+            }], ctorParameters: function () { return [{ type: ChatClientService }, { type: ChannelService }]; }, propDecorators: { message: [{
+                    type: i0.Input
+                }], enabledMessageActions: [{
+                    type: i0.Input
+                }], areReactionsEnabled: [{
+                    type: i0.Input
+                }], canReactToMessage: [{
+                    type: i0.Input
+                }], isLastSentMessage: [{
+                    type: i0.Input
+                }], container: [{
+                    type: i0.ViewChild,
+                    args: ['container']
+                }] } });
+
+    var TextareaComponent = /** @class */ (function () {
+        function TextareaComponent() {
+            this.class = 'str-chat__textarea';
+            this.value = '';
+            this.valueChange = new i0.EventEmitter();
+            this.send = new i0.EventEmitter();
+        }
+        // eslint-disable-next-line @angular-eslint/no-empty-lifecycle-method
+        TextareaComponent.prototype.ngOnChanges = function () { };
+        TextareaComponent.prototype.inputChanged = function () {
+            this.valueChange.emit(this.messageInput.nativeElement.value);
+        };
+        TextareaComponent.prototype.sent = function (event) {
+            event.preventDefault();
+            this.send.next();
+        };
+        return TextareaComponent;
+    }());
+    TextareaComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: TextareaComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    TextareaComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: TextareaComponent, selector: "stream-textarea", inputs: { value: "value" }, outputs: { valueChange: "valueChange", send: "send" }, host: { properties: { "class": "this.class" } }, viewQueries: [{ propertyName: "messageInput", first: true, predicate: ["input"], descendants: true }], usesOnChanges: true, ngImport: i0__namespace, template: "<textarea\n  [value]=\"value || ''\"\n  autofocus\n  data-testid=\"textarea\"\n  #input\n  placeholder=\"{{ 'streamChat.Type your message' | translate }}\"\n  class=\"rta__textarea str-chat__textarea__textarea\"\n  rows=\"1\"\n  (input)=\"inputChanged()\"\n  (keydown.enter)=\"sent($event)\"\n></textarea>\n", pipes: { "translate": i1__namespace.TranslatePipe } });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: TextareaComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'stream-textarea',
+                        templateUrl: './textarea.component.html',
+                        styles: [],
+                    }]
+            }], ctorParameters: function () { return []; }, propDecorators: { class: [{
+                    type: i0.HostBinding
+                }], value: [{
                     type: i0.Input
-                }], container: [{
+                }], valueChange: [{
+                    type: i0.Output
+                }], send: [{
+                    type: i0.Output
+                }], messageInput: [{
                     type: i0.ViewChild,
-                    args: ['container']
+                    args: ['input']
                 }] } });
 
-    var MessageInputComponent = /** @class */ (function () {
-        function MessageInputComponent(channelService, notificationService) {
+    var AutocompleteTextareaComponent = /** @class */ (function () {
+        function AutocompleteTextareaComponent(channelService, chatClientService) {
             var _this = this;
             this.channelService = channelService;
-            this.notificationService = notificationService;
-            this.isFileUploadEnabled = true;
-            this.isMultipleFileUploadEnabled = true;
-            this.attachmentUploads = [];
-            this.attachmentUploadInProgressCounter = 0;
+            this.chatClientService = chatClientService;
+            this.class = 'str-chat__textarea';
+            this.value = '';
+            this.areMentionsEnabled = true;
+            this.mentionScope = 'channel';
+            this.valueChange = new i0.EventEmitter();
+            this.send = new i0.EventEmitter();
+            this.userMentions = new i0.EventEmitter();
+            this.labelKey = 'autocompleteLabel';
+            this.triggerChar = '@';
+            this.autocompleteConfig = {
+                mentions: [],
+            };
             this.subscriptions = [];
-            this.subscriptions.push(this.channelService.activeChannel$.subscribe(function (channel) {
-                var _a;
-                if (_this.messageInput) {
-                    _this.messageInput.nativeElement.value = '';
-                }
-                _this.attachmentUploads = [];
-                var capabilities = (_a = channel === null || channel === void 0 ? void 0 : channel.data) === null || _a === void 0 ? void 0 : _a.own_capabilities;
-                if (capabilities) {
-                    _this.isFileUploadAuthorized =
-                        capabilities.indexOf('upload-file') !== -1;
-                }
+            this.mentionedUsers = [];
+            this.userMentionConfig = {
+                triggerChar: this.triggerChar,
+                dropUp: true,
+                labelKey: this.labelKey,
+                mentionFilter: this.filter,
+                mentionSelect: function (item, triggerChar) { return _this.mentioned(item, triggerChar); },
+            };
+            this.searchTerm$ = new rxjs.BehaviorSubject('');
+            this.searchTerm$
+                .pipe(operators.debounceTime(300), operators.distinctUntilChanged())
+                .subscribe(function (searchTerm) { return void _this.updateMentionOptions(searchTerm); });
+            this.subscriptions.push(this.channelService.activeChannel$.subscribe(function () {
+                _this.mentionedUsers = [];
+                _this.userMentions.next(__spreadArray([], __read(_this.mentionedUsers)));
+                void _this.updateMentionOptions(_this.searchTerm$.getValue());
             }));
         }
-        MessageInputComponent.prototype.ngOnDestroy = function () {
-            this.subscriptions.forEach(function (s) { return s.unsubscribe(); });
+        AutocompleteTextareaComponent.prototype.ngOnChanges = function (changes) {
+            if (changes.areMentionsEnabled) {
+                if (this.areMentionsEnabled) {
+                    this.autocompleteConfig.mentions = [this.userMentionConfig];
+                    this.autocompleteConfig = Object.assign({}, this.autocompleteConfig);
+                }
+                else {
+                    this.autocompleteConfig.mentions = [];
+                    this.autocompleteConfig = Object.assign({}, this.autocompleteConfig);
+                }
+            }
+            if (changes.mentionScope) {
+                void this.updateMentionOptions(this.searchTerm$.getValue());
+            }
         };
-        MessageInputComponent.prototype.messageSent = function (event) {
-            return __awaiter(this, void 0, void 0, function () {
-                var text, attachments;
-                return __generator(this, function (_b) {
-                    switch (_b.label) {
-                        case 0:
-                            event === null || event === void 0 ? void 0 : event.preventDefault();
-                            if (this.attachmentUploadInProgressCounter > 0) {
-                                if (!this.hideNotification) {
-                                    this.hideNotification =
-                                        this.notificationService.addPermanentNotification('streamChat.Wait until all attachments have uploaded');
-                                }
-                                return [2 /*return*/];
-                            }
-                            text = this.messageInput.nativeElement.value;
-                            attachments = this.attachmentUploads
-                                .filter(function (r) { return r.state === 'success'; })
-                                .map(function (r) {
-                                var attachment = {
-                                    type: r.type,
-                                };
-                                if (r.type === 'image') {
-                                    attachment.fallback = r.file.name;
-                                    attachment.image_url = r.url;
-                                }
-                                else {
-                                    attachment.asset_url = r.url;
-                                    attachment.title = r.file.name;
-                                    attachment.file_size = r.file.size;
-                                }
-                                return attachment;
-                            });
-                            this.messageInput.nativeElement.value = '';
-                            return [4 /*yield*/, this.channelService.sendMessage(text, attachments)];
-                        case 1:
-                            _b.sent();
-                            this.attachmentUploads = [];
-                            return [2 /*return*/];
-                    }
-                });
-            });
+        AutocompleteTextareaComponent.prototype.filter = function (searchString, items) {
+            return items.filter(function (item) { return item.autocompleteLabel.toLowerCase().includes(searchString.toLowerCase()); });
         };
-        Object.defineProperty(MessageInputComponent.prototype, "accept", {
-            get: function () {
-                var _a;
-                return this.acceptedFileTypes ? (_a = this.acceptedFileTypes) === null || _a === void 0 ? void 0 : _a.join(',') : '';
-            },
-            enumerable: false,
-            configurable: true
-        });
-        MessageInputComponent.prototype.filesSelected = function (fileList) {
-            return __awaiter(this, void 0, void 0, function () {
-                var imageFiles, dataFiles, newUploads;
-                var _this = this;
-                return __generator(this, function (_b) {
-                    switch (_b.label) {
-                        case 0:
-                            if (!fileList) {
-                                return [2 /*return*/];
-                            }
-                            imageFiles = [];
-                            dataFiles = [];
-                            Array.from(fileList).forEach(function (file) {
-                                if (file.type.startsWith('image/') && !file.type.endsWith('.photoshop')) {
-                                    // photoshop files begin with 'image/'
-                                    imageFiles.push(file);
-                                }
-                                else {
-                                    dataFiles.push(file);
-                                }
-                            });
-                            imageFiles.forEach(function (f) { return _this.createPreview(f); });
-                            newUploads = __spreadArray(__spreadArray([], __read(imageFiles.map(function (file) { return ({
-                                file: file,
-                                state: 'uploading',
-                                type: 'image',
-                            }); }))), __read(dataFiles.map(function (file) { return ({
-                                file: file,
-                                state: 'uploading',
-                                type: 'file',
-                            }); })));
-                            this.attachmentUploads = __spreadArray(__spreadArray([], __read(this.attachmentUploads)), __read(newUploads));
-                            this.clearFileInput();
-                            return [4 /*yield*/, this.uploadAttachments(newUploads)];
-                        case 1:
-                            _b.sent();
-                            return [2 /*return*/];
-                    }
-                });
-            });
+        AutocompleteTextareaComponent.prototype.mentioned = function (item, triggerChar) {
+            if (triggerChar === void 0) { triggerChar = ''; }
+            this.mentionedUsers.push((item.user ? item.user : item));
+            this.userMentions.next(__spreadArray([], __read(this.mentionedUsers)));
+            return triggerChar + item.autocompleteLabel;
         };
-        MessageInputComponent.prototype.retryAttachmentUpload = function (file) {
-            return __awaiter(this, void 0, void 0, function () {
-                var upload;
-                return __generator(this, function (_b) {
-                    switch (_b.label) {
-                        case 0:
-                            upload = this.attachmentUploads.find(function (u) { return u.file === file; });
-                            if (!upload) {
-                                return [2 /*return*/];
-                            }
-                            upload.state = 'uploading';
-                            return [4 /*yield*/, this.uploadAttachments([upload])];
-                        case 1:
-                            _b.sent();
-                            return [2 /*return*/];
-                    }
-                });
-            });
+        AutocompleteTextareaComponent.prototype.autcompleteSearchTermChanged = function (searchTerm) {
+            this.searchTerm$.next(searchTerm);
         };
-        MessageInputComponent.prototype.deleteAttachment = function (upload) {
-            return __awaiter(this, void 0, void 0, function () {
-                var error_1;
-                return __generator(this, function (_b) {
-                    switch (_b.label) {
-                        case 0:
-                            if (!(upload.state === 'success')) return [3 /*break*/, 5];
-                            _b.label = 1;
-                        case 1:
-                            _b.trys.push([1, 3, , 4]);
-                            return [4 /*yield*/, this.channelService.deleteAttachment(upload)];
-                        case 2:
-                            _b.sent();
-                            this.attachmentUploads.splice(this.attachmentUploads.indexOf(upload), 1);
-                            return [3 /*break*/, 4];
-                        case 3:
-                            error_1 = _b.sent();
-                            return [3 /*break*/, 4];
-                        case 4: return [3 /*break*/, 6];
-                        case 5:
-                            this.attachmentUploads.splice(this.attachmentUploads.indexOf(upload), 1);
-                            _b.label = 6;
-                        case 6: return [2 /*return*/];
-                    }
-                });
-            });
+        AutocompleteTextareaComponent.prototype.inputChanged = function () {
+            this.valueChange.emit(this.messageInput.nativeElement.value);
         };
-        MessageInputComponent.prototype.trackByFile = function (_, item) {
-            return item.file;
+        AutocompleteTextareaComponent.prototype.inputLeft = function () {
+            this.updateMentionedUsersFromText();
         };
-        MessageInputComponent.prototype.createPreview = function (file) {
-            var _this = this;
-            var reader = new FileReader();
-            reader.onload = function (event) {
-                var _a;
-                var upload = _this.attachmentUploads.find(function (upload) { return upload.file === file; });
-                if (!upload) {
-                    return;
-                }
-                upload.previewUri = ((_a = event.target) === null || _a === void 0 ? void 0 : _a.result) || undefined;
-            };
-            reader.readAsDataURL(file);
+        AutocompleteTextareaComponent.prototype.sent = function (event) {
+            event.preventDefault();
+            this.updateMentionedUsersFromText();
+            this.send.next();
         };
-        MessageInputComponent.prototype.uploadAttachments = function (uploads) {
+        AutocompleteTextareaComponent.prototype.updateMentionOptions = function (searchTerm) {
             return __awaiter(this, void 0, void 0, function () {
-                var result;
+                var request, result, items;
                 var _this = this;
-                return __generator(this, function (_b) {
-                    switch (_b.label) {
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
                         case 0:
-                            this.attachmentUploadInProgressCounter++;
-                            return [4 /*yield*/, this.channelService.uploadAttachments(uploads)];
-                        case 1:
-                            result = _b.sent();
-                            result.forEach(function (r) {
-                                var upload = _this.attachmentUploads.find(function (upload) { return upload.file === r.file; });
-                                if (!upload) {
-                                    if (r.url) {
-                                        void _this.channelService.deleteAttachment(r);
-                                    }
-                                    return;
-                                }
-                                upload.state = r.state;
-                                upload.url = r.url;
-                                if (upload.state === 'error') {
-                                    _this.notificationService.addTemporaryNotification(upload.type === 'image'
-                                        ? 'streamChat.Error uploading image'
-                                        : 'streamChat.Error uploading file');
-                                }
-                            });
-                            this.attachmentUploadInProgressCounter--;
-                            if (this.attachmentUploadInProgressCounter === 0 && this.hideNotification) {
-                                this.hideNotification();
-                                this.hideNotification = undefined;
+                            if (!this.areMentionsEnabled) {
+                                return [2 /*return*/];
                             }
+                            request = this.mentionScope === 'application'
+                                ? function (s) { return _this.chatClientService.autocompleteUsers(s); }
+                                : function (s) { return _this.channelService.autocompleteMembers(s); };
+                            return [4 /*yield*/, request(searchTerm || '')];
+                        case 1:
+                            result = _a.sent();
+                            items = this.filter(searchTerm || '', result.map(function (i) {
+                                var user = (i.user ? i.user : i);
+                                return Object.assign(Object.assign({}, i), { autocompleteLabel: user.name || user.id, type: 'mention' });
+                            }));
+                            this.userMentionConfig.items = items;
+                            this.autocompleteConfig.mentions = [this.userMentionConfig];
+                            this.autocompleteConfig = Object.assign({}, this.autocompleteConfig);
                             return [2 /*return*/];
                     }
                 });
             });
         };
-        MessageInputComponent.prototype.clearFileInput = function () {
-            this.fileInput.nativeElement.value = '';
+        AutocompleteTextareaComponent.prototype.updateMentionedUsersFromText = function () {
+            var _this = this;
+            var updatedMentionedUsers = [];
+            this.mentionedUsers.forEach(function (u) {
+                var key = u.name || u.id;
+                if (_this.value.includes("" + _this.triggerChar + key)) {
+                    updatedMentionedUsers.push(u);
+                }
+            });
+            if (updatedMentionedUsers.length !== this.mentionedUsers.length) {
+                this.userMentions.next(__spreadArray([], __read(updatedMentionedUsers)));
+                this.mentionedUsers = updatedMentionedUsers;
+            }
         };
-        return MessageInputComponent;
+        return AutocompleteTextareaComponent;
     }());
-    MessageInputComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: MessageInputComponent, deps: [{ token: ChannelService }, { token: NotificationService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    MessageInputComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: MessageInputComponent, selector: "stream-message-input", inputs: { isFileUploadEnabled: "isFileUploadEnabled", acceptedFileTypes: "acceptedFileTypes", isMultipleFileUploadEnabled: "isMultipleFileUploadEnabled" }, viewQueries: [{ propertyName: "messageInput", first: true, predicate: ["input"], descendants: true }, { propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0__namespace, template: "<div class=\"str-chat__input-flat\">\n  <div class=\"str-chat__input-flat-wrapper\">\n    <div class=\"str-chat__input-flat--textarea-wrapper\">\n      <div class=\"rfu-image-previewer\">\n        <ng-container\n          *ngFor=\"\n            let attachmentUpload of attachmentUploads;\n            trackBy: trackByFile\n          \"\n        >\n          <div\n            *ngIf=\"attachmentUpload.type === 'image'\"\n            class=\"rfu-image-previewer__image\"\n            [class.rfu-image-previewer__image--loaded]=\"\n              attachmentUpload.state === 'success'\n            \"\n            data-testclass=\"attachment-image-preview\"\n          >\n            <div\n              *ngIf=\"attachmentUpload.state === 'error'\"\n              class=\"rfu-image-previewer__retry\"\n              (click)=\"retryAttachmentUpload(attachmentUpload.file)\"\n              (keyup.enter)=\"retryAttachmentUpload(attachmentUpload.file)\"\n              data-testclass=\"upload-error\"\n            >\n              <stream-icon icon=\"retry\"></stream-icon>\n            </div>\n            <div class=\"rfu-thumbnail__wrapper\" style=\"width: 100; height: 100\">\n              <div class=\"rfu-thumbnail__overlay\">\n                <div\n                  class=\"rfu-icon-button\"\n                  data-testclass=\"delete-attachment\"\n                  role=\"button\"\n                  (click)=\"deleteAttachment(attachmentUpload)\"\n                  (keyup.enter)=\"deleteAttachment(attachmentUpload)\"\n                >\n                  <stream-icon icon=\"close\"></stream-icon>\n                </div>\n              </div>\n              <img\n                *ngIf=\"attachmentUpload.url || attachmentUpload.previewUri\"\n                src=\"{{\n                  attachmentUpload.url\n                    ? attachmentUpload.url\n                    : attachmentUpload.previewUri\n                }}\"\n                alt=\"attachmentUpload.file.name\"\n                class=\"rfu-thumbnail__image\"\n                data-testclass=\"attachment-image\"\n              />\n            </div>\n            <stream-loading-indicator\n              data-testclass=\"loading-indicator\"\n              color=\"rgba(255,255,255,0.7)\"\n              *ngIf=\"attachmentUpload.state === 'uploading'\"\n            ></stream-loading-indicator>\n          </div>\n          <div\n            class=\"rfu-file-previewer\"\n            *ngIf=\"attachmentUpload.type === 'file'\"\n            data-testclass=\"attachment-file-preview\"\n          >\n            <ol>\n              <li\n                class=\"rfu-file-previewer__file\"\n                [class.rfu-file-previewer__file--uploading]=\"\n                  attachmentUpload.state === 'uploading'\n                \"\n                [class.rfu-file-previewer__file--failed]=\"\n                  attachmentUpload.state === 'error'\n                \"\n              >\n                <stream-icon icon=\"file\"></stream-icon>\n\n                <a\n                  data-testclass=\"file-download-link\"\n                  href=\"{{ attachmentUpload.url }}\"\n                  (click)=\"\n                    attachmentUpload.url ? null : $event.preventDefault()\n                  \"\n                  (keyup.enter)=\"\n                    attachmentUpload.url ? null : $event.preventDefault()\n                  \"\n                  download\n                >\n                  {{ attachmentUpload.file.name }}\n                  <ng-container *ngIf=\"attachmentUpload.state === 'error'\">\n                    <div\n                      data-testclass=\"file-upload-retry\"\n                      class=\"rfu-file-previewer__failed\"\n                      (click)=\"retryAttachmentUpload(attachmentUpload.file)\"\n                      (keyup.enter)=\"\n                        retryAttachmentUpload(attachmentUpload.file)\n                      \"\n                      translate\n                    >\n                      streamChat.failed\n                    </div>\n                    <div\n                      class=\"rfu-file-previewer__retry\"\n                      (click)=\"retryAttachmentUpload(attachmentUpload.file)\"\n                      (keyup.enter)=\"\n                        retryAttachmentUpload(attachmentUpload.file)\n                      \"\n                      translate\n                    >\n                      streamChat.retry\n                    </div>\n                  </ng-container>\n                </a>\n\n                <span\n                  data-testclass=\"file-delete\"\n                  class=\"rfu-file-previewer__close-button\"\n                  (click)=\"deleteAttachment(attachmentUpload)\"\n                  (keyup.enter)=\"deleteAttachment(attachmentUpload)\"\n                >\n                  \u2718\n                </span>\n                <div\n                  *ngIf=\"attachmentUpload.state === 'uploading'\"\n                  class=\"rfu-file-previewer__loading-indicator\"\n                >\n                  <stream-loading-indicator></stream-loading-indicator>\n                </div>\n              </li>\n            </ol>\n          </div>\n        </ng-container>\n      </div>\n      <div class=\"rta str-chat__textarea\">\n        <textarea\n          autofocus\n          data-testid=\"textarea\"\n          #input\n          placeholder=\"{{ 'streamChat.Type your message' | translate }}\"\n          class=\"rta__textarea str-chat__textarea__textarea\"\n          rows=\"1\"\n          (keydown.enter)=\"messageSent($event)\"\n        ></textarea>\n      </div>\n      <div\n        *ngIf=\"isFileUploadEnabled && isFileUploadAuthorized\"\n        class=\"str-chat__fileupload-wrapper\"\n        data-testid=\"file-upload-button\"\n      >\n        <div class=\"str-chat__tooltip\">\n          {{ \"streamChat.Attach files\" | translate }}\n        </div>\n        <div class=\"rfu-file-upload-button\">\n          <label>\n            <input\n              #fileInput\n              type=\"file\"\n              class=\"rfu-file-input\"\n              data-testid=\"file-input\"\n              [accept]=\"accept\"\n              [multiple]=\"isMultipleFileUploadEnabled\"\n              (change)=\"filesSelected(fileInput.files)\"\n            />\n            <span class=\"str-chat__input-flat-fileupload\">\n              <stream-icon icon=\"file-upload\"></stream-icon>\n            </span>\n          </label>\n        </div>\n      </div>\n    </div>\n    <button\n      data-testid=\"send-button\"\n      class=\"str-chat__send-button\"\n      (click)=\"messageSent()\"\n      (keyup.enter)=\"messageSent()\"\n    >\n      <stream-icon icon=\"send\"></stream-icon>\n    </button>\n  </div>\n</div>\n", components: [{ type: IconComponent, selector: "stream-icon", inputs: ["icon", "size"] }, { type: LoadingIndicatorComponent, selector: "stream-loading-indicator", inputs: ["size", "color"] }], directives: [{ type: i5__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4__namespace.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }], pipes: { "translate": i4__namespace.TranslatePipe } });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: MessageInputComponent, decorators: [{
+    AutocompleteTextareaComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: AutocompleteTextareaComponent, deps: [{ token: ChannelService }, { token: ChatClientService }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    AutocompleteTextareaComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: AutocompleteTextareaComponent, selector: "stream-autocomplete-textarea", inputs: { value: "value", areMentionsEnabled: "areMentionsEnabled", mentionAutocompleteItemTemplate: "mentionAutocompleteItemTemplate", mentionScope: "mentionScope" }, outputs: { valueChange: "valueChange", send: "send", userMentions: "userMentions" }, host: { properties: { "class": "this.class" } }, viewQueries: [{ propertyName: "messageInput", first: true, predicate: ["input"], descendants: true }], usesOnChanges: true, ngImport: i0__namespace, template: "<textarea\n  [value]=\"value || ''\"\n  autofocus\n  data-testid=\"textarea\"\n  #input\n  placeholder=\"{{ 'streamChat.Type your message' | translate }}\"\n  class=\"rta__textarea str-chat__textarea__textarea\"\n  rows=\"1\"\n  (input)=\"inputChanged()\"\n  (keydown.enter)=\"sent($event)\"\n  [mentionConfig]=\"autocompleteConfig\"\n  (searchTerm)=\"autcompleteSearchTermChanged($event)\"\n  [mentionListTemplate]=\"autocompleteItem\"\n  (blur)=\"inputLeft()\"\n></textarea>\n<ng-template #autocompleteItem let-item=\"item\">\n  <div class=\"rta rta__item str-chat__emojisearch__item\" [ngSwitch]=\"item.type\">\n    <div class=\"rta__entity\" *ngSwitchCase=\"'mention'\">\n      <ng-container\n        *ngTemplateOutlet=\"\n          mentionAutocompleteItemTemplate || defaultMentionTemplate;\n          context: { item: item }\n        \"\n      ></ng-container>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #defaultMentionTemplate let-item=\"item\">\n  <div class=\"str-chat__user-item\">\n    <stream-avatar\n      data-testclass=\"avatar\"\n      class=\"str-chat__avatar str-chat__avatar--circle\"\n      style=\"height: 20px\"\n      [size]=\"20\"\n      [imageUrl]=\"item.image || item.user?.image\"\n      [name]=\"item.autocompleteLabel\"\n    ></stream-avatar>\n    <span data-testclass=\"username\" class=\"str-chat__user-item--name\">{{\n      item.autocompleteLabel\n    }}</span>\n  </div>\n</ng-template>\n", components: [{ type: AvatarComponent, selector: "stream-avatar", inputs: ["name", "imageUrl", "size"] }], directives: [{ type: i4__namespace.MentionDirective, selector: "[mention], [mentionConfig]", inputs: ["mentionConfig", "mention", "mentionListTemplate"], outputs: ["searchTerm", "itemSelected", "opened", "closed"] }, { type: i5__namespace.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i5__namespace.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i5__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "translate": i1__namespace.TranslatePipe } });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: AutocompleteTextareaComponent, decorators: [{
                 type: i0.Component,
                 args: [{
-                        selector: 'stream-message-input',
-                        templateUrl: './message-input.component.html',
+                        selector: 'stream-autocomplete-textarea',
+                        templateUrl: './autocomplete-textarea.component.html',
                         styles: [],
                     }]
-            }], ctorParameters: function () { return [{ type: ChannelService }, { type: NotificationService }]; }, propDecorators: { isFileUploadEnabled: [{
+            }], ctorParameters: function () { return [{ type: ChannelService }, { type: ChatClientService }]; }, propDecorators: { class: [{
+                    type: i0.HostBinding
+                }], value: [{
                     type: i0.Input
-                }], acceptedFileTypes: [{
+                }], areMentionsEnabled: [{
                     type: i0.Input
-                }], isMultipleFileUploadEnabled: [{
+                }], mentionAutocompleteItemTemplate: [{
+                    type: i0.Input
+                }], mentionScope: [{
                     type: i0.Input
+                }], valueChange: [{
+                    type: i0.Output
+                }], send: [{
+                    type: i0.Output
+                }], userMentions: [{
+                    type: i0.Output
                 }], messageInput: [{
                     type: i0.ViewChild,
                     args: ['input']
-                }], fileInput: [{
-                    type: i0.ViewChild,
-                    args: ['fileInput']
                 }] } });
 
     var getGroupStyles = function (message, previousMessage, nextMessage, noGroupByUser) {
@@ -2478,7 +3232,9 @@
             this.chatClientService = chatClientService;
             this.imageLoadService = imageLoadService;
             this.areReactionsEnabled = true;
-            this.enabledMessageActions = ['flag'];
+            /* eslint-disable-next-line @angular-eslint/no-input-rename */
+            this.enabledMessageActionsInput = ['flag', 'edit', 'edit-any', 'delete', 'delete-any'];
+            this.enabledMessageActions = [];
             this.class = 'str-chat-angular__main-panel-inner str-chat-angular__message-list-host';
             this.unreadMessageCount = 0;
             this.groupStyles = [];
@@ -2501,6 +3257,20 @@
                     if (capabilites.indexOf('flag-message') !== -1) {
                         _this.authorizedMessageActions.push('flag');
                     }
+                    if (capabilites.indexOf('update-own-message') !== -1) {
+                        _this.authorizedMessageActions.push('edit');
+                    }
+                    if (capabilites.indexOf('update-any-message') !== -1) {
+                        _this.authorizedMessageActions.push('edit');
+                        _this.authorizedMessageActions.push('edit-any');
+                    }
+                    if (capabilites.indexOf('delete-own-message') !== -1) {
+                        _this.authorizedMessageActions.push('delete');
+                    }
+                    if (capabilites.indexOf('delete-any-message') !== -1) {
+                        _this.authorizedMessageActions.push('delete');
+                        _this.authorizedMessageActions.push('delete-any');
+                    }
                     _this.setEnabledActions();
                 }
             });
@@ -2601,10 +3371,10 @@
         };
         MessageListComponent.prototype.setEnabledActions = function () {
             var _this = this;
+            this.enabledMessageActions = [];
             if (!this.enabledMessageActionsInput) {
                 return;
             }
-            this.enabledMessageActions = [];
             this.enabledMessageActionsInput.forEach(function (action) {
                 var isAuthorized = _this.authorizedMessageActions.indexOf(action) !== -1;
                 if (isAuthorized) {
@@ -2638,44 +3408,22 @@
                     args: ['scrollContainer']
                 }] } });
 
-    var NotificationComponent = /** @class */ (function () {
-        function NotificationComponent() {
-        }
-        return NotificationComponent;
-    }());
-    NotificationComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: NotificationComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    NotificationComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: NotificationComponent, selector: "stream-notification", inputs: { type: "type" }, ngImport: i0__namespace, template: "<div\n  class=\"str-chat__custom-notification notification-{{ type }}\"\n  data-testid=\"custom-notification\"\n>\n  <ng-content></ng-content>\n</div>\n" });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: NotificationComponent, decorators: [{
-                type: i0.Component,
-                args: [{
-                        selector: 'stream-notification',
-                        templateUrl: './notification.component.html',
-                        styles: [],
-                    }]
-            }], ctorParameters: function () { return []; }, propDecorators: { type: [{
-                    type: i0.Input
-                }] } });
-
-    var NotificationListComponent = /** @class */ (function () {
-        function NotificationListComponent(notificationService) {
-            this.notificationService = notificationService;
-            this.notifications$ = this.notificationService.notifications$;
+    var StreamAvatarModule = /** @class */ (function () {
+        function StreamAvatarModule() {
         }
-        NotificationListComponent.prototype.trackByItem = function (_, item) {
-            return item;
-        };
-        return NotificationListComponent;
+        return StreamAvatarModule;
     }());
-    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\" translate>\n      {{ notification.text }}\n    </div></stream-notification\n  >\n</div>\n", components: [{ type: NotificationComponent, selector: "stream-notification", inputs: ["type"] }], directives: [{ type: i5__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4__namespace.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }], pipes: { "async": i5__namespace.AsyncPipe } });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: NotificationListComponent, decorators: [{
-                type: i0.Component,
+    StreamAvatarModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: StreamAvatarModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    StreamAvatarModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: StreamAvatarModule, declarations: [AvatarComponent], imports: [i5.CommonModule, i1.TranslateModule], exports: [AvatarComponent] });
+    StreamAvatarModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: StreamAvatarModule, imports: [[i5.CommonModule, i1.TranslateModule]] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: StreamAvatarModule, decorators: [{
+                type: i0.NgModule,
                 args: [{
-                        selector: 'stream-notification-list',
-                        templateUrl: './notification-list.component.html',
-                        styles: [],
+                        declarations: [AvatarComponent],
+                        imports: [i5.CommonModule, i1.TranslateModule],
+                        exports: [AvatarComponent],
                     }]
-            }], ctorParameters: function () { return [{ type: NotificationService }]; } });
+            }] });
 
     var StreamChatModule = /** @class */ (function () {
         function StreamChatModule() {
@@ -2683,8 +3431,7 @@
         return StreamChatModule;
     }());
     StreamChatModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: StreamChatModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    StreamChatModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: StreamChatModule, declarations: [AvatarComponent,
-            ChannelComponent,
+    StreamChatModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: StreamChatModule, declarations: [ChannelComponent,
             ChannelHeaderComponent,
             ChannelListComponent,
             ChannelPreviewComponent,
@@ -2697,8 +3444,11 @@
             AttachmentListComponent,
             MessageReactionsComponent,
             NotificationComponent,
-            NotificationListComponent], imports: [i5.CommonModule, i2.EmojiModule, i4.TranslateModule], exports: [AvatarComponent,
-            ChannelComponent,
+            NotificationListComponent,
+            AttachmentPreviewListComponent,
+            ModalComponent,
+            TextareaDirective,
+            HighlightMentionsPipe], imports: [i5.CommonModule, i2.EmojiModule, i1.TranslateModule, StreamAvatarModule], exports: [ChannelComponent,
             ChannelHeaderComponent,
             ChannelListComponent,
             ChannelPreviewComponent,
@@ -2711,13 +3461,15 @@
             AttachmentListComponent,
             MessageReactionsComponent,
             NotificationComponent,
-            NotificationListComponent] });
-    StreamChatModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: StreamChatModule, imports: [[i5.CommonModule, i2.EmojiModule, i4.TranslateModule]] });
+            NotificationListComponent,
+            AttachmentPreviewListComponent,
+            ModalComponent,
+            HighlightMentionsPipe] });
+    StreamChatModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: StreamChatModule, imports: [[i5.CommonModule, i2.EmojiModule, i1.TranslateModule, StreamAvatarModule]] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: StreamChatModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
                         declarations: [
-                            AvatarComponent,
                             ChannelComponent,
                             ChannelHeaderComponent,
                             ChannelListComponent,
@@ -2732,10 +3484,13 @@
                             MessageReactionsComponent,
                             NotificationComponent,
                             NotificationListComponent,
+                            AttachmentPreviewListComponent,
+                            ModalComponent,
+                            TextareaDirective,
+                            HighlightMentionsPipe,
                         ],
-                        imports: [i5.CommonModule, i2.EmojiModule, i4.TranslateModule],
+                        imports: [i5.CommonModule, i2.EmojiModule, i1.TranslateModule, StreamAvatarModule],
                         exports: [
-                            AvatarComponent,
                             ChannelComponent,
                             ChannelHeaderComponent,
                             ChannelListComponent,
@@ -2750,6 +3505,65 @@
                             MessageReactionsComponent,
                             NotificationComponent,
                             NotificationListComponent,
+                            AttachmentPreviewListComponent,
+                            ModalComponent,
+                            HighlightMentionsPipe,
+                        ],
+                    }]
+            }] });
+
+    var StreamAutocompleteTextareaModule = /** @class */ (function () {
+        function StreamAutocompleteTextareaModule() {
+        }
+        return StreamAutocompleteTextareaModule;
+    }());
+    StreamAutocompleteTextareaModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: StreamAutocompleteTextareaModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    StreamAutocompleteTextareaModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: StreamAutocompleteTextareaModule, declarations: [AutocompleteTextareaComponent], imports: [i5.CommonModule, i1.TranslateModule, i4.MentionModule, StreamAvatarModule], exports: [AutocompleteTextareaComponent] });
+    StreamAutocompleteTextareaModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: StreamAutocompleteTextareaModule, providers: [
+            {
+                provide: textareaInjectionToken,
+                useValue: AutocompleteTextareaComponent,
+            },
+        ], imports: [[i5.CommonModule, i1.TranslateModule, i4.MentionModule, StreamAvatarModule]] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: StreamAutocompleteTextareaModule, decorators: [{
+                type: i0.NgModule,
+                args: [{
+                        declarations: [AutocompleteTextareaComponent],
+                        imports: [i5.CommonModule, i1.TranslateModule, i4.MentionModule, StreamAvatarModule],
+                        exports: [AutocompleteTextareaComponent],
+                        providers: [
+                            {
+                                provide: textareaInjectionToken,
+                                useValue: AutocompleteTextareaComponent,
+                            },
+                        ],
+                    }]
+            }] });
+
+    var StreamTextareaModule = /** @class */ (function () {
+        function StreamTextareaModule() {
+        }
+        return StreamTextareaModule;
+    }());
+    StreamTextareaModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: StreamTextareaModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    StreamTextareaModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: StreamTextareaModule, declarations: [TextareaComponent], imports: [i5.CommonModule, i1.TranslateModule], exports: [TextareaComponent] });
+    StreamTextareaModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: StreamTextareaModule, providers: [
+            {
+                provide: textareaInjectionToken,
+                useValue: TextareaComponent,
+            },
+        ], imports: [[i5.CommonModule, i1.TranslateModule]] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: StreamTextareaModule, decorators: [{
+                type: i0.NgModule,
+                args: [{
+                        declarations: [TextareaComponent],
+                        imports: [i5.CommonModule, i1.TranslateModule],
+                        exports: [TextareaComponent],
+                        providers: [
+                            {
+                                provide: textareaInjectionToken,
+                                useValue: TextareaComponent,
+                            },
                         ],
                     }]
             }] });
@@ -2763,6 +3577,9 @@
      */
 
     exports.AttachmentListComponent = AttachmentListComponent;
+    exports.AttachmentPreviewListComponent = AttachmentPreviewListComponent;
+    exports.AttachmentService = AttachmentService;
+    exports.AutocompleteTextareaComponent = AutocompleteTextareaComponent;
     exports.AvatarComponent = AvatarComponent;
     exports.ChannelComponent = ChannelComponent;
     exports.ChannelHeaderComponent = ChannelHeaderComponent;
@@ -2771,21 +3588,35 @@
     exports.ChannelPreviewComponent = ChannelPreviewComponent;
     exports.ChannelService = ChannelService;
     exports.ChatClientService = ChatClientService;
+    exports.HighlightMentionsPipe = HighlightMentionsPipe;
     exports.IconComponent = IconComponent;
     exports.ImageLoadService = ImageLoadService;
     exports.LoadingIndicatorComponent = LoadingIndicatorComponent;
     exports.MessageActionsBoxComponent = MessageActionsBoxComponent;
     exports.MessageComponent = MessageComponent;
     exports.MessageInputComponent = MessageInputComponent;
+    exports.MessageInputConfigService = MessageInputConfigService;
     exports.MessageListComponent = MessageListComponent;
     exports.MessageReactionsComponent = MessageReactionsComponent;
+    exports.ModalComponent = ModalComponent;
     exports.NotificationComponent = NotificationComponent;
     exports.NotificationListComponent = NotificationListComponent;
+    exports.NotificationService = NotificationService;
+    exports.StreamAutocompleteTextareaModule = StreamAutocompleteTextareaModule;
     exports.StreamChatModule = StreamChatModule;
     exports.StreamI18nService = StreamI18nService;
+    exports.StreamTextareaModule = StreamTextareaModule;
+    exports.TextareaComponent = TextareaComponent;
+    exports.TextareaDirective = TextareaDirective;
     exports.ThemeService = ThemeService;
+    exports.createMessagePreview = createMessagePreview;
+    exports.getDeviceWidth = getDeviceWidth;
+    exports.getGroupStyles = getGroupStyles;
+    exports.getReadBy = getReadBy;
     exports.getReadByText = getReadByText;
+    exports.isImageAttachment = isImageAttachment;
     exports.parseDate = parseDate;
+    exports.textareaInjectionToken = textareaInjectionToken;
 
     Object.defineProperty(exports, '__esModule', { value: true });