stream-chat-angular 5.9.1 → 5.10.0

package/fesm2020/stream-chat-angular.mjs

@@ -17,13 +17,13 @@ import { NgxFloatUiModule } from 'ngx-float-ui';
 import prettybytes from 'pretty-bytes';
 import fixWebmDuration from 'fix-webm-duration';
 import transliterate from '@stream-io/transliterate';
-import * as i7$1 from 'angular-mentions';
+import * as i8 from 'angular-mentions';
 import { MentionModule } from 'angular-mentions';
 
-const version = '5.9.1';
+const version = '5.10.0';
 
 /**
- * The `NotificationService` can be used to add or remove notifications. By default the [`NotificationList`](../components/NotificationListComponent.mdx) component displays the currently active notifications.
+ * The `NotificationService` can be used to add or remove notifications. By default the [`NotificationList`](/chat/docs/sdk/angular/components/NotificationListComponent/) component displays the currently active notifications.
  */
 class NotificationService {
     constructor() {
@@ -196,7 +196,7 @@ class ChatClientService {
         return result;
     }
     /**
-     * Disconnects the current user, and closes the WebSocket connection. Useful when disconnecting a chat user, use in combination with [`reset`](./ChannelService.mdx/#reset).
+     * Disconnects the current user, and closes the WebSocket connection. Useful when disconnecting a chat user, use in combination with [`reset`](/chat/docs/sdk/angular/services/ChannelService/#reset/).
      */
     async disconnectUser() {
         this.pendingInvitesSubject.next([]);
@@ -780,7 +780,7 @@ class ChannelService {
         return this._init(options);
     }
     /**
-     * Resets the `activeChannel$`, `channels$` and `activeChannelMessages$` Observables. Useful when disconnecting a chat user, use in combination with [`disconnectUser`](./ChatClientService.mdx/#disconnectuser).
+     * Resets the `activeChannel$`, `channels$` and `activeChannelMessages$` Observables. Useful when disconnecting a chat user, use in combination with [`disconnectUser`](/chat/docs/sdk/angular/services/ChatClientService/#disconnectuser/).
      */
     reset() {
         this.deselectActiveChannel();
@@ -922,7 +922,7 @@ class ChannelService {
     }
     /**
      * 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))
+     * @param uploads the attachments to upload (output of the [`AttachmentService`](/chat/docs/sdk/angular/services/AttachmentService/))
      * @returns the result of file upload requests
      */
     async uploadAttachments(uploads) {
@@ -990,7 +990,7 @@ class ChannelService {
     }
     /**
      * 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))
+     * @param attachmentUpload Attachment to be deleted (output of the [`AttachmentService`](/chat/docs/sdk/angular/services/AttachmentService/))
      */
     async deleteAttachment(attachmentUpload) {
         const channel = this.activeChannelSubject.getValue();
@@ -1966,7 +1966,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
         }], ctorParameters: function () { return [{ type: ChatClientService }, { type: i0.NgZone }, { type: NotificationService }]; } });
 
 /**
- * The `ThemeService` can be used to change the theme of the chat UI and to customize the theme. Our [theming guide](../theming/introduction.mdx) gives a complete overview about the topic.
+ * The `ThemeService` can be used to change the theme of the chat UI and to customize the theme. Our [theming guide](/chat/docs/sdk/angular/theming/themingv2/) gives a complete overview about the topic.
  */
 class ThemeService {
     constructor() {
@@ -2089,7 +2089,7 @@ class AttachmentService {
         /**
          * You can get and set the list if uploaded custom attachments
          *
-         * By default the SDK components won't display these, but you can provide your own `customAttachmentPreviewListTemplate$` and `customAttachmentListTemplate$` for the [`CustomTemplatesService`](../../services/CustomTemplatesService).
+         * By default the SDK components won't display these, but you can provide your own `customAttachmentPreviewListTemplate$` and `customAttachmentListTemplate$` for the [`CustomTemplatesService`](/chat/docs/sdk/angular/services/CustomTemplatesService/).
          */
         this.customAttachments$ = new BehaviorSubject([]);
         /**
@@ -2219,7 +2219,7 @@ class AttachmentService {
     /**
      * You can add custom `image`, `video` and `file` attachments using this method.
      *
-     * Note: If you just want to use your own CDN for file uploads, you don't necessary need this method, you can just specify you own upload function in the [`ChannelService`](./ChannelService.mdx)
+     * Note: If you just want to use your own CDN for file uploads, you don't necessary need this method, you can just specify you own upload function in the [`ChannelService`](/chat/docs/sdk/angular/services/ChannelService/)
      * @param attachment
      */
     addAttachment(attachment) {
@@ -2835,7 +2835,7 @@ const en = {
 };
 
 /**
- * The `StreamI18nService` can be used to customize the labels of the chat UI. Our [translation guide](../concepts/translation.mdx) covers this topic in detail.
+ * The `StreamI18nService` can be used to customize the labels of the chat UI. Our [translation guide](/chat/docs/sdk/angular/concepts/translation/) covers this topic in detail.
  */
 class StreamI18nService {
     constructor(translteService) {
@@ -3027,183 +3027,183 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
 class CustomTemplatesService {
     constructor() {
         /**
-         * The autocomplete list item template for mentioning users (used in the [`AutocompleteTextareaComponent`](../components/AutocompleteTextareaComponent.mdx))
+         * The autocomplete list item template for mentioning users (used in the [`AutocompleteTextareaComponent`](/chat/docs/sdk/angular/components/AutocompleteTextareaComponent/))
          */
         this.mentionAutocompleteItemTemplate$ = new BehaviorSubject(undefined);
         /**
-         * The autocomplete list item template for commands (used in the [`AutocompleteTextareaComponent`](../components/AutocompleteTextareaComponent.mdx))
+         * The autocomplete list item template for commands (used in the [`AutocompleteTextareaComponent`](/chat/docs/sdk/angular/components/AutocompleteTextareaComponent/))
          */
         this.commandAutocompleteItemTemplate$ = new BehaviorSubject(undefined);
         /**
-         * Template used to display an item in the [channel list](../components/ChannelListComponent.mdx) (instead of the default [channal list item](../components/ChannelPreviewComponent.mdx))
+         * Template used to display an item in the [channel list](/chat/docs/sdk/angular/components/ChannelListComponent/) (instead of the default [channal list item](/chat/docs/sdk/angular/components/ChannelPreviewComponent/))
          *
          */
         this.channelPreviewTemplate$ = new BehaviorSubject(undefined);
         /**
-         * The template used for displaying a [mention inside a message](../code-examples/mention-actions.mdx)
+         * The template used for displaying a [mention inside a message](/chat/docs/sdk/angular/code-examples/mention-actions/)
          *
          */
         this.mentionTemplate$ = new BehaviorSubject(undefined);
         /**
-         * The template for [emoji picker](../code-examples/emoji-picker.mdx)
+         * The template for [emoji picker](/chat/docs/sdk/angular/code-examples/emoji-picker)
          *
          */
         this.emojiPickerTemplate$ = new BehaviorSubject(undefined);
         /**
-         * The typing indicator template used in the [message list](../components/MessageListComponent.mdx)
+         * The typing indicator template used in the [message list](/chat/docs/sdk/angular/components/MessageListComponent/)
          *
          */
         this.typingIndicatorTemplate$ = new BehaviorSubject(undefined);
         /**
-         * The template used to display a message in the [message list](../components/MessageListComponent.mdx) (instead of the [default message component](../components/MessageComponent.mdx))
+         * The template used to display a message in the [message list](/chat/docs/sdk/angular/components/MessageListComponent/) (instead of the [default message component](/chat/docs/sdk/angular/components/MessageComponent/))
          *
          */
         this.messageTemplate$ = new BehaviorSubject(undefined);
         /**
-         * The template for channel actions displayed in the [channel header](../components/ChannelHeaderComponent.mdx) (by default no channel action is displayed)
+         * The template for channel actions displayed in the [channel header](/chat/docs/sdk/angular/components/ChannelHeaderComponent/) (by default no channel action is displayed)
          *
          */
         this.channelActionsTemplate$ = new BehaviorSubject(undefined);
         /**
-         * The template used to display attachments of a [message](../components/MessageComponent.mdx) (instead of the [default attachment list](../components/AttachmentListComponent.mdx))
+         * The template used to display attachments of a [message](/chat/docs/sdk/angular/components/MessageComponent/) (instead of the [default attachment list](/chat/docs/sdk/angular/components/AttachmentListComponent/))
          *
          */
         this.attachmentListTemplate$ = new BehaviorSubject(undefined);
         /**
-         * The template used to display attachments in the [message input](../components/MessageInputComponent.mdx) component (instead of the [default attachment preview](../components/AttachmentPreviewListComponent.mdx))
+         * The template used to display attachments in the [message input](/chat/docs/sdk/angular/components/MessageInputComponent) component (instead of the [default attachment preview](/chat/docs/sdk/angular/components/AttachmentPreviewListComponent))
          *
          */
         this.attachmentPreviewListTemplate$ = new BehaviorSubject(undefined);
         /**
-         * The template used to display avatars for channels and users (instead of the [default avatar](../components/AvatarComponent.mdx))
+         * The template used to display avatars for channels and users (instead of the [default avatar](/chat/docs/sdk/angular/components/AvatarComponent/))
          *
          */
         this.avatarTemplate$ = new BehaviorSubject(undefined);
         /**
-         * Template for displaying icons (instead of the [default icon component](../components/IconComponent.mdx))
+         * Template for displaying icons (instead of the [default icon component](/chat/docs/sdk/angular/components/IconComponent/))
          *
          */
         this.iconTemplate$ = new BehaviorSubject(undefined);
         /**
-         * Template for displaying the loading indicator (instead of the [default loading indicator](../components/LoadingIndicatorComponent.mdx))
+         * Template for displaying the loading indicator (instead of the [default loading indicator](/chat/docs/sdk/angular/components/LoadingIndicatorComponent/))
          *
          */
         this.loadingIndicatorTemplate$ = new BehaviorSubject(undefined);
         /**
-         * Template for displaying the message actions box (instead of the [default message actions box](../components/MessageActionsBoxComponent.mdx))
+         * Template for displaying the message actions box (instead of the [default message actions box](/chat/docs/sdk/angular/components/MessageActionsBoxComponent/))
          *
          */
         this.messageActionsBoxTemplate$ = new BehaviorSubject(undefined);
         /**
-         * The template used for displaying an item in the [message actions box](../components/MessageActionsBoxComponent.mdx)
+         * The template used for displaying an item in the [message actions box](/chat/docs/sdk/angular/components/MessageActionsBoxComponent/)
          *
          */
         this.messageActionsBoxItemTemplate$ = new BehaviorSubject(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))
+         * The template used to display the reactions of a [message](/chat/docs/sdk/angular/components/MessageComponent/), and the selector to add a reaction to a message (instead of the [default message reactions component](/chat/docs/sdk/angular/components/MessageReactionsComponent/))
          *
          */
         this.messageReactionsTemplate$ = new BehaviorSubject(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))
+         * The template used to display the reactions of a [message](/chat/docs/sdk/angular/components/MessageComponent/), and the selector to add a reaction to a message (instead of the [default message reactions component](/chat/docs/sdk/angular/components/MessageReactionsComponent/))
          *
          */
         this.messageReactionsSelectorTemplate$ = new BehaviorSubject(undefined);
         /**
-         * The template used to display a modal window (instead of the [default modal](../components/ModalComponent.mdx))
+         * The template used to display a modal window (instead of the [default modal](/chat/docs/sdk/angular/components/ModalComponent/))
          *
          */
         this.modalTemplate$ = new BehaviorSubject(undefined);
         /**
-         * The template used to override the [default notification component](../components/NotificationComponent.mdx)
+         * The template used to override the [default notification component](/chat/docs/sdk/angular/components/NotificationComponent/)
          *
          */
         this.notificationTemplate$ = new BehaviorSubject(undefined);
         /**
-         * The template used for header of a [thread](../components/ThreadComponent.mdx)
+         * The template used for header of a [thread](/chat/docs/sdk/angular/components/ThreadComponent/)
          *
          */
         this.threadHeaderTemplate$ = new BehaviorSubject(undefined);
         /**
-         * The template used for displaying the delivered state of the message inside the [message component](../components/MessageComponent.mdx)
+         * The template used for displaying the delivered state of the message inside the [message component](/chat/docs/sdk/angular/components/MessageComponent/)
          *
          * Displayed for the last message sent by the current user, if the message isn't yet read by anyone
          *
          */
         this.deliveredStatusTemplate$ = new BehaviorSubject(undefined);
         /**
-         * The template used for displaying the sending state of the message inside the [message component](../components/MessageComponent.mdx)
+         * The template used for displaying the sending state of the message inside the [message component](/chat/docs/sdk/angular/components/MessageComponent/)
          *
          * Displayed for the last message sent by the current user, if the message is currently being sent
          *
          */
         this.sendingStatusTemplate$ = new BehaviorSubject(undefined);
         /**
-         * The template used for displaying the sent state of the message inside the [message component](../components/MessageComponent.mdx)
+         * The template used for displaying the sent state of the message inside the [message component](/chat/docs/sdk/angular/components/MessageComponent/)
          *
          * Displayed for the last message sent by the current user, if the message is read at least by one user
          *
          */
         this.readStatusTemplate$ = new BehaviorSubject(undefined);
         /**
-         * Template to display custom metadata inside [message component](../components/MessageComponent.mdx)
+         * Template to display custom metadata inside [message component](/chat/docs/sdk/angular/components/MessageComponent/)
          *
          */
         this.customMessageMetadataTemplate$ = new BehaviorSubject(undefined);
         /**
-         * The template used to display additional information about a channel under the channel name inside the [channel header component](../components/ChannelHeaderComponent.mdx)
+         * The template used to display additional information about a channel under the channel name inside the [channel header component](/chat/docs/sdk/angular/components/ChannelHeaderComponent/)
          *
          */
         this.channelHeaderInfoTemplate$ = new BehaviorSubject(undefined);
         /**
-         * The template used for displaying file upload/attachment selector inside the [message input](../components/MessageInputComponent.mdx)
+         * The template used for displaying file upload/attachment selector inside the [message input](/chat/docs/sdk/angular/components/MessageInputComponent/)
          *
          */
         this.customAttachmentUploadTemplate$ = new BehaviorSubject(undefined);
         /**
-         * The template that can be used to override how a single image attachment is displayed inside the [attachment list](../components/AttachmentListComponent.mdx)
+         * The template that can be used to override how a single image attachment is displayed inside the [attachment list](/chat/docs/sdk/angular/components/AttachmentListComponent/)
          */
         this.imageAttachmentTemplate$ = new BehaviorSubject(undefined);
         /**
-         * The template that can be used to override how a voice recording attachment is displayed inside the [attachment list](../components/AttachmentListComponent.mdx), by default the [voice recording component](../components/VoiceRecordingComponent.mdx) is used
+         * The template that can be used to override how a voice recording attachment is displayed inside the [attachment list](/chat/docs/sdk/angular/components/AttachmentListComponent/), by default the [voice recording component](/chat/docs/sdk/angular/components/VoiceRecordingComponent/) is used
          */
         this.voiceRecordingAttachmentTemplate$ = new BehaviorSubject(undefined);
         /**
-         * The template that can be used to override how a video attachment is displayed inside the [attachment list](../components/AttachmentListComponent.mdx)
+         * The template that can be used to override how a video attachment is displayed inside the [attachment list](/chat/docs/sdk/angular/components/AttachmentListComponent/)
          */
         this.videoAttachmentTemplate$ = new BehaviorSubject(undefined);
         /**
-         * The template that can be used to override how image gallery is displayed inside the [attachment list](../components/AttachmentListComponent.mdx)
+         * The template that can be used to override how image gallery is displayed inside the [attachment list](/chat/docs/sdk/angular/components/AttachmentListComponent/)
          */
         this.galleryAttachmentTemplate$ = new BehaviorSubject(undefined);
         /**
-         * The template that can be used to override how a file attachment is displayed inside the [attachment list](../components/AttachmentListComponent.mdx)
+         * The template that can be used to override how a file attachment is displayed inside the [attachment list](/chat/docs/sdk/angular/components/AttachmentListComponent/)
          */
         this.fileAttachmentTemplate$ = new BehaviorSubject(undefined);
         /**
-         * The template that can be used to override how a card attachment is displayed inside the [attachment list](../components/AttachmentListComponent.mdx)
+         * The template that can be used to override how a card attachment is displayed inside the [attachment list](/chat/docs/sdk/angular/components/AttachmentListComponent/)
          */
         this.cardAttachmentTemplate$ = new BehaviorSubject(undefined);
         /**
-         * The template that can be used to override how attachment actions are displayed inside the [attachment list](../components/AttachmentListComponent.mdx)
+         * The template that can be used to override how attachment actions are displayed inside the [attachment list](/chat/docs/sdk/angular/components/AttachmentListComponent/)
          */
         this.attachmentActionsTemplate$ = new BehaviorSubject(undefined);
         /**
-         * The template used to display [system messages](https://getstream.io/chat/docs/javascript/silent_messages/?language=javascript&q=system) indise the [message component](../components/MessageComponent.mdx)
+         * The template used to display [system messages](https://getstream.io/chat/docs/javascript/silent_messages/?language=javascript&q=system) indise the [message component](/chat/docs/sdk/angular/components/MessageComponent/)
          */
         this.systemMessageTemplate$ = new BehaviorSubject(undefined);
         /**
-         * The template used to display the date separator inside the [message list](../components/MessageListComponent.mdx)
+         * The template used to display the date separator inside the [message list](/chat/docs/sdk/angular/components/MessageListComponent/)
          */
         this.dateSeparatorTemplate$ = new BehaviorSubject(undefined);
         /**
-         * The template used to display unread messages indicator inside the [message list](../components/MessageListComponent.mdx) when the channel is opened
+         * The template used to display unread messages indicator inside the [message list](/chat/docs/sdk/angular/components/MessageListComponent/) when the channel is opened
          *
          * This UI element is used to separate unread messages from read messages
          */
         this.newMessagesIndicatorTemplate$ = new BehaviorSubject(undefined);
         /**
-         * The template used to display unread messages notification inside the [message list](../components/MessageListComponent.mdx) when the channel is opened
+         * The template used to display unread messages notification inside the [message list](/chat/docs/sdk/angular/components/MessageListComponent/) when the channel is opened
          *
          * Users can use this notification to jump to the first unread message when it's clicked
          */
@@ -3217,28 +3217,28 @@ class CustomTemplatesService {
          */
         this.emptyThreadMessageListPlaceholder$ = new BehaviorSubject(undefined);
         /**
-         * The template used to display the [message bounce prompt](../components/MessageBouncePromptComponent.mdx)
+         * The template used to display the [message bounce prompt](/chat/docs/sdk/angular/components/MessageBouncePromptComponent/)
          */
         this.messageBouncePromptTemplate$ = new BehaviorSubject(undefined);
         /**
-         * Template used to display the channel information inside the [channel list item](../components/ChannelPreviewComponent.mdx)
+         * Template used to display the channel information inside the [channel list item](/chat/docs/sdk/angular/components/ChannelPreviewComponent/)
          *
          */
         this.channelPreviewInfoTemplate$ = new BehaviorSubject(undefined);
         /**
-         * The template used to display custom attachment previews in the [message input component](../../components/MessageInputComponent.mdx)
+         * The template used to display custom attachment previews in the [message input component](/chat/docs/sdk/angular/components/MessageInputComponent/)
          */
         this.customAttachmentPreviewListTemplate$ = new BehaviorSubject(undefined);
         /**
-         * The template used to display custom attachments in the [message component](../../components/MessageComponent.mdx)
+         * The template used to display custom attachments in the [message component](/chat/docs/sdk/angular/components/MessageComponent/)
          */
         this.customAttachmentListTemplate$ = new BehaviorSubject(undefined);
         /**
-         * The template used to display the number of thread replies inside the [message component](../../components/MessageComponent.mdx)
+         * The template used to display the number of thread replies inside the [message component](/chat/docs/sdk/angular/components/MessageComponent/)
          */
         this.threadLinkButton$ = new BehaviorSubject(undefined);
         /**
-         * Template to display custom metadata inside the message bubble of the [message component](../components/MessageComponent.mdx)
+         * Template to display custom metadata inside the message bubble of the [message component](/chat/docs/sdk/angular/components/MessageComponent/)
          *
          * To properly position your template you should override the `grid-template-areas` of the `.str-chat__message-inner` selector
          */
@@ -3255,7 +3255,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
         }], ctorParameters: function () { return []; } });
 
 /**
- * The `AvatarPlaceholder` component displays the [default avatar](./AvatarComponent.mdx) unless a [custom template](../services/CustomTemplatesService.mdx) is provided. This component is used by the SDK internally, you likely won't need to use it.
+ * The `AvatarPlaceholder` component displays the [default avatar](/chat/docs/sdk/angular/components/AvatarComponent/) unless a [custom template](/chat/docs/sdk/angular/services/CustomTemplatesService/) is provided. This component is used by the SDK internally, you likely won't need to use it.
  */
 class AvatarPlaceholderComponent {
     constructor(customTemplatesService) {
@@ -3331,7 +3331,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
             }] } });
 
 /**
- * The `IconPlaceholder` component displays the [default icons](./IconComponent.mdx) unless a [custom template](../services/CustomTemplatesService.mdx) is provided. This component is used by the SDK internally, you likely won't need to use it.
+ * The `IconPlaceholder` component displays the [default icons](/chat/docs/sdk/angular/components/IconComponent/) unless a [custom template](/chat/docs/sdk/angular/services/CustomTemplatesService/) is provided. This component is used by the SDK internally, you likely won't need to use it.
  */
 class IconPlaceholderComponent {
     constructor(customTemplatesService) {
@@ -3367,7 +3367,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
         }], ctorParameters: function () { return []; } });
 
 /**
- * The `LoadingInficatorPlaceholder` component displays the [default loading indicator](./LoadingIndicatorComponent.mdx) unless a [custom template](../services/CustomTemplatesService.mdx) is provided. This component is used by the SDK internally, you likely won't need to use it.
+ * The `LoadingInficatorPlaceholder` component displays the [default loading indicator](/chat/docs/sdk/angular/components/LoadingIndicatorComponent/) unless a [custom template](/chat/docs/sdk/angular/services/CustomTemplatesService/) is provided. This component is used by the SDK internally, you likely won't need to use it.
  */
 class LoadingIndicatorPlaceholderComponent {
     constructor(customTemplatesService) {
@@ -3382,7 +3382,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
         }], ctorParameters: function () { return [{ type: CustomTemplatesService }]; } });
 
 /**
- * The message actions service provides customization options for the [message actions](../../components/MessageActionsBoxComponent)
+ * The message actions service provides customization options for the [message actions](/chat/docs/sdk/angular/components/MessageActionsBoxComponent)
  */
 class MessageActionsService {
     constructor(chatClientService, notificationService, channelService) {
@@ -3569,7 +3569,7 @@ class MessageReactionsService {
         /**
          * The enabled [reactions](https://getstream.io/chat/docs/javascript/send_reaction/?language=javascript) and the associated emoji
          *
-         * You can provide any string as a reaction. The emoji can be provided as a string, if you want to use custom images for reactions you have to provide a [custom reactions UI](../../services/CustomTemplatesService/#messagereactionstemplate)
+         * You can provide any string as a reaction. The emoji can be provided as a string, if you want to use custom images for reactions you have to provide a [custom reactions UI](/chat/docs/sdk/angular/services/CustomTemplatesService/#messagereactionstemplate/)
          */
         this.reactions$ = new BehaviorSubject({
             haha: '😂',
@@ -3624,7 +3624,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
         }], ctorParameters: function () { return [{ type: ChatClientService }, { type: NotificationService }]; } });
 
 /**
- * The `MessageReactionsSelectorComponent` makes it possible for users to react to a message, the reaction options can be set using the [`MessageReactionsService`](../../services/MessageReactionsService). You can read more about [message reactions](https://getstream.io/chat/docs/javascript/send_reaction/?language=javascript) in the platform documentation.
+ * The `MessageReactionsSelectorComponent` makes it possible for users to react to a message, the reaction options can be set using the [`MessageReactionsService`](/chat/docs/sdk/angular/services/MessageReactionsService/). You can read more about [message reactions](https://getstream.io/chat/docs/javascript/send_reaction/?language=javascript) in the platform documentation.
  */
 class MessageReactionsSelectorComponent {
     constructor(channelService, messageReactionsService, cdRef) {
@@ -3632,7 +3632,7 @@ class MessageReactionsSelectorComponent {
         this.messageReactionsService = messageReactionsService;
         this.cdRef = cdRef;
         /**
-         * List of the user's own reactions of a [message](../types/stream-message.mdx), used to display the users of a reaction type.
+         * List of the user's own reactions of a [message](/chat/docs/sdk/angular/types/stream-message/), used to display the users of a reaction type.
          */
         this.ownReactions = [];
         this.reactionOptions = [];
@@ -3680,7 +3680,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
             }] } });
 
 /**
- * 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.
+ * 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](/chat/docs/sdk/angular/concepts/message-interactions/) in the message interaction guide.
  */
 class MessageActionsBoxComponent {
     constructor(customTemplatesService, messageActionsService, cdRef) {
@@ -3692,7 +3692,7 @@ class MessageActionsBoxComponent {
          */
         this.isMine = false;
         /**
-         * 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 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](/chat/docs/sdk/angular/concepts/message-interactions) can be found in our message interaction guide. Unathorized actions won't be displayed on the UI.
          */
         this.enabledActions = [];
         this.visibleMessageActionItems = [];
@@ -3796,7 +3796,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
             }] } });
 
 /**
- * The `Notification` component displays a notification within the [`NotificationList`](./NotificationListComponent.mdx)
+ * The `Notification` component displays a notification within the [`NotificationList`](/chat/docs/sdk/angular/components/NotificationListComponent/)
  */
 class NotificationComponent {
     constructor() { }
@@ -3906,7 +3906,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
             }] } });
 
 /**
- * The component watches for the [`channelService.bouncedMessage$` stream](../../services/ChannelService/#bouncedmessage) and opens the bounce modal if a message is emitted.
+ * The component watches for the [`channelService.bouncedMessage$` stream](/chat/docs/sdk/angular/services/ChannelService/#bouncedmessage) and opens the bounce modal if a message is emitted.
  *
  * To bounce messages, you need to set up [semantic filters for moderation](https://getstream.io/automated-moderation/docs/automod_configuration/?q=semantic%20filters).
  */
