stream-chat-angular 3.0.0-beta.2 → 3.0.0-beta.5

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

@@ -1,13 +1,15 @@
 import { OnChanges } from '@angular/core';
 import { Action, Attachment } from 'stream-chat';
 import { ImageLoadService } from '../message-list/image-load.service';
-import { DefaultAttachmentType } from '../types';
+import { DefaultAttachmentType, ModalContext } from '../types';
 import { ChannelService } from '../channel.service';
+import { CustomTemplatesService } from '../custom-templates.service';
 import * as i0 from "@angular/core";
 /**
  * The `AttachmentList` compontent displays the attachments of a message
  */
 export declare class AttachmentListComponent implements OnChanges {
+    readonly customTemplatesService: CustomTemplatesService;
     private imageLoadService;
     private channelService;
     /**
@@ -21,7 +23,8 @@ export declare class AttachmentListComponent implements OnChanges {
     orderedAttachments: Attachment<DefaultAttachmentType>[];
     imagesToView: Attachment<DefaultAttachmentType>[];
     imagesToViewCurrentIndex: number;
-    constructor(imageLoadService: ImageLoadService, channelService: ChannelService);
+    private modalContent;
+    constructor(customTemplatesService: CustomTemplatesService, imageLoadService: ImageLoadService, channelService: ChannelService);
     ngOnChanges(): void;
     trackById(index: number): number;
     isImage(attachment: Attachment): boolean;
@@ -31,16 +34,17 @@ export declare class AttachmentListComponent implements OnChanges {
     imageLoaded(): void;
     hasFileSize(attachment: Attachment<DefaultAttachmentType>): boolean | "" | 0 | undefined;
     getFileSize(attachment: Attachment<DefaultAttachmentType>): string;
+    getModalContext(): ModalContext;
     trimUrl(url?: string | null): string | null;
     sendAction(action: Action): void;
     trackByActionValue(_: number, item: Action): string | undefined;
     openImageModal(attachments: Attachment[], selectedIndex?: number): void;
-    closeImageModal(): void;
     stepImages(dir: -1 | 1): void;
     trackByImageUrl(_: number, item: Attachment): unknown;
     get isImageModalPrevButtonVisible(): boolean;
     get isImageModalNextButtonVisible(): boolean;
     private createGallery;
+    private closeImageModal;
     static ɵfac: i0.ɵɵFactoryDeclaration<AttachmentListComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<AttachmentListComponent, "stream-attachment-list", never, { "messageId": "messageId"; "attachments": "attachments"; }, {}, never, never>;
 }

package/lib/attachment-preview-list/attachment-preview-list.component.d.ts

@@ -1,17 +1,27 @@
+import { EventEmitter } from '@angular/core';
 import { Observable } from 'rxjs';
-import { AttachmentService } from '../attachment.service';
 import { AttachmentUpload } from '../types';
 import * as i0 from "@angular/core";
 /**
  * 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.
  */
 export declare class AttachmentPreviewListComponent {
-    private attachmentService;
-    attachmentUploads$: Observable<AttachmentUpload[]>;
-    constructor(attachmentService: AttachmentService);
-    retryAttachmentUpload(file: File): Promise<void>;
-    deleteAttachment(upload: AttachmentUpload): Promise<void>;
+    /**
+     * A stream that emits the current file uploads and their states
+     */
+    attachmentUploads$: Observable<AttachmentUpload[]> | undefined;
+    /**
+     * An output to notify the parent component if the user tries to retry a failed upload
+     */
+    readonly retryAttachmentUpload: EventEmitter<File>;
+    /**
+     * An output to notify the parent component if the user wants to delete a file
+     */
+    readonly deleteAttachment: EventEmitter<AttachmentUpload>;
+    constructor();
+    attachmentUploadRetried(file: File): void;
+    attachmentDeleted(upload: AttachmentUpload): void;
     trackByFile(_: number, item: AttachmentUpload): File;
     static ɵfac: i0.ɵɵFactoryDeclaration<AttachmentPreviewListComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AttachmentPreviewListComponent, "stream-attachment-preview-list", never, {}, {}, never, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AttachmentPreviewListComponent, "stream-attachment-preview-list", never, { "attachmentUploads$": "attachmentUploads$"; }, { "retryAttachmentUpload": "retryAttachmentUpload"; "deleteAttachment": "deleteAttachment"; }, never, never>;
 }

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

@@ -0,0 +1,25 @@
+import { CustomTemplatesService } from '../custom-templates.service';
+import { AvatarContext } from '../types';
+import * as i0 from "@angular/core";
+/**
+ * The `AvatarPlaceholder` component displays the [default avatar](./AvatarComponent.mdx) unless a [custom template](../services/CustomTemplatesService.mdx) is provided. This componet is used by the SDK internally, you likely won't need to use it.
+ */
+export declare class AvatarPlaceholderComponent {
+    customTemplatesService: CustomTemplatesService;
+    /**
+     * An optional name of the image, used for fallback image or image title (if `imageUrl` is provided)
+     */
+    name: string | undefined;
+    /**
+     * The URL of the image to be displayed. If the image can't be displayed the first letter of the name input is displayed.
+     */
+    imageUrl: string | undefined;
+    /**
+     * The size in pixels of the avatar image.
+     */
+    size: number;
+    constructor(customTemplatesService: CustomTemplatesService);
+    getAvatarContext(): AvatarContext;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AvatarPlaceholderComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AvatarPlaceholderComponent, "stream-avatar-placeholder", never, { "name": "name"; "imageUrl": "imageUrl"; "size": "size"; }, {}, never, never>;
+}

package/lib/channel.service.d.ts

@@ -1,9 +1,8 @@
 import { NgZone } from '@angular/core';
 import { Observable } from 'rxjs';
 import { Attachment, Channel, ChannelFilters, ChannelOptions, ChannelResponse, ChannelSort, Event, UserResponse } from 'stream-chat';
-import { ChatClientService, Notification } from './chat-client.service';
-import { MessageReactionType } from './message-reactions/message-reactions.component';
-import { AttachmentUpload, StreamMessage } from './types';
+import { ChatClientService, ClientEvent } from './chat-client.service';
+import { AttachmentUpload, MessageReactionType, StreamMessage } from './types';
 import * as i0 from "@angular/core";
 /**
  * The `ChannelService` provides data and interaction for the channel list and message list. TEST
@@ -86,15 +85,15 @@ export declare class ChannelService {
     /**
      * 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)
      */
-    customNewMessageNotificationHandler?: (notification: Notification, channelListSetter: (channels: (Channel | ChannelResponse)[]) => void) => void;
+    customNewMessageNotificationHandler?: (clientEvent: ClientEvent, channelListSetter: (channels: (Channel | ChannelResponse)[]) => void) => void;
     /**
      * Custom event handler to call when the user is added to a channel, provide an event handler if you want to override the [default channel list ordering](./ChannelService.mdx/#channels)
      */
-    customAddedToChannelNotificationHandler?: (notification: Notification, channelListSetter: (channels: (Channel | ChannelResponse)[]) => void) => void;
+    customAddedToChannelNotificationHandler?: (clientEvent: ClientEvent, channelListSetter: (channels: (Channel | ChannelResponse)[]) => void) => void;
     /**
      * Custom event handler to call when the user is removed from a channel, provide an event handler if you want to override the [default channel list ordering](./ChannelService.mdx/#channels)
      */
-    customRemovedFromChannelNotificationHandler?: (notification: Notification, channelListSetter: (channels: (Channel | ChannelResponse)[]) => void) => void;
+    customRemovedFromChannelNotificationHandler?: (clientEvent: ClientEvent, channelListSetter: (channels: (Channel | ChannelResponse)[]) => void) => void;
     /**
      * Custom event handler to call when a channel is deleted, provide an event handler if you want to override the [default channel list ordering](./ChannelService.mdx/#channels)
      */

package/lib/chat-client.service.d.ts

@@ -4,7 +4,7 @@ import { Channel, ChannelResponse, OwnUserResponse, UserResponse } from 'stream-
 import { AppSettings, Event, StreamChat, TokenOrProvider } from 'stream-chat';
 import { NotificationService } from './notification.service';
 import * as i0 from "@angular/core";
-export declare type Notification = {
+export declare type ClientEvent = {
     eventType: string;
     event: Event;
 };
@@ -19,12 +19,12 @@ export declare class ChatClientService {
      */
     chatClient: StreamChat;
     /**
-     * Emits [`Notification`](https://github.com/GetStream/stream-chat-angular/blob/master/projects/stream-chat-angular/src/lib/chat-client.service.ts) events. The platform documentation covers [the list of client and notification events](https://getstream.io/chat/docs/javascript/event_object/?language=javascript).
+     * Emits [`ClientEvent`](https://github.com/GetStream/stream-chat-angular/blob/master/projects/stream-chat-angular/src/lib/chat-client.service.ts) events. The platform documentation covers [the list of client, user presence and notification events](https://getstream.io/chat/docs/javascript/event_object/?language=javascript).
      * :::important
      * For performance reasons this Observable operates outside of the Angular change detection zone. If you subscribe to it, you need to manually reenter Angular's change detection zone, our [Change detection guide](../concepts/change-detection.mdx) explains this in detail.
      * :::
      */
-    notification$: Observable<Notification>;
+    events$: Observable<ClientEvent>;
     /**
      * Emits the current [application settings](https://getstream.io/chat/docs/javascript/app_setting_overview/?language=javascript). Since getting the application settings is an expensive API call and we don't always need the result, this is not initialized by default, you need to call `getApplicationSettings` to load them.
      */

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

@@ -1,47 +1,131 @@
 import { TemplateRef } from '@angular/core';
 import { BehaviorSubject } from 'rxjs';
-import { ChannelActionsContext, ChannelPreviewContext, CommandAutocompleteListItemContext, EmojiPickerContext, MentionAutcompleteListItemContext, MentionTemplateContext, MessageContext, MessageInputContext, TypingIndicatorContext } from './types';
+import { AttachmentListContext, AttachmentPreviewListContext, AvatarContext, ChannelActionsContext, ChannelPreviewContext, CommandAutocompleteListItemContext, EmojiPickerContext, IconContext, LoadingIndicatorContext, MentionAutcompleteListItemContext, MentionTemplateContext, MessageActionBoxItemContext, MessageActionsBoxContext, MessageContext, MessageInputContext, MessageReactionsContext, ModalContext, NotificationContext, ThreadHeaderContext, TypingIndicatorContext } from './types';
 import * as i0 from "@angular/core";
 /**
- * A central location for registering your custom templates to override parts of the chat application
+ * A central location for registering your custom templates to override parts of the chat application.
+ *
+ * For code examples to the different customizations see our [customizations example application](https://github.com/GetStream/stream-chat-angular/tree/master/projects/customizations-example), specifically the [AppComponent](https://github.com/GetStream/stream-chat-angular/tree/master/projects/customizations-example/src/app) (see [README](https://github.com/GetStream/stream-chat-angular/blob/master/README.md#customization-examples) for instructions on how to start the application).
  */
 export declare class CustomTemplatesService {
     /**
-     * The autocomplete list item template for mentioning users
+     * The autocomplete list item template for mentioning users (used in the [`AutocompleteTextareaComponent`](../components/AutocompleteTextareaComponent.mdx))
      */
     mentionAutocompleteItemTemplate$: BehaviorSubject<TemplateRef<MentionAutcompleteListItemContext> | undefined>;
     /**
-     * The autocomplete list item template for commands
+     * The autocomplete list item template for commands (used in the [`AutocompleteTextareaComponent`](../components/AutocompleteTextareaComponent.mdx))
+     *
+     * For code examples to the different customizations see our [customizations example application](https://github.com/GetStream/stream-chat-angular/tree/master/projects/customizations-example), specifically the [AppComponent](https://github.com/GetStream/stream-chat-angular/tree/master/projects/customizations-example/src/app) (see [README](https://github.com/GetStream/stream-chat-angular/blob/master/README.md#customization-examples) for instructions on how to start the application).
      */
     commandAutocompleteItemTemplate$: BehaviorSubject<TemplateRef<CommandAutocompleteListItemContext> | undefined>;
     /**
-     * Item in the channel list
+     * Template used to display an item in the [channel list](../components/ChannelListComponent.mdx) (instead of the default [channal list item](../components/ChannelPreviewComponent.mdx))
+     *
+     * For code examples to the different customizations see our [customizations example application](https://github.com/GetStream/stream-chat-angular/tree/master/projects/customizations-example), specifically the [AppComponent](https://github.com/GetStream/stream-chat-angular/tree/master/projects/customizations-example/src/app) (see [README](https://github.com/GetStream/stream-chat-angular/blob/master/README.md#customization-examples) for instructions on how to start the application).
      */
     channelPreviewTemplate$: BehaviorSubject<TemplateRef<ChannelPreviewContext> | undefined>;
     /**
-     * The message input template used when editing a message
+     * The message input template used when editing a message (instead of the [default message input](../components/MessageInputComponent.mdx))
+     *
+     * For code examples to the different customizations see our [customizations example application](https://github.com/GetStream/stream-chat-angular/tree/master/projects/customizations-example), specifically the [AppComponent](https://github.com/GetStream/stream-chat-angular/tree/master/projects/customizations-example/src/app) (see [README](https://github.com/GetStream/stream-chat-angular/blob/master/README.md#customization-examples) for instructions on how to start the application).
      */
     messageInputTemplate$: BehaviorSubject<TemplateRef<MessageInputContext> | undefined>;
     /**
-     * The template used for displaying a mention inside a message
+     * The template used for displaying a [mention inside a message](../code-examples/mention-actions.mdx)
+     *
+     * For code examples to the different customizations see our [customizations example application](https://github.com/GetStream/stream-chat-angular/tree/master/projects/customizations-example), specifically the [AppComponent](https://github.com/GetStream/stream-chat-angular/tree/master/projects/customizations-example/src/app) (see [README](https://github.com/GetStream/stream-chat-angular/blob/master/README.md#customization-examples) for instructions on how to start the application).
      */
     mentionTemplate$: BehaviorSubject<TemplateRef<MentionTemplateContext> | undefined>;
     /**
-     * The template for emoji picker
+     * The template for [emoji picker](../code-examples/emoji-picker.mdx)
+     *
+     * For code examples to the different customizations see our [customizations example application](https://github.com/GetStream/stream-chat-angular/tree/master/projects/customizations-example), specifically the [AppComponent](https://github.com/GetStream/stream-chat-angular/tree/master/projects/customizations-example/src/app) (see [README](https://github.com/GetStream/stream-chat-angular/blob/master/README.md#customization-examples) for instructions on how to start the application).
      */
     emojiPickerTemplate$: BehaviorSubject<TemplateRef<EmojiPickerContext> | undefined>;
     /**
-     * The typing indicator template used in the message list
+     * The typing indicator template used in the [message list](../components/MessageListComponent.mdx)
+     *
+     * For code examples to the different customizations see our [customizations example application](https://github.com/GetStream/stream-chat-angular/tree/master/projects/customizations-example), specifically the [AppComponent](https://github.com/GetStream/stream-chat-angular/tree/master/projects/customizations-example/src/app) (see [README](https://github.com/GetStream/stream-chat-angular/blob/master/README.md#customization-examples) for instructions on how to start the application).
      */
     typingIndicatorTemplate$: BehaviorSubject<TemplateRef<TypingIndicatorContext> | undefined>;
     /**
-     * The template used to display a message in the message list
+     * The template used to display a message in the [message list](../components/MessageListComponent.mdx) (instead of the [default message component](../components/MessageComponent.mdx))
+     *
+     * For code examples to the different customizations see our [customizations example application](https://github.com/GetStream/stream-chat-angular/tree/master/projects/customizations-example), specifically the [AppComponent](https://github.com/GetStream/stream-chat-angular/tree/master/projects/customizations-example/src/app) (see [README](https://github.com/GetStream/stream-chat-angular/blob/master/README.md#customization-examples) for instructions on how to start the application).
      */
     messageTemplate$: BehaviorSubject<TemplateRef<MessageContext> | undefined>;
     /**
-     * The template for channel actions
+     * The template for channel actions displayed in the [channel header](../components/ChannelHeaderComponent.mdx) (by default no channel action is displayed)
+     *
+     * For code examples to the different customizations see our [customizations example application](https://github.com/GetStream/stream-chat-angular/tree/master/projects/customizations-example), specifically the [AppComponent](https://github.com/GetStream/stream-chat-angular/tree/master/projects/customizations-example/src/app) (see [README](https://github.com/GetStream/stream-chat-angular/blob/master/README.md#customization-examples) for instructions on how to start the application).
      */
     channelActionsTemplate$: BehaviorSubject<TemplateRef<ChannelActionsContext> | undefined>;
+    /**
+     * The template used to display attachments of a [message](../components/MessageComponent.mdx) (instead of the [default attachment list](../components/AttachmentListComponent.mdx))
+     *
+     * For code examples to the different customizations see our [customizations example application](https://github.com/GetStream/stream-chat-angular/tree/master/projects/customizations-example), specifically the [AppComponent](https://github.com/GetStream/stream-chat-angular/tree/master/projects/customizations-example/src/app) (see [README](https://github.com/GetStream/stream-chat-angular/blob/master/README.md#customization-examples) for instructions on how to start the application).
+     */
+    attachmentListTemplate$: BehaviorSubject<TemplateRef<AttachmentListContext> | undefined>;
+    /**
+     * The template used to display attachments in the [message input](../components/MessageInputComponent.mdx) component (instead of the [default attachment preview](../components/AttachmentPreviewListComponent.mdx))
+     *
+     * For code examples to the different customizations see our [customizations example application](https://github.com/GetStream/stream-chat-angular/tree/master/projects/customizations-example), specifically the [AppComponent](https://github.com/GetStream/stream-chat-angular/tree/master/projects/customizations-example/src/app) (see [README](https://github.com/GetStream/stream-chat-angular/blob/master/README.md#customization-examples) for instructions on how to start the application).
+     */
+    attachmentPreviewListTemplate$: BehaviorSubject<TemplateRef<AttachmentPreviewListContext> | undefined>;
+    /**
+     * The template used to display avatars for channels and users (instead of the [default avatar](../components/AvatarComponent.mdx))
+     *
+     * For code examples to the different customizations see our [customizations example application](https://github.com/GetStream/stream-chat-angular/tree/master/projects/customizations-example), specifically the [AppComponent](https://github.com/GetStream/stream-chat-angular/tree/master/projects/customizations-example/src/app) (see [README](https://github.com/GetStream/stream-chat-angular/blob/master/README.md#customization-examples) for instructions on how to start the application).
+     */
+    avatarTemplate$: BehaviorSubject<TemplateRef<AvatarContext> | undefined>;
+    /**
+     * Template for displaying icons (instead of the [default icon component](../components/IconComponent.mdx))
+     *
+     * For code examples to the different customizations see our [customizations example application](https://github.com/GetStream/stream-chat-angular/tree/master/projects/customizations-example), specifically the [AppComponent](https://github.com/GetStream/stream-chat-angular/tree/master/projects/customizations-example/src/app) (see [README](https://github.com/GetStream/stream-chat-angular/blob/master/README.md#customization-examples) for instructions on how to start the application).
+     */
+    iconTemplate$: BehaviorSubject<TemplateRef<IconContext> | undefined>;
+    /**
+     * Template for displaying the loading indicator (instead of the [default loading indicator](../components/LoadingIndicatorComponent.mdx))
+     *
+     * For code examples to the different customizations see our [customizations example application](https://github.com/GetStream/stream-chat-angular/tree/master/projects/customizations-example), specifically the [AppComponent](https://github.com/GetStream/stream-chat-angular/tree/master/projects/customizations-example/src/app) (see [README](https://github.com/GetStream/stream-chat-angular/blob/master/README.md#customization-examples) for instructions on how to start the application).
+     */
+    loadingIndicatorTemplate$: BehaviorSubject<TemplateRef<LoadingIndicatorContext> | undefined>;
+    /**
+     * Template for displaying the message actions box (instead of the [default message actions box](../components/MessageActionsBoxComponent.mdx))
+     *
+     * For code examples to the different customizations see our [customizations example application](https://github.com/GetStream/stream-chat-angular/tree/master/projects/customizations-example), specifically the [AppComponent](https://github.com/GetStream/stream-chat-angular/tree/master/projects/customizations-example/src/app) (see [README](https://github.com/GetStream/stream-chat-angular/blob/master/README.md#customization-examples) for instructions on how to start the application).
+     */
+    messageActionsBoxTemplate$: BehaviorSubject<TemplateRef<MessageActionsBoxContext> | undefined>;
+    /**
+     * The template used for displaying an item in the [message actions box](../components/MessageActionsBoxComponent.mdx)
+     *
+     * For code examples to the different customizations see our [customizations example application](https://github.com/GetStream/stream-chat-angular/tree/master/projects/customizations-example), specifically the [AppComponent](https://github.com/GetStream/stream-chat-angular/tree/master/projects/customizations-example/src/app) (see [README](https://github.com/GetStream/stream-chat-angular/blob/master/README.md#customization-examples) for instructions on how to start the application).
+     */
+    messageActionsBoxItemTemplate$: BehaviorSubject<TemplateRef<MessageActionBoxItemContext> | undefined>;
+    /**
+     * The template used to display the reactions of a [message](../components/MessageComponent.mdx), and the selector to add a reaction to a message (instead of the [default message reactions component](../components/MessageReactionsComponent.mdx))
+     *
+     * For code examples to the different customizations see our [customizations example application](https://github.com/GetStream/stream-chat-angular/tree/master/projects/customizations-example), specifically the [AppComponent](https://github.com/GetStream/stream-chat-angular/tree/master/projects/customizations-example/src/app) (see [README](https://github.com/GetStream/stream-chat-angular/blob/master/README.md#customization-examples) for instructions on how to start the application).
+     */
+    messageReactionsTemplate$: BehaviorSubject<TemplateRef<MessageReactionsContext> | undefined>;
+    /**
+     * The template used to display a modal window (instead of the [default modal](../components/ModalComponent.mdx))
+     *
+     * For code examples to the different customizations see our [customizations example application](https://github.com/GetStream/stream-chat-angular/tree/master/projects/customizations-example), specifically the [AppComponent](https://github.com/GetStream/stream-chat-angular/tree/master/projects/customizations-example/src/app) (see [README](https://github.com/GetStream/stream-chat-angular/blob/master/README.md#customization-examples) for instructions on how to start the application).
+     */
+    modalTemplate$: BehaviorSubject<TemplateRef<ModalContext> | undefined>;
+    /**
+     * The template used to override the [default notification component](../components/NotificationComponent.mdx)
+     *
+     * For code examples to the different customizations see our [customizations example application](https://github.com/GetStream/stream-chat-angular/tree/master/projects/customizations-example), specifically the [AppComponent](https://github.com/GetStream/stream-chat-angular/tree/master/projects/customizations-example/src/app) (see [README](https://github.com/GetStream/stream-chat-angular/blob/master/README.md#customization-examples) for instructions on how to start the application).
+     */
+    notificationTemplate$: BehaviorSubject<TemplateRef<NotificationContext> | undefined>;
+    /**
+     * The template used for header of a [thread](../components/ThreadComponent.mdx)
+     *
+     * For code examples to the different customizations see our [customizations example application](https://github.com/GetStream/stream-chat-angular/tree/master/projects/customizations-example), specifically the [AppComponent](https://github.com/GetStream/stream-chat-angular/tree/master/projects/customizations-example/src/app) (see [README](https://github.com/GetStream/stream-chat-angular/blob/master/README.md#customization-examples) for instructions on how to start the application).
+     */
+    threadHeaderTemplate$: BehaviorSubject<TemplateRef<ThreadHeaderContext> | undefined>;
     constructor();
     static ɵfac: i0.ɵɵFactoryDeclaration<CustomTemplatesService, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<CustomTemplatesService>;

package/lib/icon-placeholder/icon-placeholder.component.d.ts

@@ -0,0 +1,22 @@
+import { CustomTemplatesService } from '../custom-templates.service';
+import { Icon } from '../icon/icon.component';
+import { IconContext } from '../types';
+import * as i0 from "@angular/core";
+/**
+ * The `IconPlaceholder` component displays the [default icons](./IconComponent.mdx) unless a [custom template](../services/CustomTemplatesService.mdx) is provided. This componet is used by the SDK internally, you likely won't need to use it.
+ */
+export declare class IconPlaceholderComponent {
+    customTemplatesService: CustomTemplatesService;
+    /**
+     * The icon to display, the list of [supported icons](https://github.com/GetStream/stream-chat-angular/tree/master/projects/stream-chat-angular/src/lib/icon/icon.component.ts) can be found on GitHub.
+     */
+    icon: Icon | undefined;
+    /**
+     * The size of the icon (in pixels)
+     */
+    size: number | undefined;
+    constructor(customTemplatesService: CustomTemplatesService);
+    getIconContext(): IconContext;
+    static ɵfac: i0.ɵɵFactoryDeclaration<IconPlaceholderComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<IconPlaceholderComponent, "stream-icon-placeholder", never, { "icon": "icon"; "size": "size"; }, {}, never, never>;
+}

package/lib/loading-indicator-placeholder/loading-indicator-placeholder.component.d.ts

@@ -0,0 +1,21 @@
+import { CustomTemplatesService } from '../custom-templates.service';
+import { LoadingIndicatorContext } from '../types';
+import * as i0 from "@angular/core";
+/**
+ * The `LoadingInficatorPlaceholder` component displays the [default loading indicator](./LoadingIndicatorComponent.mdx) unless a [custom template](../services/CustomTemplatesService.mdx) is provided. This componet is used by the SDK internally, you likely won't need to use it.
+ */
+export declare class LoadingIndicatorPlaceholderComponent {
+    customTemplatesService: CustomTemplatesService;
+    /**
+     * The size of the indicator (in pixels)
+     */
+    size: number;
+    /**
+     * The color of the indicator
+     */
+    color: string;
+    constructor(customTemplatesService: CustomTemplatesService);
+    getLoadingIndicatorContext(): LoadingIndicatorContext;
+    static ɵfac: i0.ɵɵFactoryDeclaration<LoadingIndicatorPlaceholderComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LoadingIndicatorPlaceholderComponent, "stream-loading-indicator-placeholder", never, { "size": "size"; "color": "color"; }, {}, never, never>;
+}

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

@@ -1,8 +1,8 @@
-import { TemplateRef, OnChanges, SimpleChanges, OnDestroy } from '@angular/core';
+import { TemplateRef, OnChanges, SimpleChanges, OnDestroy, OnInit, ChangeDetectorRef } from '@angular/core';
 import { UserResponse } from 'stream-chat';
 import { ChannelService } from '../channel.service';
 import { ChatClientService } from '../chat-client.service';
-import { DefaultUserType, MentionTemplateContext, StreamMessage } from '../types';
+import { AttachmentListContext, DefaultUserType, MentionTemplateContext, MessageActionsBoxContext, MessageReactionsContext, StreamMessage } from '../types';
 import { CustomTemplatesService } from '../custom-templates.service';
 import * as i0 from "@angular/core";
 declare type MessagePart = {
@@ -13,10 +13,11 @@ declare type MessagePart = {
 /**
  * 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).
  */
-export declare class MessageComponent implements OnChanges, OnDestroy {
+export declare class MessageComponent implements OnInit, OnChanges, OnDestroy {
     private chatClientService;
     private channelService;
     private customTemplatesService;
+    private cdRef;
     /**
      * The message to be displayed
      */
@@ -42,10 +43,14 @@ export declare class MessageComponent implements OnChanges, OnDestroy {
     visibleMessageActionsCount: number;
     messageTextParts: MessagePart[];
     mentionTemplate: TemplateRef<MentionTemplateContext> | undefined;
+    attachmentListTemplate: TemplateRef<AttachmentListContext> | undefined;
+    messageActionsBoxTemplate: TemplateRef<MessageActionsBoxContext> | undefined;
+    messageReactionsTemplate: TemplateRef<MessageReactionsContext> | undefined;
     private user;
     private subscriptions;
     private container;
-    constructor(chatClientService: ChatClientService, channelService: ChannelService, customTemplatesService: CustomTemplatesService);
+    constructor(chatClientService: ChatClientService, channelService: ChannelService, customTemplatesService: CustomTemplatesService, cdRef: ChangeDetectorRef);
+    ngOnInit(): void;
     ngOnChanges(changes: SimpleChanges): void;
     ngOnDestroy(): void;
     get isSentByCurrentUser(): boolean;
@@ -63,10 +68,13 @@ export declare class MessageComponent implements OnChanges, OnDestroy {
     };
     get canDisplayReadStatus(): boolean;
     get quotedMessageAttachments(): import("stream-chat").Attachment<import("../types").DefaultAttachmentType>[];
+    getAttachmentListContext(): AttachmentListContext;
+    getMessageReactionsContext(): MessageReactionsContext;
     resendMessage(): void;
     textClicked(): void;
     setAsActiveParentMessage(): void;
     getMentionContext(messagePart: MessagePart): MentionTemplateContext;
+    getMessageActionsBoxContext(): MessageActionsBoxContext;
     private createMessageParts;
     static ɵfac: i0.ɵɵFactoryDeclaration<MessageComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<MessageComponent, "stream-message", never, { "message": "message"; "enabledMessageActions": "enabledMessageActions"; "isLastSentMessage": "isLastSentMessage"; "mode": "mode"; }, {}, never, never>;

package/lib/message-actions-box/message-actions-box.component.d.ts

@@ -4,7 +4,7 @@ import { ChannelService } from '../channel.service';
 import { ChatClientService } from '../chat-client.service';
 import { CustomTemplatesService } from '../custom-templates.service';
 import { NotificationService } from '../notification.service';
-import { MessageInputContext, StreamMessage } from '../types';
+import { MessageActionBoxItemContext, MessageActionItem, MessageInputContext, ModalContext, StreamMessage } from '../types';
 import * as i0 from "@angular/core";
 /**
  * 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.
@@ -40,26 +40,22 @@ export declare class MessageActionsBoxComponent implements OnChanges, OnDestroy
     readonly isEditing: EventEmitter<boolean>;
     isEditModalOpen: boolean;
     messageInputTemplate: TemplateRef<MessageInputContext> | undefined;
+    messageActionItemTemplate: TemplateRef<MessageActionBoxItemContext> | undefined;
+    modalTemplate: TemplateRef<ModalContext> | undefined;
     subscriptions: Subscription[];
+    visibleMessageActionItems: MessageActionItem[];
+    private readonly messageActionItems;
     private messageInput;
+    private modalContent;
     constructor(chatClientService: ChatClientService, notificationService: NotificationService, channelService: ChannelService, customTemplatesService: CustomTemplatesService);
     ngOnChanges(changes: SimpleChanges): void;
     ngOnDestroy(): void;
-    get isQuoteVisible(): boolean;
-    get isEditVisible(): boolean;
-    get isDeleteVisible(): boolean;
-    get isMuteVisible(): boolean;
-    get isFlagVisible(): boolean;
-    get isPinVisible(): boolean;
-    pinClicked(): void;
-    flagClicked(): Promise<void>;
-    muteClicked(): void;
-    quoteClicked(): void;
-    editClicked(): void;
+    getActionLabel(actionLabelOrTranslationKey: (() => string) | string): string;
     sendClicked(): void;
     modalClosed: () => void;
     getMessageInputContext(): MessageInputContext;
-    deleteClicked(): Promise<void>;
+    getEditModalContext(): ModalContext;
+    trackByActionName(_: number, item: MessageActionItem): "mute" | "delete" | "flag" | "quote" | "pin" | "edit";
     static ɵfac: i0.ɵɵFactoryDeclaration<MessageActionsBoxComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<MessageActionsBoxComponent, "stream-message-actions-box", never, { "isOpen": "isOpen"; "isMine": "isMine"; "message": "message"; "enabledActions": "enabledActions"; }, { "displayedActionsCount": "displayedActionsCount"; "isEditing": "isEditing"; }, never, never>;
 }

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

@@ -5,7 +5,7 @@ import { UserResponse } from 'stream-chat';
 import { AttachmentService } from '../attachment.service';
 import { ChannelService } from '../channel.service';
 import { NotificationService } from '../notification.service';
-import { AttachmentUpload, EmojiPickerContext, StreamMessage } from '../types';
+import { AttachmentPreviewListContext, AttachmentUpload, EmojiPickerContext, StreamMessage } from '../types';
 import { MessageInputConfigService } from './message-input-config.service';
 import { TextareaInterface } from './textarea.interface';
 import { EmojiInputService } from './emoji-input.service';
@@ -65,6 +65,7 @@ export declare class MessageInputComponent implements OnInit, OnChanges, OnDestr
     cooldown$: Observable<number> | undefined;
     isCooldownInProgress: boolean;
     emojiPickerTemplate: TemplateRef<EmojiPickerContext> | undefined;
+    attachmentPreviewListTemplate: TemplateRef<AttachmentPreviewListContext> | undefined;
     private fileInput;
     private textareaAnchor;
     private subscriptions;
@@ -84,6 +85,9 @@ export declare class MessageInputComponent implements OnInit, OnChanges, OnDestr
     filesSelected(fileList: FileList | null): Promise<void>;
     deselectMessageToQuote(): void;
     getEmojiPickerContext(): EmojiPickerContext;
+    getAttachmentPreviewListContext(): AttachmentPreviewListContext;
+    private deleteUpload;
+    private retryUpload;
     private clearFileInput;
     private get isUpdate();
     private initTextarea;

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

@@ -1,9 +1,8 @@
 import { AfterViewChecked, ChangeDetectorRef, EventEmitter, OnChanges, SimpleChanges } from '@angular/core';
 import { ReactionResponse } from 'stream-chat';
 import { ChannelService } from '../channel.service';
-import { DefaultReactionType, DefaultUserType } from '../types';
+import { DefaultReactionType, DefaultUserType, MessageReactionType } from '../types';
 import * as i0 from "@angular/core";
-export declare type MessageReactionType = 'angry' | 'haha' | 'like' | 'love' | 'sad' | 'wow';
 /**
  * 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.
  */

package/lib/modal/modal.component.d.ts

@@ -1,4 +1,4 @@
-import { EventEmitter, OnChanges, SimpleChanges } from '@angular/core';
+import { EventEmitter, OnChanges, SimpleChanges, TemplateRef } from '@angular/core';
 import * as i0 from "@angular/core";
 /**
  * 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.
@@ -8,11 +8,15 @@ export declare class ModalComponent implements OnChanges {
      * If `true` the modal will be displayed, if `false` the modal will be hidden
      */
     isOpen: boolean;
+    /**
+     * The content of the modal  (can also be provided using `ng-content`)
+     */
+    content: TemplateRef<void> | undefined;
     /**
      * Emits `true` if the modal becomes visible, and `false` if the modal is closed.
      */
     readonly isOpenChange: EventEmitter<boolean>;
-    private content;
+    private innerContainer;
     constructor();
     ngOnChanges(changes: SimpleChanges): void;
     close(): void;
@@ -21,5 +25,5 @@ export declare class ModalComponent implements OnChanges {
     private watchForOutsideClicks;
     private stopWatchForOutsideClicks;
     static ɵfac: i0.ɵɵFactoryDeclaration<ModalComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ModalComponent, "stream-modal", never, { "isOpen": "isOpen"; }, { "isOpenChange": "isOpenChange"; }, never, ["*"]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ModalComponent, "stream-modal", never, { "isOpen": "isOpen"; "content": "content"; }, { "isOpenChange": "isOpenChange"; }, never, ["*"]>;
 }

package/lib/notification/notification.component.d.ts

@@ -1,3 +1,4 @@
+import { TemplateRef } from '@angular/core';
 import { NotificationType } from '../types';
 import * as i0 from "@angular/core";
 /**
@@ -8,7 +9,11 @@ export declare class NotificationComponent {
      * The type of the notification
      */
     type: NotificationType | undefined;
+    /**
+     * The content of the notification (can also be provided using `ng-content`)
+     */
+    content: TemplateRef<void> | undefined;
     constructor();
     static ɵfac: i0.ɵɵFactoryDeclaration<NotificationComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<NotificationComponent, "stream-notification", never, { "type": "type"; }, {}, never, ["*"]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NotificationComponent, "stream-notification", never, { "type": "type"; "content": "content"; }, {}, never, ["*"]>;
 }

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

@@ -1,4 +1,5 @@
 import { Observable } from 'rxjs';
+import { CustomTemplatesService } from '../custom-templates.service';
 import { NotificationService } from '../notification.service';
 import { NotificationPayload } from '../types';
 import * as i0 from "@angular/core";
@@ -6,11 +7,12 @@ import * as i0 from "@angular/core";
  * The `NotificationList` component displays the list of active notifications.
  */
 export declare class NotificationListComponent {
+    readonly customTemplatesService: CustomTemplatesService;
     private notificationService;
     notifications$: Observable<NotificationPayload[]>;
-    constructor(notificationService: NotificationService);
+    constructor(customTemplatesService: CustomTemplatesService, notificationService: NotificationService);
     trackById(_: number, item: NotificationPayload): string;
-    getTemplateContext(notification: NotificationPayload): {
+    getNotificationContentContext(notification: NotificationPayload): {
         dismissFn: Function;
     };
     static ɵfac: i0.ɵɵFactoryDeclaration<NotificationListComponent, never>;

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

@@ -1,9 +1,10 @@
 import * as i0 from "@angular/core";
 import * as i1 from "./avatar/avatar.component";
-import * as i2 from "@angular/common";
-import * as i3 from "@ngx-translate/core";
+import * as i2 from "./avatar-placeholder/avatar-placeholder.component";
+import * as i3 from "@angular/common";
+import * as i4 from "@ngx-translate/core";
 export declare class StreamAvatarModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<StreamAvatarModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<StreamAvatarModule, [typeof i1.AvatarComponent], [typeof i2.CommonModule, typeof i3.TranslateModule], [typeof i1.AvatarComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<StreamAvatarModule, [typeof i1.AvatarComponent, typeof i2.AvatarPlaceholderComponent], [typeof i3.CommonModule, typeof i4.TranslateModule], [typeof i1.AvatarComponent, typeof i2.AvatarPlaceholderComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<StreamAvatarModule>;
 }

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

@@ -17,11 +17,13 @@ import * as i15 from "./attachment-preview-list/attachment-preview-list.componen
 import * as i16 from "./modal/modal.component";
 import * as i17 from "./message-input/textarea.directive";
 import * as i18 from "./thread/thread.component";
-import * as i19 from "@angular/common";
-import * as i20 from "@ngx-translate/core";
-import * as i21 from "./stream-avatar.module";
+import * as i19 from "./icon-placeholder/icon-placeholder.component";
+import * as i20 from "./loading-indicator-placeholder/loading-indicator-placeholder.component";
+import * as i21 from "@angular/common";
+import * as i22 from "@ngx-translate/core";
+import * as i23 from "./stream-avatar.module";
 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.CommonModule, typeof i20.TranslateModule, typeof i21.StreamAvatarModule], [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 i21.StreamAvatarModule, typeof i18.ThreadComponent]>;
+    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.CommonModule, typeof i22.TranslateModule, typeof i23.StreamAvatarModule], [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 i23.StreamAvatarModule, typeof i18.ThreadComponent, typeof i19.IconPlaceholderComponent, typeof i20.LoadingIndicatorPlaceholderComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<StreamChatModule>;
 }