stream-chat-angular 4.62.0 → 4.63.0

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

@@ -1,8 +1,8 @@
 (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('rxjs'), require('stream-chat'), require('rxjs/operators'), require('uuid'), require('@ngx-translate/core'), require('@angular/common'), require('pretty-bytes'), require('emoji-regex'), require('ngx-popperjs'), require('dayjs'), require('dayjs/plugin/calendar'), require('dayjs/plugin/relativeTime'), 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', 'emoji-regex', 'ngx-popperjs', 'dayjs', 'dayjs/plugin/calendar', 'dayjs/plugin/relativeTime', '@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.i6, global.ng.common, global.prettybytes, global.emojiRegex, global.i9, global.Dayjs, global.calendar, global.relativeTime, global.transliterate, global.i8));
-}(this, (function (exports, i0, rxjs, streamChat, operators, uuid, i6, i5, prettybytes, emojiRegex, i9, Dayjs, calendar, relativeTime, transliterate, i8) { '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.i6, global.ng.common, global.prettybytes, global.emojiRegex, global.i9, global.Dayjs, global.calendar, global.relativeTime, global.transliterate, global.i8$1));
+}(this, (function (exports, i0, rxjs, streamChat, operators, uuid, i6, i8, prettybytes, emojiRegex, i9, Dayjs, calendar, relativeTime, transliterate, i8$1) { 'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -28,7 +28,7 @@
 
     var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
     var i6__namespace = /*#__PURE__*/_interopNamespace(i6);
-    var i5__namespace = /*#__PURE__*/_interopNamespace(i5);
+    var i8__namespace = /*#__PURE__*/_interopNamespace(i8);
     var prettybytes__default = /*#__PURE__*/_interopDefaultLegacy(prettybytes);
     var emojiRegex__default = /*#__PURE__*/_interopDefaultLegacy(emojiRegex);
     var i9__namespace = /*#__PURE__*/_interopNamespace(i9);
@@ -36,7 +36,7 @@
     var calendar__default = /*#__PURE__*/_interopDefaultLegacy(calendar);
     var relativeTime__default = /*#__PURE__*/_interopDefaultLegacy(relativeTime);
     var transliterate__default = /*#__PURE__*/_interopDefaultLegacy(transliterate);
-    var i8__namespace = /*#__PURE__*/_interopNamespace(i8);
+    var i8__namespace$1 = /*#__PURE__*/_interopNamespace(i8$1);
 
     /*! *****************************************************************************
     Copyright (c) Microsoft Corporation.
@@ -356,7 +356,7 @@
         return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
     }
 
-    var version = '4.62.0';
+    var version = '4.63.0';
 
     /**
      * The `NotificationService` can be used to add or remove notifications. By default the [`NotificationList`](../components/NotificationListComponent.mdx) component displays the currently active notifications.
@@ -3179,6 +3179,7 @@
             'This message did not meet our content guidelines': 'This message did not meet our content guidelines',
             'Send Anyway': 'Send Anyway',
             Edited: 'Edited',
+            'Error playing audio': 'Error playing audio',
         },
     };
 
@@ -3354,7 +3355,7 @@
         return AvatarComponent;
     }());
     AvatarComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: AvatarComponent, deps: [{ token: ChatClientService }, { token: i0__namespace.NgZone }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    AvatarComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: AvatarComponent, selector: "stream-avatar", inputs: { name: "name", imageUrl: "imageUrl", size: "size", location: "location", channel: "channel", user: "user", type: "type", showOnlineIndicator: "showOnlineIndicator", initialsType: "initialsType" }, usesOnChanges: true, ngImport: i0__namespace, template: "<div\n  class=\"str-chat__avatar str-chat__avatar--circle stream-chat__avatar--{{\n    location\n  }}\"\n  title=\"{{ name }}\"\n  [ngStyle]=\"{\n    flexBasis: 'calc(var(--str-chat__spacing-px, 1px) * ' + size + ')',\n    fontSize:\n      initialsType === 'first-letter-of-first-word'\n        ? 'calc(var(--str-chat__spacing-px, 1px) * ' + size / 2 + ')'\n        : 'calc(var(--str-chat__spacing-px, 1px) * ' + size / 3 + ')',\n    height: 'calc(var(--str-chat__spacing-px, 1px) * ' + size + ')',\n    lineHeight: 'calc(var(--str-chat__spacing-px, 1px) * ' + size + ')',\n    width: 'calc(var(--str-chat__spacing-px, 1px) * ' + size + ')'\n  }\"\n>\n  <img\n    *ngIf=\"(imageUrl || fallbackChannelImage) && !isError; else fallback\"\n    class=\"str-chat__avatar-image str-chat__avatar-image\"\n    src=\"{{ imageUrl || fallbackChannelImage }}\"\n    alt=\"{{ initials }}\"\n    data-testid=\"avatar-img\"\n    (error)=\"isError = true\"\n    [ngStyle]=\"{\n      flexBasis: 'calc(var(--str-chat__spacing-px, 1px) * ' + size + ')',\n      height: 'calc(var(--str-chat__spacing-px, 1px) * ' + size + ')',\n      objectFit: 'cover',\n      width: 'calc(var(--str-chat__spacing-px, 1px) * ' + size + ')'\n    }\"\n    fetchpriority=\"high\"\n  />\n  <ng-template #fallback>\n    <div data-testid=\"fallback-img\" class=\"str-chat__avatar-fallback\">\n      {{ initials }}\n    </div>\n  </ng-template>\n  <div\n    data-testid=\"online-indicator\"\n    *ngIf=\"isOnline && showOnlineIndicator\"\n    class=\"str-chat__avatar--online-indicator\"\n  ></div>\n</div>\n", styles: [""], directives: [{ type: i5__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i5__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    AvatarComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: AvatarComponent, selector: "stream-avatar", inputs: { name: "name", imageUrl: "imageUrl", size: "size", location: "location", channel: "channel", user: "user", type: "type", showOnlineIndicator: "showOnlineIndicator", initialsType: "initialsType" }, usesOnChanges: true, ngImport: i0__namespace, template: "<div\n  class=\"str-chat__avatar str-chat__avatar--circle stream-chat__avatar--{{\n    location\n  }}\"\n  title=\"{{ name }}\"\n  [ngStyle]=\"{\n    flexBasis: 'calc(var(--str-chat__spacing-px, 1px) * ' + size + ')',\n    fontSize:\n      initialsType === 'first-letter-of-first-word'\n        ? 'calc(var(--str-chat__spacing-px, 1px) * ' + size / 2 + ')'\n        : 'calc(var(--str-chat__spacing-px, 1px) * ' + size / 3 + ')',\n    height: 'calc(var(--str-chat__spacing-px, 1px) * ' + size + ')',\n    lineHeight: 'calc(var(--str-chat__spacing-px, 1px) * ' + size + ')',\n    width: 'calc(var(--str-chat__spacing-px, 1px) * ' + size + ')'\n  }\"\n>\n  <img\n    *ngIf=\"(imageUrl || fallbackChannelImage) && !isError; else fallback\"\n    class=\"str-chat__avatar-image str-chat__avatar-image\"\n    src=\"{{ imageUrl || fallbackChannelImage }}\"\n    alt=\"{{ initials }}\"\n    data-testid=\"avatar-img\"\n    (error)=\"isError = true\"\n    [ngStyle]=\"{\n      flexBasis: 'calc(var(--str-chat__spacing-px, 1px) * ' + size + ')',\n      height: 'calc(var(--str-chat__spacing-px, 1px) * ' + size + ')',\n      objectFit: 'cover',\n      width: 'calc(var(--str-chat__spacing-px, 1px) * ' + size + ')'\n    }\"\n    fetchpriority=\"high\"\n  />\n  <ng-template #fallback>\n    <div data-testid=\"fallback-img\" class=\"str-chat__avatar-fallback\">\n      {{ initials }}\n    </div>\n  </ng-template>\n  <div\n    data-testid=\"online-indicator\"\n    *ngIf=\"isOnline && showOnlineIndicator\"\n    class=\"str-chat__avatar--online-indicator\"\n  ></div>\n</div>\n", styles: [""], directives: [{ type: i8__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i8__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: AvatarComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -3553,6 +3554,10 @@
              * The template that can be used to override how a single image attachment is displayed inside the [attachment list](../components/AttachmentListComponent.mdx)
              */
             this.imageAttachmentTemplate$ = new rxjs.BehaviorSubject(undefined);
+            /**
+             * The template that can be used to override how a voice recording attachment is displayed inside the [attachment list](../components/AttachmentListComponent.mdx), by default the [voice recording component](../components/VoiceRecordingComponent.mdx) is used
+             */
+            this.voiceRecordingAttachmentTemplate$ = new rxjs.BehaviorSubject(undefined);
             /**
              * The template that can be used to override how a video attachment is displayed inside the [attachment list](../components/AttachmentListComponent.mdx)
              */
@@ -3667,7 +3672,7 @@
         return AvatarPlaceholderComponent;
     }());
     AvatarPlaceholderComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: AvatarPlaceholderComponent, deps: [{ token: CustomTemplatesService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    AvatarPlaceholderComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: AvatarPlaceholderComponent, selector: "stream-avatar-placeholder", inputs: { name: "name", imageUrl: "imageUrl", size: "size", location: "location", channel: "channel", user: "user", type: "type", initialsType: "initialsType", showOnlineIndicator: "showOnlineIndicator" }, usesOnChanges: true, ngImport: i0__namespace, template: "<ng-template\n  #defaultAvatar\n  let-name=\"name\"\n  let-imageUrl=\"imageUrl\"\n  let-size=\"size\"\n  let-type=\"type\"\n  let-channel=\"channel\"\n  let-user=\"user\"\n  let-location=\"location\"\n  let-initialsType=\"initialsType\"\n  let-showOnlineIndicator=\"showOnlineIndicator\"\n>\n  <stream-avatar\n    [name]=\"name\"\n    [imageUrl]=\"imageUrl\"\n    [size]=\"size\"\n    [type]=\"type\"\n    [channel]=\"channel\"\n    [user]=\"user\"\n    [location]=\"location\"\n    [initialsType]=\"initialsType\"\n    [showOnlineIndicator]=\"showOnlineIndicator\"\n  ></stream-avatar>\n</ng-template>\n<ng-container\n  *ngTemplateOutlet=\"\n    (customTemplatesService.avatarTemplate$ | async) || defaultAvatar;\n    context: context\n  \"\n></ng-container>\n", components: [{ type: AvatarComponent, selector: "stream-avatar", inputs: ["name", "imageUrl", "size", "location", "channel", "user", "type", "showOnlineIndicator", "initialsType"] }], directives: [{ type: i5__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "async": i5__namespace.AsyncPipe } });
+    AvatarPlaceholderComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: AvatarPlaceholderComponent, selector: "stream-avatar-placeholder", inputs: { name: "name", imageUrl: "imageUrl", size: "size", location: "location", channel: "channel", user: "user", type: "type", initialsType: "initialsType", showOnlineIndicator: "showOnlineIndicator" }, usesOnChanges: true, ngImport: i0__namespace, template: "<ng-template\n  #defaultAvatar\n  let-name=\"name\"\n  let-imageUrl=\"imageUrl\"\n  let-size=\"size\"\n  let-type=\"type\"\n  let-channel=\"channel\"\n  let-user=\"user\"\n  let-location=\"location\"\n  let-initialsType=\"initialsType\"\n  let-showOnlineIndicator=\"showOnlineIndicator\"\n>\n  <stream-avatar\n    [name]=\"name\"\n    [imageUrl]=\"imageUrl\"\n    [size]=\"size\"\n    [type]=\"type\"\n    [channel]=\"channel\"\n    [user]=\"user\"\n    [location]=\"location\"\n    [initialsType]=\"initialsType\"\n    [showOnlineIndicator]=\"showOnlineIndicator\"\n  ></stream-avatar>\n</ng-template>\n<ng-container\n  *ngTemplateOutlet=\"\n    (customTemplatesService.avatarTemplate$ | async) || defaultAvatar;\n    context: context\n  \"\n></ng-container>\n", components: [{ type: AvatarComponent, selector: "stream-avatar", inputs: ["name", "imageUrl", "size", "location", "channel", "user", "type", "showOnlineIndicator", "initialsType"] }], directives: [{ type: i8__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "async": i8__namespace.AsyncPipe } });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: AvatarPlaceholderComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -3704,7 +3709,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  data-testid=\"delivered-icon\"\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=\"M8.9999 16.2L4.7999 12L3.3999 13.4L8.9999 19L20.9999 6.99998L19.5999 5.59998L8.9999 16.2Z\"\n    fill=\"black\"\n  />\n</svg>\n\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  width=\"24\"\n  height=\"24\"\n  viewBox=\"0 0 24 24\"\n  fill=\"none\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n>\n  <title translate>streamChat.Send</title>\n  <path\n    d=\"M4.00952 22L24 12L4.00952 2L4 9.77778L18.2857 12L4 14.2222L4.00952 22Z\"\n    fill=\"black\"\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  *ngIf=\"icon === 'retry'\"\n  data-testid=\"retry\"\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=\"M17.6449 6.35C16.1949 4.9 14.2049 4 11.9949 4C7.57488 4 4.00488 7.58 4.00488 12C4.00488 16.42 7.57488 20 11.9949 20C15.7249 20 18.8349 17.45 19.7249 14H17.6449C16.8249 16.33 14.6049 18 11.9949 18C8.68488 18 5.99488 15.31 5.99488 12C5.99488 8.69 8.68488 6 11.9949 6C13.6549 6 15.1349 6.69 16.2149 7.78L12.9949 11H19.9949V4L17.6449 6.35Z\"\n    fill=\"black\"\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  fill=\"none\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n>\n  <rect width=\"28\" height=\"28\" rx=\"14\" fill=\"#72767E\" />\n  <circle cx=\"14\" cy=\"14\" r=\"12\" fill=\"#72767E\" />\n  <path\n    fill-rule=\"evenodd\"\n    clip-rule=\"evenodd\"\n    d=\"M28 14C28 21.732 21.732 28 14 28C6.26801 28 0 21.732 0 14C0 6.26801 6.26801 0 14 0C21.732 0 28 6.26801 28 14ZM26 14C26 20.6274 20.6274 26 14 26C7.37258 26 2 20.6274 2 14C2 7.37258 7.37258 2 14 2C20.6274 2 26 7.37258 26 14ZM19.59 7L21 8.41L15.41 14L21 19.59L19.59 21L14 15.41L8.41 21L7 19.59L12.59 14L7 8.41L8.41 7L14 12.59L19.59 7Z\"\n    fill=\"white\"\n  />\n</svg>\n\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 === 'unspecified-filetype'\"\n  data-testid=\"unspecified-filetype\"\n  width=\"34\"\n  height=\"40\"\n  viewBox=\"0 0 34 40\"\n  fill=\"none\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n>\n  <path\n    d=\"M0 3C0 1.34315 1.34315 0 3 0H23L34 11V37C34 38.6569 32.6569 40 31 40H3C1.34315 40 0 38.6569 0 37V3Z\"\n    fill=\"url(#paint0_linear)\"\n  />\n  <path d=\"M34 11L26 11C24.3431 11 23 9.65685 23 8V0L34 11Z\" fill=\"#DBDBDB\" />\n  <path\n    fill-rule=\"evenodd\"\n    clip-rule=\"evenodd\"\n    d=\"M8 13H23V15H8V13Z\"\n    fill=\"#CFCFCF\"\n  />\n  <path\n    fill-rule=\"evenodd\"\n    clip-rule=\"evenodd\"\n    d=\"M8 17H18V19H8V17Z\"\n    fill=\"#CFCFCF\"\n  />\n  <path\n    fill-rule=\"evenodd\"\n    clip-rule=\"evenodd\"\n    d=\"M8 21H23V23H8V21Z\"\n    fill=\"#CFCFCF\"\n  />\n  <defs>\n    <linearGradient\n      id=\"paint0_linear\"\n      x1=\"0\"\n      y1=\"0\"\n      x2=\"0\"\n      y2=\"40\"\n      gradientUnits=\"userSpaceOnUse\"\n    >\n      <stop stop-color=\"white\" />\n      <stop offset=\"1\" stop-color=\"#DBDBDB\" />\n    </linearGradient>\n  </defs>\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  data-testid=\"close-no-outline\"\n  *ngIf=\"icon === 'close-no-outline'\"\n  viewBox=\"0 0 24 24\"\n  width=\"24\"\n  height=\"24\"\n  fill=\"none\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n>\n  <path\n    d=\"M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12L19 6.41Z\"\n    fill=\"black\"\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<svg\n  data-testid=\"chat-bubble\"\n  *ngIf=\"icon === 'chat-bubble'\"\n  viewBox=\"0 0 136 136\"\n  fill=\"none\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n>\n  <path\n    d=\"M106 24.5H30C24.775 24.5 20.5 28.775 20.5 34V119.5L39.5 100.5H106C111.225 100.5 115.5 96.225 115.5 91V34C115.5 28.775 111.225 24.5 106 24.5ZM106 91H39.5L30 100.5V34H106V91Z\"\n    fill=\"#B4B7BB\"\n  />\n</svg>\n<svg\n  *ngIf=\"icon === 'attach'\"\n  data-testid=\"attach\"\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  <g clip-path=\"url(#clip0_10878_5)\">\n    <path\n      d=\"M12.9997 6.99993L10.9997 6.99993L10.9997 10.9999L6.99972 10.9999L6.99972 12.9999L10.9997 12.9999L10.9997 16.9999L12.9997 16.9999L12.9997 12.9999L16.9997 12.9999L16.9997 10.9999L12.9997 10.9999L12.9997 6.99993ZM11.9997 1.99992C6.47972 1.99992 1.99972 6.47993 1.99972 11.9999C1.99972 17.5199 6.47972 21.9999 11.9997 21.9999C17.5197 21.9999 21.9997 17.5199 21.9997 11.9999C21.9997 6.47993 17.5197 1.99992 11.9997 1.99992ZM11.9997 19.9999C7.58972 19.9999 3.99972 16.4099 3.99972 11.9999C3.99972 7.58993 7.58972 3.99993 11.9997 3.99993C16.4097 3.99993 19.9997 7.58993 19.9997 11.9999C19.9997 16.4099 16.4097 19.9999 11.9997 19.9999Z\"\n      fill=\"black\"\n    />\n  </g>\n  <defs>\n    <clipPath id=\"clip0_10878_5\">\n      <rect width=\"24\" height=\"24\" fill=\"white\" />\n    </clipPath>\n  </defs>\n</svg>\n<svg\n  *ngIf=\"icon === 'download'\"\n  data-testid=\"download\"\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=\"M19.35 10.04C18.67 6.59 15.64 4 12 4C9.11 4 6.6 5.64 5.35 8.04C2.34 8.36 0 10.91 0 14C0 17.31 2.69 20 6 20H19C21.76 20 24 17.76 24 15C24 12.36 21.95 10.22 19.35 10.04ZM19 18H6C3.79 18 2 16.21 2 14C2 11.95 3.53 10.24 5.56 10.03L6.63 9.92L7.13 8.97C8.08 7.14 9.94 6 12 6C14.62 6 16.88 7.86 17.39 10.43L17.69 11.93L19.22 12.04C20.78 12.14 22 13.45 22 15C22 16.65 20.65 18 19 18ZM13.45 10H10.55V13H8L12 17L16 13H13.45V10Z\"\n    fill=\"black\"\n  />\n</svg>\n<svg\n  *ngIf=\"icon === 'error'\"\n  data-testid=\"error\"\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    id=\"background\"\n    d=\"M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2Z\"\n    fill=\"black\"\n  />\n  <path d=\"M13 17H11V15H13V17ZM13 13H11V7H13V13Z\" fill=\"white\" />\n</svg>\n", directives: [{ type: i5__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6__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  data-testid=\"delivered-icon\"\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=\"M8.9999 16.2L4.7999 12L3.3999 13.4L8.9999 19L20.9999 6.99998L19.5999 5.59998L8.9999 16.2Z\"\n    fill=\"black\"\n  />\n</svg>\n\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  width=\"24\"\n  height=\"24\"\n  viewBox=\"0 0 24 24\"\n  fill=\"none\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n>\n  <title translate>streamChat.Send</title>\n  <path\n    d=\"M4.00952 22L24 12L4.00952 2L4 9.77778L18.2857 12L4 14.2222L4.00952 22Z\"\n    fill=\"black\"\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  *ngIf=\"icon === 'retry'\"\n  data-testid=\"retry\"\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=\"M17.6449 6.35C16.1949 4.9 14.2049 4 11.9949 4C7.57488 4 4.00488 7.58 4.00488 12C4.00488 16.42 7.57488 20 11.9949 20C15.7249 20 18.8349 17.45 19.7249 14H17.6449C16.8249 16.33 14.6049 18 11.9949 18C8.68488 18 5.99488 15.31 5.99488 12C5.99488 8.69 8.68488 6 11.9949 6C13.6549 6 15.1349 6.69 16.2149 7.78L12.9949 11H19.9949V4L17.6449 6.35Z\"\n    fill=\"black\"\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  fill=\"none\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n>\n  <rect width=\"28\" height=\"28\" rx=\"14\" fill=\"#72767E\" />\n  <circle cx=\"14\" cy=\"14\" r=\"12\" fill=\"#72767E\" />\n  <path\n    fill-rule=\"evenodd\"\n    clip-rule=\"evenodd\"\n    d=\"M28 14C28 21.732 21.732 28 14 28C6.26801 28 0 21.732 0 14C0 6.26801 6.26801 0 14 0C21.732 0 28 6.26801 28 14ZM26 14C26 20.6274 20.6274 26 14 26C7.37258 26 2 20.6274 2 14C2 7.37258 7.37258 2 14 2C20.6274 2 26 7.37258 26 14ZM19.59 7L21 8.41L15.41 14L21 19.59L19.59 21L14 15.41L8.41 21L7 19.59L12.59 14L7 8.41L8.41 7L14 12.59L19.59 7Z\"\n    fill=\"white\"\n  />\n</svg>\n\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 === 'unspecified-filetype'\"\n  data-testid=\"unspecified-filetype\"\n  width=\"34\"\n  height=\"40\"\n  viewBox=\"0 0 34 40\"\n  fill=\"none\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n>\n  <path\n    d=\"M0 3C0 1.34315 1.34315 0 3 0H23L34 11V37C34 38.6569 32.6569 40 31 40H3C1.34315 40 0 38.6569 0 37V3Z\"\n    fill=\"url(#paint0_linear)\"\n  />\n  <path d=\"M34 11L26 11C24.3431 11 23 9.65685 23 8V0L34 11Z\" fill=\"#DBDBDB\" />\n  <path\n    fill-rule=\"evenodd\"\n    clip-rule=\"evenodd\"\n    d=\"M8 13H23V15H8V13Z\"\n    fill=\"#CFCFCF\"\n  />\n  <path\n    fill-rule=\"evenodd\"\n    clip-rule=\"evenodd\"\n    d=\"M8 17H18V19H8V17Z\"\n    fill=\"#CFCFCF\"\n  />\n  <path\n    fill-rule=\"evenodd\"\n    clip-rule=\"evenodd\"\n    d=\"M8 21H23V23H8V21Z\"\n    fill=\"#CFCFCF\"\n  />\n  <defs>\n    <linearGradient\n      id=\"paint0_linear\"\n      x1=\"0\"\n      y1=\"0\"\n      x2=\"0\"\n      y2=\"40\"\n      gradientUnits=\"userSpaceOnUse\"\n    >\n      <stop stop-color=\"white\" />\n      <stop offset=\"1\" stop-color=\"#DBDBDB\" />\n    </linearGradient>\n  </defs>\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  data-testid=\"close-no-outline\"\n  *ngIf=\"icon === 'close-no-outline'\"\n  viewBox=\"0 0 24 24\"\n  width=\"24\"\n  height=\"24\"\n  fill=\"none\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n>\n  <path\n    d=\"M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12L19 6.41Z\"\n    fill=\"black\"\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<svg\n  data-testid=\"chat-bubble\"\n  *ngIf=\"icon === 'chat-bubble'\"\n  viewBox=\"0 0 136 136\"\n  fill=\"none\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n>\n  <path\n    d=\"M106 24.5H30C24.775 24.5 20.5 28.775 20.5 34V119.5L39.5 100.5H106C111.225 100.5 115.5 96.225 115.5 91V34C115.5 28.775 111.225 24.5 106 24.5ZM106 91H39.5L30 100.5V34H106V91Z\"\n    fill=\"#B4B7BB\"\n  />\n</svg>\n<svg\n  *ngIf=\"icon === 'attach'\"\n  data-testid=\"attach\"\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  <g clip-path=\"url(#clip0_10878_5)\">\n    <path\n      d=\"M12.9997 6.99993L10.9997 6.99993L10.9997 10.9999L6.99972 10.9999L6.99972 12.9999L10.9997 12.9999L10.9997 16.9999L12.9997 16.9999L12.9997 12.9999L16.9997 12.9999L16.9997 10.9999L12.9997 10.9999L12.9997 6.99993ZM11.9997 1.99992C6.47972 1.99992 1.99972 6.47993 1.99972 11.9999C1.99972 17.5199 6.47972 21.9999 11.9997 21.9999C17.5197 21.9999 21.9997 17.5199 21.9997 11.9999C21.9997 6.47993 17.5197 1.99992 11.9997 1.99992ZM11.9997 19.9999C7.58972 19.9999 3.99972 16.4099 3.99972 11.9999C3.99972 7.58993 7.58972 3.99993 11.9997 3.99993C16.4097 3.99993 19.9997 7.58993 19.9997 11.9999C19.9997 16.4099 16.4097 19.9999 11.9997 19.9999Z\"\n      fill=\"black\"\n    />\n  </g>\n  <defs>\n    <clipPath id=\"clip0_10878_5\">\n      <rect width=\"24\" height=\"24\" fill=\"white\" />\n    </clipPath>\n  </defs>\n</svg>\n<svg\n  *ngIf=\"icon === 'download'\"\n  data-testid=\"download\"\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=\"M19.35 10.04C18.67 6.59 15.64 4 12 4C9.11 4 6.6 5.64 5.35 8.04C2.34 8.36 0 10.91 0 14C0 17.31 2.69 20 6 20H19C21.76 20 24 17.76 24 15C24 12.36 21.95 10.22 19.35 10.04ZM19 18H6C3.79 18 2 16.21 2 14C2 11.95 3.53 10.24 5.56 10.03L6.63 9.92L7.13 8.97C8.08 7.14 9.94 6 12 6C14.62 6 16.88 7.86 17.39 10.43L17.69 11.93L19.22 12.04C20.78 12.14 22 13.45 22 15C22 16.65 20.65 18 19 18ZM13.45 10H10.55V13H8L12 17L16 13H13.45V10Z\"\n    fill=\"black\"\n  />\n</svg>\n<svg\n  *ngIf=\"icon === 'error'\"\n  data-testid=\"error\"\n  [attr.width]=\"size ?? 24\"\n  [attr.height]=\"size ?? 24\"\n  viewBox=\"0 0 24 24\"\n  fill=\"none\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n>\n  <path\n    id=\"background\"\n    d=\"M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2Z\"\n    fill=\"var(--str-chat__message-error-message-color)\"\n  />\n  <path d=\"M13 17H11V15H13V17ZM13 13H11V7H13V13Z\" fill=\"white\" />\n</svg>\n<svg\n  *ngIf=\"icon === 'play'\"\n  fill=\"none\"\n  viewBox=\"0 0 12 14\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n>\n  <path d=\"M0.5 0V14L11.5 7L0.5 0Z\" fill=\"#080707\" />\n</svg>\n<svg\n  *ngIf=\"icon === 'pause'\"\n  fill=\"none\"\n  viewBox=\"0 0 12 14\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n>\n  <path d=\"M0 14H4V0H0V14ZM8 0V14H12V0H8Z\" fill=\"#080707\" />\n</svg>\n\n<svg\n  *ngIf=\"icon === 'audio-file'\"\n  class=\"rfu-file-audio\"\n  fill=\"none\"\n  [attr.height]=\"size || 20\"\n  [attr.width]=\"size || 20\"\n  viewBox=\"0 0 34 40\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n>\n  <path\n    clip-rule=\"evenodd\"\n    d=\"M17.7168 33.172C18.2348 33.172 18.4238 33.655 18.4238 34.18C18.4238 34.642 18.2978 35.195 17.7168 35.195C17.1708 35.195 16.9888 34.642 16.9888 34.145C16.9888 33.683 17.1708 33.172 17.7168 33.172ZM19.5718 31.002H18.3818V32.7589H18.3678C18.1228 32.43 17.7798 32.262 17.3318 32.262C16.3028 32.262 15.7988 33.158 15.7988 34.103C15.7988 35.125 16.2818 36.1049 17.4228 36.1049C17.8428 36.1049 18.1928 35.923 18.4238 35.58H18.4378V36H19.5718V31.002ZM12.7095 34.1872C12.7095 33.7252 12.8775 33.1722 13.4305 33.1722C13.9835 33.1722 14.1585 33.7252 14.1585 34.1872C14.1585 34.6492 13.9835 35.1952 13.4305 35.1952C12.8775 35.1952 12.7095 34.6492 12.7095 34.1872ZM11.5195 34.1872C11.5195 35.2792 12.3035 36.1052 13.4305 36.1052C14.5575 36.1052 15.3485 35.2792 15.3485 34.1872C15.3485 33.0952 14.5575 32.2622 13.4305 32.2622C12.3035 32.2622 11.5195 33.0952 11.5195 34.1872ZM21.839 32.3671H22.574V33.1371H21.839V34.7891C21.839 35.0761 22.007 35.1391 22.266 35.1391C22.3142 35.1391 22.364 35.1357 22.4147 35.1323C22.4672 35.1287 22.5206 35.1251 22.574 35.1251V36.0001C22.481 36.0031 22.388 36.0099 22.295 36.0168C22.171 36.0259 22.047 36.0351 21.923 36.0351C20.908 36.0351 20.649 35.7411 20.649 34.7541V33.1371H20.047V32.3671H20.649V31.2681H21.839V32.3671Z\"\n    fill=\"white\"\n    fill-rule=\"evenodd\"\n  ></path>\n  <path\n    d=\"M0 28H34V37C34 38.6569 32.6569 40 31 40H3C1.34315 40 0 38.6569 0 37V28Z\"\n    fill=\"#2727B0\"\n  ></path>\n  <path d=\"M0 3C0 1.34315 1.34315 0 3 0H23L34 11V28H0V3Z\" fill=\"#F5F5F5\"></path>\n  <path\n    d=\"M34 11L26 11C24.3431 11 23 9.65685 23 8V0L34 11Z\"\n    fill=\"#DBDBDB\"\n  ></path>\n  <path\n    clip-rule=\"evenodd\"\n    d=\"M8.87912 21.941H12.298L16.9521 24.7493C17.0307 24.8138 17.1293 24.849 17.2311 24.849C17.4738 24.8488 17.6705 24.6519 17.6703 24.4092V12.4399C17.6704 12.3381 17.6352 12.2396 17.5707 12.1609C17.4168 11.9732 17.1398 11.9457 16.9521 12.0996L12.298 14.908H8.87912C8.3936 14.908 8 15.3016 8 15.7871V21.0619C8 21.5474 8.3936 21.941 8.87912 21.941ZM12.9258 16.6664L15.9122 15.2224V21.6268L12.9258 20.1829H9.7583V16.6664H12.9258ZM19.8511 16.3517C19.474 16.4092 19.2397 16.6637 19.3283 16.9191L19.3262 16.92C19.5295 17.4995 19.6305 18.098 19.6284 18.6953C19.6305 19.2975 19.5237 19.9014 19.3196 20.4909C19.229 20.7462 19.4682 20.9996 19.8474 21.06C19.9008 21.0683 19.9542 21.072 20.0076 21.072C20.3259 21.072 20.6156 20.9234 20.6922 20.7057C20.9194 20.0451 21.0337 19.37 21.0374 18.6953C21.0349 18.0251 20.9211 17.3575 20.6955 16.7035C20.6053 16.4477 20.229 16.2908 19.8511 16.3517ZM22.1605 14.6028C22.5252 14.5163 22.9259 14.6454 23.055 14.8938C23.6891 16.1157 24 17.4042 24 18.6923C24.0004 19.9895 23.6796 21.2839 23.0521 22.5153C22.9503 22.7123 22.6763 22.8344 22.3828 22.8344C22.3071 22.8344 22.2301 22.8261 22.1543 22.8092C21.7863 22.7251 21.5914 22.4536 21.7185 22.2077C22.2988 21.0761 22.5922 19.8836 22.5931 18.6919C22.5931 17.5056 22.3054 16.3222 21.7276 15.2025C21.6001 14.9563 21.795 14.686 22.1605 14.6028Z\"\n    fill=\"#2727B0\"\n    fill-rule=\"evenodd\"\n  ></path>\n</svg>\n", directives: [{ type: i8__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6__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: [{
@@ -3735,7 +3740,7 @@
         return IconPlaceholderComponent;
     }());
     IconPlaceholderComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: IconPlaceholderComponent, deps: [{ token: CustomTemplatesService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    IconPlaceholderComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: IconPlaceholderComponent, selector: "stream-icon-placeholder", inputs: { icon: "icon", size: "size" }, usesOnChanges: true, ngImport: i0__namespace, template: "<ng-template #defaultIcon let-icon=\"icon\" let-size=\"size\">\n  <stream-icon [icon]=\"icon\" [size]=\"size\"></stream-icon>\n</ng-template>\n<ng-container\n  *ngTemplateOutlet=\"\n    (customTemplatesService.iconTemplate$ | async) || defaultIcon;\n    context: iconContext\n  \"\n></ng-container>\n", components: [{ type: IconComponent, selector: "stream-icon", inputs: ["icon", "size"] }], directives: [{ type: i5__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "async": i5__namespace.AsyncPipe } });
+    IconPlaceholderComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: IconPlaceholderComponent, selector: "stream-icon-placeholder", inputs: { icon: "icon", size: "size" }, usesOnChanges: true, ngImport: i0__namespace, template: "<ng-template #defaultIcon let-icon=\"icon\" let-size=\"size\">\n  <stream-icon [icon]=\"icon\" [size]=\"size\"></stream-icon>\n</ng-template>\n<ng-container\n  *ngTemplateOutlet=\"\n    (customTemplatesService.iconTemplate$ | async) || defaultIcon;\n    context: iconContext\n  \"\n></ng-container>\n", components: [{ type: IconComponent, selector: "stream-icon", inputs: ["icon", "size"] }], directives: [{ type: i8__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "async": i8__namespace.AsyncPipe } });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: IconPlaceholderComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -3767,7 +3772,7 @@
         return LoadingIndicatorComponent;
     }());
     LoadingIndicatorComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: LoadingIndicatorComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    LoadingIndicatorComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: LoadingIndicatorComponent, selector: "stream-loading-indicator", inputs: { size: "size", color: "color" }, ngImport: i0__namespace, template: "<div class=\"str-chat__loading-indicator\">\n  <svg\n    [attr.height]=\"size\"\n    viewBox=\"0 0 30 30\"\n    [attr.width]=\"size\"\n    data-testid=\"loading-indicator\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <defs>\n      <linearGradient\n        id=\"{{ linearGradientId }}\"\n        x1=\"50%\"\n        x2=\"50%\"\n        y1=\"0%\"\n        y2=\"100%\"\n      >\n        <stop offset=\"0%\" stop-color=\"#FFF\" stop-opacity=\"0\" />\n        <stop\n          data-testid=\"stop-color\"\n          offset=\"100%\"\n          [attr.stop-color]=\"color\"\n          stop-opacity=\"1\"\n          [ngStyle]=\"{ stopColor: color }\"\n        />\n      </linearGradient>\n    </defs>\n    <path\n      d=\"M2.518 23.321l1.664-1.11A12.988 12.988 0 0 0 15 28c7.18 0 13-5.82 13-13S22.18 2 15 2V0c8.284 0 15 6.716 15 15 0 8.284-6.716 15-15 15-5.206 0-9.792-2.652-12.482-6.679z\"\n      [attr.fill]=\"'url(#' + linearGradientId + ')'\"\n      fillRule=\"evenodd\"\n    />\n  </svg>\n</div>\n", directives: [{ type: i5__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+    LoadingIndicatorComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: LoadingIndicatorComponent, selector: "stream-loading-indicator", inputs: { size: "size", color: "color" }, ngImport: i0__namespace, template: "<div class=\"str-chat__loading-indicator\">\n  <svg\n    [attr.height]=\"size\"\n    viewBox=\"0 0 30 30\"\n    [attr.width]=\"size\"\n    data-testid=\"loading-indicator\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <defs>\n      <linearGradient\n        id=\"{{ linearGradientId }}\"\n        x1=\"50%\"\n        x2=\"50%\"\n        y1=\"0%\"\n        y2=\"100%\"\n      >\n        <stop offset=\"0%\" stop-color=\"#FFF\" stop-opacity=\"0\" />\n        <stop\n          data-testid=\"stop-color\"\n          offset=\"100%\"\n          [attr.stop-color]=\"color\"\n          stop-opacity=\"1\"\n          [ngStyle]=\"{ stopColor: color }\"\n        />\n      </linearGradient>\n    </defs>\n    <path\n      d=\"M2.518 23.321l1.664-1.11A12.988 12.988 0 0 0 15 28c7.18 0 13-5.82 13-13S22.18 2 15 2V0c8.284 0 15 6.716 15 15 0 8.284-6.716 15-15 15-5.206 0-9.792-2.652-12.482-6.679z\"\n      [attr.fill]=\"'url(#' + linearGradientId + ')'\"\n      fillRule=\"evenodd\"\n    />\n  </svg>\n</div>\n", directives: [{ type: i8__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: LoadingIndicatorComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -3805,7 +3810,7 @@
         return LoadingIndicatorPlaceholderComponent;
     }());
     LoadingIndicatorPlaceholderComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: LoadingIndicatorPlaceholderComponent, deps: [{ token: CustomTemplatesService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    LoadingIndicatorPlaceholderComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: LoadingIndicatorPlaceholderComponent, selector: "stream-loading-indicator-placeholder", inputs: { size: "size", color: "color" }, ngImport: i0__namespace, template: "<ng-template #defaultLoadingIndicator let-size=\"size\" let-color=\"color\">\n  <stream-loading-indicator\n    [size]=\"size\"\n    [color]=\"color\"\n  ></stream-loading-indicator>\n</ng-template>\n<ng-container\n  *ngTemplateOutlet=\"\n    (customTemplatesService.loadingIndicatorTemplate$ | async) ||\n      defaultLoadingIndicator;\n    context: getLoadingIndicatorContext()\n  \"\n></ng-container>\n", components: [{ type: LoadingIndicatorComponent, selector: "stream-loading-indicator", inputs: ["size", "color"] }], directives: [{ type: i5__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "async": i5__namespace.AsyncPipe } });
+    LoadingIndicatorPlaceholderComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: LoadingIndicatorPlaceholderComponent, selector: "stream-loading-indicator-placeholder", inputs: { size: "size", color: "color" }, ngImport: i0__namespace, template: "<ng-template #defaultLoadingIndicator let-size=\"size\" let-color=\"color\">\n  <stream-loading-indicator\n    [size]=\"size\"\n    [color]=\"color\"\n  ></stream-loading-indicator>\n</ng-template>\n<ng-container\n  *ngTemplateOutlet=\"\n    (customTemplatesService.loadingIndicatorTemplate$ | async) ||\n      defaultLoadingIndicator;\n    context: getLoadingIndicatorContext()\n  \"\n></ng-container>\n", components: [{ type: LoadingIndicatorComponent, selector: "stream-loading-indicator", inputs: ["size", "color"] }], directives: [{ type: i8__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "async": i8__namespace.AsyncPipe } });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: LoadingIndicatorPlaceholderComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -4055,7 +4060,7 @@
         return MessageActionsBoxComponent;
     }());
     MessageActionsBoxComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: MessageActionsBoxComponent, deps: [{ token: CustomTemplatesService }, { token: MessageActionsService }, { token: i0__namespace.ChangeDetectorRef }], 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", customActions: "customActions" }, outputs: { displayedActionsCount: "displayedActionsCount", isEditing: "isEditing" }, usesOnChanges: true, ngImport: i0__namespace, template: "<div\n  #actionBox\n  data-testid=\"action-box\"\n  class=\"str-chat__message-actions-box str-chat__message-actions-box-angular\"\n  [class.str-chat__message-actions-box--open]=\"true\"\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          (customTemplatesService.messageActionsBoxItemTemplate$ | async) ||\n            defaultMessageActionItem;\n          context: getMessageActionTemplateContext(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\n    class=\"str-chat__message-actions-list-item-button\"\n    [attr.data-testid]=\"actionName + '-action'\"\n    (click)=\"actionHandler(message, isMine)\"\n  >\n    <li class=\"str-chat__message-actions-list-item\">\n      {{ getActionLabel(actionLabelOrTranslationKey) | translate }}\n    </li>\n  </button>\n</ng-template>\n", directives: [{ type: i5__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "async": i5__namespace.AsyncPipe, "translate": i6__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", customActions: "customActions" }, outputs: { displayedActionsCount: "displayedActionsCount", isEditing: "isEditing" }, usesOnChanges: true, ngImport: i0__namespace, template: "<div\n  #actionBox\n  data-testid=\"action-box\"\n  class=\"str-chat__message-actions-box str-chat__message-actions-box-angular\"\n  [class.str-chat__message-actions-box--open]=\"true\"\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          (customTemplatesService.messageActionsBoxItemTemplate$ | async) ||\n            defaultMessageActionItem;\n          context: getMessageActionTemplateContext(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\n    class=\"str-chat__message-actions-list-item-button\"\n    [attr.data-testid]=\"actionName + '-action'\"\n    (click)=\"actionHandler(message, isMine)\"\n  >\n    <li class=\"str-chat__message-actions-list-item\">\n      {{ getActionLabel(actionLabelOrTranslationKey) | translate }}\n    </li>\n  </button>\n</ng-template>\n", directives: [{ type: i8__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i8__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "async": i8__namespace.AsyncPipe, "translate": i6__namespace.TranslatePipe } });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: MessageActionsBoxComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -4133,7 +4138,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  >\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: i5__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5__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  >\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: i8__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8__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: [{
@@ -4301,6 +4306,326 @@
                     }]
             }], ctorParameters: function () { return []; } });
 
