stream-chat-angular 5.1.11 → 5.2.0

package/lib/channel.service.d.ts

@@ -344,7 +344,6 @@ export declare class ChannelService<T extends DefaultStreamChatGenerics = Defaul
         user?: UserResponse<T> | null | undefined;
         user_id?: string | undefined;
     } & {
-        poll: import("stream-chat").PollResponse<T>;
         type: import("stream-chat").MessageLabel;
         args?: string | undefined;
         before_message_send_failed?: boolean | undefined;
@@ -368,9 +367,13 @@ export declare class ChannelService<T extends DefaultStreamChatGenerics = Defaul
         pin_expires?: string | null | undefined;
         pinned_at?: string | null | undefined;
         pinned_by?: UserResponse<T> | null | undefined;
+        poll?: import("stream-chat").PollResponse<T> | undefined;
         reaction_counts?: {
             [key: string]: number;
         } | null | undefined;
+        reaction_groups?: {
+            [key: string]: import("stream-chat").ReactionGroupResponse;
+        } | null | undefined;
         reaction_scores?: {
             [key: string]: number;
         } | null | undefined;
@@ -391,8 +394,9 @@ export declare class ChannelService<T extends DefaultStreamChatGenerics = Defaul
         pollType: import("stream-chat").UR;
         reactionType: import("stream-chat").UR;
         userType: import("stream-chat").UR;
-    }>, "status" | "created_at" | "pinned_at" | "updated_at"> & import("stream-chat").UR & {
+    }>, "status" | "created_at" | "pinned_at" | "updated_at" | "deleted_at"> & import("stream-chat").UR & {
         created_at: Date;
+        deleted_at: Date | null;
         pinned_at: Date | null;
         status: string;
         updated_at: Date;
@@ -499,6 +503,7 @@ export declare class ChannelService<T extends DefaultStreamChatGenerics = Defaul
     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).
