stream-chat-angular 2.8.2 → 2.12.0

package/fesm2015/stream-chat-angular.js

@@ -1,22 +1,22 @@
 import { __awaiter } from 'tslib';
 import * as i0 from '@angular/core';
 import { Injectable, Component, Input, InjectionToken, EventEmitter, Directive, Output, Inject, ViewChild, HostBinding, NgModule } from '@angular/core';
-import { BehaviorSubject, ReplaySubject, of, Subject } from 'rxjs';
+import { BehaviorSubject, ReplaySubject, combineLatest, Subject, of } from 'rxjs';
 import { StreamChat } from 'stream-chat';
-import { map, first, catchError, startWith, distinctUntilChanged, filter, debounceTime, tap } from 'rxjs/operators';
+import { map, shareReplay, filter, first, catchError, startWith, distinctUntilChanged, debounceTime, tap } from 'rxjs/operators';
 import { v4 } from 'uuid';
-import * as i10 from '@ngx-translate/core';
+import * as i1 from '@ngx-translate/core';
 import { TranslateModule } from '@ngx-translate/core';
-import * as i3 from '@angular/common';
+import * as i6 from '@angular/common';
 import { CommonModule } from '@angular/common';
+import prettybytes from 'pretty-bytes';
 import Dayjs from 'dayjs';
 import calendar from 'dayjs/plugin/calendar';
-import prettybytes from 'pretty-bytes';
 import transliterate from '@stream-io/transliterate';
 import * as i5 from 'angular-mentions';
 import { MentionModule } from 'angular-mentions';
 
-const version = '2.8.2';
+const version = '2.12.0';
 
 class NotificationService {
     constructor() {
@@ -105,6 +105,11 @@ class ChatClientService {
             });
         });
     }
+    disconnectUser() {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this.chatClient.disconnectUser();
+        });
+    }
     getAppSettings() {
         return __awaiter(this, void 0, void 0, function* () {
             if (this.appSettingsSubject.getValue()) {
@@ -144,7 +149,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImpor
                 }]
         }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: NotificationService }]; } });
 
