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

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, 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).
      */
@@ -80,6 +64,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 +73,21 @@ 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;
     messageSent(): Promise<void>;
     get containsLinks(): boolean;
-    get accept(): string;
     get quotedMessageAttachments(): import("stream-chat").Attachment<import("../types").DefaultAttachmentType>[];
     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 +97,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"; }, { "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';
 }

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

@@ -1,11 +1,12 @@
 import { AfterViewChecked, OnChanges, OnDestroy, OnInit, SimpleChanges, TemplateRef } from '@angular/core';
 import { ChannelService } from '../channel.service';
 import { Observable } from 'rxjs';
-import { DefaultUserType, StreamMessage } from '../types';
+import { MessageContext, StreamMessage, TypingIndicatorContext } from '../types';
 import { ChatClientService } from '../chat-client.service';
 import { GroupStyle } from './group-styles';
 import { ImageLoadService } from './image-load.service';
 import { UserResponse } from 'stream-chat';
+import { CustomTemplatesService } from '../custom-templates.service';
 import * as i0 from "@angular/core";
 /**
  * The `MessageList` component renders a scrollable list of messages.
@@ -14,39 +15,14 @@ export declare class MessageListComponent implements AfterViewChecked, OnChanges
     private channelService;
     private chatClientService;
     private imageLoadService;
-    /**
-     * By default, the [default message component](./MessageComponent.mdx) is used. To change the contents of the message, provide [your own custom message template](./MessageComponent.mdx/#customization).
-     */
-    messageTemplate: TemplateRef<any> | undefined;
-    /**
-     * 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;
-    /**
-     * You can provide your own typing indicator template instead of the default one.
-     */
-    typingIndicatorTemplate: TemplateRef<{
-        usersTyping$: Observable<UserResponse<DefaultUserType>[]>;
-    }> | undefined;
-    /**
-     * @deprecated use [channel capabilities](https://getstream.io/chat/docs/javascript/channel_capabilities/?language=javascript) instead. If true, the message reactions are displayed. Users can also react to messages if they have the necessary [channel capability](https://getstream.io/chat/docs/javascript/channel_capabilities/?language=javascript).
-     */
-    areReactionsEnabled: boolean | undefined;
-    /**
-     * @deprecated use [channel capabilities](https://getstream.io/chat/docs/javascript/channel_capabilities/?language=javascript) instead. The list of [actions that are enabled](./MessageActionsBoxComponent.mdx), please note that the user also has to have the necessary [channel capabilities](https://getstream.io/chat/docs/javascript/channel_capabilities/?language=javascript) for actions to work. Unathorized actions won't be displayed on the UI. The `MessgaeList` component makes the necessary checks before passing the actions to the `Message` component.
-     */
-    enabledMessageActionsInput: string[] | undefined;
+    private customTemplatesService;
     /**
      * Determines if the message list should display channel messages or [thread messages](https://getstream.io/chat/docs/javascript/threads/?language=javascript).
      */
     mode: 'main' | 'thread';
+    typingIndicatorTemplate: TemplateRef<TypingIndicatorContext> | undefined;
+    messageTemplate: TemplateRef<MessageContext> | undefined;
     messages$: Observable<StreamMessage[]>;
-    canReactToMessage: boolean | undefined;
-    canReceiveReadEvents: boolean | undefined;
     enabledMessageActions: string[];
     private class;
     unreadMessageCount: number;
@@ -62,26 +38,26 @@ export declare class MessageListComponent implements AfterViewChecked, OnChanges
     private oldestMessageDate;
     private olderMassagesLoaded;
     private isNewMessageSentByUser;
-    private authorizedMessageActions;
     private readonly isUserScrolledUpThreshold;
     private subscriptions;
     private prevScrollTop;
     private usersTypingInChannel$;
     private usersTypingInThread$;
-    constructor(channelService: ChannelService, chatClientService: ChatClientService, imageLoadService: ImageLoadService);
+    constructor(channelService: ChannelService, chatClientService: ChatClientService, imageLoadService: ImageLoadService, customTemplatesService: CustomTemplatesService);
     ngOnInit(): void;
     ngOnChanges(changes: SimpleChanges): void;
     ngAfterViewChecked(): void;
     ngOnDestroy(): void;
-    get usersTyping$(): Observable<UserResponse<DefaultUserType<import("../types").DefaultUserTypeInternal>>[]>;
     trackByMessageId(index: number, item: StreamMessage): string;
     trackByUserId(index: number, user: UserResponse): string;
     scrollToBottom(): void;
     scrolled(): void;
