stream-chat-angular 2.12.3 → 2.14.0

package/lib/attachment.service.d.ts

@@ -4,19 +4,53 @@ import { ChannelService } from './channel.service';
 import { NotificationService } from './notification.service';
 import { AttachmentUpload } from './types';
 import * as i0 from "@angular/core";
+/**
+ * The `AttachmentService` manages the uploads of a message input.
+ */
 export declare class AttachmentService {
     private channelService;
     private notificationService;
+    /**
+     * Emits the number of uploads in progress.
+     */
     attachmentUploadInProgressCounter$: Observable<number>;
+    /**
+     * Emits the state of the uploads ([`AttachmentUpload[]`](https://github.com/GetStream/stream-chat-angular/blob/master/projects/stream-chat-angular/src/lib/types.ts)), it adds a state (`success`, `error` or `uploading`) to each file the user selects for upload. It is used by the [`AttachmentPreviewList`](../components/attachment-preview-list.mdx) to display the attachment previews.
+     */
     attachmentUploads$: Observable<AttachmentUpload[]>;
     private attachmentUploadInProgressCounterSubject;
     private attachmentUploadsSubject;
     constructor(channelService: ChannelService, notificationService: NotificationService);
+    /**
+     * Resets the attachments uploads (for example after the message with the attachments sent successfully)
+     */
     resetAttachmentUploads(): void;
+    /**
+     * Uploads the selected files, and creates preview for image files. The result is propagated throught the `attachmentUploads$` stream.
+     * @param fileList The files selected by the user
+     * @returns A promise with the result
+     */
     filesSelected(fileList: FileList | null): Promise<void>;
+    /**
+     * Retries to upload an attachment.
+     * @param file
+     * @returns A promise with the result
+     */
     retryAttachmentUpload(file: File): Promise<void>;
+    /**
+     * Deletes an attachment, the attachment can have any state (`error`, `uploading` or `success`).
+     * @param upload
+     */
     deleteAttachment(upload: AttachmentUpload): Promise<void>;
+    /**
+     * Maps the current uploads to a format that can be sent along with the message to the Stream API.
+     * @returns the attachments
+     */
     mapToAttachments(): Attachment<import("stream-chat").UR>[];
+    /**
+     * Maps attachments received from the Stream API to uploads. This is useful when editing a message.
+     * @param attachments Attachemnts received with the message
+     */
     createFromAttachments(attachments: Attachment[]): void;
     private createPreview;
     private uploadAttachments;

package/lib/channel-list/channel-list-toggle.service.d.ts

@@ -1,14 +1,36 @@
 import { Observable } from 'rxjs';
 import * as i0 from "@angular/core";
+/**
+ * The `ChannelListToggleService` can be used to toggle the channel list.
+ */
 export declare class ChannelListToggleService {
+    /**
+     * Emits `true` if the channel list is in open state, otherwise it emits `false`
+     */
     isOpen$: Observable<boolean>;
     private isOpenSubject;
     private menuElement;
     constructor();
+    /**
+     * Opens the channel list.
+     */
     open(): void;
+    /**
+     * Closes the channel list.
+     */
     close(): void;
+    /**
+     * Opens the channel list if it was closed, and closes if it was opened.
+     */
     toggle(): void;
+    /**
+     * Sets the channel list element, on mobile screen size if the user opens the channel list, and clicks outside, the service automatically closes the channel list if a reference to the HTML element is provided.
+     * @param element
+     */
     setMenuElement(element: HTMLElement | undefined): void;
+    /**
+     * This method should be called if a channel was selected, if on mobile, the channel list will be closed.
+     */
     channelSelected(): void;
     private watchForOutsideClicks;
     static ɵfac: i0.ɵɵFactoryDeclaration<ChannelListToggleService, never>;

package/lib/channel.service.d.ts

@@ -5,25 +5,104 @@ import { ChatClientService, Notification } from './chat-client.service';
 import { MessageReactionType } from './message-reactions/message-reactions.component';
 import { AttachmentUpload, StreamMessage } from './types';
 import * as i0 from "@angular/core";
+/**
+ * The `ChannelService` provides data and interaction for the channel list and message list. TEST
+ */
 export declare class ChannelService {
     private chatClientService;
     private ngZone;
+    /**
+     * Emits `false` if there are no more pages of channels that can be loaded.
+     */
     hasMoreChannels$: Observable<boolean>;
+    /**
+     * Emits the currently loaded and [watched](https://getstream.io/chat/docs/javascript/watch_channel/?language=javascript) channel list.
+     *
+     * :::important
+     * If you want to subscribe to channel events, you need to manually reenter Angular's change detection zone, our [Change detection guide](../concepts/change-detection.mdx) explains this in detail.
+     * :::
+     *
+     *  Apart from pagination, the channel list is also updated on the following events:
+     *
+     *  | Event type                          | Default behavior                                                   | Custom handler to override                    |
+     *  | ----------------------------------- | ------------------------------------------------------------------ | --------------------------------------------- |
+     *  | `channel.deleted`                   | Remove channel from the list                                       | `customChannelDeletedHandler`                 |
+     *  | `channel.hidden`                    | Remove channel from the list                                       | `customChannelHiddenHandler`                  |
+     *  | `channel.truncated`                 | Updates the channel                                                | `customChannelTruncatedHandler`               |
+     *  | `channel.updated`                   | Updates the channel                                                | `customChannelUpdatedHandler`                 |
+     *  | `channel.visible`                   | Adds the channel to the list                                       | `customChannelVisibleHandler`                 |
+     *  | `message.new`                       | Moves the channel to top of the list                               | `customNewMessageHandler`                     |
+     *  | `notification.added_to_channel`     | Adds the new channel to the top of the list and starts watching it | `customAddedToChannelNotificationHandler`     |
+     *  | `notification.message_new`          | Adds the new channel to the top of the list and starts watching it | `customNewMessageNotificationHandler`         |
+     *  | `notification.removed_from_channel` | Removes the channel from the list                                  | `customRemovedFromChannelNotificationHandler` |
+     *
+     *  It's important to note that filters don't apply to updates to the list from events.
+     *
+     *  Our platform documentation covers the topic of [channel events](https://getstream.io/chat/docs/javascript/event_object/?language=javascript#events) in depth.
+     */
     channels$: Observable<Channel[] | undefined>;
+    /**
+     * Emits the currently active channel.
+     *
+     * :::important
+     * If you want to subscribe to channel events, you need to manually reenter Angular's change detection zone, our [Change detection guide](../concepts/change-detection.mdx) explains this in detail.
+     * :::
+     */
     activeChannel$: Observable<Channel | undefined>;
+    /**
+     * Emits the list of currently loaded messages of the active channel.
+     */
     activeChannelMessages$: Observable<StreamMessage[]>;
+    /**
+     * Emits the id of the currently selected parent message. If no message is selected, it emits undefined.
+     */
     activeParentMessageId$: Observable<string | undefined>;
+    /**
+     * Emits the list of currently loaded thread replies belonging to the selected parent message. If there is no currently active thread it emits an empty array.
+     */
     activeThreadMessages$: Observable<StreamMessage[]>;
+    /**
+     * Emits the currently selected parent message. If no message is selected, it emits undefined.
+     */
     activeParentMessage$: Observable<StreamMessage | undefined>;
     messageToQuote$: Observable<StreamMessage | undefined>;
+    /**
+     * Custom event handler to call if a new message received from a channel that is not being watched, provide an event handler if you want to override the [default channel list ordering](./ChannelService.mdx/#channels)
+     */
+    usersTypingInChannel$: Observable<UserResponse[]>;
+    usersTypingInThread$: Observable<UserResponse[]>;
     customNewMessageNotificationHandler?: (notification: Notification, channelListSetter: (channels: Channel[]) => void) => void;
+    /**
+     * Custom event handler to call when the user is added to a channel, provide an event handler if you want to override the [default channel list ordering](./ChannelService.mdx/#channels)
+     */
     customAddedToChannelNotificationHandler?: (notification: Notification, channelListSetter: (channels: Channel[]) => void) => void;
+    /**
+     * Custom event handler to call when the user is removed from a channel, provide an event handler if you want to override the [default channel list ordering](./ChannelService.mdx/#channels)
+     */
     customRemovedFromChannelNotificationHandler?: (notification: Notification, channelListSetter: (channels: Channel[]) => void) => void;
+    /**
+     * Custom event handler to call when a channel is deleted, provide an event handler if you want to override the [default channel list ordering](./ChannelService.mdx/#channels)
+     */
     customChannelDeletedHandler?: (event: Event, channel: Channel, channelListSetter: (channels: Channel[]) => void, messageListSetter: (messages: StreamMessage[]) => void, threadListSetter: (messages: StreamMessage[]) => void, parentMessageSetter: (message: StreamMessage | undefined) => void) => void;
+    /**
+     * Custom event handler to call when a channel is updated, provide an event handler if you want to override the [default channel list ordering](./ChannelService.mdx/#channels)
+     */
     customChannelUpdatedHandler?: (event: Event, channel: Channel, channelListSetter: (channels: Channel[]) => void, messageListSetter: (messages: StreamMessage[]) => void, threadListSetter: (messages: StreamMessage[]) => void, parentMessageSetter: (message: StreamMessage | undefined) => void) => void;
+    /**
+     * Custom event handler to call when a channel is truncated, provide an event handler if you want to override the [default channel list ordering](./ChannelService.mdx/#channels)
+     */
     customChannelTruncatedHandler?: (event: Event, channel: Channel, channelListSetter: (channels: Channel[]) => void, messageListSetter: (messages: StreamMessage[]) => void, threadListSetter: (messages: StreamMessage[]) => void, parentMessageSetter: (message: StreamMessage | undefined) => void) => void;
+    /**
+     * Custom event handler to call when a channel becomes hidden, provide an event handler if you want to override the [default channel list ordering](./ChannelService.mdx/#channels)
+     */
     customChannelHiddenHandler?: (event: Event, channel: Channel, channelListSetter: (channels: Channel[]) => void, messageListSetter: (messages: StreamMessage[]) => void, threadListSetter: (messages: StreamMessage[]) => void, parentMessageSetter: (message: StreamMessage | undefined) => void) => void;
+    /**
+     * Custom event handler to call when a channel becomes visible, provide an event handler if you want to override the [default channel list ordering](./ChannelService.mdx/#channels)
+     */
     customChannelVisibleHandler?: (event: Event, channel: Channel, channelListSetter: (channels: Channel[]) => void, messageListSetter: (messages: StreamMessage[]) => void, threadListSetter: (messages: StreamMessage[]) => void, parentMessageSetter: (message: StreamMessage | undefined) => void) => void;
+    /**
+     * Custom event handler to call if a new message received from a channel that is being watched, provide an event handler if you want to override the [default channel list ordering](./ChannelService.mdx/#channels)
+     */
     customNewMessageHandler?: (event: Event, channel: Channel, channelListSetter: (channels: Channel[]) => void, messageListSetter: (messages: StreamMessage[]) => void, threadListSetter: (messages: StreamMessage[]) => void, parentMessageSetter: (message: StreamMessage | undefined) => void) => void;
     private channelsSubject;
     private activeChannelSubject;
@@ -37,28 +116,109 @@ export declare class ChannelService {
     private options;
     private readonly messagePageSize;
     private messageToQuoteSubject;
+    private usersTypingInChannelSubject;
+    private usersTypingInThreadSubject;
     private channelListSetter;
     private messageListSetter;
     private threadListSetter;
     private parentMessageSetter;
     constructor(chatClientService: ChatClientService, ngZone: NgZone);
+    /**
+     * Sets the given `channel` as active.
+     * @param channel
+     */
     setAsActiveChannel(channel: Channel): void;
+    /**
+     * Sets the given `message` as an active parent message. If `undefined` is provided, it will deleselect the current parent message.
+     * @param message
+     */
     setAsActiveParentMessage(message: StreamMessage | undefined): Promise<void>;
+    /**
+     * Loads the next page of messages of the active channel. The page size can be set in the [query option](https://getstream.io/chat/docs/javascript/query_channels/?language=javascript#query-options) object.
+     */
     loadMoreMessages(): Promise<void>;
+    /**
+     * Loads the next page of messages of the active thread. The page size can be set in the [query option](https://getstream.io/chat/docs/javascript/query_channels/?language=javascript#query-options) object.
+     */
     loadMoreThreadReplies(): Promise<void>;
+    /**
+     * Queries the channels with the given filters, sorts and options. More info about [channel querying](https://getstream.io/chat/docs/javascript/query_channels/?language=javascript) can be found in the platform documentation.
+     * @param filters
+     * @param sort
+     * @param options
+     */
     init(filters: ChannelFilters, sort?: ChannelSort, options?: ChannelOptions): Promise<void>;
+    /**
+     * Resets the `activeChannel$`, `channels$` and `activeChannelMessages$` Observables. Useful when disconnecting a chat user, use in combination with [`disconnectUser`](./chat-client.mdx/#disconnectuser).
+     */
     reset(): void;
+    /**
+     * Loads the next page of channels. The page size can be set in the [query option](https://getstream.io/chat/docs/javascript/query_channels/?language=javascript#query-options) object.
+     */
     loadMoreChannels(): Promise<void>;
+    /**
+     * Adds a reaction to a message.
+     * @param messageId The id of the message to add the reaction to
+     * @param reactionType The type of the reaction
+     */
     addReaction(messageId: string, reactionType: MessageReactionType): Promise<void>;
+    /**
+     * Removes a reaction from a message.
+     * @param messageId The id of the message to remove the reaction from
+     * @param reactionType Thr type of reaction to remove
+     */
     removeReaction(messageId: string, reactionType: MessageReactionType): Promise<void>;
+    /**
+     * Sends a message to the active channel. The message is immediately added to the message list, if an error occurs and the message can't be sent, the error is indicated in `state` of the message.
+     * @param text The text of the message
+     * @param attachments The attachments
+     * @param mentionedUsers Mentioned users
+     * @param parentId Id of the parent message (if sending a thread reply)
+     * @param quotedMessageId Id of the message to quote (if sending a quote reply)
+     */
     sendMessage(text: string, attachments?: Attachment[], mentionedUsers?: UserResponse[], parentId?: string | undefined, quotedMessageId?: string | undefined): Promise<void>;
+    /**
+     * Resends the given message to the active channel
+     * @param message The message to resend
+     */
     resendMessage(message: StreamMessage): Promise<void>;
+    /**
+     * Updates the message in the active channel
+     * @param message Mesage to be updated
+     */
     updateMessage(message: StreamMessage): Promise<void>;
+    /**
+     * Deletes the message from the active channel
+     * @param message Message to be deleted
+     */
     deleteMessage(message: StreamMessage): Promise<void>;
+    /**
+     * Uploads files to the channel. If you want to know more about [file uploads](https://getstream.io/chat/docs/javascript/file_uploads/?language=javascript) check out the platform documentation.
+     * @param uploads the attachments to upload (output of the [`AttachmentService`](./AttachmentService.mdx))
+     * @returns the result of file upload requests
+     */
     uploadAttachments(uploads: AttachmentUpload[]): Promise<AttachmentUpload[]>;
+    /**
+     * Deletes an uploaded file by URL. If you want to know more about [file uploads](https://getstream.io/chat/docs/javascript/file_uploads/?language=javascript) check out the platform documentation
+     * @param attachmentUpload Attachment to be deleted (output of the [`AttachmentService`](./AttachmentService.mdx))
+     */
     deleteAttachment(attachmentUpload: AttachmentUpload): Promise<void>;
+    /**
+     * Returns the autocomplete options for current channel members. If the channel has less than 100 members, it returns the channel members, otherwise sends a [search request](https://getstream.io/chat/docs/javascript/query_members/?language=javascript#pagination-and-ordering) with the given search term.
+     * @param searchTerm Text to search for in the names of members
+     * @returns The list of members matching the search filter
+     */
     autocompleteMembers(searchTerm: string): Promise<import("stream-chat").ChannelMemberResponse<import("stream-chat").UR>[]>;
+    /**
+     * [Runs a message action](https://getstream.io/chat/docs/rest/#messages-runmessageaction) in the current channel. Updates the message list based on the action result (if no message is returned, the message will be removed from the message list).
+     * @param messageId
+     * @param formData
+     */
     sendAction(messageId: string, formData: Record<string, string>): Promise<void>;
+    /**
+     * Selects or deselects the current message to quote reply to
+     * @param message The message to select, if called with `undefined`, it deselects the message
+     */
     selectMessageToQuote(message: StreamMessage | undefined): void;
     private sendMessageRequest;
     private handleNotification;
@@ -68,6 +228,16 @@ export declare class ChannelService {
     private addChannelFromNotification;
     private removeFromChannelList;
     private watchForActiveChannelEvents;
+    /**
+     * Call this method if user started typing in the active channel
+     * @param parentId The id of the parent message, if user is typing in a thread
+     */
+    typingStarted(parentId?: string): Promise<void>;
+    /**
+     * Call this method if user stopped typing in the active channel
+     * @param parentId The id of the parent message, if user were typing in a thread
+     */
+    typingStopped(parentId?: string): Promise<void>;
     private messageUpdated;
     private messageReactionEventReceived;
     private formatMessage;
@@ -85,6 +255,8 @@ export declare class ChannelService {
     private get channels();
     private get canSendReadEvents();
     private transformToStreamMessage;
+    private handleTypingStartEvent;
+    private handleTypingStopEvent;
     static ɵfac: i0.ɵɵFactoryDeclaration<ChannelService, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<ChannelService>;
 }

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

@@ -8,21 +8,60 @@ export declare type Notification = {
     eventType: string;
     event: Event;
 };
+/**
+ * The `ChatClient` service connects the user to the Stream chat.
+ */
 export declare class ChatClientService {
     private ngZone;
     private notificationService;
+    /**
+     * The [StreamChat client](https://github.com/GetStream/stream-chat-js/blob/master/src/client.ts) instance. In general you shouldn't need to access the client, but it's there if you want to use it.
+     */
     chatClient: StreamChat;
+    /**
+     * Emits [`Notification`](https://github.com/GetStream/stream-chat-angular/blob/master/projects/stream-chat-angular/src/lib/chat-client.service.ts) events. The platform documentation covers [the list of client and notification events](https://getstream.io/chat/docs/javascript/event_object/?language=javascript).
+     * :::important
+     * For performance reasons this Observable operates outside of the Angular change detection zone. If you subscribe to it, you need to manually reenter Angular's change detection zone, our [Change detection guide](../concepts/change-detection.mdx) explains this in detail.
+     * :::
+     */
     notification$: Observable<Notification>;
+    /**
+     * Emits the current [application settings](https://getstream.io/chat/docs/javascript/app_setting_overview/?language=javascript). Since getting the application settings is an expensive API call and we don't always need the result, this is not initialized by default, you need to call `getApplicationSettings` to load them.
+     */
     appSettings$: Observable<AppSettings | undefined>;
+    /**
+     * Emits the current connection state of the user (`online` or `offline`)
+     */
     connectionState$: Observable<'offline' | 'online'>;
     private notificationSubject;
     private connectionStateSubject;
     private appSettingsSubject;
     constructor(ngZone: NgZone, notificationService: NotificationService);
+    /**
+     * Creates a [`StreamChat`](https://github.com/GetStream/stream-chat-js/blob/668b3e5521339f4e14fc657834531b4c8bf8176b/src/client.ts#L124) instance using the provided `apiKey`, and connects a user with the given meta data and token. More info about [connecting users](https://getstream.io/chat/docs/javascript/init_and_users/?language=javascript) can be found in the platform documentation.
+     * @param apiKey
+     * @param userOrId
+     * @param userTokenOrProvider
+     */
     init(apiKey: string, userOrId: string | OwnUserResponse | UserResponse, userTokenOrProvider: TokenOrProvider): Promise<void>;
+    /**
+     * Disconnects the current user, and closes the WebSocket connection. Useful when disconnecting a chat user, use in combination with [`reset`](./ChannelService.mdx/#reset).
+     */
     disconnectUser(): Promise<void>;
+    /**
+     * Loads the current [application settings](https://getstream.io/chat/docs/javascript/app_setting_overview/?language=javascript), if the application settings have already been loaded, it does nothing.
+     */
     getAppSettings(): Promise<void>;
+    /**
+     * Flag the message with the given ID. If you want to know [more about flags](https://getstream.io/chat/docs/javascript/moderation/?language=javascript) check out the platform documentation.
+     * @param messageId
+     */
     flagMessage(messageId: string): Promise<void>;
+    /**
+     * Searches for users in the application that have ID or name matching the provided search term
+     * @param searchTerm
+     * @returns The users matching the search
+     */
     autocompleteUsers(searchTerm: string): Promise<UserResponse<import("stream-chat").UR>[]>;
     static ɵfac: i0.ɵɵFactoryDeclaration<ChatClientService, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<ChatClientService>;

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

@@ -6,11 +6,13 @@ import { ChannelService } from '../../channel.service';
 import { TextareaInterface } from '../textarea.interface';
 import { ChatClientService } from '../../chat-client.service';
 import { TransliterationService } from '../../transliteration.service';
+import { EmojiInputService } from '../emoji-input.service';
 import * as i0 from "@angular/core";
 export declare class AutocompleteTextareaComponent implements TextareaInterface, OnChanges {
     private channelService;
     private chatClientService;
     private transliterationService;
+    private emojiInputService;
     class: string;
     value: string;
     areMentionsEnabled: boolean | undefined;
@@ -30,7 +32,7 @@ export declare class AutocompleteTextareaComponent implements TextareaInterface,
     private userMentionConfig;
     private slashCommandConfig;
     private searchTerm$;
-    constructor(channelService: ChannelService, chatClientService: ChatClientService, transliterationService: TransliterationService);
+    constructor(channelService: ChannelService, chatClientService: ChatClientService, transliterationService: TransliterationService, emojiInputService: EmojiInputService);
     ngOnChanges(changes: SimpleChanges): void;
     filter(searchString: string, items: {
         autocompleteLabel: string;

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

@@ -0,0 +1,14 @@
+import { Subject } from 'rxjs';
+import * as i0 from "@angular/core";
+/**
+ * If you have an emoji picker in your application, you can propagate the selected emoji to the textarea using this service, more info can be found in [custom emoji picker guide](../code-examples/emoji-picker.mdx)
+ */
+export declare class EmojiInputService {
+    /**
+     * If you have an emoji picker in your application, you can propagate the selected emoji to the textarea using this Subject, more info can be found in [custom emoji picker guide](../code-examples/emoji-picker.mdx)
+     */
+    emojiInput$: Subject<string>;
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<EmojiInputService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<EmojiInputService>;
+}

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

@@ -1,16 +1,42 @@
 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/message-input.mdx) components if your UI has more than one input component.
+ */
 export declare class MessageInputConfigService {
+    /**
+     * 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).
+     */
     isFileUploadEnabled: boolean | undefined;
+    /**
+     * 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;
     /**
-     * @deprecated https://getstream.io/chat/docs/sdk/angular/services/message-input-config/#overview
+     * 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
+     */
     isMultipleFileUploadEnabled: boolean | undefined;
+    /**
+     * The scope for user mentions, either members of the current channel of members of the application
+     */
     mentionScope: 'channel' | 'application' | undefined;
     constructor();
     static ɵfac: i0.ɵɵFactoryDeclaration<MessageInputConfigService, never>;

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

@@ -1,6 +1,6 @@
 import { AfterViewInit, ChangeDetectorRef, ComponentFactoryResolver, ComponentRef, EventEmitter, OnChanges, OnDestroy, SimpleChanges, TemplateRef, Type } from '@angular/core';
 import { ChatClientService } from '../chat-client.service';
-import { Observable } from 'rxjs';
+import { Observable, Subject } from 'rxjs';
 import { UserResponse } from 'stream-chat';
 import { AttachmentService } from '../attachment.service';
 import { ChannelService } from '../channel.service';
@@ -8,6 +8,7 @@ import { NotificationService } from '../notification.service';
 import { AttachmentUpload, CommandAutocompleteListItemContext, MentionAutcompleteListItemContext, StreamMessage } from '../types';
 import { MessageInputConfigService } from './message-input-config.service';
 import { TextareaInterface } from './textarea.interface';
+import { EmojiInputService } from './emoji-input.service';
 import * as i0 from "@angular/core";
 export declare class MessageInputComponent implements OnChanges, OnDestroy, AfterViewInit {
     private channelService;
@@ -18,11 +19,13 @@ export declare class MessageInputComponent implements OnChanges, OnDestroy, Afte
     private componentFactoryResolver;
     private cdRef;
     private chatClient;
+    emojiInputService: EmojiInputService;
     isFileUploadEnabled: boolean | undefined;
     areMentionsEnabled: boolean | undefined;
     mentionScope: 'channel' | 'application' | undefined;
     mentionAutocompleteItemTemplate: TemplateRef<MentionAutcompleteListItemContext> | undefined;
     commandAutocompleteItemTemplate: TemplateRef<CommandAutocompleteListItemContext> | undefined;
+    emojiPickerTemplate: TemplateRef<void> | undefined;
     mode: 'thread' | 'main';
     /**
      * @deprecated https://getstream.io/chat/docs/sdk/angular/components/message-input/#caution-acceptedfiletypes
@@ -39,6 +42,7 @@ export declare class MessageInputComponent implements OnChanges, OnDestroy, Afte
     textareaRef: ComponentRef<TextareaInterface> | undefined;
     mentionedUsers: UserResponse[];
     quotedMessage: undefined | StreamMessage;
+    typingStart$: Subject<void>;
     private fileInput;
     private textareaAnchor;
     private subscriptions;
@@ -46,7 +50,7 @@ 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);
+    constructor(channelService: ChannelService, notificationService: NotificationService, attachmentService: AttachmentService, configService: MessageInputConfigService, textareaType: Type<TextareaInterface>, componentFactoryResolver: ComponentFactoryResolver, cdRef: ChangeDetectorRef, chatClient: ChatClientService, emojiInputService: EmojiInputService);
     ngAfterViewInit(): void;
     ngOnChanges(changes: SimpleChanges): void;
     ngOnDestroy(): void;
@@ -61,6 +65,7 @@ export declare class MessageInputComponent implements OnChanges, OnDestroy, Afte
     private initTextarea;
     private areAttachemntsValid;
     private setCanSendMessages;
+    private get parentMessageId();
     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"; "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"; "mentionAutocompleteItemTemplate": "mentionAutocompleteItemTemplate"; "commandAutocompleteItemTemplate": "commandAutocompleteItemTemplate"; "emojiPickerTemplate": "emojiPickerTemplate"; "mode": "mode"; "acceptedFileTypes": "acceptedFileTypes"; "isMultipleFileUploadEnabled": "isMultipleFileUploadEnabled"; "message": "message"; }, { "messageUpdate": "messageUpdate"; }, never, never>;
 }

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

@@ -1,14 +1,18 @@
-import { EventEmitter, OnChanges } from '@angular/core';
+import { EventEmitter, OnChanges, OnDestroy } from '@angular/core';
+import { EmojiInputService } from '../emoji-input.service';
 import { TextareaInterface } from '../textarea.interface';
 import * as i0 from "@angular/core";
-export declare class TextareaComponent implements TextareaInterface, OnChanges {
+export declare class TextareaComponent implements TextareaInterface, OnChanges, OnDestroy {
+    private emojiInputService;
     class: string;
     value: string;
     readonly valueChange: EventEmitter<string>;
     readonly send: EventEmitter<void>;
     private messageInput;
-    constructor();
+    private subscriptions;
+    constructor(emojiInputService: EmojiInputService);
     ngOnChanges(): void;
+    ngOnDestroy(): void;
     inputChanged(): void;
     sent(event: Event): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<TextareaComponent, never>;

package/lib/message-list/image-load.service.d.ts

@@ -1,6 +1,12 @@
 import { Subject } from 'rxjs';
 import * as i0 from "@angular/core";
+/**
+ * The `ImageLoadService` is used to position the scrollbar in the message list
+ */
 export declare class ImageLoadService {
+    /**
+     * A subject that can be used to notify the message list if an image attachment finished loading
+     */
     imageLoad$: Subject<void>;
     constructor();
     static ɵfac: i0.ɵɵFactoryDeclaration<ImageLoadService, never>;

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

@@ -1,10 +1,11 @@
 import { AfterViewChecked, OnChanges, OnDestroy, OnInit, SimpleChanges, TemplateRef } from '@angular/core';
 import { ChannelService } from '../channel.service';
 import { Observable } from 'rxjs';
-import { StreamMessage } from '../types';
+import { DefaultUserType, StreamMessage } 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 * as i0 from "@angular/core";
 export declare class MessageListComponent implements AfterViewChecked, OnChanges, OnInit, OnDestroy {
     private channelService;
@@ -13,6 +14,9 @@ export declare class MessageListComponent implements AfterViewChecked, OnChanges
     messageTemplate: TemplateRef<any> | undefined;
     messageInputTemplate: TemplateRef<any> | undefined;
     mentionTemplate: TemplateRef<any> | undefined;
+    typingIndicatorTemplate: TemplateRef<{
+        usersTyping$: Observable<UserResponse<DefaultUserType>[]>;
+    }> | undefined;
     /**
      * @deprecated https://getstream.io/chat/docs/sdk/angular/components/message_list/#caution-arereactionsenabled-deprecated
      */
@@ -44,12 +48,16 @@ export declare class MessageListComponent implements AfterViewChecked, OnChanges
     private readonly isUserScrolledUpThreshold;
     private subscriptions;
     private prevScrollTop;
+    private usersTypingInChannel$;
+    private usersTypingInThread$;
     constructor(channelService: ChannelService, chatClientService: ChatClientService, imageLoadService: ImageLoadService);
     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;
     private preserveScrollbarPosition;
@@ -57,5 +65,5 @@ export declare class MessageListComponent implements AfterViewChecked, OnChanges
     private setMessages$;
     private resetScrollState;
     static ɵfac: i0.ɵɵFactoryDeclaration<MessageListComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MessageListComponent, "stream-message-list", never, { "messageTemplate": "messageTemplate"; "messageInputTemplate": "messageInputTemplate"; "mentionTemplate": "mentionTemplate"; "areReactionsEnabled": "areReactionsEnabled"; "enabledMessageActionsInput": "enabledMessageActions"; "mode": "mode"; }, {}, never, 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>;
 }