stream-chat-angular 2.20.2 → 3.0.0-beta.10

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

@@ -0,0 +1,132 @@
+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.
+ *
+ * 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 (used in the [`AutocompleteTextareaComponent`](../components/AutocompleteTextareaComponent.mdx))
+     */
+    mentionAutocompleteItemTemplate$: BehaviorSubject<TemplateRef<MentionAutcompleteListItemContext> | undefined>;
+    /**
+     * 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>;
+    /**
+     * 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<import("./types").DefaultStreamChatGenerics>> | undefined>;
+    /**
+     * 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](../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](../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](../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](../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 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<import("./types").DefaultStreamChatGenerics>> | 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,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, MentionTemplateContext, MessageActionsBoxContext, MessageReactionsContext, DefaultStreamChatGenerics, 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,42 +26,36 @@ 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;
+    get lastReadUser(): UserResponse<DefaultStreamChatGenerics> | undefined;
     get isOnlyReadByMe(): boolean | undefined;
     get isReadByMultipleUsers(): boolean | undefined;
     get isMessageDeliveredAndRead(): boolean | undefined;
@@ -78,12 +67,35 @@ export declare class MessageComponent implements OnChanges {
         replyCount: number | undefined;
     };
     get canDisplayReadStatus(): boolean;
-    get quotedMessageAttachments(): import("stream-chat").Attachment<import("../types").DefaultAttachmentType>[];
+    get quotedMessageAttachments(): import("stream-chat").Attachment<{
+        attachmentType: import("stream-chat").UR & import("../types").UnknownType & {
+            asset_url?: string | undefined;
+            id?: string | undefined;
+            images?: import("stream-chat").Attachment<DefaultStreamChatGenerics>[] | undefined;
+            mime_type?: string | undefined;
+        };
+        channelType: import("stream-chat").UR & import("../types").UnknownType & {
+            image?: string | undefined;
+            member_count?: number | undefined;
+            subtitle?: string | undefined;
+        };
+        commandType: string & {};
+        eventType: import("stream-chat").UR & import("../types").UnknownType;
+        messageType: {};
+        reactionType: import("stream-chat").UR & import("../types").UnknownType;
+        userType: import("stream-chat").UR & import("../types").UnknownType & import("../types").DefaultUserTypeInternal & {
+            mutes?: import("stream-chat").Mute<DefaultStreamChatGenerics>[] | undefined;
+        };
+    }>[];
+    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 { Observable, 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,24 @@ export declare class MessageActionsBoxComponent implements OnChanges {
      */
     readonly isEditing: EventEmitter<boolean>;
     isEditModalOpen: boolean;
-    private messageInput;
-    constructor(chatClientService: ChatClientService, notificationService: NotificationService, channelService: ChannelService);
+    messageInputTemplate: TemplateRef<MessageInputContext> | undefined;
+    messageActionItemTemplate: TemplateRef<MessageActionBoxItemContext> | undefined;
+    modalTemplate: TemplateRef<ModalContext> | undefined;
+    subscriptions: Subscription[];
+    visibleMessageActionItems: MessageActionItem[];
+    sendMessage$: Observable<void>;
+    private readonly messageActionItems;
+    private modalContent;
+    private sendMessageSubject;
+    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): "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.
      */
@@ -48,7 +42,9 @@ 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>[]>;
+    readonly userMentions: EventEmitter<UserResponse<import("stream-chat").DefaultGenerics>[]>;
+    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
      */

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 { AttachmentPreviewListContext, AttachmentUpload, DefaultStreamChatGenerics, 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,28 +37,10 @@ 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).
      */
     mode: 'thread' | 'main';
-    /**
-     * 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.
-     * If no value is provided, it is set from the [`MessageInputConfigService`](../services/MessageInputConfigService.mdx).
-     * @deprecated use [application settings](https://getstream.io/chat/docs/javascript/app_setting_overview/?language=javascript#file-uploads) instead
-     */
-    acceptedFileTypes: string[] | undefined;
     /**
      * If true, users can select multiple files to upload. If no value is provided, it is set from the [`MessageInputConfigService`](../services/MessageInputConfigService.mdx).
      */
@@ -65,6 +49,10 @@ export declare class MessageInputComponent implements OnChanges, OnDestroy, Afte
      * The message to edit
      */
     message: StreamMessage | undefined;
+    /**
+     * An observable that can be used to trigger message sending from the outside
+     */
+    sendMessage$: Observable<void> | undefined;
     /**
      * Emits when a message was successfuly sent or updated
      */
@@ -80,6 +68,8 @@ export declare class MessageInputComponent implements OnChanges, OnDestroy, Afte
     typingStart$: Subject<void>;
     cooldown$: Observable<number> | undefined;
     isCooldownInProgress: boolean;
+    emojiPickerTemplate: TemplateRef<EmojiPickerContext> | undefined;
+    attachmentPreviewListTemplate: TemplateRef<AttachmentPreviewListContext> | undefined;
     private fileInput;
     private textareaAnchor;
     private subscriptions;
@@ -87,17 +77,41 @@ 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);
+    private sendMessageSubcription;
+    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;
     messageSent(): Promise<void>;
     get containsLinks(): boolean;
-    get accept(): string;
-    get quotedMessageAttachments(): import("stream-chat").Attachment<import("../types").DefaultAttachmentType>[];
+    get quotedMessageAttachments(): import("stream-chat").Attachment<{
+        attachmentType: import("stream-chat").UR & import("../types").UnknownType & {
+            asset_url?: string | undefined;
+            id?: string | undefined;
+            images?: import("stream-chat").Attachment<DefaultStreamChatGenerics>[] | undefined;
+            mime_type?: string | undefined;
+        };
+        channelType: import("stream-chat").UR & import("../types").UnknownType & {
+            image?: string | undefined;
+            member_count?: number | undefined;
+            subtitle?: string | undefined;
+        };
+        commandType: string & {};
+        eventType: import("stream-chat").UR & import("../types").UnknownType;
+        messageType: {};
+        reactionType: import("stream-chat").UR & import("../types").UnknownType;
+        userType: import("stream-chat").UR & import("../types").UnknownType & import("../types").DefaultUserTypeInternal & {
+            mutes?: import("stream-chat").Mute<DefaultStreamChatGenerics>[] | undefined;
+        };
+    }>[];
     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;
+    getAttachmentPreviewListContext(): AttachmentPreviewListContext;
+    private deleteUpload;
+    private retryUpload;
     private clearFileInput;
     private get isUpdate();
     private initTextarea;
@@ -107,5 +121,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"; "acceptedFileTypes": "acceptedFileTypes"; "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"; "sendMessage$": "sendMessage$"; }, { "messageUpdate": "messageUpdate"; }, never, never>;
 }