stream-chat-angular 2.13.0 → 2.15.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('pretty-bytes'), require('dayjs'), require('dayjs/plugin/calendar'), require('emoji-regex'), require('@stream-io/transliterate'), 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', 'pretty-bytes', 'dayjs', 'dayjs/plugin/calendar', 'emoji-regex', '@stream-io/transliterate', '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.i2, global.ng.common, global.prettybytes, global.Dayjs, global.calendar, global.emojiRegex, global.transliterate, global.i6));
-}(this, (function (exports, i0, rxjs, streamChat, operators, uuid, i2, i4, prettybytes, Dayjs, calendar, emojiRegex, transliterate, i6) { 'use strict';
+    (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.i2, global.ng.common, global.prettybytes, global.Dayjs, global.calendar, global.emojiRegex, global.transliterate, global.i6$1));
+}(this, (function (exports, i0, rxjs, streamChat, operators, uuid, i2, i6, prettybytes, Dayjs, calendar, emojiRegex, transliterate, i6$1) { 'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -28,13 +28,13 @@
 
     var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
     var i2__namespace = /*#__PURE__*/_interopNamespace(i2);
-    var i4__namespace = /*#__PURE__*/_interopNamespace(i4);
+    var i6__namespace = /*#__PURE__*/_interopNamespace(i6);
     var prettybytes__default = /*#__PURE__*/_interopDefaultLegacy(prettybytes);
     var Dayjs__default = /*#__PURE__*/_interopDefaultLegacy(Dayjs);
     var calendar__default = /*#__PURE__*/_interopDefaultLegacy(calendar);
     var emojiRegex__default = /*#__PURE__*/_interopDefaultLegacy(emojiRegex);
     var transliterate__default = /*#__PURE__*/_interopDefaultLegacy(transliterate);
-    var i6__namespace = /*#__PURE__*/_interopNamespace(i6);
+    var i6__namespace$1 = /*#__PURE__*/_interopNamespace(i6$1);
 
     /*! *****************************************************************************
     Copyright (c) Microsoft Corporation.
@@ -354,10 +354,10 @@
         return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
     }
 
-    var version = '2.13.0';
+    var version = '2.15.0';
 
     /**
-     * The `NotificationService` can be used to add or remove notifications. By default the [`NotificationList`](../components/notifications.mdx) component displays the currently active notifications.
+     * The `NotificationService` can be used to add or remove notifications. By default the [`NotificationList`](../components/NotificationListComponent.mdx) component displays the currently active notifications.
      */
     var NotificationService = /** @class */ (function () {
         function NotificationService() {
@@ -637,6 +637,8 @@
             this.activeThreadMessagesSubject = new rxjs.BehaviorSubject([]);
             this.messagePageSize = 25;
             this.messageToQuoteSubject = new rxjs.BehaviorSubject(undefined);
+            this.usersTypingInChannelSubject = new rxjs.BehaviorSubject([]);
+            this.usersTypingInThreadSubject = new rxjs.BehaviorSubject([]);
             this.channelListSetter = function (channels) {
                 _this.channelsSubject.next(channels);
             };
@@ -680,6 +682,9 @@
                 .subscribe(function () {
                 void _this.setAsActiveParentMessage(undefined);
             });
+            this.usersTypingInChannel$ =
+                this.usersTypingInChannelSubject.asObservable();
+            this.usersTypingInThread$ = this.usersTypingInThreadSubject.asObservable();
         }
         /**
          * Sets the given `channel` as active.
@@ -823,7 +828,7 @@
             });
         };
         /**
-         * Resets the `activeChannel$`, `channels$` and `activeChannelMessages$` Observables. Useful when disconnecting a chat user, use in combination with [`disconnectUser`](./chat-client.mdx/#disconnectuser).
+         * Resets the `activeChannel$`, `channels$` and `activeChannelMessages$` Observables. Useful when disconnecting a chat user, use in combination with [`disconnectUser`](./ChatClientService.mdx/#disconnectuser).
          */
         ChannelService.prototype.reset = function () {
             this.activeChannelMessagesSubject.next([]);
@@ -1314,6 +1319,46 @@
                     _this.activeChannelMessagesSubject.next(_this.activeChannelMessagesSubject.getValue());
                 });
             }));
+            this.activeChannelSubscriptions.push(channel.on('typing.start', function (e) { return _this.ngZone.run(function () { return _this.handleTypingStartEvent(e); }); }));
+            this.activeChannelSubscriptions.push(channel.on('typing.stop', function (e) { return _this.ngZone.run(function () { return _this.handleTypingStopEvent(e); }); }));
+        };
+        /**
+         * Call this method if user started typing in the active channel
+         * @param parentId The id of the parent message, if user is typing in a thread
+         */
+        ChannelService.prototype.typingStarted = function (parentId) {
+            return __awaiter(this, void 0, void 0, function () {
+                var activeChannel;
+                return __generator(this, function (_f) {
+                    switch (_f.label) {
+                        case 0:
+                            activeChannel = this.activeChannelSubject.getValue();
+                            return [4 /*yield*/, (activeChannel === null || activeChannel === void 0 ? void 0 : activeChannel.keystroke(parentId))];
+                        case 1:
+                            _f.sent();
+                            return [2 /*return*/];
+                    }
+                });
+            });
+        };
+        /**
+         * Call this method if user stopped typing in the active channel
+         * @param parentId The id of the parent message, if user were typing in a thread
+         */
+        ChannelService.prototype.typingStopped = function (parentId) {
+            return __awaiter(this, void 0, void 0, function () {
+                var activeChannel;
+                return __generator(this, function (_f) {
+                    switch (_f.label) {
+                        case 0:
+                            activeChannel = this.activeChannelSubject.getValue();
+                            return [4 /*yield*/, (activeChannel === null || activeChannel === void 0 ? void 0 : activeChannel.stopTyping(parentId))];
+                        case 1:
+                            _f.sent();
+                            return [2 /*return*/];
+                    }
+                });
+            });
         };
         ChannelService.prototype.messageUpdated = function (event) {
             var _this = this;
@@ -1560,6 +1605,41 @@
                 return Object.assign(Object.assign({}, formatMessage), { readBy: isThreadMessage ? [] : getReadBy(formatMessage, channel) });
             }
         };
+        ChannelService.prototype.handleTypingStartEvent = function (event) {
+            var _a, _b;
+            if (((_a = event.user) === null || _a === void 0 ? void 0 : _a.id) === ((_b = this.chatClientService.chatClient.user) === null || _b === void 0 ? void 0 : _b.id)) {
+                return;
+            }
+            var isTypingInThread = !!event.parent_id;
+            if (isTypingInThread &&
+                event.parent_id !== this.activeParentMessageIdSubject.getValue()) {
+                return;
+            }
+            var subject = isTypingInThread
+                ? this.usersTypingInThreadSubject
+                : this.usersTypingInChannelSubject;
+            var users = subject.getValue();
+            var user = event.user;
+            if (user && !users.find(function (u) { return u.id === user.id; })) {
+                users.push(user);
+                subject.next(__spreadArray([], __read(users)));
+            }
+        };
+        ChannelService.prototype.handleTypingStopEvent = function (event) {
+            var usersTypingInChannel = this.usersTypingInChannelSubject.getValue();
+            var usersTypingInThread = this.usersTypingInThreadSubject.getValue();
+            var user = event.user;
+            if (user && usersTypingInChannel.find(function (u) { return u.id === user.id; })) {
+                usersTypingInChannel.splice(usersTypingInChannel.findIndex(function (u) { return u.id === user.id; }), 1);
+                this.usersTypingInChannelSubject.next(__spreadArray([], __read(usersTypingInChannel)));
+                return;
+            }
+            if (user && usersTypingInThread.find(function (u) { return u.id === user.id; })) {
+                usersTypingInThread.splice(usersTypingInThread.findIndex(function (u) { return u.id === user.id; }), 1);
+                this.usersTypingInThreadSubject.next(__spreadArray([], __read(usersTypingInThread)));
+                return;
+            }
+        };
         return ChannelService;
     }());
     ChannelService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: ChannelService, deps: [{ token: ChatClientService }, { token: i0__namespace.NgZone }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
@@ -2066,8 +2146,14 @@
                     }]
             }], ctorParameters: function () { return [{ type: i2__namespace.TranslateService }]; } });
 
+    /**
+     * The `Avatar` component displays the provided image, with fallback to the first letter of the optional name input.
+     */
     var AvatarComponent = /** @class */ (function () {
         function AvatarComponent() {
+            /**
+             * The size in pixels of the avatar image.
+             */
             this.size = 32;
             this.isLoaded = false;
             this.isError = false;
@@ -2083,7 +2169,7 @@
         return AvatarComponent;
     }());
     AvatarComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: AvatarComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    AvatarComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: AvatarComponent, selector: "stream-avatar", inputs: { name: "name", imageUrl: "imageUrl", size: "size" }, ngImport: i0__namespace, template: "<div\n  class=\"str-chat__avatar str-chat__avatar--circle\"\n  title=\"{{ name }}\"\n  [style]=\"{\n    flexBasis: size + 'px',\n    fontSize: size / 2 + 'px',\n    height: size + 'px',\n    lineHeight: size + 'px',\n    width: size + 'px'\n  }\"\n>\n  <img\n    *ngIf=\"imageUrl && !isError; else fallback\"\n    class=\"str-chat__avatar-image str-chat__avatar-image{{\n      isLoaded ? ' str-chat__avatar-image--loaded' : ''\n    }}\"\n    src=\"{{ imageUrl }}\"\n    alt=\"{{ initials }}\"\n    data-testid=\"avatar-img\"\n    (load)=\"isLoaded = true\"\n    (error)=\"isError = true\"\n    [style]=\"{\n      flexBasis: size + 'px',\n      height: size + 'px',\n      objectFit: 'cover',\n      width: size + 'px'\n    }\"\n  />\n  <ng-template #fallback>\n    <div data-testid=\"fallback-img\" class=\"str-chat__avatar-fallback\">\n      {{ initials }}\n    </div>\n  </ng-template>\n</div>\n", styles: [""], directives: [{ type: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    AvatarComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: AvatarComponent, selector: "stream-avatar", inputs: { name: "name", imageUrl: "imageUrl", size: "size" }, ngImport: i0__namespace, template: "<div\n  class=\"str-chat__avatar str-chat__avatar--circle\"\n  title=\"{{ name }}\"\n  [style]=\"{\n    flexBasis: size + 'px',\n    fontSize: size / 2 + 'px',\n    height: size + 'px',\n    lineHeight: size + 'px',\n    width: size + 'px'\n  }\"\n>\n  <img\n    *ngIf=\"imageUrl && !isError; else fallback\"\n    class=\"str-chat__avatar-image str-chat__avatar-image{{\n      isLoaded ? ' str-chat__avatar-image--loaded' : ''\n    }}\"\n    src=\"{{ imageUrl }}\"\n    alt=\"{{ initials }}\"\n    data-testid=\"avatar-img\"\n    (load)=\"isLoaded = true\"\n    (error)=\"isError = true\"\n    [style]=\"{\n      flexBasis: size + 'px',\n      height: size + 'px',\n      objectFit: 'cover',\n      width: size + 'px'\n    }\"\n  />\n  <ng-template #fallback>\n    <div data-testid=\"fallback-img\" class=\"str-chat__avatar-fallback\">\n      {{ initials }}\n    </div>\n  </ng-template>\n</div>\n", styles: [""], directives: [{ type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: AvatarComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -2099,13 +2185,16 @@
                     type: i0.Input
                 }] } });
 
+    /**
+     * The `Icon` component can be used to display different icons (i. e. message delivered icon).
+     */
     var IconComponent = /** @class */ (function () {
         function IconComponent() {
         }
         return IconComponent;
     }());
     IconComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: IconComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    IconComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: IconComponent, selector: "stream-icon", inputs: { icon: "icon", size: "size" }, ngImport: i0__namespace, template: "<svg\n  data-testid=\"action-icon\"\n  *ngIf=\"icon === 'action-icon'\"\n  height=\"4\"\n  viewBox=\"0 0 11 4\"\n  width=\"11\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n>\n  <path\n    d=\"M1.5 3a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm4 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm4 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z\"\n    fillRule=\"nonzero\"\n  />\n</svg>\n<svg\n  *ngIf=\"icon === 'delivered-icon'\"\n  height=\"16\"\n  width=\"16\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n  data-testid=\"delivered-icon\"\n>\n  <path\n    d=\"M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0zm3.72 6.633a.955.955 0 1 0-1.352-1.352L6.986 8.663 5.633 7.31A.956.956 0 1 0 4.28 8.663l2.029 2.028a.956.956 0 0 0 1.353 0l4.058-4.058z\"\n    fill=\"#006CFF\"\n    fillRule=\"evenodd\"\n  />\n</svg>\n<svg\n  *ngIf=\"icon === 'reaction-icon'\"\n  height=\"12\"\n  viewBox=\"0 0 12 12\"\n  width=\"12\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n  data-testid=\"reaction-icon\"\n>\n  <g clipRule=\"evenodd\" fillRule=\"evenodd\">\n    <path\n      d=\"M6 1.2C3.3 1.2 1.2 3.3 1.2 6c0 2.7 2.1 4.8 4.8 4.8 2.7 0 4.8-2.1 4.8-4.8 0-2.7-2.1-4.8-4.8-4.8zM0 6c0-3.3 2.7-6 6-6s6 2.7 6 6-2.7 6-6 6-6-2.7-6-6z\"\n    ></path>\n    <path\n      d=\"M5.4 4.5c0 .5-.4.9-.9.9s-.9-.4-.9-.9.4-.9.9-.9.9.4.9.9zM8.4 4.5c0 .5-.4.9-.9.9s-.9-.4-.9-.9.4-.9.9-.9.9.4.9.9zM3.3 6.7c.3-.2.6-.1.8.1.3.4.8.9 1.5 1 .6.2 1.4.1 2.4-1 .2-.2.6-.3.8 0 .2.2.3.6 0 .8-1.1 1.3-2.4 1.7-3.5 1.5-1-.2-1.8-.9-2.2-1.5-.2-.3-.1-.7.2-.9z\"\n    ></path>\n  </g>\n</svg>\n<svg\n  data-testid=\"connection-error\"\n  *ngIf=\"icon === 'connection-error'\"\n  width=\"78px\"\n  height=\"78px\"\n  viewBox=\"0 0 78 78\"\n  version=\"1.1\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n  xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n>\n  <!-- Generator: Sketch 52.6 (67491) - http://www.bohemiancoding.com/sketch -->\n  <title>Combined Shape</title>\n  <desc>Created with Sketch.</desc>\n  <g\n    id=\"Interactions\"\n    stroke=\"none\"\n    stroke-width=\"1\"\n    fill=\"none\"\n    fill-rule=\"evenodd\"\n  >\n    <g\n      id=\"Connection-Error-_-Connectivity\"\n      transform=\"translate(-270.000000, -30.000000)\"\n      fill=\"#CF1F25\"\n    >\n      <g\n        id=\"109-network-connection\"\n        transform=\"translate(270.000000, 30.000000)\"\n      >\n        <path\n          d=\"M66.4609744,11.414231 C81.6225232,26.5757798 81.6225232,51.157545 66.4609744,66.3188467 C51.2994256,81.4803954 26.7176604,81.4803954 11.5563587,66.3188467 C-3.60519004,51.1572979 -3.60519004,26.5755327 11.5563587,11.414231 C26.7179075,-3.74731776 51.2996727,-3.74731776 66.4609744,11.414231 Z M54.7853215,45.8823776 L54.7853215,40.5882574 C54.7853215,39.613638 53.9952341,38.8235506 53.0206147,38.8235506 L44.9576695,38.8235506 L41.428256,42.3529641 L51.255555,42.3529641 L51.255555,45.8823776 L54.7853215,45.8823776 Z M40.6659027,43.1153174 L37.8988425,45.8823776 L40.6659027,45.8823776 L40.6659027,43.1153174 Z M51.1764962,56.4702653 L58.2353232,56.4702653 C59.2099355,56.4702653 60.00003,55.6801708 60.00003,54.7055585 L60.00003,51.176145 C60.00003,50.2015327 59.2099355,49.4114382 58.2353232,49.4114382 L51.1764962,49.4114382 C50.2018839,49.4114382 49.4117894,50.2015327 49.4117894,51.176145 L49.4117894,54.7055585 C49.4117894,55.6801708 50.2018839,56.4702653 51.1764962,56.4702653 Z M35.2941353,56.4702653 L42.3529624,56.4702653 C43.3275746,56.4702653 44.1176691,55.6801708 44.1176691,54.7055585 L44.1176691,51.176145 C44.1176691,50.2015327 43.3275746,49.4114382 42.3529624,49.4114382 L35.2941353,49.4114382 C34.319523,49.4114382 33.5294285,50.2015327 33.5294285,51.176145 L33.5294285,54.7055585 C33.5294285,55.6801708 34.319523,56.4702653 35.2941353,56.4702653 Z M56.6964989,19.0874231 C56.007381,18.3985134 54.8903216,18.3985134 54.2012036,19.087423 L45.882376,27.4062507 L45.882376,19.4117761 C45.882376,18.4371568 45.0922885,17.6470693 44.1176692,17.6470693 L33.5294286,17.6470693 C32.5548092,17.6470694 31.7647218,18.4371568 31.7647218,19.4117761 L31.7647218,30.0000167 C31.7647219,30.9746363 32.5548092,31.7647237 33.5294285,31.7647237 L41.5239031,31.7647237 L34.4650761,38.8235508 L24.7058947,38.8235508 C23.7312753,38.8235508 22.9411879,39.6136382 22.9411879,40.5882575 L22.9411879,45.8823778 L26.4706014,45.8823778 L26.4706014,42.3529643 L30.9356624,42.3529643 L23.8768354,49.4117914 L19.4117743,49.4117914 C18.4371549,49.4117914 17.6470675,50.2018788 17.6470675,51.1764981 L17.6470675,54.7059117 C17.6504049,54.9674302 17.7129076,55.2248042 17.8298886,55.4587302 L16.4456526,56.8429662 C15.7446193,57.5200453 15.7252005,58.6372282 16.4022825,59.3382615 C17.0793616,60.0392948 18.1965445,60.0587136 18.8975778,59.3816316 C18.9122847,59.3674273 18.9267436,59.3529684 18.940948,59.3382615 L56.6964963,21.5830662 C57.3856425,20.8939094 57.3856425,19.7765747 56.6964963,19.0874179 Z\"\n          id=\"Combined-Shape\"\n        ></path>\n      </g>\n    </g>\n  </g>\n</svg>\n<svg\n  *ngIf=\"icon === 'send'\"\n  data-testid=\"send\"\n  height=\"17\"\n  viewBox=\"0 0 18 17\"\n  width=\"18\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n>\n  <title translate>streamChat.Send</title>\n  <path\n    d=\"M0 17.015l17.333-8.508L0 0v6.617l12.417 1.89L0 10.397z\"\n    fill=\"#006cff\"\n    fillRule=\"evenodd\"\n  />\n</svg>\n<svg\n  *ngIf=\"icon === 'file-upload'\"\n  data-testid=\"file-upload\"\n  height=\"14\"\n  width=\"14\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n>\n  <title translate>streamChat.Attach files</title>\n  <path\n    d=\"M1.667.333h10.666c.737 0 1.334.597 1.334 1.334v10.666c0 .737-.597 1.334-1.334 1.334H1.667a1.333 1.333 0 0 1-1.334-1.334V1.667C.333.93.93.333 1.667.333zm2 1.334a1.667 1.667 0 1 0 0 3.333 1.667 1.667 0 0 0 0-3.333zm-2 9.333v1.333h10.666v-4l-2-2-4 4-2-2L1.667 11z\"\n    fillRule=\"nonzero\"\n  />\n</svg>\n<svg\n  data-testid=\"retry\"\n  *ngIf=\"icon === 'retry'\"\n  width=\"22\"\n  height=\"20\"\n  viewBox=\"0 0 22 20\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n>\n  <path\n    d=\"M20 5.535V2a1 1 0 0 1 2 0v6a1 1 0 0 1-1 1h-6a1 1 0 0 1 0-2h3.638l-2.975-2.653a8 8 0 1 0 1.884 8.32 1 1 0 1 1 1.886.666A10 10 0 1 1 5.175 1.245c3.901-2.15 8.754-1.462 11.88 1.667L20 5.535z\"\n    fill=\"#FFF\"\n    fill-rule=\"nonzero\"\n  />\n</svg>\n<svg\n  *ngIf=\"icon === 'close'\"\n  data-testid=\"close\"\n  width=\"28\"\n  height=\"28\"\n  viewBox=\"0 0 28 28\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n  xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n>\n  <defs>\n    <path\n      d=\"M465 5c5.53 0 10 4.47 10 10s-4.47 10-10 10-10-4.47-10-10 4.47-10 10-10zm3.59 5L465 13.59 461.41 10 460 11.41l3.59 3.59-3.59 3.59 1.41 1.41 3.59-3.59 3.59 3.59 1.41-1.41-3.59-3.59 3.59-3.59-1.41-1.41z\"\n      id=\"b\"\n    />\n    <filter\n      x=\"-30%\"\n      y=\"-30%\"\n      width=\"160%\"\n      height=\"160%\"\n      filterUnits=\"objectBoundingBox\"\n      id=\"a\"\n    >\n      <feOffset in=\"SourceAlpha\" result=\"shadowOffsetOuter1\" />\n      <feGaussianBlur\n        stdDeviation=\"2\"\n        in=\"shadowOffsetOuter1\"\n        result=\"shadowBlurOuter1\"\n      />\n      <feColorMatrix\n        values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0\"\n        in=\"shadowBlurOuter1\"\n      />\n    </filter>\n  </defs>\n  <g transform=\"translate(-451 -1)\" fill-rule=\"nonzero\" fill=\"none\">\n    <use fill=\"#000\" filter=\"url(#a)\" xlink:href=\"#b\" />\n    <use fill=\"#FFF\" fill-rule=\"evenodd\" xlink:href=\"#b\" />\n  </g>\n</svg>\n<svg\n  *ngIf=\"icon === 'file'\"\n  data-testid=\"file\"\n  className=\"rfu-file-icon--small fa-file-fallback\"\n  [attr.height]=\"size || 20\"\n  [attr.width]=\"size || 20\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n  viewBox=\"0 0 384 512\"\n>\n  <path\n    d=\"M369.9 97.9L286 14C277 5 264.8-.1 252.1-.1H48C21.5 0 0 21.5 0 48v416c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48V131.9c0-12.7-5.1-25-14.1-34zM332.1 128H256V51.9l76.1 76.1zM48 464V48h160v104c0 13.3 10.7 24 24 24h104v288H48z\"\n    fill=\"#414D54\"\n  />\n</svg>\n<svg\n  *ngIf=\"icon === 'reply'\"\n  data-testid=\"reply\"\n  height=\"15\"\n  width=\"18\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n>\n  <path\n    d=\"M.56 10.946H.06l-.002-.498L.025.92a.5.5 0 1 1 1-.004l.032 9.029H9.06v-4l9 4.5-9 4.5v-4H.56z\"\n    fillRule=\"nonzero\"\n  />\n</svg>\n<svg\n  height=\"10\"\n  width=\"10\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n  data-testid=\"close-no-outline\"\n  *ngIf=\"icon === 'close-no-outline'\"\n>\n  <path\n    d=\"M9.916 1.027L8.973.084 5 4.058 1.027.084l-.943.943L4.058 5 .084 8.973l.943.943L5 5.942l3.973 3.974.943-.943L5.942 5z\"\n    fillRule=\"evenodd\"\n  />\n</svg>\n<svg\n  height=\"10\"\n  width=\"14\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n  data-testid=\"reply-in-thread\"\n  *ngIf=\"icon === 'reply-in-thread'\"\n>\n  <path\n    d=\"M8.516 3c4.78 0 4.972 6.5 4.972 6.5-1.6-2.906-2.847-3.184-4.972-3.184v2.872L3.772 4.994 8.516.5V3zM.484 5l4.5-4.237v1.78L2.416 5l2.568 2.125v1.828L.484 5z\"\n    fillRule=\"evenodd\"\n  />\n</svg>\n", directives: [{ type: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }] });
