stream-chat-angular 4.0.0 → 4.3.0

package/lib/attachment-configuration.service.d.ts

@@ -0,0 +1,58 @@
+import { Attachment } from 'stream-chat';
+import { AttachmentConfigration, DefaultStreamChatGenerics, VideoAttachmentConfiguration } from './types';
+import * as i0 from "@angular/core";
+/**
+ * The `AttachmentConfigurationService` provides customization for certain attributes of attachments displayed inside the message component. If you're using your own CDN, you can integrate resizing features of it by providing your own handlers.
+ */
+export declare class AttachmentConfigurationService<T extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> {
+    /**
+     * A custom handler can be provided to override the default image attachment (images uploaded from files) configuration. By default the SDK uses fixed image height (a size that's known before image is loaded), if you override that with dynamic image height (for example: height: 100%) the scrolling logic inside the message list can break.
+     */
+    customImageAttachmentConfigurationHandler?: (a: Attachment<T>, type: 'gallery' | 'single' | 'carousel', containerElement: HTMLElement) => AttachmentConfigration;
+    /**
+     * A custom handler can be provided to override the default video attachment (videos uploaded from files) configuration. By default the SDK uses fixed height (a size that's known before video is loaded), if you override that with dynamic height (for example: height: 100%) the scrolling logic inside the message list can break.
+     */
+    customVideoAttachmentConfigurationHandler?: (a: Attachment<T>, containerElement: HTMLElement) => VideoAttachmentConfiguration;
+    /**
+     * A custom handler can be provided to override the default giphy attachment (GIFs sent with the /giphy command) configuration. By default the SDK uses fixed height (a size that's known before the GIF is loaded), if you override that with dynamic height (for example: height: 100%) the scrolling logic inside the message list can break.
+     */
+    customGiphyAttachmentConfigurationHandler?: (a: Attachment<T>) => AttachmentConfigration;
+    /**
+     * A custom handler can be provided to override the default scraped image attachment (images found in links inside messages) configuration. By default the SDK uses fixed height (a size that's known before image is loaded), if you override that with dynamic height (for example: height: 100%) the scrolling logic inside the message list can break.
+     */
+    customScrapedImageAttachmentConfigurationHandler?: (a: Attachment<T>) => AttachmentConfigration;
+    /**
+     * You can turn on/off thumbnail generation for video attachments
+     */
+    shouldGenerateVideoThumbnail: boolean;
+    /**
+     * Handles the configuration for image attachments, it's possible to provide your own function to override the default logic
+     * @param attachment The attachment to configure
+     * @param location Specifies where the image is being displayed
+     * @param element The default resizing logics reads the height/max-height and max-width propperties of this element and reduces file size based on the given values. File size reduction is done by Stream's CDN.
+     */
+    getImageAttachmentConfiguration(attachment: Attachment<T>, location: 'gallery' | 'single' | 'carousel', element: HTMLElement): AttachmentConfigration;
+    /**
+     * Handles the configuration for video attachments, it's possible to provide your own function to override the default logic
+     * @param attachment The attachment to configure
+     * @param element The default resizing logics reads the height/max-height and max-width propperties of this element and reduces file size based on the given values. File size reduction is done by Stream's CDN.
+     */
+    getVideoAttachmentConfiguration(attachment: Attachment<T>, element: HTMLElement): VideoAttachmentConfiguration;
+    /**
+     * Handles the configuration for giphy attachments, it's possible to provide your own function to override the default logic
+     * @param attachment The attachment to configure
+     */
+    getGiphyAttachmentConfiguration(attachment: Attachment<T>): AttachmentConfigration;
+    /**
+     * Handles the configuration for scraped image attachments, it's possible to provide your own function to override the default logic
+     * @param attachment The attachment to configure
+     */
+    getScrapedImageAttachmentConfiguration(attachment: Attachment<T>): AttachmentConfigration;
+    private addResizingParamsToUrl;
+    private getSizingRestrictions;
+    private getSizeRestrictions;
+    private getCSSSizeRestriction;
+    private getValueRepresentationOfCSSProperty;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AttachmentConfigurationService<any>, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<AttachmentConfigurationService<any>>;
+}

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

@@ -1,9 +1,9 @@
-import { OnChanges } from '@angular/core';
+import { OnChanges, SimpleChanges } from '@angular/core';
 import { Action, Attachment } from 'stream-chat';
