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

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

@@ -1,17 +1,27 @@
+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;
+    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;
     };

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

@@ -1,6 +1,6 @@
 import { NgZone } from '@angular/core';
 import { Observable } from 'rxjs';
-import { Attachment, Channel, ChannelFilters, ChannelOptions, ChannelSort, Event, UserResponse } from 'stream-chat';
+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';
@@ -78,7 +78,7 @@ export declare class ChannelService {
      */
     usersTypingInThread$: Observable<UserResponse[]>;
     /**
-     * Emits a map that contains the date of the latest message sent by the current user by channels (this is used to detect is slow mode countdown should be started)
+     * Emits a map that contains the date of the latest message sent by the current user by channels (this is used to detect if slow mode countdown should be started)
      */
     latestMessageDateByUserByChannels$: Observable<{
         [key: string]: Date;
@@ -86,39 +86,39 @@ 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[]) => void) => void;
+    customNewMessageNotificationHandler?: (notification: Notification, 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[]) => void) => void;
+    customAddedToChannelNotificationHandler?: (notification: Notification, 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[]) => void) => void;
+    customRemovedFromChannelNotificationHandler?: (notification: Notification, 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)
      */
-    customChannelDeletedHandler?: (event: Event, channel: Channel, channelListSetter: (channels: Channel[]) => void, messageListSetter: (messages: StreamMessage[]) => void, threadListSetter: (messages: StreamMessage[]) => void, parentMessageSetter: (message: StreamMessage | undefined) => void) => void;
+    customChannelDeletedHandler?: (event: Event, channel: Channel, channelListSetter: (channels: (Channel | ChannelResponse)[]) => void, messageListSetter: (messages: StreamMessage[]) => void, threadListSetter: (messages: StreamMessage[]) => void, parentMessageSetter: (message: StreamMessage | undefined) => void) => void;
     /**
      * Custom event handler to call when a channel is updated, provide an event handler if you want to override the [default channel list ordering](./ChannelService.mdx/#channels)
      */
-    customChannelUpdatedHandler?: (event: Event, channel: Channel, channelListSetter: (channels: Channel[]) => void, messageListSetter: (messages: StreamMessage[]) => void, threadListSetter: (messages: StreamMessage[]) => void, parentMessageSetter: (message: StreamMessage | undefined) => void) => void;
+    customChannelUpdatedHandler?: (event: Event, channel: Channel, channelListSetter: (channels: (Channel | ChannelResponse)[]) => void, messageListSetter: (messages: StreamMessage[]) => void, threadListSetter: (messages: StreamMessage[]) => void, parentMessageSetter: (message: StreamMessage | undefined) => void) => void;
     /**
      * Custom event handler to call when a channel is truncated, provide an event handler if you want to override the [default channel list ordering](./ChannelService.mdx/#channels)
      */
-    customChannelTruncatedHandler?: (event: Event, channel: Channel, channelListSetter: (channels: Channel[]) => void, messageListSetter: (messages: StreamMessage[]) => void, threadListSetter: (messages: StreamMessage[]) => void, parentMessageSetter: (message: StreamMessage | undefined) => void) => void;
+    customChannelTruncatedHandler?: (event: Event, channel: Channel, channelListSetter: (channels: (Channel | ChannelResponse)[]) => void, messageListSetter: (messages: StreamMessage[]) => void, threadListSetter: (messages: StreamMessage[]) => void, parentMessageSetter: (message: StreamMessage | undefined) => void) => void;
     /**
      * Custom event handler to call when a channel becomes hidden, provide an event handler if you want to override the [default channel list ordering](./ChannelService.mdx/#channels)
      */
-    customChannelHiddenHandler?: (event: Event, channel: Channel, channelListSetter: (channels: Channel[]) => void, messageListSetter: (messages: StreamMessage[]) => void, threadListSetter: (messages: StreamMessage[]) => void, parentMessageSetter: (message: StreamMessage | undefined) => void) => void;
+    customChannelHiddenHandler?: (event: Event, channel: Channel, channelListSetter: (channels: (Channel | ChannelResponse)[]) => void, messageListSetter: (messages: StreamMessage[]) => void, threadListSetter: (messages: StreamMessage[]) => void, parentMessageSetter: (message: StreamMessage | undefined) => void) => void;
     /**
      * Custom event handler to call when a channel becomes visible, provide an event handler if you want to override the [default channel list ordering](./ChannelService.mdx/#channels)
      */
