stream-chat-angular 5.0.0 → 5.1.0

package/lib/avatar/avatar.component.d.ts

@@ -1,4 +1,4 @@
-import { AfterViewInit, ChangeDetectorRef, NgZone, OnChanges, OnInit, SimpleChanges } from '@angular/core';
+import { AfterViewInit, ChangeDetectorRef, NgZone, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
 import { Channel, User } from 'stream-chat';
 import { ChatClientService } from '../chat-client.service';
 import { AvatarLocation, AvatarType, DefaultStreamChatGenerics } from '../types';
@@ -6,7 +6,7 @@ import * as i0 from "@angular/core";
 /**
  * The `Avatar` component displays the provided image, with fallback to the first letter of the optional name input.
  */
-export declare class AvatarComponent implements OnChanges, OnInit, OnChanges, AfterViewInit {
+export declare class AvatarComponent implements OnChanges, OnInit, OnChanges, AfterViewInit, OnDestroy {
     private chatClientService;
     private ngZone;
     private cdRef;
@@ -53,6 +53,7 @@ export declare class AvatarComponent implements OnChanges, OnInit, OnChanges, Af
     constructor(chatClientService: ChatClientService, ngZone: NgZone, cdRef: ChangeDetectorRef);
     ngOnInit(): void;
     ngOnChanges(changes: SimpleChanges): void;
+    ngOnDestroy(): void;
     private setFallbackChannelImage;
     private setInitials;
     private updateIsOnlineSubscription;

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

@@ -25,7 +25,7 @@ export declare class ChannelListComponent implements OnDestroy {
     constructor(channelService: ChannelService, customTemplatesService: CustomTemplatesService, themeService: ThemeService);
     ngOnDestroy(): void;
     loadMoreChannels(): Promise<void>;
-    trackByChannelId(index: number, item: Channel<DefaultStreamChatGenerics>): string;
+    trackByChannelId(_: number, item: Channel<DefaultStreamChatGenerics>): string;
     static ɵfac: i0.ɵɵFactoryDeclaration<ChannelListComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<ChannelListComponent, "stream-channel-list", never, {}, {}, never, ["[channel-list-top]", "[channel-list-bottom]"], false, never>;
 }

package/lib/channel.service.d.ts

@@ -187,14 +187,11 @@ export declare class ChannelService<T extends DefaultStreamChatGenerics = Defaul
      * The provided method will be called before a message is sent to Stream's API for update. You can use this hook to tranfrom or enrich the message being updated.
      */
     beforeUpdateMessage?: (message: StreamMessage<T>) => StreamMessage<T> | Promise<StreamMessage<T>>;
-    /**
-     * @internal
-     */
-    static readonly MAX_MESSAGE_COUNT_IN_MESSAGE_LIST = 250;
     /**
      * @internal
      */
     static readonly MAX_MESSAGE_REACTIONS_TO_FETCH = 1200;
+    messagePageSize: number;
     private channelsSubject;
     private activeChannelSubject;
     private activeChannelMessagesSubject;
@@ -206,7 +203,6 @@ export declare class ChannelService<T extends DefaultStreamChatGenerics = Defaul
     private activeThreadMessagesSubject;
     private jumpToMessageSubject;
     private latestMessageDateByUserByChannelsSubject;
-    private messagePageSize;
     private readonly attachmentMaxSizeFallbackInMB;
     private messageToQuoteSubject;
     private usersTypingInChannelSubject;
@@ -225,10 +221,6 @@ export declare class ChannelService<T extends DefaultStreamChatGenerics = Defaul
     private dismissErrorNotification?;
     private areReadEventsPaused;
     constructor(chatClientService: ChatClientService<T>, ngZone: NgZone, notificationService: NotificationService);
-    /**
-     * internal
-     */
-    removeOldMessageFromMessageList(): void;
     /**
      * 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.
      */
@@ -381,9 +373,7 @@ export declare class ChannelService<T extends DefaultStreamChatGenerics = Defaul
         } | null | undefined;
         reply_count?: number | undefined;
         shadowed?: boolean | undefined;
-        status?: string | undefined; /**
-         * 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.
-         */
+        status?: string | undefined;
         thread_participants?: UserResponse<T>[] | undefined;
         updated_at?: string | undefined;
     } & {
@@ -500,6 +490,10 @@ export declare class ChannelService<T extends DefaultStreamChatGenerics = Defaul
      * The current active channel messages
      */
     get activeChannelMessages(): (StreamMessage<T> | MessageResponse<T> | FormatMessageResponse<T>)[];
+    /**
+     * The current thread replies
+     */
+    get activeChannelThreadReplies(): (StreamMessage<T> | MessageResponse<T> | FormatMessageResponse<T>)[];
     /**
      * Get the last 1200 reactions of a message in the current active channel. If you need to fetch more reactions please use the [following endpoint](https://getstream.io/chat/docs/javascript/send_reaction/?language=javascript#paginating-reactions).
      * @param messageId

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

@@ -57,10 +57,6 @@ export declare class MessageListComponent implements AfterViewChecked, OnChanges
      * You can turn on and off the loading indicator that signals to users that more messages are being loaded to the message list
      */
     displayLoadingIndicator: boolean;
-    /**
-     * @internal
-     */
-    limitNumberOfMessagesInList: boolean;
     typingIndicatorTemplate: TemplateRef<TypingIndicatorContext> | undefined;
     messageTemplate: TemplateRef<MessageContext> | undefined;
     customDateSeparatorTemplate: TemplateRef<DateSeparatorContext> | undefined;
@@ -78,7 +74,7 @@ export declare class MessageListComponent implements AfterViewChecked, OnChanges
     lastSentMessageId: string | undefined;
     parentMessage: StreamMessage | undefined;
     highlightedMessageId: string | undefined;
-    isLoading: boolean;
+    loadingState: 'idle' | 'loading-top' | 'loading-bottom';
     scrollEndTimeout?: ReturnType<typeof setTimeout>;
     lastReadMessageId?: string;
     isUnreadNotificationVisible: boolean;
@@ -86,18 +82,13 @@ export declare class MessageListComponent implements AfterViewChecked, OnChanges
     unreadCount?: number;
     isJumpingToLatestUnreadMessage: boolean;
     isJumpToLatestButtonVisible: boolean;
+    isJumpingToMessage: boolean;
     scroll$: Subject<void>;
     private scrollContainer;
     private parentMessageElement;
-    private latestMessage;
-    private hasNewMessages;
-    private containerHeight;
-    private oldestMessage;
-    private olderMassagesLoaded;
     private isNewMessageSentByUser;
     private subscriptions;
     private newMessageSubscription;
-    private prevScrollTop;
     private usersTypingInChannel$;
     private usersTypingInThread$;
     private isLatestMessageInList;
@@ -106,11 +97,15 @@ export declare class MessageListComponent implements AfterViewChecked, OnChanges
     private isViewInited;
     private checkIfUnreadNotificationIsVisibleTimeout?;
     private jumpToLatestButtonVisibilityTimeout?;
-    private messageRemoveTimeout?;
-    private removeOldMessagesSubscription?;
     private isSafari;
     private forceRepaintSubject;
+    private messageIdToAnchorTo?;
+    private anchorMessageTopOffset?;
     private get class();
+    private virtualizedList?;
+    private scrollPosition$;
+    private jumpToItemSubscription?;
+    private queryStateSubscription?;
     constructor(channelService: ChannelService, chatClientService: ChatClientService, customTemplatesService: CustomTemplatesService, dateParser: DateParserService, ngZone: NgZone, cdRef: ChangeDetectorRef);
     messageNotificationJumpClicked: () => void;
     messageNotificationDismissClicked: () => void;
@@ -119,8 +114,8 @@ export declare class MessageListComponent implements AfterViewChecked, OnChanges
     ngAfterViewInit(): void;
     ngAfterViewChecked(): void;
     ngOnDestroy(): void;
-    trackByMessageId(index: number, item: StreamMessage): string;
-    trackByUserId(index: number, user: UserResponse): string;
+    trackByMessageId(_: number, item: StreamMessage): string;
+    trackByUserId(_: number, user: UserResponse): string;
     jumpToLatestMessage(): void;
     scrollToBottom(): void;
     scrollToTop(): void;
@@ -137,14 +132,13 @@ export declare class MessageListComponent implements AfterViewChecked, OnChanges
     private preserveScrollbarPosition;
     private forceRepaint;
     private getScrollPosition;
-    private shouldLoadMoreMessages;
     private setMessages$;
     private resetScrollState;
+    private disposeVirtualizedList;
     private get usersTyping$();
     private scrollMessageIntoView;
-    private scrollToLatestMessage;
     private newMessageReceived;
     private checkIfOnSeparateDates;
     static ɵfac: i0.ɵɵFactoryDeclaration<MessageListComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MessageListComponent, "stream-message-list", never, { "mode": "mode"; "direction": "direction"; "hideJumpToLatestButtonDuringScroll": "hideJumpToLatestButtonDuringScroll"; "displayDateSeparator": "displayDateSeparator"; "displayUnreadSeparator": "displayUnreadSeparator"; "dateSeparatorTextPos": "dateSeparatorTextPos"; "openMessageListAt": "openMessageListAt"; "hideUnreadCountForNotificationAndIndicator": "hideUnreadCountForNotificationAndIndicator"; "displayLoadingIndicator": "displayLoadingIndicator"; "limitNumberOfMessagesInList": "limitNumberOfMessagesInList"; }, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MessageListComponent, "stream-message-list", never, { "mode": "mode"; "direction": "direction"; "hideJumpToLatestButtonDuringScroll": "hideJumpToLatestButtonDuringScroll"; "displayDateSeparator": "displayDateSeparator"; "displayUnreadSeparator": "displayUnreadSeparator"; "dateSeparatorTextPos": "dateSeparatorTextPos"; "openMessageListAt": "openMessageListAt"; "hideUnreadCountForNotificationAndIndicator": "hideUnreadCountForNotificationAndIndicator"; "displayLoadingIndicator": "displayLoadingIndicator"; }, {}, never, never, false, never>;
 }

package/lib/types.d.ts

@@ -303,4 +303,11 @@ export declare type ChannelQueryResult<T extends DefaultStreamChatGenerics = Def
     channels: Channel<T>[];
     hasMorePage: boolean;
 };
