stream-chat-angular 4.58.3 → 4.59.0

package/lib/channel-preview/channel-preview.component.d.ts

@@ -17,6 +17,7 @@ export declare class ChannelPreviewComponent implements OnInit, OnDestroy {
      */
     channel: Channel<DefaultStreamChatGenerics> | undefined;
     isActive: boolean;
+    isUnreadMessageWasCalled: boolean;
     isUnread: boolean;
     unreadCount: number | undefined;
     latestMessage: string;

package/lib/channel.service.d.ts

@@ -104,9 +104,17 @@ export declare class ChannelService<T extends DefaultStreamChatGenerics = Defaul
         [key: string]: Date;
     }>;
     /**
-     * The last read message id of the active channel, it's only set once, when a new active channel is set. It's used by the message list to jump to the latest read message
+     * The last read message id of the active channel, it's used by the message list component to display unread UI, and jump to latest read message
+     *
+     * This property isn't always updated, please use `channel.read` to display up-to-date read information
      */
     activeChannelLastReadMessageId?: string;
+    /**
+     * The unread count of the active channel, it's used by the message list component to display unread UI
+     *
+     * This property isn't always updated, please use `channel.read` to display up-to-date read information
+     */
+    activeChannelUnreadCount?: number;
     /**
      * Custom event handler to call if a new message received from a channel that is not being watched, provide an event handler if you want to override the [default channel list ordering](./ChannelService.mdx/#channels)
      */
@@ -216,6 +224,7 @@ export declare class ChannelService<T extends DefaultStreamChatGenerics = Defaul
     private parentMessageSetter;
     private dismissErrorNotification?;
     private nextPageConfiguration?;
+    private areReadEventsPaused;
     constructor(chatClientService: ChatClientService<T>, ngZone: NgZone, notificationService: NotificationService);
     /**
      * If set to false, read events won't be sent as new messages are received. If set to true active channel (if any) will immediately be marked as read.
@@ -335,6 +344,7 @@ export declare class ChannelService<T extends DefaultStreamChatGenerics = Defaul
         }) | undefined;
         latest_reactions?: ReactionResponse<T>[] | undefined;
         mentioned_users?: UserResponse<T>[] | undefined;
+        moderation_details?: import("stream-chat").ModerationDetailsResponse | undefined;
         own_reactions?: ReactionResponse<T>[] | null | undefined;
         pin_expires?: string | null | undefined;
         pinned_at?: string | null | undefined;
@@ -354,7 +364,13 @@ export declare class ChannelService<T extends DefaultStreamChatGenerics = Defaul
         quoted_message?: import("stream-chat").MessageResponseBase<T> | undefined;
     } & Omit<MessageResponse<{
         attachmentType: import("stream-chat").UR;
-        channelType: import("stream-chat").UR;
+        channelType: import("stream-chat").UR; /**
+         * By default the SDK uses an offset based pagination, you can change/extend this by providing your own custom paginator method.
+         *
+         * The method will be called with the result of the latest channel query.
+         *
+         * You can return either an offset, or a filter using the [`$lte`/`$gte` operator](https://getstream.io/chat/docs/javascript/query_syntax_operators/). If you return a filter, it will be merged with the filter provided for the `init` method.
+         */
         commandType: import("stream-chat").LiteralStringForUnion;
         eventType: import("stream-chat").UR;
         messageType: {};
@@ -458,6 +474,12 @@ export declare class ChannelService<T extends DefaultStreamChatGenerics = Defaul
      * @returns all reactions of a message
      */
     getMessageReactions(messageId: string): Promise<ReactionResponse<T>[]>;
+    /**
+     * Marks the channel from the given message as unread
+     * @param messageId
+     * @returns the result of the request
+     */
+    markMessageUnread(messageId: string): Promise<import("stream-chat").APIResponse | null | undefined>;
     private messageUpdated;
     private messageReactionEventReceived;
     private formatMessage;

package/lib/custom-templates.service.d.ts

@@ -1,6 +1,6 @@
 import { TemplateRef } from '@angular/core';
 import { BehaviorSubject } from 'rxjs';
