stream-chat-angular 5.0.0-v5.8 → 5.0.0

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

@@ -1,13 +1,14 @@
-import { OnChanges, SimpleChanges, OnDestroy, OnInit, ChangeDetectorRef, AfterViewInit } from '@angular/core';
+import { OnChanges, SimpleChanges, OnDestroy, OnInit, ChangeDetectorRef, AfterViewInit, ElementRef, NgZone } from '@angular/core';
 import { UserResponse } from 'stream-chat';
 import { ChannelService } from '../channel.service';
 import { ChatClientService } from '../chat-client.service';
 import { AttachmentListContext, MentionTemplateContext, MessageActionsBoxContext, MessageReactionsContext, DefaultStreamChatGenerics, StreamMessage, DeliveredStatusContext, SendingStatusContext, ReadStatusContext, SystemMessageContext, CustomMetadataContext } from '../types';
+import { Observable } from 'rxjs';
 import { CustomTemplatesService } from '../custom-templates.service';
 import { DateParserService } from '../date-parser.service';
 import { MessageService } from '../message.service';
 import { MessageActionsService } from '../message-actions.service';
-import { NgxFloatUiContentComponent } from 'ngx-float-ui';
+import { NgxFloatUiContentComponent, NgxFloatUiLooseDirective } from 'ngx-float-ui';
 import * as i0 from "@angular/core";
 declare type MessagePart = {
     content: string;
@@ -24,7 +25,8 @@ export declare class MessageComponent implements OnInit, OnChanges, OnDestroy, A
     private cdRef;
     private dateParser;
     private messageService;
-    private messageActionsService;
+    messageActionsService: MessageActionsService;
+    private ngZone;
     /**
      * The message to be displayed
      */
@@ -45,12 +47,13 @@ export declare class MessageComponent implements OnInit, OnChanges, OnDestroy, A
      * Highlighting is used to add visual emphasize to a message when jumping to the message
      */
     isHighlighted: boolean;
+    /**
+     * An Observable that emits when the message list is scrolled, it's used to prevent opening the message menu while scroll is in progress
+     */
+    scroll$?: Observable<void>;
     canReceiveReadEvents: boolean | undefined;
     canReactToMessage: boolean | undefined;
-    isActionBoxOpen: boolean;
     isEditedFlagOpened: boolean;
-    isReactionSelectorOpen: boolean;
-    visibleMessageActionsCount: number;
     messageTextParts: MessagePart[] | undefined;
     messageText?: string;
     shouldDisplayTranslationNotice: boolean;
@@ -72,19 +75,35 @@ export declare class MessageComponent implements OnInit, OnChanges, OnDestroy, A
     replyCountParam: {
         replyCount: number | undefined;
     };
+    areMessageOptionsOpen: boolean;
     canDisplayReadStatus: boolean;
+    hasTouchSupport: boolean;
     private quotedMessageAttachments;
     private subscriptions;
     private isViewInited;
     private userId?;
     private readonly urlRegexp;
     private emojiRegexp;
-    constructor(chatClientService: ChatClientService, channelService: ChannelService, customTemplatesService: CustomTemplatesService, cdRef: ChangeDetectorRef, dateParser: DateParserService, messageService: MessageService, messageActionsService: MessageActionsService);
+    messageMenuTrigger: NgxFloatUiLooseDirective;
+    messageMenuFloat: NgxFloatUiContentComponent;
+    messageTextElement?: ElementRef<HTMLElement>;
+    messageBubble?: ElementRef<HTMLElement>;
+    private showMessageMenuTimeout?;
+    private shouldPreventMessageMenuClose;
+    private _visibleMessageActionsCount;
+    constructor(chatClientService: ChatClientService, channelService: ChannelService, customTemplatesService: CustomTemplatesService, cdRef: ChangeDetectorRef, dateParser: DateParserService, messageService: MessageService, messageActionsService: MessageActionsService, ngZone: NgZone);
+    get visibleMessageActionsCount(): number;
+    set visibleMessageActionsCount(count: number);
     ngOnInit(): void;
     ngOnChanges(changes: SimpleChanges): void;
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
-    messageActionsClicked(): void;
+    mousePushedDown(event: MouseEvent): void;
+    mouseReleased(): void;
+    touchStarted(): void;
+    touchEnded(): void;
+    messageBubbleClicked(event: Event): void;
+    messageOptionsButtonClicked(): void;
     messageActionsBoxClicked(floatingContent: NgxFloatUiContentComponent): void;
     getAttachmentListContext(): AttachmentListContext;
     getMessageContext(): SystemMessageContext;
@@ -109,7 +128,10 @@ export declare class MessageComponent implements OnInit, OnChanges, OnDestroy, A
     private wrapLinksWithAnchorTag;
     private setIsSentByCurrentUser;
     private setLastReadUser;
+    private startMessageMenuShowTimer;
+    private registerMenuTriggerEventHandlers;
+    private stopMessageMenuShowTimer;
     static ɵfac: i0.ɵɵFactoryDeclaration<MessageComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MessageComponent, "stream-message", never, { "message": "message"; "enabledMessageActions": "enabledMessageActions"; "isLastSentMessage": "isLastSentMessage"; "mode": "mode"; "isHighlighted": "isHighlighted"; }, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MessageComponent, "stream-message", never, { "message": "message"; "enabledMessageActions": "enabledMessageActions"; "isLastSentMessage": "isLastSentMessage"; "mode": "mode"; "isHighlighted": "isHighlighted"; "scroll$": "scroll$"; }, {}, never, never, false, never>;
 }
 export {};