+    /**
+     * This component can be used to visualize the wave bar of a voice recording
+     */
+    var VoiceRecordingWavebarComponent = /** @class */ (function () {
+        function VoiceRecordingWavebarComponent(ngZone, cdRef) {
+            var _this = this;
+            this.ngZone = ngZone;
+            this.cdRef = cdRef;
+            /**
+             * The waveform data to visualize
+             */
+            this.waveFormData = [];
+            this.resampledWaveFormData = [];
+            this.progress = 0;
+            this.isDragging = false;
+            this.sampleSize = 40;
+            this.isViewInited = false;
+            this.upsample = function () {
+                if (_this.sampleSize === _this.waveFormData.length)
+                    return _this.waveFormData;
+                // eslint-disable-next-line  prefer-const
+                var _f = __read(_this.divMod(_this.sampleSize, _this.waveFormData.length), 2), bucketSize = _f[0], remainder = _f[1];
+                var result = [];
+                for (var i = 0; i < _this.waveFormData.length; i++) {
+                    var extra = remainder && remainder-- ? 1 : 0;
+                    result.push.apply(result, __spreadArray([], __read(Array(bucketSize + extra).fill(_this.waveFormData[i]))));
+                }
+                return result;
+            };
+            this.getNextBucketMean = function (data, currentBucketIndex, bucketSize) {
+                var nextBucketStartIndex = Math.floor(currentBucketIndex * bucketSize) + 1;
+                var nextNextBucketStartIndex = Math.floor((currentBucketIndex + 1) * bucketSize) + 1;
+                nextNextBucketStartIndex =
+                    nextNextBucketStartIndex < data.length
+                        ? nextNextBucketStartIndex
+                        : data.length;
+                return _this.mean(data.slice(nextBucketStartIndex, nextNextBucketStartIndex));
+            };
+            this.mean = function (values) { return values.reduce(function (acc, value) { return acc + value; }, 0) / values.length; };
+            this.triangleAreaHeron = function (a, b, c) {
+                var s = (a + b + c) / 2;
+                return Math.sqrt(s * (s - a) * (s - b) * (s - c));
+            };
+            this.triangleBase = function (a, b) { return Math.sqrt(Math.pow(a, 2) + Math.pow(b, 2)); };
+            this.divMod = function (num, divisor) {
+                return [Math.floor(num / divisor), num % divisor];
+            };
+        }
+        VoiceRecordingWavebarComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            var _a;
+            this.containerSizeChanged();
+            if ((_a = this.container) === null || _a === void 0 ? void 0 : _a.nativeElement) {
+                this.ngZone.runOutsideAngular(function () {
+                    new ResizeObserver(function () {
+                        _this.containerSizeChanged();
+                    }).observe(_this.container.nativeElement);
+                });
+            }
+        };
+        VoiceRecordingWavebarComponent.prototype.ngOnChanges = function (changes) {
+            var _this = this;
+            if (changes.waveFormData) {
+                this.resampledWaveFormData =
+                    this.waveFormData.length > this.sampleSize
+                        ? this.downsample()
+                        : this.upsample();
+            }
+            if (changes.audioElement) {
+                this.ngZone.runOutsideAngular(function () {
+                    var _a;
+                    (_a = _this.audioElement) === null || _a === void 0 ? void 0 : _a.addEventListener('timeupdate', function () {
+                        var _a;
+                        var progress = (((_a = _this.audioElement) === null || _a === void 0 ? void 0 : _a.currentTime) || 0) / (_this.duration || 0) || 0;
+                        if (Math.abs(progress - _this.progress) >= 0.02) {
+                            _this.ngZone.run(function () {
+                                _this.progress = progress;
+                                _this.cdRef.detectChanges();
+                            });
+                        }
+                    });
+                });
+            }
+        };
+        VoiceRecordingWavebarComponent.prototype.ngAfterViewInit = function () {
+            this.isViewInited = true;
+        };
+        VoiceRecordingWavebarComponent.prototype.seek = function (event) {
+            var _a, _b, _c, _d, _e;
+            var containerWidth = ((_b = (_a = this.container) === null || _a === void 0 ? void 0 : _a.nativeElement) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect().width) || 0;
+            var containerStart = ((_e = (_d = (_c = this.container) === null || _c === void 0 ? void 0 : _c.nativeElement) === null || _d === void 0 ? void 0 : _d.getBoundingClientRect()) === null || _e === void 0 ? void 0 : _e.x) || 0;
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+            var progress = (event.x - containerStart) / containerWidth;
+            if (!isNaN(progress) && this.audioElement) {
+                var duration = this.duration || 0;
+                var time = duration * progress;
+                this.audioElement.currentTime = time;
+            }
+        };
+        VoiceRecordingWavebarComponent.prototype.trackByIndex = function (index) {
+            return index;
+        };
+        VoiceRecordingWavebarComponent.prototype.containerSizeChanged = function () {
+            var _this = this;
+            var _a;
+            if (!((_a = this.container) === null || _a === void 0 ? void 0 : _a.nativeElement)) {
+                return;
+            }
+            var containerWidth = this.container.nativeElement.clientWidth;
+            if (containerWidth === 0) {
+                return;
+            }
+            var barWidth = +getComputedStyle(this.container.nativeElement)
+                .getPropertyValue('--str-chat__voice-recording-amplitude-bar-width')
+                .replace('px', '');
+            var barGap = +getComputedStyle(this.container.nativeElement)
+                .getPropertyValue('--str-chat__voice-recording-amplitude-bar-gap-width')
+                .replace('px', '');
+            if (!isNaN(barWidth) && !isNaN(barGap)) {
+                var sampleSize_1 = Math.floor(containerWidth / (barWidth + barGap));
+                if (sampleSize_1 !== this.sampleSize &&
+                    !isNaN(sampleSize_1) &&
+                    sampleSize_1 !== Infinity) {
+                    this.ngZone.run(function () {
+                        _this.sampleSize = sampleSize_1;
+                        _this.resampledWaveFormData =
+                            _this.waveFormData.length > _this.sampleSize
+                                ? _this.downsample()
+                                : _this.upsample();
+                        if (_this.isViewInited) {
+                            _this.cdRef.detectChanges();
+                        }
+                    });
+                }
+            }
+        };
+        VoiceRecordingWavebarComponent.prototype.downsample = function () {
+            if (this.waveFormData.length <= this.sampleSize) {
+                return this.waveFormData;
+            }
+            if (this.sampleSize === 1)
+                return [this.mean(this.waveFormData)];
+            var result = [];
+            // bucket size adjusted due to the fact that the first and the last item in the original data array is kept in target output
+            var bucketSize = (this.waveFormData.length - 2) / (this.sampleSize - 2);
+            var lastSelectedPointIndex = 0;
+            result.push(this.waveFormData[lastSelectedPointIndex]); // Always add the first point
+            var maxAreaPoint, maxArea, triangleArea;
+            for (var bucketIndex = 1; bucketIndex < this.sampleSize - 1; bucketIndex++) {
+                var previousBucketRefPoint = this.waveFormData[lastSelectedPointIndex];
+                var nextBucketMean = this.getNextBucketMean(this.waveFormData, bucketIndex, bucketSize);
+                var currentBucketStartIndex = Math.floor((bucketIndex - 1) * bucketSize) + 1;
+                var nextBucketStartIndex = Math.floor(bucketIndex * bucketSize) + 1;
+                var countUnitsBetweenAtoC = 1 + nextBucketStartIndex - currentBucketStartIndex;
+                maxArea = triangleArea = -1;
+                for (var currentPointIndex = currentBucketStartIndex; currentPointIndex < nextBucketStartIndex; currentPointIndex++) {
+                    var countUnitsBetweenAtoB = Math.abs(currentPointIndex - currentBucketStartIndex) + 1;
+                    var countUnitsBetweenBtoC = countUnitsBetweenAtoC - countUnitsBetweenAtoB;
+                    var currentPointValue = this.waveFormData[currentPointIndex];
+                    triangleArea = this.triangleAreaHeron(this.triangleBase(Math.abs(previousBucketRefPoint - currentPointValue), countUnitsBetweenAtoB), this.triangleBase(Math.abs(currentPointValue - nextBucketMean), countUnitsBetweenBtoC), this.triangleBase(Math.abs(previousBucketRefPoint - nextBucketMean), countUnitsBetweenAtoC));
+                    if (triangleArea > maxArea) {
+                        maxArea = triangleArea;
+                        maxAreaPoint = this.waveFormData[currentPointIndex];
+                        lastSelectedPointIndex = currentPointIndex;
+                    }
+                }
+                if (typeof maxAreaPoint !== 'undefined')
+                    result.push(maxAreaPoint);
+            }
+            result.push(this.waveFormData[this.waveFormData.length - 1]); // Always add the last point
+            return result;
+        };
+        return VoiceRecordingWavebarComponent;
+    }());
+    VoiceRecordingWavebarComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: VoiceRecordingWavebarComponent, deps: [{ token: i0__namespace.NgZone }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    VoiceRecordingWavebarComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: VoiceRecordingWavebarComponent, selector: "stream-voice-recording-wavebar", inputs: { audioElement: "audioElement", waveFormData: "waveFormData", duration: "duration" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0__namespace, template: "<div\n  class=\"str-chat__wave-progress-bar__track\"\n  #container\n  data-testid=\"wave-progress-bar-track\"\n  (mousedown)=\"isDragging = true\"\n  (mouseup)=\"isDragging = false\"\n  (mouseleave)=\"isDragging = false\"\n  (mousemove)=\"isDragging ? seek($event) : null\"\n  (click)=\"seek($event)\"\n  (keyup.enter)=\"seek($event)\"\n  role=\"progressbar\"\n>\n  <div\n    *ngFor=\"\n      let dataPoint of resampledWaveFormData;\n      let i = index;\n      trackBy: trackByIndex\n    \"\n    class=\"str-chat__wave-progress-bar__amplitude-bar\"\n    [class.str-chat__wave-progress-bar__amplitude-bar--active]=\"\n      progress > i / resampledWaveFormData.length\n    \"\n    [style.--str-chat__wave-progress-bar__amplitude-bar-height]=\"\n      dataPoint ? dataPoint * 100 + '%' : '0%'\n    \"\n  ></div>\n  <div\n    class=\"str-chat__wave-progress-bar__progress-indicator\"\n    data-testid=\"wave-progress-bar-progress-indicator\"\n    [ngStyle]=\"{ 'inset-inline-start': progress * 100 + '%' }\"\n  ></div>\n</div>\n", directives: [{ type: i8__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i8__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: VoiceRecordingWavebarComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'stream-voice-recording-wavebar',
+                        templateUrl: './voice-recording-wavebar.component.html',
+                        styles: [],
+                    }]
+            }], ctorParameters: function () { return [{ type: i0__namespace.NgZone }, { type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { audioElement: [{
+                    type: i0.Input
+                }], waveFormData: [{
+                    type: i0.Input
+                }], duration: [{
+                    type: i0.Input
+                }], container: [{
+                    type: i0.ViewChild,
+                    args: ['container', { static: true }]
+                }] } });
+
+    /**
+     * This component can be used to display an attachment with type `voiceRecording`. The component allows playing the attachment inside the browser.
+     */
+    var VoiceRecordingComponent = /** @class */ (function () {
+        function VoiceRecordingComponent(ngZone, cdRef) {
+            this.ngZone = ngZone;
+            this.cdRef = cdRef;
+            this.fileSize = '';
+            this.durationFormatted = '';
+            this.secondsElapsed = 0;
+            this.isError = false;
+            this.secondsElapsedFormatted = this.getFormattedDuration(this.secondsElapsed);
+        }
+        VoiceRecordingComponent.prototype.ngOnChanges = function (changes) {
+            var _a;
+            if (changes.attachment) {
+                this.fileSize = this.getFileSize();
+                this.durationFormatted = this.getFormattedDuration((_a = this.attachment) === null || _a === void 0 ? void 0 : _a.duration);
+            }
+        };
+        VoiceRecordingComponent.prototype.ngAfterViewInit = function () {
+            var _this = this;
+            // timeupdate fired frequntly so we optimize change detections
+            this.ngZone.runOutsideAngular(function () {
+                var _a;
+                (_a = _this.audioElement) === null || _a === void 0 ? void 0 : _a.nativeElement.addEventListener('timeupdate', function () {
+                    var _a, _b, _c, _d, _e;
+                    var secondsElapsed = ((_b = (_a = _this.audioElement) === null || _a === void 0 ? void 0 : _a.nativeElement) === null || _b === void 0 ? void 0 : _b.ended)
+                        ? ((_c = _this.attachment) === null || _c === void 0 ? void 0 : _c.duration) || 0
+                        : Math.round(((_e = (_d = _this.audioElement) === null || _d === void 0 ? void 0 : _d.nativeElement) === null || _e === void 0 ? void 0 : _e.currentTime) || 0);
+                    if (_this.secondsElapsed !== secondsElapsed) {
+                        _this.ngZone.run(function () {
+                            _this.secondsElapsed = secondsElapsed;
+                            _this.secondsElapsedFormatted = _this.getFormattedDuration(_this.secondsElapsed);
+                            _this.cdRef.detectChanges();
+                        });
+                    }
+                });
+            });
+        };
+        VoiceRecordingComponent.prototype.togglePlay = function () {
+            var _a, _b;
+            return __awaiter(this, void 0, void 0, function () {
+                var _f, e_1;
+                return __generator(this, function (_g) {
+                    switch (_g.label) {
+                        case 0:
+                            if (!this.audioElement || !((_a = this.attachment) === null || _a === void 0 ? void 0 : _a.asset_url)) {
+                                return [2 /*return*/];
+                            }
+                            _g.label = 1;
+                        case 1:
+                            _g.trys.push([1, 5, , 6]);
+                            if (!((_b = this.audioElement) === null || _b === void 0 ? void 0 : _b.nativeElement.paused)) return [3 /*break*/, 3];
+                            return [4 /*yield*/, this.audioElement.nativeElement.play()];
+                        case 2:
+                            _f = _g.sent();
+                            return [3 /*break*/, 4];
+                        case 3:
+                            _f = this.audioElement.nativeElement.pause();
+                            _g.label = 4;
+                        case 4:
+                            _f;
+                            this.isError = false;
+                            return [3 /*break*/, 6];
+                        case 5:
+                            e_1 = _g.sent();
+                            this.isError = true;
+                            return [3 /*break*/, 6];
+                        case 6: return [2 /*return*/];
+                    }
+                });
+            });
+        };
+        VoiceRecordingComponent.prototype.setPlaybackRate = function () {
+            var _a, _b, _c;
+            if (!((_a = this.audioElement) === null || _a === void 0 ? void 0 : _a.nativeElement)) {
+                return;
+            }
+            var playbackRate = ((_c = (_b = this.audioElement) === null || _b === void 0 ? void 0 : _b.nativeElement) === null || _c === void 0 ? void 0 : _c.playbackRate) + 0.5;
+            if (playbackRate > 2) {
+                playbackRate = 1;
+            }
+            this.audioElement.nativeElement.playbackRate = playbackRate;
+        };
+        VoiceRecordingComponent.prototype.getFormattedDuration = function (duration) {
+            if (duration === undefined || duration <= 0)
+                return '00:00';
+            var _f = __read(this.divMod(duration, 3600), 2), hours = _f[0], hoursLeftover = _f[1];
+            var _g = __read(this.divMod(hoursLeftover, 60), 2), minutes = _g[0], seconds = _g[1];
+            var roundedSeconds = Math.ceil(seconds);
+            var prependHrsZero = hours.toString().length === 1 ? '0' : '';
+            var prependMinZero = minutes.toString().length === 1 ? '0' : '';
+            var prependSecZero = roundedSeconds.toString().length === 1 ? '0' : '';
+            var minSec = "" + prependMinZero + minutes + ":" + prependSecZero + roundedSeconds;
+            return hours ? "" + prependHrsZero + hours + ":" + minSec : minSec;
+        };
+        VoiceRecordingComponent.prototype.getFileSize = function () {
+            var _a, _b;
+            if (((_a = this.attachment) === null || _a === void 0 ? void 0 : _a.file_size) === undefined ||
+                ((_b = this.attachment) === null || _b === void 0 ? void 0 : _b.file_size) === null) {
+                return '';
+            }
+            return prettybytes__default['default'](Number(this.attachment.file_size || 0));
+        };
+        VoiceRecordingComponent.prototype.divMod = function (num, divisor) {
+            return [Math.floor(num / divisor), num % divisor];
+        };
+        return VoiceRecordingComponent;
+    }());
+    VoiceRecordingComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: VoiceRecordingComponent, deps: [{ token: i0__namespace.NgZone }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    VoiceRecordingComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: VoiceRecordingComponent, selector: "stream-voice-recording", inputs: { attachment: "attachment" }, viewQueries: [{ propertyName: "audioElement", first: true, predicate: ["audioElement"], descendants: true }], usesOnChanges: true, ngImport: i0__namespace, template: "<div\n  class=\"str-chat__message-attachment__voice-recording-widget\"\n  [class.str-chat__message-attachment__voice-recording-widget--error]=\"isError\"\n  data-testid=\"voice-recording-widget\"\n>\n  <!-- Empty event handlers to trigger change detection -->\n  <audio\n    #audioElement\n    (play)=\"(null)\"\n    (pause)=\"(null)\"\n    (ended)=\"(null)\"\n    (error)=\"isError = true\"\n    (abort)=\"isError = true\"\n  >\n    <source\n      data-testid=\"audio-source\"\n      [src]=\"attachment?.asset_url\"\n      [type]=\"attachment?.mime_type\"\n    />\n  </audio>\n  <button\n    class=\"str-chat__message-attachment-audio-widget--play-button\"\n    data-testid=\"play-button\"\n    (click)=\"togglePlay()\"\n  >\n    <stream-icon-placeholder\n      [icon]=\"audioElement?.paused ? 'play' : 'pause'\"\n    ></stream-icon-placeholder>\n  </button>\n  <div class=\"str-chat__message-attachment__voice-recording-widget__metadata\">\n    <div class=\"str-chat__message-attachment-voice-recording-widget--first-row\">\n      <div\n        class=\"str-chat__message-attachment__voice-recording-widget__title\"\n        data-testid=\"voice-recording-title\"\n        [title]=\"attachment?.title\"\n      >\n        {{ attachment?.title }}\n      </div>\n    </div>\n\n    <ng-container *ngIf=\"isError; else state\">\n      <div\n        class=\"\n          str-chat__message-attachment__voice-recording-widget__error-message\n        \"\n      >\n        <stream-icon-placeholder\n          [size]=\"20\"\n          icon=\"error\"\n        ></stream-icon-placeholder>\n        <span data-testid=\"error-message\">{{\n          \"streamChat.Error playing audio\" | translate\n        }}</span>\n      </div>\n    </ng-container>\n    <ng-template #state>\n      <div\n        class=\"\n          str-chat__message-attachment__voice-recording-widget__audio-state\n        \"\n      >\n        <div\n          class=\"str-chat__message-attachment__voice-recording-widget__timer\"\n        >\n          <span\n            data-testid=\"duration\"\n            *ngIf=\"!!attachment?.duration; else fileSizeTemplate\"\n          >\n            {{\n              secondsElapsed > 0 || !audioElement.paused\n                ? secondsElapsedFormatted\n                : durationFormatted\n            }}</span\n          >\n          <ng-template #fileSizeTemplate>\n            <span\n              class=\"str-chat__message-attachment-file--item-size\"\n              data-testid=\"file-size-indicator\"\n            >\n              {{ fileSize }}\n            </span>\n          </ng-template>\n        </div>\n        <stream-voice-recording-wavebar\n          *ngIf=\"attachment?.waveform_data && attachment?.duration\"\n          [waveFormData]=\"attachment?.waveform_data || []\"\n          [duration]=\"attachment?.duration\"\n          [audioElement]=\"audioElement\"\n        ></stream-voice-recording-wavebar>\n      </div>\n    </ng-template>\n  </div>\n  <div\n    class=\"str-chat__message-attachment__voice-recording-widget__right-section\"\n  >\n    <button\n      *ngIf=\"!audioElement?.paused; else fileIcon\"\n      class=\"str-chat__message_attachment__playback-rate-button\"\n      data-testid=\"playback-rate-button\"\n      (click)=\"setPlaybackRate()\"\n    >\n      {{ audioElement?.playbackRate | number: \"1.1-1\" }}x\n    </button>\n    <ng-template #fileIcon>\n      <stream-icon-placeholder\n        icon=\"audio-file\"\n        [size]=\"40\"\n      ></stream-icon-placeholder>\n    </ng-template>\n  </div>\n</div>\n", components: [{ type: IconPlaceholderComponent, selector: "stream-icon-placeholder", inputs: ["icon", "size"] }, { type: VoiceRecordingWavebarComponent, selector: "stream-voice-recording-wavebar", inputs: ["audioElement", "waveFormData", "duration"] }], directives: [{ type: i8__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "translate": i6__namespace.TranslatePipe, "number": i8__namespace.DecimalPipe } });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: VoiceRecordingComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'stream-voice-recording',
+                        templateUrl: './voice-recording.component.html',
+                        styles: [],
+                    }]
+            }], ctorParameters: function () { return [{ type: i0__namespace.NgZone }, { type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { attachment: [{
+                    type: i0.Input
+                }], audioElement: [{
+                    type: i0.ViewChild,
+                    args: ['audioElement']
+                }] } });
+
     /**
      * The `AttachmentList` component displays the attachments of a message
      */
@@ -4330,7 +4655,7 @@
             if (changes.attachments) {
                 var images = this.attachments.filter(this.isImage);
                 var containsGallery = images.length >= 2;
-                this.orderedAttachments = __spreadArray(__spreadArray(__spreadArray([], __read((containsGallery ? this.createGallery(images) : images))), __read(this.attachments.filter(function (a) { return _this.isVideo(a); }))), __read(this.attachments.filter(function (a) { return _this.isFile(a); })));
+                this.orderedAttachments = __spreadArray(__spreadArray(__spreadArray(__spreadArray([], __read((containsGallery ? this.createGallery(images) : images))), __read(this.attachments.filter(function (a) { return _this.isVideo(a); }))), __read(this.attachments.filter(function (a) { return _this.isVoiceMessage(a); }))), __read(this.attachments.filter(function (a) { return _this.isFile(a); })));
                 this.attachmentConfigurations = new Map();
                 // Display link attachments only if there are no other attachments
                 // Giphy-s always sent without other attachments
@@ -4369,6 +4694,9 @@
                 (attachment.type === 'image' && !this.isImage(attachment)) ||
                 attachment.type === 'giphy');
         };
