stream-chat-angular 3.7.0 → 4.0.0-theming-v2.1

package/fesm2015/stream-chat-angular.js

@@ -1,23 +1,25 @@
 import { __awaiter } from 'tslib';
 import * as i0 from '@angular/core';
-import { Injectable, Component, Input, EventEmitter, Output, ViewChild, InjectionToken, Directive, Inject, HostBinding, NgModule } from '@angular/core';
+import { Injectable, Component, Input, EventEmitter, Output, ViewChild, InjectionToken, Directive, HostBinding, Inject, NgModule } from '@angular/core';
 import { BehaviorSubject, ReplaySubject, combineLatest, Subject, timer, of } from 'rxjs';
 import { StreamChat } from 'stream-chat';
 import { map, shareReplay, filter, first, take, tap, catchError, startWith, distinctUntilChanged, debounceTime } from 'rxjs/operators';
 import { v4 } from 'uuid';
-import * as i9 from '@ngx-translate/core';
+import * as i8 from '@ngx-translate/core';
 import { TranslateModule } from '@ngx-translate/core';
-import * as i3 from '@angular/common';
+import * as i7 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import prettybytes from 'pretty-bytes';
 import Dayjs from 'dayjs';
 import calendar from 'dayjs/plugin/calendar';
 import emojiRegex from 'emoji-regex';
+import * as i2 from 'ngx-popperjs';
+import { NgxPopperjsTriggers, NgxPopperjsPlacements, NgxPopperjsModule } from 'ngx-popperjs';
 import transliterate from '@stream-io/transliterate';
-import * as i7 from 'angular-mentions';
+import * as i8$1 from 'angular-mentions';
 import { MentionModule } from 'angular-mentions';
 
-const version = '3.7.0';
+const version = '4.0.0-theming-v2.1';
 
 /**
  * The `NotificationService` can be used to add or remove notifications. By default the [`NotificationList`](../components/NotificationListComponent.mdx) component displays the currently active notifications.
@@ -106,13 +108,11 @@ class ChatClientService {
         this.connectionStateSubject = new ReplaySubject(1);
         this.appSettingsSubject = new BehaviorSubject(undefined);
         this.pendingInvitesSubject = new BehaviorSubject([]);
-        this.userSubject = new ReplaySubject(1);
         this.subscriptions = [];
         this.events$ = this.notificationSubject.asObservable();
         this.connectionState$ = this.connectionStateSubject.asObservable();
         this.appSettings$ = this.appSettingsSubject.asObservable();
         this.pendingInvites$ = this.pendingInvitesSubject.asObservable();
-        this.user$ = this.userSubject.asObservable();
     }
     /**
      * Creates a [`StreamChat`](https://github.com/GetStream/stream-chat-js/blob/668b3e5521339f4e14fc657834531b4c8bf8176b/src/client.ts#L124) instance using the provided `apiKey`, and connects a user with the given meta data and token. More info about [connecting users](https://getstream.io/chat/docs/javascript/init_and_users/?language=javascript) can be found in the platform documentation.
@@ -128,8 +128,13 @@ class ChatClientService {
             let result;
             yield this.ngZone.runOutsideAngular(() => __awaiter(this, void 0, void 0, function* () {
                 const user = typeof userOrId === 'string' ? { id: userOrId } : userOrId;
-                result = yield this.chatClient.connectUser(user, userTokenOrProvider);
-                this.userSubject.next(this.chatClient.user);
+                try {
+                    result = yield this.chatClient.connectUser(user, userTokenOrProvider);
+                }
+                catch (error) {
+                    this.notificationService.addPermanentNotification('streamChat.Error connecting to chat, refresh the page to try again.', 'error');
+                    throw error;
+                }
                 this.chatClient.setUserAgent(`stream-chat-angular-${version}-${this.chatClient.getUserAgent()}`);
             }));
             const channels = yield this.chatClient.queryChannels({ invite: 'pending' }, // TODO: find out why we need this typecast
@@ -169,7 +174,6 @@ class ChatClientService {
         return __awaiter(this, void 0, void 0, function* () {
             this.pendingInvitesSubject.next([]);
             yield this.chatClient.disconnectUser();
-            this.userSubject.next(undefined);
             this.subscriptions.forEach((s) => s.unsubscribe());
         });
     }
@@ -264,9 +268,10 @@ const getReadBy = (message, channel) => {
  * The `ChannelService` provides data and interaction for the channel list and message list.
  */
 class ChannelService {
-    constructor(chatClientService, ngZone) {
+    constructor(chatClientService, ngZone, notificationService) {
         this.chatClientService = chatClientService;
         this.ngZone = ngZone;
+        this.notificationService = notificationService;
         this.channelsSubject = new BehaviorSubject(undefined);
         this.activeChannelSubject = new BehaviorSubject(undefined);
         this.activeChannelMessagesSubject = new BehaviorSubject([]);
@@ -474,9 +479,15 @@ class ChannelService {
             };
             this.sort = sort || { last_message_at: -1, updated_at: -1 };
             this.shouldSetActiveChannel = shouldSetActiveChannel;
-            const result = yield this.queryChannels(this.shouldSetActiveChannel);
-            this.clientEventsSubscription = this.chatClientService.events$.subscribe((notification) => void this.handleNotification(notification));
-            return result;
+            try {
+                const result = yield this.queryChannels(this.shouldSetActiveChannel);
+                this.clientEventsSubscription = this.chatClientService.events$.subscribe((notification) => void this.handleNotification(notification));
+                return result;
+            }
+            catch (error) {
+                this.notificationService.addPermanentNotification('streamChat.Error loading channels', 'error');
+                throw error;
+            }
         });
     }
     /**
@@ -1153,17 +1164,17 @@ class ChannelService {
         }
     }
 }
-ChannelService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: ChannelService, deps: [{ token: ChatClientService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
+ChannelService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: ChannelService, deps: [{ token: ChatClientService }, { token: i0.NgZone }, { token: NotificationService }], target: i0.ɵɵFactoryTarget.Injectable });
 ChannelService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: ChannelService, providedIn: 'root' });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: ChannelService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: function () { return [{ type: ChatClientService }, { type: i0.NgZone }]; } });
+        }], ctorParameters: function () { return [{ type: ChatClientService }, { type: i0.NgZone }, { type: NotificationService }]; } });
 
 /**
- * The `ThemeService` can be used to change the theme of the chat UI and to customize the theme. Our [themeing guide](../concepts/themeing-and-css.mdx) gives a complete overview about the topic.
+ * The `ThemeService` can be used to change the theme of the chat UI and to customize the theme. Our [theming guide](../theming/introduction.mdx) gives a complete overview about the topic.
  */
 class ThemeService {
     constructor() {
@@ -1209,9 +1220,13 @@ class ThemeService {
                 this.setVariables(lightVariables);
             }
         });
+        this.themeVersion = (getComputedStyle(document.documentElement)
+            .getPropertyValue('--str-chat__theme-version')
+            .replace(' ', '') || '1');
     }
     /**
      * A getter that returns the currently set custom light theme variables.
+     * @deprecated Only use with [theme v1](../concepts/theming-and-css.mdx)
      * @returns An object where the keys are theme variables, and the values are the currently set CSS values.
      */
     get customLightThemeVariables() {
@@ -1219,6 +1234,7 @@ class ThemeService {
     }
     /**
      * A setter that can be used to overwrite the values of the CSS theme variables of the light theme.
+     * @deprecated Only use with [theme v1](../concepts/theming-and-css.mdx)
      * @param variables An object where the keys are theme variables, and the values are CSS values.
      */
     set customLightThemeVariables(variables) {
@@ -1233,6 +1249,7 @@ class ThemeService {
     }
     /**
      * A getter that returns the currently set custom dark theme variables.
+     * @deprecated Only use with [theme v1](../concepts/theming-and-css.mdx)
      * @returns An object where the keys are theme variables, and the values are the currently set CSS values.
      */
     get customDarkThemeVariables() {
@@ -1240,6 +1257,7 @@ class ThemeService {
     }
     /**
      * A setter that can be used to overwrite the values of the CSS theme variables of the dark theme.
+     * @deprecated Only use with [theme v1](../concepts/theming-and-css.mdx)
      * @param variables An object where the keys are theme variables, and the values are CSS values.
      */
     set customDarkThemeVariables(variables) {
@@ -1527,7 +1545,7 @@ const en = {
         'Emoji matching': 'Emoji matching',
         'Empty message...': 'Empty message...',
         'Error adding flag': 'Error adding flag',
-        'Error connecting to chat, refresh the page to try again.': 'Error connecting to chat, refresh the page to try again.',
+        'Error connecting to chat, refresh the page to try again.': 'Error connecting to chat, refresh the page to try again',
         'Error deleting message': 'Error deleting message',
         'Error muting a user ...': 'Error muting a user ...',
         'Error pinning message': 'Error pinning message',
@@ -1536,12 +1554,12 @@ const en = {
         'Error uploading file': 'Error uploading file',
         'Error uploading image': 'Error uploading image',
         'Error deleting attachment': 'Error deleting attachment',
-        'Error · Unsent': 'Error · Unsent',
+        'Error · Unsent': "Message couldn't be sent",
         'Error: {{ errorMessage }}': 'Error: {{ errorMessage }}',
         Flag: 'Flag',
         'Message Failed': 'Message Failed',
-        'Message Failed · Unauthorized': 'Message Failed · Unauthorized',
-        'Message Failed · Click to try again': 'Message Failed · Click to try again',
+        'Message Failed · Unauthorized': 'Unauthorized to send message',
+        'Message Failed · Click to try again': "Message couldn't be sent, click to try again",
         'Message deleted': 'Message deleted',
         'Message has been successfully flagged': 'Message has been successfully flagged',
         'Message pinned': 'Message pinned',
@@ -1566,7 +1584,7 @@ const en = {
         'Slow Mode ON': 'Slow Mode ON',
         'Start of a new thread': 'Start of a new thread',
         'This message was deleted...': 'This message was deleted...',
-        Thread: 'Thread',
+        Thread: 'Thread reply',
         'Type your message': 'Type your message',
         Unmute: 'Unmute',
         Unpin: 'Unpin',
@@ -1594,6 +1612,10 @@ const en = {
         "You can't send messages in this channel": "You can't send messages in this channel",
         "You can't send thread replies in this channel": "You can't send thread replies in this channel",
         'Unsupported file type: {{type}}': 'Unsupported file type: {{type}}',
+        'No chats here yet…': 'No chats here yet…',
+        'user is typing': '{{ user }} is typing',
+        'users are typing': '{{ users }} are typing',
+        'Error loading channels': 'Error loading channels',
     },
 };
 
@@ -1616,14 +1638,14 @@ class StreamI18nService {
         this.translteService.setTranslation(lang, { streamChat: Object.assign(Object.assign({}, en.streamChat), overrides) }, true);
     }
 }
-StreamI18nService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: StreamI18nService, deps: [{ token: i9.TranslateService }], target: i0.ɵɵFactoryTarget.Injectable });
+StreamI18nService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: StreamI18nService, deps: [{ token: i8.TranslateService }], target: i0.ɵɵFactoryTarget.Injectable });
 StreamI18nService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: StreamI18nService, providedIn: 'root' });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: StreamI18nService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: function () { return [{ type: i9.TranslateService }]; } });
+        }], ctorParameters: function () { return [{ type: i8.TranslateService }]; } });
 
 /**
  * The `Avatar` component displays the provided image, with fallback to the first letter of the optional name input.
@@ -1662,7 +1684,7 @@ class AvatarComponent {
     }
 }
 AvatarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: AvatarComponent, deps: [{ token: ChatClientService }], target: i0.ɵɵFactoryTarget.Component });
-AvatarComponent.ɵcmp = i0.ɵɵ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" }, ngImport: i0, template: "<div\n  class=\"str-chat__avatar str-chat__avatar--circle stream-chat__avatar--{{\n    location\n  }}\"\n  title=\"{{ name }}\"\n  [style]=\"{\n    flexBasis: size + 'px',\n    fontSize: size / 2 + 'px',\n    height: size + 'px',\n    lineHeight: size + 'px',\n    width: size + 'px'\n  }\"\n>\n  <img\n    *ngIf=\"imageUrl && !isError; else fallback\"\n    class=\"str-chat__avatar-image str-chat__avatar-image{{\n      isLoaded ? ' str-chat__avatar-image--loaded' : ''\n    }}\"\n    src=\"{{ imageUrl }}\"\n    alt=\"{{ initials }}\"\n    data-testid=\"avatar-img\"\n    (load)=\"isLoaded = true\"\n    (error)=\"isError = true\"\n    [style]=\"{\n      flexBasis: size + 'px',\n      height: size + 'px',\n      objectFit: 'cover',\n      width: size + 'px'\n    }\"\n  />\n  <ng-template #fallback>\n    <div data-testid=\"fallback-img\" class=\"str-chat__avatar-fallback\">\n      {{ initials }}\n    </div>\n  </ng-template>\n</div>\n", styles: [""], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+AvatarComponent.ɵcmp = i0.ɵɵ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" }, ngImport: i0, template: "<div\n  class=\"str-chat__avatar str-chat__avatar--circle stream-chat__avatar--{{\n    location\n  }}\"\n  title=\"{{ name }}\"\n  [style]=\"{\n    flexBasis: 'calc(var(--str-chat__spacing-px, 1px) * ' + size + ')',\n    fontSize: 'calc(var(--str-chat__spacing-px, 1px) * ' + size / 2 + ')',\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 && !isError; else fallback\"\n    class=\"str-chat__avatar-image str-chat__avatar-image{{\n      isLoaded ? ' str-chat__avatar-image--loaded' : ''\n    }}\"\n    src=\"{{ imageUrl }}\"\n    alt=\"{{ initials }}\"\n    data-testid=\"avatar-img\"\n    (load)=\"isLoaded = true\"\n    (error)=\"isError = true\"\n    [style]=\"{\n      flexBasis: '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  />\n  <ng-template #fallback>\n    <div data-testid=\"fallback-img\" class=\"str-chat__avatar-fallback\">\n      {{ initials }}\n    </div>\n  </ng-template>\n</div>\n", styles: [""], directives: [{ type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: AvatarComponent, decorators: [{
             type: Component,
             args: [{
@@ -1846,7 +1868,7 @@ class AvatarPlaceholderComponent {
     }
 }
 AvatarPlaceholderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: AvatarPlaceholderComponent, deps: [{ token: CustomTemplatesService }], target: i0.ɵɵFactoryTarget.Component });
-AvatarPlaceholderComponent.ɵcmp = i0.ɵɵ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" }, ngImport: i0, 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>\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  ></stream-avatar>\n</ng-template>\n<ng-container\n  *ngTemplateOutlet=\"\n    (customTemplatesService.avatarTemplate$ | async) || defaultAvatar;\n    context: getAvatarContext()\n  \"\n></ng-container>\n", components: [{ type: AvatarComponent, selector: "stream-avatar", inputs: ["name", "imageUrl", "size", "location", "channel", "user", "type"] }], directives: [{ type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "async": i3.AsyncPipe } });
+AvatarPlaceholderComponent.ɵcmp = i0.ɵɵ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" }, ngImport: i0, 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>\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  ></stream-avatar>\n</ng-template>\n<ng-container\n  *ngTemplateOutlet=\"\n    (customTemplatesService.avatarTemplate$ | async) || defaultAvatar;\n    context: getAvatarContext()\n  \"\n></ng-container>\n", components: [{ type: AvatarComponent, selector: "stream-avatar", inputs: ["name", "imageUrl", "size", "location", "channel", "user", "type"] }], directives: [{ type: i7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "async": i7.AsyncPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: AvatarPlaceholderComponent, decorators: [{
             type: Component,
             args: [{
@@ -1877,7 +1899,7 @@ class IconComponent {
     constructor() { }
 }
 IconComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: IconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-IconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: IconComponent, selector: "stream-icon", inputs: { icon: "icon", size: "size" }, ngImport: i0, template: "<svg\n  data-testid=\"action-icon\"\n  *ngIf=\"icon === 'action-icon'\"\n  height=\"4\"\n  viewBox=\"0 0 11 4\"\n  width=\"11\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n>\n  <path\n    d=\"M1.5 3a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm4 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm4 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z\"\n    fillRule=\"nonzero\"\n  />\n</svg>\n<svg\n  *ngIf=\"icon === 'delivered-icon'\"\n  height=\"16\"\n  width=\"16\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n  data-testid=\"delivered-icon\"\n>\n  <path\n    d=\"M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0zm3.72 6.633a.955.955 0 1 0-1.352-1.352L6.986 8.663 5.633 7.31A.956.956 0 1 0 4.28 8.663l2.029 2.028a.956.956 0 0 0 1.353 0l4.058-4.058z\"\n    fill=\"#006CFF\"\n    fillRule=\"evenodd\"\n  />\n</svg>\n<svg\n  *ngIf=\"icon === 'reaction-icon'\"\n  height=\"12\"\n  viewBox=\"0 0 12 12\"\n  width=\"12\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n  data-testid=\"reaction-icon\"\n>\n  <g clipRule=\"evenodd\" fillRule=\"evenodd\">\n    <path\n      d=\"M6 1.2C3.3 1.2 1.2 3.3 1.2 6c0 2.7 2.1 4.8 4.8 4.8 2.7 0 4.8-2.1 4.8-4.8 0-2.7-2.1-4.8-4.8-4.8zM0 6c0-3.3 2.7-6 6-6s6 2.7 6 6-2.7 6-6 6-6-2.7-6-6z\"\n    ></path>\n    <path\n      d=\"M5.4 4.5c0 .5-.4.9-.9.9s-.9-.4-.9-.9.4-.9.9-.9.9.4.9.9zM8.4 4.5c0 .5-.4.9-.9.9s-.9-.4-.9-.9.4-.9.9-.9.9.4.9.9zM3.3 6.7c.3-.2.6-.1.8.1.3.4.8.9 1.5 1 .6.2 1.4.1 2.4-1 .2-.2.6-.3.8 0 .2.2.3.6 0 .8-1.1 1.3-2.4 1.7-3.5 1.5-1-.2-1.8-.9-2.2-1.5-.2-.3-.1-.7.2-.9z\"\n    ></path>\n  </g>\n</svg>\n<svg\n  data-testid=\"connection-error\"\n  *ngIf=\"icon === 'connection-error'\"\n  width=\"78px\"\n  height=\"78px\"\n  viewBox=\"0 0 78 78\"\n  version=\"1.1\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n  xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n>\n  <!-- Generator: Sketch 52.6 (67491) - http://www.bohemiancoding.com/sketch -->\n  <title>Combined Shape</title>\n  <desc>Created with Sketch.</desc>\n  <g\n    id=\"Interactions\"\n    stroke=\"none\"\n    stroke-width=\"1\"\n    fill=\"none\"\n    fill-rule=\"evenodd\"\n  >\n    <g\n      id=\"Connection-Error-_-Connectivity\"\n      transform=\"translate(-270.000000, -30.000000)\"\n      fill=\"#CF1F25\"\n    >\n      <g\n        id=\"109-network-connection\"\n        transform=\"translate(270.000000, 30.000000)\"\n      >\n        <path\n          d=\"M66.4609744,11.414231 C81.6225232,26.5757798 81.6225232,51.157545 66.4609744,66.3188467 C51.2994256,81.4803954 26.7176604,81.4803954 11.5563587,66.3188467 C-3.60519004,51.1572979 -3.60519004,26.5755327 11.5563587,11.414231 C26.7179075,-3.74731776 51.2996727,-3.74731776 66.4609744,11.414231 Z M54.7853215,45.8823776 L54.7853215,40.5882574 C54.7853215,39.613638 53.9952341,38.8235506 53.0206147,38.8235506 L44.9576695,38.8235506 L41.428256,42.3529641 L51.255555,42.3529641 L51.255555,45.8823776 L54.7853215,45.8823776 Z M40.6659027,43.1153174 L37.8988425,45.8823776 L40.6659027,45.8823776 L40.6659027,43.1153174 Z M51.1764962,56.4702653 L58.2353232,56.4702653 C59.2099355,56.4702653 60.00003,55.6801708 60.00003,54.7055585 L60.00003,51.176145 C60.00003,50.2015327 59.2099355,49.4114382 58.2353232,49.4114382 L51.1764962,49.4114382 C50.2018839,49.4114382 49.4117894,50.2015327 49.4117894,51.176145 L49.4117894,54.7055585 C49.4117894,55.6801708 50.2018839,56.4702653 51.1764962,56.4702653 Z M35.2941353,56.4702653 L42.3529624,56.4702653 C43.3275746,56.4702653 44.1176691,55.6801708 44.1176691,54.7055585 L44.1176691,51.176145 C44.1176691,50.2015327 43.3275746,49.4114382 42.3529624,49.4114382 L35.2941353,49.4114382 C34.319523,49.4114382 33.5294285,50.2015327 33.5294285,51.176145 L33.5294285,54.7055585 C33.5294285,55.6801708 34.319523,56.4702653 35.2941353,56.4702653 Z M56.6964989,19.0874231 C56.007381,18.3985134 54.8903216,18.3985134 54.2012036,19.087423 L45.882376,27.4062507 L45.882376,19.4117761 C45.882376,18.4371568 45.0922885,17.6470693 44.1176692,17.6470693 L33.5294286,17.6470693 C32.5548092,17.6470694 31.7647218,18.4371568 31.7647218,19.4117761 L31.7647218,30.0000167 C31.7647219,30.9746363 32.5548092,31.7647237 33.5294285,31.7647237 L41.5239031,31.7647237 L34.4650761,38.8235508 L24.7058947,38.8235508 C23.7312753,38.8235508 22.9411879,39.6136382 22.9411879,40.5882575 L22.9411879,45.8823778 L26.4706014,45.8823778 L26.4706014,42.3529643 L30.9356624,42.3529643 L23.8768354,49.4117914 L19.4117743,49.4117914 C18.4371549,49.4117914 17.6470675,50.2018788 17.6470675,51.1764981 L17.6470675,54.7059117 C17.6504049,54.9674302 17.7129076,55.2248042 17.8298886,55.4587302 L16.4456526,56.8429662 C15.7446193,57.5200453 15.7252005,58.6372282 16.4022825,59.3382615 C17.0793616,60.0392948 18.1965445,60.0587136 18.8975778,59.3816316 C18.9122847,59.3674273 18.9267436,59.3529684 18.940948,59.3382615 L56.6964963,21.5830662 C57.3856425,20.8939094 57.3856425,19.7765747 56.6964963,19.0874179 Z\"\n          id=\"Combined-Shape\"\n        ></path>\n      </g>\n    </g>\n  </g>\n</svg>\n<svg\n  *ngIf=\"icon === 'send'\"\n  data-testid=\"send\"\n  height=\"17\"\n  viewBox=\"0 0 18 17\"\n  width=\"18\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n>\n  <title translate>streamChat.Send</title>\n  <path\n    d=\"M0 17.015l17.333-8.508L0 0v6.617l12.417 1.89L0 10.397z\"\n    fill=\"#006cff\"\n    fillRule=\"evenodd\"\n  />\n</svg>\n<svg\n  *ngIf=\"icon === 'file-upload'\"\n  data-testid=\"file-upload\"\n  height=\"14\"\n  width=\"14\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n>\n  <title translate>streamChat.Attach files</title>\n  <path\n    d=\"M1.667.333h10.666c.737 0 1.334.597 1.334 1.334v10.666c0 .737-.597 1.334-1.334 1.334H1.667a1.333 1.333 0 0 1-1.334-1.334V1.667C.333.93.93.333 1.667.333zm2 1.334a1.667 1.667 0 1 0 0 3.333 1.667 1.667 0 0 0 0-3.333zm-2 9.333v1.333h10.666v-4l-2-2-4 4-2-2L1.667 11z\"\n    fillRule=\"nonzero\"\n  />\n</svg>\n<svg\n  data-testid=\"retry\"\n  *ngIf=\"icon === 'retry'\"\n  width=\"22\"\n  height=\"20\"\n  viewBox=\"0 0 22 20\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n>\n  <path\n    d=\"M20 5.535V2a1 1 0 0 1 2 0v6a1 1 0 0 1-1 1h-6a1 1 0 0 1 0-2h3.638l-2.975-2.653a8 8 0 1 0 1.884 8.32 1 1 0 1 1 1.886.666A10 10 0 1 1 5.175 1.245c3.901-2.15 8.754-1.462 11.88 1.667L20 5.535z\"\n    fill=\"#FFF\"\n    fill-rule=\"nonzero\"\n  />\n</svg>\n<svg\n  *ngIf=\"icon === 'close'\"\n  data-testid=\"close\"\n  width=\"28\"\n  height=\"28\"\n  viewBox=\"0 0 28 28\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n  xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n>\n  <defs>\n    <path\n      d=\"M465 5c5.53 0 10 4.47 10 10s-4.47 10-10 10-10-4.47-10-10 4.47-10 10-10zm3.59 5L465 13.59 461.41 10 460 11.41l3.59 3.59-3.59 3.59 1.41 1.41 3.59-3.59 3.59 3.59 1.41-1.41-3.59-3.59 3.59-3.59-1.41-1.41z\"\n      id=\"b\"\n    />\n    <filter\n      x=\"-30%\"\n      y=\"-30%\"\n      width=\"160%\"\n      height=\"160%\"\n      filterUnits=\"objectBoundingBox\"\n      id=\"a\"\n    >\n      <feOffset in=\"SourceAlpha\" result=\"shadowOffsetOuter1\" />\n      <feGaussianBlur\n        stdDeviation=\"2\"\n        in=\"shadowOffsetOuter1\"\n        result=\"shadowBlurOuter1\"\n      />\n      <feColorMatrix\n        values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0\"\n        in=\"shadowBlurOuter1\"\n      />\n    </filter>\n  </defs>\n  <g transform=\"translate(-451 -1)\" fill-rule=\"nonzero\" fill=\"none\">\n    <use fill=\"#000\" filter=\"url(#a)\" xlink:href=\"#b\" />\n    <use fill=\"#FFF\" fill-rule=\"evenodd\" xlink:href=\"#b\" />\n  </g>\n</svg>\n<svg\n  *ngIf=\"icon === 'file'\"\n  data-testid=\"file\"\n  className=\"rfu-file-icon--small fa-file-fallback\"\n  [attr.height]=\"size || 20\"\n  [attr.width]=\"size || 20\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n  viewBox=\"0 0 384 512\"\n>\n  <path\n    d=\"M369.9 97.9L286 14C277 5 264.8-.1 252.1-.1H48C21.5 0 0 21.5 0 48v416c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48V131.9c0-12.7-5.1-25-14.1-34zM332.1 128H256V51.9l76.1 76.1zM48 464V48h160v104c0 13.3 10.7 24 24 24h104v288H48z\"\n    fill=\"#414D54\"\n  />\n</svg>\n<svg\n  *ngIf=\"icon === 'reply'\"\n  data-testid=\"reply\"\n  height=\"15\"\n  width=\"18\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n>\n  <path\n    d=\"M.56 10.946H.06l-.002-.498L.025.92a.5.5 0 1 1 1-.004l.032 9.029H9.06v-4l9 4.5-9 4.5v-4H.56z\"\n    fillRule=\"nonzero\"\n  />\n</svg>\n<svg\n  height=\"10\"\n  width=\"10\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n  data-testid=\"close-no-outline\"\n  *ngIf=\"icon === 'close-no-outline'\"\n>\n  <path\n    d=\"M9.916 1.027L8.973.084 5 4.058 1.027.084l-.943.943L4.058 5 .084 8.973l.943.943L5 5.942l3.973 3.974.943-.943L5.942 5z\"\n    fillRule=\"evenodd\"\n  />\n</svg>\n<svg\n  height=\"10\"\n  width=\"14\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n  data-testid=\"reply-in-thread\"\n  *ngIf=\"icon === 'reply-in-thread'\"\n>\n  <path\n    d=\"M8.516 3c4.78 0 4.972 6.5 4.972 6.5-1.6-2.906-2.847-3.184-4.972-3.184v2.872L3.772 4.994 8.516.5V3zM.484 5l4.5-4.237v1.78L2.416 5l2.568 2.125v1.828L.484 5z\"\n    fillRule=\"evenodd\"\n  />\n</svg>\n<svg\n  *ngIf=\"icon === 'arrow-left'\"\n  data-testid=\"arrow-left\"\n  width=\"24\"\n  height=\"24\"\n  viewBox=\"0 0 24 24\"\n  fill=\"none\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n>\n  <path\n    d=\"M15.7049 7.41L14.2949 6L8.29492 12L14.2949 18L15.7049 16.59L11.1249 12L15.7049 7.41Z\"\n    fill=\"var(--black)\"\n  />\n</svg>\n\n<svg\n  *ngIf=\"icon === 'arrow-right'\"\n  data-testid=\"arrow-right\"\n  width=\"24\"\n  height=\"24\"\n  viewBox=\"0 0 24 24\"\n  fill=\"none\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n>\n  <path\n    d=\"M9.70492 6L8.29492 7.41L12.8749 12L8.29492 16.59L9.70492 18L15.7049 12L9.70492 6Z\"\n    fill=\"var(--black)\"\n  />\n</svg>\n<svg\n  *ngIf=\"icon === 'menu'\"\n  data-testid=\"menu\"\n  width=\"24\"\n  height=\"24\"\n  viewBox=\"0 0 24 24\"\n  fill=\"none\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n>\n  <path\n    fill-rule=\"evenodd\"\n    clip-rule=\"evenodd\"\n    d=\"M3 8V6H21V8H3ZM3 13H21V11H3V13ZM3 18H21V16H3V18Z\"\n    fill=\"black\"\n  />\n</svg>\n\n<svg\n  data-testid=\"arrow-up\"\n  *ngIf=\"icon === 'arrow-up'\"\n  width=\"24\"\n  height=\"24\"\n  viewBox=\"0 0 24 24\"\n  fill=\"none\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n>\n  <path\n    d=\"M16.59 15.7051L12 11.1251L7.41 15.7051L6 14.2951L12 8.29508L18 14.2951L16.59 15.7051Z\"\n    fill=\"var(--primary-color)\"\n  />\n</svg>\n<svg\n  data-testid=\"arrow-down\"\n  *ngIf=\"icon === 'arrow-down'\"\n  width=\"24\"\n  height=\"24\"\n  viewBox=\"0 0 24 24\"\n  fill=\"none\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n>\n  <path\n    d=\"M7.41 8.29504L12 12.875L16.59 8.29504L18 9.70504L12 15.705L6 9.70504L7.41 8.29504Z\"\n    fill=\"var(--primary-color)\"\n  />\n</svg>\n", directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i9.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }] });
+IconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: IconComponent, selector: "stream-icon", inputs: { icon: "icon", size: "size" }, ngImport: i0, 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: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: IconComponent, decorators: [{
             type: Component,
             args: [{
@@ -1906,7 +1928,7 @@ class IconPlaceholderComponent {
     }
 }
 IconPlaceholderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: IconPlaceholderComponent, deps: [{ token: CustomTemplatesService }], target: i0.ɵɵFactoryTarget.Component });
-IconPlaceholderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: IconPlaceholderComponent, selector: "stream-icon-placeholder", inputs: { icon: "icon", size: "size" }, ngImport: i0, 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: getIconContext()\n  \"\n></ng-container>\n", components: [{ type: IconComponent, selector: "stream-icon", inputs: ["icon", "size"] }], directives: [{ type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "async": i3.AsyncPipe } });
+IconPlaceholderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: IconPlaceholderComponent, selector: "stream-icon-placeholder", inputs: { icon: "icon", size: "size" }, ngImport: i0, 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: getIconContext()\n  \"\n></ng-container>\n", components: [{ type: IconComponent, selector: "stream-icon", inputs: ["icon", "size"] }], directives: [{ type: i7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "async": i7.AsyncPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: IconPlaceholderComponent, decorators: [{
             type: Component,
             args: [{
@@ -1932,11 +1954,12 @@ class LoadingIndicatorComponent {
         /**
          * The color of the indicator
          */
