stream-chat-angular 2.14.0 → 2.16.1

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

@@ -354,10 +354,10 @@
         return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
     }
 
-    var version = '2.14.0';
+    var version = '2.16.1';
 
     /**
-     * The `NotificationService` can be used to add or remove notifications. By default the [`NotificationList`](../components/notifications.mdx) component displays the currently active notifications.
+     * The `NotificationService` can be used to add or remove notifications. By default the [`NotificationList`](../components/NotificationListComponent.mdx) component displays the currently active notifications.
      */
     var NotificationService = /** @class */ (function () {
         function NotificationService() {
@@ -635,6 +635,7 @@
             this.activeChannelSubscriptions = [];
             this.activeParentMessageIdSubject = new rxjs.BehaviorSubject(undefined);
             this.activeThreadMessagesSubject = new rxjs.BehaviorSubject([]);
+            this.latestMessageDateByUserByChannelsSubject = new rxjs.BehaviorSubject({});
             this.messagePageSize = 25;
             this.messageToQuoteSubject = new rxjs.BehaviorSubject(undefined);
             this.usersTypingInChannelSubject = new rxjs.BehaviorSubject([]);
@@ -667,8 +668,8 @@
             this.activeParentMessage$ = rxjs.combineLatest([
                 this.activeChannelMessages$,
                 this.activeParentMessageId$,
-            ]).pipe(operators.map(function (_f) {
-                var _g = __read(_f, 2), messages = _g[0], parentMessageId = _g[1];
+            ]).pipe(operators.map(function (_h) {
+                var _j = __read(_h, 2), messages = _j[0], parentMessageId = _j[1];
                 if (!parentMessageId) {
                     return undefined;
                 }
@@ -685,6 +686,8 @@
             this.usersTypingInChannel$ =
                 this.usersTypingInChannelSubject.asObservable();
             this.usersTypingInThread$ = this.usersTypingInThreadSubject.asObservable();
+            this.latestMessageDateByUserByChannels$ =
+                this.latestMessageDateByUserByChannelsSubject.asObservable();
         }
         /**
          * Sets the given `channel` as active.
@@ -714,8 +717,8 @@
             var _a;
             return __awaiter(this, void 0, void 0, function () {
                 var messageToQuote, activeChannel, result;
-                return __generator(this, function (_f) {
-                    switch (_f.label) {
+                return __generator(this, function (_h) {
+                    switch (_h.label) {
                         case 0:
                             messageToQuote = this.messageToQuoteSubject.getValue();
                             if (messageToQuote && !!messageToQuote.parent_id) {
@@ -732,9 +735,9 @@
                                     limit: (_a = this.options) === null || _a === void 0 ? void 0 : _a.message_limit,
                                 }))];
                         case 2:
-                            result = _f.sent();
+                            result = _h.sent();
                             this.activeThreadMessagesSubject.next((result === null || result === void 0 ? void 0 : result.messages) || []);
-                            _f.label = 3;
+                            _h.label = 3;
                         case 3: return [2 /*return*/];
                     }
                 });
@@ -747,8 +750,8 @@
             var _a, _b, _c, _d, _e;
             return __awaiter(this, void 0, void 0, function () {
                 var activeChnannel, lastMessageId;
-                return __generator(this, function (_f) {
-                    switch (_f.label) {
+                return __generator(this, function (_h) {
+                    switch (_h.label) {
                         case 0:
                             activeChnannel = this.activeChannelSubject.getValue();
                             lastMessageId = (_a = this.activeChannelMessagesSubject.getValue()[0]) === null || _a === void 0 ? void 0 : _a.id;
@@ -758,7 +761,7 @@
                                     watchers: { limit: 0 },
                                 }))];
                         case 1:
-                            _f.sent();
+                            _h.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)));
@@ -775,8 +778,8 @@
             var _a, _b;
             return __awaiter(this, void 0, void 0, function () {
                 var activeChnannel, parentMessageId, lastMessageId;
-                return __generator(this, function (_f) {
-                    switch (_f.label) {
+                return __generator(this, function (_h) {
+                    switch (_h.label) {
                         case 0:
                             activeChnannel = this.activeChannelSubject.getValue();
                             parentMessageId = this.activeParentMessageIdSubject.getValue();
@@ -789,7 +792,7 @@
                                     id_lt: lastMessageId,
                                 }))];
                         case 1:
-                            _f.sent();
+                            _h.sent();
                             this.activeThreadMessagesSubject.next((activeChnannel === null || activeChnannel === void 0 ? void 0 : activeChnannel.state.threads[parentMessageId]) || []);
                             return [2 /*return*/];
                     }
@@ -805,8 +808,8 @@
         ChannelService.prototype.init = function (filters, sort, options) {
             return __awaiter(this, void 0, void 0, function () {
                 var _this = this;
-                return __generator(this, function (_f) {
-                    switch (_f.label) {
+                return __generator(this, function (_h) {
+                    switch (_h.label) {
                         case 0:
                             this.filters = filters;
                             this.options = options || {
@@ -820,7 +823,7 @@
                             this.sort = sort || { last_message_at: -1, updated_at: -1 };
                             return [4 /*yield*/, this.queryChannels()];
                         case 1:
-                            _f.sent();
+                            _h.sent();
                             this.chatClientService.notification$.subscribe(function (notification) { return void _this.handleNotification(notification); });
                             return [2 /*return*/];
                     }
@@ -828,7 +831,7 @@
             });
         };
         /**
-         * Resets the `activeChannel$`, `channels$` and `activeChannelMessages$` Observables. Useful when disconnecting a chat user, use in combination with [`disconnectUser`](./chat-client.mdx/#disconnectuser).
+         * Resets the `activeChannel$`, `channels$` and `activeChannelMessages$` Observables. Useful when disconnecting a chat user, use in combination with [`disconnectUser`](./ChatClientService.mdx/#disconnectuser).
          */
         ChannelService.prototype.reset = function () {
             this.activeChannelMessagesSubject.next([]);
@@ -836,6 +839,7 @@
             this.activeParentMessageIdSubject.next(undefined);
             this.activeThreadMessagesSubject.next([]);
             this.channelsSubject.next(undefined);
+            this.latestMessageDateByUserByChannelsSubject.next({});
             this.selectMessageToQuote(undefined);
         };
         /**
@@ -843,13 +847,13 @@
          */
         ChannelService.prototype.loadMoreChannels = function () {
             return __awaiter(this, void 0, void 0, function () {
-                return __generator(this, function (_f) {
-                    switch (_f.label) {
+                return __generator(this, function (_h) {
+                    switch (_h.label) {
                         case 0:
                             this.options.offset = this.channels.length;
                             return [4 /*yield*/, this.queryChannels()];
                         case 1:
-                            _f.sent();
+                            _h.sent();
                             return [2 /*return*/];
                     }
                 });
@@ -863,13 +867,13 @@
         ChannelService.prototype.addReaction = function (messageId, reactionType) {
             var _a;
             return __awaiter(this, void 0, void 0, function () {
-                return __generator(this, function (_f) {
-                    switch (_f.label) {
+                return __generator(this, function (_h) {
+                    switch (_h.label) {
                         case 0: return [4 /*yield*/, ((_a = this.activeChannelSubject.getValue()) === null || _a === void 0 ? void 0 : _a.sendReaction(messageId, {
                                 type: reactionType,
                             }))];
                         case 1:
-                            _f.sent();
+                            _h.sent();
                             return [2 /*return*/];
                     }
                 });
@@ -883,12 +887,12 @@
         ChannelService.prototype.removeReaction = function (messageId, reactionType) {
             var _a;
             return __awaiter(this, void 0, void 0, function () {
-                return __generator(this, function (_f) {
-                    switch (_f.label) {
+                return __generator(this, function (_h) {
+                    switch (_h.label) {
                         case 0: return [4 /*yield*/, ((_a = this.activeChannelSubject
                                 .getValue()) === null || _a === void 0 ? void 0 : _a.deleteReaction(messageId, reactionType))];
                         case 1:
-                            _f.sent();
+                            _h.sent();
                             return [2 /*return*/];
                     }
                 });
@@ -909,8 +913,8 @@
             if (quotedMessageId === void 0) { quotedMessageId = undefined; }
             return __awaiter(this, void 0, void 0, function () {
                 var preview, channel;
-                return __generator(this, function (_f) {
-                    switch (_f.label) {
+                return __generator(this, function (_h) {
+                    switch (_h.label) {
                         case 0:
                             preview = createMessagePreview(this.chatClientService.chatClient.user, text, attachments, mentionedUsers, parentId, quotedMessageId);
                             channel = this.activeChannelSubject.getValue();
@@ -918,7 +922,7 @@
                             channel.state.addMessageSorted(preview, true);
                             return [4 /*yield*/, this.sendMessageRequest(preview)];
                         case 1:
-                            _f.sent();
+                            _h.sent();
                             return [2 /*return*/];
                     }
                 });
@@ -931,14 +935,14 @@
         ChannelService.prototype.resendMessage = function (message) {
             return __awaiter(this, void 0, void 0, function () {
                 var channel;
-                return __generator(this, function (_f) {
-                    switch (_f.label) {
+                return __generator(this, function (_h) {
+                    switch (_h.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:
-                            _f.sent();
+                            _h.sent();
                             return [2 /*return*/];
                     }
                 });
@@ -950,11 +954,11 @@
          */
         ChannelService.prototype.updateMessage = function (message) {
             return __awaiter(this, void 0, void 0, function () {
-                return __generator(this, function (_f) {
-                    switch (_f.label) {
+                return __generator(this, function (_h) {
+                    switch (_h.label) {
                         case 0: return [4 /*yield*/, this.chatClientService.chatClient.updateMessage(message)];
                         case 1:
-                            _f.sent();
+                            _h.sent();
                             return [2 /*return*/];
                     }
                 });
@@ -966,11 +970,11 @@
          */
         ChannelService.prototype.deleteMessage = function (message) {
             return __awaiter(this, void 0, void 0, function () {
-                return __generator(this, function (_f) {
-                    switch (_f.label) {
+                return __generator(this, function (_h) {
+                    switch (_h.label) {
                         case 0: return [4 /*yield*/, this.chatClientService.chatClient.deleteMessage(message.id)];
                         case 1:
-                            _f.sent();
+                            _h.sent();
                             return [2 /*return*/];
                     }
                 });
@@ -984,8 +988,8 @@
         ChannelService.prototype.uploadAttachments = function (uploads) {
             return __awaiter(this, void 0, void 0, function () {
                 var result, channel, uploadResults;
-                return __generator(this, function (_f) {
-                    switch (_f.label) {
+                return __generator(this, function (_h) {
+                    switch (_h.label) {
                         case 0:
                             result = [];
                             channel = this.activeChannelSubject.getValue();
@@ -993,7 +997,7 @@
                                     ? channel.sendImage(upload.file)
                                     : channel.sendFile(upload.file); }))];
                         case 1:
-                            uploadResults = _f.sent();
+                            uploadResults = _h.sent();
                             uploadResults.forEach(function (uploadResult, i) {
                                 var file = uploads[i].file;
                                 var type = uploads[i].type;
@@ -1021,15 +1025,15 @@
         ChannelService.prototype.deleteAttachment = function (attachmentUpload) {
             return __awaiter(this, void 0, void 0, function () {
                 var channel;
-                return __generator(this, function (_f) {
-                    switch (_f.label) {
+                return __generator(this, function (_h) {
+                    switch (_h.label) {
                         case 0:
                             channel = this.activeChannelSubject.getValue();
                             return [4 /*yield*/, (attachmentUpload.type === 'image'
                                     ? channel.deleteImage(attachmentUpload.url)
                                     : channel.deleteFile(attachmentUpload.url))];
                         case 1:
-                            _f.sent();
+                            _h.sent();
                             return [2 /*return*/];
                     }
                 });
@@ -1044,8 +1048,8 @@
             return __awaiter(this, void 0, void 0, function () {
                 var activeChannel, result;
                 var _this = this;
-                return __generator(this, function (_f) {
-                    switch (_f.label) {
+                return __generator(this, function (_h) {
+                    switch (_h.label) {
                         case 0:
                             activeChannel = this.activeChannelSubject.getValue();
                             if (!activeChannel) {
@@ -1062,7 +1066,7 @@
                                     id: { $ne: this.chatClientService.chatClient.userID },
                                 })];
                         case 2:
-                            result = _f.sent();
+                            result = _h.sent();
                             return [2 /*return*/, Object.values(result.members)];
                     }
                 });
@@ -1076,13 +1080,13 @@
         ChannelService.prototype.sendAction = function (messageId, formData) {
             return __awaiter(this, void 0, void 0, function () {
                 var channel, response, isThreadReply;
-                return __generator(this, function (_f) {
-                    switch (_f.label) {
+                return __generator(this, function (_h) {
+                    switch (_h.label) {
                         case 0:
                             channel = this.activeChannelSubject.getValue();
                             return [4 /*yield*/, channel.sendAction(messageId, formData)];
                         case 1:
-                            response = _f.sent();
+                            response = _h.sent();
                             if (response === null || response === void 0 ? void 0 : response.message) {
                                 channel.state.addMessageSorted(Object.assign(Object.assign({}, response.message), { status: 'received' }));
                                 isThreadReply = !!response.message.parent_id;
@@ -1119,17 +1123,17 @@
             var _a;
             return __awaiter(this, void 0, void 0, function () {
                 var channel, isThreadReply, response, error_1, stringError, parsedError;
-                return __generator(this, function (_f) {
-                    switch (_f.label) {
+                return __generator(this, function (_h) {
+                    switch (_h.label) {
                         case 0:
                             channel = this.activeChannelSubject.getValue();
                             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;
+                            _h.label = 1;
                         case 1:
-                            _f.trys.push([1, 3, , 4]);
+                            _h.trys.push([1, 3, , 4]);
                             return [4 /*yield*/, channel.sendMessage({
                                     text: preview.text,
                                     attachments: preview.attachments,
@@ -1139,7 +1143,7 @@
                                     quoted_message_id: preview.quoted_message_id,
                                 })];
                         case 2:
-                            response = _f.sent();
+                            response = _h.sent();
                             if (response === null || response === void 0 ? void 0 : response.message) {
                                 channel.state.addMessageSorted(Object.assign(Object.assign({}, response.message), { status: 'received' }), true);
                                 isThreadReply
@@ -1148,7 +1152,7 @@
                             }
                             return [3 /*break*/, 4];
                         case 3:
-                            error_1 = _f.sent();
+                            error_1 = _h.sent();
                             stringError = JSON.stringify(error_1);
                             parsedError = stringError
                                 ? JSON.parse(stringError)
@@ -1165,53 +1169,53 @@
         };
         ChannelService.prototype.handleNotification = function (notification) {
             return __awaiter(this, void 0, void 0, function () {
-                var _f;
+                var _h;
                 var _this = this;
-                return __generator(this, function (_g) {
-                    switch (_g.label) {
+                return __generator(this, function (_j) {
+                    switch (_j.label) {
                         case 0:
-                            _f = notification.eventType;
-                            switch (_f) {
+                            _h = notification.eventType;
+                            switch (_h) {
                                 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 (_f) {
-                                    switch (_f.label) {
+                                return __generator(this, function (_h) {
+                                    switch (_h.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:
-                                            _f.sent();
-                                            _f.label = 3;
+                                            _h.sent();
+                                            _h.label = 3;
                                         case 3: return [2 /*return*/];
                                     }
                                 });
                             }); })];
                         case 2:
-                            _g.sent();
+                            _j.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 (_f) {
-                                    switch (_f.label) {
+                                return __generator(this, function (_h) {
+                                    switch (_h.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:
-                                            _f.sent();
-                                            _f.label = 3;
+                                            _h.sent();
+                                            _h.label = 3;
                                         case 3: return [2 /*return*/];
                                     }
                                 });
                             }); })];
                         case 4:
-                            _g.sent();
+                            _j.sent();
                             return [3 /*break*/, 6];
                         case 5:
                             {
@@ -1224,7 +1228,7 @@
                                     }
                                 });
                             }
-                            _g.label = 6;
+                            _j.label = 6;
                         case 6: return [2 /*return*/];
                     }
                 });
@@ -1236,11 +1240,11 @@
         };
         ChannelService.prototype.handleNewMessageNotification = function (notification) {
             return __awaiter(this, void 0, void 0, function () {
-                return __generator(this, function (_f) {
-                    switch (_f.label) {
+                return __generator(this, function (_h) {
+                    switch (_h.label) {
                         case 0: return [4 /*yield*/, this.addChannelFromNotification(notification)];
                         case 1:
-                            _f.sent();
+                            _h.sent();
                             return [2 /*return*/];
                     }
                 });
@@ -1248,11 +1252,11 @@
         };
         ChannelService.prototype.handleAddedToChannelNotification = function (notification) {
             return __awaiter(this, void 0, void 0, function () {
-                return __generator(this, function (_f) {
-                    switch (_f.label) {
+                return __generator(this, function (_h) {
+                    switch (_h.label) {
                         case 0: return [4 /*yield*/, this.addChannelFromNotification(notification)];
                         case 1:
-                            _f.sent();
+                            _h.sent();
                             return [2 /*return*/];
                     }
                 });
@@ -1262,13 +1266,13 @@
             var _a, _b;
             return __awaiter(this, void 0, void 0, function () {
                 var channel;
-                return __generator(this, function (_f) {
-                    switch (_f.label) {
+                return __generator(this, function (_h) {
+                    switch (_h.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:
-                            _f.sent();
+                            _h.sent();
                             this.watchForChannelEvents(channel);
                             this.channelsSubject.next(__spreadArray([
                                 channel
@@ -1299,6 +1303,7 @@
                             void (c === null || c === void 0 ? void 0 : c.markRead());
                         }
                     });
+                    _this.updateLatestMessages(event);
                 });
             }));
             this.activeChannelSubscriptions.push(channel.on('message.updated', function (event) { return _this.messageUpdated(event); }));
@@ -1329,13 +1334,13 @@
         ChannelService.prototype.typingStarted = function (parentId) {
             return __awaiter(this, void 0, void 0, function () {
                 var activeChannel;
-                return __generator(this, function (_f) {
-                    switch (_f.label) {
+                return __generator(this, function (_h) {
+                    switch (_h.label) {
                         case 0:
                             activeChannel = this.activeChannelSubject.getValue();
                             return [4 /*yield*/, (activeChannel === null || activeChannel === void 0 ? void 0 : activeChannel.keystroke(parentId))];
                         case 1:
-                            _f.sent();
+                            _h.sent();
                             return [2 /*return*/];
                     }
                 });
@@ -1348,13 +1353,13 @@
         ChannelService.prototype.typingStopped = function (parentId) {
             return __awaiter(this, void 0, void 0, function () {
                 var activeChannel;
-                return __generator(this, function (_f) {
-                    switch (_f.label) {
+                return __generator(this, function (_h) {
+                    switch (_h.label) {
                         case 0:
                             activeChannel = this.activeChannelSubject.getValue();
                             return [4 /*yield*/, (activeChannel === null || activeChannel === void 0 ? void 0 : activeChannel.stopTyping(parentId))];
                         case 1:
-                            _f.sent();
+                            _h.sent();
                             return [2 /*return*/];
                     }
                 });
@@ -1427,13 +1432,13 @@
             return __awaiter(this, void 0, void 0, function () {
                 var channels, prevChannels, error_2;
                 var _this = this;
-                return __generator(this, function (_f) {
-                    switch (_f.label) {
+                return __generator(this, function (_h) {
+                    switch (_h.label) {
                         case 0:
-                            _f.trys.push([0, 2, , 3]);
+                            _h.trys.push([0, 2, , 3]);
                             return [4 /*yield*/, this.chatClientService.chatClient.queryChannels(this.filters, this.sort, this.options)];
                         case 1:
-                            channels = _f.sent();
+                            channels = _h.sent();
                             channels.forEach(function (c) { return _this.watchForChannelEvents(c); });
                             prevChannels = this.channelsSubject.getValue() || [];
                             this.channelsSubject.next(__spreadArray(__spreadArray([], __read(prevChannels)), __read(channels)));
@@ -1443,7 +1448,7 @@
                             this.hasMoreChannelsSubject.next(channels.length >= this.options.limit);
                             return [3 /*break*/, 3];
                         case 2:
-                            error_2 = _f.sent();
+                            error_2 = _h.sent();
                             this.channelsSubject.error(error_2);
                             return [3 /*break*/, 3];
                         case 3: return [2 /*return*/];
@@ -1554,7 +1559,6 @@
                 }
             }
         };
-        // 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; });
@@ -1640,6 +1644,26 @@
                 return;
             }
         };
+        ChannelService.prototype.updateLatestMessages = function (event) {
+            var _a, _b, _c, _d, _e, _f, _g;
+            if (((_b = (_a = event.message) === null || _a === void 0 ? void 0 : _a.user) === null || _b === void 0 ? void 0 : _b.id) !== ((_d = (_c = this.chatClientService) === null || _c === void 0 ? void 0 : _c.chatClient.user) === null || _d === void 0 ? void 0 : _d.id)) {
+                return;
+            }
+            var latestMessages = this.latestMessageDateByUserByChannelsSubject.getValue();
+            if (!((_e = event.message) === null || _e === void 0 ? void 0 : _e.created_at)) {
+                return;
+            }
+            var channelId = (_f = event === null || event === void 0 ? void 0 : event.message) === null || _f === void 0 ? void 0 : _f.cid;
+            if (!channelId) {
+                return;
+            }
+            var messageDate = new Date(event.message.created_at);
+            if (!latestMessages[channelId] ||
+                ((_g = latestMessages[channelId]) === null || _g === void 0 ? void 0 : _g.getTime()) < messageDate.getTime()) {
+                latestMessages[channelId] = messageDate;
+                this.latestMessageDateByUserByChannelsSubject.next(Object.assign({}, latestMessages));
+            }
+        };
         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 });
@@ -2146,8 +2170,14 @@
                     }]
             }], ctorParameters: function () { return [{ type: i2__namespace.TranslateService }]; } });
 
+    /**
+     * The `Avatar` component displays the provided image, with fallback to the first letter of the optional name input.
+     */
     var AvatarComponent = /** @class */ (function () {
         function AvatarComponent() {
+            /**
+             * The size in pixels of the avatar image.
+             */
             this.size = 32;
             this.isLoaded = false;
             this.isError = false;
@@ -2179,6 +2209,9 @@
                     type: i0.Input
                 }] } });
 
+    /**
+     * The `Icon` component can be used to display different icons (i. e. message delivered icon).
+     */
     var IconComponent = /** @class */ (function () {
         function IconComponent() {
         }
@@ -2199,9 +2232,18 @@
                     type: i0.Input
                 }] } });
 
+    /**
+     * The `LoadingIndicator` component displays a spinner to indicate that an action is in progress.
+     */
     var LoadingIndicatorComponent = /** @class */ (function () {
         function LoadingIndicatorComponent() {
+            /**
+             * The size of the indicator (in pixels)
+             */
             this.size = 15;
+            /**
+             * The color of the indicator
+             */
             this.color = '#006CFF';
         }
         return LoadingIndicatorComponent;
@@ -2331,7 +2373,7 @@
             }], ctorParameters: function () { return []; } });
 
     /**
-     * The `MessageInputConfigService` is used to keep a consistent configuration among the different [`MessageInput`](../components/message-input.mdx) components if your UI has more than one input component.
+     * The `MessageInputConfigService` is used to keep a consistent configuration among the different [`MessageInput`](../components/MessageInputComponent.mdx) components if your UI has more than one input component.
      */
     var MessageInputConfigService = /** @class */ (function () {
         function MessageInputConfigService() {
@@ -2384,10 +2426,16 @@
                     }]
             }], ctorParameters: function () { return []; } });
 
+    /**
+     * The `AttachmentList` compontent displays the attachments of a message
+     */
     var AttachmentListComponent = /** @class */ (function () {
         function AttachmentListComponent(imageLoadService, channelService) {
             this.imageLoadService = imageLoadService;
             this.channelService = channelService;
+            /**
+             * The attachments to display
+             */
             this.attachments = [];
             this.orderedAttachments = [];
         }
@@ -2453,6 +2501,9 @@
                     type: i0.Input
                 }] } });
 
+    /**
+     * The `AttachmentPreviewList` compontent displays a preview of the attachments uploaded to a message. Users can delete attachments using the preview component, or retry upload if it failed previously.
+     */
     var AttachmentPreviewListComponent = /** @class */ (function () {
         function AttachmentPreviewListComponent(attachmentService) {
             this.attachmentService = attachmentService;
@@ -2498,6 +2549,9 @@
                     }]
             }], ctorParameters: function () { return [{ type: AttachmentService }]; } });
 
+    /**
+     * The `MessageInput` component displays an input where users can type their messages and upload files, and sends the message to the active channel. The component can be used to compose new messages or update existing ones. To send messages, the chat user needs to have the necessary [channel capability](https://getstream.io/chat/docs/javascript/channel_capabilities/?language=javascript).
+     */
     var MessageInputComponent = /** @class */ (function () {
         function MessageInputComponent(channelService, notificationService, attachmentService, configService, textareaType, componentFactoryResolver, cdRef, chatClient, emojiInputService) {
             var _this = this;
@@ -2510,11 +2564,18 @@
             this.cdRef = cdRef;
             this.chatClient = chatClient;
             this.emojiInputService = emojiInputService;
+            /**
+             * Determines if the message is being dispalyed in a channel or in a [thread](https://getstream.io/chat/docs/javascript/threads/?language=javascript).
+             */
             this.mode = 'main';
+            /**
+             * Emits when a message was successfuly sent or updated
+             */
             this.messageUpdate = new i0.EventEmitter();
             this.textareaValue = '';
             this.mentionedUsers = [];
             this.typingStart$ = new rxjs.Subject();
+            this.isCooldownInProgress = false;
             this.subscriptions = [];
             this.isViewInited = false;
             this.subscriptions.push(this.attachmentService.attachmentUploadInProgressCounter$.subscribe(function (counter) {
@@ -2558,6 +2619,30 @@
                 this.configService.commandAutocompleteItemTemplate;
             this.emojiPickerTemplate = this.configService.emojiPickerTemplate;
             this.subscriptions.push(this.typingStart$.subscribe(function () { return void _this.channelService.typingStarted(_this.parentMessageId); }));
+            this.subscriptions.push(rxjs.combineLatest([
+                this.channelService.latestMessageDateByUserByChannels$,
+                this.channelService.activeChannel$,
+            ])
+                .pipe(operators.map(function (_12) {
+                var _13 = __read(_12, 2), latestMessages = _13[0], channel = _13[1];
+                return [latestMessages[(channel === null || channel === void 0 ? void 0 : channel.cid) || ''], channel];
+            }))
+                .subscribe(function (_12) {
+                var _13 = __read(_12, 2), latestMessageDate = _13[0], channel = _13[1];
+                var _a, _b, _c;
+                var cooldown = ((_a = channel === null || channel === void 0 ? void 0 : channel.data) === null || _a === void 0 ? void 0 : _a.cooldown) &&
+                    latestMessageDate &&
+                    Math.round(((_b = channel === null || channel === void 0 ? void 0 : channel.data) === null || _b === void 0 ? void 0 : _b.cooldown) -
+                        (new Date().getTime() - latestMessageDate.getTime()) / 1000);
+                if (cooldown &&
+                    cooldown > 0 &&
+                    ((_c = channel === null || channel === void 0 ? void 0 : channel.data) === null || _c === void 0 ? void 0 : _c.own_capabilities).includes('slow-mode')) {
+                    _this.startCooldown(cooldown);
+                }
+                else if (_this.isCooldownInProgress) {
+                    _this.stopCooldown();
+                }
+            }));
         }
         MessageInputComponent.prototype.ngAfterViewInit = function () {
             this.isViewInited = true;
@@ -2689,6 +2774,21 @@
             enumerable: false,
             configurable: true
         });
+        Object.defineProperty(MessageInputComponent.prototype, "disabledTextareaText", {
+            get: function () {
+                if (!this.canSendMessages) {
+                    return this.mode === 'thread'
+                        ? "streamChat.You can't send thread replies in this channel"
+                        : "streamChat.You can't send messages in this channel";
+                }
+                else if (this.cooldown$) {
+                    return 'streamChat.Slow Mode ON';
+                }
+                return '';
+            },
+            enumerable: false,
+            configurable: true
+        });
         MessageInputComponent.prototype.filesSelected = function (fileList) {
             return __awaiter(this, void 0, void 0, function () {
                 return __generator(this, function (_12) {
@@ -2817,10 +2917,28 @@
             enumerable: false,
             configurable: true
         });
+        MessageInputComponent.prototype.startCooldown = function (cooldown) {
+            var _this = this;
+            this.isCooldownInProgress = true;
+            this.cooldown$ = rxjs.timer(0, 1000).pipe(operators.take(cooldown + 1), operators.map(function (v) { return cooldown - v; }), operators.tap(function (v) {
+                if (v === 0) {
+                    _this.stopCooldown();
+                }
+            }));
+        };
+        MessageInputComponent.prototype.stopCooldown = function () {
+            var _this = this;
+            this.cooldown$ = undefined;
+            this.isCooldownInProgress = false;
+            // the anchor directive will be recreated because of *ngIf, so we will have to reinit the textarea as well
+            this.textareaRef = undefined;
+            // we can only create the textarea after the anchor was recreated, so we will have to wait a change detection cycle with setTimeout
+            setTimeout(function () { return _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 }, { token: EmojiInputService }], 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", emojiPickerTemplate: "emojiPickerTemplate", mode: "mode", acceptedFileTypes: "acceptedFileTypes", isMultipleFileUploadEnabled: "isMultipleFileUploadEnabled", message: "message" }, outputs: { messageUpdate: "messageUpdate" }, providers: [AttachmentService, EmojiInputService], viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }, { propertyName: "textareaAnchor", first: true, predicate: TextareaDirective, descendants: true }], usesOnChanges: true, ngImport: i0__namespace, template: "<div\n  class=\"{{\n    mode === 'main' ? 'str-chat__input-flat' : 'str-chat__small-message-input'\n  }}\"\n  [class.str-chat__input-flat-has-attachments]=\"\n    (attachmentUploads$ | async)!.length > 0\n  \"\n  [class.str-chat__input-flat-quoted]=\"!!quotedMessage\"\n>\n  <div\n    data-testid=\"quoted-message-container\"\n    class=\"quoted-message-preview\"\n    *ngIf=\"quotedMessage\"\n  >\n    <div class=\"quoted-message-preview-header\">\n      <div>{{ \"streamChat.Reply to Message\" | translate }}</div>\n      <button\n        class=\"str-chat__square-button\"\n        data-testid=\"remove-quote\"\n        (click)=\"deselectMessageToQuote()\"\n        (keyup.enter)=\"deselectMessageToQuote()\"\n      >\n        <stream-icon\n          icon=\"close-no-outline\"\n          style=\"font-size: 10px; line-height: 10px\"\n        ></stream-icon>\n      </button>\n    </div>\n    <div class=\"quoted-message-preview-content\">\n      <stream-avatar\n        data-testid=\"qouted-message-avatar\"\n        class=\"str-chat-angular__avatar-host\"\n        [imageUrl]=\"quotedMessage?.user?.image\"\n        [name]=\"quotedMessage?.user?.name || quotedMessage?.user?.id\"\n        [size]=\"20\"\n      ></stream-avatar>\n      <div class=\"quoted-message-preview-content-inner\">\n        <stream-attachment-list\n          *ngIf=\"\n            quotedMessage?.attachments && quotedMessage?.attachments?.length\n          \"\n          [attachments]=\"quotedMessageAttachments\"\n          [messageId]=\"quotedMessage?.id\"\n        ></stream-attachment-list>\n        <div\n          data-testid=\"quoted-message-text\"\n          [innerHTML]=\"quotedMessage?.html || quotedMessage?.text\"\n        ></div>\n      </div>\n    </div>\n  </div>\n  <div class=\"str-chat__input-flat-wrapper\" style=\"width: 100%\">\n    <div\n      class=\"{{\n        mode === 'main'\n          ? 'str-chat__input-flat--textarea-wrapper'\n          : 'str-chat__small-message-input--textarea-wrapper'\n      }}\"\n    >\n      <stream-attachment-preview-list\n        class=\"rfu-image-previewer-angular-host\"\n      ></stream-attachment-preview-list>\n      <div class=\"rta str-chat__textarea str-chat-angular__textarea\">\n        <ng-container *ngIf=\"emojiPickerTemplate\">\n          <div\n            class=\"\n              str-chat__input-flat-emojiselect\n              str-chat-angular__emojiselect\n            \"\n          >\n            <ng-container\n              *ngTemplateOutlet=\"\n                emojiPickerTemplate;\n                context: { emojiInput$: emojiInputService.emojiInput$ }\n              \"\n            ></ng-container>\n          </div>\n        </ng-container>\n        <ng-template\n          *ngIf=\"canSendMessages; else notAllowed\"\n          streamTextarea\n          [(value)]=\"textareaValue\"\n          (valueChange)=\"typingStart$.next()\"\n          (send)=\"messageSent()\"\n          [componentRef]=\"textareaRef\"\n          (userMentions)=\"mentionedUsers = $event\"\n          [areMentionsEnabled]=\"areMentionsEnabled\"\n          [mentionAutocompleteItemTemplate]=\"mentionAutocompleteItemTemplate\"\n          [commandAutocompleteItemTemplate]=\"commandAutocompleteItemTemplate\"\n          [mentionScope]=\"mentionScope\"\n        ></ng-template>\n        <ng-template #notAllowed>\n          <textarea\n            disabled\n            rows=\"1\"\n            [value]=\"\n              (mode === 'thread'\n                ? 'You can\\'t send thread replies in this channel'\n                : 'streamChat.You can\\'t send messages in this channel'\n              ) | translate\n            \"\n            class=\"rta__textarea str-chat__textarea__textarea\"\n          ></textarea>\n        </ng-template>\n      </div>\n      <div\n        *ngIf=\"isFileUploadEnabled && isFileUploadAuthorized && canSendMessages\"\n        class=\"str-chat__fileupload-wrapper\"\n        data-testid=\"file-upload-button\"\n      >\n        <div class=\"str-chat__tooltip\">\n          {{ \"streamChat.Attach files\" | translate }}\n        </div>\n        <div class=\"rfu-file-upload-button\">\n          <label>\n            <input\n              #fileInput\n              type=\"file\"\n              class=\"rfu-file-input\"\n              data-testid=\"file-input\"\n              [accept]=\"accept\"\n              [multiple]=\"isMultipleFileUploadEnabled\"\n              (change)=\"filesSelected(fileInput.files)\"\n            />\n            <span class=\"str-chat__input-flat-fileupload\">\n              <stream-icon icon=\"file-upload\"></stream-icon>\n            </span>\n          </label>\n        </div>\n      </div>\n    </div>\n    <button\n      *ngIf=\"canSendMessages\"\n      data-testid=\"send-button\"\n      class=\"str-chat__send-button\"\n      (click)=\"messageSent()\"\n      (keyup.enter)=\"messageSent()\"\n    >\n      <stream-icon icon=\"send\"></stream-icon>\n    </button>\n  </div>\n</div>\n", components: [{ type: IconComponent, selector: "stream-icon", inputs: ["icon", "size"] }, { type: AvatarComponent, selector: "stream-avatar", inputs: ["name", "imageUrl", "size"] }, { type: AttachmentListComponent, selector: "stream-attachment-list", inputs: ["messageId", "attachments"] }, { type: AttachmentPreviewListComponent, selector: "stream-attachment-preview-list" }], directives: [{ type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: TextareaDirective, selector: "[streamTextarea]", inputs: ["componentRef", "areMentionsEnabled", "mentionAutocompleteItemTemplate", "mentionScope", "commandAutocompleteItemTemplate", "value"], outputs: ["valueChange", "send", "userMentions"] }], pipes: { "async": i6__namespace.AsyncPipe, "translate": i2__namespace.TranslatePipe } });
+    MessageInputComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: MessageInputComponent, selector: "stream-message-input", inputs: { isFileUploadEnabled: "isFileUploadEnabled", areMentionsEnabled: "areMentionsEnabled", mentionScope: "mentionScope", mentionAutocompleteItemTemplate: "mentionAutocompleteItemTemplate", commandAutocompleteItemTemplate: "commandAutocompleteItemTemplate", emojiPickerTemplate: "emojiPickerTemplate", mode: "mode", acceptedFileTypes: "acceptedFileTypes", isMultipleFileUploadEnabled: "isMultipleFileUploadEnabled", message: "message" }, outputs: { messageUpdate: "messageUpdate" }, providers: [AttachmentService, EmojiInputService], viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }, { propertyName: "textareaAnchor", first: true, predicate: TextareaDirective, descendants: true }], usesOnChanges: true, ngImport: i0__namespace, template: "<div\n  class=\"{{\n    mode === 'main' ? 'str-chat__input-flat' : 'str-chat__small-message-input'\n  }}\"\n  [class.str-chat__input-flat-has-attachments]=\"\n    (attachmentUploads$ | async)!.length > 0\n  \"\n  [class.str-chat__input-flat-quoted]=\"!!quotedMessage\"\n>\n  <div\n    data-testid=\"quoted-message-container\"\n    class=\"quoted-message-preview\"\n    *ngIf=\"quotedMessage\"\n  >\n    <div class=\"quoted-message-preview-header\">\n      <div>{{ \"streamChat.Reply to Message\" | translate }}</div>\n      <button\n        class=\"str-chat__square-button\"\n        data-testid=\"remove-quote\"\n        (click)=\"deselectMessageToQuote()\"\n        (keyup.enter)=\"deselectMessageToQuote()\"\n      >\n        <stream-icon\n          icon=\"close-no-outline\"\n          style=\"font-size: 10px; line-height: 10px\"\n        ></stream-icon>\n      </button>\n    </div>\n    <div class=\"quoted-message-preview-content\">\n      <stream-avatar\n        data-testid=\"qouted-message-avatar\"\n        class=\"str-chat-angular__avatar-host\"\n        [imageUrl]=\"quotedMessage?.user?.image\"\n        [name]=\"quotedMessage?.user?.name || quotedMessage?.user?.id\"\n        [size]=\"20\"\n      ></stream-avatar>\n      <div class=\"quoted-message-preview-content-inner\">\n        <stream-attachment-list\n          *ngIf=\"\n            quotedMessage?.attachments && quotedMessage?.attachments?.length\n          \"\n          [attachments]=\"quotedMessageAttachments\"\n          [messageId]=\"quotedMessage?.id\"\n        ></stream-attachment-list>\n        <div\n          data-testid=\"quoted-message-text\"\n          [innerHTML]=\"quotedMessage?.html || quotedMessage?.text\"\n        ></div>\n      </div>\n    </div>\n  </div>\n  <div class=\"str-chat__input-flat-wrapper\" style=\"width: 100%\">\n    <div\n      class=\"{{\n        mode === 'main'\n          ? 'str-chat__input-flat--textarea-wrapper'\n          : 'str-chat__small-message-input--textarea-wrapper'\n      }}\"\n    >\n      <stream-attachment-preview-list\n        class=\"rfu-image-previewer-angular-host\"\n      ></stream-attachment-preview-list>\n      <div class=\"rta str-chat__textarea str-chat-angular__textarea\">\n        <ng-container\n          *ngIf=\"emojiPickerTemplate && !isCooldownInProgress\"\n          data-testid=\"emoji-picker\"\n        >\n          <div\n            class=\"\n              str-chat__input-flat-emojiselect\n              str-chat-angular__emojiselect\n            \"\n          >\n            <ng-container\n              *ngTemplateOutlet=\"\n                emojiPickerTemplate;\n                context: { emojiInput$: emojiInputService.emojiInput$ }\n              \"\n            ></ng-container>\n          </div>\n        </ng-container>\n        <div\n          class=\"str-chat__input-flat-cooldown str-chat-angular__cooldown\"\n          *ngIf=\"isCooldownInProgress\"\n          data-testid=\"cooldown-timer\"\n        >\n          {{ cooldown$ | async }}\n        </div>\n        <ng-template\n          *ngIf=\"canSendMessages && !isCooldownInProgress; else notAllowed\"\n          streamTextarea\n          [(value)]=\"textareaValue\"\n          (valueChange)=\"typingStart$.next()\"\n          (send)=\"messageSent()\"\n          [componentRef]=\"textareaRef\"\n          (userMentions)=\"mentionedUsers = $event\"\n          [areMentionsEnabled]=\"areMentionsEnabled\"\n          [mentionAutocompleteItemTemplate]=\"mentionAutocompleteItemTemplate\"\n          [commandAutocompleteItemTemplate]=\"commandAutocompleteItemTemplate\"\n          [mentionScope]=\"mentionScope\"\n        ></ng-template>\n        <ng-template #notAllowed>\n          <textarea\n            disabled\n            rows=\"1\"\n            [value]=\"disabledTextareaText | translate\"\n            class=\"rta__textarea str-chat__textarea__textarea\"\n            data-testid=\"disabled-textarea\"\n          ></textarea>\n        </ng-template>\n      </div>\n      <div\n        *ngIf=\"\n          isFileUploadEnabled &&\n          isFileUploadAuthorized &&\n          canSendMessages &&\n          !isCooldownInProgress\n        \"\n        class=\"str-chat__fileupload-wrapper\"\n        data-testid=\"file-upload-button\"\n      >\n        <div class=\"str-chat__tooltip\">\n          {{ \"streamChat.Attach files\" | translate }}\n        </div>\n        <div class=\"rfu-file-upload-button\">\n          <label>\n            <input\n              #fileInput\n              type=\"file\"\n              class=\"rfu-file-input\"\n              data-testid=\"file-input\"\n              [accept]=\"accept\"\n              [multiple]=\"isMultipleFileUploadEnabled\"\n              (change)=\"filesSelected(fileInput.files)\"\n            />\n            <span class=\"str-chat__input-flat-fileupload\">\n              <stream-icon icon=\"file-upload\"></stream-icon>\n            </span>\n          </label>\n        </div>\n      </div>\n    </div>\n    <button\n      *ngIf=\"canSendMessages\"\n      data-testid=\"send-button\"\n      class=\"str-chat__send-button\"\n      (click)=\"messageSent()\"\n      (keyup.enter)=\"messageSent()\"\n    >\n      <stream-icon icon=\"send\"></stream-icon>\n    </button>\n  </div>\n</div>\n", components: [{ type: IconComponent, selector: "stream-icon", inputs: ["icon", "size"] }, { type: AvatarComponent, selector: "stream-avatar", inputs: ["name", "imageUrl", "size"] }, { type: AttachmentListComponent, selector: "stream-attachment-list", inputs: ["messageId", "attachments"] }, { type: AttachmentPreviewListComponent, selector: "stream-attachment-preview-list" }], directives: [{ type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: TextareaDirective, selector: "[streamTextarea]", inputs: ["componentRef", "areMentionsEnabled", "mentionAutocompleteItemTemplate", "mentionScope", "commandAutocompleteItemTemplate", "value"], outputs: ["valueChange", "send", "userMentions"] }], pipes: { "async": i6__namespace.AsyncPipe, "translate": i2__namespace.TranslatePipe } });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: MessageInputComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -2864,10 +2982,19 @@
                     args: [TextareaDirective, { static: false }]
                 }] } });
 
+    /**
+     * The `Modal` component displays its content in an overlay. The modal can be closed with a close button, if the user clicks outside of the modal content, or if the escape button is pressed. The modal can also be closed from outside.
+     */
     var ModalComponent = /** @class */ (function () {
         function ModalComponent() {
             var _this = this;
+            /**
+             * If `true` the modal will be displayed, if `false` the modal will be hidden
+             */
             this.isOpen = false;
+            /**
+             * Emits `true` if the modal becomes visible, and `false` if the modal is closed.
+             */
             this.isOpenChange = new i0.EventEmitter();
             this.watchForEscPress = function (event) {
                 if (event.key === 'Escape') {
@@ -2926,6 +3053,9 @@
                     args: ['content']
                 }] } });
 
+    /**
+     * The `Notification` component displays a notification within the [`NotificationList`](./NotificationListComponent.mdx)
+     */
     var NotificationComponent = /** @class */ (function () {
         function NotificationComponent() {
         }
@@ -2944,6 +3074,9 @@
                     type: i0.Input
                 }] } });
 
+    /**
+     * The `NotificationList` component displays the list of active notifications.
+     */
     var NotificationListComponent = /** @class */ (function () {
         function NotificationListComponent(notificationService) {
             this.notificationService = notificationService;
@@ -2965,16 +3098,34 @@
                     }]
             }], ctorParameters: function () { return [{ type: NotificationService }]; } });
 
+    /**
+     * The `MessageActionsBox` component displays a list of message actions (i.e edit), that can be opened or closed. You can find the [list of the supported actions](../concepts/message-interactions.mdx) in the message interaction guide.
+     */
     var MessageActionsBoxComponent = /** @class */ (function () {
         function MessageActionsBoxComponent(chatClientService, notificationService, channelService) {
             var _this = this;
             this.chatClientService = chatClientService;
             this.notificationService = notificationService;
             this.channelService = channelService;
+            /**
+             * Indicates if the list should be opened or closed. Adding a UI element to open and close the list is the parent's component responsibility.
+             */
             this.isOpen = false;
+            /**
+             * Indicates if the message actions are belonging to a message that was sent by the current user or not.
+             */
             this.isMine = false;
+            /**
+             * The list of [channel capabilities](https://getstream.io/chat/docs/javascript/channel_capabilities/?language=javascript) that are enabled for the current user, the list of [supported interactions](../concepts/message-interactions.mdx) can be found in our message interaction guide. Unathorized actions won't be displayed on the UI.
+             */
             this.enabledActions = [];
+            /**
+             * The number of authorized actions (it can be less or equal than the number of enabled actions)
+             */
             this.displayedActionsCount = new i0.EventEmitter();
+            /**
+             * An event which emits `true` if the edit message modal is open, and `false` when it is closed.
+             */
             this.isEditing = new i0.EventEmitter();
             this.isEditModalOpen = false;
             this.modalClosed = function () {
@@ -3149,6 +3300,9 @@
                     args: [MessageInputComponent]
                 }] } });
 
+    /**
+     * The `Channel` component is a container component that displays the [`ChannelHeader`](./ChannelHeaderComponent.mdx), [`MessageList`](./MessageListComponent.mdx), [`NotificationList`](./NotificationListComponent.mdx) and [`MessageInput`](./MessageInputComponent.mdx) components. You can also provide the [`Thread`](./ThreadComponent.mdx) component to use message [threads](https://getstream.io/chat/docs/javascript/threads/?language=javascript).
+     */
     var ChannelComponent = /** @class */ (function () {
         function ChannelComponent(channelService) {
             this.channelService = channelService;
@@ -3253,6 +3407,9 @@
                 args: [{ providedIn: 'root' }]
             }], ctorParameters: function () { return []; } });
 
+    /**
+     * The `ChannelHeader` component displays the avatar and name of the currently active channel along with member and watcher information. You can read about [the difference between members and watchers](https://getstream.io/chat/docs/javascript/watch_channel/?language=javascript#watchers-vs-members) in the platform documentation. Please note that number of watchers is only displayed if the user has [`connect-events` capability](https://getstream.io/chat/docs/javascript/channel_capabilities/?language=javascript)
+     */
     var ChannelHeaderComponent = /** @class */ (function () {
         function ChannelHeaderComponent(channelService, channelListToggleService) {
             var _this = this;
@@ -3302,6 +3459,9 @@
                     }]
             }], ctorParameters: function () { return [{ type: ChannelService }, { type: ChannelListToggleService }]; } });
 
+    /**
+     * The `ChannelPreview` component displays a channel preview in the channel list, it consists of the image, name and latest message of the channel.
+     */
     var ChannelPreviewComponent = /** @class */ (function () {
         function ChannelPreviewComponent(channelService, ngZone) {
             this.channelService = channelService;
@@ -3404,6 +3564,9 @@
                     type: i0.Input
                 }] } });
 
+    /**
+     * The `ChannelList` component renders the list of channels.
+     */
     var ChannelListComponent = /** @class */ (function () {
         function ChannelListComponent(channelService, channelListToggleService) {
             this.channelService = channelService;
@@ -3500,16 +3663,34 @@
         wow: '😮',
         sad: '😞',
     };
+    /**
+     * The `MessageReactions` component displays the reactions of a message, the current user can add and remove reactions. You can read more about [message reactions](https://getstream.io/chat/docs/javascript/send_reaction/?language=javascript) in the platform documentation.
+     */
     var MessageReactionsComponent = /** @class */ (function () {
         function MessageReactionsComponent(cdRef, channelService) {
             var _this = this;
             this.cdRef = cdRef;
             this.channelService = channelService;
+            /**
+             * The number of reactions grouped by [reaction types](https://github.com/GetStream/stream-chat-angular/tree/master/projects/stream-chat-angular/src/lib/message-reactions/message-reactions.component.ts)
+             */
             this.messageReactionCounts = {};
+            /**
+             * Indicates if the selector should be opened or closed. Adding a UI element to open and close the selector is the parent's component responsibility.
+             */
             this.isSelectorOpen = false;
-            this.isSelectorOpenChange = new i0.EventEmitter();
+            /**
+             * List of reactions of a [message](../types/stream-message.mdx), used to display the users of a reaction type.
+             */
             this.latestReactions = [];
+            /**
+             * List of the user's own reactions of a [message](../types/stream-message.mdx), used to display the users of a reaction type.
+             */
             this.ownReactions = [];
+            /**
+             * Indicates if the selector should be opened or closed. Adding a UI element to open and close the selector is the parent's component responsibility.
+             */
+            this.isSelectorOpenChange = new i0.EventEmitter();
             this.eventHandler = function (event) {
                 var _a;
                 if (!((_a = _this.selectorContainer) === null || _a === void 0 ? void 0 : _a.nativeElement.contains(event.target))) {
@@ -3623,12 +3804,12 @@
                     type: i0.Input
                 }], isSelectorOpen: [{
                     type: i0.Input
-                }], isSelectorOpenChange: [{
-                    type: i0.Output
                 }], latestReactions: [{
                     type: i0.Input
                 }], ownReactions: [{
                     type: i0.Input
+                }], isSelectorOpenChange: [{
+                    type: i0.Output
                 }], selectorContainer: [{
                     type: i0.ViewChild,
                     args: ['selectorContainer']
@@ -3637,11 +3818,20 @@
                     args: ['selectorTooltip']
                 }] } });
 
+    /**
+     * The `Message` component displays a message with additional information such as sender and date, and enables [interaction with the message (i.e. edit or react)](../concepts/message-interactions.mdx).
+     */
     var MessageComponent = /** @class */ (function () {
         function MessageComponent(chatClientService, channelService) {
             this.chatClientService = chatClientService;
             this.channelService = channelService;
+            /**
+             * The list of [channel capabilities](https://getstream.io/chat/docs/javascript/channel_capabilities/?language=javascript) that are enabled for the current user, the list of [supported interactions](../concepts/message-interactions.mdx) can be found in our message interaction guide. Unathorized actions won't be displayed on the UI. The [`MessageList`](./MessageListComponent.mdx) component automatically sets this based on [channel capabilities](https://getstream.io/chat/docs/javascript/channel_capabilities/?language=javascript).
+             */
             this.enabledMessageActions = [];
+            /**
+             * Determines if the message is being dispalyed in a channel or in a [thread](https://getstream.io/chat/docs/javascript/threads/?language=javascript).
+             */
             this.mode = 'main';
             this.isActionBoxOpen = false;
             this.isReactionSelectorOpen = false;
@@ -3878,13 +4068,25 @@
                     args: ['container']
                 }] } });
 
+    /**
+     * The `Textarea` component is used by the [`MessageInput`](./MessageInputComponent.mdx) component to display the input HTML element where users can type their message.
+     */
     var TextareaComponent = /** @class */ (function () {
         function TextareaComponent(emojiInputService) {
             var _this = this;
             this.emojiInputService = emojiInputService;
             this.class = 'str-chat__textarea';
+            /**
+             * The value of the input HTML element.
+             */
             this.value = '';
+            /**
+             * Emits the current value of the input element when a user types.
+             */
             this.valueChange = new i0.EventEmitter();
+            /**
+             * Emits when a user triggers a message send event (this happens when they hit the `Enter` key).
+             */
             this.send = new i0.EventEmitter();
             this.subscriptions = [];
             this.subscriptions.push(this.emojiInputService.emojiInput$.subscribe(function (emoji) {
@@ -3957,6 +4159,9 @@
                 args: [{ providedIn: 'root' }]
             }], ctorParameters: function () { return []; } });
 
+    /**
+     * The `AutocompleteTextarea` component is used by the [`MessageInput`](./MessageInputComponent.mdx) component to display the input HTML element where users can type their message.
+     */
     var AutocompleteTextareaComponent = /** @class */ (function () {
         function AutocompleteTextareaComponent(channelService, chatClientService, transliterationService, emojiInputService) {
             var _this = this;
@@ -3965,11 +4170,29 @@
             this.transliterationService = transliterationService;
             this.emojiInputService = emojiInputService;
             this.class = 'str-chat__textarea';
+            /**
+             * The value of the input HTML element.
+             */
             this.value = '';
+            /**
+             * If true, users can mention other users in messages. You can also set this input on the [`MessageInput`](./MessageInputComponent.mdx/#inputs-and-outputs) component.
+             */
             this.areMentionsEnabled = true;
+            /**
+             * The scope for user mentions, either members of the current channel of members of the application. You can also set this input on the [`MessageInput`](./MessageInputComponent.mdx/#inputs-and-outputs) component.
+             */
             this.mentionScope = 'channel';
+            /**
+             * Emits the current value of the input element when a user types.
+             */
             this.valueChange = new i0.EventEmitter();
+            /**
+             * Emits when a user triggers a message send event (this happens when they hit the `Enter` key).
+             */
             this.send = new i0.EventEmitter();
+            /**
+             * Emits the array of users that are mentioned in the message, it is updated when a user mentions a new user or deletes a mention.
+             */
             this.userMentions = new i0.EventEmitter();
             this.autocompleteKey = 'autocompleteLabel';
             this.mentionTriggerChar = '@';
@@ -4209,6 +4432,9 @@
             date1.getDate() === date2.getDate());
     };
 
+    /**
+     * The `MessageList` component renders a scrollable list of messages.
+     */
     var MessageListComponent = /** @class */ (function () {
         function MessageListComponent(channelService, chatClientService, imageLoadService) {
             var _this = this;
@@ -4216,14 +4442,17 @@
             this.chatClientService = chatClientService;
             this.imageLoadService = imageLoadService;
             /**
-             * @deprecated https://getstream.io/chat/docs/sdk/angular/components/message_list/#caution-arereactionsenabled-deprecated
+             * @deprecated use [channel capabilities](https://getstream.io/chat/docs/javascript/channel_capabilities/?language=javascript) instead. If true, the message reactions are displayed. Users can also react to messages if they have the necessary [channel capability](https://getstream.io/chat/docs/javascript/channel_capabilities/?language=javascript).
              */
             this.areReactionsEnabled = undefined;
             /**
-             * @deprecated https://getstream.io/chat/docs/sdk/angular/components/message_list/#caution-enabledmessageactions-deprecated
+             * @deprecated use [channel capabilities](https://getstream.io/chat/docs/javascript/channel_capabilities/?language=javascript) instead. The list of [actions that are enabled](./MessageActionsBoxComponent.mdx), please note that the user also has to have the necessary [channel capabilities](https://getstream.io/chat/docs/javascript/channel_capabilities/?language=javascript) for actions to work. Unathorized actions won't be displayed on the UI. The `MessgaeList` component makes the necessary checks before passing the actions to the `Message` component.
              */
             /* eslint-disable-next-line @angular-eslint/no-input-rename */
             this.enabledMessageActionsInput = undefined;
+            /**
+             * Determines if the message list should display channel messages or [thread messages](https://getstream.io/chat/docs/javascript/threads/?language=javascript).
+             */
             this.mode = 'main';
             this.enabledMessageActions = [];
             this.class = 'str-chat-angular__main-panel-inner str-chat-angular__message-list-host';
@@ -4487,6 +4716,9 @@
                     args: ['parentMessageElement']
                 }] } });
 
+    /**
+     * The `Thread` component represents a [message thread](https://getstream.io/chat/docs/javascript/threads/?language=javascript), it is a container component that displays a thread with a header, [`MessageList`](./MessageListComponent.mdx) and [`MessageInput`](./MessageInputComponent.mdx) components.
+     */
     var ThreadComponent = /** @class */ (function () {
         function ThreadComponent(channelService) {
             var _this = this;