+export declare type VirtualizedListScrollPosition = 'top' | 'bottom' | 'middle';
+export declare type VirtualizedListQueryState = {
+    state: 'loading-top' | 'loading-bottom' | 'success' | 'error';
+    error?: unknown;
+};
+export declare type VirtualizedListQueryDirection = 'top' | 'bottom';
+export declare type VirtualizedListVerticalItemPosition = 'top' | 'bottom' | 'middle';
 export {};

package/lib/virtualized-list.service.d.ts

@@ -0,0 +1,58 @@
+import { BehaviorSubject, Observable, Subject } from 'rxjs';
+import { VirtualizedListQueryDirection, VirtualizedListQueryState, VirtualizedListScrollPosition, VirtualizedListVerticalItemPosition } from './types';
+/**
+ * The `VirtualizedListService` removes items from a list that are not currently displayed. This is a high-level overview of how it works:
+ * - Create a new instance for each list that needs virtualization
+ * - Input: Provide a reactive stream that emits all items in the list
+ * - Input: Provide a reactive stream that emit the current scroll position (top, middle or bottom)
+ * - Input: maximum number of items that are allowed in the list (in practice the service can make the virtualized list half this number, you should take this into account when choosing the value)
+ * - Output: The service will emit the current list of displayed items via the virtualized items reactive stream
+ * - For simplicity, the service won't track the height of the items, nor it needs an exact scroll location -> this is how removing items work:
+ *   - If scroll location is bottom/top items around the current bottom/top item will be emitted in the virtualized items stream
+ *   - If scroll location is middle, the service won't remove items, if new items are received, those will be appended to the virtualized list  (this means that in theory the list can grow very big if a lot of new items are received while the user is scrolled somewhere, this is a trade-off for the simplicity of no height tracking)
+ *   - Since there is no height tracking, you should make sure to provide a maximum number that is big enough to fill the biggest expected screen size twice
+ * - If the user scrolls to the bottom/top and there are no more local items to show, the service will trigger a query to load more items
+ *   - Input: you should provide the page size to use, in order for the service to determine if loading is necessary
+ *
+ * The `VirtualizedMessageListService` provides an implementation for the message list component.
+ */
+export declare abstract class VirtualizedListService<T> {
+    private allItems$;
+    private scrollPosition$;
+    readonly jumpToItem$?: Observable<{
+        item: Partial<T> | undefined;
+        position?: VirtualizedListVerticalItemPosition | undefined;
+    }> | undefined;
+    readonly pageSize: number;
+    readonly maxItemCount: number;
+    /**
+     * The items that should be currently displayed, a subset of all items
+     */
+    virtualizedItems$: Observable<T[]>;
+    /**
+     * The result of the last query used to load more items
+     */
+    queryState$: Observable<VirtualizedListQueryState>;
+    protected queryStateSubject: BehaviorSubject<VirtualizedListQueryState>;
+    protected bufferOnTop: number;
+    protected bufferOnBottom: number;
+    protected loadFromBuffer$: Subject<void>;
+    private virtualizedItemsSubject;
+    private subscriptions;
+    constructor(allItems$: Observable<T[]>, scrollPosition$: Observable<VirtualizedListScrollPosition>, jumpToItem$?: Observable<{
+        item: Partial<T> | undefined;
+        position?: VirtualizedListVerticalItemPosition | undefined;
+    }> | undefined, pageSize?: number, maxItemCount?: number);
+    /**
+     * The current value of virtualized items
+     */
+    get virtualizedItems(): T[];
+    /**
+     * Remove all subscriptions, call this once you're done using an instance of this service
+     */
+    dispose(): void;
+    protected loadMoreFromBuffer(_: VirtualizedListQueryDirection): void;
+    private loadMore;
+    protected abstract isEqual: (t1: T, t2: T) => boolean;
+    protected abstract query: (direction: VirtualizedListQueryDirection) => Promise<unknown>;
+}