package/lib/message-actions-box/message-actions-box.component.d.ts

@@ -1,6 +1,6 @@
 import { AfterViewInit, ChangeDetectorRef, OnChanges, OnDestroy, OnInit, SimpleChanges, TemplateRef } from '@angular/core';
 import { CustomTemplatesService } from '../custom-templates.service';
-import { CustomMessageActionItem, MessageActionBoxItemContext, MessageActionItem, MessageInputContext, StreamMessage } from '../types';
+import { CustomMessageActionItem, MessageActionBoxItemContext, MessageActionItem, MessageReactionActionItem, MessageReactionsSelectorContext, StreamMessage } from '../types';
 import { MessageActionsService } from '../message-actions.service';
 import * as i0 from "@angular/core";
 /**
@@ -18,13 +18,16 @@ export declare class MessageActionsBoxComponent implements OnInit, OnChanges, On
      * The message the actions will be executed on
      */
     message: StreamMessage | undefined;
+    /**
+     * The HTML element which contains the message text, it's used for the "copy message text" action
+     */
+    messageTextHtmlElement: HTMLElement | undefined;
     /**
      * 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.
      */
     enabledActions: string[];
-    messageInputTemplate: TemplateRef<MessageInputContext> | undefined;
     messageActionItemTemplate: TemplateRef<MessageActionBoxItemContext> | undefined;
-    visibleMessageActionItems: (MessageActionItem | CustomMessageActionItem)[];
+    visibleMessageActionItems: (MessageActionItem | CustomMessageActionItem | MessageReactionActionItem)[];
     isEditModalOpen: boolean;
     customActions: CustomMessageActionItem[];
     private readonly messageActionItems;
@@ -36,9 +39,11 @@ export declare class MessageActionsBoxComponent implements OnInit, OnChanges, On
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
     getActionLabel(actionLabelOrTranslationKey: ((message: StreamMessage) => string) | string): string;
-    getMessageActionTemplateContext(item: MessageActionItem | CustomMessageActionItem): MessageActionBoxItemContext;
-    trackByActionName(_: number, item: MessageActionItem | CustomMessageActionItem): string;
+    getReactionSelectorTemplateContext(): MessageReactionsSelectorContext;
+    getMessageActionTemplateContext(item: MessageActionItem | CustomMessageActionItem | MessageReactionActionItem): MessageActionBoxItemContext;
+    trackByActionName(_: number, item: MessageActionItem | CustomMessageActionItem | MessageReactionActionItem): string;
+    private isReactAction;
     private setVisibleActions;
     static ɵfac: i0.ɵɵFactoryDeclaration<MessageActionsBoxComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MessageActionsBoxComponent, "stream-message-actions-box", never, { "isMine": "isMine"; "message": "message"; "enabledActions": "enabledActions"; }, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MessageActionsBoxComponent, "stream-message-actions-box", never, { "isMine": "isMine"; "message": "message"; "messageTextHtmlElement": "messageTextHtmlElement"; "enabledActions": "enabledActions"; }, {}, never, never, false, never>;
 }

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

@@ -1,5 +1,5 @@
 import { BehaviorSubject } from 'rxjs';
-import { CustomMessageActionItem, DefaultStreamChatGenerics, MessageActionItem, MessageActionsClickDetails, StreamMessage } from './types';
+import { CustomMessageActionItem, DefaultStreamChatGenerics, MessageActionItem, MessageActionsClickDetails, MessageReactionActionItem, StreamMessage } from './types';
 import { ChatClientService } from './chat-client.service';
 import { NotificationService } from './notification.service';
 import { ChannelService } from './channel.service';
@@ -14,7 +14,7 @@ export declare class MessageActionsService<T extends DefaultStreamChatGenerics =
     /**
      * Default actions - these are the actions that are handled by the built-in component
      */
-    readonly defaultActions: MessageActionItem<T>[];
+    readonly defaultActions: (MessageActionItem<T> | MessageReactionActionItem<T>)[];
     /**
      * The built-in components will handle changes to this observable.
      */
@@ -27,6 +27,7 @@ export declare class MessageActionsService<T extends DefaultStreamChatGenerics =
      * By default the [`MessageComponent`](../../components/MessageComponent) will display the [`MessageActionsBoxComponent`](../../components/MessageActionsBoxComponent). You can override that behavior by providing your own event handler.
      */
     customActionClickHandler?: (details: MessageActionsClickDetails<T>) => void;