+    IconComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: IconComponent, selector: "stream-icon", inputs: { icon: "icon", size: "size" }, ngImport: i0__namespace, template: "<svg\n  data-testid=\"action-icon\"\n  *ngIf=\"icon === 'action-icon'\"\n  height=\"4\"\n  viewBox=\"0 0 11 4\"\n  width=\"11\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n>\n  <path\n    d=\"M1.5 3a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm4 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm4 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z\"\n    fillRule=\"nonzero\"\n  />\n</svg>\n<svg\n  *ngIf=\"icon === 'delivered-icon'\"\n  height=\"16\"\n  width=\"16\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n  data-testid=\"delivered-icon\"\n>\n  <path\n    d=\"M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0zm3.72 6.633a.955.955 0 1 0-1.352-1.352L6.986 8.663 5.633 7.31A.956.956 0 1 0 4.28 8.663l2.029 2.028a.956.956 0 0 0 1.353 0l4.058-4.058z\"\n    fill=\"#006CFF\"\n    fillRule=\"evenodd\"\n  />\n</svg>\n<svg\n  *ngIf=\"icon === 'reaction-icon'\"\n  height=\"12\"\n  viewBox=\"0 0 12 12\"\n  width=\"12\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n  data-testid=\"reaction-icon\"\n>\n  <g clipRule=\"evenodd\" fillRule=\"evenodd\">\n    <path\n      d=\"M6 1.2C3.3 1.2 1.2 3.3 1.2 6c0 2.7 2.1 4.8 4.8 4.8 2.7 0 4.8-2.1 4.8-4.8 0-2.7-2.1-4.8-4.8-4.8zM0 6c0-3.3 2.7-6 6-6s6 2.7 6 6-2.7 6-6 6-6-2.7-6-6z\"\n    ></path>\n    <path\n      d=\"M5.4 4.5c0 .5-.4.9-.9.9s-.9-.4-.9-.9.4-.9.9-.9.9.4.9.9zM8.4 4.5c0 .5-.4.9-.9.9s-.9-.4-.9-.9.4-.9.9-.9.9.4.9.9zM3.3 6.7c.3-.2.6-.1.8.1.3.4.8.9 1.5 1 .6.2 1.4.1 2.4-1 .2-.2.6-.3.8 0 .2.2.3.6 0 .8-1.1 1.3-2.4 1.7-3.5 1.5-1-.2-1.8-.9-2.2-1.5-.2-.3-.1-.7.2-.9z\"\n    ></path>\n  </g>\n</svg>\n<svg\n  data-testid=\"connection-error\"\n  *ngIf=\"icon === 'connection-error'\"\n  width=\"78px\"\n  height=\"78px\"\n  viewBox=\"0 0 78 78\"\n  version=\"1.1\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n  xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n>\n  <!-- Generator: Sketch 52.6 (67491) - http://www.bohemiancoding.com/sketch -->\n  <title>Combined Shape</title>\n  <desc>Created with Sketch.</desc>\n  <g\n    id=\"Interactions\"\n    stroke=\"none\"\n    stroke-width=\"1\"\n    fill=\"none\"\n    fill-rule=\"evenodd\"\n  >\n    <g\n      id=\"Connection-Error-_-Connectivity\"\n      transform=\"translate(-270.000000, -30.000000)\"\n      fill=\"#CF1F25\"\n    >\n      <g\n        id=\"109-network-connection\"\n        transform=\"translate(270.000000, 30.000000)\"\n      >\n        <path\n          d=\"M66.4609744,11.414231 C81.6225232,26.5757798 81.6225232,51.157545 66.4609744,66.3188467 C51.2994256,81.4803954 26.7176604,81.4803954 11.5563587,66.3188467 C-3.60519004,51.1572979 -3.60519004,26.5755327 11.5563587,11.414231 C26.7179075,-3.74731776 51.2996727,-3.74731776 66.4609744,11.414231 Z M54.7853215,45.8823776 L54.7853215,40.5882574 C54.7853215,39.613638 53.9952341,38.8235506 53.0206147,38.8235506 L44.9576695,38.8235506 L41.428256,42.3529641 L51.255555,42.3529641 L51.255555,45.8823776 L54.7853215,45.8823776 Z M40.6659027,43.1153174 L37.8988425,45.8823776 L40.6659027,45.8823776 L40.6659027,43.1153174 Z M51.1764962,56.4702653 L58.2353232,56.4702653 C59.2099355,56.4702653 60.00003,55.6801708 60.00003,54.7055585 L60.00003,51.176145 C60.00003,50.2015327 59.2099355,49.4114382 58.2353232,49.4114382 L51.1764962,49.4114382 C50.2018839,49.4114382 49.4117894,50.2015327 49.4117894,51.176145 L49.4117894,54.7055585 C49.4117894,55.6801708 50.2018839,56.4702653 51.1764962,56.4702653 Z M35.2941353,56.4702653 L42.3529624,56.4702653 C43.3275746,56.4702653 44.1176691,55.6801708 44.1176691,54.7055585 L44.1176691,51.176145 C44.1176691,50.2015327 43.3275746,49.4114382 42.3529624,49.4114382 L35.2941353,49.4114382 C34.319523,49.4114382 33.5294285,50.2015327 33.5294285,51.176145 L33.5294285,54.7055585 C33.5294285,55.6801708 34.319523,56.4702653 35.2941353,56.4702653 Z M56.6964989,19.0874231 C56.007381,18.3985134 54.8903216,18.3985134 54.2012036,19.087423 L45.882376,27.4062507 L45.882376,19.4117761 C45.882376,18.4371568 45.0922885,17.6470693 44.1176692,17.6470693 L33.5294286,17.6470693 C32.5548092,17.6470694 31.7647218,18.4371568 31.7647218,19.4117761 L31.7647218,30.0000167 C31.7647219,30.9746363 32.5548092,31.7647237 33.5294285,31.7647237 L41.5239031,31.7647237 L34.4650761,38.8235508 L24.7058947,38.8235508 C23.7312753,38.8235508 22.9411879,39.6136382 22.9411879,40.5882575 L22.9411879,45.8823778 L26.4706014,45.8823778 L26.4706014,42.3529643 L30.9356624,42.3529643 L23.8768354,49.4117914 L19.4117743,49.4117914 C18.4371549,49.4117914 17.6470675,50.2018788 17.6470675,51.1764981 L17.6470675,54.7059117 C17.6504049,54.9674302 17.7129076,55.2248042 17.8298886,55.4587302 L16.4456526,56.8429662 C15.7446193,57.5200453 15.7252005,58.6372282 16.4022825,59.3382615 C17.0793616,60.0392948 18.1965445,60.0587136 18.8975778,59.3816316 C18.9122847,59.3674273 18.9267436,59.3529684 18.940948,59.3382615 L56.6964963,21.5830662 C57.3856425,20.8939094 57.3856425,19.7765747 56.6964963,19.0874179 Z\"\n          id=\"Combined-Shape\"\n        ></path>\n      </g>\n    </g>\n  </g>\n</svg>\n<svg\n  *ngIf=\"icon === 'send'\"\n  data-testid=\"send\"\n  height=\"17\"\n  viewBox=\"0 0 18 17\"\n  width=\"18\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n>\n  <title translate>streamChat.Send</title>\n  <path\n    d=\"M0 17.015l17.333-8.508L0 0v6.617l12.417 1.89L0 10.397z\"\n    fill=\"#006cff\"\n    fillRule=\"evenodd\"\n  />\n</svg>\n<svg\n  *ngIf=\"icon === 'file-upload'\"\n  data-testid=\"file-upload\"\n  height=\"14\"\n  width=\"14\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n>\n  <title translate>streamChat.Attach files</title>\n  <path\n    d=\"M1.667.333h10.666c.737 0 1.334.597 1.334 1.334v10.666c0 .737-.597 1.334-1.334 1.334H1.667a1.333 1.333 0 0 1-1.334-1.334V1.667C.333.93.93.333 1.667.333zm2 1.334a1.667 1.667 0 1 0 0 3.333 1.667 1.667 0 0 0 0-3.333zm-2 9.333v1.333h10.666v-4l-2-2-4 4-2-2L1.667 11z\"\n    fillRule=\"nonzero\"\n  />\n</svg>\n<svg\n  data-testid=\"retry\"\n  *ngIf=\"icon === 'retry'\"\n  width=\"22\"\n  height=\"20\"\n  viewBox=\"0 0 22 20\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n>\n  <path\n    d=\"M20 5.535V2a1 1 0 0 1 2 0v6a1 1 0 0 1-1 1h-6a1 1 0 0 1 0-2h3.638l-2.975-2.653a8 8 0 1 0 1.884 8.32 1 1 0 1 1 1.886.666A10 10 0 1 1 5.175 1.245c3.901-2.15 8.754-1.462 11.88 1.667L20 5.535z\"\n    fill=\"#FFF\"\n    fill-rule=\"nonzero\"\n  />\n</svg>\n<svg\n  *ngIf=\"icon === 'close'\"\n  data-testid=\"close\"\n  width=\"28\"\n  height=\"28\"\n  viewBox=\"0 0 28 28\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n  xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n>\n  <defs>\n    <path\n      d=\"M465 5c5.53 0 10 4.47 10 10s-4.47 10-10 10-10-4.47-10-10 4.47-10 10-10zm3.59 5L465 13.59 461.41 10 460 11.41l3.59 3.59-3.59 3.59 1.41 1.41 3.59-3.59 3.59 3.59 1.41-1.41-3.59-3.59 3.59-3.59-1.41-1.41z\"\n      id=\"b\"\n    />\n    <filter\n      x=\"-30%\"\n      y=\"-30%\"\n      width=\"160%\"\n      height=\"160%\"\n      filterUnits=\"objectBoundingBox\"\n      id=\"a\"\n    >\n      <feOffset in=\"SourceAlpha\" result=\"shadowOffsetOuter1\" />\n      <feGaussianBlur\n        stdDeviation=\"2\"\n        in=\"shadowOffsetOuter1\"\n        result=\"shadowBlurOuter1\"\n      />\n      <feColorMatrix\n        values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0\"\n        in=\"shadowBlurOuter1\"\n      />\n    </filter>\n  </defs>\n  <g transform=\"translate(-451 -1)\" fill-rule=\"nonzero\" fill=\"none\">\n    <use fill=\"#000\" filter=\"url(#a)\" xlink:href=\"#b\" />\n    <use fill=\"#FFF\" fill-rule=\"evenodd\" xlink:href=\"#b\" />\n  </g>\n</svg>\n<svg\n  *ngIf=\"icon === 'file'\"\n  data-testid=\"file\"\n  className=\"rfu-file-icon--small fa-file-fallback\"\n  [attr.height]=\"size || 20\"\n  [attr.width]=\"size || 20\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n  viewBox=\"0 0 384 512\"\n>\n  <path\n    d=\"M369.9 97.9L286 14C277 5 264.8-.1 252.1-.1H48C21.5 0 0 21.5 0 48v416c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48V131.9c0-12.7-5.1-25-14.1-34zM332.1 128H256V51.9l76.1 76.1zM48 464V48h160v104c0 13.3 10.7 24 24 24h104v288H48z\"\n    fill=\"#414D54\"\n  />\n</svg>\n<svg\n  *ngIf=\"icon === 'reply'\"\n  data-testid=\"reply\"\n  height=\"15\"\n  width=\"18\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n>\n  <path\n    d=\"M.56 10.946H.06l-.002-.498L.025.92a.5.5 0 1 1 1-.004l.032 9.029H9.06v-4l9 4.5-9 4.5v-4H.56z\"\n    fillRule=\"nonzero\"\n  />\n</svg>\n<svg\n  height=\"10\"\n  width=\"10\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n  data-testid=\"close-no-outline\"\n  *ngIf=\"icon === 'close-no-outline'\"\n>\n  <path\n    d=\"M9.916 1.027L8.973.084 5 4.058 1.027.084l-.943.943L4.058 5 .084 8.973l.943.943L5 5.942l3.973 3.974.943-.943L5.942 5z\"\n    fillRule=\"evenodd\"\n  />\n</svg>\n<svg\n  height=\"10\"\n  width=\"14\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n  data-testid=\"reply-in-thread\"\n  *ngIf=\"icon === 'reply-in-thread'\"\n>\n  <path\n    d=\"M8.516 3c4.78 0 4.972 6.5 4.972 6.5-1.6-2.906-2.847-3.184-4.972-3.184v2.872L3.772 4.994 8.516.5V3zM.484 5l4.5-4.237v1.78L2.416 5l2.568 2.125v1.828L.484 5z\"\n    fillRule=\"evenodd\"\n  />\n</svg>\n", directives: [{ type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: IconComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -2119,15 +2208,24 @@
                     type: i0.Input
                 }] } });
 
