stream-chat-angular 2.10.0 → 2.11.0

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

@@ -353,7 +353,7 @@
         return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
     }
 
-    var version = '2.10.0';
+    var version = '2.11.0';
 
     var NotificationService = /** @class */ (function () {
         function NotificationService() {
@@ -541,7 +541,7 @@
                     }]
             }], ctorParameters: function () { return [{ type: i0__namespace.NgZone }, { type: NotificationService }]; } });
 
-    var createMessagePreview = function (user, text, attachments, mentionedUsers) {
+    var createMessagePreview = function (user, text, attachments, mentionedUsers, parentId) {
         var clientSideId = user.id + "-" + uuid.v4();
         return {
             __html: text,
@@ -555,6 +555,7 @@
             user: user,
             attachments: attachments,
             mentioned_users: mentionedUsers,
+            parent_id: parentId,
         };
     };
 
@@ -581,31 +582,51 @@
             this.activeChannelMessagesSubject = new rxjs.BehaviorSubject([]);
             this.hasMoreChannelsSubject = new rxjs.ReplaySubject(1);
             this.activeChannelSubscriptions = [];
+            this.activeParentMessageIdSubject = new rxjs.BehaviorSubject(undefined);
+            this.activeThreadMessagesSubject = new rxjs.BehaviorSubject([]);
+            this.messagePageSize = 25;
             this.channelListSetter = function (channels) {
                 _this.channelsSubject.next(channels);
             };
             this.messageListSetter = function (messages) {
                 _this.activeChannelMessagesSubject.next(messages);
             };
+            this.threadListSetter = function (messages) {
+                _this.activeThreadMessagesSubject.next(messages);
+            };
+            this.parentMessageSetter = function (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(operators.map(function (messages) {
                 var channel = _this.activeChannelSubject.getValue();
-                return messages.map(function (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 {
-                        var formatMessage = _this.formatMessage(message);
-                        return Object.assign(Object.assign({}, formatMessage), { readBy: getReadBy(formatMessage, channel) });
-                    }
-                });
+                return messages.map(function (message) { return _this.transformToStreamMessage(message, channel); });
             }));
             this.hasMoreChannels$ = this.hasMoreChannelsSubject.asObservable();
+            this.activeParentMessageId$ =
+                this.activeParentMessageIdSubject.asObservable();
+            this.activeThreadMessages$ = this.activeThreadMessagesSubject.pipe(operators.map(function (messages) {
+                var channel = _this.activeChannelSubject.getValue();
+                return messages.map(function (message) { return _this.transformToStreamMessage(message, channel); });
+            }));
+            this.activeParentMessage$ = rxjs.combineLatest([
+                this.activeChannelMessages$,
+                this.activeParentMessageId$,
+            ]).pipe(operators.map(function (_f) {
+                var _g = __read(_f, 2), messages = _g[0], parentMessageId = _g[1];
+                if (!parentMessageId) {
+                    return undefined;
+                }
+                else {
+                    return messages.find(function (m) { return m.id === parentMessageId; });
+                }
+            }), operators.shareReplay());
+            this.chatClientService.connectionState$
+                .pipe(operators.filter(function (s) { return s === 'online'; }))
+                .subscribe(function () {
+                void _this.setAsActiveParentMessage(undefined);
+            });
         }
         ChannelService.prototype.setAsActiveChannel = function (channel) {
             var prevActiveChannel = this.activeChannelSubject.getValue();
@@ -619,25 +640,54 @@
                 void channel.markRead();
             }
             this.activeChannelMessagesSubject.next(__spreadArray([], __read(channel.state.messages)));
+            this.activeParentMessageIdSubject.next(undefined);
+            this.activeThreadMessagesSubject.next([]);
+        };
+        ChannelService.prototype.setAsActiveParentMessage = function (message) {
+            var _a;
+            return __awaiter(this, void 0, void 0, function () {
+                var activeChannel, result;
+                return __generator(this, function (_f) {
+                    switch (_f.label) {
+                        case 0:
+                            if (!!message) return [3 /*break*/, 1];
+                            this.activeParentMessageIdSubject.next(undefined);
+                            this.activeThreadMessagesSubject.next([]);
+                            return [3 /*break*/, 3];
+                        case 1:
+                            this.activeParentMessageIdSubject.next(message.id);
+                            activeChannel = this.activeChannelSubject.getValue();
+                            return [4 /*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,
+                                }))];
+                        case 2:
+                            result = _f.sent();
+                            this.activeThreadMessagesSubject.next((result === null || result === void 0 ? void 0 : result.messages) || []);
+                            _f.label = 3;
+                        case 3: return [2 /*return*/];
+                    }
+                });
+            });
         };
