stream-chat-angular 5.9.1 → 5.10.0

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

@@ -8,9 +8,10 @@ import { ChatClientService } from '../../chat-client.service';
 import { TransliterationService } from '../../transliteration.service';
 import { EmojiInputService } from '../emoji-input.service';
 import { CustomTemplatesService } from '../../custom-templates.service';
+import { MessageInputConfigService } from '../message-input-config.service';
 import * as i0 from "@angular/core";
 /**
- * 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.
  */
 export declare class AutocompleteTextareaComponent implements TextareaInterface, OnChanges, AfterViewInit {
     private channelService;
@@ -19,6 +20,7 @@ export declare class AutocompleteTextareaComponent implements TextareaInterface,
     private emojiInputService;
     private customTemplatesService;
     private cdRef;
+    private messageInputConfigService;
     class: string;
     /**
      * The value of the input HTML element.
@@ -29,15 +31,15 @@ export declare class AutocompleteTextareaComponent implements TextareaInterface,
      */
     placeholder: string;
     /**
-     * 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.
      */
     areMentionsEnabled: boolean | undefined;
     /**
-     * See [`MessageInputConfigService`](../services/MessageInputConfigService.mdx) for more information
+     * See [`MessageInputConfigService`](/chat/docs/sdk/angular/services/MessageInputConfigService) for more information
      */
     inputMode: 'desktop' | 'mobile';
     /**
-     * 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.
      */
     mentionScope: 'channel' | 'application';
     /**
@@ -73,7 +75,7 @@ export declare class AutocompleteTextareaComponent implements TextareaInterface,
     private slashCommandConfig;
     private searchTerm$;
     private isViewInited;
-    constructor(channelService: ChannelService, chatClientService: ChatClientService, transliterationService: TransliterationService, emojiInputService: EmojiInputService, customTemplatesService: CustomTemplatesService, cdRef: ChangeDetectorRef);
+    constructor(channelService: ChannelService, chatClientService: ChatClientService, transliterationService: TransliterationService, emojiInputService: EmojiInputService, customTemplatesService: CustomTemplatesService, cdRef: ChangeDetectorRef, messageInputConfigService: MessageInputConfigService);
     ngOnChanges(changes: SimpleChanges): void;
     ngAfterViewInit(): void;
     filter(searchString: string, items: {
@@ -90,6 +92,7 @@ export declare class AutocompleteTextareaComponent implements TextareaInterface,
     private transliterate;
     private updateMentionOptions;
     private updateMentionedUsersFromText;
+    private updateCustomAutocompleteOptions;
     static ɵfac: i0.ɵɵFactoryDeclaration<AutocompleteTextareaComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<AutocompleteTextareaComponent, "stream-autocomplete-textarea", never, { "value": "value"; "placeholder": "placeholder"; "areMentionsEnabled": "areMentionsEnabled"; "inputMode": "inputMode"; "mentionScope": "mentionScope"; "autoFocus": "autoFocus"; }, { "valueChange": "valueChange"; "send": "send"; "userMentions": "userMentions"; "pasteFromClipboard": "pasteFromClipboard"; }, never, never, false, never>;
 }

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

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

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

@@ -1,7 +1,9 @@
 import { MessageInputComponent } from './message-input.component';
+import { BehaviorSubject } from 'rxjs';
+import { CustomAutocomplete } from '../types';
 import * as i0 from "@angular/core";
 /**
- * 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.
  */
 export declare class MessageInputConfigService {
     /**
@@ -9,7 +11,7 @@ export declare class MessageInputConfigService {
      */
     isFileUploadEnabled: boolean | undefined;
     /**
-     * If true, users can mention other users in messages. You also [need to use the `AutocompleteTextarea`](../concepts/opt-in-architecture.mdx) for this feature to work.
+     * 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.
      */
     areMentionsEnabled: boolean | undefined;
     /**
@@ -32,7 +34,7 @@ export declare class MessageInputConfigService {
     /**
      * Override the message input's default event handler for [paste events](https://developer.mozilla.org/en-US/docs/Web/API/Element/paste_event)
      *
-     * The event handler will receive the event object, and the [message input component](../../components/MessageInputComponent).
+     * The event handler will receive the event object, and the [message input component](/chat/docs/sdk/angular/components/MessageInputComponent).
      *
      * You can use the public API of the message input component to update the composer. Typically you want to update the message text and/or attachments, this is how you can do these:
      * - Change message text: `inputComponent.textareaValue = '<new value>'`
@@ -40,6 +42,12 @@ export declare class MessageInputConfigService {
      * - Upload custom attachments: `inputComponent.attachmentService.customAttachments$.next(<custom attachments>)`
      */
     customPasteEventHandler?: (event: ClipboardEvent, inputComponent: MessageInputComponent) => void;
+    /**
+     * Add custom autocomplete configurations to the message input
+     *
+     * Only works when using StreamAutocompleteTextareaModule
+     */
+    customAutocompletes$: BehaviorSubject<CustomAutocomplete[]>;
     constructor();
     static ɵfac: i0.ɵɵFactoryDeclaration<MessageInputConfigService, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<MessageInputConfigService>;

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

@@ -30,15 +30,15 @@ export declare class MessageInputComponent implements OnInit, OnChanges, OnDestr
     readonly voiceRecorderService: VoiceRecorderService;
     audioRecorder?: AudioRecorderService | undefined;
     /**
-     * If file upload is enabled, the user can open a file selector from the input. Please note that the user also needs to have the necessary [channel capability](https://getstream.io/chat/docs/javascript/channel_capabilities/?language=javascript). If no value is provided, it is set from the [`MessageInputConfigService`](../services/MessageInputConfigService.mdx).
+     * If file upload is enabled, the user can open a file selector from the input. Please note that the user also needs to have the necessary [channel capability](https://getstream.io/chat/docs/javascript/channel_capabilities/?language=javascript). If no value is provided, it is set from the [`MessageInputConfigService`](/chat/docs/sdk/angular/services/MessageInputConfigService/).
      */
     isFileUploadEnabled: boolean | undefined;
     /**
-     * If true, users can mention other users in messages. You also [need to use the `AutocompleteTextarea`](../concepts/opt-in-architecture.mdx) for this feature to work. If no value is provided, it is set from the [`MessageInputConfigService`](../services/MessageInputConfigService.mdx).
+     * 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. If no value is provided, it is set from the [`MessageInputConfigService`](/chat/docs/sdk/angular/services/MessageInputConfigService/).
      */
     areMentionsEnabled: boolean | undefined;
     /**
-     * The scope for user mentions, either members of the current channel of members of the application. If no value is provided, it is set from the [`MessageInputConfigService`](../services/MessageInputConfigService.mdx).
+     * The scope for user mentions, either members of the current channel of members of the application. If no value is provided, it is set from the [`MessageInputConfigService`](/chat/docs/sdk/angular/services/MessageInputConfigService/).
      */
     mentionScope: 'channel' | 'application' | undefined;
     /**
@@ -46,7 +46,7 @@ export declare class MessageInputComponent implements OnInit, OnChanges, OnDestr
      */
     mode: 'thread' | 'main';
     /**
-     * If true, users can select multiple files to upload. If no value is provided, it is set from the [`MessageInputConfigService`](../services/MessageInputConfigService.mdx).
+     * If true, users can select multiple files to upload. If no value is provided, it is set from the [`MessageInputConfigService`](/chat/docs/sdk/angular/services/MessageInputConfigService/).
      */
     isMultipleFileUploadEnabled: boolean | undefined;
     /**
@@ -58,7 +58,7 @@ export declare class MessageInputComponent implements OnInit, OnChanges, OnDestr
      */
     sendMessage$: Observable<void> | undefined;
     /**
-     * In `desktop` mode the `Enter` key will trigger message sending, in `mobile` mode the `Enter` key will insert a new line to the message input. If no value is provided, it is set from the [`MessageInputConfigService`](../services/MessageInputConfigService.mdx).
+     * In `desktop` mode the `Enter` key will trigger message sending, in `mobile` mode the `Enter` key will insert a new line to the message input. If no value is provided, it is set from the [`MessageInputConfigService`](/chat/docs/sdk/angular/services/MessageInputConfigService/).
      */
     inputMode: 'desktop' | 'mobile';
     /**
@@ -66,7 +66,7 @@ export declare class MessageInputComponent implements OnInit, OnChanges, OnDestr
      */
     autoFocus: boolean;
     /**
-     * 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.
      */

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

@@ -4,7 +4,7 @@ import { TextareaInterface } from '../textarea.interface';
 import { UserResponse } from 'stream-chat';
 import * as i0 from "@angular/core";
 /**
- * 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.
  */
 export declare class TextareaComponent implements TextareaInterface, OnChanges, OnDestroy, AfterViewInit {
     private emojiInputService;
@@ -18,7 +18,7 @@ export declare class TextareaComponent implements TextareaInterface, OnChanges,
      */
     placeholder: string;
     /**
-     * See [`MessageInputConfigService`](../services/MessageInputConfigService.mdx) for more information
+     * See [`MessageInputConfigService`](/chat/docs/sdk/angular/services/MessageInputConfigService) for more information
      */
     inputMode: 'desktop' | 'mobile';
     /**

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

@@ -29,12 +29,12 @@ export declare class MessageReactionsComponent implements OnChanges, OnInit, Aft
         [key in MessageReactionType]?: number;
     };
     /**
-     * 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)
      */
     latestReactions: ReactionResponse<DefaultStreamChatGenerics>[];
     /**
-     * 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.
      */
     ownReactions: ReactionResponse<DefaultStreamChatGenerics>[];
     private selectorContainer;

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

@@ -5,14 +5,14 @@ import { ChannelService } from '../channel.service';
 import { MessageReactionsService } from '../message-reactions.service';
 import * as i0 from "@angular/core";
 /**
- * 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.
  */
 export declare class MessageReactionsSelectorComponent implements OnInit, OnDestroy, AfterViewInit {
     private channelService;
     private messageReactionsService;
     private 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.
      */
     ownReactions: ReactionResponse<DefaultStreamChatGenerics>[];
     /**

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

@@ -13,13 +13,13 @@ export declare 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/)
      */
     reactions$: BehaviorSubject<{
         [x: string]: string;
     }>;
     /**
-     * By default the [`MessageReactionsComponent`](../../components/MessageReactionsComponent) will display the reacting users when a reaction is clicked. You can override this with your own UI by providing a custom event handler.
+     * By default the [`MessageReactionsComponent`](/chat/docs/sdk/angular/components/MessageReactionsComponent/) will display the reacting users when a reaction is clicked. You can override this with your own UI by providing a custom event handler.
      *
      * The event handler can retrieve all reactions of a message using the [`messageReactionsService.queryReactions()`](https://getstream.io/chat/docs/sdk/angular/services/MessageReactionsService/#queryreactions)
      */

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

@@ -2,7 +2,7 @@ import { TemplateRef } from '@angular/core';
 import { NotificationType } from '../types';
 import * as i0 from "@angular/core";
 /**
- * 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/)
  */
 export declare class NotificationComponent {
     /**

package/lib/notification.service.d.ts

@@ -3,7 +3,7 @@ import { Observable } from 'rxjs';
 import { NotificationPayload, NotificationType } from './types';
 import * as i0 from "@angular/core";
 /**
- * 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.
  */
 export declare class NotificationService {
     /**

package/lib/stream-i18n.service.d.ts

@@ -1,7 +1,7 @@
 import { TranslateService } from '@ngx-translate/core';
 import * as i0 from "@angular/core";
 /**
- * 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.
  */
 export declare class StreamI18nService {
     private translteService;

package/lib/theme.service.d.ts

@@ -1,7 +1,7 @@
 import { BehaviorSubject } from 'rxjs';
 import * as i0 from "@angular/core";
 /**
- * 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.
  */
 export declare class ThemeService {
     /**

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

@@ -6,7 +6,7 @@ import { CustomTemplatesService } from '../custom-templates.service';
 import { DefaultStreamChatGenerics, StreamMessage, ThreadHeaderContext } from '../types';
 import * as i0 from "@angular/core";
 /**
- * The `Thread` component represents a [message thread](https://getstream.io/chat/docs/javascript/threads/?language=javascript), it is a container component that displays a thread with a header, [`MessageList`](./MessageListComponent.mdx) and [`MessageInput`](./MessageInputComponent.mdx) components.
+ * 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.
  */
 export declare class ThreadComponent implements OnDestroy {
     customTemplatesService: CustomTemplatesService;

package/lib/types.d.ts

@@ -338,4 +338,43 @@ export declare type CustomAttachmentPreviewListContext<T extends DefaultStreamCh
 export declare type ThreadReplyButtonContext<T extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {
     message: StreamMessage<T>;
 };
+export declare type CustomAutocompleteItemContext = {
+    item: CustomAutocompleteItem;
+};
+export declare type CustomAutocompleteItem = {
+    /**
+     * This is the text that will be inserted into the message input once a user selects an option (appended after the trigger character)
+     */
+    autocompleteLabel: string;
+};
+export declare type CustomAutocomplete = {
+    /**
+     * The character that will trigger the autocomplete (for example #)
+     *
+     * The SDK supports @ and / by default, so you can't use those
+     */
+    triggerCharacter: string;
+    /**
+     * The HTML template to display an item in the autocomplete list
+     */
+    templateRef: TemplateRef<{
+        item: CustomAutocompleteItem;
+    }>;
+    /**
+     * Set to `true` if space characters can be part of the `autocompleteLabel`
+     */
+    allowSpace: boolean;
+    /**
+     * The options to choose from
+     *
+     * In case you want to use dynamic/server-side filtering, use `updateOptions` instead
+     */
+    options: CustomAutocompleteItem[];
+    /**
+     * If you want to have dynamic/server-side filtering provide a  method that will be called any time the autocomplete options should be filtered
+     * @param searchTerm the text to filter by (without the trigger character), can be an empty string
+     * @returns a promise that will resolve to the options, you should take care of error handling
+     */
+    updateOptions?: (searchTerm: string) => Promise<CustomAutocompleteItem[]>;
+};
 export {};

package/package.json

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

package/src/assets/version.ts

@@ -1 +1 @@
-export const version = '5.9.1';
+export const version = '5.10.0';