stream-chat-angular 3.0.1 → 3.2.1

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.i7));
-}(this, (function (exports, i0, rxjs, streamChat, operators, uuid, i2, i3, prettybytes, Dayjs, calendar, emojiRegex, transliterate, i7) { '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.i9, global.ng.common, global.prettybytes, global.Dayjs, global.calendar, global.emojiRegex, global.transliterate, global.i7));
+}(this, (function (exports, i0, rxjs, streamChat, operators, uuid, i9, i3, prettybytes, Dayjs, calendar, emojiRegex, transliterate, i7) { 'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -27,7 +27,7 @@
     }
 
     var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
-    var i2__namespace = /*#__PURE__*/_interopNamespace(i2);
+    var i9__namespace = /*#__PURE__*/_interopNamespace(i9);
     var i3__namespace = /*#__PURE__*/_interopNamespace(i3);
     var prettybytes__default = /*#__PURE__*/_interopDefaultLegacy(prettybytes);
     var Dayjs__default = /*#__PURE__*/_interopDefaultLegacy(Dayjs);
@@ -354,7 +354,7 @@
         return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
     }
 
-    var version = '3.0.1';
+    var version = '3.2.1';
 
     /**
      * The `NotificationService` can be used to add or remove notifications. By default the [`NotificationList`](../components/NotificationListComponent.mdx) component displays the currently active notifications.
@@ -728,7 +728,7 @@
                 this.latestMessageDateByUserByChannelsSubject.asObservable();
         }
         /**
-         * Sets the given `channel` as active.
+         * Sets the given `channel` as active and marks it as read.
          * @param channel
          */
         ChannelService.prototype.setAsActiveChannel = function (channel) {
@@ -853,7 +853,7 @@
             });
         };
         /**
-         * Queries the channels with the given filters, sorts and options. More info about [channel querying](https://getstream.io/chat/docs/javascript/query_channels/?language=javascript) can be found in the platform documentation.
+         * Queries the channels with the given filters, sorts and options. More info about [channel querying](https://getstream.io/chat/docs/javascript/query_channels/?language=javascript) can be found in the platform documentation. By default the first channel in the list will be set as active channel and will be marked as read.
          * @param filters
          * @param sort
          * @param options
@@ -2184,14 +2184,14 @@
         };
         return StreamI18nService;
     }());
-    StreamI18nService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: StreamI18nService, deps: [{ token: i2__namespace.TranslateService }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    StreamI18nService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: StreamI18nService, deps: [{ token: i9__namespace.TranslateService }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
     StreamI18nService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: StreamI18nService, providedIn: 'root' });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: StreamI18nService, decorators: [{
                 type: i0.Injectable,
                 args: [{
                         providedIn: 'root',
                     }]
-            }], ctorParameters: function () { return [{ type: i2__namespace.TranslateService }]; } });
+            }], ctorParameters: function () { return [{ type: i9__namespace.TranslateService }]; } });
 
     /**
      * The `Avatar` component displays the provided image, with fallback to the first letter of the optional name input.
@@ -2415,7 +2415,7 @@
         return IconComponent;
     }());
     IconComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: IconComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    IconComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: IconComponent, selector: "stream-icon", inputs: { icon: "icon", size: "size" }, ngImport: i0__namespace, template: "<svg\n  data-testid=\"action-icon\"\n  *ngIf=\"icon === 'action-icon'\"\n  height=\"4\"\n  viewBox=\"0 0 11 4\"\n  width=\"11\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n>\n  <path\n    d=\"M1.5 3a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm4 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm4 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z\"\n    fillRule=\"nonzero\"\n  />\n</svg>\n<svg\n  *ngIf=\"icon === 'delivered-icon'\"\n  height=\"16\"\n  width=\"16\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n  data-testid=\"delivered-icon\"\n>\n  <path\n    d=\"M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0zm3.72 6.633a.955.955 0 1 0-1.352-1.352L6.986 8.663 5.633 7.31A.956.956 0 1 0 4.28 8.663l2.029 2.028a.956.956 0 0 0 1.353 0l4.058-4.058z\"\n    fill=\"#006CFF\"\n    fillRule=\"evenodd\"\n  />\n</svg>\n<svg\n  *ngIf=\"icon === 'reaction-icon'\"\n  height=\"12\"\n  viewBox=\"0 0 12 12\"\n  width=\"12\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n  data-testid=\"reaction-icon\"\n>\n  <g clipRule=\"evenodd\" fillRule=\"evenodd\">\n    <path\n      d=\"M6 1.2C3.3 1.2 1.2 3.3 1.2 6c0 2.7 2.1 4.8 4.8 4.8 2.7 0 4.8-2.1 4.8-4.8 0-2.7-2.1-4.8-4.8-4.8zM0 6c0-3.3 2.7-6 6-6s6 2.7 6 6-2.7 6-6 6-6-2.7-6-6z\"\n    ></path>\n    <path\n      d=\"M5.4 4.5c0 .5-.4.9-.9.9s-.9-.4-.9-.9.4-.9.9-.9.9.4.9.9zM8.4 4.5c0 .5-.4.9-.9.9s-.9-.4-.9-.9.4-.9.9-.9.9.4.9.9zM3.3 6.7c.3-.2.6-.1.8.1.3.4.8.9 1.5 1 .6.2 1.4.1 2.4-1 .2-.2.6-.3.8 0 .2.2.3.6 0 .8-1.1 1.3-2.4 1.7-3.5 1.5-1-.2-1.8-.9-2.2-1.5-.2-.3-.1-.7.2-.9z\"\n    ></path>\n  </g>\n</svg>\n<svg\n  data-testid=\"connection-error\"\n  *ngIf=\"icon === 'connection-error'\"\n  width=\"78px\"\n  height=\"78px\"\n  viewBox=\"0 0 78 78\"\n  version=\"1.1\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n  xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n>\n  <!-- Generator: Sketch 52.6 (67491) - http://www.bohemiancoding.com/sketch -->\n  <title>Combined Shape</title>\n  <desc>Created with Sketch.</desc>\n  <g\n    id=\"Interactions\"\n    stroke=\"none\"\n    stroke-width=\"1\"\n    fill=\"none\"\n    fill-rule=\"evenodd\"\n  >\n    <g\n      id=\"Connection-Error-_-Connectivity\"\n      transform=\"translate(-270.000000, -30.000000)\"\n      fill=\"#CF1F25\"\n    >\n      <g\n        id=\"109-network-connection\"\n        transform=\"translate(270.000000, 30.000000)\"\n      >\n        <path\n          d=\"M66.4609744,11.414231 C81.6225232,26.5757798 81.6225232,51.157545 66.4609744,66.3188467 C51.2994256,81.4803954 26.7176604,81.4803954 11.5563587,66.3188467 C-3.60519004,51.1572979 -3.60519004,26.5755327 11.5563587,11.414231 C26.7179075,-3.74731776 51.2996727,-3.74731776 66.4609744,11.414231 Z M54.7853215,45.8823776 L54.7853215,40.5882574 C54.7853215,39.613638 53.9952341,38.8235506 53.0206147,38.8235506 L44.9576695,38.8235506 L41.428256,42.3529641 L51.255555,42.3529641 L51.255555,45.8823776 L54.7853215,45.8823776 Z M40.6659027,43.1153174 L37.8988425,45.8823776 L40.6659027,45.8823776 L40.6659027,43.1153174 Z M51.1764962,56.4702653 L58.2353232,56.4702653 C59.2099355,56.4702653 60.00003,55.6801708 60.00003,54.7055585 L60.00003,51.176145 C60.00003,50.2015327 59.2099355,49.4114382 58.2353232,49.4114382 L51.1764962,49.4114382 C50.2018839,49.4114382 49.4117894,50.2015327 49.4117894,51.176145 L49.4117894,54.7055585 C49.4117894,55.6801708 50.2018839,56.4702653 51.1764962,56.4702653 Z M35.2941353,56.4702653 L42.3529624,56.4702653 C43.3275746,56.4702653 44.1176691,55.6801708 44.1176691,54.7055585 L44.1176691,51.176145 C44.1176691,50.2015327 43.3275746,49.4114382 42.3529624,49.4114382 L35.2941353,49.4114382 C34.319523,49.4114382 33.5294285,50.2015327 33.5294285,51.176145 L33.5294285,54.7055585 C33.5294285,55.6801708 34.319523,56.4702653 35.2941353,56.4702653 Z M56.6964989,19.0874231 C56.007381,18.3985134 54.8903216,18.3985134 54.2012036,19.087423 L45.882376,27.4062507 L45.882376,19.4117761 C45.882376,18.4371568 45.0922885,17.6470693 44.1176692,17.6470693 L33.5294286,17.6470693 C32.5548092,17.6470694 31.7647218,18.4371568 31.7647218,19.4117761 L31.7647218,30.0000167 C31.7647219,30.9746363 32.5548092,31.7647237 33.5294285,31.7647237 L41.5239031,31.7647237 L34.4650761,38.8235508 L24.7058947,38.8235508 C23.7312753,38.8235508 22.9411879,39.6136382 22.9411879,40.5882575 L22.9411879,45.8823778 L26.4706014,45.8823778 L26.4706014,42.3529643 L30.9356624,42.3529643 L23.8768354,49.4117914 L19.4117743,49.4117914 C18.4371549,49.4117914 17.6470675,50.2018788 17.6470675,51.1764981 L17.6470675,54.7059117 C17.6504049,54.9674302 17.7129076,55.2248042 17.8298886,55.4587302 L16.4456526,56.8429662 C15.7446193,57.5200453 15.7252005,58.6372282 16.4022825,59.3382615 C17.0793616,60.0392948 18.1965445,60.0587136 18.8975778,59.3816316 C18.9122847,59.3674273 18.9267436,59.3529684 18.940948,59.3382615 L56.6964963,21.5830662 C57.3856425,20.8939094 57.3856425,19.7765747 56.6964963,19.0874179 Z\"\n          id=\"Combined-Shape\"\n        ></path>\n      </g>\n    </g>\n  </g>\n</svg>\n<svg\n  *ngIf=\"icon === 'send'\"\n  data-testid=\"send\"\n  height=\"17\"\n  viewBox=\"0 0 18 17\"\n  width=\"18\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n>\n  <title translate>streamChat.Send</title>\n  <path\n    d=\"M0 17.015l17.333-8.508L0 0v6.617l12.417 1.89L0 10.397z\"\n    fill=\"#006cff\"\n    fillRule=\"evenodd\"\n  />\n</svg>\n<svg\n  *ngIf=\"icon === 'file-upload'\"\n  data-testid=\"file-upload\"\n  height=\"14\"\n  width=\"14\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n>\n  <title translate>streamChat.Attach files</title>\n  <path\n    d=\"M1.667.333h10.666c.737 0 1.334.597 1.334 1.334v10.666c0 .737-.597 1.334-1.334 1.334H1.667a1.333 1.333 0 0 1-1.334-1.334V1.667C.333.93.93.333 1.667.333zm2 1.334a1.667 1.667 0 1 0 0 3.333 1.667 1.667 0 0 0 0-3.333zm-2 9.333v1.333h10.666v-4l-2-2-4 4-2-2L1.667 11z\"\n    fillRule=\"nonzero\"\n  />\n</svg>\n<svg\n  data-testid=\"retry\"\n  *ngIf=\"icon === 'retry'\"\n  width=\"22\"\n  height=\"20\"\n  viewBox=\"0 0 22 20\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n>\n  <path\n    d=\"M20 5.535V2a1 1 0 0 1 2 0v6a1 1 0 0 1-1 1h-6a1 1 0 0 1 0-2h3.638l-2.975-2.653a8 8 0 1 0 1.884 8.32 1 1 0 1 1 1.886.666A10 10 0 1 1 5.175 1.245c3.901-2.15 8.754-1.462 11.88 1.667L20 5.535z\"\n    fill=\"#FFF\"\n    fill-rule=\"nonzero\"\n  />\n</svg>\n<svg\n  *ngIf=\"icon === 'close'\"\n  data-testid=\"close\"\n  width=\"28\"\n  height=\"28\"\n  viewBox=\"0 0 28 28\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n  xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n>\n  <defs>\n    <path\n      d=\"M465 5c5.53 0 10 4.47 10 10s-4.47 10-10 10-10-4.47-10-10 4.47-10 10-10zm3.59 5L465 13.59 461.41 10 460 11.41l3.59 3.59-3.59 3.59 1.41 1.41 3.59-3.59 3.59 3.59 1.41-1.41-3.59-3.59 3.59-3.59-1.41-1.41z\"\n      id=\"b\"\n    />\n    <filter\n      x=\"-30%\"\n      y=\"-30%\"\n      width=\"160%\"\n      height=\"160%\"\n      filterUnits=\"objectBoundingBox\"\n      id=\"a\"\n    >\n      <feOffset in=\"SourceAlpha\" result=\"shadowOffsetOuter1\" />\n      <feGaussianBlur\n        stdDeviation=\"2\"\n        in=\"shadowOffsetOuter1\"\n        result=\"shadowBlurOuter1\"\n      />\n      <feColorMatrix\n        values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0\"\n        in=\"shadowBlurOuter1\"\n      />\n    </filter>\n  </defs>\n  <g transform=\"translate(-451 -1)\" fill-rule=\"nonzero\" fill=\"none\">\n    <use fill=\"#000\" filter=\"url(#a)\" xlink:href=\"#b\" />\n    <use fill=\"#FFF\" fill-rule=\"evenodd\" xlink:href=\"#b\" />\n  </g>\n</svg>\n<svg\n  *ngIf=\"icon === 'file'\"\n  data-testid=\"file\"\n  className=\"rfu-file-icon--small fa-file-fallback\"\n  [attr.height]=\"size || 20\"\n  [attr.width]=\"size || 20\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n  viewBox=\"0 0 384 512\"\n>\n  <path\n    d=\"M369.9 97.9L286 14C277 5 264.8-.1 252.1-.1H48C21.5 0 0 21.5 0 48v416c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48V131.9c0-12.7-5.1-25-14.1-34zM332.1 128H256V51.9l76.1 76.1zM48 464V48h160v104c0 13.3 10.7 24 24 24h104v288H48z\"\n    fill=\"#414D54\"\n  />\n</svg>\n<svg\n  *ngIf=\"icon === 'reply'\"\n  data-testid=\"reply\"\n  height=\"15\"\n  width=\"18\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n>\n  <path\n    d=\"M.56 10.946H.06l-.002-.498L.025.92a.5.5 0 1 1 1-.004l.032 9.029H9.06v-4l9 4.5-9 4.5v-4H.56z\"\n    fillRule=\"nonzero\"\n  />\n</svg>\n<svg\n  height=\"10\"\n  width=\"10\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n  data-testid=\"close-no-outline\"\n  *ngIf=\"icon === 'close-no-outline'\"\n>\n  <path\n    d=\"M9.916 1.027L8.973.084 5 4.058 1.027.084l-.943.943L4.058 5 .084 8.973l.943.943L5 5.942l3.973 3.974.943-.943L5.942 5z\"\n    fillRule=\"evenodd\"\n  />\n</svg>\n<svg\n  height=\"10\"\n  width=\"14\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n  data-testid=\"reply-in-thread\"\n  *ngIf=\"icon === 'reply-in-thread'\"\n>\n  <path\n    d=\"M8.516 3c4.78 0 4.972 6.5 4.972 6.5-1.6-2.906-2.847-3.184-4.972-3.184v2.872L3.772 4.994 8.516.5V3zM.484 5l4.5-4.237v1.78L2.416 5l2.568 2.125v1.828L.484 5z\"\n    fillRule=\"evenodd\"\n  />\n</svg>\n<svg\n  *ngIf=\"icon === 'arrow-left'\"\n  data-testid=\"arrow-left\"\n  width=\"24\"\n  height=\"24\"\n  viewBox=\"0 0 24 24\"\n  fill=\"none\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n>\n  <path\n    d=\"M15.7049 7.41L14.2949 6L8.29492 12L14.2949 18L15.7049 16.59L11.1249 12L15.7049 7.41Z\"\n    fill=\"var(--black)\"\n  />\n</svg>\n\n<svg\n  *ngIf=\"icon === 'arrow-right'\"\n  data-testid=\"arrow-right\"\n  width=\"24\"\n  height=\"24\"\n  viewBox=\"0 0 24 24\"\n  fill=\"none\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n>\n  <path\n    d=\"M9.70492 6L8.29492 7.41L12.8749 12L8.29492 16.59L9.70492 18L15.7049 12L9.70492 6Z\"\n    fill=\"var(--black)\"\n  />\n</svg>\n<svg\n  *ngIf=\"icon === 'menu'\"\n  data-testid=\"menu\"\n  width=\"24\"\n  height=\"24\"\n  viewBox=\"0 0 24 24\"\n  fill=\"none\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n>\n  <path\n    fill-rule=\"evenodd\"\n    clip-rule=\"evenodd\"\n    d=\"M3 8V6H21V8H3ZM3 13H21V11H3V13ZM3 18H21V16H3V18Z\"\n    fill=\"black\"\n  />\n</svg>\n", directives: [{ type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }] });
+    IconComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: IconComponent, selector: "stream-icon", inputs: { icon: "icon", size: "size" }, ngImport: i0__namespace, template: "<svg\n  data-testid=\"action-icon\"\n  *ngIf=\"icon === 'action-icon'\"\n  height=\"4\"\n  viewBox=\"0 0 11 4\"\n  width=\"11\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n>\n  <path\n    d=\"M1.5 3a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm4 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm4 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z\"\n    fillRule=\"nonzero\"\n  />\n</svg>\n<svg\n  *ngIf=\"icon === 'delivered-icon'\"\n  height=\"16\"\n  width=\"16\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n  data-testid=\"delivered-icon\"\n>\n  <path\n    d=\"M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0zm3.72 6.633a.955.955 0 1 0-1.352-1.352L6.986 8.663 5.633 7.31A.956.956 0 1 0 4.28 8.663l2.029 2.028a.956.956 0 0 0 1.353 0l4.058-4.058z\"\n    fill=\"#006CFF\"\n    fillRule=\"evenodd\"\n  />\n</svg>\n<svg\n  *ngIf=\"icon === 'reaction-icon'\"\n  height=\"12\"\n  viewBox=\"0 0 12 12\"\n  width=\"12\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n  data-testid=\"reaction-icon\"\n>\n  <g clipRule=\"evenodd\" fillRule=\"evenodd\">\n    <path\n      d=\"M6 1.2C3.3 1.2 1.2 3.3 1.2 6c0 2.7 2.1 4.8 4.8 4.8 2.7 0 4.8-2.1 4.8-4.8 0-2.7-2.1-4.8-4.8-4.8zM0 6c0-3.3 2.7-6 6-6s6 2.7 6 6-2.7 6-6 6-6-2.7-6-6z\"\n    ></path>\n    <path\n      d=\"M5.4 4.5c0 .5-.4.9-.9.9s-.9-.4-.9-.9.4-.9.9-.9.9.4.9.9zM8.4 4.5c0 .5-.4.9-.9.9s-.9-.4-.9-.9.4-.9.9-.9.9.4.9.9zM3.3 6.7c.3-.2.6-.1.8.1.3.4.8.9 1.5 1 .6.2 1.4.1 2.4-1 .2-.2.6-.3.8 0 .2.2.3.6 0 .8-1.1 1.3-2.4 1.7-3.5 1.5-1-.2-1.8-.9-2.2-1.5-.2-.3-.1-.7.2-.9z\"\n    ></path>\n  </g>\n</svg>\n<svg\n  data-testid=\"connection-error\"\n  *ngIf=\"icon === 'connection-error'\"\n  width=\"78px\"\n  height=\"78px\"\n  viewBox=\"0 0 78 78\"\n  version=\"1.1\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n  xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n>\n  <!-- Generator: Sketch 52.6 (67491) - http://www.bohemiancoding.com/sketch -->\n  <title>Combined Shape</title>\n  <desc>Created with Sketch.</desc>\n  <g\n    id=\"Interactions\"\n    stroke=\"none\"\n    stroke-width=\"1\"\n    fill=\"none\"\n    fill-rule=\"evenodd\"\n  >\n    <g\n      id=\"Connection-Error-_-Connectivity\"\n      transform=\"translate(-270.000000, -30.000000)\"\n      fill=\"#CF1F25\"\n    >\n      <g\n        id=\"109-network-connection\"\n        transform=\"translate(270.000000, 30.000000)\"\n      >\n        <path\n          d=\"M66.4609744,11.414231 C81.6225232,26.5757798 81.6225232,51.157545 66.4609744,66.3188467 C51.2994256,81.4803954 26.7176604,81.4803954 11.5563587,66.3188467 C-3.60519004,51.1572979 -3.60519004,26.5755327 11.5563587,11.414231 C26.7179075,-3.74731776 51.2996727,-3.74731776 66.4609744,11.414231 Z M54.7853215,45.8823776 L54.7853215,40.5882574 C54.7853215,39.613638 53.9952341,38.8235506 53.0206147,38.8235506 L44.9576695,38.8235506 L41.428256,42.3529641 L51.255555,42.3529641 L51.255555,45.8823776 L54.7853215,45.8823776 Z M40.6659027,43.1153174 L37.8988425,45.8823776 L40.6659027,45.8823776 L40.6659027,43.1153174 Z M51.1764962,56.4702653 L58.2353232,56.4702653 C59.2099355,56.4702653 60.00003,55.6801708 60.00003,54.7055585 L60.00003,51.176145 C60.00003,50.2015327 59.2099355,49.4114382 58.2353232,49.4114382 L51.1764962,49.4114382 C50.2018839,49.4114382 49.4117894,50.2015327 49.4117894,51.176145 L49.4117894,54.7055585 C49.4117894,55.6801708 50.2018839,56.4702653 51.1764962,56.4702653 Z M35.2941353,56.4702653 L42.3529624,56.4702653 C43.3275746,56.4702653 44.1176691,55.6801708 44.1176691,54.7055585 L44.1176691,51.176145 C44.1176691,50.2015327 43.3275746,49.4114382 42.3529624,49.4114382 L35.2941353,49.4114382 C34.319523,49.4114382 33.5294285,50.2015327 33.5294285,51.176145 L33.5294285,54.7055585 C33.5294285,55.6801708 34.319523,56.4702653 35.2941353,56.4702653 Z M56.6964989,19.0874231 C56.007381,18.3985134 54.8903216,18.3985134 54.2012036,19.087423 L45.882376,27.4062507 L45.882376,19.4117761 C45.882376,18.4371568 45.0922885,17.6470693 44.1176692,17.6470693 L33.5294286,17.6470693 C32.5548092,17.6470694 31.7647218,18.4371568 31.7647218,19.4117761 L31.7647218,30.0000167 C31.7647219,30.9746363 32.5548092,31.7647237 33.5294285,31.7647237 L41.5239031,31.7647237 L34.4650761,38.8235508 L24.7058947,38.8235508 C23.7312753,38.8235508 22.9411879,39.6136382 22.9411879,40.5882575 L22.9411879,45.8823778 L26.4706014,45.8823778 L26.4706014,42.3529643 L30.9356624,42.3529643 L23.8768354,49.4117914 L19.4117743,49.4117914 C18.4371549,49.4117914 17.6470675,50.2018788 17.6470675,51.1764981 L17.6470675,54.7059117 C17.6504049,54.9674302 17.7129076,55.2248042 17.8298886,55.4587302 L16.4456526,56.8429662 C15.7446193,57.5200453 15.7252005,58.6372282 16.4022825,59.3382615 C17.0793616,60.0392948 18.1965445,60.0587136 18.8975778,59.3816316 C18.9122847,59.3674273 18.9267436,59.3529684 18.940948,59.3382615 L56.6964963,21.5830662 C57.3856425,20.8939094 57.3856425,19.7765747 56.6964963,19.0874179 Z\"\n          id=\"Combined-Shape\"\n        ></path>\n      </g>\n    </g>\n  </g>\n</svg>\n<svg\n  *ngIf=\"icon === 'send'\"\n  data-testid=\"send\"\n  height=\"17\"\n  viewBox=\"0 0 18 17\"\n  width=\"18\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n>\n  <title translate>streamChat.Send</title>\n  <path\n    d=\"M0 17.015l17.333-8.508L0 0v6.617l12.417 1.89L0 10.397z\"\n    fill=\"#006cff\"\n    fillRule=\"evenodd\"\n  />\n</svg>\n<svg\n  *ngIf=\"icon === 'file-upload'\"\n  data-testid=\"file-upload\"\n  height=\"14\"\n  width=\"14\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n>\n  <title translate>streamChat.Attach files</title>\n  <path\n    d=\"M1.667.333h10.666c.737 0 1.334.597 1.334 1.334v10.666c0 .737-.597 1.334-1.334 1.334H1.667a1.333 1.333 0 0 1-1.334-1.334V1.667C.333.93.93.333 1.667.333zm2 1.334a1.667 1.667 0 1 0 0 3.333 1.667 1.667 0 0 0 0-3.333zm-2 9.333v1.333h10.666v-4l-2-2-4 4-2-2L1.667 11z\"\n    fillRule=\"nonzero\"\n  />\n</svg>\n<svg\n  data-testid=\"retry\"\n  *ngIf=\"icon === 'retry'\"\n  width=\"22\"\n  height=\"20\"\n  viewBox=\"0 0 22 20\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n>\n  <path\n    d=\"M20 5.535V2a1 1 0 0 1 2 0v6a1 1 0 0 1-1 1h-6a1 1 0 0 1 0-2h3.638l-2.975-2.653a8 8 0 1 0 1.884 8.32 1 1 0 1 1 1.886.666A10 10 0 1 1 5.175 1.245c3.901-2.15 8.754-1.462 11.88 1.667L20 5.535z\"\n    fill=\"#FFF\"\n    fill-rule=\"nonzero\"\n  />\n</svg>\n<svg\n  *ngIf=\"icon === 'close'\"\n  data-testid=\"close\"\n  width=\"28\"\n  height=\"28\"\n  viewBox=\"0 0 28 28\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n  xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n>\n  <defs>\n    <path\n      d=\"M465 5c5.53 0 10 4.47 10 10s-4.47 10-10 10-10-4.47-10-10 4.47-10 10-10zm3.59 5L465 13.59 461.41 10 460 11.41l3.59 3.59-3.59 3.59 1.41 1.41 3.59-3.59 3.59 3.59 1.41-1.41-3.59-3.59 3.59-3.59-1.41-1.41z\"\n      id=\"b\"\n    />\n    <filter\n      x=\"-30%\"\n      y=\"-30%\"\n      width=\"160%\"\n      height=\"160%\"\n      filterUnits=\"objectBoundingBox\"\n      id=\"a\"\n    >\n      <feOffset in=\"SourceAlpha\" result=\"shadowOffsetOuter1\" />\n      <feGaussianBlur\n        stdDeviation=\"2\"\n        in=\"shadowOffsetOuter1\"\n        result=\"shadowBlurOuter1\"\n      />\n      <feColorMatrix\n        values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0\"\n        in=\"shadowBlurOuter1\"\n      />\n    </filter>\n  </defs>\n  <g transform=\"translate(-451 -1)\" fill-rule=\"nonzero\" fill=\"none\">\n    <use fill=\"#000\" filter=\"url(#a)\" xlink:href=\"#b\" />\n    <use fill=\"#FFF\" fill-rule=\"evenodd\" xlink:href=\"#b\" />\n  </g>\n</svg>\n<svg\n  *ngIf=\"icon === 'file'\"\n  data-testid=\"file\"\n  className=\"rfu-file-icon--small fa-file-fallback\"\n  [attr.height]=\"size || 20\"\n  [attr.width]=\"size || 20\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n  viewBox=\"0 0 384 512\"\n>\n  <path\n    d=\"M369.9 97.9L286 14C277 5 264.8-.1 252.1-.1H48C21.5 0 0 21.5 0 48v416c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48V131.9c0-12.7-5.1-25-14.1-34zM332.1 128H256V51.9l76.1 76.1zM48 464V48h160v104c0 13.3 10.7 24 24 24h104v288H48z\"\n    fill=\"#414D54\"\n  />\n</svg>\n<svg\n  *ngIf=\"icon === 'reply'\"\n  data-testid=\"reply\"\n  height=\"15\"\n  width=\"18\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n>\n  <path\n    d=\"M.56 10.946H.06l-.002-.498L.025.92a.5.5 0 1 1 1-.004l.032 9.029H9.06v-4l9 4.5-9 4.5v-4H.56z\"\n    fillRule=\"nonzero\"\n  />\n</svg>\n<svg\n  height=\"10\"\n  width=\"10\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n  data-testid=\"close-no-outline\"\n  *ngIf=\"icon === 'close-no-outline'\"\n>\n  <path\n    d=\"M9.916 1.027L8.973.084 5 4.058 1.027.084l-.943.943L4.058 5 .084 8.973l.943.943L5 5.942l3.973 3.974.943-.943L5.942 5z\"\n    fillRule=\"evenodd\"\n  />\n</svg>\n<svg\n  height=\"10\"\n  width=\"14\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n  data-testid=\"reply-in-thread\"\n  *ngIf=\"icon === 'reply-in-thread'\"\n>\n  <path\n    d=\"M8.516 3c4.78 0 4.972 6.5 4.972 6.5-1.6-2.906-2.847-3.184-4.972-3.184v2.872L3.772 4.994 8.516.5V3zM.484 5l4.5-4.237v1.78L2.416 5l2.568 2.125v1.828L.484 5z\"\n    fillRule=\"evenodd\"\n  />\n</svg>\n<svg\n  *ngIf=\"icon === 'arrow-left'\"\n  data-testid=\"arrow-left\"\n  width=\"24\"\n  height=\"24\"\n  viewBox=\"0 0 24 24\"\n  fill=\"none\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n>\n  <path\n    d=\"M15.7049 7.41L14.2949 6L8.29492 12L14.2949 18L15.7049 16.59L11.1249 12L15.7049 7.41Z\"\n    fill=\"var(--black)\"\n  />\n</svg>\n\n<svg\n  *ngIf=\"icon === 'arrow-right'\"\n  data-testid=\"arrow-right\"\n  width=\"24\"\n  height=\"24\"\n  viewBox=\"0 0 24 24\"\n  fill=\"none\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n>\n  <path\n    d=\"M9.70492 6L8.29492 7.41L12.8749 12L8.29492 16.59L9.70492 18L15.7049 12L9.70492 6Z\"\n    fill=\"var(--black)\"\n  />\n</svg>\n<svg\n  *ngIf=\"icon === 'menu'\"\n  data-testid=\"menu\"\n  width=\"24\"\n  height=\"24\"\n  viewBox=\"0 0 24 24\"\n  fill=\"none\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n>\n  <path\n    fill-rule=\"evenodd\"\n    clip-rule=\"evenodd\"\n    d=\"M3 8V6H21V8H3ZM3 13H21V11H3V13ZM3 18H21V16H3V18Z\"\n    fill=\"black\"\n  />\n</svg>\n\n<svg\n  data-testid=\"arrow-up\"\n  *ngIf=\"icon === 'arrow-up'\"\n  width=\"24\"\n  height=\"24\"\n  viewBox=\"0 0 24 24\"\n  fill=\"none\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n>\n  <path\n    d=\"M16.59 15.7051L12 11.1251L7.41 15.7051L6 14.2951L12 8.29508L18 14.2951L16.59 15.7051Z\"\n    fill=\"var(--primary-color)\"\n  />\n</svg>\n<svg\n  data-testid=\"arrow-down\"\n  *ngIf=\"icon === 'arrow-down'\"\n  width=\"24\"\n  height=\"24\"\n  viewBox=\"0 0 24 24\"\n  fill=\"none\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n>\n  <path\n    d=\"M7.41 8.29504L12 12.875L16.59 8.29504L18 9.70504L12 15.705L6 9.70504L7.41 8.29504Z\"\n    fill=\"var(--primary-color)\"\n  />\n</svg>\n", directives: [{ type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i9__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: [{
@@ -2582,7 +2582,7 @@
         return ModalComponent;
     }());
     ModalComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: ModalComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    ModalComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: ModalComponent, selector: "stream-modal", inputs: { isOpen: "isOpen", content: "content" }, outputs: { isOpenChange: "isOpenChange" }, viewQueries: [{ propertyName: "innerContainer", first: true, predicate: ["modalInner"], descendants: true }], usesOnChanges: true, ngImport: i0__namespace, template: "<div\n  data-testid=\"modal\"\n  class=\"str-chat__modal str-chat__modal--{{ isOpen ? 'open' : 'close' }}\"\n>\n  <div\n    data-testid=\"close\"\n    class=\"str-chat__modal__close-button\"\n    (click)=\"close()\"\n    (keyup.enter)=\"close()\"\n    translate\n  >\n    streamChat.Close\n    <stream-icon-placeholder icon=\"close\"></stream-icon-placeholder>\n  </div>\n  <div class=\"str-chat__modal__inner\" #modalInner>\n    <ng-container *ngIf=\"content; else elseContent\">\n      <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </ng-container>\n    <ng-template #elseContent>\n      <ng-content></ng-content>\n    </ng-template>\n  </div>\n</div>\n", components: [{ type: IconPlaceholderComponent, selector: "stream-icon-placeholder", inputs: ["icon", "size"] }], directives: [{ type: i2__namespace.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+    ModalComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: ModalComponent, selector: "stream-modal", inputs: { isOpen: "isOpen", content: "content" }, outputs: { isOpenChange: "isOpenChange" }, viewQueries: [{ propertyName: "innerContainer", first: true, predicate: ["modalInner"], descendants: true }], usesOnChanges: true, ngImport: i0__namespace, template: "<div\n  data-testid=\"modal\"\n  class=\"str-chat__modal str-chat__modal--{{ isOpen ? 'open' : 'close' }}\"\n>\n  <div\n    data-testid=\"close\"\n    class=\"str-chat__modal__close-button\"\n    (click)=\"close()\"\n    (keyup.enter)=\"close()\"\n    translate\n  >\n    streamChat.Close\n    <stream-icon-placeholder icon=\"close\"></stream-icon-placeholder>\n  </div>\n  <div class=\"str-chat__modal__inner\" #modalInner>\n    <ng-container *ngIf=\"content; else elseContent\">\n      <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </ng-container>\n    <ng-template #elseContent>\n      <ng-content></ng-content>\n    </ng-template>\n  </div>\n</div>\n", components: [{ type: IconPlaceholderComponent, selector: "stream-icon-placeholder", inputs: ["icon", "size"] }], directives: [{ type: i9__namespace.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: ModalComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -2867,7 +2867,7 @@
         return AttachmentListComponent;
     }());
     AttachmentListComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: AttachmentListComponent, deps: [{ token: CustomTemplatesService }, { 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" }, viewQueries: [{ propertyName: "modalContent", first: true, predicate: ["modalContent"], descendants: true, static: true }], 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      (click)=\"openImageModal([attachment])\"\n      (keyup.enter)=\"openImageModal([attachment])\"\n    />\n    <div\n      class=\"str-chat__gallery\"\n      data-testid=\"image-gallery\"\n      *ngIf=\"isGallery(attachment)\"\n      [class.str-chat__gallery--square]=\"(attachment?.images)!.length > 3\"\n    >\n      <ng-container\n        *ngFor=\"\n          let galleryImage of attachment.images;\n          let index = index;\n          let isLast = last;\n          trackBy: trackByImageUrl\n        \"\n      >\n        <button\n          *ngIf=\"index < 3 || (index === 3 && isLast)\"\n          class=\"str-chat__gallery-image\"\n          data-testclass=\"gallery-image\"\n          (click)=\"openImageModal(attachment.images!, index)\"\n          (keyup.enter)=\"openImageModal(attachment.images!, index)\"\n        >\n          <img\n            [src]=\"\n              galleryImage.img_url ||\n              galleryImage.thumb_url ||\n              galleryImage.image_url\n            \"\n            [alt]=\"galleryImage.fallback\"\n            (load)=\"imageLoaded()\"\n          />\n        </button>\n        <button\n          *ngIf=\"index === 3 && !isLast\"\n          class=\"str-chat__gallery-placeholder\"\n          data-testclass=\"gallery-image\"\n          (click)=\"openImageModal(attachment.images!, index)\"\n          (keyup.enter)=\"openImageModal(attachment.images!, index)\"\n          [ngStyle]=\"{\n            'background-image':\n              'url(' +\n              (galleryImage.img_url ||\n                galleryImage.thumb_url ||\n                galleryImage.image_url) +\n              ')'\n          }\"\n        >\n          <p\n            [innerHTML]=\"\n              'streamChat.{{ imageCount }} more'\n                | translate: { imageCount: attachment!.images!.length - 4 }\n            \"\n          ></p>\n        </button>\n      </ng-container>\n    </div>\n    <video\n      *ngIf=\"isVideo(attachment)\"\n      controls\n      data-testclass=\"video-attachment\"\n      [src]=\"attachment.asset_url\"\n      style=\"\n        width: 100%;\n        max-width: 400px;\n        height: 300px;\n        border-radius: inherit;\n      \"\n    ></video>\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-placeholder\n        icon=\"file\"\n        [size]=\"30\"\n      ></stream-icon-placeholder>\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\n<ng-container *ngIf=\"imagesToView && imagesToView.length > 0\">\n  <ng-container\n    *ngTemplateOutlet=\"\n      (customTemplatesService.modalTemplate$ | async) || defaultModal;\n      context: getModalContext()\n    \"\n  ></ng-container>\n</ng-container>\n\n<ng-template\n  #defaultModal\n  let-isOpen=\"isOpen\"\n  let-isOpenChangeHandler=\"isOpenChangeHandler\"\n  let-content=\"content\"\n>\n  <stream-modal\n    [isOpen]=\"isOpen\"\n    (isOpenChange)=\"isOpenChangeHandler($event)\"\n    [content]=\"content\"\n  >\n  </stream-modal>\n</ng-template>\n\n<ng-template #modalContent>\n  <div class=\"stream-chat-angular__image-modal\">\n    <button\n      class=\"stream-chat-angular__image-modal-stepper\"\n      [ngStyle]=\"{\n        visibility: isImageModalPrevButtonVisible ? 'visible' : 'hidden'\n      }\"\n      data-testid=\"image-modal-prev\"\n      type=\"button\"\n      (click)=\"stepImages(-1)\"\n      (keyup.enter)=\"stepImages(-1)\"\n    >\n      <stream-icon-placeholder icon=\"arrow-left\"></stream-icon-placeholder>\n    </button>\n    <img\n      class=\"stream-chat-angular__image-modal-image\"\n      data-testid=\"modal-image\"\n      [src]=\"\n        imagesToView[imagesToViewCurrentIndex].img_url ||\n        imagesToView[imagesToViewCurrentIndex].thumb_url ||\n        imagesToView[imagesToViewCurrentIndex].image_url\n      \"\n      [alt]=\"imagesToView[imagesToViewCurrentIndex].fallback\"\n    />\n    <button\n      class=\"stream-chat-angular__image-modal-stepper\"\n      type=\"button\"\n      [ngStyle]=\"{\n        visibility: isImageModalNextButtonVisible ? 'visible' : 'hidden'\n      }\"\n      data-testid=\"image-modal-next\"\n      (click)=\"stepImages(1)\"\n      (keyup.enter)=\"stepImages(1)\"\n    >\n      <stream-icon-placeholder icon=\"arrow-right\"></stream-icon-placeholder>\n    </button>\n  </div>\n</ng-template>\n", components: [{ type: IconPlaceholderComponent, selector: "stream-icon-placeholder", inputs: ["icon", "size"] }, { type: ModalComponent, selector: "stream-modal", inputs: ["isOpen", "content"], outputs: ["isOpenChange"] }], directives: [{ type: i3__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "translate": i2__namespace.TranslatePipe, "async": i3__namespace.AsyncPipe } });
+    AttachmentListComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: AttachmentListComponent, selector: "stream-attachment-list", inputs: { messageId: "messageId", attachments: "attachments" }, viewQueries: [{ propertyName: "modalContent", first: true, predicate: ["modalContent"], descendants: true, static: true }], 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      (click)=\"openImageModal([attachment])\"\n      (keyup.enter)=\"openImageModal([attachment])\"\n    />\n    <div\n      class=\"str-chat__gallery\"\n      data-testid=\"image-gallery\"\n      *ngIf=\"isGallery(attachment)\"\n      [class.str-chat__gallery--square]=\"(attachment?.images)!.length > 3\"\n    >\n      <ng-container\n        *ngFor=\"\n          let galleryImage of attachment.images;\n          let index = index;\n          let isLast = last;\n          trackBy: trackByImageUrl\n        \"\n      >\n        <button\n          *ngIf=\"index < 3 || (index === 3 && isLast)\"\n          class=\"str-chat__gallery-image\"\n          data-testclass=\"gallery-image\"\n          (click)=\"openImageModal(attachment.images!, index)\"\n          (keyup.enter)=\"openImageModal(attachment.images!, index)\"\n        >\n          <img\n            [src]=\"\n              galleryImage.img_url ||\n              galleryImage.thumb_url ||\n              galleryImage.image_url\n            \"\n            [alt]=\"galleryImage.fallback\"\n            (load)=\"imageLoaded()\"\n          />\n        </button>\n        <button\n          *ngIf=\"index === 3 && !isLast\"\n          class=\"str-chat__gallery-placeholder\"\n          data-testclass=\"gallery-image\"\n          (click)=\"openImageModal(attachment.images!, index)\"\n          (keyup.enter)=\"openImageModal(attachment.images!, index)\"\n          [ngStyle]=\"{\n            'background-image':\n              'url(' +\n              (galleryImage.img_url ||\n                galleryImage.thumb_url ||\n                galleryImage.image_url) +\n              ')'\n          }\"\n        >\n          <p\n            [innerHTML]=\"\n              'streamChat.{{ imageCount }} more'\n                | translate: { imageCount: attachment!.images!.length - 4 }\n            \"\n          ></p>\n        </button>\n      </ng-container>\n    </div>\n    <video\n      *ngIf=\"isVideo(attachment)\"\n      controls\n      data-testclass=\"video-attachment\"\n      [src]=\"attachment.asset_url\"\n      style=\"\n        width: 100%;\n        max-width: 400px;\n        height: 300px;\n        border-radius: inherit;\n      \"\n    ></video>\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-placeholder\n        icon=\"file\"\n        [size]=\"30\"\n      ></stream-icon-placeholder>\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\n<ng-container *ngIf=\"imagesToView && imagesToView.length > 0\">\n  <ng-container\n    *ngTemplateOutlet=\"\n      (customTemplatesService.modalTemplate$ | async) || defaultModal;\n      context: getModalContext()\n    \"\n  ></ng-container>\n</ng-container>\n\n<ng-template\n  #defaultModal\n  let-isOpen=\"isOpen\"\n  let-isOpenChangeHandler=\"isOpenChangeHandler\"\n  let-content=\"content\"\n>\n  <stream-modal\n    [isOpen]=\"isOpen\"\n    (isOpenChange)=\"isOpenChangeHandler($event)\"\n    [content]=\"content\"\n  >\n  </stream-modal>\n</ng-template>\n\n<ng-template #modalContent>\n  <div class=\"stream-chat-angular__image-modal\">\n    <button\n      class=\"stream-chat-angular__image-modal-stepper\"\n      [ngStyle]=\"{\n        visibility: isImageModalPrevButtonVisible ? 'visible' : 'hidden'\n      }\"\n      data-testid=\"image-modal-prev\"\n      type=\"button\"\n      (click)=\"stepImages(-1)\"\n      (keyup.enter)=\"stepImages(-1)\"\n    >\n      <stream-icon-placeholder icon=\"arrow-left\"></stream-icon-placeholder>\n    </button>\n    <img\n      class=\"stream-chat-angular__image-modal-image\"\n      data-testid=\"modal-image\"\n      [src]=\"\n        imagesToView[imagesToViewCurrentIndex].img_url ||\n        imagesToView[imagesToViewCurrentIndex].thumb_url ||\n        imagesToView[imagesToViewCurrentIndex].image_url\n      \"\n      [alt]=\"imagesToView[imagesToViewCurrentIndex].fallback\"\n    />\n    <button\n      class=\"stream-chat-angular__image-modal-stepper\"\n      type=\"button\"\n      [ngStyle]=\"{\n        visibility: isImageModalNextButtonVisible ? 'visible' : 'hidden'\n      }\"\n      data-testid=\"image-modal-next\"\n      (click)=\"stepImages(1)\"\n      (keyup.enter)=\"stepImages(1)\"\n    >\n      <stream-icon-placeholder icon=\"arrow-right\"></stream-icon-placeholder>\n    </button>\n  </div>\n</ng-template>\n", components: [{ type: IconPlaceholderComponent, selector: "stream-icon-placeholder", inputs: ["icon", "size"] }, { type: ModalComponent, selector: "stream-modal", inputs: ["isOpen", "content"], outputs: ["isOpenChange"] }], directives: [{ type: i3__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "translate": i9__namespace.TranslatePipe, "async": i3__namespace.AsyncPipe } });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: AttachmentListComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -2910,7 +2910,7 @@
         return AttachmentPreviewListComponent;
     }());
     AttachmentPreviewListComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: AttachmentPreviewListComponent, deps: [], 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", inputs: { attachmentUploads$: "attachmentUploads$" }, outputs: { retryAttachmentUpload: "retryAttachmentUpload", deleteAttachment: "deleteAttachment" }, 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)=\"attachmentUploadRetried(attachmentUpload.file)\"\n        (keyup.enter)=\"attachmentUploadRetried(attachmentUpload.file)\"\n        data-testclass=\"upload-error\"\n      >\n        <stream-icon-placeholder icon=\"retry\"></stream-icon-placeholder>\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)=\"attachmentDeleted(attachmentUpload)\"\n            (keyup.enter)=\"attachmentDeleted(attachmentUpload)\"\n          >\n            <stream-icon-placeholder icon=\"close\"></stream-icon-placeholder>\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-placeholder\n        data-testclass=\"loading-indicator\"\n        color=\"rgba(255,255,255,0.7)\"\n        *ngIf=\"attachmentUpload.state === 'uploading'\"\n      ></stream-loading-indicator-placeholder>\n    </div>\n    <div\n      class=\"rfu-file-previewer\"\n      *ngIf=\"\n        attachmentUpload.type === 'file' || attachmentUpload.type === 'video'\n      \"\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-placeholder icon=\"file\"></stream-icon-placeholder>\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)=\"attachmentUploadRetried(attachmentUpload.file)\"\n                (keyup.enter)=\"attachmentUploadRetried(attachmentUpload.file)\"\n                translate\n              >\n                streamChat.failed\n              </div>\n              <div\n                class=\"rfu-file-previewer__retry\"\n                (click)=\"attachmentUploadRetried(attachmentUpload.file)\"\n                (keyup.enter)=\"attachmentUploadRetried(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)=\"attachmentDeleted(attachmentUpload)\"\n            (keyup.enter)=\"attachmentDeleted(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-placeholder></stream-loading-indicator-placeholder>\n          </div>\n        </li>\n      </ol>\n    </div>\n  </ng-container>\n</div>\n", components: [{ type: IconPlaceholderComponent, selector: "stream-icon-placeholder", inputs: ["icon", "size"] }, { type: LoadingIndicatorPlaceholderComponent, selector: "stream-loading-indicator-placeholder", inputs: ["size", "color"] }], directives: [{ type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2__namespace.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }], pipes: { "async": i3__namespace.AsyncPipe } });
+    AttachmentPreviewListComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: AttachmentPreviewListComponent, selector: "stream-attachment-preview-list", inputs: { attachmentUploads$: "attachmentUploads$" }, outputs: { retryAttachmentUpload: "retryAttachmentUpload", deleteAttachment: "deleteAttachment" }, 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)=\"attachmentUploadRetried(attachmentUpload.file)\"\n        (keyup.enter)=\"attachmentUploadRetried(attachmentUpload.file)\"\n        data-testclass=\"upload-error\"\n      >\n        <stream-icon-placeholder icon=\"retry\"></stream-icon-placeholder>\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)=\"attachmentDeleted(attachmentUpload)\"\n            (keyup.enter)=\"attachmentDeleted(attachmentUpload)\"\n          >\n            <stream-icon-placeholder icon=\"close\"></stream-icon-placeholder>\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-placeholder\n        data-testclass=\"loading-indicator\"\n        color=\"rgba(255,255,255,0.7)\"\n        *ngIf=\"attachmentUpload.state === 'uploading'\"\n      ></stream-loading-indicator-placeholder>\n    </div>\n    <div\n      class=\"rfu-file-previewer\"\n      *ngIf=\"\n        attachmentUpload.type === 'file' || attachmentUpload.type === 'video'\n      \"\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-placeholder icon=\"file\"></stream-icon-placeholder>\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)=\"attachmentUploadRetried(attachmentUpload.file)\"\n                (keyup.enter)=\"attachmentUploadRetried(attachmentUpload.file)\"\n                translate\n              >\n                streamChat.failed\n              </div>\n              <div\n                class=\"rfu-file-previewer__retry\"\n                (click)=\"attachmentUploadRetried(attachmentUpload.file)\"\n                (keyup.enter)=\"attachmentUploadRetried(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)=\"attachmentDeleted(attachmentUpload)\"\n            (keyup.enter)=\"attachmentDeleted(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-placeholder></stream-loading-indicator-placeholder>\n          </div>\n        </li>\n      </ol>\n    </div>\n  </ng-container>\n</div>\n", components: [{ type: IconPlaceholderComponent, selector: "stream-icon-placeholder", inputs: ["icon", "size"] }, { type: LoadingIndicatorPlaceholderComponent, selector: "stream-loading-indicator-placeholder", inputs: ["size", "color"] }], directives: [{ type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i9__namespace.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }], pipes: { "async": i3__namespace.AsyncPipe } });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: AttachmentPreviewListComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -3217,6 +3217,10 @@
             configurable: true
         });
         MessageInputComponent.prototype.initTextarea = function () {
+            // cleanup previously built textarea
+            if (!this.canSendMessages) {
+                this.textareaRef = undefined;
+            }
             if (!this.canSendMessages || this.textareaRef || !this.textareaAnchor) {
                 return;
             }
@@ -3334,7 +3338,7 @@
         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 }, { token: CustomTemplatesService }], 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", mode: "mode", isMultipleFileUploadEnabled: "isMultipleFileUploadEnabled", message: "message", sendMessage$: "sendMessage$" }, 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-placeholder\n          icon=\"close-no-outline\"\n          style=\"font-size: 10px; line-height: 10px\"\n        ></stream-icon-placeholder>\n      </button>\n    </div>\n    <div class=\"quoted-message-preview-content\">\n      <stream-avatar-placeholder\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-placeholder>\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      <ng-template\n        #defaultAttachmentsPreview\n        let-attachmentUploads$=\"attachmentUploads$\"\n        let-retryUploadHandler=\"retryUploadHandler\"\n        let-deleteUploadHandler=\"deleteUploadHandler\"\n      >\n        <stream-attachment-preview-list\n          [attachmentUploads$]=\"attachmentUploads$\"\n          (retryAttachmentUpload)=\"retryUploadHandler($event)\"\n          (deleteAttachment)=\"deleteUploadHandler($event)\"\n          class=\"rfu-image-previewer-angular-host\"\n        ></stream-attachment-preview-list>\n      </ng-template>\n      <ng-container\n        *ngTemplateOutlet=\"\n          attachmentPreviewListTemplate || defaultAttachmentsPreview;\n          context: getAttachmentPreviewListContext()\n        \"\n      ></ng-container>\n      <div class=\"rta str-chat__textarea str-chat-angular__textarea\">\n        <ng-container\n          *ngIf=\"emojiPickerTemplate && !isCooldownInProgress\"\n          data-testid=\"emoji-picker\"\n        >\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: getEmojiPickerContext()\n              \"\n            ></ng-container>\n          </div>\n        </ng-container>\n        <div\n          class=\"str-chat__input-flat-cooldown str-chat-angular__cooldown\"\n          *ngIf=\"isCooldownInProgress\"\n          data-testid=\"cooldown-timer\"\n        >\n          {{ cooldown$ | async }}\n        </div>\n        <ng-template\n          *ngIf=\"canSendMessages && !isCooldownInProgress; 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          [mentionScope]=\"mentionScope\"\n        ></ng-template>\n        <ng-template #notAllowed>\n          <textarea\n            disabled\n            rows=\"1\"\n            [value]=\"disabledTextareaText | translate\"\n            class=\"rta__textarea str-chat__textarea__textarea\"\n            data-testid=\"disabled-textarea\"\n          ></textarea>\n        </ng-template>\n      </div>\n      <div\n        *ngIf=\"\n          isFileUploadEnabled &&\n          isFileUploadAuthorized &&\n          canSendMessages &&\n          !isCooldownInProgress\n        \"\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              [multiple]=\"isMultipleFileUploadEnabled\"\n              (change)=\"filesSelected(fileInput.files)\"\n            />\n            <span class=\"str-chat__input-flat-fileupload\">\n              <stream-icon-placeholder\n                icon=\"file-upload\"\n              ></stream-icon-placeholder>\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-placeholder icon=\"send\"></stream-icon-placeholder>\n    </button>\n  </div>\n</div>\n", components: [{ type: IconPlaceholderComponent, selector: "stream-icon-placeholder", inputs: ["icon", "size"] }, { type: AvatarPlaceholderComponent, selector: "stream-avatar-placeholder", inputs: ["name", "imageUrl", "size"] }, { type: AttachmentListComponent, selector: "stream-attachment-list", inputs: ["messageId", "attachments"] }, { type: AttachmentPreviewListComponent, selector: "stream-attachment-preview-list", inputs: ["attachmentUploads$"], outputs: ["retryAttachmentUpload", "deleteAttachment"] }], directives: [{ type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: TextareaDirective, selector: "[streamTextarea]", inputs: ["componentRef", "areMentionsEnabled", "mentionScope", "value"], outputs: ["valueChange", "send", "userMentions"] }], pipes: { "async": i3__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", mode: "mode", isMultipleFileUploadEnabled: "isMultipleFileUploadEnabled", message: "message", sendMessage$: "sendMessage$" }, 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-placeholder\n          icon=\"close-no-outline\"\n          style=\"font-size: 10px; line-height: 10px\"\n        ></stream-icon-placeholder>\n      </button>\n    </div>\n    <div class=\"quoted-message-preview-content\">\n      <stream-avatar-placeholder\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-placeholder>\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      <ng-template\n        #defaultAttachmentsPreview\n        let-attachmentUploads$=\"attachmentUploads$\"\n        let-retryUploadHandler=\"retryUploadHandler\"\n        let-deleteUploadHandler=\"deleteUploadHandler\"\n      >\n        <stream-attachment-preview-list\n          [attachmentUploads$]=\"attachmentUploads$\"\n          (retryAttachmentUpload)=\"retryUploadHandler($event)\"\n          (deleteAttachment)=\"deleteUploadHandler($event)\"\n          class=\"rfu-image-previewer-angular-host\"\n        ></stream-attachment-preview-list>\n      </ng-template>\n      <ng-container\n        *ngTemplateOutlet=\"\n          attachmentPreviewListTemplate || defaultAttachmentsPreview;\n          context: getAttachmentPreviewListContext()\n        \"\n      ></ng-container>\n      <div class=\"rta str-chat__textarea str-chat-angular__textarea\">\n        <ng-container\n          *ngIf=\"emojiPickerTemplate && !isCooldownInProgress\"\n          data-testid=\"emoji-picker\"\n        >\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: getEmojiPickerContext()\n              \"\n            ></ng-container>\n          </div>\n        </ng-container>\n        <div\n          class=\"str-chat__input-flat-cooldown str-chat-angular__cooldown\"\n          *ngIf=\"isCooldownInProgress\"\n          data-testid=\"cooldown-timer\"\n        >\n          {{ cooldown$ | async }}\n        </div>\n        <ng-template\n          *ngIf=\"canSendMessages && !isCooldownInProgress; 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          [mentionScope]=\"mentionScope\"\n        ></ng-template>\n        <ng-template #notAllowed>\n          <textarea\n            disabled\n            rows=\"1\"\n            [value]=\"disabledTextareaText | translate\"\n            class=\"rta__textarea str-chat__textarea__textarea\"\n            data-testid=\"disabled-textarea\"\n          ></textarea>\n        </ng-template>\n      </div>\n      <div\n        *ngIf=\"\n          isFileUploadEnabled &&\n          isFileUploadAuthorized &&\n          canSendMessages &&\n          !isCooldownInProgress\n        \"\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              [multiple]=\"isMultipleFileUploadEnabled\"\n              (change)=\"filesSelected(fileInput.files)\"\n            />\n            <span class=\"str-chat__input-flat-fileupload\">\n              <stream-icon-placeholder\n                icon=\"file-upload\"\n              ></stream-icon-placeholder>\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-placeholder icon=\"send\"></stream-icon-placeholder>\n    </button>\n  </div>\n</div>\n", components: [{ type: IconPlaceholderComponent, selector: "stream-icon-placeholder", inputs: ["icon", "size"] }, { type: AvatarPlaceholderComponent, selector: "stream-avatar-placeholder", inputs: ["name", "imageUrl", "size"] }, { type: AttachmentListComponent, selector: "stream-attachment-list", inputs: ["messageId", "attachments"] }, { type: AttachmentPreviewListComponent, selector: "stream-attachment-preview-list", inputs: ["attachmentUploads$"], outputs: ["retryAttachmentUpload", "deleteAttachment"] }], directives: [{ type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: TextareaDirective, selector: "[streamTextarea]", inputs: ["componentRef", "areMentionsEnabled", "mentionScope", "value"], outputs: ["valueChange", "send", "userMentions"] }], pipes: { "async": i3__namespace.AsyncPipe, "translate": i9__namespace.TranslatePipe } });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: MessageInputComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -3413,7 +3417,7 @@
         return NotificationListComponent;
     }());
     NotificationListComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: NotificationListComponent, deps: [{ token: CustomTemplatesService }, { 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  <ng-container\n    *ngFor=\"let notification of notifications$ | async; trackBy: trackById\"\n  >\n    <ng-template #notificationContent>\n      <div\n        *ngIf=\"notification.text !== undefined\"\n        data-testclass=\"notification-content\"\n      >\n        {{ notification.text | translate: notification.translateParams }}\n      </div>\n      <ng-container *ngIf=\"notification.template !== undefined\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            notification.template;\n            context: getNotificationContentContext(notification)\n          \"\n        ></ng-container>\n      </ng-container>\n    </ng-template>\n    <ng-container\n      *ngTemplateOutlet=\"\n        (customTemplatesService.notificationTemplate$ | async) ||\n          defaultNotification;\n        context: { type: notification.type, content: notificationContent }\n      \"\n    ></ng-container>\n  </ng-container>\n</div>\n\n<ng-template #defaultNotification let-type=\"type\" let-content=\"content\">\n  <stream-notification [type]=\"type\" [content]=\"content\"></stream-notification>\n</ng-template>\n", components: [{ type: NotificationComponent, selector: "stream-notification", inputs: ["type", "content"] }], directives: [{ type: i3__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "async": i3__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  <ng-container\n    *ngFor=\"let notification of notifications$ | async; trackBy: trackById\"\n  >\n    <ng-template #notificationContent>\n      <div\n        *ngIf=\"notification.text !== undefined\"\n        data-testclass=\"notification-content\"\n      >\n        {{ notification.text | translate: notification.translateParams }}\n      </div>\n      <ng-container *ngIf=\"notification.template !== undefined\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            notification.template;\n            context: getNotificationContentContext(notification)\n          \"\n        ></ng-container>\n      </ng-container>\n    </ng-template>\n    <ng-container\n      *ngTemplateOutlet=\"\n        (customTemplatesService.notificationTemplate$ | async) ||\n          defaultNotification;\n        context: { type: notification.type, content: notificationContent }\n      \"\n    ></ng-container>\n  </ng-container>\n</div>\n\n<ng-template #defaultNotification let-type=\"type\" let-content=\"content\">\n  <stream-notification [type]=\"type\" [content]=\"content\"></stream-notification>\n</ng-template>\n", components: [{ type: NotificationComponent, selector: "stream-notification", inputs: ["type", "content"] }], directives: [{ type: i3__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "async": i3__namespace.AsyncPipe, "translate": i9__namespace.TranslatePipe } });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: NotificationListComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -3592,7 +3596,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 }, { token: CustomTemplatesService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    MessageActionsBoxComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: MessageActionsBoxComponent, selector: "stream-message-actions-box", inputs: { isOpen: "isOpen", isMine: "isMine", message: "message", enabledActions: "enabledActions" }, outputs: { displayedActionsCount: "displayedActionsCount", isEditing: "isEditing" }, viewQueries: [{ propertyName: "modalContent", first: true, predicate: ["modalContent"], descendants: true, static: 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    <ng-container\n      *ngFor=\"let item of visibleMessageActionItems; trackBy: trackByActionName\"\n    >\n      <ng-container\n        *ngTemplateOutlet=\"\n          messageActionItemTemplate || defaultMessageActionItem;\n          context: item\n        \"\n      ></ng-container>\n    </ng-container>\n  </ul>\n</div>\n\n<ng-template\n  #defaultMessageActionItem\n  let-actionName=\"actionName\"\n  let-actionHandler=\"actionHandler\"\n  let-actionLabelOrTranslationKey=\"actionLabelOrTranslationKey\"\n>\n  <button [attr.data-testid]=\"actionName + '-action'\" (click)=\"actionHandler()\">\n    <li class=\"str-chat__message-actions-list-item\">\n      {{ getActionLabel(actionLabelOrTranslationKey) | translate }}\n    </li>\n  </button>\n</ng-template>\n\n<ng-container\n  *ngTemplateOutlet=\"\n    modalTemplate || defaultModal;\n    context: getEditModalContext()\n  \"\n></ng-container>\n\n<ng-template\n  #defaultModal\n  let-isOpen=\"isOpen\"\n  let-isOpenChangeHandler=\"isOpenChangeHandler\"\n  let-content=\"content\"\n>\n  <stream-modal\n    [isOpen]=\"isOpen\"\n    (isOpenChange)=\"isOpenChangeHandler($event)\"\n    [content]=\"content\"\n  >\n  </stream-modal>\n</ng-template>\n\n<ng-template #modalContent>\n  <div class=\"str-chat__edit-message-form\" *ngIf=\"isEditModalOpen\">\n    <ng-template\n      #defaultInput\n      let-messageInput=\"message\"\n      let-messageUpdateHandler=\"messageUpdateHandler\"\n      let-sendMessage$Input=\"sendMessage$\"\n    >\n      <stream-message-input\n        [message]=\"messageInput\"\n        (messageUpdate)=\"messageUpdateHandler()\"\n        [sendMessage$]=\"sendMessage$Input\"\n      ></stream-message-input>\n    </ng-template>\n    <ng-container\n      *ngTemplateOutlet=\"\n        messageInputTemplate || defaultInput;\n        context: getMessageInputContext()\n      \"\n    >\n    </ng-container>\n\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</ng-template>\n", components: [{ type: ModalComponent, selector: "stream-modal", inputs: ["isOpen", "content"], outputs: ["isOpenChange"] }, { type: MessageInputComponent, selector: "stream-message-input", inputs: ["isFileUploadEnabled", "areMentionsEnabled", "mentionScope", "mode", "isMultipleFileUploadEnabled", "message", "sendMessage$"], outputs: ["messageUpdate"] }, { type: NotificationListComponent, selector: "stream-notification-list" }], directives: [{ type: i3__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: { isOpen: "isOpen", isMine: "isMine", message: "message", enabledActions: "enabledActions" }, outputs: { displayedActionsCount: "displayedActionsCount", isEditing: "isEditing" }, viewQueries: [{ propertyName: "modalContent", first: true, predicate: ["modalContent"], descendants: true, static: 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    <ng-container\n      *ngFor=\"let item of visibleMessageActionItems; trackBy: trackByActionName\"\n    >\n      <ng-container\n        *ngTemplateOutlet=\"\n          messageActionItemTemplate || defaultMessageActionItem;\n          context: item\n        \"\n      ></ng-container>\n    </ng-container>\n  </ul>\n</div>\n\n<ng-template\n  #defaultMessageActionItem\n  let-actionName=\"actionName\"\n  let-actionHandler=\"actionHandler\"\n  let-actionLabelOrTranslationKey=\"actionLabelOrTranslationKey\"\n>\n  <button [attr.data-testid]=\"actionName + '-action'\" (click)=\"actionHandler()\">\n    <li class=\"str-chat__message-actions-list-item\">\n      {{ getActionLabel(actionLabelOrTranslationKey) | translate }}\n    </li>\n  </button>\n</ng-template>\n\n<ng-container\n  *ngTemplateOutlet=\"\n    modalTemplate || defaultModal;\n    context: getEditModalContext()\n  \"\n></ng-container>\n\n<ng-template\n  #defaultModal\n  let-isOpen=\"isOpen\"\n  let-isOpenChangeHandler=\"isOpenChangeHandler\"\n  let-content=\"content\"\n>\n  <stream-modal\n    [isOpen]=\"isOpen\"\n    (isOpenChange)=\"isOpenChangeHandler($event)\"\n    [content]=\"content\"\n  >\n  </stream-modal>\n</ng-template>\n\n<ng-template #modalContent>\n  <div class=\"str-chat__edit-message-form\" *ngIf=\"isEditModalOpen\">\n    <ng-template\n      #defaultInput\n      let-messageInput=\"message\"\n      let-messageUpdateHandler=\"messageUpdateHandler\"\n      let-sendMessage$Input=\"sendMessage$\"\n    >\n      <stream-message-input\n        [message]=\"messageInput\"\n        (messageUpdate)=\"messageUpdateHandler()\"\n        [sendMessage$]=\"sendMessage$Input\"\n      ></stream-message-input>\n    </ng-template>\n    <ng-container\n      *ngTemplateOutlet=\"\n        messageInputTemplate || defaultInput;\n        context: getMessageInputContext()\n      \"\n    >\n    </ng-container>\n\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</ng-template>\n", components: [{ type: ModalComponent, selector: "stream-modal", inputs: ["isOpen", "content"], outputs: ["isOpenChange"] }, { type: MessageInputComponent, selector: "stream-message-input", inputs: ["isFileUploadEnabled", "areMentionsEnabled", "mentionScope", "mode", "isMultipleFileUploadEnabled", "message", "sendMessage$"], outputs: ["messageUpdate"] }, { type: NotificationListComponent, selector: "stream-notification-list" }], directives: [{ type: i3__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i9__namespace.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }], pipes: { "translate": i9__namespace.TranslatePipe } });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: MessageActionsBoxComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -3641,6 +3645,32 @@
                     }]
             }], ctorParameters: function () { return [{ type: ChannelService }]; } });
 
+    var listUsers = function (users) {
+        var outStr = '';
+        var slicedArr = users.map(function (item) { return item.name || item.id; }).slice(0, 5);
+        var restLength = users.length - slicedArr.length;
+        var commaSeparatedUsers = slicedArr.join(', ');
+        outStr = commaSeparatedUsers;
+        if (restLength > 0) {
+            outStr += " +" + restLength;
+        }
+        return outStr;
+    };
+
+    var getChannelDisplayText = function (channel, currentUser) {
+        var _a;
+        if ((_a = channel.data) === null || _a === void 0 ? void 0 : _a.name) {
+            return channel.data.name;
+        }
+        if (channel.state.members && Object.keys(channel.state.members).length > 0) {
+            var members = Object.values(channel.state.members)
+                .map(function (m) { return m.user || { id: m.user_id }; })
+                .filter(function (m) { return m.id !== currentUser.id; });
+            return listUsers(members);
+        }
+        return channel.id;
+    };
+
     var getDeviceWidth = function () {
         var width = window.innerWidth;
         if (width < 768)
@@ -3728,12 +3758,13 @@
      * 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, customTemplatesService, cdRef) {
+        function ChannelHeaderComponent(channelService, channelListToggleService, customTemplatesService, cdRef, chatClientService) {
             var _this = this;
             this.channelService = channelService;
             this.channelListToggleService = channelListToggleService;
             this.customTemplatesService = customTemplatesService;
             this.cdRef = cdRef;
+            this.chatClientService = chatClientService;
             this.subscriptions = [];
             this.channelService.activeChannel$.subscribe(function (c) {
                 var _a, _b;
@@ -3779,10 +3810,36 @@
             enumerable: false,
             configurable: true
         });
+        Object.defineProperty(ChannelHeaderComponent.prototype, "displayText", {
+            get: function () {
+                if (!this.activeChannel) {
+                    return '';
+                }
+                return getChannelDisplayText(this.activeChannel, this.chatClientService.chatClient.user);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(ChannelHeaderComponent.prototype, "avatarName", {
+            get: function () {
+                var _this = this;
+                var _a, _b, _c, _d, _e, _f, _g;
+                if ((_b = (_a = this.activeChannel) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.name) {
+                    return (_d = (_c = this.activeChannel) === null || _c === void 0 ? void 0 : _c.data) === null || _d === void 0 ? void 0 : _d.name;
+                }
+                var otherMembers = Object.values(((_e = this.activeChannel) === null || _e === void 0 ? void 0 : _e.state.members) || {}).filter(function (m) { return m.user_id !== _this.chatClientService.chatClient.user.id; });
+                if (otherMembers.length === 1) {
+                    return ((_f = otherMembers[0].user) === null || _f === void 0 ? void 0 : _f.name) || ((_g = otherMembers[0].user) === null || _g === void 0 ? void 0 : _g.name);
+                }
+                return '#';
+            },
+            enumerable: false,
+            configurable: true
+        });
         return ChannelHeaderComponent;
     }());
-    ChannelHeaderComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: ChannelHeaderComponent, deps: [{ token: ChannelService }, { token: ChannelListToggleService }, { token: CustomTemplatesService }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    ChannelHeaderComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: ChannelHeaderComponent, selector: "stream-channel-header", ngImport: i0__namespace, template: "<div class=\"str-chat__header-livestream\">\n  <div\n    class=\"str-chat__header-hamburger\"\n    (click)=\"toggleMenu($event)\"\n    (keyup.enter)=\"toggleMenu($event)\"\n  >\n    <stream-icon-placeholder icon=\"menu\"></stream-icon-placeholder>\n  </div>\n  <stream-avatar-placeholder\n    imageUrl=\"{{ activeChannel?.data?.image }}\"\n    name=\"{{ activeChannel?.data?.name }}\"\n  ></stream-avatar-placeholder>\n  <div class=\"str-chat__header-livestream-left\">\n    <p data-testid=\"name\" class=\"str-chat__header-livestream-left--title\">\n      {{ activeChannel?.data?.name }}\n    </p>\n    <p data-testid=\"info\" class=\"str-chat__header-livestream-left--members\">\n      {{'streamChat.{{ memberCount }} members' | translate:memberCountParam}}\n      {{canReceiveConnectEvents ? ('streamChat.{{ watcherCount }} online' |\n      translate:watcherCountParam) : ''}}\n    </p>\n  </div>\n  <ng-container *ngIf=\"channelActionsTemplate\">\n    <ng-container\n      *ngTemplateOutlet=\"\n        channelActionsTemplate;\n        context: getChannelActionsContext()\n      \"\n    ></ng-container>\n  </ng-container>\n</div>\n", components: [{ type: IconPlaceholderComponent, selector: "stream-icon-placeholder", inputs: ["icon", "size"] }, { type: AvatarPlaceholderComponent, selector: "stream-avatar-placeholder", inputs: ["name", "imageUrl", "size"] }], directives: [{ type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "translate": i2__namespace.TranslatePipe } });
+    ChannelHeaderComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: ChannelHeaderComponent, deps: [{ token: ChannelService }, { token: ChannelListToggleService }, { token: CustomTemplatesService }, { token: i0__namespace.ChangeDetectorRef }, { token: ChatClientService }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    ChannelHeaderComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: ChannelHeaderComponent, selector: "stream-channel-header", ngImport: i0__namespace, template: "<div class=\"str-chat__header-livestream\">\n  <div\n    class=\"str-chat__header-hamburger\"\n    (click)=\"toggleMenu($event)\"\n    (keyup.enter)=\"toggleMenu($event)\"\n  >\n    <stream-icon-placeholder icon=\"menu\"></stream-icon-placeholder>\n  </div>\n  <stream-avatar-placeholder\n    imageUrl=\"{{ activeChannel?.data?.image }}\"\n    name=\"{{ avatarName }}\"\n  ></stream-avatar-placeholder>\n  <div class=\"str-chat__header-livestream-left\">\n    <p data-testid=\"name\" class=\"str-chat__header-livestream-left--title\">\n      {{ displayText }}\n    </p>\n    <p data-testid=\"info\" class=\"str-chat__header-livestream-left--members\">\n      {{'streamChat.{{ memberCount }} members' | translate:memberCountParam}}\n      {{canReceiveConnectEvents ? ('streamChat.{{ watcherCount }} online' |\n      translate:watcherCountParam) : ''}}\n    </p>\n  </div>\n  <ng-container *ngIf=\"channelActionsTemplate\">\n    <ng-container\n      *ngTemplateOutlet=\"\n        channelActionsTemplate;\n        context: getChannelActionsContext()\n      \"\n    ></ng-container>\n  </ng-container>\n</div>\n", components: [{ type: IconPlaceholderComponent, selector: "stream-icon-placeholder", inputs: ["icon", "size"] }, { type: AvatarPlaceholderComponent, selector: "stream-avatar-placeholder", inputs: ["name", "imageUrl", "size"] }], directives: [{ type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "translate": i9__namespace.TranslatePipe } });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: ChannelHeaderComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -3790,15 +3847,16 @@
                         templateUrl: './channel-header.component.html',
                         styles: [],
                     }]
-            }], ctorParameters: function () { return [{ type: ChannelService }, { type: ChannelListToggleService }, { type: CustomTemplatesService }, { type: i0__namespace.ChangeDetectorRef }]; } });
+            }], ctorParameters: function () { return [{ type: ChannelService }, { type: ChannelListToggleService }, { type: CustomTemplatesService }, { type: i0__namespace.ChangeDetectorRef }, { type: ChatClientService }]; } });
 
     /**
      * 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) {
+        function ChannelPreviewComponent(channelService, ngZone, chatClientService) {
             this.channelService = channelService;
             this.ngZone = ngZone;
+            this.chatClientService = chatClientService;
             this.isActive = false;
             this.isUnread = false;
             this.latestMessage = 'Nothing yet...';
@@ -3838,16 +3896,26 @@
         });
         Object.defineProperty(ChannelPreviewComponent.prototype, "avatarName", {
             get: function () {
-                var _a, _b;
-                return (_b = (_a = this.channel) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.name;
+                var _this = this;
+                var _a, _b, _c, _d, _e, _f, _g;
+                if ((_b = (_a = this.channel) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.name) {
+                    return (_d = (_c = this.channel) === null || _c === void 0 ? void 0 : _c.data) === null || _d === void 0 ? void 0 : _d.name;
+                }
+                var otherMembers = Object.values(((_e = this.channel) === null || _e === void 0 ? void 0 : _e.state.members) || {}).filter(function (m) { return m.user_id !== _this.chatClientService.chatClient.user.id; });
+                if (otherMembers.length === 1) {
+                    return ((_f = otherMembers[0].user) === null || _f === void 0 ? void 0 : _f.name) || ((_g = otherMembers[0].user) === null || _g === void 0 ? void 0 : _g.name);
+                }
+                return '#';
             },
             enumerable: false,
             configurable: true
         });
         Object.defineProperty(ChannelPreviewComponent.prototype, "title", {
             get: function () {
-                var _a, _b;
-                return (_b = (_a = this.channel) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.name;
+                if (!this.channel) {
+                    return '';
+                }
+                return getChannelDisplayText(this.channel, this.chatClientService.chatClient.user);
             },
             enumerable: false,
             configurable: true
@@ -3884,8 +3952,8 @@
         };
         return ChannelPreviewComponent;
     }());
-    ChannelPreviewComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: ChannelPreviewComponent, deps: [{ token: ChannelService }, { token: i0__namespace.NgZone }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    ChannelPreviewComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: ChannelPreviewComponent, selector: "stream-channel-preview", inputs: { channel: "channel" }, ngImport: i0__namespace, template: "<button\n  class=\"str-chat__channel-preview-messenger\"\n  [class.str-chat__channel-preview-messenger--active]=\"isActive\"\n  [class.str-chat__channel-preview-messenger--unread]=\"isUnread\"\n  (click)=\"setAsActiveChannel()\"\n  data-testid=\"channel-preview-container\"\n>\n  <div class=\"str-chat__channel-preview-messenger--left\">\n    <stream-avatar-placeholder\n      imageUrl=\"{{ avatarImage }}\"\n      name=\"{{ avatarName }}\"\n      [size]=\"40\"\n    ></stream-avatar-placeholder>\n  </div>\n  <div class=\"str-chat__channel-preview-messenger--right\">\n    <div class=\"str-chat__channel-preview-messenger--name\">\n      <span data-testid=\"channel-preview-title\">{{ title }}</span>\n    </div>\n    <div\n      data-testid=\"latest-message\"\n      class=\"str-chat__channel-preview-messenger--last-message\"\n    >\n      {{ latestMessage | translate }}\n    </div>\n  </div>\n</button>\n", components: [{ type: AvatarPlaceholderComponent, selector: "stream-avatar-placeholder", inputs: ["name", "imageUrl", "size"] }], pipes: { "translate": i2__namespace.TranslatePipe } });
+    ChannelPreviewComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: ChannelPreviewComponent, deps: [{ token: ChannelService }, { token: i0__namespace.NgZone }, { token: ChatClientService }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    ChannelPreviewComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: ChannelPreviewComponent, selector: "stream-channel-preview", inputs: { channel: "channel" }, ngImport: i0__namespace, template: "<button\n  class=\"str-chat__channel-preview-messenger\"\n  [class.str-chat__channel-preview-messenger--active]=\"isActive\"\n  [class.str-chat__channel-preview-messenger--unread]=\"isUnread\"\n  (click)=\"setAsActiveChannel()\"\n  data-testid=\"channel-preview-container\"\n>\n  <div class=\"str-chat__channel-preview-messenger--left\">\n    <stream-avatar-placeholder\n      imageUrl=\"{{ avatarImage }}\"\n      name=\"{{ avatarName }}\"\n      [size]=\"40\"\n    ></stream-avatar-placeholder>\n  </div>\n  <div class=\"str-chat__channel-preview-messenger--right\">\n    <div\n      style=\"position: relative\"\n      class=\"str-chat__channel-preview-messenger--name\"\n    >\n      <span data-testid=\"channel-preview-title\">{{ title }}</span>\n    </div>\n    <div\n      data-testid=\"latest-message\"\n      class=\"str-chat__channel-preview-messenger--last-message\"\n    >\n      {{ latestMessage | translate }}\n    </div>\n  </div>\n</button>\n", components: [{ type: AvatarPlaceholderComponent, selector: "stream-avatar-placeholder", inputs: ["name", "imageUrl", "size"] }], pipes: { "translate": i9__namespace.TranslatePipe } });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: ChannelPreviewComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -3893,7 +3961,7 @@
                         templateUrl: './channel-preview.component.html',
                         styles: [],
                     }]
-            }], ctorParameters: function () { return [{ type: ChannelService }, { type: i0__namespace.NgZone }]; }, propDecorators: { channel: [{
+            }], ctorParameters: function () { return [{ type: ChannelService }, { type: i0__namespace.NgZone }, { type: ChatClientService }]; }, propDecorators: { channel: [{
                     type: i0.Input
                 }] } });
 
@@ -3950,7 +4018,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 }, { token: CustomTemplatesService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    ChannelListComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: ChannelListComponent, selector: "stream-channel-list", 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-template #defaultTemplate let-channelInput=\"channel\">\n          <stream-channel-preview\n            data-testclass=\"channel-preview\"\n            [channel]=\"channelInput\"\n          ></stream-channel-preview>\n        </ng-template>\n        <div (click)=\"channelSelected()\" (keyup.enter)=\"channelSelected()\">\n          <ng-container\n            *ngTemplateOutlet=\"\n              customChannelPreviewTemplate || defaultTemplate;\n              context: getChannelPreviewContext(channel)\n            \"\n          ></ng-container>\n        </div>\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-placeholder></stream-loading-indicator-placeholder\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-placeholder\n        icon=\"connection-error\"\n      ></stream-icon-placeholder>\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: LoadingIndicatorPlaceholderComponent, selector: "stream-loading-indicator-placeholder", inputs: ["size", "color"] }, { type: IconPlaceholderComponent, selector: "stream-icon-placeholder", inputs: ["icon", "size"] }], directives: [{ type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "async": i3__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", 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-template #defaultTemplate let-channelInput=\"channel\">\n          <stream-channel-preview\n            data-testclass=\"channel-preview\"\n            [channel]=\"channelInput\"\n          ></stream-channel-preview>\n        </ng-template>\n        <div (click)=\"channelSelected()\" (keyup.enter)=\"channelSelected()\">\n          <ng-container\n            *ngTemplateOutlet=\"\n              customChannelPreviewTemplate || defaultTemplate;\n              context: getChannelPreviewContext(channel)\n            \"\n          ></ng-container>\n        </div>\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-placeholder></stream-loading-indicator-placeholder\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-placeholder\n        icon=\"connection-error\"\n      ></stream-icon-placeholder>\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: LoadingIndicatorPlaceholderComponent, selector: "stream-loading-indicator-placeholder", inputs: ["size", "color"] }, { type: IconPlaceholderComponent, selector: "stream-icon-placeholder", inputs: ["icon", "size"] }], directives: [{ type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "async": i3__namespace.AsyncPipe, "translate": i9__namespace.TranslatePipe } });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: ChannelListComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -3969,35 +4037,6 @@
         return parsedTime.calendar();
     };
 
-    var getReadByText = function (users) {
-        var outStr = '';
-        var slicedArr = users.map(function (item) { return item.name || item.id; }).slice(0, 5);
-        var restLength = users.length - slicedArr.length;
-        if (slicedArr.length === 1) {
-            outStr = slicedArr[0] + " ";
-        }
-        else if (slicedArr.length === 2) {
-            // joins all with "and" but =no commas
-            // example: "bob and sam"
-            outStr = slicedArr[0] + " and " + slicedArr[1];
-        }
-        else if (slicedArr.length > 2) {
-            // joins all with commas, but last one gets ", and" (oxford comma!)
-            // example: "bob, joe, sam and 4 more"
-            if (restLength === 0) {
-                // mutate slicedArr to remove last user to display it separately
-                var lastUser = slicedArr.splice(slicedArr.length - 2, 1)[0];
-                var commaSeparatedUsers = slicedArr.join(', ');
-                outStr = commaSeparatedUsers + ", and " + lastUser;
-            }
-            else {
-                var commaSeparatedUsers = slicedArr.join(', ');
-                outStr = commaSeparatedUsers + " and " + restLength + " more";
-            }
-        }
-        return outStr;
-    };
-
     var emojiReactionsMapping = {
         like: '👍',
         angry: '😠',
@@ -4217,7 +4256,7 @@
         });
         Object.defineProperty(MessageComponent.prototype, "readByText", {
             get: function () {
-                return getReadByText(this.message.readBy);
+                return listUsers(this.message.readBy);
             },
             enumerable: false,
             configurable: true
@@ -4447,7 +4486,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 }, { token: CustomTemplatesService }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    MessageComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: MessageComponent, selector: "stream-message", inputs: { message: "message", enabledMessageActions: "enabledMessageActions", isLastSentMessage: "isLastSentMessage", 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]=\"hasReactions\"\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-placeholder\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-placeholder>\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            <ng-template\n              #defaultMessageActionsBox\n              let-isOpen=\"isOpen\"\n              let-isMine=\"isMine\"\n              let-enabledActions=\"enabledActions\"\n              let-messageInput=\"message\"\n              let-displayedActionsCountChaneHanler=\"displayedActionsCountChaneHanler\"\n              let-isEditingChangeHandler=\"isEditingChangeHandler\"\n            >\n              <stream-message-actions-box\n                [isOpen]=\"isOpen\"\n                [isMine]=\"isMine\"\n                [enabledActions]=\"enabledActions\"\n                [message]=\"messageInput\"\n                (displayedActionsCount)=\"\n                  displayedActionsCountChaneHanler($event)\n                \"\n                (isEditing)=\"isEditingChangeHandler($event)\"\n              ></stream-message-actions-box>\n            </ng-template>\n            <ng-container\n              *ngTemplateOutlet=\"\n                messageActionsBoxTemplate || defaultMessageActionsBox;\n                context: getMessageActionsBoxContext()\n              \"\n            ></ng-container>\n            <stream-icon-placeholder\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-placeholder>\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-placeholder\n              icon=\"reply-in-thread\"\n            ></stream-icon-placeholder>\n          </div>\n          <div\n            *ngIf=\"canReactToMessage\"\n            class=\"\n              str-chat__message-simple__actions__action\n              str-chat__message-simple__actions__action--reactions\n            \"\n            data-testid=\"reaction-icon\"\n            (click)=\"isReactionSelectorOpen = !isReactionSelectorOpen\"\n            (keyup.enter)=\"isReactionSelectorOpen = !isReactionSelectorOpen\"\n          >\n            <stream-icon-placeholder\n              icon=\"reaction-icon\"\n            ></stream-icon-placeholder>\n          </div>\n        </div>\n        <!-- eslint-enable @angular-eslint/template/conditional-complexity -->\n        <ng-template\n          #defaultMessageReactions\n          let-messageReactionCounts=\"messageReactionCounts\"\n          let-latestReactions=\"latestReactions\"\n          let-isSelectorOpen=\"isSelectorOpen\"\n          let-isSelectorOpenChangeHandler=\"isSelectorOpenChangeHandler\"\n          let-messageId=\"messageId\"\n          let-ownReactions=\"ownReactions\"\n        >\n          <stream-message-reactions\n            [messageReactionCounts]=\"messageReactionCounts\"\n            [latestReactions]=\"latestReactions\"\n            [isSelectorOpen]=\"isSelectorOpen\"\n            (isSelectorOpenChange)=\"isSelectorOpenChangeHandler($event)\"\n            [messageId]=\"messageId\"\n            [ownReactions]=\"ownReactions\"\n          ></stream-message-reactions>\n        </ng-template>\n        <ng-container\n          *ngTemplateOutlet=\"\n            messageReactionsTemplate || defaultMessageReactions;\n            context: getMessageReactionsContext()\n          \"\n        ></ng-container>\n        <ng-container *ngIf=\"hasAttachment && !message?.quoted_message\">\n          <ng-template\n            #defaultAttachments\n            let-messageId=\"messageId\"\n            let-attachments=\"attachments\"\n          >\n            <stream-attachment-list\n              [messageId]=\"messageId\"\n              [attachments]=\"attachments\"\n            ></stream-attachment-list>\n          </ng-template>\n          <ng-container\n            *ngTemplateOutlet=\"\n              attachmentListTemplate || defaultAttachments;\n              context: getAttachmentListContext()\n            \"\n          ></ng-container>\n        </ng-container>\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-template #defaultMention let-content=\"content\">\n                      <b>{{ content }}</b>\n                    </ng-template>\n                    <ng-container\n                      *ngTemplateOutlet=\"\n                        mentionTemplate || defaultMention;\n                        context: getMentionContext(part)\n                      \"\n                    ></ng-container>\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-placeholder icon=\"reply\"></stream-icon-placeholder>\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-placeholder\n      data-testid=\"loading-indicator\"\n    ></stream-loading-indicator-placeholder>\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-placeholder\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-placeholder>\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-placeholder\n      data-testid=\"delivered-icon\"\n      icon=\"delivered-icon\"\n    ></stream-icon-placeholder>\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-placeholder\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-placeholder>\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: AvatarPlaceholderComponent, selector: "stream-avatar-placeholder", inputs: ["name", "imageUrl", "size"] }, { type: MessageActionsBoxComponent, selector: "stream-message-actions-box", inputs: ["isOpen", "isMine", "message", "enabledActions"], outputs: ["displayedActionsCount", "isEditing"] }, { type: IconPlaceholderComponent, selector: "stream-icon-placeholder", 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: LoadingIndicatorPlaceholderComponent, selector: "stream-loading-indicator-placeholder", inputs: ["size", "color"] }], directives: [{ type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: 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: { message: "message", enabledMessageActions: "enabledMessageActions", isLastSentMessage: "isLastSentMessage", 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]=\"hasReactions\"\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-placeholder\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-placeholder>\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            <ng-template\n              #defaultMessageActionsBox\n              let-isOpen=\"isOpen\"\n              let-isMine=\"isMine\"\n              let-enabledActions=\"enabledActions\"\n              let-messageInput=\"message\"\n              let-displayedActionsCountChaneHanler=\"displayedActionsCountChaneHanler\"\n              let-isEditingChangeHandler=\"isEditingChangeHandler\"\n            >\n              <stream-message-actions-box\n                [isOpen]=\"isOpen\"\n                [isMine]=\"isMine\"\n                [enabledActions]=\"enabledActions\"\n                [message]=\"messageInput\"\n                (displayedActionsCount)=\"\n                  displayedActionsCountChaneHanler($event)\n                \"\n                (isEditing)=\"isEditingChangeHandler($event)\"\n              ></stream-message-actions-box>\n            </ng-template>\n            <ng-container\n              *ngTemplateOutlet=\"\n                messageActionsBoxTemplate || defaultMessageActionsBox;\n                context: getMessageActionsBoxContext()\n              \"\n            ></ng-container>\n            <stream-icon-placeholder\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-placeholder>\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-placeholder\n              icon=\"reply-in-thread\"\n            ></stream-icon-placeholder>\n          </div>\n          <div\n            *ngIf=\"canReactToMessage\"\n            class=\"\n              str-chat__message-simple__actions__action\n              str-chat__message-simple__actions__action--reactions\n            \"\n            data-testid=\"reaction-icon\"\n            (click)=\"isReactionSelectorOpen = !isReactionSelectorOpen\"\n            (keyup.enter)=\"isReactionSelectorOpen = !isReactionSelectorOpen\"\n          >\n            <stream-icon-placeholder\n              icon=\"reaction-icon\"\n            ></stream-icon-placeholder>\n          </div>\n        </div>\n        <!-- eslint-enable @angular-eslint/template/conditional-complexity -->\n        <ng-template\n          #defaultMessageReactions\n          let-messageReactionCounts=\"messageReactionCounts\"\n          let-latestReactions=\"latestReactions\"\n          let-isSelectorOpen=\"isSelectorOpen\"\n          let-isSelectorOpenChangeHandler=\"isSelectorOpenChangeHandler\"\n          let-messageId=\"messageId\"\n          let-ownReactions=\"ownReactions\"\n        >\n          <stream-message-reactions\n            [messageReactionCounts]=\"messageReactionCounts\"\n            [latestReactions]=\"latestReactions\"\n            [isSelectorOpen]=\"isSelectorOpen\"\n            (isSelectorOpenChange)=\"isSelectorOpenChangeHandler($event)\"\n            [messageId]=\"messageId\"\n            [ownReactions]=\"ownReactions\"\n          ></stream-message-reactions>\n        </ng-template>\n        <ng-container\n          *ngTemplateOutlet=\"\n            messageReactionsTemplate || defaultMessageReactions;\n            context: getMessageReactionsContext()\n          \"\n        ></ng-container>\n        <ng-container *ngIf=\"hasAttachment && !message?.quoted_message\">\n          <ng-template\n            #defaultAttachments\n            let-messageId=\"messageId\"\n            let-attachments=\"attachments\"\n          >\n            <stream-attachment-list\n              [messageId]=\"messageId\"\n              [attachments]=\"attachments\"\n            ></stream-attachment-list>\n          </ng-template>\n          <ng-container\n            *ngTemplateOutlet=\"\n              attachmentListTemplate || defaultAttachments;\n              context: getAttachmentListContext()\n            \"\n          ></ng-container>\n        </ng-container>\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-template #defaultMention let-content=\"content\">\n                      <b>{{ content }}</b>\n                    </ng-template>\n                    <ng-container\n                      *ngTemplateOutlet=\"\n                        mentionTemplate || defaultMention;\n                        context: getMentionContext(part)\n                      \"\n                    ></ng-container>\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-placeholder icon=\"reply\"></stream-icon-placeholder>\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-placeholder\n      data-testid=\"loading-indicator\"\n    ></stream-loading-indicator-placeholder>\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-placeholder\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-placeholder>\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-placeholder\n      data-testid=\"delivered-icon\"\n      icon=\"delivered-icon\"\n    ></stream-icon-placeholder>\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-placeholder\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-placeholder>\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: AvatarPlaceholderComponent, selector: "stream-avatar-placeholder", inputs: ["name", "imageUrl", "size"] }, { type: MessageActionsBoxComponent, selector: "stream-message-actions-box", inputs: ["isOpen", "isMine", "message", "enabledActions"], outputs: ["displayedActionsCount", "isEditing"] }, { type: IconPlaceholderComponent, selector: "stream-icon-placeholder", 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: LoadingIndicatorPlaceholderComponent, selector: "stream-loading-indicator-placeholder", inputs: ["size", "color"] }], directives: [{ type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i9__namespace.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }], pipes: { "translate": i9__namespace.TranslatePipe } });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: MessageComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -4515,7 +4554,7 @@
         return TextareaComponent;
     }());
     TextareaComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: TextareaComponent, deps: [{ token: EmojiInputService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TextareaComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: TextareaComponent, selector: "stream-textarea", inputs: { value: "value" }, outputs: { valueChange: "valueChange", send: "send" }, host: { properties: { "class": "this.class" } }, viewQueries: [{ propertyName: "messageInput", first: true, predicate: ["input"], descendants: true }], usesOnChanges: true, ngImport: i0__namespace, template: "<textarea\n  [value]=\"value || ''\"\n  autofocus\n  data-testid=\"textarea\"\n  #input\n  placeholder=\"{{ 'streamChat.Type your message' | translate }}\"\n  class=\"rta__textarea str-chat__textarea__textarea str-chat__angular-textarea\"\n  rows=\"1\"\n  (input)=\"inputChanged()\"\n  (keydown.enter)=\"sent($event)\"\n></textarea>\n", pipes: { "translate": i2__namespace.TranslatePipe } });
+    TextareaComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: TextareaComponent, selector: "stream-textarea", inputs: { value: "value" }, outputs: { valueChange: "valueChange", send: "send" }, host: { properties: { "class": "this.class" } }, viewQueries: [{ propertyName: "messageInput", first: true, predicate: ["input"], descendants: true }], usesOnChanges: true, ngImport: i0__namespace, template: "<textarea\n  [value]=\"value || ''\"\n  autofocus\n  data-testid=\"textarea\"\n  #input\n  placeholder=\"{{ 'streamChat.Type your message' | translate }}\"\n  class=\"rta__textarea str-chat__textarea__textarea str-chat__angular-textarea\"\n  rows=\"1\"\n  (input)=\"inputChanged()\"\n  (keydown.enter)=\"sent($event)\"\n></textarea>\n", pipes: { "translate": i9__namespace.TranslatePipe } });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: TextareaComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -4763,7 +4802,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 }, { token: CustomTemplatesService }], 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", 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-placeholder\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-placeholder>\n    <span data-testclass=\"username\" class=\"str-chat__user-item--name\">{{\n      item.autocompleteLabel\n    }}</span>\n  </div>\n</ng-template>\n", components: [{ type: AvatarPlaceholderComponent, selector: "stream-avatar-placeholder", inputs: ["name", "imageUrl", "size"] }], directives: [{ type: i7__namespace.MentionDirective, selector: "[mention], [mentionConfig]", inputs: ["mentionConfig", "mention", "mentionListTemplate"], outputs: ["searchTerm", "itemSelected", "opened", "closed"] }, { type: i3__namespace.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i3__namespace.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i3__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", 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-placeholder\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-placeholder>\n    <span data-testclass=\"username\" class=\"str-chat__user-item--name\">{{\n      item.autocompleteLabel\n    }}</span>\n  </div>\n</ng-template>\n", components: [{ type: AvatarPlaceholderComponent, selector: "stream-avatar-placeholder", inputs: ["name", "imageUrl", "size"] }], directives: [{ type: i7__namespace.MentionDirective, selector: "[mention], [mentionConfig]", inputs: ["mentionConfig", "mention", "mentionListTemplate"], outputs: ["searchTerm", "itemSelected", "opened", "closed"] }, { type: i3__namespace.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i3__namespace.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i3__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "translate": i9__namespace.TranslatePipe } });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: AutocompleteTextareaComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -4845,6 +4884,10 @@
              * Determines if the message list should display channel messages or [thread messages](https://getstream.io/chat/docs/javascript/threads/?language=javascript).
              */
             this.mode = 'main';
+            /**
+             * The direction of the messages in the list, `bottom-to-top` means newest message is at the bottom of the message list and users scroll upwards to load older messages
+             */
+            this.direction = 'bottom-to-top';
             this.enabledMessageActions = [];
             this.class = 'str-chat-angular__main-panel-inner str-chat-angular__message-list-host';
             this.unreadMessageCount = 0;
@@ -4860,7 +4903,7 @@
                 }
             }));
             this.subscriptions.push(this.imageLoadService.imageLoad$.subscribe(function () {
-                if (!_this.isUserScrolledUp) {
+                if (!_this.isUserScrolled && _this.direction === 'bottom-to-top') {
                     _this.scrollToBottom();
                     // Hacky and unreliable workaround to scroll down after loaded images move the scrollbar
                     setTimeout(function () {
@@ -4886,33 +4929,50 @@
             this.setMessages$();
         };
         MessageListComponent.prototype.ngOnChanges = function (changes) {
-            if (changes.mode) {
+            var _a;
+            if (changes.mode || changes.direction) {
                 this.setMessages$();
             }
+            if (changes.direction) {
+                if ((_a = this.scrollContainer) === null || _a === void 0 ? void 0 : _a.nativeElement) {
+                    this.scrollToLatestMessage();
+                }
+            }
         };
         MessageListComponent.prototype.ngAfterViewChecked = function () {
             var _this = this;
-            if (this.hasNewMessages) {
-                if (!this.isUserScrolledUp || this.isNewMessageSentByUser) {
-                    this.scrollToBottom();
-                    // Hacky and unreliable workaround to scroll down after loaded images move the scrollbar
-                    setTimeout(function () {
-                        _this.scrollToBottom();
-                    }, 300);
+            if (this.direction === 'top-to-bottom') {
+                if (this.hasNewMessages &&
+                    (this.isNewMessageSentByUser || !this.isUserScrolled)) {
+                    this.scrollToTop();
+                    this.hasNewMessages = false;
+                    this.containerHeight = this.scrollContainer.nativeElement.scrollHeight;
                 }
-                this.hasNewMessages = false;
-                this.containerHeight = this.scrollContainer.nativeElement.scrollHeight;
-            }
-            else if (this.olderMassagesLoaded) {
-                this.preserveScrollbarPosition();
-                this.containerHeight = this.scrollContainer.nativeElement.scrollHeight;
-                this.olderMassagesLoaded = false;
             }
-            else if (this.containerHeight !== undefined &&
-                this.containerHeight < this.scrollContainer.nativeElement.scrollHeight &&
-                !this.isUserScrolledUp) {
-                this.scrollToBottom();
-                this.containerHeight = this.scrollContainer.nativeElement.scrollHeight;
+            else {
+                if (this.hasNewMessages) {
+                    if (!this.isUserScrolled || this.isNewMessageSentByUser) {
+                        this.scrollToBottom();
+                        // Hacky and unreliable workaround to scroll down after loaded images move the scrollbar
+                        setTimeout(function () {
+                            _this.scrollToBottom();
+                        }, 300);
+                    }
+                    this.hasNewMessages = false;
+                    this.containerHeight = this.scrollContainer.nativeElement.scrollHeight;
+                }
+                else if (this.olderMassagesLoaded) {
+                    this.preserveScrollbarPosition();
+                    this.containerHeight = this.scrollContainer.nativeElement.scrollHeight;
+                    this.olderMassagesLoaded = false;
+                }
+                else if (this.containerHeight !== undefined &&
+                    this.containerHeight <
+                        this.scrollContainer.nativeElement.scrollHeight &&
+                    !this.isUserScrolled) {
+                    this.scrollToBottom();
+                    this.containerHeight = this.scrollContainer.nativeElement.scrollHeight;
+                }
             }
         };
         MessageListComponent.prototype.ngOnDestroy = function () {
@@ -4924,25 +4984,30 @@
         MessageListComponent.prototype.trackByUserId = function (index, user) {
             return user.id;
         };
+        MessageListComponent.prototype.scrollToLatestMessage = function () {
+            this.direction === 'bottom-to-top'
+                ? this.scrollToBottom()
+                : this.scrollToTop();
+        };
         MessageListComponent.prototype.scrollToBottom = function () {
             this.scrollContainer.nativeElement.scrollTop =
                 this.scrollContainer.nativeElement.scrollHeight;
         };
+        MessageListComponent.prototype.scrollToTop = function () {
+            this.scrollContainer.nativeElement.scrollTop = 0;
+        };
         MessageListComponent.prototype.scrolled = function () {
-            var _a, _b;
-            this.isUserScrolledUp =
-                this.scrollContainer.nativeElement.scrollHeight -
-                    (this.scrollContainer.nativeElement.scrollTop +
-                        this.scrollContainer.nativeElement.clientHeight) >
-                    this.isUserScrolledUpThreshold;
-            if (!this.isUserScrolledUp) {
+            this.isUserScrolled =
+                this.direction === 'bottom-to-top'
+                    ? this.scrollContainer.nativeElement.scrollHeight -
+                        (this.scrollContainer.nativeElement.scrollTop +
+                            this.scrollContainer.nativeElement.clientHeight) >
+                        this.isUserScrolledUpThreshold
+                    : this.scrollContainer.nativeElement.scrollTop > 0;
+            if (!this.isUserScrolled) {
                 this.unreadMessageCount = 0;
             }
-            if (this.scrollContainer.nativeElement.scrollTop <=
-                (((_a = this.parentMessageElement) === null || _a === void 0 ? void 0 : _a.nativeElement.clientHeight) || 0) &&
-                (this.prevScrollTop === undefined ||
-                    this.prevScrollTop >
-                        (((_b = this.parentMessageElement) === null || _b === void 0 ? void 0 : _b.nativeElement.clientHeight) || 0))) {
+            if (this.shouldLoadMoreMessages()) {
                 this.containerHeight = this.scrollContainer.nativeElement.scrollHeight;
                 this.mode === 'main'
                     ? void this.channelService.loadMoreMessages()
@@ -4968,6 +5033,21 @@
                 (this.prevScrollTop || 0) +
                     (this.scrollContainer.nativeElement.scrollHeight - this.containerHeight);
         };
+        MessageListComponent.prototype.shouldLoadMoreMessages = function () {
+            var _a, _b;
+            if (this.direction === 'bottom-to-top') {
+                return (this.scrollContainer.nativeElement.scrollTop <=
+                    (((_a = this.parentMessageElement) === null || _a === void 0 ? void 0 : _a.nativeElement.clientHeight) || 0) &&
+                    (this.prevScrollTop === undefined ||
+                        this.prevScrollTop >
+                            (((_b = this.parentMessageElement) === null || _b === void 0 ? void 0 : _b.nativeElement.clientHeight) || 0)));
+            }
+            else {
+                return (this.scrollContainer.nativeElement.scrollTop +
+                    this.scrollContainer.nativeElement.clientHeight >=
+                    this.scrollContainer.nativeElement.scrollHeight);
+            }
+        };
         MessageListComponent.prototype.setMessages$ = function () {
             var _this = this;
             this.messages$ = (this.mode === 'main'
@@ -4985,7 +5065,7 @@
                     _this.isNewMessageSentByUser =
                         ((_b = messages[messages.length - 1].user) === null || _b === void 0 ? void 0 : _b.id) ===
                             ((_d = (_c = _this.chatClientService.chatClient) === null || _c === void 0 ? void 0 : _c.user) === null || _d === void 0 ? void 0 : _d.id);
-                    if (_this.isUserScrolledUp) {
+                    if (_this.isUserScrolled) {
                         _this.unreadMessageCount++;
                     }
                 }
@@ -4997,8 +5077,6 @@
                     _this.oldestMessageDate = currentOldestMessageDate;
                     _this.olderMassagesLoaded = true;
                 }
-            }), operators.tap(function (messages) {
-                _this.groupStyles = messages.map(function (m, i) { return getGroupStyles(m, messages[i - 1], messages[i + 1]); });
             }), operators.tap(function (messages) {
                 var _a;
                 return (_this.lastSentMessageId = (_a = __spreadArray([], __read(messages)).reverse()
@@ -5007,12 +5085,14 @@
                     return ((_a = m.user) === null || _a === void 0 ? void 0 : _a.id) === ((_c = (_b = _this.chatClientService.chatClient) === null || _b === void 0 ? void 0 : _b.user) === null || _c === void 0 ? void 0 : _c.id) &&
                         m.status !== 'sending';
                 })) === null || _a === void 0 ? void 0 : _a.id);
+            }), operators.map(function (messages) { return _this.direction === 'bottom-to-top' ? messages : __spreadArray([], __read(messages)).reverse(); }), operators.tap(function (messages) {
+                _this.groupStyles = messages.map(function (m, i) { return getGroupStyles(m, messages[i - 1], messages[i + 1]); });
             }));
         };
         MessageListComponent.prototype.resetScrollState = function () {
             this.latestMessageDate = undefined;
             this.hasNewMessages = true;
-            this.isUserScrolledUp = false;
+            this.isUserScrolled = false;
             this.containerHeight = undefined;
             this.olderMassagesLoaded = false;
             this.oldestMessageDate = undefined;
@@ -5032,7 +5112,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 }, { token: CustomTemplatesService }], 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: { 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-template #defaultTypingIndicator let-usersTyping$=\"usersTyping$\">\n      <div\n        *ngIf=\"$any(usersTyping$ | async)?.length\"\n        data-testid=\"typing-indicator\"\n        class=\"str-chat__typing-indicator str-chat__typing-indicator--typing\"\n      >\n        <stream-avatar-placeholder\n          *ngFor=\"let user of usersTyping$ | async; trackBy: trackByUserId\"\n          [name]=\"user.name || user.id\"\n          [imageUrl]=\"user.image\"\n        ></stream-avatar-placeholder>\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    <ng-container\n      *ngTemplateOutlet=\"\n        typingIndicatorTemplate || defaultTypingIndicator;\n        context: getTypingIndicatorContext()\n      \"\n    ></ng-container>\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-template\n    #defaultMessageTemplate\n    let-messageInput=\"message\"\n    let-isLastSentMessage=\"isLastSentMessage\"\n    let-enabledMessageActions=\"enabledMessageActions\"\n    let-mode=\"mode\"\n  >\n    <stream-message\n      [message]=\"messageInput\"\n      [isLastSentMessage]=\"isLastSentMessage\"\n      [enabledMessageActions]=\"enabledMessageActions\"\n      [mode]=\"mode\"\n    ></stream-message>\n  </ng-template>\n  <ng-container\n    *ngTemplateOutlet=\"\n      messageTemplate || defaultMessageTemplate;\n      context: getMessageContext(message)\n    \"\n  ></ng-container>\n</ng-template>\n", components: [{ type: AvatarPlaceholderComponent, selector: "stream-avatar-placeholder", inputs: ["name", "imageUrl", "size"] }, { type: MessageComponent, selector: "stream-message", inputs: ["message", "enabledMessageActions", "isLastSentMessage", "mode"] }], directives: [{ type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2__namespace.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { type: i3__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i3__namespace.AsyncPipe } });
+    MessageListComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: MessageListComponent, selector: "stream-message-list", inputs: { mode: "mode", direction: "direction" }, 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-template #defaultTypingIndicator let-usersTyping$=\"usersTyping$\">\n      <div\n        *ngIf=\"$any(usersTyping$ | async)?.length\"\n        data-testid=\"typing-indicator\"\n        class=\"str-chat__typing-indicator str-chat__typing-indicator--typing\"\n      >\n        <stream-avatar-placeholder\n          *ngFor=\"let user of usersTyping$ | async; trackBy: trackByUserId\"\n          [name]=\"user.name || user.id\"\n          [imageUrl]=\"user.image\"\n        ></stream-avatar-placeholder>\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    <ng-container\n      *ngTemplateOutlet=\"\n        typingIndicatorTemplate || defaultTypingIndicator;\n        context: getTypingIndicatorContext()\n      \"\n    ></ng-container>\n  </div>\n</div>\n<div class=\"str-chat__list-notifications\">\n  <button\n    data-testid=\"scroll-to-latest\"\n    *ngIf=\"isUserScrolled\"\n    class=\"\n      str-chat__message-notification\n      str-chat__message-notification-right\n      str-chat__message-notification-scroll-to-latest\n    \"\n    (keyup.enter)=\"scrollToLatestMessage()\"\n    (click)=\"scrollToLatestMessage()\"\n  >\n    <stream-icon\n      style=\"display: inline-block; height: 24px\"\n      [icon]=\"direction === 'bottom-to-top' ? 'arrow-down' : 'arrow-up'\"\n    ></stream-icon>\n    <div\n      *ngIf=\"unreadMessageCount > 0\"\n      class=\"\n        str-chat__message-notification\n        str-chat__message-notification-scroll-to-latest-unread-count\n      \"\n    >\n      {{ unreadMessageCount }}\n    </div>\n  </button>\n</div>\n\n<ng-template #messageTemplateContainer let-message=\"message\">\n  <ng-template\n    #defaultMessageTemplate\n    let-messageInput=\"message\"\n    let-isLastSentMessage=\"isLastSentMessage\"\n    let-enabledMessageActions=\"enabledMessageActions\"\n    let-mode=\"mode\"\n  >\n    <stream-message\n      [message]=\"messageInput\"\n      [isLastSentMessage]=\"isLastSentMessage\"\n      [enabledMessageActions]=\"enabledMessageActions\"\n      [mode]=\"mode\"\n    ></stream-message>\n  </ng-template>\n  <ng-container\n    *ngTemplateOutlet=\"\n      messageTemplate || defaultMessageTemplate;\n      context: getMessageContext(message)\n    \"\n  ></ng-container>\n</ng-template>\n", components: [{ type: AvatarPlaceholderComponent, selector: "stream-avatar-placeholder", inputs: ["name", "imageUrl", "size"] }, { type: IconComponent, selector: "stream-icon", inputs: ["icon", "size"] }, { type: MessageComponent, selector: "stream-message", inputs: ["message", "enabledMessageActions", "isLastSentMessage", "mode"] }], directives: [{ type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i9__namespace.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { type: i3__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i3__namespace.AsyncPipe } });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: MessageListComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -5042,6 +5122,8 @@
                     }]
             }], ctorParameters: function () { return [{ type: ChannelService }, { type: ChatClientService }, { type: ImageLoadService }, { type: CustomTemplatesService }]; }, propDecorators: { mode: [{
                     type: i0.Input
+                }], direction: [{
+                    type: i0.Input
                 }], class: [{
                     type: i0.HostBinding,
                     args: ['class']
@@ -5084,7 +5166,7 @@
         return ThreadComponent;
     }());
     ThreadComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: ThreadComponent, deps: [{ token: CustomTemplatesService }, { token: ChannelService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    ThreadComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: ThreadComponent, selector: "stream-thread", host: { properties: { "class": "this.class" } }, ngImport: i0__namespace, template: "<ng-container\n  *ngTemplateOutlet=\"\n    (customTemplatesService.threadHeaderTemplate$ | async) ||\n      defaultThreadHeader;\n    context: getThreadHeaderContext()\n  \"\n></ng-container>\n<ng-content select='[name=\"thread-message-list\"]'></ng-content>\n<div class=\"str-chat__small-message-input__wrapper\">\n  <ng-content select='[name=\"thread-message-input\"]'></ng-content>\n</div>\n\n<ng-template\n  #defaultThreadHeader\n  let-parentMessage=\"parentMessage\"\n  let-closeThreadHandler=\"closeThreadHandler\"\n>\n  <div class=\"str-chat__thread-header\">\n    <div class=\"str-chat__thread-header-details\">\n      <strong translate>streamChat.Thread</strong>\n      <small data-testid=\"reply-count\">\n        {{parentMessage?.reply_count === 1 ? ('streamChat.1 reply' | translate) : ('streamChat.{{ replyCount }}\n        replies' | translate:getReplyCountParam(parentMessage))}}\n      </small>\n    </div>\n    <button\n      class=\"str-chat__square-button\"\n      data-testid=\"close-button\"\n      (click)=\"closeThreadHandler()\"\n    >\n      <stream-icon-placeholder\n        icon=\"close-no-outline\"\n      ></stream-icon-placeholder>\n    </button>\n  </div>\n</ng-template>\n", components: [{ type: IconPlaceholderComponent, selector: "stream-icon-placeholder", inputs: ["icon", "size"] }], directives: [{ type: i3__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2__namespace.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }], pipes: { "async": i3__namespace.AsyncPipe, "translate": i2__namespace.TranslatePipe } });
+    ThreadComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: ThreadComponent, selector: "stream-thread", host: { properties: { "class": "this.class" } }, ngImport: i0__namespace, template: "<ng-container\n  *ngTemplateOutlet=\"\n    (customTemplatesService.threadHeaderTemplate$ | async) ||\n      defaultThreadHeader;\n    context: getThreadHeaderContext()\n  \"\n></ng-container>\n<ng-content select='[name=\"thread-message-list\"]'></ng-content>\n<div class=\"str-chat__small-message-input__wrapper\">\n  <ng-content select='[name=\"thread-message-input\"]'></ng-content>\n</div>\n\n<ng-template\n  #defaultThreadHeader\n  let-parentMessage=\"parentMessage\"\n  let-closeThreadHandler=\"closeThreadHandler\"\n>\n  <div class=\"str-chat__thread-header\">\n    <div class=\"str-chat__thread-header-details\">\n      <strong translate>streamChat.Thread</strong>\n      <small data-testid=\"reply-count\">\n        {{parentMessage?.reply_count === 1 ? ('streamChat.1 reply' | translate) : ('streamChat.{{ replyCount }}\n        replies' | translate:getReplyCountParam(parentMessage))}}\n      </small>\n    </div>\n    <button\n      class=\"str-chat__square-button\"\n      data-testid=\"close-button\"\n      (click)=\"closeThreadHandler()\"\n    >\n      <stream-icon-placeholder\n        icon=\"close-no-outline\"\n      ></stream-icon-placeholder>\n    </button>\n  </div>\n</ng-template>\n", components: [{ type: IconPlaceholderComponent, selector: "stream-icon-placeholder", inputs: ["icon", "size"] }], directives: [{ type: i3__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i9__namespace.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }], pipes: { "async": i3__namespace.AsyncPipe, "translate": i9__namespace.TranslatePipe } });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: ThreadComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -5103,13 +5185,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, AvatarPlaceholderComponent], imports: [i3.CommonModule, i2.TranslateModule], exports: [AvatarComponent, AvatarPlaceholderComponent] });
-    StreamAvatarModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: StreamAvatarModule, imports: [[i3.CommonModule, i2.TranslateModule]] });
+    StreamAvatarModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: StreamAvatarModule, declarations: [AvatarComponent, AvatarPlaceholderComponent], imports: [i3.CommonModule, i9.TranslateModule], exports: [AvatarComponent, AvatarPlaceholderComponent] });
+    StreamAvatarModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: StreamAvatarModule, imports: [[i3.CommonModule, i9.TranslateModule]] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: StreamAvatarModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
                         declarations: [AvatarComponent, AvatarPlaceholderComponent],