+        // load more thread replies
         ChannelService.prototype.loadMoreMessages = function () {
-            var _a, _b, _c, _d;
+            var _a, _b, _c, _d, _e;
             return __awaiter(this, void 0, void 0, function () {
                 var activeChnannel, lastMessageId;
-                return __generator(this, function (_e) {
-                    switch (_e.label) {
+                return __generator(this, function (_f) {
+                    switch (_f.label) {
                         case 0:
                             activeChnannel = this.activeChannelSubject.getValue();
                             lastMessageId = (_a = this.activeChannelMessagesSubject.getValue()[0]) === null || _a === void 0 ? void 0 : _a.id;
                             return [4 /*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 },
                                 }))];
                         case 1:
-                            _e.sent();
-                            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)) {
+                            _f.sent();
+                            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(__spreadArray([], __read(activeChnannel.state.messages)));
                             }
                             return [2 /*return*/];
@@ -645,11 +695,36 @@
                 });
             });
         };
+        ChannelService.prototype.loadMoreThreadReplies = function () {
+            var _a, _b;
+            return __awaiter(this, void 0, void 0, function () {
+                var activeChnannel, parentMessageId, lastMessageId;
+                return __generator(this, function (_f) {
+                    switch (_f.label) {
+                        case 0:
+                            activeChnannel = this.activeChannelSubject.getValue();
+                            parentMessageId = this.activeParentMessageIdSubject.getValue();
+                            if (!parentMessageId) {
+                                return [2 /*return*/];
+                            }
+                            lastMessageId = (_a = this.activeThreadMessagesSubject.getValue()[0]) === null || _a === void 0 ? void 0 : _a.id;
+                            return [4 /*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,
+                                }))];
+                        case 1:
+                            _f.sent();
+                            this.activeThreadMessagesSubject.next((activeChnannel === null || activeChnannel === void 0 ? void 0 : activeChnannel.state.threads[parentMessageId]) || []);
+                            return [2 /*return*/];
+                    }
+                });
+            });
+        };
         ChannelService.prototype.init = function (filters, sort, options) {
             return __awaiter(this, void 0, void 0, function () {
                 var _this = this;
-                return __generator(this, function (_e) {
-                    switch (_e.label) {
+                return __generator(this, function (_f) {
+                    switch (_f.label) {
                         case 0:
                             this.filters = filters;
                             this.options = options || {
@@ -658,12 +733,12 @@
                                 state: true,
                                 presence: true,
                                 watch: true,
-                                message_limit: 25,
+                                message_limit: this.messagePageSize,
                             };
                             this.sort = sort || { last_message_at: -1, updated_at: -1 };
                             return [4 /*yield*/, this.queryChannels()];
                         case 1:
-                            _e.sent();
+                            _f.sent();
                             this.chatClientService.notification$.subscribe(function (notification) { return void _this.handleNotification(notification); });
                             return [2 /*return*/];
                     }
@@ -673,17 +748,19 @@
         ChannelService.prototype.reset = function () {
             this.activeChannelMessagesSubject.next([]);
             this.activeChannelSubject.next(undefined);
+            this.activeParentMessageIdSubject.next(undefined);
+            this.activeThreadMessagesSubject.next([]);
             this.channelsSubject.next(undefined);
         };
         ChannelService.prototype.loadMoreChannels = function () {
             return __awaiter(this, void 0, void 0, function () {
-                return __generator(this, function (_e) {
-                    switch (_e.label) {
+                return __generator(this, function (_f) {
+                    switch (_f.label) {
                         case 0:
                             this.options.offset = this.channels.length;
                             return [4 /*yield*/, this.queryChannels()];
                         case 1:
-                            _e.sent();
+                            _f.sent();
                             return [2 /*return*/];
                     }
                 });
@@ -692,13 +769,13 @@
         ChannelService.prototype.addReaction = function (messageId, reactionType) {
             var _a;
             return __awaiter(this, void 0, void 0, function () {
-                return __generator(this, function (_e) {
-                    switch (_e.label) {
+                return __generator(this, function (_f) {
+                    switch (_f.label) {
                         case 0: return [4 /*yield*/, ((_a = this.activeChannelSubject.getValue()) === null || _a === void 0 ? void 0 : _a.sendReaction(messageId, {
                                 type: reactionType,
                             }))];
                         case 1:
-                            _e.sent();
+                            _f.sent();
                             return [2 /*return*/];
                     }
                 });
@@ -707,32 +784,33 @@
         ChannelService.prototype.removeReaction = function (messageId, reactionType) {
             var _a;
             return __awaiter(this, void 0, void 0, function () {
-                return __generator(this, function (_e) {
-                    switch (_e.label) {
+                return __generator(this, function (_f) {
+                    switch (_f.label) {
                         case 0: return [4 /*yield*/, ((_a = this.activeChannelSubject
                                 .getValue()) === null || _a === void 0 ? void 0 : _a.deleteReaction(messageId, reactionType))];
                         case 1:
-                            _e.sent();
+                            _f.sent();
                             return [2 /*return*/];
                     }
                 });
             });
         };
-        ChannelService.prototype.sendMessage = function (text, attachments, mentionedUsers) {
+        ChannelService.prototype.sendMessage = function (text, attachments, mentionedUsers, parentId) {
             if (attachments === void 0) { attachments = []; }
             if (mentionedUsers === void 0) { mentionedUsers = []; }
+            if (parentId === void 0) { parentId = undefined; }
             return __awaiter(this, void 0, void 0, function () {
                 var preview, channel;
-                return __generator(this, function (_e) {
-                    switch (_e.label) {
+                return __generator(this, function (_f) {
+                    switch (_f.label) {
                         case 0:
-                            preview = createMessagePreview(this.chatClientService.chatClient.user, text, attachments, mentionedUsers);
+                            preview = createMessagePreview(this.chatClientService.chatClient.user, text, attachments, mentionedUsers, parentId);
                             channel = this.activeChannelSubject.getValue();
                             preview.readBy = [];
                             channel.state.addMessageSorted(preview, true);
                             return [4 /*yield*/, this.sendMessageRequest(preview)];
                         case 1:
-                            _e.sent();
+                            _f.sent();
                             return [2 /*return*/];
                     }
                 });
@@ -741,14 +819,14 @@
         ChannelService.prototype.resendMessage = function (message) {
             return __awaiter(this, void 0, void 0, function () {
                 var channel;
-                return __generator(this, function (_e) {
-                    switch (_e.label) {
+                return __generator(this, function (_f) {
+                    switch (_f.label) {
                         case 0:
                             channel = this.activeChannelSubject.getValue();
                             channel.state.addMessageSorted(Object.assign(Object.assign({}, message), { errorStatusCode: undefined, status: 'sending' }), true);
                             return [4 /*yield*/, this.sendMessageRequest(message)];
                         case 1:
-                            _e.sent();
+                            _f.sent();
                             return [2 /*return*/];
                     }
                 });
@@ -756,11 +834,11 @@
         };
         ChannelService.prototype.updateMessage = function (message) {
             return __awaiter(this, void 0, void 0, function () {
-                return __generator(this, function (_e) {
-                    switch (_e.label) {
+                return __generator(this, function (_f) {
+                    switch (_f.label) {
                         case 0: return [4 /*yield*/, this.chatClientService.chatClient.updateMessage(message)];
                         case 1:
-                            _e.sent();
+                            _f.sent();
                             return [2 /*return*/];
                     }
                 });
@@ -768,11 +846,11 @@
         };
         ChannelService.prototype.deleteMessage = function (message) {
             return __awaiter(this, void 0, void 0, function () {
-                return __generator(this, function (_e) {
-                    switch (_e.label) {
+                return __generator(this, function (_f) {
+                    switch (_f.label) {
                         case 0: return [4 /*yield*/, this.chatClientService.chatClient.deleteMessage(message.id)];
                         case 1:
-                            _e.sent();
+                            _f.sent();
                             return [2 /*return*/];
                     }
                 });
@@ -781,8 +859,8 @@
         ChannelService.prototype.uploadAttachments = function (uploads) {
             return __awaiter(this, void 0, void 0, function () {
                 var result, channel, uploadResults;
-                return __generator(this, function (_e) {
-                    switch (_e.label) {
+                return __generator(this, function (_f) {
+                    switch (_f.label) {
                         case 0:
                             result = [];
                             channel = this.activeChannelSubject.getValue();
@@ -790,7 +868,7 @@
                                     ? channel.sendImage(upload.file)
                                     : channel.sendFile(upload.file); }))];
                         case 1:
-                            uploadResults = _e.sent();
+                            uploadResults = _f.sent();
                             uploadResults.forEach(function (uploadResult, i) {
                                 var file = uploads[i].file;
                                 var type = uploads[i].type;
@@ -814,15 +892,15 @@
         ChannelService.prototype.deleteAttachment = function (attachmentUpload) {
             return __awaiter(this, void 0, void 0, function () {
                 var channel;
-                return __generator(this, function (_e) {
-                    switch (_e.label) {
+                return __generator(this, function (_f) {
+                    switch (_f.label) {
                         case 0:
                             channel = this.activeChannelSubject.getValue();
                             return [4 /*yield*/, (attachmentUpload.type === 'image'
                                     ? channel.deleteImage(attachmentUpload.url)
                                     : channel.deleteFile(attachmentUpload.url))];
                         case 1:
-                            _e.sent();
+                            _f.sent();
                             return [2 /*return*/];
                     }
                 });
@@ -832,8 +910,8 @@
             return __awaiter(this, void 0, void 0, function () {
                 var activeChannel, result;
                 var _this = this;
-                return __generator(this, function (_e) {
-                    switch (_e.label) {
+                return __generator(this, function (_f) {
+                    switch (_f.label) {
                         case 0:
                             activeChannel = this.activeChannelSubject.getValue();
                             if (!activeChannel) {
@@ -850,7 +928,7 @@
                                     id: { $ne: this.chatClientService.chatClient.userID },
                                 })];
                         case 2:
-                            result = _e.sent();
+                            result = _f.sent();
                             return [2 /*return*/, Object.values(result.members)];
                     }
                 });
@@ -858,21 +936,33 @@
         };
         ChannelService.prototype.sendAction = function (messageId, formData) {
             return __awaiter(this, void 0, void 0, function () {
-                var channel, response;
-                return __generator(this, function (_e) {
-                    switch (_e.label) {
+                var channel, response, isThreadReply;
+                return __generator(this, function (_f) {
+                    switch (_f.label) {
                         case 0:
                             channel = this.activeChannelSubject.getValue();
                             return [4 /*yield*/, channel.sendAction(messageId, formData)];
                         case 1:
-                            response = _e.sent();
+                            response = _f.sent();
                             if (response === null || response === void 0 ? void 0 : response.message) {
                                 channel.state.addMessageSorted(Object.assign(Object.assign({}, response.message), { status: 'received' }));
-                                this.activeChannelMessagesSubject.next(__spreadArray([], __read(channel.state.messages)));
+                                isThreadReply = !!response.message.parent_id;
+                                isThreadReply
+                                    ? this.activeThreadMessagesSubject.next(__spreadArray([], __read(channel.state.threads[response.message.parent_id])))
+                                    : this.activeChannelMessagesSubject.next(__spreadArray([], __read(channel.state.messages)));
                             }
                             else {
                                 channel.state.removeMessage({ id: messageId });
-                                this.activeChannelMessagesSubject.next(__spreadArray([], __read(channel.state.messages)));
+                                if (this.activeChannelMessagesSubject
+                                    .getValue()
+                                    .find(function (m) { return m.id === messageId; })) {
+                                    this.activeChannelMessagesSubject.next(__spreadArray([], __read(channel.state.messages)));
+                                }
+                                else if (this.activeThreadMessagesSubject
+                                    .getValue()
+                                    .find(function (m) { return m.id === messageId; })) {
+                                    this.activeThreadMessagesSubject.next(channel.state.threads[this.activeParentMessageIdSubject.getValue()]);
+                                }
                             }
                             return [2 /*return*/];
                     }
@@ -882,36 +972,44 @@
         ChannelService.prototype.sendMessageRequest = function (preview) {
             var _a;
             return __awaiter(this, void 0, void 0, function () {
-                var channel, response, error_1, stringError, parsedError;
-                return __generator(this, function (_e) {
-                    switch (_e.label) {
+                var channel, isThreadReply, response, error_1, stringError, parsedError;
+                return __generator(this, function (_f) {
+                    switch (_f.label) {
                         case 0:
                             channel = this.activeChannelSubject.getValue();
-                            this.activeChannelMessagesSubject.next(__spreadArray([], __read(channel.state.messages)));
-                            _e.label = 1;
+                            isThreadReply = !!preview.parent_id;
+                            isThreadReply
+                                ? this.activeThreadMessagesSubject.next(__spreadArray([], __read(channel.state.threads[preview.parent_id])))
+                                : this.activeChannelMessagesSubject.next(__spreadArray([], __read(channel.state.messages)));
+                            _f.label = 1;
                         case 1:
-                            _e.trys.push([1, 3, , 4]);
+                            _f.trys.push([1, 3, , 4]);
                             return [4 /*yield*/, channel.sendMessage({
                                     text: preview.text,
                                     attachments: preview.attachments,
                                     mentioned_users: (_a = preview.mentioned_users) === null || _a === void 0 ? void 0 : _a.map(function (u) { return u.id; }),
                                     id: preview.id,
+                                    parent_id: preview.parent_id,
                                 })];
                         case 2:
-                            response = _e.sent();
+                            response = _f.sent();
                             if (response === null || response === void 0 ? void 0 : response.message) {
                                 channel.state.addMessageSorted(Object.assign(Object.assign({}, response.message), { status: 'received' }), true);
-                                this.activeChannelMessagesSubject.next(__spreadArray([], __read(channel.state.messages)));
+                                isThreadReply
+                                    ? this.activeThreadMessagesSubject.next(__spreadArray([], __read(channel.state.threads[preview.parent_id])))
+                                    : this.activeChannelMessagesSubject.next(__spreadArray([], __read(channel.state.messages)));
                             }
                             return [3 /*break*/, 4];
                         case 3:
-                            error_1 = _e.sent();
+                            error_1 = _f.sent();
                             stringError = JSON.stringify(error_1);
                             parsedError = stringError
                                 ? JSON.parse(stringError)
                                 : {};
                             channel.state.addMessageSorted(Object.assign(Object.assign({}, preview), { errorStatusCode: parsedError.status || undefined, status: 'failed' }), true);
-                            this.activeChannelMessagesSubject.next(__spreadArray([], __read(channel.state.messages)));
+                            isThreadReply
+                                ? this.activeThreadMessagesSubject.next(__spreadArray([], __read(channel.state.threads[preview.parent_id])))
+                                : this.activeChannelMessagesSubject.next(__spreadArray([], __read(channel.state.messages)));
                             return [3 /*break*/, 4];
                         case 4: return [2 /*return*/];
                     }
@@ -920,53 +1018,53 @@
         };
         ChannelService.prototype.handleNotification = function (notification) {
             return __awaiter(this, void 0, void 0, function () {
-                var _e;
+                var _f;
                 var _this = this;
-                return __generator(this, function (_f) {
-                    switch (_f.label) {
+                return __generator(this, function (_g) {
+                    switch (_g.label) {
                         case 0:
-                            _e = notification.eventType;
-                            switch (_e) {
+                            _f = notification.eventType;
+                            switch (_f) {
                                 case 'notification.message_new': return [3 /*break*/, 1];
                                 case 'notification.added_to_channel': return [3 /*break*/, 3];
                                 case 'notification.removed_from_channel': return [3 /*break*/, 5];
                             }
                             return [3 /*break*/, 6];
                         case 1: return [4 /*yield*/, this.ngZone.run(function () { return __awaiter(_this, void 0, void 0, function () {
-                                return __generator(this, function (_e) {
-                                    switch (_e.label) {
+                                return __generator(this, function (_f) {
+                                    switch (_f.label) {
                                         case 0:
                                             if (!this.customNewMessageNotificationHandler) return [3 /*break*/, 1];
                                             this.customNewMessageNotificationHandler(notification, this.channelListSetter);
                                             return [3 /*break*/, 3];
                                         case 1: return [4 /*yield*/, this.handleNewMessageNotification(notification)];
                                         case 2:
-                                            _e.sent();
-                                            _e.label = 3;
+                                            _f.sent();
+                                            _f.label = 3;
                                         case 3: return [2 /*return*/];
                                     }
                                 });
                             }); })];
                         case 2:
-                            _f.sent();
+                            _g.sent();
                             return [3 /*break*/, 6];
                         case 3: return [4 /*yield*/, this.ngZone.run(function () { return __awaiter(_this, void 0, void 0, function () {
-                                return __generator(this, function (_e) {
-                                    switch (_e.label) {
+                                return __generator(this, function (_f) {
+                                    switch (_f.label) {
                                         case 0:
                                             if (!this.customAddedToChannelNotificationHandler) return [3 /*break*/, 1];
                                             this.customAddedToChannelNotificationHandler(notification, this.channelListSetter);
                                             return [3 /*break*/, 3];
                                         case 1: return [4 /*yield*/, this.handleAddedToChannelNotification(notification)];
                                         case 2:
-                                            _e.sent();
-                                            _e.label = 3;
+                                            _f.sent();
+                                            _f.label = 3;
                                         case 3: return [2 /*return*/];
                                     }
                                 });
                             }); })];
                         case 4:
-                            _f.sent();
+                            _g.sent();
                             return [3 /*break*/, 6];
                         case 5:
                             {
@@ -979,7 +1077,7 @@
                                     }
                                 });
                             }
-                            _f.label = 6;
+                            _g.label = 6;
                         case 6: return [2 /*return*/];
                     }
                 });
@@ -991,11 +1089,11 @@
         };
         ChannelService.prototype.handleNewMessageNotification = function (notification) {
             return __awaiter(this, void 0, void 0, function () {
-                return __generator(this, function (_e) {
-                    switch (_e.label) {
+                return __generator(this, function (_f) {
+                    switch (_f.label) {
                         case 0: return [4 /*yield*/, this.addChannelFromNotification(notification)];
                         case 1:
-                            _e.sent();
+                            _f.sent();
                             return [2 /*return*/];
                     }
                 });
@@ -1003,11 +1101,11 @@
         };
         ChannelService.prototype.handleAddedToChannelNotification = function (notification) {
             return __awaiter(this, void 0, void 0, function () {
-                return __generator(this, function (_e) {
-                    switch (_e.label) {
+                return __generator(this, function (_f) {
+                    switch (_f.label) {
                         case 0: return [4 /*yield*/, this.addChannelFromNotification(notification)];
                         case 1:
-                            _e.sent();
+                            _f.sent();
                             return [2 /*return*/];
                     }
                 });
@@ -1017,13 +1115,13 @@
             var _a, _b;
             return __awaiter(this, void 0, void 0, function () {
                 var channel;
-                return __generator(this, function (_e) {
-                    switch (_e.label) {
+                return __generator(this, function (_f) {
+                    switch (_f.label) {
                         case 0:
                             channel = this.chatClientService.chatClient.channel((_a = notification.event.channel) === null || _a === void 0 ? void 0 : _a.type, (_b = notification.event.channel) === null || _b === void 0 ? void 0 : _b.id);
                             return [4 /*yield*/, channel.watch()];
                         case 1:
-                            _e.sent();
+                            _f.sent();
                             this.watchForChannelEvents(channel);
                             this.channelsSubject.next(__spreadArray([
                                 channel
@@ -1044,9 +1142,11 @@
         };
         ChannelService.prototype.watchForActiveChannelEvents = function (channel) {
             var _this = this;
-            this.activeChannelSubscriptions.push(channel.on('message.new', function () {
+            this.activeChannelSubscriptions.push(channel.on('message.new', function (event) {
                 _this.ngZone.run(function () {
-                    _this.activeChannelMessagesSubject.next(__spreadArray([], __read(channel.state.messages)));
+                    event.message && event.message.parent_id
+                        ? _this.activeThreadMessagesSubject.next(__spreadArray([], __read(channel.state.threads[event.message.parent_id])))
+                        : _this.activeChannelMessagesSubject.next(__spreadArray([], __read(channel.state.messages)));
                     _this.activeChannel$.pipe(operators.first()).subscribe(function (c) {
                         if (_this.canSendReadEvents) {
                             void (c === null || c === void 0 ? void 0 : c.markRead());
@@ -1076,11 +1176,16 @@
         ChannelService.prototype.messageUpdated = function (event) {
             var _this = this;
             this.ngZone.run(function () {
-                var messages = _this.activeChannelMessagesSubject.getValue();
+                var isThreadReply = event.message && event.message.parent_id;
+                var messages = isThreadReply
+                    ? _this.activeThreadMessagesSubject.getValue()
+                    : _this.activeChannelMessagesSubject.getValue();
                 var messageIndex = messages.findIndex(function (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(__spreadArray([], __read(messages)));
+                    isThreadReply
+                        ? _this.activeThreadMessagesSubject.next(__spreadArray([], __read(messages)))
+                        : _this.activeChannelMessagesSubject.next(__spreadArray([], __read(messages)));
                 }
             });
         };
@@ -1088,8 +1193,11 @@
             var _this = this;
             this.ngZone.run(function () {
                 var _a, _b, _c, _d;
+                var isThreadMessage = e.message && e.message.parent_id;
                 var messages;
-                _this.activeChannelMessages$
+                (isThreadMessage
+                    ? _this.activeThreadMessages$
+                    : _this.activeChannelMessages$)
                     .pipe(operators.first())
                     .subscribe(function (m) { return (messages = m); });
                 var message = messages.find(function (m) { var _a; return m.id === ((_a = e === null || e === void 0 ? void 0 : e.message) === null || _a === void 0 ? void 0 : _a.id); });
@@ -1100,7 +1208,9 @@
                 message.reaction_scores = Object.assign({}, (_b = e.message) === null || _b === void 0 ? void 0 : _b.reaction_scores);
                 message.latest_reactions = __spreadArray([], __read((((_c = e.message) === null || _c === void 0 ? void 0 : _c.latest_reactions) || [])));
                 message.own_reactions = __spreadArray([], __read((((_d = e.message) === null || _d === void 0 ? void 0 : _d.own_reactions) || [])));
-                _this.activeChannelMessagesSubject.next(__spreadArray([], __read(messages)));
+                isThreadMessage
+                    ? _this.activeThreadMessagesSubject.next(__spreadArray([], __read(messages)))
+                    : _this.activeChannelMessagesSubject.next(__spreadArray([], __read(messages)));
             });
         };
         ChannelService.prototype.formatMessage = function (message) {
@@ -1130,13 +1240,13 @@
             return __awaiter(this, void 0, void 0, function () {
                 var channels, prevChannels, error_2;
                 var _this = this;
-                return __generator(this, function (_e) {
-                    switch (_e.label) {
+                return __generator(this, function (_f) {
+                    switch (_f.label) {
                         case 0:
-                            _e.trys.push([0, 2, , 3]);
+                            _f.trys.push([0, 2, , 3]);
                             return [4 /*yield*/, this.chatClientService.chatClient.queryChannels(this.filters, this.sort, this.options)];
                         case 1:
-                            channels = _e.sent();
+                            channels = _f.sent();
                             channels.forEach(function (c) { return _this.watchForChannelEvents(c); });
                             prevChannels = this.channelsSubject.getValue() || [];
                             this.channelsSubject.next(__spreadArray(__spreadArray([], __read(prevChannels)), __read(channels)));
@@ -1146,7 +1256,7 @@
                             this.hasMoreChannelsSubject.next(channels.length >= this.options.limit);
                             return [3 /*break*/, 3];
                         case 2:
-                            error_2 = _e.sent();
+                            error_2 = _f.sent();
                             this.channelsSubject.error(error_2);
                             return [3 /*break*/, 3];
                         case 3: return [2 /*return*/];
@@ -1161,7 +1271,7 @@
                     case 'message.new': {
                         _this.ngZone.run(function () {
                             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);
@@ -1172,7 +1282,7 @@
                     case 'channel.hidden': {
                         _this.ngZone.run(function () {
                             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);
@@ -1183,7 +1293,7 @@
                     case 'channel.deleted': {
                         _this.ngZone.run(function () {
                             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);
@@ -1194,7 +1304,7 @@
                     case 'channel.visible': {
                         _this.ngZone.run(function () {
                             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);
@@ -1205,7 +1315,7 @@
                     case 'channel.updated': {
                         _this.ngZone.run(function () {
                             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);
@@ -1216,7 +1326,7 @@
                     case 'channel.truncated': {
                         _this.ngZone.run(function () {
                             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);
@@ -1257,6 +1367,7 @@
                 }
             }
         };
+        // truncate active thread as well
         ChannelService.prototype.handleChannelTruncate = function (event) {
             var _a, _b;
             var channelIndex = this.channels.findIndex(function (c) { return c.cid === event.channel.cid; });
@@ -1268,6 +1379,8 @@
                     channel.state.messages = [];
                     this.activeChannelSubject.next(channel);
                     this.activeChannelMessagesSubject.next([]);
+                    this.activeParentMessageIdSubject.next(undefined);
+                    this.activeThreadMessagesSubject.next([]);
                 }
             }
         };
@@ -1291,6 +1404,20 @@
             enumerable: false,
             configurable: true
         });
+        ChannelService.prototype.transformToStreamMessage = function (message, channel) {
+            var 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 {
+                var formatMessage = this.formatMessage(message);
+                return Object.assign(Object.assign({}, formatMessage), { readBy: isThreadMessage ? [] : getReadBy(formatMessage, channel) });
+            }
+        };
         return ChannelService;
     }());
     ChannelService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: ChannelService, deps: [{ token: ChatClientService }, { token: i0__namespace.NgZone }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
@@ -1649,6 +1776,7 @@
             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',
@@ -1699,6 +1827,7 @@
             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}}',
         },
     };
@@ -1764,7 +1893,7 @@
         return IconComponent;
     }());
     IconComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: IconComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    IconComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: IconComponent, selector: "stream-icon", inputs: { icon: "icon", size: "size" }, ngImport: i0__namespace, template: "<svg\n  data-testid=\"action-icon\"\n  *ngIf=\"icon === 'action-icon'\"\n  height=\"4\"\n  viewBox=\"0 0 11 4\"\n  width=\"11\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n>\n  <path\n    d=\"M1.5 3a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm4 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm4 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z\"\n    fillRule=\"nonzero\"\n  />\n</svg>\n<svg\n  *ngIf=\"icon === 'delivered-icon'\"\n  height=\"16\"\n  width=\"16\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n  data-testid=\"delivered-icon\"\n>\n  <path\n    d=\"M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0zm3.72 6.633a.955.955 0 1 0-1.352-1.352L6.986 8.663 5.633 7.31A.956.956 0 1 0 4.28 8.663l2.029 2.028a.956.956 0 0 0 1.353 0l4.058-4.058z\"\n    fill=\"#006CFF\"\n    fillRule=\"evenodd\"\n  />\n</svg>\n<svg\n  *ngIf=\"icon === 'reaction-icon'\"\n  height=\"12\"\n  viewBox=\"0 0 12 12\"\n  width=\"12\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n  data-testid=\"reaction-icon\"\n>\n  <g clipRule=\"evenodd\" fillRule=\"evenodd\">\n    <path\n      d=\"M6 1.2C3.3 1.2 1.2 3.3 1.2 6c0 2.7 2.1 4.8 4.8 4.8 2.7 0 4.8-2.1 4.8-4.8 0-2.7-2.1-4.8-4.8-4.8zM0 6c0-3.3 2.7-6 6-6s6 2.7 6 6-2.7 6-6 6-6-2.7-6-6z\"\n    ></path>\n    <path\n      d=\"M5.4 4.5c0 .5-.4.9-.9.9s-.9-.4-.9-.9.4-.9.9-.9.9.4.9.9zM8.4 4.5c0 .5-.4.9-.9.9s-.9-.4-.9-.9.4-.9.9-.9.9.4.9.9zM3.3 6.7c.3-.2.6-.1.8.1.3.4.8.9 1.5 1 .6.2 1.4.1 2.4-1 .2-.2.6-.3.8 0 .2.2.3.6 0 .8-1.1 1.3-2.4 1.7-3.5 1.5-1-.2-1.8-.9-2.2-1.5-.2-.3-.1-.7.2-.9z\"\n    ></path>\n  </g>\n</svg>\n<svg\n  data-testid=\"connection-error\"\n  *ngIf=\"icon === 'connection-error'\"\n  width=\"78px\"\n  height=\"78px\"\n  viewBox=\"0 0 78 78\"\n  version=\"1.1\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n  xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n>\n  <!-- Generator: Sketch 52.6 (67491) - http://www.bohemiancoding.com/sketch -->\n  <title>Combined Shape</title>\n  <desc>Created with Sketch.</desc>\n  <g\n    id=\"Interactions\"\n    stroke=\"none\"\n    stroke-width=\"1\"\n    fill=\"none\"\n    fill-rule=\"evenodd\"\n  >\n    <g\n      id=\"Connection-Error-_-Connectivity\"\n      transform=\"translate(-270.000000, -30.000000)\"\n      fill=\"#CF1F25\"\n    >\n      <g\n        id=\"109-network-connection\"\n        transform=\"translate(270.000000, 30.000000)\"\n      >\n        <path\n          d=\"M66.4609744,11.414231 C81.6225232,26.5757798 81.6225232,51.157545 66.4609744,66.3188467 C51.2994256,81.4803954 26.7176604,81.4803954 11.5563587,66.3188467 C-3.60519004,51.1572979 -3.60519004,26.5755327 11.5563587,11.414231 C26.7179075,-3.74731776 51.2996727,-3.74731776 66.4609744,11.414231 Z M54.7853215,45.8823776 L54.7853215,40.5882574 C54.7853215,39.613638 53.9952341,38.8235506 53.0206147,38.8235506 L44.9576695,38.8235506 L41.428256,42.3529641 L51.255555,42.3529641 L51.255555,45.8823776 L54.7853215,45.8823776 Z M40.6659027,43.1153174 L37.8988425,45.8823776 L40.6659027,45.8823776 L40.6659027,43.1153174 Z M51.1764962,56.4702653 L58.2353232,56.4702653 C59.2099355,56.4702653 60.00003,55.6801708 60.00003,54.7055585 L60.00003,51.176145 C60.00003,50.2015327 59.2099355,49.4114382 58.2353232,49.4114382 L51.1764962,49.4114382 C50.2018839,49.4114382 49.4117894,50.2015327 49.4117894,51.176145 L49.4117894,54.7055585 C49.4117894,55.6801708 50.2018839,56.4702653 51.1764962,56.4702653 Z M35.2941353,56.4702653 L42.3529624,56.4702653 C43.3275746,56.4702653 44.1176691,55.6801708 44.1176691,54.7055585 L44.1176691,51.176145 C44.1176691,50.2015327 43.3275746,49.4114382 42.3529624,49.4114382 L35.2941353,49.4114382 C34.319523,49.4114382 33.5294285,50.2015327 33.5294285,51.176145 L33.5294285,54.7055585 C33.5294285,55.6801708 34.319523,56.4702653 35.2941353,56.4702653 Z M56.6964989,19.0874231 C56.007381,18.3985134 54.8903216,18.3985134 54.2012036,19.087423 L45.882376,27.4062507 L45.882376,19.4117761 C45.882376,18.4371568 45.0922885,17.6470693 44.1176692,17.6470693 L33.5294286,17.6470693 C32.5548092,17.6470694 31.7647218,18.4371568 31.7647218,19.4117761 L31.7647218,30.0000167 C31.7647219,30.9746363 32.5548092,31.7647237 33.5294285,31.7647237 L41.5239031,31.7647237 L34.4650761,38.8235508 L24.7058947,38.8235508 C23.7312753,38.8235508 22.9411879,39.6136382 22.9411879,40.5882575 L22.9411879,45.8823778 L26.4706014,45.8823778 L26.4706014,42.3529643 L30.9356624,42.3529643 L23.8768354,49.4117914 L19.4117743,49.4117914 C18.4371549,49.4117914 17.6470675,50.2018788 17.6470675,51.1764981 L17.6470675,54.7059117 C17.6504049,54.9674302 17.7129076,55.2248042 17.8298886,55.4587302 L16.4456526,56.8429662 C15.7446193,57.5200453 15.7252005,58.6372282 16.4022825,59.3382615 C17.0793616,60.0392948 18.1965445,60.0587136 18.8975778,59.3816316 C18.9122847,59.3674273 18.9267436,59.3529684 18.940948,59.3382615 L56.6964963,21.5830662 C57.3856425,20.8939094 57.3856425,19.7765747 56.6964963,19.0874179 Z\"\n          id=\"Combined-Shape\"\n        ></path>\n      </g>\n    </g>\n  </g>\n</svg>\n<svg\n  *ngIf=\"icon === 'send'\"\n  data-testid=\"send\"\n  height=\"17\"\n  viewBox=\"0 0 18 17\"\n  width=\"18\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n>\n  <title translate>streamChat.Send</title>\n  <path\n    d=\"M0 17.015l17.333-8.508L0 0v6.617l12.417 1.89L0 10.397z\"\n    fill=\"#006cff\"\n    fillRule=\"evenodd\"\n  />\n</svg>\n<svg\n  *ngIf=\"icon === 'file-upload'\"\n  data-testid=\"file-upload\"\n  height=\"14\"\n  width=\"14\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n>\n  <title translate>streamChat.Attach files</title>\n  <path\n    d=\"M1.667.333h10.666c.737 0 1.334.597 1.334 1.334v10.666c0 .737-.597 1.334-1.334 1.334H1.667a1.333 1.333 0 0 1-1.334-1.334V1.667C.333.93.93.333 1.667.333zm2 1.334a1.667 1.667 0 1 0 0 3.333 1.667 1.667 0 0 0 0-3.333zm-2 9.333v1.333h10.666v-4l-2-2-4 4-2-2L1.667 11z\"\n    fillRule=\"nonzero\"\n  />\n</svg>\n<svg\n  data-testid=\"retry\"\n  *ngIf=\"icon === 'retry'\"\n  width=\"22\"\n  height=\"20\"\n  viewBox=\"0 0 22 20\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n>\n  <path\n    d=\"M20 5.535V2a1 1 0 0 1 2 0v6a1 1 0 0 1-1 1h-6a1 1 0 0 1 0-2h3.638l-2.975-2.653a8 8 0 1 0 1.884 8.32 1 1 0 1 1 1.886.666A10 10 0 1 1 5.175 1.245c3.901-2.15 8.754-1.462 11.88 1.667L20 5.535z\"\n    fill=\"#FFF\"\n    fill-rule=\"nonzero\"\n  />\n</svg>\n<svg\n  *ngIf=\"icon === 'close'\"\n  data-testid=\"close\"\n  width=\"28\"\n  height=\"28\"\n  viewBox=\"0 0 28 28\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n  xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n>\n  <defs>\n    <path\n      d=\"M465 5c5.53 0 10 4.47 10 10s-4.47 10-10 10-10-4.47-10-10 4.47-10 10-10zm3.59 5L465 13.59 461.41 10 460 11.41l3.59 3.59-3.59 3.59 1.41 1.41 3.59-3.59 3.59 3.59 1.41-1.41-3.59-3.59 3.59-3.59-1.41-1.41z\"\n      id=\"b\"\n    />\n    <filter\n      x=\"-30%\"\n      y=\"-30%\"\n      width=\"160%\"\n      height=\"160%\"\n      filterUnits=\"objectBoundingBox\"\n      id=\"a\"\n    >\n      <feOffset in=\"SourceAlpha\" result=\"shadowOffsetOuter1\" />\n      <feGaussianBlur\n        stdDeviation=\"2\"\n        in=\"shadowOffsetOuter1\"\n        result=\"shadowBlurOuter1\"\n      />\n      <feColorMatrix\n        values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0\"\n        in=\"shadowBlurOuter1\"\n      />\n    </filter>\n  </defs>\n  <g transform=\"translate(-451 -1)\" fill-rule=\"nonzero\" fill=\"none\">\n    <use fill=\"#000\" filter=\"url(#a)\" xlink:href=\"#b\" />\n    <use fill=\"#FFF\" fill-rule=\"evenodd\" xlink:href=\"#b\" />\n  </g>\n</svg>\n<svg\n  *ngIf=\"icon === 'file'\"\n  data-testid=\"file\"\n  className=\"rfu-file-icon--small fa-file-fallback\"\n  [attr.height]=\"size || 20\"\n  [attr.width]=\"size || 20\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n  viewBox=\"0 0 384 512\"\n>\n  <path\n    d=\"M369.9 97.9L286 14C277 5 264.8-.1 252.1-.1H48C21.5 0 0 21.5 0 48v416c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48V131.9c0-12.7-5.1-25-14.1-34zM332.1 128H256V51.9l76.1 76.1zM48 464V48h160v104c0 13.3 10.7 24 24 24h104v288H48z\"\n    fill=\"#414D54\"\n  />\n</svg>\n", directives: [{ type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i10__namespace.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }] });
+    IconComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: IconComponent, selector: "stream-icon", inputs: { icon: "icon", size: "size" }, ngImport: i0__namespace, template: "<svg\n  data-testid=\"action-icon\"\n  *ngIf=\"icon === 'action-icon'\"\n  height=\"4\"\n  viewBox=\"0 0 11 4\"\n  width=\"11\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n>\n  <path\n    d=\"M1.5 3a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm4 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm4 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z\"\n    fillRule=\"nonzero\"\n  />\n</svg>\n<svg\n  *ngIf=\"icon === 'delivered-icon'\"\n  height=\"16\"\n  width=\"16\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n  data-testid=\"delivered-icon\"\n>\n  <path\n    d=\"M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0zm3.72 6.633a.955.955 0 1 0-1.352-1.352L6.986 8.663 5.633 7.31A.956.956 0 1 0 4.28 8.663l2.029 2.028a.956.956 0 0 0 1.353 0l4.058-4.058z\"\n    fill=\"#006CFF\"\n    fillRule=\"evenodd\"\n  />\n</svg>\n<svg\n  *ngIf=\"icon === 'reaction-icon'\"\n  height=\"12\"\n  viewBox=\"0 0 12 12\"\n  width=\"12\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n  data-testid=\"reaction-icon\"\n>\n  <g clipRule=\"evenodd\" fillRule=\"evenodd\">\n    <path\n      d=\"M6 1.2C3.3 1.2 1.2 3.3 1.2 6c0 2.7 2.1 4.8 4.8 4.8 2.7 0 4.8-2.1 4.8-4.8 0-2.7-2.1-4.8-4.8-4.8zM0 6c0-3.3 2.7-6 6-6s6 2.7 6 6-2.7 6-6 6-6-2.7-6-6z\"\n    ></path>\n    <path\n      d=\"M5.4 4.5c0 .5-.4.9-.9.9s-.9-.4-.9-.9.4-.9.9-.9.9.4.9.9zM8.4 4.5c0 .5-.4.9-.9.9s-.9-.4-.9-.9.4-.9.9-.9.9.4.9.9zM3.3 6.7c.3-.2.6-.1.8.1.3.4.8.9 1.5 1 .6.2 1.4.1 2.4-1 .2-.2.6-.3.8 0 .2.2.3.6 0 .8-1.1 1.3-2.4 1.7-3.5 1.5-1-.2-1.8-.9-2.2-1.5-.2-.3-.1-.7.2-.9z\"\n    ></path>\n  </g>\n</svg>\n<svg\n  data-testid=\"connection-error\"\n  *ngIf=\"icon === 'connection-error'\"\n  width=\"78px\"\n  height=\"78px\"\n  viewBox=\"0 0 78 78\"\n  version=\"1.1\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n  xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n>\n  <!-- Generator: Sketch 52.6 (67491) - http://www.bohemiancoding.com/sketch -->\n  <title>Combined Shape</title>\n  <desc>Created with Sketch.</desc>\n  <g\n    id=\"Interactions\"\n    stroke=\"none\"\n    stroke-width=\"1\"\n    fill=\"none\"\n    fill-rule=\"evenodd\"\n  >\n    <g\n      id=\"Connection-Error-_-Connectivity\"\n      transform=\"translate(-270.000000, -30.000000)\"\n      fill=\"#CF1F25\"\n    >\n      <g\n        id=\"109-network-connection\"\n        transform=\"translate(270.000000, 30.000000)\"\n      >\n        <path\n          d=\"M66.4609744,11.414231 C81.6225232,26.5757798 81.6225232,51.157545 66.4609744,66.3188467 C51.2994256,81.4803954 26.7176604,81.4803954 11.5563587,66.3188467 C-3.60519004,51.1572979 -3.60519004,26.5755327 11.5563587,11.414231 C26.7179075,-3.74731776 51.2996727,-3.74731776 66.4609744,11.414231 Z M54.7853215,45.8823776 L54.7853215,40.5882574 C54.7853215,39.613638 53.9952341,38.8235506 53.0206147,38.8235506 L44.9576695,38.8235506 L41.428256,42.3529641 L51.255555,42.3529641 L51.255555,45.8823776 L54.7853215,45.8823776 Z M40.6659027,43.1153174 L37.8988425,45.8823776 L40.6659027,45.8823776 L40.6659027,43.1153174 Z M51.1764962,56.4702653 L58.2353232,56.4702653 C59.2099355,56.4702653 60.00003,55.6801708 60.00003,54.7055585 L60.00003,51.176145 C60.00003,50.2015327 59.2099355,49.4114382 58.2353232,49.4114382 L51.1764962,49.4114382 C50.2018839,49.4114382 49.4117894,50.2015327 49.4117894,51.176145 L49.4117894,54.7055585 C49.4117894,55.6801708 50.2018839,56.4702653 51.1764962,56.4702653 Z M35.2941353,56.4702653 L42.3529624,56.4702653 C43.3275746,56.4702653 44.1176691,55.6801708 44.1176691,54.7055585 L44.1176691,51.176145 C44.1176691,50.2015327 43.3275746,49.4114382 42.3529624,49.4114382 L35.2941353,49.4114382 C34.319523,49.4114382 33.5294285,50.2015327 33.5294285,51.176145 L33.5294285,54.7055585 C33.5294285,55.6801708 34.319523,56.4702653 35.2941353,56.4702653 Z M56.6964989,19.0874231 C56.007381,18.3985134 54.8903216,18.3985134 54.2012036,19.087423 L45.882376,27.4062507 L45.882376,19.4117761 C45.882376,18.4371568 45.0922885,17.6470693 44.1176692,17.6470693 L33.5294286,17.6470693 C32.5548092,17.6470694 31.7647218,18.4371568 31.7647218,19.4117761 L31.7647218,30.0000167 C31.7647219,30.9746363 32.5548092,31.7647237 33.5294285,31.7647237 L41.5239031,31.7647237 L34.4650761,38.8235508 L24.7058947,38.8235508 C23.7312753,38.8235508 22.9411879,39.6136382 22.9411879,40.5882575 L22.9411879,45.8823778 L26.4706014,45.8823778 L26.4706014,42.3529643 L30.9356624,42.3529643 L23.8768354,49.4117914 L19.4117743,49.4117914 C18.4371549,49.4117914 17.6470675,50.2018788 17.6470675,51.1764981 L17.6470675,54.7059117 C17.6504049,54.9674302 17.7129076,55.2248042 17.8298886,55.4587302 L16.4456526,56.8429662 C15.7446193,57.5200453 15.7252005,58.6372282 16.4022825,59.3382615 C17.0793616,60.0392948 18.1965445,60.0587136 18.8975778,59.3816316 C18.9122847,59.3674273 18.9267436,59.3529684 18.940948,59.3382615 L56.6964963,21.5830662 C57.3856425,20.8939094 57.3856425,19.7765747 56.6964963,19.0874179 Z\"\n          id=\"Combined-Shape\"\n        ></path>\n      </g>\n    </g>\n  </g>\n</svg>\n<svg\n  *ngIf=\"icon === 'send'\"\n  data-testid=\"send\"\n  height=\"17\"\n  viewBox=\"0 0 18 17\"\n  width=\"18\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n>\n  <title translate>streamChat.Send</title>\n  <path\n    d=\"M0 17.015l17.333-8.508L0 0v6.617l12.417 1.89L0 10.397z\"\n    fill=\"#006cff\"\n    fillRule=\"evenodd\"\n  />\n</svg>\n<svg\n  *ngIf=\"icon === 'file-upload'\"\n  data-testid=\"file-upload\"\n  height=\"14\"\n  width=\"14\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n>\n  <title translate>streamChat.Attach files</title>\n  <path\n    d=\"M1.667.333h10.666c.737 0 1.334.597 1.334 1.334v10.666c0 .737-.597 1.334-1.334 1.334H1.667a1.333 1.333 0 0 1-1.334-1.334V1.667C.333.93.93.333 1.667.333zm2 1.334a1.667 1.667 0 1 0 0 3.333 1.667 1.667 0 0 0 0-3.333zm-2 9.333v1.333h10.666v-4l-2-2-4 4-2-2L1.667 11z\"\n    fillRule=\"nonzero\"\n  />\n</svg>\n<svg\n  data-testid=\"retry\"\n  *ngIf=\"icon === 'retry'\"\n  width=\"22\"\n  height=\"20\"\n  viewBox=\"0 0 22 20\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n>\n  <path\n    d=\"M20 5.535V2a1 1 0 0 1 2 0v6a1 1 0 0 1-1 1h-6a1 1 0 0 1 0-2h3.638l-2.975-2.653a8 8 0 1 0 1.884 8.32 1 1 0 1 1 1.886.666A10 10 0 1 1 5.175 1.245c3.901-2.15 8.754-1.462 11.88 1.667L20 5.535z\"\n    fill=\"#FFF\"\n    fill-rule=\"nonzero\"\n  />\n</svg>\n<svg\n  *ngIf=\"icon === 'close'\"\n  data-testid=\"close\"\n  width=\"28\"\n  height=\"28\"\n  viewBox=\"0 0 28 28\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n  xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n>\n  <defs>\n    <path\n      d=\"M465 5c5.53 0 10 4.47 10 10s-4.47 10-10 10-10-4.47-10-10 4.47-10 10-10zm3.59 5L465 13.59 461.41 10 460 11.41l3.59 3.59-3.59 3.59 1.41 1.41 3.59-3.59 3.59 3.59 1.41-1.41-3.59-3.59 3.59-3.59-1.41-1.41z\"\n      id=\"b\"\n    />\n    <filter\n      x=\"-30%\"\n      y=\"-30%\"\n      width=\"160%\"\n      height=\"160%\"\n      filterUnits=\"objectBoundingBox\"\n      id=\"a\"\n    >\n      <feOffset in=\"SourceAlpha\" result=\"shadowOffsetOuter1\" />\n      <feGaussianBlur\n        stdDeviation=\"2\"\n        in=\"shadowOffsetOuter1\"\n        result=\"shadowBlurOuter1\"\n      />\n      <feColorMatrix\n        values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0\"\n        in=\"shadowBlurOuter1\"\n      />\n    </filter>\n  </defs>\n  <g transform=\"translate(-451 -1)\" fill-rule=\"nonzero\" fill=\"none\">\n    <use fill=\"#000\" filter=\"url(#a)\" xlink:href=\"#b\" />\n    <use fill=\"#FFF\" fill-rule=\"evenodd\" xlink:href=\"#b\" />\n  </g>\n</svg>\n<svg\n  *ngIf=\"icon === 'file'\"\n  data-testid=\"file\"\n  className=\"rfu-file-icon--small fa-file-fallback\"\n  [attr.height]=\"size || 20\"\n  [attr.width]=\"size || 20\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n  viewBox=\"0 0 384 512\"\n>\n  <path\n    d=\"M369.9 97.9L286 14C277 5 264.8-.1 252.1-.1H48C21.5 0 0 21.5 0 48v416c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48V131.9c0-12.7-5.1-25-14.1-34zM332.1 128H256V51.9l76.1 76.1zM48 464V48h160v104c0 13.3 10.7 24 24 24h104v288H48z\"\n    fill=\"#414D54\"\n  />\n</svg>\n<svg\n  *ngIf=\"icon === 'reply'\"\n  data-testid=\"reply\"\n  height=\"15\"\n  width=\"18\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n>\n  <path\n    d=\"M.56 10.946H.06l-.002-.498L.025.92a.5.5 0 1 1 1-.004l.032 9.029H9.06v-4l9 4.5-9 4.5v-4H.56z\"\n    fillRule=\"nonzero\"\n  />\n</svg>\n<svg\n  data-testid=\"close-no-outline\"\n  *ngIf=\"icon === 'close-no-outline'\"\n  height=\"10\"\n  width=\"10\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n>\n  <path\n    d=\"M9.916 1.027L8.973.084 5 4.058 1.027.084l-.943.943L4.058 5 .084 8.973l.943.943L5 5.942l3.973 3.974.943-.943L5.942 5z\"\n    fillRule=\"evenodd\"\n  />\n</svg>\n<svg\n  height=\"10\"\n  width=\"14\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n  data-testid=\"reply-in-thread\"\n  *ngIf=\"icon === 'reply-in-thread'\"\n>\n  <path\n    d=\"M8.516 3c4.78 0 4.972 6.5 4.972 6.5-1.6-2.906-2.847-3.184-4.972-3.184v2.872L3.772 4.994 8.516.5V3zM.484 5l4.5-4.237v1.78L2.416 5l2.568 2.125v1.828L.484 5z\"\n    fillRule=\"evenodd\"\n  />\n</svg>\n", directives: [{ type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i10__namespace.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: IconComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -1962,6 +2091,7 @@
             this.componentFactoryResolver = componentFactoryResolver;
             this.cdRef = cdRef;
             this.chatClient = chatClient;
+            this.mode = 'main';
             this.messageUpdate = new i0.EventEmitter();
             this.textareaValue = '';
             this.mentionedUsers = [];
@@ -1982,11 +2112,8 @@
                     _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(function (appSettings) { return (_this.appSettings = appSettings); }));
@@ -2038,13 +2165,16 @@
             if (changes.mentionScope) {
                 this.configService.mentionScope = this.mentionScope;
             }
+            if (changes.mode) {
+                this.setCanSendMessages();
+            }
         };
         MessageInputComponent.prototype.ngOnDestroy = function () {
             this.subscriptions.forEach(function (s) { return s.unsubscribe(); });
         };
         MessageInputComponent.prototype.messageSent = function () {
             return __awaiter(this, void 0, void 0, function () {
-                var attachmentUploadInProgressCounter, attachments, text, error_1;
+                var attachmentUploadInProgressCounter, attachments, text, parentMessageId, error_1;
                 return __generator(this, function (_12) {
                     switch (_12.label) {
                         case 0:
@@ -2070,12 +2200,18 @@
                             if (!this.isUpdate) {
                                 this.textareaValue = '';
                             }
+                            parentMessageId = undefined;
+                            if (this.mode === 'thread') {
+                                this.channelService.activeParentMessageId$
+                                    .pipe(operators.first())
+                                    .subscribe(function (id) { return (parentMessageId = id); });
+                            }
                             _12.label = 1;
                         case 1:
                             _12.trys.push([1, 3, , 4]);
                             return [4 /*yield*/, (this.isUpdate
                                     ? this.channelService.updateMessage(Object.assign(Object.assign({}, this.message), { text: text, attachments: attachments }))
-                                    : this.channelService.sendMessage(text, attachments, this.mentionedUsers))];
+                                    : this.channelService.sendMessage(text, attachments, this.mentionedUsers, parentMessageId))];
                         case 2:
                             _12.sent();
                             this.messageUpdate.emit();
@@ -2206,10 +2342,25 @@
                 });
             });
         };
+        MessageInputComponent.prototype.setCanSendMessages = function () {
+            var _a, _b;
+            var 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();
+            }
+        };
         return MessageInputComponent;
     }());
     MessageInputComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: MessageInputComponent, deps: [{ token: ChannelService }, { token: NotificationService }, { token: AttachmentService }, { token: MessageInputConfigService }, { token: textareaInjectionToken }, { token: i0__namespace.ComponentFactoryResolver }, { token: i0__namespace.ChangeDetectorRef }, { token: ChatClientService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    MessageInputComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: MessageInputComponent, selector: "stream-message-input", inputs: { isFileUploadEnabled: "isFileUploadEnabled", areMentionsEnabled: "areMentionsEnabled", mentionScope: "mentionScope", mentionAutocompleteItemTemplate: "mentionAutocompleteItemTemplate", commandAutocompleteItemTemplate: "commandAutocompleteItemTemplate", 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__namespace, 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          [commandAutocompleteItemTemplate]=\"commandAutocompleteItemTemplate\"\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: i6__namespace.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__namespace.AsyncPipe, "translate": i10__namespace.TranslatePipe } });
+    MessageInputComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: MessageInputComponent, selector: "stream-message-input", inputs: { isFileUploadEnabled: "isFileUploadEnabled", areMentionsEnabled: "areMentionsEnabled", mentionScope: "mentionScope", mentionAutocompleteItemTemplate: "mentionAutocompleteItemTemplate", commandAutocompleteItemTemplate: "commandAutocompleteItemTemplate", 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__namespace, template: "<div\n  class=\"{{\n    mode === 'main' ? 'str-chat__input-flat' : 'str-chat__small-message-input'\n  }}\"\n  [class.str-chat__input-flat-has-attachments]=\"\n    (attachmentUploads$ | async)!.length > 0\n  \"\n>\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: AttachmentPreviewListComponent, selector: "stream-attachment-preview-list" }, { type: IconComponent, selector: "stream-icon", inputs: ["icon", "size"] }], directives: [{ type: i6__namespace.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__namespace.AsyncPipe, "translate": i10__namespace.TranslatePipe } });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: MessageInputComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -2233,6 +2384,8 @@
                     type: i0.Input
                 }], commandAutocompleteItemTemplate: [{
                     type: i0.Input
+                }], mode: [{
+                    type: i0.Input
                 }], acceptedFileTypes: [{
                     type: i0.Input
                 }], isMultipleFileUploadEnabled: [{
@@ -2504,7 +2657,7 @@
         return MessageActionsBoxComponent;
     }());
     MessageActionsBoxComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: MessageActionsBoxComponent, deps: [{ token: ChatClientService }, { token: NotificationService }, { token: ChannelService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    MessageActionsBoxComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: MessageActionsBoxComponent, selector: "stream-message-actions-box", inputs: { messageInputTemplate: "messageInputTemplate", isOpen: "isOpen", isMine: "isMine", message: "message", enabledActions: "enabledActions" }, outputs: { displayedActionsCount: "displayedActionsCount", isEditing: "isEditing" }, viewQueries: [{ propertyName: "messageInput", first: true, predicate: MessageInputComponent, descendants: true }], usesOnChanges: true, ngImport: i0__namespace, template: "<div\n  data-testid=\"action-box\"\n  class=\"str-chat__message-actions-box\"\n  [class.str-chat__message-actions-box--open]=\"isOpen\"\n  [class.str-chat__message-actions-box--mine]=\"isMine\"\n>\n  <ul class=\"str-chat__message-actions-list\">\n    <button\n      data-testid=\"quote-action\"\n      *ngIf=\"isQuoteVisible\"\n      (click)=\"quoteClicked()\"\n    >\n      <li class=\"str-chat__message-actions-list-item\">\n        {{ \"streamChat.Reply\" | translate }}\n      </li>\n    </button>\n    <button\n      data-testid=\"pin-action\"\n      *ngIf=\"isPinVisible\"\n      (click)=\"pinClicked()\"\n    >\n      <li class=\"str-chat__message-actions-list-item\">\n        {{\n          (message?.pinned ? \"streamChat.Unpin\" : \"streamChat.Pin\") | translate\n        }}\n      </li>\n    </button>\n    <button\n      data-testid=\"flag-action\"\n      *ngIf=\"isFlagVisible\"\n      (click)=\"flagClicked()\"\n    >\n      <li class=\"str-chat__message-actions-list-item\">\n        {{ \"streamChat.Flag\" | translate }}\n      </li>\n    </button>\n    <button\n      data-testid=\"mute-action\"\n      *ngIf=\"isMuteVisible\"\n      (click)=\"muteClicked()\"\n    >\n      <li class=\"str-chat__message-actions-list-item\">\n        {{ \"streamChat.Mute\" | translate }}\n      </li>\n    </button>\n    <button\n      data-testid=\"edit-action\"\n      *ngIf=\"isEditVisible\"\n      (click)=\"editClicked()\"\n    >\n      <li class=\"str-chat__message-actions-list-item\">\n        {{ \"streamChat.Edit Message\" | translate }}\n      </li>\n    </button>\n    <button\n      data-testid=\"delete-action\"\n      *ngIf=\"isDeleteVisible\"\n      (click)=\"deleteClicked()\"\n    >\n      <li class=\"str-chat__message-actions-list-item\">\n        {{ \"streamChat.Delete\" | translate }}\n      </li>\n    </button>\n  </ul>\n</div>\n\n<stream-modal\n  [isOpen]=\"isEditModalOpen\"\n  (isOpenChange)=\"\n    isEditModalOpen = $event; isEditModalOpen ? '' : modalClosed()\n  \"\n>\n  <div class=\"str-chat__edit-message-form\" *ngIf=\"isEditModalOpen\">\n    <ng-container *ngIf=\"messageInputTemplate; else defaultInput\">\n      <ng-container\n        *ngTemplateOutlet=\"\n          messageInputTemplate;\n          context: {\n            message: message,\n            messageUpdateHandler: modalClosed\n          }\n        \"\n      ></ng-container>\n    </ng-container>\n    <ng-template #defaultInput>\n      <stream-message-input\n        [message]=\"message\"\n        (messageUpdate)=\"modalClosed()\"\n      ></stream-message-input>\n    </ng-template>\n    <stream-notification-list></stream-notification-list>\n    <div\n      class=\"\n        str-chat__message-team-form-footer\n        str-chat__message-team-form-footer-angular\n      \"\n    >\n      <div class=\"str-chat__edit-message-form-options\">\n        <button translate data-testid=\"cancel-button\" (click)=\"modalClosed()\">\n          streamChat.Cancel\n        </button>\n        <button\n          type=\"submit\"\n          translate\n          data-testid=\"send-button\"\n          (click)=\"sendClicked()\"\n          (keyup.enter)=\"sendClicked()\"\n        >\n          streamChat.Send\n        </button>\n      </div>\n    </div>\n  </div>\n</stream-modal>\n", components: [{ type: ModalComponent, selector: "stream-modal", inputs: ["isOpen"], outputs: ["isOpenChange"] }, { type: MessageInputComponent, selector: "stream-message-input", inputs: ["isFileUploadEnabled", "areMentionsEnabled", "mentionScope", "mentionAutocompleteItemTemplate", "commandAutocompleteItemTemplate", "acceptedFileTypes", "isMultipleFileUploadEnabled", "message"], outputs: ["messageUpdate"] }, { type: NotificationListComponent, selector: "stream-notification-list" }], directives: [{ type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i10__namespace.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }], pipes: { "translate": i10__namespace.TranslatePipe } });
+    MessageActionsBoxComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: MessageActionsBoxComponent, selector: "stream-message-actions-box", inputs: { messageInputTemplate: "messageInputTemplate", isOpen: "isOpen", isMine: "isMine", message: "message", enabledActions: "enabledActions" }, outputs: { displayedActionsCount: "displayedActionsCount", isEditing: "isEditing" }, viewQueries: [{ propertyName: "messageInput", first: true, predicate: MessageInputComponent, descendants: true }], usesOnChanges: true, ngImport: i0__namespace, template: "<div\n  data-testid=\"action-box\"\n  class=\"str-chat__message-actions-box\"\n  [class.str-chat__message-actions-box--open]=\"isOpen\"\n  [class.str-chat__message-actions-box--mine]=\"isMine\"\n>\n  <ul class=\"str-chat__message-actions-list\">\n    <button\n      data-testid=\"quote-action\"\n      *ngIf=\"isQuoteVisible\"\n      (click)=\"quoteClicked()\"\n    >\n      <li class=\"str-chat__message-actions-list-item\">\n        {{ \"streamChat.Reply\" | translate }}\n      </li>\n    </button>\n    <button\n      data-testid=\"pin-action\"\n      *ngIf=\"isPinVisible\"\n      (click)=\"pinClicked()\"\n    >\n      <li class=\"str-chat__message-actions-list-item\">\n        {{\n          (message?.pinned ? \"streamChat.Unpin\" : \"streamChat.Pin\") | translate\n        }}\n      </li>\n    </button>\n    <button\n      data-testid=\"flag-action\"\n      *ngIf=\"isFlagVisible\"\n      (click)=\"flagClicked()\"\n    >\n      <li class=\"str-chat__message-actions-list-item\">\n        {{ \"streamChat.Flag\" | translate }}\n      </li>\n    </button>\n    <button\n      data-testid=\"mute-action\"\n      *ngIf=\"isMuteVisible\"\n      (click)=\"muteClicked()\"\n    >\n      <li class=\"str-chat__message-actions-list-item\">\n        {{ \"streamChat.Mute\" | translate }}\n      </li>\n    </button>\n    <button\n      data-testid=\"edit-action\"\n      *ngIf=\"isEditVisible\"\n      (click)=\"editClicked()\"\n    >\n      <li class=\"str-chat__message-actions-list-item\">\n        {{ \"streamChat.Edit Message\" | translate }}\n      </li>\n    </button>\n    <button\n      data-testid=\"delete-action\"\n      *ngIf=\"isDeleteVisible\"\n      (click)=\"deleteClicked()\"\n    >\n      <li class=\"str-chat__message-actions-list-item\">\n        {{ \"streamChat.Delete\" | translate }}\n      </li>\n    </button>\n  </ul>\n</div>\n\n<stream-modal\n  [isOpen]=\"isEditModalOpen\"\n  (isOpenChange)=\"\n    isEditModalOpen = $event; isEditModalOpen ? '' : modalClosed()\n  \"\n>\n  <div class=\"str-chat__edit-message-form\" *ngIf=\"isEditModalOpen\">\n    <ng-container *ngIf=\"messageInputTemplate; else defaultInput\">\n      <ng-container\n        *ngTemplateOutlet=\"\n          messageInputTemplate;\n          context: {\n            message: message,\n            messageUpdateHandler: modalClosed\n          }\n        \"\n      ></ng-container>\n    </ng-container>\n    <ng-template #defaultInput>\n      <stream-message-input\n        [message]=\"message\"\n        (messageUpdate)=\"modalClosed()\"\n      ></stream-message-input>\n    </ng-template>\n    <stream-notification-list></stream-notification-list>\n    <div\n      class=\"\n        str-chat__message-team-form-footer\n        str-chat__message-team-form-footer-angular\n      \"\n    >\n      <div class=\"str-chat__edit-message-form-options\">\n        <button translate data-testid=\"cancel-button\" (click)=\"modalClosed()\">\n          streamChat.Cancel\n        </button>\n        <button\n          type=\"submit\"\n          translate\n          data-testid=\"send-button\"\n          (click)=\"sendClicked()\"\n          (keyup.enter)=\"sendClicked()\"\n        >\n          streamChat.Send\n        </button>\n      </div>\n    </div>\n  </div>\n</stream-modal>\n", components: [{ type: ModalComponent, selector: "stream-modal", inputs: ["isOpen"], outputs: ["isOpenChange"] }, { type: MessageInputComponent, selector: "stream-message-input", inputs: ["isFileUploadEnabled", "areMentionsEnabled", "mentionScope", "mentionAutocompleteItemTemplate", "commandAutocompleteItemTemplate", "mode", "acceptedFileTypes", "isMultipleFileUploadEnabled", "message"], outputs: ["messageUpdate"] }, { type: NotificationListComponent, selector: "stream-notification-list" }], directives: [{ type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i10__namespace.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }], pipes: { "translate": i10__namespace.TranslatePipe } });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: MessageActionsBoxComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -2537,11 +2690,12 @@
             this.subscriptions = [];
             this.isError$ = this.channelService.channels$.pipe(operators.map(function () { return false; }), operators.catchError(function () { return rxjs.of(true); }), operators.startWith(false));
             this.isInitializing$ = this.channelService.channels$.pipe(operators.map(function (channels) { return !channels; }), operators.catchError(function () { return rxjs.of(false); }));
+            this.isActiveThread$ = this.channelService.activeParentMessageId$.pipe(operators.map(function (id) { return !!id; }));
         }
         return ChannelComponent;
     }());
     ChannelComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: ChannelComponent, deps: [{ token: ChannelService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    ChannelComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: ChannelComponent, selector: "stream-channel", ngImport: i0__namespace, template: "<div\n  *ngIf=\"(isError$ | async) === false && (isInitializing$ | async) === false\"\n  class=\"str-chat str-chat-channel messaging\"\n>\n  <div class=\"str-chat__container\">\n    <div class=\"str-chat__main-panel\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n</div>\n", directives: [{ type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i6__namespace.AsyncPipe } });
+    ChannelComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: ChannelComponent, selector: "stream-channel", ngImport: i0__namespace, template: "<div\n  *ngIf=\"(isError$ | async) === false && (isInitializing$ | async) === false\"\n  class=\"str-chat str-chat-channel messaging\"\n>\n  <div class=\"str-chat__container\">\n    <div class=\"str-chat__main-panel\">\n      <ng-content></ng-content>\n    </div>\n    <ng-content\n      *ngIf=\"isActiveThread$ | async\"\n      select='[name=\"thread\"]'\n    ></ng-content>\n  </div>\n</div>\n", directives: [{ type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i6__namespace.AsyncPipe } });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: ChannelComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -3088,6 +3242,7 @@
             this.chatClientService = chatClientService;
             this.channelService = channelService;
             this.enabledMessageActions = [];
+            this.mode = 'main';
             this.isActionBoxOpen = false;
             this.isReactionSelectorOpen = false;
             this.isPressedOnMobile = false;
@@ -3208,7 +3363,8 @@
                     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));
             },
             enumerable: false,
             configurable: true
@@ -3230,6 +3386,22 @@
             enumerable: false,
             configurable: true
         });
+        Object.defineProperty(MessageComponent.prototype, "replyCountParam", {
+            get: function () {
+                var _a;
+                return { replyCount: (_a = this.message) === null || _a === void 0 ? void 0 : _a.reply_count };
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(MessageComponent.prototype, "canDisplayReadStatus", {
+            get: function () {
+                return (this.canReceiveReadEvents !== false &&
+                    this.enabledMessageActions.indexOf('read-events') !== -1);
+            },
+            enumerable: false,
+            configurable: true
+        });
         MessageComponent.prototype.resendMessage = function () {
             void this.channelService.resendMessage(this.message);
         };
@@ -3252,10 +3424,13 @@
             };
             window.addEventListener('click', eventHandler);
         };
+        MessageComponent.prototype.setAsActiveParentMessage = function () {
+            void this.channelService.setAsActiveParentMessage(this.message);
+        };
         return MessageComponent;
     }());
     MessageComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: MessageComponent, deps: [{ token: ChatClientService }, { token: ChannelService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    MessageComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: MessageComponent, selector: "stream-message", inputs: { messageInputTemplate: "messageInputTemplate", mentionTemplate: "mentionTemplate", message: "message", enabledMessageActions: "enabledMessageActions", areReactionsEnabled: "areReactionsEnabled", canReactToMessage: "canReactToMessage", isLastSentMessage: "isLastSentMessage", canReceiveReadEvents: "canReceiveReadEvents" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], usesOnChanges: true, ngImport: i0__namespace, template: "<div\n  #container\n  class=\"str-chat__message-simple str-chat__message str-chat__message--{{\n    message?.type\n  }} str-chat__message--{{ message?.status }} {{\n    message?.text ? 'str-chat__message--has-text' : 'has-no-text'\n  }}\"\n  [class.str-chat__message--me]=\"isSentByCurrentUser\"\n  [class.str-chat__message-simple--me]=\"isSentByCurrentUser\"\n  [class.mobile-press]=\"isPressedOnMobile\"\n  [class.str-chat__message--has-attachment]=\"hasAttachment\"\n  [class.str-chat__message--with-reactions]=\"\n    areReactionsEnabled !== false && hasReactions\n  \"\n  data-testid=\"message-container\"\n>\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 &&\n                canReceiveReadEvents !== false &&\n                enabledMessageActions.indexOf('read-events') !== -1;\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              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\"\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            <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: ["messageId", "attachments"] }, { type: LoadingIndicatorComponent, selector: "stream-loading-indicator", inputs: ["size", "color"] }], directives: [{ type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i6__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i10__namespace.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }], pipes: { "translate": i10__namespace.TranslatePipe } });
+    MessageComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: MessageComponent, selector: "stream-message", inputs: { messageInputTemplate: "messageInputTemplate", mentionTemplate: "mentionTemplate", message: "message", enabledMessageActions: "enabledMessageActions", areReactionsEnabled: "areReactionsEnabled", canReactToMessage: "canReactToMessage", isLastSentMessage: "isLastSentMessage", canReceiveReadEvents: "canReceiveReadEvents", mode: "mode" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], usesOnChanges: true, ngImport: i0__namespace, template: "<div\n  #container\n  class=\"str-chat__message-simple str-chat__message str-chat__message--{{\n    message?.type\n  }} str-chat__message--{{ message?.status }} {{\n    message?.text ? 'str-chat__message--has-text' : 'has-no-text'\n  }}\"\n  [class.str-chat__message--me]=\"isSentByCurrentUser\"\n  [class.str-chat__message-simple--me]=\"isSentByCurrentUser\"\n  [class.mobile-press]=\"isPressedOnMobile\"\n  [class.str-chat__message--has-attachment]=\"hasAttachment\"\n  [class.str-chat__message--with-reactions]=\"\n    areReactionsEnabled !== false && hasReactions\n  \"\n  data-testid=\"message-container\"\n>\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\"\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            <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", components: [{ type: AvatarComponent, selector: "stream-avatar", inputs: ["name", "imageUrl", "size"] }, { type: MessageActionsBoxComponent, selector: "stream-message-actions-box", inputs: ["messageInputTemplate", "isOpen", "isMine", "message", "enabledActions"], outputs: ["displayedActionsCount", "isEditing"] }, { type: IconComponent, selector: "stream-icon", inputs: ["icon", "size"] }, { type: MessageReactionsComponent, selector: "stream-message-reactions", inputs: ["messageId", "messageReactionCounts", "isSelectorOpen", "latestReactions", "ownReactions"], outputs: ["isSelectorOpenChange"] }, { type: AttachmentListComponent, selector: "stream-attachment-list", inputs: ["messageId", "attachments"] }, { type: LoadingIndicatorComponent, selector: "stream-loading-indicator", inputs: ["size", "color"] }], directives: [{ type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i6__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i10__namespace.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }], pipes: { "translate": i10__namespace.TranslatePipe } });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: MessageComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -3279,6 +3454,8 @@
                     type: i0.Input
                 }], canReceiveReadEvents: [{
                     type: i0.Input
+                }], mode: [{
+                    type: i0.Input
                 }], container: [{
                     type: i0.ViewChild,
                     args: ['container']
@@ -3595,22 +3772,17 @@
              */
             /* eslint-disable-next-line @angular-eslint/no-input-rename */
             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(function (channel) {
+            this.subscriptions = [];
+            this.subscriptions.push(this.channelService.activeChannel$.subscribe(function (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();
                 var 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;
@@ -3639,46 +3811,13 @@
                         _this.authorizedMessageActions.push('delete');
                         _this.authorizedMessageActions.push('delete-any');
                     }
-                    _this.setEnabledActions();
-                }
-            });
-            this.messages$ = this.channelService.activeChannelMessages$.pipe(operators.tap(function (messages) {
-                var _a, _b, _c, _d, _e;
-                if (messages.length === 0) {
-                    return;
-                }
-                var 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');
                     }
+                    _this.setEnabledActions();
                 }
-                var 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;
-                }
-            }), operators.tap(function (messages) {
-                _this.groupStyles = messages.map(function (m, i) { return getGroupStyles(m, messages[i - 1], messages[i + 1]); });
-            }), operators.tap(function (messages) {
-                var _a;
-                return (_this.lastSentMessageId = (_a = __spreadArray([], __read(messages)).reverse()
-                    .find(function (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(function () {
+            this.subscriptions.push(this.imageLoadService.imageLoad$.subscribe(function () {
                 if (!_this.isUserScrolledUp) {
                     _this.scrollToBottom();
                     // Hacky and unreliable workaround to scroll down after loaded images move the scrollbar
@@ -3686,12 +3825,27 @@
                         _this.scrollToBottom();
                     }, 300);
                 }
-            });
+            }));
+            this.subscriptions.push(this.channelService.activeParentMessage$.subscribe(function (message) {
+                if (message &&
+                    _this.parentMessage &&
+                    message.id !== _this.parentMessage.id &&
+                    _this.mode === 'thread') {
+                    _this.resetScrollState();
+                }
+                _this.parentMessage = message;
+            }));
         }
+        MessageListComponent.prototype.ngOnInit = function () {
+            this.setMessages$();
+        };
         MessageListComponent.prototype.ngOnChanges = function (changes) {
             if (changes.enabledMessageActionsInput) {
                 this.setEnabledActions();
             }
+            if (changes.mode) {
+                this.setMessages$();
+            }
         };
         MessageListComponent.prototype.ngAfterViewChecked = function () {
             var _this = this;
@@ -3718,6 +3872,9 @@
                 this.containerHeight = this.scrollContainer.nativeElement.scrollHeight;
             }
         };
+        MessageListComponent.prototype.ngOnDestroy = function () {
+            this.subscriptions.forEach(function (s) { return s.unsubscribe(); });
+        };
         MessageListComponent.prototype.trackByMessageId = function (index, item) {
             return item.id;
         };
@@ -3726,6 +3883,7 @@
                 this.scrollContainer.nativeElement.scrollHeight;
         };
         MessageListComponent.prototype.scrolled = function () {
+            var _a, _b;
             this.isUserScrolledUp =
                 this.scrollContainer.nativeElement.scrollHeight -
                     (this.scrollContainer.nativeElement.scrollTop +
@@ -3734,14 +3892,22 @@
             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;
         };
         MessageListComponent.prototype.preserveScrollbarPosition = function () {
             this.scrollContainer.nativeElement.scrollTop =
-                this.scrollContainer.nativeElement.scrollHeight - this.containerHeight;
+                (this.prevScrollTop || 0) +
+                    (this.scrollContainer.nativeElement.scrollHeight - this.containerHeight);
         };
         MessageListComponent.prototype.setEnabledActions = function () {
             var _this = this;
@@ -3753,6 +3919,7 @@
             this.enabledMessageActionsInput = __spreadArray(__spreadArray([], __read(this.enabledMessageActionsInput)), [
                 'send-reaction',
                 'read-events',
+                'send-reply',
             ]);
             this.enabledMessageActionsInput.forEach(function (action) {
                 var isAuthorized = _this.authorizedMessageActions.indexOf(action) !== -1;
@@ -3761,10 +3928,62 @@
                 }
             });
         };
+        MessageListComponent.prototype.setMessages$ = function () {
+            var _this = this;
+            this.messages$ = (this.mode === 'main'
+                ? this.channelService.activeChannelMessages$
+                : this.channelService.activeThreadMessages$).pipe(operators.tap(function (messages) {
+                var _a, _b, _c, _d, _e;
+                if (messages.length === 0) {
+                    return;
+                }
+                var 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++;
+                    }
+                }
+                var 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;
+                }
+            }), operators.tap(function (messages) {
+                _this.groupStyles = messages.map(function (m, i) { return getGroupStyles(m, messages[i - 1], messages[i + 1]); });
+            }), operators.tap(function (messages) {
+                var _a;
+                return (_this.lastSentMessageId = (_a = __spreadArray([], __read(messages)).reverse()
+                    .find(function (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);
+            }));
+        };
+        MessageListComponent.prototype.resetScrollState = function () {
+            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;
+        };
         return MessageListComponent;
     }());
     MessageListComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: MessageListComponent, deps: [{ token: ChannelService }, { token: ChatClientService }, { token: ImageLoadService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    MessageListComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: MessageListComponent, selector: "stream-message-list", inputs: { messageTemplate: "messageTemplate", messageInputTemplate: "messageInputTemplate", mentionTemplate: "mentionTemplate", areReactionsEnabled: "areReactionsEnabled", enabledMessageActionsInput: ["enabledMessageActions", "enabledMessageActionsInput"] }, host: { properties: { "class": "this.class" } }, viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], descendants: true }], usesOnChanges: true, ngImport: i0__namespace, template: "<div\n  #scrollContainer\n  data-testid=\"scroll-container\"\n  class=\"str-chat__list\"\n  (scroll)=\"scrolled()\"\n>\n  <div class=\"str-chat__reverse-infinite-scroll\">\n    <ul class=\"str-chat__ul\">\n      <li\n        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: i6__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "async": i6__namespace.AsyncPipe } });
+    MessageListComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: MessageListComponent, selector: "stream-message-list", inputs: { messageTemplate: "messageTemplate", messageInputTemplate: "messageInputTemplate", mentionTemplate: "mentionTemplate", areReactionsEnabled: "areReactionsEnabled", enabledMessageActionsInput: ["enabledMessageActions", "enabledMessageActionsInput"], mode: "mode" }, host: { properties: { "class": "this.class" } }, viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], descendants: true }, { propertyName: "parentMessageElement", first: true, predicate: ["parentMessageElement"], descendants: true }], usesOnChanges: true, ngImport: i0__namespace, template: "<div\n  #scrollContainer\n  data-testid=\"scroll-container\"\n  class=\"str-chat__list\"\n  (scroll)=\"scrolled()\"\n>\n  <div class=\"str-chat__reverse-infinite-scroll\">\n    <ul class=\"str-chat__ul\">\n      <li\n        #parentMessageElement\n        *ngIf=\"mode === 'thread'\"\n        data-testid=\"parent-message\"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"\n            messageTemplateContainer;\n            context: { message: parentMessage }\n          \"\n        ></ng-container>\n        <div class=\"str-chat__thread-start\" translate>\n          streamChat.Start of a new thread\n        </div>\n      </li>\n      <li\n        data-testclass=\"message\"\n        *ngFor=\"\n          let message of messages$ | async;\n          let i = index;\n          trackBy: trackByMessageId\n        \"\n        class=\"str-chat__li str-chat__li--{{ groupStyles[i] }}\"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"\n            messageTemplateContainer;\n            context: { message: message }\n          \"\n        ></ng-container>\n      </li>\n    </ul>\n  </div>\n</div>\n<div class=\"str-chat__list-notifications\">\n  <button\n    data-testid=\"scroll-to-bottom\"\n    *ngIf=\"isUserScrolledUp\"\n    class=\"\n      str-chat__message-notification\n      str-chat__message-notification-right\n      str-chat__message-notification-scroll-down\n    \"\n    (keyup.enter)=\"scrollToBottom()\"\n    (click)=\"scrollToBottom()\"\n  >\n    <div\n      *ngIf=\"unreadMessageCount > 0\"\n      class=\"\n        str-chat__message-notification\n        str-chat__message-notification-scroll-down-unread-count\n      \"\n    >\n      {{ unreadMessageCount }}\n    </div>\n  </button>\n</div>\n\n<ng-template #messageTemplateContainer let-message=\"message\">\n  <ng-container *ngIf=\"messageTemplate; else defaultMessageTemplate\">\n    <ng-container\n      *ngTemplateOutlet=\"\n        messageTemplate;\n        context: {\n          message: message,\n          areReactionsEnabled: areReactionsEnabled,\n          canReactToMessage: canReactToMessage,\n          lastSentMessageId: !!(\n            lastSentMessageId && message?.id === lastSentMessageId\n          ),\n          canReceiveReadEvents: canReceiveReadEvents,\n          messageInputTemplate: messageInputTemplate,\n          mentionTemplate: mentionTemplate,\n          mode: mode\n        }\n      \"\n    ></ng-container>\n  </ng-container>\n  <ng-template #defaultMessageTemplate>\n    <stream-message\n      [message]=\"message\"\n      [areReactionsEnabled]=\"areReactionsEnabled\"\n      [canReactToMessage]=\"canReactToMessage\"\n      [isLastSentMessage]=\"\n        !!(lastSentMessageId && message?.id === lastSentMessageId)\n      \"\n      [enabledMessageActions]=\"enabledMessageActions\"\n      [canReceiveReadEvents]=\"canReceiveReadEvents\"\n      [messageInputTemplate]=\"messageInputTemplate\"\n      [mentionTemplate]=\"mentionTemplate\"\n      [mode]=\"mode\"\n    ></stream-message>\n  </ng-template>\n</ng-template>\n", components: [{ type: MessageComponent, selector: "stream-message", inputs: ["messageInputTemplate", "mentionTemplate", "message", "enabledMessageActions", "areReactionsEnabled", "canReactToMessage", "isLastSentMessage", "canReceiveReadEvents", "mode"] }], directives: [{ type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i10__namespace.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { type: i6__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i6__namespace.AsyncPipe } });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: MessageListComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -3783,12 +4002,55 @@
                 }], enabledMessageActionsInput: [{
                     type: i0.Input,
                     args: ['enabledMessageActions']
+                }], mode: [{
+                    type: i0.Input
                 }], class: [{
                     type: i0.HostBinding,
                     args: ['class']
                 }], scrollContainer: [{
                     type: i0.ViewChild,
                     args: ['scrollContainer']
+                }], parentMessageElement: [{
+                    type: i0.ViewChild,
+                    args: ['parentMessageElement']
+                }] } });
+
+    var ThreadComponent = /** @class */ (function () {
+        function ThreadComponent(channelService) {
+            var _this = this;
+            this.channelService = channelService;
+            this.class = 'str-chat__thread';
+            this.subscriptions = [];
+            this.subscriptions.push(this.channelService.activeParentMessage$.subscribe(function (parentMessage) { return (_this.parentMessage = parentMessage); }));
+        }
+        ThreadComponent.prototype.ngOnDestroy = function () {
+            this.subscriptions.forEach(function (s) { return s.unsubscribe(); });
+        };
+        Object.defineProperty(ThreadComponent.prototype, "replyCountParam", {
+            get: function () {
+                var _a;
+                return { replyCount: (_a = this.parentMessage) === null || _a === void 0 ? void 0 : _a.reply_count };
+            },
+            enumerable: false,
+            configurable: true
+        });
+        ThreadComponent.prototype.closeThread = function () {
+            void this.channelService.setAsActiveParentMessage(undefined);
+        };
+        return ThreadComponent;
+    }());
+    ThreadComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: ThreadComponent, deps: [{ token: ChannelService }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    ThreadComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: ThreadComponent, selector: "stream-thread", host: { properties: { "class": "this.class" } }, ngImport: i0__namespace, template: "<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: i10__namespace.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }], pipes: { "translate": i10__namespace.TranslatePipe } });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: ThreadComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'stream-thread',
+                        templateUrl: './thread.component.html',
+                        styles: [],
+                    }]
+            }], ctorParameters: function () { return [{ type: ChannelService }]; }, propDecorators: { class: [{
+                    type: i0.HostBinding,
+                    args: ['class']
                 }] } });
 
     var StreamAvatarModule = /** @class */ (function () {
@@ -3830,7 +4092,8 @@
             NotificationListComponent,
             AttachmentPreviewListComponent,
             ModalComponent,
-            TextareaDirective], imports: [i6.CommonModule, i10.TranslateModule, StreamAvatarModule], exports: [ChannelComponent,
+            TextareaDirective,
+            ThreadComponent], imports: [i6.CommonModule, i10.TranslateModule, StreamAvatarModule], exports: [ChannelComponent,
             ChannelHeaderComponent,
             ChannelListComponent,
             ChannelPreviewComponent,
@@ -3846,7 +4109,8 @@
             NotificationListComponent,
             AttachmentPreviewListComponent,
             ModalComponent,
-            StreamAvatarModule] });
+            StreamAvatarModule,
+            ThreadComponent] });
     StreamChatModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: StreamChatModule, imports: [[i6.CommonModule, i10.TranslateModule, StreamAvatarModule], StreamAvatarModule] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: StreamChatModule, decorators: [{
                 type: i0.NgModule,
@@ -3869,6 +4133,7 @@
                             AttachmentPreviewListComponent,
                             ModalComponent,
                             TextareaDirective,
+                            ThreadComponent,
                         ],
                         imports: [i6.CommonModule, i10.TranslateModule, StreamAvatarModule],
                         exports: [
@@ -3889,6 +4154,7 @@
                             AttachmentPreviewListComponent,
                             ModalComponent,
                             StreamAvatarModule,
+                            ThreadComponent,
                         ],
                     }]
             }] });
@@ -3990,6 +4256,7 @@
     exports.TextareaComponent = TextareaComponent;
     exports.TextareaDirective = TextareaDirective;
     exports.ThemeService = ThemeService;
+    exports.ThreadComponent = ThreadComponent;
     exports.TransliterationService = TransliterationService;
     exports.createMessagePreview = createMessagePreview;
     exports.getDeviceWidth = getDeviceWidth;