-import { AttachmentContext, AttachmentListContext, AttachmentPreviewListContext, AvatarContext, ChannelActionsContext, ChannelHeaderInfoContext, ChannelPreviewContext, CommandAutocompleteListItemContext, CustomAttachmentUploadContext, CustomMetadataContext, DateSeparatorContext, DefaultStreamChatGenerics, DeliveredStatusContext, EmojiPickerContext, IconContext, LoadingIndicatorContext, MentionAutcompleteListItemContext, MentionTemplateContext, MessageActionBoxItemContext, MessageActionsBoxContext, MessageContext, MessageInputContext, MessageReactionsContext, ModalContext, NotificationContext, ReadStatusContext, SendingStatusContext, SystemMessageContext, ThreadHeaderContext, TypingIndicatorContext } from './types';
+import { AttachmentContext, AttachmentListContext, AttachmentPreviewListContext, AvatarContext, ChannelActionsContext, ChannelHeaderInfoContext, ChannelPreviewContext, CommandAutocompleteListItemContext, CustomAttachmentUploadContext, CustomMetadataContext, DateSeparatorContext, DefaultStreamChatGenerics, DeliveredStatusContext, EmojiPickerContext, IconContext, LoadingIndicatorContext, MentionAutcompleteListItemContext, MentionTemplateContext, MessageActionBoxItemContext, MessageActionsBoxContext, MessageContext, MessageInputContext, MessageReactionsContext, ModalContext, NotificationContext, ReadStatusContext, SendingStatusContext, SystemMessageContext, ThreadHeaderContext, TypingIndicatorContext, UnreadMessagesIndicatorContext, UnreadMessagesNotificationContext } from './types';
 import * as i0 from "@angular/core";
 /**
  * A central location for registering your custom templates to override parts of the chat application.
@@ -201,9 +201,17 @@ export declare class CustomTemplatesService<T extends DefaultStreamChatGenerics
      */
     dateSeparatorTemplate$: BehaviorSubject<TemplateRef<DateSeparatorContext> | undefined>;
     /**
-     * The template used to display the new messages indicator inside the [message list](../components/MessageListComponent.mdx)
+     * The template used to display unread messages indicator inside the [message list](../components/MessageListComponent.mdx) when the channel is opened
+     *
+     * This UI element is used to separate unread messages from read messages
+     */
+    newMessagesIndicatorTemplate$: BehaviorSubject<TemplateRef<UnreadMessagesIndicatorContext> | undefined>;
+    /**
+     * The template used to display unread messages notification inside the [message list](../components/MessageListComponent.mdx) when the channel is opened
+     *
+     * Users can use this notification to jump to the first unread message when it's clicked
      */
-    newMessagesIndicatorTemplate$: BehaviorSubject<TemplateRef<void> | undefined>;
+    newMessagesNotificationTemplate$: BehaviorSubject<TemplateRef<UnreadMessagesNotificationContext> | undefined>;
     /**
      * The template to show if the main message list is empty
      */

package/lib/message/message.component.d.ts

@@ -5,7 +5,7 @@ import { ChatClientService } from '../chat-client.service';
 import { AttachmentListContext, MentionTemplateContext, MessageActionsBoxContext, MessageReactionsContext, DefaultStreamChatGenerics, StreamMessage, DeliveredStatusContext, SendingStatusContext, ReadStatusContext, CustomMessageActionItem, SystemMessageContext, CustomMetadataContext } from '../types';
 import { CustomTemplatesService } from '../custom-templates.service';
 import { ThemeService } from '../theme.service';
-import { NgxPopperjsTriggers, NgxPopperjsPlacements } from 'ngx-popperjs';
+import { NgxPopperjsTriggers, NgxPopperjsPlacements, NgxPopperjsContentComponent } from 'ngx-popperjs';
 import { DateParserService } from '../date-parser.service';
 import { MessageService } from '../message.service';
 import { MessageActionsService } from '../message-actions.service';
@@ -97,6 +97,7 @@ export declare class MessageComponent implements OnInit, OnChanges, OnDestroy, A
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
     messageActionsClicked(): void;
+    messageActionsBoxClicked(popperContent: NgxPopperjsContentComponent): void;
     getAttachmentListContext(): AttachmentListContext;
     getMessageContext(): SystemMessageContext;
     getQuotedMessageAttachmentListContext(): AttachmentListContext;

package/lib/message-list/group-styles.d.ts

@@ -1,3 +1,3 @@
 import { StreamMessage } from '../types';
 export declare type GroupStyle = '' | 'middle' | 'top' | 'bottom' | 'single';
-export declare const getGroupStyles: (message: StreamMessage, previousMessage?: StreamMessage<import("../types").DefaultStreamChatGenerics> | undefined, nextMessage?: StreamMessage<import("../types").DefaultStreamChatGenerics> | undefined, noGroupByUser?: boolean) => GroupStyle;
+export declare const getGroupStyles: (message: StreamMessage, previousMessage?: StreamMessage<import("../types").DefaultStreamChatGenerics> | undefined, nextMessage?: StreamMessage<import("../types").DefaultStreamChatGenerics> | undefined, noGroupByUser?: boolean, lastReadMessageId?: string | undefined) => GroupStyle;

