stream-chat-angular 2.20.0 → 3.0.0-beta.3

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-header/channel-header.component.d.ts

@@ -1,24 +1,27 @@
-import { TemplateRef } from '@angular/core';
+import { ChangeDetectorRef, OnDestroy, OnInit, TemplateRef } from '@angular/core';
 import { Channel } from 'stream-chat';
 import { ChannelListToggleService } from '../channel-list/channel-list-toggle.service';
 import { ChannelService } from '../channel.service';
+import { CustomTemplatesService } from '../custom-templates.service';
+import { ChannelActionsContext } from '../types';
 import * as i0 from "@angular/core";
 /**
  * The `ChannelHeader` component displays the avatar and name of the currently active channel along with member and watcher information. You can read about [the difference between members and watchers](https://getstream.io/chat/docs/javascript/watch_channel/?language=javascript#watchers-vs-members) in the platform documentation. Please note that number of watchers is only displayed if the user has [`connect-events` capability](https://getstream.io/chat/docs/javascript/channel_capabilities/?language=javascript)
  */
-export declare class ChannelHeaderComponent {
+export declare class ChannelHeaderComponent implements OnInit, OnDestroy {
     private channelService;
     private channelListToggleService;
-    /**
-     * Template that can be used to add actions (such as edit, invite) to the channel header
-     */
-    channelActionsTemplate?: TemplateRef<{
-        channel: Channel;
-    }>;
+    private customTemplatesService;
+    private cdRef;
+    channelActionsTemplate?: TemplateRef<ChannelActionsContext>;
     activeChannel: Channel | undefined;
     canReceiveConnectEvents: boolean | undefined;
-    constructor(channelService: ChannelService, channelListToggleService: ChannelListToggleService);
+    private subscriptions;
+    constructor(channelService: ChannelService, channelListToggleService: ChannelListToggleService, customTemplatesService: CustomTemplatesService, cdRef: ChangeDetectorRef);
+    ngOnInit(): void;
+    ngOnDestroy(): void;
     toggleMenu(event: Event): void;
+    getChannelActionsContext(): ChannelActionsContext;
     get memberCountParam(): {
         memberCount: unknown;
     };
@@ -26,5 +29,5 @@ export declare class ChannelHeaderComponent {
         watcherCount: number;
     };
     static ɵfac: i0.ɵɵFactoryDeclaration<ChannelHeaderComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ChannelHeaderComponent, "stream-channel-header", never, { "channelActionsTemplate": "channelActionsTemplate"; }, {}, never, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ChannelHeaderComponent, "stream-channel-header", never, {}, {}, never, never>;
 }

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

@@ -1,31 +1,34 @@
-import { AfterViewInit, TemplateRef } from '@angular/core';
-import { Observable } from 'rxjs';
+import { AfterViewInit, OnDestroy, TemplateRef } from '@angular/core';
+import { Observable, Subscription } from 'rxjs';
 import { Channel } from 'stream-chat';
 import { ChannelService } from '../channel.service';
+import { CustomTemplatesService } from '../custom-templates.service';
+import { ChannelPreviewContext } from '../types';
 import { ChannelListToggleService } from './channel-list-toggle.service';
 import * as i0 from "@angular/core";
 /**
  * The `ChannelList` component renders the list of channels.
  */
-export declare class ChannelListComponent implements AfterViewInit {
+export declare class ChannelListComponent implements AfterViewInit, OnDestroy {
     private channelService;
     private channelListToggleService;
-    /**
-     * By default, the [default preview component](./ChannelPreviewComponent.mdx) is used. To change the contents of the channel list, [provide your own custom template](./ChannelPreviewComponent.mdx/#customization).
-     */
-    customChannelPreviewTemplate: TemplateRef<any> | undefined;
+    private customTemplatesService;
     channels$: Observable<Channel[] | undefined>;
     isError$: Observable<boolean>;
     isInitializing$: Observable<boolean>;
     isLoadingMoreChannels: boolean;
     isOpen$: Observable<boolean>;
     hasMoreChannels$: Observable<boolean>;
+    customChannelPreviewTemplate: TemplateRef<ChannelPreviewContext> | undefined;
+    subscriptions: Subscription[];
     private container;
-    constructor(channelService: ChannelService, channelListToggleService: ChannelListToggleService);
+    constructor(channelService: ChannelService, channelListToggleService: ChannelListToggleService, customTemplatesService: CustomTemplatesService);
     ngAfterViewInit(): void;
+    ngOnDestroy(): void;
     loadMoreChannels(): Promise<void>;
     trackByChannelId(index: number, item: Channel): string;
     channelSelected(): void;
+    getChannelPreviewContext(channel: Channel): ChannelPreviewContext;
     static ɵfac: i0.ɵɵFactoryDeclaration<ChannelListComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ChannelListComponent, "stream-channel-list", never, { "customChannelPreviewTemplate": "customChannelPreviewTemplate"; }, {}, never, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ChannelListComponent, "stream-channel-list", never, {}, {}, never, never>;
 }

package/lib/channel.service.d.ts

@@ -2,8 +2,7 @@ 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 { 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

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

@@ -0,0 +1,92 @@
+import { TemplateRef } from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
+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
+ */
+export declare class CustomTemplatesService {
+    /**
+     * The autocomplete list item template for mentioning users
+     */
+    mentionAutocompleteItemTemplate$: BehaviorSubject<TemplateRef<MentionAutcompleteListItemContext> | undefined>;
+    /**
+     * The autocomplete list item template for commands
+     */
+    commandAutocompleteItemTemplate$: BehaviorSubject<TemplateRef<CommandAutocompleteListItemContext> | undefined>;
+    /**
+     * Item in the channel list
+     */
+    channelPreviewTemplate$: BehaviorSubject<TemplateRef<ChannelPreviewContext> | undefined>;
+    /**
+     * The message input template used when editing a message
+     */
+    messageInputTemplate$: BehaviorSubject<TemplateRef<MessageInputContext> | undefined>;
+    /**
+     * The template used for displaying a mention inside a message
+     */
+    mentionTemplate$: BehaviorSubject<TemplateRef<MentionTemplateContext> | undefined>;
+    /**
+     * The template for emoji picker
+     */
+    emojiPickerTemplate$: BehaviorSubject<TemplateRef<EmojiPickerContext> | undefined>;
+    /**
+     * The typing indicator template used in the message list
+     */
+    typingIndicatorTemplate$: BehaviorSubject<TemplateRef<TypingIndicatorContext> | undefined>;
+    /**
+     * The template used to display a message in the message list
+     */
+    messageTemplate$: BehaviorSubject<TemplateRef<MessageContext> | undefined>;
+    /**
+     * The template for channel actions
+     */
+    channelActionsTemplate$: BehaviorSubject<TemplateRef<ChannelActionsContext> | undefined>;
+    /**
+     * The template used to display attachments of a message
+     */
+    attachmentListTemplate$: BehaviorSubject<TemplateRef<AttachmentListContext> | undefined>;
+    /**
+     * The template used to display attachments in the message input component
+     */
+    attachmentPreviewListTemplate$: BehaviorSubject<TemplateRef<AttachmentPreviewListContext> | undefined>;
+    /**
+     * The template used to display avatars for channels and users
+     */
+    avatarTemplate$: BehaviorSubject<TemplateRef<AvatarContext> | undefined>;
+    /**
+     * Template for displaying icons
+     */
+    iconTemplate$: BehaviorSubject<TemplateRef<IconContext> | undefined>;
+    /**
+     * Template for displaying the loading indicator (instead of the [default loading indicator](../components/LoadingIndicatorComponent.mdx))
+     */
+    loadingIndicatorTemplate$: BehaviorSubject<TemplateRef<LoadingIndicatorContext> | undefined>;
+    /**
+     * Template for displaying the message actions box (instead of the [default message actions box](../components/MessageActionsBoxComponent.mdx))
+     */
+    messageActionsBoxTemplate$: BehaviorSubject<TemplateRef<MessageActionsBoxContext> | undefined>;
+    /**
+     * The template used for displaying an item in the [message actions box](../components/MessageActionsBoxComponent.mdx)]
+     */
+    messageActionsBoxItemTemplate$: BehaviorSubject<TemplateRef<MessageActionBoxItemContext> | undefined>;
+    /**
+     * The template used to display the reactions of a message, and the selector to add a reaction to a message (instead of the [default message reactions component](../components/MessageReactionsComponent.mdx))
+     */
+    messageReactionsTemplate$: BehaviorSubject<TemplateRef<MessageReactionsContext> | undefined>;
+    /**
+     * The template used to display a modal window (instead of the [default modal](../components/ModalComponent.mdx))
+     */
+    modalTemplate$: BehaviorSubject<TemplateRef<ModalContext> | undefined>;
+    /**
+     * The template used to override the [default notification component](../components/NotificationComponent.mdx)
+     */
+    notificationTemplate$: BehaviorSubject<TemplateRef<NotificationContext> | undefined>;
+    /**
+     * The template used for header of thread
+     */
+    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,9 @@
-import { TemplateRef, OnChanges, SimpleChanges } 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, 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 = {
     content: string;
@@ -12,17 +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 {
+export declare class MessageComponent implements OnInit, OnChanges, OnDestroy {
     private chatClientService;
     private channelService;
-    /**
-     * The input used for message edit. By default, the [default message input component](./MessageInputComponent.mdx) is used. To change the input for message edit, provide [your own custom template](./MessageInputComponent.mdx/#customization).
-     */
-    messageInputTemplate: TemplateRef<any> | undefined;
-    /**
-     * The template used to display a mention in a message. It receives the mentioned user in a variable called `user` with the type [`UserResponse`](https://github.com/GetStream/stream-chat-js/blob/master/src/types.ts). You can provide your own template if you want to [add actions to mentions](../code-examples/mention-actions.mdx).
-     */
-    mentionTemplate: TemplateRef<any> | undefined;
+    private customTemplatesService;
+    private cdRef;
     /**
      * The message to be displayed
      */
@@ -31,39 +26,33 @@ export declare class MessageComponent implements OnChanges {
      * The list of [channel capabilities](https://getstream.io/chat/docs/javascript/channel_capabilities/?language=javascript) that are enabled for the current user, the list of [supported interactions](../concepts/message-interactions.mdx) can be found in our message interaction guide. Unathorized actions won't be displayed on the UI. The [`MessageList`](./MessageListComponent.mdx) component automatically sets this based on [channel capabilities](https://getstream.io/chat/docs/javascript/channel_capabilities/?language=javascript).
      */
     enabledMessageActions: string[];
-    /**
-     * If true, the message reactions are displayed. If you use the default chat UI you can also set this using the [`MessageList`](./MessageListComponent.mdx) component.
-     * @deprecated use [channel capabilities](https://getstream.io/chat/docs/javascript/channel_capabilities/?language=javascript) instead
-     */
-    areReactionsEnabled: boolean | undefined;
-    /**
-     * If true, the user can add reactions to the message. The [`MessageList`](./MessageListComponent.mdx) component automatically sets this based on [channel capability](https://getstream.io/chat/docs/javascript/channel_capabilities/?language=javascript).
-     * @deprecated use [channel capabilities](https://getstream.io/chat/docs/javascript/channel_capabilities/?language=javascript) instead
-     */
-    canReactToMessage: boolean | undefined;
     /**
      * If `true`, the message status (sending, sent, who read the message) is displayed.
      */
     isLastSentMessage: boolean | undefined;
-    /**
-     * If true, the read indicator is displayed. The [`MessageList`](./MessageListComponent.mdx) component automatically sets this based on [channel capability](https://getstream.io/chat/docs/javascript/channel_capabilities/?language=javascript).
-     * @deprecated use [channel capabilities](https://getstream.io/chat/docs/javascript/channel_capabilities/?language=javascript) instead
-     */
-    canReceiveReadEvents: boolean | undefined;
     /**
      * Determines if the message is being dispalyed in a channel or in a [thread](https://getstream.io/chat/docs/javascript/threads/?language=javascript).
      */
     mode: 'thread' | 'main';
+    canReceiveReadEvents: boolean | undefined;
+    canReactToMessage: boolean | undefined;
     isEditing: boolean | undefined;
     isActionBoxOpen: boolean;
     isReactionSelectorOpen: boolean;
     isPressedOnMobile: boolean;
     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);
+    constructor(chatClientService: ChatClientService, channelService: ChannelService, customTemplatesService: CustomTemplatesService, cdRef: ChangeDetectorRef);
+    ngOnInit(): void;
     ngOnChanges(changes: SimpleChanges): void;
+    ngOnDestroy(): void;
     get isSentByCurrentUser(): boolean;
     get readByText(): string;
     get lastReadUser(): UserResponse<DefaultUserType<import("../types").DefaultUserTypeInternal>> | undefined;
@@ -79,11 +68,15 @@ export declare class MessageComponent implements OnChanges {
     };
     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, { "messageInputTemplate": "messageInputTemplate"; "mentionTemplate": "mentionTemplate"; "message": "message"; "enabledMessageActions": "enabledMessageActions"; "areReactionsEnabled": "areReactionsEnabled"; "canReactToMessage": "canReactToMessage"; "isLastSentMessage": "isLastSentMessage"; "canReceiveReadEvents": "canReceiveReadEvents"; "mode": "mode"; }, {}, never, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MessageComponent, "stream-message", never, { "message": "message"; "enabledMessageActions": "enabledMessageActions"; "isLastSentMessage": "isLastSentMessage"; "mode": "mode"; }, {}, never, never>;
 }
 export {};

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

@@ -1,24 +1,19 @@
-import { EventEmitter, OnChanges, SimpleChanges, TemplateRef } from '@angular/core';
+import { EventEmitter, OnChanges, OnDestroy, SimpleChanges, TemplateRef } from '@angular/core';
+import { Subscription } from 'rxjs';
 import { ChannelService } from '../channel.service';
 import { ChatClientService } from '../chat-client.service';
+import { CustomTemplatesService } from '../custom-templates.service';
 import { NotificationService } from '../notification.service';
-import { StreamMessage } from '../types';
+import { MessageActionBoxItemContext, MessageActionItem, MessageInputContext, ModalContext, StreamMessage } from '../types';
 import * as i0 from "@angular/core";
-/**
- * @deprecated https://getstream.io/chat/docs/sdk/angular/components/message-actions/#required-enabledactions
- */
-export declare type MessageActions = 'edit' | 'delete' | 'edit-any' | 'delete-any' | 'pin' | 'quote' | 'flag' | 'mute';
 /**
  * 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.
  */
-export declare class MessageActionsBoxComponent implements OnChanges {
+export declare class MessageActionsBoxComponent implements OnChanges, OnDestroy {
     private chatClientService;
     private notificationService;
     private channelService;
-    /**
-     * The input used for message edit. By default, the [default message input component](./MessageInputComponent.mdx) is used. To change the input for message edit, provide [your own custom template](./MessageInputComponent.mdx/#customization).
-     */
-    messageInputTemplate: TemplateRef<any> | undefined;
+    private customTemplatesService;
     /**
      * Indicates if the list should be opened or closed. Adding a UI element to open and close the list is the parent's component responsibility.
      */
@@ -44,23 +39,23 @@ export declare class MessageActionsBoxComponent implements OnChanges {
      */
     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;
-    constructor(chatClientService: ChatClientService, notificationService: NotificationService, channelService: ChannelService);
+    private modalContent;
+    constructor(chatClientService: ChatClientService, notificationService: NotificationService, channelService: ChannelService, customTemplatesService: CustomTemplatesService);
     ngOnChanges(changes: SimpleChanges): 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;
+    ngOnDestroy(): void;
+    getActionLabel(actionLabelOrTranslationKey: (() => string) | string): string;
     sendClicked(): void;
     modalClosed: () => void;
-    deleteClicked(): Promise<void>;
+    getMessageInputContext(): MessageInputContext;
+    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, { "messageInputTemplate": "messageInputTemplate"; "isOpen": "isOpen"; "isMine": "isMine"; "message": "message"; "enabledActions": "enabledActions"; }, { "displayedActionsCount": "displayedActionsCount"; "isEditing": "isEditing"; }, never, 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/autocomplete-textarea/autocomplete-textarea.component.d.ts

@@ -7,6 +7,7 @@ import { TextareaInterface } from '../textarea.interface';
 import { ChatClientService } from '../../chat-client.service';
 import { TransliterationService } from '../../transliteration.service';
 import { EmojiInputService } from '../emoji-input.service';
+import { CustomTemplatesService } from '../../custom-templates.service';
 import * as i0 from "@angular/core";
 /**
  * The `AutocompleteTextarea` component is used by the [`MessageInput`](./MessageInputComponent.mdx) component to display the input HTML element where users can type their message.
@@ -16,6 +17,7 @@ export declare class AutocompleteTextareaComponent implements TextareaInterface,
     private chatClientService;
     private transliterationService;
     private emojiInputService;
+    private customTemplatesService;
     class: string;
     /**
      * The value of the input HTML element.
@@ -25,14 +27,6 @@ export declare class AutocompleteTextareaComponent implements TextareaInterface,
      * If true, users can mention other users in messages. You can also set this input on the [`MessageInput`](./MessageInputComponent.mdx/#inputs-and-outputs) component.
      */
     areMentionsEnabled: boolean | undefined;
-    /**
-     * You can provide your own template for the autocomplete list for user mentions. You can also set this input on the [`MessageInput`](./MessageInputComponent.mdx/#inputs-and-outputs) component.
-     */
-    mentionAutocompleteItemTemplate: TemplateRef<MentionAutcompleteListItemContext> | undefined;
-    /**
-     * You can provide your own template for the autocomplete list for commands. You can also set this input on the [`MessageInput`](./MessageInputComponent.mdx/#inputs-and-outputs) component.
-     */
-    commandAutocompleteItemTemplate: TemplateRef<CommandAutocompleteListItemContext> | undefined;
     /**
      * The scope for user mentions, either members of the current channel of members of the application. You can also set this input on the [`MessageInput`](./MessageInputComponent.mdx/#inputs-and-outputs) component.
      */
@@ -49,6 +43,8 @@ export declare class AutocompleteTextareaComponent implements TextareaInterface,
      * Emits the array of users that are mentioned in the message, it is updated when a user mentions a new user or deletes a mention.
      */
     readonly userMentions: EventEmitter<UserResponse<import("stream-chat").UR>[]>;
+    mentionAutocompleteItemTemplate: TemplateRef<MentionAutcompleteListItemContext> | undefined;
+    commandAutocompleteItemTemplate: TemplateRef<CommandAutocompleteListItemContext> | undefined;
     private readonly autocompleteKey;
     private readonly mentionTriggerChar;
     private readonly commandTriggerChar;
@@ -59,7 +55,7 @@ export declare class AutocompleteTextareaComponent implements TextareaInterface,
     private userMentionConfig;
     private slashCommandConfig;
     private searchTerm$;
-    constructor(channelService: ChannelService, chatClientService: ChatClientService, transliterationService: TransliterationService, emojiInputService: EmojiInputService);
+    constructor(channelService: ChannelService, chatClientService: ChatClientService, transliterationService: TransliterationService, emojiInputService: EmojiInputService, customTemplatesService: CustomTemplatesService);
     ngOnChanges(changes: SimpleChanges): void;
     filter(searchString: string, items: {
         autocompleteLabel: string;
@@ -75,5 +71,5 @@ export declare class AutocompleteTextareaComponent implements TextareaInterface,
     private updateMentionOptions;
     private updateMentionedUsersFromText;
     static ɵfac: i0.ɵɵFactoryDeclaration<AutocompleteTextareaComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AutocompleteTextareaComponent, "stream-autocomplete-textarea", never, { "value": "value"; "areMentionsEnabled": "areMentionsEnabled"; "mentionAutocompleteItemTemplate": "mentionAutocompleteItemTemplate"; "commandAutocompleteItemTemplate": "commandAutocompleteItemTemplate"; "mentionScope": "mentionScope"; }, { "valueChange": "valueChange"; "send": "send"; "userMentions": "userMentions"; }, never, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AutocompleteTextareaComponent, "stream-autocomplete-textarea", never, { "value": "value"; "areMentionsEnabled": "areMentionsEnabled"; "mentionScope": "mentionScope"; }, { "valueChange": "valueChange"; "send": "send"; "userMentions": "userMentions"; }, never, never>;
 }

package/lib/message-input/message-input-config.service.d.ts

@@ -1,5 +1,3 @@
-import { TemplateRef } from '@angular/core';
-import { CommandAutocompleteListItemContext, MentionAutcompleteListItemContext } from '../types';
 import * as i0 from "@angular/core";
 /**
  * The `MessageInputConfigService` is used to keep a consistent configuration among the different [`MessageInput`](../components/MessageInputComponent.mdx) components if your UI has more than one input component.
@@ -13,23 +11,6 @@ export declare class MessageInputConfigService {
      * If true, users can mention other users in messages. You also [need to use the `AutocompleteTextarea`](../concepts/opt-in-architecture.mdx) for this feature to work.
      */
     areMentionsEnabled: boolean | undefined;
-    /**
-     * You can provide your own template for the autocomplete list for user mentions. You also [need to use the `AutocompleteTextarea`](../concepts/opt-in-architecture.mdx) for this feature to work.
-     */
-    mentionAutocompleteItemTemplate: TemplateRef<MentionAutcompleteListItemContext> | undefined;
-    /**
-     * You can provide your own template for the autocomplete list for commands. You also [need to use the `AutocompleteTextarea`](../concepts/opt-in-architecture.mdx) for this feature to work.
-     */
-    commandAutocompleteItemTemplate: TemplateRef<CommandAutocompleteListItemContext> | undefined;
-    /**
-     * You can add an emoji picker by [providing your own emoji picker template](../code-examples/emoji-picker.mdx)
-     */
-    emojiPickerTemplate: TemplateRef<void> | undefined;
-    /**
-     * You can narrow the accepted file types by providing the [accepted types](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept). By default every file type is accepted.
-     * @deprecated use [application settings](https://getstream.io/chat/docs/javascript/app_setting_overview/?language=javascript#file-uploads) instead
-     */
-    acceptedFileTypes: string[] | undefined;
     /**
      * If `false`, users can only upload one attachment per message
      */