@cdevhub/ngx-chat 1.0.8 → 1.0.9

package/fesm2022/cdevhub-ngx-chat.mjs

@@ -1,11 +1,11 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, makeEnvironmentProviders, inject, Injectable, TemplateRef, Directive, input, ChangeDetectionStrategy, Component, output, signal, HostListener, viewChild, computed, DestroyRef, effect, viewChildren, linkedSignal, afterRenderEffect, contentChild, Injector, afterNextRender, PLATFORM_ID } from '@angular/core';
+import { InjectionToken, makeEnvironmentProviders, inject, Injectable, TemplateRef, Directive, input, ChangeDetectionStrategy, Component, output, signal, HostListener, viewChild, computed, DestroyRef, effect, viewChildren, linkedSignal, afterRenderEffect, contentChild, Injector, afterNextRender, ElementRef, PLATFORM_ID } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule, DOCUMENT, isPlatformBrowser } from '@angular/common';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { Subject } from 'rxjs';
 import { NgScrollbar } from 'ngx-scrollbar';
-import { LiveAnnouncer } from '@angular/cdk/a11y';
+import { LiveAnnouncer, FocusTrapFactory } from '@angular/cdk/a11y';
 import { DomSanitizer } from '@angular/platform-browser';
 import { trigger, transition, style, animate, state, keyframes } from '@angular/animations';
 