+    getTypingIndicatorContext(): TypingIndicatorContext;
+    getMessageContext(message: StreamMessage): MessageContext;
     private preserveScrollbarPosition;
-    private setEnabledActions;
     private setMessages$;
     private resetScrollState;
+    private get usersTyping$();
     static ɵfac: i0.ɵɵFactoryDeclaration<MessageListComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MessageListComponent, "stream-message-list", never, { "messageTemplate": "messageTemplate"; "messageInputTemplate": "messageInputTemplate"; "mentionTemplate": "mentionTemplate"; "typingIndicatorTemplate": "typingIndicatorTemplate"; "areReactionsEnabled": "areReactionsEnabled"; "enabledMessageActionsInput": "enabledMessageActions"; "mode": "mode"; }, {}, never, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MessageListComponent, "stream-message-list", never, { "mode": "mode"; }, {}, never, never>;
 }

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

@@ -1,9 +1,8 @@
 import { AfterViewChecked, ChangeDetectorRef, EventEmitter, OnChanges, SimpleChanges } from '@angular/core';
 import { ReactionResponse } from 'stream-chat';
 import { ChannelService } from '../channel.service';
-import { DefaultReactionType, DefaultUserType } from '../types';
+import { DefaultReactionType, DefaultUserType, MessageReactionType } from '../types';
 import * as i0 from "@angular/core";
-export declare type MessageReactionType = 'angry' | 'haha' | 'like' | 'love' | 'sad' | 'wow';
 /**
  * The `MessageReactions` component displays the reactions of a message, the current user can add and remove reactions. You can read more about [message reactions](https://getstream.io/chat/docs/javascript/send_reaction/?language=javascript) in the platform documentation.
  */

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

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

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

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

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

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

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

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

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

@@ -17,11 +17,13 @@ import * as i15 from "./attachment-preview-list/attachment-preview-list.componen
 import * as i16 from "./modal/modal.component";
 import * as i17 from "./message-input/textarea.directive";
 import * as i18 from "./thread/thread.component";