+    private hasDisplayedClipboardWarning;
     constructor(chatClientService: ChatClientService, notificationService: NotificationService, channelService: ChannelService);
     /**
      * This method returns how many authorized actions are available to the given message

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

@@ -70,6 +70,7 @@ export declare class AutocompleteTextareaComponent implements TextareaInterface,
     private userMentionConfig;
     private slashCommandConfig;
     private searchTerm$;
+    private isViewInited;
     constructor(channelService: ChannelService, chatClientService: ChatClientService, transliterationService: TransliterationService, emojiInputService: EmojiInputService, customTemplatesService: CustomTemplatesService, themeService: ThemeService, cdRef: ChangeDetectorRef);
     ngOnChanges(changes: SimpleChanges): void;
     ngAfterViewInit(): void;

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

@@ -1,5 +1,4 @@
 import { AfterViewInit, ChangeDetectorRef, ComponentFactoryResolver, ComponentRef, EventEmitter, OnChanges, OnDestroy, OnInit, SimpleChanges, TemplateRef, Type } from '@angular/core';
-import { ChatClientService } from '../chat-client.service';
 import { Observable, Subject } from 'rxjs';
 import { UserResponse } from 'stream-chat';
 import { AttachmentService } from '../attachment.service';
@@ -10,6 +9,7 @@ import { MessageInputConfigService } from './message-input-config.service';
 import { TextareaInterface } from './textarea.interface';
 import { EmojiInputService } from './emoji-input.service';
 import { CustomTemplatesService } from '../custom-templates.service';
+import { MessageActionsService } from '../message-actions.service';
 import * as i0 from "@angular/core";
 /**
  * The `MessageInput` component displays an input where users can type their messages and upload files, and sends the message to the active channel. The component can be used to compose new messages or update existing ones. To send messages, the chat user needs to have the necessary [channel capability](https://getstream.io/chat/docs/javascript/channel_capabilities/?language=javascript).
@@ -22,9 +22,9 @@ export declare class MessageInputComponent implements OnInit, OnChanges, OnDestr
     private textareaType;
     private componentFactoryResolver;
     private cdRef;
-    private chatClient;
     private emojiInputService;
     private customTemplatesService;
+    private messageActionsService;
     /**
      * 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).
      */