package/lib/message-list/message-list.component.d.ts

@@ -1,7 +1,7 @@
 import { AfterViewChecked, AfterViewInit, ChangeDetectorRef, NgZone, OnChanges, OnDestroy, OnInit, SimpleChanges, TemplateRef } from '@angular/core';
 import { ChannelService } from '../channel.service';
 import { Observable } from 'rxjs';
-import { MessageContext, StreamMessage, TypingIndicatorContext, CustomMessageActionItem, DateSeparatorContext } from '../types';
+import { MessageContext, StreamMessage, TypingIndicatorContext, CustomMessageActionItem, DateSeparatorContext, UnreadMessagesNotificationContext, UnreadMessagesIndicatorContext } from '../types';
 import { ChatClientService } from '../chat-client.service';
 import { GroupStyle } from './group-styles';
 import { UserResponse } from 'stream-chat';
@@ -50,13 +50,18 @@ export declare class MessageListComponent implements AfterViewChecked, OnChanges
     displayDateSeparator: boolean;
     /**
      * If date separators are displayed, you can set the horizontal position of the date text.
-     * If `openMessageListAt` is `last-read-message` it will also set the text position of the new messages indicator.
      */
     dateSeparatorTextPos: 'center' | 'right' | 'left';
     /**
      * `last-message` option will open the message list at the last message, `last-read-message` will open the list at the last unread message. This option only works if mode is `main`.
      */
     openMessageListAt: 'last-message' | 'last-read-message';
+    /**
+     * If the user has unread messages when they open the channel the UI shows the unread indicator / notification which features the unread count by default. This count will be increased every time a user receives a new message. If you don't want to show the unread count, you can turn that off.
+     *
+     * This is only applicable for `main` mode, as threads doesn't have read infromation.
+     */
+    hideUnreadCountForNotificationAndIndicator: boolean;
     /**
      * You can turn on and off the loading indicator that signals to users that more messages are being loaded to the message list
      */
@@ -64,13 +69,14 @@ export declare class MessageListComponent implements AfterViewChecked, OnChanges
     typingIndicatorTemplate: TemplateRef<TypingIndicatorContext> | undefined;
     messageTemplate: TemplateRef<MessageContext> | undefined;
     customDateSeparatorTemplate: TemplateRef<DateSeparatorContext> | undefined;
-    customnewMessagesIndicatorTemplate: TemplateRef<void> | undefined;
+    customnewMessagesIndicatorTemplate: TemplateRef<UnreadMessagesIndicatorContext> | undefined;
+    customnewMessagesNotificationTemplate: TemplateRef<UnreadMessagesNotificationContext> | undefined;
     emptyMainMessageListTemplate: TemplateRef<void> | null;
     emptyThreadMessageListTemplate: TemplateRef<void> | null;
     messages$: Observable<StreamMessage[]>;
     enabledMessageActions: string[];
     isEmpty: boolean;
-    unreadMessageCount: number;
+    newMessageCountWhileBeingScrolled: number;
     isUserScrolled: boolean | undefined;
     groupStyles: GroupStyle[];
     isNextMessageOnSeparateDate: boolean[];
@@ -80,6 +86,9 @@ export declare class MessageListComponent implements AfterViewChecked, OnChanges
     isLoading: boolean;
     scrollEndTimeout: any;
     lastReadMessageId?: string;
+    isUnreadNotificationVisible: boolean;
+    firstUnreadMessageId?: string;
+    unreadCount?: number;
     isJumpingToLatestUnreadMessage: boolean;
     private scrollContainer;
     private parentMessageElement;
@@ -98,8 +107,11 @@ export declare class MessageListComponent implements AfterViewChecked, OnChanges
     private channelId?;
     private parsedDates;
     private isViewInited;
+    private checkIfUnreadNotificationIsVisibleTimeout?;
     private get class();
     constructor(channelService: ChannelService, chatClientService: ChatClientService, customTemplatesService: CustomTemplatesService, dateParser: DateParserService, ngZone: NgZone, cdRef: ChangeDetectorRef, messageActionsService: MessageActionsService);
+    messageNotificationJumpClicked: () => void;
+    messageNotificationDismissClicked: () => void;
     ngOnInit(): void;
     ngOnChanges(changes: SimpleChanges): void;
     ngAfterViewInit(): void;