-import * as i19 from "@angular/common";
-import * as i20 from "@ngx-translate/core";
-import * as i21 from "./stream-avatar.module";
+import * as i19 from "./icon-placeholder/icon-placeholder.component";
+import * as i20 from "./loading-indicator-placeholder/loading-indicator-placeholder.component";
+import * as i21 from "@angular/common";
+import * as i22 from "@ngx-translate/core";
+import * as i23 from "./stream-avatar.module";
 export declare class StreamChatModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<StreamChatModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<StreamChatModule, [typeof i1.ChannelComponent, typeof i2.ChannelHeaderComponent, typeof i3.ChannelListComponent, typeof i4.ChannelPreviewComponent, typeof i5.MessageComponent, typeof i6.MessageInputComponent, typeof i7.MessageListComponent, typeof i8.LoadingIndicatorComponent, typeof i9.IconComponent, typeof i10.MessageActionsBoxComponent, typeof i11.AttachmentListComponent, typeof i12.MessageReactionsComponent, typeof i13.NotificationComponent, typeof i14.NotificationListComponent, typeof i15.AttachmentPreviewListComponent, typeof i16.ModalComponent, typeof i17.TextareaDirective, typeof i18.ThreadComponent], [typeof i19.CommonModule, typeof i20.TranslateModule, typeof i21.StreamAvatarModule], [typeof i1.ChannelComponent, typeof i2.ChannelHeaderComponent, typeof i3.ChannelListComponent, typeof i4.ChannelPreviewComponent, typeof i5.MessageComponent, typeof i6.MessageInputComponent, typeof i7.MessageListComponent, typeof i8.LoadingIndicatorComponent, typeof i9.IconComponent, typeof i10.MessageActionsBoxComponent, typeof i11.AttachmentListComponent, typeof i12.MessageReactionsComponent, typeof i13.NotificationComponent, typeof i14.NotificationListComponent, typeof i15.AttachmentPreviewListComponent, typeof i16.ModalComponent, typeof i21.StreamAvatarModule, typeof i18.ThreadComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<StreamChatModule, [typeof i1.ChannelComponent, typeof i2.ChannelHeaderComponent, typeof i3.ChannelListComponent, typeof i4.ChannelPreviewComponent, typeof i5.MessageComponent, typeof i6.MessageInputComponent, typeof i7.MessageListComponent, typeof i8.LoadingIndicatorComponent, typeof i9.IconComponent, typeof i10.MessageActionsBoxComponent, typeof i11.AttachmentListComponent, typeof i12.MessageReactionsComponent, typeof i13.NotificationComponent, typeof i14.NotificationListComponent, typeof i15.AttachmentPreviewListComponent, typeof i16.ModalComponent, typeof i17.TextareaDirective, typeof i18.ThreadComponent, typeof i19.IconPlaceholderComponent, typeof i20.LoadingIndicatorPlaceholderComponent], [typeof i21.CommonModule, typeof i22.TranslateModule, typeof i23.StreamAvatarModule], [typeof i1.ChannelComponent, typeof i2.ChannelHeaderComponent, typeof i3.ChannelListComponent, typeof i4.ChannelPreviewComponent, typeof i5.MessageComponent, typeof i6.MessageInputComponent, typeof i7.MessageListComponent, typeof i8.LoadingIndicatorComponent, typeof i9.IconComponent, typeof i10.MessageActionsBoxComponent, typeof i11.AttachmentListComponent, typeof i12.MessageReactionsComponent, typeof i13.NotificationComponent, typeof i14.NotificationListComponent, typeof i15.AttachmentPreviewListComponent, typeof i16.ModalComponent, typeof i23.StreamAvatarModule, typeof i18.ThreadComponent, typeof i19.IconPlaceholderComponent, typeof i20.LoadingIndicatorPlaceholderComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<StreamChatModule>;
 }

package/lib/thread/thread.component.d.ts

@@ -1,18 +1,21 @@
 import { OnDestroy } from '@angular/core';
 import { ChannelService } from '../channel.service';
-import { StreamMessage } from '../types';
+import { CustomTemplatesService } from '../custom-templates.service';
+import { StreamMessage, ThreadHeaderContext } from '../types';
 import * as i0 from "@angular/core";
 /**
  * The `Thread` component represents a [message thread](https://getstream.io/chat/docs/javascript/threads/?language=javascript), it is a container component that displays a thread with a header, [`MessageList`](./MessageListComponent.mdx) and [`MessageInput`](./MessageInputComponent.mdx) components.
  */
 export declare class ThreadComponent implements OnDestroy {
+    customTemplatesService: CustomTemplatesService;
     private channelService;
     private class;
     parentMessage: StreamMessage | undefined;
     private subscriptions;
-    constructor(channelService: ChannelService);
+    constructor(customTemplatesService: CustomTemplatesService, channelService: ChannelService);
     ngOnDestroy(): void;
-    get replyCountParam(): {
+    getThreadHeaderContext(): ThreadHeaderContext;
+    getReplyCountParam(parentMessage: StreamMessage | undefined): {
         replyCount: number | undefined;
     };
     closeThread(): void;

package/lib/types.d.ts

@@ -1,5 +1,7 @@
 import { TemplateRef } from '@angular/core';
-import type { Attachment, ChannelMemberResponse, CommandResponse, Event, FormatMessageResponse, LiteralStringForUnion, Mute, UserResponse } from 'stream-chat';
+import { Observable, Subject } from 'rxjs';
+import type { Attachment, Channel, ChannelMemberResponse, CommandResponse, Event, FormatMessageResponse, LiteralStringForUnion, Mute, ReactionResponse, UserResponse } from 'stream-chat';
+import { Icon } from './icon/icon.component';
 export declare type UnknownType = Record<string, unknown>;
 export declare type CustomTrigger = {
     [key: string]: {
@@ -66,3 +68,99 @@ export declare type NotificationPayload<T = {}> = {
     templateContext?: T;
     dismissFn: Function;
 };
+export declare type ChannelPreviewContext = {
+    channel: Channel;
+};
+export declare type MessageInputContext = {
+    isFileUploadEnabled: boolean | undefined;
+    areMentionsEnabled: boolean | undefined;
+    mentionScope: 'channel' | 'application' | undefined;
+    mode: 'thread' | 'main' | undefined;
+    isMultipleFileUploadEnabled: boolean | undefined;
+    message: StreamMessage | undefined;
+    messageUpdateHandler: Function | undefined;
+};
+export declare type MentionTemplateContext = {
+    content: string;
+    user: UserResponse;
+};
+export declare type EmojiPickerContext = {
+    emojiInput$: Subject<string>;
+};
+export declare type TypingIndicatorContext = {
+    usersTyping$: Observable<UserResponse<DefaultUserType>[]>;
+};
+export declare type MessageContext = {
+    message: StreamMessage | undefined;
+    enabledMessageActions: string[];
+    isLastSentMessage: boolean | undefined;
+    mode: 'thread' | 'main';
+};
+export declare type ChannelActionsContext = {
+    channel: Channel;
+};
+export declare type AttachmentListContext = {
+    messageId: string;
+    attachments: Attachment<DefaultAttachmentType>[];
+};
+export declare type AvatarContext = {
+    name: string | undefined;
+    imageUrl: string | undefined;
+    size: number | undefined;
+};
+export declare type AttachmentPreviewListContext = {
+    attachmentUploads$: Observable<AttachmentUpload[]> | undefined;
+    retryUploadHandler: (f: File) => any;
+    deleteUploadHandler: (u: AttachmentUpload) => any;
+};
+export declare type IconContext = {
+    icon: Icon | undefined;
+    size: number | undefined;
+};
+export declare type LoadingIndicatorContext = {
+    size: number | undefined;
+    color: string | undefined;
+};
+export declare type MessageActionsBoxContext = {
+    isOpen: boolean;
+    isMine: boolean;
+    message: StreamMessage | undefined;
+    enabledActions: string[];
+    displayedActionsCountChaneHanler: (count: number) => any;
+    isEditingChangeHandler: (isEditing: boolean) => any;
+};
+export declare type MessageActionBoxItemContext = {
+    actionName: 'quote' | 'pin' | 'flag' | 'mute' | 'edit' | 'delete';
+    actionLabelOrTranslationKey: (() => string) | string;
+    actionHandler: () => any;
+};
+export declare type MessageActionItem = {
+    actionName: 'quote' | 'pin' | 'flag' | 'mute' | 'edit' | 'delete';
+    actionLabelOrTranslationKey: (() => string) | string;
+    isVisible: (enabledActions: string[], isMine: boolean, message: StreamMessage) => boolean;
+    actionHandler: (message: StreamMessage, isMine: boolean) => any;
+};
+export declare type MessageReactionsContext = {
+    messageId: string | undefined;
+    messageReactionCounts: {
+        [key in MessageReactionType]?: number;
+    };
+    isSelectorOpen: boolean;
+    latestReactions: ReactionResponse<DefaultReactionType, DefaultUserType>[];
+    ownReactions: ReactionResponse<DefaultReactionType, DefaultUserType>[];
+    isSelectorOpenChangeHandler: (isOpen: boolean) => any;
+};
+export declare type ModalContext = {
+    isOpen: boolean;
+    isOpenChangeHandler: (isOpen: boolean) => any;
+    content: TemplateRef<void>;
+};
+export declare type NotificationContext = {
+    type: NotificationType | undefined;
+    content: TemplateRef<void> | undefined;
+};
+export declare type ThreadHeaderContext = {
+    parentMessage: StreamMessage | undefined;
+    closeThreadHandler: Function;
+};
+export declare type MessageReactionType = 'angry' | 'haha' | 'like' | 'love' | 'sad' | 'wow';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stream-chat-angular",
-  "version": "2.20.0",
+  "version": "3.0.0-beta.3",
   "description": "Angular components to create chat conversations or livestream style chat",
   "author": "GetStream",
   "homepage": "https://getstream.io/chat/",

package/public-api.d.ts

@@ -4,8 +4,11 @@ export * from './lib/theme.service';
 export * from './lib/attachment.service';
 export * from './lib/stream-i18n.service';
 export * from './lib/avatar/avatar.component';
+export * from './lib/avatar-placeholder/avatar-placeholder.component';
 export * from './lib/icon/icon.component';
+export * from './lib/icon-placeholder/icon-placeholder.component';
 export * from './lib/loading-indicator/loading-indicator.component';
+export * from './lib/loading-indicator-placeholder/loading-indicator-placeholder.component';
 export * from './lib/message-actions-box/message-actions-box.component';
 export * from './lib/channel/channel.component';
 export * from './lib/channel-header/channel-header.component';
@@ -44,4 +47,5 @@ export * from './lib/stream-avatar.module';
 export * from './lib/stream-autocomplete-textarea.module';
 export * from './lib/stream-textarea.module';
 export * from './lib/injection-tokens';
+export * from './lib/custom-templates.service';
 export * from './lib/types';

package/src/assets/version.ts

@@ -1 +1 @@
-export const version = '2.20.0';
+export const version = '3.0.0-beta.3';