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

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,28 +15,13 @@ 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;
+    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[]>;
     enabledMessageActions: string[];
     private class;
@@ -57,19 +43,21 @@ export declare class MessageListComponent implements AfterViewChecked, OnChanges
     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 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"; "mode": "mode"; }, {}, never, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MessageListComponent, "stream-message-list", never, { "mode": "mode"; }, {}, never, never>;
 }

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

@@ -1,4 +1,4 @@
-import { NotificationType } from '../notification.service';
+import { NotificationType } from '../types';
 import * as i0 from "@angular/core";
 /**
  * The `Notification` component displays a notification within the [`NotificationList`](./NotificationListComponent.mdx)

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

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

package/lib/notification.service.d.ts

@@ -1,11 +1,7 @@
+import { TemplateRef } from '@angular/core';
 import { Observable } from 'rxjs';
+import { NotificationPayload, NotificationType } from './types';
 import * as i0 from "@angular/core";
-export declare type NotificationType = 'success' | 'error';
-export declare type NotificationPayload = {
-    type: NotificationType;
-    text: string;
-    translateParams?: Object;
-};
 /**
  * The `NotificationService` can be used to add or remove notifications. By default the [`NotificationList`](../components/NotificationListComponent.mdx) component displays the currently active notifications.
  */
@@ -18,22 +14,27 @@ export declare class NotificationService {
     constructor();
     /**
      * Displays a notification for the given amount of time.
-     * @param text The text of the notification
+     * @param content The text of the notification or the HTML template for the notification
      * @param type The type of the notification
      * @param timeout The number of milliseconds while the notification should be visible
-     * @param translateParams Translation parameters for the `text`
+     * @param translateParams Translation parameters for the `content` (for text notifications)
+     * @param templateContext The input of the notification template (for HTML notifications)
      * @returns A method to clear the notification (before the timeout).
      */
-    addTemporaryNotification(text: string, type?: NotificationType, timeout?: number, translateParams?: Object): () => void;
+    addTemporaryNotification<T>(content: string | TemplateRef<T>, type?: NotificationType, timeout?: number, translateParams?: Object, templateContext?: T): () => void;
     /**
      * Displays a notification, that will be visible until it's removed.
-     * @param text The text of the notification
+     * @param content The text of the notification or the HTML template for the notification
      * @param type The type of the notification
-     * @param translateParams Translation parameters for the `text`
+     * @param translateParams Translation parameters for the `content` (for text notifications)
+     * @param templateContext The input of the notification template (for HTML notifications)
      * @returns A method to clear the notification.
      */
-    addPermanentNotification(text: string, type?: NotificationType, translateParams?: Object): () => void;
-    private addNotification;
+    addPermanentNotification<T = {
+        [key: string]: any;
+        dismissFn: () => {};
+    }>(content: string | TemplateRef<T>, type?: NotificationType, translateParams?: Object, templateContext?: T): () => void;
+    private createNotification;
     private removeNotification;
     static ɵfac: i0.ɵɵFactoryDeclaration<NotificationService, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<NotificationService>;

package/lib/types.d.ts

@@ -1,4 +1,6 @@
-import type { Attachment, ChannelMemberResponse, CommandResponse, Event, FormatMessageResponse, LiteralStringForUnion, Mute, UserResponse } from 'stream-chat';
+import { TemplateRef } from '@angular/core';
+import { Observable, Subject } from 'rxjs';
+import type { Attachment, Channel, ChannelMemberResponse, CommandResponse, Event, FormatMessageResponse, LiteralStringForUnion, Mute, UserResponse } from 'stream-chat';
 export declare type UnknownType = Record<string, unknown>;
 export declare type CustomTrigger = {
     [key: string]: {
@@ -55,3 +57,44 @@ export declare type MentionAutcompleteListItem = (ChannelMemberResponse | UserRe
 export declare type ComandAutocompleteListItem = CommandResponse & {
     autocompleteLabel: string;
 };
+export declare type NotificationType = 'success' | 'error' | 'info';
+export declare type NotificationPayload<T = {}> = {
+    id: string;
+    type: NotificationType;
+    text?: string;
+    translateParams?: Object;
+    template?: TemplateRef<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;
+};

package/package.json

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

package/public-api.d.ts

@@ -44,4 +44,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 = '3.0.0-beta.1';
+export const version = '3.0.0-beta.2';