+        AttachmentListComponent.prototype.isVoiceMessage = function (attachment) {
+            return attachment.type === 'voiceRecording';
+        };
         AttachmentListComponent.prototype.hasFileSize = function (attachment) {
             return (attachment.file_size && Number.isFinite(Number(attachment.file_size)));
         };
@@ -4480,7 +4808,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: ChannelService }, { token: AttachmentConfigurationService }, { token: ThemeService }], 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", parentMessageId: "parentMessageId", attachments: "attachments" }, outputs: { imageModalStateChange: "imageModalStateChange" }, host: { properties: { "class": "this.class" } }, viewQueries: [{ propertyName: "modalContent", first: true, predicate: ["modalContent"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0__namespace, template: "<div *ngIf=\"orderedAttachments.length > 0\" class=\"str-chat__attachment-list\">\n  <ng-container\n    *ngFor=\"let attachment of orderedAttachments; trackBy: trackByUrl\"\n  >\n    <div\n      data-testclass=\"attachment-container\"\n      class=\"str-chat__message-attachment str-chat__message-attachment--{{\n        attachment.type\n      }} str-chat__message-attachment-dynamic-size\"\n      [class.str-chat__message-attachment--card]=\"isCard(attachment)\"\n      [class.str-chat-angular__message-attachment-file-single]=\"\n        isFile(attachment)\n      \"\n      [class.str-chat__message-attachment-with-actions]=\"\n        attachment.actions && attachment.actions.length > 0\n      \"\n      [class.str-chat__message-attachment--svg-image]=\"isSvg(attachment)\"\n    >\n      <ng-container *ngIf=\"isImage(attachment)\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            (customTemplatesService.imageAttachmentTemplate$ | async) ||\n              defaultImage;\n            context: getAttachmentContext(attachment)\n          \"\n        ></ng-container>\n        <ng-template #defaultImage let-attachmentContext=\"attachment\">\n          <img\n            #imgElement\n            class=\"str-chat__message-attachment--img\"\n            data-testclass=\"image\"\n            [src]=\"\n              getImageAttachmentConfiguration(\n                attachmentContext,\n                'single',\n                imgElement\n              ).url\n            \"\n            [alt]=\"attachmentContext?.fallback\"\n            (click)=\"openImageModal([attachmentContext])\"\n            (keyup.enter)=\"openImageModal([attachmentContext])\"\n            [style.--original-height]=\"\n              getImageAttachmentConfiguration(\n                attachmentContext,\n                'single',\n                imgElement\n              ).originalHeight\n            \"\n            [style.--original-width]=\"\n              getImageAttachmentConfiguration(\n                attachmentContext,\n                'single',\n                imgElement\n              ).originalWidth\n            \"\n            [ngStyle]=\"{\n              height: getImageAttachmentConfiguration(\n                attachmentContext,\n                'single',\n                imgElement\n              ).height,\n              width: getImageAttachmentConfiguration(\n                attachmentContext,\n                'single',\n                imgElement\n              ).width\n            }\"\n          />\n        </ng-template>\n      </ng-container>\n      <ng-container *ngIf=\"isGallery(attachment)\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            (customTemplatesService.galleryAttachmentTemplate$ | async) ||\n              defaultGallery;\n            context: getAttachmentContext(attachment)\n          \"\n        ></ng-container>\n        <ng-template #defaultGallery let-attachmentContext=\"attachment\">\n          <div\n            class=\"str-chat__gallery\"\n            data-testid=\"image-gallery\"\n            [class.str-chat__gallery--square]=\"\n              (attachmentContext?.images)!.length > 3\n            \"\n            [class.str-chat__gallery-two-rows]=\"\n              (attachmentContext?.images)!.length > 2\n            \"\n          >\n            <ng-container\n              *ngFor=\"\n                let galleryImage of attachmentContext.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(attachmentContext.images!, index)\"\n                (keyup.enter)=\"openImageModal(attachmentContext.images!, index)\"\n                [class.str-chat__message-attachment--svg-image]=\"\n                  isSvg(galleryImage)\n                \"\n              >\n                <img\n                  fetchpriority=\"low\"\n                  loading=\"lazy\"\n                  #imgElement\n                  [src]=\"\n                    getImageAttachmentConfiguration(\n                      galleryImage,\n                      'gallery',\n                      imgElement\n                    ).url\n                  \"\n                  [alt]=\"galleryImage.fallback\"\n                  [style.--original-height]=\"\n                    getImageAttachmentConfiguration(\n                      galleryImage,\n                      'gallery',\n                      imgElement\n                    ).originalHeight\n                  \"\n                  [style.--original-width]=\"\n                    getImageAttachmentConfiguration(\n                      galleryImage,\n                      'gallery',\n                      imgElement\n                    ).originalWidth\n                  \"\n                  [ngStyle]=\"{\n                    height: getImageAttachmentConfiguration(\n                      galleryImage,\n                      'gallery',\n                      imgElement\n                    ).height,\n                    width: getImageAttachmentConfiguration(\n                      galleryImage,\n                      'gallery',\n                      imgElement\n                    ).width\n                  }\"\n                />\n              </button>\n              <button\n                #element\n                *ngIf=\"index === 3 && !isLast\"\n                class=\"str-chat__gallery-placeholder\"\n                data-testclass=\"gallery-image\"\n                data-testid=\"more-image-button\"\n                (click)=\"openImageModal(attachmentContext.images!, index)\"\n                (keyup.enter)=\"openImageModal(attachmentContext.images!, index)\"\n                [class.str-chat__message-attachment--svg-image]=\"\n                  isSvg(galleryImage)\n                \"\n                [style.--original-height]=\"\n                  getImageAttachmentConfiguration(\n                    galleryImage,\n                    'gallery',\n                    element\n                  ).originalHeight\n                \"\n                [style.--original-width]=\"\n                  getImageAttachmentConfiguration(\n                    galleryImage,\n                    'gallery',\n                    element\n                  ).originalWidth\n                \"\n                [ngStyle]=\"{\n                  'background-image':\n                    'url(' +\n                    getImageAttachmentConfiguration(\n                      galleryImage,\n                      'gallery',\n                      element\n                    ).url +\n                    ')',\n                  height: getImageAttachmentConfiguration(\n                    galleryImage,\n                    'gallery',\n                    element\n                  ).height,\n                  width: getImageAttachmentConfiguration(\n                    galleryImage,\n                    'gallery',\n                    element\n                  ).width\n                }\"\n              >\n                <p\n                  [innerHTML]=\"\n                    'streamChat.{{ imageCount }} more'\n                      | translate\n                        : { imageCount: attachmentContext!.images!.length - 4 }\n                  \"\n                ></p>\n              </button>\n            </ng-container>\n          </div>\n        </ng-template>\n      </ng-container>\n      <ng-container *ngIf=\"isVideo(attachment)\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            (customTemplatesService.videoAttachmentTemplate$ | async) ||\n              defaultVideo;\n            context: getAttachmentContext(attachment)\n          \"\n        ></ng-container>\n        <ng-template #defaultVideo let-attachmentContext=\"attachment\">\n          <div\n            class=\"str-chat__player-wrapper\"\n            data-testclass=\"video-attachment-parent\"\n            [style.--original-height]=\"\n              getVideoAttachmentConfiguration(attachmentContext, videoElement)\n                .originalHeight\n            \"\n            [style.--original-width]=\"\n              getVideoAttachmentConfiguration(attachmentContext, videoElement)\n                .originalWidth\n            \"\n            [ngStyle]=\"{\n              height: getVideoAttachmentConfiguration(\n                attachmentContext,\n                videoElement\n              ).height,\n              width: getVideoAttachmentConfiguration(\n                attachmentContext,\n                videoElement\n              ).width\n            }\"\n          >\n            <video\n              #videoElement\n              class=\"str-chat__video-angular\"\n              controls\n              data-testclass=\"video-attachment\"\n              [src]=\"\n                getVideoAttachmentConfiguration(attachmentContext, videoElement)\n                  .url\n              \"\n              [poster]=\"\n                getVideoAttachmentConfiguration(attachmentContext, videoElement)\n                  .thumbUrl\n              \"\n            ></video>\n          </div>\n        </ng-template>\n      </ng-container>\n      <ng-container *ngIf=\"isFile(attachment)\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            (customTemplatesService.fileAttachmentTemplate$ | async) ||\n              defaultFile;\n            context: getAttachmentContext(attachment)\n          \"\n        ></ng-container>\n        <ng-template #defaultFile let-attachmentContext=\"attachment\">\n          <a\n            class=\"\n              str-chat__message-attachment-file--item\n              str-chat-angular__message-attachment-file-single\n            \"\n            data-testclass=\"file-link\"\n            href=\"{{ attachmentContext.asset_url }}\"\n            target=\"_blank\"\n          >\n            <stream-icon-placeholder\n              *ngIf=\"themeVersion === '1'\"\n              icon=\"file\"\n              [size]=\"30\"\n            ></stream-icon-placeholder>\n            <stream-icon-placeholder\n              *ngIf=\"themeVersion === '2'\"\n              icon=\"unspecified-filetype\"\n              [size]=\"30\"\n            ></stream-icon-placeholder>\n            <div class=\"str-chat__message-attachment-file--item-text\">\n              <div class=\"str-chat__message-attachment-file--item-first-row\">\n                <div\n                  data-testclass=\"file-title\"\n                  class=\"str-chat__message-attachment-file--item-name\"\n                >\n                  {{ attachmentContext.title }}\n                </div>\n                <!-- Temporary disabled, will be fixed with this: https://github.com/GetStream/stream-chat-angular/issues/393  -->\n                <!-- <a\n              class=\"str-chat__message-attachment-file--item-download\"\n              data-testclass=\"file-link\"\n              download\n              href=\"{{ attachment.asset_url }}\"\n              target=\"_blank\"\n            >\n              <stream-icon-placeholder\n                class=\"str-chat__message-attachment-download-icon\"\n                icon=\"download\"\n              ></stream-icon-placeholder>\n            </a> -->\n              </div>\n              <span\n                class=\"str-chat__message-attachment-file--item-size\"\n                data-testclass=\"size\"\n                *ngIf=\"hasFileSize(attachmentContext)\"\n                >{{ getFileSize(attachmentContext) }}</span\n              >\n            </div>\n          </a>\n        </ng-template>\n      </ng-container>\n      <ng-container\n        *ngIf=\"\n          isCard(attachment) &&\n          getCardAttachmentConfiguration(attachment) as attachmentConfiguration\n        \"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"\n            (customTemplatesService.cardAttachmentTemplate$ | async) ||\n              defaultCard;\n            context: getAttachmentContext(attachment)\n          \"\n        ></ng-container>\n        <ng-template #defaultCard let-attachmentContext=\"attachment\">\n          <div\n            class=\"str-chat__message-attachment-card str-chat__message-attachment-card--{{\n              attachmentContext.type\n            }}\"\n          >\n            <div\n              *ngIf=\"attachmentConfiguration.url\"\n              class=\"str-chat__message-attachment-card--header\"\n            >\n              <img\n                fetchpriority=\"low\"\n                loading=\"lazy\"\n                data-testclass=\"card-img\"\n                alt=\"{{ attachmentConfiguration.url }}\"\n                src=\"{{ attachmentConfiguration.url }}\"\n                [ngStyle]=\"{\n                  height: attachmentConfiguration.height,\n                  width: attachmentConfiguration.width\n                }\"\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=\"attachmentContext.title\"\n                  data-testclass=\"card-title\"\n                  class=\"str-chat__message-attachment-card--title\"\n                >\n                  {{ attachmentContext.title }}\n                </div>\n                <div\n                  *ngIf=\"attachmentContext.text\"\n                  class=\"str-chat__message-attachment-card--text\"\n                  data-testclass=\"card-text\"\n                >\n                  {{ attachmentContext.text }}\n                </div>\n                <a\n                  class=\"str-chat__message-attachment-card--url\"\n                  *ngIf=\"\n                    attachmentContext.title_link ||\n                    attachmentContext.og_scrape_url\n                  \"\n                  data-testclass=\"url-link\"\n                  noopener\n                  noreferrer\n                  href=\"{{\n                    attachmentContext.title_link ||\n                      attachmentContext.og_scrape_url\n                  }}\"\n                  target=\"_blank\"\n                >\n                  {{\n                    trimUrl(\n                      attachmentContext.title_link ||\n                        attachmentContext.og_scrape_url\n                    )\n                  }}\n                </a>\n              </div>\n            </div>\n          </div>\n        </ng-template>\n      </ng-container>\n      <ng-container *ngIf=\"attachment.actions && attachment.actions.length > 0\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            (customTemplatesService.attachmentActionsTemplate$ | async) ||\n              defaultActions;\n            context: getAttachmentContext(attachment)\n          \"\n        ></ng-container>\n        <ng-template #defaultActions let-attachmentContext=\"attachment\">\n          <div class=\"str-chat__message-attachment-actions\">\n            <div class=\"str-chat__message-attachment-actions-form\">\n              <button\n                *ngFor=\"\n                  let action of attachmentContext.actions;\n                  trackBy: trackByActionValue\n                \"\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        </ng-template>\n      </ng-container>\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</div>\n\n<ng-template\n  #defaultModal\n  let-isOpen=\"isOpen\"\n  let-isOpenChangeHandler=\"isOpenChangeHandler\"\n  let-content=\"content\"\n>\n  <stream-modal\n    class=\"stream-chat-angular__image-modal-host\"\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 str-chat__image-carousel\">\n    <button\n      class=\"\n        stream-chat-angular__image-modal-stepper\n        str-chat__image-carousel-stepper\n      \"\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      #imgElement\n      class=\"\n        stream-chat-angular__image-modal-image\n        str-chat__image-carousel-image\n      \"\n      data-testid=\"modal-image\"\n      [src]=\"\n        getCarouselImageAttachmentConfiguration(\n          imagesToView[imagesToViewCurrentIndex],\n          imgElement\n        ).url\n      \"\n      [style.--original-height]=\"\n        getCarouselImageAttachmentConfiguration(\n          imagesToView[imagesToViewCurrentIndex],\n          imgElement\n        ).originalHeight\n      \"\n      [style.--original-width]=\"\n        getCarouselImageAttachmentConfiguration(\n          imagesToView[imagesToViewCurrentIndex],\n          imgElement\n        ).originalWidth\n      \"\n      [alt]=\"imagesToView[imagesToViewCurrentIndex].fallback\"\n      [ngStyle]=\"{\n        width: getCarouselImageAttachmentConfiguration(\n          imagesToView[imagesToViewCurrentIndex],\n          imgElement\n        ).width,\n        height: getCarouselImageAttachmentConfiguration(\n          imagesToView[imagesToViewCurrentIndex],\n          imgElement\n        ).height\n      }\"\n    />\n    <button\n      class=\"\n        stream-chat-angular__image-modal-stepper\n        str-chat__image-carousel-stepper\n      \"\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: i5__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i5__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], pipes: { "async": i5__namespace.AsyncPipe, "translate": i6__namespace.TranslatePipe } });
+    AttachmentListComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: AttachmentListComponent, selector: "stream-attachment-list", inputs: { messageId: "messageId", parentMessageId: "parentMessageId", attachments: "attachments" }, outputs: { imageModalStateChange: "imageModalStateChange" }, host: { properties: { "class": "this.class" } }, viewQueries: [{ propertyName: "modalContent", first: true, predicate: ["modalContent"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0__namespace, template: "<div *ngIf=\"orderedAttachments.length > 0\" class=\"str-chat__attachment-list\">\n  <ng-container\n    *ngFor=\"let attachment of orderedAttachments; trackBy: trackByUrl\"\n  >\n    <div\n      data-testclass=\"attachment-container\"\n      class=\"str-chat__message-attachment str-chat__message-attachment--{{\n        attachment.type\n      }} str-chat__message-attachment-dynamic-size\"\n      [class.str-chat__message-attachment--card]=\"isCard(attachment)\"\n      [class.str-chat-angular__message-attachment-file-single]=\"\n        isFile(attachment)\n      \"\n      [class.str-chat__message-attachment--voice-recording]=\"\n        isVoiceMessage(attachment)\n      \"\n      [class.str-chat__message-attachment-with-actions]=\"\n        attachment.actions && attachment.actions.length > 0\n      \"\n      [class.str-chat__message-attachment--svg-image]=\"isSvg(attachment)\"\n    >\n      <ng-container *ngIf=\"isImage(attachment)\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            (customTemplatesService.imageAttachmentTemplate$ | async) ||\n              defaultImage;\n            context: getAttachmentContext(attachment)\n          \"\n        ></ng-container>\n        <ng-template #defaultImage let-attachmentContext=\"attachment\">\n          <img\n            #imgElement\n            class=\"str-chat__message-attachment--img\"\n            data-testclass=\"image\"\n            [src]=\"\n              getImageAttachmentConfiguration(\n                attachmentContext,\n                'single',\n                imgElement\n              ).url\n            \"\n            [alt]=\"attachmentContext?.fallback\"\n            (click)=\"openImageModal([attachmentContext])\"\n            (keyup.enter)=\"openImageModal([attachmentContext])\"\n            [style.--original-height]=\"\n              getImageAttachmentConfiguration(\n                attachmentContext,\n                'single',\n                imgElement\n              ).originalHeight\n            \"\n            [style.--original-width]=\"\n              getImageAttachmentConfiguration(\n                attachmentContext,\n                'single',\n                imgElement\n              ).originalWidth\n            \"\n            [ngStyle]=\"{\n              height: getImageAttachmentConfiguration(\n                attachmentContext,\n                'single',\n                imgElement\n              ).height,\n              width: getImageAttachmentConfiguration(\n                attachmentContext,\n                'single',\n                imgElement\n              ).width\n            }\"\n          />\n        </ng-template>\n      </ng-container>\n      <ng-container *ngIf=\"isGallery(attachment)\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            (customTemplatesService.galleryAttachmentTemplate$ | async) ||\n              defaultGallery;\n            context: getAttachmentContext(attachment)\n          \"\n        ></ng-container>\n        <ng-template #defaultGallery let-attachmentContext=\"attachment\">\n          <div\n            class=\"str-chat__gallery\"\n            data-testid=\"image-gallery\"\n            [class.str-chat__gallery--square]=\"\n              (attachmentContext?.images)!.length > 3\n            \"\n            [class.str-chat__gallery-two-rows]=\"\n              (attachmentContext?.images)!.length > 2\n            \"\n          >\n            <ng-container\n              *ngFor=\"\n                let galleryImage of attachmentContext.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(attachmentContext.images!, index)\"\n                (keyup.enter)=\"openImageModal(attachmentContext.images!, index)\"\n                [class.str-chat__message-attachment--svg-image]=\"\n                  isSvg(galleryImage)\n                \"\n              >\n                <img\n                  fetchpriority=\"low\"\n                  loading=\"lazy\"\n                  #imgElement\n                  [src]=\"\n                    getImageAttachmentConfiguration(\n                      galleryImage,\n                      'gallery',\n                      imgElement\n                    ).url\n                  \"\n                  [alt]=\"galleryImage.fallback\"\n                  [style.--original-height]=\"\n                    getImageAttachmentConfiguration(\n                      galleryImage,\n                      'gallery',\n                      imgElement\n                    ).originalHeight\n                  \"\n                  [style.--original-width]=\"\n                    getImageAttachmentConfiguration(\n                      galleryImage,\n                      'gallery',\n                      imgElement\n                    ).originalWidth\n                  \"\n                  [ngStyle]=\"{\n                    height: getImageAttachmentConfiguration(\n                      galleryImage,\n                      'gallery',\n                      imgElement\n                    ).height,\n                    width: getImageAttachmentConfiguration(\n                      galleryImage,\n                      'gallery',\n                      imgElement\n                    ).width\n                  }\"\n                />\n              </button>\n              <button\n                #element\n                *ngIf=\"index === 3 && !isLast\"\n                class=\"str-chat__gallery-placeholder\"\n                data-testclass=\"gallery-image\"\n                data-testid=\"more-image-button\"\n                (click)=\"openImageModal(attachmentContext.images!, index)\"\n                (keyup.enter)=\"openImageModal(attachmentContext.images!, index)\"\n                [class.str-chat__message-attachment--svg-image]=\"\n                  isSvg(galleryImage)\n                \"\n                [style.--original-height]=\"\n                  getImageAttachmentConfiguration(\n                    galleryImage,\n                    'gallery',\n                    element\n                  ).originalHeight\n                \"\n                [style.--original-width]=\"\n                  getImageAttachmentConfiguration(\n                    galleryImage,\n                    'gallery',\n                    element\n                  ).originalWidth\n                \"\n                [ngStyle]=\"{\n                  'background-image':\n                    'url(' +\n                    getImageAttachmentConfiguration(\n                      galleryImage,\n                      'gallery',\n                      element\n                    ).url +\n                    ')',\n                  height: getImageAttachmentConfiguration(\n                    galleryImage,\n                    'gallery',\n                    element\n                  ).height,\n                  width: getImageAttachmentConfiguration(\n                    galleryImage,\n                    'gallery',\n                    element\n                  ).width\n                }\"\n              >\n                <p\n                  [innerHTML]=\"\n                    'streamChat.{{ imageCount }} more'\n                      | translate\n                        : { imageCount: attachmentContext!.images!.length - 4 }\n                  \"\n                ></p>\n              </button>\n            </ng-container>\n          </div>\n        </ng-template>\n      </ng-container>\n      <ng-container *ngIf=\"isVideo(attachment)\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            (customTemplatesService.videoAttachmentTemplate$ | async) ||\n              defaultVideo;\n            context: getAttachmentContext(attachment)\n          \"\n        ></ng-container>\n        <ng-template #defaultVideo let-attachmentContext=\"attachment\">\n          <div\n            class=\"str-chat__player-wrapper\"\n            data-testclass=\"video-attachment-parent\"\n            [style.--original-height]=\"\n              getVideoAttachmentConfiguration(attachmentContext, videoElement)\n                .originalHeight\n            \"\n            [style.--original-width]=\"\n              getVideoAttachmentConfiguration(attachmentContext, videoElement)\n                .originalWidth\n            \"\n            [ngStyle]=\"{\n              height: getVideoAttachmentConfiguration(\n                attachmentContext,\n                videoElement\n              ).height,\n              width: getVideoAttachmentConfiguration(\n                attachmentContext,\n                videoElement\n              ).width\n            }\"\n          >\n            <video\n              #videoElement\n              class=\"str-chat__video-angular\"\n              controls\n              data-testclass=\"video-attachment\"\n              [src]=\"\n                getVideoAttachmentConfiguration(attachmentContext, videoElement)\n                  .url\n              \"\n              [poster]=\"\n                getVideoAttachmentConfiguration(attachmentContext, videoElement)\n                  .thumbUrl\n              \"\n            ></video>\n          </div>\n        </ng-template>\n      </ng-container>\n      <ng-container *ngIf=\"isFile(attachment)\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            (customTemplatesService.fileAttachmentTemplate$ | async) ||\n              defaultFile;\n            context: getAttachmentContext(attachment)\n          \"\n        ></ng-container>\n        <ng-template #defaultFile let-attachmentContext=\"attachment\">\n          <div\n            class=\"\n              str-chat__message-attachment-file--item\n              str-chat-angular__message-attachment-file-single\n            \"\n          >\n            <stream-icon-placeholder\n              *ngIf=\"themeVersion === '1'\"\n              icon=\"file\"\n              [size]=\"30\"\n            ></stream-icon-placeholder>\n            <stream-icon-placeholder\n              *ngIf=\"themeVersion === '2'\"\n              icon=\"unspecified-filetype\"\n              [size]=\"30\"\n            ></stream-icon-placeholder>\n            <div class=\"str-chat__message-attachment-file--item-text\">\n              <a\n                class=\"str-chat__message-attachment-file--item-first-row\"\n                data-testclass=\"file-link\"\n                href=\"{{ attachmentContext.asset_url }}\"\n                target=\"_blank\"\n              >\n                <div\n                  data-testclass=\"file-title\"\n                  class=\"str-chat__message-attachment-file--item-name\"\n                >\n                  {{ attachmentContext.title }}\n                </div>\n                <stream-icon-placeholder\n                  class=\"str-chat__message-attachment-download-icon\"\n                  icon=\"download\"\n                ></stream-icon-placeholder>\n              </a>\n              <span\n                class=\"str-chat__message-attachment-file--item-size\"\n                data-testclass=\"size\"\n                *ngIf=\"hasFileSize(attachmentContext)\"\n                >{{ getFileSize(attachmentContext) }}</span\n              >\n            </div>\n          </div>\n        </ng-template>\n      </ng-container>\n      <ng-container *ngIf=\"isVoiceMessage(attachment)\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            (customTemplatesService.voiceRecordingAttachmentTemplate$\n              | async) || defaultRecording;\n            context: getAttachmentContext(attachment)\n          \"\n        ></ng-container>\n        <ng-template #defaultRecording>\n          <stream-voice-recording\n            data-testclass=\"voice-recording\"\n            [attachment]=\"attachment\"\n          ></stream-voice-recording>\n        </ng-template>\n      </ng-container>\n      <ng-container\n        *ngIf=\"\n          isCard(attachment) &&\n          getCardAttachmentConfiguration(attachment) as attachmentConfiguration\n        \"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"\n            (customTemplatesService.cardAttachmentTemplate$ | async) ||\n              defaultCard;\n            context: getAttachmentContext(attachment)\n          \"\n        ></ng-container>\n        <ng-template #defaultCard let-attachmentContext=\"attachment\">\n          <div\n            class=\"str-chat__message-attachment-card str-chat__message-attachment-card--{{\n              attachmentContext.type\n            }}\"\n          >\n            <div\n              *ngIf=\"attachmentConfiguration.url\"\n              class=\"str-chat__message-attachment-card--header\"\n            >\n              <img\n                fetchpriority=\"low\"\n                loading=\"lazy\"\n                data-testclass=\"card-img\"\n                alt=\"{{ attachmentConfiguration.url }}\"\n                src=\"{{ attachmentConfiguration.url }}\"\n                [ngStyle]=\"{\n                  height: attachmentConfiguration.height,\n                  width: attachmentConfiguration.width\n                }\"\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=\"attachmentContext.title\"\n                  data-testclass=\"card-title\"\n                  class=\"str-chat__message-attachment-card--title\"\n                >\n                  {{ attachmentContext.title }}\n                </div>\n                <div\n                  *ngIf=\"attachmentContext.text\"\n                  class=\"str-chat__message-attachment-card--text\"\n                  data-testclass=\"card-text\"\n                >\n                  {{ attachmentContext.text }}\n                </div>\n                <a\n                  class=\"str-chat__message-attachment-card--url\"\n                  *ngIf=\"\n                    attachmentContext.title_link ||\n                    attachmentContext.og_scrape_url\n                  \"\n                  data-testclass=\"url-link\"\n                  noopener\n                  noreferrer\n                  href=\"{{\n                    attachmentContext.title_link ||\n                      attachmentContext.og_scrape_url\n                  }}\"\n                  target=\"_blank\"\n                >\n                  {{\n                    trimUrl(\n                      attachmentContext.title_link ||\n                        attachmentContext.og_scrape_url\n                    )\n                  }}\n                </a>\n              </div>\n            </div>\n          </div>\n        </ng-template>\n      </ng-container>\n      <ng-container *ngIf=\"attachment.actions && attachment.actions.length > 0\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            (customTemplatesService.attachmentActionsTemplate$ | async) ||\n              defaultActions;\n            context: getAttachmentContext(attachment)\n          \"\n        ></ng-container>\n        <ng-template #defaultActions let-attachmentContext=\"attachment\">\n          <div class=\"str-chat__message-attachment-actions\">\n            <div class=\"str-chat__message-attachment-actions-form\">\n              <button\n                *ngFor=\"\n                  let action of attachmentContext.actions;\n                  trackBy: trackByActionValue\n                \"\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        </ng-template>\n      </ng-container>\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</div>\n\n<ng-template\n  #defaultModal\n  let-isOpen=\"isOpen\"\n  let-isOpenChangeHandler=\"isOpenChangeHandler\"\n  let-content=\"content\"\n>\n  <stream-modal\n    class=\"stream-chat-angular__image-modal-host\"\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 str-chat__image-carousel\">\n    <img\n      #imgElement\n      class=\"\n        stream-chat-angular__image-modal-image\n        str-chat__image-carousel-image\n      \"\n      data-testid=\"modal-image\"\n      [src]=\"\n        getCarouselImageAttachmentConfiguration(\n          imagesToView[imagesToViewCurrentIndex],\n          imgElement\n        ).url\n      \"\n      [style.--original-height]=\"\n        getCarouselImageAttachmentConfiguration(\n          imagesToView[imagesToViewCurrentIndex],\n          imgElement\n        ).originalHeight\n      \"\n      [style.--original-width]=\"\n        getCarouselImageAttachmentConfiguration(\n          imagesToView[imagesToViewCurrentIndex],\n          imgElement\n        ).originalWidth\n      \"\n      [alt]=\"imagesToView[imagesToViewCurrentIndex].fallback\"\n      [ngStyle]=\"{\n        width: getCarouselImageAttachmentConfiguration(\n          imagesToView[imagesToViewCurrentIndex],\n          imgElement\n        ).width,\n        height: getCarouselImageAttachmentConfiguration(\n          imagesToView[imagesToViewCurrentIndex],\n          imgElement\n        ).height\n      }\"\n    />\n    <div>\n      <button\n        class=\"\n          stream-chat-angular__image-modal-stepper\n          str-chat__image-carousel-stepper str-chat__image-carousel-stepper-prev\n        \"\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      <button\n        class=\"\n          stream-chat-angular__image-modal-stepper\n          str-chat__image-carousel-stepper str-chat__image-carousel-stepper-next\n        \"\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  </div>\n</ng-template>\n", components: [{ type: IconPlaceholderComponent, selector: "stream-icon-placeholder", inputs: ["icon", "size"] }, { type: VoiceRecordingComponent, selector: "stream-voice-recording", inputs: ["attachment"] }, { type: ModalComponent, selector: "stream-modal", inputs: ["isOpen", "content"], outputs: ["isOpenChange"] }], directives: [{ type: i8__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i8__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i8__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], pipes: { "async": i8__namespace.AsyncPipe, "translate": i6__namespace.TranslatePipe } });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: AttachmentListComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -4530,7 +4858,7 @@
         return AttachmentPreviewListComponent;
     }());
     AttachmentPreviewListComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: AttachmentPreviewListComponent, deps: [{ token: ThemeService }], 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\n  class=\"rfu-image-previewer\"\n  *ngIf=\"(attachmentUploads$ | async)?.length && themeVersion === '1'\"\n>\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-retry\"\n      >\n        <stream-icon-placeholder icon=\"retry\"></stream-icon-placeholder>\n      </div>\n      <div class=\"rfu-thumbnail__wrapper\">\n        <div class=\"rfu-thumbnail__overlay\">\n          <div\n            class=\"rfu-icon-button\"\n            data-testclass=\"file-delete\"\n            role=\"button\"\n            (click)=\"attachmentDeleted(attachmentUpload)\"\n            (keyup.enter)=\"attachmentDeleted(attachmentUpload)\"\n          >\n            <stream-icon-placeholder\n              icon=\"close-no-outline\"\n            ></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=\"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            <stream-icon-placeholder\n              icon=\"close-no-outline\"\n            ></stream-icon-placeholder>\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\n<div\n  class=\"str-chat__attachment-preview-list\"\n  *ngIf=\"(attachmentUploads$ | async)?.length && themeVersion === '2'\"\n>\n  <div class=\"str-chat__attachment-list-scroll-container\">\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=\"str-chat__attachment-preview-image\"\n        data-testclass=\"attachment-image-preview\"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"\n            deleteButton;\n            context: { attachmentUpload: attachmentUpload }\n          \"\n        ></ng-container>\n        <div\n          *ngIf=\"attachmentUpload.state === 'uploading'\"\n          class=\"str-chat__attachment-preview-image-loading\"\n        >\n          <stream-loading-indicator-placeholder\n            data-testclass=\"loading-indicator\"\n            [size]=\"18\"\n          ></stream-loading-indicator-placeholder>\n        </div>\n        <ng-container\n          *ngTemplateOutlet=\"\n            retryButton;\n            context: { attachmentUpload: attachmentUpload }\n          \"\n        ></ng-container>\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=\"str-chat__attachment-preview-thumbnail\"\n          data-testclass=\"attachment-image\"\n        />\n      </div>\n      <div\n        class=\"str-chat__attachment-preview-file\"\n        *ngIf=\"\n          attachmentUpload.type === 'file' || attachmentUpload.type === 'video'\n        \"\n        data-testclass=\"attachment-file-preview\"\n      >\n        <stream-icon-placeholder\n          icon=\"unspecified-filetype\"\n        ></stream-icon-placeholder>\n\n        <div class=\"str-chat__attachment-preview-file-end\">\n          <div class=\"str-chat__attachment-preview-file-name\">\n            {{ attachmentUpload.file.name }}\n          </div>\n          <a\n            *ngIf=\"attachmentUpload.state === 'success'\"\n            class=\"str-chat__attachment-preview-file-download\"\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            <stream-icon-placeholder icon=\"download\"></stream-icon-placeholder>\n          </a>\n          <stream-loading-indicator-placeholder\n            *ngIf=\"attachmentUpload.state === 'uploading'\"\n            data-testclass=\"loading-indicator\"\n            [size]=\"18\"\n          ></stream-loading-indicator-placeholder>\n        </div>\n        <ng-container\n          *ngTemplateOutlet=\"\n            deleteButton;\n            context: { attachmentUpload: attachmentUpload }\n          \"\n        ></ng-container>\n        <ng-container\n          *ngTemplateOutlet=\"\n            retryButton;\n            context: { attachmentUpload: attachmentUpload }\n          \"\n        ></ng-container>\n      </div>\n    </ng-container>\n  </div>\n</div>\n\n<ng-template #deleteButton let-attachmentUpload=\"attachmentUpload\">\n  <div\n    class=\"str-chat__attachment-preview-delete\"\n    data-testclass=\"file-delete\"\n    role=\"button\"\n    (click)=\"attachmentDeleted(attachmentUpload)\"\n    (keyup.enter)=\"attachmentDeleted(attachmentUpload)\"\n  >\n    <stream-icon-placeholder icon=\"close-no-outline\"></stream-icon-placeholder>\n  </div>\n</ng-template>\n\n<ng-template #retryButton let-attachmentUpload=\"attachmentUpload\">\n  <div\n    *ngIf=\"attachmentUpload.state === 'error'\"\n    class=\"str-chat__attachment-preview-error str-chat__attachment-preview-error-{{\n      attachmentUpload.type === 'image' ? 'image' : 'file'\n    }}\"\n    (click)=\"attachmentUploadRetried(attachmentUpload.file)\"\n    (keyup.enter)=\"attachmentUploadRetried(attachmentUpload.file)\"\n    data-testclass=\"upload-retry\"\n  >\n    <stream-icon-placeholder icon=\"retry\"></stream-icon-placeholder>\n  </div>\n</ng-template>\n", components: [{ type: IconPlaceholderComponent, selector: "stream-icon-placeholder", inputs: ["icon", "size"] }, { type: LoadingIndicatorPlaceholderComponent, selector: "stream-loading-indicator-placeholder", inputs: ["size", "color"] }], directives: [{ type: i5__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6__namespace.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { type: i5__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "async": i5__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\n  class=\"rfu-image-previewer\"\n  *ngIf=\"(attachmentUploads$ | async)?.length && themeVersion === '1'\"\n>\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-retry\"\n      >\n        <stream-icon-placeholder icon=\"retry\"></stream-icon-placeholder>\n      </div>\n      <div class=\"rfu-thumbnail__wrapper\">\n        <div class=\"rfu-thumbnail__overlay\">\n          <div\n            class=\"rfu-icon-button\"\n            data-testclass=\"file-delete\"\n            role=\"button\"\n            (click)=\"attachmentDeleted(attachmentUpload)\"\n            (keyup.enter)=\"attachmentDeleted(attachmentUpload)\"\n          >\n            <stream-icon-placeholder\n              icon=\"close-no-outline\"\n            ></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=\"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            <stream-icon-placeholder\n              icon=\"close-no-outline\"\n            ></stream-icon-placeholder>\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\n<div\n  class=\"str-chat__attachment-preview-list\"\n  *ngIf=\"(attachmentUploads$ | async)?.length && themeVersion === '2'\"\n>\n  <div class=\"str-chat__attachment-list-scroll-container\">\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=\"str-chat__attachment-preview-image\"\n        data-testclass=\"attachment-image-preview\"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"\n            deleteButton;\n            context: { attachmentUpload: attachmentUpload }\n          \"\n        ></ng-container>\n        <div\n          *ngIf=\"attachmentUpload.state === 'uploading'\"\n          class=\"str-chat__attachment-preview-image-loading\"\n        >\n          <stream-loading-indicator-placeholder\n            data-testclass=\"loading-indicator\"\n            [size]=\"18\"\n          ></stream-loading-indicator-placeholder>\n        </div>\n        <ng-container\n          *ngTemplateOutlet=\"\n            retryButton;\n            context: { attachmentUpload: attachmentUpload }\n          \"\n        ></ng-container>\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=\"str-chat__attachment-preview-thumbnail\"\n          data-testclass=\"attachment-image\"\n        />\n      </div>\n      <div\n        class=\"str-chat__attachment-preview-file\"\n        *ngIf=\"\n          attachmentUpload.type === 'file' || attachmentUpload.type === 'video'\n        \"\n        data-testclass=\"attachment-file-preview\"\n      >\n        <stream-icon-placeholder\n          icon=\"unspecified-filetype\"\n        ></stream-icon-placeholder>\n\n        <div class=\"str-chat__attachment-preview-file-end\">\n          <div class=\"str-chat__attachment-preview-file-name\">\n            {{ attachmentUpload.file.name }}\n          </div>\n          <a\n            *ngIf=\"attachmentUpload.state === 'success'\"\n            class=\"str-chat__attachment-preview-file-download\"\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            <stream-icon-placeholder icon=\"download\"></stream-icon-placeholder>\n          </a>\n          <stream-loading-indicator-placeholder\n            *ngIf=\"attachmentUpload.state === 'uploading'\"\n            data-testclass=\"loading-indicator\"\n            [size]=\"18\"\n          ></stream-loading-indicator-placeholder>\n        </div>\n        <ng-container\n          *ngTemplateOutlet=\"\n            deleteButton;\n            context: { attachmentUpload: attachmentUpload }\n          \"\n        ></ng-container>\n        <ng-container\n          *ngTemplateOutlet=\"\n            retryButton;\n            context: { attachmentUpload: attachmentUpload }\n          \"\n        ></ng-container>\n      </div>\n    </ng-container>\n  </div>\n</div>\n\n<ng-template #deleteButton let-attachmentUpload=\"attachmentUpload\">\n  <div\n    class=\"str-chat__attachment-preview-delete\"\n    data-testclass=\"file-delete\"\n    role=\"button\"\n    (click)=\"attachmentDeleted(attachmentUpload)\"\n    (keyup.enter)=\"attachmentDeleted(attachmentUpload)\"\n  >\n    <stream-icon-placeholder icon=\"close-no-outline\"></stream-icon-placeholder>\n  </div>\n</ng-template>\n\n<ng-template #retryButton let-attachmentUpload=\"attachmentUpload\">\n  <div\n    *ngIf=\"attachmentUpload.state === 'error'\"\n    class=\"str-chat__attachment-preview-error str-chat__attachment-preview-error-{{\n      attachmentUpload.type === 'image' ? 'image' : 'file'\n    }}\"\n    (click)=\"attachmentUploadRetried(attachmentUpload.file)\"\n    (keyup.enter)=\"attachmentUploadRetried(attachmentUpload.file)\"\n    data-testclass=\"upload-retry\"\n  >\n    <stream-icon-placeholder icon=\"retry\"></stream-icon-placeholder>\n  </div>\n</ng-template>\n", components: [{ type: IconPlaceholderComponent, selector: "stream-icon-placeholder", inputs: ["icon", "size"] }, { type: LoadingIndicatorPlaceholderComponent, selector: "stream-loading-indicator-placeholder", inputs: ["size", "color"] }], directives: [{ type: i8__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6__namespace.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { type: i8__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "async": i8__namespace.AsyncPipe } });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: AttachmentPreviewListComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -4994,7 +5322,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 }, { token: ThemeService }], 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$", inputMode: "inputMode", autoFocus: "autoFocus" }, outputs: { messageUpdate: "messageUpdate" }, host: { properties: { "class": "this.class" } }, 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  *ngIf=\"themeVersion !== '2'\"\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 class=\"quoted-message-preview\" *ngIf=\"quotedMessage\">\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        ></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        type=\"user\"\n        location=\"quoted-message-sender\"\n        [user]=\"quotedMessage?.user || undefined\"\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]=\"\n            message?.quoted_message?.translation ||\n            quotedMessage?.html ||\n            quotedMessage?.text\n          \"\n        ></div>\n      </div>\n    </div>\n  </div>\n  <div class=\"str-chat__input-flat-wrapper\">\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 *ngIf=\"emojiPickerTemplate\" data-testid=\"emoji-picker\">\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        <ng-container *ngIf=\"canSendMessages; else disabledTextarea\">\n          <ng-container\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            [placeholder]=\"textareaPlaceholder\"\n            [inputMode]=\"inputMode\"\n            [autoFocus]=\"autoFocus\"\n          ></ng-container>\n        </ng-container>\n        <ng-template #disabledTextarea>\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      <ng-container\n        *ngIf=\"isFileUploadEnabled && isFileUploadAuthorized && canSendMessages\"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"\n            customAttachmentUploadTemplate || defaultAttachmentUpload;\n            context: getAttachmentUploadContext()\n          \"\n        ></ng-container>\n        <ng-template #defaultAttachmentUpload>\n          <div\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        </ng-template>\n      </ng-container>\n    </div>\n    <button\n      *ngIf=\"canSendMessages && !isCooldownInProgress\"\n      data-testid=\"send-button\"\n      class=\"str-chat__send-button\"\n      (click)=\"messageSent()\"\n      (keyup.enter)=\"messageSent()\"\n    >\n      <stream-icon-placeholder\n        class=\"str-chat__send-button-angular\"\n        icon=\"send\"\n      ></stream-icon-placeholder>\n    </button>\n    <div\n      class=\"str-chat__input-flat-cooldown\"\n      *ngIf=\"isCooldownInProgress\"\n      data-testid=\"cooldown-timer\"\n    >\n      <div class=\"str-chat__message-input-cooldown-text\">\n        {{ cooldown$ | async }}\n      </div>\n    </div>\n  </div>\n</div>\n\n<div\n  *ngIf=\"themeVersion === '2'\"\n  class=\"str-chat__message-input str-chat-angular__message-input\"\n>\n  <div *ngIf=\"quotedMessage\" class=\"str-chat__quoted-message-preview-header\">\n    <div class=\"str-chat__quoted-message-reply-to-message\">\n      {{ \"streamChat.Reply to Message\" | translate }}\n    </div>\n    <button\n      class=\"str-chat__quoted-message-remove\"\n      data-testid=\"remove-quote\"\n      (click)=\"deselectMessageToQuote()\"\n      (keyup.enter)=\"deselectMessageToQuote()\"\n    >\n      <stream-icon-placeholder\n        icon=\"close-no-outline\"\n      ></stream-icon-placeholder>\n    </button>\n  </div>\n  <ng-container *ngIf=\"canSendMessages; else notAllowed\">\n    <div\n      class=\"\n        str-chat__message-input-inner\n        str-chat-angular__message-input-inner\n      \"\n    >\n      <ng-container\n        *ngIf=\"isFileUploadEnabled && isFileUploadAuthorized && canSendMessages\"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"\n            customAttachmentUploadTemplate || defaultAttachmentUpload;\n            context: getAttachmentUploadContext()\n          \"\n        ></ng-container>\n        <ng-template #defaultAttachmentUpload>\n          <div\n            class=\"str-chat__file-input-container\"\n            data-testid=\"file-upload-button\"\n          >\n            <input\n              #fileInput\n              type=\"file\"\n              class=\"str-chat__file-input\"\n              data-testid=\"file-input\"\n              [multiple]=\"isMultipleFileUploadEnabled\"\n              (change)=\"filesSelected(fileInput.files)\"\n              id=\"{{ fileInputId }}\"\n            />\n            <label class=\"str-chat__file-input-label\" for=\"{{ fileInputId }}\">\n              <stream-icon-placeholder icon=\"attach\"></stream-icon-placeholder>\n            </label>\n          </div>\n        </ng-template>\n      </ng-container>\n      <div class=\"str-chat__message-textarea-container\">\n        <div\n          data-testid=\"quoted-message-container\"\n          class=\"str-chat__quoted-message-preview\"\n          *ngIf=\"quotedMessage\"\n        >\n          <stream-avatar-placeholder\n            data-testid=\"qouted-message-avatar\"\n            class=\"\n              str-chat-angular__avatar-host\n              str-chat__message-sender-avatar\n            \"\n            [imageUrl]=\"quotedMessage?.user?.image\"\n            [name]=\"quotedMessage?.user?.name || quotedMessage?.user?.id\"\n            [size]=\"20\"\n            type=\"user\"\n            location=\"quoted-message-sender\"\n            [user]=\"quotedMessage?.user || undefined\"\n          ></stream-avatar-placeholder>\n          <div\n            class=\"\n              quoted-message-preview-content-inner\n              str-chat__quoted-message-bubble\n            \"\n          >\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              class=\"str-chat__quoted-message-text\"\n              data-testid=\"quoted-message-text\"\n              [innerHTML]=\"\n                quotedMessage?.translation ||\n                quotedMessage?.html ||\n                quotedMessage?.text\n              \"\n            ></div>\n          </div>\n        </div>\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=\"str-chat__attachment-preview-list-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=\"str-chat__message-textarea-with-emoji-picker\">\n          <ng-container\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            [inputMode]=\"inputMode\"\n            [autoFocus]=\"autoFocus\"\n            [placeholder]=\"textareaPlaceholder\"\n          ></ng-container>\n          <div class=\"str-chat__message-textarea-emoji-picker\">\n            <ng-container\n              *ngIf=\"emojiPickerTemplate\"\n              data-testid=\"emoji-picker\"\n            >\n              <ng-container\n                *ngTemplateOutlet=\"\n                  emojiPickerTemplate;\n                  context: getEmojiPickerContext()\n                \"\n              ></ng-container>\n            </ng-container>\n          </div>\n        </div>\n      </div>\n      <button\n        *ngIf=\"canSendMessages && !isCooldownInProgress && !message\"\n        [disabled]=\"\n          (attachmentUploadInProgressCounter$ | async)! > 0 ||\n          (!textareaValue && (attachmentUploads$ | async)!.length === 0)\n        \"\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        class=\"str-chat__message-input-cooldown\"\n        *ngIf=\"isCooldownInProgress\"\n        data-testid=\"cooldown-timer\"\n      >\n        {{ cooldown$ | async }}\n      </div>\n    </div>\n  </ng-container>\n  <ng-template #notAllowed>\n    <div\n      class=\"str-chat__message-input-not-allowed\"\n      data-testid=\"disabled-textarea\"\n    >\n      {{ disabledTextareaText | translate }}\n    </div>\n  </ng-template>\n</div>\n", components: [{ type: IconPlaceholderComponent, selector: "stream-icon-placeholder", inputs: ["icon", "size"] }, { type: AvatarPlaceholderComponent, selector: "stream-avatar-placeholder", inputs: ["name", "imageUrl", "size", "location", "channel", "user", "type", "initialsType", "showOnlineIndicator"] }, { type: AttachmentListComponent, selector: "stream-attachment-list", inputs: ["messageId", "parentMessageId", "attachments"], outputs: ["imageModalStateChange"] }, { type: AttachmentPreviewListComponent, selector: "stream-attachment-preview-list", inputs: ["attachmentUploads$"], outputs: ["retryAttachmentUpload", "deleteAttachment"] }], directives: [{ type: i5__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: TextareaDirective, selector: "[streamTextarea]", inputs: ["componentRef", "areMentionsEnabled", "mentionScope", "inputMode", "value", "placeholder", "autoFocus"], outputs: ["valueChange", "send", "userMentions"] }], pipes: { "async": i5__namespace.AsyncPipe, "translate": i6__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$", inputMode: "inputMode", autoFocus: "autoFocus" }, outputs: { messageUpdate: "messageUpdate" }, host: { properties: { "class": "this.class" } }, 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  *ngIf=\"themeVersion !== '2'\"\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 class=\"quoted-message-preview\" *ngIf=\"quotedMessage\">\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        ></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        type=\"user\"\n        location=\"quoted-message-sender\"\n        [user]=\"quotedMessage?.user || undefined\"\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]=\"\n            message?.quoted_message?.translation ||\n            quotedMessage?.html ||\n            quotedMessage?.text\n          \"\n        ></div>\n      </div>\n    </div>\n  </div>\n  <div class=\"str-chat__input-flat-wrapper\">\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 *ngIf=\"emojiPickerTemplate\" data-testid=\"emoji-picker\">\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        <ng-container *ngIf=\"canSendMessages; else disabledTextarea\">\n          <ng-container\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            [placeholder]=\"textareaPlaceholder\"\n            [inputMode]=\"inputMode\"\n            [autoFocus]=\"autoFocus\"\n          ></ng-container>\n        </ng-container>\n        <ng-template #disabledTextarea>\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      <ng-container\n        *ngIf=\"isFileUploadEnabled && isFileUploadAuthorized && canSendMessages\"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"\n            customAttachmentUploadTemplate || defaultAttachmentUpload;\n            context: getAttachmentUploadContext()\n          \"\n        ></ng-container>\n        <ng-template #defaultAttachmentUpload>\n          <div\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        </ng-template>\n      </ng-container>\n    </div>\n    <button\n      *ngIf=\"canSendMessages && !isCooldownInProgress\"\n      data-testid=\"send-button\"\n      class=\"str-chat__send-button\"\n      (click)=\"messageSent()\"\n      (keyup.enter)=\"messageSent()\"\n    >\n      <stream-icon-placeholder\n        class=\"str-chat__send-button-angular\"\n        icon=\"send\"\n      ></stream-icon-placeholder>\n    </button>\n    <div\n      class=\"str-chat__input-flat-cooldown\"\n      *ngIf=\"isCooldownInProgress\"\n      data-testid=\"cooldown-timer\"\n    >\n      <div class=\"str-chat__message-input-cooldown-text\">\n        {{ cooldown$ | async }}\n      </div>\n    </div>\n  </div>\n</div>\n\n<div\n  *ngIf=\"themeVersion === '2'\"\n  class=\"str-chat__message-input str-chat-angular__message-input\"\n>\n  <div *ngIf=\"quotedMessage\" class=\"str-chat__quoted-message-preview-header\">\n    <div class=\"str-chat__quoted-message-reply-to-message\">\n      {{ \"streamChat.Reply to Message\" | translate }}\n    </div>\n    <button\n      class=\"str-chat__quoted-message-remove\"\n      data-testid=\"remove-quote\"\n      (click)=\"deselectMessageToQuote()\"\n      (keyup.enter)=\"deselectMessageToQuote()\"\n    >\n      <stream-icon-placeholder\n        icon=\"close-no-outline\"\n      ></stream-icon-placeholder>\n    </button>\n  </div>\n  <ng-container *ngIf=\"canSendMessages; else notAllowed\">\n    <div\n      class=\"\n        str-chat__message-input-inner\n        str-chat-angular__message-input-inner\n      \"\n    >\n      <ng-container\n        *ngIf=\"isFileUploadEnabled && isFileUploadAuthorized && canSendMessages\"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"\n            customAttachmentUploadTemplate || defaultAttachmentUpload;\n            context: getAttachmentUploadContext()\n          \"\n        ></ng-container>\n        <ng-template #defaultAttachmentUpload>\n          <div\n            class=\"str-chat__file-input-container\"\n            data-testid=\"file-upload-button\"\n          >\n            <input\n              #fileInput\n              type=\"file\"\n              class=\"str-chat__file-input\"\n              data-testid=\"file-input\"\n              [multiple]=\"isMultipleFileUploadEnabled\"\n              (change)=\"filesSelected(fileInput.files)\"\n              id=\"{{ fileInputId }}\"\n            />\n            <label class=\"str-chat__file-input-label\" for=\"{{ fileInputId }}\">\n              <stream-icon-placeholder icon=\"attach\"></stream-icon-placeholder>\n            </label>\n          </div>\n        </ng-template>\n      </ng-container>\n      <div class=\"str-chat__message-textarea-container\">\n        <div\n          data-testid=\"quoted-message-container\"\n          class=\"str-chat__quoted-message-preview\"\n          *ngIf=\"quotedMessage\"\n        >\n          <stream-avatar-placeholder\n            data-testid=\"qouted-message-avatar\"\n            class=\"\n              str-chat-angular__avatar-host\n              str-chat__message-sender-avatar\n            \"\n            [imageUrl]=\"quotedMessage?.user?.image\"\n            [name]=\"quotedMessage?.user?.name || quotedMessage?.user?.id\"\n            [size]=\"20\"\n            type=\"user\"\n            location=\"quoted-message-sender\"\n            [user]=\"quotedMessage?.user || undefined\"\n          ></stream-avatar-placeholder>\n          <div\n            class=\"\n              quoted-message-preview-content-inner\n              str-chat__quoted-message-bubble\n            \"\n          >\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              class=\"str-chat__quoted-message-text\"\n              data-testid=\"quoted-message-text\"\n              [innerHTML]=\"\n                quotedMessage?.translation ||\n                quotedMessage?.html ||\n                quotedMessage?.text\n              \"\n            ></div>\n          </div>\n        </div>\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=\"str-chat__attachment-preview-list-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=\"str-chat__message-textarea-with-emoji-picker\">\n          <ng-container\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            [inputMode]=\"inputMode\"\n            [autoFocus]=\"autoFocus\"\n            [placeholder]=\"textareaPlaceholder\"\n          ></ng-container>\n          <div class=\"str-chat__message-textarea-emoji-picker\">\n            <ng-container\n              *ngIf=\"emojiPickerTemplate\"\n              data-testid=\"emoji-picker\"\n            >\n              <ng-container\n                *ngTemplateOutlet=\"\n                  emojiPickerTemplate;\n                  context: getEmojiPickerContext()\n                \"\n              ></ng-container>\n            </ng-container>\n          </div>\n        </div>\n      </div>\n      <button\n        *ngIf=\"canSendMessages && !isCooldownInProgress && !message\"\n        [disabled]=\"\n          (attachmentUploadInProgressCounter$ | async)! > 0 ||\n          (!textareaValue && (attachmentUploads$ | async)!.length === 0)\n        \"\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        class=\"str-chat__message-input-cooldown\"\n        *ngIf=\"isCooldownInProgress\"\n        data-testid=\"cooldown-timer\"\n      >\n        {{ cooldown$ | async }}\n      </div>\n    </div>\n  </ng-container>\n  <ng-template #notAllowed>\n    <div\n      class=\"str-chat__message-input-not-allowed\"\n      data-testid=\"disabled-textarea\"\n    >\n      {{ disabledTextareaText | translate }}\n    </div>\n  </ng-template>\n</div>\n", components: [{ type: IconPlaceholderComponent, selector: "stream-icon-placeholder", inputs: ["icon", "size"] }, { type: AvatarPlaceholderComponent, selector: "stream-avatar-placeholder", inputs: ["name", "imageUrl", "size", "location", "channel", "user", "type", "initialsType", "showOnlineIndicator"] }, { type: AttachmentListComponent, selector: "stream-attachment-list", inputs: ["messageId", "parentMessageId", "attachments"], outputs: ["imageModalStateChange"] }, { type: AttachmentPreviewListComponent, selector: "stream-attachment-preview-list", inputs: ["attachmentUploads$"], outputs: ["retryAttachmentUpload", "deleteAttachment"] }], directives: [{ type: i8__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: TextareaDirective, selector: "[streamTextarea]", inputs: ["componentRef", "areMentionsEnabled", "mentionScope", "inputMode", "value", "placeholder", "autoFocus"], outputs: ["valueChange", "send", "userMentions"] }], pipes: { "async": i8__namespace.AsyncPipe, "translate": i6__namespace.TranslatePipe } });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: MessageInputComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -5047,7 +5375,7 @@
         return NotificationComponent;
     }());
     NotificationComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: NotificationComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    NotificationComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: NotificationComponent, selector: "stream-notification", inputs: { type: "type", content: "content" }, ngImport: i0__namespace, template: "<div\n  class=\"str-chat__custom-notification notification-{{\n    type\n  }} str-chat__notification\"\n  data-testid=\"custom-notification\"\n>\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", directives: [{ type: i5__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+    NotificationComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: NotificationComponent, selector: "stream-notification", inputs: { type: "type", content: "content" }, ngImport: i0__namespace, template: "<div\n  class=\"str-chat__custom-notification notification-{{\n    type\n  }} str-chat__notification\"\n  data-testid=\"custom-notification\"\n>\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", directives: [{ type: i8__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: NotificationComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -5082,7 +5410,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 }, { token: ThemeService }], 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\n  class=\"str-chat__theme-{{ theme$ | async }} str-chat__list-notifications\"\n  [class.str-chat]=\"themeVersion === '2'\"\n  data-testid=\"notification-list\"\n>\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: i5__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "async": i5__namespace.AsyncPipe, "translate": i6__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\n  class=\"str-chat__theme-{{ theme$ | async }} str-chat__list-notifications\"\n  [class.str-chat]=\"themeVersion === '2'\"\n  data-testid=\"notification-list\"\n>\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: i8__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i8__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "async": i8__namespace.AsyncPipe, "translate": i6__namespace.TranslatePipe } });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: NotificationListComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -5158,7 +5486,7 @@
         return EditMessageFormComponent;
     }());
     EditMessageFormComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: EditMessageFormComponent, deps: [{ token: CustomTemplatesService }, { token: MessageActionsService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    EditMessageFormComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: EditMessageFormComponent, selector: "stream-edit-message-form", host: { properties: { "class": "this.class" } }, viewQueries: [{ propertyName: "modalContent", first: true, predicate: ["editMessageForm"], descendants: true, static: true }], ngImport: i0__namespace, template: "<ng-container\n  *ngTemplateOutlet=\"\n    (customTemplatesService.modalTemplate$ | async) || 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    *ngIf=\"isOpen\"\n    (isOpenChange)=\"isOpenChangeHandler($event)\"\n    [content]=\"content\"\n  >\n  </stream-modal>\n</ng-template>\n\n<ng-template #editMessageForm>\n  <div class=\"str-chat__edit-message-form\">\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        (customTemplatesService.messageInputTemplate$ | async) || 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\n          class=\"str-chat__edit-message-cancel\"\n          translate\n          data-testid=\"cancel-button\"\n          (click)=\"dismissed()\"\n        >\n          streamChat.Cancel\n        </button>\n        <button\n          type=\"submit\"\n          translate\n          class=\"str-chat__edit-message-send\"\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$", "inputMode", "autoFocus"], outputs: ["messageUpdate"] }, { type: NotificationListComponent, selector: "stream-notification-list" }], directives: [{ type: i5__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i5__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6__namespace.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }], pipes: { "async": i5__namespace.AsyncPipe } });