@@ -73,6 +73,13 @@ const DEFAULT_MARKDOWN_CONFIG = {
         'h4',
         'h5',
         'h6',
+        // Table elements (GFM tables)
+        'table',
+        'thead',
+        'tbody',
+        'tr',
+        'th',
+        'td',
     ],
     allowedAttributes: {
         a: ['href', 'title'],
@@ -3344,6 +3351,7 @@ class ChatSenderComponent {
             name: a.file.name,
             mimeType: a.file.type,
             size: a.file.size,
+            file: a.file,
         }));
         // Emit send event
         const event = {
@@ -3589,6 +3597,8 @@ function groupMessages(messages, thresholdMs = DEFAULT_GROUPING_THRESHOLD_MS) {
 function createGroup(messages) {
     const firstMessage = messages[0];
     return {
+        // Use first message ID as stable group identifier for tracking
+        id: `group-${firstMessage.id}`,
         senderId: firstMessage.sender,
         senderName: firstMessage.senderName,
         avatar: firstMessage.avatar,
@@ -3936,6 +3946,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
  * }
  * ```
  */
+/**
+ * @Injectable without `providedIn` - must be provided at component level.
+ *
+ * This service maintains stateful data (scroll position, item heights, etc.)
+ * that must be scoped to each ChatMessagesComponent instance. If provided
+ * at root level, multiple chat instances would share state, causing bugs.
+ *
+ * @see ChatMessagesComponent which provides this service
+ */
 class ChatVirtualScrollService {
     configService = inject(ChatConfigService);
     config = this.configService.getConfig().virtualScroll;
@@ -4219,11 +4238,10 @@ class ChatVirtualScrollService {
         return low;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ChatVirtualScrollService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ChatVirtualScrollService, providedIn: 'root' });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ChatVirtualScrollService });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ChatVirtualScrollService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
+            type: Injectable
         }] });
 
 /**
@@ -7962,10 +7980,8 @@ class ChatMessagesComponent {
     loadMoreDebounced = signal(false, ...(ngDevMode ? [{ debugName: "loadMoreDebounced" }] : []));
     /** Timestamp formatter cache */
     timestampFormatter = null;
-    /** ResizeObserver for measuring message heights in virtual scroll mode */
+    /** Native ResizeObserver for measuring message heights in virtual scroll mode */
     resizeObserver = null;
-    /** Map of message IDs to their indices for height measurement */
-    messageIndexMap = new Map();
     // ===========================================================================
     // Computed Values
     // ===========================================================================
@@ -8051,21 +8067,28 @@ class ChatMessagesComponent {
     visibleStartIndex = computed(() => {
         return this.virtualScrollService.visibleRange().startIndex;
     }, ...(ngDevMode ? [{ debugName: "visibleStartIndex" }] : []));
+    /**
+     * Computed map of message IDs to their indices.
+     * Used for height measurement in virtual scroll mode.
+     * Uses computed() instead of effect() to avoid anti-pattern.
+     */
+    messageIndexMap = computed(() => {
+        const msgs = this.messages();
+        const map = new Map();
+        for (let i = 0; i < msgs.length; i++) {
+            map.set(msgs[i].id, i);
+        }
+        return map;
+    }, ...(ngDevMode ? [{ debugName: "messageIndexMap" }] : []));
+    /**
+     * Tracks the previous message count to detect changes.
+     * Used to sync virtual scroll service only when needed.
+     */
+    lastSyncedMessageCount = 0;
     // ===========================================================================
     // Constructor & Lifecycle
     // ===========================================================================
     constructor() {
-        // Effect to sync message count with virtual scroll service
-        effect(() => {
-            const count = this.messages().length;
-            this.virtualScrollService.setItemCount(count);
-            // Build message ID to index map for height measurement
-            this.messageIndexMap.clear();
-            const msgs = this.messages();
-            for (let i = 0; i < msgs.length; i++) {
-                this.messageIndexMap.set(msgs[i].id, i);
-            }
-        });
         // Auto-scroll effect using afterRenderEffect with earlyRead/write phases
         // Phase order: earlyRead → write → mixedReadWrite → read
         afterRenderEffect({
@@ -8083,10 +8106,14 @@ class ChatMessagesComponent {
                 const lastProcessedId = this.lastProcessedMessageId();
                 const hasNewMessage = currentLastMessage &&
                     currentLastMessage.id !== lastProcessedId;
-                // Determine if we should scroll
-                const shouldScroll = this.isNearBottom() &&
-                    hasNewMessage &&
-                    this.effectiveConfig().behavior.autoScroll;
+                const isFromSelf = currentLastMessage?.sender === 'self';
+                const autoScrollEnabled = this.effectiveConfig().behavior.autoScroll;
+                // Determine if we should scroll:
+                // - Always scroll for self messages (user sent it)
+                // - For other messages, only scroll if user is near bottom
+                const shouldScroll = hasNewMessage &&
+                    autoScrollEnabled &&
+                    (isFromSelf || this.isNearBottom());
                 return {
                     shouldScroll,
                     newMessageId: currentLastMessage?.id ?? null,
@@ -8096,6 +8123,13 @@ class ChatMessagesComponent {
             },
             write: (earlyReadResultSignal) => {
                 const readResult = earlyReadResultSignal();
+                // Sync message count with virtual scroll service (replaces effect() anti-pattern)
+                // Only update when count changes to avoid unnecessary work
+                const currentCount = this.messages().length;
+                if (currentCount !== this.lastSyncedMessageCount) {
+                    this.virtualScrollService.setItemCount(currentCount);
+                    this.lastSyncedMessageCount = currentCount;
+                }
                 if (!readResult || !readResult.newMessageId)
                     return;
                 const { shouldScroll, newMessageId, isFromOther, message } = readResult;
@@ -8114,11 +8148,10 @@ class ChatMessagesComponent {
             },
         });
         // Height measurement effect for virtual scrolling
-        // Uses read phase for DOM reading after Angular has rendered
+        // Uses native ResizeObserver for measuring message heights
         afterRenderEffect(() => {
             // Only measure heights when virtual scrolling is active
             if (!this.shouldUseVirtualScroll()) {
-                // Disconnect observer when not in virtual mode
                 if (this.resizeObserver) {
                     this.resizeObserver.disconnect();
                 }
@@ -8130,7 +8163,7 @@ class ChatMessagesComponent {
             }
             const viewport = scrollbarInstance.viewport.nativeElement;
             const virtualItems = viewport.querySelectorAll('.ngx-chat-messages__virtual-item');
-            // Create ResizeObserver if it doesn't exist
+            // Create ResizeObserver lazily
             if (!this.resizeObserver) {
                 this.resizeObserver = new ResizeObserver((entries) => {
                     for (const entry of entries) {
@@ -8188,14 +8221,18 @@ class ChatMessagesComponent {
     // ===========================================================================
     /**
      * Programmatically scrolls to the bottom of the message list.
+     * Uses requestAnimationFrame to ensure DOM is fully updated before scrolling.
      */
     scrollToBottom() {
         const scrollbarInstance = this.scrollbar();
         if (!scrollbarInstance)
             return;
-        scrollbarInstance.scrollTo({
-            bottom: 0,
-            duration: 200,
+        // Use requestAnimationFrame to ensure DOM has updated before scrolling
+        requestAnimationFrame(() => {
+            scrollbarInstance.scrollTo({
+                bottom: 0,
+                duration: 200,
+            });
         });
     }
     /**
@@ -8252,7 +8289,7 @@ class ChatMessagesComponent {
      * Reports measured heights to virtual scroll service.
      */
     onMessageHeightChange(messageId, height) {
-        const index = this.messageIndexMap.get(messageId);
+        const index = this.messageIndexMap().get(messageId);
         if (index !== undefined && height > 0) {
             this.virtualScrollService.setItemHeightAt(index, height);
         }
@@ -8275,10 +8312,9 @@ class ChatMessagesComponent {
             this.resizeObserver.disconnect();
             this.resizeObserver = null;
         }
-        this.messageIndexMap.clear();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ChatMessagesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: ChatMessagesComponent, isStandalone: true, selector: "ngx-chat-messages", inputs: { messages: { classPropertyName: "messages", publicName: "messages", isSignal: true, isRequired: false, transformFunction: null }, isTyping: { classPropertyName: "isTyping", publicName: "isTyping", isSignal: true, isRequired: false, transformFunction: null }, typingLabel: { classPropertyName: "typingLabel", publicName: "typingLabel", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, loadingMore: { classPropertyName: "loadingMore", publicName: "loadingMore", isSignal: true, isRequired: false, transformFunction: null }, hasMore: { classPropertyName: "hasMore", publicName: "hasMore", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { loadMore: "loadMore" }, host: { attributes: { "role": "log", "aria-live": "polite" }, properties: { "attr.aria-busy": "loading() || loadingMore()" }, classAttribute: "ngx-chat-messages" }, viewQueries: [{ propertyName: "scrollbar", first: true, predicate: ["scrollbar"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: ChatMessagesComponent, isStandalone: true, selector: "ngx-chat-messages", inputs: { messages: { classPropertyName: "messages", publicName: "messages", isSignal: true, isRequired: false, transformFunction: null }, isTyping: { classPropertyName: "isTyping", publicName: "isTyping", isSignal: true, isRequired: false, transformFunction: null }, typingLabel: { classPropertyName: "typingLabel", publicName: "typingLabel", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, loadingMore: { classPropertyName: "loadingMore", publicName: "loadingMore", isSignal: true, isRequired: false, transformFunction: null }, hasMore: { classPropertyName: "hasMore", publicName: "hasMore", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { loadMore: "loadMore" }, host: { attributes: { "role": "log", "aria-live": "polite" }, properties: { "attr.aria-busy": "loading() || loadingMore()" }, classAttribute: "ngx-chat-messages" }, providers: [ChatVirtualScrollService], viewQueries: [{ propertyName: "scrollbar", first: true, predicate: ["scrollbar"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <ng-scrollbar
       #scrollbar
       class="ngx-chat-messages__scrollbar"
@@ -8358,7 +8394,7 @@ class ChatMessagesComponent {
           }
 
           <!-- Message groups -->
-          @for (group of messageGroups(); track group.timestamp.getTime()) {
+          @for (group of messageGroups(); track group.id) {
             <div
               class="ngx-chat-messages__group"
               [class.ngx-chat-messages__group--self]="group.senderId === 'self'"
@@ -8393,7 +8429,7 @@ class ChatMessagesComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ChatMessagesComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ngx-chat-messages', standalone: true, imports: [NgScrollbar, ChatTypingIndicatorComponent, ChatMessageBubbleComponent], template: `
+            args: [{ selector: 'ngx-chat-messages', standalone: true, imports: [NgScrollbar, ChatTypingIndicatorComponent, ChatMessageBubbleComponent], providers: [ChatVirtualScrollService], template: `
     <ng-scrollbar
       #scrollbar
       class="ngx-chat-messages__scrollbar"
@@ -8473,7 +8509,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
           }
 
           <!-- Message groups -->
-          @for (group of messageGroups(); track group.timestamp.getTime()) {
+          @for (group of messageGroups(); track group.id) {
             <div
               class="ngx-chat-messages__group"
               [class.ngx-chat-messages__group--self]="group.senderId === 'self'"
@@ -10707,13 +10743,148 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
  */
 // Main chat component
 
+/**
+ * @fileoverview Focus trap directive for modal and action components.
+ * Traps keyboard focus within a container for accessibility compliance.
+ * @module ngx-chat/directives
+ */
+/**
+ * Directive that traps focus within its host element.
+ *
+ * This directive is used for accessibility compliance in modal dialogs,
+ * action panels, and other overlay content where keyboard focus should
+ * be constrained to the interactive elements within.
+ *
+ * Features:
+ * - Traps Tab/Shift+Tab navigation within the element
+ * - Auto-focuses the first focusable element when enabled
+ * - Restores focus to the previously focused element on destroy
+ * - Supports deferred focus for async content
+ *
+ * @example Basic usage
+ * ```html
+ * <div ngxChatFocusTrap>
+ *   <button>First</button>
+ *   <button>Second</button>
+ *   <button>Third</button>
+ * </div>
+ * ```
+ *
+ * @example Conditional focus trap
+ * ```html
+ * <div [ngxChatFocusTrap]="isOpen()">
+ *   <button>Close</button>
+ *   <div>Modal content</div>
+ * </div>
+ * ```
+ *
+ * @example With auto-focus disabled
+ * ```html
+ * <div ngxChatFocusTrap [ngxChatFocusTrapAutoFocus]="false">
+ *   <button>First</button>
+ * </div>
+ * ```
+ */
+class ChatFocusTrapDirective {
+    elementRef = inject((ElementRef));
+    focusTrapFactory = inject(FocusTrapFactory);
+    injector = inject(Injector);
+    /**
+     * Whether the focus trap is enabled.
+     * When false, focus can move freely in and out of the element.
+     */
+    ngxChatFocusTrap = input(true, ...(ngDevMode ? [{ debugName: "ngxChatFocusTrap" }] : []));
+    /**
+     * Whether to auto-focus the first tabbable element when the trap is created.
+     */
+    ngxChatFocusTrapAutoFocus = input(true, ...(ngDevMode ? [{ debugName: "ngxChatFocusTrapAutoFocus" }] : []));
+    /**
+     * The underlying CDK FocusTrap instance.
+     */
+    focusTrap = null;
+    /**
+     * Element that had focus before the trap was activated.
+     * Used to restore focus on destroy.
+     */
+    previouslyFocusedElement = null;
+    constructor() {
+        afterNextRender(() => {
+            this.initializeFocusTrap();
+        }, { injector: this.injector });
+    }
+    /**
+     * Initializes the focus trap after render.
+     */
+    initializeFocusTrap() {
+        if (!this.ngxChatFocusTrap()) {
+            return;
+        }
+        // Store the currently focused element
+        this.previouslyFocusedElement = document.activeElement;
+        // Create the focus trap
+        this.focusTrap = this.focusTrapFactory.create(this.elementRef.nativeElement);
+        // Enable the trap
+        this.focusTrap.enabled = true;
+        // Auto-focus the first tabbable element
+        if (this.ngxChatFocusTrapAutoFocus()) {
+            this.focusTrap.focusInitialElementWhenReady();
+        }
+    }
+    /**
+     * Manually focuses the first tabbable element within the trap.
+     */
+    focusFirstTabbableElement() {
+        this.focusTrap?.focusFirstTabbableElement();
+    }
+    /**
+     * Manually focuses the last tabbable element within the trap.
+     */
+    focusLastTabbableElement() {
+        this.focusTrap?.focusLastTabbableElement();
+    }
+    /**
+     * Checks if an element is focusable within the trap.
+     */
+    hasFocusableElements() {
+        const element = this.elementRef.nativeElement;
+        const focusableSelector = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
+        return element.querySelectorAll(focusableSelector).length > 0;
+    }
+    /**
+     * Cleanup on destroy.
+     * Disables the trap and restores focus to the previous element.
+     */
+    ngOnDestroy() {
+        if (this.focusTrap) {
+            this.focusTrap.destroy();
+            this.focusTrap = null;
+        }
+        // Restore focus to the previously focused element
+        if (this.previouslyFocusedElement &&
+            typeof this.previouslyFocusedElement.focus === 'function') {
+            // Use setTimeout to ensure focus is restored after any animations
+            setTimeout(() => {
+                this.previouslyFocusedElement?.focus();
+            }, 0);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ChatFocusTrapDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.6", type: ChatFocusTrapDirective, isStandalone: true, selector: "[ngxChatFocusTrap]", inputs: { ngxChatFocusTrap: { classPropertyName: "ngxChatFocusTrap", publicName: "ngxChatFocusTrap", isSignal: true, isRequired: false, transformFunction: null }, ngxChatFocusTrapAutoFocus: { classPropertyName: "ngxChatFocusTrapAutoFocus", publicName: "ngxChatFocusTrapAutoFocus", isSignal: true, isRequired: false, transformFunction: null } }, exportAs: ["ngxChatFocusTrap"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ChatFocusTrapDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngxChatFocusTrap]',
+                    standalone: true,
+                    exportAs: 'ngxChatFocusTrap',
+                }]
+        }], ctorParameters: () => [], propDecorators: { ngxChatFocusTrap: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngxChatFocusTrap", required: false }] }], ngxChatFocusTrapAutoFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngxChatFocusTrapAutoFocus", required: false }] }] } });
+
 /**
  * @fileoverview Directives barrel export.
  * @module ngx-chat/directives
  */
 // Header content projection directive
-// Additional directives will be added as they are created:
-// export { ChatFocusTrapDirective } from './chat-focus-trap.directive';
 
 /**
  * @fileoverview Error constants and factory functions for ngx-chat.
@@ -11598,6 +11769,386 @@ function getActionById(message, actionId) {
     return message.actions.find((action) => action.id === actionId);
 }
 
+/**
+ * @fileoverview Attachment utility functions for ngx-chat library.
+ * Pure functions for creating, validating, and transforming attachments.
+ * @module ngx-chat/utils
+ */
+// ============================================================================
+// Constants
+// ============================================================================
+/**
+ * MIME type to attachment type mapping.
+ */
+const MIME_TYPE_MAP = {
+    // Images
+    'image/jpeg': 'image',
+    'image/jpg': 'image',
+    'image/png': 'image',
+    'image/gif': 'image',
+    'image/webp': 'image',
+    'image/svg+xml': 'image',
+    'image/bmp': 'image',
+    'image/tiff': 'image',
+    'image/avif': 'image',
+    'image/heic': 'image',
+    'image/heif': 'image',
+    // Videos
+    'video/mp4': 'video',
+    'video/webm': 'video',
+    'video/ogg': 'video',
+    'video/quicktime': 'video',
+    'video/x-msvideo': 'video',
+    'video/x-matroska': 'video',
+    // Audio
+    'audio/mpeg': 'audio',
+    'audio/mp3': 'audio',
+    'audio/wav': 'audio',
+    'audio/ogg': 'audio',
+    'audio/webm': 'audio',
+    'audio/aac': 'audio',
+    'audio/flac': 'audio',
+    'audio/x-m4a': 'audio',
+};
+/**
+ * File extensions that support preview generation.
+ */
+const PREVIEWABLE_EXTENSIONS = new Set([
+    'jpg',
+    'jpeg',
+    'png',
+    'gif',
+    'webp',
+    'bmp',
+    'svg',
+    'mp4',
+    'webm',
+    'ogg',
+]);
+// ============================================================================
+// Type Detection Functions
+// ============================================================================
+/**
+ * Determines the attachment type from a MIME type string.
+ *
+ * @param mimeType - The MIME type to check (e.g., 'image/jpeg')
+ * @returns The attachment type, defaults to 'file' for unknown types
+ *
+ * @example
+ * ```typescript
+ * getAttachmentType('image/jpeg'); // 'image'
+ * getAttachmentType('video/mp4'); // 'video'
+ * getAttachmentType('application/pdf'); // 'file'
+ * ```
+ */
+function getAttachmentType(mimeType) {
+    // Normalize the MIME type
+    const normalized = mimeType.toLowerCase().trim();
+    // Check exact match first
+    if (MIME_TYPE_MAP[normalized]) {
+        return MIME_TYPE_MAP[normalized];
+    }
+    // Check by prefix for generic types
+    if (normalized.startsWith('image/')) {
+        return 'image';
+    }
+    if (normalized.startsWith('video/')) {
+        return 'video';
+    }
+    if (normalized.startsWith('audio/')) {
+        return 'audio';
+    }
+    return 'file';
+}
+/**
+ * Determines the attachment type from a File object.
+ *
+ * @param file - The File object to check
+ * @returns The attachment type
+ *
+ * @example
+ * ```typescript
+ * const file = new File([''], 'photo.jpg', { type: 'image/jpeg' });
+ * getAttachmentTypeFromFile(file); // 'image'
+ * ```
+ */
+function getAttachmentTypeFromFile(file) {
+    return getAttachmentType(file.type);
+}
+/**
+ * Checks if an attachment type supports preview generation.
+ *
+ * @param type - The attachment type to check
+ * @returns True if previews can be generated
+ */
+function isPreviewable(type) {
+    return type === 'image' || type === 'video';
+}
+/**
+ * Checks if a file extension supports preview generation.
+ *
+ * @param filename - The filename to check
+ * @returns True if the file extension supports previews
+ */
+function isPreviewableByExtension(filename) {
+    const ext = getFileExtension(filename);
+    return PREVIEWABLE_EXTENSIONS.has(ext);
+}
+// ============================================================================
+// Factory Functions
+// ============================================================================
+/**
+ * Creates a PendingAttachment from a File object.
+ *
+ * @param file - The File object to create an attachment from
+ * @param options - Optional configuration
+ * @returns A PendingAttachment ready for upload
+ *
+ * @example
+ * ```typescript
+ * const file = new File(['content'], 'document.pdf', { type: 'application/pdf' });
+ * const pending = createPendingAttachment(file);
+ * // { id: 'att-123', file, type: 'file', status: 'pending', progress: 0 }
+ * ```
+ */
+function createPendingAttachment(file, options = {}) {
+    const type = getAttachmentTypeFromFile(file);
+    const id = options.id ?? generateId('att');
+    const attachment = {
+        id,
+        file,
+        type,
+        status: 'pending',
+        progress: 0,
+    };
+    // Create preview URL for images and videos
+    if (options.createPreview !== false && isPreviewable(type)) {
+        return {
+            ...attachment,
+            previewUrl: URL.createObjectURL(file),
+        };
+    }
+    return attachment;
+}
+/**
+ * Creates a MessageAttachment from upload result data.
+ *
+ * @param data - The attachment data from the server
+ * @returns A MessageAttachment object
+ */
+function createMessageAttachment(data) {
+    return {
+        id: data.id,
+        type: getAttachmentType(data.mimeType),
+        url: data.url,
+        name: data.name,
+        size: data.size,
+        mimeType: data.mimeType,
+        thumbnail: data.thumbnail,
+        dimensions: data.dimensions
+            ? { width: data.dimensions.width, height: data.dimensions.height }
+            : undefined,
+        duration: data.duration,
+    };
+}
+// ============================================================================
+// Validation Functions
+// ============================================================================
+/**
+ * Validates a file against size and type constraints.
+ *
+ * @param file - The file to validate
+ * @param options - Validation options
+ * @returns Validation result with error message if invalid
+ *
+ * @example
+ * ```typescript
+ * const result = validateAttachment(file, {
+ *   maxSize: 5 * 1024 * 1024, // 5MB
+ *   allowedTypes: ['image/*', 'application/pdf']
+ * });
+ * if (!result.valid) {
+ *   console.error(result.error);
+ * }
+ * ```
+ */
+function validateAttachment(file, options = {}) {
+    // Check file size
+    if (options.maxSize && file.size > options.maxSize) {
+        return {
+            valid: false,
+            error: `File exceeds maximum size of ${formatFileSize(options.maxSize)}`,
+        };
+    }
+    // Check MIME type
+    if (options.allowedTypes && options.allowedTypes.length > 0) {
+        const isAllowed = options.allowedTypes.some((pattern) => {
+            if (pattern.endsWith('/*')) {
+                const prefix = pattern.slice(0, -1);
+                return file.type.startsWith(prefix);
+            }
+            return file.type === pattern;
+        });
+        if (!isAllowed) {
+            return {
+                valid: false,
+                error: `File type ${file.type} is not allowed`,
+            };
+        }
+    }
+    // Check extension
+    if (options.allowedExtensions && options.allowedExtensions.length > 0) {
+        const ext = getFileExtension(file.name);
+        if (!options.allowedExtensions.includes(ext)) {
+            return {
+                valid: false,
+                error: `File extension .${ext} is not allowed`,
+            };
+        }
+    }
+    return { valid: true };
+}
+// ============================================================================
+// Formatting Functions
+// ============================================================================
+/**
+ * Formats a file size in bytes to a human-readable string.
+ *
+ * @param bytes - The size in bytes
+ * @param decimals - Number of decimal places (default: 1)
+ * @returns Formatted string like "1.5 MB"
+ *
+ * @example
+ * ```typescript
+ * formatFileSize(1024); // "1 KB"
+ * formatFileSize(1536); // "1.5 KB"
+ * formatFileSize(1048576); // "1 MB"
+ * formatFileSize(1073741824); // "1 GB"
+ * ```
+ */
+function formatFileSize(bytes, decimals = 1) {
+    if (bytes === 0)
+        return '0 B';
+    if (bytes < 0)
+        return '0 B';
+    const k = 1024;
+    const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    const index = Math.min(i, sizes.length - 1);
+    const value = bytes / Math.pow(k, index);
+    // Use integer for small values
+    if (value < 10 && index > 0) {
+        return `${value.toFixed(decimals)} ${sizes[index]}`;
+    }
+    return `${Math.round(value)} ${sizes[index]}`;
+}
+/**
+ * Formats a duration in seconds to a human-readable string.
+ *
+ * @param seconds - The duration in seconds
+ * @returns Formatted string like "1:23" or "1:23:45"
+ *
+ * @example
+ * ```typescript
+ * formatDuration(65); // "1:05"
+ * formatDuration(3665); // "1:01:05"
+ * ```
+ */
+function formatDuration(seconds) {
+    if (seconds < 0)
+        return '0:00';
+    const hours = Math.floor(seconds / 3600);
+    const minutes = Math.floor((seconds % 3600) / 60);
+    const secs = Math.floor(seconds % 60);
+    if (hours > 0) {
+        return `${hours}:${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
+    }
+    return `${minutes}:${secs.toString().padStart(2, '0')}`;
+}
+// ============================================================================
+// Helper Functions
+// ============================================================================
+/**
+ * Extracts the file extension from a filename.
+ *
+ * @param filename - The filename to extract from
+ * @returns Lowercase extension without the dot, or empty string
+ *
+ * @example
+ * ```typescript
+ * getFileExtension('photo.JPG'); // 'jpg'
+ * getFileExtension('document.pdf'); // 'pdf'
+ * getFileExtension('noextension'); // ''
+ * ```
+ */
+function getFileExtension(filename) {
+    const lastDot = filename.lastIndexOf('.');
+    if (lastDot === -1 || lastDot === filename.length - 1) {
+        return '';
+    }
+    return filename.slice(lastDot + 1).toLowerCase();
+}
+/**
+ * Gets a display-friendly file name, truncating if too long.
+ *
+ * @param filename - The full filename
+ * @param maxLength - Maximum length (default: 30)
+ * @returns Truncated filename with extension preserved
+ *
+ * @example
+ * ```typescript
+ * truncateFileName('very-long-file-name.pdf', 15); // 'very-lo...e.pdf'
+ * ```
+ */
+function truncateFileName(filename, maxLength = 30) {
+    if (filename.length <= maxLength) {
+        return filename;
+    }
+    const ext = getFileExtension(filename);
+    const extWithDot = ext ? `.${ext}` : '';
+    const nameWithoutExt = filename.slice(0, filename.length - extWithDot.length);
+    const availableLength = maxLength - extWithDot.length - 3; // 3 for '...'
+    if (availableLength <= 0) {
+        return filename.slice(0, maxLength - 3) + '...';
+    }
+    const keepStart = Math.ceil(availableLength / 2);
+    const keepEnd = Math.floor(availableLength / 2);
+    return (nameWithoutExt.slice(0, keepStart) +
+        '...' +
+        nameWithoutExt.slice(-keepEnd) +
+        extWithDot);
+}
+/**
+ * Revokes a blob URL to free memory.
+ * Safe to call with undefined/null.
+ *
+ * @param url - The blob URL to revoke
+ */
+function revokePreviewUrl(url) {
+    if (url && url.startsWith('blob:')) {
+        URL.revokeObjectURL(url);
+    }
+}
+/**
+ * Gets the appropriate icon name for an attachment type.
+ *
+ * @param type - The attachment type
+ * @returns Icon identifier
+ */
+function getAttachmentIcon(type) {
+    switch (type) {
+        case 'image':
+            return 'image';
+        case 'video':
+            return 'videocam';
+        case 'audio':
+            return 'audiotrack';
+        case 'file':
+        default:
+            return 'insert_drive_file';
+    }
+}
+
 /**
  * Utility Functions
  *
@@ -12074,5 +12625,5 @@ const chatAnimations = {
  * Generated bundle index. Do not edit.
  */
 
-export { AttachmentPickerComponent, AttachmentPreviewComponent, AudioPreviewComponent, ButtonsActionComponent, CHAT_CONFIG, CHAT_CONFIG_OVERRIDES, CHAT_FEATURES, CHAT_I18N, CHAT_I18N_OVERRIDES, ChatA11yService, ChatAttachmentComponent, ChatAttachmentService, ChatComponent, ChatConfigService, ChatDropZoneDirective, ChatErrorBoundaryComponent, ChatErrorRecoveryService, ChatHeaderComponent, ChatHeaderContentDirective, ChatMarkdownComponent, ChatMarkdownService, ChatMessageActionsComponent, ChatMessageBubbleComponent, ChatMessagesComponent, ChatSenderComponent, ChatTypingIndicatorComponent, ChatVirtualScrollService, ConfirmActionComponent, DEFAULT_ATTACHMENT_CONFIG, DEFAULT_BEHAVIOR_CONFIG, DEFAULT_CHAT_CONFIG, DEFAULT_CHAT_I18N, DEFAULT_ERROR_RECOVERY_CONFIG, DEFAULT_GROUPING_THRESHOLD_MS, DEFAULT_KEYBOARD_CONFIG, DEFAULT_MARKDOWN_CONFIG, DEFAULT_VALIDATION_CONFIG, DEFAULT_VIRTUAL_SCROLL_CONFIG, ERROR_CODES, FilePreviewComponent, ImagePreviewComponent, MultiSelectActionComponent, SelectActionComponent, VideoPreviewComponent, allActionsResponded, appendMessageContent, breakLongWords, canRetry, chatAnimations, createButtonsAction, createConfirmAction, createError, createMultiSelectAction, createOtherMessage, createSelectAction, createSelfMessage, createSystemMessage, disableAllActions, errorShake, fadeInOut, findMessage, generateId, getActionById, getErrorMessages, getLastMessage, getMessagesByStatus, getPendingActions, getRetryDelay, getRetryableMessages, groupMessages, incrementRetryCount, isAuthError, isClientError, isNetworkError, isSafeUrl, isUngroupable, messageEnter, provideChat, removeMessage, resetIdCounter, sanitizeContent, shouldGroupMessages, stripInvisibleChars, typingPulse, updateActionResponse, updateMessageContent, updateMessageStatus, validateMessage };
+export { AttachmentPickerComponent, AttachmentPreviewComponent, AudioPreviewComponent, ButtonsActionComponent, CHAT_CONFIG, CHAT_CONFIG_OVERRIDES, CHAT_FEATURES, CHAT_I18N, CHAT_I18N_OVERRIDES, ChatA11yService, ChatAttachmentComponent, ChatAttachmentService, ChatComponent, ChatConfigService, ChatDropZoneDirective, ChatErrorBoundaryComponent, ChatErrorRecoveryService, ChatFocusTrapDirective, ChatHeaderComponent, ChatHeaderContentDirective, ChatMarkdownComponent, ChatMarkdownService, ChatMessageActionsComponent, ChatMessageBubbleComponent, ChatMessagesComponent, ChatSenderComponent, ChatTypingIndicatorComponent, ChatVirtualScrollService, ConfirmActionComponent, DEFAULT_ATTACHMENT_CONFIG, DEFAULT_BEHAVIOR_CONFIG, DEFAULT_CHAT_CONFIG, DEFAULT_CHAT_I18N, DEFAULT_ERROR_RECOVERY_CONFIG, DEFAULT_GROUPING_THRESHOLD_MS, DEFAULT_KEYBOARD_CONFIG, DEFAULT_MARKDOWN_CONFIG, DEFAULT_VALIDATION_CONFIG, DEFAULT_VIRTUAL_SCROLL_CONFIG, ERROR_CODES, FilePreviewComponent, ImagePreviewComponent, MultiSelectActionComponent, SelectActionComponent, VideoPreviewComponent, allActionsResponded, appendMessageContent, breakLongWords, canRetry, chatAnimations, createButtonsAction, createConfirmAction, createError, createMessageAttachment, createMultiSelectAction, createOtherMessage, createPendingAttachment, createSelectAction, createSelfMessage, createSystemMessage, disableAllActions, errorShake, fadeInOut, findMessage, formatDuration, formatFileSize, generateId, getActionById, getAttachmentIcon, getAttachmentType, getAttachmentTypeFromFile, getErrorMessages, getFileExtension, getLastMessage, getMessagesByStatus, getPendingActions, getRetryDelay, getRetryableMessages, groupMessages, incrementRetryCount, isAuthError, isClientError, isNetworkError, isPreviewable, isPreviewableByExtension, isSafeUrl, isUngroupable, messageEnter, provideChat, removeMessage, resetIdCounter, revokePreviewUrl, sanitizeContent, shouldGroupMessages, stripInvisibleChars, truncateFileName, typingPulse, updateActionResponse, updateMessageContent, updateMessageStatus, validateAttachment, validateMessage };
 //# sourceMappingURL=cdevhub-ngx-chat.mjs.map