+    /**
+     * The `LoadingIndicator` component displays a spinner to indicate that an action is in progress.
+     */
     var LoadingIndicatorComponent = /** @class */ (function () {
         function LoadingIndicatorComponent() {
+            /**
+             * The size of the indicator (in pixels)
+             */
             this.size = 15;
+            /**
+             * The color of the indicator
+             */
             this.color = '#006CFF';
         }
         return LoadingIndicatorComponent;
     }());
     LoadingIndicatorComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: LoadingIndicatorComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    LoadingIndicatorComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: LoadingIndicatorComponent, selector: "stream-loading-indicator", inputs: { size: "size", color: "color" }, ngImport: i0__namespace, template: "<div class=\"str-chat__loading-indicator\">\n  <svg\n    [attr.height]=\"size\"\n    viewBox=\"0 0 30 30\"\n    [attr.width]=\"size\"\n    data-testid=\"loading-indicator\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <defs>\n      <linearGradient id=\"a\" x1=\"50%\" x2=\"50%\" y1=\"0%\" y2=\"100%\">\n        <stop offset=\"0%\" stop-color=\"#FFF\" stop-opacity=\"0\" />\n        <stop\n          data-testid=\"stop-color\"\n          offset=\"100%\"\n          [attr.stop-color]=\"color\"\n          stop-opacity=\"1\"\n          [ngStyle]=\"{ stopColor: color }\"\n        />\n      </linearGradient>\n    </defs>\n    <path\n      d=\"M2.518 23.321l1.664-1.11A12.988 12.988 0 0 0 15 28c7.18 0 13-5.82 13-13S22.18 2 15 2V0c8.284 0 15 6.716 15 15 0 8.284-6.716 15-15 15-5.206 0-9.792-2.652-12.482-6.679z\"\n      fill=\"url(#a)\"\n      fillRule=\"evenodd\"\n    />\n  </svg>\n</div>\n", directives: [{ type: i4__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+    LoadingIndicatorComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: LoadingIndicatorComponent, selector: "stream-loading-indicator", inputs: { size: "size", color: "color" }, ngImport: i0__namespace, template: "<div class=\"str-chat__loading-indicator\">\n  <svg\n    [attr.height]=\"size\"\n    viewBox=\"0 0 30 30\"\n    [attr.width]=\"size\"\n    data-testid=\"loading-indicator\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <defs>\n      <linearGradient id=\"a\" x1=\"50%\" x2=\"50%\" y1=\"0%\" y2=\"100%\">\n        <stop offset=\"0%\" stop-color=\"#FFF\" stop-opacity=\"0\" />\n        <stop\n          data-testid=\"stop-color\"\n          offset=\"100%\"\n          [attr.stop-color]=\"color\"\n          stop-opacity=\"1\"\n          [ngStyle]=\"{ stopColor: color }\"\n        />\n      </linearGradient>\n    </defs>\n    <path\n      d=\"M2.518 23.321l1.664-1.11A12.988 12.988 0 0 0 15 28c7.18 0 13-5.82 13-13S22.18 2 15 2V0c8.284 0 15 6.716 15 15 0 8.284-6.716 15-15 15-5.206 0-9.792-2.652-12.482-6.679z\"\n      fill=\"url(#a)\"\n      fillRule=\"evenodd\"\n    />\n  </svg>\n</div>\n", directives: [{ type: i6__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: LoadingIndicatorComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -2230,12 +2328,12 @@
                 }] } });
 
     /**
-     *
+     * If you have an emoji picker in your application, you can propagate the selected emoji to the textarea using this service, more info can be found in [custom emoji picker guide](../code-examples/emoji-picker.mdx)
      */
     var EmojiInputService = /** @class */ (function () {
         function EmojiInputService() {
             /**
-             *
+             * If you have an emoji picker in your application, you can propagate the selected emoji to the textarea using this Subject, more info can be found in [custom emoji picker guide](../code-examples/emoji-picker.mdx)
              */
             this.emojiInput$ = new rxjs.Subject();
         }
@@ -2251,7 +2349,7 @@
             }], ctorParameters: function () { return []; } });
 
     /**
-     * The `MessageInputConfigService` is used to keep a consistent configuration among the different [`MessageInput`](../components/message-input.mdx) components if your UI has more than one input component.
+     * The `MessageInputConfigService` is used to keep a consistent configuration among the different [`MessageInput`](../components/MessageInputComponent.mdx) components if your UI has more than one input component.
      */
     var MessageInputConfigService = /** @class */ (function () {
         function MessageInputConfigService() {
@@ -2304,10 +2402,16 @@
                     }]
             }], ctorParameters: function () { return []; } });
 
+    /**
+     * The `AttachmentList` compontent displays the attachments of a message
+     */
     var AttachmentListComponent = /** @class */ (function () {
         function AttachmentListComponent(imageLoadService, channelService) {
             this.imageLoadService = imageLoadService;
             this.channelService = channelService;
+            /**
+             * The attachments to display
+             */
             this.attachments = [];
             this.orderedAttachments = [];
         }
@@ -2359,7 +2463,7 @@
         return AttachmentListComponent;
     }());
     AttachmentListComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: AttachmentListComponent, deps: [{ token: ImageLoadService }, { token: ChannelService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    AttachmentListComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: AttachmentListComponent, selector: "stream-attachment-list", inputs: { messageId: "messageId", attachments: "attachments" }, usesOnChanges: true, ngImport: i0__namespace, template: "<ng-container *ngFor=\"let attachment of orderedAttachments; trackBy: trackById\">\n  <div\n    data-testclass=\"attachment-container\"\n    class=\"str-chat__message-attachment str-chat__message-attachment--{{\n      attachment.type\n    }}\"\n    [class.str-chat__message-attachment--card]=\"isCard(attachment)\"\n    [class.str-chat-angular__message-attachment-file-single]=\"\n      isFile(attachment)\n    \"\n  >\n    <img\n      *ngIf=\"isImage(attachment)\"\n      class=\"str-chat__message-attachment--img\"\n      data-testclass=\"image\"\n      [src]=\"attachment.img_url || attachment.thumb_url || attachment.image_url\"\n      [alt]=\"attachment?.fallback\"\n      (load)=\"imageLoaded()\"\n    />\n    <div\n      *ngIf=\"isFile(attachment)\"\n      class=\"\n        str-chat__message-attachment-file--item\n        str-chat-angular__message-attachment-file-single\n      \"\n    >\n      <stream-icon icon=\"file\" [size]=\"30\"></stream-icon>\n      <div class=\"str-chat__message-attachment-file--item-text\">\n        <a\n          data-testclass=\"file-link\"\n          download\n          href=\"{{ attachment.asset_url }}\"\n          target=\"_blank\"\n        >\n          {{ attachment.title }}\n        </a>\n        <span data-testclass=\"size\" *ngIf=\"hasFileSize(attachment)\">{{\n          getFileSize(attachment)\n        }}</span>\n      </div>\n    </div>\n    <div\n      *ngIf=\"isCard(attachment)\"\n      class=\"str-chat__message-attachment-card str-chat__message-attachment-card--{{\n        attachment.type\n      }}\"\n    >\n      <div\n        *ngIf=\"attachment.image_url || attachment.thumb_url\"\n        class=\"str-chat__message-attachment-card--header\"\n      >\n        <img\n          data-testclass=\"card-img\"\n          alt=\"{{ attachment.image_url || attachment.thumb_url }}\"\n          src=\"{{ attachment.image_url || attachment.thumb_url }}\"\n        />\n      </div>\n      <div class=\"str-chat__message-attachment-card--content\">\n        <div class=\"str-chat__message-attachment-card--flex\">\n          <div\n            *ngIf=\"attachment.title\"\n            data-testclass=\"card-title\"\n            class=\"str-chat__message-attachment-card--title\"\n          >\n            {{ attachment.title }}\n          </div>\n          <div\n            *ngIf=\"attachment.text\"\n            class=\"str-chat__message-attachment-card--text\"\n            data-testclass=\"card-text\"\n          >\n            {{ attachment.text }}\n          </div>\n          <a\n            class=\"str-chat__message-attachment-card--url\"\n            *ngIf=\"attachment.title_link || attachment.og_scrape_url\"\n            data-testclass=\"url-link\"\n            noopener\n            noreferrer\n            href=\"{{ attachment.title_link || attachment.og_scrape_url }}\"\n            target=\"_blank\"\n          >\n            {{ trimUrl(attachment.title_link || attachment.og_scrape_url) }}\n          </a>\n        </div>\n      </div>\n    </div>\n    <div\n      class=\"str-chat__message-attachment-actions\"\n      *ngIf=\"attachment.actions && attachment.actions.length > 0\"\n    >\n      <div class=\"str-chat__message-attachment-actions-form\">\n        <button\n          *ngFor=\"let action of attachment.actions; trackBy: trackByActionValue\"\n          class=\"str-chat__message-attachment-actions-button str-chat__message-attachment-actions-button--{{\n            action.style\n          }}\"\n          data-testclass=\"attachment-action\"\n          (click)=\"sendAction(action)\"\n          (keyup.enter)=\"sendAction(action)\"\n        >\n          {{ action.text }}\n        </button>\n      </div>\n    </div>\n  </div>\n</ng-container>\n", components: [{ type: IconComponent, selector: "stream-icon", inputs: ["icon", "size"] }], directives: [{ type: i4__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    AttachmentListComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: AttachmentListComponent, selector: "stream-attachment-list", inputs: { messageId: "messageId", attachments: "attachments" }, usesOnChanges: true, ngImport: i0__namespace, template: "<ng-container *ngFor=\"let attachment of orderedAttachments; trackBy: trackById\">\n  <div\n    data-testclass=\"attachment-container\"\n    class=\"str-chat__message-attachment str-chat__message-attachment--{{\n      attachment.type\n    }}\"\n    [class.str-chat__message-attachment--card]=\"isCard(attachment)\"\n    [class.str-chat-angular__message-attachment-file-single]=\"\n      isFile(attachment)\n    \"\n  >\n    <img\n      *ngIf=\"isImage(attachment)\"\n      class=\"str-chat__message-attachment--img\"\n      data-testclass=\"image\"\n      [src]=\"attachment.img_url || attachment.thumb_url || attachment.image_url\"\n      [alt]=\"attachment?.fallback\"\n      (load)=\"imageLoaded()\"\n    />\n    <div\n      *ngIf=\"isFile(attachment)\"\n      class=\"\n        str-chat__message-attachment-file--item\n        str-chat-angular__message-attachment-file-single\n      \"\n    >\n      <stream-icon icon=\"file\" [size]=\"30\"></stream-icon>\n      <div class=\"str-chat__message-attachment-file--item-text\">\n        <a\n          data-testclass=\"file-link\"\n          download\n          href=\"{{ attachment.asset_url }}\"\n          target=\"_blank\"\n        >\n          {{ attachment.title }}\n        </a>\n        <span data-testclass=\"size\" *ngIf=\"hasFileSize(attachment)\">{{\n          getFileSize(attachment)\n        }}</span>\n      </div>\n    </div>\n    <div\n      *ngIf=\"isCard(attachment)\"\n      class=\"str-chat__message-attachment-card str-chat__message-attachment-card--{{\n        attachment.type\n      }}\"\n    >\n      <div\n        *ngIf=\"attachment.image_url || attachment.thumb_url\"\n        class=\"str-chat__message-attachment-card--header\"\n      >\n        <img\n          data-testclass=\"card-img\"\n          alt=\"{{ attachment.image_url || attachment.thumb_url }}\"\n          src=\"{{ attachment.image_url || attachment.thumb_url }}\"\n        />\n      </div>\n      <div class=\"str-chat__message-attachment-card--content\">\n        <div class=\"str-chat__message-attachment-card--flex\">\n          <div\n            *ngIf=\"attachment.title\"\n            data-testclass=\"card-title\"\n            class=\"str-chat__message-attachment-card--title\"\n          >\n            {{ attachment.title }}\n          </div>\n          <div\n            *ngIf=\"attachment.text\"\n            class=\"str-chat__message-attachment-card--text\"\n            data-testclass=\"card-text\"\n          >\n            {{ attachment.text }}\n          </div>\n          <a\n            class=\"str-chat__message-attachment-card--url\"\n            *ngIf=\"attachment.title_link || attachment.og_scrape_url\"\n            data-testclass=\"url-link\"\n            noopener\n            noreferrer\n            href=\"{{ attachment.title_link || attachment.og_scrape_url }}\"\n            target=\"_blank\"\n          >\n            {{ trimUrl(attachment.title_link || attachment.og_scrape_url) }}\n          </a>\n        </div>\n      </div>\n    </div>\n    <div\n      class=\"str-chat__message-attachment-actions\"\n      *ngIf=\"attachment.actions && attachment.actions.length > 0\"\n    >\n      <div class=\"str-chat__message-attachment-actions-form\">\n        <button\n          *ngFor=\"let action of attachment.actions; trackBy: trackByActionValue\"\n          class=\"str-chat__message-attachment-actions-button str-chat__message-attachment-actions-button--{{\n            action.style\n          }}\"\n          data-testclass=\"attachment-action\"\n          (click)=\"sendAction(action)\"\n          (keyup.enter)=\"sendAction(action)\"\n        >\n          {{ action.text }}\n        </button>\n      </div>\n    </div>\n  </div>\n</ng-container>\n", components: [{ type: IconComponent, selector: "stream-icon", inputs: ["icon", "size"] }], directives: [{ type: i6__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: AttachmentListComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -2373,6 +2477,9 @@
                     type: i0.Input
                 }] } });
 
+    /**
+     * The `AttachmentPreviewList` compontent displays a preview of the attachments uploaded to a message. Users can delete attachments using the preview component, or retry upload if it failed previously.
+     */
     var AttachmentPreviewListComponent = /** @class */ (function () {
         function AttachmentPreviewListComponent(attachmentService) {
             this.attachmentService = attachmentService;
@@ -2408,7 +2515,7 @@
         return AttachmentPreviewListComponent;
     }());
     AttachmentPreviewListComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: AttachmentPreviewListComponent, deps: [{ token: AttachmentService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    AttachmentPreviewListComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: AttachmentPreviewListComponent, selector: "stream-attachment-preview-list", ngImport: i0__namespace, template: "<div class=\"rfu-image-previewer\" *ngIf=\"(attachmentUploads$ | async)?.length\">\n  <ng-container\n    *ngFor=\"\n      let attachmentUpload of attachmentUploads$ | async;\n      trackBy: trackByFile\n    \"\n  >\n    <div\n      *ngIf=\"attachmentUpload.type === 'image'\"\n      class=\"rfu-image-previewer__image\"\n      [class.rfu-image-previewer__image--loaded]=\"\n        attachmentUpload.state === 'success'\n      \"\n      data-testclass=\"attachment-image-preview\"\n    >\n      <div\n        *ngIf=\"attachmentUpload.state === 'error'\"\n        class=\"rfu-image-previewer__retry\"\n        (click)=\"retryAttachmentUpload(attachmentUpload.file)\"\n        (keyup.enter)=\"retryAttachmentUpload(attachmentUpload.file)\"\n        data-testclass=\"upload-error\"\n      >\n        <stream-icon icon=\"retry\"></stream-icon>\n      </div>\n      <div class=\"rfu-thumbnail__wrapper\" style=\"width: 100; height: 100\">\n        <div class=\"rfu-thumbnail__overlay\">\n          <div\n            class=\"rfu-icon-button\"\n            data-testclass=\"delete-attachment\"\n            role=\"button\"\n            (click)=\"deleteAttachment(attachmentUpload)\"\n            (keyup.enter)=\"deleteAttachment(attachmentUpload)\"\n          >\n            <stream-icon icon=\"close\"></stream-icon>\n          </div>\n        </div>\n        <img\n          *ngIf=\"attachmentUpload.url || attachmentUpload.previewUri\"\n          src=\"{{\n            attachmentUpload.url\n              ? attachmentUpload.url\n              : attachmentUpload.previewUri\n          }}\"\n          alt=\"attachmentUpload.file.name\"\n          class=\"rfu-thumbnail__image\"\n          data-testclass=\"attachment-image\"\n        />\n      </div>\n      <stream-loading-indicator\n        data-testclass=\"loading-indicator\"\n        color=\"rgba(255,255,255,0.7)\"\n        *ngIf=\"attachmentUpload.state === 'uploading'\"\n      ></stream-loading-indicator>\n    </div>\n    <div\n      class=\"rfu-file-previewer\"\n      *ngIf=\"attachmentUpload.type === 'file'\"\n      data-testclass=\"attachment-file-preview\"\n    >\n      <ol>\n        <li\n          class=\"rfu-file-previewer__file\"\n          [class.rfu-file-previewer__file--uploading]=\"\n            attachmentUpload.state === 'uploading'\n          \"\n          [class.rfu-file-previewer__file--failed]=\"\n            attachmentUpload.state === 'error'\n          \"\n        >\n          <stream-icon icon=\"file\"></stream-icon>\n\n          <a\n            data-testclass=\"file-download-link\"\n            href=\"{{ attachmentUpload.url }}\"\n            (click)=\"attachmentUpload.url ? null : $event.preventDefault()\"\n            (keyup.enter)=\"\n              attachmentUpload.url ? null : $event.preventDefault()\n            \"\n            download\n          >\n            {{ attachmentUpload.file.name }}\n            <ng-container *ngIf=\"attachmentUpload.state === 'error'\">\n              <div\n                data-testclass=\"file-upload-retry\"\n                class=\"rfu-file-previewer__failed\"\n                (click)=\"retryAttachmentUpload(attachmentUpload.file)\"\n                (keyup.enter)=\"retryAttachmentUpload(attachmentUpload.file)\"\n                translate\n              >\n                streamChat.failed\n              </div>\n              <div\n                class=\"rfu-file-previewer__retry\"\n                (click)=\"retryAttachmentUpload(attachmentUpload.file)\"\n                (keyup.enter)=\"retryAttachmentUpload(attachmentUpload.file)\"\n                translate\n              >\n                streamChat.retry\n              </div>\n            </ng-container>\n          </a>\n\n          <span\n            data-testclass=\"file-delete\"\n            class=\"rfu-file-previewer__close-button\"\n            (click)=\"deleteAttachment(attachmentUpload)\"\n            (keyup.enter)=\"deleteAttachment(attachmentUpload)\"\n          >\n            \u2718\n          </span>\n          <div\n            *ngIf=\"attachmentUpload.state === 'uploading'\"\n            class=\"rfu-file-previewer__loading-indicator\"\n          >\n            <stream-loading-indicator></stream-loading-indicator>\n          </div>\n        </li>\n      </ol>\n    </div>\n  </ng-container>\n</div>\n", components: [{ type: IconComponent, selector: "stream-icon", inputs: ["icon", "size"] }, { type: LoadingIndicatorComponent, selector: "stream-loading-indicator", inputs: ["size", "color"] }], directives: [{ type: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2__namespace.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }], pipes: { "async": i4__namespace.AsyncPipe } });
+    AttachmentPreviewListComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: AttachmentPreviewListComponent, selector: "stream-attachment-preview-list", ngImport: i0__namespace, template: "<div class=\"rfu-image-previewer\" *ngIf=\"(attachmentUploads$ | async)?.length\">\n  <ng-container\n    *ngFor=\"\n      let attachmentUpload of attachmentUploads$ | async;\n      trackBy: trackByFile\n    \"\n  >\n    <div\n      *ngIf=\"attachmentUpload.type === 'image'\"\n      class=\"rfu-image-previewer__image\"\n      [class.rfu-image-previewer__image--loaded]=\"\n        attachmentUpload.state === 'success'\n      \"\n      data-testclass=\"attachment-image-preview\"\n    >\n      <div\n        *ngIf=\"attachmentUpload.state === 'error'\"\n        class=\"rfu-image-previewer__retry\"\n        (click)=\"retryAttachmentUpload(attachmentUpload.file)\"\n        (keyup.enter)=\"retryAttachmentUpload(attachmentUpload.file)\"\n        data-testclass=\"upload-error\"\n      >\n        <stream-icon icon=\"retry\"></stream-icon>\n      </div>\n      <div class=\"rfu-thumbnail__wrapper\" style=\"width: 100; height: 100\">\n        <div class=\"rfu-thumbnail__overlay\">\n          <div\n            class=\"rfu-icon-button\"\n            data-testclass=\"delete-attachment\"\n            role=\"button\"\n            (click)=\"deleteAttachment(attachmentUpload)\"\n            (keyup.enter)=\"deleteAttachment(attachmentUpload)\"\n          >\n            <stream-icon icon=\"close\"></stream-icon>\n          </div>\n        </div>\n        <img\n          *ngIf=\"attachmentUpload.url || attachmentUpload.previewUri\"\n          src=\"{{\n            attachmentUpload.url\n              ? attachmentUpload.url\n              : attachmentUpload.previewUri\n          }}\"\n          alt=\"attachmentUpload.file.name\"\n          class=\"rfu-thumbnail__image\"\n          data-testclass=\"attachment-image\"\n        />\n      </div>\n      <stream-loading-indicator\n        data-testclass=\"loading-indicator\"\n        color=\"rgba(255,255,255,0.7)\"\n        *ngIf=\"attachmentUpload.state === 'uploading'\"\n      ></stream-loading-indicator>\n    </div>\n    <div\n      class=\"rfu-file-previewer\"\n      *ngIf=\"attachmentUpload.type === 'file'\"\n      data-testclass=\"attachment-file-preview\"\n    >\n      <ol>\n        <li\n          class=\"rfu-file-previewer__file\"\n          [class.rfu-file-previewer__file--uploading]=\"\n            attachmentUpload.state === 'uploading'\n          \"\n          [class.rfu-file-previewer__file--failed]=\"\n            attachmentUpload.state === 'error'\n          \"\n        >\n          <stream-icon icon=\"file\"></stream-icon>\n\n          <a\n            data-testclass=\"file-download-link\"\n            href=\"{{ attachmentUpload.url }}\"\n            (click)=\"attachmentUpload.url ? null : $event.preventDefault()\"\n            (keyup.enter)=\"\n              attachmentUpload.url ? null : $event.preventDefault()\n            \"\n            download\n          >\n            {{ attachmentUpload.file.name }}\n            <ng-container *ngIf=\"attachmentUpload.state === 'error'\">\n              <div\n                data-testclass=\"file-upload-retry\"\n                class=\"rfu-file-previewer__failed\"\n                (click)=\"retryAttachmentUpload(attachmentUpload.file)\"\n                (keyup.enter)=\"retryAttachmentUpload(attachmentUpload.file)\"\n                translate\n              >\n                streamChat.failed\n              </div>\n              <div\n                class=\"rfu-file-previewer__retry\"\n                (click)=\"retryAttachmentUpload(attachmentUpload.file)\"\n                (keyup.enter)=\"retryAttachmentUpload(attachmentUpload.file)\"\n                translate\n              >\n                streamChat.retry\n              </div>\n            </ng-container>\n          </a>\n\n          <span\n            data-testclass=\"file-delete\"\n            class=\"rfu-file-previewer__close-button\"\n            (click)=\"deleteAttachment(attachmentUpload)\"\n            (keyup.enter)=\"deleteAttachment(attachmentUpload)\"\n          >\n            \u2718\n          </span>\n          <div\n            *ngIf=\"attachmentUpload.state === 'uploading'\"\n            class=\"rfu-file-previewer__loading-indicator\"\n          >\n            <stream-loading-indicator></stream-loading-indicator>\n          </div>\n        </li>\n      </ol>\n    </div>\n  </ng-container>\n</div>\n", components: [{ type: IconComponent, selector: "stream-icon", inputs: ["icon", "size"] }, { type: LoadingIndicatorComponent, selector: "stream-loading-indicator", inputs: ["size", "color"] }], directives: [{ type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2__namespace.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }], pipes: { "async": i6__namespace.AsyncPipe } });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: AttachmentPreviewListComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -2418,6 +2525,9 @@
                     }]
             }], ctorParameters: function () { return [{ type: AttachmentService }]; } });
 