+    EditMessageFormComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: EditMessageFormComponent, selector: "stream-edit-message-form", host: { properties: { "class": "this.class" } }, viewQueries: [{ propertyName: "modalContent", first: true, predicate: ["editMessageForm"], descendants: true, static: true }], ngImport: i0__namespace, template: "<ng-container\n  *ngTemplateOutlet=\"\n    (customTemplatesService.modalTemplate$ | async) || 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    *ngIf=\"isOpen\"\n    (isOpenChange)=\"isOpenChangeHandler($event)\"\n    [content]=\"content\"\n  >\n  </stream-modal>\n</ng-template>\n\n<ng-template #editMessageForm>\n  <div class=\"str-chat__edit-message-form\">\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        (customTemplatesService.messageInputTemplate$ | async) || 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\n          class=\"str-chat__edit-message-cancel\"\n          translate\n          data-testid=\"cancel-button\"\n          (click)=\"dismissed()\"\n        >\n          streamChat.Cancel\n        </button>\n        <button\n          type=\"submit\"\n          translate\n          class=\"str-chat__edit-message-send\"\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$", "inputMode", "autoFocus"], outputs: ["messageUpdate"] }, { type: NotificationListComponent, selector: "stream-notification-list" }], directives: [{ type: i8__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i8__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6__namespace.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }], pipes: { "async": i8__namespace.AsyncPipe } });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: EditMessageFormComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -5250,7 +5578,7 @@
         return MessageBouncePromptComponent;
     }());
     MessageBouncePromptComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: MessageBouncePromptComponent, deps: [{ token: ChannelService }, { token: CustomTemplatesService }, { token: MessageActionsService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    MessageBouncePromptComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: MessageBouncePromptComponent, selector: "stream-message-bounce-prompt", host: { properties: { "class": "this.class" } }, ngImport: i0__namespace, template: "<ng-container\n  *ngTemplateOutlet=\"\n    (customTemplatesService.modalTemplate$ | async) || defaultModal;\n    context: {\n      message: message,\n      isOpen: isModalOpen,\n      isOpenChangeHandler: messageBounceModalOpenChanged,\n      content: modalContent\n    }\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    *ngIf=\"isOpen\"\n    (isOpenChange)=\"isOpenChangeHandler($event)\"\n    [content]=\"content\"\n  >\n  </stream-modal>\n</ng-template>\n\n<ng-template #modalContent>\n  <div\n    class=\"str-chat__message-bounce-prompt\"\n    data-testid=\"message-bounce-prompt\"\n  >\n    <div class=\"str-chat__message-bounce-prompt-header\">\n      {{\n        \"streamChat.This message did not meet our content guidelines\"\n          | translate\n      }}\n    </div>\n    <div class=\"str-chat__message-bounce-actions\">\n      <button\n        class=\"str-chat__message-bounce-edit\"\n        data-testid=\"message-bounce-edit\"\n        (click)=\"editMessage()\"\n        (keyup.enter)=\"editMessage()\"\n        type=\"button\"\n      >\n        {{ \"streamChat.Edit Message\" | translate }}\n      </button>\n      <button\n        class=\"str-chat__message-bounce-send\"\n        data-testid=\"message-bounce-send\"\n        (click)=\"resendMessage()\"\n        (keyup.enter)=\"resendMessage()\"\n      >\n        {{ \"streamChat.Send Anyway\" | translate }}\n      </button>\n      <button\n        class=\"str-chat__message-bounce-delete\"\n        data-testid=\"message-bounce-delete\"\n        (click)=\"deleteMessage()\"\n        (keyup.enter)=\"deleteMessage()\"\n      >\n        {{ \"streamChat.Delete\" | translate }}\n      </button>\n    </div>\n  </div>\n</ng-template>\n", components: [{ type: ModalComponent, selector: "stream-modal", inputs: ["isOpen", "content"], outputs: ["isOpenChange"] }], directives: [{ type: i5__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i5__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i5__namespace.AsyncPipe, "translate": i6__namespace.TranslatePipe } });
+    MessageBouncePromptComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: MessageBouncePromptComponent, selector: "stream-message-bounce-prompt", host: { properties: { "class": "this.class" } }, ngImport: i0__namespace, template: "<ng-container\n  *ngTemplateOutlet=\"\n    (customTemplatesService.modalTemplate$ | async) || defaultModal;\n    context: {\n      message: message,\n      isOpen: isModalOpen,\n      isOpenChangeHandler: messageBounceModalOpenChanged,\n      content: modalContent\n    }\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    *ngIf=\"isOpen\"\n    (isOpenChange)=\"isOpenChangeHandler($event)\"\n    [content]=\"content\"\n  >\n  </stream-modal>\n</ng-template>\n\n<ng-template #modalContent>\n  <div\n    class=\"str-chat__message-bounce-prompt\"\n    data-testid=\"message-bounce-prompt\"\n  >\n    <div class=\"str-chat__message-bounce-prompt-header\">\n      {{\n        \"streamChat.This message did not meet our content guidelines\"\n          | translate\n      }}\n    </div>\n    <div class=\"str-chat__message-bounce-actions\">\n      <button\n        class=\"str-chat__message-bounce-edit\"\n        data-testid=\"message-bounce-edit\"\n        (click)=\"editMessage()\"\n        (keyup.enter)=\"editMessage()\"\n        type=\"button\"\n      >\n        {{ \"streamChat.Edit Message\" | translate }}\n      </button>\n      <button\n        class=\"str-chat__message-bounce-send\"\n        data-testid=\"message-bounce-send\"\n        (click)=\"resendMessage()\"\n        (keyup.enter)=\"resendMessage()\"\n      >\n        {{ \"streamChat.Send Anyway\" | translate }}\n      </button>\n      <button\n        class=\"str-chat__message-bounce-delete\"\n        data-testid=\"message-bounce-delete\"\n        (click)=\"deleteMessage()\"\n        (keyup.enter)=\"deleteMessage()\"\n      >\n        {{ \"streamChat.Delete\" | translate }}\n      </button>\n    </div>\n  </div>\n</ng-template>\n", components: [{ type: ModalComponent, selector: "stream-modal", inputs: ["isOpen", "content"], outputs: ["isOpenChange"] }], directives: [{ type: i8__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i8__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i8__namespace.AsyncPipe, "translate": i6__namespace.TranslatePipe } });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: MessageBouncePromptComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -5292,7 +5620,7 @@
         return ChannelComponent;
     }());
     ChannelComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: ChannelComponent, deps: [{ token: ChannelService }, { token: ThemeService }, { token: CustomTemplatesService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    ChannelComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: ChannelComponent, selector: "stream-channel", ngImport: i0__namespace, template: "<div\n  class=\"str-chat str-chat-channel messaging str-chat__channel str-chat__theme-{{\n    theme$ | async\n  }}\"\n>\n  <div\n    class=\"str-chat__container\"\n    *ngIf=\"\n      (isError$ | async) === false &&\n        (isInitializing$ | async) === false &&\n        (isActiveChannel$ | async) === true;\n      else noChannel\n    \"\n  >\n    <ng-container\n      *ngTemplateOutlet=\"\n        (customTemplatesService.editMessageFormTemplate$ | async) ||\n        defaultEditMessageForm\n      \"\n    ></ng-container>\n    <ng-template #defaultEditMessageForm>\n      <stream-edit-message-form></stream-edit-message-form>\n    </ng-template>\n    <ng-container\n      *ngTemplateOutlet=\"\n        (customTemplatesService.messageBouncePromptTemplate$ | async) ||\n        defaultMessageBouncePrompt\n      \"\n    ></ng-container>\n    <ng-template #defaultMessageBouncePrompt>\n      <stream-message-bounce-prompt></stream-message-bounce-prompt>\n    </ng-template>\n    <div class=\"str-chat__main-panel\">\n      <ng-content></ng-content>\n    </div>\n    <ng-content\n      *ngIf=\"isActiveThread$ | async\"\n      select='[name=\"thread\"]'\n    ></ng-content>\n  </div>\n  <ng-template #noChannel>\n    <div\n      class=\"str-chat__empty-channel\"\n      *ngIf=\"\n        (isInitializing$ | async) === false &&\n        ((isError$ | async) === true || (isActiveChannel$ | async) === false)\n      \"\n    >\n      <stream-icon icon=\"chat-bubble\"></stream-icon>\n      <p class=\"str-chat__empty-channel-text\">\n        {{ \"streamChat.No chats here yet\u2026\" | translate }}\n      </p>\n      <div class=\"str-chat__empty-channel-notifications\">\n        <stream-notification-list></stream-notification-list>\n      </div>\n    </div>\n    <div\n      *ngIf=\"\n        (isInitializing$ | async) === true &&\n        (isError$ | async) === false &&\n        (isActiveChannel$ | async) === false\n      \"\n      class=\"str-chat__loading-channel\"\n    >\n      <div class=\"str-chat__loading-channel-header\">\n        <div class=\"str-chat__loading-channel-header-avatar\"></div>\n        <div class=\"str-chat__loading-channel-header-end\">\n          <div class=\"str-chat__loading-channel-header-name\"></div>\n          <div class=\"str-chat__loading-channel-header-info\"></div>\n        </div>\n      </div>\n      <div class=\"str-chat__loading-channel-message-list\">\n        <div class=\"str-chat__loading-channel-message\">\n          <div class=\"str-chat__loading-channel-message-avatar\"></div>\n          <div class=\"str-chat__loading-channel-message-end\">\n            <div class=\"str-chat__loading-channel-message-sender\"></div>\n            <div class=\"str-chat__loading-channel-message-last-row\">\n              <div class=\"str-chat__loading-channel-message-text\"></div>\n              <div class=\"str-chat__loading-channel-message-date\"></div>\n            </div>\n          </div>\n        </div>\n        <div class=\"str-chat__loading-channel-message\">\n          <div class=\"str-chat__loading-channel-message-avatar\"></div>\n          <div class=\"str-chat__loading-channel-message-end\">\n            <div class=\"str-chat__loading-channel-message-sender\"></div>\n            <div class=\"str-chat__loading-channel-message-last-row\">\n              <div class=\"str-chat__loading-channel-message-text\"></div>\n              <div class=\"str-chat__loading-channel-message-date\"></div>\n            </div>\n          </div>\n        </div>\n        <div class=\"str-chat__loading-channel-message\">\n          <div class=\"str-chat__loading-channel-message-avatar\"></div>\n          <div class=\"str-chat__loading-channel-message-end\">\n            <div class=\"str-chat__loading-channel-message-sender\"></div>\n            <div class=\"str-chat__loading-channel-message-last-row\">\n              <div class=\"str-chat__loading-channel-message-text\"></div>\n              <div class=\"str-chat__loading-channel-message-date\"></div>\n            </div>\n          </div>\n        </div>\n      </div>\n      <div class=\"str-chat__loading-channel-message-input-row\">\n        <div class=\"str-chat__loading-channel-message-input\"></div>\n        <div class=\"str-chat__loading-channel-message-send\"></div>\n      </div>\n    </div>\n  </ng-template>\n</div>\n", components: [{ type: EditMessageFormComponent, selector: "stream-edit-message-form" }, { type: MessageBouncePromptComponent, selector: "stream-message-bounce-prompt" }, { type: IconComponent, selector: "stream-icon", inputs: ["icon", "size"] }, { type: NotificationListComponent, selector: "stream-notification-list" }], directives: [{ type: i5__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "async": i5__namespace.AsyncPipe, "translate": i6__namespace.TranslatePipe } });
+    ChannelComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: ChannelComponent, selector: "stream-channel", ngImport: i0__namespace, template: "<div\n  class=\"str-chat str-chat-channel messaging str-chat__channel str-chat__theme-{{\n    theme$ | async\n  }}\"\n>\n  <div\n    class=\"str-chat__container\"\n    *ngIf=\"\n      (isError$ | async) === false &&\n        (isInitializing$ | async) === false &&\n        (isActiveChannel$ | async) === true;\n      else noChannel\n    \"\n  >\n    <ng-container\n      *ngTemplateOutlet=\"\n        (customTemplatesService.editMessageFormTemplate$ | async) ||\n        defaultEditMessageForm\n      \"\n    ></ng-container>\n    <ng-template #defaultEditMessageForm>\n      <stream-edit-message-form></stream-edit-message-form>\n    </ng-template>\n    <ng-container\n      *ngTemplateOutlet=\"\n        (customTemplatesService.messageBouncePromptTemplate$ | async) ||\n        defaultMessageBouncePrompt\n      \"\n    ></ng-container>\n    <ng-template #defaultMessageBouncePrompt>\n      <stream-message-bounce-prompt></stream-message-bounce-prompt>\n    </ng-template>\n    <div class=\"str-chat__main-panel\">\n      <ng-content></ng-content>\n    </div>\n    <ng-content\n      *ngIf=\"isActiveThread$ | async\"\n      select='[name=\"thread\"]'\n    ></ng-content>\n  </div>\n  <ng-template #noChannel>\n    <div\n      class=\"str-chat__empty-channel\"\n      *ngIf=\"\n        (isInitializing$ | async) === false &&\n        ((isError$ | async) === true || (isActiveChannel$ | async) === false)\n      \"\n    >\n      <stream-icon icon=\"chat-bubble\"></stream-icon>\n      <p class=\"str-chat__empty-channel-text\">\n        {{ \"streamChat.No chats here yet\u2026\" | translate }}\n      </p>\n      <div class=\"str-chat__empty-channel-notifications\">\n        <stream-notification-list></stream-notification-list>\n      </div>\n    </div>\n    <div\n      *ngIf=\"\n        (isInitializing$ | async) === true &&\n        (isError$ | async) === false &&\n        (isActiveChannel$ | async) === false\n      \"\n      class=\"str-chat__loading-channel\"\n    >\n      <div class=\"str-chat__loading-channel-header\">\n        <div class=\"str-chat__loading-channel-header-avatar\"></div>\n        <div class=\"str-chat__loading-channel-header-end\">\n          <div class=\"str-chat__loading-channel-header-name\"></div>\n          <div class=\"str-chat__loading-channel-header-info\"></div>\n        </div>\n      </div>\n      <div class=\"str-chat__loading-channel-message-list\">\n        <div class=\"str-chat__loading-channel-message\">\n          <div class=\"str-chat__loading-channel-message-avatar\"></div>\n          <div class=\"str-chat__loading-channel-message-end\">\n            <div class=\"str-chat__loading-channel-message-sender\"></div>\n            <div class=\"str-chat__loading-channel-message-last-row\">\n              <div class=\"str-chat__loading-channel-message-text\"></div>\n              <div class=\"str-chat__loading-channel-message-date\"></div>\n            </div>\n          </div>\n        </div>\n        <div class=\"str-chat__loading-channel-message\">\n          <div class=\"str-chat__loading-channel-message-avatar\"></div>\n          <div class=\"str-chat__loading-channel-message-end\">\n            <div class=\"str-chat__loading-channel-message-sender\"></div>\n            <div class=\"str-chat__loading-channel-message-last-row\">\n              <div class=\"str-chat__loading-channel-message-text\"></div>\n              <div class=\"str-chat__loading-channel-message-date\"></div>\n            </div>\n          </div>\n        </div>\n        <div class=\"str-chat__loading-channel-message\">\n          <div class=\"str-chat__loading-channel-message-avatar\"></div>\n          <div class=\"str-chat__loading-channel-message-end\">\n            <div class=\"str-chat__loading-channel-message-sender\"></div>\n            <div class=\"str-chat__loading-channel-message-last-row\">\n              <div class=\"str-chat__loading-channel-message-text\"></div>\n              <div class=\"str-chat__loading-channel-message-date\"></div>\n            </div>\n          </div>\n        </div>\n      </div>\n      <div class=\"str-chat__loading-channel-message-input-row\">\n        <div class=\"str-chat__loading-channel-message-input\"></div>\n        <div class=\"str-chat__loading-channel-message-send\"></div>\n      </div>\n    </div>\n  </ng-template>\n</div>\n", components: [{ type: EditMessageFormComponent, selector: "stream-edit-message-form" }, { type: MessageBouncePromptComponent, selector: "stream-message-bounce-prompt" }, { type: IconComponent, selector: "stream-icon", inputs: ["icon", "size"] }, { type: NotificationListComponent, selector: "stream-notification-list" }], directives: [{ type: i8__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "async": i8__namespace.AsyncPipe, "translate": i6__namespace.TranslatePipe } });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: ChannelComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -5484,7 +5812,7 @@
         return ChannelHeaderComponent;
     }());
     ChannelHeaderComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: ChannelHeaderComponent, deps: [{ token: ChannelService }, { token: ChannelListToggleService }, { 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 str-chat__channel-header\">\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  <ng-content></ng-content>\n  <stream-avatar-placeholder\n    imageUrl=\"{{ activeChannel?.data?.image }}\"\n    name=\"{{ avatarName }}\"\n    type=\"channel\"\n    location=\"channel-header\"\n    [channel]=\"activeChannel\"\n    [size]=\"40\"\n  ></stream-avatar-placeholder>\n  <div class=\"str-chat__header-livestream-left str-chat__channel-header-end\">\n    <p\n      data-testid=\"name\"\n      class=\"\n        str-chat__header-livestream-left--title str-chat__channel-header-title\n      \"\n    >\n      {{ displayText }}\n    </p>\n    <ng-container\n      *ngTemplateOutlet=\"\n        channelHeaderInfoTemplate || defaultChannelInfo;\n        context: getChannelInfoContext()\n      \"\n    ></ng-container>\n    <ng-template #defaultChannelInfo>\n      <p\n        data-testid=\"info\"\n        class=\"\n          str-chat__header-livestream-left--members\n          str-chat__channel-header-info\n        \"\n      >\n        {{'streamChat.{{ memberCount }} members' | translate:memberCountParam}}\n        {{canReceiveConnectEvents ? ('streamChat.{{ watcherCount }} online' |\n        translate:watcherCountParam) : ''}}\n      </p>\n    </ng-template>\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", "location", "channel", "user", "type", "initialsType", "showOnlineIndicator"] }], directives: [{ type: i5__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i5__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "translate": i6__namespace.TranslatePipe } });
