stream-chat-angular 5.9.0 → 5.10.0

package/fesm2015/stream-chat-angular.mjs

@@ -18,13 +18,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.0';
+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() {
@@ -200,7 +200,7 @@ class ChatClientService {
         });
     }
     /**
-     * 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/).
      */
     disconnectUser() {
         return __awaiter(this, void 0, void 0, function* () {
@@ -766,7 +766,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() {
         var _a, _b;
@@ -915,7 +915,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
      */
     uploadAttachments(uploads) {
@@ -986,7 +986,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/))
      */
     deleteAttachment(attachmentUpload) {
         return __awaiter(this, void 0, void 0, function* () {
@@ -1981,7 +1981,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() {
@@ -2105,7 +2105,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([]);
         /**
@@ -2241,7 +2241,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) {
@@ -2874,7 +2874,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) {
@@ -3071,183 +3071,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
          */
@@ -3261,28 +3261,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
          */
@@ -3299,7 +3299,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) {
@@ -3375,7 +3375,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) {
@@ -3411,7 +3411,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) {
@@ -3426,7 +3426,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) {
@@ -3616,7 +3616,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: '😂',
@@ -3673,7 +3673,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) {
@@ -3681,7 +3681,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 = [];
@@ -3731,7 +3731,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) {
@@ -3743,7 +3743,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 = [];
@@ -3849,7 +3849,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() { }
@@ -3957,7 +3957,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).
  */
@@ -4024,7 +4024,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) {
@@ -5070,12 +5070,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;
@@ -5220,7 +5220,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) {
@@ -5234,7 +5234,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 = [];
         /**
@@ -5851,12 +5851,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();
     }
@@ -5895,7 +5895,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() {
@@ -5904,7 +5904,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;
         /**
@@ -5924,6 +5924,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 });
@@ -6526,7 +6532,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.
          */
@@ -6987,7 +6993,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) {
@@ -7117,16 +7123,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.
@@ -7137,11 +7144,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';
         /**
@@ -7175,6 +7182,7 @@ class AutocompleteTextareaComponent {
         this.userMentionConfig = {
             triggerChar: this.mentionTriggerChar,
             dropUp: true,
+            allowSpace: true,
             labelKey: this.autocompleteKey,
             returnTrigger: true,
             mentionFilter: (searchString, items) => this.filter(searchString, items),
@@ -7190,10 +7198,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) => {
             var _a;
@@ -7202,6 +7215,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();
@@ -7219,35 +7233,56 @@ class AutocompleteTextareaComponent {
             this.userMentionConfig,
             this.slashCommandConfig,
         ];
+        this.subscriptions.push(this.messageInputConfigService.customAutocompletes$.subscribe((customConfigs) => {
+            var _a, _b;
+            const builtInItems = (_b = (_a = this.autocompleteConfig.mentions) === null || _a === void 0 ? void 0 : _a.filter((m) => m === this.userMentionConfig || m === this.slashCommandConfig)) !== null && _b !== void 0 ? _b : [];
+            const transformedCustomConfigs = customConfigs.map((c) => {
+                const copy = {
+                    items: c.options.map((o) => (Object.assign(Object.assign({}, 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 = Object.assign({}, this.autocompleteConfig);
+        }));
     }
     ngOnChanges(changes) {
-        var _a, _b, _c, _d, _e, _f;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
         if (changes.areMentionsEnabled) {
-            if (this.areMentionsEnabled) {
-                this.autocompleteConfig.mentions = [
-                    this.userMentionConfig,
-                    this.slashCommandConfig,
-                ];
-                this.autocompleteConfig = Object.assign({}, this.autocompleteConfig);
-            }
-            else {
-                this.autocompleteConfig.mentions = [this.slashCommandConfig];
-                this.autocompleteConfig = Object.assign({}, this.autocompleteConfig);
-            }
+            this.autocompleteConfig.mentions =
+                (_c = (_b = (_a = this.autocompleteConfig) === null || _a === void 0 ? void 0 : _a.mentions) === null || _b === void 0 ? void 0 : _b.filter((c) => {
+                    if (c !== this.userMentionConfig) {
+                        return true;
+                    }
+                    else {
+                        return this.areMentionsEnabled;
+                    }
+                })) !== null && _c !== void 0 ? _c : [];
+            this.autocompleteConfig = Object.assign({}, this.autocompleteConfig);
         }
         if (changes.mentionScope) {
             void this.updateMentionOptions(this.searchTerm$.getValue());
         }
         if (changes.value && !this.value && this.messageInput) {
             this.messageInput.nativeElement.style.height = 'auto';
-            (_c = (_b = (_a = this.chatClientService) === null || _a === void 0 ? void 0 : _a.chatClient) === null || _b === void 0 ? void 0 : _b.logger) === null || _c === void 0 ? void 0 : _c.call(_b, 'info', '[Autocomplete textarea] Value reset, adjusting textarea height to auto');
+            (_f = (_e = (_d = this.chatClientService) === null || _d === void 0 ? void 0 : _d.chatClient) === null || _e === void 0 ? void 0 : _e.logger) === null || _f === void 0 ? void 0 : _f.call(_e, 'info', '[Autocomplete textarea] Value reset, adjusting textarea height to auto');
             this.updateMentionedUsersFromText();
         }
         else if (changes.value &&
             this.value &&
             this.messageInput &&
             this.isViewInited) {
-            (_f = (_e = (_d = this.chatClientService) === null || _d === void 0 ? void 0 : _d.chatClient) === null || _e === void 0 ? void 0 : _e.logger) === null || _f === void 0 ? void 0 : _f.call(_e, 'info', '[Autocomplete textarea] Value changed');
+            (_j = (_h = (_g = this.chatClientService) === null || _g === void 0 ? void 0 : _g.chatClient) === null || _h === void 0 ? void 0 : _h.logger) === null || _j === void 0 ? void 0 : _j.call(_h, 'info', '[Autocomplete textarea] Value changed');
             setTimeout(() => {
                 if (this.messageInput.nativeElement.scrollHeight > 0) {
                     this.adjustTextareaHeight();
@@ -7271,15 +7306,19 @@ class AutocompleteTextareaComponent {
             this.mentionedUsers.push((item.user ? item.user : item));
             this.userMentions.next([...this.mentionedUsers]);
         }
+        this.searchTerm$.next('');
         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() {
         var _a, _b, _c;
@@ -7312,6 +7351,7 @@ class AutocompleteTextareaComponent {
         }
     }
     updateMentionOptions(searchTerm) {
+        var _a, _b;
         return __awaiter(this, void 0, void 0, function* () {
             if (!this.areMentionsEnabled) {
                 return;
@@ -7327,8 +7367,7 @@ class AutocompleteTextareaComponent {
             }));
             this.userMentionConfig.items = items;
             this.autocompleteConfig.mentions = [
-                this.userMentionConfig,
-                this.slashCommandConfig,
+                ...((_b = (_a = this.autocompleteConfig) === null || _a === void 0 ? void 0 : _a.mentions) !== null && _b !== void 0 ? _b : []),
             ];
             this.autocompleteConfig = Object.assign({}, this.autocompleteConfig);
             this.cdRef.detectChanges();
@@ -7347,13 +7386,33 @@ class AutocompleteTextareaComponent {
             this.mentionedUsers = updatedMentionedUsers;
         }
     }
+    updateCustomAutocompleteOptions(searchTerm) {
+        var _a;
+        return __awaiter(this, void 0, void 0, function* () {
+            if (this.messageInputConfigService.customAutocompletes$.getValue().length ===
+                0) {
+                return;
+            }
+            const customMentionConfig = (_a = this.autocompleteConfig.mentions) === null || _a === void 0 ? void 0 : _a.find((c) => c.triggerChar && searchTerm.startsWith(c.triggerChar));
+            const customAutocompleteConfig = customMentionConfig
+                ? this.messageInputConfigService.customAutocompletes$
+                    .getValue()
+                    .find((c) => c.triggerCharacter === (customMentionConfig === null || customMentionConfig === void 0 ? void 0 : customMentionConfig.triggerChar))
+                : undefined;
+            if (customMentionConfig && (customAutocompleteConfig === null || customAutocompleteConfig === void 0 ? void 0 : customAutocompleteConfig.updateOptions)) {
+                const newOptions = yield customAutocompleteConfig.updateOptions(searchTerm.replace(customMentionConfig.triggerChar || '', ''));
+                customMentionConfig.items = newOptions.map((o) => (Object.assign(Object.assign({}, o), { templateRef: customAutocompleteConfig.templateRef })));
+                this.autocompleteConfig = Object.assign({}, 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
@@ -8484,7 +8543,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) {