+    /**
+     * The `MessageInput` component displays an input where users can type their messages and upload files, and sends the message to the active channel. The component can be used to compose new messages or update existing ones. To send messages, the chat user needs to have the necessary [channel capability](https://getstream.io/chat/docs/javascript/channel_capabilities/?language=javascript).
+     */
     var MessageInputComponent = /** @class */ (function () {
         function MessageInputComponent(channelService, notificationService, attachmentService, configService, textareaType, componentFactoryResolver, cdRef, chatClient, emojiInputService) {
             var _this = this;
@@ -2430,10 +2540,17 @@
             this.cdRef = cdRef;
             this.chatClient = chatClient;
             this.emojiInputService = emojiInputService;
+            /**
+             * Determines if the message is being dispalyed in a channel or in a [thread](https://getstream.io/chat/docs/javascript/threads/?language=javascript).
+             */
             this.mode = 'main';
+            /**
+             * Emits when a message was successfuly sent or updated
+             */
             this.messageUpdate = new i0.EventEmitter();
             this.textareaValue = '';
             this.mentionedUsers = [];
+            this.typingStart$ = new rxjs.Subject();
             this.subscriptions = [];
             this.isViewInited = false;
             this.subscriptions.push(this.attachmentService.attachmentUploadInProgressCounter$.subscribe(function (counter) {
@@ -2476,6 +2593,7 @@
             this.commandAutocompleteItemTemplate =
                 this.configService.commandAutocompleteItemTemplate;
             this.emojiPickerTemplate = this.configService.emojiPickerTemplate;
+            this.subscriptions.push(this.typingStart$.subscribe(function () { return void _this.channelService.typingStarted(_this.parentMessageId); }));
         }
         MessageInputComponent.prototype.ngAfterViewInit = function () {
             this.isViewInited = true;
@@ -2526,7 +2644,7 @@
         MessageInputComponent.prototype.messageSent = function () {
             var _a;
             return __awaiter(this, void 0, void 0, function () {
-                var attachmentUploadInProgressCounter, attachments, text, parentMessageId, error_1;
+                var attachmentUploadInProgressCounter, attachments, text, error_1;
                 return __generator(this, function (_12) {
                     switch (_12.label) {
                         case 0:
@@ -2552,18 +2670,12 @@
                             if (!this.isUpdate) {
                                 this.textareaValue = '';
                             }
-                            parentMessageId = undefined;
-                            if (this.mode === 'thread') {
-                                this.channelService.activeParentMessageId$
-                                    .pipe(operators.first())
-                                    .subscribe(function (id) { return (parentMessageId = id); });
-                            }
                             _12.label = 1;
                         case 1:
                             _12.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, parentMessageId, (_a = this.quotedMessage) === null || _a === void 0 ? void 0 : _a.id))];
+                                    : this.channelService.sendMessage(text, attachments, this.mentionedUsers, this.parentMessageId, (_a = this.quotedMessage) === null || _a === void 0 ? void 0 : _a.id))];
                         case 2:
                             _12.sent();
                             this.messageUpdate.emit();
@@ -2578,6 +2690,7 @@
                             }
                             return [3 /*break*/, 4];
                         case 4:
+                            void this.channelService.typingStopped(this.parentMessageId);
                             if (this.quotedMessage) {
                                 this.deselectMessageToQuote();
                             }
@@ -2727,10 +2840,23 @@
                 this.initTextarea();
             }
         };
+        Object.defineProperty(MessageInputComponent.prototype, "parentMessageId", {
+            get: function () {
+                var parentMessageId = undefined;
+                if (this.mode === 'thread') {
+                    this.channelService.activeParentMessageId$
+                        .pipe(operators.first())
+                        .subscribe(function (id) { return (parentMessageId = id); });
+                }
+                return parentMessageId;
+            },
+            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 }, { token: i0__namespace.ChangeDetectorRef }, { token: ChatClientService }, { token: EmojiInputService }], 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", commandAutocompleteItemTemplate: "commandAutocompleteItemTemplate", emojiPickerTemplate: "emojiPickerTemplate", mode: "mode", acceptedFileTypes: "acceptedFileTypes", isMultipleFileUploadEnabled: "isMultipleFileUploadEnabled", message: "message" }, outputs: { messageUpdate: "messageUpdate" }, providers: [AttachmentService, EmojiInputService], viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }, { propertyName: "textareaAnchor", first: true, predicate: TextareaDirective, descendants: true }], usesOnChanges: true, ngImport: i0__namespace, template: "<div\n  class=\"{{\n    mode === 'main' ? 'str-chat__input-flat' : 'str-chat__small-message-input'\n  }}\"\n  [class.str-chat__input-flat-has-attachments]=\"\n    (attachmentUploads$ | async)!.length > 0\n  \"\n  [class.str-chat__input-flat-quoted]=\"!!quotedMessage\"\n>\n  <div\n    data-testid=\"quoted-message-container\"\n    class=\"quoted-message-preview\"\n    *ngIf=\"quotedMessage\"\n  >\n    <div class=\"quoted-message-preview-header\">\n      <div>{{ \"streamChat.Reply to Message\" | translate }}</div>\n      <button\n        class=\"str-chat__square-button\"\n        data-testid=\"remove-quote\"\n        (click)=\"deselectMessageToQuote()\"\n        (keyup.enter)=\"deselectMessageToQuote()\"\n      >\n        <stream-icon\n          icon=\"close-no-outline\"\n          style=\"font-size: 10px; line-height: 10px\"\n        ></stream-icon>\n      </button>\n    </div>\n    <div class=\"quoted-message-preview-content\">\n      <stream-avatar\n        data-testid=\"qouted-message-avatar\"\n        class=\"str-chat-angular__avatar-host\"\n        [imageUrl]=\"quotedMessage?.user?.image\"\n        [name]=\"quotedMessage?.user?.name || quotedMessage?.user?.id\"\n        [size]=\"20\"\n      ></stream-avatar>\n      <div class=\"quoted-message-preview-content-inner\">\n        <stream-attachment-list\n          *ngIf=\"\n            quotedMessage?.attachments && quotedMessage?.attachments?.length\n          \"\n          [attachments]=\"quotedMessageAttachments\"\n          [messageId]=\"quotedMessage?.id\"\n        ></stream-attachment-list>\n        <div\n          data-testid=\"quoted-message-text\"\n          [innerHTML]=\"quotedMessage?.html || quotedMessage?.text\"\n        ></div>\n      </div>\n    </div>\n  </div>\n  <div class=\"str-chat__input-flat-wrapper\" style=\"width: 100%\">\n    <div\n      class=\"{{\n        mode === 'main'\n          ? 'str-chat__input-flat--textarea-wrapper'\n          : 'str-chat__small-message-input--textarea-wrapper'\n      }}\"\n    >\n      <stream-attachment-preview-list\n        class=\"rfu-image-previewer-angular-host\"\n      ></stream-attachment-preview-list>\n      <div class=\"rta str-chat__textarea str-chat-angular__textarea\">\n        <ng-container *ngIf=\"emojiPickerTemplate\">\n          <div\n            class=\"\n              str-chat__input-flat-emojiselect\n              str-chat-angular__emojiselect\n            \"\n          >\n            <ng-container\n              *ngTemplateOutlet=\"\n                emojiPickerTemplate;\n                context: { emojiInput$: emojiInputService.emojiInput$ }\n              \"\n            ></ng-container>\n          </div>\n        </ng-container>\n        <ng-template\n          *ngIf=\"canSendMessages; else notAllowed\"\n          streamTextarea\n          [(value)]=\"textareaValue\"\n          (send)=\"messageSent()\"\n          [componentRef]=\"textareaRef\"\n          (userMentions)=\"mentionedUsers = $event\"\n          [areMentionsEnabled]=\"areMentionsEnabled\"\n          [mentionAutocompleteItemTemplate]=\"mentionAutocompleteItemTemplate\"\n          [commandAutocompleteItemTemplate]=\"commandAutocompleteItemTemplate\"\n          [mentionScope]=\"mentionScope\"\n        ></ng-template>\n        <ng-template #notAllowed>\n          <textarea\n            disabled\n            rows=\"1\"\n            [value]=\"\n              (mode === 'thread'\n                ? 'You can\\'t send thread replies in this channel'\n                : 'streamChat.You can\\'t send messages in this channel'\n              ) | translate\n            \"\n            class=\"rta__textarea str-chat__textarea__textarea\"\n          ></textarea>\n        </ng-template>\n      </div>\n      <div\n        *ngIf=\"isFileUploadEnabled && isFileUploadAuthorized && canSendMessages\"\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      *ngIf=\"canSendMessages\"\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: AvatarComponent, selector: "stream-avatar", inputs: ["name", "imageUrl", "size"] }, { type: AttachmentListComponent, selector: "stream-attachment-list", inputs: ["messageId", "attachments"] }, { type: AttachmentPreviewListComponent, selector: "stream-attachment-preview-list" }], directives: [{ type: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: TextareaDirective, selector: "[streamTextarea]", inputs: ["componentRef", "areMentionsEnabled", "mentionAutocompleteItemTemplate", "mentionScope", "commandAutocompleteItemTemplate", "value"], outputs: ["valueChange", "send", "userMentions"] }], pipes: { "async": i4__namespace.AsyncPipe, "translate": i2__namespace.TranslatePipe } });
+    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", commandAutocompleteItemTemplate: "commandAutocompleteItemTemplate", emojiPickerTemplate: "emojiPickerTemplate", mode: "mode", acceptedFileTypes: "acceptedFileTypes", isMultipleFileUploadEnabled: "isMultipleFileUploadEnabled", message: "message" }, outputs: { messageUpdate: "messageUpdate" }, providers: [AttachmentService, EmojiInputService], viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }, { propertyName: "textareaAnchor", first: true, predicate: TextareaDirective, descendants: true }], usesOnChanges: true, ngImport: i0__namespace, template: "<div\n  class=\"{{\n    mode === 'main' ? 'str-chat__input-flat' : 'str-chat__small-message-input'\n  }}\"\n  [class.str-chat__input-flat-has-attachments]=\"\n    (attachmentUploads$ | async)!.length > 0\n  \"\n  [class.str-chat__input-flat-quoted]=\"!!quotedMessage\"\n>\n  <div\n    data-testid=\"quoted-message-container\"\n    class=\"quoted-message-preview\"\n    *ngIf=\"quotedMessage\"\n  >\n    <div class=\"quoted-message-preview-header\">\n      <div>{{ \"streamChat.Reply to Message\" | translate }}</div>\n      <button\n        class=\"str-chat__square-button\"\n        data-testid=\"remove-quote\"\n        (click)=\"deselectMessageToQuote()\"\n        (keyup.enter)=\"deselectMessageToQuote()\"\n      >\n        <stream-icon\n          icon=\"close-no-outline\"\n          style=\"font-size: 10px; line-height: 10px\"\n        ></stream-icon>\n      </button>\n    </div>\n    <div class=\"quoted-message-preview-content\">\n      <stream-avatar\n        data-testid=\"qouted-message-avatar\"\n        class=\"str-chat-angular__avatar-host\"\n        [imageUrl]=\"quotedMessage?.user?.image\"\n        [name]=\"quotedMessage?.user?.name || quotedMessage?.user?.id\"\n        [size]=\"20\"\n      ></stream-avatar>\n      <div class=\"quoted-message-preview-content-inner\">\n        <stream-attachment-list\n          *ngIf=\"\n            quotedMessage?.attachments && quotedMessage?.attachments?.length\n          \"\n          [attachments]=\"quotedMessageAttachments\"\n          [messageId]=\"quotedMessage?.id\"\n        ></stream-attachment-list>\n        <div\n          data-testid=\"quoted-message-text\"\n          [innerHTML]=\"quotedMessage?.html || quotedMessage?.text\"\n        ></div>\n      </div>\n    </div>\n  </div>\n  <div class=\"str-chat__input-flat-wrapper\" style=\"width: 100%\">\n    <div\n      class=\"{{\n        mode === 'main'\n          ? 'str-chat__input-flat--textarea-wrapper'\n          : 'str-chat__small-message-input--textarea-wrapper'\n      }}\"\n    >\n      <stream-attachment-preview-list\n        class=\"rfu-image-previewer-angular-host\"\n      ></stream-attachment-preview-list>\n      <div class=\"rta str-chat__textarea str-chat-angular__textarea\">\n        <ng-container *ngIf=\"emojiPickerTemplate\">\n          <div\n            class=\"\n              str-chat__input-flat-emojiselect\n              str-chat-angular__emojiselect\n            \"\n          >\n            <ng-container\n              *ngTemplateOutlet=\"\n                emojiPickerTemplate;\n                context: { emojiInput$: emojiInputService.emojiInput$ }\n              \"\n            ></ng-container>\n          </div>\n        </ng-container>\n        <ng-template\n          *ngIf=\"canSendMessages; else notAllowed\"\n          streamTextarea\n          [(value)]=\"textareaValue\"\n          (valueChange)=\"typingStart$.next()\"\n          (send)=\"messageSent()\"\n          [componentRef]=\"textareaRef\"\n          (userMentions)=\"mentionedUsers = $event\"\n          [areMentionsEnabled]=\"areMentionsEnabled\"\n          [mentionAutocompleteItemTemplate]=\"mentionAutocompleteItemTemplate\"\n          [commandAutocompleteItemTemplate]=\"commandAutocompleteItemTemplate\"\n          [mentionScope]=\"mentionScope\"\n        ></ng-template>\n        <ng-template #notAllowed>\n          <textarea\n            disabled\n            rows=\"1\"\n            [value]=\"\n              (mode === 'thread'\n                ? 'You can\\'t send thread replies in this channel'\n                : 'streamChat.You can\\'t send messages in this channel'\n              ) | translate\n            \"\n            class=\"rta__textarea str-chat__textarea__textarea\"\n          ></textarea>\n        </ng-template>\n      </div>\n      <div\n        *ngIf=\"isFileUploadEnabled && isFileUploadAuthorized && canSendMessages\"\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      *ngIf=\"canSendMessages\"\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: AvatarComponent, selector: "stream-avatar", inputs: ["name", "imageUrl", "size"] }, { type: AttachmentListComponent, selector: "stream-attachment-list", inputs: ["messageId", "attachments"] }, { type: AttachmentPreviewListComponent, selector: "stream-attachment-preview-list" }], directives: [{ type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: TextareaDirective, selector: "[streamTextarea]", inputs: ["componentRef", "areMentionsEnabled", "mentionAutocompleteItemTemplate", "mentionScope", "commandAutocompleteItemTemplate", "value"], outputs: ["valueChange", "send", "userMentions"] }], pipes: { "async": i6__namespace.AsyncPipe, "translate": i2__namespace.TranslatePipe } });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: MessageInputComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -2774,10 +2900,19 @@
                     args: [TextareaDirective, { static: false }]
                 }] } });
 
+    /**
+     * The `Modal` component displays its content in an overlay. The modal can be closed with a close button, if the user clicks outside of the modal content, or if the escape button is pressed. The modal can also be closed from outside.
+     */
     var ModalComponent = /** @class */ (function () {
         function ModalComponent() {
             var _this = this;
+            /**
+             * If `true` the modal will be displayed, if `false` the modal will be hidden
+             */
             this.isOpen = false;
+            /**
+             * Emits `true` if the modal becomes visible, and `false` if the modal is closed.
+             */
             this.isOpenChange = new i0.EventEmitter();
             this.watchForEscPress = function (event) {
                 if (event.key === 'Escape') {
@@ -2836,6 +2971,9 @@
                     args: ['content']
                 }] } });
 
+    /**
+     * The `Notification` component displays a notification within the [`NotificationList`](./NotificationListComponent.mdx)
+     */
     var NotificationComponent = /** @class */ (function () {
         function NotificationComponent() {
         }
@@ -2854,6 +2992,9 @@
                     type: i0.Input
                 }] } });
 