+    ChannelHeaderComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: ChannelHeaderComponent, selector: "stream-channel-header", ngImport: i0__namespace, template: "<div class=\"str-chat__header-livestream str-chat__channel-header\">\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  <ng-content></ng-content>\n  <stream-avatar-placeholder\n    imageUrl=\"{{ activeChannel?.data?.image }}\"\n    name=\"{{ avatarName }}\"\n    type=\"channel\"\n    location=\"channel-header\"\n    [channel]=\"activeChannel\"\n    [size]=\"40\"\n  ></stream-avatar-placeholder>\n  <div class=\"str-chat__header-livestream-left str-chat__channel-header-end\">\n    <p\n      data-testid=\"name\"\n      class=\"\n        str-chat__header-livestream-left--title str-chat__channel-header-title\n      \"\n    >\n      {{ displayText }}\n    </p>\n    <ng-container\n      *ngTemplateOutlet=\"\n        channelHeaderInfoTemplate || defaultChannelInfo;\n        context: getChannelInfoContext()\n      \"\n    ></ng-container>\n    <ng-template #defaultChannelInfo>\n      <p\n        data-testid=\"info\"\n        class=\"\n          str-chat__header-livestream-left--members\n          str-chat__channel-header-info\n        \"\n      >\n        {{'streamChat.{{ memberCount }} members' | translate:memberCountParam}}\n        {{canReceiveConnectEvents ? ('streamChat.{{ watcherCount }} online' |\n        translate:watcherCountParam) : ''}}\n      </p>\n    </ng-template>\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", "location", "channel", "user", "type", "initialsType", "showOnlineIndicator"] }], directives: [{ type: i8__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i8__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "translate": i6__namespace.TranslatePipe } });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: ChannelHeaderComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -5640,7 +5968,7 @@
         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 }, { token: ChatClientService }, { token: MessageService }], 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 str-chat__channel-preview\"\n  [class.str-chat__channel-preview-messenger--active]=\"isActive\"\n  [class.str-chat__channel-preview--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      name=\"{{ avatarName }}\"\n      imageUrl=\"{{ avatarImage }}\"\n      type=\"channel\"\n      [channel]=\"channel\"\n      location=\"channel-preview\"\n      [size]=\"49\"\n    ></stream-avatar-placeholder>\n  </div>\n  <div\n    class=\"\n      str-chat__channel-preview-messenger--right str-chat__channel-preview-end\n    \"\n  >\n    <div class=\"str-chat__channel-preview-end-first-row\">\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=\"unread-badge\"\n        *ngIf=\"unreadCount\"\n        class=\"str-chat__channel-preview-unread-badge\"\n      >\n        {{ unreadCount }}\n      </div>\n    </div>\n    <div\n      data-testid=\"latest-message\"\n      class=\"str-chat__channel-preview-messenger--last-message\"\n    >\n      <ng-container *ngIf=\"displayAs === 'text'; else asHTML\">\n        {{ latestMessage | translate }}\n      </ng-container>\n      <ng-template #asHTML>\n        <span\n          data-testid=\"html-content\"\n          [innerHTML]=\"latestMessage | translate\"\n        ></span>\n      </ng-template>\n    </div>\n  </div>\n</button>\n", components: [{ type: AvatarPlaceholderComponent, selector: "stream-avatar-placeholder", inputs: ["name", "imageUrl", "size", "location", "channel", "user", "type", "initialsType", "showOnlineIndicator"] }], directives: [{ type: i5__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "translate": i6__namespace.TranslatePipe } });
+    ChannelPreviewComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: ChannelPreviewComponent, selector: "stream-channel-preview", inputs: { channel: "channel" }, ngImport: i0__namespace, template: "<button\n  class=\"str-chat__channel-preview-messenger str-chat__channel-preview\"\n  [class.str-chat__channel-preview-messenger--active]=\"isActive\"\n  [class.str-chat__channel-preview--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      name=\"{{ avatarName }}\"\n      imageUrl=\"{{ avatarImage }}\"\n      type=\"channel\"\n      [channel]=\"channel\"\n      location=\"channel-preview\"\n      [size]=\"49\"\n    ></stream-avatar-placeholder>\n  </div>\n  <div\n    class=\"\n      str-chat__channel-preview-messenger--right str-chat__channel-preview-end\n    \"\n  >\n    <div class=\"str-chat__channel-preview-end-first-row\">\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=\"unread-badge\"\n        *ngIf=\"unreadCount\"\n        class=\"str-chat__channel-preview-unread-badge\"\n      >\n        {{ unreadCount }}\n      </div>\n    </div>\n    <div\n      data-testid=\"latest-message\"\n      class=\"str-chat__channel-preview-messenger--last-message\"\n    >\n      <ng-container *ngIf=\"displayAs === 'text'; else asHTML\">\n        {{ latestMessage | translate }}\n      </ng-container>\n      <ng-template #asHTML>\n        <span\n          data-testid=\"html-content\"\n          [innerHTML]=\"latestMessage | translate\"\n        ></span>\n      </ng-template>\n    </div>\n  </div>\n</button>\n", components: [{ type: AvatarPlaceholderComponent, selector: "stream-avatar-placeholder", inputs: ["name", "imageUrl", "size", "location", "channel", "user", "type", "initialsType", "showOnlineIndicator"] }], directives: [{ type: i8__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "translate": i6__namespace.TranslatePipe } });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: ChannelPreviewComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -5702,7 +6030,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 }, { token: ThemeService }], 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 str-chat-channel-list messaging str-chat__theme-{{\n    theme$ | async\n  }}\"\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      <ng-content select=\"[channel-list-top]\"></ng-content>\n      <div\n        class=\"str-chat__channel-list-empty\"\n        *ngIf=\"!(channels$ | async)?.length\"\n      >\n        <stream-icon icon=\"chat-bubble\"></stream-icon>\n        <p data-testid=\"empty-channel-list-indicator\">\n          {{ \"streamChat.You have no channels currently\" | translate }}\n        </p>\n      </div>\n      <p\n        *ngIf=\"!(channels$ | async)?.length\"\n        class=\"str-chat__channel-list-empty-v1\"\n        data-testid=\"empty-channel-list-indicator\"\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: { channel: 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 str-chat__cta-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      <ng-content select=\"[channel-list-bottom]\"></ng-content>\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\n    class=\"str-chat__loading-channels-item str-chat__channel-preview-loading\"\n  >\n    <div class=\"str-chat__loading-channels-avatar\"></div>\n    <div\n      class=\"\n        str-chat__loading-channels-meta str-chat__channel-preview-end-loading\n      \"\n    >\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: IconComponent, selector: "stream-icon", inputs: ["icon", "size"] }, { 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: i5__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "async": i5__namespace.AsyncPipe, "translate": i6__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 str-chat-channel-list messaging str-chat__theme-{{\n    theme$ | async\n  }}\"\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      <ng-content select=\"[channel-list-top]\"></ng-content>\n      <div\n        class=\"str-chat__channel-list-empty\"\n        *ngIf=\"!(channels$ | async)?.length\"\n      >\n        <stream-icon icon=\"chat-bubble\"></stream-icon>\n        <p data-testid=\"empty-channel-list-indicator\">\n          {{ \"streamChat.You have no channels currently\" | translate }}\n        </p>\n      </div>\n      <p\n        *ngIf=\"!(channels$ | async)?.length\"\n        class=\"str-chat__channel-list-empty-v1\"\n        data-testid=\"empty-channel-list-indicator\"\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: { channel: 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 str-chat__cta-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      <ng-content select=\"[channel-list-bottom]\"></ng-content>\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\n    class=\"str-chat__loading-channels-item str-chat__channel-preview-loading\"\n  >\n    <div class=\"str-chat__loading-channels-avatar\"></div>\n    <div\n      class=\"\n        str-chat__loading-channels-meta str-chat__channel-preview-end-loading\n      \"\n    >\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: IconComponent, selector: "stream-icon", inputs: ["icon", "size"] }, { 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: i8__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i8__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "async": i8__namespace.AsyncPipe, "translate": i6__namespace.TranslatePipe } });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: ChannelListComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -6077,7 +6405,7 @@
         return MessageReactionsComponent;
     }());
     MessageReactionsComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: MessageReactionsComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }, { token: ChannelService }, { token: MessageReactionsService }, { token: CustomTemplatesService }, { token: ThemeService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    MessageReactionsComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: MessageReactionsComponent, selector: "stream-message-reactions", inputs: { messageId: "messageId", messageReactionCounts: "messageReactionCounts", isSelectorOpen: "isSelectorOpen", latestReactions: "latestReactions", ownReactions: "ownReactions" }, outputs: { isSelectorOpenChange: "isSelectorOpenChange" }, viewQueries: [{ propertyName: "selectorContainer", first: true, predicate: ["selectorContainer"], descendants: true }, { propertyName: "selectorTooltip", first: true, predicate: ["selectorTooltip"], descendants: true }], usesOnChanges: true, ngImport: i0__namespace, template: "<div\n  *ngIf=\"existingReactions.length > 0\"\n  class=\"str-chat__reaction-list str-chat__message-reactions-container\"\n  [class.str-chat__reaction-list--reverse]=\"true\"\n  [class.str-chat__reaction-list-hidden]=\"isSelectorOpen\"\n  data-testid=\"reaction-list\"\n>\n  <ul class=\"str-chat__message-reactions\">\n    <li\n      class=\"str-chat__message-reaction\"\n      *ngFor=\"\n        let reactionType of existingReactions;\n        trackBy: trackByMessageReaction\n      \"\n      [ngStyle]=\"{ cursor: shouldHandleReactionClick ? 'pointer' : 'default' }\"\n      [class.str-chat__message-reaction-own]=\"isOwnReaction(reactionType)\"\n      data-testclass=\"emoji\"\n      (click)=\"reactionSelected(reactionType)\"\n      (keyup.enter)=\"reactionSelected(reactionType)\"\n    >\n      <span class=\"emoji str-chat__message-reaction-emoji\">\n        {{ getEmojiByReaction(reactionType) }}&nbsp;\n      </span>\n      <span\n        data-testclass=\"reaction-list-reaction-count\"\n        class=\"str-chat__message-reaction-count\"\n      >\n        {{ messageReactionCounts[reactionType] }}\n      </span>\n    </li>\n    <li>\n      <span\n        data-testid=\"reactions-count\"\n        class=\"str-chat__reaction-list--counter\"\n        >{{ reactionsCount }}</span\n      >\n    </li>\n  </ul>\n</div>\n\n<div\n  #selectorContainer\n  class=\"str-chat__reaction-selector str-chat__message-reaction-selector\"\n  *ngIf=\"isSelectorOpen\"\n  data-testid=\"reaction-selector\"\n>\n  <div\n    *ngIf=\"tooltipText\"\n    data-testid=\"tooltip\"\n    #selectorTooltip\n    class=\"str-chat__reaction-selector-tooltip\"\n    [ngStyle]=\"{\n      left: tooltipPositions?.tooltip + 'px',\n      visibility: tooltipPositions ? 'visible' : 'hidden'\n    }\"\n  >\n    <div\n      class=\"arrow\"\n      [ngStyle]=\"{ left: tooltipPositions?.arrow + 'px' }\"\n    ></div>\n    <span class=\"latest-user-username\">\n      {{ tooltipText }}\n    </span>\n  </div>\n  <ul\n    class=\"str-chat__message-reactions-list str-chat__message-reactions-options\"\n  >\n    <li\n      class=\"\n        str-chat__message-reactions-option\n        str-chat__message-reactions-list-item\n        str-chat__emoji\n      \"\n      *ngFor=\"\n        let reactionType of reactionOptions;\n        trackBy: trackByMessageReaction\n      \"\n      [class.str-chat__message-reactions-option-selected]=\"\n        isOwnReaction(reactionType)\n      \"\n      data-testclass=\"emoji-option\"\n      (click)=\"react(reactionType)\"\n      (keyup.enter)=\"react(reactionType)\"\n    >\n      <div\n        *ngIf=\"getLatestUserByReaction(reactionType) as user\"\n        class=\"latest-user str-chat__message-reactions-last-user\"\n        (click)=\"hideTooltip()\"\n        (keyup.enter)=\"hideTooltip()\"\n        (mouseenter)=\"showTooltip($event, reactionType)\"\n        (mouseleave)=\"hideTooltip()\"\n        attr.data-testid=\"{{ reactionType }}-last-user\"\n      >\n        <stream-avatar-placeholder\n          attr.data-testid=\"{{ reactionType }}-avatar\"\n          [imageUrl]=\"user.image\"\n          [name]=\"user.name || user.id\"\n          [size]=\"20\"\n          location=\"reaction\"\n        ></stream-avatar-placeholder>\n      </div>\n      <span\n        class=\"\n          emoji\n          str-chat__emoji-selector-emoji-angular\n          str-chat__message-reaction-emoji\n        \"\n      >\n        {{ getEmojiByReaction(reactionType) }}\n      </span>\n      <span\n        *ngIf=\"\n          messageReactionCounts[reactionType] &&\n          messageReactionCounts[reactionType]! > 0\n        \"\n        class=\"str-chat__message-reactions-list-item__count\"\n        attr.data-testid=\"{{ reactionType }}-reaction-count\"\n      >\n        {{ messageReactionCounts[reactionType] }}\n      </span>\n    </li>\n  </ul>\n</div>\n\n<ng-container *ngIf=\"selectedReactionType\">\n  <ng-container\n    *ngTemplateOutlet=\"\n      (customTemplatesService.modalTemplate$ | async) || defaultModal;\n      context: {\n        isOpen: !!selectedReactionType,\n        messageId: messageId,\n        reactionType: selectedReactionType,\n        isOpenChangeHandler: isOpenChange,\n        content: modalContent\n      }\n    \"\n  ></ng-container>\n</ng-container>\n\n<ng-template\n  #defaultModal\n  let-isOpen=\"isOpen\"\n  let-messageId=\"messageId\"\n  let-reactionType=\"reactionType\"\n  let-isOpenChangeHandler=\"isOpenChangeHandler\"\n  let-content=\"content\"\n>\n  <stream-modal\n    class=\"str-chat__message-reactions-details-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__message-reactions-details\">\n    <div class=\"str-chat__message-reactions-details-reaction-types\">\n      <div\n        class=\"str-chat__message-reactions-details-reaction-type\"\n        *ngFor=\"\n          let reactionType of existingReactions;\n          trackBy: trackByMessageReaction\n        \"\n        [ngStyle]=\"{\n          cursor: shouldHandleReactionClick ? 'pointer' : 'default'\n        }\"\n        attr.data-testid=\"reaction-details-selector-{{ reactionType }}\"\n        [class.str-chat__message-reactions-details-reaction-type--selected]=\"\n          reactionType === selectedReactionType\n        \"\n        (click)=\"selectedReactionType = reactionType; allUsers.scrollTop = 0\"\n        (keyup.enter)=\"\n          selectedReactionType = reactionType; allUsers.scrollTop = 0\n        \"\n      >\n        <span class=\"emoji str-chat__message-reaction-emoji\">\n          {{ getEmojiByReaction(reactionType) }}&nbsp;\n        </span>\n        <span class=\"str-chat__message-reaction-count\">\n          {{ messageReactionCounts[reactionType] }}\n        </span>\n      </div>\n    </div>\n    <div\n      class=\"\n        emoji\n        str-chat__message-reaction-emoji str-chat__message-reaction-emoji-big\n      \"\n    >\n      {{ getEmojiByReaction(selectedReactionType!) }}\n    </div>\n    <div\n      #allUsers\n      data-testid=\"all-reacting-users\"\n      class=\"str-chat__message-reactions-details-reacting-users\"\n    >\n      <stream-loading-indicator\n        *ngIf=\"isLoading; else reactions\"\n      ></stream-loading-indicator>\n      <ng-template #reactions>\n        <div\n          class=\"str-chat__message-reactions-details-reacting-user\"\n          *ngFor=\"\n            let user of getAllUsersByReaction(selectedReactionType);\n            trackBy: trackByUserId\n          \"\n        >\n          <stream-avatar-placeholder\n            data-testclass=\"avatar\"\n            class=\"str-chat__avatar str-chat__avatar--circle\"\n            [size]=\"30\"\n            [imageUrl]=\"user.image\"\n            [name]=\"user.name\"\n            type=\"user\"\n            location=\"reaction\"\n            [user]=\"user\"\n          ></stream-avatar-placeholder>\n          <span\n            data-testclass=\"reaction-user-username\"\n            class=\"str-chat__user-item--name\"\n            >{{ user.name }}</span\n          >\n        </div>\n      </ng-template>\n    </div>\n  </div>\n</ng-template>\n", components: [{ type: AvatarPlaceholderComponent, selector: "stream-avatar-placeholder", inputs: ["name", "imageUrl", "size", "location", "channel", "user", "type", "initialsType", "showOnlineIndicator"] }, { type: ModalComponent, selector: "stream-modal", inputs: ["isOpen", "content"], outputs: ["isOpenChange"] }, { type: LoadingIndicatorComponent, selector: "stream-loading-indicator", inputs: ["size", "color"] }], directives: [{ type: i5__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i5__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "async": i5__namespace.AsyncPipe } });