package/lib/virtualized-message-list.service.d.ts

@@ -0,0 +1,15 @@
+import { ChannelService } from './channel.service';
+import { VirtualizedListQueryDirection, VirtualizedListScrollPosition, StreamMessage } from './types';
+import { Observable } from 'rxjs';
+import { VirtualizedListService } from './virtualized-list.service';
+/**
+ * The `VirtualizedMessageListService` removes messages from the message list that are currently not in view
+ */
+export declare class VirtualizedMessageListService extends VirtualizedListService<StreamMessage> {
+    readonly mode: 'thread' | 'main';
+    private channelService;
+    constructor(mode: 'thread' | 'main', scrollPosition$: Observable<VirtualizedListScrollPosition>, channelService: ChannelService);
+    protected loadMoreFromBuffer(direction: VirtualizedListQueryDirection): void;
+    protected isEqual: (t1: StreamMessage, t2: StreamMessage) => boolean;
+    protected query: (direction: VirtualizedListQueryDirection) => Promise<void> | Promise<import("stream-chat").QueryChannelAPIResponse<import("./types").DefaultStreamChatGenerics>>;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stream-chat-angular",
-  "version": "5.0.0",
+  "version": "5.1.0",
   "description": "Angular components to create chat conversations or livestream style chat",
   "author": "GetStream",
   "homepage": "https://getstream.io/chat/",

package/public-api.d.ts

@@ -59,3 +59,5 @@ export * from './lib/voice-recording/voice-recording-wavebar/voice-recording-wav
 export * from './lib/is-on-separate-date';
 export * from './lib/message-reactions-selector/message-reactions-selector.component';
 export * from './lib/channel-query';
+export * from './lib/virtualized-list.service';
+export * from './lib/virtualized-message-list.service';