+    /**
+     * The `NotificationList` component displays the list of active notifications.
+     */
     var NotificationListComponent = /** @class */ (function () {
         function NotificationListComponent(notificationService) {
             this.notificationService = notificationService;
@@ -2865,7 +3006,7 @@
         return NotificationListComponent;
     }());
     NotificationListComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: NotificationListComponent, deps: [{ token: NotificationService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    NotificationListComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: NotificationListComponent, selector: "stream-notification-list", ngImport: i0__namespace, template: "<div class=\"str-chat__list-notifications\">\n  <stream-notification\n    *ngFor=\"let notification of notifications$ | async; trackBy: trackByItem\"\n    [type]=\"notification.type\"\n    ><div data-testclass=\"notification-content\">\n      {{ notification.text | translate: notification.translateParams }}\n    </div></stream-notification\n  >\n</div>\n", components: [{ type: NotificationComponent, selector: "stream-notification", inputs: ["type"] }], directives: [{ type: i4__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i4__namespace.AsyncPipe, "translate": i2__namespace.TranslatePipe } });
+    NotificationListComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: NotificationListComponent, selector: "stream-notification-list", ngImport: i0__namespace, template: "<div class=\"str-chat__list-notifications\">\n  <stream-notification\n    *ngFor=\"let notification of notifications$ | async; trackBy: trackByItem\"\n    [type]=\"notification.type\"\n    ><div data-testclass=\"notification-content\">\n      {{ notification.text | translate: notification.translateParams }}\n    </div></stream-notification\n  >\n</div>\n", components: [{ type: NotificationComponent, selector: "stream-notification", inputs: ["type"] }], directives: [{ type: i6__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i6__namespace.AsyncPipe, "translate": i2__namespace.TranslatePipe } });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: NotificationListComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -2875,16 +3016,34 @@
                     }]
             }], ctorParameters: function () { return [{ type: NotificationService }]; } });
 
+    /**
+     * The `MessageActionsBox` component displays a list of message actions (i.e edit), that can be opened or closed. You can find the [list of the supported actions](../concepts/message-interactions.mdx) in the message interaction guide.
+     */
     var MessageActionsBoxComponent = /** @class */ (function () {
         function MessageActionsBoxComponent(chatClientService, notificationService, channelService) {
             var _this = this;
             this.chatClientService = chatClientService;
             this.notificationService = notificationService;
             this.channelService = channelService;
+            /**
+             * Indicates if the list should be opened or closed. Adding a UI element to open and close the list is the parent's component responsibility.
+             */
             this.isOpen = false;
+            /**
+             * Indicates if the message actions are belonging to a message that was sent by the current user or not.
+             */
             this.isMine = false;
+            /**
+             * The list of [channel capabilities](https://getstream.io/chat/docs/javascript/channel_capabilities/?language=javascript) that are enabled for the current user, the list of [supported interactions](../concepts/message-interactions.mdx) can be found in our message interaction guide. Unathorized actions won't be displayed on the UI.
+             */
             this.enabledActions = [];
+            /**
+             * The number of authorized actions (it can be less or equal than the number of enabled actions)
+             */
             this.displayedActionsCount = new i0.EventEmitter();
+            /**
+             * An event which emits `true` if the edit message modal is open, and `false` when it is closed.
+             */
             this.isEditing = new i0.EventEmitter();
             this.isEditModalOpen = false;
             this.modalClosed = function () {
@@ -3032,7 +3191,7 @@
         return MessageActionsBoxComponent;
     }());
     MessageActionsBoxComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: MessageActionsBoxComponent, deps: [{ token: ChatClientService }, { token: NotificationService }, { token: ChannelService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    MessageActionsBoxComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: MessageActionsBoxComponent, selector: "stream-message-actions-box", inputs: { messageInputTemplate: "messageInputTemplate", isOpen: "isOpen", isMine: "isMine", message: "message", enabledActions: "enabledActions" }, outputs: { displayedActionsCount: "displayedActionsCount", isEditing: "isEditing" }, viewQueries: [{ propertyName: "messageInput", first: true, predicate: MessageInputComponent, descendants: true }], usesOnChanges: true, ngImport: i0__namespace, template: "<div\n  data-testid=\"action-box\"\n  class=\"str-chat__message-actions-box\"\n  [class.str-chat__message-actions-box--open]=\"isOpen\"\n  [class.str-chat__message-actions-box--mine]=\"isMine\"\n>\n  <ul class=\"str-chat__message-actions-list\">\n    <button\n      data-testid=\"quote-action\"\n      *ngIf=\"isQuoteVisible\"\n      (click)=\"quoteClicked()\"\n    >\n      <li class=\"str-chat__message-actions-list-item\">\n        {{ \"streamChat.Reply\" | translate }}\n      </li>\n    </button>\n    <button\n      data-testid=\"pin-action\"\n      *ngIf=\"isPinVisible\"\n      (click)=\"pinClicked()\"\n    >\n      <li class=\"str-chat__message-actions-list-item\">\n        {{\n          (message?.pinned ? \"streamChat.Unpin\" : \"streamChat.Pin\") | translate\n        }}\n      </li>\n    </button>\n    <button\n      data-testid=\"flag-action\"\n      *ngIf=\"isFlagVisible\"\n      (click)=\"flagClicked()\"\n    >\n      <li class=\"str-chat__message-actions-list-item\">\n        {{ \"streamChat.Flag\" | translate }}\n      </li>\n    </button>\n    <button\n      data-testid=\"mute-action\"\n      *ngIf=\"isMuteVisible\"\n      (click)=\"muteClicked()\"\n    >\n      <li class=\"str-chat__message-actions-list-item\">\n        {{ \"streamChat.Mute\" | translate }}\n      </li>\n    </button>\n    <button\n      data-testid=\"edit-action\"\n      *ngIf=\"isEditVisible\"\n      (click)=\"editClicked()\"\n    >\n      <li class=\"str-chat__message-actions-list-item\">\n        {{ \"streamChat.Edit Message\" | translate }}\n      </li>\n    </button>\n    <button\n      data-testid=\"delete-action\"\n      *ngIf=\"isDeleteVisible\"\n      (click)=\"deleteClicked()\"\n    >\n      <li class=\"str-chat__message-actions-list-item\">\n        {{ \"streamChat.Delete\" | translate }}\n      </li>\n    </button>\n  </ul>\n</div>\n\n<stream-modal\n  [isOpen]=\"isEditModalOpen\"\n  (isOpenChange)=\"\n    isEditModalOpen = $event; isEditModalOpen ? '' : modalClosed()\n  \"\n>\n  <div class=\"str-chat__edit-message-form\" *ngIf=\"isEditModalOpen\">\n    <ng-container *ngIf=\"messageInputTemplate; else defaultInput\">\n      <ng-container\n        *ngTemplateOutlet=\"\n          messageInputTemplate;\n          context: {\n            message: message,\n            messageUpdateHandler: modalClosed\n          }\n        \"\n      ></ng-container>\n    </ng-container>\n    <ng-template #defaultInput>\n      <stream-message-input\n        [message]=\"message\"\n        (messageUpdate)=\"modalClosed()\"\n      ></stream-message-input>\n    </ng-template>\n    <stream-notification-list></stream-notification-list>\n    <div\n      class=\"\n        str-chat__message-team-form-footer\n        str-chat__message-team-form-footer-angular\n      \"\n    >\n      <div class=\"str-chat__edit-message-form-options\">\n        <button translate data-testid=\"cancel-button\" (click)=\"modalClosed()\">\n          streamChat.Cancel\n        </button>\n        <button\n          type=\"submit\"\n          translate\n          data-testid=\"send-button\"\n          (click)=\"sendClicked()\"\n          (keyup.enter)=\"sendClicked()\"\n        >\n          streamChat.Send\n        </button>\n      </div>\n    </div>\n  </div>\n</stream-modal>\n", components: [{ type: ModalComponent, selector: "stream-modal", inputs: ["isOpen"], outputs: ["isOpenChange"] }, { type: MessageInputComponent, selector: "stream-message-input", inputs: ["isFileUploadEnabled", "areMentionsEnabled", "mentionScope", "mentionAutocompleteItemTemplate", "commandAutocompleteItemTemplate", "emojiPickerTemplate", "mode", "acceptedFileTypes", "isMultipleFileUploadEnabled", "message"], outputs: ["messageUpdate"] }, { type: NotificationListComponent, selector: "stream-notification-list" }], directives: [{ type: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2__namespace.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }], pipes: { "translate": i2__namespace.TranslatePipe } });
+    MessageActionsBoxComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: MessageActionsBoxComponent, selector: "stream-message-actions-box", inputs: { messageInputTemplate: "messageInputTemplate", isOpen: "isOpen", isMine: "isMine", message: "message", enabledActions: "enabledActions" }, outputs: { displayedActionsCount: "displayedActionsCount", isEditing: "isEditing" }, viewQueries: [{ propertyName: "messageInput", first: true, predicate: MessageInputComponent, descendants: true }], usesOnChanges: true, ngImport: i0__namespace, template: "<div\n  data-testid=\"action-box\"\n  class=\"str-chat__message-actions-box\"\n  [class.str-chat__message-actions-box--open]=\"isOpen\"\n  [class.str-chat__message-actions-box--mine]=\"isMine\"\n>\n  <ul class=\"str-chat__message-actions-list\">\n    <button\n      data-testid=\"quote-action\"\n      *ngIf=\"isQuoteVisible\"\n      (click)=\"quoteClicked()\"\n    >\n      <li class=\"str-chat__message-actions-list-item\">\n        {{ \"streamChat.Reply\" | translate }}\n      </li>\n    </button>\n    <button\n      data-testid=\"pin-action\"\n      *ngIf=\"isPinVisible\"\n      (click)=\"pinClicked()\"\n    >\n      <li class=\"str-chat__message-actions-list-item\">\n        {{\n          (message?.pinned ? \"streamChat.Unpin\" : \"streamChat.Pin\") | translate\n        }}\n      </li>\n    </button>\n    <button\n      data-testid=\"flag-action\"\n      *ngIf=\"isFlagVisible\"\n      (click)=\"flagClicked()\"\n    >\n      <li class=\"str-chat__message-actions-list-item\">\n        {{ \"streamChat.Flag\" | translate }}\n      </li>\n    </button>\n    <button\n      data-testid=\"mute-action\"\n      *ngIf=\"isMuteVisible\"\n      (click)=\"muteClicked()\"\n    >\n      <li class=\"str-chat__message-actions-list-item\">\n        {{ \"streamChat.Mute\" | translate }}\n      </li>\n    </button>\n    <button\n      data-testid=\"edit-action\"\n      *ngIf=\"isEditVisible\"\n      (click)=\"editClicked()\"\n    >\n      <li class=\"str-chat__message-actions-list-item\">\n        {{ \"streamChat.Edit Message\" | translate }}\n      </li>\n    </button>\n    <button\n      data-testid=\"delete-action\"\n      *ngIf=\"isDeleteVisible\"\n      (click)=\"deleteClicked()\"\n    >\n      <li class=\"str-chat__message-actions-list-item\">\n        {{ \"streamChat.Delete\" | translate }}\n      </li>\n    </button>\n  </ul>\n</div>\n\n<stream-modal\n  [isOpen]=\"isEditModalOpen\"\n  (isOpenChange)=\"\n    isEditModalOpen = $event; isEditModalOpen ? '' : modalClosed()\n  \"\n>\n  <div class=\"str-chat__edit-message-form\" *ngIf=\"isEditModalOpen\">\n    <ng-container *ngIf=\"messageInputTemplate; else defaultInput\">\n      <ng-container\n        *ngTemplateOutlet=\"\n          messageInputTemplate;\n          context: {\n            message: message,\n            messageUpdateHandler: modalClosed\n          }\n        \"\n      ></ng-container>\n    </ng-container>\n    <ng-template #defaultInput>\n      <stream-message-input\n        [message]=\"message\"\n        (messageUpdate)=\"modalClosed()\"\n      ></stream-message-input>\n    </ng-template>\n    <stream-notification-list></stream-notification-list>\n    <div\n      class=\"\n        str-chat__message-team-form-footer\n        str-chat__message-team-form-footer-angular\n      \"\n    >\n      <div class=\"str-chat__edit-message-form-options\">\n        <button translate data-testid=\"cancel-button\" (click)=\"modalClosed()\">\n          streamChat.Cancel\n        </button>\n        <button\n          type=\"submit\"\n          translate\n          data-testid=\"send-button\"\n          (click)=\"sendClicked()\"\n          (keyup.enter)=\"sendClicked()\"\n        >\n          streamChat.Send\n        </button>\n      </div>\n    </div>\n  </div>\n</stream-modal>\n", components: [{ type: ModalComponent, selector: "stream-modal", inputs: ["isOpen"], outputs: ["isOpenChange"] }, { type: MessageInputComponent, selector: "stream-message-input", inputs: ["isFileUploadEnabled", "areMentionsEnabled", "mentionScope", "mentionAutocompleteItemTemplate", "commandAutocompleteItemTemplate", "emojiPickerTemplate", "mode", "acceptedFileTypes", "isMultipleFileUploadEnabled", "message"], outputs: ["messageUpdate"] }, { type: NotificationListComponent, selector: "stream-notification-list" }], directives: [{ type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2__namespace.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }], pipes: { "translate": i2__namespace.TranslatePipe } });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: MessageActionsBoxComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -3059,6 +3218,9 @@
                     args: [MessageInputComponent]
                 }] } });
 
+    /**
+     * The `Channel` component is a container component that displays the [`ChannelHeader`](./ChannelHeaderComponent.mdx), [`MessageList`](./MessageListComponent.mdx), [`NotificationList`](./NotificationListComponent.mdx) and [`MessageInput`](./MessageInputComponent.mdx) components. You can also provide the [`Thread`](./ThreadComponent.mdx) component to use message [threads](https://getstream.io/chat/docs/javascript/threads/?language=javascript).
+     */
     var ChannelComponent = /** @class */ (function () {
         function ChannelComponent(channelService) {
             this.channelService = channelService;
@@ -3070,7 +3232,7 @@
         return ChannelComponent;
     }());
     ChannelComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: ChannelComponent, deps: [{ token: ChannelService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    ChannelComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: ChannelComponent, selector: "stream-channel", ngImport: i0__namespace, template: "<div\n  *ngIf=\"(isError$ | async) === false && (isInitializing$ | async) === false\"\n  class=\"str-chat str-chat-channel messaging\"\n>\n  <div class=\"str-chat__container\">\n    <div class=\"str-chat__main-panel\">\n      <ng-content></ng-content>\n    </div>\n    <ng-content\n      *ngIf=\"isActiveThread$ | async\"\n      select='[name=\"thread\"]'\n    ></ng-content>\n  </div>\n</div>\n", directives: [{ type: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i4__namespace.AsyncPipe } });
+    ChannelComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: ChannelComponent, selector: "stream-channel", ngImport: i0__namespace, template: "<div\n  *ngIf=\"(isError$ | async) === false && (isInitializing$ | async) === false\"\n  class=\"str-chat str-chat-channel messaging\"\n>\n  <div class=\"str-chat__container\">\n    <div class=\"str-chat__main-panel\">\n      <ng-content></ng-content>\n    </div>\n    <ng-content\n      *ngIf=\"isActiveThread$ | async\"\n      select='[name=\"thread\"]'\n    ></ng-content>\n  </div>\n</div>\n", directives: [{ type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i6__namespace.AsyncPipe } });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: ChannelComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -3163,6 +3325,9 @@
                 args: [{ providedIn: 'root' }]
             }], ctorParameters: function () { return []; } });
 
+    /**
+     * The `ChannelHeader` component displays the avatar and name of the currently active channel along with member and watcher information. You can read about [the difference between members and watchers](https://getstream.io/chat/docs/javascript/watch_channel/?language=javascript#watchers-vs-members) in the platform documentation. Please note that number of watchers is only displayed if the user has [`connect-events` capability](https://getstream.io/chat/docs/javascript/channel_capabilities/?language=javascript)
+     */
     var ChannelHeaderComponent = /** @class */ (function () {
         function ChannelHeaderComponent(channelService, channelListToggleService) {
             var _this = this;
@@ -3212,6 +3377,9 @@
                     }]
             }], ctorParameters: function () { return [{ type: ChannelService }, { type: ChannelListToggleService }]; } });
 
+    /**
+     * The `ChannelPreview` component displays a channel preview in the channel list, it consists of the image, name and latest message of the channel.
+     */
     var ChannelPreviewComponent = /** @class */ (function () {
         function ChannelPreviewComponent(channelService, ngZone) {
             this.channelService = channelService;
@@ -3314,6 +3482,9 @@
                     type: i0.Input
                 }] } });
 
+    /**
+     * The `ChannelList` component renders the list of channels.
+     */
     var ChannelListComponent = /** @class */ (function () {
         function ChannelListComponent(channelService, channelListToggleService) {
             this.channelService = channelService;
@@ -3352,7 +3523,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: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "async": i4__namespace.AsyncPipe, "translate": i2__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: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "async": i6__namespace.AsyncPipe, "translate": i2__namespace.TranslatePipe } });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: ChannelListComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -3410,16 +3581,34 @@
         wow: '😮',
         sad: '😞',
     };