@@ -111,6 +123,7 @@ export declare class MessageListComponent implements AfterViewChecked, OnChanges
     scrollToBottom(): void;
     scrollToTop(): void;
     scrolled(): void;
+    jumpToFirstUnreadMessage(): void;
     getTypingIndicatorContext(): TypingIndicatorContext;
     getTypingIndicatorText(users: UserResponse[]): string;
     isSentByCurrentUser(message?: StreamMessage): boolean;
@@ -131,5 +144,5 @@ export declare class MessageListComponent implements AfterViewChecked, OnChanges
     private newMessageReceived;
     private checkIfOnSeparateDates;
     static ɵfac: i0.ɵɵFactoryDeclaration<MessageListComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MessageListComponent, "stream-message-list", never, { "mode": "mode"; "direction": "direction"; "messageOptionsTrigger": "messageOptionsTrigger"; "hideJumpToLatestButtonDuringScroll": "hideJumpToLatestButtonDuringScroll"; "customMessageActions": "customMessageActions"; "displayDateSeparator": "displayDateSeparator"; "dateSeparatorTextPos": "dateSeparatorTextPos"; "openMessageListAt": "openMessageListAt"; "displayLoadingIndicator": "displayLoadingIndicator"; }, {}, never, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MessageListComponent, "stream-message-list", never, { "mode": "mode"; "direction": "direction"; "messageOptionsTrigger": "messageOptionsTrigger"; "hideJumpToLatestButtonDuringScroll": "hideJumpToLatestButtonDuringScroll"; "customMessageActions": "customMessageActions"; "displayDateSeparator": "displayDateSeparator"; "dateSeparatorTextPos": "dateSeparatorTextPos"; "openMessageListAt": "openMessageListAt"; "hideUnreadCountForNotificationAndIndicator": "hideUnreadCountForNotificationAndIndicator"; "displayLoadingIndicator": "displayLoadingIndicator"; }, {}, never, never>;
 }

package/lib/types.d.ts

@@ -193,7 +193,7 @@ declare type MessageActionItemBase<T extends DefaultStreamChatGenerics = Default
     actionHandler: (message: StreamMessage<T>, isMine: boolean) => any;
 };
 export declare type MessageActionItem<T extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = MessageActionItemBase<T> & {
-    actionName: 'quote' | 'pin' | 'flag' | 'edit' | 'delete';
+    actionName: 'quote' | 'pin' | 'flag' | 'edit' | 'delete' | 'mark-unread';
 };
 export declare type CustomMessageActionItem<T extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = MessageActionItemBase<T> & {
     actionName: string;
@@ -263,7 +263,13 @@ export declare type SystemMessageContext = MessageContext & {
 export declare type DateSeparatorContext = {
     date: Date;
     parsedDate: string;
-    isNewMessage: boolean;
+};
+export declare type UnreadMessagesIndicatorContext = {
+    unreadCount: number;
+};
+export declare type UnreadMessagesNotificationContext = UnreadMessagesIndicatorContext & {
+    onJump: Function;
+    onDismiss: Function;
 };
 export declare type ChannelQueryState = {
     state: 'in-progress' | 'success' | 'error';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stream-chat-angular",
-  "version": "4.58.3",
+  "version": "4.59.0",
   "description": "Angular components to create chat conversations or livestream style chat",
   "author": "GetStream",
   "homepage": "https://getstream.io/chat/",
@@ -12,7 +12,7 @@
     "@angular/common": "^12.2.0 || ^13.0.0 || ^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0",
     "@angular/core": "^12.2.0 || ^13.0.0 || ^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0",
     "@ngx-translate/core": "^13.0.0 || ^14.0.0 || ^15.0.0",
-    "stream-chat": "^8.11.0"
+    "stream-chat": "^8.15.0"
   },
   "dependencies": {
     "angular-mentions": "^1.4.0",

package/src/assets/i18n/en.ts

@@ -107,5 +107,12 @@ export const en = {
     'See original (automatically translated)':
       'See original (automatically translated)',
     'See translation': 'See translation',
+    'Mark as unread': 'Mark as unread',
+    'Error marking message as unread': 'Error marking message as unread',
+    'Error, only the first {{count}} message can be marked as unread':
+      'Error, only the first {{count}} message can be marked as unread',
+    'Unread messages': 'Unread messages',
+    '{{count}} unread messages': '{{count}} unread messages',
+    '{{count}} unread message': '{{count}} unread message',
   },
 };