+    MessageReactionsComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: MessageReactionsComponent, selector: "stream-message-reactions", inputs: { messageId: "messageId", messageReactionCounts: "messageReactionCounts", isSelectorOpen: "isSelectorOpen", latestReactions: "latestReactions", ownReactions: "ownReactions" }, outputs: { isSelectorOpenChange: "isSelectorOpenChange" }, viewQueries: [{ propertyName: "selectorContainer", first: true, predicate: ["selectorContainer"], descendants: true }, { propertyName: "selectorTooltip", first: true, predicate: ["selectorTooltip"], descendants: true }], usesOnChanges: true, ngImport: i0__namespace, template: "<div\n  *ngIf=\"existingReactions.length > 0\"\n  class=\"str-chat__reaction-list str-chat__message-reactions-container\"\n  [class.str-chat__reaction-list--reverse]=\"true\"\n  [class.str-chat__reaction-list-hidden]=\"isSelectorOpen\"\n  data-testid=\"reaction-list\"\n>\n  <ul class=\"str-chat__message-reactions\">\n    <li\n      class=\"str-chat__message-reaction\"\n      *ngFor=\"\n        let reactionType of existingReactions;\n        trackBy: trackByMessageReaction\n      \"\n      [ngStyle]=\"{ cursor: shouldHandleReactionClick ? 'pointer' : 'default' }\"\n      [class.str-chat__message-reaction-own]=\"isOwnReaction(reactionType)\"\n      data-testclass=\"emoji\"\n      (click)=\"reactionSelected(reactionType)\"\n      (keyup.enter)=\"reactionSelected(reactionType)\"\n    >\n      <span class=\"emoji str-chat__message-reaction-emoji\">\n        {{ getEmojiByReaction(reactionType) }}&nbsp;\n      </span>\n      <span\n        data-testclass=\"reaction-list-reaction-count\"\n        class=\"str-chat__message-reaction-count\"\n      >\n        {{ messageReactionCounts[reactionType] }}\n      </span>\n    </li>\n    <li>\n      <span\n        data-testid=\"reactions-count\"\n        class=\"str-chat__reaction-list--counter\"\n        >{{ reactionsCount }}</span\n      >\n    </li>\n  </ul>\n</div>\n\n<div\n  #selectorContainer\n  class=\"str-chat__reaction-selector str-chat__message-reaction-selector\"\n  *ngIf=\"isSelectorOpen\"\n  data-testid=\"reaction-selector\"\n>\n  <div\n    *ngIf=\"tooltipText\"\n    data-testid=\"tooltip\"\n    #selectorTooltip\n    class=\"str-chat__reaction-selector-tooltip\"\n    [ngStyle]=\"{\n      left: tooltipPositions?.tooltip + 'px',\n      visibility: tooltipPositions ? 'visible' : 'hidden'\n    }\"\n  >\n    <div\n      class=\"arrow\"\n      [ngStyle]=\"{ left: tooltipPositions?.arrow + 'px' }\"\n    ></div>\n    <span class=\"latest-user-username\">\n      {{ tooltipText }}\n    </span>\n  </div>\n  <ul\n    class=\"str-chat__message-reactions-list str-chat__message-reactions-options\"\n  >\n    <li\n      class=\"\n        str-chat__message-reactions-option\n        str-chat__message-reactions-list-item\n        str-chat__emoji\n      \"\n      *ngFor=\"\n        let reactionType of reactionOptions;\n        trackBy: trackByMessageReaction\n      \"\n      [class.str-chat__message-reactions-option-selected]=\"\n        isOwnReaction(reactionType)\n      \"\n      data-testclass=\"emoji-option\"\n      (click)=\"react(reactionType)\"\n      (keyup.enter)=\"react(reactionType)\"\n    >\n      <div\n        *ngIf=\"getLatestUserByReaction(reactionType) as user\"\n        class=\"latest-user str-chat__message-reactions-last-user\"\n        (click)=\"hideTooltip()\"\n        (keyup.enter)=\"hideTooltip()\"\n        (mouseenter)=\"showTooltip($event, reactionType)\"\n        (mouseleave)=\"hideTooltip()\"\n        attr.data-testid=\"{{ reactionType }}-last-user\"\n      >\n        <stream-avatar-placeholder\n          attr.data-testid=\"{{ reactionType }}-avatar\"\n          [imageUrl]=\"user.image\"\n          [name]=\"user.name || user.id\"\n          [size]=\"20\"\n          location=\"reaction\"\n        ></stream-avatar-placeholder>\n      </div>\n      <span\n        class=\"\n          emoji\n          str-chat__emoji-selector-emoji-angular\n          str-chat__message-reaction-emoji\n        \"\n      >\n        {{ getEmojiByReaction(reactionType) }}\n      </span>\n      <span\n        *ngIf=\"\n          messageReactionCounts[reactionType] &&\n          messageReactionCounts[reactionType]! > 0\n        \"\n        class=\"str-chat__message-reactions-list-item__count\"\n        attr.data-testid=\"{{ reactionType }}-reaction-count\"\n      >\n        {{ messageReactionCounts[reactionType] }}\n      </span>\n    </li>\n  </ul>\n</div>\n\n<ng-container *ngIf=\"selectedReactionType\">\n  <ng-container\n    *ngTemplateOutlet=\"\n      (customTemplatesService.modalTemplate$ | async) || defaultModal;\n      context: {\n        isOpen: !!selectedReactionType,\n        messageId: messageId,\n        reactionType: selectedReactionType,\n        isOpenChangeHandler: isOpenChange,\n        content: modalContent\n      }\n    \"\n  ></ng-container>\n</ng-container>\n\n<ng-template\n  #defaultModal\n  let-isOpen=\"isOpen\"\n  let-messageId=\"messageId\"\n  let-reactionType=\"reactionType\"\n  let-isOpenChangeHandler=\"isOpenChangeHandler\"\n  let-content=\"content\"\n>\n  <stream-modal\n    class=\"str-chat__message-reactions-details-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__message-reactions-details\">\n    <div class=\"str-chat__message-reactions-details-reaction-types\">\n      <div\n        class=\"str-chat__message-reactions-details-reaction-type\"\n        *ngFor=\"\n          let reactionType of existingReactions;\n          trackBy: trackByMessageReaction\n        \"\n        [ngStyle]=\"{\n          cursor: shouldHandleReactionClick ? 'pointer' : 'default'\n        }\"\n        attr.data-testid=\"reaction-details-selector-{{ reactionType }}\"\n        [class.str-chat__message-reactions-details-reaction-type--selected]=\"\n          reactionType === selectedReactionType\n        \"\n        (click)=\"selectedReactionType = reactionType; allUsers.scrollTop = 0\"\n        (keyup.enter)=\"\n          selectedReactionType = reactionType; allUsers.scrollTop = 0\n        \"\n      >\n        <span class=\"emoji str-chat__message-reaction-emoji\">\n          {{ getEmojiByReaction(reactionType) }}&nbsp;\n        </span>\n        <span class=\"str-chat__message-reaction-count\">\n          {{ messageReactionCounts[reactionType] }}\n        </span>\n      </div>\n    </div>\n    <div\n      class=\"\n        emoji\n        str-chat__message-reaction-emoji str-chat__message-reaction-emoji-big\n      \"\n    >\n      {{ getEmojiByReaction(selectedReactionType!) }}\n    </div>\n    <div\n      #allUsers\n      data-testid=\"all-reacting-users\"\n      class=\"str-chat__message-reactions-details-reacting-users\"\n    >\n      <stream-loading-indicator\n        *ngIf=\"isLoading; else reactions\"\n      ></stream-loading-indicator>\n      <ng-template #reactions>\n        <div\n          class=\"str-chat__message-reactions-details-reacting-user\"\n          *ngFor=\"\n            let user of getAllUsersByReaction(selectedReactionType);\n            trackBy: trackByUserId\n          \"\n        >\n          <stream-avatar-placeholder\n            data-testclass=\"avatar\"\n            class=\"str-chat__avatar str-chat__avatar--circle\"\n            [size]=\"30\"\n            [imageUrl]=\"user.image\"\n            [name]=\"user.name\"\n            type=\"user\"\n            location=\"reaction\"\n            [user]=\"user\"\n          ></stream-avatar-placeholder>\n          <span\n            data-testclass=\"reaction-user-username\"\n            class=\"str-chat__user-item--name\"\n            >{{ user.name }}</span\n          >\n        </div>\n      </ng-template>\n    </div>\n  </div>\n</ng-template>\n", components: [{ type: AvatarPlaceholderComponent, selector: "stream-avatar-placeholder", inputs: ["name", "imageUrl", "size", "location", "channel", "user", "type", "initialsType", "showOnlineIndicator"] }, { type: ModalComponent, selector: "stream-modal", inputs: ["isOpen", "content"], outputs: ["isOpenChange"] }, { type: LoadingIndicatorComponent, selector: "stream-loading-indicator", inputs: ["size", "color"] }], directives: [{ type: i8__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i8__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i8__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "async": i8__namespace.AsyncPipe } });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: MessageReactionsComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -6502,7 +6830,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 }, { token: ThemeService }, { token: DateParserService }, { token: i0__namespace.NgZone }, { token: MessageService }, { token: MessageActionsService }], 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", isHighlighted: "isHighlighted", customActions: "customActions" }, 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--other]=\"!isSentByCurrentUser\"\n  [class.str-chat__message-simple--me]=\"isSentByCurrentUser\"\n  [class.str-chat__message--has-attachment]=\"hasAttachment\"\n  [class.str-chat__message--with-reactions]=\"hasReactions\"\n  [class.str-chat__message--highlighted]=\"isHighlighted\"\n  [class.str-chat__message-with-thread-link]=\"shouldDisplayThreadLink\"\n  [class.str-chat__message-send-can-be-retried]=\"\n    (message?.status === 'failed' && message?.errorStatusCode !== 403) ||\n    (message?.type === 'error' && message?.moderation_details)\n  \"\n  data-testid=\"message-container\"\n>\n  <ng-container *ngIf=\"!message?.deleted_at; else deletedMessage\">\n    <ng-container *ngIf=\"message?.type !== 'system'; else systemMessage\">\n      <ng-container *ngIf=\"themeVersion === '1'\">\n        <ng-container *ngTemplateOutlet=\"messageStatus\"></ng-container>\n      </ng-container>\n      <stream-avatar-placeholder\n        data-testid=\"avatar\"\n        class=\"str-chat-angular__avatar-host str-chat__message-sender-avatar\"\n        [imageUrl]=\"message?.user?.image\"\n        [name]=\"message?.user?.name || message?.user?.id\"\n        type=\"user\"\n        location=\"message-sender\"\n        [user]=\"message?.user || undefined\"\n      ></stream-avatar-placeholder>\n      <div class=\"str-chat__message-inner\">\n        <div\n          class=\"str-chat__message-simple__actions str-chat__message-options\"\n          data-testid=\"message-options\"\n          [class.str-chat__message-actions-open]=\"isActionBoxOpen\"\n          *ngIf=\"areOptionsVisible\"\n        >\n          <div\n            data-testid=\"message-actions-container\"\n            #messageActionsToggle\n            class=\"\n              str-chat__message-actions-container\n              str-chat__message-simple__actions__action\n              str-chat__message-simple__actions__action--options\n            \"\n            [popper]=\"popperContent\"\n            [popperTrigger]=\"popperTriggerClick\"\n            [popperPlacement]=\"popperPlacementAuto\"\n            [popperHideOnScroll]=\"false\"\n            [popperHideOnClickOutside]=\"true\"\n            [popperHideOnMouseLeave]=\"false\"\n            [popperDisableAnimation]=\"true\"\n            (popperOnHidden)=\"isActionBoxOpen = false\"\n          >\n            <popper-content #popperContent>\n              <ng-template\n                #defaultMessageActionsBox\n                let-isOpen=\"isOpen\"\n                let-isMine=\"isMine\"\n                let-enabledActions=\"enabledActions\"\n                let-messageInput=\"message\"\n                let-customActions=\"customActions\"\n              >\n                <stream-message-actions-box\n                  (click)=\"messageActionsBoxClicked(popperContent)\"\n                  *ngIf=\"isOpen\"\n                  [isOpen]=\"isOpen\"\n                  [isMine]=\"isMine\"\n                  [enabledActions]=\"enabledActions\"\n                  [customActions]=\"customActions\"\n                  [message]=\"messageInput\"\n                ></stream-message-actions-box>\n              </ng-template>\n              <ng-container\n                *ngTemplateOutlet=\"\n                  (customTemplatesService.messageActionsBoxTemplate$ | async) ||\n                    defaultMessageActionsBox;\n                  context: getMessageActionsBoxContext()\n                \"\n              >\n              </ng-container>\n            </popper-content>\n            <div\n              class=\"str-chat__message-actions-box-button\"\n              data-testid=\"action-icon\"\n              (click)=\"messageActionsClicked()\"\n              (keyup.enter)=\"messageActionsClicked()\"\n              *ngIf=\"visibleMessageActionsCount > 0\"\n            >\n              <stream-icon-placeholder\n                icon=\"action-icon\"\n                class=\"str-chat__message-action-icon\"\n              ></stream-icon-placeholder>\n            </div>\n          </div>\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              str-chat__message-reply-in-thread-button\n            \"\n            data-testid=\"reply-in-thread\"\n            (click)=\"setAsActiveParentMessage()\"\n            (keyup.enter)=\"setAsActiveParentMessage()\"\n          >\n            <stream-icon-placeholder\n              class=\"str-chat__message-action-icon\"\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              str-chat__message-reactions-button\n            \"\n            data-testid=\"reaction-icon\"\n            (click)=\"isReactionSelectorOpen = !isReactionSelectorOpen\"\n            (keyup.enter)=\"isReactionSelectorOpen = !isReactionSelectorOpen\"\n          >\n            <stream-icon-placeholder\n              class=\"str-chat__message-action-icon\"\n              icon=\"reaction-icon\"\n            ></stream-icon-placeholder>\n          </div>\n        </div>\n        <div class=\"str-chat__message-reactions-host\">\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              (customTemplatesService.messageReactionsTemplate$ | async) ||\n                defaultMessageReactions;\n              context: getMessageReactionsContext()\n            \"\n          ></ng-container>\n        </div>\n        <div\n          class=\"str-chat__message-bubble str-chat-angular__message-bubble\"\n          [class.str-chat-angular__message-bubble--attachment-modal-open]=\"\n            imageAttachmentModalState === 'opened'\n          \"\n        >\n          <ng-container *ngIf=\"hasAttachment && !message?.quoted_message\">\n            <ng-container\n              *ngTemplateOutlet=\"attachmentsTemplate\"\n            ></ng-container>\n          </ng-container>\n          <div\n            class=\"str-chat__message-text\"\n            tabindex=\"0\"\n            *ngIf=\"message?.text || (message?.quoted_message && hasAttachment)\"\n            [class.str-chat__message-text--pointer-cursor]=\"\n              (message?.status === 'failed' &&\n                message?.errorStatusCode !== 403) ||\n              (this.message?.type === 'error' &&\n                this.message?.moderation_details) ||\n              message?.message_text_updated_at\n            \"\n            (click)=\"messageClicked()\"\n            (keyup.enter)=\"messageClicked()\"\n          >\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            >\n              <ng-container *ngTemplateOutlet=\"quotedMessage\"></ng-container>\n              <ng-container *ngIf=\"hasAttachment && message?.quoted_message\">\n                <ng-container\n                  *ngTemplateOutlet=\"attachmentsTemplate\"\n                ></ng-container>\n              </ng-container>\n              <div\n                data-testid=\"client-error-message\"\n                *ngIf=\"message?.type === 'error'\"\n                class=\"\n                  str-chat__simple-message--error-message\n                  str-chat__message--error-message\n                \"\n              >\n                <ng-container *ngIf=\"!message?.moderation_details\">{{\n                  \"streamChat.Error \u00B7 Unsent\" | translate\n                }}</ng-container>\n              </div>\n              <div\n                data-testid=\"error-message\"\n                *ngIf=\"message?.status === 'failed'\"\n                class=\"\n                  str-chat__simple-message--error-message\n                  str-chat__message--error-message\n                \"\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 data-testid=\"text\">\n                <p>\n                  <ng-container *ngIf=\"messageTextParts; else defaultContent\">\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                          <span class=\"str-chat__message-mention\">{{\n                            content\n                          }}</span>\n                        </ng-template>\n                        <ng-container\n                          *ngTemplateOutlet=\"\n                            (customTemplatesService.mentionTemplate$ | async) ||\n                              defaultMention;\n                            context: getMentionContext(part)\n                          \"\n                        ></ng-container>\n                      </ng-template>\n                    </ng-container>\n                  </ng-container>\n                  <ng-template #defaultContent>\n                    <ng-container *ngIf=\"displayAs === 'text'; else asHTML\">\n                      {{ messageText || \"\" }}\n                    </ng-container>\n                    <ng-template #asHTML\n                      ><span\n                        data-testid=\"html-content\"\n                        [innerHTML]=\"messageText\"\n                      ></span\n                    ></ng-template>\n                  </ng-template>\n                </p>\n              </div>\n            </div>\n          </div>\n          <stream-icon-placeholder\n            *ngIf=\"themeVersion === '2'\"\n            class=\"str-chat__message-error-icon\"\n            icon=\"error\"\n          ></stream-icon-placeholder>\n        </div>\n        <ng-container\n          *ngTemplateOutlet=\"\n            replyCountButton;\n            context: { position: 'inside-message-bubble' }\n          \"\n        ></ng-container>\n        <ng-container\n          *ngTemplateOutlet=\"\n            messageDateAndSender;\n            context: { position: 'inside-message-bubble' }\n          \"\n        ></ng-container>\n      </div>\n      <ng-container\n        *ngTemplateOutlet=\"\n          replyCountButton;\n          context: { position: 'outside-message-bubble', message: message }\n        \"\n      ></ng-container>\n\n      <ng-container\n        *ngTemplateOutlet=\"\n          messageDateAndSender;\n          context: { position: 'outside-message-bubble' }\n        \"\n      ></ng-container>\n    </ng-container>\n  </ng-container>\n</div>\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  <ng-container\n    *ngTemplateOutlet=\"\n      (customTemplatesService.systemMessageTemplate$ | async) ||\n        defaultSystemMessage;\n      context: getMessageContext()\n    \"\n  ></ng-container>\n  <ng-template #defaultSystemMessage let-messageInput=\"message\">\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>{{ messageInput?.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</ng-template>\n\n<ng-template #quotedMessage>\n  <div\n    *ngIf=\"message?.quoted_message\"\n    class=\"quoted-message str-chat__quoted-message-preview\"\n    data-testid=\"quoted-message-container\"\n    [class.mine]=\"isSentByCurrentUser\"\n    (click)=\"\n      jumpToMessage(\n        (message?.quoted_message)!.id,\n        message?.quoted_message?.parent_id\n      )\n    \"\n    (keyup.enter)=\"\n      jumpToMessage(\n        (message?.quoted_message)!.id,\n        message?.quoted_message?.parent_id\n      )\n    \"\n  >\n    <stream-avatar-placeholder\n      data-testid=\"qouted-message-avatar\"\n      class=\"str-chat-angular__avatar-host str-chat__message-sender-avatar\"\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      type=\"user\"\n      location=\"quoted-message-sender\"\n      [user]=\"message?.quoted_message?.user || undefined\"\n    ></stream-avatar-placeholder>\n    <div class=\"quoted-message-inner str-chat__quoted-message-bubble\">\n      <ng-container\n        *ngIf=\"\n          message?.quoted_message?.attachments &&\n          message?.quoted_message?.attachments?.length\n        \"\n      >\n        <ng-template\n          #defaultAttachments\n          let-messageId=\"messageId\"\n          let-attachments=\"attachments\"\n          let-parentMessageId=\"parentMessageId\"\n          let-imageModalStateChangeHandler=\"imageModalStateChangeHandler\"\n        >\n          <stream-attachment-list\n            [messageId]=\"messageId\"\n            [attachments]=\"attachments\"\n            [parentMessageId]=\"parentMessageId\"\n            (imageModalStateChange)=\"imageModalStateChangeHandler($event)\"\n          ></stream-attachment-list>\n        </ng-template>\n        <ng-container\n          *ngTemplateOutlet=\"\n            (customTemplatesService.attachmentListTemplate$ | async) ||\n              defaultAttachments;\n            context: getQuotedMessageAttachmentListContext()\n          \"\n        ></ng-container>\n      </ng-container>\n      <div\n        data-testid=\"quoted-message-text\"\n        [innerHTML]=\"\n          message?.quoted_message?.translation ||\n          message?.quoted_message?.html ||\n          message?.quoted_message?.text\n        \"\n      ></div>\n    </div>\n  </div>\n</ng-template>\n\n<!-- We need these markups in slightly different positions in theme-v1 and theme-v2, this soultion makes that possible without duplicating the code -->\n<ng-template #messageDateAndSender let-position=\"position\">\n  <ng-container\n    *ngIf=\"\n      (position === 'inside-message-bubble' && themeVersion === '1') ||\n      (position === 'outside-message-bubble' && themeVersion === '2')\n    \"\n  >\n    <div\n      class=\"str-chat__translation-notice\"\n      *ngIf=\"shouldDisplayTranslationNotice\"\n      data-testid=\"translation-notice\"\n    >\n      <button\n        data-testid=\"see-original\"\n        *ngIf=\"displayedMessageTextContent === 'translation'\"\n        (click)=\"displayOriginalMessage()\"\n        (keyup.enter)=\"displayOriginalMessage()\"\n        translate\n      >\n        streamChat.See original (automatically translated)\n      </button>\n      <button\n        data-testid=\"see-translation\"\n        *ngIf=\"displayedMessageTextContent === 'original'\"\n        (click)=\"displayTranslatedMessage()\"\n        (keyup.enter)=\"displayTranslatedMessage()\"\n        translate\n      >\n        streamChat.See translation\n      </button>\n    </div>\n    <ng-container\n      *ngIf=\"customTemplatesService.customMessageMetadataTemplate$ | async\"\n    >\n      <div class=\"str-chat__custom-message-metadata\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            (customTemplatesService.customMessageMetadataTemplate$ | async)!;\n            context: getMessageMetadataContext()\n          \"\n        ></ng-container>\n      </div>\n    </ng-container>\n    <div\n      class=\"\n        str-chat__message-data\n        str-chat__message-simple-data\n        str-chat__message-metadata\n      \"\n    >\n      <ng-container *ngIf=\"themeVersion === '2'\">\n        <ng-container *ngTemplateOutlet=\"messageStatus\"></ng-container>\n      </ng-container>\n      <span\n        data-testid=\"sender\"\n        *ngIf=\"!isSentByCurrentUser\"\n        class=\"str-chat__message-simple-name str-chat__message-sender-name\"\n      >\n        {{ message?.user?.name ? message?.user?.name : message?.user?.id }}\n      </span>\n      <span\n        data-testid=\"date\"\n        class=\"str-chat__message-simple-timestamp str-chat__message-simple-time\"\n      >\n        {{ parsedDate }}\n      </span>\n      <ng-container *ngIf=\"message?.message_text_updated_at\">\n        <span\n          data-testid=\"edited-flag\"\n          class=\"str-chat__mesage-simple-edited\"\n          translate\n          >streamChat.Edited</span\n        >\n        <div\n          data-testid=\"edited-timestamp\"\n          class=\"str-chat__message-edited-timestamp\"\n          [ngClass]=\"{\n            'str-chat__message-edited-timestamp--open': isEditedFlagOpened,\n            'str-chat__message-edited-timestamp--collapsed': !isEditedFlagOpened\n          }\"\n        >\n          <span translate>streamChat.Edited</span>\n          <time\n            dateTime=\"{{ message?.message_text_updated_at }}\"\n            title=\"{{ message?.message_text_updated_at }}\"\n          >\n            {{ pasedEditedDate }}\n          </time>\n        </div>\n      </ng-container>\n    </div>\n  </ng-container>\n</ng-template>\n\n<ng-template #messageStatus>\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' && isMessageDeliveredAndRead && canDisplayReadStatus;\n          else deliveredStatus\n        \"\n      >\n        <ng-container *ngTemplateOutlet=\"readStatus\"></ng-container>\n      </ng-container>\n    </ng-template>\n    <ng-template #deliveredStatus>\n      <ng-container\n        *ngTemplateOutlet=\"\n          (customTemplatesService.deliveredStatusTemplate$ | async) ||\n            defaultDeliveredStatus;\n          context: getDeliveredStatusContext()\n        \"\n      ></ng-container>\n    </ng-template>\n    <ng-template #defaultDeliveredStatus>\n      <span\n        *ngIf=\"mode === 'main'\"\n        class=\"\n          str-chat__message-simple-status\n          str-chat__message-simple-status-angular\n          str-chat__message-status\n        \"\n        data-testid=\"delivered-indicator\"\n        tabindex=\"0\"\n        [popper]=\"popperContent\"\n        [popperTrigger]=\"popperTriggerHover\"\n        [popperPlacement]=\"popperPlacementAuto\"\n        [popperHideOnScroll]=\"false\"\n        [popperHideOnClickOutside]=\"false\"\n        (hover)=\"$event.stopPropagation()\"\n      >\n        <popper-content #popperContent>\n          <div class=\"str-chat__tooltip str-chat__tooltip-angular\">\n            {{ \"streamChat.Delivered\" | translate }}\n          </div>\n        </popper-content>\n        <stream-icon-placeholder\n          data-testid=\"delivered-icon\"\n          icon=\"delivered-icon\"\n        ></stream-icon-placeholder>\n      </span>\n    </ng-template>\n    <ng-template #sendingStatus>\n      <ng-container\n        *ngTemplateOutlet=\"\n          (customTemplatesService.sendingStatusTemplate$ | async) ||\n            defaultSendingStatus;\n          context: getSendingStatusContext()\n        \"\n      ></ng-container>\n    </ng-template>\n    <ng-template #defaultSendingStatus>\n      <span\n        class=\"\n          str-chat__message-simple-status\n          str-chat__message-simple-status-angular\n          str-chat__message-status\n        \"\n        data-testid=\"sending-indicator\"\n        tabindex=\"0\"\n        [popper]=\"popperContent\"\n        [popperTrigger]=\"popperTriggerHover\"\n        [popperPlacement]=\"popperPlacementAuto\"\n        [popperHideOnScroll]=\"false\"\n        [popperHideOnClickOutside]=\"false\"\n        (hover)=\"$event.stopPropagation()\"\n      >\n        <popper-content #popperContent>\n          <div class=\"str-chat__tooltip str-chat__tooltip-angular\">\n            {{ \"streamChat.Sending...\" | translate }}\n          </div>\n        </popper-content>\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      <ng-container\n        *ngTemplateOutlet=\"\n          (customTemplatesService.readStatusTemplate$ | async) ||\n            defaultReadStatus;\n          context: getReadStatusContext()\n        \"\n      ></ng-container>\n    </ng-template>\n    <ng-template #defaultReadStatus>\n      <span\n        class=\"\n          str-chat__message-simple-status\n          str-chat__message-simple-status-angular\n          str-chat__message-status\n        \"\n        data-testid=\"read-indicator\"\n        tabindex=\"0\"\n        [popper]=\"popperContent\"\n        [popperTrigger]=\"popperTriggerHover\"\n        [popperPlacement]=\"popperPlacementAuto\"\n        [popperHideOnScroll]=\"false\"\n        [popperHideOnClickOutside]=\"false\"\n        (hover)=\"$event.stopPropagation()\"\n      >\n        <popper-content #popperContent>\n          <div\n            class=\"str-chat__tooltip str-chat__tooltip-angular\"\n            data-testid=\"read-by-tooltip\"\n          >\n            {{ readByText }}\n          </div>\n        </popper-content>\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          type=\"user\"\n          location=\"message-reader\"\n          [user]=\"lastReadUser\"\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-container>\n</ng-template>\n\n<ng-template #replyCountButton let-position=\"position\">\n  <div\n    *ngIf=\"\n      (position === 'inside-message-bubble' && themeVersion === '1') ||\n      (position === 'outside-message-bubble' && themeVersion === '2')\n    \"\n    class=\"\n      str-chat__message-simple-reply-button\n      str-chat__message-replies-count-button-wrapper\n    \"\n  >\n    <button\n      *ngIf=\"shouldDisplayThreadLink\"\n      class=\"str-chat__message-replies-count-button\"\n      data-testid=\"reply-count-button\"\n      (click)=\"setAsActiveParentMessage()\"\n    >\n      <stream-icon-placeholder\n        *ngIf=\"themeVersion === '1'\"\n        stream-icon-placeholder\n        icon=\"reply\"\n      ></stream-icon-placeholder>\n      {{message?.reply_count === 1 ? ('streamChat.1 reply' | translate) : ('streamChat.{{ replyCount }}\n      replies' | translate:replyCountParam)}}\n    </button>\n  </div>\n</ng-template>\n\n<ng-template #attachmentsTemplate>\n  <ng-template\n    #defaultAttachments\n    let-messageId=\"messageId\"\n    let-attachments=\"attachments\"\n    let-parentMessageId=\"parentMessageId\"\n    let-imageModalStateChangeHandler=\"imageModalStateChangeHandler\"\n  >\n    <stream-attachment-list\n      [messageId]=\"messageId\"\n      [attachments]=\"attachments\"\n      [parentMessageId]=\"parentMessageId\"\n      (imageModalStateChange)=\"imageModalStateChangeHandler($event)\"\n    ></stream-attachment-list>\n  </ng-template>\n  <ng-container\n    *ngTemplateOutlet=\"\n      (customTemplatesService.attachmentListTemplate$ | async) ||\n        defaultAttachments;\n      context: getAttachmentListContext()\n    \"\n  ></ng-container>\n</ng-template>\n", components: [{ type: AvatarPlaceholderComponent, selector: "stream-avatar-placeholder", inputs: ["name", "imageUrl", "size", "location", "channel", "user", "type", "initialsType", "showOnlineIndicator"] }, { type: i9__namespace.NgxPopperjsContentComponent, selector: "popper-content", exportAs: ["ngxPopperjsContent"] }, { type: MessageActionsBoxComponent, selector: "stream-message-actions-box", inputs: ["isOpen", "isMine", "message", "enabledActions", "customActions"], 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", "parentMessageId", "attachments"], outputs: ["imageModalStateChange"] }, { type: LoadingIndicatorPlaceholderComponent, selector: "stream-loading-indicator-placeholder", inputs: ["size", "color"] }], directives: [{ type: i5__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i9__namespace.NgxPopperjsDirective, selector: "[popper]", inputs: ["popperTimeout", "popperTimeoutAfterShow", "popperApplyClass", "popper", "popperDisabled", "popperPlacement", "popperApplyArrowClass", "popperPreventOverflow", "popperHideOnClickOutside", "popperTrigger", "popperStyles", "popperAriaDescribeBy", "popperAriaRole", "popperBoundaries", "popperCloseOnClickOutside", "popperDisableAnimation", "popperDisableStyle", "popperHideOnMouseLeave", "popperHideOnScroll", "popperAppendTo", "popperModifiers", "popperPositionFixed", "popperDelay", "popperShowOnStart", "popperTarget"], outputs: ["popperOnHidden", "popperOnShown", "popperOnUpdate"], exportAs: ["popper"] }, { type: i5__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6__namespace.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { type: i5__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "async": i5__namespace.AsyncPipe, "translate": i6__namespace.TranslatePipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    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", isHighlighted: "isHighlighted", customActions: "customActions" }, 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--other]=\"!isSentByCurrentUser\"\n  [class.str-chat__message-simple--me]=\"isSentByCurrentUser\"\n  [class.str-chat__message--has-attachment]=\"hasAttachment\"\n  [class.str-chat__message--with-reactions]=\"hasReactions\"\n  [class.str-chat__message--highlighted]=\"isHighlighted\"\n  [class.str-chat__message-with-thread-link]=\"shouldDisplayThreadLink\"\n  [class.str-chat__message-send-can-be-retried]=\"\n    (message?.status === 'failed' && message?.errorStatusCode !== 403) ||\n    (message?.type === 'error' && message?.moderation_details)\n  \"\n  data-testid=\"message-container\"\n>\n  <ng-container *ngIf=\"!message?.deleted_at; else deletedMessage\">\n    <ng-container *ngIf=\"message?.type !== 'system'; else systemMessage\">\n      <ng-container *ngIf=\"themeVersion === '1'\">\n        <ng-container *ngTemplateOutlet=\"messageStatus\"></ng-container>\n      </ng-container>\n      <stream-avatar-placeholder\n        data-testid=\"avatar\"\n        class=\"str-chat-angular__avatar-host str-chat__message-sender-avatar\"\n        [imageUrl]=\"message?.user?.image\"\n        [name]=\"message?.user?.name || message?.user?.id\"\n        type=\"user\"\n        location=\"message-sender\"\n        [user]=\"message?.user || undefined\"\n      ></stream-avatar-placeholder>\n      <div class=\"str-chat__message-inner\">\n        <div\n          class=\"str-chat__message-simple__actions str-chat__message-options\"\n          data-testid=\"message-options\"\n          [class.str-chat__message-actions-open]=\"isActionBoxOpen\"\n          *ngIf=\"areOptionsVisible\"\n        >\n          <div\n            data-testid=\"message-actions-container\"\n            #messageActionsToggle\n            class=\"\n              str-chat__message-actions-container\n              str-chat__message-simple__actions__action\n              str-chat__message-simple__actions__action--options\n            \"\n            [popper]=\"popperContent\"\n            [popperTrigger]=\"popperTriggerClick\"\n            [popperPlacement]=\"popperPlacementAuto\"\n            [popperHideOnScroll]=\"false\"\n            [popperHideOnClickOutside]=\"true\"\n            [popperHideOnMouseLeave]=\"false\"\n            [popperDisableAnimation]=\"true\"\n            (popperOnHidden)=\"isActionBoxOpen = false\"\n          >\n            <popper-content #popperContent>\n              <ng-template\n                #defaultMessageActionsBox\n                let-isOpen=\"isOpen\"\n                let-isMine=\"isMine\"\n                let-enabledActions=\"enabledActions\"\n                let-messageInput=\"message\"\n                let-customActions=\"customActions\"\n              >\n                <stream-message-actions-box\n                  (click)=\"messageActionsBoxClicked(popperContent)\"\n                  *ngIf=\"isOpen\"\n                  [isOpen]=\"isOpen\"\n                  [isMine]=\"isMine\"\n                  [enabledActions]=\"enabledActions\"\n                  [customActions]=\"customActions\"\n                  [message]=\"messageInput\"\n                ></stream-message-actions-box>\n              </ng-template>\n              <ng-container\n                *ngTemplateOutlet=\"\n                  (customTemplatesService.messageActionsBoxTemplate$ | async) ||\n                    defaultMessageActionsBox;\n                  context: getMessageActionsBoxContext()\n                \"\n              >\n              </ng-container>\n            </popper-content>\n            <div\n              class=\"str-chat__message-actions-box-button\"\n              data-testid=\"action-icon\"\n              (click)=\"messageActionsClicked()\"\n              (keyup.enter)=\"messageActionsClicked()\"\n              *ngIf=\"visibleMessageActionsCount > 0\"\n            >\n              <stream-icon-placeholder\n                icon=\"action-icon\"\n                class=\"str-chat__message-action-icon\"\n              ></stream-icon-placeholder>\n            </div>\n          </div>\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              str-chat__message-reply-in-thread-button\n            \"\n            data-testid=\"reply-in-thread\"\n            (click)=\"setAsActiveParentMessage()\"\n            (keyup.enter)=\"setAsActiveParentMessage()\"\n          >\n            <stream-icon-placeholder\n              class=\"str-chat__message-action-icon\"\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              str-chat__message-reactions-button\n            \"\n            data-testid=\"reaction-icon\"\n            (click)=\"isReactionSelectorOpen = !isReactionSelectorOpen\"\n            (keyup.enter)=\"isReactionSelectorOpen = !isReactionSelectorOpen\"\n          >\n            <stream-icon-placeholder\n              class=\"str-chat__message-action-icon\"\n              icon=\"reaction-icon\"\n            ></stream-icon-placeholder>\n          </div>\n        </div>\n        <div class=\"str-chat__message-reactions-host\">\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              (customTemplatesService.messageReactionsTemplate$ | async) ||\n                defaultMessageReactions;\n              context: getMessageReactionsContext()\n            \"\n          ></ng-container>\n        </div>\n        <div\n          class=\"str-chat__message-bubble str-chat-angular__message-bubble\"\n          [class.str-chat-angular__message-bubble--attachment-modal-open]=\"\n            imageAttachmentModalState === 'opened'\n          \"\n        >\n          <ng-container *ngIf=\"hasAttachment && !message?.quoted_message\">\n            <ng-container\n              *ngTemplateOutlet=\"attachmentsTemplate\"\n            ></ng-container>\n          </ng-container>\n          <div\n            class=\"str-chat__message-text\"\n            tabindex=\"0\"\n            *ngIf=\"message?.text || (message?.quoted_message && hasAttachment)\"\n            [class.str-chat__message-text--pointer-cursor]=\"\n              (message?.status === 'failed' &&\n                message?.errorStatusCode !== 403) ||\n              (this.message?.type === 'error' &&\n                this.message?.moderation_details) ||\n              message?.message_text_updated_at\n            \"\n            (click)=\"messageClicked()\"\n            (keyup.enter)=\"messageClicked()\"\n          >\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            >\n              <ng-container *ngTemplateOutlet=\"quotedMessage\"></ng-container>\n              <ng-container *ngIf=\"hasAttachment && message?.quoted_message\">\n                <ng-container\n                  *ngTemplateOutlet=\"attachmentsTemplate\"\n                ></ng-container>\n              </ng-container>\n              <div\n                data-testid=\"client-error-message\"\n                *ngIf=\"message?.type === 'error'\"\n                class=\"\n                  str-chat__simple-message--error-message\n                  str-chat__message--error-message\n                \"\n              >\n                <ng-container *ngIf=\"!message?.moderation_details\">{{\n                  \"streamChat.Error \u00B7 Unsent\" | translate\n                }}</ng-container>\n              </div>\n              <div\n                data-testid=\"error-message\"\n                *ngIf=\"message?.status === 'failed'\"\n                class=\"\n                  str-chat__simple-message--error-message\n                  str-chat__message--error-message\n                \"\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 data-testid=\"text\">\n                <p>\n                  <ng-container *ngIf=\"messageTextParts; else defaultContent\">\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                          <span class=\"str-chat__message-mention\">{{\n                            content\n                          }}</span>\n                        </ng-template>\n                        <ng-container\n                          *ngTemplateOutlet=\"\n                            (customTemplatesService.mentionTemplate$ | async) ||\n                              defaultMention;\n                            context: getMentionContext(part)\n                          \"\n                        ></ng-container>\n                      </ng-template>\n                    </ng-container>\n                  </ng-container>\n                  <ng-template #defaultContent>\n                    <ng-container *ngIf=\"displayAs === 'text'; else asHTML\">\n                      {{ messageText || \"\" }}\n                    </ng-container>\n                    <ng-template #asHTML\n                      ><span\n                        data-testid=\"html-content\"\n                        [innerHTML]=\"messageText\"\n                      ></span\n                    ></ng-template>\n                  </ng-template>\n                </p>\n              </div>\n            </div>\n          </div>\n          <stream-icon-placeholder\n            *ngIf=\"themeVersion === '2'\"\n            class=\"str-chat__message-error-icon\"\n            icon=\"error\"\n          ></stream-icon-placeholder>\n        </div>\n        <ng-container\n          *ngTemplateOutlet=\"\n            replyCountButton;\n            context: { position: 'inside-message-bubble' }\n          \"\n        ></ng-container>\n        <ng-container\n          *ngTemplateOutlet=\"\n            messageDateAndSender;\n            context: { position: 'inside-message-bubble' }\n          \"\n        ></ng-container>\n      </div>\n      <ng-container\n        *ngTemplateOutlet=\"\n          replyCountButton;\n          context: { position: 'outside-message-bubble', message: message }\n        \"\n      ></ng-container>\n\n      <ng-container\n        *ngTemplateOutlet=\"\n          messageDateAndSender;\n          context: { position: 'outside-message-bubble' }\n        \"\n      ></ng-container>\n    </ng-container>\n  </ng-container>\n</div>\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  <ng-container\n    *ngTemplateOutlet=\"\n      (customTemplatesService.systemMessageTemplate$ | async) ||\n        defaultSystemMessage;\n      context: getMessageContext()\n    \"\n  ></ng-container>\n  <ng-template #defaultSystemMessage let-messageInput=\"message\">\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>{{ messageInput?.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</ng-template>\n\n<ng-template #quotedMessage>\n  <div\n    *ngIf=\"message?.quoted_message\"\n    class=\"quoted-message str-chat__quoted-message-preview\"\n    data-testid=\"quoted-message-container\"\n    [class.mine]=\"isSentByCurrentUser\"\n    (click)=\"\n      jumpToMessage(\n        (message?.quoted_message)!.id,\n        message?.quoted_message?.parent_id\n      )\n    \"\n    (keyup.enter)=\"\n      jumpToMessage(\n        (message?.quoted_message)!.id,\n        message?.quoted_message?.parent_id\n      )\n    \"\n  >\n    <stream-avatar-placeholder\n      data-testid=\"qouted-message-avatar\"\n      class=\"str-chat-angular__avatar-host str-chat__message-sender-avatar\"\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      type=\"user\"\n      location=\"quoted-message-sender\"\n      [user]=\"message?.quoted_message?.user || undefined\"\n    ></stream-avatar-placeholder>\n    <div class=\"quoted-message-inner str-chat__quoted-message-bubble\">\n      <ng-container\n        *ngIf=\"\n          message?.quoted_message?.attachments &&\n          message?.quoted_message?.attachments?.length\n        \"\n      >\n        <ng-template\n          #defaultAttachments\n          let-messageId=\"messageId\"\n          let-attachments=\"attachments\"\n          let-parentMessageId=\"parentMessageId\"\n          let-imageModalStateChangeHandler=\"imageModalStateChangeHandler\"\n        >\n          <stream-attachment-list\n            [messageId]=\"messageId\"\n            [attachments]=\"attachments\"\n            [parentMessageId]=\"parentMessageId\"\n            (imageModalStateChange)=\"imageModalStateChangeHandler($event)\"\n          ></stream-attachment-list>\n        </ng-template>\n        <ng-container\n          *ngTemplateOutlet=\"\n            (customTemplatesService.attachmentListTemplate$ | async) ||\n              defaultAttachments;\n            context: getQuotedMessageAttachmentListContext()\n          \"\n        ></ng-container>\n      </ng-container>\n      <div\n        data-testid=\"quoted-message-text\"\n        [innerHTML]=\"\n          message?.quoted_message?.translation ||\n          message?.quoted_message?.html ||\n          message?.quoted_message?.text\n        \"\n      ></div>\n    </div>\n  </div>\n</ng-template>\n\n<!-- We need these markups in slightly different positions in theme-v1 and theme-v2, this soultion makes that possible without duplicating the code -->\n<ng-template #messageDateAndSender let-position=\"position\">\n  <ng-container\n    *ngIf=\"\n      (position === 'inside-message-bubble' && themeVersion === '1') ||\n      (position === 'outside-message-bubble' && themeVersion === '2')\n    \"\n  >\n    <div\n      class=\"str-chat__translation-notice\"\n      *ngIf=\"shouldDisplayTranslationNotice\"\n      data-testid=\"translation-notice\"\n    >\n      <button\n        data-testid=\"see-original\"\n        *ngIf=\"displayedMessageTextContent === 'translation'\"\n        (click)=\"displayOriginalMessage()\"\n        (keyup.enter)=\"displayOriginalMessage()\"\n        translate\n      >\n        streamChat.See original (automatically translated)\n      </button>\n      <button\n        data-testid=\"see-translation\"\n        *ngIf=\"displayedMessageTextContent === 'original'\"\n        (click)=\"displayTranslatedMessage()\"\n        (keyup.enter)=\"displayTranslatedMessage()\"\n        translate\n      >\n        streamChat.See translation\n      </button>\n    </div>\n    <ng-container\n      *ngIf=\"customTemplatesService.customMessageMetadataTemplate$ | async\"\n    >\n      <div class=\"str-chat__custom-message-metadata\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            (customTemplatesService.customMessageMetadataTemplate$ | async)!;\n            context: getMessageMetadataContext()\n          \"\n        ></ng-container>\n      </div>\n    </ng-container>\n    <div\n      class=\"\n        str-chat__message-data\n        str-chat__message-simple-data\n        str-chat__message-metadata\n      \"\n    >\n      <ng-container *ngIf=\"themeVersion === '2'\">\n        <ng-container *ngTemplateOutlet=\"messageStatus\"></ng-container>\n      </ng-container>\n      <span\n        data-testid=\"sender\"\n        *ngIf=\"!isSentByCurrentUser\"\n        class=\"str-chat__message-simple-name str-chat__message-sender-name\"\n      >\n        {{ message?.user?.name ? message?.user?.name : message?.user?.id }}\n      </span>\n      <span\n        data-testid=\"date\"\n        class=\"str-chat__message-simple-timestamp str-chat__message-simple-time\"\n      >\n        {{ parsedDate }}\n      </span>\n      <ng-container *ngIf=\"message?.message_text_updated_at\">\n        <span\n          data-testid=\"edited-flag\"\n          class=\"str-chat__mesage-simple-edited\"\n          translate\n          >streamChat.Edited</span\n        >\n        <div\n          data-testid=\"edited-timestamp\"\n          class=\"str-chat__message-edited-timestamp\"\n          [ngClass]=\"{\n            'str-chat__message-edited-timestamp--open': isEditedFlagOpened,\n            'str-chat__message-edited-timestamp--collapsed': !isEditedFlagOpened\n          }\"\n        >\n          <span translate>streamChat.Edited</span>\n          <time\n            dateTime=\"{{ message?.message_text_updated_at }}\"\n            title=\"{{ message?.message_text_updated_at }}\"\n          >\n            {{ pasedEditedDate }}\n          </time>\n        </div>\n      </ng-container>\n    </div>\n  </ng-container>\n</ng-template>\n\n<ng-template #messageStatus>\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' && isMessageDeliveredAndRead && canDisplayReadStatus;\n          else deliveredStatus\n        \"\n      >\n        <ng-container *ngTemplateOutlet=\"readStatus\"></ng-container>\n      </ng-container>\n    </ng-template>\n    <ng-template #deliveredStatus>\n      <ng-container\n        *ngTemplateOutlet=\"\n          (customTemplatesService.deliveredStatusTemplate$ | async) ||\n            defaultDeliveredStatus;\n          context: getDeliveredStatusContext()\n        \"\n      ></ng-container>\n    </ng-template>\n    <ng-template #defaultDeliveredStatus>\n      <span\n        *ngIf=\"mode === 'main'\"\n        class=\"\n          str-chat__message-simple-status\n          str-chat__message-simple-status-angular\n          str-chat__message-status\n        \"\n        data-testid=\"delivered-indicator\"\n        tabindex=\"0\"\n        [popper]=\"popperContent\"\n        [popperTrigger]=\"popperTriggerHover\"\n        [popperPlacement]=\"popperPlacementAuto\"\n        [popperHideOnScroll]=\"false\"\n        [popperHideOnClickOutside]=\"false\"\n        (hover)=\"$event.stopPropagation()\"\n      >\n        <popper-content #popperContent>\n          <div class=\"str-chat__tooltip str-chat__tooltip-angular\">\n            {{ \"streamChat.Delivered\" | translate }}\n          </div>\n        </popper-content>\n        <stream-icon-placeholder\n          data-testid=\"delivered-icon\"\n          icon=\"delivered-icon\"\n        ></stream-icon-placeholder>\n      </span>\n    </ng-template>\n    <ng-template #sendingStatus>\n      <ng-container\n        *ngTemplateOutlet=\"\n          (customTemplatesService.sendingStatusTemplate$ | async) ||\n            defaultSendingStatus;\n          context: getSendingStatusContext()\n        \"\n      ></ng-container>\n    </ng-template>\n    <ng-template #defaultSendingStatus>\n      <span\n        class=\"\n          str-chat__message-simple-status\n          str-chat__message-simple-status-angular\n          str-chat__message-status\n        \"\n        data-testid=\"sending-indicator\"\n        tabindex=\"0\"\n        [popper]=\"popperContent\"\n        [popperTrigger]=\"popperTriggerHover\"\n        [popperPlacement]=\"popperPlacementAuto\"\n        [popperHideOnScroll]=\"false\"\n        [popperHideOnClickOutside]=\"false\"\n        (hover)=\"$event.stopPropagation()\"\n      >\n        <popper-content #popperContent>\n          <div class=\"str-chat__tooltip str-chat__tooltip-angular\">\n            {{ \"streamChat.Sending...\" | translate }}\n          </div>\n        </popper-content>\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      <ng-container\n        *ngTemplateOutlet=\"\n          (customTemplatesService.readStatusTemplate$ | async) ||\n            defaultReadStatus;\n          context: getReadStatusContext()\n        \"\n      ></ng-container>\n    </ng-template>\n    <ng-template #defaultReadStatus>\n      <span\n        class=\"\n          str-chat__message-simple-status\n          str-chat__message-simple-status-angular\n          str-chat__message-status\n        \"\n        data-testid=\"read-indicator\"\n        tabindex=\"0\"\n        [popper]=\"popperContent\"\n        [popperTrigger]=\"popperTriggerHover\"\n        [popperPlacement]=\"popperPlacementAuto\"\n        [popperHideOnScroll]=\"false\"\n        [popperHideOnClickOutside]=\"false\"\n        (hover)=\"$event.stopPropagation()\"\n      >\n        <popper-content #popperContent>\n          <div\n            class=\"str-chat__tooltip str-chat__tooltip-angular\"\n            data-testid=\"read-by-tooltip\"\n          >\n            {{ readByText }}\n          </div>\n        </popper-content>\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          type=\"user\"\n          location=\"message-reader\"\n          [user]=\"lastReadUser\"\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-container>\n</ng-template>\n\n<ng-template #replyCountButton let-position=\"position\">\n  <div\n    *ngIf=\"\n      (position === 'inside-message-bubble' && themeVersion === '1') ||\n      (position === 'outside-message-bubble' && themeVersion === '2')\n    \"\n    class=\"\n      str-chat__message-simple-reply-button\n      str-chat__message-replies-count-button-wrapper\n    \"\n  >\n    <button\n      *ngIf=\"shouldDisplayThreadLink\"\n      class=\"str-chat__message-replies-count-button\"\n      data-testid=\"reply-count-button\"\n      (click)=\"setAsActiveParentMessage()\"\n    >\n      <stream-icon-placeholder\n        *ngIf=\"themeVersion === '1'\"\n        stream-icon-placeholder\n        icon=\"reply\"\n      ></stream-icon-placeholder>\n      {{message?.reply_count === 1 ? ('streamChat.1 reply' | translate) : ('streamChat.{{ replyCount }}\n      replies' | translate:replyCountParam)}}\n    </button>\n  </div>\n</ng-template>\n\n<ng-template #attachmentsTemplate>\n  <ng-template\n    #defaultAttachments\n    let-messageId=\"messageId\"\n    let-attachments=\"attachments\"\n    let-parentMessageId=\"parentMessageId\"\n    let-imageModalStateChangeHandler=\"imageModalStateChangeHandler\"\n  >\n    <stream-attachment-list\n      [messageId]=\"messageId\"\n      [attachments]=\"attachments\"\n      [parentMessageId]=\"parentMessageId\"\n      (imageModalStateChange)=\"imageModalStateChangeHandler($event)\"\n    ></stream-attachment-list>\n  </ng-template>\n  <ng-container\n    *ngTemplateOutlet=\"\n      (customTemplatesService.attachmentListTemplate$ | async) ||\n        defaultAttachments;\n      context: getAttachmentListContext()\n    \"\n  ></ng-container>\n</ng-template>\n", components: [{ type: AvatarPlaceholderComponent, selector: "stream-avatar-placeholder", inputs: ["name", "imageUrl", "size", "location", "channel", "user", "type", "initialsType", "showOnlineIndicator"] }, { type: i9__namespace.NgxPopperjsContentComponent, selector: "popper-content", exportAs: ["ngxPopperjsContent"] }, { type: MessageActionsBoxComponent, selector: "stream-message-actions-box", inputs: ["isOpen", "isMine", "message", "enabledActions", "customActions"], 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", "parentMessageId", "attachments"], outputs: ["imageModalStateChange"] }, { type: LoadingIndicatorPlaceholderComponent, selector: "stream-loading-indicator-placeholder", inputs: ["size", "color"] }], directives: [{ type: i8__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i9__namespace.NgxPopperjsDirective, selector: "[popper]", inputs: ["popperTimeout", "popperTimeoutAfterShow", "popperApplyClass", "popper", "popperDisabled", "popperPlacement", "popperApplyArrowClass", "popperPreventOverflow", "popperHideOnClickOutside", "popperTrigger", "popperStyles", "popperAriaDescribeBy", "popperAriaRole", "popperBoundaries", "popperCloseOnClickOutside", "popperDisableAnimation", "popperDisableStyle", "popperHideOnMouseLeave", "popperHideOnScroll", "popperAppendTo", "popperModifiers", "popperPositionFixed", "popperDelay", "popperShowOnStart", "popperTarget"], outputs: ["popperOnHidden", "popperOnShown", "popperOnUpdate"], exportAs: ["popper"] }, { type: i8__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6__namespace.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { type: i8__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "async": i8__namespace.AsyncPipe, "translate": i6__namespace.TranslatePipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: MessageComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -6883,7 +7211,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 }, { token: ThemeService }, { token: i0__namespace.ChangeDetectorRef }], 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", placeholder: "placeholder", areMentionsEnabled: "areMentionsEnabled", inputMode: "inputMode", mentionScope: "mentionScope", autoFocus: "autoFocus" }, 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]=\"autoFocus\"\n  data-testid=\"textarea\"\n  #input\n  placeholder=\"{{ placeholder | translate }}\"\n  class=\"\n    rta__textarea\n    str-chat__textarea__textarea\n    str-chat__angular-textarea\n    str-chat__message-textarea\n  \"\n  rows=\"1\"\n  (input)=\"inputChanged()\"\n  (keydown.enter)=\"enterHit($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\n        class=\"str-chat__slash-command-name\"\n        data-testclass=\"command-name\"\n        >{{ item.name }}</strong\n      >\n      <span class=\"str-chat__slash-command-args\"\n        >/{{ item.name }} {{ item.args }}</span\n      >\n    </span>\n    <br />\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      [ngStyle]=\"{ height: themeVersion === '2' ? 30 : 20 + 'px' }\"\n      [size]=\"themeVersion === '2' ? 30 : 20\"\n      [imageUrl]=\"item.image || item.user?.image\"\n      [name]=\"item.autocompleteLabel\"\n      type=\"user\"\n      location=\"autocomplete-item\"\n      [user]=\"item.user || item\"\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", "location", "channel", "user", "type", "initialsType", "showOnlineIndicator"] }], directives: [{ type: i8__namespace.MentionDirective, selector: "[mention], [mentionConfig]", inputs: ["mentionConfig", "mention", "mentionListTemplate"], outputs: ["searchTerm", "itemSelected", "opened", "closed"] }, { type: i5__namespace.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i5__namespace.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i5__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i5__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], pipes: { "translate": i6__namespace.TranslatePipe } });
+    AutocompleteTextareaComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: AutocompleteTextareaComponent, selector: "stream-autocomplete-textarea", inputs: { value: "value", placeholder: "placeholder", areMentionsEnabled: "areMentionsEnabled", inputMode: "inputMode", mentionScope: "mentionScope", autoFocus: "autoFocus" }, 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]=\"autoFocus\"\n  data-testid=\"textarea\"\n  #input\n  placeholder=\"{{ placeholder | translate }}\"\n  class=\"\n    rta__textarea\n    str-chat__textarea__textarea\n    str-chat__angular-textarea\n    str-chat__message-textarea\n  \"\n  rows=\"1\"\n  (input)=\"inputChanged()\"\n  (keydown.enter)=\"enterHit($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\n        class=\"str-chat__slash-command-name\"\n        data-testclass=\"command-name\"\n        >{{ item.name }}</strong\n      >\n      <span class=\"str-chat__slash-command-args\"\n        >/{{ item.name }} {{ item.args }}</span\n      >\n    </span>\n    <br />\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      [ngStyle]=\"{ height: themeVersion === '2' ? 30 : 20 + 'px' }\"\n      [size]=\"themeVersion === '2' ? 30 : 20\"\n      [imageUrl]=\"item.image || item.user?.image\"\n      [name]=\"item.autocompleteLabel\"\n      type=\"user\"\n      location=\"autocomplete-item\"\n      [user]=\"item.user || item\"\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", "location", "channel", "user", "type", "initialsType", "showOnlineIndicator"] }], directives: [{ type: i8__namespace$1.MentionDirective, selector: "[mention], [mentionConfig]", inputs: ["mentionConfig", "mention", "mentionListTemplate"], outputs: ["searchTerm", "itemSelected", "opened", "closed"] }, { type: i8__namespace.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i8__namespace.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i8__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i8__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], pipes: { "translate": i6__namespace.TranslatePipe } });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: AutocompleteTextareaComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -7658,7 +7986,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: CustomTemplatesService }, { token: DateParserService }, { token: i0__namespace.NgZone }, { token: i0__namespace.ChangeDetectorRef }, { token: MessageActionsService }], 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", direction: "direction", messageOptionsTrigger: "messageOptionsTrigger", hideJumpToLatestButtonDuringScroll: "hideJumpToLatestButtonDuringScroll", customMessageActions: "customMessageActions", displayDateSeparator: "displayDateSeparator", dateSeparatorTextPos: "dateSeparatorTextPos", openMessageListAt: "openMessageListAt", hideUnreadCountForNotificationAndIndicator: "hideUnreadCountForNotificationAndIndicator", displayLoadingIndicator: "displayLoadingIndicator" }, 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: "<ng-container\n  *ngIf=\"\n    lastReadMessageId &&\n    isUnreadNotificationVisible &&\n    openMessageListAt === 'last-message'\n  \"\n>\n  <ng-container\n    *ngTemplateOutlet=\"\n      customnewMessagesNotificationTemplate ||\n        defaultUnreadMessagesNotification;\n      context: {\n        unreadCount: unreadCount,\n        onDismiss: messageNotificationDismissClicked,\n        onJump: messageNotificationJumpClicked\n      }\n    \"\n  ></ng-container>\n</ng-container>\n<ng-template\n  #defaultUnreadMessagesNotification\n  let-unreadCount=\"unreadCount\"\n  let-onDismiss=\"onDismiss\"\n  let-onJump=\"onJump\"\n>\n  <div\n    class=\"str-chat__unread-messages-notification\"\n    data-testid=\"unread-messages-notification\"\n  >\n    <button\n      data-testid=\"unread-messages-notification-jump-to-message\"\n      (click)=\"onJump()\"\n    >\n      <ng-container\n        *ngIf=\"\n          unreadCount > 0 && !hideUnreadCountForNotificationAndIndicator;\n          else noUnreadCount\n        \"\n      >\n        {{\n          (unreadCount === 1\n            ? \"streamChat.\\{\\{count\\}\\} unread message\"\n            : \"streamChat.\\{\\{count\\}\\} unread messages\"\n          ) | translate: { count: unreadCount }\n        }}\n      </ng-container>\n      <ng-template #noUnreadCount>\n        {{ \"streamChat.Unread messages\" | translate }}\n      </ng-template>\n    </button>\n    <button\n      data-testid=\"unread-messages-notification-dismiss\"\n      (click)=\"onDismiss()\"\n    >\n      <stream-icon-placeholder icon=\"close\"></stream-icon-placeholder>\n    </button>\n  </div>\n</ng-template>\n<div #scrollContainer data-testid=\"scroll-container\" class=\"str-chat__list\">\n  <ng-container *ngIf=\"mode === 'main' && isEmpty && emptyListTemplate\">\n    <ng-container *ngTemplateOutlet=\"emptyListTemplate\"></ng-container>\n  </ng-container>\n  <div class=\"str-chat__reverse-infinite-scroll str-chat__message-list-scroll\">\n    <ul\n      class=\"str-chat__ul\"\n      [class.str-chat__message-options-in-bubble]=\"\n        messageOptionsTrigger === 'message-bubble'\n      \"\n    >\n      <li\n        #parentMessageElement\n        *ngIf=\"mode === 'thread' && parentMessage\"\n        data-testid=\"parent-message\"\n        class=\"str-chat__parent-message-li\"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"\n            messageTemplateContainer;\n            context: { message: parentMessage, index: 'parent' }\n          \"\n        ></ng-container>\n        <div data-testid=\"reply-count\" class=\"str-chat__thread-start\">\n          {{parentMessage?.reply_count === 1 ? ('streamChat.1 reply' | translate) : ('streamChat.{{ replyCount }}\n          replies' | translate:replyCountParam)}}\n        </div>\n      </li>\n      <ng-container *ngIf=\"mode === 'thread' && isEmpty && emptyListTemplate\">\n        <ng-container *ngTemplateOutlet=\"emptyListTemplate\"></ng-container>\n      </ng-container>\n      <stream-loading-indicator\n        data-testid=\"top-loading-indicator\"\n        *ngIf=\"\n          isLoading && direction === 'bottom-to-top' && displayLoadingIndicator\n        \"\n      ></stream-loading-indicator>\n      <ng-container *ngIf=\"messages$ | async as messages\">\n        <ng-container\n          *ngFor=\"\n            let message of messages;\n            let i = index;\n            let isFirst = first;\n            let isLast = last;\n            trackBy: trackByMessageId\n          \"\n        >\n          <ng-container *ngIf=\"isFirst\">\n            <ng-container\n              *ngTemplateOutlet=\"\n                dateSeparator;\n                context: {\n                  date: message.created_at,\n                  parsedDate: parseDate(message.created_at)\n                }\n              \"\n            ></ng-container>\n          </ng-container>\n          <li\n            tabindex=\"0\"\n            data-testclass=\"message\"\n            class=\"str-chat__li str-chat__li--{{ groupStyles[i] }}\"\n            id=\"{{ message.id }}\"\n          >\n            <ng-container\n              *ngTemplateOutlet=\"\n                messageTemplateContainer;\n                context: { message: message, index: i }\n              \"\n            ></ng-container>\n          </li>\n          <ng-container\n            *ngIf=\"\n              (lastReadMessageId === message?.id &&\n                direction === 'bottom-to-top') ||\n              (direction === 'top-to-bottom' &&\n                lastReadMessageId === messages[i + 1]?.id)\n            \"\n          >\n            <li\n              id=\"stream-chat-new-message-indicator\"\n              data-testid=\"new-messages-indicator\"\n              class=\"str-chat__li str-chat__unread-messages-separator-wrapper\"\n            >\n              <ng-container\n                *ngTemplateOutlet=\"\n                  customnewMessagesIndicatorTemplate ||\n                    defaultNewMessagesIndicator;\n                  context: { unreadCount: unreadCount }\n                \"\n              ></ng-container>\n            </li>\n          </ng-container>\n          <ng-container *ngIf=\"isNextMessageOnSeparateDate[i]\">\n            <ng-container\n              *ngTemplateOutlet=\"\n                dateSeparator;\n                context: {\n                  date: messages[i + 1].created_at,\n                  parsedDate: parseDate(messages[i + 1].created_at)\n                }\n              \"\n            ></ng-container>\n          </ng-container>\n        </ng-container>\n      </ng-container>\n      <stream-loading-indicator\n        data-testid=\"bottom-loading-indicator\"\n        *ngIf=\"\n          isLoading && direction === 'top-to-bottom' && displayLoadingIndicator\n        \"\n      ></stream-loading-indicator>\n    </ul>\n    <ng-template #defaultTypingIndicator let-usersTyping$=\"usersTyping$\">\n      <!-- eslint-disable-next-line @angular-eslint/template/no-any -->\n      <ng-container *ngIf=\"$any(usersTyping$ | async) as users\">\n        <div\n          *ngIf=\"users.length > 0\"\n          data-testid=\"typing-indicator\"\n          class=\"str-chat__typing-indicator str-chat__typing-indicator--typing\"\n        >\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            data-testid=\"typing-users\"\n            class=\"str-chat__typing-indicator__users\"\n          >\n            {{\n              users.length === 1\n                ? (\"streamChat.user is typing\"\n                  | translate: { user: getTypingIndicatorText(users) })\n                : (\"streamChat.users are typing\"\n                  | translate: { users: getTypingIndicatorText(users) })\n            }}\n          </div>\n        </div>\n      </ng-container>\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__jump-to-latest-message\">\n  <button\n    data-testid=\"scroll-to-latest\"\n    *ngIf=\"isUserScrolled && isJumpToLatestButtonVisible\"\n    class=\"\n      str-chat__message-notification-scroll-to-latest\n      str-chat__message-notification-scroll-to-latest-right\n      str-chat__circle-fab\n    \"\n    (keyup.enter)=\"jumpToLatestMessage()\"\n    (click)=\"jumpToLatestMessage()\"\n  >\n    <stream-icon\n      class=\"str-chat__jump-to-latest-icon str-chat__circle-fab-icon\"\n      [icon]=\"direction === 'bottom-to-top' ? 'arrow-down' : 'arrow-up'\"\n    ></stream-icon>\n    <div\n      *ngIf=\"newMessageCountWhileBeingScrolled > 0\"\n      class=\"\n        str-chat__message-notification\n        str-chat__message-notification-scroll-to-latest-unread-count\n        str-chat__jump-to-latest-unread-count\n      \"\n    >\n      {{ newMessageCountWhileBeingScrolled }}\n    </div>\n  </button>\n</div>\n\n<ng-template #messageTemplateContainer let-message=\"message\" let-index=\"index\">\n  <ng-template\n    #defaultMessageTemplate\n    let-messageInput=\"message\"\n    let-isLastSentMessage=\"isLastSentMessage\"\n    let-enabledMessageActions=\"enabledMessageActions\"\n    let-mode=\"mode\"\n    let-isHighlighted=\"isHighlighted\"\n    let-customActions=\"customActions\"\n  >\n    <stream-message\n      [message]=\"messageInput\"\n      [isLastSentMessage]=\"isLastSentMessage\"\n      [enabledMessageActions]=\"enabledMessageActions\"\n      [mode]=\"mode\"\n      [isHighlighted]=\"isHighlighted\"\n      [customActions]=\"customActions\"\n    ></stream-message>\n  </ng-template>\n  <ng-container\n    *ngTemplateOutlet=\"\n      messageTemplate || defaultMessageTemplate;\n      context: {\n        message: message,\n        isLastSentMessage: !!(\n          lastSentMessageId && message?.id === lastSentMessageId\n        ),\n        enabledMessageActions: enabledMessageActions,\n        mode: mode,\n        isHighlighted: message?.id === highlightedMessageId,\n        customActions: customMessageActions\n      }\n    \"\n  ></ng-container>\n</ng-template>\n\n<ng-template #dateSeparator let-date=\"date\" let-parsedDate=\"parsedDate\">\n  <ng-container *ngIf=\"displayDateSeparator\">\n    <ng-container\n      *ngTemplateOutlet=\"\n        customDateSeparatorTemplate || defaultDateSeparator;\n        context: {\n          date: date,\n          parsedDate: parsedDate\n        }\n      \"\n    ></ng-container>\n  </ng-container>\n\n  <ng-template\n    #defaultDateSeparator\n    let-date=\"date\"\n    let-parsedDate=\"parsedDate\"\n  >\n    <div data-testid=\"date-separator\" class=\"str-chat__date-separator\">\n      <hr\n        *ngIf=\"\n          dateSeparatorTextPos === 'right' || dateSeparatorTextPos === 'center'\n        \"\n        class=\"str-chat__date-separator-line\"\n      />\n      <div class=\"str-chat__date-separator-date\">\n        {{ parsedDate }}\n      </div>\n      <hr\n        *ngIf=\"\n          dateSeparatorTextPos === 'left' || dateSeparatorTextPos === 'center'\n        \"\n        class=\"str-chat__date-separator-line\"\n      />\n    </div>\n  </ng-template>\n</ng-template>\n\n<ng-template #defaultNewMessagesIndicator let-unreadCount=\"unreadCount\">\n  <div class=\"str-chat__unread-messages-separator\">\n    <ng-container\n      *ngIf=\"\n        unreadCount > 0 && !hideUnreadCountForNotificationAndIndicator;\n        else noUnreadCount\n      \"\n    >\n      {{\n        (unreadCount === 1\n          ? \"streamChat.\\{\\{count\\}\\} unread message\"\n          : \"streamChat.\\{\\{count\\}\\} unread messages\"\n        ) | translate: { count: unreadCount }\n      }}\n    </ng-container>\n    <ng-template #noUnreadCount>\n      {{ \"streamChat.Unread messages\" | translate }}\n    </ng-template>\n  </div>\n</ng-template>\n", components: [{ type: IconPlaceholderComponent, selector: "stream-icon-placeholder", inputs: ["icon", "size"] }, { type: LoadingIndicatorComponent, selector: "stream-loading-indicator", inputs: ["size", "color"] }, { type: IconComponent, selector: "stream-icon", inputs: ["icon", "size"] }, { type: MessageComponent, selector: "stream-message", inputs: ["message", "enabledMessageActions", "isLastSentMessage", "mode", "isHighlighted", "customActions"] }], directives: [{ type: i5__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i5__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "translate": i6__namespace.TranslatePipe, "async": i5__namespace.AsyncPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    MessageListComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: MessageListComponent, selector: "stream-message-list", inputs: { mode: "mode", direction: "direction", messageOptionsTrigger: "messageOptionsTrigger", hideJumpToLatestButtonDuringScroll: "hideJumpToLatestButtonDuringScroll", customMessageActions: "customMessageActions", displayDateSeparator: "displayDateSeparator", dateSeparatorTextPos: "dateSeparatorTextPos", openMessageListAt: "openMessageListAt", hideUnreadCountForNotificationAndIndicator: "hideUnreadCountForNotificationAndIndicator", displayLoadingIndicator: "displayLoadingIndicator" }, 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: "<ng-container\n  *ngIf=\"\n    lastReadMessageId &&\n    isUnreadNotificationVisible &&\n    openMessageListAt === 'last-message'\n  \"\n>\n  <ng-container\n    *ngTemplateOutlet=\"\n      customnewMessagesNotificationTemplate ||\n        defaultUnreadMessagesNotification;\n      context: {\n        unreadCount: unreadCount,\n        onDismiss: messageNotificationDismissClicked,\n        onJump: messageNotificationJumpClicked\n      }\n    \"\n  ></ng-container>\n</ng-container>\n<ng-template\n  #defaultUnreadMessagesNotification\n  let-unreadCount=\"unreadCount\"\n  let-onDismiss=\"onDismiss\"\n  let-onJump=\"onJump\"\n>\n  <div\n    class=\"str-chat__unread-messages-notification\"\n    data-testid=\"unread-messages-notification\"\n  >\n    <button\n      data-testid=\"unread-messages-notification-jump-to-message\"\n      (click)=\"onJump()\"\n    >\n      <ng-container\n        *ngIf=\"\n          unreadCount > 0 && !hideUnreadCountForNotificationAndIndicator;\n          else noUnreadCount\n        \"\n      >\n        {{\n          (unreadCount === 1\n            ? \"streamChat.\\{\\{count\\}\\} unread message\"\n            : \"streamChat.\\{\\{count\\}\\} unread messages\"\n          ) | translate: { count: unreadCount }\n        }}\n      </ng-container>\n      <ng-template #noUnreadCount>\n        {{ \"streamChat.Unread messages\" | translate }}\n      </ng-template>\n    </button>\n    <button\n      data-testid=\"unread-messages-notification-dismiss\"\n      (click)=\"onDismiss()\"\n    >\n      <stream-icon-placeholder icon=\"close\"></stream-icon-placeholder>\n    </button>\n  </div>\n</ng-template>\n<div #scrollContainer data-testid=\"scroll-container\" class=\"str-chat__list\">\n  <ng-container *ngIf=\"mode === 'main' && isEmpty && emptyListTemplate\">\n    <ng-container *ngTemplateOutlet=\"emptyListTemplate\"></ng-container>\n  </ng-container>\n  <div class=\"str-chat__reverse-infinite-scroll str-chat__message-list-scroll\">\n    <ul\n      class=\"str-chat__ul\"\n      [class.str-chat__message-options-in-bubble]=\"\n        messageOptionsTrigger === 'message-bubble'\n      \"\n    >\n      <li\n        #parentMessageElement\n        *ngIf=\"mode === 'thread' && parentMessage\"\n        data-testid=\"parent-message\"\n        class=\"str-chat__parent-message-li\"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"\n            messageTemplateContainer;\n            context: { message: parentMessage, index: 'parent' }\n          \"\n        ></ng-container>\n        <div data-testid=\"reply-count\" class=\"str-chat__thread-start\">\n          {{parentMessage?.reply_count === 1 ? ('streamChat.1 reply' | translate) : ('streamChat.{{ replyCount }}\n          replies' | translate:replyCountParam)}}\n        </div>\n      </li>\n      <ng-container *ngIf=\"mode === 'thread' && isEmpty && emptyListTemplate\">\n        <ng-container *ngTemplateOutlet=\"emptyListTemplate\"></ng-container>\n      </ng-container>\n      <stream-loading-indicator\n        data-testid=\"top-loading-indicator\"\n        *ngIf=\"\n          isLoading && direction === 'bottom-to-top' && displayLoadingIndicator\n        \"\n      ></stream-loading-indicator>\n      <ng-container *ngIf=\"messages$ | async as messages\">\n        <ng-container\n          *ngFor=\"\n            let message of messages;\n            let i = index;\n            let isFirst = first;\n            let isLast = last;\n            trackBy: trackByMessageId\n          \"\n        >\n          <ng-container *ngIf=\"isFirst\">\n            <ng-container\n              *ngTemplateOutlet=\"\n                dateSeparator;\n                context: {\n                  date: message.created_at,\n                  parsedDate: parseDate(message.created_at)\n                }\n              \"\n            ></ng-container>\n          </ng-container>\n          <li\n            tabindex=\"0\"\n            data-testclass=\"message\"\n            class=\"str-chat__li str-chat__li--{{ groupStyles[i] }}\"\n            id=\"{{ message.id }}\"\n          >\n            <ng-container\n              *ngTemplateOutlet=\"\n                messageTemplateContainer;\n                context: { message: message, index: i }\n              \"\n            ></ng-container>\n          </li>\n          <ng-container\n            *ngIf=\"\n              (lastReadMessageId === message?.id &&\n                direction === 'bottom-to-top') ||\n              (direction === 'top-to-bottom' &&\n                lastReadMessageId === messages[i + 1]?.id)\n            \"\n          >\n            <li\n              id=\"stream-chat-new-message-indicator\"\n              data-testid=\"new-messages-indicator\"\n              class=\"str-chat__li str-chat__unread-messages-separator-wrapper\"\n            >\n              <ng-container\n                *ngTemplateOutlet=\"\n                  customnewMessagesIndicatorTemplate ||\n                    defaultNewMessagesIndicator;\n                  context: { unreadCount: unreadCount }\n                \"\n              ></ng-container>\n            </li>\n          </ng-container>\n          <ng-container *ngIf=\"isNextMessageOnSeparateDate[i]\">\n            <ng-container\n              *ngTemplateOutlet=\"\n                dateSeparator;\n                context: {\n                  date: messages[i + 1].created_at,\n                  parsedDate: parseDate(messages[i + 1].created_at)\n                }\n              \"\n            ></ng-container>\n          </ng-container>\n        </ng-container>\n      </ng-container>\n      <stream-loading-indicator\n        data-testid=\"bottom-loading-indicator\"\n        *ngIf=\"\n          isLoading && direction === 'top-to-bottom' && displayLoadingIndicator\n        \"\n      ></stream-loading-indicator>\n    </ul>\n    <ng-template #defaultTypingIndicator let-usersTyping$=\"usersTyping$\">\n      <!-- eslint-disable-next-line @angular-eslint/template/no-any -->\n      <ng-container *ngIf=\"$any(usersTyping$ | async) as users\">\n        <div\n          *ngIf=\"users.length > 0\"\n          data-testid=\"typing-indicator\"\n          class=\"str-chat__typing-indicator str-chat__typing-indicator--typing\"\n        >\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            data-testid=\"typing-users\"\n            class=\"str-chat__typing-indicator__users\"\n          >\n            {{\n              users.length === 1\n                ? (\"streamChat.user is typing\"\n                  | translate: { user: getTypingIndicatorText(users) })\n                : (\"streamChat.users are typing\"\n                  | translate: { users: getTypingIndicatorText(users) })\n            }}\n          </div>\n        </div>\n      </ng-container>\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__jump-to-latest-message\">\n  <button\n    data-testid=\"scroll-to-latest\"\n    *ngIf=\"isUserScrolled && isJumpToLatestButtonVisible\"\n    class=\"\n      str-chat__message-notification-scroll-to-latest\n      str-chat__message-notification-scroll-to-latest-right\n      str-chat__circle-fab\n    \"\n    (keyup.enter)=\"jumpToLatestMessage()\"\n    (click)=\"jumpToLatestMessage()\"\n  >\n    <stream-icon\n      class=\"str-chat__jump-to-latest-icon str-chat__circle-fab-icon\"\n      [icon]=\"direction === 'bottom-to-top' ? 'arrow-down' : 'arrow-up'\"\n    ></stream-icon>\n    <div\n      *ngIf=\"newMessageCountWhileBeingScrolled > 0\"\n      class=\"\n        str-chat__message-notification\n        str-chat__message-notification-scroll-to-latest-unread-count\n        str-chat__jump-to-latest-unread-count\n      \"\n    >\n      {{ newMessageCountWhileBeingScrolled }}\n    </div>\n  </button>\n</div>\n\n<ng-template #messageTemplateContainer let-message=\"message\" let-index=\"index\">\n  <ng-template\n    #defaultMessageTemplate\n    let-messageInput=\"message\"\n    let-isLastSentMessage=\"isLastSentMessage\"\n    let-enabledMessageActions=\"enabledMessageActions\"\n    let-mode=\"mode\"\n    let-isHighlighted=\"isHighlighted\"\n    let-customActions=\"customActions\"\n  >\n    <stream-message\n      [message]=\"messageInput\"\n      [isLastSentMessage]=\"isLastSentMessage\"\n      [enabledMessageActions]=\"enabledMessageActions\"\n      [mode]=\"mode\"\n      [isHighlighted]=\"isHighlighted\"\n      [customActions]=\"customActions\"\n    ></stream-message>\n  </ng-template>\n  <ng-container\n    *ngTemplateOutlet=\"\n      messageTemplate || defaultMessageTemplate;\n      context: {\n        message: message,\n        isLastSentMessage: !!(\n          lastSentMessageId && message?.id === lastSentMessageId\n        ),\n        enabledMessageActions: enabledMessageActions,\n        mode: mode,\n        isHighlighted: message?.id === highlightedMessageId,\n        customActions: customMessageActions\n      }\n    \"\n  ></ng-container>\n</ng-template>\n\n<ng-template #dateSeparator let-date=\"date\" let-parsedDate=\"parsedDate\">\n  <ng-container *ngIf=\"displayDateSeparator\">\n    <ng-container\n      *ngTemplateOutlet=\"\n        customDateSeparatorTemplate || defaultDateSeparator;\n        context: {\n          date: date,\n          parsedDate: parsedDate\n        }\n      \"\n    ></ng-container>\n  </ng-container>\n\n  <ng-template\n    #defaultDateSeparator\n    let-date=\"date\"\n    let-parsedDate=\"parsedDate\"\n  >\n    <div data-testid=\"date-separator\" class=\"str-chat__date-separator\">\n      <hr\n        *ngIf=\"\n          dateSeparatorTextPos === 'right' || dateSeparatorTextPos === 'center'\n        \"\n        class=\"str-chat__date-separator-line\"\n      />\n      <div class=\"str-chat__date-separator-date\">\n        {{ parsedDate }}\n      </div>\n      <hr\n        *ngIf=\"\n          dateSeparatorTextPos === 'left' || dateSeparatorTextPos === 'center'\n        \"\n        class=\"str-chat__date-separator-line\"\n      />\n    </div>\n  </ng-template>\n</ng-template>\n\n<ng-template #defaultNewMessagesIndicator let-unreadCount=\"unreadCount\">\n  <div class=\"str-chat__unread-messages-separator\">\n    <ng-container\n      *ngIf=\"\n        unreadCount > 0 && !hideUnreadCountForNotificationAndIndicator;\n        else noUnreadCount\n      \"\n    >\n      {{\n        (unreadCount === 1\n          ? \"streamChat.\\{\\{count\\}\\} unread message\"\n          : \"streamChat.\\{\\{count\\}\\} unread messages\"\n        ) | translate: { count: unreadCount }\n      }}\n    </ng-container>\n    <ng-template #noUnreadCount>\n      {{ \"streamChat.Unread messages\" | translate }}\n    </ng-template>\n  </div>\n</ng-template>\n", components: [{ type: IconPlaceholderComponent, selector: "stream-icon-placeholder", inputs: ["icon", "size"] }, { type: LoadingIndicatorComponent, selector: "stream-loading-indicator", inputs: ["size", "color"] }, { type: IconComponent, selector: "stream-icon", inputs: ["icon", "size"] }, { type: MessageComponent, selector: "stream-message", inputs: ["message", "enabledMessageActions", "isLastSentMessage", "mode", "isHighlighted", "customActions"] }], directives: [{ type: i8__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i8__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "translate": i6__namespace.TranslatePipe, "async": i8__namespace.AsyncPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: MessageListComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -7760,7 +8088,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 }, { token: ChatClientService }], 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: "<div class=\"str-chat__thread-container\">\n  <ng-container\n    *ngTemplateOutlet=\"\n      (customTemplatesService.threadHeaderTemplate$ | async) ||\n        defaultThreadHeader;\n      context: getThreadHeaderContext()\n    \"\n  ></ng-container>\n  <ng-content></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      <div class=\"str-chat__thread-header-name\" translate>\n        streamChat.Thread\n      </div>\n      <div\n        class=\"str-chat__thread-header-channel-name\"\n        data-testid=\"channel-name\"\n      >\n        {{ channelName }}\n      </div>\n    </div>\n    <button\n      class=\"str-chat__square-button str-chat__close-thread-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: i5__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i6__namespace.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }], pipes: { "async": i5__namespace.AsyncPipe } });
+    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: "<div class=\"str-chat__thread-container\">\n  <ng-container\n    *ngTemplateOutlet=\"\n      (customTemplatesService.threadHeaderTemplate$ | async) ||\n        defaultThreadHeader;\n      context: getThreadHeaderContext()\n    \"\n  ></ng-container>\n  <ng-content></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      <div class=\"str-chat__thread-header-name\" translate>\n        streamChat.Thread\n      </div>\n      <div\n        class=\"str-chat__thread-header-channel-name\"\n        data-testid=\"channel-name\"\n      >\n        {{ channelName }}\n      </div>\n    </div>\n    <button\n      class=\"str-chat__square-button str-chat__close-thread-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: i8__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i6__namespace.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }], pipes: { "async": i8__namespace.AsyncPipe } });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: ThreadComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -7779,13 +8107,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: [i5.CommonModule, i6.TranslateModule], exports: [AvatarComponent, AvatarPlaceholderComponent] });
-    StreamAvatarModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: StreamAvatarModule, imports: [[i5.CommonModule, i6.TranslateModule]] });
+    StreamAvatarModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: StreamAvatarModule, declarations: [AvatarComponent, AvatarPlaceholderComponent], imports: [i8.CommonModule, i6.TranslateModule], exports: [AvatarComponent, AvatarPlaceholderComponent] });
+    StreamAvatarModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: StreamAvatarModule, imports: [[i8.CommonModule, i6.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: [i5.CommonModule, i6.TranslateModule],
+                        imports: [i8.CommonModule, i6.TranslateModule],
                         exports: [AvatarComponent, AvatarPlaceholderComponent],
                     }]
             }] });
