@cometchat/chat-uikit-angular 5.0.0 → 5.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cometchat/chat-uikit-angular",
-  "version": "5.0.0",
+  "version": "5.0.1",
   "license": "https://www.cometchat.com/legal-terms-of-service",
   "homepage": "https://www.cometchat.com",
   "repository": "https://github.com/cometchat/cometchat-uikit-angular",

package/types/cometchat-chat-uikit-angular.d.ts

@@ -623,7 +623,7 @@ declare global {
  * @example
  * // Injectable usage in components
  * constructor(private uiKit: CometChatUIKit) {
- *   this.uiKit.loggedInUser$.subscribe(user => console.log(user));
+ *   this.uiKit.loggedInUser$.subscribe(user => CometChatLogger.info(user));
  * }
  */
 declare class CometChatUIKit {
@@ -1161,8 +1161,16 @@ interface CometChatEmojiCategory {
  * @see Requirements 1.7, 1.8, 1.9, 1.10
  */
 interface MediaAttachment {
-    /** The URL of the media file */
+    /** The URL of the media file — always the full-quality original */
     url: string;
+    /**
+     * The display URL for the thumbnail preview in the bubble.
+     * When the CometChat Thumbnail Generation extension is enabled, this is the
+     * compressed low-quality URL (url_medium for images, url_small for videos).
+     * Falls back to `url` when no extension thumbnail is available.
+     * The fullscreen viewer always uses `url` (full quality), never `displayUrl`.
+     */
+    displayUrl?: string;
     /** The type of media (image or video) - required for fullscreen viewer gallery mode */
     type?: 'image' | 'video';
     /** The filename for download purposes (optional) */
@@ -3760,6 +3768,8 @@ declare class MessageListService {
     fetchPreviousMessages(): Promise<boolean>;
     fetchNextMessages(): Promise<boolean>;
     fetchMessagesAroundId(messageId: number): Promise<void>;
+    /** Returns the current fetch generation — used by fetchWithUnreadPivot to detect stale async calls. */
+    getFetchGeneration(): number;
     private deduplicateMessages;
     private isRecoverableError;
     private isRecoverableErrorMessage;
@@ -3802,7 +3812,7 @@ declare class MessageListService {
     handleMessageEdited(message: CometChat.BaseMessage): void;
     handleMessageDeleted(message: CometChat.BaseMessage): void;
     handleReceipt(receipt: CometChat.MessageReceipt, isGroupReceipt: boolean): void;
-    handleReactionEvent(reactionEvent: CometChat.ReactionEvent): void;
+    handleReactionEvent(reactionEvent: CometChat.ReactionEvent, action: 'added' | 'removed'): void;
     private setupGroupListener;
     private setupCallListener;
     private setupConnectionListener;
@@ -7443,7 +7453,6 @@ declare class CometChatConversationItemComponent implements OnInit, OnDestroy {
     private isURL;
     private hasMarkdownLink;
     private formatLastMessageSubtitle;
-    private convertMarkdownToHtml;
     private getFormattersForSubtitle;
     private hasSdkMentionTags;
     get subtitleHasHtml(): boolean;
@@ -7926,6 +7935,7 @@ declare class CometChatConversationsComponent implements OnInit, OnDestroy {
     activeFormatters: CometChatTextFormatter[];
     private typingAnnouncementTimeout;
     private lastAnnouncedTypingUser;
+    private previousTypingSize;
     private readonly destroyRef;
     readonly SelectionMode: typeof SelectionMode;
     readonly Placement: typeof Placement;
@@ -8506,7 +8516,7 @@ declare class CometChatStickersKeyboardComponent implements OnInit, OnDestroy {
      */
     onCategoryClick(categoryName: string): void;
     /**
-     * Handles sticker click - emits the sticker selection event
+     * Handles sticker click - emits the sticker selection event and closes the keyboard
      * @see Requirements 8.7
      */
     handleStickerClick(sticker: StickerItem): void;
@@ -8675,6 +8685,18 @@ declare class CometChatPopoverComponent implements OnInit, AfterViewInit, OnDest
     ariaLabelledBy?: string;
     ariaDescribedBy?: string;
     contentStyle: Record<string, string>;
+    /**
+     * When true (and useParentContainer is true), the popover will not overflow
+     * the parent container horizontally. Use for popovers that must stay within
+     * a bounded horizontal region (e.g. attachment menu in the message composer).
+     */
+    constrainHorizontal: boolean;
+    /**
+     * When true (and useParentContainer is true), the popover will not overflow
+     * the parent container vertically. Use for popovers that must stay within
+     * a bounded vertical region (e.g. message bubble context menus in the message list).
+     */
+    constrainVertical: boolean;
     popoverOpened: EventEmitter$1<void>;
     popoverClosed: EventEmitter$1<void>;
     outsideClick: EventEmitter$1<void>;
@@ -8723,7 +8745,7 @@ declare class CometChatPopoverComponent implements OnInit, AfterViewInit, OnDest
     private handleKeydownForFocusTrap;
     private focusFirstElement;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<CometChatPopoverComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CometChatPopoverComponent, "cometchat-popover", never, { "placement": { "alias": "placement"; "required": false; }; "closeOnOutsideClick": { "alias": "closeOnOutsideClick"; "required": false; }; "showOnHover": { "alias": "showOnHover"; "required": false; }; "debounceOnHover": { "alias": "debounceOnHover"; "required": false; }; "content": { "alias": "content"; "required": false; }; "disableBackgroundInteraction": { "alias": "disableBackgroundInteraction"; "required": false; }; "useParentContainer": { "alias": "useParentContainer"; "required": false; }; "useParentHeight": { "alias": "useParentHeight"; "required": false; }; "showTooltip": { "alias": "showTooltip"; "required": false; }; "trapFocus": { "alias": "trapFocus"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "ariaLabelledBy": { "alias": "ariaLabelledBy"; "required": false; }; "ariaDescribedBy": { "alias": "ariaDescribedBy"; "required": false; }; "contentStyle": { "alias": "contentStyle"; "required": false; }; }, { "popoverOpened": "popoverOpened"; "popoverClosed": "popoverClosed"; "outsideClick": "outsideClick"; }, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CometChatPopoverComponent, "cometchat-popover", never, { "placement": { "alias": "placement"; "required": false; }; "closeOnOutsideClick": { "alias": "closeOnOutsideClick"; "required": false; }; "showOnHover": { "alias": "showOnHover"; "required": false; }; "debounceOnHover": { "alias": "debounceOnHover"; "required": false; }; "content": { "alias": "content"; "required": false; }; "disableBackgroundInteraction": { "alias": "disableBackgroundInteraction"; "required": false; }; "useParentContainer": { "alias": "useParentContainer"; "required": false; }; "useParentHeight": { "alias": "useParentHeight"; "required": false; }; "showTooltip": { "alias": "showTooltip"; "required": false; }; "trapFocus": { "alias": "trapFocus"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "ariaLabelledBy": { "alias": "ariaLabelledBy"; "required": false; }; "ariaDescribedBy": { "alias": "ariaDescribedBy"; "required": false; }; "contentStyle": { "alias": "contentStyle"; "required": false; }; "constrainHorizontal": { "alias": "constrainHorizontal"; "required": false; }; "constrainVertical": { "alias": "constrainVertical"; "required": false; }; }, { "popoverOpened": "popoverOpened"; "popoverClosed": "popoverClosed"; "outsideClick": "outsideClick"; }, never, ["*"], true, never>;
 }
 
 declare const MENTIONS_LIMIT = 10;
@@ -9369,7 +9391,7 @@ type MessagePreviewMode = 'reply' | 'edit';
  * </cometchat-message-preview>
  * ```
  */
-declare class CometChatMessagePreviewComponent implements AfterViewInit, OnDestroy {
+declare class CometChatMessagePreviewComponent implements OnInit, AfterViewInit, OnDestroy {
     private globalConfig;
     private textFormattersExplicitlySet;
     private _textFormatters;
@@ -9409,6 +9431,8 @@ declare class CometChatMessagePreviewComponent implements AfterViewInit, OnDestr
     elementRef: ElementRef<HTMLDivElement>;
     /** Internal width state for bubble view mode */
     width: number;
+    /** Cached logged-in user for "You" detection in senderName */
+    private loggedInUser;
     private resizeObserver;
     /**
      * Returns true if the message has been deleted
@@ -9475,11 +9499,9 @@ declare class CometChatMessagePreviewComponent implements AfterViewInit, OnDestr
      * Returns the CSS class for the container based on view mode
      */
     get containerClass(): string;
+    ngOnInit(): void;
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
-    /**
-     * Sets up ResizeObserver for bubble view mode width calculation
-     */
     private setupResizeObserver;
     /**
      * Cleans up the ResizeObserver
@@ -9589,6 +9611,7 @@ declare class CometChatTextBubbleComponent implements OnInit, OnChanges, AfterVi
  */
 declare class CometChatImageBubbleComponent implements OnInit, OnChanges {
     private cdr;
+    private ngZone;
     /** The media message object. @see Requirements 1.1, 1.3, 1.5 */
     message: CometChat.MediaMessage;
     /** LEFT for incoming, RIGHT for outgoing. @see Requirements 1.5, 13.1, 13.2 */
@@ -9610,8 +9633,12 @@ declare class CometChatImageBubbleComponent implements OnInit, OnChanges {
     protected galleryStartIndex: number;
     protected senderName: string;
     protected senderAvatarUrl: string;
+    /** Tracks which attachment indices have finished loading their real image */
+    protected loadedIndices: Set<number>;
+    /** Path to the placeholder image shown while the real image loads */
+    readonly placeholderSrc = "assets/image_placeholder.png";
     readonly MessageBubbleAlignment: typeof MessageBubbleAlignment;
-    constructor(cdr: ChangeDetectorRef);
+    constructor(cdr: ChangeDetectorRef, ngZone: NgZone);
     ngOnInit(): void;
     ngOnChanges(changes: SimpleChanges): void;
     /** Process the message to extract attachments, caption, and determine layout. */
@@ -9629,6 +9656,20 @@ declare class CometChatImageBubbleComponent implements OnInit, OnChanges {
     protected get imageAriaLabel(): string;
     protected get overflowAriaLabel(): string;
     protected trackByAttachment(index: number, attachment: MediaAttachment): string;
+    /**
+     * Returns the src to display for an image at the given index.
+     * Shows the placeholder until the real image has loaded.
+     */
+    protected getImageSrc(index: number): string;
+    /**
+     * Called when the real image finishes loading.
+     * Runs inside NgZone so OnPush change detection picks it up immediately.
+     */
+    protected onImageLoad(index: number, event: Event): void;
+    /**
+     * Called when the real image fails to load — keep showing placeholder.
+     */
+    protected onImageError(index: number): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<CometChatImageBubbleComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<CometChatImageBubbleComponent, "cometchat-image-bubble", never, { "message": { "alias": "message"; "required": true; }; "alignment": { "alias": "alignment"; "required": false; }; "disableInteraction": { "alias": "disableInteraction"; "required": false; }; }, { "imageClick": "imageClick"; "viewerOpen": "viewerOpen"; "viewerClose": "viewerClose"; }, never, never, true, never>;
 }
@@ -10124,7 +10165,8 @@ declare class CometChatGroupsComponent implements OnInit, OnDestroy {
     searchText: string;
     selectedGroups: Set<string>;
     focusedIndex: number;
-    lastSelectedIndex: _angular_core.WritableSignal<number>;
+    lastSelectedIndex: number;
+    private initialLoadComplete;
     isFetchingMore: _angular_core.WritableSignal<boolean>;
     hasMore: _angular_core.WritableSignal<boolean>;
     readonly SelectionMode: typeof SelectionMode;
@@ -11591,6 +11633,7 @@ declare class CometChatMessageBubbleComponent implements OnInit, OnChanges, OnDe
         message: CometChat.BaseMessage;
     }): void;
     private detectMobileDevice;
+    private setupMobileResizeListener;
     private clearHoverTimeout;
     private setupContentViewResizeObserver;
     get accessibleLabel(): string;
@@ -14800,7 +14843,7 @@ declare class CometChatSearchMessagesListComponent implements OnInit, OnChanges,
     getTrailingViewType(message: CometChat.BaseMessage): 'image' | 'video' | 'date';
     /** Get attachment URL for image/video thumbnails */
     getAttachmentUrl(message: CometChat.BaseMessage): string;
-    /** Format date for trailing view (DD MMM, hh:mm) */
+    /** Format date for trailing view using Angular DatePipe for locale-aware formatting */
     getFormattedDate(message: CometChat.BaseMessage): string;
     /** Check if metadata has link preview */
     private hasLinkPreview;