@@ -61,6 +61,16 @@ export declare class MessageInputComponent implements OnInit, OnChanges, OnDestr
      * Enables or disables auto focus on the textarea element
      */
     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`).
+     *
+     * 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.
+     */
+    watchForMessageToEdit: boolean;
+    /**
+     * Use this input to control wether a send button is rendered or not. If you don't render a send button, you can still trigger message send using the `sendMessage$` input.
+     */
+    displaySendButton: boolean;
     /**
      * Emits when a message was successfuly sent or updated
      */
@@ -90,12 +100,12 @@ export declare class MessageInputComponent implements OnInit, OnChanges, OnDestr
     private subscriptions;
     private hideNotification;
     private isViewInited;
-    private appSettings;
     private channel;
     private sendMessageSubcription;
     private readonly defaultTextareaPlaceholder;
     private readonly slowModeTextareaPlaceholder;
-    constructor(channelService: ChannelService, notificationService: NotificationService, attachmentService: AttachmentService, configService: MessageInputConfigService, textareaType: Type<TextareaInterface>, componentFactoryResolver: ComponentFactoryResolver, cdRef: ChangeDetectorRef, chatClient: ChatClientService, emojiInputService: EmojiInputService, customTemplatesService: CustomTemplatesService);
+    private messageToEdit?;
+    constructor(channelService: ChannelService, notificationService: NotificationService, attachmentService: AttachmentService, configService: MessageInputConfigService, textareaType: Type<TextareaInterface>, componentFactoryResolver: ComponentFactoryResolver, cdRef: ChangeDetectorRef, emojiInputService: EmojiInputService, customTemplatesService: CustomTemplatesService, messageActionsService: MessageActionsService);
     ngOnInit(): void;
     ngAfterViewInit(): void;
     ngOnChanges(changes: SimpleChanges): void;
@@ -128,19 +138,21 @@ export declare class MessageInputComponent implements OnInit, OnChanges, OnDestr
     get disabledTextareaText(): "" | "streamChat.You can't send thread replies in this channel" | "streamChat.You can't send messages in this channel";
     filesSelected(fileList: FileList | null): Promise<void>;
     deselectMessageToQuote(): void;
+    deselectMessageToEdit(): void;
     getEmojiPickerContext(): EmojiPickerContext;
     getAttachmentPreviewListContext(): AttachmentPreviewListContext;
     getAttachmentUploadContext(): CustomAttachmentUploadContext;
+    get isUpdate(): boolean;
     private deleteUpload;
     private retryUpload;
     private clearFileInput;
-    private get isUpdate();
     private initTextarea;
-    private areAttachemntsValid;
     private setCanSendMessages;
     private get parentMessageId();
     private startCooldown;
     private stopCooldown;
+    private checkIfInEditMode;
+    private messageToUpdateChanged;
     static ɵfac: i0.ɵɵFactoryDeclaration<MessageInputComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MessageInputComponent, "stream-message-input", never, { "isFileUploadEnabled": "isFileUploadEnabled"; "areMentionsEnabled": "areMentionsEnabled"; "mentionScope": "mentionScope"; "mode": "mode"; "isMultipleFileUploadEnabled": "isMultipleFileUploadEnabled"; "message": "message"; "sendMessage$": "sendMessage$"; "inputMode": "inputMode"; "autoFocus": "autoFocus"; }, { "messageUpdate": "messageUpdate"; }, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MessageInputComponent, "stream-message-input", never, { "isFileUploadEnabled": "isFileUploadEnabled"; "areMentionsEnabled": "areMentionsEnabled"; "mentionScope": "mentionScope"; "mode": "mode"; "isMultipleFileUploadEnabled": "isMultipleFileUploadEnabled"; "message": "message"; "sendMessage$": "sendMessage$"; "inputMode": "inputMode"; "autoFocus": "autoFocus"; "watchForMessageToEdit": "watchForMessageToEdit"; "displaySendButton": "displaySendButton"; }, { "messageUpdate": "messageUpdate"; }, never, never, false, never>;
 }

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

@@ -36,6 +36,7 @@ export declare class TextareaComponent implements TextareaInterface, OnChanges,
     readonly send: EventEmitter<void>;
     private messageInput;
     private subscriptions;
+    private isViewInited;
     constructor(emojiInputService: EmojiInputService, themeService: ThemeService);
     ngOnChanges(changes: SimpleChanges): void;
     ngAfterViewInit(): void;

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

@@ -1,6 +1,6 @@
 import { AfterViewChecked, AfterViewInit, ChangeDetectorRef, NgZone, OnChanges, OnDestroy, OnInit, SimpleChanges, TemplateRef } from '@angular/core';
 import { ChannelService } from '../channel.service';
-import { Observable } from 'rxjs';
+import { Observable, Subject } from 'rxjs';
 import { MessageContext, StreamMessage, TypingIndicatorContext, DateSeparatorContext, UnreadMessagesNotificationContext, UnreadMessagesIndicatorContext } from '../types';
 import { ChatClientService } from '../chat-client.service';
 import { GroupStyle } from './group-styles';
@@ -26,10 +26,6 @@ export declare class MessageListComponent implements AfterViewChecked, OnChanges
      * The direction of the messages in the list, `bottom-to-top` means newest message is at the bottom of the message list and users scroll upwards to load older messages
      */
     direction: 'bottom-to-top' | 'top-to-bottom';
-    /**
-     * Determines what triggers the appearance of the message options: by default you can hover (click on mobile) anywhere in the row of the message (`message-row` option), or you can set `message-bubble`, in that case only a hover (click on mobile) in the message bubble will trigger the options to appear.
-     */
-    messageOptionsTrigger: 'message-row' | 'message-bubble';
     /**
      * You can hide the "jump to latest" button while scrolling. A potential use-case for this input would be to [workaround a known issue on iOS Safar webview](https://github.com/GetStream/stream-chat-angular/issues/418)
      *
@@ -61,6 +57,10 @@ export declare class MessageListComponent implements AfterViewChecked, OnChanges
      * You can turn on and off the loading indicator that signals to users that more messages are being loaded to the message list
      */
     displayLoadingIndicator: boolean;
+    /**
+     * @internal
+     */
+    limitNumberOfMessagesInList: boolean;
     typingIndicatorTemplate: TemplateRef<TypingIndicatorContext> | undefined;
     messageTemplate: TemplateRef<MessageContext> | undefined;
     customDateSeparatorTemplate: TemplateRef<DateSeparatorContext> | undefined;
@@ -86,6 +86,7 @@ export declare class MessageListComponent implements AfterViewChecked, OnChanges
     unreadCount?: number;
     isJumpingToLatestUnreadMessage: boolean;
     isJumpToLatestButtonVisible: boolean;
+    scroll$: Subject<void>;
     private scrollContainer;
     private parentMessageElement;
     private latestMessage;
@@ -105,6 +106,10 @@ export declare class MessageListComponent implements AfterViewChecked, OnChanges
     private isViewInited;
     private checkIfUnreadNotificationIsVisibleTimeout?;
     private jumpToLatestButtonVisibilityTimeout?;
+    private messageRemoveTimeout?;
+    private removeOldMessagesSubscription?;
+    private isSafari;
+    private forceRepaintSubject;
     private get class();
     constructor(channelService: ChannelService, chatClientService: ChatClientService, customTemplatesService: CustomTemplatesService, dateParser: DateParserService, ngZone: NgZone, cdRef: ChangeDetectorRef);
     messageNotificationJumpClicked: () => void;
@@ -141,5 +146,5 @@ export declare class MessageListComponent implements AfterViewChecked, OnChanges
     private newMessageReceived;
     private checkIfOnSeparateDates;
     static ɵfac: i0.ɵɵFactoryDeclaration<MessageListComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MessageListComponent, "stream-message-list", never, { "mode": "mode"; "direction": "direction"; "messageOptionsTrigger": "messageOptionsTrigger"; "hideJumpToLatestButtonDuringScroll": "hideJumpToLatestButtonDuringScroll"; "displayDateSeparator": "displayDateSeparator"; "displayUnreadSeparator": "displayUnreadSeparator"; "dateSeparatorTextPos": "dateSeparatorTextPos"; "openMessageListAt": "openMessageListAt"; "hideUnreadCountForNotificationAndIndicator": "hideUnreadCountForNotificationAndIndicator"; "displayLoadingIndicator": "displayLoadingIndicator"; }, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MessageListComponent, "stream-message-list", never, { "mode": "mode"; "direction": "direction"; "hideJumpToLatestButtonDuringScroll": "hideJumpToLatestButtonDuringScroll"; "displayDateSeparator": "displayDateSeparator"; "displayUnreadSeparator": "displayUnreadSeparator"; "dateSeparatorTextPos": "dateSeparatorTextPos"; "openMessageListAt": "openMessageListAt"; "hideUnreadCountForNotificationAndIndicator": "hideUnreadCountForNotificationAndIndicator"; "displayLoadingIndicator": "displayLoadingIndicator"; "limitNumberOfMessagesInList": "limitNumberOfMessagesInList"; }, {}, never, never, false, never>;
 }

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

@@ -1,4 +1,4 @@
-import { AfterViewChecked, AfterViewInit, ChangeDetectorRef, EventEmitter, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
+import { AfterViewInit, ChangeDetectorRef, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
 import { ReactionResponse, UserResponse } from 'stream-chat';
 import { ChannelService } from '../channel.service';
 import { MessageReactionType, DefaultStreamChatGenerics } from '../types';
@@ -6,9 +6,9 @@ import { MessageReactionsService } from '../message-reactions.service';
 import { CustomTemplatesService } from '../custom-templates.service';
 import * as i0 from "@angular/core";
 /**
- * The `MessageReactions` component displays the reactions of a message, the current user can add and remove reactions. You can read more about [message reactions](https://getstream.io/chat/docs/javascript/send_reaction/?language=javascript) in the platform documentation.
+ * The `MessageReactions` component displays the reactions of a message. You can read more about [message reactions](https://getstream.io/chat/docs/javascript/send_reaction/?language=javascript) in the platform documentation.
  */
-export declare class MessageReactionsComponent implements AfterViewChecked, OnChanges, OnInit, AfterViewInit, OnDestroy {
+export declare class MessageReactionsComponent implements OnChanges, OnInit, AfterViewInit, OnDestroy {
     private cdRef;
     private channelService;
     private messageReactionsService;
@@ -23,10 +23,6 @@ export declare class MessageReactionsComponent implements AfterViewChecked, OnCh
     messageReactionCounts: {
         [key in MessageReactionType]?: number;
     };
-    /**
-     * Indicates if the selector should be opened or closed. Adding a UI element to open and close the selector is the parent's component responsibility.
-     */
-    isSelectorOpen: boolean;
     /**
      * List of reactions of a [message](../types/stream-message.mdx), used to display the users of a reaction type.
      */
@@ -35,18 +31,7 @@ export declare class MessageReactionsComponent implements AfterViewChecked, OnCh
      * List of the user's own reactions of a [message](../types/stream-message.mdx), used to display the users of a reaction type.
      */
     ownReactions: ReactionResponse<DefaultStreamChatGenerics>[];
-    /**
-     * Indicates if the selector should be opened or closed. Adding a UI element to open and close the selector is the parent's component responsibility.
-     */
-    readonly isSelectorOpenChange: EventEmitter<boolean>;
-    tooltipPositions: {
-        arrow: number;
-        tooltip: number;
-    } | undefined;
-    tooltipText: string | undefined;
     private selectorContainer;
-    private selectorTooltip;
-    currentTooltipTarget: HTMLElement | undefined;
     selectedReactionType: string | undefined;
     isLoading: boolean;
     reactions: ReactionResponse[];
@@ -60,26 +45,17 @@ export declare class MessageReactionsComponent implements AfterViewChecked, OnCh
     ngOnInit(): void;
     ngOnChanges(changes: SimpleChanges): void;
     ngAfterViewInit(): void;
-    ngAfterViewChecked(): void;
     ngOnDestroy(): void;
-    getLatestUserByReaction(reactionType: MessageReactionType): UserResponse<DefaultStreamChatGenerics> | null | undefined;
     getEmojiByReaction(reactionType: MessageReactionType): string;
     reactionSelected(reactionType: string): void;
     getUsersByReaction(reactionType: MessageReactionType): string;
     getAllUsersByReaction(reactionType?: MessageReactionType): UserResponse<DefaultStreamChatGenerics>[];
-    showTooltip(event: Event, reactionType: MessageReactionType): void;
-    hideTooltip(): void;
-    trackByMessageReaction(index: number, item: MessageReactionType): string;
-    trackByUserId(index: number, item: UserResponse): string;
-    react(type: MessageReactionType): Promise<void>;
+    trackByMessageReaction(_: number, item: MessageReactionType): string;
+    trackByUserId(_: number, item: UserResponse): string;
     isOwnReaction(reactionType: MessageReactionType): boolean;
     isOpenChange: (isOpen: boolean) => void;
-    private eventHandler;
-    private watchForOutsideClicks;
-    private stopWatchForOutsideClicks;
-    private setTooltipPosition;
     private fetchAllReactions;
     private setExistingReactions;
     static ɵfac: i0.ɵɵFactoryDeclaration<MessageReactionsComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MessageReactionsComponent, "stream-message-reactions", never, { "messageId": "messageId"; "messageReactionCounts": "messageReactionCounts"; "isSelectorOpen": "isSelectorOpen"; "latestReactions": "latestReactions"; "ownReactions": "ownReactions"; }, { "isSelectorOpenChange": "isSelectorOpenChange"; }, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MessageReactionsComponent, "stream-message-reactions", never, { "messageId": "messageId"; "messageReactionCounts": "messageReactionCounts"; "latestReactions": "latestReactions"; "ownReactions": "ownReactions"; }, {}, never, never, false, never>;
 }

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

@@ -0,0 +1,35 @@
+import { AfterViewInit, ChangeDetectorRef, OnDestroy, OnInit } from '@angular/core';
+import { DefaultStreamChatGenerics, MessageReactionType } from '../types';
+import { ReactionResponse } from 'stream-chat';
+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.
+ */
+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.
+     */
+    ownReactions: ReactionResponse<DefaultStreamChatGenerics>[];
+    /**
+     * The id of the message the reactions belong to
+     */
+    messageId: string | undefined;
+    reactionOptions: string[];
+    private subscriptions;
+    private isViewInited;
+    constructor(channelService: ChannelService, messageReactionsService: MessageReactionsService, cdRef: ChangeDetectorRef);
+    ngOnInit(): void;
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+    trackByMessageReaction(_: number, item: MessageReactionType): string;
+    isOwnReaction(reactionType: MessageReactionType): boolean;
+    getEmojiByReaction(reactionType: MessageReactionType): string;
+    react(type: MessageReactionType): Promise<void>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MessageReactionsSelectorComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MessageReactionsSelectorComponent, "stream-message-reactions-selector", never, { "ownReactions": "ownReactions"; "messageId": "messageId"; }, {}, never, never, false, never>;
+}

package/lib/stream-chat.module.d.ts

@@ -19,16 +19,16 @@ import * as i17 from "./message-input/textarea.directive";
 import * as i18 from "./thread/thread.component";
 import * as i19 from "./icon-placeholder/icon-placeholder.component";
 import * as i20 from "./loading-indicator-placeholder/loading-indicator-placeholder.component";
-import * as i21 from "./edit-message-form/edit-message-form.component";
-import * as i22 from "./message-bounce-prompt/message-bounce-prompt.component";
-import * as i23 from "./voice-recording/voice-recording.component";
-import * as i24 from "./voice-recording/voice-recording-wavebar/voice-recording-wavebar.component";
+import * as i21 from "./message-bounce-prompt/message-bounce-prompt.component";
+import * as i22 from "./voice-recording/voice-recording.component";
+import * as i23 from "./voice-recording/voice-recording-wavebar/voice-recording-wavebar.component";
+import * as i24 from "./message-reactions-selector/message-reactions-selector.component";
 import * as i25 from "@angular/common";
 import * as i26 from "ngx-float-ui";
 import * as i27 from "./stream-avatar.module";
 import * as i28 from "@ngx-translate/core";
 export declare class StreamChatModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<StreamChatModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<StreamChatModule, [typeof i1.ChannelComponent, typeof i2.ChannelHeaderComponent, typeof i3.ChannelListComponent, typeof i4.ChannelPreviewComponent, typeof i5.MessageComponent, typeof i6.MessageInputComponent, typeof i7.MessageListComponent, typeof i8.LoadingIndicatorComponent, typeof i9.IconComponent, typeof i10.MessageActionsBoxComponent, typeof i11.AttachmentListComponent, typeof i12.MessageReactionsComponent, typeof i13.NotificationComponent, typeof i14.NotificationListComponent, typeof i15.AttachmentPreviewListComponent, typeof i16.ModalComponent, typeof i17.TextareaDirective, typeof i18.ThreadComponent, typeof i19.IconPlaceholderComponent, typeof i20.LoadingIndicatorPlaceholderComponent, typeof i21.EditMessageFormComponent, typeof i22.MessageBouncePromptComponent, typeof i23.VoiceRecordingComponent, typeof i24.VoiceRecordingWavebarComponent], [typeof i25.CommonModule, typeof i26.NgxFloatUiModule, typeof i27.StreamAvatarModule, typeof i28.TranslateModule], [typeof i1.ChannelComponent, typeof i2.ChannelHeaderComponent, typeof i3.ChannelListComponent, typeof i4.ChannelPreviewComponent, typeof i5.MessageComponent, typeof i6.MessageInputComponent, typeof i7.MessageListComponent, typeof i8.LoadingIndicatorComponent, typeof i9.IconComponent, typeof i10.MessageActionsBoxComponent, typeof i11.AttachmentListComponent, typeof i12.MessageReactionsComponent, typeof i13.NotificationComponent, typeof i14.NotificationListComponent, typeof i15.AttachmentPreviewListComponent, typeof i16.ModalComponent, typeof i27.StreamAvatarModule, typeof i18.ThreadComponent, typeof i19.IconPlaceholderComponent, typeof i20.LoadingIndicatorPlaceholderComponent, typeof i21.EditMessageFormComponent, typeof i22.MessageBouncePromptComponent, typeof i23.VoiceRecordingComponent, typeof i24.VoiceRecordingWavebarComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<StreamChatModule, [typeof i1.ChannelComponent, typeof i2.ChannelHeaderComponent, typeof i3.ChannelListComponent, typeof i4.ChannelPreviewComponent, typeof i5.MessageComponent, typeof i6.MessageInputComponent, typeof i7.MessageListComponent, typeof i8.LoadingIndicatorComponent, typeof i9.IconComponent, typeof i10.MessageActionsBoxComponent, typeof i11.AttachmentListComponent, typeof i12.MessageReactionsComponent, typeof i13.NotificationComponent, typeof i14.NotificationListComponent, typeof i15.AttachmentPreviewListComponent, typeof i16.ModalComponent, typeof i17.TextareaDirective, typeof i18.ThreadComponent, typeof i19.IconPlaceholderComponent, typeof i20.LoadingIndicatorPlaceholderComponent, typeof i21.MessageBouncePromptComponent, typeof i22.VoiceRecordingComponent, typeof i23.VoiceRecordingWavebarComponent, typeof i24.MessageReactionsSelectorComponent], [typeof i25.CommonModule, typeof i26.NgxFloatUiModule, typeof i27.StreamAvatarModule, typeof i28.TranslateModule], [typeof i1.ChannelComponent, typeof i2.ChannelHeaderComponent, typeof i3.ChannelListComponent, typeof i4.ChannelPreviewComponent, typeof i5.MessageComponent, typeof i6.MessageInputComponent, typeof i7.MessageListComponent, typeof i8.LoadingIndicatorComponent, typeof i9.IconComponent, typeof i10.MessageActionsBoxComponent, typeof i11.AttachmentListComponent, typeof i12.MessageReactionsComponent, typeof i13.NotificationComponent, typeof i14.NotificationListComponent, typeof i15.AttachmentPreviewListComponent, typeof i16.ModalComponent, typeof i27.StreamAvatarModule, typeof i18.ThreadComponent, typeof i19.IconPlaceholderComponent, typeof i20.LoadingIndicatorPlaceholderComponent, typeof i21.MessageBouncePromptComponent, typeof i22.VoiceRecordingComponent, typeof i23.VoiceRecordingWavebarComponent, typeof i24.MessageReactionsSelectorComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<StreamChatModule>;
 }

package/lib/types.d.ts

@@ -109,16 +109,6 @@ export declare type ChannelPreviewInfoContext<T extends DefaultStreamChatGeneric
     latestMessageTime?: string;
     unreadCount: number;
 };
-export declare type MessageInputContext = {
-    isFileUploadEnabled: boolean | undefined;
-    areMentionsEnabled: boolean | undefined;
-    mentionScope: 'channel' | 'application' | undefined;
-    mode: 'thread' | 'main' | undefined;
-    isMultipleFileUploadEnabled: boolean | undefined;
-    message: StreamMessage | undefined;
-    messageUpdateHandler: () => void | undefined;
-    sendMessage$: Observable<void>;
-};
 export declare type MentionTemplateContext = {
     content: string;
     user: UserResponse;
@@ -136,6 +126,7 @@ export declare type MessageContext = {
     mode: 'thread' | 'main';
     isHighlighted: boolean;
     customActions: CustomMessageActionItem[];
+    scroll$?: Observable<void>;
 };
 export declare type ChannelActionsContext<T extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {
     channel: Channel<T>;
@@ -151,7 +142,6 @@ export declare type AvatarLocation = 'channel-preview' | 'channel-header' | 'mes
 export declare type AvatarContext = {
     name: string | undefined;
     imageUrl: string | undefined;
-    size: number | undefined;
     type: AvatarType | undefined;
     location: AvatarLocation | undefined;
     channel?: Channel<DefaultStreamChatGenerics>;
@@ -166,44 +156,51 @@ export declare type AttachmentPreviewListContext = {
 };
 export declare type IconContext = {
     icon: Icon | undefined;
-    size: number | undefined;
 };
-export declare type LoadingIndicatorContext = {
-    size: number | undefined;
-    color: string | undefined;
-};
-export declare type MessageActionsBoxContext = {
+export declare type MessageActionsBoxContext<T extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {
     isMine: boolean;
-    message: StreamMessage | undefined;
+    message: StreamMessage<T> | undefined;
     enabledActions: string[];
+    messageTextHtmlElement: HTMLElement | undefined;
 };
+export declare type MessageActionHandlerExtraParams = {
+    isMine: boolean;
+    messageTextHtmlElement?: HTMLElement;
+};
+export declare type MessageActionHandler<T extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = (message: StreamMessage<T>, params: MessageActionHandlerExtraParams) => void;
 export declare type MessageActionBoxItemContext<T extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {
     actionName: string;
     actionLabelOrTranslationKey: ((message: StreamMessage<T>) => string) | string;
     message: StreamMessage<T>;
-    isMine: boolean;
-    actionHandler: (message: StreamMessage<T>, isMine: boolean) => void;
+    actionHandlerExtraParams: MessageActionHandlerExtraParams;
+    actionHandler: MessageActionHandler<T>;
+};
+export declare type MessageReactionActionItem<T extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {
+    actionName: 'react';
+    isVisible: (enabledActions: string[], isMine: boolean, message: StreamMessage<T>) => boolean;
 };
 declare type MessageActionItemBase<T extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {
     actionLabelOrTranslationKey: ((message: StreamMessage<T>) => string) | string;
     isVisible: (enabledActions: string[], isMine: boolean, message: StreamMessage<T>) => boolean;
-    actionHandler: (message: StreamMessage<T>, isMine: boolean) => void;
+    actionHandler: MessageActionHandler;
 };
 export declare type MessageActionItem<T extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = MessageActionItemBase<T> & {
-    actionName: 'quote' | 'pin' | 'flag' | 'edit' | 'delete' | 'mark-unread';
+    actionName: 'quote' | 'pin' | 'flag' | 'edit' | 'delete' | 'mark-unread' | 'thread-reply' | 'copy-message-text';
 };
 export declare type CustomMessageActionItem<T extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = MessageActionItemBase<T> & {
     actionName: string;
 };
+export declare type MessageReactionsSelectorContext = {
+    messageId: string | undefined;
+    ownReactions: ReactionResponse<DefaultStreamChatGenerics>[];
+};
 export declare type MessageReactionsContext = {
     messageId: string | undefined;
     messageReactionCounts: {
         [key in MessageReactionType]?: number;
     };
-    isSelectorOpen: boolean;
     latestReactions: ReactionResponse<DefaultStreamChatGenerics>[];
     ownReactions: ReactionResponse<DefaultStreamChatGenerics>[];
-    isSelectorOpenChangeHandler: (isOpen: boolean) => void;
 };
 export declare type ModalContext = {
     isOpen: boolean;
@@ -288,15 +285,12 @@ export declare type FiltertNextPageConfiguration<T extends DefaultStreamChatGene
     type: 'filter';
     paginationFilter: ChannelFilters<T>;
 };
-export declare type NextPageConfiguration = OffsetNextPageConfiguration | FiltertNextPageConfiguration;
+export declare type NextPageConfiguration = OffsetNextPageConfiguration | FiltertNextPageConfiguration | undefined;
 export declare type MessageReactionClickDetails = {
     messageId: string;
     reactionType: string;
 };
-export declare type MessageActionsClickDetails<T extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {
-    message: StreamMessage<T>;
-    enabledActions: string[];
-    isMine: boolean;
+export declare type MessageActionsClickDetails<T extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = MessageActionsBoxContext<T> & {
     customActions: CustomMessageActionItem[];
 };
 export declare type GroupStyleOptions = {
@@ -304,4 +298,9 @@ export declare type GroupStyleOptions = {
     lastReadMessageId?: string;
     noGroupByReadState?: boolean;
 };
+export declare type ChannelQueryType = 'first-page' | 'next-page' | 'recover-state';
+export declare type ChannelQueryResult<T extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {
+    channels: Channel<T>[];
+    hasMorePage: boolean;
+};
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stream-chat-angular",
-  "version": "5.0.0-v5.8",
+  "version": "5.0.0",
   "description": "Angular components to create chat conversations or livestream style chat",
   "author": "GetStream",
   "homepage": "https://getstream.io/chat/",
@@ -9,12 +9,12 @@
     "url": "https://github.com/GetStream/stream-chat-angular.git"
   },
   "peerDependencies": {
-    "@angular/common": "^15.0.0 || ^16.0.0 || ^17.0.0",
-    "@angular/core": "^15.0.0 || ^16.0.0 || ^17.0.0",
+    "@angular/common": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0",
+    "@angular/core": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0",
     "@floating-ui/dom": "^1.6.3",
     "@ngx-translate/core": "^14.0.0 || ^15.0.0",
     "angular-mentions": "^1.4.0",
-    "ngx-float-ui": "^15.0.0|| ^16.0.0 || ^17.0.0",
+    "ngx-float-ui": "^15.0.0|| ^16.0.0 || ^17.0.0 || ^18.0.0 || ^18.0.1-rc.0",
     "rxjs": "^7.4.0",
     "stream-chat": "^8.26.0"
   },
@@ -24,7 +24,7 @@
     "emoji-regex": "^10.3.0",
     "pretty-bytes": "^6.1.1",
     "tslib": "^2.3.0",
-    "uuidv4": "^6.2.13"
+    "uuid": "^9.0.1"
   },
   "module": "fesm2015/stream-chat-angular.mjs",
   "es2020": "fesm2020/stream-chat-angular.mjs",

package/public-api.d.ts

@@ -19,7 +19,6 @@ export * from './lib/message/message.component';
 export * from './lib/parse-date';
 export * from './lib/list-users';
 export * from './lib/message-input/message-input.component';
-export * from './lib/edit-message-form/edit-message-form.component';
 export * from './lib/message-bounce-prompt/message-bounce-prompt.component';
 export * from './lib/message-input/textarea/textarea.component';
 export * from './lib/message-input/autocomplete-textarea/autocomplete-textarea.component';
@@ -58,3 +57,5 @@ export * from './lib/message-actions.service';
 export * from './lib/voice-recording/voice-recording.component';
 export * from './lib/voice-recording/voice-recording-wavebar/voice-recording-wavebar.component';
 export * from './lib/is-on-separate-date';
+export * from './lib/message-reactions-selector/message-reactions-selector.component';
+export * from './lib/channel-query';