+    /**
+     * The `MessageReactions` component displays the reactions of a message, the current user can add and remove reactions. You can read more about [message reactions](https://getstream.io/chat/docs/javascript/send_reaction/?language=javascript) in the platform documentation.
+     */
     var MessageReactionsComponent = /** @class */ (function () {
         function MessageReactionsComponent(cdRef, channelService) {
             var _this = this;
             this.cdRef = cdRef;
             this.channelService = channelService;
+            /**
+             * The number of reactions grouped by [reaction types](https://github.com/GetStream/stream-chat-angular/tree/master/projects/stream-chat-angular/src/lib/message-reactions/message-reactions.component.ts)
+             */
             this.messageReactionCounts = {};
+            /**
+             * Indicates if the selector should be opened or closed. Adding a UI element to open and close the selector is the parent's component responsibility.
+             */
             this.isSelectorOpen = false;
-            this.isSelectorOpenChange = new i0.EventEmitter();
+            /**
+             * List of reactions of a [message](../types/stream-message.mdx), used to display the users of a reaction type.
+             */
             this.latestReactions = [];
+            /**
+             * List of the user's own reactions of a [message](../types/stream-message.mdx), used to display the users of a reaction type.
+             */
             this.ownReactions = [];
+            /**
+             * Indicates if the selector should be opened or closed. Adding a UI element to open and close the selector is the parent's component responsibility.
+             */
+            this.isSelectorOpenChange = new i0.EventEmitter();
             this.eventHandler = function (event) {
                 var _a;
                 if (!((_a = _this.selectorContainer) === null || _a === void 0 ? void 0 : _a.nativeElement.contains(event.target))) {
@@ -3519,7 +3708,7 @@
         return MessageReactionsComponent;
     }());
     MessageReactionsComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: MessageReactionsComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }, { token: ChannelService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    MessageReactionsComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: MessageReactionsComponent, selector: "stream-message-reactions", inputs: { messageId: "messageId", messageReactionCounts: "messageReactionCounts", isSelectorOpen: "isSelectorOpen", latestReactions: "latestReactions", ownReactions: "ownReactions" }, outputs: { isSelectorOpenChange: "isSelectorOpenChange" }, viewQueries: [{ propertyName: "selectorContainer", first: true, predicate: ["selectorContainer"], descendants: true }, { propertyName: "selectorTooltip", first: true, predicate: ["selectorTooltip"], descendants: true }], usesOnChanges: true, ngImport: i0__namespace, template: "<div\n  *ngIf=\"existingReactions.length > 0 && !isSelectorOpen\"\n  class=\"str-chat__reaction-list\"\n  [class.str-chat__reaction-list--reverse]=\"true\"\n  data-testid=\"reaction-list\"\n>\n  <ul>\n    <li\n      *ngFor=\"\n        let reactionType of existingReactions;\n        trackBy: trackByMessageReaction\n      \"\n      data-testclass=\"emoji\"\n    >\n      <span class=\"emoji\">\n        {{ getEmojiByReaction(reactionType) }}\n      </span>\n      &nbsp;\n    </li>\n    <li>\n      <span\n        data-testid=\"reactions-count\"\n        class=\"str-chat__reaction-list--counter\"\n        >{{ reactionsCount }}</span\n      >\n    </li>\n  </ul>\n</div>\n\n<div\n  #selectorContainer\n  class=\"str-chat__reaction-selector\"\n  *ngIf=\"isSelectorOpen\"\n  data-testid=\"reaction-selector\"\n>\n  <div\n    *ngIf=\"tooltipText\"\n    data-testid=\"tooltip\"\n    #selectorTooltip\n    class=\"str-chat__reaction-selector-tooltip\"\n    [ngStyle]=\"{\n      left: tooltipPositions?.tooltip + 'px',\n      visibility: tooltipPositions ? 'visible' : 'hidden'\n    }\"\n  >\n    <div\n      class=\"arrow\"\n      [ngStyle]=\"{ left: tooltipPositions?.arrow + 'px' }\"\n    ></div>\n    <span class=\"latest-user-username\">\n      {{ tooltipText }}\n    </span>\n  </div>\n  <ul class=\"str-chat__message-reactions-list\">\n    <li\n      class=\"str-chat__message-reactions-list-item str-chat__emoji\"\n      *ngFor=\"\n        let reactionType of reactionOptions;\n        trackBy: trackByMessageReaction\n      \"\n      data-testclass=\"emoji-option\"\n      (click)=\"react(reactionType)\"\n      (keyup.enter)=\"react(reactionType)\"\n    >\n      <div\n        *ngIf=\"getLatestUserByReaction(reactionType) as user\"\n        class=\"latest-user\"\n        (click)=\"hideTooltip()\"\n        (keyup.enter)=\"hideTooltip()\"\n        (mouseenter)=\"showTooltip($event, reactionType)\"\n        (mouseleave)=\"hideTooltip()\"\n        attr.data-testid=\"{{ reactionType }}-last-user\"\n      >\n        <stream-avatar\n          attr.data-testid=\"{{ reactionType }}-avatar\"\n          [imageUrl]=\"user.image\"\n          [name]=\"user.name || user.id\"\n          [size]=\"20\"\n        ></stream-avatar>\n      </div>\n      <span class=\"emoji\" style=\"width: 20px; height: 20px; top: 10px\">\n        {{ getEmojiByReaction(reactionType) }}\n      </span>\n      <span\n        *ngIf=\"\n          messageReactionCounts[reactionType] &&\n          messageReactionCounts[reactionType]! > 0\n        \"\n        class=\"str-chat__message-reactions-list-item__count\"\n        attr.data-testid=\"{{ reactionType }}-reaction-count\"\n      >\n        {{ messageReactionCounts[reactionType] }}\n      </span>\n    </li>\n  </ul>\n</div>\n", styles: [".emoji {position: relative; display: inline-block; }"], components: [{ type: AvatarComponent, selector: "stream-avatar", inputs: ["name", "imageUrl", "size"] }], directives: [{ type: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+    MessageReactionsComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: MessageReactionsComponent, selector: "stream-message-reactions", inputs: { messageId: "messageId", messageReactionCounts: "messageReactionCounts", isSelectorOpen: "isSelectorOpen", latestReactions: "latestReactions", ownReactions: "ownReactions" }, outputs: { isSelectorOpenChange: "isSelectorOpenChange" }, viewQueries: [{ propertyName: "selectorContainer", first: true, predicate: ["selectorContainer"], descendants: true }, { propertyName: "selectorTooltip", first: true, predicate: ["selectorTooltip"], descendants: true }], usesOnChanges: true, ngImport: i0__namespace, template: "<div\n  *ngIf=\"existingReactions.length > 0 && !isSelectorOpen\"\n  class=\"str-chat__reaction-list\"\n  [class.str-chat__reaction-list--reverse]=\"true\"\n  data-testid=\"reaction-list\"\n>\n  <ul>\n    <li\n      *ngFor=\"\n        let reactionType of existingReactions;\n        trackBy: trackByMessageReaction\n      \"\n      data-testclass=\"emoji\"\n    >\n      <span class=\"emoji\">\n        {{ getEmojiByReaction(reactionType) }}\n      </span>\n      &nbsp;\n    </li>\n    <li>\n      <span\n        data-testid=\"reactions-count\"\n        class=\"str-chat__reaction-list--counter\"\n        >{{ reactionsCount }}</span\n      >\n    </li>\n  </ul>\n</div>\n\n<div\n  #selectorContainer\n  class=\"str-chat__reaction-selector\"\n  *ngIf=\"isSelectorOpen\"\n  data-testid=\"reaction-selector\"\n>\n  <div\n    *ngIf=\"tooltipText\"\n    data-testid=\"tooltip\"\n    #selectorTooltip\n    class=\"str-chat__reaction-selector-tooltip\"\n    [ngStyle]=\"{\n      left: tooltipPositions?.tooltip + 'px',\n      visibility: tooltipPositions ? 'visible' : 'hidden'\n    }\"\n  >\n    <div\n      class=\"arrow\"\n      [ngStyle]=\"{ left: tooltipPositions?.arrow + 'px' }\"\n    ></div>\n    <span class=\"latest-user-username\">\n      {{ tooltipText }}\n    </span>\n  </div>\n  <ul class=\"str-chat__message-reactions-list\">\n    <li\n      class=\"str-chat__message-reactions-list-item str-chat__emoji\"\n      *ngFor=\"\n        let reactionType of reactionOptions;\n        trackBy: trackByMessageReaction\n      \"\n      data-testclass=\"emoji-option\"\n      (click)=\"react(reactionType)\"\n      (keyup.enter)=\"react(reactionType)\"\n    >\n      <div\n        *ngIf=\"getLatestUserByReaction(reactionType) as user\"\n        class=\"latest-user\"\n        (click)=\"hideTooltip()\"\n        (keyup.enter)=\"hideTooltip()\"\n        (mouseenter)=\"showTooltip($event, reactionType)\"\n        (mouseleave)=\"hideTooltip()\"\n        attr.data-testid=\"{{ reactionType }}-last-user\"\n      >\n        <stream-avatar\n          attr.data-testid=\"{{ reactionType }}-avatar\"\n          [imageUrl]=\"user.image\"\n          [name]=\"user.name || user.id\"\n          [size]=\"20\"\n        ></stream-avatar>\n      </div>\n      <span class=\"emoji\" style=\"width: 20px; height: 20px; top: 10px\">\n        {{ getEmojiByReaction(reactionType) }}\n      </span>\n      <span\n        *ngIf=\"\n          messageReactionCounts[reactionType] &&\n          messageReactionCounts[reactionType]! > 0\n        \"\n        class=\"str-chat__message-reactions-list-item__count\"\n        attr.data-testid=\"{{ reactionType }}-reaction-count\"\n      >\n        {{ messageReactionCounts[reactionType] }}\n      </span>\n    </li>\n  </ul>\n</div>\n", styles: [".emoji {position: relative; display: inline-block; }"], components: [{ type: AvatarComponent, selector: "stream-avatar", inputs: ["name", "imageUrl", "size"] }], directives: [{ type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: MessageReactionsComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -3533,12 +3722,12 @@
                     type: i0.Input
                 }], isSelectorOpen: [{
                     type: i0.Input
-                }], isSelectorOpenChange: [{
-                    type: i0.Output
                 }], latestReactions: [{
                     type: i0.Input
                 }], ownReactions: [{
                     type: i0.Input
+                }], isSelectorOpenChange: [{
+                    type: i0.Output
                 }], selectorContainer: [{
                     type: i0.ViewChild,
                     args: ['selectorContainer']
@@ -3547,11 +3736,20 @@
                     args: ['selectorTooltip']
                 }] } });
 
+    /**
+     * The `Message` component displays a message with additional information such as sender and date, and enables [interaction with the message (i.e. edit or react)](../concepts/message-interactions.mdx).
+     */
     var MessageComponent = /** @class */ (function () {
         function MessageComponent(chatClientService, channelService) {
             this.chatClientService = chatClientService;
             this.channelService = channelService;
+            /**
+             * The list of [channel capabilities](https://getstream.io/chat/docs/javascript/channel_capabilities/?language=javascript) that are enabled for the current user, the list of [supported interactions](../concepts/message-interactions.mdx) can be found in our message interaction guide. Unathorized actions won't be displayed on the UI. The [`MessageList`](./MessageListComponent.mdx) component automatically sets this based on [channel capabilities](https://getstream.io/chat/docs/javascript/channel_capabilities/?language=javascript).
+             */
             this.enabledMessageActions = [];
+            /**
+             * Determines if the message is being dispalyed in a channel or in a [thread](https://getstream.io/chat/docs/javascript/threads/?language=javascript).
+             */
             this.mode = 'main';
             this.isActionBoxOpen = false;
             this.isReactionSelectorOpen = false;
@@ -3757,7 +3955,7 @@
         return MessageComponent;
     }());
     MessageComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: MessageComponent, deps: [{ token: ChatClientService }, { token: ChannelService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    MessageComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: MessageComponent, selector: "stream-message", inputs: { messageInputTemplate: "messageInputTemplate", mentionTemplate: "mentionTemplate", message: "message", enabledMessageActions: "enabledMessageActions", areReactionsEnabled: "areReactionsEnabled", canReactToMessage: "canReactToMessage", isLastSentMessage: "isLastSentMessage", canReceiveReadEvents: "canReceiveReadEvents", mode: "mode" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], usesOnChanges: true, ngImport: i0__namespace, template: "<div\n  #container\n  class=\"str-chat__message-simple str-chat__message str-chat__message--{{\n    message?.type\n  }} str-chat__message--{{ message?.status }} {{\n    message?.text ? 'str-chat__message--has-text' : 'has-no-text'\n  }}\"\n  [class.str-chat__message--me]=\"isSentByCurrentUser\"\n  [class.str-chat__message-simple--me]=\"isSentByCurrentUser\"\n  [class.mobile-press]=\"isPressedOnMobile\"\n  [class.str-chat__message--has-attachment]=\"hasAttachment\"\n  [class.str-chat__message--with-reactions]=\"\n    areReactionsEnabled !== false && hasReactions\n  \"\n  data-testid=\"message-container\"\n  (mouseleave)=\"isActionBoxOpen = false\"\n>\n  <ng-container *ngIf=\"!message?.deleted_at; else deletedMessage\">\n    <ng-container *ngIf=\"message?.type !== 'system'; else systemMessage\">\n      <ng-container\n        *ngIf=\"\n          isSentByCurrentUser &&\n          ((isLastSentMessage && message?.status === 'received') ||\n            message?.status === 'sending')\n        \"\n      >\n        <ng-container *ngIf=\"message?.status === 'sending'; else sentStatus\">\n          <ng-container *ngTemplateOutlet=\"sendingStatus\"></ng-container>\n        </ng-container>\n        <ng-template #sentStatus>\n          <ng-container\n            *ngIf=\"\n              mode === 'main' &&\n                isMessageDeliveredAndRead &&\n                canDisplayReadStatus;\n              else deliveredStatus\n            \"\n          >\n            <ng-container *ngTemplateOutlet=\"readStatus\"></ng-container>\n          </ng-container>\n        </ng-template>\n      </ng-container>\n      <stream-avatar\n        data-testid=\"avatar\"\n        class=\"str-chat-angular__avatar-host\"\n        [imageUrl]=\"message?.user?.image\"\n        [name]=\"message?.user?.name || message?.user?.id\"\n      ></stream-avatar>\n      <div class=\"str-chat__message-inner\">\n        <div\n          class=\"str-chat__message-simple__actions\"\n          data-testid=\"message-options\"\n          *ngIf=\"areOptionsVisible\"\n        >\n          <div\n            data-testid=\"message-actions-container\"\n            class=\"\n              str-chat__message-simple__actions__action\n              str-chat__message-simple__actions__action--options\n            \"\n            [class.str-chat-angular__message-simple__actions__action--options--editing]=\"\n              isEditing\n            \"\n          >\n            <stream-message-actions-box\n              [isOpen]=\"isActionBoxOpen\"\n              [isMine]=\"isSentByCurrentUser\"\n              [enabledActions]=\"enabledMessageActions\"\n              [message]=\"message\"\n              (displayedActionsCount)=\"visibleMessageActionsCount = $event\"\n              (isEditing)=\"isEditing = $event; isActionBoxOpen = !isEditing\"\n              [messageInputTemplate]=\"messageInputTemplate\"\n            ></stream-message-actions-box>\n            <stream-icon\n              *ngIf=\"visibleMessageActionsCount > 0\"\n              data-testid=\"action-icon\"\n              icon=\"action-icon\"\n              (keyup.enter)=\"isActionBoxOpen = !isActionBoxOpen\"\n              (click)=\"isActionBoxOpen = !isActionBoxOpen\"\n            ></stream-icon>\n          </div>\n          <!-- eslint-disable @angular-eslint/template/conditional-complexity -->\n          <div\n            *ngIf=\"\n              enabledMessageActions.indexOf('send-reply') !== -1 &&\n              mode === 'main'\n            \"\n            class=\"\n              str-chat__message-simple__actions__action\n              str-chat__message-simple__actions__action--thread\n            \"\n            data-testid=\"reply-in-thread\"\n            (click)=\"setAsActiveParentMessage()\"\n            (keyup.enter)=\"setAsActiveParentMessage()\"\n          >\n            <stream-icon icon=\"reply-in-thread\"></stream-icon>\n          </div>\n          <div\n            *ngIf=\"\n              areReactionsEnabled !== false &&\n              canReactToMessage !== false &&\n              enabledMessageActions.indexOf('send-reaction') !== -1\n            \"\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        <!-- eslint-enable @angular-eslint/template/conditional-complexity -->\n        <stream-message-reactions\n          *ngIf=\"areReactionsEnabled !== false\"\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 && !message?.quoted_message\"\n          [attachments]=\"message!.attachments!\"\n          [messageId]=\"message!.id\"\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            <ng-container *ngTemplateOutlet=\"quotedMessage\"></ng-container>\n            <stream-attachment-list\n              *ngIf=\"hasAttachment && message?.quoted_message\"\n              [attachments]=\"message!.attachments!\"\n              [messageId]=\"message!.id\"\n            ></stream-attachment-list>\n            <div\n              data-testid=\"client-error-message\"\n              *ngIf=\"message?.type === 'error'\"\n              class=\"str-chat__simple-message--error-message\"\n            >\n              {{ \"streamChat.Error \u00B7 Unsent\" | translate }}\n            </div>\n            <div\n              data-testid=\"error-message\"\n              *ngIf=\"message?.status === 'failed'\"\n              class=\"str-chat__simple-message--error-message\"\n            >\n              {{\n                (message?.errorStatusCode === 403\n                  ? \"streamChat.Message Failed \u00B7 Unauthorized\"\n                  : \"streamChat.Message Failed \u00B7 Click to try again\"\n                ) | translate\n              }}\n            </div>\n            <div\n              (click)=\"textClicked()\"\n              (keyup.enter)=\"textClicked()\"\n              data-testid=\"text\"\n            >\n              <p>\n                <!-- eslint-disable-next-line @angular-eslint/template/use-track-by-function -->\n                <ng-container *ngFor=\"let part of messageTextParts\">\n                  <span\n                    *ngIf=\"part.type === 'text'; else mention\"\n                    [innerHTML]=\"part.content\"\n                  ></span>\n                  <ng-template #mention>\n                    <ng-container *ngIf=\"mentionTemplate; else defaultMention\">\n                      <ng-container\n                        *ngTemplateOutlet=\"\n                          mentionTemplate;\n                          context: { user: part.user! }\n                        \"\n                      ></ng-container>\n                    </ng-container>\n                    <ng-template #defaultMention>\n                      <b>{{ part.content }}</b>\n                    </ng-template>\n                  </ng-template>\n                </ng-container>\n              </p>\n            </div>\n          </div>\n        </div>\n        <div class=\"str-chat__message-simple-reply-button\">\n          <button\n            *ngIf=\"\n              !!message?.reply_count &&\n              mode !== 'thread' &&\n              enabledMessageActions.indexOf('send-reply') !== -1\n            \"\n            class=\"str-chat__message-replies-count-button\"\n            data-testid=\"reply-count-button\"\n            (click)=\"setAsActiveParentMessage()\"\n          >\n            <stream-icon icon=\"reply\"></stream-icon>\n            {{message?.reply_count === 1 ? ('streamChat.1 reply' | translate) : ('streamChat.{{ replyCount }}\n            replies' | translate:replyCountParam)}}\n          </button>\n        </div>\n        <div class=\"str-chat__message-data str-chat__message-simple-data\">\n          <span\n            data-testid=\"sender\"\n            *ngIf=\"!isSentByCurrentUser\"\n            class=\"str-chat__message-simple-name\"\n          >\n            {{ message?.user?.name ? message?.user?.name : message?.user?.id }}\n          </span>\n          <span data-testid=\"date\" class=\"str-chat__message-simple-timestamp\">\n            {{ parsedDate }}\n          </span>\n        </div>\n      </div>\n    </ng-container>\n  </ng-container>\n</div>\n\n<ng-template #sendingStatus>\n  <span\n    class=\"\n      str-chat__message-simple-status str-chat__message-simple-status-angular\n    \"\n    data-testid=\"sending-indicator\"\n  >\n    <div class=\"str-chat__tooltip\">\n      {{ \"streamChat.Sending...\" | translate }}\n    </div>\n    <stream-loading-indicator\n      data-testid=\"loading-indicator\"\n    ></stream-loading-indicator>\n  </span>\n</ng-template>\n<ng-template #readStatus>\n  <span\n    class=\"\n      str-chat__message-simple-status str-chat__message-simple-status-angular\n    \"\n    data-testid=\"read-indicator\"\n  >\n    <div class=\"str-chat__tooltip\" data-testid=\"read-by-tooltip\">\n      {{ readByText }}\n    </div>\n    <stream-avatar\n      class=\"str-chat-angular__avatar-host\"\n      data-test-id=\"last-read-user-avatar\"\n      [size]=\"15\"\n      [imageUrl]=\"lastReadUser?.image\"\n      [name]=\"lastReadUser?.name || lastReadUser?.id\"\n    ></stream-avatar>\n    <span\n      data-test-id=\"read-by-length\"\n      *ngIf=\"isReadByMultipleUsers\"\n      class=\"str-chat__message-simple-status-number\"\n    >\n      {{ (message?.readBy)!.length }}\n    </span>\n  </span>\n</ng-template>\n<ng-template #deliveredStatus>\n  <span\n    *ngIf=\"mode === 'main'\"\n    class=\"\n      str-chat__message-simple-status str-chat__message-simple-status-angular\n    \"\n    data-testid=\"delivered-indicator\"\n  >\n    <div class=\"str-chat__tooltip\">\n      {{ \"streamChat.Delivered\" | translate }}\n    </div>\n    <stream-icon\n      data-testid=\"delivered-icon\"\n      icon=\"delivered-icon\"\n    ></stream-icon>\n  </span>\n</ng-template>\n\n<ng-template #deletedMessage>\n  <div data-testid=\"message-deleted-component\">\n    <div class=\"str-chat__message--deleted-inner\" translate>\n      streamChat.This message was deleted...\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #systemMessage>\n  <div data-testid=\"system-message\" class=\"str-chat__message--system\">\n    <div class=\"str-chat__message--system__text\">\n      <div class=\"str-chat__message--system__line\"></div>\n      <p>{{ message?.text }}</p>\n      <div class=\"str-chat__message--system__line\"></div>\n    </div>\n    <div class=\"str-chat__message--system__date\">\n      {{ parsedDate }}\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #quotedMessage>\n  <div\n    *ngIf=\"message?.quoted_message\"\n    class=\"quoted-message\"\n    data-testid=\"quoted-message-container\"\n    [class.mine]=\"isSentByCurrentUser\"\n  >\n    <stream-avatar\n      data-testid=\"qouted-message-avatar\"\n      class=\"str-chat-angular__avatar-host\"\n      [imageUrl]=\"message?.quoted_message?.user?.image\"\n      [name]=\"\n        message?.quoted_message?.user?.name || message?.quoted_message?.user?.id\n      \"\n      [size]=\"20\"\n    ></stream-avatar>\n    <div class=\"quoted-message-inner\">\n      <stream-attachment-list\n        *ngIf=\"\n          message?.quoted_message?.attachments &&\n          message?.quoted_message?.attachments?.length\n        \"\n        [attachments]=\"quotedMessageAttachments\"\n        [messageId]=\"message?.quoted_message?.id\"\n      ></stream-attachment-list>\n      <div\n        data-testid=\"quoted-message-text\"\n        [innerHTML]=\"\n          message?.quoted_message?.html || message?.quoted_message?.text\n        \"\n      ></div>\n    </div>\n  </div>\n</ng-template>\n", components: [{ type: AvatarComponent, selector: "stream-avatar", inputs: ["name", "imageUrl", "size"] }, { type: MessageActionsBoxComponent, selector: "stream-message-actions-box", inputs: ["messageInputTemplate", "isOpen", "isMine", "message", "enabledActions"], outputs: ["displayedActionsCount", "isEditing"] }, { type: IconComponent, selector: "stream-icon", inputs: ["icon", "size"] }, { type: MessageReactionsComponent, selector: "stream-message-reactions", inputs: ["messageId", "messageReactionCounts", "isSelectorOpen", "latestReactions", "ownReactions"], outputs: ["isSelectorOpenChange"] }, { type: AttachmentListComponent, selector: "stream-attachment-list", inputs: ["messageId", "attachments"] }, { type: LoadingIndicatorComponent, selector: "stream-loading-indicator", inputs: ["size", "color"] }], directives: [{ type: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i4__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2__namespace.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }], pipes: { "translate": i2__namespace.TranslatePipe } });
+    MessageComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: MessageComponent, selector: "stream-message", inputs: { messageInputTemplate: "messageInputTemplate", mentionTemplate: "mentionTemplate", message: "message", enabledMessageActions: "enabledMessageActions", areReactionsEnabled: "areReactionsEnabled", canReactToMessage: "canReactToMessage", isLastSentMessage: "isLastSentMessage", canReceiveReadEvents: "canReceiveReadEvents", mode: "mode" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], usesOnChanges: true, ngImport: i0__namespace, template: "<div\n  #container\n  class=\"str-chat__message-simple str-chat__message str-chat__message--{{\n    message?.type\n  }} str-chat__message--{{ message?.status }} {{\n    message?.text ? 'str-chat__message--has-text' : 'has-no-text'\n  }}\"\n  [class.str-chat__message--me]=\"isSentByCurrentUser\"\n  [class.str-chat__message-simple--me]=\"isSentByCurrentUser\"\n  [class.mobile-press]=\"isPressedOnMobile\"\n  [class.str-chat__message--has-attachment]=\"hasAttachment\"\n  [class.str-chat__message--with-reactions]=\"\n    areReactionsEnabled !== false && hasReactions\n  \"\n  data-testid=\"message-container\"\n  (mouseleave)=\"isActionBoxOpen = false\"\n>\n  <ng-container *ngIf=\"!message?.deleted_at; else deletedMessage\">\n    <ng-container *ngIf=\"message?.type !== 'system'; else systemMessage\">\n      <ng-container\n        *ngIf=\"\n          isSentByCurrentUser &&\n          ((isLastSentMessage && message?.status === 'received') ||\n            message?.status === 'sending')\n        \"\n      >\n        <ng-container *ngIf=\"message?.status === 'sending'; else sentStatus\">\n          <ng-container *ngTemplateOutlet=\"sendingStatus\"></ng-container>\n        </ng-container>\n        <ng-template #sentStatus>\n          <ng-container\n            *ngIf=\"\n              mode === 'main' &&\n                isMessageDeliveredAndRead &&\n                canDisplayReadStatus;\n              else deliveredStatus\n            \"\n          >\n            <ng-container *ngTemplateOutlet=\"readStatus\"></ng-container>\n          </ng-container>\n        </ng-template>\n      </ng-container>\n      <stream-avatar\n        data-testid=\"avatar\"\n        class=\"str-chat-angular__avatar-host\"\n        [imageUrl]=\"message?.user?.image\"\n        [name]=\"message?.user?.name || message?.user?.id\"\n      ></stream-avatar>\n      <div class=\"str-chat__message-inner\">\n        <div\n          class=\"str-chat__message-simple__actions\"\n          data-testid=\"message-options\"\n          *ngIf=\"areOptionsVisible\"\n        >\n          <div\n            data-testid=\"message-actions-container\"\n            class=\"\n              str-chat__message-simple__actions__action\n              str-chat__message-simple__actions__action--options\n            \"\n            [class.str-chat-angular__message-simple__actions__action--options--editing]=\"\n              isEditing\n            \"\n          >\n            <stream-message-actions-box\n              [isOpen]=\"isActionBoxOpen\"\n              [isMine]=\"isSentByCurrentUser\"\n              [enabledActions]=\"enabledMessageActions\"\n              [message]=\"message\"\n              (displayedActionsCount)=\"visibleMessageActionsCount = $event\"\n              (isEditing)=\"isEditing = $event; isActionBoxOpen = !isEditing\"\n              [messageInputTemplate]=\"messageInputTemplate\"\n            ></stream-message-actions-box>\n            <stream-icon\n              *ngIf=\"visibleMessageActionsCount > 0\"\n              data-testid=\"action-icon\"\n              icon=\"action-icon\"\n              (keyup.enter)=\"isActionBoxOpen = !isActionBoxOpen\"\n              (click)=\"isActionBoxOpen = !isActionBoxOpen\"\n            ></stream-icon>\n          </div>\n          <!-- eslint-disable @angular-eslint/template/conditional-complexity -->\n          <div\n            *ngIf=\"\n              enabledMessageActions.indexOf('send-reply') !== -1 &&\n              mode === 'main'\n            \"\n            class=\"\n              str-chat__message-simple__actions__action\n              str-chat__message-simple__actions__action--thread\n            \"\n            data-testid=\"reply-in-thread\"\n            (click)=\"setAsActiveParentMessage()\"\n            (keyup.enter)=\"setAsActiveParentMessage()\"\n          >\n            <stream-icon icon=\"reply-in-thread\"></stream-icon>\n          </div>\n          <div\n            *ngIf=\"\n              areReactionsEnabled !== false &&\n              canReactToMessage !== false &&\n              enabledMessageActions.indexOf('send-reaction') !== -1\n            \"\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        <!-- eslint-enable @angular-eslint/template/conditional-complexity -->\n        <stream-message-reactions\n          *ngIf=\"areReactionsEnabled !== false\"\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 && !message?.quoted_message\"\n          [attachments]=\"message!.attachments!\"\n          [messageId]=\"message!.id\"\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            <ng-container *ngTemplateOutlet=\"quotedMessage\"></ng-container>\n            <stream-attachment-list\n              *ngIf=\"hasAttachment && message?.quoted_message\"\n              [attachments]=\"message!.attachments!\"\n              [messageId]=\"message!.id\"\n            ></stream-attachment-list>\n            <div\n              data-testid=\"client-error-message\"\n              *ngIf=\"message?.type === 'error'\"\n              class=\"str-chat__simple-message--error-message\"\n            >\n              {{ \"streamChat.Error \u00B7 Unsent\" | translate }}\n            </div>\n            <div\n              data-testid=\"error-message\"\n              *ngIf=\"message?.status === 'failed'\"\n              class=\"str-chat__simple-message--error-message\"\n            >\n              {{\n                (message?.errorStatusCode === 403\n                  ? \"streamChat.Message Failed \u00B7 Unauthorized\"\n                  : \"streamChat.Message Failed \u00B7 Click to try again\"\n                ) | translate\n              }}\n            </div>\n            <div\n              (click)=\"textClicked()\"\n              (keyup.enter)=\"textClicked()\"\n              data-testid=\"text\"\n            >\n              <p>\n                <!-- eslint-disable-next-line @angular-eslint/template/use-track-by-function -->\n                <ng-container *ngFor=\"let part of messageTextParts\">\n                  <span\n                    *ngIf=\"part.type === 'text'; else mention\"\n                    [innerHTML]=\"part.content\"\n                  ></span>\n                  <ng-template #mention>\n                    <ng-container *ngIf=\"mentionTemplate; else defaultMention\">\n                      <ng-container\n                        *ngTemplateOutlet=\"\n                          mentionTemplate;\n                          context: { user: part.user! }\n                        \"\n                      ></ng-container>\n                    </ng-container>\n                    <ng-template #defaultMention>\n                      <b>{{ part.content }}</b>\n                    </ng-template>\n                  </ng-template>\n                </ng-container>\n              </p>\n            </div>\n          </div>\n        </div>\n        <div class=\"str-chat__message-simple-reply-button\">\n          <button\n            *ngIf=\"\n              !!message?.reply_count &&\n              mode !== 'thread' &&\n              enabledMessageActions.indexOf('send-reply') !== -1\n            \"\n            class=\"str-chat__message-replies-count-button\"\n            data-testid=\"reply-count-button\"\n            (click)=\"setAsActiveParentMessage()\"\n          >\n            <stream-icon icon=\"reply\"></stream-icon>\n            {{message?.reply_count === 1 ? ('streamChat.1 reply' | translate) : ('streamChat.{{ replyCount }}\n            replies' | translate:replyCountParam)}}\n          </button>\n        </div>\n        <div class=\"str-chat__message-data str-chat__message-simple-data\">\n          <span\n            data-testid=\"sender\"\n            *ngIf=\"!isSentByCurrentUser\"\n            class=\"str-chat__message-simple-name\"\n          >\n            {{ message?.user?.name ? message?.user?.name : message?.user?.id }}\n          </span>\n          <span data-testid=\"date\" class=\"str-chat__message-simple-timestamp\">\n            {{ parsedDate }}\n          </span>\n        </div>\n      </div>\n    </ng-container>\n  </ng-container>\n</div>\n\n<ng-template #sendingStatus>\n  <span\n    class=\"\n      str-chat__message-simple-status str-chat__message-simple-status-angular\n    \"\n    data-testid=\"sending-indicator\"\n  >\n    <div class=\"str-chat__tooltip\">\n      {{ \"streamChat.Sending...\" | translate }}\n    </div>\n    <stream-loading-indicator\n      data-testid=\"loading-indicator\"\n    ></stream-loading-indicator>\n  </span>\n</ng-template>\n<ng-template #readStatus>\n  <span\n    class=\"\n      str-chat__message-simple-status str-chat__message-simple-status-angular\n    \"\n    data-testid=\"read-indicator\"\n  >\n    <div class=\"str-chat__tooltip\" data-testid=\"read-by-tooltip\">\n      {{ readByText }}\n    </div>\n    <stream-avatar\n      class=\"str-chat-angular__avatar-host\"\n      data-test-id=\"last-read-user-avatar\"\n      [size]=\"15\"\n      [imageUrl]=\"lastReadUser?.image\"\n      [name]=\"lastReadUser?.name || lastReadUser?.id\"\n    ></stream-avatar>\n    <span\n      data-test-id=\"read-by-length\"\n      *ngIf=\"isReadByMultipleUsers\"\n      class=\"str-chat__message-simple-status-number\"\n    >\n      {{ (message?.readBy)!.length }}\n    </span>\n  </span>\n</ng-template>\n<ng-template #deliveredStatus>\n  <span\n    *ngIf=\"mode === 'main'\"\n    class=\"\n      str-chat__message-simple-status str-chat__message-simple-status-angular\n    \"\n    data-testid=\"delivered-indicator\"\n  >\n    <div class=\"str-chat__tooltip\">\n      {{ \"streamChat.Delivered\" | translate }}\n    </div>\n    <stream-icon\n      data-testid=\"delivered-icon\"\n      icon=\"delivered-icon\"\n    ></stream-icon>\n  </span>\n</ng-template>\n\n<ng-template #deletedMessage>\n  <div data-testid=\"message-deleted-component\">\n    <div class=\"str-chat__message--deleted-inner\" translate>\n      streamChat.This message was deleted...\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #systemMessage>\n  <div data-testid=\"system-message\" class=\"str-chat__message--system\">\n    <div class=\"str-chat__message--system__text\">\n      <div class=\"str-chat__message--system__line\"></div>\n      <p>{{ message?.text }}</p>\n      <div class=\"str-chat__message--system__line\"></div>\n    </div>\n    <div class=\"str-chat__message--system__date\">\n      {{ parsedDate }}\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #quotedMessage>\n  <div\n    *ngIf=\"message?.quoted_message\"\n    class=\"quoted-message\"\n    data-testid=\"quoted-message-container\"\n    [class.mine]=\"isSentByCurrentUser\"\n  >\n    <stream-avatar\n      data-testid=\"qouted-message-avatar\"\n      class=\"str-chat-angular__avatar-host\"\n      [imageUrl]=\"message?.quoted_message?.user?.image\"\n      [name]=\"\n        message?.quoted_message?.user?.name || message?.quoted_message?.user?.id\n      \"\n      [size]=\"20\"\n    ></stream-avatar>\n    <div class=\"quoted-message-inner\">\n      <stream-attachment-list\n        *ngIf=\"\n          message?.quoted_message?.attachments &&\n          message?.quoted_message?.attachments?.length\n        \"\n        [attachments]=\"quotedMessageAttachments\"\n        [messageId]=\"message?.quoted_message?.id\"\n      ></stream-attachment-list>\n      <div\n        data-testid=\"quoted-message-text\"\n        [innerHTML]=\"\n          message?.quoted_message?.html || message?.quoted_message?.text\n        \"\n      ></div>\n    </div>\n  </div>\n</ng-template>\n", components: [{ type: AvatarComponent, selector: "stream-avatar", inputs: ["name", "imageUrl", "size"] }, { type: MessageActionsBoxComponent, selector: "stream-message-actions-box", inputs: ["messageInputTemplate", "isOpen", "isMine", "message", "enabledActions"], outputs: ["displayedActionsCount", "isEditing"] }, { type: IconComponent, selector: "stream-icon", inputs: ["icon", "size"] }, { type: MessageReactionsComponent, selector: "stream-message-reactions", inputs: ["messageId", "messageReactionCounts", "isSelectorOpen", "latestReactions", "ownReactions"], outputs: ["isSelectorOpenChange"] }, { type: AttachmentListComponent, selector: "stream-attachment-list", inputs: ["messageId", "attachments"] }, { type: LoadingIndicatorComponent, selector: "stream-loading-indicator", inputs: ["size", "color"] }], directives: [{ type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i6__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2__namespace.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }], pipes: { "translate": i2__namespace.TranslatePipe } });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: MessageComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -3788,13 +3986,25 @@
                     args: ['container']
                 }] } });
 