@@ -3969,7 +3969,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
             }] } });
 
 /**
- * The `Channel` component is a container component that displays the [`ChannelHeader`](./ChannelHeaderComponent.mdx), [`MessageList`](./MessageListComponent.mdx), [`NotificationList`](./NotificationListComponent.mdx) and [`MessageInput`](./MessageInputComponent.mdx) components. You can also provide the [`Thread`](./ThreadComponent.mdx) component to use message [threads](https://getstream.io/chat/docs/javascript/threads/?language=javascript).
+ * The `Channel` component is a container component that displays the [`ChannelHeader`](/chat/docs/sdk/angular/components/ChannelHeaderComponent/), [`MessageList`](/chat/docs/sdk/angular/components/MessageListComponent), [`NotificationList`](/chat/docs/sdk/angular/components/NotificationListComponent/) and [`MessageInput`](/chat/docs/sdk/angular/components/MessageInputComponent/) components. You can also provide the [`Thread`](/chat/docs/sdk/angular/components/ThreadComponent/) component to use message [threads](https://getstream.io/chat/docs/javascript/threads/?language=javascript).
  */
 class ChannelComponent {
     constructor(channelService, themeService, customTemplatesService) {
@@ -4987,12 +4987,12 @@ class MessageReactionsComponent {
          */
         this.messageReactionCounts = {};
         /**
-         * List of reactions of a [message](../types/stream-message.mdx), used to display the users of a reaction type.
+         * List of reactions of a [message](/chat/docs/sdk/angular/types/stream-message/), used to display the users of a reaction type.
          * @deprecated you can fetch the reactions using [`messageReactionsService.queryReactions()`](https://getstream.io/chat/docs/sdk/angular/services/MessageReactionsService/#queryreactions)
          */
         this.latestReactions = [];
         /**
-         * List of the user's own reactions of a [message](../types/stream-message.mdx), used to display the users of a reaction type.
+         * List of the user's own reactions of a [message](/chat/docs/sdk/angular/types/stream-message/), used to display the users of a reaction type.
          */
         this.ownReactions = [];
         this.isLoading = true;
@@ -5131,7 +5131,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
             }] } });
 
 /**
- * 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).
+ * 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)](/chat/docs/sdk/angular/concepts/message-interactions/).
  */
 class MessageComponent {
     constructor(chatClientService, channelService, customTemplatesService, cdRef, dateParser, messageService, messageActionsService, ngZone, translateService) {
@@ -5145,7 +5145,7 @@ class MessageComponent {
         this.ngZone = ngZone;
         this.translateService = translateService;
         /**
-         * 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).
+         * 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](/chat/docs/sdk/angular/concepts/message-interactions/) can be found in our message interaction guide. Unathorized actions won't be displayed on the UI. The [`MessageList`](/chat/docs/sdk/angular/components/MessageListComponent/) component automatically sets this based on [channel capabilities](https://getstream.io/chat/docs/javascript/channel_capabilities/?language=javascript).
          */
         this.enabledMessageActions = [];
         /**
@@ -5746,12 +5746,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
             }] } });
 
 /**
- * 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)
+ * 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](/chat/docs/sdk/angular/code-examples/emoji-picker/)
  */
 class EmojiInputService {
     constructor() {
         /**
-         * 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)
+         * 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](/chat/docs/sdk/angular/code-examples/emoji-picker/)
          */
         this.emojiInput$ = new Subject();
     }
@@ -5790,7 +5790,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
         }], ctorParameters: function () { return []; } });
 
 /**
- * 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.
+ * The `MessageInputConfigService` is used to keep a consistent configuration among the different [`MessageInput`](/chat/docs/sdk/angular/components/MessageInputComponent/) components if your UI has more than one input component.
  */
 class MessageInputConfigService {
     constructor() {
@@ -5799,7 +5799,7 @@ class MessageInputConfigService {
          */
         this.isFileUploadEnabled = true;
         /**
-         * 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.
+         * If true, users can mention other users in messages. You also [need to use the `AutocompleteTextarea`](/chat/docs/sdk/angular/concepts/opt-in-architecture/) for this feature to work.
          */
         this.areMentionsEnabled = true;
         /**
@@ -5819,6 +5819,12 @@ class MessageInputConfigService {
          * If `false`, the recording will added to the attachment preview, and users can continue composing the message.
          */
         this.sendVoiceRecordingImmediately = true;
+        /**
+         * Add custom autocomplete configurations to the message input
+         *
+         * Only works when using StreamAutocompleteTextareaModule
+         */
+        this.customAutocompletes$ = new BehaviorSubject([]);
     }
 }
 MessageInputConfigService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MessageInputConfigService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
@@ -6395,7 +6401,7 @@ class MessageInputComponent {
          */
         this.autoFocus = true;
         /**
-         * By default the input will react to changes in `messageToEdit$` from [`MessageActionsService`](../services/MessageActionsService.mdx) and display the message to be edited (taking into account the current `mode`).
+         * By default the input will react to changes in `messageToEdit$` from [`MessageActionsService`](/chat/docs/sdk/angular/services/MessageActionsService/) and display the message to be edited (taking into account the current `mode`).
          *
          * If you don't need that behavior, you can turn this of with this flag. In that case you should create your own edit message UI.
          */
@@ -6843,7 +6849,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
             }] } });
 
 /**
- * The `Textarea` component is used by the [`MessageInput`](./MessageInputComponent.mdx) component to display the input HTML element where users can type their message.
+ * The `Textarea` component is used by the [`MessageInput`](/chat/docs/sdk/angular/components/MessageInputComponent/) component to display the input HTML element where users can type their message.
  */
 class TextareaComponent {
     constructor(emojiInputService) {
@@ -6973,16 +6979,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
         }], ctorParameters: function () { return []; } });
 
 /**
- * The `AutocompleteTextarea` component is used by the [`MessageInput`](./MessageInputComponent.mdx) component to display the input HTML element where users can type their message.
+ * The `AutocompleteTextarea` component is used by the [`MessageInput`](/chat/docs/sdk/angular/components/MessageInputComponent/) component to display the input HTML element where users can type their message.
  */
 class AutocompleteTextareaComponent {
-    constructor(channelService, chatClientService, transliterationService, emojiInputService, customTemplatesService, cdRef) {
+    constructor(channelService, chatClientService, transliterationService, emojiInputService, customTemplatesService, cdRef, messageInputConfigService) {
         this.channelService = channelService;
         this.chatClientService = chatClientService;
         this.transliterationService = transliterationService;
         this.emojiInputService = emojiInputService;
         this.customTemplatesService = customTemplatesService;
         this.cdRef = cdRef;
+        this.messageInputConfigService = messageInputConfigService;
         this.class = 'str-chat__textarea str-chat__message-textarea-angular-host';
         /**
          * The value of the input HTML element.
@@ -6993,11 +7000,11 @@ class AutocompleteTextareaComponent {
          */
         this.placeholder = '';
         /**
-         * If true, users can mention other users in messages. You can also set this input on the [`MessageInput`](./MessageInputComponent.mdx/#inputs-and-outputs) component.
+         * If true, users can mention other users in messages. You can also set this input on the [`MessageInput`](/chat/docs/sdk/angular/components/MessageInputComponent/#inputs-and-outputs/) component.
          */
         this.areMentionsEnabled = true;
         /**
-         * 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.
+         * 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`](/chat/docs/sdk/angular/components/MessageInputComponent/#inputs-and-outputs) component.
          */
         this.mentionScope = 'channel';
         /**
@@ -7047,10 +7054,15 @@ class AutocompleteTextareaComponent {
         };
         this.searchTerm$ = new BehaviorSubject('');
         this.isViewInited = false;
-        this.searchTerm$.pipe(debounceTime(300)).subscribe((searchTerm) => {
+        this.searchTerm$
+            .pipe(filter((searchTerm) => searchTerm.length !== 1), debounceTime(300))
+            .subscribe((searchTerm) => {
             if (searchTerm.startsWith(this.mentionTriggerChar)) {
                 void this.updateMentionOptions(searchTerm);
             }
+            else {
+                void this.updateCustomAutocompleteOptions(searchTerm);
+            }
         });
         this.subscriptions.push(this.channelService.activeChannel$.subscribe((channel) => {
             const commands = channel?.getConfig()?.commands || [];
@@ -7062,6 +7074,7 @@ class AutocompleteTextareaComponent {
             this.mentionedUsers = [];
             this.userMentions.next([...this.mentionedUsers]);
             void this.updateMentionOptions(this.searchTerm$.getValue());
+            void this.updateCustomAutocompleteOptions(this.searchTerm$.getValue());
         }));
         this.subscriptions.push(this.emojiInputService.emojiInput$.subscribe((emoji) => {
             this.messageInput.nativeElement.focus();
@@ -7079,20 +7092,43 @@ class AutocompleteTextareaComponent {
             this.userMentionConfig,
             this.slashCommandConfig,
         ];
+        this.subscriptions.push(this.messageInputConfigService.customAutocompletes$.subscribe((customConfigs) => {
+            const builtInItems = this.autocompleteConfig.mentions?.filter((m) => m === this.userMentionConfig || m === this.slashCommandConfig) ?? [];
+            const transformedCustomConfigs = customConfigs.map((c) => {
+                const copy = {
+                    items: c.options.map((o) => ({
+                        ...o,
+                        templateRef: c.templateRef,
+                    })),
+                    triggerChar: c.triggerCharacter,
+                    dropUp: true,
+                    labelKey: this.autocompleteKey,
+                    returnTrigger: true,
+                    allowSpace: c.allowSpace,
+                    mentionFilter: (searchString, items) => this.filter(searchString, items),
+                    mentionSelect: (item, triggerChar) => this.itemSelectedFromAutocompleteList(item, triggerChar),
+                };
+                return copy;
+            });
+            this.autocompleteConfig.mentions = [
+                ...builtInItems,
+                ...transformedCustomConfigs,
+            ];
+            this.autocompleteConfig = { ...this.autocompleteConfig };
+        }));
     }
     ngOnChanges(changes) {
         if (changes.areMentionsEnabled) {
-            if (this.areMentionsEnabled) {
-                this.autocompleteConfig.mentions = [
-                    this.userMentionConfig,
-                    this.slashCommandConfig,
-                ];
-                this.autocompleteConfig = { ...this.autocompleteConfig };
-            }
-            else {
-                this.autocompleteConfig.mentions = [this.slashCommandConfig];
-                this.autocompleteConfig = { ...this.autocompleteConfig };
-            }
+            this.autocompleteConfig.mentions =
+                this.autocompleteConfig?.mentions?.filter((c) => {
+                    if (c !== this.userMentionConfig) {
+                        return true;
+                    }
+                    else {
+                        return this.areMentionsEnabled;
+                    }
+                }) ?? [];
+            this.autocompleteConfig = { ...this.autocompleteConfig };
         }
         if (changes.mentionScope) {
             void this.updateMentionOptions(this.searchTerm$.getValue());
@@ -7133,12 +7169,15 @@ class AutocompleteTextareaComponent {
         return triggerChar + item.autocompleteLabel + ' ';
     }
     autcompleteSearchTermChanged(searchTerm) {
-        if (searchTerm === this.mentionTriggerChar) {
-            void this.updateMentionOptions();
-        }
-        else {
-            this.searchTerm$.next(searchTerm);
+        if (searchTerm.length === 1) {
+            if (searchTerm === this.mentionTriggerChar) {
+                void this.updateMentionOptions();
+            }
+            else {
+                void this.updateCustomAutocompleteOptions(searchTerm);
+            }
         }
+        this.searchTerm$.next(searchTerm);
     }
     inputChanged() {
         this.chatClientService?.chatClient?.logger?.('info', '[Autocomplete textarea] Input changed');
@@ -7187,8 +7226,7 @@ class AutocompleteTextareaComponent {
         }));
         this.userMentionConfig.items = items;
         this.autocompleteConfig.mentions = [
-            this.userMentionConfig,
-            this.slashCommandConfig,
+            ...(this.autocompleteConfig?.mentions ?? []),
         ];
         this.autocompleteConfig = { ...this.autocompleteConfig };
         this.cdRef.detectChanges();
@@ -7206,13 +7244,33 @@ class AutocompleteTextareaComponent {
             this.mentionedUsers = updatedMentionedUsers;
         }
     }
+    async updateCustomAutocompleteOptions(searchTerm) {
+        if (this.messageInputConfigService.customAutocompletes$.getValue().length ===
+            0) {
+            return;
+        }
+        const customMentionConfig = this.autocompleteConfig.mentions?.find((c) => c.triggerChar && searchTerm.startsWith(c.triggerChar));
+        const customAutocompleteConfig = customMentionConfig
+            ? this.messageInputConfigService.customAutocompletes$
+                .getValue()
+                .find((c) => c.triggerCharacter === customMentionConfig?.triggerChar)
+            : undefined;
+        if (customMentionConfig && customAutocompleteConfig?.updateOptions) {
+            const newOptions = await customAutocompleteConfig.updateOptions(searchTerm.replace(customMentionConfig.triggerChar || '', ''));
+            customMentionConfig.items = newOptions.map((o) => ({
+                ...o,
+                templateRef: customAutocompleteConfig.templateRef,
+            }));
+            this.autocompleteConfig = { ...this.autocompleteConfig };
+        }
+    }
 }
-AutocompleteTextareaComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: AutocompleteTextareaComponent, deps: [{ token: ChannelService }, { token: ChatClientService }, { token: TransliterationService }, { token: EmojiInputService }, { token: CustomTemplatesService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AutocompleteTextareaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: AutocompleteTextareaComponent, selector: "stream-autocomplete-textarea", inputs: { value: "value", placeholder: "placeholder", areMentionsEnabled: "areMentionsEnabled", inputMode: "inputMode", mentionScope: "mentionScope", autoFocus: "autoFocus" }, outputs: { valueChange: "valueChange", send: "send", userMentions: "userMentions", pasteFromClipboard: "pasteFromClipboard" }, host: { properties: { "class": "this.class" } }, viewQueries: [{ propertyName: "messageInput", first: true, predicate: ["input"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<textarea\n  #input\n  data-testid=\"textarea\"\n  class=\"rta__textarea str-chat__textarea__textarea str-chat__angular-textarea str-chat__message-textarea\"\n  rows=\"1\"\n  [value]=\"value || ''\"\n  [autofocus]=\"autoFocus\"\n  placeholder=\"{{ placeholder | translate }}\"\n  [mentionConfig]=\"autocompleteConfig\"\n  [mentionListTemplate]=\"autocompleteItem\"\n  (input)=\"inputChanged()\"\n  (keydown.enter)=\"enterHit($event)\"\n  (searchTerm)=\"autcompleteSearchTermChanged($event)\"\n  (blur)=\"inputLeft()\"\n  (paste)=\"pasteFromClipboard.emit($event)\"\n></textarea>\n<ng-template #autocompleteItem let-item=\"item\">\n  <div class=\"rta rta__item str-chat__emojisearch__item\" [ngSwitch]=\"item.type\">\n    <div *ngSwitchCase=\"'mention'\" class=\"rta__entity\">\n      <ng-container\n        *ngTemplateOutlet=\"\n          mentionAutocompleteItemTemplate || defaultMentionTemplate;\n          context: { item: item }\n        \"\n      ></ng-container>\n    </div>\n    <div *ngSwitchCase=\"'command'\" class=\"rta__entity\">\n      <ng-container\n        *ngTemplateOutlet=\"\n          commandAutocompleteItemTemplate || defaultCommandTemplate;\n          context: { item: item }\n        \"\n      ></ng-container>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #defaultCommandTemplate let-item=\"item\">\n  <div class=\"str-chat__slash-command\">\n    <span class=\"str-chat__slash-command-header\">\n      <strong\n        class=\"str-chat__slash-command-name\"\n        data-testclass=\"command-name\"\n        >{{ item.name }}</strong\n      >\n      <span class=\"str-chat__slash-command-args\"\n        >/{{ item.name }} {{ item.args }}</span\n      >\n    </span>\n    <br />\n  </div>\n</ng-template>\n\n<ng-template #defaultMentionTemplate let-item=\"item\">\n  <div class=\"str-chat__user-item\">\n    <stream-avatar-placeholder\n      data-testclass=\"avatar\"\n      class=\"str-chat__avatar str-chat__avatar--circle\"\n      type=\"user\"\n      location=\"autocomplete-item\"\n      [imageUrl]=\"item.image || item.user?.image\"\n      [name]=\"item.autocompleteLabel\"\n      [user]=\"item.user || item\"\n    ></stream-avatar-placeholder>\n    <span data-testclass=\"username\" class=\"str-chat__user-item--name\">{{\n      item.autocompleteLabel\n    }}</span>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i7$1.MentionDirective, selector: "[mention], [mentionConfig]", inputs: ["mentionConfig", "mention", "mentionListTemplate"], outputs: ["searchTerm", "itemSelected", "opened", "closed"] }, { kind: "component", type: AvatarPlaceholderComponent, selector: "stream-avatar-placeholder", inputs: ["name", "imageUrl", "location", "channel", "user", "type", "initialsType", "showOnlineIndicator"] }, { kind: "pipe", type: i7.TranslatePipe, name: "translate" }] });
+AutocompleteTextareaComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: AutocompleteTextareaComponent, deps: [{ token: ChannelService }, { token: ChatClientService }, { token: TransliterationService }, { token: EmojiInputService }, { token: CustomTemplatesService }, { token: i0.ChangeDetectorRef }, { token: MessageInputConfigService }], target: i0.ɵɵFactoryTarget.Component });
+AutocompleteTextareaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: AutocompleteTextareaComponent, selector: "stream-autocomplete-textarea", inputs: { value: "value", placeholder: "placeholder", areMentionsEnabled: "areMentionsEnabled", inputMode: "inputMode", mentionScope: "mentionScope", autoFocus: "autoFocus" }, outputs: { valueChange: "valueChange", send: "send", userMentions: "userMentions", pasteFromClipboard: "pasteFromClipboard" }, host: { properties: { "class": "this.class" } }, viewQueries: [{ propertyName: "messageInput", first: true, predicate: ["input"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<textarea\n  #input\n  data-testid=\"textarea\"\n  class=\"rta__textarea str-chat__textarea__textarea str-chat__angular-textarea str-chat__message-textarea\"\n  rows=\"1\"\n  [value]=\"value || ''\"\n  [autofocus]=\"autoFocus\"\n  placeholder=\"{{ placeholder | translate }}\"\n  [mentionConfig]=\"autocompleteConfig\"\n  [mentionListTemplate]=\"autocompleteItem\"\n  (input)=\"inputChanged()\"\n  (keydown.enter)=\"enterHit($event)\"\n  (searchTerm)=\"autcompleteSearchTermChanged($event)\"\n  (blur)=\"inputLeft()\"\n  (paste)=\"pasteFromClipboard.emit($event)\"\n></textarea>\n<ng-template #autocompleteItem let-item=\"item\">\n  <ng-container *ngIf=\"item.templateRef; else builtinItem\">\n    <ng-container\n      *ngTemplateOutlet=\"item.templateRef; context: { item: item }\"\n    ></ng-container>\n  </ng-container>\n  <ng-template #builtinItem>\n    <div\n      class=\"rta rta__item str-chat__emojisearch__item\"\n      [ngSwitch]=\"item.type\"\n    >\n      <div *ngSwitchCase=\"'mention'\" class=\"rta__entity\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            mentionAutocompleteItemTemplate || defaultMentionTemplate;\n            context: { item: item }\n          \"\n        ></ng-container>\n      </div>\n      <div *ngSwitchCase=\"'command'\" class=\"rta__entity\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            commandAutocompleteItemTemplate || defaultCommandTemplate;\n            context: { item: item }\n          \"\n        ></ng-container>\n      </div>\n    </div>\n  </ng-template>\n</ng-template>\n\n<ng-template #defaultCommandTemplate let-item=\"item\">\n  <div class=\"str-chat__slash-command\">\n    <span class=\"str-chat__slash-command-header\">\n      <strong\n        class=\"str-chat__slash-command-name\"\n        data-testclass=\"command-name\"\n        >{{ item.name }}</strong\n      >\n      <span class=\"str-chat__slash-command-args\"\n        >/{{ item.name }} {{ item.args }}</span\n      >\n    </span>\n    <br />\n  </div>\n</ng-template>\n\n<ng-template #defaultMentionTemplate let-item=\"item\">\n  <div class=\"str-chat__user-item\">\n    <stream-avatar-placeholder\n      data-testclass=\"avatar\"\n      class=\"str-chat__avatar str-chat__avatar--circle\"\n      type=\"user\"\n      location=\"autocomplete-item\"\n      [imageUrl]=\"item.image || item.user?.image\"\n      [name]=\"item.autocompleteLabel\"\n      [user]=\"item.user || item\"\n    ></stream-avatar-placeholder>\n    <span data-testclass=\"username\" class=\"str-chat__user-item--name\">{{\n      item.autocompleteLabel\n    }}</span>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i8.MentionDirective, selector: "[mention], [mentionConfig]", inputs: ["mentionConfig", "mention", "mentionListTemplate"], outputs: ["searchTerm", "itemSelected", "opened", "closed"] }, { kind: "component", type: AvatarPlaceholderComponent, selector: "stream-avatar-placeholder", inputs: ["name", "imageUrl", "location", "channel", "user", "type", "initialsType", "showOnlineIndicator"] }, { kind: "pipe", type: i7.TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: AutocompleteTextareaComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'stream-autocomplete-textarea', template: "<textarea\n  #input\n  data-testid=\"textarea\"\n  class=\"rta__textarea str-chat__textarea__textarea str-chat__angular-textarea str-chat__message-textarea\"\n  rows=\"1\"\n  [value]=\"value || ''\"\n  [autofocus]=\"autoFocus\"\n  placeholder=\"{{ placeholder | translate }}\"\n  [mentionConfig]=\"autocompleteConfig\"\n  [mentionListTemplate]=\"autocompleteItem\"\n  (input)=\"inputChanged()\"\n  (keydown.enter)=\"enterHit($event)\"\n  (searchTerm)=\"autcompleteSearchTermChanged($event)\"\n  (blur)=\"inputLeft()\"\n  (paste)=\"pasteFromClipboard.emit($event)\"\n></textarea>\n<ng-template #autocompleteItem let-item=\"item\">\n  <div class=\"rta rta__item str-chat__emojisearch__item\" [ngSwitch]=\"item.type\">\n    <div *ngSwitchCase=\"'mention'\" class=\"rta__entity\">\n      <ng-container\n        *ngTemplateOutlet=\"\n          mentionAutocompleteItemTemplate || defaultMentionTemplate;\n          context: { item: item }\n        \"\n      ></ng-container>\n    </div>\n    <div *ngSwitchCase=\"'command'\" class=\"rta__entity\">\n      <ng-container\n        *ngTemplateOutlet=\"\n          commandAutocompleteItemTemplate || defaultCommandTemplate;\n          context: { item: item }\n        \"\n      ></ng-container>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #defaultCommandTemplate let-item=\"item\">\n  <div class=\"str-chat__slash-command\">\n    <span class=\"str-chat__slash-command-header\">\n      <strong\n        class=\"str-chat__slash-command-name\"\n        data-testclass=\"command-name\"\n        >{{ item.name }}</strong\n      >\n      <span class=\"str-chat__slash-command-args\"\n        >/{{ item.name }} {{ item.args }}</span\n      >\n    </span>\n    <br />\n  </div>\n</ng-template>\n\n<ng-template #defaultMentionTemplate let-item=\"item\">\n  <div class=\"str-chat__user-item\">\n    <stream-avatar-placeholder\n      data-testclass=\"avatar\"\n      class=\"str-chat__avatar str-chat__avatar--circle\"\n      type=\"user\"\n      location=\"autocomplete-item\"\n      [imageUrl]=\"item.image || item.user?.image\"\n      [name]=\"item.autocompleteLabel\"\n      [user]=\"item.user || item\"\n    ></stream-avatar-placeholder>\n    <span data-testclass=\"username\" class=\"str-chat__user-item--name\">{{\n      item.autocompleteLabel\n    }}</span>\n  </div>\n</ng-template>\n" }]
-        }], ctorParameters: function () { return [{ type: ChannelService }, { type: ChatClientService }, { type: TransliterationService }, { type: EmojiInputService }, { type: CustomTemplatesService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { class: [{
+            args: [{ selector: 'stream-autocomplete-textarea', template: "<textarea\n  #input\n  data-testid=\"textarea\"\n  class=\"rta__textarea str-chat__textarea__textarea str-chat__angular-textarea str-chat__message-textarea\"\n  rows=\"1\"\n  [value]=\"value || ''\"\n  [autofocus]=\"autoFocus\"\n  placeholder=\"{{ placeholder | translate }}\"\n  [mentionConfig]=\"autocompleteConfig\"\n  [mentionListTemplate]=\"autocompleteItem\"\n  (input)=\"inputChanged()\"\n  (keydown.enter)=\"enterHit($event)\"\n  (searchTerm)=\"autcompleteSearchTermChanged($event)\"\n  (blur)=\"inputLeft()\"\n  (paste)=\"pasteFromClipboard.emit($event)\"\n></textarea>\n<ng-template #autocompleteItem let-item=\"item\">\n  <ng-container *ngIf=\"item.templateRef; else builtinItem\">\n    <ng-container\n      *ngTemplateOutlet=\"item.templateRef; context: { item: item }\"\n    ></ng-container>\n  </ng-container>\n  <ng-template #builtinItem>\n    <div\n      class=\"rta rta__item str-chat__emojisearch__item\"\n      [ngSwitch]=\"item.type\"\n    >\n      <div *ngSwitchCase=\"'mention'\" class=\"rta__entity\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            mentionAutocompleteItemTemplate || defaultMentionTemplate;\n            context: { item: item }\n          \"\n        ></ng-container>\n      </div>\n      <div *ngSwitchCase=\"'command'\" class=\"rta__entity\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            commandAutocompleteItemTemplate || defaultCommandTemplate;\n            context: { item: item }\n          \"\n        ></ng-container>\n      </div>\n    </div>\n  </ng-template>\n</ng-template>\n\n<ng-template #defaultCommandTemplate let-item=\"item\">\n  <div class=\"str-chat__slash-command\">\n    <span class=\"str-chat__slash-command-header\">\n      <strong\n        class=\"str-chat__slash-command-name\"\n        data-testclass=\"command-name\"\n        >{{ item.name }}</strong\n      >\n      <span class=\"str-chat__slash-command-args\"\n        >/{{ item.name }} {{ item.args }}</span\n      >\n    </span>\n    <br />\n  </div>\n</ng-template>\n\n<ng-template #defaultMentionTemplate let-item=\"item\">\n  <div class=\"str-chat__user-item\">\n    <stream-avatar-placeholder\n      data-testclass=\"avatar\"\n      class=\"str-chat__avatar str-chat__avatar--circle\"\n      type=\"user\"\n      location=\"autocomplete-item\"\n      [imageUrl]=\"item.image || item.user?.image\"\n      [name]=\"item.autocompleteLabel\"\n      [user]=\"item.user || item\"\n    ></stream-avatar-placeholder>\n    <span data-testclass=\"username\" class=\"str-chat__user-item--name\">{{\n      item.autocompleteLabel\n    }}</span>\n  </div>\n</ng-template>\n" }]
+        }], ctorParameters: function () { return [{ type: ChannelService }, { type: ChatClientService }, { type: TransliterationService }, { type: EmojiInputService }, { type: CustomTemplatesService }, { type: i0.ChangeDetectorRef }, { type: MessageInputConfigService }]; }, propDecorators: { class: [{
                 type: HostBinding
             }], value: [{
                 type: Input
@@ -8317,7 +8375,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
             }] } });
 
 /**
- * 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.
+ * 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`](/chat/docs/sdk/angular/components/MessageListComponent) and [`MessageInput`](/chat/docs/sdk/angular/components/MessageInputComponent/) components.
  */
 class ThreadComponent {
     constructor(customTemplatesService, channelService, chatClientService) {