-    customChannelVisibleHandler?: (event: Event, channel: Channel, channelListSetter: (channels: Channel[]) => void, messageListSetter: (messages: StreamMessage[]) => void, threadListSetter: (messages: StreamMessage[]) => void, parentMessageSetter: (message: StreamMessage | undefined) => void) => void;
+    customChannelVisibleHandler?: (event: Event, channel: Channel, channelListSetter: (channels: (Channel | ChannelResponse)[]) => void, messageListSetter: (messages: StreamMessage[]) => void, threadListSetter: (messages: StreamMessage[]) => void, parentMessageSetter: (message: StreamMessage | undefined) => void) => void;
     /**
      * Custom event handler to call if a new message received from a channel that is being watched, provide an event handler if you want to override the [default channel list ordering](./ChannelService.mdx/#channels)
      */
-    customNewMessageHandler?: (event: Event, channel: Channel, channelListSetter: (channels: Channel[]) => void, messageListSetter: (messages: StreamMessage[]) => void, threadListSetter: (messages: StreamMessage[]) => void, parentMessageSetter: (message: StreamMessage | undefined) => void) => void;
+    customNewMessageHandler?: (event: Event, channel: Channel, channelListSetter: (channels: (Channel | ChannelResponse)[]) => void, messageListSetter: (messages: StreamMessage[]) => void, threadListSetter: (messages: StreamMessage[]) => void, parentMessageSetter: (message: StreamMessage | undefined) => void) => void;
     private channelsSubject;
     private activeChannelSubject;
     private activeChannelMessagesSubject;
@@ -241,8 +241,8 @@ export declare class ChannelService {
     private handleRemovedFromChannelNotification;
     private handleNewMessageNotification;
     private handleAddedToChannelNotification;
-    private addChannelFromNotification;
-    private removeFromChannelList;
+    private addChannelsFromNotification;
+    private removeChannelsFromChannelList;
     private watchForActiveChannelEvents;
     /**
      * Call this method if user started typing in the active channel

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

@@ -1,6 +1,6 @@
 import { NgZone } from '@angular/core';
 import { Observable } from 'rxjs';
-import { OwnUserResponse, UserResponse } from 'stream-chat';
+import { Channel, ChannelResponse, OwnUserResponse, UserResponse } from 'stream-chat';
 import { AppSettings, Event, StreamChat, TokenOrProvider } from 'stream-chat';
 import { NotificationService } from './notification.service';
 import * as i0 from "@angular/core";
@@ -33,9 +33,14 @@ export declare class ChatClientService {
      * Emits the current connection state of the user (`online` or `offline`)
      */
     connectionState$: Observable<'offline' | 'online'>;
+    /**
+     * Emits the list of pending invites of the user. It emits every pending invitation during initialization and then extends the list when a new invite is received. More information can be found in the [channel invitations](../code-examples/channel-invites.mdx) guide.
+     */
+    pendingInvites$: Observable<(ChannelResponse | Channel)[]>;
     private notificationSubject;
     private connectionStateSubject;
     private appSettingsSubject;
+    private pendingInvitesSubject;
     constructor(ngZone: NgZone, notificationService: NotificationService);
     /**
      * Creates a [`StreamChat`](https://github.com/GetStream/stream-chat-js/blob/668b3e5521339f4e14fc657834531b4c8bf8176b/src/client.ts#L124) instance using the provided `apiKey`, and connects a user with the given meta data and token. More info about [connecting users](https://getstream.io/chat/docs/javascript/init_and_users/?language=javascript) can be found in the platform documentation.
@@ -63,6 +68,7 @@ export declare class ChatClientService {
      * @returns The users matching the search
      */
     autocompleteUsers(searchTerm: string): Promise<UserResponse<import("stream-chat").UR>[]>;
+    private updatePendingInvites;
     static ɵfac: i0.ɵɵFactoryDeclaration<ChatClientService, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<ChatClientService>;
 }

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

@@ -0,0 +1,48 @@
+import { TemplateRef } from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
+import { ChannelActionsContext, ChannelPreviewContext, CommandAutocompleteListItemContext, EmojiPickerContext, MentionAutcompleteListItemContext, MentionTemplateContext, MessageContext, MessageInputContext, 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>;
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<CustomTemplatesService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<CustomTemplatesService>;
+}

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