-                        imports: [i3.CommonModule, i2.TranslateModule],
+                        imports: [i3.CommonModule, i9.TranslateModule],
                         exports: [AvatarComponent, AvatarPlaceholderComponent],
                     }]
             }] });
@@ -5139,7 +5221,7 @@
             TextareaDirective,
             ThreadComponent,
             IconPlaceholderComponent,
-            LoadingIndicatorPlaceholderComponent], imports: [i3.CommonModule, i2.TranslateModule, StreamAvatarModule], exports: [ChannelComponent,
+            LoadingIndicatorPlaceholderComponent], imports: [i3.CommonModule, i9.TranslateModule, StreamAvatarModule], exports: [ChannelComponent,
             ChannelHeaderComponent,
             ChannelListComponent,
             ChannelPreviewComponent,
@@ -5159,7 +5241,7 @@
             ThreadComponent,
             IconPlaceholderComponent,
             LoadingIndicatorPlaceholderComponent] });
-    StreamChatModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: StreamChatModule, imports: [[i3.CommonModule, i2.TranslateModule, StreamAvatarModule], StreamAvatarModule] });
+    StreamChatModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: StreamChatModule, imports: [[i3.CommonModule, i9.TranslateModule, StreamAvatarModule], StreamAvatarModule] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: StreamChatModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
@@ -5185,7 +5267,7 @@
                             IconPlaceholderComponent,
                             LoadingIndicatorPlaceholderComponent,
                         ],