@@ -7817,7 +8145,9 @@
             IconPlaceholderComponent,
             LoadingIndicatorPlaceholderComponent,
             EditMessageFormComponent,
-            MessageBouncePromptComponent], imports: [i5.CommonModule,
+            MessageBouncePromptComponent,
+            VoiceRecordingComponent,
+            VoiceRecordingWavebarComponent], imports: [i8.CommonModule,
             i6.TranslateModule,
             StreamAvatarModule,
             i9.NgxPopperjsModule], exports: [ChannelComponent,
@@ -7841,9 +8171,11 @@
             IconPlaceholderComponent,
             LoadingIndicatorPlaceholderComponent,
             EditMessageFormComponent,
-            MessageBouncePromptComponent] });
+            MessageBouncePromptComponent,
+            VoiceRecordingComponent,
+            VoiceRecordingWavebarComponent] });
     StreamChatModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: StreamChatModule, imports: [[
-                i5.CommonModule,
+                i8.CommonModule,
                 i6.TranslateModule,
                 StreamAvatarModule,
                 i9.NgxPopperjsModule,
@@ -7874,9 +8206,11 @@
                             LoadingIndicatorPlaceholderComponent,
                             EditMessageFormComponent,
                             MessageBouncePromptComponent,
+                            VoiceRecordingComponent,
+                            VoiceRecordingWavebarComponent,
                         ],
                         imports: [
-                            i5.CommonModule,
+                            i8.CommonModule,
                             i6.TranslateModule,
                             StreamAvatarModule,
                             i9.NgxPopperjsModule,
@@ -7904,6 +8238,8 @@
                             LoadingIndicatorPlaceholderComponent,
                             EditMessageFormComponent,
                             MessageBouncePromptComponent,
+                            VoiceRecordingComponent,
+                            VoiceRecordingWavebarComponent,
                         ],
                     }]
             }] });