-const createMessagePreview = (user, text, attachments, mentionedUsers) => {
+const createMessagePreview = (user, text, attachments = [], mentionedUsers = [], parentId = undefined, quotedMessageId = undefined) => {
     const clientSideId = `${user.id}-${v4()}`;
     return {
         __html: text,
@@ -158,6 +163,8 @@ const createMessagePreview = (user, text, attachments, mentionedUsers) => {
         user,
         attachments,
         mentioned_users: mentionedUsers,
+        parent_id: parentId,
+        quoted_message_id: quotedMessageId,
     };
 };
 
@@ -183,31 +190,52 @@ class ChannelService {
         this.activeChannelMessagesSubject = new BehaviorSubject([]);
         this.hasMoreChannelsSubject = new ReplaySubject(1);
         this.activeChannelSubscriptions = [];
+        this.activeParentMessageIdSubject = new BehaviorSubject(undefined);
+        this.activeThreadMessagesSubject = new BehaviorSubject([]);
+        this.messagePageSize = 25;
+        this.messageToQuoteSubject = new BehaviorSubject(undefined);
         this.channelListSetter = (channels) => {
             this.channelsSubject.next(channels);
         };
         this.messageListSetter = (messages) => {
             this.activeChannelMessagesSubject.next(messages);
         };
+        this.threadListSetter = (messages) => {
+            this.activeThreadMessagesSubject.next(messages);
+        };
+        this.parentMessageSetter = (message) => {
+            this.activeParentMessageIdSubject.next(message === null || message === void 0 ? void 0 : message.id);
+        };
         this.channels$ = this.channelsSubject.asObservable();
         this.activeChannel$ = this.activeChannelSubject.asObservable();
         this.activeChannelMessages$ = this.activeChannelMessagesSubject.pipe(map((messages) => {
             const channel = this.activeChannelSubject.getValue();
-            return messages.map((message) => {
-                if (this.isStreamMessage(message) &&
-                    this.isFormatMessageResponse(message)) {
-                    return message;
-                }
-                else if (this.isFormatMessageResponse(message)) {
-                    return Object.assign(Object.assign({}, message), { readBy: getReadBy(message, channel) });
-                }
-                else {
-                    const formatMessage = this.formatMessage(message);
-                    return Object.assign(Object.assign({}, formatMessage), { readBy: getReadBy(formatMessage, channel) });
-                }
-            });
+            return messages.map((message) => this.transformToStreamMessage(message, channel));
         }));
         this.hasMoreChannels$ = this.hasMoreChannelsSubject.asObservable();
+        this.activeParentMessageId$ =
+            this.activeParentMessageIdSubject.asObservable();
+        this.activeThreadMessages$ = this.activeThreadMessagesSubject.pipe(map((messages) => {
+            const channel = this.activeChannelSubject.getValue();
+            return messages.map((message) => this.transformToStreamMessage(message, channel));
+        }));
+        this.activeParentMessage$ = combineLatest([
+            this.activeChannelMessages$,
+            this.activeParentMessageId$,
+        ]).pipe(map(([messages, parentMessageId]) => {
+            if (!parentMessageId) {
+                return undefined;
+            }
+            else {
+                return messages.find((m) => m.id === parentMessageId);
+            }
+        }), shareReplay());
+        this.messageToQuote$ = this.messageToQuoteSubject.asObservable();
+        this.chatClientService.connectionState$
+            .pipe(filter((s) => s === 'online'))
+            .subscribe(() => {
+            void this.setAsActiveParentMessage(undefined);
+        });
     }
     setAsActiveChannel(channel) {
         const prevActiveChannel = this.activeChannelSubject.getValue();
@@ -221,25 +249,66 @@ class ChannelService {
             void channel.markRead();
         }
         this.activeChannelMessagesSubject.next([...channel.state.messages]);
+        this.activeParentMessageIdSubject.next(undefined);
+        this.activeThreadMessagesSubject.next([]);
+        this.messageToQuoteSubject.next(undefined);
     }
+    setAsActiveParentMessage(message) {
+        var _a;
+        return __awaiter(this, void 0, void 0, function* () {
+            const messageToQuote = this.messageToQuoteSubject.getValue();
+            if (messageToQuote && !!messageToQuote.parent_id) {
+                this.messageToQuoteSubject.next(undefined);
+            }
+            if (!message) {
+                this.activeParentMessageIdSubject.next(undefined);
+                this.activeThreadMessagesSubject.next([]);
+            }
+            else {
+                this.activeParentMessageIdSubject.next(message.id);
+                const activeChannel = this.activeChannelSubject.getValue();
+                const result = yield (activeChannel === null || activeChannel === void 0 ? void 0 : activeChannel.getReplies(message.id, {
+                    limit: (_a = this.options) === null || _a === void 0 ? void 0 : _a.message_limit,
+                }));
+                this.activeThreadMessagesSubject.next((result === null || result === void 0 ? void 0 : result.messages) || []);
+            }
+        });
+    }
+    // load more thread replies
     loadMoreMessages() {
-        var _a, _b, _c, _d;
+        var _a, _b, _c, _d, _e;
         return __awaiter(this, void 0, void 0, function* () {
             const activeChnannel = this.activeChannelSubject.getValue();
             const lastMessageId = (_a = this.activeChannelMessagesSubject.getValue()[0]) === null || _a === void 0 ? void 0 : _a.id;
             yield (activeChnannel === null || activeChnannel === void 0 ? void 0 : activeChnannel.query({
-                messages: { limit: 25, id_lt: lastMessageId },
+                messages: { limit: (_b = this.options) === null || _b === void 0 ? void 0 : _b.message_limit, id_lt: lastMessageId },
                 members: { limit: 0 },
                 watchers: { limit: 0 },
             }));
-            if (((_b = activeChnannel === null || activeChnannel === void 0 ? void 0 : activeChnannel.data) === null || _b === void 0 ? void 0 : _b.id) ===
-                ((_d = (_c = this.activeChannelSubject.getValue()) === null || _c === void 0 ? void 0 : _c.data) === null || _d === void 0 ? void 0 : _d.id)) {
+            if (((_c = activeChnannel === null || activeChnannel === void 0 ? void 0 : activeChnannel.data) === null || _c === void 0 ? void 0 : _c.id) ===
+                ((_e = (_d = this.activeChannelSubject.getValue()) === null || _d === void 0 ? void 0 : _d.data) === null || _e === void 0 ? void 0 : _e.id)) {
                 this.activeChannelMessagesSubject.next([
                     ...activeChnannel.state.messages,
                 ]);
             }
         });
     }
+    loadMoreThreadReplies() {
+        var _a, _b;
+        return __awaiter(this, void 0, void 0, function* () {
+            const activeChnannel = this.activeChannelSubject.getValue();
+            const parentMessageId = this.activeParentMessageIdSubject.getValue();
+            if (!parentMessageId) {
+                return;
+            }
+            const lastMessageId = (_a = this.activeThreadMessagesSubject.getValue()[0]) === null || _a === void 0 ? void 0 : _a.id;
+            yield (activeChnannel === null || activeChnannel === void 0 ? void 0 : activeChnannel.getReplies(parentMessageId, {
+                limit: (_b = this.options) === null || _b === void 0 ? void 0 : _b.message_limit,
+                id_lt: lastMessageId,
+            }));
+            this.activeThreadMessagesSubject.next((activeChnannel === null || activeChnannel === void 0 ? void 0 : activeChnannel.state.threads[parentMessageId]) || []);
+        });
+    }
     init(filters, sort, options) {
         return __awaiter(this, void 0, void 0, function* () {
             this.filters = filters;
@@ -249,13 +318,21 @@ class ChannelService {
                 state: true,
                 presence: true,
                 watch: true,
-                message_limit: 25,
+                message_limit: this.messagePageSize,
             };
             this.sort = sort || { last_message_at: -1, updated_at: -1 };
             yield this.queryChannels();
             this.chatClientService.notification$.subscribe((notification) => void this.handleNotification(notification));
         });
     }
+    reset() {
+        this.activeChannelMessagesSubject.next([]);
+        this.activeChannelSubject.next(undefined);
+        this.activeParentMessageIdSubject.next(undefined);
+        this.activeThreadMessagesSubject.next([]);
+        this.channelsSubject.next(undefined);
+        this.selectMessageToQuote(undefined);
+    }
     loadMoreChannels() {
         return __awaiter(this, void 0, void 0, function* () {
             this.options.offset = this.channels.length;
@@ -277,9 +354,9 @@ class ChannelService {
                 .getValue()) === null || _a === void 0 ? void 0 : _a.deleteReaction(messageId, reactionType));
         });
     }
-    sendMessage(text, attachments = [], mentionedUsers = []) {
+    sendMessage(text, attachments = [], mentionedUsers = [], parentId = undefined, quotedMessageId = undefined) {
         return __awaiter(this, void 0, void 0, function* () {
-            const preview = createMessagePreview(this.chatClientService.chatClient.user, text, attachments, mentionedUsers);
+            const preview = createMessagePreview(this.chatClientService.chatClient.user, text, attachments, mentionedUsers, parentId, quotedMessageId);
             const channel = this.activeChannelSubject.getValue();
             preview.readBy = [];
             channel.state.addMessageSorted(preview, true);
@@ -357,18 +434,64 @@ class ChannelService {
             }
         });
     }
+    sendAction(messageId, formData) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const channel = this.activeChannelSubject.getValue();
+            const response = yield channel.sendAction(messageId, formData);
+            if (response === null || response === void 0 ? void 0 : response.message) {
+                channel.state.addMessageSorted(Object.assign(Object.assign({}, response.message), { status: 'received' }));
+                const isThreadReply = !!response.message.parent_id;
+                isThreadReply
+                    ? this.activeThreadMessagesSubject.next([
+                        ...channel.state.threads[response.message.parent_id],
+                    ])
+                    : this.activeChannelMessagesSubject.next([...channel.state.messages]);
+            }
+            else {
+                channel.state.removeMessage({ id: messageId });
+                if (this.activeChannelMessagesSubject
+                    .getValue()
+                    .find((m) => m.id === messageId)) {
+                    this.activeChannelMessagesSubject.next([...channel.state.messages]);
+                }
+                else if (this.activeThreadMessagesSubject
+                    .getValue()
+                    .find((m) => m.id === messageId)) {
+                    this.activeThreadMessagesSubject.next(channel.state.threads[this.activeParentMessageIdSubject.getValue()]);
+                }
+            }
+        });
+    }
+    selectMessageToQuote(message) {
+        this.messageToQuoteSubject.next(message);
+    }
     sendMessageRequest(preview) {
         var _a;
         return __awaiter(this, void 0, void 0, function* () {
             const channel = this.activeChannelSubject.getValue();
-            this.activeChannelMessagesSubject.next([...channel.state.messages]);
+            const isThreadReply = !!preview.parent_id;
+            isThreadReply
+                ? this.activeThreadMessagesSubject.next([
+                    ...channel.state.threads[preview.parent_id],
+                ])
+                : this.activeChannelMessagesSubject.next([...channel.state.messages]);
             try {
-                yield channel.sendMessage({
+                const response = yield channel.sendMessage({
                     text: preview.text,
                     attachments: preview.attachments,
                     mentioned_users: (_a = preview.mentioned_users) === null || _a === void 0 ? void 0 : _a.map((u) => u.id),
                     id: preview.id,
+                    parent_id: preview.parent_id,
+                    quoted_message_id: preview.quoted_message_id,
                 });
+                if (response === null || response === void 0 ? void 0 : response.message) {
+                    channel.state.addMessageSorted(Object.assign(Object.assign({}, response.message), { status: 'received' }), true);
+                    isThreadReply
+                        ? this.activeThreadMessagesSubject.next([
+                            ...channel.state.threads[preview.parent_id],
+                        ])
+                        : this.activeChannelMessagesSubject.next([...channel.state.messages]);
+                }
             }
             catch (error) {
                 const stringError = JSON.stringify(error);
@@ -376,7 +499,11 @@ class ChannelService {
                     ? JSON.parse(stringError)
                     : {};
                 channel.state.addMessageSorted(Object.assign(Object.assign({}, preview), { errorStatusCode: parsedError.status || undefined, status: 'failed' }), true);
-                this.activeChannelMessagesSubject.next([...channel.state.messages]);
+                isThreadReply
+                    ? this.activeThreadMessagesSubject.next([
+                        ...channel.state.threads[preview.parent_id],
+                    ])
+                    : this.activeChannelMessagesSubject.next([...channel.state.messages]);
             }
         });
     }
@@ -454,9 +581,15 @@ class ChannelService {
         }
     }
     watchForActiveChannelEvents(channel) {
-        this.activeChannelSubscriptions.push(channel.on('message.new', () => {
+        this.activeChannelSubscriptions.push(channel.on('message.new', (event) => {
             this.ngZone.run(() => {
-                this.activeChannelMessagesSubject.next([...channel.state.messages]);
+                event.message && event.message.parent_id
+                    ? this.activeThreadMessagesSubject.next([
+                        ...channel.state.threads[event.message.parent_id],
+                    ])
+                    : this.activeChannelMessagesSubject.next([
+                        ...channel.state.messages,
+                    ]);
                 this.activeChannel$.pipe(first()).subscribe((c) => {
                     if (this.canSendReadEvents) {
                         void (c === null || c === void 0 ? void 0 : c.markRead());
@@ -485,19 +618,27 @@ class ChannelService {
     }
     messageUpdated(event) {
         this.ngZone.run(() => {
-            const messages = this.activeChannelMessagesSubject.getValue();
+            const isThreadReply = event.message && event.message.parent_id;
+            const messages = isThreadReply
+                ? this.activeThreadMessagesSubject.getValue()
+                : this.activeChannelMessagesSubject.getValue();
             const messageIndex = messages.findIndex((m) => { var _a; return m.id === ((_a = event.message) === null || _a === void 0 ? void 0 : _a.id); });
             if (messageIndex !== -1 && event.message) {
                 messages[messageIndex] = event.message;
-                this.activeChannelMessagesSubject.next([...messages]);
+                isThreadReply
+                    ? this.activeThreadMessagesSubject.next([...messages])
+                    : this.activeChannelMessagesSubject.next([...messages]);
             }
         });
     }
     messageReactionEventReceived(e) {
         this.ngZone.run(() => {
             var _a, _b, _c, _d;
+            const isThreadMessage = e.message && e.message.parent_id;
             let messages;
-            this.activeChannelMessages$
+            (isThreadMessage
+                ? this.activeThreadMessages$
+                : this.activeChannelMessages$)
                 .pipe(first())
                 .subscribe((m) => (messages = m));
             const message = messages.find((m) => { var _a; return m.id === ((_a = e === null || e === void 0 ? void 0 : e.message) === null || _a === void 0 ? void 0 : _a.id); });
@@ -508,7 +649,9 @@ class ChannelService {
             message.reaction_scores = Object.assign({}, (_b = e.message) === null || _b === void 0 ? void 0 : _b.reaction_scores);
             message.latest_reactions = [...(((_c = e.message) === null || _c === void 0 ? void 0 : _c.latest_reactions) || [])];
             message.own_reactions = [...(((_d = e.message) === null || _d === void 0 ? void 0 : _d.own_reactions) || [])];
-            this.activeChannelMessagesSubject.next([...messages]);
+            isThreadMessage
+                ? this.activeThreadMessagesSubject.next([...messages])
+                : this.activeChannelMessagesSubject.next([...messages]);
         });
     }
     formatMessage(message) {
@@ -556,7 +699,7 @@ class ChannelService {
                 case 'message.new': {
                     this.ngZone.run(() => {
                         if (this.customNewMessageHandler) {
-                            this.customNewMessageHandler(event, channel, this.channelListSetter, this.messageListSetter);
+                            this.customNewMessageHandler(event, channel, this.channelListSetter, this.messageListSetter, this.threadListSetter, this.parentMessageSetter);
                         }
                         else {
                             this.handleNewMessage(event, channel);
@@ -567,7 +710,7 @@ class ChannelService {
                 case 'channel.hidden': {
                     this.ngZone.run(() => {
                         if (this.customChannelHiddenHandler) {
-                            this.customChannelHiddenHandler(event, channel, this.channelListSetter, this.messageListSetter);
+                            this.customChannelHiddenHandler(event, channel, this.channelListSetter, this.messageListSetter, this.threadListSetter, this.parentMessageSetter);
                         }
                         else {
                             this.handleChannelHidden(event);
@@ -578,7 +721,7 @@ class ChannelService {
                 case 'channel.deleted': {
                     this.ngZone.run(() => {
                         if (this.customChannelDeletedHandler) {
-                            this.customChannelDeletedHandler(event, channel, this.channelListSetter, this.messageListSetter);
+                            this.customChannelDeletedHandler(event, channel, this.channelListSetter, this.messageListSetter, this.threadListSetter, this.parentMessageSetter);
                         }
                         else {
                             this.handleChannelDeleted(event);
@@ -589,7 +732,7 @@ class ChannelService {
                 case 'channel.visible': {
                     this.ngZone.run(() => {
                         if (this.customChannelVisibleHandler) {
-                            this.customChannelVisibleHandler(event, channel, this.channelListSetter, this.messageListSetter);
+                            this.customChannelVisibleHandler(event, channel, this.channelListSetter, this.messageListSetter, this.threadListSetter, this.parentMessageSetter);
                         }
                         else {
                             this.handleChannelVisible(event, channel);
@@ -600,7 +743,7 @@ class ChannelService {
                 case 'channel.updated': {
                     this.ngZone.run(() => {
                         if (this.customChannelUpdatedHandler) {
-                            this.customChannelUpdatedHandler(event, channel, this.channelListSetter, this.messageListSetter);
+                            this.customChannelUpdatedHandler(event, channel, this.channelListSetter, this.messageListSetter, this.threadListSetter, this.parentMessageSetter);
                         }
                         else {
                             this.handleChannelUpdate(event);
@@ -611,7 +754,7 @@ class ChannelService {
                 case 'channel.truncated': {
                     this.ngZone.run(() => {
                         if (this.customChannelTruncatedHandler) {
-                            this.customChannelTruncatedHandler(event, channel, this.channelListSetter, this.messageListSetter);
+                            this.customChannelTruncatedHandler(event, channel, this.channelListSetter, this.messageListSetter, this.threadListSetter, this.parentMessageSetter);
                         }
                         else {
                             this.handleChannelTruncate(event);
@@ -651,6 +794,7 @@ class ChannelService {
             }
         }
     }
+    // truncate active thread as well
     handleChannelTruncate(event) {
         var _a, _b;
         const channelIndex = this.channels.findIndex((c) => c.cid === event.channel.cid);
@@ -662,6 +806,8 @@ class ChannelService {
                 channel.state.messages = [];
                 this.activeChannelSubject.next(channel);
                 this.activeChannelMessagesSubject.next([]);
+                this.activeParentMessageIdSubject.next(undefined);
+                this.activeThreadMessagesSubject.next([]);
             }
         }
     }
@@ -677,6 +823,20 @@ class ChannelService {
         const capabilites = (_a = channel.data) === null || _a === void 0 ? void 0 : _a.own_capabilities;
         return capabilites.indexOf('read-events') !== -1;
     }
+    transformToStreamMessage(message, channel) {
+        const isThreadMessage = !!message.parent_id;
+        if (this.isStreamMessage(message) &&
+            this.isFormatMessageResponse(message)) {
+            return message;
+        }
+        else if (this.isFormatMessageResponse(message)) {
+            return Object.assign(Object.assign({}, message), { readBy: isThreadMessage ? [] : getReadBy(message, channel) });
+        }
+        else {
+            const formatMessage = this.formatMessage(message);
+            return Object.assign(Object.assign({}, formatMessage), { readBy: isThreadMessage ? [] : getReadBy(formatMessage, channel) });
+        }
+    }
 }
 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.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: ChannelService, providedIn: 'root' });
@@ -989,6 +1149,7 @@ const en = {
         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 deleted': 'Message deleted',
         'Message has been successfully flagged': 'Message has been successfully flagged',
         'Message pinned': 'Message pinned',
@@ -1039,6 +1200,7 @@ const en = {
         test: 'success',
         'Sending links is not allowed in this conversation': 'Sending links is not allowed in this conversation',
         "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}}',
     },
 };
@@ -1054,14 +1216,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: i10.TranslateService }], target: i0.ɵɵFactoryTarget.Injectable });
+StreamI18nService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: StreamI18nService, deps: [{ token: i1.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: i10.TranslateService }]; } });
+        }], ctorParameters: function () { return [{ type: i1.TranslateService }]; } });
 
 class AvatarComponent {
     constructor() {
@@ -1075,7 +1237,7 @@ class AvatarComponent {
     }
 }
 AvatarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: AvatarComponent, deps: [], 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" }, ngImport: i0, template: "<div\n  class=\"str-chat__avatar str-chat__avatar--circle\"\n  title=\"{{ name }}\"\n  [style]=\"{\n    flexBasis: size + 'px',\n    fontSize: size / 2 + 'px',\n    height: size + 'px',\n    lineHeight: size + 'px',\n    width: size + 'px'\n  }\"\n>\n  <img\n    *ngIf=\"imageUrl && !isError; else fallback\"\n    class=\"str-chat__avatar-image str-chat__avatar-image{{\n      isLoaded ? ' str-chat__avatar-image--loaded' : ''\n    }}\"\n    src=\"{{ imageUrl }}\"\n    alt=\"{{ initials }}\"\n    data-testid=\"avatar-img\"\n    (load)=\"isLoaded = true\"\n    (error)=\"isError = true\"\n    [style]=\"{\n      flexBasis: size + 'px',\n      height: size + 'px',\n      objectFit: 'cover',\n      width: size + 'px'\n    }\"\n  />\n  <ng-template #fallback>\n    <div data-testid=\"fallback-img\" class=\"str-chat__avatar-fallback\">\n      {{ initials }}\n    </div>\n  </ng-template>\n</div>\n", styles: [""], directives: [{ type: 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" }, ngImport: i0, template: "<div\n  class=\"str-chat__avatar str-chat__avatar--circle\"\n  title=\"{{ name }}\"\n  [style]=\"{\n    flexBasis: size + 'px',\n    fontSize: size / 2 + 'px',\n    height: size + 'px',\n    lineHeight: size + 'px',\n    width: size + 'px'\n  }\"\n>\n  <img\n    *ngIf=\"imageUrl && !isError; else fallback\"\n    class=\"str-chat__avatar-image str-chat__avatar-image{{\n      isLoaded ? ' str-chat__avatar-image--loaded' : ''\n    }}\"\n    src=\"{{ imageUrl }}\"\n    alt=\"{{ initials }}\"\n    data-testid=\"avatar-img\"\n    (load)=\"isLoaded = true\"\n    (error)=\"isError = true\"\n    [style]=\"{\n      flexBasis: size + 'px',\n      height: size + 'px',\n      objectFit: 'cover',\n      width: size + 'px'\n    }\"\n  />\n  <ng-template #fallback>\n    <div data-testid=\"fallback-img\" class=\"str-chat__avatar-fallback\">\n      {{ initials }}\n    </div>\n  </ng-template>\n</div>\n", styles: [""], directives: [{ type: i6.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: [{
@@ -1095,7 +1257,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", directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i10.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  height=\"16\"\n  width=\"16\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n  data-testid=\"delivered-icon\"\n>\n  <path\n    d=\"M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0zm3.72 6.633a.955.955 0 1 0-1.352-1.352L6.986 8.663 5.633 7.31A.956.956 0 1 0 4.28 8.663l2.029 2.028a.956.956 0 0 0 1.353 0l4.058-4.058z\"\n    fill=\"#006CFF\"\n    fillRule=\"evenodd\"\n  />\n</svg>\n<svg\n  *ngIf=\"icon === 'reaction-icon'\"\n  height=\"12\"\n  viewBox=\"0 0 12 12\"\n  width=\"12\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n  data-testid=\"reaction-icon\"\n>\n  <g clipRule=\"evenodd\" fillRule=\"evenodd\">\n    <path\n      d=\"M6 1.2C3.3 1.2 1.2 3.3 1.2 6c0 2.7 2.1 4.8 4.8 4.8 2.7 0 4.8-2.1 4.8-4.8 0-2.7-2.1-4.8-4.8-4.8zM0 6c0-3.3 2.7-6 6-6s6 2.7 6 6-2.7 6-6 6-6-2.7-6-6z\"\n    ></path>\n    <path\n      d=\"M5.4 4.5c0 .5-.4.9-.9.9s-.9-.4-.9-.9.4-.9.9-.9.9.4.9.9zM8.4 4.5c0 .5-.4.9-.9.9s-.9-.4-.9-.9.4-.9.9-.9.9.4.9.9zM3.3 6.7c.3-.2.6-.1.8.1.3.4.8.9 1.5 1 .6.2 1.4.1 2.4-1 .2-.2.6-.3.8 0 .2.2.3.6 0 .8-1.1 1.3-2.4 1.7-3.5 1.5-1-.2-1.8-.9-2.2-1.5-.2-.3-.1-.7.2-.9z\"\n    ></path>\n  </g>\n</svg>\n<svg\n  data-testid=\"connection-error\"\n  *ngIf=\"icon === 'connection-error'\"\n  width=\"78px\"\n  height=\"78px\"\n  viewBox=\"0 0 78 78\"\n  version=\"1.1\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n  xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n>\n  <!-- Generator: Sketch 52.6 (67491) - http://www.bohemiancoding.com/sketch -->\n  <title>Combined Shape</title>\n  <desc>Created with Sketch.</desc>\n  <g\n    id=\"Interactions\"\n    stroke=\"none\"\n    stroke-width=\"1\"\n    fill=\"none\"\n    fill-rule=\"evenodd\"\n  >\n    <g\n      id=\"Connection-Error-_-Connectivity\"\n      transform=\"translate(-270.000000, -30.000000)\"\n      fill=\"#CF1F25\"\n    >\n      <g\n        id=\"109-network-connection\"\n        transform=\"translate(270.000000, 30.000000)\"\n      >\n        <path\n          d=\"M66.4609744,11.414231 C81.6225232,26.5757798 81.6225232,51.157545 66.4609744,66.3188467 C51.2994256,81.4803954 26.7176604,81.4803954 11.5563587,66.3188467 C-3.60519004,51.1572979 -3.60519004,26.5755327 11.5563587,11.414231 C26.7179075,-3.74731776 51.2996727,-3.74731776 66.4609744,11.414231 Z M54.7853215,45.8823776 L54.7853215,40.5882574 C54.7853215,39.613638 53.9952341,38.8235506 53.0206147,38.8235506 L44.9576695,38.8235506 L41.428256,42.3529641 L51.255555,42.3529641 L51.255555,45.8823776 L54.7853215,45.8823776 Z M40.6659027,43.1153174 L37.8988425,45.8823776 L40.6659027,45.8823776 L40.6659027,43.1153174 Z M51.1764962,56.4702653 L58.2353232,56.4702653 C59.2099355,56.4702653 60.00003,55.6801708 60.00003,54.7055585 L60.00003,51.176145 C60.00003,50.2015327 59.2099355,49.4114382 58.2353232,49.4114382 L51.1764962,49.4114382 C50.2018839,49.4114382 49.4117894,50.2015327 49.4117894,51.176145 L49.4117894,54.7055585 C49.4117894,55.6801708 50.2018839,56.4702653 51.1764962,56.4702653 Z M35.2941353,56.4702653 L42.3529624,56.4702653 C43.3275746,56.4702653 44.1176691,55.6801708 44.1176691,54.7055585 L44.1176691,51.176145 C44.1176691,50.2015327 43.3275746,49.4114382 42.3529624,49.4114382 L35.2941353,49.4114382 C34.319523,49.4114382 33.5294285,50.2015327 33.5294285,51.176145 L33.5294285,54.7055585 C33.5294285,55.6801708 34.319523,56.4702653 35.2941353,56.4702653 Z M56.6964989,19.0874231 C56.007381,18.3985134 54.8903216,18.3985134 54.2012036,19.087423 L45.882376,27.4062507 L45.882376,19.4117761 C45.882376,18.4371568 45.0922885,17.6470693 44.1176692,17.6470693 L33.5294286,17.6470693 C32.5548092,17.6470694 31.7647218,18.4371568 31.7647218,19.4117761 L31.7647218,30.0000167 C31.7647219,30.9746363 32.5548092,31.7647237 33.5294285,31.7647237 L41.5239031,31.7647237 L34.4650761,38.8235508 L24.7058947,38.8235508 C23.7312753,38.8235508 22.9411879,39.6136382 22.9411879,40.5882575 L22.9411879,45.8823778 L26.4706014,45.8823778 L26.4706014,42.3529643 L30.9356624,42.3529643 L23.8768354,49.4117914 L19.4117743,49.4117914 C18.4371549,49.4117914 17.6470675,50.2018788 17.6470675,51.1764981 L17.6470675,54.7059117 C17.6504049,54.9674302 17.7129076,55.2248042 17.8298886,55.4587302 L16.4456526,56.8429662 C15.7446193,57.5200453 15.7252005,58.6372282 16.4022825,59.3382615 C17.0793616,60.0392948 18.1965445,60.0587136 18.8975778,59.3816316 C18.9122847,59.3674273 18.9267436,59.3529684 18.940948,59.3382615 L56.6964963,21.5830662 C57.3856425,20.8939094 57.3856425,19.7765747 56.6964963,19.0874179 Z\"\n          id=\"Combined-Shape\"\n        ></path>\n      </g>\n    </g>\n  </g>\n</svg>\n<svg\n  *ngIf=\"icon === 'send'\"\n  data-testid=\"send\"\n  height=\"17\"\n  viewBox=\"0 0 18 17\"\n  width=\"18\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n>\n  <title translate>streamChat.Send</title>\n  <path\n    d=\"M0 17.015l17.333-8.508L0 0v6.617l12.417 1.89L0 10.397z\"\n    fill=\"#006cff\"\n    fillRule=\"evenodd\"\n  />\n</svg>\n<svg\n  *ngIf=\"icon === 'file-upload'\"\n  data-testid=\"file-upload\"\n  height=\"14\"\n  width=\"14\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n>\n  <title translate>streamChat.Attach files</title>\n  <path\n    d=\"M1.667.333h10.666c.737 0 1.334.597 1.334 1.334v10.666c0 .737-.597 1.334-1.334 1.334H1.667a1.333 1.333 0 0 1-1.334-1.334V1.667C.333.93.93.333 1.667.333zm2 1.334a1.667 1.667 0 1 0 0 3.333 1.667 1.667 0 0 0 0-3.333zm-2 9.333v1.333h10.666v-4l-2-2-4 4-2-2L1.667 11z\"\n    fillRule=\"nonzero\"\n  />\n</svg>\n<svg\n  data-testid=\"retry\"\n  *ngIf=\"icon === 'retry'\"\n  width=\"22\"\n  height=\"20\"\n  viewBox=\"0 0 22 20\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n>\n  <path\n    d=\"M20 5.535V2a1 1 0 0 1 2 0v6a1 1 0 0 1-1 1h-6a1 1 0 0 1 0-2h3.638l-2.975-2.653a8 8 0 1 0 1.884 8.32 1 1 0 1 1 1.886.666A10 10 0 1 1 5.175 1.245c3.901-2.15 8.754-1.462 11.88 1.667L20 5.535z\"\n    fill=\"#FFF\"\n    fill-rule=\"nonzero\"\n  />\n</svg>\n<svg\n  *ngIf=\"icon === 'close'\"\n  data-testid=\"close\"\n  width=\"28\"\n  height=\"28\"\n  viewBox=\"0 0 28 28\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n  xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n>\n  <defs>\n    <path\n      d=\"M465 5c5.53 0 10 4.47 10 10s-4.47 10-10 10-10-4.47-10-10 4.47-10 10-10zm3.59 5L465 13.59 461.41 10 460 11.41l3.59 3.59-3.59 3.59 1.41 1.41 3.59-3.59 3.59 3.59 1.41-1.41-3.59-3.59 3.59-3.59-1.41-1.41z\"\n      id=\"b\"\n    />\n    <filter\n      x=\"-30%\"\n      y=\"-30%\"\n      width=\"160%\"\n      height=\"160%\"\n      filterUnits=\"objectBoundingBox\"\n      id=\"a\"\n    >\n      <feOffset in=\"SourceAlpha\" result=\"shadowOffsetOuter1\" />\n      <feGaussianBlur\n        stdDeviation=\"2\"\n        in=\"shadowOffsetOuter1\"\n        result=\"shadowBlurOuter1\"\n      />\n      <feColorMatrix\n        values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0\"\n        in=\"shadowBlurOuter1\"\n      />\n    </filter>\n  </defs>\n  <g transform=\"translate(-451 -1)\" fill-rule=\"nonzero\" fill=\"none\">\n    <use fill=\"#000\" filter=\"url(#a)\" xlink:href=\"#b\" />\n    <use fill=\"#FFF\" fill-rule=\"evenodd\" xlink:href=\"#b\" />\n  </g>\n</svg>\n<svg\n  *ngIf=\"icon === 'file'\"\n  data-testid=\"file\"\n  className=\"rfu-file-icon--small fa-file-fallback\"\n  [attr.height]=\"size || 20\"\n  [attr.width]=\"size || 20\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n  viewBox=\"0 0 384 512\"\n>\n  <path\n    d=\"M369.9 97.9L286 14C277 5 264.8-.1 252.1-.1H48C21.5 0 0 21.5 0 48v416c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48V131.9c0-12.7-5.1-25-14.1-34zM332.1 128H256V51.9l76.1 76.1zM48 464V48h160v104c0 13.3 10.7 24 24 24h104v288H48z\"\n    fill=\"#414D54\"\n  />\n</svg>\n<svg\n  *ngIf=\"icon === 'reply'\"\n  data-testid=\"reply\"\n  height=\"15\"\n  width=\"18\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n>\n  <path\n    d=\"M.56 10.946H.06l-.002-.498L.025.92a.5.5 0 1 1 1-.004l.032 9.029H9.06v-4l9 4.5-9 4.5v-4H.56z\"\n    fillRule=\"nonzero\"\n  />\n</svg>\n<svg\n  height=\"10\"\n  width=\"10\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n  data-testid=\"close-no-outline\"\n  *ngIf=\"icon === 'close-no-outline'\"\n>\n  <path\n    d=\"M9.916 1.027L8.973.084 5 4.058 1.027.084l-.943.943L4.058 5 .084 8.973l.943.943L5 5.942l3.973 3.974.943-.943L5.942 5z\"\n    fillRule=\"evenodd\"\n  />\n</svg>\n<svg\n  height=\"10\"\n  width=\"14\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n  data-testid=\"reply-in-thread\"\n  *ngIf=\"icon === 'reply-in-thread'\"\n>\n  <path\n    d=\"M8.516 3c4.78 0 4.972 6.5 4.972 6.5-1.6-2.906-2.847-3.184-4.972-3.184v2.872L3.772 4.994 8.516.5V3zM.484 5l4.5-4.237v1.78L2.416 5l2.568 2.125v1.828L.484 5z\"\n    fillRule=\"evenodd\"\n  />\n</svg>\n", directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.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: [{
@@ -1116,7 +1278,7 @@ class LoadingIndicatorComponent {
     }
 }
 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 id=\"a\" x1=\"50%\" x2=\"50%\" y1=\"0%\" y2=\"100%\">\n        <stop offset=\"0%\" stop-color=\"#FFF\" stop-opacity=\"0\" />\n        <stop\n          data-testid=\"stop-color\"\n          offset=\"100%\"\n          [attr.stop-color]=\"color\"\n          stop-opacity=\"1\"\n          [ngStyle]=\"{ stopColor: color }\"\n        />\n      </linearGradient>\n    </defs>\n    <path\n      d=\"M2.518 23.321l1.664-1.11A12.988 12.988 0 0 0 15 28c7.18 0 13-5.82 13-13S22.18 2 15 2V0c8.284 0 15 6.716 15 15 0 8.284-6.716 15-15 15-5.206 0-9.792-2.652-12.482-6.679z\"\n      fill=\"url(#a)\"\n      fillRule=\"evenodd\"\n    />\n  </svg>\n</div>\n", directives: [{ type: i6.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: LoadingIndicatorComponent, decorators: [{
             type: Component,
             args: [{
@@ -1158,6 +1320,8 @@ class TextareaDirective {
                 this.componentRef.instance.areMentionsEnabled = this.areMentionsEnabled;
                 this.componentRef.instance.mentionAutocompleteItemTemplate =
                     this.mentionAutocompleteItemTemplate;
+                this.componentRef.instance.commandAutocompleteItemTemplate =
+                    this.commandAutocompleteItemTemplate;
                 this.componentRef.instance.mentionScope = this.mentionScope;
                 this.componentRef.instance.value = this.value;
             }
@@ -1169,6 +1333,10 @@ class TextareaDirective {
             this.componentRef.instance.mentionAutocompleteItemTemplate =
                 this.mentionAutocompleteItemTemplate;
         }
+        if (changes.commandAutocompleteItemTemplate) {
+            this.componentRef.instance.commandAutocompleteItemTemplate =
+                this.commandAutocompleteItemTemplate;
+        }
         if (changes.mentionScope) {
             this.componentRef.instance.mentionScope = this.mentionScope;
         }
@@ -1184,7 +1352,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", mentionAutocompleteItemTemplate: "mentionAutocompleteItemTemplate", 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", mentionAutocompleteItemTemplate: "mentionAutocompleteItemTemplate", mentionScope: "mentionScope", commandAutocompleteItemTemplate: "commandAutocompleteItemTemplate", value: "value" }, 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: [{
@@ -1198,6 +1366,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImpor
                 type: Input
             }], mentionScope: [{
                 type: Input
+            }], commandAutocompleteItemTemplate: [{
+                type: Input
             }], value: [{
                 type: Input
             }], valueChange: [{
@@ -1225,6 +1395,90 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImpor
                 }]
         }], ctorParameters: function () { return []; } });
 
+class ImageLoadService {
+    constructor() {
+        this.imageLoad$ = new Subject();
+    }
+}
+ImageLoadService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: ImageLoadService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+ImageLoadService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: ImageLoadService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: ImageLoadService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: function () { return []; } });
+
+class AttachmentListComponent {
+    constructor(imageLoadService, channelService) {
+        this.imageLoadService = imageLoadService;
+        this.channelService = channelService;
+        this.attachments = [];
+        this.orderedAttachments = [];
+    }
+    ngOnChanges() {
+        this.orderedAttachments = [
+            ...this.attachments.filter((a) => this.isImage(a)),
+            ...this.attachments.filter((a) => this.isFile(a)),
+            ...this.attachments.filter((a) => this.isCard(a)),
+        ];
+    }
+    trackById(index) {
+        return index;
+    }
+    isImage(attachment) {
+        return isImageAttachment(attachment);
+    }
+    isFile(attachment) {
+        return attachment.type === 'file';
+    }
+    isCard(attachment) {
+        return (!attachment.type ||
+            (attachment.type === 'image' && !this.isImage(attachment)) ||
+            attachment.type === 'giphy');
+    }
+    imageLoaded() {
+        this.imageLoadService.imageLoad$.next();
+    }
+    hasFileSize(attachment) {
+        return (attachment.file_size && Number.isFinite(Number(attachment.file_size)));
+    }
+    getFileSize(attachment) {
+        return prettybytes(attachment.file_size);
+    }
+    trimUrl(url) {
+        if (url !== undefined && url !== null) {
+            const [trimmedUrl] = url
+                .replace(/^(?:https?:\/\/)?(?:www\.)?/i, '')
+                .split('/');
+            return trimmedUrl;
+        }
+        return null;
+    }
+    sendAction(action) {
+        void this.channelService.sendAction(this.messageId, {
+            [action.name]: action.value,
+        });
+    }
+    trackByActionValue(_, item) {
+        return item.value;
+    }
+}
+AttachmentListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: AttachmentListComponent, deps: [{ 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" }, 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    />\n    <div\n      *ngIf=\"isFile(attachment)\"\n      class=\"\n        str-chat__message-attachment-file--item\n        str-chat-angular__message-attachment-file-single\n      \"\n    >\n      <stream-icon icon=\"file\" [size]=\"30\"></stream-icon>\n      <div class=\"str-chat__message-attachment-file--item-text\">\n        <a\n          data-testclass=\"file-link\"\n          download\n          href=\"{{ attachment.asset_url }}\"\n          target=\"_blank\"\n        >\n          {{ attachment.title }}\n        </a>\n        <span data-testclass=\"size\" *ngIf=\"hasFileSize(attachment)\">{{\n          getFileSize(attachment)\n        }}</span>\n      </div>\n    </div>\n    <div\n      *ngIf=\"isCard(attachment)\"\n      class=\"str-chat__message-attachment-card str-chat__message-attachment-card--{{\n        attachment.type\n      }}\"\n    >\n      <div\n        *ngIf=\"attachment.image_url || attachment.thumb_url\"\n        class=\"str-chat__message-attachment-card--header\"\n      >\n        <img\n          data-testclass=\"card-img\"\n          alt=\"{{ attachment.image_url || attachment.thumb_url }}\"\n          src=\"{{ attachment.image_url || attachment.thumb_url }}\"\n        />\n      </div>\n      <div class=\"str-chat__message-attachment-card--content\">\n        <div class=\"str-chat__message-attachment-card--flex\">\n          <div\n            *ngIf=\"attachment.title\"\n            data-testclass=\"card-title\"\n            class=\"str-chat__message-attachment-card--title\"\n          >\n            {{ attachment.title }}\n          </div>\n          <div\n            *ngIf=\"attachment.text\"\n            class=\"str-chat__message-attachment-card--text\"\n            data-testclass=\"card-text\"\n          >\n            {{ attachment.text }}\n          </div>\n          <a\n            class=\"str-chat__message-attachment-card--url\"\n            *ngIf=\"attachment.title_link || attachment.og_scrape_url\"\n            data-testclass=\"url-link\"\n            noopener\n            noreferrer\n            href=\"{{ attachment.title_link || attachment.og_scrape_url }}\"\n            target=\"_blank\"\n          >\n            {{ trimUrl(attachment.title_link || attachment.og_scrape_url) }}\n          </a>\n        </div>\n      </div>\n    </div>\n    <div\n      class=\"str-chat__message-attachment-actions\"\n      *ngIf=\"attachment.actions && attachment.actions.length > 0\"\n    >\n      <div class=\"str-chat__message-attachment-actions-form\">\n        <button\n          *ngFor=\"let action of attachment.actions; trackBy: trackByActionValue\"\n          class=\"str-chat__message-attachment-actions-button str-chat__message-attachment-actions-button--{{\n            action.style\n          }}\"\n          data-testclass=\"attachment-action\"\n          (click)=\"sendAction(action)\"\n          (keyup.enter)=\"sendAction(action)\"\n        >\n          {{ action.text }}\n        </button>\n      </div>\n    </div>\n  </div>\n</ng-container>\n", components: [{ type: IconComponent, selector: "stream-icon", inputs: ["icon", "size"] }], directives: [{ type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: AttachmentListComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'stream-attachment-list',
+                    templateUrl: './attachment-list.component.html',
+                    styles: [],
+                }]
+        }], ctorParameters: function () { return [{ type: ImageLoadService }, { type: ChannelService }]; }, propDecorators: { messageId: [{
+                type: Input
+            }], attachments: [{
+                type: Input
+            }] } });
+
 class AttachmentPreviewListComponent {
     constructor(attachmentService) {
         this.attachmentService = attachmentService;
@@ -1245,7 +1499,7 @@ class AttachmentPreviewListComponent {
     }
 }
 AttachmentPreviewListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: AttachmentPreviewListComponent, deps: [{ token: AttachmentService }], target: i0.ɵɵFactoryTarget.Component });
-AttachmentPreviewListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: AttachmentPreviewListComponent, selector: "stream-attachment-preview-list", 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)=\"retryAttachmentUpload(attachmentUpload.file)\"\n        (keyup.enter)=\"retryAttachmentUpload(attachmentUpload.file)\"\n        data-testclass=\"upload-error\"\n      >\n        <stream-icon icon=\"retry\"></stream-icon>\n      </div>\n      <div class=\"rfu-thumbnail__wrapper\" style=\"width: 100; height: 100\">\n        <div class=\"rfu-thumbnail__overlay\">\n          <div\n            class=\"rfu-icon-button\"\n            data-testclass=\"delete-attachment\"\n            role=\"button\"\n            (click)=\"deleteAttachment(attachmentUpload)\"\n            (keyup.enter)=\"deleteAttachment(attachmentUpload)\"\n          >\n            <stream-icon icon=\"close\"></stream-icon>\n          </div>\n        </div>\n        <img\n          *ngIf=\"attachmentUpload.url || attachmentUpload.previewUri\"\n          src=\"{{\n            attachmentUpload.url\n              ? attachmentUpload.url\n              : attachmentUpload.previewUri\n          }}\"\n          alt=\"attachmentUpload.file.name\"\n          class=\"rfu-thumbnail__image\"\n          data-testclass=\"attachment-image\"\n        />\n      </div>\n      <stream-loading-indicator\n        data-testclass=\"loading-indicator\"\n        color=\"rgba(255,255,255,0.7)\"\n        *ngIf=\"attachmentUpload.state === 'uploading'\"\n      ></stream-loading-indicator>\n    </div>\n    <div\n      class=\"rfu-file-previewer\"\n      *ngIf=\"attachmentUpload.type === 'file'\"\n      data-testclass=\"attachment-file-preview\"\n    >\n      <ol>\n        <li\n          class=\"rfu-file-previewer__file\"\n          [class.rfu-file-previewer__file--uploading]=\"\n            attachmentUpload.state === 'uploading'\n          \"\n          [class.rfu-file-previewer__file--failed]=\"\n            attachmentUpload.state === 'error'\n          \"\n        >\n          <stream-icon icon=\"file\"></stream-icon>\n\n          <a\n            data-testclass=\"file-download-link\"\n            href=\"{{ attachmentUpload.url }}\"\n            (click)=\"attachmentUpload.url ? null : $event.preventDefault()\"\n            (keyup.enter)=\"\n              attachmentUpload.url ? null : $event.preventDefault()\n            \"\n            download\n          >\n            {{ attachmentUpload.file.name }}\n            <ng-container *ngIf=\"attachmentUpload.state === 'error'\">\n              <div\n                data-testclass=\"file-upload-retry\"\n                class=\"rfu-file-previewer__failed\"\n                (click)=\"retryAttachmentUpload(attachmentUpload.file)\"\n                (keyup.enter)=\"retryAttachmentUpload(attachmentUpload.file)\"\n                translate\n              >\n                streamChat.failed\n              </div>\n              <div\n                class=\"rfu-file-previewer__retry\"\n                (click)=\"retryAttachmentUpload(attachmentUpload.file)\"\n                (keyup.enter)=\"retryAttachmentUpload(attachmentUpload.file)\"\n                translate\n              >\n                streamChat.retry\n              </div>\n            </ng-container>\n          </a>\n\n          <span\n            data-testclass=\"file-delete\"\n            class=\"rfu-file-previewer__close-button\"\n            (click)=\"deleteAttachment(attachmentUpload)\"\n            (keyup.enter)=\"deleteAttachment(attachmentUpload)\"\n          >\n            \u2718\n          </span>\n          <div\n            *ngIf=\"attachmentUpload.state === 'uploading'\"\n            class=\"rfu-file-previewer__loading-indicator\"\n          >\n            <stream-loading-indicator></stream-loading-indicator>\n          </div>\n        </li>\n      </ol>\n    </div>\n  </ng-container>\n</div>\n", components: [{ type: IconComponent, selector: "stream-icon", inputs: ["icon", "size"] }, { type: LoadingIndicatorComponent, selector: "stream-loading-indicator", inputs: ["size", "color"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i10.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }], pipes: { "async": i3.AsyncPipe } });
+AttachmentPreviewListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: AttachmentPreviewListComponent, selector: "stream-attachment-preview-list", 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)=\"retryAttachmentUpload(attachmentUpload.file)\"\n        (keyup.enter)=\"retryAttachmentUpload(attachmentUpload.file)\"\n        data-testclass=\"upload-error\"\n      >\n        <stream-icon icon=\"retry\"></stream-icon>\n      </div>\n      <div class=\"rfu-thumbnail__wrapper\" style=\"width: 100; height: 100\">\n        <div class=\"rfu-thumbnail__overlay\">\n          <div\n            class=\"rfu-icon-button\"\n            data-testclass=\"delete-attachment\"\n            role=\"button\"\n            (click)=\"deleteAttachment(attachmentUpload)\"\n            (keyup.enter)=\"deleteAttachment(attachmentUpload)\"\n          >\n            <stream-icon icon=\"close\"></stream-icon>\n          </div>\n        </div>\n        <img\n          *ngIf=\"attachmentUpload.url || attachmentUpload.previewUri\"\n          src=\"{{\n            attachmentUpload.url\n              ? attachmentUpload.url\n              : attachmentUpload.previewUri\n          }}\"\n          alt=\"attachmentUpload.file.name\"\n          class=\"rfu-thumbnail__image\"\n          data-testclass=\"attachment-image\"\n        />\n      </div>\n      <stream-loading-indicator\n        data-testclass=\"loading-indicator\"\n        color=\"rgba(255,255,255,0.7)\"\n        *ngIf=\"attachmentUpload.state === 'uploading'\"\n      ></stream-loading-indicator>\n    </div>\n    <div\n      class=\"rfu-file-previewer\"\n      *ngIf=\"attachmentUpload.type === 'file'\"\n      data-testclass=\"attachment-file-preview\"\n    >\n      <ol>\n        <li\n          class=\"rfu-file-previewer__file\"\n          [class.rfu-file-previewer__file--uploading]=\"\n            attachmentUpload.state === 'uploading'\n          \"\n          [class.rfu-file-previewer__file--failed]=\"\n            attachmentUpload.state === 'error'\n          \"\n        >\n          <stream-icon icon=\"file\"></stream-icon>\n\n          <a\n            data-testclass=\"file-download-link\"\n            href=\"{{ attachmentUpload.url }}\"\n            (click)=\"attachmentUpload.url ? null : $event.preventDefault()\"\n            (keyup.enter)=\"\n              attachmentUpload.url ? null : $event.preventDefault()\n            \"\n            download\n          >\n            {{ attachmentUpload.file.name }}\n            <ng-container *ngIf=\"attachmentUpload.state === 'error'\">\n              <div\n                data-testclass=\"file-upload-retry\"\n                class=\"rfu-file-previewer__failed\"\n                (click)=\"retryAttachmentUpload(attachmentUpload.file)\"\n                (keyup.enter)=\"retryAttachmentUpload(attachmentUpload.file)\"\n                translate\n              >\n                streamChat.failed\n              </div>\n              <div\n                class=\"rfu-file-previewer__retry\"\n                (click)=\"retryAttachmentUpload(attachmentUpload.file)\"\n                (keyup.enter)=\"retryAttachmentUpload(attachmentUpload.file)\"\n                translate\n              >\n                streamChat.retry\n              </div>\n            </ng-container>\n          </a>\n\n          <span\n            data-testclass=\"file-delete\"\n            class=\"rfu-file-previewer__close-button\"\n            (click)=\"deleteAttachment(attachmentUpload)\"\n            (keyup.enter)=\"deleteAttachment(attachmentUpload)\"\n          >\n            \u2718\n          </span>\n          <div\n            *ngIf=\"attachmentUpload.state === 'uploading'\"\n            class=\"rfu-file-previewer__loading-indicator\"\n          >\n            <stream-loading-indicator></stream-loading-indicator>\n          </div>\n        </li>\n      </ol>\n    </div>\n  </ng-container>\n</div>\n", components: [{ type: IconComponent, selector: "stream-icon", inputs: ["icon", "size"] }, { type: LoadingIndicatorComponent, selector: "stream-loading-indicator", inputs: ["size", "color"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }], pipes: { "async": i6.AsyncPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: AttachmentPreviewListComponent, decorators: [{
             type: Component,
             args: [{
@@ -1265,6 +1519,7 @@ class MessageInputComponent {
         this.componentFactoryResolver = componentFactoryResolver;
         this.cdRef = cdRef;
         this.chatClient = chatClient;
+        this.mode = 'main';
         this.messageUpdate = new EventEmitter();
         this.textareaValue = '';
         this.mentionedUsers = [];
@@ -1285,14 +1540,19 @@ class MessageInputComponent {
                 this.isFileUploadAuthorized =
                     capabilities.indexOf('upload-file') !== -1;
                 this.canSendLinks = capabilities.indexOf('send-links') !== -1;
-                this.canSendMessages = capabilities.indexOf('send-message') !== -1;
-                if (this.isViewInited) {
-                    this.cdRef.detectChanges();
-                    this.initTextarea();
-                }
+                this.channel = channel;
+                this.setCanSendMessages();
             }
         }));
         this.subscriptions.push(this.chatClient.appSettings$.subscribe((appSettings) => (this.appSettings = appSettings)));
+        this.subscriptions.push(this.channelService.messageToQuote$.subscribe((m) => {
+            const isThreadReply = m && m.parent_id;
+            if ((this.mode === 'thread' && isThreadReply) ||
+                (this.mode === 'thread' && this.quotedMessage && !m) ||
+                (this.mode === 'main' && !isThreadReply)) {
+                this.quotedMessage = m;
+            }
+        }));
         this.attachmentUploads$ = this.attachmentService.attachmentUploads$;
         this.isFileUploadEnabled = this.configService.isFileUploadEnabled;
         this.acceptedFileTypes = this.configService.acceptedFileTypes;
@@ -1302,6 +1562,8 @@ class MessageInputComponent {
         this.mentionAutocompleteItemTemplate =
             this.configService.mentionAutocompleteItemTemplate;
         this.mentionScope = this.configService.mentionScope;
+        this.commandAutocompleteItemTemplate =
+            this.configService.commandAutocompleteItemTemplate;
     }
     ngAfterViewInit() {
         this.isViewInited = true;
@@ -1332,14 +1594,22 @@ class MessageInputComponent {
             this.configService.mentionAutocompleteItemTemplate =
                 this.mentionAutocompleteItemTemplate;
         }
+        if (changes.commandAutocompleteItemTemplate) {
+            this.configService.commandAutocompleteItemTemplate =
+                this.commandAutocompleteItemTemplate;
+        }
         if (changes.mentionScope) {
             this.configService.mentionScope = this.mentionScope;
         }
+        if (changes.mode) {
+            this.setCanSendMessages();
+        }
     }
     ngOnDestroy() {
         this.subscriptions.forEach((s) => s.unsubscribe());
     }
     messageSent() {
+        var _a;
         return __awaiter(this, void 0, void 0, function* () {
             let attachmentUploadInProgressCounter;
             this.attachmentService.attachmentUploadInProgressCounter$
@@ -1364,10 +1634,16 @@ class MessageInputComponent {
             if (!this.isUpdate) {
                 this.textareaValue = '';
             }
+            let parentMessageId = undefined;
+            if (this.mode === 'thread') {
+                this.channelService.activeParentMessageId$
+                    .pipe(first())
+                    .subscribe((id) => (parentMessageId = id));
+            }
             try {
                 yield (this.isUpdate
                     ? this.channelService.updateMessage(Object.assign(Object.assign({}, this.message), { text: text, attachments: attachments }))
-                    : this.channelService.sendMessage(text, attachments, this.mentionedUsers));
+                    : this.channelService.sendMessage(text, attachments, this.mentionedUsers, parentMessageId, (_a = this.quotedMessage) === null || _a === void 0 ? void 0 : _a.id));
                 this.messageUpdate.emit();
                 if (!this.isUpdate) {
                     this.attachmentService.resetAttachmentUploads();
@@ -1378,6 +1654,9 @@ class MessageInputComponent {
                     this.notificationService.addTemporaryNotification('streamChat.Edit message request failed');
                 }
             }
+            if (this.quotedMessage) {
+                this.deselectMessageToQuote();
+            }
         });
     }
     get containsLinks() {
@@ -1387,6 +1666,13 @@ class MessageInputComponent {
         var _a;
         return this.acceptedFileTypes ? (_a = this.acceptedFileTypes) === null || _a === void 0 ? void 0 : _a.join(',') : '';
     }
+    get quotedMessageAttachments() {
+        var _a;
+        const originalAttachments = (_a = this.quotedMessage) === null || _a === void 0 ? void 0 : _a.attachments;
+        return originalAttachments && originalAttachments.length
+            ? [originalAttachments[0]]
+            : [];
+    }
     filesSelected(fileList) {
         return __awaiter(this, void 0, void 0, function* () {
             if (!(yield this.areAttachemntsValid(fileList))) {
@@ -1396,6 +1682,9 @@ class MessageInputComponent {
             this.clearFileInput();
         });
     }
+    deselectMessageToQuote() {
+        this.channelService.selectMessageToQuote(undefined);
+    }
     clearFileInput() {
         this.fileInput.nativeElement.value = '';
     }
@@ -1461,9 +1750,24 @@ class MessageInputComponent {
             return isValid;
         });
     }
+    setCanSendMessages() {
+        var _a, _b;
+        const capabilities = (_b = (_a = this.channel) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.own_capabilities;
+        if (!capabilities) {
+            this.canSendMessages = false;
+        }
+        else {
+            this.canSendMessages =
+                capabilities.indexOf(this.mode === 'main' ? 'send-message' : 'send-reply') !== -1;
+        }
+        if (this.isViewInited) {
+            this.cdRef.detectChanges();
+            this.initTextarea();
+        }
+    }
 }
 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 }], 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", mentionAutocompleteItemTemplate: "mentionAutocompleteItemTemplate", acceptedFileTypes: "acceptedFileTypes", isMultipleFileUploadEnabled: "isMultipleFileUploadEnabled", message: "message" }, outputs: { messageUpdate: "messageUpdate" }, providers: [AttachmentService], viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }, { propertyName: "textareaAnchor", first: true, predicate: TextareaDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"str-chat__input-flat\"\n  [class.str-chat__input-flat-has-attachments]=\"\n    (attachmentUploads$ | async)!.length > 0\n  \"\n>\n  <div class=\"str-chat__input-flat-wrapper\">\n    <div class=\"str-chat__input-flat--textarea-wrapper\">\n      <stream-attachment-preview-list\n        class=\"rfu-image-previewer-angular-host\"\n      ></stream-attachment-preview-list>\n      <div class=\"rta str-chat__textarea\">\n        <ng-template\n          *ngIf=\"canSendMessages; else notAllowed\"\n          streamTextarea\n          [(value)]=\"textareaValue\"\n          (send)=\"messageSent()\"\n          [componentRef]=\"textareaRef\"\n          (userMentions)=\"mentionedUsers = $event\"\n          [areMentionsEnabled]=\"areMentionsEnabled\"\n          [mentionAutocompleteItemTemplate]=\"mentionAutocompleteItemTemplate\"\n          [mentionScope]=\"mentionScope\"\n        ></ng-template>\n        <ng-template #notAllowed>\n          <textarea\n            disabled\n            rows=\"1\"\n            [value]=\"\n              'streamChat.You can\\'t send messages in this channel' | translate\n            \"\n            class=\"rta__textarea str-chat__textarea__textarea\"\n          ></textarea>\n        </ng-template>\n      </div>\n      <div\n        *ngIf=\"isFileUploadEnabled && isFileUploadAuthorized && canSendMessages\"\n        class=\"str-chat__fileupload-wrapper\"\n        data-testid=\"file-upload-button\"\n      >\n        <div class=\"str-chat__tooltip\">\n          {{ \"streamChat.Attach files\" | translate }}\n        </div>\n        <div class=\"rfu-file-upload-button\">\n          <label>\n            <input\n              #fileInput\n              type=\"file\"\n              class=\"rfu-file-input\"\n              data-testid=\"file-input\"\n              [accept]=\"accept\"\n              [multiple]=\"isMultipleFileUploadEnabled\"\n              (change)=\"filesSelected(fileInput.files)\"\n            />\n            <span class=\"str-chat__input-flat-fileupload\">\n              <stream-icon icon=\"file-upload\"></stream-icon>\n            </span>\n          </label>\n        </div>\n      </div>\n    </div>\n    <button\n      *ngIf=\"canSendMessages\"\n      data-testid=\"send-button\"\n      class=\"str-chat__send-button\"\n      (click)=\"messageSent()\"\n      (keyup.enter)=\"messageSent()\"\n    >\n      <stream-icon icon=\"send\"></stream-icon>\n    </button>\n  </div>\n</div>\n", components: [{ type: AttachmentPreviewListComponent, selector: "stream-attachment-preview-list" }, { type: IconComponent, selector: "stream-icon", inputs: ["icon", "size"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: TextareaDirective, selector: "[streamTextarea]", inputs: ["componentRef", "areMentionsEnabled", "mentionAutocompleteItemTemplate", "mentionScope", "value"], outputs: ["valueChange", "send", "userMentions"] }], pipes: { "async": i3.AsyncPipe, "translate": i10.TranslatePipe } });
+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", mentionAutocompleteItemTemplate: "mentionAutocompleteItemTemplate", commandAutocompleteItemTemplate: "commandAutocompleteItemTemplate", mode: "mode", acceptedFileTypes: "acceptedFileTypes", isMultipleFileUploadEnabled: "isMultipleFileUploadEnabled", message: "message" }, outputs: { messageUpdate: "messageUpdate" }, providers: [AttachmentService], viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }, { propertyName: "textareaAnchor", first: true, predicate: TextareaDirective, descendants: true }], 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\n          icon=\"close-no-outline\"\n          style=\"font-size: 10px; line-height: 10px\"\n        ></stream-icon>\n      </button>\n    </div>\n    <div class=\"quoted-message-preview-content\">\n      <stream-avatar\n        data-testid=\"qouted-message-avatar\"\n        class=\"str-chat-angular__avatar-host\"\n        [imageUrl]=\"quotedMessage?.user?.image\"\n        [name]=\"quotedMessage?.user?.name || quotedMessage?.user?.id\"\n        [size]=\"20\"\n      ></stream-avatar>\n      <div class=\"quoted-message-preview-content-inner\">\n        <stream-attachment-list\n          *ngIf=\"\n            quotedMessage?.attachments && quotedMessage?.attachments?.length\n          \"\n          [attachments]=\"quotedMessageAttachments\"\n          [messageId]=\"quotedMessage?.id\"\n        ></stream-attachment-list>\n        <div\n          data-testid=\"quoted-message-text\"\n          [innerHTML]=\"quotedMessage?.html || quotedMessage?.text\"\n        ></div>\n      </div>\n    </div>\n  </div>\n  <div class=\"str-chat__input-flat-wrapper\" style=\"width: 100%\">\n    <div\n      class=\"{{\n        mode === 'main'\n          ? 'str-chat__input-flat--textarea-wrapper'\n          : 'str-chat__small-message-input--textarea-wrapper'\n      }}\"\n    >\n      <stream-attachment-preview-list\n        class=\"rfu-image-previewer-angular-host\"\n      ></stream-attachment-preview-list>\n      <div class=\"rta str-chat__textarea\">\n        <ng-template\n          *ngIf=\"canSendMessages; else notAllowed\"\n          streamTextarea\n          [(value)]=\"textareaValue\"\n          (send)=\"messageSent()\"\n          [componentRef]=\"textareaRef\"\n          (userMentions)=\"mentionedUsers = $event\"\n          [areMentionsEnabled]=\"areMentionsEnabled\"\n          [mentionAutocompleteItemTemplate]=\"mentionAutocompleteItemTemplate\"\n          [commandAutocompleteItemTemplate]=\"commandAutocompleteItemTemplate\"\n          [mentionScope]=\"mentionScope\"\n        ></ng-template>\n        <ng-template #notAllowed>\n          <textarea\n            disabled\n            rows=\"1\"\n            [value]=\"\n              (mode === 'thread'\n                ? 'You can\\'t send thread replies in this channel'\n                : 'streamChat.You can\\'t send messages in this channel'\n              ) | translate\n            \"\n            class=\"rta__textarea str-chat__textarea__textarea\"\n          ></textarea>\n        </ng-template>\n      </div>\n      <div\n        *ngIf=\"isFileUploadEnabled && isFileUploadAuthorized && canSendMessages\"\n        class=\"str-chat__fileupload-wrapper\"\n        data-testid=\"file-upload-button\"\n      >\n        <div class=\"str-chat__tooltip\">\n          {{ \"streamChat.Attach files\" | translate }}\n        </div>\n        <div class=\"rfu-file-upload-button\">\n          <label>\n            <input\n              #fileInput\n              type=\"file\"\n              class=\"rfu-file-input\"\n              data-testid=\"file-input\"\n              [accept]=\"accept\"\n              [multiple]=\"isMultipleFileUploadEnabled\"\n              (change)=\"filesSelected(fileInput.files)\"\n            />\n            <span class=\"str-chat__input-flat-fileupload\">\n              <stream-icon icon=\"file-upload\"></stream-icon>\n            </span>\n          </label>\n        </div>\n      </div>\n    </div>\n    <button\n      *ngIf=\"canSendMessages\"\n      data-testid=\"send-button\"\n      class=\"str-chat__send-button\"\n      (click)=\"messageSent()\"\n      (keyup.enter)=\"messageSent()\"\n    >\n      <stream-icon icon=\"send\"></stream-icon>\n    </button>\n  </div>\n</div>\n", components: [{ type: IconComponent, selector: "stream-icon", inputs: ["icon", "size"] }, { type: AvatarComponent, selector: "stream-avatar", inputs: ["name", "imageUrl", "size"] }, { type: AttachmentListComponent, selector: "stream-attachment-list", inputs: ["messageId", "attachments"] }, { type: AttachmentPreviewListComponent, selector: "stream-attachment-preview-list" }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: TextareaDirective, selector: "[streamTextarea]", inputs: ["componentRef", "areMentionsEnabled", "mentionAutocompleteItemTemplate", "mentionScope", "commandAutocompleteItemTemplate", "value"], outputs: ["valueChange", "send", "userMentions"] }], pipes: { "async": i6.AsyncPipe, "translate": i1.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: MessageInputComponent, decorators: [{
             type: Component,
             args: [{
@@ -1483,6 +1787,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImpor
                 type: Input
             }], mentionAutocompleteItemTemplate: [{
                 type: Input
+            }], commandAutocompleteItemTemplate: [{
+                type: Input
+            }], mode: [{
+                type: Input
             }], acceptedFileTypes: [{
                 type: Input
             }], isMultipleFileUploadEnabled: [{
@@ -1541,7 +1849,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" }, outputs: { isOpenChange: "isOpenChange" }, viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], 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 icon=\"close\"></stream-icon>\n  </div>\n  <div class=\"str-chat__modal__inner\" #content>\n    <ng-content></ng-content>\n  </div>\n</div>\n", components: [{ type: IconComponent, selector: "stream-icon", inputs: ["icon", "size"] }], directives: [{ type: i10.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }] });
+ModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: ModalComponent, selector: "stream-modal", inputs: { isOpen: "isOpen" }, outputs: { isOpenChange: "isOpenChange" }, viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  data-testid=\"modal\"\n  class=\"str-chat__modal str-chat__modal--{{ isOpen ? 'open' : 'close' }}\"\n>\n  <div\n    data-testid=\"close\"\n    class=\"str-chat__modal__close-button\"\n    (click)=\"close()\"\n    (keyup.enter)=\"close()\"\n    translate\n  >\n    streamChat.Close\n    <stream-icon icon=\"close\"></stream-icon>\n  </div>\n  <div class=\"str-chat__modal__inner\" #content>\n    <ng-content></ng-content>\n  </div>\n</div>\n", components: [{ type: IconComponent, selector: "stream-icon", inputs: ["icon", "size"] }], directives: [{ type: i1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: ModalComponent, decorators: [{
             type: Component,
             args: [{
@@ -1584,7 +1892,7 @@ class NotificationListComponent {
     }
 }
 NotificationListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: NotificationListComponent, deps: [{ 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  <stream-notification\n    *ngFor=\"let notification of notifications$ | async; trackBy: trackByItem\"\n    [type]=\"notification.type\"\n    ><div data-testclass=\"notification-content\">\n      {{ notification.text | translate: notification.translateParams }}\n    </div></stream-notification\n  >\n</div>\n", components: [{ type: NotificationComponent, selector: "stream-notification", inputs: ["type"] }], directives: [{ type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i3.AsyncPipe, "translate": i10.TranslatePipe } });
+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  <stream-notification\n    *ngFor=\"let notification of notifications$ | async; trackBy: trackByItem\"\n    [type]=\"notification.type\"\n    ><div data-testclass=\"notification-content\">\n      {{ notification.text | translate: notification.translateParams }}\n    </div></stream-notification\n  >\n</div>\n", components: [{ type: NotificationComponent, selector: "stream-notification", inputs: ["type"] }], directives: [{ type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i6.AsyncPipe, "translate": i1.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: NotificationListComponent, decorators: [{
             type: Component,
             args: [{
@@ -1635,21 +1943,32 @@ class MessageActionsBoxComponent {
         }
     }
     get isQuoteVisible() {
-        return this.enabledActions.indexOf('quote') !== -1;
+        var _a;
+        return ((this.enabledActions.indexOf('quote') !== -1 ||
+            this.enabledActions.indexOf('quote-message') !== -1) &&
+            !((_a = this.message) === null || _a === void 0 ? void 0 : _a.quoted_message));
     }
     get isEditVisible() {
-        return ((this.enabledActions.indexOf('edit') !== -1 && this.isMine) ||
-            this.enabledActions.indexOf('edit-any') !== -1);
+        return (((this.enabledActions.indexOf('edit') !== -1 ||
+            this.enabledActions.indexOf('update-own-message') !== -1) &&
+            this.isMine) ||
+            this.enabledActions.indexOf('edit-any') !== -1 ||
+            this.enabledActions.indexOf('update-any-message') !== -1);
     }
     get isDeleteVisible() {
-        return ((this.enabledActions.indexOf('delete') !== -1 && this.isMine) ||
-            this.enabledActions.indexOf('delete-any') !== -1);
+        return (((this.enabledActions.indexOf('delete') !== -1 ||
+            this.enabledActions.indexOf('delete-own-message') !== -1) &&
+            this.isMine) ||
+            this.enabledActions.indexOf('delete-any') !== -1 ||
+            this.enabledActions.indexOf('delete-any-message') !== -1);
     }
     get isMuteVisible() {
         return this.enabledActions.indexOf('mute') !== -1;
     }
     get isFlagVisible() {
-        return this.enabledActions.indexOf('flag') !== -1 && !this.isMine;
+        return ((this.enabledActions.indexOf('flag') !== -1 ||
+            this.enabledActions.indexOf('flag-message') !== -1) &&
+            !this.isMine);
     }
     get isPinVisible() {
         return this.enabledActions.indexOf('pin') !== -1;
@@ -1672,7 +1991,7 @@ class MessageActionsBoxComponent {
         alert('Feature not yet implemented');
     }
     quoteClicked() {
-        alert('Feature not yet implemented');
+        this.channelService.selectMessageToQuote(this.message);
     }
     editClicked() {
         this.isEditing.emit(true);
@@ -1694,7 +2013,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 }], target: i0.ɵɵFactoryTarget.Component });
-MessageActionsBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: MessageActionsBoxComponent, selector: "stream-message-actions-box", inputs: { messageInputTemplate: "messageInputTemplate", isOpen: "isOpen", isMine: "isMine", message: "message", enabledActions: "enabledActions" }, outputs: { displayedActionsCount: "displayedActionsCount", isEditing: "isEditing" }, viewQueries: [{ propertyName: "messageInput", first: true, predicate: MessageInputComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  data-testid=\"action-box\"\n  class=\"str-chat__message-actions-box\"\n  [class.str-chat__message-actions-box--open]=\"isOpen\"\n  [class.str-chat__message-actions-box--mine]=\"isMine\"\n>\n  <ul class=\"str-chat__message-actions-list\">\n    <button\n      data-testid=\"quote-action\"\n      *ngIf=\"isQuoteVisible\"\n      (click)=\"quoteClicked()\"\n    >\n      <li class=\"str-chat__message-actions-list-item\">\n        {{ \"streamChat.Reply\" | translate }}\n      </li>\n    </button>\n    <button\n      data-testid=\"pin-action\"\n      *ngIf=\"isPinVisible\"\n      (click)=\"pinClicked()\"\n    >\n      <li class=\"str-chat__message-actions-list-item\">\n        {{\n          (message?.pinned ? \"streamChat.Unpin\" : \"streamChat.Pin\") | translate\n        }}\n      </li>\n    </button>\n    <button\n      data-testid=\"flag-action\"\n      *ngIf=\"isFlagVisible\"\n      (click)=\"flagClicked()\"\n    >\n      <li class=\"str-chat__message-actions-list-item\">\n        {{ \"streamChat.Flag\" | translate }}\n      </li>\n    </button>\n    <button\n      data-testid=\"mute-action\"\n      *ngIf=\"isMuteVisible\"\n      (click)=\"muteClicked()\"\n    >\n      <li class=\"str-chat__message-actions-list-item\">\n        {{ \"streamChat.Mute\" | translate }}\n      </li>\n    </button>\n    <button\n      data-testid=\"edit-action\"\n      *ngIf=\"isEditVisible\"\n      (click)=\"editClicked()\"\n    >\n      <li class=\"str-chat__message-actions-list-item\">\n        {{ \"streamChat.Edit Message\" | translate }}\n      </li>\n    </button>\n    <button\n      data-testid=\"delete-action\"\n      *ngIf=\"isDeleteVisible\"\n      (click)=\"deleteClicked()\"\n    >\n      <li class=\"str-chat__message-actions-list-item\">\n        {{ \"streamChat.Delete\" | translate }}\n      </li>\n    </button>\n  </ul>\n</div>\n\n<stream-modal\n  [isOpen]=\"isEditModalOpen\"\n  (isOpenChange)=\"\n    isEditModalOpen = $event; isEditModalOpen ? '' : modalClosed()\n  \"\n>\n  <div class=\"str-chat__edit-message-form\" *ngIf=\"isEditModalOpen\">\n    <ng-container *ngIf=\"messageInputTemplate; else defaultInput\">\n      <ng-container\n        *ngTemplateOutlet=\"\n          messageInputTemplate;\n          context: {\n            message: message,\n            messageUpdateHandler: modalClosed\n          }\n        \"\n      ></ng-container>\n    </ng-container>\n    <ng-template #defaultInput>\n      <stream-message-input\n        [message]=\"message\"\n        (messageUpdate)=\"modalClosed()\"\n      ></stream-message-input>\n    </ng-template>\n    <stream-notification-list></stream-notification-list>\n    <div\n      class=\"\n        str-chat__message-team-form-footer\n        str-chat__message-team-form-footer-angular\n      \"\n    >\n      <div class=\"str-chat__edit-message-form-options\">\n        <button translate data-testid=\"cancel-button\" (click)=\"modalClosed()\">\n          streamChat.Cancel\n        </button>\n        <button\n          type=\"submit\"\n          translate\n          data-testid=\"send-button\"\n          (click)=\"sendClicked()\"\n          (keyup.enter)=\"sendClicked()\"\n        >\n          streamChat.Send\n        </button>\n      </div>\n    </div>\n  </div>\n</stream-modal>\n", components: [{ type: ModalComponent, selector: "stream-modal", inputs: ["isOpen"], outputs: ["isOpenChange"] }, { type: MessageInputComponent, selector: "stream-message-input", inputs: ["isFileUploadEnabled", "areMentionsEnabled", "mentionScope", "mentionAutocompleteItemTemplate", "acceptedFileTypes", "isMultipleFileUploadEnabled", "message"], outputs: ["messageUpdate"] }, { type: NotificationListComponent, selector: "stream-notification-list" }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i10.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }], pipes: { "translate": i10.TranslatePipe } });
+MessageActionsBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: MessageActionsBoxComponent, selector: "stream-message-actions-box", inputs: { messageInputTemplate: "messageInputTemplate", isOpen: "isOpen", isMine: "isMine", message: "message", enabledActions: "enabledActions" }, outputs: { displayedActionsCount: "displayedActionsCount", isEditing: "isEditing" }, viewQueries: [{ propertyName: "messageInput", first: true, predicate: MessageInputComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  data-testid=\"action-box\"\n  class=\"str-chat__message-actions-box\"\n  [class.str-chat__message-actions-box--open]=\"isOpen\"\n  [class.str-chat__message-actions-box--mine]=\"isMine\"\n>\n  <ul class=\"str-chat__message-actions-list\">\n    <button\n      data-testid=\"quote-action\"\n      *ngIf=\"isQuoteVisible\"\n      (click)=\"quoteClicked()\"\n    >\n      <li class=\"str-chat__message-actions-list-item\">\n        {{ \"streamChat.Reply\" | translate }}\n      </li>\n    </button>\n    <button\n      data-testid=\"pin-action\"\n      *ngIf=\"isPinVisible\"\n      (click)=\"pinClicked()\"\n    >\n      <li class=\"str-chat__message-actions-list-item\">\n        {{\n          (message?.pinned ? \"streamChat.Unpin\" : \"streamChat.Pin\") | translate\n        }}\n      </li>\n    </button>\n    <button\n      data-testid=\"flag-action\"\n      *ngIf=\"isFlagVisible\"\n      (click)=\"flagClicked()\"\n    >\n      <li class=\"str-chat__message-actions-list-item\">\n        {{ \"streamChat.Flag\" | translate }}\n      </li>\n    </button>\n    <button\n      data-testid=\"mute-action\"\n      *ngIf=\"isMuteVisible\"\n      (click)=\"muteClicked()\"\n    >\n      <li class=\"str-chat__message-actions-list-item\">\n        {{ \"streamChat.Mute\" | translate }}\n      </li>\n    </button>\n    <button\n      data-testid=\"edit-action\"\n      *ngIf=\"isEditVisible\"\n      (click)=\"editClicked()\"\n    >\n      <li class=\"str-chat__message-actions-list-item\">\n        {{ \"streamChat.Edit Message\" | translate }}\n      </li>\n    </button>\n    <button\n      data-testid=\"delete-action\"\n      *ngIf=\"isDeleteVisible\"\n      (click)=\"deleteClicked()\"\n    >\n      <li class=\"str-chat__message-actions-list-item\">\n        {{ \"streamChat.Delete\" | translate }}\n      </li>\n    </button>\n  </ul>\n</div>\n\n<stream-modal\n  [isOpen]=\"isEditModalOpen\"\n  (isOpenChange)=\"\n    isEditModalOpen = $event; isEditModalOpen ? '' : modalClosed()\n  \"\n>\n  <div class=\"str-chat__edit-message-form\" *ngIf=\"isEditModalOpen\">\n    <ng-container *ngIf=\"messageInputTemplate; else defaultInput\">\n      <ng-container\n        *ngTemplateOutlet=\"\n          messageInputTemplate;\n          context: {\n            message: message,\n            messageUpdateHandler: modalClosed\n          }\n        \"\n      ></ng-container>\n    </ng-container>\n    <ng-template #defaultInput>\n      <stream-message-input\n        [message]=\"message\"\n        (messageUpdate)=\"modalClosed()\"\n      ></stream-message-input>\n    </ng-template>\n    <stream-notification-list></stream-notification-list>\n    <div\n      class=\"\n        str-chat__message-team-form-footer\n        str-chat__message-team-form-footer-angular\n      \"\n    >\n      <div class=\"str-chat__edit-message-form-options\">\n        <button translate data-testid=\"cancel-button\" (click)=\"modalClosed()\">\n          streamChat.Cancel\n        </button>\n        <button\n          type=\"submit\"\n          translate\n          data-testid=\"send-button\"\n          (click)=\"sendClicked()\"\n          (keyup.enter)=\"sendClicked()\"\n        >\n          streamChat.Send\n        </button>\n      </div>\n    </div>\n  </div>\n</stream-modal>\n", components: [{ type: ModalComponent, selector: "stream-modal", inputs: ["isOpen"], outputs: ["isOpenChange"] }, { type: MessageInputComponent, selector: "stream-message-input", inputs: ["isFileUploadEnabled", "areMentionsEnabled", "mentionScope", "mentionAutocompleteItemTemplate", "commandAutocompleteItemTemplate", "mode", "acceptedFileTypes", "isMultipleFileUploadEnabled", "message"], outputs: ["messageUpdate"] }, { type: NotificationListComponent, selector: "stream-notification-list" }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }], pipes: { "translate": i1.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: MessageActionsBoxComponent, decorators: [{
             type: Component,
             args: [{
@@ -1727,10 +2046,11 @@ class ChannelComponent {
         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));
     }
 }
 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  </div>\n</div>\n", directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i3.AsyncPipe } });
+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: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i6.AsyncPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: ChannelComponent, decorators: [{
             type: Component,
             args: [{
@@ -1830,7 +2150,7 @@ class ChannelHeaderComponent {
     }
 }
 ChannelHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: ChannelHeaderComponent, deps: [{ token: ChannelService }, { token: ChannelListToggleService }], 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    <span class=\"str-chat__header-hamburger--line\"></span>\n    <span class=\"str-chat__header-hamburger--line\"></span>\n    <span class=\"str-chat__header-hamburger--line\"></span>\n  </div>\n  <stream-avatar\n    imageUrl=\"{{ activeChannel?.data?.image }}\"\n    name=\"{{ activeChannel?.data?.name }}\"\n  ></stream-avatar>\n  <div class=\"str-chat__header-livestream-left\">\n    <p data-testid=\"name\" class=\"str-chat__header-livestream-left--title\">\n      {{ activeChannel?.data?.name }}\n    </p>\n    <p data-testid=\"info\" class=\"str-chat__header-livestream-left--members\">\n      {{'streamChat.{{ memberCount }} members' | translate:memberCountParam}}\n      {{canReceiveConnectEvents ? ('streamChat.{{ watcherCount }} online' |\n      translate:watcherCountParam) : ''}}\n    </p>\n  </div>\n</div>\n", components: [{ type: AvatarComponent, selector: "stream-avatar", inputs: ["name", "imageUrl", "size"] }], pipes: { "translate": i10.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\">\n  <div\n    class=\"str-chat__header-hamburger\"\n    (click)=\"toggleMenu($event)\"\n    (keyup.enter)=\"toggleMenu($event)\"\n  >\n    <span class=\"str-chat__header-hamburger--line\"></span>\n    <span class=\"str-chat__header-hamburger--line\"></span>\n    <span class=\"str-chat__header-hamburger--line\"></span>\n  </div>\n  <stream-avatar\n    imageUrl=\"{{ activeChannel?.data?.image }}\"\n    name=\"{{ activeChannel?.data?.name }}\"\n  ></stream-avatar>\n  <div class=\"str-chat__header-livestream-left\">\n    <p data-testid=\"name\" class=\"str-chat__header-livestream-left--title\">\n      {{ activeChannel?.data?.name }}\n    </p>\n    <p data-testid=\"info\" class=\"str-chat__header-livestream-left--members\">\n      {{'streamChat.{{ memberCount }} members' | translate:memberCountParam}}\n      {{canReceiveConnectEvents ? ('streamChat.{{ watcherCount }} online' |\n      translate:watcherCountParam) : ''}}\n    </p>\n  </div>\n</div>\n", components: [{ type: AvatarComponent, selector: "stream-avatar", inputs: ["name", "imageUrl", "size"] }], pipes: { "translate": i1.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: ChannelHeaderComponent, decorators: [{
             type: Component,
             args: [{
@@ -1915,7 +2235,7 @@ class ChannelPreviewComponent {
     }
 }
 ChannelPreviewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: ChannelPreviewComponent, deps: [{ token: ChannelService }, { token: i0.NgZone }], 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\n      imageUrl=\"{{ avatarImage }}\"\n      name=\"{{ avatarName }}\"\n      [size]=\"40\"\n    ></stream-avatar>\n  </div>\n  <div class=\"str-chat__channel-preview-messenger--right\">\n    <div class=\"str-chat__channel-preview-messenger--name\">\n      <span data-testid=\"channel-preview-title\">{{ title }}</span>\n    </div>\n    <div\n      data-testid=\"latest-message\"\n      class=\"str-chat__channel-preview-messenger--last-message\"\n    >\n      {{ latestMessage | translate }}\n    </div>\n  </div>\n</button>\n", components: [{ type: AvatarComponent, selector: "stream-avatar", inputs: ["name", "imageUrl", "size"] }], pipes: { "translate": i10.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\"\n  [class.str-chat__channel-preview-messenger--active]=\"isActive\"\n  [class.str-chat__channel-preview-messenger--unread]=\"isUnread\"\n  (click)=\"setAsActiveChannel()\"\n  data-testid=\"channel-preview-container\"\n>\n  <div class=\"str-chat__channel-preview-messenger--left\">\n    <stream-avatar\n      imageUrl=\"{{ avatarImage }}\"\n      name=\"{{ avatarName }}\"\n      [size]=\"40\"\n    ></stream-avatar>\n  </div>\n  <div class=\"str-chat__channel-preview-messenger--right\">\n    <div class=\"str-chat__channel-preview-messenger--name\">\n      <span data-testid=\"channel-preview-title\">{{ title }}</span>\n    </div>\n    <div\n      data-testid=\"latest-message\"\n      class=\"str-chat__channel-preview-messenger--last-message\"\n    >\n      {{ latestMessage | translate }}\n    </div>\n  </div>\n</button>\n", components: [{ type: AvatarComponent, selector: "stream-avatar", inputs: ["name", "imageUrl", "size"] }], pipes: { "translate": i1.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: ChannelPreviewComponent, decorators: [{
             type: Component,
             args: [{
@@ -1956,7 +2276,7 @@ class ChannelListComponent {
     }
 }
 ChannelListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: ChannelListComponent, deps: [{ token: ChannelService }, { token: ChannelListToggleService }], target: i0.ɵɵFactoryTarget.Component });
-ChannelListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: ChannelListComponent, selector: "stream-channel-list", inputs: { customChannelPreviewTemplate: "customChannelPreviewTemplate" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], ngImport: i0, template: "<div\n  #container\n  data-testid=\"channel-list-container\"\n  class=\"str-chat str-chat-channel-list messaging\"\n  [class.str-chat-channel-list--open]=\"(isOpen$ | async) === true\"\n>\n  <div\n    *ngIf=\"\n      (isError$ | async) === false && (isInitializing$ | async) === false;\n      else statusIndicator\n    \"\n    class=\"str-chat__channel-list-messenger\"\n  >\n    <div class=\"str-chat__channel-list-messenger__main\">\n      <p\n        data-testid=\"empty-channel-list-indicator\"\n        *ngIf=\"!(channels$ | async)?.length\"\n      >\n        {{ \"streamChat.You have no channels currently\" | translate }}\n      </p>\n      <ng-container\n        *ngFor=\"let channel of channels$ | async; trackBy: trackByChannelId\"\n      >\n        <ng-container\n          *ngIf=\"customChannelPreviewTemplate; else defaultTemplate\"\n        >\n          <div (click)=\"channelSelected()\" (keyup.enter)=\"channelSelected()\">\n            <ng-container\n              *ngTemplateOutlet=\"\n                customChannelPreviewTemplate;\n                context: { channel: channel }\n              \"\n            ></ng-container>\n          </div>\n        </ng-container>\n        <ng-template #defaultTemplate>\n          <stream-channel-preview\n            data-testclass=\"channel-preview\"\n            [channel]=\"channel\"\n            (click)=\"channelSelected()\"\n            (keyup.enter)=\"channelSelected()\"\n          ></stream-channel-preview>\n        </ng-template>\n      </ng-container>\n      <div\n        *ngIf=\"hasMoreChannels$ | async\"\n        class=\"str-chat__load-more-button\"\n        (click)=\"loadMoreChannels()\"\n        (keyup.enter)=\"loadMoreChannels()\"\n        data-testid=\"load-more\"\n      >\n        <button\n          class=\"str-chat__load-more-button__button\"\n          data-testid=\"load-more-button\"\n          [disabled]=\"isLoadingMoreChannels\"\n        >\n          <span *ngIf=\"!isLoadingMoreChannels; else loadingIndicator\">{{\n            \"Load more\" | translate\n          }}</span>\n          <ng-template #loadingIndicator\n            ><stream-loading-indicator></stream-loading-indicator\n          ></ng-template>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n\n<ng-template #statusIndicator>\n  <ng-container *ngIf=\"isError$ | async\">\n    <ng-container *ngTemplateOutlet=\"chatDown\"></ng-container>\n  </ng-container>\n  <ng-container *ngIf=\"isInitializing$ | async\">\n    <ng-container *ngTemplateOutlet=\"loadingChannels\"></ng-container>\n  </ng-container>\n</ng-template>\n\n<ng-template #chatDown>\n  <div data-testid=\"chatdown-container\" class=\"str-chat__down\">\n    <ng-container *ngTemplateOutlet=\"loadingChannels\"></ng-container>\n    <div class=\"str-chat__down-main\">\n      <stream-icon icon=\"connection-error\"></stream-icon>\n      <h1>{{ \"streamChat.Connection error\" | translate }}</h1>\n      <h3>\n        {{\n          \"streamChat.Error connecting to chat, refresh the page to try again.\"\n            | translate\n        }}\n      </h3>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #loadingChannels>\n  <div data-testid=\"loading-indicator\" class=\"str-chat__loading-channels\">\n    <ng-container *ngTemplateOutlet=\"loadingChannel\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"loadingChannel\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"loadingChannel\"></ng-container>\n  </div>\n</ng-template>\n\n<ng-template #loadingChannel>\n  <div class=\"str-chat__loading-channels-item\">\n    <div class=\"str-chat__loading-channels-avatar\"></div>\n    <div class=\"str-chat__loading-channels-meta\">\n      <div class=\"str-chat__loading-channels-username\"></div>\n      <div class=\"str-chat__loading-channels-status\"></div>\n    </div>\n  </div>\n</ng-template>\n", components: [{ type: ChannelPreviewComponent, selector: "stream-channel-preview", inputs: ["channel"] }, { type: LoadingIndicatorComponent, selector: "stream-loading-indicator", inputs: ["size", "color"] }, { type: IconComponent, selector: "stream-icon", inputs: ["icon", "size"] }], directives: [{ type: 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": i10.TranslatePipe } });
+ChannelListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: ChannelListComponent, selector: "stream-channel-list", inputs: { customChannelPreviewTemplate: "customChannelPreviewTemplate" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], ngImport: i0, template: "<div\n  #container\n  data-testid=\"channel-list-container\"\n  class=\"str-chat str-chat-channel-list messaging\"\n  [class.str-chat-channel-list--open]=\"(isOpen$ | async) === true\"\n>\n  <div\n    *ngIf=\"\n      (isError$ | async) === false && (isInitializing$ | async) === false;\n      else statusIndicator\n    \"\n    class=\"str-chat__channel-list-messenger\"\n  >\n    <div class=\"str-chat__channel-list-messenger__main\">\n      <p\n        data-testid=\"empty-channel-list-indicator\"\n        *ngIf=\"!(channels$ | async)?.length\"\n      >\n        {{ \"streamChat.You have no channels currently\" | translate }}\n      </p>\n      <ng-container\n        *ngFor=\"let channel of channels$ | async; trackBy: trackByChannelId\"\n      >\n        <ng-container\n          *ngIf=\"customChannelPreviewTemplate; else defaultTemplate\"\n        >\n          <div (click)=\"channelSelected()\" (keyup.enter)=\"channelSelected()\">\n            <ng-container\n              *ngTemplateOutlet=\"\n                customChannelPreviewTemplate;\n                context: { channel: channel }\n              \"\n            ></ng-container>\n          </div>\n        </ng-container>\n        <ng-template #defaultTemplate>\n          <stream-channel-preview\n            data-testclass=\"channel-preview\"\n            [channel]=\"channel\"\n            (click)=\"channelSelected()\"\n            (keyup.enter)=\"channelSelected()\"\n          ></stream-channel-preview>\n        </ng-template>\n      </ng-container>\n      <div\n        *ngIf=\"hasMoreChannels$ | async\"\n        class=\"str-chat__load-more-button\"\n        (click)=\"loadMoreChannels()\"\n        (keyup.enter)=\"loadMoreChannels()\"\n        data-testid=\"load-more\"\n      >\n        <button\n          class=\"str-chat__load-more-button__button\"\n          data-testid=\"load-more-button\"\n          [disabled]=\"isLoadingMoreChannels\"\n        >\n          <span *ngIf=\"!isLoadingMoreChannels; else loadingIndicator\">{{\n            \"Load more\" | translate\n          }}</span>\n          <ng-template #loadingIndicator\n            ><stream-loading-indicator></stream-loading-indicator\n          ></ng-template>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n\n<ng-template #statusIndicator>\n  <ng-container *ngIf=\"isError$ | async\">\n    <ng-container *ngTemplateOutlet=\"chatDown\"></ng-container>\n  </ng-container>\n  <ng-container *ngIf=\"isInitializing$ | async\">\n    <ng-container *ngTemplateOutlet=\"loadingChannels\"></ng-container>\n  </ng-container>\n</ng-template>\n\n<ng-template #chatDown>\n  <div data-testid=\"chatdown-container\" class=\"str-chat__down\">\n    <ng-container *ngTemplateOutlet=\"loadingChannels\"></ng-container>\n    <div class=\"str-chat__down-main\">\n      <stream-icon icon=\"connection-error\"></stream-icon>\n      <h1>{{ \"streamChat.Connection error\" | translate }}</h1>\n      <h3>\n        {{\n          \"streamChat.Error connecting to chat, refresh the page to try again.\"\n            | translate\n        }}\n      </h3>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #loadingChannels>\n  <div data-testid=\"loading-indicator\" class=\"str-chat__loading-channels\">\n    <ng-container *ngTemplateOutlet=\"loadingChannel\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"loadingChannel\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"loadingChannel\"></ng-container>\n  </div>\n</ng-template>\n\n<ng-template #loadingChannel>\n  <div class=\"str-chat__loading-channels-item\">\n    <div class=\"str-chat__loading-channels-avatar\"></div>\n    <div class=\"str-chat__loading-channels-meta\">\n      <div class=\"str-chat__loading-channels-username\"></div>\n      <div class=\"str-chat__loading-channels-status\"></div>\n    </div>\n  </div>\n</ng-template>\n", components: [{ type: ChannelPreviewComponent, selector: "stream-channel-preview", inputs: ["channel"] }, { type: LoadingIndicatorComponent, selector: "stream-loading-indicator", inputs: ["size", "color"] }, { type: IconComponent, selector: "stream-icon", inputs: ["icon", "size"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "async": i6.AsyncPipe, "translate": i1.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: ChannelListComponent, decorators: [{
             type: Component,
             args: [{
@@ -2107,7 +2427,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\"\n      *ngFor=\"\n        let reactionType of reactionOptions;\n        trackBy: trackByMessageReaction\n      \"\n      data-testclass=\"emoji-option\"\n      (click)=\"react(reactionType)\"\n      (keyup.enter)=\"react(reactionType)\"\n    >\n      <div\n        *ngIf=\"getLatestUserByReaction(reactionType) as user\"\n        class=\"latest-user\"\n        (click)=\"hideTooltip()\"\n        (keyup.enter)=\"hideTooltip()\"\n        (mouseenter)=\"showTooltip($event, reactionType)\"\n        (mouseleave)=\"hideTooltip()\"\n        attr.data-testid=\"{{ reactionType }}-last-user\"\n      >\n        <stream-avatar\n          attr.data-testid=\"{{ reactionType }}-avatar\"\n          [imageUrl]=\"user.image\"\n          [name]=\"user.name || user.id\"\n          [size]=\"20\"\n        ></stream-avatar>\n      </div>\n      <span class=\"emoji\" style=\"width: 20px; height: 20px; top: 10px\">\n        {{ getEmojiByReaction(reactionType) }}\n      </span>\n      <span\n        *ngIf=\"\n          messageReactionCounts[reactionType] &&\n          messageReactionCounts[reactionType]! > 0\n        \"\n        class=\"str-chat__message-reactions-list-item__count\"\n        attr.data-testid=\"{{ reactionType }}-reaction-count\"\n      >\n        {{ messageReactionCounts[reactionType] }}\n      </span>\n    </li>\n  </ul>\n</div>\n", styles: [".emoji {position: relative; display: inline-block; }"], components: [{ type: AvatarComponent, selector: "stream-avatar", inputs: ["name", "imageUrl", "size"] }], directives: [{ type: 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 && !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\"\n      *ngFor=\"\n        let reactionType of reactionOptions;\n        trackBy: trackByMessageReaction\n      \"\n      data-testclass=\"emoji-option\"\n      (click)=\"react(reactionType)\"\n      (keyup.enter)=\"react(reactionType)\"\n    >\n      <div\n        *ngIf=\"getLatestUserByReaction(reactionType) as user\"\n        class=\"latest-user\"\n        (click)=\"hideTooltip()\"\n        (keyup.enter)=\"hideTooltip()\"\n        (mouseenter)=\"showTooltip($event, reactionType)\"\n        (mouseleave)=\"hideTooltip()\"\n        attr.data-testid=\"{{ reactionType }}-last-user\"\n      >\n        <stream-avatar\n          attr.data-testid=\"{{ reactionType }}-avatar\"\n          [imageUrl]=\"user.image\"\n          [name]=\"user.name || user.id\"\n          [size]=\"20\"\n        ></stream-avatar>\n      </div>\n      <span class=\"emoji\" style=\"width: 20px; height: 20px; top: 10px\">\n        {{ getEmojiByReaction(reactionType) }}\n      </span>\n      <span\n        *ngIf=\"\n          messageReactionCounts[reactionType] &&\n          messageReactionCounts[reactionType]! > 0\n        \"\n        class=\"str-chat__message-reactions-list-item__count\"\n        attr.data-testid=\"{{ reactionType }}-reaction-count\"\n      >\n        {{ messageReactionCounts[reactionType] }}\n      </span>\n    </li>\n  </ul>\n</div>\n", styles: [".emoji {position: relative; display: inline-block; }"], components: [{ type: AvatarComponent, selector: "stream-avatar", inputs: ["name", "imageUrl", "size"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: MessageReactionsComponent, decorators: [{
             type: Component,
             args: [{
@@ -2135,83 +2455,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImpor
                 args: ['selectorTooltip']
             }] } });
 
-class ImageLoadService {
-    constructor() {
-        this.imageLoad$ = new Subject();
-    }
-}
-ImageLoadService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: ImageLoadService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-ImageLoadService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: ImageLoadService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: ImageLoadService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }], ctorParameters: function () { return []; } });
-
-class AttachmentListComponent {
-    constructor(imageLoadService) {
-        this.imageLoadService = imageLoadService;
-        this.attachments = [];
-        this.orderedAttachments = [];
-    }
-    ngOnChanges() {
-        this.orderedAttachments = [
-            ...this.attachments.filter((a) => this.isImage(a)),
-            ...this.attachments.filter((a) => this.isFile(a)),
-            ...this.attachments.filter((a) => this.isCard(a)),
-        ];
-    }
-    trackById(index) {
-        return index;
-    }
-    isImage(attachment) {
-        return isImageAttachment(attachment);
-    }
-    isFile(attachment) {
-        return attachment.type === 'file';
-    }
-    isCard(attachment) {
-        return (!attachment.type ||
-            (attachment.type === 'image' && !this.isImage(attachment)));
-    }
-    imageLoaded() {
-        this.imageLoadService.imageLoad$.next();
-    }
-    hasFileSize(attachment) {
-        return (attachment.file_size && Number.isFinite(Number(attachment.file_size)));
-    }
-    getFileSize(attachment) {
-        return prettybytes(attachment.file_size);
-    }
-    trimUrl(url) {
-        if (url !== undefined && url !== null) {
-            const [trimmedUrl] = url
-                .replace(/^(?:https?:\/\/)?(?:www\.)?/i, '')
-                .split('/');
-            return trimmedUrl;
-        }
-        return null;
-    }
-}
-AttachmentListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: AttachmentListComponent, deps: [{ token: ImageLoadService }], target: i0.ɵɵFactoryTarget.Component });
-AttachmentListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: AttachmentListComponent, selector: "stream-attachment-list", inputs: { attachments: "attachments" }, 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    />\n    <div\n      *ngIf=\"isFile(attachment)\"\n      class=\"\n        str-chat__message-attachment-file--item\n        str-chat-angular__message-attachment-file-single\n      \"\n    >\n      <stream-icon icon=\"file\" [size]=\"30\"></stream-icon>\n      <div class=\"str-chat__message-attachment-file--item-text\">\n        <a\n          data-testclass=\"file-link\"\n          download\n          href=\"{{ attachment.asset_url }}\"\n          target=\"_blank\"\n        >\n          {{ attachment.title }}\n        </a>\n        <span data-testclass=\"size\" *ngIf=\"hasFileSize(attachment)\">{{\n          getFileSize(attachment)\n        }}</span>\n      </div>\n    </div>\n    <div\n      *ngIf=\"isCard(attachment)\"\n      class=\"str-chat__message-attachment-card str-chat__message-attachment-card--{{\n        attachment.type\n      }}\"\n    >\n      <div\n        *ngIf=\"attachment.image_url || attachment.thumb_url\"\n        class=\"str-chat__message-attachment-card--header\"\n      >\n        <img\n          data-testclass=\"card-img\"\n          alt=\"{{ attachment.image_url || attachment.thumb_url }}\"\n          src=\"{{ attachment.image_url || attachment.thumb_url }}\"\n        />\n      </div>\n      <div class=\"str-chat__message-attachment-card--content\">\n        <div class=\"str-chat__message-attachment-card--flex\">\n          <div\n            *ngIf=\"attachment.title\"\n            data-testclass=\"card-title\"\n            class=\"str-chat__message-attachment-card--title\"\n          >\n            {{ attachment.title }}\n          </div>\n          <div\n            *ngIf=\"attachment.text\"\n            class=\"str-chat__message-attachment-card--text\"\n            data-testclass=\"card-text\"\n          >\n            {{ attachment.text }}\n          </div>\n          <a\n            class=\"str-chat__message-attachment-card--url\"\n            *ngIf=\"attachment.title_link || attachment.og_scrape_url\"\n            data-testclass=\"url-link\"\n            noopener\n            noreferrer\n            href=\"{{ attachment.title_link || attachment.og_scrape_url }}\"\n            target=\"_blank\"\n          >\n            {{ trimUrl(attachment.title_link || attachment.og_scrape_url) }}\n          </a>\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-container>\n", components: [{ type: IconComponent, selector: "stream-icon", inputs: ["icon", "size"] }], directives: [{ type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: AttachmentListComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'stream-attachment-list',
-                    templateUrl: './attachment-list.component.html',
-                    styles: [],
-                }]
-        }], ctorParameters: function () { return [{ type: ImageLoadService }]; }, propDecorators: { attachments: [{
-                type: Input
-            }] } });
-
 class MessageComponent {
     constructor(chatClientService, channelService) {
         this.chatClientService = chatClientService;
         this.channelService = channelService;
         this.enabledMessageActions = [];
+        this.mode = 'main';
         this.isActionBoxOpen = false;
         this.isReactionSelectorOpen = false;
         this.isPressedOnMobile = false;
@@ -2220,46 +2469,8 @@ class MessageComponent {
         this.user = this.chatClientService.chatClient.user;
     }
     ngOnChanges(changes) {
-        var _a, _b;
         if (changes.message) {
-            let content = ((_a = this.message) === null || _a === void 0 ? void 0 : _a.html) || ((_b = this.message) === null || _b === void 0 ? void 0 : _b.text);
-            if (!content) {
-                this.messageTextParts = [];
-            }
-            else {
-                // Backend will wrap HTML content with <p></p>\n
-                if (content.startsWith('<p>')) {
-                    content = content.replace('<p>', '');
-                }
-                if (content.endsWith('</p>\n')) {
-                    content = content.replace('</p>\n', '');
-                }
-                if (!this.message.mentioned_users ||
-                    this.message.mentioned_users.length === 0) {
-                    this.messageTextParts = [{ content, type: 'text' }];
-                }
-                else {
-                    this.messageTextParts = [];
-                    let text = content;
-                    this.message.mentioned_users.forEach((user) => {
-                        const mention = `@${user.name || user.id}`;
-                        const precedingText = text.substring(0, text.indexOf(mention));
-                        this.messageTextParts.push({
-                            content: precedingText,
-                            type: 'text',
-                        });
-                        this.messageTextParts.push({
-                            content: mention,
-                            type: 'mention',
-                            user,
-                        });
-                        text = text.replace(precedingText + mention, '');
-                    });
-                    if (text) {
-                        this.messageTextParts.push({ content: text, type: 'text' });
-                    }
-                }
-            }
+            this.createMessageParts();
         }
     }
     get isSentByCurrentUser() {
@@ -2301,7 +2512,8 @@ class MessageComponent {
             this.message.type === 'system' ||
             this.message.type === 'ephemeral' ||
             this.message.status === 'failed' ||
-            this.message.status === 'sending');
+            this.message.status === 'sending' ||
+            (this.mode === 'thread' && !this.message.parent_id));
     }
     get hasAttachment() {
         var _a;
@@ -2312,6 +2524,21 @@ class MessageComponent {
         return (!!((_a = this.message) === null || _a === void 0 ? void 0 : _a.reaction_counts) &&
             Object.keys(this.message.reaction_counts).length > 0);
     }
+    get replyCountParam() {
+        var _a;
+        return { replyCount: (_a = this.message) === null || _a === void 0 ? void 0 : _a.reply_count };
+    }
+    get canDisplayReadStatus() {
+        return (this.canReceiveReadEvents !== false &&
+            this.enabledMessageActions.indexOf('read-events') !== -1);
+    }
+    get quotedMessageAttachments() {
+        var _a, _b;
+        const originalAttachments = (_b = (_a = this.message) === null || _a === void 0 ? void 0 : _a.quoted_message) === null || _b === void 0 ? void 0 : _b.attachments;
+        return originalAttachments && originalAttachments.length
+            ? [originalAttachments[0]]
+            : [];
+    }
     resendMessage() {
         void this.channelService.resendMessage(this.message);
     }
@@ -2333,9 +2560,53 @@ class MessageComponent {
         };
         window.addEventListener('click', eventHandler);
     }
+    setAsActiveParentMessage() {
+        void this.channelService.setAsActiveParentMessage(this.message);
+    }
+    createMessageParts() {
+        var _a, _b;
+        let content = ((_a = this.message) === null || _a === void 0 ? void 0 : _a.html) || ((_b = this.message) === null || _b === void 0 ? void 0 : _b.text);
+        if (!content) {
+            this.messageTextParts = [];
+        }
+        else {
+            // Backend will wrap HTML content with <p></p>\n
+            if (content.startsWith('<p>')) {
+                content = content.replace('<p>', '');
+            }
+            if (content.endsWith('</p>\n')) {
+                content = content.replace('</p>\n', '');
+            }
+            if (!this.message.mentioned_users ||
+                this.message.mentioned_users.length === 0) {
+                this.messageTextParts = [{ content, type: 'text' }];
+            }
+            else {
+                this.messageTextParts = [];
+                let text = content;
+                this.message.mentioned_users.forEach((user) => {
+                    const mention = `@${user.name || user.id}`;
+                    const precedingText = text.substring(0, text.indexOf(mention));
+                    this.messageTextParts.push({
+                        content: precedingText,
+                        type: 'text',
+                    });
+                    this.messageTextParts.push({
+                        content: mention,
+                        type: 'mention',
+                        user,
+                    });
+                    text = text.replace(precedingText + mention, '');
+                });
+                if (text) {
+                    this.messageTextParts.push({ content: text, type: 'text' });
+                }
+            }
+        }
+    }
 }
 MessageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: MessageComponent, deps: [{ token: ChatClientService }, { token: ChannelService }], target: i0.ɵɵFactoryTarget.Component });
-MessageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: MessageComponent, selector: "stream-message", inputs: { messageInputTemplate: "messageInputTemplate", mentionTemplate: "mentionTemplate", message: "message", enabledMessageActions: "enabledMessageActions", areReactionsEnabled: "areReactionsEnabled", canReactToMessage: "canReactToMessage", isLastSentMessage: "isLastSentMessage", canReceiveReadEvents: "canReceiveReadEvents" }, 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]=\"\n    areReactionsEnabled && hasReactions\n  \"\n  data-testid=\"message-container\"\n>\n  <ng-container *ngIf=\"!message?.deleted_at; else deletedMessage\">\n    <ng-container *ngIf=\"message?.type !== 'system'; else systemMessage\">\n      <ng-container\n        *ngIf=\"\n          isSentByCurrentUser &&\n          ((isLastSentMessage && message?.status === 'received') ||\n            message?.status === 'sending')\n        \"\n      >\n        <ng-container *ngIf=\"message?.status === 'sending'; else sentStatus\">\n          <ng-container *ngTemplateOutlet=\"sendingStatus\"></ng-container>\n        </ng-container>\n        <ng-template #sentStatus>\n          <ng-container\n            *ngIf=\"\n              isMessageDeliveredAndRead && canReceiveReadEvents;\n              else deliveredStatus\n            \"\n          >\n            <ng-container *ngTemplateOutlet=\"readStatus\"></ng-container>\n          </ng-container>\n        </ng-template>\n      </ng-container>\n      <stream-avatar\n        data-testid=\"avatar\"\n        class=\"str-chat-angular__avatar-host\"\n        [imageUrl]=\"message?.user?.image\"\n        [name]=\"message?.user?.name || message?.user?.id\"\n      ></stream-avatar>\n      <div class=\"str-chat__message-inner\">\n        <div\n          class=\"str-chat__message-simple__actions\"\n          data-testid=\"message-options\"\n          *ngIf=\"areOptionsVisible\"\n        >\n          <div\n            data-testid=\"message-actions-container\"\n            class=\"\n              str-chat__message-simple__actions__action\n              str-chat__message-simple__actions__action--options\n            \"\n            [class.str-chat-angular__message-simple__actions__action--options--editing]=\"\n              isEditing\n            \"\n          >\n            <stream-message-actions-box\n              [isOpen]=\"isActionBoxOpen\"\n              [isMine]=\"isSentByCurrentUser\"\n              [enabledActions]=\"enabledMessageActions\"\n              [message]=\"message\"\n              (displayedActionsCount)=\"visibleMessageActionsCount = $event\"\n              (isEditing)=\"isEditing = $event; isActionBoxOpen = !isEditing\"\n              [messageInputTemplate]=\"messageInputTemplate\"\n            ></stream-message-actions-box>\n            <stream-icon\n              *ngIf=\"visibleMessageActionsCount > 0\"\n              data-testid=\"action-icon\"\n              icon=\"action-icon\"\n              (keyup.enter)=\"isActionBoxOpen = !isActionBoxOpen\"\n              (click)=\"isActionBoxOpen = !isActionBoxOpen\"\n            ></stream-icon>\n          </div>\n          <div\n            *ngIf=\"areReactionsEnabled && canReactToMessage\"\n            class=\"\n              str-chat__message-simple__actions__action\n              str-chat__message-simple__actions__action--reactions\n            \"\n            data-testid=\"reaction-icon\"\n            (click)=\"isReactionSelectorOpen = !isReactionSelectorOpen\"\n            (keyup.enter)=\"isReactionSelectorOpen = !isReactionSelectorOpen\"\n          >\n            <stream-icon icon=\"reaction-icon\"></stream-icon>\n          </div>\n        </div>\n        <stream-message-reactions\n          *ngIf=\"areReactionsEnabled\"\n          [messageReactionCounts]=\"message?.reaction_counts || {}\"\n          [latestReactions]=\"message?.latest_reactions || []\"\n          [(isSelectorOpen)]=\"isReactionSelectorOpen\"\n          [messageId]=\"message?.id\"\n          [ownReactions]=\"message?.own_reactions || []\"\n        ></stream-message-reactions>\n        <stream-attachment-list\n          *ngIf=\"hasAttachment\"\n          [attachments]=\"message!.attachments!\"\n        ></stream-attachment-list>\n        <div class=\"str-chat__message-text\" *ngIf=\"message?.text\">\n          <div\n            data-testid=\"inner-message\"\n            class=\"\n              str-chat__message-text-inner str-chat__message-simple-text-inner\n            \"\n            [class.str-chat__message-light-text-inner--has-attachment]=\"\n              hasAttachment\n            \"\n            (click)=\"\n              message?.status === 'failed' && message?.errorStatusCode !== 403\n                ? resendMessage()\n                : undefined\n            \"\n            (keyup.enter)=\"\n              message?.status === 'failed' && message?.errorStatusCode !== 403\n                ? resendMessage()\n                : undefined\n            \"\n          >\n            <div\n              data-testid=\"client-error-message\"\n              *ngIf=\"message?.type === 'error'\"\n              class=\"str-chat__simple-message--error-message\"\n            >\n              {{ \"streamChat.Error \u00B7 Unsent\" | translate }}\n            </div>\n            <div\n              data-testid=\"error-message\"\n              *ngIf=\"message?.status === 'failed'\"\n              class=\"str-chat__simple-message--error-message\"\n            >\n              {{\n                (message?.errorStatusCode === 403\n                  ? \"streamChat.Message Failed \u00B7 Unauthorized\"\n                  : \"streamChat.Message Failed \u00B7 Click to try again\"\n                ) | translate\n              }}\n            </div>\n            <div\n              (click)=\"textClicked()\"\n              (keyup.enter)=\"textClicked()\"\n              data-testid=\"text\"\n            >\n              <p>\n                <!-- eslint-disable-next-line @angular-eslint/template/use-track-by-function -->\n                <ng-container *ngFor=\"let part of messageTextParts\">\n                  <span\n                    *ngIf=\"part.type === 'text'; else mention\"\n                    [innerHTML]=\"part.content\"\n                  ></span>\n                  <ng-template #mention>\n                    <ng-container *ngIf=\"mentionTemplate; else defaultMention\">\n                      <ng-container\n                        *ngTemplateOutlet=\"\n                          mentionTemplate;\n                          context: { user: part.user! }\n                        \"\n                      ></ng-container>\n                    </ng-container>\n                    <ng-template #defaultMention>\n                      <b>{{ part.content }}</b>\n                    </ng-template>\n                  </ng-template>\n                </ng-container>\n              </p>\n            </div>\n          </div>\n        </div>\n        <div class=\"str-chat__message-data str-chat__message-simple-data\">\n          <span\n            data-testid=\"sender\"\n            *ngIf=\"!isSentByCurrentUser\"\n            class=\"str-chat__message-simple-name\"\n          >\n            {{ message?.user?.name ? message?.user?.name : message?.user?.id }}\n          </span>\n          <span data-testid=\"date\" class=\"str-chat__message-simple-timestamp\">\n            {{ parsedDate }}\n          </span>\n        </div>\n      </div>\n    </ng-container>\n  </ng-container>\n</div>\n\n<ng-template #sendingStatus>\n  <span\n    class=\"\n      str-chat__message-simple-status str-chat__message-simple-status-angular\n    \"\n    data-testid=\"sending-indicator\"\n  >\n    <div class=\"str-chat__tooltip\">\n      {{ \"streamChat.Sending...\" | translate }}\n    </div>\n    <stream-loading-indicator\n      data-testid=\"loading-indicator\"\n    ></stream-loading-indicator>\n  </span>\n</ng-template>\n<ng-template #readStatus>\n  <span\n    class=\"\n      str-chat__message-simple-status str-chat__message-simple-status-angular\n    \"\n    data-testid=\"read-indicator\"\n  >\n    <div class=\"str-chat__tooltip\" data-testid=\"read-by-tooltip\">\n      {{ readByText }}\n    </div>\n    <stream-avatar\n      class=\"str-chat-angular__avatar-host\"\n      data-test-id=\"last-read-user-avatar\"\n      [size]=\"15\"\n      [imageUrl]=\"lastReadUser?.image\"\n      [name]=\"lastReadUser?.name || lastReadUser?.id\"\n    ></stream-avatar>\n    <span\n      data-test-id=\"read-by-length\"\n      *ngIf=\"isReadByMultipleUsers\"\n      class=\"str-chat__message-simple-status-number\"\n    >\n      {{ (message?.readBy)!.length }}\n    </span>\n  </span>\n</ng-template>\n<ng-template #deliveredStatus>\n  <span\n    class=\"\n      str-chat__message-simple-status str-chat__message-simple-status-angular\n    \"\n    data-testid=\"delivered-indicator\"\n  >\n    <div class=\"str-chat__tooltip\">\n      {{ \"streamChat.Delivered\" | translate }}\n    </div>\n    <stream-icon\n      data-testid=\"delivered-icon\"\n      icon=\"delivered-icon\"\n    ></stream-icon>\n  </span>\n</ng-template>\n\n<ng-template #deletedMessage>\n  <div data-testid=\"message-deleted-component\">\n    <div class=\"str-chat__message--deleted-inner\" translate>\n      streamChat.This message was deleted...\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #systemMessage>\n  <div data-testid=\"system-message\" class=\"str-chat__message--system\">\n    <div class=\"str-chat__message--system__text\">\n      <div class=\"str-chat__message--system__line\"></div>\n      <p>{{ message?.text }}</p>\n      <div class=\"str-chat__message--system__line\"></div>\n    </div>\n    <div class=\"str-chat__message--system__date\">\n      {{ parsedDate }}\n    </div>\n  </div>\n</ng-template>\n", components: [{ type: AvatarComponent, selector: "stream-avatar", inputs: ["name", "imageUrl", "size"] }, { type: MessageActionsBoxComponent, selector: "stream-message-actions-box", inputs: ["messageInputTemplate", "isOpen", "isMine", "message", "enabledActions"], outputs: ["displayedActionsCount", "isEditing"] }, { type: IconComponent, selector: "stream-icon", inputs: ["icon", "size"] }, { type: MessageReactionsComponent, selector: "stream-message-reactions", inputs: ["messageId", "messageReactionCounts", "isSelectorOpen", "latestReactions", "ownReactions"], outputs: ["isSelectorOpenChange"] }, { type: AttachmentListComponent, selector: "stream-attachment-list", inputs: ["attachments"] }, { type: LoadingIndicatorComponent, selector: "stream-loading-indicator", 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: i10.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }], pipes: { "translate": i10.TranslatePipe } });
+MessageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: MessageComponent, selector: "stream-message", inputs: { messageInputTemplate: "messageInputTemplate", mentionTemplate: "mentionTemplate", message: "message", enabledMessageActions: "enabledMessageActions", areReactionsEnabled: "areReactionsEnabled", canReactToMessage: "canReactToMessage", isLastSentMessage: "isLastSentMessage", canReceiveReadEvents: "canReceiveReadEvents", mode: "mode" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  #container\n  class=\"str-chat__message-simple str-chat__message str-chat__message--{{\n    message?.type\n  }} str-chat__message--{{ message?.status }} {{\n    message?.text ? 'str-chat__message--has-text' : 'has-no-text'\n  }}\"\n  [class.str-chat__message--me]=\"isSentByCurrentUser\"\n  [class.str-chat__message-simple--me]=\"isSentByCurrentUser\"\n  [class.mobile-press]=\"isPressedOnMobile\"\n  [class.str-chat__message--has-attachment]=\"hasAttachment\"\n  [class.str-chat__message--with-reactions]=\"\n    areReactionsEnabled !== false && hasReactions\n  \"\n  data-testid=\"message-container\"\n>\n  <ng-container *ngIf=\"!message?.deleted_at; else deletedMessage\">\n    <ng-container *ngIf=\"message?.type !== 'system'; else systemMessage\">\n      <ng-container\n        *ngIf=\"\n          isSentByCurrentUser &&\n          ((isLastSentMessage && message?.status === 'received') ||\n            message?.status === 'sending')\n        \"\n      >\n        <ng-container *ngIf=\"message?.status === 'sending'; else sentStatus\">\n          <ng-container *ngTemplateOutlet=\"sendingStatus\"></ng-container>\n        </ng-container>\n        <ng-template #sentStatus>\n          <ng-container\n            *ngIf=\"\n              mode === 'main' &&\n                isMessageDeliveredAndRead &&\n                canDisplayReadStatus;\n              else deliveredStatus\n            \"\n          >\n            <ng-container *ngTemplateOutlet=\"readStatus\"></ng-container>\n          </ng-container>\n        </ng-template>\n      </ng-container>\n      <stream-avatar\n        data-testid=\"avatar\"\n        class=\"str-chat-angular__avatar-host\"\n        [imageUrl]=\"message?.user?.image\"\n        [name]=\"message?.user?.name || message?.user?.id\"\n      ></stream-avatar>\n      <div class=\"str-chat__message-inner\">\n        <div\n          class=\"str-chat__message-simple__actions\"\n          data-testid=\"message-options\"\n          *ngIf=\"areOptionsVisible\"\n        >\n          <div\n            data-testid=\"message-actions-container\"\n            class=\"\n              str-chat__message-simple__actions__action\n              str-chat__message-simple__actions__action--options\n            \"\n            [class.str-chat-angular__message-simple__actions__action--options--editing]=\"\n              isEditing\n            \"\n          >\n            <stream-message-actions-box\n              [isOpen]=\"isActionBoxOpen\"\n              [isMine]=\"isSentByCurrentUser\"\n              [enabledActions]=\"enabledMessageActions\"\n              [message]=\"message\"\n              (displayedActionsCount)=\"visibleMessageActionsCount = $event\"\n              (isEditing)=\"isEditing = $event; isActionBoxOpen = !isEditing\"\n              [messageInputTemplate]=\"messageInputTemplate\"\n            ></stream-message-actions-box>\n            <stream-icon\n              *ngIf=\"visibleMessageActionsCount > 0\"\n              data-testid=\"action-icon\"\n              icon=\"action-icon\"\n              (keyup.enter)=\"isActionBoxOpen = !isActionBoxOpen\"\n              (click)=\"isActionBoxOpen = !isActionBoxOpen\"\n            ></stream-icon>\n          </div>\n          <!-- eslint-disable @angular-eslint/template/conditional-complexity -->\n          <div\n            *ngIf=\"\n              enabledMessageActions.indexOf('send-reply') !== -1 &&\n              mode === 'main'\n            \"\n            class=\"\n              str-chat__message-simple__actions__action\n              str-chat__message-simple__actions__action--thread\n            \"\n            data-testid=\"reply-in-thread\"\n            (click)=\"setAsActiveParentMessage()\"\n            (keyup.enter)=\"setAsActiveParentMessage()\"\n          >\n            <stream-icon icon=\"reply-in-thread\"></stream-icon>\n          </div>\n          <div\n            *ngIf=\"\n              areReactionsEnabled !== false &&\n              canReactToMessage !== false &&\n              enabledMessageActions.indexOf('send-reaction') !== -1\n            \"\n            class=\"\n              str-chat__message-simple__actions__action\n              str-chat__message-simple__actions__action--reactions\n            \"\n            data-testid=\"reaction-icon\"\n            (click)=\"isReactionSelectorOpen = !isReactionSelectorOpen\"\n            (keyup.enter)=\"isReactionSelectorOpen = !isReactionSelectorOpen\"\n          >\n            <stream-icon icon=\"reaction-icon\"></stream-icon>\n          </div>\n        </div>\n        <!-- eslint-enable @angular-eslint/template/conditional-complexity -->\n        <stream-message-reactions\n          *ngIf=\"areReactionsEnabled !== false\"\n          [messageReactionCounts]=\"message?.reaction_counts || {}\"\n          [latestReactions]=\"message?.latest_reactions || []\"\n          [(isSelectorOpen)]=\"isReactionSelectorOpen\"\n          [messageId]=\"message?.id\"\n          [ownReactions]=\"message?.own_reactions || []\"\n        ></stream-message-reactions>\n        <stream-attachment-list\n          *ngIf=\"hasAttachment && !message?.quoted_message\"\n          [attachments]=\"message!.attachments!\"\n          [messageId]=\"message!.id\"\n        ></stream-attachment-list>\n        <div class=\"str-chat__message-text\" *ngIf=\"message?.text\">\n          <div\n            data-testid=\"inner-message\"\n            class=\"\n              str-chat__message-text-inner str-chat__message-simple-text-inner\n            \"\n            [class.str-chat__message-light-text-inner--has-attachment]=\"\n              hasAttachment\n            \"\n            (click)=\"\n              message?.status === 'failed' && message?.errorStatusCode !== 403\n                ? resendMessage()\n                : undefined\n            \"\n            (keyup.enter)=\"\n              message?.status === 'failed' && message?.errorStatusCode !== 403\n                ? resendMessage()\n                : undefined\n            \"\n          >\n            <ng-container *ngTemplateOutlet=\"quotedMessage\"></ng-container>\n            <stream-attachment-list\n              *ngIf=\"hasAttachment && message?.quoted_message\"\n              [attachments]=\"message!.attachments!\"\n              [messageId]=\"message!.id\"\n            ></stream-attachment-list>\n            <div\n              data-testid=\"client-error-message\"\n              *ngIf=\"message?.type === 'error'\"\n              class=\"str-chat__simple-message--error-message\"\n            >\n              {{ \"streamChat.Error \u00B7 Unsent\" | translate }}\n            </div>\n            <div\n              data-testid=\"error-message\"\n              *ngIf=\"message?.status === 'failed'\"\n              class=\"str-chat__simple-message--error-message\"\n            >\n              {{\n                (message?.errorStatusCode === 403\n                  ? \"streamChat.Message Failed \u00B7 Unauthorized\"\n                  : \"streamChat.Message Failed \u00B7 Click to try again\"\n                ) | translate\n              }}\n            </div>\n            <div\n              (click)=\"textClicked()\"\n              (keyup.enter)=\"textClicked()\"\n              data-testid=\"text\"\n            >\n              <p>\n                <!-- eslint-disable-next-line @angular-eslint/template/use-track-by-function -->\n                <ng-container *ngFor=\"let part of messageTextParts\">\n                  <span\n                    *ngIf=\"part.type === 'text'; else mention\"\n                    [innerHTML]=\"part.content\"\n                  ></span>\n                  <ng-template #mention>\n                    <ng-container *ngIf=\"mentionTemplate; else defaultMention\">\n                      <ng-container\n                        *ngTemplateOutlet=\"\n                          mentionTemplate;\n                          context: { user: part.user! }\n                        \"\n                      ></ng-container>\n                    </ng-container>\n                    <ng-template #defaultMention>\n                      <b>{{ part.content }}</b>\n                    </ng-template>\n                  </ng-template>\n                </ng-container>\n              </p>\n            </div>\n          </div>\n        </div>\n        <div class=\"str-chat__message-simple-reply-button\">\n          <button\n            *ngIf=\"\n              !!message?.reply_count &&\n              mode !== 'thread' &&\n              enabledMessageActions.indexOf('send-reply') !== -1\n            \"\n            class=\"str-chat__message-replies-count-button\"\n            data-testid=\"reply-count-button\"\n            (click)=\"setAsActiveParentMessage()\"\n          >\n            <stream-icon icon=\"reply\"></stream-icon>\n            {{message?.reply_count === 1 ? ('streamChat.1 reply' | translate) : ('streamChat.{{ replyCount }}\n            replies' | translate:replyCountParam)}}\n          </button>\n        </div>\n        <div class=\"str-chat__message-data str-chat__message-simple-data\">\n          <span\n            data-testid=\"sender\"\n            *ngIf=\"!isSentByCurrentUser\"\n            class=\"str-chat__message-simple-name\"\n          >\n            {{ message?.user?.name ? message?.user?.name : message?.user?.id }}\n          </span>\n          <span data-testid=\"date\" class=\"str-chat__message-simple-timestamp\">\n            {{ parsedDate }}\n          </span>\n        </div>\n      </div>\n    </ng-container>\n  </ng-container>\n</div>\n\n<ng-template #sendingStatus>\n  <span\n    class=\"\n      str-chat__message-simple-status str-chat__message-simple-status-angular\n    \"\n    data-testid=\"sending-indicator\"\n  >\n    <div class=\"str-chat__tooltip\">\n      {{ \"streamChat.Sending...\" | translate }}\n    </div>\n    <stream-loading-indicator\n      data-testid=\"loading-indicator\"\n    ></stream-loading-indicator>\n  </span>\n</ng-template>\n<ng-template #readStatus>\n  <span\n    class=\"\n      str-chat__message-simple-status str-chat__message-simple-status-angular\n    \"\n    data-testid=\"read-indicator\"\n  >\n    <div class=\"str-chat__tooltip\" data-testid=\"read-by-tooltip\">\n      {{ readByText }}\n    </div>\n    <stream-avatar\n      class=\"str-chat-angular__avatar-host\"\n      data-test-id=\"last-read-user-avatar\"\n      [size]=\"15\"\n      [imageUrl]=\"lastReadUser?.image\"\n      [name]=\"lastReadUser?.name || lastReadUser?.id\"\n    ></stream-avatar>\n    <span\n      data-test-id=\"read-by-length\"\n      *ngIf=\"isReadByMultipleUsers\"\n      class=\"str-chat__message-simple-status-number\"\n    >\n      {{ (message?.readBy)!.length }}\n    </span>\n  </span>\n</ng-template>\n<ng-template #deliveredStatus>\n  <span\n    *ngIf=\"mode === 'main'\"\n    class=\"\n      str-chat__message-simple-status str-chat__message-simple-status-angular\n    \"\n    data-testid=\"delivered-indicator\"\n  >\n    <div class=\"str-chat__tooltip\">\n      {{ \"streamChat.Delivered\" | translate }}\n    </div>\n    <stream-icon\n      data-testid=\"delivered-icon\"\n      icon=\"delivered-icon\"\n    ></stream-icon>\n  </span>\n</ng-template>\n\n<ng-template #deletedMessage>\n  <div data-testid=\"message-deleted-component\">\n    <div class=\"str-chat__message--deleted-inner\" translate>\n      streamChat.This message was deleted...\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #systemMessage>\n  <div data-testid=\"system-message\" class=\"str-chat__message--system\">\n    <div class=\"str-chat__message--system__text\">\n      <div class=\"str-chat__message--system__line\"></div>\n      <p>{{ message?.text }}</p>\n      <div class=\"str-chat__message--system__line\"></div>\n    </div>\n    <div class=\"str-chat__message--system__date\">\n      {{ parsedDate }}\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #quotedMessage>\n  <div\n    *ngIf=\"message?.quoted_message\"\n    class=\"quoted-message\"\n    data-testid=\"quoted-message-container\"\n    [class.mine]=\"isSentByCurrentUser\"\n  >\n    <stream-avatar\n      data-testid=\"qouted-message-avatar\"\n      class=\"str-chat-angular__avatar-host\"\n      [imageUrl]=\"message?.quoted_message?.user?.image\"\n      [name]=\"\n        message?.quoted_message?.user?.name || message?.quoted_message?.user?.id\n      \"\n      [size]=\"20\"\n    ></stream-avatar>\n    <div class=\"quoted-message-inner\">\n      <stream-attachment-list\n        *ngIf=\"\n          message?.quoted_message?.attachments &&\n          message?.quoted_message?.attachments?.length\n        \"\n        [attachments]=\"quotedMessageAttachments\"\n        [messageId]=\"message?.quoted_message?.id\"\n      ></stream-attachment-list>\n      <div\n        data-testid=\"quoted-message-text\"\n        [innerHTML]=\"\n          message?.quoted_message?.html || message?.quoted_message?.text\n        \"\n      ></div>\n    </div>\n  </div>\n</ng-template>\n", components: [{ type: AvatarComponent, selector: "stream-avatar", inputs: ["name", "imageUrl", "size"] }, { type: MessageActionsBoxComponent, selector: "stream-message-actions-box", inputs: ["messageInputTemplate", "isOpen", "isMine", "message", "enabledActions"], outputs: ["displayedActionsCount", "isEditing"] }, { type: IconComponent, selector: "stream-icon", inputs: ["icon", "size"] }, { type: MessageReactionsComponent, selector: "stream-message-reactions", inputs: ["messageId", "messageReactionCounts", "isSelectorOpen", "latestReactions", "ownReactions"], outputs: ["isSelectorOpenChange"] }, { type: AttachmentListComponent, selector: "stream-attachment-list", inputs: ["messageId", "attachments"] }, { type: LoadingIndicatorComponent, selector: "stream-loading-indicator", inputs: ["size", "color"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }], pipes: { "translate": i1.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: MessageComponent, decorators: [{
             type: Component,
             args: [{
@@ -2359,6 +2630,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImpor
                 type: Input
             }], canReceiveReadEvents: [{
                 type: Input
+            }], mode: [{
+                type: Input
             }], container: [{
                 type: ViewChild,
                 args: ['container']
@@ -2382,7 +2655,7 @@ class TextareaComponent {
     }
 }
 TextareaComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: TextareaComponent, deps: [], 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\"\n  rows=\"1\"\n  (input)=\"inputChanged()\"\n  (keydown.enter)=\"sent($event)\"\n></textarea>\n", pipes: { "translate": i10.TranslatePipe } });
+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\"\n  rows=\"1\"\n  (input)=\"inputChanged()\"\n  (keydown.enter)=\"sent($event)\"\n></textarea>\n", pipes: { "translate": i1.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: TextareaComponent, decorators: [{
             type: Component,
             args: [{
@@ -2428,8 +2701,9 @@ class AutocompleteTextareaComponent {
         this.valueChange = new EventEmitter();
         this.send = new EventEmitter();
         this.userMentions = new EventEmitter();
-        this.labelKey = 'autocompleteLabel';
+        this.autocompleteKey = 'autocompleteLabel';
         this.mentionTriggerChar = '@';
+        this.commandTriggerChar = '/';
         this.autocompleteConfig = {
             mentions: [],
         };
@@ -2438,7 +2712,15 @@ class AutocompleteTextareaComponent {
         this.userMentionConfig = {
             triggerChar: this.mentionTriggerChar,
             dropUp: true,
-            labelKey: this.labelKey,
+            labelKey: this.autocompleteKey,
+            returnTrigger: true,
+            mentionFilter: (searchString, items) => this.filter(searchString, items),
+            mentionSelect: (item, triggerChar) => this.itemSelectedFromAutocompleteList(item, triggerChar),
+        };
+        this.slashCommandConfig = {
+            triggerChar: this.commandTriggerChar,
+            dropUp: true,
+            labelKey: 'name',
             returnTrigger: true,
             mentionFilter: (searchString, items) => this.filter(searchString, items),
             mentionSelect: (item, triggerChar) => this.itemSelectedFromAutocompleteList(item, triggerChar),
@@ -2451,20 +2733,30 @@ class AutocompleteTextareaComponent {
                 void this.updateMentionOptions(searchTerm);
             }
         });
-        this.subscriptions.push(this.channelService.activeChannel$.subscribe(() => {
+        this.subscriptions.push(this.channelService.activeChannel$.subscribe((channel) => {
+            var _a;
+            const commands = ((_a = channel === null || channel === void 0 ? void 0 : channel.getConfig()) === null || _a === void 0 ? void 0 : _a.commands) || [];
+            this.slashCommandConfig.items = commands.map((c) => (Object.assign(Object.assign({}, c), { [this.autocompleteKey]: c.name, type: 'command' })));
             this.mentionedUsers = [];
             this.userMentions.next([...this.mentionedUsers]);
             void this.updateMentionOptions(this.searchTerm$.getValue());
         }));
+        this.autocompleteConfig.mentions = [
+            this.userMentionConfig,
+            this.slashCommandConfig,
+        ];
     }
     ngOnChanges(changes) {
         if (changes.areMentionsEnabled) {
             if (this.areMentionsEnabled) {
-                this.autocompleteConfig.mentions = [this.userMentionConfig];
+                this.autocompleteConfig.mentions = [
+                    this.userMentionConfig,
+                    this.slashCommandConfig,
+                ];
                 this.autocompleteConfig = Object.assign({}, this.autocompleteConfig);
             }
             else {
-                this.autocompleteConfig.mentions = [];
+                this.autocompleteConfig.mentions = [this.slashCommandConfig];
                 this.autocompleteConfig = Object.assign({}, this.autocompleteConfig);
             }
         }
@@ -2480,7 +2772,9 @@ class AutocompleteTextareaComponent {
             this.mentionedUsers.push((item.user ? item.user : item));
             this.userMentions.next([...this.mentionedUsers]);
         }
-        return triggerChar + item.autocompleteLabel;
+        return (triggerChar +
+            item.autocompleteLabel +
+            (triggerChar === this.commandTriggerChar ? ' ' : ''));
     }
     autcompleteSearchTermChanged(searchTerm) {
         if (searchTerm === this.mentionTriggerChar) {
@@ -2524,7 +2818,10 @@ class AutocompleteTextareaComponent {
                 return Object.assign(Object.assign({}, i), { autocompleteLabel: user.name || user.id, type: 'mention' });
             }));
             this.userMentionConfig.items = items;
-            this.autocompleteConfig.mentions = [this.userMentionConfig];
+            this.autocompleteConfig.mentions = [
+                this.userMentionConfig,
+                this.slashCommandConfig,
+            ];
             this.autocompleteConfig = Object.assign({}, this.autocompleteConfig);
         });
     }
@@ -2543,7 +2840,7 @@ 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 }], 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", mentionAutocompleteItemTemplate: "mentionAutocompleteItemTemplate", mentionScope: "mentionScope" }, outputs: { valueChange: "valueChange", send: "send", userMentions: "userMentions" }, host: { properties: { "class": "this.class" } }, viewQueries: [{ propertyName: "messageInput", first: true, predicate: ["input"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<textarea\n  [value]=\"value || ''\"\n  autofocus\n  data-testid=\"textarea\"\n  #input\n  placeholder=\"{{ 'streamChat.Type your message' | translate }}\"\n  class=\"rta__textarea str-chat__textarea__textarea\"\n  rows=\"1\"\n  (input)=\"inputChanged()\"\n  (keydown.enter)=\"sent($event)\"\n  [mentionConfig]=\"autocompleteConfig\"\n  (searchTerm)=\"autcompleteSearchTermChanged($event)\"\n  [mentionListTemplate]=\"autocompleteItem\"\n  (blur)=\"inputLeft()\"\n></textarea>\n<ng-template #autocompleteItem let-item=\"item\">\n  <div class=\"rta rta__item str-chat__emojisearch__item\" [ngSwitch]=\"item.type\">\n    <div class=\"rta__entity\" *ngSwitchCase=\"'mention'\">\n      <ng-container\n        *ngTemplateOutlet=\"\n          mentionAutocompleteItemTemplate || defaultMentionTemplate;\n          context: { item: item }\n        \"\n      ></ng-container>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #defaultMentionTemplate let-item=\"item\">\n  <div class=\"str-chat__user-item\">\n    <stream-avatar\n      data-testclass=\"avatar\"\n      class=\"str-chat__avatar str-chat__avatar--circle\"\n      style=\"height: 20px\"\n      [size]=\"20\"\n      [imageUrl]=\"item.image || item.user?.image\"\n      [name]=\"item.autocompleteLabel\"\n    ></stream-avatar>\n    <span data-testclass=\"username\" class=\"str-chat__user-item--name\">{{\n      item.autocompleteLabel\n    }}</span>\n  </div>\n</ng-template>\n", components: [{ type: AvatarComponent, selector: "stream-avatar", inputs: ["name", "imageUrl", "size"] }], directives: [{ type: i5.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": i10.TranslatePipe } });
+AutocompleteTextareaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: AutocompleteTextareaComponent, selector: "stream-autocomplete-textarea", inputs: { value: "value", areMentionsEnabled: "areMentionsEnabled", mentionAutocompleteItemTemplate: "mentionAutocompleteItemTemplate", commandAutocompleteItemTemplate: "commandAutocompleteItemTemplate", mentionScope: "mentionScope" }, outputs: { valueChange: "valueChange", send: "send", userMentions: "userMentions" }, host: { properties: { "class": "this.class" } }, viewQueries: [{ propertyName: "messageInput", first: true, predicate: ["input"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<textarea\n  [value]=\"value || ''\"\n  autofocus\n  data-testid=\"textarea\"\n  #input\n  placeholder=\"{{ 'streamChat.Type your message' | translate }}\"\n  class=\"rta__textarea str-chat__textarea__textarea\"\n  rows=\"1\"\n  (input)=\"inputChanged()\"\n  (keydown.enter)=\"sent($event)\"\n  [mentionConfig]=\"autocompleteConfig\"\n  (searchTerm)=\"autcompleteSearchTermChanged($event)\"\n  [mentionListTemplate]=\"autocompleteItem\"\n  (blur)=\"inputLeft()\"\n></textarea>\n<ng-template #autocompleteItem let-item=\"item\">\n  <div class=\"rta rta__item str-chat__emojisearch__item\" [ngSwitch]=\"item.type\">\n    <div class=\"rta__entity\" *ngSwitchCase=\"'mention'\">\n      <ng-container\n        *ngTemplateOutlet=\"\n          mentionAutocompleteItemTemplate || defaultMentionTemplate;\n          context: { item: item }\n        \"\n      ></ng-container>\n    </div>\n    <div class=\"rta__entity\" *ngSwitchCase=\"'command'\">\n      <ng-container\n        *ngTemplateOutlet=\"\n          commandAutocompleteItemTemplate || defaultCommandTemplate;\n          context: { item: item }\n        \"\n      ></ng-container>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #defaultCommandTemplate let-item=\"item\">\n  <div class=\"str-chat__slash-command\">\n    <span class=\"str-chat__slash-command-header\">\n      <strong data-testclass=\"command-name\">{{ item.name }}</strong>\n      {{ item.args }}\n    </span>\n    <br />\n    <span class=\"str-chat__slash-command-description\">{{\n      item.description\n    }}</span>\n  </div>\n</ng-template>\n\n<ng-template #defaultMentionTemplate let-item=\"item\">\n  <div class=\"str-chat__user-item\">\n    <stream-avatar\n      data-testclass=\"avatar\"\n      class=\"str-chat__avatar str-chat__avatar--circle\"\n      style=\"height: 20px\"\n      [size]=\"20\"\n      [imageUrl]=\"item.image || item.user?.image\"\n      [name]=\"item.autocompleteLabel\"\n    ></stream-avatar>\n    <span data-testclass=\"username\" class=\"str-chat__user-item--name\">{{\n      item.autocompleteLabel\n    }}</span>\n  </div>\n</ng-template>\n", components: [{ type: AvatarComponent, selector: "stream-avatar", inputs: ["name", "imageUrl", "size"] }], directives: [{ type: i5.MentionDirective, selector: "[mention], [mentionConfig]", inputs: ["mentionConfig", "mention", "mentionListTemplate"], outputs: ["searchTerm", "itemSelected", "opened", "closed"] }, { type: i6.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i6.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "translate": i1.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: AutocompleteTextareaComponent, decorators: [{
             type: Component,
             args: [{
@@ -2559,6 +2856,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImpor
                 type: Input
             }], mentionAutocompleteItemTemplate: [{
                 type: Input
+            }], commandAutocompleteItemTemplate: [{
+                type: Input
             }], mentionScope: [{
                 type: Input
             }], valueChange: [{
@@ -2617,30 +2916,37 @@ class MessageListComponent {
         this.channelService = channelService;
         this.chatClientService = chatClientService;
         this.imageLoadService = imageLoadService;
-        this.areReactionsEnabled = true;
+        /**
+         * @deprecated https://getstream.io/chat/docs/sdk/angular/components/message_list/#caution-arereactionsenabled-deprecated
+         */
+        this.areReactionsEnabled = undefined;
+        /**
+         * @deprecated https://getstream.io/chat/docs/sdk/angular/components/message_list/#caution-enabledmessageactions-deprecated
+         */
         /* eslint-disable-next-line @angular-eslint/no-input-rename */
-        this.enabledMessageActionsInput = ['flag', 'edit', 'edit-any', 'delete', 'delete-any'];
+        this.enabledMessageActionsInput = undefined;
+        this.mode = 'main';
         this.enabledMessageActions = [];
         this.class = 'str-chat-angular__main-panel-inner str-chat-angular__message-list-host';
         this.unreadMessageCount = 0;
         this.groupStyles = [];
         this.authorizedMessageActions = ['flag'];
         this.isUserScrolledUpThreshold = 300;
-        this.channelService.activeChannel$.subscribe((channel) => {
+        this.subscriptions = [];
+        this.subscriptions.push(this.channelService.activeChannel$.subscribe((channel) => {
             var _a;
-            this.latestMessageDate = undefined;
-            this.hasNewMessages = true;
-            this.isUserScrolledUp = false;
-            this.containerHeight = undefined;
-            this.olderMassagesLoaded = false;
-            this.oldestMessageDate = undefined;
-            this.unreadMessageCount = 0;
-            this.isNewMessageSentByUser = undefined;
+            this.resetScrollState();
             const capabilites = (_a = channel === null || channel === void 0 ? void 0 : channel.data) === null || _a === void 0 ? void 0 : _a.own_capabilities;
             if (capabilites) {
                 this.canReactToMessage = capabilites.indexOf('send-reaction') !== -1;
                 this.canReceiveReadEvents = capabilites.indexOf('read-events') !== -1;
                 this.authorizedMessageActions = [];
+                if (this.canReactToMessage) {
+                    this.authorizedMessageActions.push('send-reaction');
+                }
+                if (this.canReceiveReadEvents) {
+                    this.authorizedMessageActions.push('read-events');
+                }
                 if (capabilites.indexOf('flag-message') !== -1) {
                     this.authorizedMessageActions.push('flag');
                 }
@@ -2658,47 +2964,16 @@ class MessageListComponent {
                     this.authorizedMessageActions.push('delete');
                     this.authorizedMessageActions.push('delete-any');
                 }
-                this.setEnabledActions();
-            }
-        });
-        this.messages$ = this.channelService.activeChannelMessages$.pipe(tap((messages) => {
-            var _a, _b, _c, _d, _e;
-            if (messages.length === 0) {
-                return;
-            }
-            const currentLatestMessageDate = messages[messages.length - 1].created_at;
-            if (!this.latestMessageDate ||
-                ((_a = this.latestMessageDate) === null || _a === void 0 ? void 0 : _a.getTime()) < currentLatestMessageDate.getTime()) {
-                this.latestMessageDate = currentLatestMessageDate;
-                this.hasNewMessages = true;
-                this.isNewMessageSentByUser =
-                    ((_b = messages[messages.length - 1].user) === null || _b === void 0 ? void 0 : _b.id) ===
-                        ((_d = (_c = this.chatClientService.chatClient) === null || _c === void 0 ? void 0 : _c.user) === null || _d === void 0 ? void 0 : _d.id);
-                if (this.isUserScrolledUp) {
-                    this.unreadMessageCount++;
+                if (capabilites.indexOf('send-reply') !== -1) {
+                    this.authorizedMessageActions.push('send-reply');
                 }
+                if (capabilites.indexOf('quote-message') !== -1) {
+                    this.authorizedMessageActions.push('quote-message');
+                }
+                this.setEnabledActions();
             }
-            const currentOldestMessageDate = messages[0].created_at;
-            if (!this.oldestMessageDate) {
-                this.oldestMessageDate = currentOldestMessageDate;
-            }
-            else if (((_e = this.oldestMessageDate) === null || _e === void 0 ? void 0 : _e.getTime()) > currentOldestMessageDate.getTime()) {
-                this.oldestMessageDate = currentOldestMessageDate;
-                this.olderMassagesLoaded = true;
-            }
-        }), tap((messages) => {
-            this.groupStyles = messages.map((m, i) => getGroupStyles(m, messages[i - 1], messages[i + 1]));
-        }), tap((messages) => {
-            var _a;
-            return (this.lastSentMessageId = (_a = [...messages]
-                .reverse()
-                .find((m) => {
-                var _a, _b, _c;
-                return ((_a = m.user) === null || _a === void 0 ? void 0 : _a.id) === ((_c = (_b = this.chatClientService.chatClient) === null || _b === void 0 ? void 0 : _b.user) === null || _c === void 0 ? void 0 : _c.id) &&
-                    m.status !== 'sending';
-            })) === null || _a === void 0 ? void 0 : _a.id);
         }));
-        this.imageLoadService.imageLoad$.subscribe(() => {
+        this.subscriptions.push(this.imageLoadService.imageLoad$.subscribe(() => {
             if (!this.isUserScrolledUp) {
                 this.scrollToBottom();
                 // Hacky and unreliable workaround to scroll down after loaded images move the scrollbar
@@ -2706,12 +2981,27 @@ class MessageListComponent {
                     this.scrollToBottom();
                 }, 300);
             }
-        });
+        }));
+        this.subscriptions.push(this.channelService.activeParentMessage$.subscribe((message) => {
+            if (message &&
+                this.parentMessage &&
+                message.id !== this.parentMessage.id &&
+                this.mode === 'thread') {
+                this.resetScrollState();
+            }
+            this.parentMessage = message;
+        }));
+    }
+    ngOnInit() {
+        this.setMessages$();
     }
     ngOnChanges(changes) {
         if (changes.enabledMessageActionsInput) {
             this.setEnabledActions();
         }
+        if (changes.mode) {
+            this.setMessages$();
+        }
     }
     ngAfterViewChecked() {
         if (this.hasNewMessages) {
@@ -2730,6 +3020,15 @@ class MessageListComponent {
             this.containerHeight = this.scrollContainer.nativeElement.scrollHeight;
             this.olderMassagesLoaded = false;
         }
+        else if (this.containerHeight !== undefined &&
+            this.containerHeight < this.scrollContainer.nativeElement.scrollHeight &&
+            !this.isUserScrolledUp) {
+            this.scrollToBottom();
+            this.containerHeight = this.scrollContainer.nativeElement.scrollHeight;
+        }
+    }
+    ngOnDestroy() {
+        this.subscriptions.forEach((s) => s.unsubscribe());
     }
     trackByMessageId(index, item) {
         return item.id;
@@ -2739,6 +3038,7 @@ class MessageListComponent {
             this.scrollContainer.nativeElement.scrollHeight;
     }
     scrolled() {
+        var _a, _b;
         this.isUserScrolledUp =
             this.scrollContainer.nativeElement.scrollHeight -
                 (this.scrollContainer.nativeElement.scrollTop +
@@ -2747,20 +3047,36 @@ class MessageListComponent {
         if (!this.isUserScrolledUp) {
             this.unreadMessageCount = 0;
         }
-        if (this.scrollContainer.nativeElement.scrollTop === 0) {
+        if (this.scrollContainer.nativeElement.scrollTop <=
+            (((_a = this.parentMessageElement) === null || _a === void 0 ? void 0 : _a.nativeElement.clientHeight) || 0) &&
+            (this.prevScrollTop === undefined ||
+                this.prevScrollTop >
+                    (((_b = this.parentMessageElement) === null || _b === void 0 ? void 0 : _b.nativeElement.clientHeight) || 0))) {
             this.containerHeight = this.scrollContainer.nativeElement.scrollHeight;
-            void this.channelService.loadMoreMessages();
+            this.mode === 'main'
+                ? void this.channelService.loadMoreMessages()
+                : void this.channelService.loadMoreThreadReplies();
         }
+        this.prevScrollTop = this.scrollContainer.nativeElement.scrollTop;
     }
     preserveScrollbarPosition() {
         this.scrollContainer.nativeElement.scrollTop =
-            this.scrollContainer.nativeElement.scrollHeight - this.containerHeight;
+            (this.prevScrollTop || 0) +
+                (this.scrollContainer.nativeElement.scrollHeight - this.containerHeight);
     }
     setEnabledActions() {
         this.enabledMessageActions = [];
         if (!this.enabledMessageActionsInput) {
+            this.enabledMessageActions = this.authorizedMessageActions;
             return;
         }
+        this.enabledMessageActionsInput = [
+            ...this.enabledMessageActionsInput,
+            'send-reaction',
+            'read-events',
+            'send-reply',
+            'quote-message',
+        ];
         this.enabledMessageActionsInput.forEach((action) => {
             const isAuthorized = this.authorizedMessageActions.indexOf(action) !== -1;
             if (isAuthorized) {
@@ -2768,9 +3084,61 @@ class MessageListComponent {
             }
         });
     }
+    setMessages$() {
+        this.messages$ = (this.mode === 'main'
+            ? this.channelService.activeChannelMessages$
+            : this.channelService.activeThreadMessages$).pipe(tap((messages) => {
+            var _a, _b, _c, _d, _e;
+            if (messages.length === 0) {
+                return;
+            }
+            const currentLatestMessageDate = messages[messages.length - 1].created_at;
+            if (!this.latestMessageDate ||
+                ((_a = this.latestMessageDate) === null || _a === void 0 ? void 0 : _a.getTime()) < currentLatestMessageDate.getTime()) {
+                this.latestMessageDate = currentLatestMessageDate;
+                this.hasNewMessages = true;
+                this.isNewMessageSentByUser =
+                    ((_b = messages[messages.length - 1].user) === null || _b === void 0 ? void 0 : _b.id) ===
+                        ((_d = (_c = this.chatClientService.chatClient) === null || _c === void 0 ? void 0 : _c.user) === null || _d === void 0 ? void 0 : _d.id);
+                if (this.isUserScrolledUp) {
+                    this.unreadMessageCount++;
+                }
+            }
+            const currentOldestMessageDate = messages[0].created_at;
+            if (!this.oldestMessageDate) {
+                this.oldestMessageDate = currentOldestMessageDate;
+            }
+            else if (((_e = this.oldestMessageDate) === null || _e === void 0 ? void 0 : _e.getTime()) > currentOldestMessageDate.getTime()) {
+                this.oldestMessageDate = currentOldestMessageDate;
+                this.olderMassagesLoaded = true;
+            }
+        }), tap((messages) => {
+            this.groupStyles = messages.map((m, i) => getGroupStyles(m, messages[i - 1], messages[i + 1]));
+        }), tap((messages) => {
+            var _a;
+            return (this.lastSentMessageId = (_a = [...messages]
+                .reverse()
+                .find((m) => {
+                var _a, _b, _c;
+                return ((_a = m.user) === null || _a === void 0 ? void 0 : _a.id) === ((_c = (_b = this.chatClientService.chatClient) === null || _b === void 0 ? void 0 : _b.user) === null || _c === void 0 ? void 0 : _c.id) &&
+                    m.status !== 'sending';
+            })) === null || _a === void 0 ? void 0 : _a.id);
+        }));
+    }
+    resetScrollState() {
+        this.latestMessageDate = undefined;
+        this.hasNewMessages = true;
+        this.isUserScrolledUp = false;
+        this.containerHeight = undefined;
+        this.olderMassagesLoaded = false;
+        this.oldestMessageDate = undefined;
+        this.unreadMessageCount = 0;
+        this.prevScrollTop = undefined;
+        this.isNewMessageSentByUser = undefined;
+    }
 }
 MessageListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: MessageListComponent, deps: [{ token: ChannelService }, { token: ChatClientService }, { token: ImageLoadService }], target: i0.ɵɵFactoryTarget.Component });
-MessageListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: MessageListComponent, selector: "stream-message-list", inputs: { messageTemplate: "messageTemplate", messageInputTemplate: "messageInputTemplate", mentionTemplate: "mentionTemplate", areReactionsEnabled: "areReactionsEnabled", enabledMessageActionsInput: ["enabledMessageActions", "enabledMessageActionsInput"] }, host: { properties: { "class": "this.class" } }, viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], 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        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 *ngIf=\"messageTemplate; else defaultMessageTemplate\">\n          <ng-container\n            *ngTemplateOutlet=\"\n              messageTemplate;\n              context: {\n                message: message,\n                areReactionsEnabled: areReactionsEnabled,\n                canReactToMessage: canReactToMessage,\n                lastSentMessageId: !!(\n                  lastSentMessageId && message?.id === lastSentMessageId\n                ),\n                canReceiveReadEvents: canReceiveReadEvents,\n                messageInputTemplate: messageInputTemplate,\n                mentionTemplate: mentionTemplate\n              }\n            \"\n          ></ng-container>\n        </ng-container>\n        <ng-template #defaultMessageTemplate>\n          <stream-message\n            [message]=\"message\"\n            [areReactionsEnabled]=\"areReactionsEnabled\"\n            [canReactToMessage]=\"canReactToMessage\"\n            [isLastSentMessage]=\"\n              !!(lastSentMessageId && message?.id === lastSentMessageId)\n            \"\n            [enabledMessageActions]=\"enabledMessageActions\"\n            [canReceiveReadEvents]=\"canReceiveReadEvents\"\n            [messageInputTemplate]=\"messageInputTemplate\"\n            [mentionTemplate]=\"mentionTemplate\"\n          ></stream-message>\n        </ng-template>\n      </li>\n    </ul>\n  </div>\n</div>\n<div class=\"str-chat__list-notifications\">\n  <button\n    data-testid=\"scroll-to-bottom\"\n    *ngIf=\"isUserScrolledUp\"\n    class=\"\n      str-chat__message-notification\n      str-chat__message-notification-right\n      str-chat__message-notification-scroll-down\n    \"\n    (keyup.enter)=\"scrollToBottom()\"\n    (click)=\"scrollToBottom()\"\n  >\n    <div\n      *ngIf=\"unreadMessageCount > 0\"\n      class=\"\n        str-chat__message-notification\n        str-chat__message-notification-scroll-down-unread-count\n      \"\n    >\n      {{ unreadMessageCount }}\n    </div>\n  </button>\n</div>\n", components: [{ type: MessageComponent, selector: "stream-message", inputs: ["messageInputTemplate", "mentionTemplate", "message", "enabledMessageActions", "areReactionsEnabled", "canReactToMessage", "isLastSentMessage", "canReceiveReadEvents"] }], 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 } });
+MessageListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: MessageListComponent, selector: "stream-message-list", inputs: { messageTemplate: "messageTemplate", messageInputTemplate: "messageInputTemplate", mentionTemplate: "mentionTemplate", areReactionsEnabled: "areReactionsEnabled", enabledMessageActionsInput: ["enabledMessageActions", "enabledMessageActionsInput"], mode: "mode" }, host: { properties: { "class": "this.class" } }, viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], descendants: true }, { propertyName: "parentMessageElement", first: true, predicate: ["parentMessageElement"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  #scrollContainer\n  data-testid=\"scroll-container\"\n  class=\"str-chat__list\"\n  (scroll)=\"scrolled()\"\n>\n  <div class=\"str-chat__reverse-infinite-scroll\">\n    <ul class=\"str-chat__ul\">\n      <li\n        #parentMessageElement\n        *ngIf=\"mode === 'thread'\"\n        data-testid=\"parent-message\"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"\n            messageTemplateContainer;\n            context: { message: parentMessage }\n          \"\n        ></ng-container>\n        <div class=\"str-chat__thread-start\" translate>\n          streamChat.Start of a new thread\n        </div>\n      </li>\n      <li\n        data-testclass=\"message\"\n        *ngFor=\"\n          let message of messages$ | async;\n          let i = index;\n          trackBy: trackByMessageId\n        \"\n        class=\"str-chat__li str-chat__li--{{ groupStyles[i] }}\"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"\n            messageTemplateContainer;\n            context: { message: message }\n          \"\n        ></ng-container>\n      </li>\n    </ul>\n  </div>\n</div>\n<div class=\"str-chat__list-notifications\">\n  <button\n    data-testid=\"scroll-to-bottom\"\n    *ngIf=\"isUserScrolledUp\"\n    class=\"\n      str-chat__message-notification\n      str-chat__message-notification-right\n      str-chat__message-notification-scroll-down\n    \"\n    (keyup.enter)=\"scrollToBottom()\"\n    (click)=\"scrollToBottom()\"\n  >\n    <div\n      *ngIf=\"unreadMessageCount > 0\"\n      class=\"\n        str-chat__message-notification\n        str-chat__message-notification-scroll-down-unread-count\n      \"\n    >\n      {{ unreadMessageCount }}\n    </div>\n  </button>\n</div>\n\n<ng-template #messageTemplateContainer let-message=\"message\">\n  <ng-container *ngIf=\"messageTemplate; else defaultMessageTemplate\">\n    <ng-container\n      *ngTemplateOutlet=\"\n        messageTemplate;\n        context: {\n          message: message,\n          areReactionsEnabled: areReactionsEnabled,\n          canReactToMessage: canReactToMessage,\n          lastSentMessageId: !!(\n            lastSentMessageId && message?.id === lastSentMessageId\n          ),\n          canReceiveReadEvents: canReceiveReadEvents,\n          messageInputTemplate: messageInputTemplate,\n          mentionTemplate: mentionTemplate,\n          mode: mode\n        }\n      \"\n    ></ng-container>\n  </ng-container>\n  <ng-template #defaultMessageTemplate>\n    <stream-message\n      [message]=\"message\"\n      [areReactionsEnabled]=\"areReactionsEnabled\"\n      [canReactToMessage]=\"canReactToMessage\"\n      [isLastSentMessage]=\"\n        !!(lastSentMessageId && message?.id === lastSentMessageId)\n      \"\n      [enabledMessageActions]=\"enabledMessageActions\"\n      [canReceiveReadEvents]=\"canReceiveReadEvents\"\n      [messageInputTemplate]=\"messageInputTemplate\"\n      [mentionTemplate]=\"mentionTemplate\"\n      [mode]=\"mode\"\n    ></stream-message>\n  </ng-template>\n</ng-template>\n", components: [{ type: MessageComponent, selector: "stream-message", inputs: ["messageInputTemplate", "mentionTemplate", "message", "enabledMessageActions", "areReactionsEnabled", "canReactToMessage", "isLastSentMessage", "canReceiveReadEvents", "mode"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i6.AsyncPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: MessageListComponent, decorators: [{
             type: Component,
             args: [{
@@ -2789,12 +3157,49 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImpor
             }], enabledMessageActionsInput: [{
                 type: Input,
                 args: ['enabledMessageActions']
+            }], mode: [{
+                type: Input
             }], class: [{
                 type: HostBinding,
                 args: ['class']
             }], scrollContainer: [{
                 type: ViewChild,
                 args: ['scrollContainer']
+            }], parentMessageElement: [{
+                type: ViewChild,
+                args: ['parentMessageElement']
+            }] } });
+
+class ThreadComponent {
+    constructor(channelService) {
+        this.channelService = channelService;
+        this.class = 'str-chat__thread';
+        this.subscriptions = [];
+        this.subscriptions.push(this.channelService.activeParentMessage$.subscribe((parentMessage) => (this.parentMessage = parentMessage)));
+    }
+    ngOnDestroy() {
+        this.subscriptions.forEach((s) => s.unsubscribe());
+    }
+    get replyCountParam() {
+        var _a;
+        return { replyCount: (_a = this.parentMessage) === null || _a === void 0 ? void 0 : _a.reply_count };
+    }
+    closeThread() {
+        void this.channelService.setAsActiveParentMessage(undefined);
+    }
+}
+ThreadComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: ThreadComponent, deps: [{ 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: "<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:replyCountParam)}}\n    </small>\n  </div>\n  <button\n    class=\"str-chat__square-button\"\n    data-testid=\"close-button\"\n    (click)=\"closeThread()\"\n  >\n    <stream-icon icon=\"close-no-outline\"></stream-icon>\n  </button>\n</div>\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", components: [{ type: IconComponent, selector: "stream-icon", inputs: ["icon", "size"] }], directives: [{ type: i1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }], pipes: { "translate": i1.TranslatePipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: ThreadComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'stream-thread',
+                    templateUrl: './thread.component.html',
+                    styles: [],
+                }]
+        }], ctorParameters: function () { return [{ type: ChannelService }]; }, propDecorators: { class: [{
+                type: HostBinding,
+                args: ['class']
             }] } });
 
 class StreamAvatarModule {
@@ -2830,7 +3235,8 @@ StreamChatModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", versio
         NotificationListComponent,
         AttachmentPreviewListComponent,
         ModalComponent,
-        TextareaDirective], imports: [CommonModule, TranslateModule, StreamAvatarModule], exports: [ChannelComponent,
+        TextareaDirective,
+        ThreadComponent], imports: [CommonModule, TranslateModule, StreamAvatarModule], exports: [ChannelComponent,
         ChannelHeaderComponent,
         ChannelListComponent,
         ChannelPreviewComponent,
@@ -2846,7 +3252,8 @@ StreamChatModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", versio
         NotificationListComponent,
         AttachmentPreviewListComponent,
         ModalComponent,
-        StreamAvatarModule] });
+        StreamAvatarModule,
+        ThreadComponent] });
 StreamChatModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: StreamChatModule, imports: [[CommonModule, TranslateModule, StreamAvatarModule], StreamAvatarModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: StreamChatModule, decorators: [{
             type: NgModule,
@@ -2869,6 +3276,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImpor
                         AttachmentPreviewListComponent,
                         ModalComponent,
                         TextareaDirective,
+                        ThreadComponent,
                     ],
                     imports: [CommonModule, TranslateModule, StreamAvatarModule],
                     exports: [
@@ -2889,6 +3297,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImpor
                         AttachmentPreviewListComponent,
                         ModalComponent,
                         StreamAvatarModule,
+                        ThreadComponent,
                     ],
                 }]
         }] });
@@ -2951,5 +3360,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AttachmentListComponent, AttachmentPreviewListComponent, AttachmentService, AutocompleteTextareaComponent, AvatarComponent, ChannelComponent, ChannelHeaderComponent, ChannelListComponent, ChannelListToggleService, ChannelPreviewComponent, ChannelService, ChatClientService, IconComponent, ImageLoadService, LoadingIndicatorComponent, MessageActionsBoxComponent, MessageComponent, MessageInputComponent, MessageInputConfigService, MessageListComponent, MessageReactionsComponent, ModalComponent, NotificationComponent, NotificationListComponent, NotificationService, StreamAutocompleteTextareaModule, StreamAvatarModule, StreamChatModule, StreamI18nService, StreamTextareaModule, TextareaComponent, TextareaDirective, ThemeService, TransliterationService, createMessagePreview, getDeviceWidth, getGroupStyles, getReadBy, getReadByText, isImageAttachment, isImageFile, parseDate, textareaInjectionToken };
+export { AttachmentListComponent, AttachmentPreviewListComponent, AttachmentService, AutocompleteTextareaComponent, AvatarComponent, ChannelComponent, ChannelHeaderComponent, ChannelListComponent, ChannelListToggleService, ChannelPreviewComponent, ChannelService, ChatClientService, IconComponent, ImageLoadService, LoadingIndicatorComponent, MessageActionsBoxComponent, MessageComponent, MessageInputComponent, MessageInputConfigService, MessageListComponent, MessageReactionsComponent, ModalComponent, NotificationComponent, NotificationListComponent, NotificationService, StreamAutocompleteTextareaModule, StreamAvatarModule, StreamChatModule, StreamI18nService, StreamTextareaModule, TextareaComponent, TextareaDirective, ThemeService, ThreadComponent, TransliterationService, createMessagePreview, getDeviceWidth, getGroupStyles, getReadBy, getReadByText, isImageAttachment, isImageFile, parseDate, textareaInjectionToken };
 //# sourceMappingURL=stream-chat-angular.js.map