-                        imports: [i3.CommonModule, i2.TranslateModule, StreamAvatarModule],
+                        imports: [i3.CommonModule, i9.TranslateModule, StreamAvatarModule],
                         exports: [
                             ChannelComponent,
                             ChannelHeaderComponent,
@@ -5217,18 +5299,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: [i3.CommonModule, i2.TranslateModule, i7.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: [i3.CommonModule, i9.TranslateModule, i7.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: [[i3.CommonModule, i2.TranslateModule, i7.MentionModule, StreamAvatarModule]] });
+        ], imports: [[i3.CommonModule, i9.TranslateModule, i7.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: [i3.CommonModule, i2.TranslateModule, i7.MentionModule, StreamAvatarModule],
+                        imports: [i3.CommonModule, i9.TranslateModule, i7.MentionModule, StreamAvatarModule],
                         exports: [AutocompleteTextareaComponent],
                         providers: [
                             {
@@ -5245,18 +5327,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: [i3.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: [i3.CommonModule, i9.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: [[i3.CommonModule, i2.TranslateModule]] });
+        ], imports: [[i3.CommonModule, i9.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: [i3.CommonModule, i2.TranslateModule],
+                        imports: [i3.CommonModule, i9.TranslateModule],
                         exports: [TextareaComponent],
                         providers: [
                             {
@@ -5319,9 +5401,9 @@
     exports.getDeviceWidth = getDeviceWidth;
     exports.getGroupStyles = getGroupStyles;
     exports.getReadBy = getReadBy;
-    exports.getReadByText = getReadByText;
     exports.isImageAttachment = isImageAttachment;
     exports.isImageFile = isImageFile;
+    exports.listUsers = listUsers;
     exports.parseDate = parseDate;
     exports.textareaInjectionToken = textareaInjectionToken;