@progress/kendo-angular-conversational-ui 24.0.0-develop.11 → 24.0.0-develop.12

package/fesm2022/progress-kendo-angular-conversational-ui.mjs

@@ -7,7 +7,7 @@ import { InjectionToken, Input, ViewChild, HostBinding, Inject, Directive, Injec
 import { IconWrapperComponent, IconsService } from '@progress/kendo-angular-icons';
 import * as i1$2 from '@progress/kendo-angular-popup';
 import { PopupComponent, KENDO_POPUP, PopupService } from '@progress/kendo-angular-popup';
-import { isPresent, normalizeKeys, Keys, focusableSelector, guid, getter, isDocumentAvailable, hasObservers, EventsOutsideAngularDirective, closest as closest$1, ResizeSensorComponent, isChanged, processCssValue, ResizeBatchService } from '@progress/kendo-angular-common';
+import { isPresent, normalizeKeys, Keys, focusableSelector, guid, getter, isDocumentAvailable, hasObservers, EventsOutsideAngularDirective, closest as closest$1, ResizeSensorComponent, getLicenseMessage, shouldShowValidationUI, isChanged, processCssValue, WatermarkOverlayComponent, ResizeBatchService } from '@progress/kendo-angular-common';
 import { DialogContainerService, DialogService, WindowService, WindowContainerService } from '@progress/kendo-angular-dialog';
 import { NgTemplateOutlet, NgClass } from '@angular/common';
 import { Subject, Subscription, fromEvent } from 'rxjs';
@@ -215,8 +215,8 @@ const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1777399640,
-    version: '24.0.0-develop.11',
+    publishDate: 1777466818,
+    version: '24.0.0-develop.12',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -2349,6 +2349,86 @@ const defaultModelFields = {
     failedField: 'failed'
 };
 
+/**
+ * @hidden
+ *
+ * Show the scroll-to-bottom button when the user is this many pixels from the bottom.
+ */
+const scrollButtonThreshold = 100;
+/**
+ * @hidden
+ *
+ * Pins a scroll container to a computed target across layout shifts.
+ * Observers extend the idle window until layout has settled; the initial and
+ * final pins bracket the settle window so the viewport lands exactly on target.
+ */
+const settleScroll = (zone, el, computeTarget, onComplete, idleMs = 120, timeoutMs = 1000) => {
+    const pin = () => {
+        const t = computeTarget();
+        if (t !== null) {
+            el.scrollTop = t;
+        }
+    };
+    pin();
+    zone.runOutsideAngular(() => {
+        let idleTimer = null;
+        let safetyTimer = null;
+        let mutationObserver = null;
+        let resizeObserver = null;
+        let finished = false;
+        const finish = () => {
+            if (finished) {
+                return;
+            }
+            finished = true;
+            if (mutationObserver) {
+                mutationObserver.disconnect();
+            }
+            if (resizeObserver) {
+                resizeObserver.disconnect();
+            }
+            clearTimeout(idleTimer);
+            clearTimeout(safetyTimer);
+            pin();
+            zone.run(() => {
+                onComplete();
+                requestAnimationFrame(pin);
+            });
+        };
+        const resetIdle = () => {
+            clearTimeout(idleTimer);
+            idleTimer = setTimeout(finish, idleMs);
+        };
+        const onChange = () => {
+            pin();
+            resetIdle();
+        };
+        if (typeof MutationObserver !== 'undefined') {
+            mutationObserver = new MutationObserver(onChange);
+            mutationObserver.observe(el, {
+                childList: true,
+                subtree: true,
+                characterData: true,
+                attributes: true,
+                attributeFilter: ['style', 'class', 'hidden']
+            });
+        }
+        if (typeof ResizeObserver !== 'undefined') {
+            resizeObserver = new ResizeObserver(onChange);
+            resizeObserver.observe(el);
+            for (const child of Array.from(el.children)) {
+                resizeObserver.observe(child);
+            }
+        }
+        if (!mutationObserver && !resizeObserver) {
+            finished = true;
+            zone.run(onComplete);
+            return;
+        }
+        safetyTimer = setTimeout(finish, timeoutMs);
+        resetIdle();
+    });
+};
 /**
  * @hidden
  */
@@ -2514,15 +2594,17 @@ const transformActions = (actions) => {
  * @hidden
  */
 class ChatService {
+    zone;
     authorId;
     messageWidthMode;
-    messageToolbarActions = [];
     messageContextMenuActions = [];
     calculatedContextMenuActions = [];
     fileActions = [];
     toggleMessageState = false;
+    layoutChangeInProgress = false;
     reply;
     messages = [];
+    repliedToMessages = [];
     chatElement;
     messageElementsMap = new Map();
     messagesContextMenu;
@@ -2540,6 +2622,7 @@ class ChatService {
     _messageBoxSettings = MESSAGE_BOX_SETTINGS;
     _suggestionsLayout = SUGGESTIONS_LAYOUT_DEFAULT_SETTINGS;
     _quickActionsLayout = SUGGESTIONS_LAYOUT_DEFAULT_SETTINGS;
+    _messageToolbarActions = [];
     _authorMessageSettings;
     _receiverMessageSettings;
     _allowMessageCollapse;
@@ -2557,6 +2640,7 @@ class ChatService {
         authorMessageSettingsChange: new Subject(),
         receiverMessageSettingsChange: new Subject(),
         allowMessageCollapseChange: new Subject(),
+        messageToolbarActionsChange: new Subject(),
     };
     toolbarAction$ = this.subjects.toolbarAction.asObservable();
     contextMenuAction$ = this.subjects.contextMenuAction.asObservable();
@@ -2571,6 +2655,10 @@ class ChatService {
     authorMessageSettingsChange$ = this.subjects.authorMessageSettingsChange.asObservable();
     receiverMessageSettingsChange$ = this.subjects.receiverMessageSettingsChange.asObservable();
     allowMessageCollapseChange$ = this.subjects.allowMessageCollapseChange.asObservable();
+    messageToolbarActionsChange$ = this.subjects.messageToolbarActionsChange.asObservable();
+    constructor(zone) {
+        this.zone = zone;
+    }
     set authorMessageSettings(settings) {
         const previousSettings = this._authorMessageSettings;
         if (JSON.stringify(previousSettings) !== JSON.stringify(settings)) {
@@ -2629,6 +2717,13 @@ class ChatService {
     get quickActionsLayout() {
         return this._quickActionsLayout;
     }
+    set messageToolbarActions(value) {
+        this._messageToolbarActions = value;
+        this.emit('messageToolbarActionsChange', this._messageToolbarActions);
+    }
+    get messageToolbarActions() {
+        return this._messageToolbarActions;
+    }
     set allowMessageCollapse(value) {
         const previousValue = this._allowMessageCollapse;
         if (previousValue !== value) {
@@ -2651,7 +2746,8 @@ class ChatService {
         (this.subjects[subjectKey]).next(value);
     }
     getMessageById(id) {
-        return this.messages.find(message => message.id === id);
+        return this.messages.find(message => message.id === id)
+            ?? this.repliedToMessages.find(message => message.id === id);
     }
     registerMessageElement(messageId, elementRef) {
         this.messageElementsMap.set(messageId, elementRef);
@@ -2662,26 +2758,25 @@ class ChatService {
             this.reply = null;
         }
     }
-    scrollToMessage(messageId) {
-        const elementRef = this.messageElementsMap.get(messageId);
-        if (!elementRef?.nativeElement) {
+    scrollToMessage(messageId, behavior = 'smooth') {
+        if (!isDocumentAvailable()) {
             return;
         }
-        const scrollContainer = this.chatElement?.element?.nativeElement;
+        const scrollContainer = this.getScrollContainer();
         if (!scrollContainer) {
             return;
         }
-        const targetElement = elementRef.nativeElement;
-        const pinnedElement = scrollContainer.querySelector('.k-message-pinned');
-        const pinnedHeight = pinnedElement?.offsetHeight || 0;
-        const containerRect = scrollContainer.getBoundingClientRect();
-        const targetRect = targetElement.getBoundingClientRect();
-        const targetTop = targetRect.top - containerRect.top + scrollContainer.scrollTop;
-        const scrollTo = targetTop - pinnedHeight;
-        scrollContainer.scrollTo({
-            top: scrollTo,
-            behavior: 'smooth'
-        });
+        const computeTarget = () => this.computeScrollTarget(messageId);
+        const scrollTop = computeTarget();
+        if (scrollTop === null) {
+            return;
+        }
+        if (behavior === 'auto') {
+            settleScroll(this.zone, scrollContainer, computeTarget, () => { });
+        }
+        else {
+            scrollContainer.scrollTo({ top: scrollTop, behavior });
+        }
     }
     focusActiveMessageElement() {
         if (this.activeMessageElement) {
@@ -2691,6 +2786,25 @@ class ChatService {
     isOwnMessage(message) {
         return this.authorId === message.author.id;
     }
+    getScrollContainer() {
+        return this.chatElement?.element?.nativeElement ?? null;
+    }
+    computeScrollTarget(messageId) {
+        const elementRef = this.messageElementsMap.get(messageId);
+        if (!elementRef?.nativeElement) {
+            return null;
+        }
+        const scrollContainer = this.getScrollContainer();
+        if (!scrollContainer) {
+            return null;
+        }
+        const targetElement = elementRef.nativeElement;
+        const pinnedElement = scrollContainer.querySelector('.k-message-pinned');
+        const pinnedHeight = pinnedElement?.offsetHeight || 0;
+        const containerRect = scrollContainer.getBoundingClientRect();
+        const targetRect = targetElement.getBoundingClientRect();
+        return targetRect.top - containerRect.top + scrollContainer.scrollTop - pinnedHeight;
+    }
     updateComponentSettings(property, settings, defaultSettings) {
         if (settings === true) {
             this[property] = defaultSettings;
@@ -2702,17 +2816,17 @@ class ChatService {
             this[property] = { ...defaultSettings, ...settings };
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ChatService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ChatService, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ChatService });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ChatService, decorators: [{
             type: Injectable
-        }] });
+        }], ctorParameters: () => [{ type: i0.NgZone }] });
 
 // Consider scroll to be at the bottom when within this number of pixels from the container height.
 const maxDelta = 2;
-// Show the scroll button when the user is this number of pixels away from the bottom.
-const scrollButtonThreshold = 100;
+// Edge detection threshold for endless scroll — fire loadMore when within this many pixels.
+const edgeThreshold = 100;
 /**
  * @hidden
  */
@@ -2722,13 +2836,53 @@ class ScrollAnchorDirective {
     renderer;
     cdr;
     autoScroll = true;
+    autoScrollThreshold = '20%';
+    set endlessMode(value) {
+        const changed = this._endlessMode !== value;
+        this._endlessMode = value;
+        this._nearTopLocked = false;
+        this._nearBottomLocked = false;
+        this.scrolling = false;
+        if (changed && !value && this._initialScrollDone && isDocumentAvailable()) {
+            this.element.nativeElement.scrollTo({ top: 0, behavior: 'auto' });
+            this._subs.add(this.zone.onStable.pipe(take(1)).subscribe(() => {
+                this.performScroll('smooth');
+            }));
+        }
+    }
+    get endlessMode() {
+        return this._endlessMode;
+    }
+    rangeIsAtEnd = true;
     autoScrollChange = new EventEmitter();
+    nearTop = new EventEmitter();
+    nearBottom = new EventEmitter();
     overflowAnchor = 'none';
+    get scrollBehaviorStyle() {
+        return this._endlessMode ? 'auto' : null;
+    }
     showScrollToBottomButton = false;
     showMessageBoxSeparator = false;
     scrolling = false;
     unsubscribe;
     scrollUpdate = null;
+    _previousScrollHeight = 0;
+    _previousScrollTop = 0;
+    _pendingScrollPreservation = false;
+    _endlessMode = false;
+    _nearTopLocked = false;
+    _nearBottomLocked = false;
+    _scrollingToMessage = false;
+    _initialScrollDone = false;
+    _subs = new Subscription();
+    // Need to ensure that the scroll follows a new streaming message 
+    // until the scroll threshold is reached.
+    _streamingFollow = false;
+    _thresholdScrollCap = null;
+    _streamingPrevScrollTop = 0;
+    _streamingPrevHeight = 0;
+    _streamingPrevMsgCount = 0;
+    _mutationObserver = null;
     constructor(element, zone, renderer, cdr) {
         this.element = element;
         this.zone = zone;
@@ -2736,15 +2890,54 @@ class ScrollAnchorDirective {
         this.cdr = cdr;
     }
     ngOnInit() {
+        if (!isDocumentAvailable()) {
+            return;
+        }
         this.zone.runOutsideAngular(() => {
-            this.unsubscribe = this.renderer.listen(this.element.nativeElement, 'scroll', () => this.setupScrollUpdate(), { passive: true });
+            const el = this.element.nativeElement;
+            this.unsubscribe = this.renderer.listen(el, 'scroll', () => {
+                this.detectStreamingScrollUp();
+                this.setupScrollUpdate();
+            }, { passive: true });
+            this._mutationObserver = new MutationObserver(() => {
+                if (!this._streamingFollow) {
+                    return;
+                }
+                const currentMsgCount = el.querySelectorAll('.k-message').length;
+                const currentHeight = el.scrollHeight;
+                if (currentMsgCount === this._streamingPrevMsgCount && currentHeight > this._streamingPrevHeight) {
+                    const bottom = currentHeight - el.clientHeight;
+                    const cap = this._thresholdScrollCap;
+                    const target = cap !== null ? Math.min(bottom, cap) : bottom;
+                    if (target > el.scrollTop) {
+                        el.scrollTop = target;
+                    }
+                    this._streamingPrevScrollTop = el.scrollTop;
+                    this.updateScrollToBottomButton(el);
+                }
+                this._streamingPrevMsgCount = currentMsgCount;
+                this._streamingPrevHeight = currentHeight;
+            });
+            this._mutationObserver.observe(el, {
+                childList: true,
+                subtree: true,
+                characterData: true,
+            });
         });
     }
     ngAfterViewInit() {
-        this.autoScrollToBottom();
-        this.zone.onStable.pipe(take(1)).subscribe(() => {
+        this._subs.add(this.zone.onStable.pipe(take(1)).subscribe(() => {
+            if (this.autoScroll) {
+                if (this._endlessMode) {
+                    this.scrollToBottomWithSettle();
+                }
+                else {
+                    this.performScroll('smooth');
+                }
+            }
             this.calculateMessageBoxSeparator();
-        });
+            this._initialScrollDone = true;
+        }));
     }
     ngOnDestroy() {
         if (this.unsubscribe) {
@@ -2753,8 +2946,16 @@ class ScrollAnchorDirective {
         if (this.scrollUpdate !== null) {
             cancelAnimationFrame(this.scrollUpdate);
         }
+        if (this._mutationObserver) {
+            this._mutationObserver.disconnect();
+            this._mutationObserver = null;
+        }
+        this._subs.unsubscribe();
     }
     onScroll() {
+        if (!isDocumentAvailable() || this._scrollingToMessage) {
+            return;
+        }
         const el = this.element.nativeElement;
         const scrollPosition = el.scrollHeight - el.scrollTop - el.clientHeight;
         const atBottom = scrollPosition < maxDelta;
@@ -2764,7 +2965,8 @@ class ScrollAnchorDirective {
             }
             return;
         }
-        const showScrollButton = scrollPosition > scrollButtonThreshold;
+        const showScrollButton = scrollPosition > scrollButtonThreshold
+            || (this.endlessMode && !this.rangeIsAtEnd);
         const autoScrollChanged = this.autoScroll !== atBottom;
         const buttonChanged = this.showScrollToBottomButton !== showScrollButton;
         if (autoScrollChanged || buttonChanged) {
@@ -2779,8 +2981,30 @@ class ScrollAnchorDirective {
                 }
             });
         }
+        if (this.endlessMode) {
+            const nearTopEdge = el.scrollTop < edgeThreshold;
+            const nearBottomEdge = !this.rangeIsAtEnd && scrollPosition < edgeThreshold;
+            if (!nearTopEdge) {
+                this._nearTopLocked = false;
+            }
+            if (!nearBottomEdge) {
+                this._nearBottomLocked = false;
+            }
+            if (nearTopEdge && !this._nearTopLocked) {
+                this._nearTopLocked = true;
+                this.zone.run(() => this.nearTop.emit());
+            }
+            if (nearBottomEdge && !this._nearBottomLocked) {
+                this._nearBottomLocked = true;
+                this.zone.run(() => this.nearBottom.emit());
+            }
+        }
     }
     autoScrollToBottom() {
+        if (this._streamingFollow) {
+            this.followStreamingContent();
+            return;
+        }
         if (!this.autoScroll) {
             return;
         }
@@ -2789,9 +3013,80 @@ class ScrollAnchorDirective {
     scrollToBottom() {
         this.autoScroll = true;
         this.showScrollToBottomButton = false;
+        this._streamingFollow = false;
+        this._thresholdScrollCap = null;
         this.performScroll();
     }
+    scrollToBottomWithSettle(onComplete) {
+        if (!isDocumentAvailable()) {
+            onComplete?.();
+            return;
+        }
+        const el = this.element.nativeElement;
+        this._scrollingToMessage = true;
+        this._streamingFollow = false;
+        this._thresholdScrollCap = null;
+        settleScroll(this.zone, el, () => el.scrollHeight - el.clientHeight, () => {
+            this.autoScroll = true;
+            this.showScrollToBottomButton = false;
+            this.scrolling = false;
+            this._scrollingToMessage = false;
+            this.cdr.markForCheck();
+            onComplete?.();
+        });
+    }
+    scrollWithThreshold(messageEl) {
+        if (!isDocumentAvailable() || !messageEl) {
+            this.performScroll();
+            return;
+        }
+        const container = this.element.nativeElement;
+        const pinnedHeight = this.getPinnedBarHeight();
+        const thresholdPx = Math.max(0, this.parseThreshold(pinnedHeight));
+        const containerRect = container.getBoundingClientRect();
+        const messageRect = messageEl.getBoundingClientRect();
+        const msgTopInContent = messageRect.top - containerRect.top + container.scrollTop;
+        const targetScrollTop = Math.max(0, msgTopInContent - thresholdPx - pinnedHeight);
+        const bottomScrollTop = Math.max(0, container.scrollHeight - container.clientHeight);
+        const finalScrollTop = Math.min(targetScrollTop, bottomScrollTop);
+        if (finalScrollTop > container.scrollTop) {
+            container.scrollTo({ top: finalScrollTop, behavior: 'smooth' });
+        }
+        this._thresholdScrollCap = targetScrollTop;
+        this._streamingFollow = true;
+        this._streamingPrevScrollTop = container.scrollTop;
+        this._streamingPrevHeight = container.scrollHeight;
+        this._streamingPrevMsgCount = container.querySelectorAll('.k-message').length;
+        const distanceFromBottom = container.scrollHeight - container.scrollTop - container.clientHeight;
+        this.showScrollToBottomButton = distanceFromBottom > scrollButtonThreshold;
+        this.cdr.markForCheck();
+    }
+    recordScrollHeight() {
+        if (!isDocumentAvailable()) {
+            return;
+        }
+        const el = this.element.nativeElement;
+        this._previousScrollHeight = el.scrollHeight;
+        this._previousScrollTop = el.scrollTop;
+        this._pendingScrollPreservation = true;
+        this.cdr.markForCheck();
+    }
+    preserveScrollPosition() {
+        if (!this._pendingScrollPreservation || !isDocumentAvailable()) {
+            return;
+        }
+        const el = this.element.nativeElement;
+        const delta = el.scrollHeight - this._previousScrollHeight;
+        if (delta > 0) {
+            el.scrollTop = this._previousScrollTop + delta;
+        }
+        this._pendingScrollPreservation = false;
+        this.cdr.markForCheck();
+    }
     calculateMessageBoxSeparator() {
+        if (!isDocumentAvailable()) {
+            return;
+        }
         const el = this.element.nativeElement;
         const shouldShow = el.scrollHeight > el.clientHeight;
         if (this.showMessageBoxSeparator !== shouldShow) {
@@ -2799,6 +3094,90 @@ class ScrollAnchorDirective {
             this.cdr.markForCheck();
         }
     }
+    getDistanceFromBottom() {
+        if (!isDocumentAvailable()) {
+            return 0;
+        }
+        const el = this.element.nativeElement;
+        return el.scrollHeight - el.scrollTop - el.clientHeight;
+    }
+    setAriaLive(value) {
+        if (!isDocumentAvailable()) {
+            return;
+        }
+        this.renderer.setAttribute(this.element.nativeElement, 'aria-live', value);
+    }
+    lockForMessageScroll() {
+        this._scrollingToMessage = true;
+    }
+    unlockForMessageScroll() {
+        this._scrollingToMessage = false;
+        this.setupScrollUpdate();
+    }
+    getAutoScrollThresholdPx() {
+        return Math.max(0, this.parseThreshold(this.getPinnedBarHeight()));
+    }
+    get isFollowingThreshold() {
+        return this._streamingFollow;
+    }
+    followStreamingContent() {
+        if (!isDocumentAvailable()) {
+            return;
+        }
+        const el = this.element.nativeElement;
+        const bottom = el.scrollHeight - el.clientHeight;
+        const cap = this._thresholdScrollCap;
+        const target = cap !== null ? Math.min(bottom, cap) : bottom;
+        if (target > el.scrollTop) {
+            el.scrollTop = target;
+            this._streamingPrevScrollTop = el.scrollTop;
+        }
+        this.updateScrollToBottomButton(el);
+    }
+    updateScrollToBottomButton(el) {
+        const distance = el.scrollHeight - el.scrollTop - el.clientHeight;
+        const shouldShow = distance > scrollButtonThreshold
+            || (this.endlessMode && !this.rangeIsAtEnd);
+        if (this.showScrollToBottomButton !== shouldShow) {
+            this.zone.run(() => {
+                this.showScrollToBottomButton = shouldShow;
+                this.cdr.markForCheck();
+            });
+        }
+    }
+    detectStreamingScrollUp() {
+        if (!this._streamingFollow) {
+            return;
+        }
+        const st = this.element.nativeElement.scrollTop;
+        if (st < this._streamingPrevScrollTop) {
+            this._streamingFollow = false;
+            this._thresholdScrollCap = null;
+        }
+        this._streamingPrevScrollTop = st;
+    }
+    parseThreshold(pinnedHeight = 0) {
+        const threshold = this.autoScrollThreshold;
+        if (typeof threshold === 'number') {
+            return threshold;
+        }
+        if (typeof threshold === 'string') {
+            if (threshold.endsWith('%')) {
+                const percent = parseFloat(threshold) / 100;
+                const visibleHeight = this.element.nativeElement.clientHeight - pinnedHeight;
+                return visibleHeight * percent;
+            }
+            const parsed = parseFloat(threshold);
+            if (!isNaN(parsed)) {
+                return parsed;
+            }
+        }
+        return 0;
+    }
+    getPinnedBarHeight() {
+        const pinned = this.element.nativeElement.querySelector('.k-message-pinned');
+        return pinned ? pinned.offsetHeight : 0;
+    }
     setupScrollUpdate() {
         if (this.scrollUpdate !== null) {
             return;
@@ -2808,13 +3187,20 @@ class ScrollAnchorDirective {
             this.onScroll();
         });
     }
-    performScroll() {
+    performScroll(behavior = 'auto') {
+        if (!isDocumentAvailable()) {
+            return;
+        }
         const el = this.element.nativeElement;
-        el.scrollTop = el.scrollHeight - el.clientHeight;
+        const target = el.scrollHeight - el.clientHeight;
+        if (Math.abs(el.scrollTop - target) < maxDelta) {
+            return;
+        }
+        el.scrollTo({ top: target, behavior });
         this.scrolling = true;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ScrollAnchorDirective, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.20", type: ScrollAnchorDirective, isStandalone: true, selector: "[kendoChatScrollAnchor]", inputs: { autoScroll: "autoScroll" }, outputs: { autoScrollChange: "autoScrollChange" }, host: { properties: { "style.overflow-anchor": "this.overflowAnchor" } }, exportAs: ["scrollAnchor"], ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.20", type: ScrollAnchorDirective, isStandalone: true, selector: "[kendoChatScrollAnchor]", inputs: { autoScroll: "autoScroll", autoScrollThreshold: "autoScrollThreshold", endlessMode: "endlessMode", rangeIsAtEnd: "rangeIsAtEnd" }, outputs: { autoScrollChange: "autoScrollChange", nearTop: "nearTop", nearBottom: "nearBottom" }, host: { properties: { "style.overflow-anchor": "this.overflowAnchor", "style.scroll-behavior": "this.scrollBehaviorStyle" } }, exportAs: ["scrollAnchor"], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ScrollAnchorDirective, decorators: [{
             type: Directive,
@@ -2825,11 +3211,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }], propDecorators: { autoScroll: [{
                 type: Input
+            }], autoScrollThreshold: [{
+                type: Input
+            }], endlessMode: [{
+                type: Input
+            }], rangeIsAtEnd: [{
+                type: Input
             }], autoScrollChange: [{
                 type: Output
+            }], nearTop: [{
+                type: Output
+            }], nearBottom: [{
+                type: Output
             }], overflowAnchor: [{
                 type: HostBinding,
                 args: ['style.overflow-anchor']
+            }], scrollBehaviorStyle: [{
+                type: HostBinding,
+                args: ['style.scroll-behavior']
             }] } });
 
 const DEFAULT_SCROLL_BEHAVIOR = 'smooth';
@@ -2933,6 +3332,93 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
             type: Injectable
         }], ctorParameters: () => [{ type: i0.NgZone }, { type: i1.LocalizationService }] });
 
+/**
+ * @hidden
+ */
+class EndlessScrollState {
+    startIndex = 0;
+    endIndex = 0;
+    isLoading = false;
+    get isAtStart() {
+        return this.startIndex === 0;
+    }
+    get isAtEnd() {
+        return this.endIndex >= this._total;
+    }
+    _total = 0;
+    _pageSize = 50;
+    get pageSize() {
+        return this._pageSize;
+    }
+    init(total, pageSize) {
+        this._total = total;
+        this._pageSize = pageSize;
+        return this.jumpToEnd();
+    }
+    extendUp() {
+        if (this.isAtStart || this.isLoading) {
+            return null;
+        }
+        const newStart = Math.max(0, this.startIndex - this._pageSize);
+        if (newStart === this.startIndex) {
+            return null;
+        }
+        this.startIndex = newStart;
+        return { start: this.startIndex, end: this.endIndex };
+    }
+    extendDown() {
+        if (this.isAtEnd || this.isLoading) {
+            return null;
+        }
+        const newEnd = Math.min(this._total, this.endIndex + this._pageSize);
+        if (newEnd === this.endIndex) {
+            return null;
+        }
+        this.endIndex = newEnd;
+        return { start: this.startIndex, end: this.endIndex };
+    }
+    jumpTo(targetIndex) {
+        const half = Math.floor(this._pageSize / 2);
+        let start = targetIndex - half;
+        let end = start + this._pageSize;
+        if (start < 0) {
+            start = 0;
+            end = Math.min(this._pageSize, this._total);
+        }
+        if (end > this._total) {
+            end = this._total;
+            start = Math.max(0, end - this._pageSize);
+        }
+        this.startIndex = start;
+        this.endIndex = end;
+        return { start, end };
+    }
+    jumpToEnd() {
+        const start = Math.max(0, this._total - this._pageSize);
+        const end = this._total;
+        this.startIndex = start;
+        this.endIndex = end;
+        return { start, end };
+    }
+    updateTotal(total) {
+        this._total = total;
+    }
+    reset() {
+        this.startIndex = 0;
+        this.endIndex = 0;
+        this.isLoading = false;
+        this._total = 0;
+    }
+    contains(index) {
+        return index >= this.startIndex && index < this.endIndex;
+    }
+    syncFromInputs(start, end, total) {
+        this.startIndex = start;
+        this.endIndex = end;
+        this._total = total;
+    }
+}
+
 /**
  * @hidden
  */
@@ -3113,7 +3599,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
  * ```html
  * <kendo-promptbox>
  *   <kendo-promptbox-end-affix>
- *     <button kendoButton look="clear" icon="image"></button>
+ *     <button kendoButton fillMode="clear" [svgIcon]="imageIcon"></button>
  *   </kendo-promptbox-end-affix>
  * </kendo-promptbox>
  * ```
@@ -3146,7 +3632,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
  * ```html
  * <kendo-promptbox>
  *   <kendo-promptbox-start-affix>
- *     <button kendoButton look="clear" icon="image"></button>
+ *     <button kendoButton fillMode="clear" [svgIcon]="imageIcon"></button>
  *   </kendo-promptbox-start-affix>
  * </kendo-promptbox>
  * ```
@@ -3179,7 +3665,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
  * ```html
  * <kendo-promptbox>
  *   <kendo-promptbox-top-affix>
- *     <button kendoButton look="clear" icon="image"></button>
+ *     <button kendoButton fillMode="clear" [svgIcon]="imageIcon"></button>
  *   </kendo-promptbox-top-affix>
  * </kendo-promptbox>
  * ```
@@ -5538,7 +6024,7 @@ const groupMessages = (acc, msg, isLastMessage) => {
             messages: [msg],
             author: msg.author,
             timestamp: msg.timestamp,
-            trackBy: msg
+            trackBy: msg.id
         });
     }
 };
@@ -6763,8 +7249,16 @@ class MessageComponent extends ChatItem {
     chatService;
     localization;
     cdr;
+    zone;
     set message(value) {
+        const textChanged = this._message && value && this._message.text !== value.text;
         this._message = value;
+        if (textChanged) {
+            this.parts = this.getFormattedTextParts(value.text);
+            if (this.isMessageExpandable && !this.showExpandCollapseIcon) {
+                this.updateExpandCollapseIconAfterStable();
+            }
+        }
     }
     get message() {
         return this._message;
@@ -6856,13 +7350,14 @@ class MessageComponent extends ChatItem {
     }
     subs = new Subscription();
     _message;
-    constructor(element, intl, chatService, localization, cdr) {
+    constructor(element, intl, chatService, localization, cdr, zone) {
         super();
         this.element = element;
         this.intl = intl;
         this.chatService = chatService;
         this.localization = localization;
         this.cdr = cdr;
+        this.zone = zone;
     }
     ngOnInit() {
         this.fileActions = this.getFileActions();
@@ -6873,14 +7368,20 @@ class MessageComponent extends ChatItem {
         this.subs.add(settingsChange$.subscribe(() => {
             this.fileActions = this.getFileActions();
             this.toolbarActions = this.getToolbarActions();
-            setTimeout(() => {
-                this.showExpandCollapseIcon = this.calculateExpandCollapseIconVisibility();
-            });
+            if (this.isMessageExpandable) {
+                this.updateExpandCollapseIconAfterStable();
+            }
         }));
         this.subs.add(this.chatService.allowMessageCollapseChange$.subscribe(() => {
-            setTimeout(() => {
-                this.showExpandCollapseIcon = this.calculateExpandCollapseIconVisibility();
-            });
+            if (this.isMessageExpandable) {
+                this.updateExpandCollapseIconAfterStable();
+            }
+            else {
+                this.showExpandCollapseIcon = false;
+            }
+        }));
+        this.subs.add(this.chatService.messageToolbarActionsChange$.subscribe(() => {
+            this.toolbarActions = this.getToolbarActions();
         }));
         if (this.message.id) {
             this.chatService.registerMessageElement(this.message.id, this.element);
@@ -6888,8 +7389,9 @@ class MessageComponent extends ChatItem {
         this.parts = this.getFormattedTextParts(this.message.text);
     }
     ngAfterViewInit() {
-        this.showExpandCollapseIcon = this.calculateExpandCollapseIconVisibility();
-        this.cdr.detectChanges();
+        if (this.isMessageExpandable) {
+            this.updateExpandCollapseIconAfterStable();
+        }
     }
     ngOnDestroy() {
         if (this.message.id) {
@@ -6960,6 +7462,7 @@ class MessageComponent extends ChatItem {
         event.stopImmediatePropagation();
         this.isMessageExpanded = !this.isMessageExpanded;
         this.chatService.toggleMessageState = false;
+        this.cdr.detectChanges();
     }
     onExpandableKeydown(event) {
         const key = normalizeKeys(event);
@@ -7074,7 +7577,13 @@ class MessageComponent extends ChatItem {
             : this.chatService.fileActions || [];
         return transformActions(actions);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: MessageComponent, deps: [{ token: i0.ElementRef }, { token: i1$1.IntlService }, { token: ChatService }, { token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    updateExpandCollapseIconAfterStable() {
+        this.subs.add(this.zone.onStable.pipe(take(1)).subscribe(() => {
+            this.showExpandCollapseIcon = this.calculateExpandCollapseIconVisibility();
+            this.cdr.detectChanges();
+        }));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: MessageComponent, deps: [{ token: i0.ElementRef }, { token: i1$1.IntlService }, { token: ChatService }, { token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: MessageComponent, isStandalone: true, selector: "kendo-chat-message", inputs: { message: "message", tabbable: "tabbable", authorMessageContentTemplate: "authorMessageContentTemplate", receiverMessageContentTemplate: "receiverMessageContentTemplate", messageContentTemplate: "messageContentTemplate", authorMessageTemplate: "authorMessageTemplate", receiverMessageTemplate: "receiverMessageTemplate", messageTemplate: "messageTemplate", statusTemplate: "statusTemplate", showMessageTime: "showMessageTime", authorId: "authorId" }, host: { listeners: { "keydown": "onKeyDown($event)" }, properties: { "class.k-message": "this.cssClass", "class.k-message-failed": "this.failedClass", "class.k-message-removed": "this.removedClass", "attr.tabIndex": "this.tabIndex" } }, providers: [
             {
                 provide: ChatItem,
@@ -7159,7 +7668,7 @@ class MessageComponent extends ChatItem {
                 </span>
                 } @if (!message.isDeleted && parts.length > 0) {
                 <span class="k-chat-bubble-text">
-                    @for (part of parts; track part) { @if (part.type === 'text') {{{part.content}}} @if (part.type ===
+                    @for (part of parts; track $index) { @if (part.type === 'text') {{{part.content}}} @if (part.type ===
                     'link') {<a [href]="part.href" target="_blank">{{ part.content }}</a
                     >} }
                 </span>
@@ -7172,7 +7681,7 @@ class MessageComponent extends ChatItem {
                         'k-files-vertical': chatService.messageFilesLayout === 'vertical'
                     }"
                 >
-                    @for (file of message.files; track file) {
+                    @for (file of message.files; track file.id) {
                     <li
                         class="k-file-box"
                         [chatFile]="file"
@@ -7186,7 +7695,7 @@ class MessageComponent extends ChatItem {
                 } @else {
                 <ul class="k-file-box-wrapper">
                     <div class="k-files-scroll">
-                        @for (file of message.files; track file) {
+                        @for (file of message.files; track file.id) {
                         <li
                             class="k-file-box"
                             [chatFile]="file"
@@ -7272,7 +7781,7 @@ class MessageComponent extends ChatItem {
         </div>
         } } @if (showToolbar) {
         <kendo-toolbar class="k-chat-message-toolbar" fillMode="flat">
-            @for (action of toolbarActions; track action) {
+            @for (action of toolbarActions; track action.id) {
             <kendo-toolbar-button
                 fillMode="flat"
                 [icon]="action.icon"
@@ -7376,7 +7885,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                 </span>
                 } @if (!message.isDeleted && parts.length > 0) {
                 <span class="k-chat-bubble-text">
-                    @for (part of parts; track part) { @if (part.type === 'text') {{{part.content}}} @if (part.type ===
+                    @for (part of parts; track $index) { @if (part.type === 'text') {{{part.content}}} @if (part.type ===
                     'link') {<a [href]="part.href" target="_blank">{{ part.content }}</a
                     >} }
                 </span>
@@ -7389,7 +7898,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                         'k-files-vertical': chatService.messageFilesLayout === 'vertical'
                     }"
                 >
-                    @for (file of message.files; track file) {
+                    @for (file of message.files; track file.id) {
                     <li
                         class="k-file-box"
                         [chatFile]="file"
@@ -7403,7 +7912,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                 } @else {
                 <ul class="k-file-box-wrapper">
                     <div class="k-files-scroll">
-                        @for (file of message.files; track file) {
+                        @for (file of message.files; track file.id) {
                         <li
                             class="k-file-box"
                             [chatFile]="file"
@@ -7489,7 +7998,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
         </div>
         } } @if (showToolbar) {
         <kendo-toolbar class="k-chat-message-toolbar" fillMode="flat">
-            @for (action of toolbarActions; track action) {
+            @for (action of toolbarActions; track action.id) {
             <kendo-toolbar-button
                 fillMode="flat"
                 [icon]="action.icon"
@@ -7516,7 +8025,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                         ButtonComponent,
                     ],
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1$1.IntlService }, { type: ChatService }, { type: i1.LocalizationService }, { type: i0.ChangeDetectorRef }], propDecorators: { message: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1$1.IntlService }, { type: ChatService }, { type: i1.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }], propDecorators: { message: [{
                 type: Input
             }], tabbable: [{
                 type: Input
@@ -8074,6 +8583,7 @@ class MessageListComponent {
                 item.selected = true;
                 this.selectedItem = item;
             }
+            this.chatService.layoutChangeInProgress = true;
             this.cdr.detectChanges();
         }
         this.chatService.toggleMessageState = false;
@@ -8238,7 +8748,7 @@ class MessageListComponent {
             <div class="k-message-group-content">
                 @if (showGroupAuthor(group)) {
                 <p class="k-message-author">{{ group.author.name }}</p>
-                } @for (msg of group.messages; track msg; let firstMessage = $first; let lastMessage = $last) { @if
+                } @for (msg of group.messages; track msg.id; let firstMessage = $first; let lastMessage = $last) { @if
                 (msg.user?.avatarUrl) {
                 <div class="k-avatar">
                     <span class="k-avatar-image">
@@ -8346,7 +8856,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
             <div class="k-message-group-content">
                 @if (showGroupAuthor(group)) {
                 <p class="k-message-author">{{ group.author.name }}</p>
-                } @for (msg of group.messages; track msg; let firstMessage = $first; let lastMessage = $last) { @if
+                } @for (msg of group.messages; track msg.id; let firstMessage = $first; let lastMessage = $last) { @if
                 (msg.user?.avatarUrl) {
                 <div class="k-avatar">
                     <span class="k-avatar-image">
@@ -8666,6 +9176,86 @@ class ChatComponent {
     get sendButtonSettings() {
         return this.sendButton;
     }
+    /**
+     * Controls the scrolling behavior of the message list.
+     *
+     * @default 'scrollable'
+     */
+    scrollMode = 'scrollable';
+    /**
+     * Sets the number of messages loaded per page in endless scroll mode.
+     * Ignored in `scrollable` mode.
+     *
+     * @default 50
+     */
+    pageSize = 50;
+    /**
+     * Sets the minimum distance between a new receiver message and the top of the visible
+     * message area when auto-scrolling. Keeps older messages partially visible instead of
+     * scrolling them out of view.
+     *
+     * Accepts a percentage string relative to the visible area height (for example, `'30%'`)
+     * or a pixel value as a number. Negative values scroll the message fully to the bottom.
+     *
+     * Has no effect on author messages, which always scroll to the bottom.
+     *
+     * @default '20%'
+     */
+    autoScrollThreshold = '20%';
+    /**
+     * Sets the total number of messages in the conversation.
+     *
+     * When `messages.length` equals `total` (or `total` is not set), the Chat operates in
+     * **built-in mode** and manages rendering internally. When `messages.length < total`,
+     * the Chat operates in **remote mode** — the consumer manages data via
+     * [`loadMore`](slug:api_conversational-ui_chatcomponent#loadMore) events.
+     *
+     * Only relevant when [`scrollMode`](slug:api_conversational-ui_chatcomponent#scrollMode)
+     * is `'endless'`.
+     */
+    total;
+    /**
+     * Sets the index in the full conversation that `messages[0]` corresponds to.
+     *
+     * Only relevant in remote mode (`messages.length < total`). As the user scrolls up
+     * and the consumer prepends messages, `startIndex` decreases. The Chat uses this to
+     * compute the correct range for the next
+     * [`loadMore`](slug:api_conversational-ui_chatcomponent#loadMore) call.
+     *
+     * Ignored in built-in mode.
+     */
+    startIndex;
+    /**
+     * Sets the exclusive end index of the current batch in the full conversation.
+     *
+     * Only relevant in remote mode (`messages.length < total`). As the user scrolls down
+     * and the consumer appends messages, `endIndex` increases. The Chat uses this to know
+     * whether more messages exist below the current batch.
+     *
+     * Ignored in built-in mode.
+     */
+    endIndex;
+    /**
+     * Sets the full set of pinned messages in the conversation.
+     *
+     * Only needed in remote mode (`messages.length < total`). The Chat uses this to
+     * render the pinned message indicator when the pinned message is outside the current
+     * batch. In built-in mode, the Chat has all messages and can look them up directly.
+     *
+     * @default []
+     */
+    pinnedMessages = [];
+    /**
+     * Sets the reply targets that live outside the current batch.
+     *
+     * Only needed in remote mode (`messages.length < total`). The Chat uses this to
+     * render reply previews when the replied-to message is not in the current batch.
+     * The consumer resolves this after each data fetch by finding which `replyToId`
+     * targets are missing from the batch and fetching only those.
+     *
+     * @default []
+     */
+    repliedToMessages = [];
     /**
      * Sets the names of the model fields from which the Chat reads its data.
      * Lets you map custom data types to the expected `Message` format.
@@ -8743,6 +9333,14 @@ class ChatComponent {
      * Fires when the user types in the message input box.
      */
     inputValueChange = new EventEmitter();
+    /**
+     * Fires when the user scrolls near the edge of the rendered message window in endless scroll mode.
+     */
+    loadMore = new EventEmitter();
+    /**
+     * Fires when the user clicks a referenced message (pinned indicator or reply preview).
+     */
+    referencedMessageClick = new EventEmitter();
     get className() {
         return 'k-chat';
     }
@@ -8793,6 +9391,43 @@ class ChatComponent {
         }
         return this.messages;
     }
+    /**
+     * @hidden
+     * Returns `true` when the Chat is in remote endless scroll mode.
+     * Remote mode is active whenever the consumer provides a `total`.
+     */
+    get isRemoteMode() {
+        return this.scrollMode === 'endless'
+            && isPresent(this.total);
+    }
+    /**
+     * @hidden
+     * Returns the messages to render — sliced in endless mode, full in scrollable mode.
+     * In remote mode, returns processedMessages as-is (consumer already provides only the current batch).
+     */
+    get renderedMessages() {
+        const all = this.processedMessages;
+        if (!all || all.length === 0) {
+            return [];
+        }
+        if (this.scrollMode === 'endless') {
+            if (this.isRemoteMode) {
+                return all;
+            }
+            const start = this.endlessState.startIndex;
+            const end = this.endlessState.endIndex;
+            if (all !== this._renderedMessagesSource ||
+                start !== this._renderedMessagesStart ||
+                end !== this._renderedMessagesEnd) {
+                this._cachedRenderedMessages = all.slice(start, end);
+                this._renderedMessagesSource = all;
+                this._renderedMessagesStart = start;
+                this._renderedMessagesEnd = end;
+            }
+            return this._cachedRenderedMessages;
+        }
+        return all;
+    }
     /**
      * @hidden
      */
@@ -8838,6 +9473,19 @@ class ChatComponent {
      * @hidden
      */
     scrollToBottomIcon = arrowDownOutlineIcon;
+    /**
+     * @hidden
+     */
+    endlessState = new EndlessScrollState();
+    /**
+     * @hidden
+     */
+    showLicenseWatermark = false;
+    /**
+     * @hidden
+     */
+    licenseMessage;
+    anchor;
     direction;
     subs = new Subscription();
     _modelFields = defaultModelFields;
@@ -8848,13 +9496,25 @@ class ChatComponent {
     _lastModelFields = null;
     _cachedContextMenuActions = [];
     _lastContextMenuActionsReference = null;
+    _previousMessagesLength = 0;
+    _pendingScrollAction = null;
+    _scrollHandledBeforePaint = false;
+    _lastNewMessageId = null;
+    _cachedRenderedMessages = [];
+    _renderedMessagesSource = null;
+    _renderedMessagesStart = -1;
+    _renderedMessagesEnd = -1;
+    _pendingRemoteScrollToMessageId = null;
+    _remoteScrollToBottom = false;
     constructor(localization, zone, renderer, element, chatService) {
         this.localization = localization;
         this.zone = zone;
         this.renderer = renderer;
         this.element = element;
         this.chatService = chatService;
-        validatePackage(packageMetadata);
+        const isValid = validatePackage(packageMetadata);
+        this.licenseMessage = getLicenseMessage(packageMetadata);
+        this.showLicenseWatermark = shouldShowValidationUI(isValid);
         this.direction = localization.rtl ? 'rtl' : 'ltr';
         this.subs.add(localization.changes.subscribe(({ rtl }) => {
             this.direction = rtl ? 'rtl' : 'ltr';
@@ -8900,17 +9560,53 @@ class ChatComponent {
         }));
         this.pinnedMessage = this.findLastPinnedMessage();
         this.chatService.authorId = this.authorId;
+        this.chatService.repliedToMessages = this.repliedToMessages || [];
+        this.initEndlessScroll();
+        this.subs.add(this.chatService.replyReferenceClick$.subscribe((messageId) => {
+            this.handleReferencedMessageClick(messageId, 'reply');
+        }));
     }
     /**
      * @hidden
      */
     ngOnChanges(changes) {
-        this.zone.runOutsideAngular(() => setTimeout(() => {
-            this.messageList.element.nativeElement.style.flex = '1 1 auto';
-        }));
         if (isChanged('messages', changes, false)) {
             this.pinnedMessage = this.findLastPinnedMessage();
             this.chatService.messages = this.processedMessages;
+            if (this.isRemoteMode) {
+                const skipDetectAndSchedule = this.endlessState.isLoading || !!this._pendingRemoteScrollToMessageId;
+                if (!skipDetectAndSchedule) {
+                    this.detectNewMessageScrollAction();
+                }
+                this.handleRemoteMessagesChange();
+                if (!skipDetectAndSchedule) {
+                    this.scheduleNewMessageScroll();
+                }
+            }
+            else {
+                this.detectNewMessageScrollAction();
+                this.handleMessagesChange();
+                this.scheduleNewMessageScroll();
+            }
+            this.handlePendingRemoteScroll();
+        }
+        if (isChanged('pinnedMessages', changes, false)) {
+            this.pinnedMessage = this.findLastPinnedMessage();
+        }
+        if (isChanged('repliedToMessages', changes, false)) {
+            this.chatService.repliedToMessages = this.repliedToMessages || [];
+        }
+        this.validateRemoteInputs();
+        if (isChanged('scrollMode', changes, false)) {
+            this.initEndlessScroll();
+        }
+        if (isChanged('pageSize', changes, false) && this.scrollMode === 'endless') {
+            this.endlessState.init(this.processedMessages?.length || 0, this.pageSize);
+        }
+        if (this.isRemoteMode && (isChanged('startIndex', changes, false) ||
+            isChanged('endIndex', changes, false) ||
+            isChanged('total', changes, false))) {
+            this.endlessState.syncFromInputs(this.startIndex, this.endIndex, this.total);
         }
         if (isChanged('height', changes, false)) {
             this.renderer.setStyle(this.element.nativeElement, 'height', `${processCssValue(this.height)}`);
@@ -8980,9 +9676,130 @@ class ChatComponent {
     /**
      * @hidden
      */
-    scrollToPinnedMessage() {
+    scrollToPinnedMessage(event) {
+        if (event && event.target?.closest('button')) {
+            return;
+        }
         if (this.pinnedMessage) {
-            this.chatService.scrollToMessage(this.pinnedMessage?.id);
+            this.handleReferencedMessageClick(this.pinnedMessage.id, 'pinned');
+        }
+    }
+    /**
+     * @hidden
+     */
+    onNearTop() {
+        if (this.scrollMode !== 'endless' || this.endlessState.isLoading) {
+            return;
+        }
+        if (this.isRemoteMode) {
+            if (this.startIndex <= 0) {
+                return;
+            }
+            this.endlessState.isLoading = true;
+            this.anchor?.recordScrollHeight();
+            this.anchor?.setAriaLive('off');
+            const reqStart = Math.max(0, this.startIndex - this.pageSize);
+            this.loadMore.emit({ startIndex: reqStart, endIndex: this.startIndex });
+            return;
+        }
+        const range = this.endlessState.extendUp();
+        if (range) {
+            this.endlessState.isLoading = true;
+            this.anchor?.recordScrollHeight();
+            this.anchor?.setAriaLive('off');
+            this.loadMore.emit({ startIndex: range.start, endIndex: range.end });
+            this.subs.add(this.zone.onStable.pipe(take(1)).subscribe(() => {
+                this.anchor?.preserveScrollPosition();
+                this.anchor?.setAriaLive('polite');
+                this.endlessState.isLoading = false;
+            }));
+        }
+    }
+    /**
+     * @hidden
+     */
+    onNearBottom() {
+        if (this.scrollMode !== 'endless' || this.endlessState.isLoading) {
+            return;
+        }
+        if (this.isRemoteMode) {
+            if (this.endIndex >= this.total) {
+                return;
+            }
+            this.endlessState.isLoading = true;
+            this.anchor?.setAriaLive('off');
+            const reqEnd = Math.min(this.total, this.endIndex + this.pageSize);
+            this.loadMore.emit({ startIndex: this.endIndex, endIndex: reqEnd });
+            return;
+        }
+        const range = this.endlessState.extendDown();
+        if (range) {
+            this.endlessState.isLoading = true;
+            this.loadMore.emit({ startIndex: range.start, endIndex: range.end });
+            this.subs.add(this.zone.onStable.pipe(take(1)).subscribe(() => {
+                this.endlessState.isLoading = false;
+            }));
+        }
+    }
+    /**
+     * @hidden
+     */
+    onScrollToBottomClick() {
+        if (this.scrollMode === 'endless' && !this.endlessState.isAtEnd) {
+            if (this.isRemoteMode) {
+                this.endlessState.isLoading = true;
+                this._remoteScrollToBottom = true;
+                this.autoScroll = true;
+                const reqStart = Math.max(0, this.total - this.pageSize);
+                this.loadMore.emit({ startIndex: reqStart, endIndex: this.total });
+                return;
+            }
+            this.anchor?.lockForMessageScroll();
+            const range = this.endlessState.jumpToEnd();
+            this.loadMore.emit({ startIndex: range.start, endIndex: range.end });
+            this.subs.add(this.zone.onStable.pipe(take(1)).subscribe(() => {
+                this.anchor?.scrollToBottomWithSettle(() => {
+                    this.anchor?.unlockForMessageScroll();
+                });
+            }));
+        }
+        else {
+            this.anchor?.scrollToBottom();
+        }
+    }
+    /**
+     * @hidden
+     */
+    handleReferencedMessageClick(messageId, type) {
+        this.referencedMessageClick.emit({ id: messageId, type });
+        this.autoScroll = false;
+        if (this.scrollMode === 'endless') {
+            if (this.isRemoteMode) {
+                this.handleRemoteReferencedMessageClick(messageId);
+                return;
+            }
+            const allMessages = this.processedMessages;
+            const targetIndex = allMessages.findIndex(m => m.id === messageId);
+            if (targetIndex === -1) {
+                return;
+            }
+            if (this.endlessState.contains(targetIndex)) {
+                this.anchor?.lockForMessageScroll();
+                this.chatService.scrollToMessage(messageId, 'auto');
+                this.anchor?.unlockForMessageScroll();
+            }
+            else {
+                this.anchor?.lockForMessageScroll();
+                const range = this.endlessState.jumpTo(targetIndex);
+                this.loadMore.emit({ startIndex: range.start, endIndex: range.end });
+                this.subs.add(this.zone.onStable.pipe(take(1)).subscribe(() => {
+                    this.chatService.scrollToMessage(messageId, 'auto');
+                    this.anchor?.unlockForMessageScroll();
+                }));
+            }
+        }
+        else {
+            this.chatService.scrollToMessage(messageId);
         }
     }
     /**
@@ -9022,8 +9839,203 @@ class ChatComponent {
             this.chatService.selectOnMenuClose = false;
         }
     }
+    /**
+     * @hidden
+     */
+    onMessageListResize() {
+        this.anchor?.calculateMessageBoxSeparator();
+        const layoutChange = this.chatService.layoutChangeInProgress;
+        const skipAutoScroll = !!this._pendingScrollAction || this._scrollHandledBeforePaint || layoutChange;
+        if (skipAutoScroll) {
+            this._scrollHandledBeforePaint = false;
+            if (layoutChange) {
+                this.chatService.layoutChangeInProgress = false;
+                this.anchor?.onScroll();
+            }
+            return;
+        }
+        this.anchor?.autoScrollToBottom();
+    }
+    /**
+     * Schedules the new-message scroll adjustment on zone.onStable so it runs
+     * after Angular renders the new DOM but before the browser paints,
+     * preventing a visible intermediate frame.
+     */
+    scheduleNewMessageScroll() {
+        if (!this._pendingScrollAction) {
+            return;
+        }
+        this.subs.add(this.zone.onStable.pipe(take(1)).subscribe(() => {
+            this.zone.run(() => {
+                const action = this._pendingScrollAction;
+                this._pendingScrollAction = null;
+                this._scrollHandledBeforePaint = true;
+                if (action === 'author') {
+                    this._lastNewMessageId = null;
+                    this.autoScroll = true;
+                    this.anchor?.scrollToBottomWithSettle();
+                    return;
+                }
+                if (action === 'receiver') {
+                    const messageEl = this.getLastNewMessageElement();
+                    this._lastNewMessageId = null;
+                    this.autoScroll = true;
+                    if (messageEl) {
+                        this.anchor?.scrollWithThreshold(messageEl);
+                    }
+                    else {
+                        this.anchor?.scrollToBottom();
+                    }
+                }
+            });
+        }));
+    }
+    detectNewMessageScrollAction() {
+        const messages = this.processedMessages;
+        const prevLength = this._previousMessagesLength;
+        const hasNoMessages = !messages;
+        const hasNoNewMessages = messages && messages.length <= prevLength;
+        const isInitialLoad = prevLength === 0;
+        if (hasNoMessages || hasNoNewMessages || isInitialLoad) {
+            this._pendingScrollAction = null;
+            this._lastNewMessageId = null;
+            return;
+        }
+        const lastMessage = messages[messages.length - 1];
+        this._lastNewMessageId = lastMessage?.id ?? null;
+        const isAuthor = this.isOwnMessage(lastMessage);
+        if (isAuthor) {
+            this._pendingScrollAction = 'author';
+            return;
+        }
+        if (!this.anchor) {
+            this._pendingScrollAction = null;
+            return;
+        }
+        const distance = this.anchor.getDistanceFromBottom();
+        const threshold = this.anchor.getAutoScrollThresholdPx();
+        const isNearBottom = distance <= threshold || this.anchor.isFollowingThreshold;
+        this._pendingScrollAction = isNearBottom ? 'receiver' : null;
+    }
+    getLastNewMessageElement() {
+        if (this._lastNewMessageId == null) {
+            return null;
+        }
+        const ref = this.chatService.messageElementsMap.get(this._lastNewMessageId);
+        return ref?.nativeElement ?? null;
+    }
     findLastPinnedMessage() {
-        return [...this.processedMessages].reverse().find((message) => message.isPinned);
+        const fromMessages = [...this.processedMessages].reverse().find((message) => message.isPinned);
+        if (fromMessages) {
+            return fromMessages;
+        }
+        if (this.isRemoteMode && this.pinnedMessages?.length) {
+            return [...this.pinnedMessages].reverse().find((message) => message.isPinned);
+        }
+        return undefined;
+    }
+    initEndlessScroll() {
+        if (this.scrollMode === 'endless') {
+            if (this.isRemoteMode) {
+                this.endlessState.syncFromInputs(this.startIndex ?? 0, this.endIndex ?? 0, this.total ?? 0);
+            }
+            else {
+                this.endlessState.init(this.processedMessages?.length || 0, this.pageSize);
+            }
+            this._previousMessagesLength = this.processedMessages?.length || 0;
+        }
+        else {
+            this.endlessState.reset();
+            this._remoteScrollToBottom = false;
+            this._pendingRemoteScrollToMessageId = null;
+        }
+    }
+    handleMessagesChange() {
+        if (this.scrollMode !== 'endless') {
+            this._previousMessagesLength = this.processedMessages?.length || 0;
+            return;
+        }
+        const allMessages = this.processedMessages || [];
+        const wasAtEnd = this.endlessState.isAtEnd;
+        const isNewMessageAppended = allMessages.length > this._previousMessagesLength && this._previousMessagesLength > 0;
+        const isSameLength = allMessages.length === this._previousMessagesLength;
+        const shouldScroll = this._pendingScrollAction !== null;
+        if (isNewMessageAppended) {
+            this.endlessState.updateTotal(allMessages.length);
+            if (shouldScroll) {
+                if (!wasAtEnd) {
+                    const range = this.endlessState.jumpToEnd();
+                    this.loadMore.emit({ startIndex: range.start, endIndex: range.end });
+                }
+                else {
+                    this.endlessState.endIndex = allMessages.length;
+                }
+            }
+        }
+        else if (!isSameLength) {
+            this.endlessState.init(allMessages.length, this.pageSize);
+        }
+        this._previousMessagesLength = allMessages.length;
+    }
+    handleRemoteMessagesChange() {
+        const wasLoading = this.endlessState.isLoading;
+        const prevLength = this._previousMessagesLength;
+        const currentLength = this.processedMessages?.length || 0;
+        const isInitialBatch = prevLength === 0 && currentLength > 0;
+        if (wasLoading) {
+            this.endlessState.isLoading = false;
+            if (this._remoteScrollToBottom) {
+                this._remoteScrollToBottom = false;
+                this._scrollHandledBeforePaint = true;
+                this.subs.add(this.zone.onStable.pipe(take(1)).subscribe(() => {
+                    this.anchor?.scrollToBottomWithSettle();
+                }));
+            }
+            else {
+                this._scrollHandledBeforePaint = true;
+                this.subs.add(this.zone.onStable.pipe(take(1)).subscribe(() => {
+                    this.anchor?.preserveScrollPosition();
+                    this.anchor?.setAriaLive('polite');
+                }));
+            }
+        }
+        else if (isInitialBatch) {
+            this.autoScroll = true;
+            this.subs.add(this.zone.onStable.pipe(take(1)).subscribe(() => {
+                this.anchor?.scrollToBottom();
+            }));
+        }
+        else if (currentLength > 0 && !this._pendingScrollAction) {
+            const lastMessage = this.processedMessages[currentLength - 1];
+            const isNowAtEnd = this.endIndex >= this.total;
+            if (isNowAtEnd && this.isOwnMessage(lastMessage)) {
+                this._pendingScrollAction = 'author';
+            }
+        }
+        this._previousMessagesLength = currentLength;
+    }
+    handleRemoteReferencedMessageClick(messageId) {
+        const messageEl = this.chatService.messageElementsMap.get(messageId);
+        if (messageEl) {
+            this.anchor?.lockForMessageScroll();
+            this.chatService.scrollToMessage(messageId, 'auto');
+            this.anchor?.unlockForMessageScroll();
+            return;
+        }
+        this._pendingRemoteScrollToMessageId = messageId;
+    }
+    handlePendingRemoteScroll() {
+        if (!this._pendingRemoteScrollToMessageId) {
+            return;
+        }
+        const messageId = this._pendingRemoteScrollToMessageId;
+        this._pendingRemoteScrollToMessageId = null;
+        this._scrollHandledBeforePaint = true;
+        this.subs.add(this.zone.onStable.pipe(take(1)).subscribe(() => {
+            this.anchor?.lockForMessageScroll();
+            this.chatService.scrollToMessage(messageId, 'auto');
+            this.anchor?.unlockForMessageScroll();
+        }));
     }
     updateChatServiceProperties(propNames, changes) {
         propNames.forEach(propName => {
@@ -9032,6 +10044,34 @@ class ChatComponent {
             }
         });
     }
+    validateRemoteInputs() {
+        if (!isDevMode()) {
+            return;
+        }
+        const hasRemoteInputs = isPresent(this.total) || isPresent(this.startIndex) || isPresent(this.endIndex);
+        if (hasRemoteInputs && this.scrollMode !== 'endless') {
+            console.warn('[kendo-chat] [total], [startIndex], and [endIndex] are only used when [scrollMode] is \'endless\'.');
+            return;
+        }
+        if (isPresent(this.total) && (!isPresent(this.startIndex) || !isPresent(this.endIndex))) {
+            console.warn('[kendo-chat] Remote mode requires [startIndex] and [endIndex] when [total] is set.');
+        }
+        if (isPresent(this.startIndex) && this.startIndex < 0) {
+            console.warn('[kendo-chat] [startIndex] must not be negative.');
+        }
+        if (isPresent(this.startIndex) && isPresent(this.endIndex) && this.startIndex > this.endIndex) {
+            console.warn(`[kendo-chat] [startIndex] (${this.startIndex}) must not exceed [endIndex] (${this.endIndex}).`);
+        }
+        if (isPresent(this.endIndex) && isPresent(this.total) && this.endIndex > this.total) {
+            console.warn(`[kendo-chat] [endIndex] (${this.endIndex}) must not exceed [total] (${this.total}).`);
+        }
+        if (isPresent(this.startIndex) && isPresent(this.endIndex) && this.messages) {
+            const expectedLength = this.endIndex - this.startIndex;
+            if (this.messages.length !== expectedLength) {
+                console.warn(`[kendo-chat] messages.length (${this.messages.length}) does not match the range [startIndex]–[endIndex] (expected ${expectedLength}).`);
+            }
+        }
+    }
     mergeWithDefaultActions(actions, defaultActions) {
         if (!actions || actions.length === 0) {
             return [];
@@ -9045,7 +10085,7 @@ class ChatComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ChatComponent, deps: [{ token: i1.LocalizationService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: ChatService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: ChatComponent, isStandalone: true, selector: "kendo-chat", inputs: { messages: "messages", authorId: "authorId", messageBoxType: "messageBoxType", height: "height", width: "width", placeholder: "placeholder", messageWidthMode: "messageWidthMode", timestampVisibility: "timestampVisibility", showUsername: "showUsername", showAvatar: "showAvatar", allowMessageCollapse: "allowMessageCollapse", speechToTextButton: "speechToTextButton", fileSelectButton: "fileSelectButton", messageBoxSettings: "messageBoxSettings", messageToolbarActions: "messageToolbarActions", inputValue: "inputValue", authorMessageSettings: "authorMessageSettings", receiverMessageSettings: "receiverMessageSettings", messageContextMenuActions: "messageContextMenuActions", fileActions: "fileActions", messageFilesLayout: "messageFilesLayout", suggestionsLayout: "suggestionsLayout", quickActionsLayout: "quickActionsLayout", suggestions: "suggestions", sendButton: "sendButton", sendButtonSettings: "sendButtonSettings", modelFields: "modelFields", scrollToBottomButton: "scrollToBottomButton", loading: "loading" }, outputs: { sendMessage: "sendMessage", resendMessage: "resendMessage", toolbarActionClick: "toolbarActionClick", contextMenuActionClick: "contextMenuActionClick", fileActionClick: "fileActionClick", download: "download", executeAction: "executeAction", suggestionExecute: "suggestionExecute", fileSelect: "fileSelect", fileRemove: "fileRemove", unpin: "unpin", inputValueChange: "inputValueChange" }, host: { properties: { "class": "this.className", "attr.dir": "this.dirAttr" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: ChatComponent, isStandalone: true, selector: "kendo-chat", inputs: { messages: "messages", authorId: "authorId", messageBoxType: "messageBoxType", height: "height", width: "width", placeholder: "placeholder", messageWidthMode: "messageWidthMode", timestampVisibility: "timestampVisibility", showUsername: "showUsername", showAvatar: "showAvatar", allowMessageCollapse: "allowMessageCollapse", speechToTextButton: "speechToTextButton", fileSelectButton: "fileSelectButton", messageBoxSettings: "messageBoxSettings", messageToolbarActions: "messageToolbarActions", inputValue: "inputValue", authorMessageSettings: "authorMessageSettings", receiverMessageSettings: "receiverMessageSettings", messageContextMenuActions: "messageContextMenuActions", fileActions: "fileActions", messageFilesLayout: "messageFilesLayout", suggestionsLayout: "suggestionsLayout", quickActionsLayout: "quickActionsLayout", suggestions: "suggestions", sendButton: "sendButton", sendButtonSettings: "sendButtonSettings", scrollMode: "scrollMode", pageSize: "pageSize", autoScrollThreshold: "autoScrollThreshold", total: "total", startIndex: "startIndex", endIndex: "endIndex", pinnedMessages: "pinnedMessages", repliedToMessages: "repliedToMessages", modelFields: "modelFields", scrollToBottomButton: "scrollToBottomButton", loading: "loading" }, outputs: { sendMessage: "sendMessage", resendMessage: "resendMessage", toolbarActionClick: "toolbarActionClick", contextMenuActionClick: "contextMenuActionClick", fileActionClick: "fileActionClick", download: "download", executeAction: "executeAction", suggestionExecute: "suggestionExecute", fileSelect: "fileSelect", fileRemove: "fileRemove", unpin: "unpin", inputValueChange: "inputValueChange", loadMore: "loadMore", referencedMessageClick: "referencedMessageClick" }, host: { properties: { "class": "this.className", "attr.dir": "this.dirAttr" } }, providers: [
             LocalizationService,
             ChatService,
             SuggestionsScrollService,
@@ -9053,7 +10093,7 @@ class ChatComponent {
                 provide: L10N_PREFIX,
                 useValue: 'kendo.chat',
             },
-        ], queries: [{ propertyName: "attachmentTemplate", first: true, predicate: AttachmentTemplateDirective, descendants: true }, { propertyName: "chatHeaderTemplate", first: true, predicate: ChatHeaderTemplateDirective, descendants: true }, { propertyName: "chatNoDataTemplate", first: true, predicate: NoDataTemplateDirective, descendants: true }, { propertyName: "authorMessageContentTemplate", first: true, predicate: AuthorMessageContentTemplateDirective, descendants: true }, { propertyName: "receiverMessageContentTemplate", first: true, predicate: ReceiverMessageContentTemplateDirective, descendants: true }, { propertyName: "messageContentTemplate", first: true, predicate: MessageContentTemplateDirective, descendants: true }, { propertyName: "authorMessageTemplate", first: true, predicate: AuthorMessageTemplateDirective, descendants: true }, { propertyName: "receiverMessageTemplate", first: true, predicate: ReceiverMessageTemplateDirective, descendants: true }, { propertyName: "messageTemplate", first: true, predicate: MessageTemplateDirective, descendants: true }, { propertyName: "timestampTemplate", first: true, predicate: ChatTimestampTemplateDirective, descendants: true }, { propertyName: "suggestionTemplate", first: true, predicate: ChatSuggestionTemplateDirective, descendants: true }, { propertyName: "statusTemplate", first: true, predicate: ChatStatusTemplateDirective, descendants: true }, { propertyName: "messageBoxTemplate", first: true, predicate: ChatMessageBoxTemplateDirective, descendants: true }, { propertyName: "messageBoxStartAffixTemplate", first: true, predicate: ChatMessageBoxStartAffixTemplateDirective, descendants: true }, { propertyName: "messageBoxEndAffixTemplate", first: true, predicate: ChatMessageBoxEndAffixTemplateDirective, descendants: true }, { propertyName: "messageBoxTopAffixTemplate", first: true, predicate: ChatMessageBoxTopAffixTemplateDirective, descendants: true }, { propertyName: "userStatusTemplate", first: true, predicate: ChatUserStatusTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "messagesContextMenu", first: true, predicate: ["messagesContextMenu"], descendants: true }, { propertyName: "messageBox", first: true, predicate: ["messageBox"], descendants: true }, { propertyName: "messageList", first: true, predicate: ["messageList"], descendants: true, read: ViewContainerRef, static: true }], usesOnChanges: true, ngImport: i0, template: `
+        ], queries: [{ propertyName: "attachmentTemplate", first: true, predicate: AttachmentTemplateDirective, descendants: true }, { propertyName: "chatHeaderTemplate", first: true, predicate: ChatHeaderTemplateDirective, descendants: true }, { propertyName: "chatNoDataTemplate", first: true, predicate: NoDataTemplateDirective, descendants: true }, { propertyName: "authorMessageContentTemplate", first: true, predicate: AuthorMessageContentTemplateDirective, descendants: true }, { propertyName: "receiverMessageContentTemplate", first: true, predicate: ReceiverMessageContentTemplateDirective, descendants: true }, { propertyName: "messageContentTemplate", first: true, predicate: MessageContentTemplateDirective, descendants: true }, { propertyName: "authorMessageTemplate", first: true, predicate: AuthorMessageTemplateDirective, descendants: true }, { propertyName: "receiverMessageTemplate", first: true, predicate: ReceiverMessageTemplateDirective, descendants: true }, { propertyName: "messageTemplate", first: true, predicate: MessageTemplateDirective, descendants: true }, { propertyName: "timestampTemplate", first: true, predicate: ChatTimestampTemplateDirective, descendants: true }, { propertyName: "suggestionTemplate", first: true, predicate: ChatSuggestionTemplateDirective, descendants: true }, { propertyName: "statusTemplate", first: true, predicate: ChatStatusTemplateDirective, descendants: true }, { propertyName: "messageBoxTemplate", first: true, predicate: ChatMessageBoxTemplateDirective, descendants: true }, { propertyName: "messageBoxStartAffixTemplate", first: true, predicate: ChatMessageBoxStartAffixTemplateDirective, descendants: true }, { propertyName: "messageBoxEndAffixTemplate", first: true, predicate: ChatMessageBoxEndAffixTemplateDirective, descendants: true }, { propertyName: "messageBoxTopAffixTemplate", first: true, predicate: ChatMessageBoxTopAffixTemplateDirective, descendants: true }, { propertyName: "userStatusTemplate", first: true, predicate: ChatUserStatusTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "messagesContextMenu", first: true, predicate: ["messagesContextMenu"], descendants: true }, { propertyName: "messageBox", first: true, predicate: ["messageBox"], descendants: true }, { propertyName: "messageList", first: true, predicate: ["messageList"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "anchor", first: true, predicate: ["anchor"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
         <ng-container
             kendoChatLocalizedMessages
             i18n-deletedMessageSenderText="
@@ -9123,9 +10163,7 @@ class ChatComponent {
                 kendo.chat.nextSuggestionsButtonTitle|The title of the button that scrolls to the next suggestions
             "
             nextSuggestionsButtonTitle="Scroll right"
-            i18n-unpinMessageTitle="
-                kendo.chat.unpinMessageTitle|The title of the button that unpins a pinned message
-            "
+            i18n-unpinMessageTitle="kendo.chat.unpinMessageTitle|The title of the button that unpins a pinned message"
             unpinMessageTitle="Unpin message"
         >
         </ng-container>
@@ -9144,18 +10182,30 @@ class ChatComponent {
             [attr.aria-label]="textFor('messageListLabel')"
             #anchor="scrollAnchor"
             [(autoScroll)]="autoScroll"
+            [autoScrollThreshold]="autoScrollThreshold"
+            [endlessMode]="scrollMode === 'endless'"
+            [rangeIsAtEnd]="endlessState.isAtEnd"
+            (nearTop)="onNearTop()"
+            (nearBottom)="onNearBottom()"
         >
             @if (pinnedMessage) {
             <div
                 class="k-message-reference k-message-pinned"
                 [class.k-message-reference-receiver]="!isOwnMessage(pinnedMessage)"
                 [class.k-message-reference-sender]="isOwnMessage(pinnedMessage)"
-                (click)="scrollToPinnedMessage()"
+                (click)="scrollToPinnedMessage($event)"
             >
                 <kendo-icon-wrapper name="pin" [svgIcon]="pinIcon"> </kendo-icon-wrapper>
                 <chat-message-reference-content [message]="pinnedMessage"></chat-message-reference-content>
                 <span class="k-spacer"></span>
-                <button kendoButton icon="x" [svgIcon]="deleteIcon" [attr.title]="textFor('unpinMessageTitle')" (click)="unpin.emit(pinnedMessage)" fillMode="flat"></button>
+                <button
+                    kendoButton
+                    icon="x"
+                    [svgIcon]="deleteIcon"
+                    [attr.title]="textFor('unpinMessageTitle')"
+                    (click)="unpin.emit(pinnedMessage)"
+                    fillMode="flat"
+                ></button>
             </div>
             } @if (processedMessages && processedMessages.length === 0) {
             <div class="k-message-list-content k-message-list-content-empty">
@@ -9163,7 +10213,7 @@ class ChatComponent {
             </div>
             } @else {
             <kendo-chat-message-list
-                [messages]="processedMessages"
+                [messages]="renderedMessages"
                 [authorMessageContentTemplate]="authorMessageContentTemplate"
                 [receiverMessageContentTemplate]="receiverMessageContentTemplate"
                 [messageContentTemplate]="messageContentTemplate"
@@ -9177,7 +10227,7 @@ class ChatComponent {
                 [attachmentTemplate]="attachmentTemplate"
                 [authorId]="authorId"
                 (executeAction)="dispatchAction($event)"
-                (resize)="anchor.autoScrollToBottom(); anchor.calculateMessageBoxSeparator()"
+                (resize)="onMessageListResize()"
                 (navigate)="this.autoScroll = false"
             >
             </kendo-chat-message-list>
@@ -9190,7 +10240,7 @@ class ChatComponent {
                     [align]="{ horizontal: 'center' }"
                     icon="arrow-down-outline"
                     [svgIcon]="scrollToBottomIcon"
-                    (click)="anchor.scrollToBottom()"
+                    (click)="onScrollToBottomClick()"
                 ></kendo-floatingactionbutton>
             </div>
             }
@@ -9227,7 +10277,11 @@ class ChatComponent {
             (popupClose)="handleMenuClose($event)"
             (select)="onContextMenuAction($event.item.originalAction)"
         ></kendo-contextmenu>
-    `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective$2, selector: "[kendoChatLocalizedMessages]" }, { kind: "directive", type: ScrollAnchorDirective, selector: "[kendoChatScrollAnchor]", inputs: ["autoScroll"], outputs: ["autoScrollChange"], exportAs: ["scrollAnchor"] }, { kind: "component", type: MessageListComponent, selector: "kendo-chat-message-list", inputs: ["messages", "attachmentTemplate", "authorMessageContentTemplate", "receiverMessageContentTemplate", "messageContentTemplate", "authorMessageTemplate", "receiverMessageTemplate", "messageTemplate", "timestampTemplate", "statusTemplate", "userStatusTemplate", "localization", "authorId"], outputs: ["executeAction", "navigate", "resize"] }, { kind: "component", type: MessageBoxComponent, selector: "kendo-message-box", inputs: ["authorId", "autoScroll", "suggestions", "placeholder", "inputValue", "localization", "messageBoxTemplate", "messageBoxStartAffixTemplate", "messageBoxEndAffixTemplate", "messageBoxTopAffixTemplate", "suggestionTemplate", "loading"], outputs: ["sendMessage", "executeSuggestion", "fileSelect", "fileRemove"] }, { kind: "component", type: MessageReferenceComponent, selector: "chat-message-reference-content", inputs: ["message"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "component", type: ContextMenuComponent, selector: "kendo-contextmenu", inputs: ["showOn", "target", "filter", "alignToAnchor", "vertical", "popupAnimate", "popupAlign", "anchorAlign", "collision", "appendTo", "ariaLabel"], outputs: ["popupOpen", "popupClose", "select", "open", "close"], exportAs: ["kendoContextMenu"] }, { kind: "component", type: FloatingActionButtonComponent, selector: "kendo-floatingactionbutton", inputs: ["themeColor", "size", "rounded", "disabled", "align", "offset", "positionMode", "icon", "svgIcon", "iconClass", "buttonClass", "dialClass", "text", "dialItemAnimation", "tabIndex", "dialItems"], outputs: ["blur", "focus", "dialItemClick", "open", "close"] }] });
+
+        @if (showLicenseWatermark) {
+        <div kendoWatermarkOverlay [licenseMessage]="licenseMessage"></div>
+        }
+    `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective$2, selector: "[kendoChatLocalizedMessages]" }, { kind: "directive", type: ScrollAnchorDirective, selector: "[kendoChatScrollAnchor]", inputs: ["autoScroll", "autoScrollThreshold", "endlessMode", "rangeIsAtEnd"], outputs: ["autoScrollChange", "nearTop", "nearBottom"], exportAs: ["scrollAnchor"] }, { kind: "component", type: MessageListComponent, selector: "kendo-chat-message-list", inputs: ["messages", "attachmentTemplate", "authorMessageContentTemplate", "receiverMessageContentTemplate", "messageContentTemplate", "authorMessageTemplate", "receiverMessageTemplate", "messageTemplate", "timestampTemplate", "statusTemplate", "userStatusTemplate", "localization", "authorId"], outputs: ["executeAction", "navigate", "resize"] }, { kind: "component", type: MessageBoxComponent, selector: "kendo-message-box", inputs: ["authorId", "autoScroll", "suggestions", "placeholder", "inputValue", "localization", "messageBoxTemplate", "messageBoxStartAffixTemplate", "messageBoxEndAffixTemplate", "messageBoxTopAffixTemplate", "suggestionTemplate", "loading"], outputs: ["sendMessage", "executeSuggestion", "fileSelect", "fileRemove"] }, { kind: "component", type: MessageReferenceComponent, selector: "chat-message-reference-content", inputs: ["message"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "component", type: ContextMenuComponent, selector: "kendo-contextmenu", inputs: ["showOn", "target", "filter", "alignToAnchor", "vertical", "popupAnimate", "popupAlign", "anchorAlign", "collision", "appendTo", "ariaLabel"], outputs: ["popupOpen", "popupClose", "select", "open", "close"], exportAs: ["kendoContextMenu"] }, { kind: "component", type: FloatingActionButtonComponent, selector: "kendo-floatingactionbutton", inputs: ["themeColor", "size", "rounded", "disabled", "align", "offset", "positionMode", "icon", "svgIcon", "iconClass", "buttonClass", "dialClass", "text", "dialItemAnimation", "tabIndex", "dialItems"], outputs: ["blur", "focus", "dialItemClick", "open", "close"] }, { kind: "component", type: WatermarkOverlayComponent, selector: "div[kendoWatermarkOverlay], kendo-watermark-overlay", inputs: ["licenseMessage"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ChatComponent, decorators: [{
             type: Component,
@@ -9312,9 +10366,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                 kendo.chat.nextSuggestionsButtonTitle|The title of the button that scrolls to the next suggestions
             "
             nextSuggestionsButtonTitle="Scroll right"
-            i18n-unpinMessageTitle="
-                kendo.chat.unpinMessageTitle|The title of the button that unpins a pinned message
-            "
+            i18n-unpinMessageTitle="kendo.chat.unpinMessageTitle|The title of the button that unpins a pinned message"
             unpinMessageTitle="Unpin message"
         >
         </ng-container>
@@ -9333,18 +10385,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
             [attr.aria-label]="textFor('messageListLabel')"
             #anchor="scrollAnchor"
             [(autoScroll)]="autoScroll"
+            [autoScrollThreshold]="autoScrollThreshold"
+            [endlessMode]="scrollMode === 'endless'"
+            [rangeIsAtEnd]="endlessState.isAtEnd"
+            (nearTop)="onNearTop()"
+            (nearBottom)="onNearBottom()"
         >
             @if (pinnedMessage) {
             <div
                 class="k-message-reference k-message-pinned"
                 [class.k-message-reference-receiver]="!isOwnMessage(pinnedMessage)"
                 [class.k-message-reference-sender]="isOwnMessage(pinnedMessage)"
-                (click)="scrollToPinnedMessage()"
+                (click)="scrollToPinnedMessage($event)"
             >
                 <kendo-icon-wrapper name="pin" [svgIcon]="pinIcon"> </kendo-icon-wrapper>
                 <chat-message-reference-content [message]="pinnedMessage"></chat-message-reference-content>
                 <span class="k-spacer"></span>
-                <button kendoButton icon="x" [svgIcon]="deleteIcon" [attr.title]="textFor('unpinMessageTitle')" (click)="unpin.emit(pinnedMessage)" fillMode="flat"></button>
+                <button
+                    kendoButton
+                    icon="x"
+                    [svgIcon]="deleteIcon"
+                    [attr.title]="textFor('unpinMessageTitle')"
+                    (click)="unpin.emit(pinnedMessage)"
+                    fillMode="flat"
+                ></button>
             </div>
             } @if (processedMessages && processedMessages.length === 0) {
             <div class="k-message-list-content k-message-list-content-empty">
@@ -9352,7 +10416,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
             </div>
             } @else {
             <kendo-chat-message-list
-                [messages]="processedMessages"
+                [messages]="renderedMessages"
                 [authorMessageContentTemplate]="authorMessageContentTemplate"
                 [receiverMessageContentTemplate]="receiverMessageContentTemplate"
                 [messageContentTemplate]="messageContentTemplate"
@@ -9366,7 +10430,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                 [attachmentTemplate]="attachmentTemplate"
                 [authorId]="authorId"
                 (executeAction)="dispatchAction($event)"
-                (resize)="anchor.autoScrollToBottom(); anchor.calculateMessageBoxSeparator()"
+                (resize)="onMessageListResize()"
                 (navigate)="this.autoScroll = false"
             >
             </kendo-chat-message-list>
@@ -9379,7 +10443,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                     [align]="{ horizontal: 'center' }"
                     icon="arrow-down-outline"
                     [svgIcon]="scrollToBottomIcon"
-                    (click)="anchor.scrollToBottom()"
+                    (click)="onScrollToBottomClick()"
                 ></kendo-floatingactionbutton>
             </div>
             }
@@ -9416,6 +10480,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
             (popupClose)="handleMenuClose($event)"
             (select)="onContextMenuAction($event.item.originalAction)"
         ></kendo-contextmenu>
+
+        @if (showLicenseWatermark) {
+        <div kendoWatermarkOverlay [licenseMessage]="licenseMessage"></div>
+        }
     `,
                     standalone: true,
                     imports: [
@@ -9429,6 +10497,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                         ButtonComponent,
                         ContextMenuComponent,
                         FloatingActionButtonComponent,
+                        WatermarkOverlayComponent,
                     ],
                 }]
         }], ctorParameters: () => [{ type: i1.LocalizationService }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: ChatService }], propDecorators: { messages: [{
@@ -9483,6 +10552,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                 type: Input
             }], sendButtonSettings: [{
                 type: Input
+            }], scrollMode: [{
+                type: Input
+            }], pageSize: [{
+                type: Input
+            }], autoScrollThreshold: [{
+                type: Input
+            }], total: [{
+                type: Input
+            }], startIndex: [{
+                type: Input
+            }], endIndex: [{
+                type: Input
+            }], pinnedMessages: [{
+                type: Input
+            }], repliedToMessages: [{
+                type: Input
             }], modelFields: [{
                 type: Input
             }], scrollToBottomButton: [{
@@ -9513,6 +10598,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                 type: Output
             }], inputValueChange: [{
                 type: Output
+            }], loadMore: [{
+                type: Output
+            }], referencedMessageClick: [{
+                type: Output
             }], className: [{
                 type: HostBinding,
                 args: ['class']
@@ -9579,6 +10668,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
             }], messageList: [{
                 type: ViewChild,
                 args: ['messageList', { static: true, read: ViewContainerRef }]
+            }], anchor: [{
+                type: ViewChild,
+                args: ['anchor']
             }] } });
 
 // eslint-disable no-forward-ref