+    /**
+     * The `Textarea` component is used by the [`MessageInput`](./MessageInputComponent.mdx) component to display the input HTML element where users can type their message.
+     */
     var TextareaComponent = /** @class */ (function () {
         function TextareaComponent(emojiInputService) {
             var _this = this;
             this.emojiInputService = emojiInputService;
             this.class = 'str-chat__textarea';
+            /**
+             * The value of the input HTML element.
+             */
             this.value = '';
+            /**
+             * Emits the current value of the input element when a user types.
+             */
             this.valueChange = new i0.EventEmitter();
+            /**
+             * Emits when a user triggers a message send event (this happens when they hit the `Enter` key).
+             */
             this.send = new i0.EventEmitter();
             this.subscriptions = [];
             this.subscriptions.push(this.emojiInputService.emojiInput$.subscribe(function (emoji) {
@@ -3867,6 +4077,9 @@
                 args: [{ providedIn: 'root' }]
             }], ctorParameters: function () { return []; } });
 
+    /**
+     * The `AutocompleteTextarea` component is used by the [`MessageInput`](./MessageInputComponent.mdx) component to display the input HTML element where users can type their message.
+     */
     var AutocompleteTextareaComponent = /** @class */ (function () {
         function AutocompleteTextareaComponent(channelService, chatClientService, transliterationService, emojiInputService) {
             var _this = this;
@@ -3875,11 +4088,29 @@
             this.transliterationService = transliterationService;
             this.emojiInputService = emojiInputService;
             this.class = 'str-chat__textarea';
+            /**
+             * The value of the input HTML element.
+             */
             this.value = '';
+            /**
+             * If true, users can mention other users in messages. You can also set this input on the [`MessageInput`](./MessageInputComponent.mdx/#inputs-and-outputs) component.
+             */
             this.areMentionsEnabled = true;
+            /**
+             * The scope for user mentions, either members of the current channel of members of the application. You can also set this input on the [`MessageInput`](./MessageInputComponent.mdx/#inputs-and-outputs) component.
+             */
             this.mentionScope = 'channel';
+            /**
+             * Emits the current value of the input element when a user types.
+             */
             this.valueChange = new i0.EventEmitter();
+            /**
+             * Emits when a user triggers a message send event (this happens when they hit the `Enter` key).
+             */
             this.send = new i0.EventEmitter();
+            /**
+             * Emits the array of users that are mentioned in the message, it is updated when a user mentions a new user or deletes a mention.
+             */
             this.userMentions = new i0.EventEmitter();
             this.autocompleteKey = 'autocompleteLabel';
             this.mentionTriggerChar = '@';
@@ -4047,7 +4278,7 @@
         return AutocompleteTextareaComponent;
     }());
     AutocompleteTextareaComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: AutocompleteTextareaComponent, deps: [{ token: ChannelService }, { token: ChatClientService }, { token: TransliterationService }, { token: EmojiInputService }], 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", commandAutocompleteItemTemplate: "commandAutocompleteItemTemplate", 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 str-chat__angular-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 class=\"rta__entity\" *ngSwitchCase=\"'command'\">\n      <ng-container\n        *ngTemplateOutlet=\"\n          commandAutocompleteItemTemplate || defaultCommandTemplate;\n          context: { item: item }\n        \"\n      ></ng-container>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #defaultCommandTemplate let-item=\"item\">\n  <div class=\"str-chat__slash-command\">\n    <span class=\"str-chat__slash-command-header\">\n      <strong data-testclass=\"command-name\">{{ item.name }}</strong>\n      {{ item.args }}\n    </span>\n    <br />\n    <span class=\"str-chat__slash-command-description\">{{\n      item.description\n    }}</span>\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: i6__namespace.MentionDirective, selector: "[mention], [mentionConfig]", inputs: ["mentionConfig", "mention", "mentionListTemplate"], outputs: ["searchTerm", "itemSelected", "opened", "closed"] }, { type: i4__namespace.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4__namespace.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i4__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "translate": i2__namespace.TranslatePipe } });
+    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", commandAutocompleteItemTemplate: "commandAutocompleteItemTemplate", 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 str-chat__angular-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 class=\"rta__entity\" *ngSwitchCase=\"'command'\">\n      <ng-container\n        *ngTemplateOutlet=\"\n          commandAutocompleteItemTemplate || defaultCommandTemplate;\n          context: { item: item }\n        \"\n      ></ng-container>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #defaultCommandTemplate let-item=\"item\">\n  <div class=\"str-chat__slash-command\">\n    <span class=\"str-chat__slash-command-header\">\n      <strong data-testclass=\"command-name\">{{ item.name }}</strong>\n      {{ item.args }}\n    </span>\n    <br />\n    <span class=\"str-chat__slash-command-description\">{{\n      item.description\n    }}</span>\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: i6__namespace$1.MentionDirective, selector: "[mention], [mentionConfig]", inputs: ["mentionConfig", "mention", "mentionListTemplate"], outputs: ["searchTerm", "itemSelected", "opened", "closed"] }, { type: i6__namespace.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i6__namespace.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i6__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "translate": i2__namespace.TranslatePipe } });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: AutocompleteTextareaComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -4119,6 +4350,9 @@
             date1.getDate() === date2.getDate());
     };
 
+    /**
+     * The `MessageList` component renders a scrollable list of messages.
+     */
     var MessageListComponent = /** @class */ (function () {
         function MessageListComponent(channelService, chatClientService, imageLoadService) {
             var _this = this;
@@ -4126,14 +4360,17 @@
             this.chatClientService = chatClientService;
             this.imageLoadService = imageLoadService;
             /**
-             * @deprecated https://getstream.io/chat/docs/sdk/angular/components/message_list/#caution-arereactionsenabled-deprecated
+             * @deprecated use [channel capabilities](https://getstream.io/chat/docs/javascript/channel_capabilities/?language=javascript) instead. If true, the message reactions are displayed. Users can also react to messages if they have the necessary [channel capability](https://getstream.io/chat/docs/javascript/channel_capabilities/?language=javascript).
              */
             this.areReactionsEnabled = undefined;
             /**
-             * @deprecated https://getstream.io/chat/docs/sdk/angular/components/message_list/#caution-enabledmessageactions-deprecated
+             * @deprecated use [channel capabilities](https://getstream.io/chat/docs/javascript/channel_capabilities/?language=javascript) instead. The list of [actions that are enabled](./MessageActionsBoxComponent.mdx), please note that the user also has to have the necessary [channel capabilities](https://getstream.io/chat/docs/javascript/channel_capabilities/?language=javascript) for actions to work. Unathorized actions won't be displayed on the UI. The `MessgaeList` component makes the necessary checks before passing the actions to the `Message` component.
              */
             /* eslint-disable-next-line @angular-eslint/no-input-rename */
             this.enabledMessageActionsInput = undefined;
+            /**
+             * Determines if the message list should display channel messages or [thread messages](https://getstream.io/chat/docs/javascript/threads/?language=javascript).
+             */
             this.mode = 'main';
             this.enabledMessageActions = [];
             this.class = 'str-chat-angular__main-panel-inner str-chat-angular__message-list-host';
@@ -4200,6 +4437,8 @@
                 }
                 _this.parentMessage = message;
             }));