@@ -1,8 +1,9 @@
-import { TemplateRef, OnChanges, SimpleChanges } from '@angular/core';
+import { TemplateRef, OnChanges, SimpleChanges, OnDestroy } 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 { DefaultUserType, MentionTemplateContext, StreamMessage } from '../types';
+import { CustomTemplatesService } from '../custom-templates.service';
 import * as i0 from "@angular/core";
 declare type MessagePart = {
     content: string;
@@ -12,17 +13,10 @@ 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 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;
     /**
      * The message to be displayed
      */
@@ -47,10 +41,13 @@ export declare class MessageComponent implements OnChanges {
     isPressedOnMobile: boolean;
     visibleMessageActionsCount: number;
     messageTextParts: MessagePart[];
+    mentionTemplate: TemplateRef<MentionTemplateContext> | undefined;
     private user;
+    private subscriptions;
     private container;
-    constructor(chatClientService: ChatClientService, channelService: ChannelService);
+    constructor(chatClientService: ChatClientService, channelService: ChannelService, customTemplatesService: CustomTemplatesService);
     ngOnChanges(changes: SimpleChanges): void;
+    ngOnDestroy(): void;
     get isSentByCurrentUser(): boolean;
     get readByText(): string;
     get lastReadUser(): UserResponse<DefaultUserType<import("../types").DefaultUserTypeInternal>> | undefined;
@@ -69,8 +66,9 @@ export declare class MessageComponent implements OnChanges {
     resendMessage(): void;
     textClicked(): void;
     setAsActiveParentMessage(): void;
+    getMentionContext(messagePart: MessagePart): MentionTemplateContext;
     private createMessageParts;
     static ɵfac: i0.ɵɵFactoryDeclaration<MessageComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MessageComponent, "stream-message", never, { "messageInputTemplate": "messageInputTemplate"; "mentionTemplate": "mentionTemplate"; "message": "message"; "enabledMessageActions": "enabledMessageActions"; "isLastSentMessage": "isLastSentMessage"; "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,20 +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 { MessageInputContext, 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.
  */
-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.
      */
@@ -40,9 +39,12 @@ export declare class MessageActionsBoxComponent implements OnChanges {
      */
     readonly isEditing: EventEmitter<boolean>;
     isEditModalOpen: boolean;
+    messageInputTemplate: TemplateRef<MessageInputContext> | undefined;
+    subscriptions: Subscription[];
     private messageInput;
-    constructor(chatClientService: ChatClientService, notificationService: NotificationService, channelService: ChannelService);
+    constructor(chatClientService: ChatClientService, notificationService: NotificationService, channelService: ChannelService, customTemplatesService: CustomTemplatesService);
     ngOnChanges(changes: SimpleChanges): void;
+    ngOnDestroy(): void;
     get isQuoteVisible(): boolean;
     get isEditVisible(): boolean;
     get isDeleteVisible(): boolean;
@@ -56,7 +58,8 @@ export declare class MessageActionsBoxComponent implements OnChanges {
     editClicked(): void;
     sendClicked(): void;
     modalClosed: () => void;
+    getMessageInputContext(): MessageInputContext;
     deleteClicked(): Promise<void>;
     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,18 +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;
     /**
      * If `false`, users can only upload one attachment per message
      */

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

@@ -1,19 +1,20 @@
-import { AfterViewInit, ChangeDetectorRef, ComponentFactoryResolver, ComponentRef, EventEmitter, OnChanges, OnDestroy, SimpleChanges, TemplateRef, Type } from '@angular/core';
+import { AfterViewInit, ChangeDetectorRef, ComponentFactoryResolver, ComponentRef, EventEmitter, OnChanges, OnDestroy, OnInit, SimpleChanges, TemplateRef, Type } from '@angular/core';
 import { ChatClientService } from '../chat-client.service';
 import { Observable, Subject } from 'rxjs';
 import { UserResponse } from 'stream-chat';
 import { AttachmentService } from '../attachment.service';
 import { ChannelService } from '../channel.service';
 import { NotificationService } from '../notification.service';
-import { AttachmentUpload, CommandAutocompleteListItemContext, MentionAutcompleteListItemContext, StreamMessage } from '../types';
+import { AttachmentUpload, EmojiPickerContext, StreamMessage } from '../types';
 import { MessageInputConfigService } from './message-input-config.service';
 import { TextareaInterface } from './textarea.interface';
 import { EmojiInputService } from './emoji-input.service';
+import { CustomTemplatesService } from '../custom-templates.service';
 import * as i0 from "@angular/core";
 /**
  * The `MessageInput` component displays an input where users can type their messages and upload files, and sends the message to the active channel. The component can be used to compose new messages or update existing ones. To send messages, the chat user needs to have the necessary [channel capability](https://getstream.io/chat/docs/javascript/channel_capabilities/?language=javascript).
  */
-export declare class MessageInputComponent implements OnChanges, OnDestroy, AfterViewInit {
+export declare class MessageInputComponent implements OnInit, OnChanges, OnDestroy, AfterViewInit {
     private channelService;
     private notificationService;
     private attachmentService;
@@ -22,7 +23,8 @@ export declare class MessageInputComponent implements OnChanges, OnDestroy, Afte
     private componentFactoryResolver;
     private cdRef;
     private chatClient;
-    emojiInputService: EmojiInputService;
+    private emojiInputService;
+    private customTemplatesService;
     /**
      * If file upload is enabled, the user can open a file selector from the input. Please note that the user also needs to have the necessary [channel capability](https://getstream.io/chat/docs/javascript/channel_capabilities/?language=javascript). If no value is provided, it is set from the [`MessageInputConfigService`](../services/MessageInputConfigService.mdx).
      */
@@ -35,18 +37,6 @@ export declare class MessageInputComponent implements OnChanges, OnDestroy, Afte
      * The scope for user mentions, either members of the current channel of members of the application. If no value is provided, it is set from the [`MessageInputConfigService`](../services/MessageInputConfigService.mdx).
      */
     mentionScope: 'channel' | 'application' | 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. If no value is provided, it is set from the [`MessageInputConfigService`](../services/MessageInputConfigService.mdx).
-     */
-    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. If no value is provided, it is set from the [`MessageInputConfigService`](../services/MessageInputConfigService.mdx).
-     */
-    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;
     /**
      * Determines if the message is being dispalyed in a channel or in a [thread](https://getstream.io/chat/docs/javascript/threads/?language=javascript).
      */
@@ -74,6 +64,7 @@ export declare class MessageInputComponent implements OnChanges, OnDestroy, Afte
     typingStart$: Subject<void>;
     cooldown$: Observable<number> | undefined;
     isCooldownInProgress: boolean;
+    emojiPickerTemplate: TemplateRef<EmojiPickerContext> | undefined;
     private fileInput;
     private textareaAnchor;
     private subscriptions;
@@ -81,7 +72,8 @@ export declare class MessageInputComponent implements OnChanges, OnDestroy, Afte
     private isViewInited;
     private appSettings;
     private channel;
-    constructor(channelService: ChannelService, notificationService: NotificationService, attachmentService: AttachmentService, configService: MessageInputConfigService, textareaType: Type<TextareaInterface>, componentFactoryResolver: ComponentFactoryResolver, cdRef: ChangeDetectorRef, chatClient: ChatClientService, emojiInputService: EmojiInputService);
+    constructor(channelService: ChannelService, notificationService: NotificationService, attachmentService: AttachmentService, configService: MessageInputConfigService, textareaType: Type<TextareaInterface>, componentFactoryResolver: ComponentFactoryResolver, cdRef: ChangeDetectorRef, chatClient: ChatClientService, emojiInputService: EmojiInputService, customTemplatesService: CustomTemplatesService);
+    ngOnInit(): void;
     ngAfterViewInit(): void;
     ngOnChanges(changes: SimpleChanges): void;
     ngOnDestroy(): void;
@@ -91,6 +83,7 @@ export declare class MessageInputComponent implements OnChanges, OnDestroy, Afte
     get disabledTextareaText(): "" | "streamChat.You can't send thread replies in this channel" | "streamChat.You can't send messages in this channel" | "streamChat.Slow Mode ON";
     filesSelected(fileList: FileList | null): Promise<void>;
     deselectMessageToQuote(): void;
+    getEmojiPickerContext(): EmojiPickerContext;
     private clearFileInput;
     private get isUpdate();
     private initTextarea;
@@ -100,5 +93,5 @@ export declare class MessageInputComponent implements OnChanges, OnDestroy, Afte
     private startCooldown;
     private stopCooldown;
     static ɵfac: i0.ɵɵFactoryDeclaration<MessageInputComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MessageInputComponent, "stream-message-input", never, { "isFileUploadEnabled": "isFileUploadEnabled"; "areMentionsEnabled": "areMentionsEnabled"; "mentionScope": "mentionScope"; "mentionAutocompleteItemTemplate": "mentionAutocompleteItemTemplate"; "commandAutocompleteItemTemplate": "commandAutocompleteItemTemplate"; "emojiPickerTemplate": "emojiPickerTemplate"; "mode": "mode"; "isMultipleFileUploadEnabled": "isMultipleFileUploadEnabled"; "message": "message"; }, { "messageUpdate": "messageUpdate"; }, never, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MessageInputComponent, "stream-message-input", never, { "isFileUploadEnabled": "isFileUploadEnabled"; "areMentionsEnabled": "areMentionsEnabled"; "mentionScope": "mentionScope"; "mode": "mode"; "isMultipleFileUploadEnabled": "isMultipleFileUploadEnabled"; "message": "message"; }, { "messageUpdate": "messageUpdate"; }, never, never>;
 }

package/lib/message-input/textarea.directive.d.ts

@@ -1,15 +1,12 @@
-import { ComponentRef, EventEmitter, OnChanges, SimpleChanges, TemplateRef, ViewContainerRef } from '@angular/core';
+import { ComponentRef, EventEmitter, OnChanges, SimpleChanges, ViewContainerRef } from '@angular/core';
 import { UserResponse } from 'stream-chat';
-import { CommandAutocompleteListItemContext, MentionAutcompleteListItemContext } from '../types';
 import { TextareaInterface } from './textarea.interface';
 import * as i0 from "@angular/core";
 export declare class TextareaDirective implements OnChanges {
     viewContainerRef: ViewContainerRef;
     componentRef: ComponentRef<TextareaInterface> | undefined;
     areMentionsEnabled: boolean | undefined;
-    mentionAutocompleteItemTemplate: TemplateRef<MentionAutcompleteListItemContext> | undefined;
     mentionScope?: 'channel' | 'application';
-    commandAutocompleteItemTemplate: TemplateRef<CommandAutocompleteListItemContext> | undefined;
     value: string;
     readonly valueChange: EventEmitter<string>;
     readonly send: EventEmitter<void>;
@@ -19,5 +16,5 @@ export declare class TextareaDirective implements OnChanges {
     constructor(viewContainerRef: ViewContainerRef);
     ngOnChanges(changes: SimpleChanges): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<TextareaDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<TextareaDirective, "[streamTextarea]", never, { "componentRef": "componentRef"; "areMentionsEnabled": "areMentionsEnabled"; "mentionAutocompleteItemTemplate": "mentionAutocompleteItemTemplate"; "mentionScope": "mentionScope"; "commandAutocompleteItemTemplate": "commandAutocompleteItemTemplate"; "value": "value"; }, { "valueChange": "valueChange"; "send": "send"; "userMentions": "userMentions"; }, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<TextareaDirective, "[streamTextarea]", never, { "componentRef": "componentRef"; "areMentionsEnabled": "areMentionsEnabled"; "mentionScope": "mentionScope"; "value": "value"; }, { "valueChange": "valueChange"; "send": "send"; "userMentions": "userMentions"; }, never>;
 }

package/lib/message-input/textarea.interface.d.ts

@@ -1,13 +1,10 @@
-import { EventEmitter, OnChanges, TemplateRef } from '@angular/core';
+import { EventEmitter, OnChanges } from '@angular/core';
 import { UserResponse } from 'stream-chat';
-import { CommandAutocompleteListItemContext, MentionAutcompleteListItemContext } from '../types';
 export interface TextareaInterface extends OnChanges {
     value: string;
     valueChange: EventEmitter<string>;
     send: EventEmitter<void>;
     userMentions?: EventEmitter<UserResponse[]>;
     areMentionsEnabled?: boolean;
-    mentionAutocompleteItemTemplate?: TemplateRef<MentionAutcompleteListItemContext> | undefined;
-    commandAutocompleteItemTemplate?: TemplateRef<CommandAutocompleteListItemContext> | undefined;
     mentionScope?: 'channel' | 'application';
 }