+     * @deprecated use [`messageReactionsService.queryReactions()`](https://getstream.io/chat/docs/sdk/angular/services/MessageReactionsService/#queryreactions) instead
      * @param messageId
      * @returns all reactions of a message
      */

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

@@ -1,6 +1,5 @@
 import { AfterViewInit, ChangeDetectorRef, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
-import { ReactionResponse, UserResponse } from 'stream-chat';
-import { ChannelService } from '../channel.service';
+import { ReactionGroupResponse, ReactionResponse, UserResponse } from 'stream-chat';
 import { MessageReactionType, DefaultStreamChatGenerics } from '../types';
 import { MessageReactionsService } from '../message-reactions.service';
 import { CustomTemplatesService } from '../custom-templates.service';
@@ -10,7 +9,6 @@ import * as i0 from "@angular/core";
  */
 export declare class MessageReactionsComponent implements OnChanges, OnInit, AfterViewInit, OnDestroy {
     private cdRef;
-    private channelService;
     private messageReactionsService;
     customTemplatesService: CustomTemplatesService;
     /**
@@ -20,11 +18,19 @@ export declare class MessageReactionsComponent implements OnChanges, OnInit, Aft
     /**
      * 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)
      */
+    messageReactionGroups: {
+        [key: string]: ReactionGroupResponse;
+    } | undefined;
+    /**
+     * 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)
+     * @deprecated use `messageReactionGroups`
+     */
     messageReactionCounts: {
         [key in MessageReactionType]?: number;
     };
     /**
      * List of reactions of a [message](../types/stream-message.mdx), used to display the users of a reaction type.
+     * @deprecated you can fetch the reactions using [`messageReactionsService.queryReactions()`](https://getstream.io/chat/docs/sdk/angular/services/MessageReactionsService/#queryreactions)
      */
     latestReactions: ReactionResponse<DefaultStreamChatGenerics>[];
     /**
@@ -37,25 +43,27 @@ export declare class MessageReactionsComponent implements OnChanges, OnInit, Aft
     reactions: ReactionResponse[];
     shouldHandleReactionClick: boolean;
     existingReactions: string[];
-    reactionsCount: number;
     reactionOptions: string[];
+    usersByReactions: {
+        [key: string]: {
+            users: UserResponse[];
+            next?: string;
+        };
+    };
     private subscriptions;
     private isViewInited;
-    constructor(cdRef: ChangeDetectorRef, channelService: ChannelService, messageReactionsService: MessageReactionsService, customTemplatesService: CustomTemplatesService);
+    constructor(cdRef: ChangeDetectorRef, messageReactionsService: MessageReactionsService, customTemplatesService: CustomTemplatesService);
     ngOnInit(): void;
     ngOnChanges(changes: SimpleChanges): void;
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
     getEmojiByReaction(reactionType: MessageReactionType): string;
-    reactionSelected(reactionType: string): void;
-    getUsersByReaction(reactionType: MessageReactionType): string;
-    getAllUsersByReaction(reactionType?: MessageReactionType): UserResponse<DefaultStreamChatGenerics>[];
+    reactionSelected(reactionType: string): Promise<void>;
+    loadNextPageOfReactions(): Promise<void>;
     trackByMessageReaction(_: number, item: MessageReactionType): string;
-    trackByUserId(_: number, item: UserResponse): string;
     isOwnReaction(reactionType: MessageReactionType): boolean;
     isOpenChange: (isOpen: boolean) => void;
-    private fetchAllReactions;
     private setExistingReactions;
     static ɵfac: i0.ɵɵFactoryDeclaration<MessageReactionsComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MessageReactionsComponent, "stream-message-reactions", never, { "messageId": "messageId"; "messageReactionCounts": "messageReactionCounts"; "latestReactions": "latestReactions"; "ownReactions": "ownReactions"; }, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MessageReactionsComponent, "stream-message-reactions", never, { "messageId": "messageId"; "messageReactionGroups": "messageReactionGroups"; "messageReactionCounts": "messageReactionCounts"; "latestReactions": "latestReactions"; "ownReactions": "ownReactions"; }, {}, never, never, false, never>;
 }

package/lib/message-reactions.service.d.ts

@@ -1,11 +1,15 @@
 import { MessageReactionClickDetails, MessageReactionType } from './types';
 import { BehaviorSubject } from 'rxjs';
+import { ChatClientService } from './chat-client.service';
+import { NotificationService } from './notification.service';
 import * as i0 from "@angular/core";
 /**
  * The `MessageReactionsService` provides customization options to message [reactions](https://getstream.io/chat/docs/javascript/send_reaction/?language=javascript).
  *
  */
 export declare class MessageReactionsService {
+    private chatClientService;
+    private notificationService;
     /**
      * The enabled [reactions](https://getstream.io/chat/docs/javascript/send_reaction/?language=javascript) and the associated emoji
      *
@@ -17,10 +21,10 @@ export declare class MessageReactionsService {
     /**
      * By default the [`MessageReactionsComponent`](../../components/MessageReactionsComponent) will display the reacting users when a reaction is clicked. You can override this with your own UI by providing a custom event handler.
      *
-     * The event handler can retrieve all reactions of a message inside the active channel using the [`channelService.getMessageReactions` method](../../services/ChannelService/#getmessagereactions)
+     * The event handler can retrieve all reactions of a message using the [`messageReactionsService.queryReactions()`](https://getstream.io/chat/docs/sdk/angular/services/MessageReactionsService/#queryreactions)
      */
     customReactionClickHandler?: (details: MessageReactionClickDetails) => void;
-    constructor();
+    constructor(chatClientService: ChatClientService, notificationService: NotificationService);
     /**
      * Sets the enabled reactions
      */
@@ -33,6 +37,14 @@ export declare class MessageReactionsService {
     get reactions(): {
         [key in MessageReactionType]: string;
     };
+    /**
+     * Query reactions of a specific message, more info in the [API documentation](https://getstream.io/chat/docs/javascript/send_reaction/?language=javascript#query-reactions)
+     * @param messageId
+     * @param type
+     * @param next
+     * @returns the reactions and the cursor for the next/prev pages
+     */
+    queryReactions(messageId: string, type: string, next?: string): Promise<import("stream-chat").QueryReactionsAPIResponse<import("./types").DefaultStreamChatGenerics>>;
     static ɵfac: i0.ɵɵFactoryDeclaration<MessageReactionsService, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<MessageReactionsService>;
 }

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

@@ -0,0 +1,42 @@
+import { AfterViewInit, ChangeDetectorRef, EventEmitter, NgZone, TemplateRef, TrackByFunction } from '@angular/core';
+import * as i0 from "@angular/core";
+/**
+ * The `PaginatedListComponent` is a utility element that can display a list of any items. It uses infinite scrolls to load more elements. Providing the data to display, is the responsibility of the parent component.
+ */
+export declare class PaginatedListComponent<T> implements AfterViewInit {
+    private ngZone;
+    private cdRef;
+    /**
+     * The items to display
+     */
+    items: T[];
+    /**
+     * If `true`, the loading indicator will be displayed
+     */
+    isLoading: boolean;
+    /**
+     * If `false` the component won't ask for more data vua the `loadMore` output
+     */
+    hasMore: boolean;
+    /**
+     * The `trackBy` to use with the `NgFor` directive
+     * @param i
+     * @returns the track by id
+     */
+    trackBy: TrackByFunction<T>;
+    itemTempalteRef: TemplateRef<T> | undefined;
+    /**
+     * The component will signal via this output when more items should be fetched
+     *
+     * The new items should be appended to the `items` array
+     */
+    readonly loadMore: EventEmitter<void>;
+    isScrollable: boolean;
+    isAtBottom: boolean;
+    private scrollContainer;
+    constructor(ngZone: NgZone, cdRef: ChangeDetectorRef);
+    ngAfterViewInit(): void;
+    private scrolled;
+    static ɵfac: i0.ɵɵFactoryDeclaration<PaginatedListComponent<any>, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PaginatedListComponent<any>, "stream-paginated-list", never, { "items": "items"; "isLoading": "isLoading"; "hasMore": "hasMore"; "trackBy": "trackBy"; }, { "loadMore": "loadMore"; }, ["itemTempalteRef"], never, false, never>;
+}

package/lib/stream-chat.module.d.ts

@@ -23,12 +23,14 @@ import * as i21 from "./message-bounce-prompt/message-bounce-prompt.component";
 import * as i22 from "./voice-recording/voice-recording.component";
 import * as i23 from "./voice-recording/voice-recording-wavebar/voice-recording-wavebar.component";
 import * as i24 from "./message-reactions-selector/message-reactions-selector.component";
-import * as i25 from "@angular/common";
-import * as i26 from "ngx-float-ui";
-import * as i27 from "./stream-avatar.module";
-import * as i28 from "@ngx-translate/core";
+import * as i25 from "./user-list/user-list.component";
+import * as i26 from "./paginated-list/paginated-list.component";
+import * as i27 from "@angular/common";
+import * as i28 from "ngx-float-ui";
+import * as i29 from "./stream-avatar.module";
+import * as i30 from "@ngx-translate/core";
 export declare class StreamChatModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<StreamChatModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<StreamChatModule, [typeof i1.ChannelComponent, typeof i2.ChannelHeaderComponent, typeof i3.ChannelListComponent, typeof i4.ChannelPreviewComponent, typeof i5.MessageComponent, typeof i6.MessageInputComponent, typeof i7.MessageListComponent, typeof i8.LoadingIndicatorComponent, typeof i9.IconComponent, typeof i10.MessageActionsBoxComponent, typeof i11.AttachmentListComponent, typeof i12.MessageReactionsComponent, typeof i13.NotificationComponent, typeof i14.NotificationListComponent, typeof i15.AttachmentPreviewListComponent, typeof i16.ModalComponent, typeof i17.TextareaDirective, typeof i18.ThreadComponent, typeof i19.IconPlaceholderComponent, typeof i20.LoadingIndicatorPlaceholderComponent, typeof i21.MessageBouncePromptComponent, typeof i22.VoiceRecordingComponent, typeof i23.VoiceRecordingWavebarComponent, typeof i24.MessageReactionsSelectorComponent], [typeof i25.CommonModule, typeof i26.NgxFloatUiModule, typeof i27.StreamAvatarModule, typeof i28.TranslateModule], [typeof i1.ChannelComponent, typeof i2.ChannelHeaderComponent, typeof i3.ChannelListComponent, typeof i4.ChannelPreviewComponent, typeof i5.MessageComponent, typeof i6.MessageInputComponent, typeof i7.MessageListComponent, typeof i8.LoadingIndicatorComponent, typeof i9.IconComponent, typeof i10.MessageActionsBoxComponent, typeof i11.AttachmentListComponent, typeof i12.MessageReactionsComponent, typeof i13.NotificationComponent, typeof i14.NotificationListComponent, typeof i15.AttachmentPreviewListComponent, typeof i16.ModalComponent, typeof i27.StreamAvatarModule, typeof i18.ThreadComponent, typeof i19.IconPlaceholderComponent, typeof i20.LoadingIndicatorPlaceholderComponent, typeof i21.MessageBouncePromptComponent, typeof i22.VoiceRecordingComponent, typeof i23.VoiceRecordingWavebarComponent, typeof i24.MessageReactionsSelectorComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<StreamChatModule, [typeof i1.ChannelComponent, typeof i2.ChannelHeaderComponent, typeof i3.ChannelListComponent, typeof i4.ChannelPreviewComponent, typeof i5.MessageComponent, typeof i6.MessageInputComponent, typeof i7.MessageListComponent, typeof i8.LoadingIndicatorComponent, typeof i9.IconComponent, typeof i10.MessageActionsBoxComponent, typeof i11.AttachmentListComponent, typeof i12.MessageReactionsComponent, typeof i13.NotificationComponent, typeof i14.NotificationListComponent, typeof i15.AttachmentPreviewListComponent, typeof i16.ModalComponent, typeof i17.TextareaDirective, typeof i18.ThreadComponent, typeof i19.IconPlaceholderComponent, typeof i20.LoadingIndicatorPlaceholderComponent, typeof i21.MessageBouncePromptComponent, typeof i22.VoiceRecordingComponent, typeof i23.VoiceRecordingWavebarComponent, typeof i24.MessageReactionsSelectorComponent, typeof i25.UserListComponent, typeof i26.PaginatedListComponent], [typeof i27.CommonModule, typeof i28.NgxFloatUiModule, typeof i29.StreamAvatarModule, typeof i30.TranslateModule], [typeof i1.ChannelComponent, typeof i2.ChannelHeaderComponent, typeof i3.ChannelListComponent, typeof i4.ChannelPreviewComponent, typeof i5.MessageComponent, typeof i6.MessageInputComponent, typeof i7.MessageListComponent, typeof i8.LoadingIndicatorComponent, typeof i9.IconComponent, typeof i10.MessageActionsBoxComponent, typeof i11.AttachmentListComponent, typeof i12.MessageReactionsComponent, typeof i13.NotificationComponent, typeof i14.NotificationListComponent, typeof i15.AttachmentPreviewListComponent, typeof i16.ModalComponent, typeof i29.StreamAvatarModule, typeof i18.ThreadComponent, typeof i19.IconPlaceholderComponent, typeof i20.LoadingIndicatorPlaceholderComponent, typeof i21.MessageBouncePromptComponent, typeof i22.VoiceRecordingComponent, typeof i23.VoiceRecordingWavebarComponent, typeof i24.MessageReactionsSelectorComponent, typeof i25.UserListComponent, typeof i26.PaginatedListComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<StreamChatModule>;
 }

package/lib/types.d.ts

@@ -1,6 +1,6 @@
 import { TemplateRef } from '@angular/core';
 import { Observable, Subject } from 'rxjs';
-import type { Attachment, Channel, ChannelFilters, ChannelMemberResponse, CommandResponse, Event, ExtendableGenerics, FormatMessageResponse, LiteralStringForUnion, MessageResponseBase, Mute, ReactionResponse, User, UserResponse } from 'stream-chat';
+import type { Attachment, Channel, ChannelFilters, ChannelMemberResponse, CommandResponse, Event, ExtendableGenerics, FormatMessageResponse, LiteralStringForUnion, MessageResponseBase, Mute, ReactionGroupResponse, ReactionResponse, User, UserResponse } from 'stream-chat';
 import { AttachmentService } from './attachment.service';
 import { Icon } from './icon/icon.component';
 export declare type UnknownType = Record<string, unknown>;
@@ -138,7 +138,11 @@ export declare type AttachmentListContext = {
     imageModalStateChangeHandler?: (state: 'opened' | 'closed') => void;
 };
 export declare type AvatarType = 'channel' | 'user';
-export declare type AvatarLocation = 'channel-preview' | 'channel-header' | 'message-sender' | 'message-reader' | 'quoted-message-sender' | 'autocomplete-item' | 'typing-indicator' | 'reaction';
+export declare type AvatarLocation = 'channel-preview' | 'channel-header' | 'message-sender' | 'message-reader' | 'quoted-message-sender' | 'autocomplete-item' | 'typing-indicator'
+/**
+ * @deprecated this will be renamed to user-list in the next major release
+ */
+ | 'reaction';
 export declare type AvatarContext = {
     name: string | undefined;
     imageUrl: string | undefined;
@@ -196,11 +200,16 @@ export declare type MessageReactionsSelectorContext = {
 };
 export declare type MessageReactionsContext = {
     messageId: string | undefined;
+    /** @deprecated use `messageReactionGroups` */
     messageReactionCounts: {
         [key in MessageReactionType]?: number;
     };
+    /** @deprecated you can fetch the reactions using [`chatService.chatClient.queryReactions()`](https://getstream.io/chat/docs/javascript/send_reaction/?language=javascript&q=queryReactions#query-reactions) */
     latestReactions: ReactionResponse<DefaultStreamChatGenerics>[];
     ownReactions: ReactionResponse<DefaultStreamChatGenerics>[];
+    messageReactionGroups: {
+        [key in MessageReactionType]: ReactionGroupResponse;
+    };
 };
 export declare type ModalContext = {
     isOpen: boolean;

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

@@ -0,0 +1,30 @@
+import { EventEmitter } from '@angular/core';
+import { UserResponse } from 'stream-chat';
+import { DefaultStreamChatGenerics } from '../types';
+import * as i0 from "@angular/core";
+/**
+ * The `UserListComponent` can display a list of Stream users with pagination
+ */
+export declare class UserListComponent {
+    /**
+     * The users to display
+     */
+    users: UserResponse<DefaultStreamChatGenerics>[];
+    /**
+     * If `true`, the loading indicator will be displayed
+     */
+    isLoading: boolean;
+    /**
+     * If `false` the component won't ask for more data vua the `loadMore` output
+     */
+    hasMore: boolean;
+    /**
+     * The component will signal via this output when more items should be fetched
+     *
+     * The new items should be appended to the `items` array
+     */
+    readonly loadMore: EventEmitter<void>;
+    trackByUserId(_: number, item: UserResponse): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<UserListComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<UserListComponent, "stream-user-list", never, { "users": "users"; "isLoading": "isLoading"; "hasMore": "hasMore"; }, { "loadMore": "loadMore"; }, never, never, false, never>;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stream-chat-angular",
-  "version": "5.1.11",
+  "version": "5.2.0",
   "description": "Angular components to create chat conversations or livestream style chat",
   "author": "GetStream",
   "homepage": "https://getstream.io/chat/",
@@ -32,7 +32,7 @@
     "@angular/core": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0",
     "@ngx-translate/core": "^14.0.0 || ^15.0.0",
     "rxjs": "^7.4.0",
-    "stream-chat": "^8.26.0"
+    "stream-chat": "^8.29.0"
   },
   "dependencies": {
     "@floating-ui/dom": "^1.6.3",

package/public-api.d.ts

@@ -61,3 +61,5 @@ export * from './lib/message-reactions-selector/message-reactions-selector.compo
 export * from './lib/channel-query';
 export * from './lib/virtualized-list.service';
 export * from './lib/virtualized-message-list.service';
+export * from './lib/user-list/user-list.component';
+export * from './lib/paginated-list/paginated-list.component';