+            this.usersTypingInChannel$ = this.channelService.usersTypingInChannel$;
+            this.usersTypingInThread$ = this.channelService.usersTypingInThread$;
         }
         MessageListComponent.prototype.ngOnInit = function () {
             this.setMessages$();
@@ -4240,9 +4479,21 @@
         MessageListComponent.prototype.ngOnDestroy = function () {
             this.subscriptions.forEach(function (s) { return s.unsubscribe(); });
         };
+        Object.defineProperty(MessageListComponent.prototype, "usersTyping$", {
+            get: function () {
+                return this.mode === 'thread'
+                    ? this.usersTypingInThread$
+                    : this.usersTypingInChannel$;
+            },
+            enumerable: false,
+            configurable: true
+        });
         MessageListComponent.prototype.trackByMessageId = function (index, item) {
             return item.id;
         };
+        MessageListComponent.prototype.trackByUserId = function (index, user) {
+            return user.id;
+        };
         MessageListComponent.prototype.scrollToBottom = function () {
             this.scrollContainer.nativeElement.scrollTop =
                 this.scrollContainer.nativeElement.scrollHeight;
@@ -4349,7 +4600,7 @@
         return MessageListComponent;
     }());
     MessageListComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: MessageListComponent, deps: [{ token: ChannelService }, { token: ChatClientService }, { token: ImageLoadService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    MessageListComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: MessageListComponent, selector: "stream-message-list", inputs: { messageTemplate: "messageTemplate", messageInputTemplate: "messageInputTemplate", mentionTemplate: "mentionTemplate", areReactionsEnabled: "areReactionsEnabled", enabledMessageActionsInput: ["enabledMessageActions", "enabledMessageActionsInput"], mode: "mode" }, host: { properties: { "class": "this.class" } }, viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], descendants: true }, { propertyName: "parentMessageElement", first: true, predicate: ["parentMessageElement"], descendants: true }], usesOnChanges: true, ngImport: i0__namespace, template: "<div\n  #scrollContainer\n  data-testid=\"scroll-container\"\n  class=\"str-chat__list\"\n  (scroll)=\"scrolled()\"\n>\n  <div class=\"str-chat__reverse-infinite-scroll\">\n    <ul class=\"str-chat__ul\">\n      <li\n        #parentMessageElement\n        *ngIf=\"mode === 'thread'\"\n        data-testid=\"parent-message\"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"\n            messageTemplateContainer;\n            context: { message: parentMessage }\n          \"\n        ></ng-container>\n        <div class=\"str-chat__thread-start\" translate>\n          streamChat.Start of a new thread\n        </div>\n      </li>\n      <li\n        data-testclass=\"message\"\n        *ngFor=\"\n          let message of messages$ | async;\n          let i = index;\n          trackBy: trackByMessageId\n        \"\n        class=\"str-chat__li str-chat__li--{{ groupStyles[i] }}\"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"\n            messageTemplateContainer;\n            context: { message: message }\n          \"\n        ></ng-container>\n      </li>\n    </ul>\n  </div>\n</div>\n<div class=\"str-chat__list-notifications\">\n  <button\n    data-testid=\"scroll-to-bottom\"\n    *ngIf=\"isUserScrolledUp\"\n    class=\"\n      str-chat__message-notification\n      str-chat__message-notification-right\n      str-chat__message-notification-scroll-down\n    \"\n    (keyup.enter)=\"scrollToBottom()\"\n    (click)=\"scrollToBottom()\"\n  >\n    <div\n      *ngIf=\"unreadMessageCount > 0\"\n      class=\"\n        str-chat__message-notification\n        str-chat__message-notification-scroll-down-unread-count\n      \"\n    >\n      {{ unreadMessageCount }}\n    </div>\n  </button>\n</div>\n\n<ng-template #messageTemplateContainer let-message=\"message\">\n  <ng-container *ngIf=\"messageTemplate; else defaultMessageTemplate\">\n    <ng-container\n      *ngTemplateOutlet=\"\n        messageTemplate;\n        context: {\n          message: message,\n          areReactionsEnabled: areReactionsEnabled,\n          canReactToMessage: canReactToMessage,\n          lastSentMessageId: !!(\n            lastSentMessageId && message?.id === lastSentMessageId\n          ),\n          canReceiveReadEvents: canReceiveReadEvents,\n          messageInputTemplate: messageInputTemplate,\n          mentionTemplate: mentionTemplate,\n          mode: mode\n        }\n      \"\n    ></ng-container>\n  </ng-container>\n  <ng-template #defaultMessageTemplate>\n    <stream-message\n      [message]=\"message\"\n      [areReactionsEnabled]=\"areReactionsEnabled\"\n      [canReactToMessage]=\"canReactToMessage\"\n      [isLastSentMessage]=\"\n        !!(lastSentMessageId && message?.id === lastSentMessageId)\n      \"\n      [enabledMessageActions]=\"enabledMessageActions\"\n      [canReceiveReadEvents]=\"canReceiveReadEvents\"\n      [messageInputTemplate]=\"messageInputTemplate\"\n      [mentionTemplate]=\"mentionTemplate\"\n      [mode]=\"mode\"\n    ></stream-message>\n  </ng-template>\n</ng-template>\n", components: [{ type: MessageComponent, selector: "stream-message", inputs: ["messageInputTemplate", "mentionTemplate", "message", "enabledMessageActions", "areReactionsEnabled", "canReactToMessage", "isLastSentMessage", "canReceiveReadEvents", "mode"] }], directives: [{ type: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2__namespace.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { type: i4__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i4__namespace.AsyncPipe } });
+    MessageListComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: MessageListComponent, selector: "stream-message-list", inputs: { messageTemplate: "messageTemplate", messageInputTemplate: "messageInputTemplate", mentionTemplate: "mentionTemplate", typingIndicatorTemplate: "typingIndicatorTemplate", areReactionsEnabled: "areReactionsEnabled", enabledMessageActionsInput: ["enabledMessageActions", "enabledMessageActionsInput"], mode: "mode" }, host: { properties: { "class": "this.class" } }, viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], descendants: true }, { propertyName: "parentMessageElement", first: true, predicate: ["parentMessageElement"], descendants: true }], usesOnChanges: true, ngImport: i0__namespace, template: "<div\n  #scrollContainer\n  data-testid=\"scroll-container\"\n  class=\"str-chat__list\"\n  (scroll)=\"scrolled()\"\n>\n  <div class=\"str-chat__reverse-infinite-scroll\">\n    <ul class=\"str-chat__ul\">\n      <li\n        #parentMessageElement\n        *ngIf=\"mode === 'thread'\"\n        data-testid=\"parent-message\"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"\n            messageTemplateContainer;\n            context: { message: parentMessage }\n          \"\n        ></ng-container>\n        <div class=\"str-chat__thread-start\" translate>\n          streamChat.Start of a new thread\n        </div>\n      </li>\n      <li\n        data-testclass=\"message\"\n        *ngFor=\"\n          let message of messages$ | async;\n          let i = index;\n          trackBy: trackByMessageId\n        \"\n        class=\"str-chat__li str-chat__li--{{ groupStyles[i] }}\"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"\n            messageTemplateContainer;\n            context: { message: message }\n          \"\n        ></ng-container>\n      </li>\n    </ul>\n    <ng-container *ngIf=\"typingIndicatorTemplate; else defaultTypingIndicator\">\n      <ng-container\n        *ngTemplateOutlet=\"\n          typingIndicatorTemplate;\n          context: { usersTyping$: usersTyping$ }\n        \"\n      ></ng-container>\n    </ng-container>\n    <ng-template #defaultTypingIndicator>\n      <div\n        *ngIf=\"(usersTyping$ | async)?.length\"\n        data-testid=\"typing-indicator\"\n        class=\"str-chat__typing-indicator str-chat__typing-indicator--typing\"\n      >\n        <stream-avatar\n          *ngFor=\"let user of usersTyping$ | async; trackBy: trackByUserId\"\n          [name]=\"user.name || user.id\"\n          [imageUrl]=\"user.image\"\n        ></stream-avatar>\n        <div class=\"str-chat__typing-indicator__dots\">\n          <span class=\"str-chat__typing-indicator__dot\"></span>\n          <span class=\"str-chat__typing-indicator__dot\"></span>\n          <span class=\"str-chat__typing-indicator__dot\"></span>\n        </div>\n      </div>\n    </ng-template>\n  </div>\n</div>\n<div class=\"str-chat__list-notifications\">\n  <button\n    data-testid=\"scroll-to-bottom\"\n    *ngIf=\"isUserScrolledUp\"\n    class=\"\n      str-chat__message-notification\n      str-chat__message-notification-right\n      str-chat__message-notification-scroll-down\n    \"\n    (keyup.enter)=\"scrollToBottom()\"\n    (click)=\"scrollToBottom()\"\n  >\n    <div\n      *ngIf=\"unreadMessageCount > 0\"\n      class=\"\n        str-chat__message-notification\n        str-chat__message-notification-scroll-down-unread-count\n      \"\n    >\n      {{ unreadMessageCount }}\n    </div>\n  </button>\n</div>\n\n<ng-template #messageTemplateContainer let-message=\"message\">\n  <ng-container *ngIf=\"messageTemplate; else defaultMessageTemplate\">\n    <ng-container\n      *ngTemplateOutlet=\"\n        messageTemplate;\n        context: {\n          message: message,\n          areReactionsEnabled: areReactionsEnabled,\n          canReactToMessage: canReactToMessage,\n          lastSentMessageId: !!(\n            lastSentMessageId && message?.id === lastSentMessageId\n          ),\n          canReceiveReadEvents: canReceiveReadEvents,\n          messageInputTemplate: messageInputTemplate,\n          mentionTemplate: mentionTemplate,\n          mode: mode\n        }\n      \"\n    ></ng-container>\n  </ng-container>\n  <ng-template #defaultMessageTemplate>\n    <stream-message\n      [message]=\"message\"\n      [areReactionsEnabled]=\"areReactionsEnabled\"\n      [canReactToMessage]=\"canReactToMessage\"\n      [isLastSentMessage]=\"\n        !!(lastSentMessageId && message?.id === lastSentMessageId)\n      \"\n      [enabledMessageActions]=\"enabledMessageActions\"\n      [canReceiveReadEvents]=\"canReceiveReadEvents\"\n      [messageInputTemplate]=\"messageInputTemplate\"\n      [mentionTemplate]=\"mentionTemplate\"\n      [mode]=\"mode\"\n    ></stream-message>\n  </ng-template>\n</ng-template>\n", components: [{ type: AvatarComponent, selector: "stream-avatar", inputs: ["name", "imageUrl", "size"] }, { type: MessageComponent, selector: "stream-message", inputs: ["messageInputTemplate", "mentionTemplate", "message", "enabledMessageActions", "areReactionsEnabled", "canReactToMessage", "isLastSentMessage", "canReceiveReadEvents", "mode"] }], directives: [{ type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2__namespace.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { type: i6__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i6__namespace.AsyncPipe } });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: MessageListComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -4363,6 +4614,8 @@
                     type: i0.Input
                 }], mentionTemplate: [{
                     type: i0.Input
+                }], typingIndicatorTemplate: [{
+                    type: i0.Input
                 }], areReactionsEnabled: [{
                     type: i0.Input
                 }], enabledMessageActionsInput: [{
@@ -4381,6 +4634,9 @@
                     args: ['parentMessageElement']
                 }] } });
 
+    /**
+     * The `Thread` component represents a [message thread](https://getstream.io/chat/docs/javascript/threads/?language=javascript), it is a container component that displays a thread with a header, [`MessageList`](./MessageListComponent.mdx) and [`MessageInput`](./MessageInputComponent.mdx) components.
+     */
     var ThreadComponent = /** @class */ (function () {
         function ThreadComponent(channelService) {
             var _this = this;
@@ -4425,13 +4681,13 @@
         return StreamAvatarModule;
     }());
     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: [i4.CommonModule, i2.TranslateModule], exports: [AvatarComponent] });
-    StreamAvatarModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: StreamAvatarModule, imports: [[i4.CommonModule, i2.TranslateModule]] });
+    StreamAvatarModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: StreamAvatarModule, declarations: [AvatarComponent], imports: [i6.CommonModule, i2.TranslateModule], exports: [AvatarComponent] });
+    StreamAvatarModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: StreamAvatarModule, imports: [[i6.CommonModule, i2.TranslateModule]] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: StreamAvatarModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
                         declarations: [AvatarComponent],
-                        imports: [i4.CommonModule, i2.TranslateModule],
+                        imports: [i6.CommonModule, i2.TranslateModule],
                         exports: [AvatarComponent],
                     }]
             }] });
@@ -4459,7 +4715,7 @@
             AttachmentPreviewListComponent,
             ModalComponent,
             TextareaDirective,
-            ThreadComponent], imports: [i4.CommonModule, i2.TranslateModule, StreamAvatarModule], exports: [ChannelComponent,
+            ThreadComponent], imports: [i6.CommonModule, i2.TranslateModule, StreamAvatarModule], exports: [ChannelComponent,
             ChannelHeaderComponent,
             ChannelListComponent,
             ChannelPreviewComponent,
@@ -4477,7 +4733,7 @@
             ModalComponent,
             StreamAvatarModule,
             ThreadComponent] });
-    StreamChatModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: StreamChatModule, imports: [[i4.CommonModule, i2.TranslateModule, StreamAvatarModule], StreamAvatarModule] });
+    StreamChatModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: StreamChatModule, imports: [[i6.CommonModule, i2.TranslateModule, StreamAvatarModule], StreamAvatarModule] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: StreamChatModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
@@ -4501,7 +4757,7 @@
                             TextareaDirective,
                             ThreadComponent,
                         ],
-                        imports: [i4.CommonModule, i2.TranslateModule, StreamAvatarModule],
+                        imports: [i6.CommonModule, i2.TranslateModule, StreamAvatarModule],
                         exports: [
                             ChannelComponent,
                             ChannelHeaderComponent,
@@ -4531,18 +4787,18 @@
         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: [i4.CommonModule, i2.TranslateModule, i6.MentionModule, StreamAvatarModule], exports: [AutocompleteTextareaComponent] });
+    StreamAutocompleteTextareaModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: StreamAutocompleteTextareaModule, declarations: [AutocompleteTextareaComponent], imports: [i6.CommonModule, i2.TranslateModule, i6$1.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: [[i4.CommonModule, i2.TranslateModule, i6.MentionModule, StreamAvatarModule]] });
+        ], imports: [[i6.CommonModule, i2.TranslateModule, i6$1.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: [i4.CommonModule, i2.TranslateModule, i6.MentionModule, StreamAvatarModule],
+                        imports: [i6.CommonModule, i2.TranslateModule, i6$1.MentionModule, StreamAvatarModule],
                         exports: [AutocompleteTextareaComponent],
                         providers: [
                             {
@@ -4559,18 +4815,18 @@
         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: [i4.CommonModule, i2.TranslateModule], exports: [TextareaComponent] });
+    StreamTextareaModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: StreamTextareaModule, declarations: [TextareaComponent], imports: [i6.CommonModule, i2.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: [[i4.CommonModule, i2.TranslateModule]] });
+        ], imports: [[i6.CommonModule, i2.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: [i4.CommonModule, i2.TranslateModule],
+                        imports: [i6.CommonModule, i2.TranslateModule],
                         exports: [TextareaComponent],
                         providers: [
                             {