@@ -7914,18 +8250,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: [i5.CommonModule, i6.TranslateModule, i8.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: [i8.CommonModule, i6.TranslateModule, i8$1.MentionModule, StreamAvatarModule], exports: [AutocompleteTextareaComponent] });
     StreamAutocompleteTextareaModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: StreamAutocompleteTextareaModule, providers: [
             {
                 provide: textareaInjectionToken,
                 useValue: AutocompleteTextareaComponent,
             },
-        ], imports: [[i5.CommonModule, i6.TranslateModule, i8.MentionModule, StreamAvatarModule]] });
+        ], imports: [[i8.CommonModule, i6.TranslateModule, i8$1.MentionModule, StreamAvatarModule]] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: StreamAutocompleteTextareaModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
                         declarations: [AutocompleteTextareaComponent],
-                        imports: [i5.CommonModule, i6.TranslateModule, i8.MentionModule, StreamAvatarModule],
+                        imports: [i8.CommonModule, i6.TranslateModule, i8$1.MentionModule, StreamAvatarModule],
                         exports: [AutocompleteTextareaComponent],
                         providers: [
                             {
@@ -7942,18 +8278,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: [i5.CommonModule, i6.TranslateModule], exports: [TextareaComponent] });
+    StreamTextareaModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: StreamTextareaModule, declarations: [TextareaComponent], imports: [i8.CommonModule, i6.TranslateModule], exports: [TextareaComponent] });
     StreamTextareaModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: StreamTextareaModule, providers: [
             {
                 provide: textareaInjectionToken,
                 useValue: TextareaComponent,
             },
-        ], imports: [[i5.CommonModule, i6.TranslateModule]] });
+        ], imports: [[i8.CommonModule, i6.TranslateModule]] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: StreamTextareaModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
                         declarations: [TextareaComponent],
-                        imports: [i5.CommonModule, i6.TranslateModule],
+                        imports: [i8.CommonModule, i6.TranslateModule],
                         exports: [TextareaComponent],
                         providers: [
                             {
@@ -8019,6 +8355,8 @@
     exports.ThemeService = ThemeService;
     exports.ThreadComponent = ThreadComponent;
     exports.TransliterationService = TransliterationService;
+    exports.VoiceRecordingComponent = VoiceRecordingComponent;
+    exports.VoiceRecordingWavebarComponent = VoiceRecordingWavebarComponent;
     exports.createMessagePreview = createMessagePreview;
     exports.getChannelDisplayText = getChannelDisplayText;
     exports.getGroupStyles = getGroupStyles;