-        this.color = '#006CFF';
+        this.color = `var(--str-chat__loading-indicator-color, var(--str-chat__primary-color, '#006CFF'))`;
+        this.linearGradientId = v4();
     }
 }
 LoadingIndicatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: LoadingIndicatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-LoadingIndicatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: LoadingIndicatorComponent, selector: "stream-loading-indicator", inputs: { size: "size", color: "color" }, ngImport: i0, template: "<div class=\"str-chat__loading-indicator\">\n  <svg\n    [attr.height]=\"size\"\n    viewBox=\"0 0 30 30\"\n    [attr.width]=\"size\"\n    data-testid=\"loading-indicator\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <defs>\n      <linearGradient id=\"a\" x1=\"50%\" x2=\"50%\" y1=\"0%\" y2=\"100%\">\n        <stop offset=\"0%\" stop-color=\"#FFF\" stop-opacity=\"0\" />\n        <stop\n          data-testid=\"stop-color\"\n          offset=\"100%\"\n          [attr.stop-color]=\"color\"\n          stop-opacity=\"1\"\n          [ngStyle]=\"{ stopColor: color }\"\n        />\n      </linearGradient>\n    </defs>\n    <path\n      d=\"M2.518 23.321l1.664-1.11A12.988 12.988 0 0 0 15 28c7.18 0 13-5.82 13-13S22.18 2 15 2V0c8.284 0 15 6.716 15 15 0 8.284-6.716 15-15 15-5.206 0-9.792-2.652-12.482-6.679z\"\n      fill=\"url(#a)\"\n      fillRule=\"evenodd\"\n    />\n  </svg>\n</div>\n", directives: [{ type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+LoadingIndicatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: LoadingIndicatorComponent, selector: "stream-loading-indicator", inputs: { size: "size", color: "color" }, ngImport: i0, 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: i7.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: LoadingIndicatorComponent, decorators: [{
             type: Component,
             args: [{
@@ -1963,7 +1986,7 @@ class LoadingIndicatorPlaceholderComponent {
         /**
          * The color of the indicator
          */
-        this.color = '#006CFF';
+        this.color = `var(--str-chat__loading-indicator-color, var(--str-chat__primary-color, '#006CFF'))`;
     }
     getLoadingIndicatorContext() {
         return {
@@ -1973,7 +1996,7 @@ class LoadingIndicatorPlaceholderComponent {
     }
 }
 LoadingIndicatorPlaceholderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: LoadingIndicatorPlaceholderComponent, deps: [{ token: CustomTemplatesService }], target: i0.ɵɵFactoryTarget.Component });
-LoadingIndicatorPlaceholderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: LoadingIndicatorPlaceholderComponent, selector: "stream-loading-indicator-placeholder", inputs: { size: "size", color: "color" }, ngImport: i0, 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: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "async": i3.AsyncPipe } });
+LoadingIndicatorPlaceholderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: LoadingIndicatorPlaceholderComponent, selector: "stream-loading-indicator-placeholder", inputs: { size: "size", color: "color" }, ngImport: i0, 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: i7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "async": i7.AsyncPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: LoadingIndicatorPlaceholderComponent, decorators: [{
             type: Component,
             args: [{
@@ -2038,7 +2061,7 @@ class ModalComponent {
     }
 }
 ModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: ModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ModalComponent.ɵcmp = i0.ɵɵ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, template: "<div\n  data-testid=\"modal\"\n  class=\"str-chat__modal str-chat__modal--{{ isOpen ? 'open' : 'close' }}\"\n>\n  <div\n    data-testid=\"close\"\n    class=\"str-chat__modal__close-button\"\n    (click)=\"close()\"\n    (keyup.enter)=\"close()\"\n    translate\n  >\n    streamChat.Close\n    <stream-icon-placeholder icon=\"close\"></stream-icon-placeholder>\n  </div>\n  <div class=\"str-chat__modal__inner\" #modalInner>\n    <ng-container *ngIf=\"content; else elseContent\">\n      <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </ng-container>\n    <ng-template #elseContent>\n      <ng-content></ng-content>\n    </ng-template>\n  </div>\n</div>\n", components: [{ type: IconPlaceholderComponent, selector: "stream-icon-placeholder", inputs: ["icon", "size"] }], directives: [{ type: i9.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+ModalComponent.ɵcmp = i0.ɵɵ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, 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: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: ModalComponent, decorators: [{
             type: Component,
             args: [{
@@ -2085,6 +2108,7 @@ class TextareaDirective {
                 this.componentRef.instance.areMentionsEnabled = this.areMentionsEnabled;
                 this.componentRef.instance.mentionScope = this.mentionScope;
                 this.componentRef.instance.value = this.value;
+                this.componentRef.instance.placeholder = this.placeholder;
             }
         }
         if (changes.areMentionsEnabled) {
@@ -2096,6 +2120,9 @@ class TextareaDirective {
         if (changes.value) {
             this.componentRef.instance.value = this.value;
         }
+        if (changes.placeholder) {
+            this.componentRef.instance.placeholder = this.placeholder;
+        }
         // ngOnChanges not called for dynamic components since we don't use template binding
         let changesToPropagate = {};
         this.unpropagatedChanges.forEach((c) => (changesToPropagate = Object.assign(Object.assign({}, changesToPropagate), c)));
@@ -2105,7 +2132,7 @@ class TextareaDirective {
     }
 }
 TextareaDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: TextareaDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
-TextareaDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.5", type: TextareaDirective, selector: "[streamTextarea]", inputs: { componentRef: "componentRef", areMentionsEnabled: "areMentionsEnabled", mentionScope: "mentionScope", value: "value" }, outputs: { valueChange: "valueChange", send: "send", userMentions: "userMentions" }, usesOnChanges: true, ngImport: i0 });
+TextareaDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.5", type: TextareaDirective, selector: "[streamTextarea]", inputs: { componentRef: "componentRef", areMentionsEnabled: "areMentionsEnabled", mentionScope: "mentionScope", value: "value", placeholder: "placeholder" }, outputs: { valueChange: "valueChange", send: "send", userMentions: "userMentions" }, usesOnChanges: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: TextareaDirective, decorators: [{
             type: Directive,
             args: [{
@@ -2119,6 +2146,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImpor
                 type: Input
             }], value: [{
                 type: Input
+            }], placeholder: [{
+                type: Input
             }], valueChange: [{
                 type: Output
             }], send: [{
@@ -2203,7 +2232,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImpor
  * The `AttachmentList` compontent displays the attachments of a message
  */
 class AttachmentListComponent {
-    constructor(customTemplatesService, imageLoadService, channelService) {
+    constructor(customTemplatesService, imageLoadService, channelService, themeService) {
         this.customTemplatesService = customTemplatesService;
         this.imageLoadService = imageLoadService;
         this.channelService = channelService;
@@ -2211,9 +2240,11 @@ class AttachmentListComponent {
          * The attachments to display
          */
         this.attachments = [];
+        this.class = 'str-chat__attachment-list-angular-host';
         this.orderedAttachments = [];
         this.imagesToView = [];
         this.imagesToViewCurrentIndex = 0;
+        this.themeVersion = themeService.themeVersion;
     }
     ngOnChanges() {
         const images = this.attachments.filter(this.isImage);
@@ -2222,8 +2253,12 @@ class AttachmentListComponent {
             ...(containsGallery ? this.createGallery(images) : images),
             ...this.attachments.filter((a) => this.isVideo(a)),
             ...this.attachments.filter((a) => this.isFile(a)),
-            ...this.attachments.filter((a) => this.isCard(a)),
         ];
+        // Display link attachments only if there are no other attachments
+        // Giphy-s always sent without other attachments
+        if (this.orderedAttachments.length === 0) {
+            this.orderedAttachments.push(...this.attachments.filter((a) => this.isCard(a)));
+        }
     }
     trackById(index) {
         return index;
@@ -2309,8 +2344,8 @@ class AttachmentListComponent {
         this.imagesToView = [];
     }
 }
-AttachmentListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: AttachmentListComponent, deps: [{ token: CustomTemplatesService }, { token: ImageLoadService }, { token: ChannelService }], target: i0.ɵɵFactoryTarget.Component });
-AttachmentListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: AttachmentListComponent, selector: "stream-attachment-list", inputs: { messageId: "messageId", attachments: "attachments" }, viewQueries: [{ propertyName: "modalContent", first: true, predicate: ["modalContent"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngFor=\"let attachment of orderedAttachments; trackBy: trackById\">\n  <div\n    data-testclass=\"attachment-container\"\n    class=\"str-chat__message-attachment str-chat__message-attachment--{{\n      attachment.type\n    }}\"\n    [class.str-chat__message-attachment--card]=\"isCard(attachment)\"\n    [class.str-chat-angular__message-attachment-file-single]=\"\n      isFile(attachment)\n    \"\n  >\n    <img\n      *ngIf=\"isImage(attachment)\"\n      class=\"str-chat__message-attachment--img\"\n      data-testclass=\"image\"\n      [src]=\"attachment.img_url || attachment.thumb_url || attachment.image_url\"\n      [alt]=\"attachment?.fallback\"\n      (load)=\"imageLoaded()\"\n      (click)=\"openImageModal([attachment])\"\n      (keyup.enter)=\"openImageModal([attachment])\"\n    />\n    <div\n      class=\"str-chat__gallery\"\n      data-testid=\"image-gallery\"\n      *ngIf=\"isGallery(attachment)\"\n      [class.str-chat__gallery--square]=\"(attachment?.images)!.length > 3\"\n    >\n      <ng-container\n        *ngFor=\"\n          let galleryImage of attachment.images;\n          let index = index;\n          let isLast = last;\n          trackBy: trackByImageUrl\n        \"\n      >\n        <button\n          *ngIf=\"index < 3 || (index === 3 && isLast)\"\n          class=\"str-chat__gallery-image\"\n          data-testclass=\"gallery-image\"\n          (click)=\"openImageModal(attachment.images!, index)\"\n          (keyup.enter)=\"openImageModal(attachment.images!, index)\"\n        >\n          <img\n            [src]=\"\n              galleryImage.img_url ||\n              galleryImage.thumb_url ||\n              galleryImage.image_url\n            \"\n            [alt]=\"galleryImage.fallback\"\n            (load)=\"imageLoaded()\"\n          />\n        </button>\n        <button\n          *ngIf=\"index === 3 && !isLast\"\n          class=\"str-chat__gallery-placeholder\"\n          data-testclass=\"gallery-image\"\n          (click)=\"openImageModal(attachment.images!, index)\"\n          (keyup.enter)=\"openImageModal(attachment.images!, index)\"\n          [ngStyle]=\"{\n            'background-image':\n              'url(' +\n              (galleryImage.img_url ||\n                galleryImage.thumb_url ||\n                galleryImage.image_url) +\n              ')'\n          }\"\n        >\n          <p\n            [innerHTML]=\"\n              'streamChat.{{ imageCount }} more'\n                | translate: { imageCount: attachment!.images!.length - 4 }\n            \"\n          ></p>\n        </button>\n      </ng-container>\n    </div>\n    <video\n      *ngIf=\"isVideo(attachment)\"\n      controls\n      data-testclass=\"video-attachment\"\n      [src]=\"attachment.asset_url\"\n      style=\"\n        width: 100%;\n        max-width: 400px;\n        height: 300px;\n        border-radius: inherit;\n      \"\n    ></video>\n    <div\n      *ngIf=\"isFile(attachment)\"\n      class=\"\n        str-chat__message-attachment-file--item\n        str-chat-angular__message-attachment-file-single\n      \"\n    >\n      <stream-icon-placeholder\n        icon=\"file\"\n        [size]=\"30\"\n      ></stream-icon-placeholder>\n      <div class=\"str-chat__message-attachment-file--item-text\">\n        <a\n          data-testclass=\"file-link\"\n          download\n          href=\"{{ attachment.asset_url }}\"\n          target=\"_blank\"\n        >\n          {{ attachment.title }}\n        </a>\n        <span data-testclass=\"size\" *ngIf=\"hasFileSize(attachment)\">{{\n          getFileSize(attachment)\n        }}</span>\n      </div>\n    </div>\n    <div\n      *ngIf=\"isCard(attachment)\"\n      class=\"str-chat__message-attachment-card str-chat__message-attachment-card--{{\n        attachment.type\n      }}\"\n    >\n      <div\n        *ngIf=\"attachment.image_url || attachment.thumb_url\"\n        class=\"str-chat__message-attachment-card--header\"\n      >\n        <img\n          data-testclass=\"card-img\"\n          alt=\"{{ attachment.image_url || attachment.thumb_url }}\"\n          src=\"{{ attachment.image_url || attachment.thumb_url }}\"\n        />\n      </div>\n      <div class=\"str-chat__message-attachment-card--content\">\n        <div class=\"str-chat__message-attachment-card--flex\">\n          <div\n            *ngIf=\"attachment.title\"\n            data-testclass=\"card-title\"\n            class=\"str-chat__message-attachment-card--title\"\n          >\n            {{ attachment.title }}\n          </div>\n          <div\n            *ngIf=\"attachment.text\"\n            class=\"str-chat__message-attachment-card--text\"\n            data-testclass=\"card-text\"\n          >\n            {{ attachment.text }}\n          </div>\n          <a\n            class=\"str-chat__message-attachment-card--url\"\n            *ngIf=\"attachment.title_link || attachment.og_scrape_url\"\n            data-testclass=\"url-link\"\n            noopener\n            noreferrer\n            href=\"{{ attachment.title_link || attachment.og_scrape_url }}\"\n            target=\"_blank\"\n          >\n            {{ trimUrl(attachment.title_link || attachment.og_scrape_url) }}\n          </a>\n        </div>\n      </div>\n    </div>\n    <div\n      class=\"str-chat__message-attachment-actions\"\n      *ngIf=\"attachment.actions && attachment.actions.length > 0\"\n    >\n      <div class=\"str-chat__message-attachment-actions-form\">\n        <button\n          *ngFor=\"let action of attachment.actions; trackBy: trackByActionValue\"\n          class=\"str-chat__message-attachment-actions-button str-chat__message-attachment-actions-button--{{\n            action.style\n          }}\"\n          data-testclass=\"attachment-action\"\n          (click)=\"sendAction(action)\"\n          (keyup.enter)=\"sendAction(action)\"\n        >\n          {{ action.text }}\n        </button>\n      </div>\n    </div>\n  </div>\n</ng-container>\n\n<ng-container *ngIf=\"imagesToView && imagesToView.length > 0\">\n  <ng-container\n    *ngTemplateOutlet=\"\n      (customTemplatesService.modalTemplate$ | async) || defaultModal;\n      context: getModalContext()\n    \"\n  ></ng-container>\n</ng-container>\n\n<ng-template\n  #defaultModal\n  let-isOpen=\"isOpen\"\n  let-isOpenChangeHandler=\"isOpenChangeHandler\"\n  let-content=\"content\"\n>\n  <stream-modal\n    [isOpen]=\"isOpen\"\n    (isOpenChange)=\"isOpenChangeHandler($event)\"\n    [content]=\"content\"\n  >\n  </stream-modal>\n</ng-template>\n\n<ng-template #modalContent>\n  <div class=\"stream-chat-angular__image-modal\">\n    <button\n      class=\"stream-chat-angular__image-modal-stepper\"\n      [ngStyle]=\"{\n        visibility: isImageModalPrevButtonVisible ? 'visible' : 'hidden'\n      }\"\n      data-testid=\"image-modal-prev\"\n      type=\"button\"\n      (click)=\"stepImages(-1)\"\n      (keyup.enter)=\"stepImages(-1)\"\n    >\n      <stream-icon-placeholder icon=\"arrow-left\"></stream-icon-placeholder>\n    </button>\n    <img\n      class=\"stream-chat-angular__image-modal-image\"\n      data-testid=\"modal-image\"\n      [src]=\"\n        imagesToView[imagesToViewCurrentIndex].img_url ||\n        imagesToView[imagesToViewCurrentIndex].thumb_url ||\n        imagesToView[imagesToViewCurrentIndex].image_url\n      \"\n      [alt]=\"imagesToView[imagesToViewCurrentIndex].fallback\"\n    />\n    <button\n      class=\"stream-chat-angular__image-modal-stepper\"\n      type=\"button\"\n      [ngStyle]=\"{\n        visibility: isImageModalNextButtonVisible ? 'visible' : 'hidden'\n      }\"\n      data-testid=\"image-modal-next\"\n      (click)=\"stepImages(1)\"\n      (keyup.enter)=\"stepImages(1)\"\n    >\n      <stream-icon-placeholder icon=\"arrow-right\"></stream-icon-placeholder>\n    </button>\n  </div>\n</ng-template>\n", components: [{ type: IconPlaceholderComponent, selector: "stream-icon-placeholder", inputs: ["icon", "size"] }, { type: ModalComponent, selector: "stream-modal", inputs: ["isOpen", "content"], outputs: ["isOpenChange"] }], directives: [{ type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "translate": i9.TranslatePipe, "async": i3.AsyncPipe } });
+AttachmentListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: AttachmentListComponent, deps: [{ token: CustomTemplatesService }, { token: ImageLoadService }, { token: ChannelService }, { token: ThemeService }], target: i0.ɵɵFactoryTarget.Component });
+AttachmentListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: AttachmentListComponent, selector: "stream-attachment-list", inputs: { messageId: "messageId", attachments: "attachments" }, host: { properties: { "class": "this.class" } }, viewQueries: [{ propertyName: "modalContent", first: true, predicate: ["modalContent"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"orderedAttachments.length > 0\" class=\"str-chat__attachment-list\">\n  <ng-container\n    *ngFor=\"let attachment of orderedAttachments; trackBy: trackById\"\n  >\n    <div\n      data-testclass=\"attachment-container\"\n      class=\"str-chat__message-attachment str-chat__message-attachment--{{\n        attachment.type\n      }}\"\n      [class.str-chat__message-attachment--card]=\"isCard(attachment)\"\n      [class.str-chat-angular__message-attachment-file-single]=\"\n        isFile(attachment)\n      \"\n      [class.str-chat__message-attachment-with-actions]=\"\n        attachment.actions && attachment.actions.length > 0\n      \"\n    >\n      <img\n        *ngIf=\"isImage(attachment)\"\n        class=\"str-chat__message-attachment--img\"\n        data-testclass=\"image\"\n        [src]=\"\n          attachment.img_url || attachment.thumb_url || attachment.image_url\n        \"\n        [alt]=\"attachment?.fallback\"\n        (load)=\"imageLoaded()\"\n        (click)=\"openImageModal([attachment])\"\n        (keyup.enter)=\"openImageModal([attachment])\"\n      />\n      <div\n        class=\"str-chat__gallery\"\n        data-testid=\"image-gallery\"\n        *ngIf=\"isGallery(attachment)\"\n        [class.str-chat__gallery--square]=\"(attachment?.images)!.length > 3\"\n        [class.str-chat__gallery-two-rows]=\"(attachment?.images)!.length > 2\"\n      >\n        <ng-container\n          *ngFor=\"\n            let galleryImage of attachment.images;\n            let index = index;\n            let isLast = last;\n            trackBy: trackByImageUrl\n          \"\n        >\n          <button\n            *ngIf=\"index < 3 || (index === 3 && isLast)\"\n            class=\"str-chat__gallery-image\"\n            data-testclass=\"gallery-image\"\n            (click)=\"openImageModal(attachment.images!, index)\"\n            (keyup.enter)=\"openImageModal(attachment.images!, index)\"\n          >\n            <img\n              [src]=\"\n                galleryImage.img_url ||\n                galleryImage.thumb_url ||\n                galleryImage.image_url\n              \"\n              [alt]=\"galleryImage.fallback\"\n              (load)=\"imageLoaded()\"\n            />\n          </button>\n          <button\n            *ngIf=\"index === 3 && !isLast\"\n            class=\"str-chat__gallery-placeholder\"\n            data-testclass=\"gallery-image\"\n            (click)=\"openImageModal(attachment.images!, index)\"\n            (keyup.enter)=\"openImageModal(attachment.images!, index)\"\n            [ngStyle]=\"{\n              'background-image':\n                'url(' +\n                (galleryImage.img_url ||\n                  galleryImage.thumb_url ||\n                  galleryImage.image_url) +\n                ')'\n            }\"\n          >\n            <p\n              [innerHTML]=\"\n                'streamChat.{{ imageCount }} more'\n                  | translate: { imageCount: attachment!.images!.length - 4 }\n              \"\n            ></p>\n          </button>\n        </ng-container>\n      </div>\n      <video\n        class=\"str-chat__video-angular\"\n        *ngIf=\"isVideo(attachment)\"\n        controls\n        data-testclass=\"video-attachment\"\n        [src]=\"attachment.asset_url\"\n      ></video>\n      <div\n        *ngIf=\"isFile(attachment)\"\n        class=\"\n          str-chat__message-attachment-file--item\n          str-chat-angular__message-attachment-file-single\n        \"\n      >\n        <stream-icon-placeholder\n          *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              {{ attachment.title }}\n            </div>\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(attachment)\"\n            >{{ getFileSize(attachment) }}</span\n          >\n        </div>\n      </div>\n      <div\n        *ngIf=\"isCard(attachment)\"\n        class=\"str-chat__message-attachment-card str-chat__message-attachment-card--{{\n          attachment.type\n        }}\"\n      >\n        <div\n          *ngIf=\"attachment.image_url || attachment.thumb_url\"\n          class=\"str-chat__message-attachment-card--header\"\n        >\n          <img\n            data-testclass=\"card-img\"\n            alt=\"{{ attachment.image_url || attachment.thumb_url }}\"\n            src=\"{{ attachment.image_url || attachment.thumb_url }}\"\n          />\n        </div>\n        <div class=\"str-chat__message-attachment-card--content\">\n          <div class=\"str-chat__message-attachment-card--flex\">\n            <div\n              *ngIf=\"attachment.title\"\n              data-testclass=\"card-title\"\n              class=\"str-chat__message-attachment-card--title\"\n            >\n              {{ attachment.title }}\n            </div>\n            <div\n              *ngIf=\"attachment.text\"\n              class=\"str-chat__message-attachment-card--text\"\n              data-testclass=\"card-text\"\n            >\n              {{ attachment.text }}\n            </div>\n            <a\n              class=\"str-chat__message-attachment-card--url\"\n              *ngIf=\"attachment.title_link || attachment.og_scrape_url\"\n              data-testclass=\"url-link\"\n              noopener\n              noreferrer\n              href=\"{{ attachment.title_link || attachment.og_scrape_url }}\"\n              target=\"_blank\"\n            >\n              {{ trimUrl(attachment.title_link || attachment.og_scrape_url) }}\n            </a>\n          </div>\n        </div>\n      </div>\n      <div\n        class=\"str-chat__message-attachment-actions\"\n        *ngIf=\"attachment.actions && attachment.actions.length > 0\"\n      >\n        <div class=\"str-chat__message-attachment-actions-form\">\n          <button\n            *ngFor=\"\n              let action of attachment.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    </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    [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      class=\"\n        stream-chat-angular__image-modal-image\n        str-chat__image-carousel-image\n      \"\n      data-testid=\"modal-image\"\n      [src]=\"\n        imagesToView[imagesToViewCurrentIndex].img_url ||\n        imagesToView[imagesToViewCurrentIndex].thumb_url ||\n        imagesToView[imagesToViewCurrentIndex].image_url\n      \"\n      [alt]=\"imagesToView[imagesToViewCurrentIndex].fallback\"\n    />\n    <button\n      class=\"\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: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i7.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "translate": i8.TranslatePipe, "async": i7.AsyncPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: AttachmentListComponent, decorators: [{
             type: Component,
             args: [{
@@ -2318,10 +2353,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImpor
                     templateUrl: './attachment-list.component.html',
                     styles: [],
                 }]
-        }], ctorParameters: function () { return [{ type: CustomTemplatesService }, { type: ImageLoadService }, { type: ChannelService }]; }, propDecorators: { messageId: [{
+        }], ctorParameters: function () { return [{ type: CustomTemplatesService }, { type: ImageLoadService }, { type: ChannelService }, { type: ThemeService }]; }, propDecorators: { messageId: [{
                 type: Input
             }], attachments: [{
                 type: Input
+            }], class: [{
+                type: HostBinding
             }], modalContent: [{
                 type: ViewChild,
                 args: ['modalContent', { static: true }]
@@ -2331,7 +2368,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImpor
  * The `AttachmentPreviewList` compontent displays a preview of the attachments uploaded to a message. Users can delete attachments using the preview component, or retry upload if it failed previously.
  */
 class AttachmentPreviewListComponent {
-    constructor() {
+    constructor(themeService) {
         /**
          * An output to notify the parent component if the user tries to retry a failed upload
          */
@@ -2340,6 +2377,7 @@ class AttachmentPreviewListComponent {
          * An output to notify the parent component if the user wants to delete a file
          */
         this.deleteAttachment = new EventEmitter();
+        this.themeVersion = themeService.themeVersion;
     }
     attachmentUploadRetried(file) {
         this.retryAttachmentUpload.emit(file);
@@ -2351,8 +2389,8 @@ class AttachmentPreviewListComponent {
         return item.file;
     }
 }
-AttachmentPreviewListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: AttachmentPreviewListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AttachmentPreviewListComponent.ɵcmp = i0.ɵɵ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, template: "<div class=\"rfu-image-previewer\" *ngIf=\"(attachmentUploads$ | async)?.length\">\n  <ng-container\n    *ngFor=\"\n      let attachmentUpload of attachmentUploads$ | async;\n      trackBy: trackByFile\n    \"\n  >\n    <div\n      *ngIf=\"attachmentUpload.type === 'image'\"\n      class=\"rfu-image-previewer__image\"\n      [class.rfu-image-previewer__image--loaded]=\"\n        attachmentUpload.state === 'success'\n      \"\n      data-testclass=\"attachment-image-preview\"\n    >\n      <div\n        *ngIf=\"attachmentUpload.state === 'error'\"\n        class=\"rfu-image-previewer__retry\"\n        (click)=\"attachmentUploadRetried(attachmentUpload.file)\"\n        (keyup.enter)=\"attachmentUploadRetried(attachmentUpload.file)\"\n        data-testclass=\"upload-error\"\n      >\n        <stream-icon-placeholder icon=\"retry\"></stream-icon-placeholder>\n      </div>\n      <div class=\"rfu-thumbnail__wrapper\" style=\"width: 100; height: 100\">\n        <div class=\"rfu-thumbnail__overlay\">\n          <div\n            class=\"rfu-icon-button\"\n            data-testclass=\"delete-attachment\"\n            role=\"button\"\n            (click)=\"attachmentDeleted(attachmentUpload)\"\n            (keyup.enter)=\"attachmentDeleted(attachmentUpload)\"\n          >\n            <stream-icon-placeholder icon=\"close\"></stream-icon-placeholder>\n          </div>\n        </div>\n        <img\n          *ngIf=\"attachmentUpload.url || attachmentUpload.previewUri\"\n          src=\"{{\n            attachmentUpload.url\n              ? attachmentUpload.url\n              : attachmentUpload.previewUri\n          }}\"\n          alt=\"attachmentUpload.file.name\"\n          class=\"rfu-thumbnail__image\"\n          data-testclass=\"attachment-image\"\n        />\n      </div>\n      <stream-loading-indicator-placeholder\n        data-testclass=\"loading-indicator\"\n        color=\"rgba(255,255,255,0.7)\"\n        *ngIf=\"attachmentUpload.state === 'uploading'\"\n      ></stream-loading-indicator-placeholder>\n    </div>\n    <div\n      class=\"rfu-file-previewer\"\n      *ngIf=\"\n        attachmentUpload.type === 'file' || attachmentUpload.type === 'video'\n      \"\n      data-testclass=\"attachment-file-preview\"\n    >\n      <ol>\n        <li\n          class=\"rfu-file-previewer__file\"\n          [class.rfu-file-previewer__file--uploading]=\"\n            attachmentUpload.state === 'uploading'\n          \"\n          [class.rfu-file-previewer__file--failed]=\"\n            attachmentUpload.state === 'error'\n          \"\n        >\n          <stream-icon-placeholder icon=\"file\"></stream-icon-placeholder>\n\n          <a\n            data-testclass=\"file-download-link\"\n            href=\"{{ attachmentUpload.url }}\"\n            (click)=\"attachmentUpload.url ? null : $event.preventDefault()\"\n            (keyup.enter)=\"\n              attachmentUpload.url ? null : $event.preventDefault()\n            \"\n            download\n          >\n            {{ attachmentUpload.file.name }}\n            <ng-container *ngIf=\"attachmentUpload.state === 'error'\">\n              <div\n                data-testclass=\"file-upload-retry\"\n                class=\"rfu-file-previewer__failed\"\n                (click)=\"attachmentUploadRetried(attachmentUpload.file)\"\n                (keyup.enter)=\"attachmentUploadRetried(attachmentUpload.file)\"\n                translate\n              >\n                streamChat.failed\n              </div>\n              <div\n                class=\"rfu-file-previewer__retry\"\n                (click)=\"attachmentUploadRetried(attachmentUpload.file)\"\n                (keyup.enter)=\"attachmentUploadRetried(attachmentUpload.file)\"\n                translate\n              >\n                streamChat.retry\n              </div>\n            </ng-container>\n          </a>\n\n          <span\n            data-testclass=\"file-delete\"\n            class=\"rfu-file-previewer__close-button\"\n            (click)=\"attachmentDeleted(attachmentUpload)\"\n            (keyup.enter)=\"attachmentDeleted(attachmentUpload)\"\n          >\n            \u2718\n          </span>\n          <div\n            *ngIf=\"attachmentUpload.state === 'uploading'\"\n            class=\"rfu-file-previewer__loading-indicator\"\n          >\n            <stream-loading-indicator-placeholder></stream-loading-indicator-placeholder>\n          </div>\n        </li>\n      </ol>\n    </div>\n  </ng-container>\n</div>\n", components: [{ type: IconPlaceholderComponent, selector: "stream-icon-placeholder", inputs: ["icon", "size"] }, { type: LoadingIndicatorPlaceholderComponent, selector: "stream-loading-indicator-placeholder", inputs: ["size", "color"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i9.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }], pipes: { "async": i3.AsyncPipe } });
+AttachmentPreviewListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: AttachmentPreviewListComponent, deps: [{ token: ThemeService }], target: i0.ɵɵFactoryTarget.Component });
+AttachmentPreviewListComponent.ɵcmp = i0.ɵɵ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, 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\" style=\"width: 100; height: 100\">\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: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i8.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { type: i7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "async": i7.AsyncPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: AttachmentPreviewListComponent, decorators: [{
             type: Component,
             args: [{
@@ -2360,7 +2398,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImpor
                     templateUrl: './attachment-preview-list.component.html',
                     styles: [],
                 }]
-        }], ctorParameters: function () { return []; }, propDecorators: { attachmentUploads$: [{
+        }], ctorParameters: function () { return [{ type: ThemeService }]; }, propDecorators: { attachmentUploads$: [{
                 type: Input
             }], retryAttachmentUpload: [{
                 type: Output
@@ -2372,7 +2410,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImpor
  * The `MessageInput` component displays an input where users can type their messages and upload files, and sends the message to the active channel. The component can be used to compose new messages or update existing ones. To send messages, the chat user needs to have the necessary [channel capability](https://getstream.io/chat/docs/javascript/channel_capabilities/?language=javascript).
  */
 class MessageInputComponent {
-    constructor(channelService, notificationService, attachmentService, configService, textareaType, componentFactoryResolver, cdRef, chatClient, emojiInputService, customTemplatesService) {
+    constructor(channelService, notificationService, attachmentService, configService, textareaType, componentFactoryResolver, cdRef, chatClient, emojiInputService, customTemplatesService, themeService) {
         this.channelService = channelService;
         this.notificationService = notificationService;
         this.attachmentService = attachmentService;
@@ -2391,12 +2429,18 @@ class MessageInputComponent {
          * Emits when a message was successfuly sent or updated
          */
         this.messageUpdate = new EventEmitter();
+        this.class = 'str-chat__message-input-angular-host';
         this.textareaValue = '';
         this.mentionedUsers = [];
         this.typingStart$ = new Subject();
         this.isCooldownInProgress = false;
+        this.fileInputId = v4();
         this.subscriptions = [];
         this.isViewInited = false;
+        this.defaultTextareaPlaceholder = 'streamChat.Type your message';
+        this.slowModeTextareaPlaceholder = 'streamChat.Slow Mode ON';
+        this.themeVersion = themeService.themeVersion;
+        this.textareaPlaceholder = this.defaultTextareaPlaceholder;
         this.subscriptions.push(this.attachmentService.attachmentUploadInProgressCounter$.subscribe((counter) => {
             if (counter === 0 && this.hideNotification) {
                 this.hideNotification();
@@ -2426,6 +2470,8 @@ class MessageInputComponent {
             }
         }));
         this.attachmentUploads$ = this.attachmentService.attachmentUploads$;
+        this.attachmentUploadInProgressCounter$ =
+            this.attachmentService.attachmentUploadInProgressCounter$;
         this.isFileUploadEnabled = this.configService.isFileUploadEnabled;
         this.isMultipleFileUploadEnabled =
             this.configService.isMultipleFileUploadEnabled;
@@ -2509,6 +2555,9 @@ class MessageInputComponent {
     messageSent() {
         var _a;
         return __awaiter(this, void 0, void 0, function* () {
+            if (this.isCooldownInProgress) {
+                return;
+            }
             let attachmentUploadInProgressCounter;
             this.attachmentService.attachmentUploadInProgressCounter$
                 .pipe(first())
@@ -2573,9 +2622,6 @@ class MessageInputComponent {
                 ? "streamChat.You can't send thread replies in this channel"
                 : "streamChat.You can't send messages in this channel";
         }
-        else if (this.cooldown$) {
-            return 'streamChat.Slow Mode ON';
-        }
         return '';
     }
     filesSelected(fileList) {
@@ -2702,6 +2748,7 @@ class MessageInputComponent {
         return parentMessageId;
     }
     startCooldown(cooldown) {
+        this.textareaPlaceholder = this.slowModeTextareaPlaceholder;
         this.isCooldownInProgress = true;
         this.cooldown$ = timer(0, 1000).pipe(take(cooldown + 1), map((v) => cooldown - v), tap((v) => {
             if (v === 0) {
@@ -2712,14 +2759,11 @@ class MessageInputComponent {
     stopCooldown() {
         this.cooldown$ = undefined;
         this.isCooldownInProgress = false;
-        // the anchor directive will be recreated because of *ngIf, so we will have to reinit the textarea as well
-        this.textareaRef = undefined;
-        // we can only create the textarea after the anchor was recreated, so we will have to wait a change detection cycle with setTimeout
-        setTimeout(() => this.initTextarea());
+        this.textareaPlaceholder = this.defaultTextareaPlaceholder;
     }
 }
-MessageInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: MessageInputComponent, deps: [{ token: ChannelService }, { token: NotificationService }, { token: AttachmentService }, { token: MessageInputConfigService }, { token: textareaInjectionToken }, { token: i0.ComponentFactoryResolver }, { token: i0.ChangeDetectorRef }, { token: ChatClientService }, { token: EmojiInputService }, { token: CustomTemplatesService }], target: i0.ɵɵFactoryTarget.Component });
-MessageInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: MessageInputComponent, selector: "stream-message-input", inputs: { isFileUploadEnabled: "isFileUploadEnabled", areMentionsEnabled: "areMentionsEnabled", mentionScope: "mentionScope", mode: "mode", isMultipleFileUploadEnabled: "isMultipleFileUploadEnabled", message: "message", sendMessage$: "sendMessage$" }, outputs: { messageUpdate: "messageUpdate" }, providers: [AttachmentService, EmojiInputService], viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }, { propertyName: "textareaAnchor", first: true, predicate: TextareaDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"{{\n    mode === 'main' ? 'str-chat__input-flat' : 'str-chat__small-message-input'\n  }}\"\n  [class.str-chat__input-flat-has-attachments]=\"\n    (attachmentUploads$ | async)!.length > 0\n  \"\n  [class.str-chat__input-flat-quoted]=\"!!quotedMessage\"\n>\n  <div\n    data-testid=\"quoted-message-container\"\n    class=\"quoted-message-preview\"\n    *ngIf=\"quotedMessage\"\n  >\n    <div class=\"quoted-message-preview-header\">\n      <div>{{ \"streamChat.Reply to Message\" | translate }}</div>\n      <button\n        class=\"str-chat__square-button\"\n        data-testid=\"remove-quote\"\n        (click)=\"deselectMessageToQuote()\"\n        (keyup.enter)=\"deselectMessageToQuote()\"\n      >\n        <stream-icon-placeholder\n          icon=\"close-no-outline\"\n          style=\"font-size: 10px; line-height: 10px\"\n        ></stream-icon-placeholder>\n      </button>\n    </div>\n    <div class=\"quoted-message-preview-content\">\n      <stream-avatar-placeholder\n        data-testid=\"qouted-message-avatar\"\n        class=\"str-chat-angular__avatar-host\"\n        [imageUrl]=\"quotedMessage?.user?.image\"\n        [name]=\"quotedMessage?.user?.name || quotedMessage?.user?.id\"\n        [size]=\"20\"\n        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]=\"quotedMessage?.html || quotedMessage?.text\"\n        ></div>\n      </div>\n    </div>\n  </div>\n  <div class=\"str-chat__input-flat-wrapper\" style=\"width: 100%\">\n    <div\n      class=\"{{\n        mode === 'main'\n          ? 'str-chat__input-flat--textarea-wrapper'\n          : 'str-chat__small-message-input--textarea-wrapper'\n      }}\"\n    >\n      <ng-template\n        #defaultAttachmentsPreview\n        let-attachmentUploads$=\"attachmentUploads$\"\n        let-retryUploadHandler=\"retryUploadHandler\"\n        let-deleteUploadHandler=\"deleteUploadHandler\"\n      >\n        <stream-attachment-preview-list\n          [attachmentUploads$]=\"attachmentUploads$\"\n          (retryAttachmentUpload)=\"retryUploadHandler($event)\"\n          (deleteAttachment)=\"deleteUploadHandler($event)\"\n          class=\"rfu-image-previewer-angular-host\"\n        ></stream-attachment-preview-list>\n      </ng-template>\n      <ng-container\n        *ngTemplateOutlet=\"\n          attachmentPreviewListTemplate || defaultAttachmentsPreview;\n          context: getAttachmentPreviewListContext()\n        \"\n      ></ng-container>\n      <div class=\"rta str-chat__textarea str-chat-angular__textarea\">\n        <ng-container\n          *ngIf=\"emojiPickerTemplate && !isCooldownInProgress\"\n          data-testid=\"emoji-picker\"\n        >\n          <div\n            class=\"\n              str-chat__input-flat-emojiselect\n              str-chat-angular__emojiselect\n            \"\n          >\n            <ng-container\n              *ngTemplateOutlet=\"\n                emojiPickerTemplate;\n                context: getEmojiPickerContext()\n              \"\n            ></ng-container>\n          </div>\n        </ng-container>\n        <div\n          class=\"str-chat__input-flat-cooldown str-chat-angular__cooldown\"\n          *ngIf=\"isCooldownInProgress\"\n          data-testid=\"cooldown-timer\"\n        >\n          {{ cooldown$ | async }}\n        </div>\n        <ng-template\n          *ngIf=\"canSendMessages && !isCooldownInProgress; else notAllowed\"\n          streamTextarea\n          [(value)]=\"textareaValue\"\n          (valueChange)=\"typingStart$.next()\"\n          (send)=\"messageSent()\"\n          [componentRef]=\"textareaRef\"\n          (userMentions)=\"mentionedUsers = $event\"\n          [areMentionsEnabled]=\"areMentionsEnabled\"\n          [mentionScope]=\"mentionScope\"\n        ></ng-template>\n        <ng-template #notAllowed>\n          <textarea\n            disabled\n            rows=\"1\"\n            [value]=\"disabledTextareaText | translate\"\n            class=\"rta__textarea str-chat__textarea__textarea\"\n            data-testid=\"disabled-textarea\"\n          ></textarea>\n        </ng-template>\n      </div>\n      <div\n        *ngIf=\"\n          isFileUploadEnabled &&\n          isFileUploadAuthorized &&\n          canSendMessages &&\n          !isCooldownInProgress\n        \"\n        class=\"str-chat__fileupload-wrapper\"\n        data-testid=\"file-upload-button\"\n      >\n        <div class=\"str-chat__tooltip\">\n          {{ \"streamChat.Attach files\" | translate }}\n        </div>\n        <div class=\"rfu-file-upload-button\">\n          <label>\n            <input\n              #fileInput\n              type=\"file\"\n              class=\"rfu-file-input\"\n              data-testid=\"file-input\"\n              [multiple]=\"isMultipleFileUploadEnabled\"\n              (change)=\"filesSelected(fileInput.files)\"\n            />\n            <span class=\"str-chat__input-flat-fileupload\">\n              <stream-icon-placeholder\n                icon=\"file-upload\"\n              ></stream-icon-placeholder>\n            </span>\n          </label>\n        </div>\n      </div>\n    </div>\n    <button\n      *ngIf=\"canSendMessages\"\n      data-testid=\"send-button\"\n      class=\"str-chat__send-button\"\n      (click)=\"messageSent()\"\n      (keyup.enter)=\"messageSent()\"\n    >\n      <stream-icon-placeholder icon=\"send\"></stream-icon-placeholder>\n    </button>\n  </div>\n</div>\n", components: [{ type: IconPlaceholderComponent, selector: "stream-icon-placeholder", inputs: ["icon", "size"] }, { type: AvatarPlaceholderComponent, selector: "stream-avatar-placeholder", inputs: ["name", "imageUrl", "size", "location", "channel", "user", "type"] }, { type: AttachmentListComponent, selector: "stream-attachment-list", inputs: ["messageId", "attachments"] }, { type: AttachmentPreviewListComponent, selector: "stream-attachment-preview-list", inputs: ["attachmentUploads$"], outputs: ["retryAttachmentUpload", "deleteAttachment"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: TextareaDirective, selector: "[streamTextarea]", inputs: ["componentRef", "areMentionsEnabled", "mentionScope", "value"], outputs: ["valueChange", "send", "userMentions"] }], pipes: { "async": i3.AsyncPipe, "translate": i9.TranslatePipe } });
+MessageInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: MessageInputComponent, deps: [{ token: ChannelService }, { token: NotificationService }, { token: AttachmentService }, { token: MessageInputConfigService }, { token: textareaInjectionToken }, { token: i0.ComponentFactoryResolver }, { token: i0.ChangeDetectorRef }, { token: ChatClientService }, { token: EmojiInputService }, { token: CustomTemplatesService }, { token: ThemeService }], target: i0.ɵɵFactoryTarget.Component });
+MessageInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: MessageInputComponent, selector: "stream-message-input", inputs: { isFileUploadEnabled: "isFileUploadEnabled", areMentionsEnabled: "areMentionsEnabled", mentionScope: "mentionScope", mode: "mode", isMultipleFileUploadEnabled: "isMultipleFileUploadEnabled", message: "message", sendMessage$: "sendMessage$" }, outputs: { messageUpdate: "messageUpdate" }, 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, 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          style=\"font-size: 15px; line-height: 15px; width: 15px; height: 15px\"\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]=\"quotedMessage?.html || quotedMessage?.text\"\n        ></div>\n      </div>\n    </div>\n  </div>\n  <div class=\"str-chat__input-flat-wrapper\" style=\"width: 100%\">\n    <div\n      class=\"{{\n        mode === 'main'\n          ? 'str-chat__input-flat--textarea-wrapper'\n          : 'str-chat__small-message-input--textarea-wrapper'\n      }}\"\n    >\n      <ng-template\n        #defaultAttachmentsPreview\n        let-attachmentUploads$=\"attachmentUploads$\"\n        let-retryUploadHandler=\"retryUploadHandler\"\n        let-deleteUploadHandler=\"deleteUploadHandler\"\n      >\n        <stream-attachment-preview-list\n          [attachmentUploads$]=\"attachmentUploads$\"\n          (retryAttachmentUpload)=\"retryUploadHandler($event)\"\n          (deleteAttachment)=\"deleteUploadHandler($event)\"\n          class=\"rfu-image-previewer-angular-host\"\n        ></stream-attachment-preview-list>\n      </ng-template>\n      <ng-container\n        *ngTemplateOutlet=\"\n          attachmentPreviewListTemplate || defaultAttachmentsPreview;\n          context: getAttachmentPreviewListContext()\n        \"\n      ></ng-container>\n      <div class=\"rta str-chat__textarea str-chat-angular__textarea\">\n        <ng-container *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          ></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      <div\n        *ngIf=\"isFileUploadEnabled && isFileUploadAuthorized && canSendMessages\"\n        class=\"str-chat__fileupload-wrapper\"\n        data-testid=\"file-upload-button\"\n      >\n        <div class=\"str-chat__tooltip\">\n          {{ \"streamChat.Attach files\" | translate }}\n        </div>\n        <div class=\"rfu-file-upload-button\">\n          <label>\n            <input\n              #fileInput\n              type=\"file\"\n              class=\"rfu-file-input\"\n              data-testid=\"file-input\"\n              [multiple]=\"isMultipleFileUploadEnabled\"\n              (change)=\"filesSelected(fileInput.files)\"\n            />\n            <span class=\"str-chat__input-flat-fileupload\">\n              <stream-icon-placeholder\n                icon=\"file-upload\"\n              ></stream-icon-placeholder>\n            </span>\n          </label>\n        </div>\n      </div>\n    </div>\n    <button\n      *ngIf=\"canSendMessages && !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 *ngIf=\"themeVersion === '2'\" class=\"str-chat__message-input\">\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 class=\"str-chat__message-input-inner\">\n      <div\n        *ngIf=\"isFileUploadEnabled && isFileUploadAuthorized && canSendMessages\"\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      <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]=\"quotedMessage?.html || quotedMessage?.text\"\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            [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"] }, { type: AttachmentListComponent, selector: "stream-attachment-list", inputs: ["messageId", "attachments"] }, { type: AttachmentPreviewListComponent, selector: "stream-attachment-preview-list", inputs: ["attachmentUploads$"], outputs: ["retryAttachmentUpload", "deleteAttachment"] }], directives: [{ type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: TextareaDirective, selector: "[streamTextarea]", inputs: ["componentRef", "areMentionsEnabled", "mentionScope", "value", "placeholder"], outputs: ["valueChange", "send", "userMentions"] }], pipes: { "async": i7.AsyncPipe, "translate": i8.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: MessageInputComponent, decorators: [{
             type: Component,
             args: [{
@@ -2731,7 +2775,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImpor
         }], ctorParameters: function () { return [{ type: ChannelService }, { type: NotificationService }, { type: AttachmentService }, { type: MessageInputConfigService }, { type: i0.Type, decorators: [{
                     type: Inject,
                     args: [textareaInjectionToken]
-                }] }, { type: i0.ComponentFactoryResolver }, { type: i0.ChangeDetectorRef }, { type: ChatClientService }, { type: EmojiInputService }, { type: CustomTemplatesService }]; }, propDecorators: { isFileUploadEnabled: [{
+                }] }, { type: i0.ComponentFactoryResolver }, { type: i0.ChangeDetectorRef }, { type: ChatClientService }, { type: EmojiInputService }, { type: CustomTemplatesService }, { type: ThemeService }]; }, propDecorators: { isFileUploadEnabled: [{
                 type: Input
             }], areMentionsEnabled: [{
                 type: Input
@@ -2747,6 +2791,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImpor
                 type: Input
             }], messageUpdate: [{
                 type: Output
+            }], class: [{
+                type: HostBinding
             }], fileInput: [{
                 type: ViewChild,
                 args: ['fileInput']
@@ -2762,7 +2808,7 @@ class NotificationComponent {
     constructor() { }
 }
 NotificationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: NotificationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-NotificationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: NotificationComponent, selector: "stream-notification", inputs: { type: "type", content: "content" }, ngImport: i0, template: "<div\n  class=\"str-chat__custom-notification notification-{{ type }}\"\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: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+NotificationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: NotificationComponent, selector: "stream-notification", inputs: { type: "type", content: "content" }, ngImport: i0, 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: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: NotificationComponent, decorators: [{
             type: Component,
             args: [{
@@ -2780,10 +2826,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImpor
  * The `NotificationList` component displays the list of active notifications.
  */
 class NotificationListComponent {
-    constructor(customTemplatesService, notificationService) {
+    constructor(customTemplatesService, notificationService, themeService) {
         this.customTemplatesService = customTemplatesService;
         this.notificationService = notificationService;
+        this.themeService = themeService;
         this.notifications$ = this.notificationService.notifications$;
+        this.theme$ = this.themeService.theme$;
+        this.themeVersion = this.themeService.themeVersion;
     }
     trackById(_, item) {
         return item.id;
@@ -2792,8 +2841,8 @@ class NotificationListComponent {
         return Object.assign(Object.assign({}, notification.templateContext), { dismissFn: notification.dismissFn });
     }
 }
-NotificationListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: NotificationListComponent, deps: [{ token: CustomTemplatesService }, { token: NotificationService }], target: i0.ɵɵFactoryTarget.Component });
-NotificationListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: NotificationListComponent, selector: "stream-notification-list", ngImport: i0, template: "<div class=\"str-chat__list-notifications\">\n  <ng-container\n    *ngFor=\"let notification of notifications$ | async; trackBy: trackById\"\n  >\n    <ng-template #notificationContent>\n      <div\n        *ngIf=\"notification.text !== undefined\"\n        data-testclass=\"notification-content\"\n      >\n        {{ notification.text | translate: notification.translateParams }}\n      </div>\n      <ng-container *ngIf=\"notification.template !== undefined\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            notification.template;\n            context: getNotificationContentContext(notification)\n          \"\n        ></ng-container>\n      </ng-container>\n    </ng-template>\n    <ng-container\n      *ngTemplateOutlet=\"\n        (customTemplatesService.notificationTemplate$ | async) ||\n          defaultNotification;\n        context: { type: notification.type, content: notificationContent }\n      \"\n    ></ng-container>\n  </ng-container>\n</div>\n\n<ng-template #defaultNotification let-type=\"type\" let-content=\"content\">\n  <stream-notification [type]=\"type\" [content]=\"content\"></stream-notification>\n</ng-template>\n", components: [{ type: NotificationComponent, selector: "stream-notification", inputs: ["type", "content"] }], directives: [{ type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "async": i3.AsyncPipe, "translate": i9.TranslatePipe } });
+NotificationListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: NotificationListComponent, deps: [{ token: CustomTemplatesService }, { token: NotificationService }, { token: ThemeService }], target: i0.ɵɵFactoryTarget.Component });
+NotificationListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: NotificationListComponent, selector: "stream-notification-list", ngImport: i0, template: "<div\n  class=\"str-chat str-chat__theme-{{\n    theme$ | async\n  }} 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: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "async": i7.AsyncPipe, "translate": i8.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: NotificationListComponent, decorators: [{
             type: Component,
             args: [{
@@ -2801,7 +2850,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImpor
                     templateUrl: './notification-list.component.html',
                     styles: [],
                 }]
-        }], ctorParameters: function () { return [{ type: CustomTemplatesService }, { type: NotificationService }]; } });
+        }], ctorParameters: function () { return [{ type: CustomTemplatesService }, { type: NotificationService }, { type: ThemeService }]; } });
 
 /**
  * The `MessageActionsBox` component displays a list of message actions (i.e edit), that can be opened or closed. You can find the [list of the supported actions](../concepts/message-interactions.mdx) in the message interaction guide.
@@ -2814,6 +2863,7 @@ class MessageActionsBoxComponent {
         this.customTemplatesService = customTemplatesService;
         /**
          * Indicates if the list should be opened or closed. Adding a UI element to open and close the list is the parent's component responsibility.
+         * @deprecated No need for this since [theme-v2](../theming/introduction.mdx)
          */
         this.isOpen = false;
         /**
@@ -2948,7 +2998,7 @@ class MessageActionsBoxComponent {
     }
 }
 MessageActionsBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: MessageActionsBoxComponent, deps: [{ token: ChatClientService }, { token: NotificationService }, { token: ChannelService }, { token: CustomTemplatesService }], target: i0.ɵɵFactoryTarget.Component });
-MessageActionsBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: MessageActionsBoxComponent, selector: "stream-message-actions-box", inputs: { isOpen: "isOpen", isMine: "isMine", message: "message", enabledActions: "enabledActions" }, outputs: { displayedActionsCount: "displayedActionsCount", isEditing: "isEditing" }, viewQueries: [{ propertyName: "modalContent", first: true, predicate: ["modalContent"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  data-testid=\"action-box\"\n  class=\"str-chat__message-actions-box\"\n  [class.str-chat__message-actions-box--open]=\"isOpen\"\n  [class.str-chat__message-actions-box--mine]=\"isMine\"\n>\n  <ul class=\"str-chat__message-actions-list\">\n    <ng-container\n      *ngFor=\"let item of visibleMessageActionItems; trackBy: trackByActionName\"\n    >\n      <ng-container\n        *ngTemplateOutlet=\"\n          messageActionItemTemplate || defaultMessageActionItem;\n          context: item\n        \"\n      ></ng-container>\n    </ng-container>\n  </ul>\n</div>\n\n<ng-template\n  #defaultMessageActionItem\n  let-actionName=\"actionName\"\n  let-actionHandler=\"actionHandler\"\n  let-actionLabelOrTranslationKey=\"actionLabelOrTranslationKey\"\n>\n  <button [attr.data-testid]=\"actionName + '-action'\" (click)=\"actionHandler()\">\n    <li class=\"str-chat__message-actions-list-item\">\n      {{ getActionLabel(actionLabelOrTranslationKey) | translate }}\n    </li>\n  </button>\n</ng-template>\n\n<ng-container\n  *ngTemplateOutlet=\"\n    modalTemplate || defaultModal;\n    context: getEditModalContext()\n  \"\n></ng-container>\n\n<ng-template\n  #defaultModal\n  let-isOpen=\"isOpen\"\n  let-isOpenChangeHandler=\"isOpenChangeHandler\"\n  let-content=\"content\"\n>\n  <stream-modal\n    [isOpen]=\"isOpen\"\n    (isOpenChange)=\"isOpenChangeHandler($event)\"\n    [content]=\"content\"\n  >\n  </stream-modal>\n</ng-template>\n\n<ng-template #modalContent>\n  <div class=\"str-chat__edit-message-form\" *ngIf=\"isEditModalOpen\">\n    <ng-template\n      #defaultInput\n      let-messageInput=\"message\"\n      let-messageUpdateHandler=\"messageUpdateHandler\"\n      let-sendMessage$Input=\"sendMessage$\"\n    >\n      <stream-message-input\n        [message]=\"messageInput\"\n        (messageUpdate)=\"messageUpdateHandler()\"\n        [sendMessage$]=\"sendMessage$Input\"\n      ></stream-message-input>\n    </ng-template>\n    <ng-container\n      *ngTemplateOutlet=\"\n        messageInputTemplate || defaultInput;\n        context: getMessageInputContext()\n      \"\n    >\n    </ng-container>\n\n    <stream-notification-list></stream-notification-list>\n    <div\n      class=\"\n        str-chat__message-team-form-footer\n        str-chat__message-team-form-footer-angular\n      \"\n    >\n      <div class=\"str-chat__edit-message-form-options\">\n        <button translate data-testid=\"cancel-button\" (click)=\"modalClosed()\">\n          streamChat.Cancel\n        </button>\n        <button\n          type=\"submit\"\n          translate\n          data-testid=\"send-button\"\n          (click)=\"sendClicked()\"\n          (keyup.enter)=\"sendClicked()\"\n        >\n          streamChat.Send\n        </button>\n      </div>\n    </div>\n  </div>\n</ng-template>\n", components: [{ type: ModalComponent, selector: "stream-modal", inputs: ["isOpen", "content"], outputs: ["isOpenChange"] }, { type: MessageInputComponent, selector: "stream-message-input", inputs: ["isFileUploadEnabled", "areMentionsEnabled", "mentionScope", "mode", "isMultipleFileUploadEnabled", "message", "sendMessage$"], outputs: ["messageUpdate"] }, { type: NotificationListComponent, selector: "stream-notification-list" }], directives: [{ type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i9.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }], pipes: { "translate": i9.TranslatePipe } });
+MessageActionsBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: MessageActionsBoxComponent, selector: "stream-message-actions-box", inputs: { isOpen: "isOpen", isMine: "isMine", message: "message", enabledActions: "enabledActions" }, outputs: { displayedActionsCount: "displayedActionsCount", isEditing: "isEditing" }, viewQueries: [{ propertyName: "modalContent", first: true, predicate: ["modalContent"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, 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          messageActionItemTemplate || defaultMessageActionItem;\n          context: item\n        \"\n      ></ng-container>\n    </ng-container>\n  </ul>\n</div>\n\n<ng-template\n  #defaultMessageActionItem\n  let-actionName=\"actionName\"\n  let-actionHandler=\"actionHandler\"\n  let-actionLabelOrTranslationKey=\"actionLabelOrTranslationKey\"\n>\n  <button\n    class=\"str-chat__message-actions-list-item-button\"\n    [attr.data-testid]=\"actionName + '-action'\"\n    (click)=\"actionHandler()\"\n  >\n    <li class=\"str-chat__message-actions-list-item\">\n      {{ getActionLabel(actionLabelOrTranslationKey) | translate }}\n    </li>\n  </button>\n</ng-template>\n\n<ng-container\n  *ngTemplateOutlet=\"\n    modalTemplate || defaultModal;\n    context: getEditModalContext()\n  \"\n></ng-container>\n\n<ng-template\n  #defaultModal\n  let-isOpen=\"isOpen\"\n  let-isOpenChangeHandler=\"isOpenChangeHandler\"\n  let-content=\"content\"\n>\n  <stream-modal\n    [isOpen]=\"isOpen\"\n    (isOpenChange)=\"isOpenChangeHandler($event)\"\n    [content]=\"content\"\n  >\n  </stream-modal>\n</ng-template>\n\n<ng-template #modalContent>\n  <div class=\"str-chat__edit-message-form\" *ngIf=\"isEditModalOpen\">\n    <ng-template\n      #defaultInput\n      let-messageInput=\"message\"\n      let-messageUpdateHandler=\"messageUpdateHandler\"\n      let-sendMessage$Input=\"sendMessage$\"\n    >\n      <stream-message-input\n        [message]=\"messageInput\"\n        (messageUpdate)=\"messageUpdateHandler()\"\n        [sendMessage$]=\"sendMessage$Input\"\n      ></stream-message-input>\n    </ng-template>\n    <ng-container\n      *ngTemplateOutlet=\"\n        messageInputTemplate || defaultInput;\n        context: getMessageInputContext()\n      \"\n    >\n    </ng-container>\n\n    <stream-notification-list></stream-notification-list>\n    <div\n      class=\"\n        str-chat__message-team-form-footer\n        str-chat__message-team-form-footer-angular\n      \"\n    >\n      <div class=\"str-chat__edit-message-form-options\">\n        <button\n          class=\"str-chat__edit-message-cancel\"\n          translate\n          data-testid=\"cancel-button\"\n          (click)=\"modalClosed()\"\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$"], outputs: ["messageUpdate"] }, { type: NotificationListComponent, selector: "stream-notification-list" }], directives: [{ type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }], pipes: { "translate": i8.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: MessageActionsBoxComponent, decorators: [{
             type: Component,
             args: [{
@@ -2977,16 +3027,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImpor
  * The `Channel` component is a container component that displays the [`ChannelHeader`](./ChannelHeaderComponent.mdx), [`MessageList`](./MessageListComponent.mdx), [`NotificationList`](./NotificationListComponent.mdx) and [`MessageInput`](./MessageInputComponent.mdx) components. You can also provide the [`Thread`](./ThreadComponent.mdx) component to use message [threads](https://getstream.io/chat/docs/javascript/threads/?language=javascript).
  */
 class ChannelComponent {
-    constructor(channelService) {
+    constructor(channelService, themeService) {
         this.channelService = channelService;
+        this.themeService = themeService;
         this.subscriptions = [];
         this.isError$ = this.channelService.channels$.pipe(map(() => false), catchError(() => of(true)), startWith(false));
         this.isInitializing$ = this.channelService.channels$.pipe(map((channels) => !channels), catchError(() => of(false)));
         this.isActiveThread$ = this.channelService.activeParentMessageId$.pipe(map((id) => !!id));
+        this.theme$ = this.themeService.theme$;
+        this.isActiveChannel$ = this.channelService.activeChannel$.pipe(map((c) => !!c));
     }
 }
-ChannelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: ChannelComponent, deps: [{ token: ChannelService }], target: i0.ɵɵFactoryTarget.Component });
-ChannelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: ChannelComponent, selector: "stream-channel", ngImport: i0, template: "<div\n  *ngIf=\"(isError$ | async) === false && (isInitializing$ | async) === false\"\n  class=\"str-chat str-chat-channel messaging\"\n>\n  <div class=\"str-chat__container\">\n    <div class=\"str-chat__main-panel\">\n      <ng-content></ng-content>\n    </div>\n    <ng-content\n      *ngIf=\"isActiveThread$ | async\"\n      select='[name=\"thread\"]'\n    ></ng-content>\n  </div>\n</div>\n", directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i3.AsyncPipe } });
+ChannelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: ChannelComponent, deps: [{ token: ChannelService }, { token: ThemeService }], target: i0.ɵɵFactoryTarget.Component });
+ChannelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: ChannelComponent, selector: "stream-channel", ngImport: i0, 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    <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: IconComponent, selector: "stream-icon", inputs: ["icon", "size"] }, { type: NotificationListComponent, selector: "stream-notification-list" }], directives: [{ type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i7.AsyncPipe, "translate": i8.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: ChannelComponent, decorators: [{
             type: Component,
             args: [{
@@ -2994,7 +3047,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImpor
                     templateUrl: './channel.component.html',
                     styles: [],
                 }]
-        }], ctorParameters: function () { return [{ type: ChannelService }]; } });
+        }], ctorParameters: function () { return [{ type: ChannelService }, { type: ThemeService }]; } });
 
 const listUsers = (users) => {
     let outStr = '';
@@ -3022,17 +3075,10 @@ const getChannelDisplayText = (channel, currentUser) => {
     return channel.id;
 };
 
-const getDeviceWidth = () => {
-    const width = window.innerWidth;
-    if (width < 768)
-        return { device: 'mobile', width };
-    if (width < 1024)
-        return { device: 'tablet', width };
-    return { device: 'full', width };
-};
-
 /**
  * The `ChannelListToggleService` can be used to toggle the channel list.
+ *
+ * @deprecated This service can only be used with [theming-v1](../concepts/theming-and-css.mdx), if you are using [thmeing-v2](../theming/introduction.mdx) please refer to our [responsive layout guide](../code-examples/responsive-layout.mdx)
  */
 class ChannelListToggleService {
     constructor() {
@@ -3041,9 +3087,7 @@ class ChannelListToggleService {
             .asObservable()
             .pipe(distinctUntilChanged());
         this.isOpen$.pipe(filter((s) => s)).subscribe(() => {
-            if (getDeviceWidth().device === 'mobile') {
-                this.watchForOutsideClicks();
-            }
+            this.watchForOutsideClicks();
         });
     }
     /**
@@ -3075,9 +3119,7 @@ class ChannelListToggleService {
      * This method should be called if a channel was selected, if on mobile, the channel list will be closed.
      */
     channelSelected() {
-        if (getDeviceWidth().device === 'mobile') {
-            this.close();
-        }
+        this.close();
     }
     watchForOutsideClicks() {
         if (!this.menuElement) {
@@ -3160,7 +3202,7 @@ class ChannelHeaderComponent {
     }
 }
 ChannelHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: ChannelHeaderComponent, deps: [{ token: ChannelService }, { token: ChannelListToggleService }, { token: CustomTemplatesService }, { token: i0.ChangeDetectorRef }, { token: ChatClientService }], target: i0.ɵɵFactoryTarget.Component });
-ChannelHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: ChannelHeaderComponent, selector: "stream-channel-header", ngImport: i0, template: "<div class=\"str-chat__header-livestream\">\n  <div\n    class=\"str-chat__header-hamburger\"\n    (click)=\"toggleMenu($event)\"\n    (keyup.enter)=\"toggleMenu($event)\"\n  >\n    <stream-icon-placeholder icon=\"menu\"></stream-icon-placeholder>\n  </div>\n  <stream-avatar-placeholder\n    imageUrl=\"{{ activeChannel?.data?.image }}\"\n    name=\"{{ avatarName }}\"\n    type=\"channel\"\n    location=\"channel-header\"\n    [channel]=\"activeChannel\"\n  ></stream-avatar-placeholder>\n  <div class=\"str-chat__header-livestream-left\">\n    <p data-testid=\"name\" class=\"str-chat__header-livestream-left--title\">\n      {{ displayText }}\n    </p>\n    <p data-testid=\"info\" class=\"str-chat__header-livestream-left--members\">\n      {{'streamChat.{{ memberCount }} members' | translate:memberCountParam}}\n      {{canReceiveConnectEvents ? ('streamChat.{{ watcherCount }} online' |\n      translate:watcherCountParam) : ''}}\n    </p>\n  </div>\n  <ng-container *ngIf=\"channelActionsTemplate\">\n    <ng-container\n      *ngTemplateOutlet=\"\n        channelActionsTemplate;\n        context: getChannelActionsContext()\n      \"\n    ></ng-container>\n  </ng-container>\n</div>\n", components: [{ type: IconPlaceholderComponent, selector: "stream-icon-placeholder", inputs: ["icon", "size"] }, { type: AvatarPlaceholderComponent, selector: "stream-avatar-placeholder", inputs: ["name", "imageUrl", "size", "location", "channel", "user", "type"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "translate": i9.TranslatePipe } });
+ChannelHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: ChannelHeaderComponent, selector: "stream-channel-header", ngImport: i0, 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    <p\n      data-testid=\"info\"\n      class=\"\n        str-chat__header-livestream-left--members str-chat__channel-header-info\n      \"\n    >\n      {{'streamChat.{{ memberCount }} members' | translate:memberCountParam}}\n      {{canReceiveConnectEvents ? ('streamChat.{{ watcherCount }} online' |\n      translate:watcherCountParam) : ''}}\n    </p>\n  </div>\n  <ng-container *ngIf=\"channelActionsTemplate\">\n    <ng-container\n      *ngTemplateOutlet=\"\n        channelActionsTemplate;\n        context: getChannelActionsContext()\n      \"\n    ></ng-container>\n  </ng-container>\n</div>\n", components: [{ type: IconPlaceholderComponent, selector: "stream-icon-placeholder", inputs: ["icon", "size"] }, { type: AvatarPlaceholderComponent, selector: "stream-avatar-placeholder", inputs: ["name", "imageUrl", "size", "location", "channel", "user", "type"] }], directives: [{ type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "translate": i8.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: ChannelHeaderComponent, decorators: [{
             type: Component,
             args: [{
@@ -3191,7 +3233,7 @@ class ChannelPreviewComponent {
         if (messages && messages.length > 0) {
             this.setLatestMessage(messages[messages.length - 1]);
         }
-        this.isUnread = !!this.channel.countUnread() && this.canSendReadEvents;
+        this.updateUnreadState();
         const capabilities = ((_d = (_c = this.channel) === null || _c === void 0 ? void 0 : _c.data) === null || _d === void 0 ? void 0 : _d.own_capabilities) || [];
         this.canSendReadEvents = capabilities.indexOf('read-events') !== -1;
         this.subscriptions.push(this.channel.on('message.new', this.handleMessageEvent.bind(this)));
@@ -3199,8 +3241,7 @@ class ChannelPreviewComponent {
         this.subscriptions.push(this.channel.on('message.deleted', this.handleMessageEvent.bind(this)));
         this.subscriptions.push(this.channel.on('channel.truncated', this.handleMessageEvent.bind(this)));
         this.subscriptions.push(this.channel.on('message.read', () => this.ngZone.run(() => {
-            this.isUnread =
-                !!this.channel.countUnread() && this.canSendReadEvents;
+            this.updateUnreadState();
         })));
     }
     ngOnDestroy() {
@@ -3235,7 +3276,7 @@ class ChannelPreviewComponent {
                 return;
             }
             this.setLatestMessage(event.message);
-            this.isUnread = !!this.channel.countUnread() && this.canSendReadEvents;
+            this.updateUnreadState();
         });
     }
     setLatestMessage(message) {
@@ -3249,9 +3290,18 @@ class ChannelPreviewComponent {
             this.latestMessage = 'streamChat.🏙 Attachment...';
         }
     }
+    updateUnreadState() {
+        if (this.isActive || !this.canSendReadEvents) {
+            this.unreadCount = 0;
+            this.isUnread = false;
+            return;
+        }
+        this.unreadCount = this.channel.countUnread();
+        this.isUnread = !!this.unreadCount;
+    }
 }
 ChannelPreviewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: ChannelPreviewComponent, deps: [{ token: ChannelService }, { token: i0.NgZone }, { token: ChatClientService }], target: i0.ɵɵFactoryTarget.Component });
-ChannelPreviewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: ChannelPreviewComponent, selector: "stream-channel-preview", inputs: { channel: "channel" }, ngImport: i0, template: "<button\n  class=\"str-chat__channel-preview-messenger\"\n  [class.str-chat__channel-preview-messenger--active]=\"isActive\"\n  [class.str-chat__channel-preview-messenger--unread]=\"isUnread\"\n  (click)=\"setAsActiveChannel()\"\n  data-testid=\"channel-preview-container\"\n>\n  <div class=\"str-chat__channel-preview-messenger--left\">\n    <stream-avatar-placeholder\n      name=\"{{ avatarName }}\"\n      imageUrl=\"{{ avatarImage }}\"\n      [size]=\"40\"\n      type=\"channel\"\n      [channel]=\"channel\"\n      location=\"channel-preview\"\n    ></stream-avatar-placeholder>\n  </div>\n  <div class=\"str-chat__channel-preview-messenger--right\">\n    <div\n      style=\"position: relative\"\n      class=\"str-chat__channel-preview-messenger--name\"\n    >\n      <span data-testid=\"channel-preview-title\">{{ title }}</span>\n    </div>\n    <div\n      data-testid=\"latest-message\"\n      class=\"str-chat__channel-preview-messenger--last-message\"\n    >\n      {{ latestMessage | translate }}\n    </div>\n  </div>\n</button>\n", components: [{ type: AvatarPlaceholderComponent, selector: "stream-avatar-placeholder", inputs: ["name", "imageUrl", "size", "location", "channel", "user", "type"] }], pipes: { "translate": i9.TranslatePipe } });
+ChannelPreviewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: ChannelPreviewComponent, selector: "stream-channel-preview", inputs: { channel: "channel" }, ngImport: i0, 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      {{ latestMessage | translate }}\n    </div>\n  </div>\n</button>\n", components: [{ type: AvatarPlaceholderComponent, selector: "stream-avatar-placeholder", inputs: ["name", "imageUrl", "size", "location", "channel", "user", "type"] }], directives: [{ type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "translate": i8.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: ChannelPreviewComponent, decorators: [{
             type: Component,
             args: [{
@@ -3267,12 +3317,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImpor
  * The `ChannelList` component renders the list of channels.
  */
 class ChannelListComponent {
-    constructor(channelService, channelListToggleService, customTemplatesService) {
+    constructor(channelService, channelListToggleService, customTemplatesService, themeService) {
         this.channelService = channelService;
         this.channelListToggleService = channelListToggleService;
         this.customTemplatesService = customTemplatesService;
+        this.themeService = themeService;
         this.isLoadingMoreChannels = false;
         this.subscriptions = [];
+        this.theme$ = this.themeService.theme$;
         this.isOpen$ = this.channelListToggleService.isOpen$;
         this.channels$ = this.channelService.channels$;
         this.hasMoreChannels$ = this.channelService.hasMoreChannels$;
@@ -3305,8 +3357,8 @@ class ChannelListComponent {
         };
     }
 }
-ChannelListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: ChannelListComponent, deps: [{ token: ChannelService }, { token: ChannelListToggleService }, { token: CustomTemplatesService }], target: i0.ɵɵFactoryTarget.Component });
-ChannelListComponent.ɵcmp = i0.ɵɵ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, template: "<div\n  #container\n  data-testid=\"channel-list-container\"\n  class=\"str-chat str-chat-channel-list messaging\"\n  [class.str-chat-channel-list--open]=\"(isOpen$ | async) === true\"\n>\n  <div\n    *ngIf=\"\n      (isError$ | async) === false && (isInitializing$ | async) === false;\n      else statusIndicator\n    \"\n    class=\"str-chat__channel-list-messenger\"\n  >\n    <div class=\"str-chat__channel-list-messenger__main\">\n      <p\n        data-testid=\"empty-channel-list-indicator\"\n        *ngIf=\"!(channels$ | async)?.length\"\n      >\n        {{ \"streamChat.You have no channels currently\" | translate }}\n      </p>\n      <ng-container\n        *ngFor=\"let channel of channels$ | async; trackBy: trackByChannelId\"\n      >\n        <ng-template #defaultTemplate let-channelInput=\"channel\">\n          <stream-channel-preview\n            data-testclass=\"channel-preview\"\n            [channel]=\"channelInput\"\n          ></stream-channel-preview>\n        </ng-template>\n        <div (click)=\"channelSelected()\" (keyup.enter)=\"channelSelected()\">\n          <ng-container\n            *ngTemplateOutlet=\"\n              customChannelPreviewTemplate || defaultTemplate;\n              context: getChannelPreviewContext(channel)\n            \"\n          ></ng-container>\n        </div>\n      </ng-container>\n      <div\n        *ngIf=\"hasMoreChannels$ | async\"\n        class=\"str-chat__load-more-button\"\n        (click)=\"loadMoreChannels()\"\n        (keyup.enter)=\"loadMoreChannels()\"\n        data-testid=\"load-more\"\n      >\n        <button\n          class=\"str-chat__load-more-button__button\"\n          data-testid=\"load-more-button\"\n          [disabled]=\"isLoadingMoreChannels\"\n        >\n          <span *ngIf=\"!isLoadingMoreChannels; else loadingIndicator\">{{\n            \"Load more\" | translate\n          }}</span>\n          <ng-template #loadingIndicator\n            ><stream-loading-indicator-placeholder></stream-loading-indicator-placeholder\n          ></ng-template>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n\n<ng-template #statusIndicator>\n  <ng-container *ngIf=\"isError$ | async\">\n    <ng-container *ngTemplateOutlet=\"chatDown\"></ng-container>\n  </ng-container>\n  <ng-container *ngIf=\"isInitializing$ | async\">\n    <ng-container *ngTemplateOutlet=\"loadingChannels\"></ng-container>\n  </ng-container>\n</ng-template>\n\n<ng-template #chatDown>\n  <div data-testid=\"chatdown-container\" class=\"str-chat__down\">\n    <ng-container *ngTemplateOutlet=\"loadingChannels\"></ng-container>\n    <div class=\"str-chat__down-main\">\n      <stream-icon-placeholder\n        icon=\"connection-error\"\n      ></stream-icon-placeholder>\n      <h1>{{ \"streamChat.Connection error\" | translate }}</h1>\n      <h3>\n        {{\n          \"streamChat.Error connecting to chat, refresh the page to try again.\"\n            | translate\n        }}\n      </h3>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #loadingChannels>\n  <div data-testid=\"loading-indicator\" class=\"str-chat__loading-channels\">\n    <ng-container *ngTemplateOutlet=\"loadingChannel\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"loadingChannel\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"loadingChannel\"></ng-container>\n  </div>\n</ng-template>\n\n<ng-template #loadingChannel>\n  <div class=\"str-chat__loading-channels-item\">\n    <div class=\"str-chat__loading-channels-avatar\"></div>\n    <div class=\"str-chat__loading-channels-meta\">\n      <div class=\"str-chat__loading-channels-username\"></div>\n      <div class=\"str-chat__loading-channels-status\"></div>\n    </div>\n  </div>\n</ng-template>\n", components: [{ type: ChannelPreviewComponent, selector: "stream-channel-preview", inputs: ["channel"] }, { type: LoadingIndicatorPlaceholderComponent, selector: "stream-loading-indicator-placeholder", inputs: ["size", "color"] }, { type: IconPlaceholderComponent, selector: "stream-icon-placeholder", inputs: ["icon", "size"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "async": i3.AsyncPipe, "translate": i9.TranslatePipe } });
+ChannelListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: ChannelListComponent, deps: [{ token: ChannelService }, { token: ChannelListToggleService }, { token: CustomTemplatesService }, { token: ThemeService }], target: i0.ɵɵFactoryTarget.Component });
+ChannelListComponent.ɵcmp = i0.ɵɵ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, template: "<div\n  #container\n  data-testid=\"channel-list-container\"\n  style=\"max-width: unset\"\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      <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: getChannelPreviewContext(channel)\n            \"\n          ></ng-container>\n        </div>\n      </ng-container>\n      <div\n        *ngIf=\"hasMoreChannels$ | async\"\n        class=\"str-chat__load-more-button\"\n        (click)=\"loadMoreChannels()\"\n        (keyup.enter)=\"loadMoreChannels()\"\n        data-testid=\"load-more\"\n      >\n        <button\n          class=\"str-chat__load-more-button__button 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    </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: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "async": i7.AsyncPipe, "translate": i8.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: ChannelListComponent, decorators: [{
             type: Component,
             args: [{
@@ -3314,7 +3366,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImpor
                     templateUrl: './channel-list.component.html',
                     styles: [],
                 }]
-        }], ctorParameters: function () { return [{ type: ChannelService }, { type: ChannelListToggleService }, { type: CustomTemplatesService }]; }, propDecorators: { container: [{
+        }], ctorParameters: function () { return [{ type: ChannelService }, { type: ChannelListToggleService }, { type: CustomTemplatesService }, { type: ThemeService }]; }, propDecorators: { container: [{
                 type: ViewChild,
                 args: ['container']
             }] } });
@@ -3360,6 +3412,8 @@ class MessageReactionsComponent {
          * Indicates if the selector should be opened or closed. Adding a UI element to open and close the selector is the parent's component responsibility.
          */
         this.isSelectorOpenChange = new EventEmitter();
+        this.popperTriggerHover = NgxPopperjsTriggers.hover;
+        this.popperPlacementAuto = NgxPopperjsPlacements.AUTO;
         this.eventHandler = (event) => {
             var _a;
             if (!((_a = this.selectorContainer) === null || _a === void 0 ? void 0 : _a.nativeElement.contains(event.target))) {
@@ -3420,6 +3474,9 @@ class MessageReactionsComponent {
             ? void this.channelService.removeReaction(this.messageId, type)
             : void this.channelService.addReaction(this.messageId, type);
     }
+    isOwnReaction(reactionType) {
+        return !!this.ownReactions.find((r) => r.type === reactionType);
+    }
     watchForOutsideClicks() {
         window.addEventListener('click', this.eventHandler);
     }
@@ -3444,7 +3501,7 @@ class MessageReactionsComponent {
     }
 }
 MessageReactionsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: MessageReactionsComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: ChannelService }], target: i0.ɵɵFactoryTarget.Component });
-MessageReactionsComponent.ɵcmp = i0.ɵɵ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, template: "<div\n  *ngIf=\"existingReactions.length > 0 && !isSelectorOpen\"\n  class=\"str-chat__reaction-list\"\n  [class.str-chat__reaction-list--reverse]=\"true\"\n  data-testid=\"reaction-list\"\n>\n  <ul>\n    <li\n      *ngFor=\"\n        let reactionType of existingReactions;\n        trackBy: trackByMessageReaction\n      \"\n      data-testclass=\"emoji\"\n    >\n      <span class=\"emoji\">\n        {{ getEmojiByReaction(reactionType) }}\n      </span>\n      &nbsp;\n    </li>\n    <li>\n      <span\n        data-testid=\"reactions-count\"\n        class=\"str-chat__reaction-list--counter\"\n        >{{ reactionsCount }}</span\n      >\n    </li>\n  </ul>\n</div>\n\n<div\n  #selectorContainer\n  class=\"str-chat__reaction-selector\"\n  *ngIf=\"isSelectorOpen\"\n  data-testid=\"reaction-selector\"\n>\n  <div\n    *ngIf=\"tooltipText\"\n    data-testid=\"tooltip\"\n    #selectorTooltip\n    class=\"str-chat__reaction-selector-tooltip\"\n    [ngStyle]=\"{\n      left: tooltipPositions?.tooltip + 'px',\n      visibility: tooltipPositions ? 'visible' : 'hidden'\n    }\"\n  >\n    <div\n      class=\"arrow\"\n      [ngStyle]=\"{ left: tooltipPositions?.arrow + 'px' }\"\n    ></div>\n    <span class=\"latest-user-username\">\n      {{ tooltipText }}\n    </span>\n  </div>\n  <ul class=\"str-chat__message-reactions-list\">\n    <li\n      class=\"str-chat__message-reactions-list-item str-chat__emoji\"\n      *ngFor=\"\n        let reactionType of reactionOptions;\n        trackBy: trackByMessageReaction\n      \"\n      data-testclass=\"emoji-option\"\n      (click)=\"react(reactionType)\"\n      (keyup.enter)=\"react(reactionType)\"\n    >\n      <div\n        *ngIf=\"getLatestUserByReaction(reactionType) as user\"\n        class=\"latest-user\"\n        (click)=\"hideTooltip()\"\n        (keyup.enter)=\"hideTooltip()\"\n        (mouseenter)=\"showTooltip($event, reactionType)\"\n        (mouseleave)=\"hideTooltip()\"\n        attr.data-testid=\"{{ reactionType }}-last-user\"\n      >\n        <stream-avatar-placeholder\n          attr.data-testid=\"{{ reactionType }}-avatar\"\n          [imageUrl]=\"user.image\"\n          [name]=\"user.name || user.id\"\n          [size]=\"20\"\n        ></stream-avatar-placeholder>\n      </div>\n      <span class=\"emoji\" style=\"width: 20px; height: 20px; top: 10px\">\n        {{ getEmojiByReaction(reactionType) }}\n      </span>\n      <span\n        *ngIf=\"\n          messageReactionCounts[reactionType] &&\n          messageReactionCounts[reactionType]! > 0\n        \"\n        class=\"str-chat__message-reactions-list-item__count\"\n        attr.data-testid=\"{{ reactionType }}-reaction-count\"\n      >\n        {{ messageReactionCounts[reactionType] }}\n      </span>\n    </li>\n  </ul>\n</div>\n", styles: [".emoji {position: relative; display: inline-block; }"], components: [{ type: AvatarPlaceholderComponent, selector: "stream-avatar-placeholder", inputs: ["name", "imageUrl", "size", "location", "channel", "user", "type"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+MessageReactionsComponent.ɵcmp = i0.ɵɵ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, 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      [class.str-chat__message-reaction-own]=\"isOwnReaction(reactionType)\"\n      data-testclass=\"emoji\"\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          data-testclass=\"tooltip\"\n          class=\"str-chat__tooltip str-chat__tooltip-angular\"\n        >\n          <span>\n            {{ getUsersByReaction(reactionType) }}\n          </span>\n        </div>\n      </popper-content>\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        ></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", styles: [".emoji {position: relative; display: inline-block; }"], components: [{ type: i2.NgxPopperjsContentComponent, selector: "popper-content" }, { type: AvatarPlaceholderComponent, selector: "stream-avatar-placeholder", inputs: ["name", "imageUrl", "size", "location", "channel", "user", "type"] }], directives: [{ type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.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: i7.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: MessageReactionsComponent, decorators: [{
             type: Component,
             args: [{
@@ -3476,7 +3533,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImpor
  * The `Message` component displays a message with additional information such as sender and date, and enables [interaction with the message (i.e. edit or react)](../concepts/message-interactions.mdx).
  */
 class MessageComponent {
-    constructor(chatClientService, channelService, customTemplatesService, cdRef) {
+    constructor(chatClientService, channelService, customTemplatesService, cdRef, themeService) {
         this.chatClientService = chatClientService;
         this.channelService = channelService;
         this.customTemplatesService = customTemplatesService;
@@ -3491,10 +3548,13 @@ class MessageComponent {
         this.mode = 'main';
         this.isActionBoxOpen = false;
         this.isReactionSelectorOpen = false;
-        this.isPressedOnMobile = false;
         this.visibleMessageActionsCount = 0;
         this.messageTextParts = [];
+        this.popperTriggerClick = NgxPopperjsTriggers.click;
+        this.popperTriggerHover = NgxPopperjsTriggers.hover;
+        this.popperPlacementAuto = NgxPopperjsPlacements.AUTO;
         this.subscriptions = [];
+        this.themeVersion = themeService.themeVersion;
         this.user = this.chatClientService.chatClient.user;
     }
     ngOnInit() {
@@ -3517,6 +3577,12 @@ class MessageComponent {
     ngOnDestroy() {
         this.subscriptions.forEach((s) => s.unsubscribe());
     }
+    get shouldDisplayThreadLink() {
+        var _a;
+        return (!!((_a = this.message) === null || _a === void 0 ? void 0 : _a.reply_count) &&
+            this.mode !== 'thread' &&
+            this.enabledMessageActions.indexOf('send-reply') !== -1);
+    }
     get isSentByCurrentUser() {
         var _a, _b, _c;
         return ((_b = (_a = this.message) === null || _a === void 0 ? void 0 : _a.user) === null || _b === void 0 ? void 0 : _b.id) === ((_c = this.user) === null || _c === void 0 ? void 0 : _c.id);
@@ -3604,24 +3670,6 @@ class MessageComponent {
     resendMessage() {
         void this.channelService.resendMessage(this.message);
     }
-    textClicked() {
-        if (getDeviceWidth().device !== 'mobile') {
-            this.isPressedOnMobile = false;
-            return;
-        }
-        if (this.isPressedOnMobile) {
-            return;
-        }
-        this.isPressedOnMobile = true;
-        const eventHandler = (event) => {
-            var _a;
-            if (!((_a = this.container) === null || _a === void 0 ? void 0 : _a.nativeElement.contains(event.target))) {
-                this.isPressedOnMobile = false;
-                window.removeEventListener('click', eventHandler);
-            }
-        };
-        window.addEventListener('click', eventHandler);
-    }
     setAsActiveParentMessage() {
         void this.channelService.setAsActiveParentMessage(this.message);
     }
@@ -3698,8 +3746,8 @@ class MessageComponent {
         }
     }
 }
-MessageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: MessageComponent, deps: [{ token: ChatClientService }, { token: ChannelService }, { token: CustomTemplatesService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-MessageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: MessageComponent, selector: "stream-message", inputs: { message: "message", enabledMessageActions: "enabledMessageActions", isLastSentMessage: "isLastSentMessage", mode: "mode" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  #container\n  class=\"str-chat__message-simple str-chat__message str-chat__message--{{\n    message?.type\n  }} str-chat__message--{{ message?.status }} {{\n    message?.text ? 'str-chat__message--has-text' : 'has-no-text'\n  }}\"\n  [class.str-chat__message--me]=\"isSentByCurrentUser\"\n  [class.str-chat__message-simple--me]=\"isSentByCurrentUser\"\n  [class.mobile-press]=\"isPressedOnMobile\"\n  [class.str-chat__message--has-attachment]=\"hasAttachment\"\n  [class.str-chat__message--with-reactions]=\"hasReactions\"\n  data-testid=\"message-container\"\n  (mouseleave)=\"isActionBoxOpen = false\"\n>\n  <ng-container *ngIf=\"!message?.deleted_at; else deletedMessage\">\n    <ng-container *ngIf=\"message?.type !== 'system'; else systemMessage\">\n      <ng-container\n        *ngIf=\"\n          isSentByCurrentUser &&\n          ((isLastSentMessage && message?.status === 'received') ||\n            message?.status === 'sending')\n        \"\n      >\n        <ng-container *ngIf=\"message?.status === 'sending'; else sentStatus\">\n          <ng-container *ngTemplateOutlet=\"sendingStatus\"></ng-container>\n        </ng-container>\n        <ng-template #sentStatus>\n          <ng-container\n            *ngIf=\"\n              mode === 'main' &&\n                isMessageDeliveredAndRead &&\n                canDisplayReadStatus;\n              else deliveredStatus\n            \"\n          >\n            <ng-container *ngTemplateOutlet=\"readStatus\"></ng-container>\n          </ng-container>\n        </ng-template>\n      </ng-container>\n      <stream-avatar-placeholder\n        data-testid=\"avatar\"\n        class=\"str-chat-angular__avatar-host\"\n        [imageUrl]=\"message?.user?.image\"\n        [name]=\"message?.user?.name || message?.user?.id\"\n        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\"\n          data-testid=\"message-options\"\n          *ngIf=\"areOptionsVisible\"\n        >\n          <div\n            data-testid=\"message-actions-container\"\n            class=\"\n              str-chat__message-simple__actions__action\n              str-chat__message-simple__actions__action--options\n            \"\n            [class.str-chat-angular__message-simple__actions__action--options--editing]=\"\n              isEditing\n            \"\n          >\n            <ng-template\n              #defaultMessageActionsBox\n              let-isOpen=\"isOpen\"\n              let-isMine=\"isMine\"\n              let-enabledActions=\"enabledActions\"\n              let-messageInput=\"message\"\n              let-displayedActionsCountChaneHanler=\"displayedActionsCountChaneHanler\"\n              let-isEditingChangeHandler=\"isEditingChangeHandler\"\n            >\n              <stream-message-actions-box\n                [isOpen]=\"isOpen\"\n                [isMine]=\"isMine\"\n                [enabledActions]=\"enabledActions\"\n                [message]=\"messageInput\"\n                (displayedActionsCount)=\"\n                  displayedActionsCountChaneHanler($event)\n                \"\n                (isEditing)=\"isEditingChangeHandler($event)\"\n              ></stream-message-actions-box>\n            </ng-template>\n            <ng-container\n              *ngTemplateOutlet=\"\n                messageActionsBoxTemplate || defaultMessageActionsBox;\n                context: getMessageActionsBoxContext()\n              \"\n            ></ng-container>\n            <stream-icon-placeholder\n              *ngIf=\"visibleMessageActionsCount > 0\"\n              data-testid=\"action-icon\"\n              icon=\"action-icon\"\n              (keyup.enter)=\"isActionBoxOpen = !isActionBoxOpen\"\n              (click)=\"isActionBoxOpen = !isActionBoxOpen\"\n            ></stream-icon-placeholder>\n          </div>\n          <!-- eslint-disable @angular-eslint/template/conditional-complexity -->\n          <div\n            *ngIf=\"\n              enabledMessageActions.indexOf('send-reply') !== -1 &&\n              mode === 'main'\n            \"\n            class=\"\n              str-chat__message-simple__actions__action\n              str-chat__message-simple__actions__action--thread\n            \"\n            data-testid=\"reply-in-thread\"\n            (click)=\"setAsActiveParentMessage()\"\n            (keyup.enter)=\"setAsActiveParentMessage()\"\n          >\n            <stream-icon-placeholder\n              icon=\"reply-in-thread\"\n            ></stream-icon-placeholder>\n          </div>\n          <div\n            *ngIf=\"canReactToMessage\"\n            class=\"\n              str-chat__message-simple__actions__action\n              str-chat__message-simple__actions__action--reactions\n            \"\n            data-testid=\"reaction-icon\"\n            (click)=\"isReactionSelectorOpen = !isReactionSelectorOpen\"\n            (keyup.enter)=\"isReactionSelectorOpen = !isReactionSelectorOpen\"\n          >\n            <stream-icon-placeholder\n              icon=\"reaction-icon\"\n            ></stream-icon-placeholder>\n          </div>\n        </div>\n        <!-- eslint-enable @angular-eslint/template/conditional-complexity -->\n        <ng-template\n          #defaultMessageReactions\n          let-messageReactionCounts=\"messageReactionCounts\"\n          let-latestReactions=\"latestReactions\"\n          let-isSelectorOpen=\"isSelectorOpen\"\n          let-isSelectorOpenChangeHandler=\"isSelectorOpenChangeHandler\"\n          let-messageId=\"messageId\"\n          let-ownReactions=\"ownReactions\"\n        >\n          <stream-message-reactions\n            [messageReactionCounts]=\"messageReactionCounts\"\n            [latestReactions]=\"latestReactions\"\n            [isSelectorOpen]=\"isSelectorOpen\"\n            (isSelectorOpenChange)=\"isSelectorOpenChangeHandler($event)\"\n            [messageId]=\"messageId\"\n            [ownReactions]=\"ownReactions\"\n          ></stream-message-reactions>\n        </ng-template>\n        <ng-container\n          *ngTemplateOutlet=\"\n            messageReactionsTemplate || defaultMessageReactions;\n            context: getMessageReactionsContext()\n          \"\n        ></ng-container>\n        <ng-container *ngIf=\"hasAttachment && !message?.quoted_message\">\n          <ng-template\n            #defaultAttachments\n            let-messageId=\"messageId\"\n            let-attachments=\"attachments\"\n          >\n            <stream-attachment-list\n              [messageId]=\"messageId\"\n              [attachments]=\"attachments\"\n            ></stream-attachment-list>\n          </ng-template>\n          <ng-container\n            *ngTemplateOutlet=\"\n              attachmentListTemplate || defaultAttachments;\n              context: getAttachmentListContext()\n            \"\n          ></ng-container>\n        </ng-container>\n        <div class=\"str-chat__message-text\" *ngIf=\"message?.text\">\n          <div\n            data-testid=\"inner-message\"\n            class=\"\n              str-chat__message-text-inner str-chat__message-simple-text-inner\n            \"\n            [class.str-chat__message-light-text-inner--has-attachment]=\"\n              hasAttachment\n            \"\n            (click)=\"\n              message?.status === 'failed' && message?.errorStatusCode !== 403\n                ? resendMessage()\n                : undefined\n            \"\n            (keyup.enter)=\"\n              message?.status === 'failed' && message?.errorStatusCode !== 403\n                ? resendMessage()\n                : undefined\n            \"\n          >\n            <ng-container *ngTemplateOutlet=\"quotedMessage\"></ng-container>\n            <stream-attachment-list\n              *ngIf=\"hasAttachment && message?.quoted_message\"\n              [attachments]=\"message!.attachments!\"\n              [messageId]=\"message!.id\"\n            ></stream-attachment-list>\n            <div\n              data-testid=\"client-error-message\"\n              *ngIf=\"message?.type === 'error'\"\n              class=\"str-chat__simple-message--error-message\"\n            >\n              {{ \"streamChat.Error \u00B7 Unsent\" | translate }}\n            </div>\n            <div\n              data-testid=\"error-message\"\n              *ngIf=\"message?.status === 'failed'\"\n              class=\"str-chat__simple-message--error-message\"\n            >\n              {{\n                (message?.errorStatusCode === 403\n                  ? \"streamChat.Message Failed \u00B7 Unauthorized\"\n                  : \"streamChat.Message Failed \u00B7 Click to try again\"\n                ) | translate\n              }}\n            </div>\n            <div\n              (click)=\"textClicked()\"\n              (keyup.enter)=\"textClicked()\"\n              data-testid=\"text\"\n            >\n              <p>\n                <!-- eslint-disable-next-line @angular-eslint/template/use-track-by-function -->\n                <ng-container *ngFor=\"let part of messageTextParts\">\n                  <span\n                    *ngIf=\"part.type === 'text'; else mention\"\n                    [innerHTML]=\"part.content\"\n                  ></span>\n                  <ng-template #mention>\n                    <ng-template #defaultMention let-content=\"content\">\n                      <b>{{ content }}</b>\n                    </ng-template>\n                    <ng-container\n                      *ngTemplateOutlet=\"\n                        mentionTemplate || defaultMention;\n                        context: getMentionContext(part)\n                      \"\n                    ></ng-container>\n                  </ng-template>\n                </ng-container>\n              </p>\n            </div>\n          </div>\n        </div>\n        <div class=\"str-chat__message-simple-reply-button\">\n          <button\n            *ngIf=\"\n              !!message?.reply_count &&\n              mode !== 'thread' &&\n              enabledMessageActions.indexOf('send-reply') !== -1\n            \"\n            class=\"str-chat__message-replies-count-button\"\n            data-testid=\"reply-count-button\"\n            (click)=\"setAsActiveParentMessage()\"\n          >\n            <stream-icon-placeholder icon=\"reply\"></stream-icon-placeholder>\n            {{message?.reply_count === 1 ? ('streamChat.1 reply' | translate) : ('streamChat.{{ replyCount }}\n            replies' | translate:replyCountParam)}}\n          </button>\n        </div>\n        <div class=\"str-chat__message-data str-chat__message-simple-data\">\n          <span\n            data-testid=\"sender\"\n            *ngIf=\"!isSentByCurrentUser\"\n            class=\"str-chat__message-simple-name\"\n          >\n            {{ message?.user?.name ? message?.user?.name : message?.user?.id }}\n          </span>\n          <span data-testid=\"date\" class=\"str-chat__message-simple-timestamp\">\n            {{ parsedDate }}\n          </span>\n        </div>\n      </div>\n    </ng-container>\n  </ng-container>\n</div>\n\n<ng-template #sendingStatus>\n  <span\n    class=\"\n      str-chat__message-simple-status str-chat__message-simple-status-angular\n    \"\n    data-testid=\"sending-indicator\"\n  >\n    <div class=\"str-chat__tooltip\">\n      {{ \"streamChat.Sending...\" | translate }}\n    </div>\n    <stream-loading-indicator-placeholder\n      data-testid=\"loading-indicator\"\n    ></stream-loading-indicator-placeholder>\n  </span>\n</ng-template>\n<ng-template #readStatus>\n  <span\n    class=\"\n      str-chat__message-simple-status str-chat__message-simple-status-angular\n    \"\n    data-testid=\"read-indicator\"\n  >\n    <div class=\"str-chat__tooltip\" data-testid=\"read-by-tooltip\">\n      {{ readByText }}\n    </div>\n    <stream-avatar-placeholder\n      class=\"str-chat-angular__avatar-host\"\n      data-test-id=\"last-read-user-avatar\"\n      [size]=\"15\"\n      [imageUrl]=\"lastReadUser?.image\"\n      [name]=\"lastReadUser?.name || lastReadUser?.id\"\n      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-template #deliveredStatus>\n  <span\n    *ngIf=\"mode === 'main'\"\n    class=\"\n      str-chat__message-simple-status str-chat__message-simple-status-angular\n    \"\n    data-testid=\"delivered-indicator\"\n  >\n    <div class=\"str-chat__tooltip\">\n      {{ \"streamChat.Delivered\" | translate }}\n    </div>\n    <stream-icon-placeholder\n      data-testid=\"delivered-icon\"\n      icon=\"delivered-icon\"\n    ></stream-icon-placeholder>\n  </span>\n</ng-template>\n\n<ng-template #deletedMessage>\n  <div data-testid=\"message-deleted-component\">\n    <div class=\"str-chat__message--deleted-inner\" translate>\n      streamChat.This message was deleted...\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #systemMessage>\n  <div data-testid=\"system-message\" class=\"str-chat__message--system\">\n    <div class=\"str-chat__message--system__text\">\n      <div class=\"str-chat__message--system__line\"></div>\n      <p>{{ message?.text }}</p>\n      <div class=\"str-chat__message--system__line\"></div>\n    </div>\n    <div class=\"str-chat__message--system__date\">\n      {{ parsedDate }}\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #quotedMessage>\n  <div\n    *ngIf=\"message?.quoted_message\"\n    class=\"quoted-message\"\n    data-testid=\"quoted-message-container\"\n    [class.mine]=\"isSentByCurrentUser\"\n  >\n    <stream-avatar-placeholder\n      data-testid=\"qouted-message-avatar\"\n      class=\"str-chat-angular__avatar-host\"\n      [imageUrl]=\"message?.quoted_message?.user?.image\"\n      [name]=\"\n        message?.quoted_message?.user?.name || message?.quoted_message?.user?.id\n      \"\n      [size]=\"20\"\n      type=\"user\"\n      location=\"quoted-message-sender\"\n      [user]=\"message?.quoted_message?.user || undefined\"\n    ></stream-avatar-placeholder>\n    <div class=\"quoted-message-inner\">\n      <stream-attachment-list\n        *ngIf=\"\n          message?.quoted_message?.attachments &&\n          message?.quoted_message?.attachments?.length\n        \"\n        [attachments]=\"quotedMessageAttachments\"\n        [messageId]=\"message?.quoted_message?.id\"\n      ></stream-attachment-list>\n      <div\n        data-testid=\"quoted-message-text\"\n        [innerHTML]=\"\n          message?.quoted_message?.html || message?.quoted_message?.text\n        \"\n      ></div>\n    </div>\n  </div>\n</ng-template>\n", components: [{ type: AvatarPlaceholderComponent, selector: "stream-avatar-placeholder", inputs: ["name", "imageUrl", "size", "location", "channel", "user", "type"] }, { type: MessageActionsBoxComponent, selector: "stream-message-actions-box", inputs: ["isOpen", "isMine", "message", "enabledActions"], outputs: ["displayedActionsCount", "isEditing"] }, { type: IconPlaceholderComponent, selector: "stream-icon-placeholder", inputs: ["icon", "size"] }, { type: MessageReactionsComponent, selector: "stream-message-reactions", inputs: ["messageId", "messageReactionCounts", "isSelectorOpen", "latestReactions", "ownReactions"], outputs: ["isSelectorOpenChange"] }, { type: AttachmentListComponent, selector: "stream-attachment-list", inputs: ["messageId", "attachments"] }, { type: LoadingIndicatorPlaceholderComponent, selector: "stream-loading-indicator-placeholder", inputs: ["size", "color"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i9.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }], pipes: { "translate": i9.TranslatePipe } });
+MessageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: MessageComponent, deps: [{ token: ChatClientService }, { token: ChannelService }, { token: CustomTemplatesService }, { token: i0.ChangeDetectorRef }, { token: ThemeService }], target: i0.ɵɵFactoryTarget.Component });
+MessageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: MessageComponent, selector: "stream-message", inputs: { message: "message", enabledMessageActions: "enabledMessageActions", isLastSentMessage: "isLastSentMessage", mode: "mode" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], usesOnChanges: true, ngImport: i0, 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-with-thread-link]=\"shouldDisplayThreadLink\"\n  [class.str-chat__message-send-can-be-retried]=\"\n    message?.status === 'failed' && message?.errorStatusCode !== 403\n  \"\n  data-testid=\"message-container\"\n  (mouseleave)=\"isActionBoxOpen = false\"\n>\n  <ng-container *ngIf=\"!message?.deleted_at; else deletedMessage\">\n    <ng-container *ngIf=\"message?.type !== 'system'; else systemMessage\">\n      <ng-container *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-edit-in-progress]=\"isEditing\"\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            [class.str-chat-angular__message-simple__actions__action--options--editing]=\"\n              isEditing\n            \"\n            [popper]=\"popperContent\"\n            [popperTrigger]=\"popperTriggerClick\"\n            [popperPlacement]=\"popperPlacementAuto\"\n            [popperHideOnScroll]=\"true\"\n            [popperHideOnClickOutside]=\"true\"\n            [popperHideOnMouseLeave]=\"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-displayedActionsCountChaneHanler=\"displayedActionsCountChaneHanler\"\n                let-isEditingChangeHandler=\"isEditingChangeHandler\"\n              >\n                <stream-message-actions-box\n                  [isOpen]=\"isOpen\"\n                  [isMine]=\"isMine\"\n                  [enabledActions]=\"enabledActions\"\n                  [message]=\"messageInput\"\n                  (displayedActionsCount)=\"\n                    displayedActionsCountChaneHanler($event)\n                  \"\n                  (isEditing)=\"isEditingChangeHandler($event)\"\n                ></stream-message-actions-box>\n              </ng-template>\n              <ng-container\n                *ngTemplateOutlet=\"\n                  messageActionsBoxTemplate || defaultMessageActionsBox;\n                  context: getMessageActionsBoxContext()\n                \"\n              >\n              </ng-container>\n            </popper-content>\n            <div\n              class=\"str-chat__message-actions-box-button\"\n              *ngIf=\"visibleMessageActionsCount > 0\"\n              data-testid=\"action-icon\"\n              (click)=\"isActionBoxOpen = !isActionBoxOpen\"\n              (keyup.enter)=\"isActionBoxOpen = !isActionBoxOpen\"\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          <!-- eslint-disable @angular-eslint/template/conditional-complexity -->\n          <div\n            *ngIf=\"\n              enabledMessageActions.indexOf('send-reply') !== -1 &&\n              mode === 'main'\n            \"\n            class=\"\n              str-chat__message-simple__actions__action\n              str-chat__message-simple__actions__action--thread\n              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          <!-- eslint-enable @angular-eslint/template/conditional-complexity -->\n          <ng-template\n            #defaultMessageReactions\n            let-messageReactionCounts=\"messageReactionCounts\"\n            let-latestReactions=\"latestReactions\"\n            let-isSelectorOpen=\"isSelectorOpen\"\n            let-isSelectorOpenChangeHandler=\"isSelectorOpenChangeHandler\"\n            let-messageId=\"messageId\"\n            let-ownReactions=\"ownReactions\"\n          >\n            <stream-message-reactions\n              [messageReactionCounts]=\"messageReactionCounts\"\n              [latestReactions]=\"latestReactions\"\n              [isSelectorOpen]=\"isSelectorOpen\"\n              (isSelectorOpenChange)=\"isSelectorOpenChangeHandler($event)\"\n              [messageId]=\"messageId\"\n              [ownReactions]=\"ownReactions\"\n            ></stream-message-reactions>\n          </ng-template>\n          <ng-container\n            *ngTemplateOutlet=\"\n              messageReactionsTemplate || defaultMessageReactions;\n              context: getMessageReactionsContext()\n            \"\n          ></ng-container>\n        </div>\n        <div class=\"str-chat__message-bubble\">\n          <ng-container *ngIf=\"hasAttachment && !message?.quoted_message\">\n            <ng-template\n              #defaultAttachments\n              let-messageId=\"messageId\"\n              let-attachments=\"attachments\"\n            >\n              <stream-attachment-list\n                [messageId]=\"messageId\"\n                [attachments]=\"attachments\"\n              ></stream-attachment-list>\n            </ng-template>\n            <ng-container\n              *ngTemplateOutlet=\"\n                attachmentListTemplate || defaultAttachments;\n                context: getAttachmentListContext()\n              \"\n            ></ng-container>\n          </ng-container>\n          <div\n            class=\"str-chat__message-text\"\n            tabindex=\"0\"\n            *ngIf=\"message?.text\"\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              (click)=\"\n                message?.status === 'failed' && message?.errorStatusCode !== 403\n                  ? resendMessage()\n                  : undefined\n              \"\n              (keyup.enter)=\"\n                message?.status === 'failed' && message?.errorStatusCode !== 403\n                  ? resendMessage()\n                  : undefined\n              \"\n            >\n              <ng-container *ngTemplateOutlet=\"quotedMessage\"></ng-container>\n              <stream-attachment-list\n                *ngIf=\"hasAttachment && message?.quoted_message\"\n                [attachments]=\"message!.attachments!\"\n                [messageId]=\"message!.id\"\n              ></stream-attachment-list>\n              <div\n                data-testid=\"client-error-message\"\n                *ngIf=\"message?.type === 'error'\"\n                class=\"\n                  str-chat__simple-message--error-message\n                  str-chat__message--error-message\n                \"\n              >\n                {{ \"streamChat.Error \u00B7 Unsent\" | translate }}\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                  <!-- eslint-disable-next-line @angular-eslint/template/use-track-by-function -->\n                  <ng-container *ngFor=\"let part of messageTextParts\">\n                    <span\n                      *ngIf=\"part.type === 'text'; else mention\"\n                      [innerHTML]=\"part.content\"\n                    ></span>\n                    <ng-template #mention>\n                      <ng-template #defaultMention let-content=\"content\">\n                        <b>{{ content }}</b>\n                      </ng-template>\n                      <ng-container\n                        *ngTemplateOutlet=\"\n                          mentionTemplate || defaultMention;\n                          context: getMentionContext(part)\n                        \"\n                      ></ng-container>\n                    </ng-template>\n                  </ng-container>\n                </p>\n              </div>\n            </div>\n          </div>\n          <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  <div data-testid=\"system-message\" class=\"str-chat__message--system\">\n    <div class=\"str-chat__message--system__text\">\n      <div class=\"str-chat__message--system__line\"></div>\n      <p>{{ message?.text }}</p>\n      <div class=\"str-chat__message--system__line\"></div>\n    </div>\n    <div class=\"str-chat__message--system__date\">\n      {{ parsedDate }}\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #quotedMessage>\n  <div\n    *ngIf=\"message?.quoted_message\"\n    class=\"quoted-message str-chat__quoted-message-preview\"\n    data-testid=\"quoted-message-container\"\n    [class.mine]=\"isSentByCurrentUser\"\n  >\n    <stream-avatar-placeholder\n      data-testid=\"qouted-message-avatar\"\n      class=\"str-chat-angular__avatar-host 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      <stream-attachment-list\n        *ngIf=\"\n          message?.quoted_message?.attachments &&\n          message?.quoted_message?.attachments?.length\n        \"\n        [attachments]=\"quotedMessageAttachments\"\n        [messageId]=\"message?.quoted_message?.id\"\n      ></stream-attachment-list>\n      <div\n        data-testid=\"quoted-message-text\"\n        [innerHTML]=\"\n          message?.quoted_message?.html || message?.quoted_message?.text\n        \"\n      ></div>\n    </div>\n  </div>\n</ng-template>\n\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  <!-- eslint-disable @angular-eslint/template/conditional-complexity -->\n  <div\n    class=\"\n      str-chat__message-data\n      str-chat__message-simple-data\n      str-chat__message-metadata\n    \"\n    *ngIf=\"\n      (position === 'inside-message-bubble' && themeVersion === '1') ||\n      (position === 'outside-message-bubble' && themeVersion === '2')\n    \"\n  >\n    <!-- eslint-enable @angular-eslint/template/conditional-complexity -->\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 data-testid=\"date\" class=\"str-chat__message-simple-timestamp\">\n      {{ parsedDate }}\n    </span>\n  </div>\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      <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        [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      <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        [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      <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        [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  <!-- eslint-disable @angular-eslint/template/conditional-complexity -->\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    <!-- eslint-enable @angular-eslint/template/conditional-complexity -->\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", components: [{ type: AvatarPlaceholderComponent, selector: "stream-avatar-placeholder", inputs: ["name", "imageUrl", "size", "location", "channel", "user", "type"] }, { type: i2.NgxPopperjsContentComponent, selector: "popper-content" }, { type: MessageActionsBoxComponent, selector: "stream-message-actions-box", inputs: ["isOpen", "isMine", "message", "enabledActions"], outputs: ["displayedActionsCount", "isEditing"] }, { type: IconPlaceholderComponent, selector: "stream-icon-placeholder", inputs: ["icon", "size"] }, { type: MessageReactionsComponent, selector: "stream-message-reactions", inputs: ["messageId", "messageReactionCounts", "isSelectorOpen", "latestReactions", "ownReactions"], outputs: ["isSelectorOpenChange"] }, { type: AttachmentListComponent, selector: "stream-attachment-list", inputs: ["messageId", "attachments"] }, { type: LoadingIndicatorPlaceholderComponent, selector: "stream-loading-indicator-placeholder", inputs: ["size", "color"] }], directives: [{ type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2.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: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i8.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }], pipes: { "translate": i8.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: MessageComponent, decorators: [{
             type: Component,
             args: [{
@@ -3707,7 +3755,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImpor
                     templateUrl: './message.component.html',
                     styles: [],
                 }]
-        }], ctorParameters: function () { return [{ type: ChatClientService }, { type: ChannelService }, { type: CustomTemplatesService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { message: [{
+        }], ctorParameters: function () { return [{ type: ChatClientService }, { type: ChannelService }, { type: CustomTemplatesService }, { type: i0.ChangeDetectorRef }, { type: ThemeService }]; }, propDecorators: { message: [{
                 type: Input
             }], enabledMessageActions: [{
                 type: Input
@@ -3724,13 +3772,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImpor
  * The `Textarea` component is used by the [`MessageInput`](./MessageInputComponent.mdx) component to display the input HTML element where users can type their message.
  */
 class TextareaComponent {
-    constructor(emojiInputService) {
+    constructor(emojiInputService, themeService) {
         this.emojiInputService = emojiInputService;
-        this.class = 'str-chat__textarea';
+        this.themeService = themeService;
+        this.class = 'str-chat__textarea str-chat__message-textarea-angular-host';
         /**
          * The value of the input HTML element.
          */
         this.value = '';
+        /**
+         * Placeholder of the textarea
+         */
+        this.placeholder = '';
         /**
          * Emits the current value of the input element when a user types.
          */
@@ -3751,21 +3804,36 @@ class TextareaComponent {
             this.inputChanged();
         }));
     }
-    // eslint-disable-next-line @angular-eslint/no-empty-lifecycle-method
-    ngOnChanges() { }
+    ngOnChanges(changes) {
+        if (changes.value && !this.value && this.messageInput) {
+            this.messageInput.nativeElement.style.height = 'auto';
+        }
+    }
+    ngAfterViewInit() {
+        if (this.messageInput.nativeElement.scrollHeight > 0) {
+            this.adjustTextareaHeight();
+        }
+    }
     ngOnDestroy() {
         this.subscriptions.forEach((s) => s.unsubscribe());
     }
     inputChanged() {
         this.valueChange.emit(this.messageInput.nativeElement.value);
+        this.adjustTextareaHeight();
     }
     sent(event) {
         event.preventDefault();
         this.send.next();
     }
+    adjustTextareaHeight() {
+        if (this.themeService.themeVersion === '2') {
+            this.messageInput.nativeElement.style.height = '';
+            this.messageInput.nativeElement.style.height = `${this.messageInput.nativeElement.scrollHeight}px`;
+        }
+    }
 }
-TextareaComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: TextareaComponent, deps: [{ token: EmojiInputService }], target: i0.ɵɵFactoryTarget.Component });
-TextareaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: TextareaComponent, selector: "stream-textarea", inputs: { value: "value" }, outputs: { valueChange: "valueChange", send: "send" }, host: { properties: { "class": "this.class" } }, viewQueries: [{ propertyName: "messageInput", first: true, predicate: ["input"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<textarea\n  [value]=\"value || ''\"\n  autofocus\n  data-testid=\"textarea\"\n  #input\n  placeholder=\"{{ 'streamChat.Type your message' | translate }}\"\n  class=\"rta__textarea str-chat__textarea__textarea str-chat__angular-textarea\"\n  rows=\"1\"\n  (input)=\"inputChanged()\"\n  (keydown.enter)=\"sent($event)\"\n></textarea>\n", pipes: { "translate": i9.TranslatePipe } });
+TextareaComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: TextareaComponent, deps: [{ token: EmojiInputService }, { token: ThemeService }], target: i0.ɵɵFactoryTarget.Component });
+TextareaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: TextareaComponent, selector: "stream-textarea", inputs: { value: "value", placeholder: "placeholder" }, outputs: { valueChange: "valueChange", send: "send" }, host: { properties: { "class": "this.class" } }, viewQueries: [{ propertyName: "messageInput", first: true, predicate: ["input"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<textarea\n  [value]=\"value || ''\"\n  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)=\"sent($event)\"\n></textarea>\n", pipes: { "translate": i8.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: TextareaComponent, decorators: [{
             type: Component,
             args: [{
@@ -3773,10 +3841,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImpor
                     templateUrl: './textarea.component.html',
                     styles: [],
                 }]
-        }], ctorParameters: function () { return [{ type: EmojiInputService }]; }, propDecorators: { class: [{
+        }], ctorParameters: function () { return [{ type: EmojiInputService }, { type: ThemeService }]; }, propDecorators: { class: [{
                 type: HostBinding
             }], value: [{
                 type: Input
+            }], placeholder: [{
+                type: Input
             }], valueChange: [{
                 type: Output
             }], send: [{
@@ -3811,17 +3881,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImpor
  * The `AutocompleteTextarea` component is used by the [`MessageInput`](./MessageInputComponent.mdx) component to display the input HTML element where users can type their message.
  */
 class AutocompleteTextareaComponent {
-    constructor(channelService, chatClientService, transliterationService, emojiInputService, customTemplatesService) {
+    constructor(channelService, chatClientService, transliterationService, emojiInputService, customTemplatesService, themeService) {
         this.channelService = channelService;
         this.chatClientService = chatClientService;
         this.transliterationService = transliterationService;
         this.emojiInputService = emojiInputService;
         this.customTemplatesService = customTemplatesService;
-        this.class = 'str-chat__textarea';
+        this.themeService = themeService;
+        this.class = 'str-chat__textarea str-chat__message-textarea-angular-host';
         /**
          * The value of the input HTML element.
          */
         this.value = '';
+        /**
+         * Placeholder of the textarea
+         */
+        this.placeholder = '';
         /**
          * If true, users can mention other users in messages. You can also set this input on the [`MessageInput`](./MessageInputComponent.mdx/#inputs-and-outputs) component.
          */
@@ -3916,6 +3991,14 @@ class AutocompleteTextareaComponent {
         if (changes.mentionScope) {
             void this.updateMentionOptions(this.searchTerm$.getValue());
         }
+        if (changes.value && !this.value && this.messageInput) {
+            this.messageInput.nativeElement.style.height = 'auto';
+        }
+    }
+    ngAfterViewInit() {
+        if (this.messageInput.nativeElement.scrollHeight > 0) {
+            this.adjustTextareaHeight();
+        }
     }
     filter(searchString, items) {
         return items.filter((item) => this.transliterate(item.autocompleteLabel.toLowerCase()).includes(this.transliterate(searchString.toLowerCase())));
@@ -3939,6 +4022,7 @@ class AutocompleteTextareaComponent {
     }
     inputChanged() {
         this.valueChange.emit(this.messageInput.nativeElement.value);
+        this.adjustTextareaHeight();
     }
     inputLeft() {
         this.updateMentionedUsersFromText();
@@ -3948,6 +4032,12 @@ class AutocompleteTextareaComponent {
         this.updateMentionedUsersFromText();
         this.send.next();
     }
+    adjustTextareaHeight() {
+        if (this.themeService.themeVersion === '2') {
+            this.messageInput.nativeElement.style.height = '';
+            this.messageInput.nativeElement.style.height = `${this.messageInput.nativeElement.scrollHeight}px`;
+        }
+    }
     transliterate(s) {
         if (this.transliterationService) {
             return this.transliterationService.transliterate(s);
@@ -3992,8 +4082,8 @@ class AutocompleteTextareaComponent {
         }
     }
 }
-AutocompleteTextareaComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: AutocompleteTextareaComponent, deps: [{ token: ChannelService }, { token: ChatClientService }, { token: TransliterationService }, { token: EmojiInputService }, { token: CustomTemplatesService }], target: i0.ɵɵFactoryTarget.Component });
-AutocompleteTextareaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: AutocompleteTextareaComponent, selector: "stream-autocomplete-textarea", inputs: { value: "value", areMentionsEnabled: "areMentionsEnabled", mentionScope: "mentionScope" }, outputs: { valueChange: "valueChange", send: "send", userMentions: "userMentions" }, host: { properties: { "class": "this.class" } }, viewQueries: [{ propertyName: "messageInput", first: true, predicate: ["input"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<textarea\n  [value]=\"value || ''\"\n  autofocus\n  data-testid=\"textarea\"\n  #input\n  placeholder=\"{{ 'streamChat.Type your message' | translate }}\"\n  class=\"rta__textarea str-chat__textarea__textarea str-chat__angular-textarea\"\n  rows=\"1\"\n  (input)=\"inputChanged()\"\n  (keydown.enter)=\"sent($event)\"\n  [mentionConfig]=\"autocompleteConfig\"\n  (searchTerm)=\"autcompleteSearchTermChanged($event)\"\n  [mentionListTemplate]=\"autocompleteItem\"\n  (blur)=\"inputLeft()\"\n></textarea>\n<ng-template #autocompleteItem let-item=\"item\">\n  <div class=\"rta rta__item str-chat__emojisearch__item\" [ngSwitch]=\"item.type\">\n    <div class=\"rta__entity\" *ngSwitchCase=\"'mention'\">\n      <ng-container\n        *ngTemplateOutlet=\"\n          mentionAutocompleteItemTemplate || defaultMentionTemplate;\n          context: { item: item }\n        \"\n      ></ng-container>\n    </div>\n    <div class=\"rta__entity\" *ngSwitchCase=\"'command'\">\n      <ng-container\n        *ngTemplateOutlet=\"\n          commandAutocompleteItemTemplate || defaultCommandTemplate;\n          context: { item: item }\n        \"\n      ></ng-container>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #defaultCommandTemplate let-item=\"item\">\n  <div class=\"str-chat__slash-command\">\n    <span class=\"str-chat__slash-command-header\">\n      <strong data-testclass=\"command-name\">{{ item.name }}</strong>\n      {{ item.args }}\n    </span>\n    <br />\n    <span class=\"str-chat__slash-command-description\">{{\n      item.description\n    }}</span>\n  </div>\n</ng-template>\n\n<ng-template #defaultMentionTemplate let-item=\"item\">\n  <div class=\"str-chat__user-item\">\n    <stream-avatar-placeholder\n      data-testclass=\"avatar\"\n      class=\"str-chat__avatar str-chat__avatar--circle\"\n      style=\"height: 20px\"\n      [size]=\"20\"\n      [imageUrl]=\"item.image || item.user?.image\"\n      [name]=\"item.autocompleteLabel\"\n      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"] }], directives: [{ type: i7.MentionDirective, selector: "[mention], [mentionConfig]", inputs: ["mentionConfig", "mention", "mentionListTemplate"], outputs: ["searchTerm", "itemSelected", "opened", "closed"] }, { type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "translate": i9.TranslatePipe } });
+AutocompleteTextareaComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: AutocompleteTextareaComponent, deps: [{ token: ChannelService }, { token: ChatClientService }, { token: TransliterationService }, { token: EmojiInputService }, { token: CustomTemplatesService }, { token: ThemeService }], target: i0.ɵɵFactoryTarget.Component });
+AutocompleteTextareaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: AutocompleteTextareaComponent, selector: "stream-autocomplete-textarea", inputs: { value: "value", placeholder: "placeholder", areMentionsEnabled: "areMentionsEnabled", mentionScope: "mentionScope" }, outputs: { valueChange: "valueChange", send: "send", userMentions: "userMentions" }, host: { properties: { "class": "this.class" } }, viewQueries: [{ propertyName: "messageInput", first: true, predicate: ["input"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<textarea\n  [value]=\"value || ''\"\n  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)=\"sent($event)\"\n  [mentionConfig]=\"autocompleteConfig\"\n  (searchTerm)=\"autcompleteSearchTermChanged($event)\"\n  [mentionListTemplate]=\"autocompleteItem\"\n  (blur)=\"inputLeft()\"\n></textarea>\n<ng-template #autocompleteItem let-item=\"item\">\n  <div class=\"rta rta__item str-chat__emojisearch__item\" [ngSwitch]=\"item.type\">\n    <div class=\"rta__entity\" *ngSwitchCase=\"'mention'\">\n      <ng-container\n        *ngTemplateOutlet=\"\n          mentionAutocompleteItemTemplate || defaultMentionTemplate;\n          context: { item: item }\n        \"\n      ></ng-container>\n    </div>\n    <div class=\"rta__entity\" *ngSwitchCase=\"'command'\">\n      <ng-container\n        *ngTemplateOutlet=\"\n          commandAutocompleteItemTemplate || defaultCommandTemplate;\n          context: { item: item }\n        \"\n      ></ng-container>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #defaultCommandTemplate let-item=\"item\">\n  <div class=\"str-chat__slash-command\">\n    <span class=\"str-chat__slash-command-header\">\n      <strong\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      style=\"height: 56px\"\n      [size]=\"56\"\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 class=\"str-chat__user-item-at\">@</div>\n  </div>\n</ng-template>\n", components: [{ type: AvatarPlaceholderComponent, selector: "stream-avatar-placeholder", inputs: ["name", "imageUrl", "size", "location", "channel", "user", "type"] }], directives: [{ type: i8$1.MentionDirective, selector: "[mention], [mentionConfig]", inputs: ["mentionConfig", "mention", "mentionListTemplate"], outputs: ["searchTerm", "itemSelected", "opened", "closed"] }, { type: i7.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i7.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "translate": i8.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: AutocompleteTextareaComponent, decorators: [{
             type: Component,
             args: [{
@@ -4001,10 +4091,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImpor
                     templateUrl: './autocomplete-textarea.component.html',
                     styles: [],
                 }]
-        }], ctorParameters: function () { return [{ type: ChannelService }, { type: ChatClientService }, { type: TransliterationService }, { type: EmojiInputService }, { type: CustomTemplatesService }]; }, propDecorators: { class: [{
+        }], ctorParameters: function () { return [{ type: ChannelService }, { type: ChatClientService }, { type: TransliterationService }, { type: EmojiInputService }, { type: CustomTemplatesService }, { type: ThemeService }]; }, propDecorators: { class: [{
                 type: HostBinding
             }], value: [{
                 type: Input
+            }], placeholder: [{
+                type: Input
             }], areMentionsEnabled: [{
                 type: Input
             }], mentionScope: [{
@@ -4032,14 +4124,18 @@ const getGroupStyles = (message, previousMessage, nextMessage, noGroupByUser = f
             ((_a = previousMessage.attachments) === null || _a === void 0 ? void 0 : _a.length) !== 0) ||
         ((_b = message.user) === null || _b === void 0 ? void 0 : _b.id) !== ((_c = previousMessage.user) === null || _c === void 0 ? void 0 : _c.id) ||
         previousMessage.type === 'error' ||
-        previousMessage.deleted_at;
+        previousMessage.deleted_at ||
+        (message.reaction_counts &&
+            Object.keys(message.reaction_counts).length > 0);
     const isBottomMessage = !nextMessage ||
         !isOnSameDay(message.created_at, nextMessage.created_at) ||
         nextMessage.type === 'system' ||
         (nextMessage.attachments && ((_d = nextMessage.attachments) === null || _d === void 0 ? void 0 : _d.length) !== 0) ||
         ((_e = message.user) === null || _e === void 0 ? void 0 : _e.id) !== ((_f = nextMessage.user) === null || _f === void 0 ? void 0 : _f.id) ||
         nextMessage.type === 'error' ||
-        nextMessage.deleted_at;
+        nextMessage.deleted_at ||
+        (nextMessage.reaction_counts &&
+            Object.keys(nextMessage.reaction_counts).length > 0);
     if (!isTopMessage && !isBottomMessage) {
         if (message.deleted_at || message.type === 'error')
             return 'single';
@@ -4078,7 +4174,7 @@ class MessageListComponent {
          */
         this.direction = 'bottom-to-top';
         this.enabledMessageActions = [];
-        this.class = 'str-chat-angular__main-panel-inner str-chat-angular__message-list-host';
+        this.class = 'str-chat-angular__main-panel-inner str-chat-angular__message-list-host str-chat__main-panel-inner';
         this.unreadMessageCount = 0;
         this.groupStyles = [];
         this.isUserScrolledUpThreshold = 300;
@@ -4216,6 +4312,14 @@ class MessageListComponent {
             mode: this.mode,
         };
     }
+    getTypingIndicatorText(users) {
+        const text = listUsers(users);
+        return text;
+    }
+    get replyCountParam() {
+        var _a;
+        return { replyCount: (_a = this.parentMessage) === null || _a === void 0 ? void 0 : _a.reply_count };
+    }
     preserveScrollbarPosition() {
         this.scrollContainer.nativeElement.scrollTop =
             (this.prevScrollTop || 0) +
@@ -4295,7 +4399,7 @@ class MessageListComponent {
     }
 }
 MessageListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: MessageListComponent, deps: [{ token: ChannelService }, { token: ChatClientService }, { token: ImageLoadService }, { token: CustomTemplatesService }], target: i0.ɵɵFactoryTarget.Component });
-MessageListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: MessageListComponent, selector: "stream-message-list", inputs: { mode: "mode", direction: "direction" }, host: { properties: { "class": "this.class" } }, viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], descendants: true }, { propertyName: "parentMessageElement", first: true, predicate: ["parentMessageElement"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  #scrollContainer\n  data-testid=\"scroll-container\"\n  class=\"str-chat__list\"\n  (scroll)=\"scrolled()\"\n>\n  <div class=\"str-chat__reverse-infinite-scroll\">\n    <ul class=\"str-chat__ul\">\n      <li\n        #parentMessageElement\n        *ngIf=\"mode === 'thread'\"\n        data-testid=\"parent-message\"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"\n            messageTemplateContainer;\n            context: { message: parentMessage }\n          \"\n        ></ng-container>\n        <div class=\"str-chat__thread-start\" translate>\n          streamChat.Start of a new thread\n        </div>\n      </li>\n      <li\n        data-testclass=\"message\"\n        *ngFor=\"\n          let message of messages$ | async;\n          let i = index;\n          trackBy: trackByMessageId\n        \"\n        class=\"str-chat__li str-chat__li--{{ groupStyles[i] }}\"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"\n            messageTemplateContainer;\n            context: { message: message }\n          \"\n        ></ng-container>\n      </li>\n    </ul>\n    <ng-template #defaultTypingIndicator let-usersTyping$=\"usersTyping$\">\n      <div\n        *ngIf=\"$any(usersTyping$ | async)?.length\"\n        data-testid=\"typing-indicator\"\n        class=\"str-chat__typing-indicator str-chat__typing-indicator--typing\"\n      >\n        <stream-avatar-placeholder\n          *ngFor=\"let user of usersTyping$ | async; trackBy: trackByUserId\"\n          [name]=\"user.name || user.id\"\n          [imageUrl]=\"user.image\"\n          type=\"user\"\n          location=\"typing-indicator\"\n          [user]=\"user\"\n        ></stream-avatar-placeholder>\n        <div class=\"str-chat__typing-indicator__dots\">\n          <span class=\"str-chat__typing-indicator__dot\"></span>\n          <span class=\"str-chat__typing-indicator__dot\"></span>\n          <span class=\"str-chat__typing-indicator__dot\"></span>\n        </div>\n      </div>\n    </ng-template>\n    <ng-container\n      *ngTemplateOutlet=\"\n        typingIndicatorTemplate || defaultTypingIndicator;\n        context: getTypingIndicatorContext()\n      \"\n    ></ng-container>\n  </div>\n</div>\n<div class=\"str-chat__list-notifications\">\n  <button\n    data-testid=\"scroll-to-latest\"\n    *ngIf=\"isUserScrolled\"\n    class=\"\n      str-chat__message-notification\n      str-chat__message-notification-right\n      str-chat__message-notification-scroll-to-latest\n    \"\n    (keyup.enter)=\"scrollToLatestMessage()\"\n    (click)=\"scrollToLatestMessage()\"\n  >\n    <stream-icon\n      style=\"display: inline-block; height: 24px\"\n      [icon]=\"direction === 'bottom-to-top' ? 'arrow-down' : 'arrow-up'\"\n    ></stream-icon>\n    <div\n      *ngIf=\"unreadMessageCount > 0\"\n      class=\"\n        str-chat__message-notification\n        str-chat__message-notification-scroll-to-latest-unread-count\n      \"\n    >\n      {{ unreadMessageCount }}\n    </div>\n  </button>\n</div>\n\n<ng-template #messageTemplateContainer let-message=\"message\">\n  <ng-template\n    #defaultMessageTemplate\n    let-messageInput=\"message\"\n    let-isLastSentMessage=\"isLastSentMessage\"\n    let-enabledMessageActions=\"enabledMessageActions\"\n    let-mode=\"mode\"\n  >\n    <stream-message\n      [message]=\"messageInput\"\n      [isLastSentMessage]=\"isLastSentMessage\"\n      [enabledMessageActions]=\"enabledMessageActions\"\n      [mode]=\"mode\"\n    ></stream-message>\n  </ng-template>\n  <ng-container\n    *ngTemplateOutlet=\"\n      messageTemplate || defaultMessageTemplate;\n      context: getMessageContext(message)\n    \"\n  ></ng-container>\n</ng-template>\n", components: [{ type: AvatarPlaceholderComponent, selector: "stream-avatar-placeholder", inputs: ["name", "imageUrl", "size", "location", "channel", "user", "type"] }, { type: IconComponent, selector: "stream-icon", inputs: ["icon", "size"] }, { type: MessageComponent, selector: "stream-message", inputs: ["message", "enabledMessageActions", "isLastSentMessage", "mode"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i9.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i3.AsyncPipe } });
+MessageListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: MessageListComponent, selector: "stream-message-list", inputs: { mode: "mode", direction: "direction" }, host: { properties: { "class": "this.class" } }, viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], descendants: true }, { propertyName: "parentMessageElement", first: true, predicate: ["parentMessageElement"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  #scrollContainer\n  data-testid=\"scroll-container\"\n  class=\"str-chat__list\"\n  (scroll)=\"scrolled()\"\n>\n  <div class=\"str-chat__reverse-infinite-scroll str-chat__message-list-scroll\">\n    <ul class=\"str-chat__ul\">\n      <li\n        #parentMessageElement\n        *ngIf=\"mode === 'thread'\"\n        data-testid=\"parent-message\"\n        class=\"str-chat__parent-message-li\"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"\n            messageTemplateContainer;\n            context: { message: parentMessage }\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      <li\n        data-testclass=\"message\"\n        *ngFor=\"\n          let message of messages$ | async;\n          let i = index;\n          trackBy: trackByMessageId\n        \"\n        class=\"str-chat__li str-chat__li--{{ groupStyles[i] }}\"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"\n            messageTemplateContainer;\n            context: { message: message }\n          \"\n        ></ng-container>\n      </li>\n    </ul>\n    <ng-template #defaultTypingIndicator let-usersTyping$=\"usersTyping$\">\n      <!-- 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\"\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)=\"scrollToLatestMessage()\"\n    (click)=\"scrollToLatestMessage()\"\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=\"unreadMessageCount > 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      {{ unreadMessageCount }}\n    </div>\n  </button>\n</div>\n\n<ng-template #messageTemplateContainer let-message=\"message\">\n  <ng-template\n    #defaultMessageTemplate\n    let-messageInput=\"message\"\n    let-isLastSentMessage=\"isLastSentMessage\"\n    let-enabledMessageActions=\"enabledMessageActions\"\n    let-mode=\"mode\"\n  >\n    <stream-message\n      [message]=\"messageInput\"\n      [isLastSentMessage]=\"isLastSentMessage\"\n      [enabledMessageActions]=\"enabledMessageActions\"\n      [mode]=\"mode\"\n    ></stream-message>\n  </ng-template>\n  <ng-container\n    *ngTemplateOutlet=\"\n      messageTemplate || defaultMessageTemplate;\n      context: getMessageContext(message)\n    \"\n  ></ng-container>\n</ng-template>\n", components: [{ type: IconComponent, selector: "stream-icon", inputs: ["icon", "size"] }, { type: MessageComponent, selector: "stream-message", inputs: ["message", "enabledMessageActions", "isLastSentMessage", "mode"] }], directives: [{ type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "translate": i8.TranslatePipe, "async": i7.AsyncPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: MessageListComponent, decorators: [{
             type: Component,
             args: [{
@@ -4322,12 +4426,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImpor
  * The `Thread` component represents a [message thread](https://getstream.io/chat/docs/javascript/threads/?language=javascript), it is a container component that displays a thread with a header, [`MessageList`](./MessageListComponent.mdx) and [`MessageInput`](./MessageInputComponent.mdx) components.
  */
 class ThreadComponent {
-    constructor(customTemplatesService, channelService) {
+    constructor(customTemplatesService, channelService, chatClientService) {
         this.customTemplatesService = customTemplatesService;
         this.channelService = channelService;
+        this.chatClientService = chatClientService;
         this.class = 'str-chat__thread';
         this.subscriptions = [];
         this.subscriptions.push(this.channelService.activeParentMessage$.subscribe((parentMessage) => (this.parentMessage = parentMessage)));
+        this.subscriptions.push(this.channelService.activeChannel$.subscribe((channel) => (this.channel = channel)));
     }
     ngOnDestroy() {
         this.subscriptions.forEach((s) => s.unsubscribe());
@@ -4338,15 +4444,18 @@ class ThreadComponent {
             closeThreadHandler: () => this.closeThread(),
         };
     }
-    getReplyCountParam(parentMessage) {
-        return { replyCount: parentMessage === null || parentMessage === void 0 ? void 0 : parentMessage.reply_count };
-    }
     closeThread() {
         void this.channelService.setAsActiveParentMessage(undefined);
     }
+    get channelName() {
+        if (!this.channel || !this.chatClientService.chatClient.user) {
+            return '';
+        }
+        return getChannelDisplayText(this.channel, this.chatClientService.chatClient.user);
+    }
 }
-ThreadComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: ThreadComponent, deps: [{ token: CustomTemplatesService }, { token: ChannelService }], target: i0.ɵɵFactoryTarget.Component });
-ThreadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: ThreadComponent, selector: "stream-thread", host: { properties: { "class": "this.class" } }, ngImport: i0, template: "<ng-container\n  *ngTemplateOutlet=\"\n    (customTemplatesService.threadHeaderTemplate$ | async) ||\n      defaultThreadHeader;\n    context: getThreadHeaderContext()\n  \"\n></ng-container>\n<ng-content select='[name=\"thread-message-list\"]'></ng-content>\n<div class=\"str-chat__small-message-input__wrapper\">\n  <ng-content select='[name=\"thread-message-input\"]'></ng-content>\n</div>\n\n<ng-template\n  #defaultThreadHeader\n  let-parentMessage=\"parentMessage\"\n  let-closeThreadHandler=\"closeThreadHandler\"\n>\n  <div class=\"str-chat__thread-header\">\n    <div class=\"str-chat__thread-header-details\">\n      <strong translate>streamChat.Thread</strong>\n      <small data-testid=\"reply-count\">\n        {{parentMessage?.reply_count === 1 ? ('streamChat.1 reply' | translate) : ('streamChat.{{ replyCount }}\n        replies' | translate:getReplyCountParam(parentMessage))}}\n      </small>\n    </div>\n    <button\n      class=\"str-chat__square-button\"\n      data-testid=\"close-button\"\n      (click)=\"closeThreadHandler()\"\n    >\n      <stream-icon-placeholder\n        icon=\"close-no-outline\"\n      ></stream-icon-placeholder>\n    </button>\n  </div>\n</ng-template>\n", components: [{ type: IconPlaceholderComponent, selector: "stream-icon-placeholder", inputs: ["icon", "size"] }], directives: [{ type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i9.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }], pipes: { "async": i3.AsyncPipe, "translate": i9.TranslatePipe } });
+ThreadComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: ThreadComponent, deps: [{ token: CustomTemplatesService }, { token: ChannelService }, { token: ChatClientService }], target: i0.ɵɵFactoryTarget.Component });
+ThreadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: ThreadComponent, selector: "stream-thread", host: { properties: { "class": "this.class" } }, ngImport: i0, 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: i7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i8.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }], pipes: { "async": i7.AsyncPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: ThreadComponent, decorators: [{
             type: Component,
             args: [{
@@ -4354,7 +4463,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImpor
                     templateUrl: './thread.component.html',
                     styles: [],
                 }]
-        }], ctorParameters: function () { return [{ type: CustomTemplatesService }, { type: ChannelService }]; }, propDecorators: { class: [{
+        }], ctorParameters: function () { return [{ type: CustomTemplatesService }, { type: ChannelService }, { type: ChatClientService }]; }, propDecorators: { class: [{
                 type: HostBinding,
                 args: ['class']
             }] } });
@@ -4395,7 +4504,10 @@ StreamChatModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", versio
         TextareaDirective,
         ThreadComponent,
         IconPlaceholderComponent,
-        LoadingIndicatorPlaceholderComponent], imports: [CommonModule, TranslateModule, StreamAvatarModule], exports: [ChannelComponent,
+        LoadingIndicatorPlaceholderComponent], imports: [CommonModule,
+        TranslateModule,
+        StreamAvatarModule,
+        NgxPopperjsModule], exports: [ChannelComponent,
         ChannelHeaderComponent,
         ChannelListComponent,
         ChannelPreviewComponent,
@@ -4415,7 +4527,12 @@ StreamChatModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", versio
         ThreadComponent,
         IconPlaceholderComponent,
         LoadingIndicatorPlaceholderComponent] });
-StreamChatModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: StreamChatModule, imports: [[CommonModule, TranslateModule, StreamAvatarModule], StreamAvatarModule] });
+StreamChatModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: StreamChatModule, imports: [[
+            CommonModule,
+            TranslateModule,
+            StreamAvatarModule,
+            NgxPopperjsModule,
+        ], StreamAvatarModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: StreamChatModule, decorators: [{
             type: NgModule,
             args: [{
@@ -4441,7 +4558,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImpor
                         IconPlaceholderComponent,
                         LoadingIndicatorPlaceholderComponent,
                     ],
-                    imports: [CommonModule, TranslateModule, StreamAvatarModule],
+                    imports: [
+                        CommonModule,
+                        TranslateModule,
+                        StreamAvatarModule,
+                        NgxPopperjsModule,
+                    ],
                     exports: [
                         ChannelComponent,
                         ChannelHeaderComponent,
@@ -4525,5 +4647,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AttachmentListComponent, AttachmentPreviewListComponent, AttachmentService, AutocompleteTextareaComponent, AvatarComponent, AvatarPlaceholderComponent, ChannelComponent, ChannelHeaderComponent, ChannelListComponent, ChannelListToggleService, ChannelPreviewComponent, ChannelService, ChatClientService, CustomTemplatesService, EmojiInputService, IconComponent, IconPlaceholderComponent, ImageLoadService, LoadingIndicatorComponent, LoadingIndicatorPlaceholderComponent, MessageActionsBoxComponent, MessageComponent, MessageInputComponent, MessageInputConfigService, MessageListComponent, MessageReactionsComponent, ModalComponent, NotificationComponent, NotificationListComponent, NotificationService, StreamAutocompleteTextareaModule, StreamAvatarModule, StreamChatModule, StreamI18nService, StreamTextareaModule, TextareaComponent, TextareaDirective, ThemeService, ThreadComponent, TransliterationService, createMessagePreview, getDeviceWidth, getGroupStyles, getReadBy, isImageAttachment, isImageFile, listUsers, parseDate, textareaInjectionToken };
+export { AttachmentListComponent, AttachmentPreviewListComponent, AttachmentService, AutocompleteTextareaComponent, AvatarComponent, AvatarPlaceholderComponent, ChannelComponent, ChannelHeaderComponent, ChannelListComponent, ChannelListToggleService, ChannelPreviewComponent, ChannelService, ChatClientService, CustomTemplatesService, EmojiInputService, IconComponent, IconPlaceholderComponent, ImageLoadService, LoadingIndicatorComponent, LoadingIndicatorPlaceholderComponent, MessageActionsBoxComponent, MessageComponent, MessageInputComponent, MessageInputConfigService, MessageListComponent, MessageReactionsComponent, ModalComponent, NotificationComponent, NotificationListComponent, NotificationService, StreamAutocompleteTextareaModule, StreamAvatarModule, StreamChatModule, StreamI18nService, StreamTextareaModule, TextareaComponent, TextareaDirective, ThemeService, ThreadComponent, TransliterationService, createMessagePreview, getGroupStyles, getReadBy, isImageAttachment, isImageFile, listUsers, parseDate, textareaInjectionToken };
 //# sourceMappingURL=stream-chat-angular.js.map