-import { ImageLoadService } from '../message-list/image-load.service';
-import { ModalContext, DefaultStreamChatGenerics } from '../types';
+import { ModalContext, DefaultStreamChatGenerics, AttachmentConfigration, VideoAttachmentConfiguration } from '../types';
 import { ChannelService } from '../channel.service';
 import { CustomTemplatesService } from '../custom-templates.service';
+import { AttachmentConfigurationService } from '../attachment-configuration.service';
 import { ThemeService } from '../theme.service';
 import * as i0 from "@angular/core";
 /**
@@ -11,8 +11,8 @@ import * as i0 from "@angular/core";
  */
 export declare class AttachmentListComponent implements OnChanges {
     readonly customTemplatesService: CustomTemplatesService;
-    private imageLoadService;
     private channelService;
+    private attachmentConfigurationService;
     /**
      * The id of the message the attachments belong to
      */
@@ -31,16 +31,16 @@ export declare class AttachmentListComponent implements OnChanges {
     imagesToViewCurrentIndex: number;
     themeVersion: '1' | '2';
     private modalContent;
-    constructor(customTemplatesService: CustomTemplatesService, imageLoadService: ImageLoadService, channelService: ChannelService, themeService: ThemeService);
-    ngOnChanges(): void;
-    trackById(index: number): number;
+    private attachmentConfigurations;
+    constructor(customTemplatesService: CustomTemplatesService, channelService: ChannelService, attachmentConfigurationService: AttachmentConfigurationService, themeService: ThemeService);
+    ngOnChanges(changes: SimpleChanges): void;
+    trackByUrl(_: number, attachment: Attachment): unknown;
     isImage(attachment: Attachment): boolean;
     isSvg(attachment: Attachment): boolean;
     isFile(attachment: Attachment): boolean;
     isGallery(attachment: Attachment): boolean;
     isVideo(attachment: Attachment): boolean | "" | undefined;
     isCard(attachment: Attachment): boolean;
-    imageLoaded(): void;
     hasFileSize(attachment: Attachment<DefaultStreamChatGenerics>): boolean | "" | 0 | undefined;
     getFileSize(attachment: Attachment<DefaultStreamChatGenerics>): string;
     getModalContext(): ModalContext;
@@ -50,6 +50,10 @@ export declare class AttachmentListComponent implements OnChanges {
     openImageModal(attachments: Attachment[], selectedIndex?: number): void;
     stepImages(dir: -1 | 1): void;
     trackByImageUrl(_: number, item: Attachment): unknown;
+    getImageAttachmentConfiguration(attachment: Attachment, type: 'gallery' | 'single', element: HTMLElement): AttachmentConfigration;
+    getCarouselImageAttachmentConfiguration(attachment: Attachment, element: HTMLElement): AttachmentConfigration;
+    getVideoAttachmentConfiguration(attachment: Attachment, element: HTMLElement): VideoAttachmentConfiguration;
+    getCardAttachmentConfiguration(attachment: Attachment): AttachmentConfigration;
     get isImageModalPrevButtonVisible(): boolean;
     get isImageModalNextButtonVisible(): boolean;
     private createGallery;

package/lib/avatar/avatar.component.d.ts

@@ -39,6 +39,8 @@ export declare class AvatarComponent {
     isError: boolean;
     constructor(chatClientService: ChatClientService);
     get initials(): string;
+    get fallbackChannelImage(): string | undefined;
+    private getOtherMemberIfOneToOneChannel;
     static ɵfac: i0.ɵɵFactoryDeclaration<AvatarComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<AvatarComponent, "stream-avatar", never, { "name": "name"; "imageUrl": "imageUrl"; "size": "size"; "location": "location"; "channel": "channel"; "user": "user"; "type": "type"; }, {}, never, never>;
 }

package/lib/channel.service.d.ts

@@ -56,6 +56,10 @@ export declare class ChannelService<T extends DefaultStreamChatGenerics = Defaul
      * Emits the list of currently loaded messages of the active channel.
      */
     activeChannelMessages$: Observable<StreamMessage<T>[]>;
+    /**
+     * Emits the list of pinned messages of the active channel.
+     */
+    activeChannelPinnedMessages$: Observable<StreamMessage<T>[]>;
     /**
      * Emits the id of the currently selected parent message. If no message is selected, it emits undefined.
      */
@@ -72,6 +76,13 @@ export declare class ChannelService<T extends DefaultStreamChatGenerics = Defaul
      * Emits the currently selected message to quote
      */
     messageToQuote$: Observable<StreamMessage<T> | undefined>;
+    /**
+     * Emits the ID of the message the message list should jump to (can be a channel message or thread message)
+     */
+    jumpToMessage$: Observable<{
+        id?: string;
+        parentId?: string;
+    }>;
     /**
      * Emits the list of users that are currently typing in the channel (current user is not included)
      */
@@ -145,10 +156,12 @@ export declare class ChannelService<T extends DefaultStreamChatGenerics = Defaul
     private channelsSubject;
     private activeChannelSubject;
     private activeChannelMessagesSubject;
+    private activeChannelPinnedMessagesSubject;
     private hasMoreChannelsSubject;
     private activeChannelSubscriptions;
     private activeParentMessageIdSubject;
     private activeThreadMessagesSubject;
+    private jumpToMessageSubject;
     private latestMessageDateByUserByChannelsSubject;
     private filters;
     private sort;
@@ -186,16 +199,19 @@ export declare class ChannelService<T extends DefaultStreamChatGenerics = Defaul
     /**
      * Sets the given `message` as an active parent message. If `undefined` is provided, it will deleselect the current parent message.
      * @param message
+     * @param loadMessagesForm
      */
-    setAsActiveParentMessage(message: StreamMessage<T> | undefined): Promise<void>;
+    setAsActiveParentMessage(message: StreamMessage<T> | undefined, loadMessagesForm?: 'request' | 'state'): Promise<void>;
     /**
      * Loads the next page of messages of the active channel. The page size can be set in the [query option](https://getstream.io/chat/docs/javascript/query_channels/?language=javascript#query-options) object.
+     * @param direction
      */
-    loadMoreMessages(): Promise<void>;
+    loadMoreMessages(direction?: 'older' | 'newer'): Promise<void>;
     /**
      * Loads the next page of messages of the active thread. The page size can be set in the [query option](https://getstream.io/chat/docs/javascript/query_channels/?language=javascript#query-options) object.
+     * @param direction
      */
-    loadMoreThreadReplies(): Promise<void>;
+    loadMoreThreadReplies(direction?: 'older' | 'newer'): Promise<void>;
     /**
      * Queries the channels with the given filters, sorts and options. More info about [channel querying](https://getstream.io/chat/docs/javascript/query_channels/?language=javascript) can be found in the platform documentation. By default the first channel in the list will be set as active channel and will be marked as read.
      * @param filters
@@ -281,6 +297,22 @@ export declare class ChannelService<T extends DefaultStreamChatGenerics = Defaul
      */
     selectMessageToQuote(message: StreamMessage | undefined): void;
     private sendMessageRequest;
+    /**
+     * Jumps to the selected message inside the message list, if the message is not yet loaded, it'll load the message (and it's surroundings) from the API.
+     * @param messageId The ID of the message to be loaded, 'latest' means jump to the latest messages
+     * @param parentMessageId The ID of the parent message if we want to load a thread message
+     */
+    jumpToMessage(messageId: string, parentMessageId?: string): Promise<void>;
+    /**
+     * Pins the given message in the channel
+     * @param message
+     */
+    pinMessage(message: StreamMessage<DefaultStreamChatGenerics>): Promise<void>;
+    /**
+     * Removes the given message from pinned messages
+     * @param message
+     */
+    unpinMessage(message: StreamMessage<DefaultStreamChatGenerics>): Promise<void>;
     private handleNotification;
     private handleRemovedFromChannelNotification;
     private handleNewMessageNotification;

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

@@ -36,6 +36,10 @@ export declare class MessageComponent implements OnInit, OnChanges, OnDestroy {
      * Determines if the message is being dispalyed in a channel or in a [thread](https://getstream.io/chat/docs/javascript/threads/?language=javascript).
      */
     mode: 'thread' | 'main';
+    /**
+     * Highlighting is used to add visual emphasize to a message when jumping to the message
+     */
+    isHighlighted: boolean;
     readonly themeVersion: '1' | '2';
     canReceiveReadEvents: boolean | undefined;
     canReactToMessage: boolean | undefined;
@@ -51,6 +55,7 @@ export declare class MessageComponent implements OnInit, OnChanges, OnDestroy {
     popperTriggerClick: NgxPopperjsTriggers;
     popperTriggerHover: NgxPopperjsTriggers;
     popperPlacementAuto: NgxPopperjsPlacements;
+    private quotedMessageAttachments;
     private user;
     private subscriptions;
     private container;
@@ -73,26 +78,6 @@ export declare class MessageComponent implements OnInit, OnChanges, OnDestroy {
         replyCount: number | undefined;
     };
     get canDisplayReadStatus(): boolean;
-    get quotedMessageAttachments(): import("stream-chat").Attachment<{
-        attachmentType: import("stream-chat").UR & import("../types").UnknownType & {
-            asset_url?: string | undefined;
-            id?: string | undefined;
-            images?: import("stream-chat").Attachment<DefaultStreamChatGenerics>[] | undefined;
-            mime_type?: string | undefined;
-        };
-        channelType: import("stream-chat").UR & import("../types").UnknownType & {
-            image?: string | undefined;
-            member_count?: number | undefined;
-            subtitle?: string | undefined;
-        };
-        commandType: string & {};
-        eventType: import("stream-chat").UR & import("../types").UnknownType;
-        messageType: {};
-        reactionType: import("stream-chat").UR & import("../types").UnknownType;
-        userType: import("stream-chat").UR & import("../types").UnknownType & import("../types").DefaultUserTypeInternal & {
-            mutes?: import("stream-chat").Mute<DefaultStreamChatGenerics>[] | undefined;
-        };
-    }>[];
     getAttachmentListContext(): AttachmentListContext;
     getQuotedMessageAttachmentListContext(): AttachmentListContext;
     getMessageReactionsContext(): MessageReactionsContext;
@@ -100,8 +85,9 @@ export declare class MessageComponent implements OnInit, OnChanges, OnDestroy {
     setAsActiveParentMessage(): void;
     getMentionContext(messagePart: MessagePart): MentionTemplateContext;
     getMessageActionsBoxContext(): MessageActionsBoxContext;
+    jumpToMessage(messageId: string, parentMessageId?: string): void;
     private createMessageParts;
     static ɵfac: i0.ɵɵFactoryDeclaration<MessageComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MessageComponent, "stream-message", never, { "message": "message"; "enabledMessageActions": "enabledMessageActions"; "isLastSentMessage": "isLastSentMessage"; "mode": "mode"; }, {}, never, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MessageComponent, "stream-message", never, { "message": "message"; "enabledMessageActions": "enabledMessageActions"; "isLastSentMessage": "isLastSentMessage"; "mode": "mode"; "isHighlighted": "isHighlighted"; }, {}, never, never>;
 }
 export {};

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

@@ -2,6 +2,7 @@ import { Subject } from 'rxjs';
 import * as i0 from "@angular/core";
 /**
  * The `ImageLoadService` is used to position the scrollbar in the message list
+ * @deprecated - This class is no longer used by SDK components as image sizes are fixed
  */
 export declare class ImageLoadService {
     /**

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

@@ -1,20 +1,18 @@
-import { AfterViewChecked, OnChanges, OnDestroy, OnInit, SimpleChanges, TemplateRef } from '@angular/core';
+import { AfterViewChecked, AfterViewInit, OnChanges, OnDestroy, OnInit, SimpleChanges, TemplateRef } from '@angular/core';
 import { ChannelService } from '../channel.service';
 import { Observable } from 'rxjs';
 import { MessageContext, StreamMessage, TypingIndicatorContext } from '../types';
 import { ChatClientService } from '../chat-client.service';
 import { GroupStyle } from './group-styles';
-import { ImageLoadService } from './image-load.service';
 import { UserResponse } from 'stream-chat';
 import { CustomTemplatesService } from '../custom-templates.service';
 import * as i0 from "@angular/core";
 /**
  * The `MessageList` component renders a scrollable list of messages.
  */
-export declare class MessageListComponent implements AfterViewChecked, OnChanges, OnInit, OnDestroy {
+export declare class MessageListComponent implements AfterViewChecked, OnChanges, OnInit, OnDestroy, AfterViewInit {
     private channelService;
     private chatClientService;
-    private imageLoadService;
     private customTemplatesService;
     /**
      * Determines if the message list should display channel messages or [thread messages](https://getstream.io/chat/docs/javascript/threads/?language=javascript).
@@ -34,27 +32,30 @@ export declare class MessageListComponent implements AfterViewChecked, OnChanges
     groupStyles: GroupStyle[];
     lastSentMessageId: string | undefined;
     parentMessage: StreamMessage | undefined;
+    highlightedMessageId: string | undefined;
     private scrollContainer;
     private parentMessageElement;
-    private latestMessageDate;
+    private latestMessage;
     private hasNewMessages;
     private containerHeight;
-    private oldestMessageDate;
+    private oldestMessage;
     private olderMassagesLoaded;
     private isNewMessageSentByUser;
-    private readonly isUserScrolledUpThreshold;
     private subscriptions;
+    private newMessageSubscription;
     private prevScrollTop;
     private usersTypingInChannel$;
     private usersTypingInThread$;
-    constructor(channelService: ChannelService, chatClientService: ChatClientService, imageLoadService: ImageLoadService, customTemplatesService: CustomTemplatesService);
+    private isLatestMessageInList;
+    constructor(channelService: ChannelService, chatClientService: ChatClientService, customTemplatesService: CustomTemplatesService);
     ngOnInit(): void;
     ngOnChanges(changes: SimpleChanges): void;
+    ngAfterViewInit(): void;
     ngAfterViewChecked(): void;
     ngOnDestroy(): void;
     trackByMessageId(index: number, item: StreamMessage): string;
     trackByUserId(index: number, user: UserResponse): string;
-    scrollToLatestMessage(): void;
+    jumpToLatestMessage(): void;
     scrollToBottom(): void;
     scrollToTop(): void;
     scrolled(): void;
@@ -65,10 +66,14 @@ export declare class MessageListComponent implements AfterViewChecked, OnChanges
         replyCount: number | undefined;
     };
     private preserveScrollbarPosition;
+    private getScrollPosition;
     private shouldLoadMoreMessages;
     private setMessages$;
     private resetScrollState;
     private get usersTyping$();
+    private scrollMessageIntoView;
+    private scrollToLatestMessage;
+    private newMessageReceived;
     static ɵfac: i0.ɵɵFactoryDeclaration<MessageListComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<MessageListComponent, "stream-message-list", never, { "mode": "mode"; "direction": "direction"; }, {}, never, never>;
 }

package/lib/types.d.ts

@@ -52,6 +52,7 @@ export declare type AttachmentUpload = {
     url?: string;
     type: 'image' | 'file' | 'video';
     previewUri?: string | ArrayBuffer;
+    thumb_url?: string;
 };
 export declare type MentionAutcompleteListItemContext = {
     item: MentionAutcompleteListItem;
@@ -103,6 +104,7 @@ export declare type MessageContext = {
     enabledMessageActions: string[];
     isLastSentMessage: boolean | undefined;
     mode: 'thread' | 'main';
+    isHighlighted: boolean;
 };
 export declare type ChannelActionsContext<T extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {
     channel: Channel<T>;
@@ -179,3 +181,11 @@ export declare type ThreadHeaderContext = {
     closeThreadHandler: Function;
 };
 export declare type MessageReactionType = 'angry' | 'haha' | 'like' | 'love' | 'sad' | 'wow';
+export declare type AttachmentConfigration = {
+    url: string;
+    height: string;
+    width: string;
+};
+export declare type VideoAttachmentConfiguration = AttachmentConfigration & {
+    thumbUrl?: string;
+};

package/package.json

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

package/public-api.d.ts

@@ -2,6 +2,7 @@ export * from './lib/chat-client.service';
 export * from './lib/channel.service';
 export * from './lib/theme.service';
 export * from './lib/attachment.service';
+export * from './lib/attachment-configuration.service';
 export * from './lib/stream-i18n.service';
 export * from './lib/avatar/avatar.component';
 export * from './lib/avatar-placeholder/avatar-placeholder.component';

package/src/assets/i18n/en.ts

@@ -37,6 +37,7 @@ export const en = {
     'Message has been successfully flagged':
       'Message has been successfully flagged',
     'Message pinned': 'Message pinned',
+    'Message unpinned': 'Message unpinned',
     Mute: 'Mute',
     New: 'New',
     'New Messages!': 'New Messages!',
@@ -95,6 +96,7 @@ export const en = {
     "You can't send thread replies in this channel":
       "You can't send thread replies in this channel",
     'Unsupported file type: {{type}}': 'Unsupported file type: {{type}}',
+    'Message not found': 'Message not found',
     'No chats here yet…': 'No chats here yet…',
     'user is typing': '{{ user }} is typing',
     'users are typing': '{{ users }} are typing',