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

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

@@ -7,11 +7,11 @@ 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, KENDO_WEBMCP_HOST, 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';
-import { moreHorizontalIcon, commentIcon, sparklesIcon, stopSmIcon, thumbUpIcon, thumbDownOutlineIcon, thumbDownIcon, thumbUpOutlineIcon, copyIcon, arrowRotateCwIcon, chevronUpIcon, chevronDownIcon, arrowUpOutlineIcon, paperclipOutlineAltRightIcon, undoIcon, downloadIcon, xIcon, moreVerticalIcon, chevronLeftIcon, chevronRightIcon, arrowRotateCwOutlineIcon, warningTriangleIcon, pinOutlineIcon, arrowDownOutlineIcon, cancelOutlineIcon, menuIcon, paperPlaneIcon } from '@progress/kendo-svg-icons';
+import { moreHorizontalIcon, commentIcon, sparklesIcon, stopIcon, thumbUpIcon, thumbDownIcon, copyIcon, arrowRotateCwIcon, chevronUpIcon, chevronDownIcon, arrowUpIcon, paperclipIcon, undoIcon, downloadIcon, xIcon, moreVerticalIcon, chevronLeftIcon, chevronRightIcon, warningTriangleIcon, pinIcon, arrowDownIcon, cancelIcon, menuIcon, paperPlaneIcon } from '@progress/kendo-svg-icons';
 import * as i1 from '@progress/kendo-angular-l10n';
 import { ComponentMessages, LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
 import { validatePackage } from '@progress/kendo-licensing';
@@ -215,8 +215,8 @@ const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1777363147,
-    version: '24.0.0-develop.8',
+    publishDate: 1779273437,
+    version: '24.0.0',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -820,7 +820,7 @@ class AIPromptComponent {
     /**
      * @hidden
      */
-    fabStopGenerationSVGIcon = stopSmIcon;
+    fabStopGenerationSVGIcon = stopIcon;
     /**
      * @hidden
      */
@@ -878,7 +878,8 @@ class AIPromptComponent {
             {
                 provide: L10N_PREFIX,
                 useValue: 'kendo.aiprompt'
-            }
+            },
+            { provide: KENDO_WEBMCP_HOST, useExisting: forwardRef(() => AIPromptComponent) }
         ], queries: [{ propertyName: "toolbarActionsTemplate", first: true, predicate: AIPromptToolbarActionsDirective, descendants: true }, { propertyName: "outputTemplate", first: true, predicate: AIPromptOutputTemplateDirective, descendants: true }, { propertyName: "outputBodyTemplate", first: true, predicate: AIPromptOutputBodyTemplateDirective, descendants: true }, { propertyName: "views", predicate: BaseView }], viewQueries: [{ propertyName: "fabButton", first: true, predicate: ["fabButton"], descendants: true }], exportAs: ["kendoAIPrompt"], usesOnChanges: true, ngImport: i0, template: `
         <ng-container kendoAIPromptLocalizedMessages
           i18n-promptView="kendo.aiprompt.promptView|The Toolbar button text for the Prompt view."
@@ -964,7 +965,7 @@ class AIPromptComponent {
             </div>
           </div>
         }
-        `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective$3, selector: "[kendoAIPromptLocalizedMessages]" }, { 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: "directive", type: AIPromptToolbarFocusableDirective, selector: "[kendoAIPromptToolbarFocusable]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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"] }] });
+        `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective$3, selector: "[kendoAIPromptLocalizedMessages]" }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: AIPromptToolbarFocusableDirective, selector: "[kendoAIPromptToolbarFocusable]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: AIPromptComponent, decorators: [{
             type: Component,
@@ -978,7 +979,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                         {
                             provide: L10N_PREFIX,
                             useValue: 'kendo.aiprompt'
-                        }
+                        },
+                        { provide: KENDO_WEBMCP_HOST, useExisting: forwardRef(() => AIPromptComponent) }
                     ],
                     template: `
         <ng-container kendoAIPromptLocalizedMessages
@@ -1324,17 +1326,17 @@ class AIPromptOutputCardComponent {
     ngOnInit() {
         if (this.promptOutput?.rating === 'positive') {
             this.positiveRatingIcon = thumbUpIcon;
-            this.negativeRatingIcon = thumbDownOutlineIcon;
+            this.negativeRatingIcon = thumbDownIcon;
         }
         else if (this.promptOutput?.rating === 'negative') {
             this.negativeRatingIcon = thumbDownIcon;
-            this.positiveRatingIcon = thumbUpOutlineIcon;
+            this.positiveRatingIcon = thumbUpIcon;
         }
     }
     copyIcon = copyIcon;
     retryIcon = arrowRotateCwIcon;
-    positiveRatingIcon = thumbUpOutlineIcon;
-    negativeRatingIcon = thumbDownOutlineIcon;
+    positiveRatingIcon = thumbUpIcon;
+    negativeRatingIcon = thumbDownIcon;
     titleId = `k-output-card-${guid()}`;
     messageFor(text) {
         return this.localization.get(text);
@@ -1381,11 +1383,11 @@ class AIPromptOutputCardComponent {
         this.service.outputRatingChangeEvent.next(eventArgs);
         if (ratingType === 'positive') {
             this.positiveRatingIcon = thumbUpIcon;
-            this.negativeRatingIcon = thumbDownOutlineIcon;
+            this.negativeRatingIcon = thumbDownIcon;
         }
         else {
             this.negativeRatingIcon = thumbDownIcon;
-            this.positiveRatingIcon = thumbUpOutlineIcon;
+            this.positiveRatingIcon = thumbUpIcon;
         }
     }
     /**
@@ -1431,19 +1433,19 @@ class AIPromptOutputCardComponent {
             <span class="k-spacer"></span>
             <button kendoButton
               fillMode="flat"
-              icon="thumb-up-outline"
+              icon="thumb-up"
               [svgIcon]="positiveRatingIcon"
               (click)="handleRating('positive')">
             </button>
             <button kendoButton
               fillMode="flat"
-              icon="thumb-down-outline"
+              icon="thumb-down"
               [svgIcon]="negativeRatingIcon"
               (click)="handleRating('negative')">
             </button>
           }
         </div>
-        `, isInline: true, dependencies: [{ 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: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+        `, isInline: true, dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: AIPromptOutputCardComponent, decorators: [{
             type: Component,
@@ -1485,13 +1487,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
             <span class="k-spacer"></span>
             <button kendoButton
               fillMode="flat"
-              icon="thumb-up-outline"
+              icon="thumb-up"
               [svgIcon]="positiveRatingIcon"
               (click)="handleRating('positive')">
             </button>
             <button kendoButton
               fillMode="flat"
-              icon="thumb-down-outline"
+              icon="thumb-down"
               [svgIcon]="negativeRatingIcon"
               (click)="handleRating('negative')">
             </button>
@@ -1774,7 +1776,7 @@ class PromptViewComponent extends BaseView {
             </div>
           }
         </ng-template>
-        `, isInline: true, dependencies: [{ kind: "component", type: TextAreaComponent, selector: "kendo-textarea", inputs: ["focusableId", "flow", "inputAttributes", "adornmentsOrientation", "rows", "cols", "maxlength", "maxResizableRows", "tabindex", "tabIndex", "resizable", "size", "rounded", "fillMode", "showPrefixSeparator", "showSuffixSeparator"], outputs: ["focus", "blur", "valueChange"], exportAs: ["kendoTextArea"] }, { 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: TextAreaSuffixComponent, selector: "kendo-textarea-suffix", inputs: ["flow", "orientation"], exportAs: ["kendoTextAreaSuffix"] }, { kind: "component", type: SpeechToTextButtonComponent, selector: "button[kendoSpeechToTextButton]", inputs: ["disabled", "size", "rounded", "fillMode", "themeColor", "integrationMode", "lang", "continuous", "interimResults", "maxAlternatives"], outputs: ["start", "end", "result", "error", "click"], exportAs: ["kendoSpeechToTextButton"] }] });
+        `, isInline: true, dependencies: [{ kind: "component", type: TextAreaComponent, selector: "kendo-textarea", inputs: ["focusableId", "flow", "inputAttributes", "adornmentsOrientation", "rows", "cols", "maxlength", "maxResizableRows", "tabindex", "tabIndex", "resizable", "size", "rounded", "fillMode", "showPrefixSeparator", "showSuffixSeparator"], outputs: ["focus", "blur", "valueChange"], exportAs: ["kendoTextArea"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "component", type: TextAreaSuffixComponent, selector: "kendo-textarea-suffix", inputs: ["flow", "orientation"], exportAs: ["kendoTextAreaSuffix"] }, { kind: "component", type: SpeechToTextButtonComponent, selector: "button[kendoSpeechToTextButton]", inputs: ["disabled", "size", "rounded", "fillMode", "themeColor", "integrationMode", "lang", "continuous", "interimResults", "maxAlternatives"], outputs: ["start", "end", "result", "error", "click"], exportAs: ["kendoSpeechToTextButton"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: PromptViewComponent, decorators: [{
             type: Component,
@@ -2349,6 +2351,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
  */
@@ -2396,10 +2478,10 @@ const STB_DEFAULT_SETTINGS$1 = {
 const SEND_BTN_DEFAULT_SETTINGS = {
     rounded: 'full',
     size: 'small',
-    icon: 'arrow-up-outline',
-    svgIcon: arrowUpOutlineIcon,
-    loadingIcon: 'stop-sm',
-    loadingSVGIcon: stopSmIcon,
+    icon: 'arrow-up',
+    svgIcon: arrowUpIcon,
+    loadingIcon: 'stop',
+    loadingSVGIcon: stopIcon,
 };
 /**
  * @hidden
@@ -2408,8 +2490,8 @@ const FILESELECT_BUTTON_DEFAULT_SETTINGS$1 = {
     multiple: true,
     disabled: false,
     fillMode: 'clear',
-    icon: 'paperclip-outline-alt-right',
-    svgIcon: paperclipOutlineAltRightIcon,
+    icon: 'paperclip',
+    svgIcon: paperclipIcon,
     size: 'small',
     rounded: 'full',
 };
@@ -2514,15 +2596,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 +2624,7 @@ class ChatService {
     _messageBoxSettings = MESSAGE_BOX_SETTINGS;
     _suggestionsLayout = SUGGESTIONS_LAYOUT_DEFAULT_SETTINGS;
     _quickActionsLayout = SUGGESTIONS_LAYOUT_DEFAULT_SETTINGS;
+    _messageToolbarActions = [];
     _authorMessageSettings;
     _receiverMessageSettings;
     _allowMessageCollapse;
@@ -2557,6 +2642,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 +2657,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 +2719,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 +2748,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 +2760,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 +2788,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 +2818,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 +2838,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 +2892,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 +2948,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 +2967,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 +2983,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 +3015,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: this._endlessMode ? 'auto' : '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 +3096,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 +3189,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 +3213,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 +3334,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 +3601,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 +3634,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 +3667,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>
  * ```
@@ -3325,10 +3813,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
 const ACTION_BUTTON_DEFAULT_SETTINGS = {
     rounded: 'full',
     size: 'small',
-    icon: 'arrow-up-outline',
-    svgIcon: arrowUpOutlineIcon,
-    loadingIcon: 'stop-sm',
-    loadingSVGIcon: stopSmIcon,
+    icon: 'arrow-up',
+    svgIcon: arrowUpIcon,
+    loadingIcon: 'stop',
+    loadingSVGIcon: stopIcon,
 };
 /**
  * @hidden
@@ -3352,8 +3840,8 @@ const FILESELECT_BUTTON_DEFAULT_SETTINGS = {
     fillMode: 'flat',
     size: 'small',
     rounded: 'full',
-    icon: 'paperclip-outline-alt-right',
-    svgIcon: paperclipOutlineAltRightIcon,
+    icon: 'paperclip',
+    svgIcon: paperclipIcon,
     multiple: true,
     restrictions: null,
     accept: null
@@ -3507,15 +3995,15 @@ class PromptBoxActionButtonComponent extends PromptBoxBaseTool {
     /**
      * Sets the icon to be displayed when the **Action** button is in loading state.
      *
-     * @default 'stop-sm'
+     * @default 'stop'
      */
-    loadingIcon = 'stop-sm';
+    loadingIcon = 'stop';
     /**
      * Sets the SVG icon to be displayed when the **Action** button is in loading state.
      *
-     * @default stopSmIcon
+     * @default stopIcon
      */
-    loadingSVGIcon = stopSmIcon;
+    loadingSVGIcon = stopIcon;
     /**
      * Fires when the user clicks the Action button.
      * @hidden
@@ -3527,8 +4015,8 @@ class PromptBoxActionButtonComponent extends PromptBoxBaseTool {
         this.disabled = true;
         this.rounded = 'full';
         this.size = 'small';
-        this.icon = 'arrow-up-outline';
-        this.svgIcon = arrowUpOutlineIcon;
+        this.icon = 'arrow-up';
+        this.svgIcon = arrowUpIcon;
     }
     /**
      * @hidden
@@ -3566,7 +4054,7 @@ class PromptBoxActionButtonComponent extends PromptBoxBaseTool {
             [themeColor]="themeColor"
             (click)="handleClick()"
         ></button>
-    `, isInline: true, dependencies: [{ 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"] }] });
+    `, isInline: true, dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: PromptBoxActionButtonComponent, decorators: [{
             type: Component,
@@ -3656,8 +4144,8 @@ class PromptBoxFileSelectButtonComponent extends PromptBoxBaseTool {
         this.disabled = false;
         this.fillMode = 'flat';
         this.size = 'small';
-        this.icon = 'paperclip-outline-alt-right';
-        this.svgIcon = paperclipOutlineAltRightIcon;
+        this.icon = 'paperclip';
+        this.svgIcon = paperclipIcon;
     }
     /**
      * @hidden
@@ -3712,7 +4200,7 @@ class PromptBoxFileSelectButtonComponent extends PromptBoxBaseTool {
             [accept]="accept"
             (select)="handleSelect($event)"
         ></kendo-fileselect>
-    `, isInline: true, dependencies: [{ 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: FileSelectComponent, selector: "kendo-fileselect", inputs: ["name"], outputs: ["valueChange"], exportAs: ["kendoFileSelect"] }] });
+    `, isInline: true, dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "component", type: FileSelectComponent, selector: "kendo-fileselect", inputs: ["name"], outputs: ["valueChange"], exportAs: ["kendoFileSelect"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: PromptBoxFileSelectButtonComponent, decorators: [{
             type: Component,
@@ -3813,12 +4301,13 @@ class PromptBoxFileComponent {
             [attr.title]="textFor('removeFileTitle')"
             [svgIcon]="deleteIcon"
             icon="x"
+            size="xsmall"
             [disabled]="disabled"
             (click)="remove.emit(promptBoxFile)"
             fillMode="flat"
           ></button>
         }
-        `, isInline: true, dependencies: [{ 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"] }] });
+        `, isInline: true, dependencies: [{ 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"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: PromptBoxFileComponent, decorators: [{
             type: Component,
@@ -3841,6 +4330,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
             [attr.title]="textFor('removeFileTitle')"
             [svgIcon]="deleteIcon"
             icon="x"
+            size="xsmall"
             [disabled]="disabled"
             (click)="remove.emit(promptBoxFile)"
             fillMode="flat"
@@ -5413,6 +5903,7 @@ class ChatFileComponent extends ChatItem {
             [attr.title]="textFor('removeFileTitle')"
             [svgIcon]="deleteIcon"
             icon="x"
+            size="xsmall"
             (click)="remove.emit(chatFile)"
             fillMode="flat"
           ></button>
@@ -5422,6 +5913,7 @@ class ChatFileComponent extends ChatItem {
             [data]="fileActions"
             [attr.title]="textFor('fileActionsTitle')"
             fillMode="flat"
+            size="small"
             icon="more-vertical"
             [svgIcon]="moreIcon"
             (itemClick)="actionClick.emit($event)"
@@ -5430,7 +5922,7 @@ class ChatFileComponent extends ChatItem {
             (close)="actionsToggle.emit(false)"
           ></kendo-dropdownbutton>
         }
-        `, isInline: true, dependencies: [{ 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: DropDownButtonComponent, selector: "kendo-dropdownbutton", inputs: ["arrowIcon", "icon", "svgIcon", "iconClass", "imageUrl", "textField", "data", "size", "rounded", "fillMode", "themeColor", "buttonAttributes"], outputs: ["itemClick", "focus", "blur"], exportAs: ["kendoDropDownButton"] }] });
+        `, isInline: true, dependencies: [{ 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"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "component", type: DropDownButtonComponent, selector: "kendo-dropdownbutton", inputs: ["arrowIcon", "icon", "svgIcon", "iconClass", "imageUrl", "textField", "data", "size", "rounded", "fillMode", "themeColor", "buttonAttributes"], outputs: ["itemClick", "focus", "blur"], exportAs: ["kendoDropDownButton"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ChatFileComponent, decorators: [{
             type: Component,
@@ -5457,6 +5949,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
             [attr.title]="textFor('removeFileTitle')"
             [svgIcon]="deleteIcon"
             icon="x"
+            size="xsmall"
             (click)="remove.emit(chatFile)"
             fillMode="flat"
           ></button>
@@ -5466,6 +5959,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
             [data]="fileActions"
             [attr.title]="textFor('fileActionsTitle')"
             fillMode="flat"
+            size="small"
             icon="more-vertical"
             [svgIcon]="moreIcon"
             (itemClick)="actionClick.emit($event)"
@@ -5538,7 +6032,7 @@ const groupMessages = (acc, msg, isLastMessage) => {
             messages: [msg],
             author: msg.author,
             timestamp: msg.timestamp,
-            trackBy: msg
+            trackBy: msg.id
         });
     }
 };
@@ -6557,6 +7051,7 @@ class MessageBoxComponent {
                         icon="x"
                         (click)="removeReply()"
                         fillMode="flat"
+                        size="xsmall"
                     ></button>
                 </div>
             </ng-template>
@@ -6595,7 +7090,7 @@ class MessageBoxComponent {
         } @if (messageBoxTemplate?.templateRef) {
         <ng-template [ngTemplateOutlet]="messageBoxTemplate?.templateRef"></ng-template>
         }
-    `, isInline: true, dependencies: [{ 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: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PromptBoxComponent, selector: "kendo-promptbox", inputs: ["disabled", "focusableId", "loading", "placeholder", "readonly", "title", "mode", "rows", "maxTextAreaHeight", "value", "actionButton", "fileSelectButton", "speechToTextButton"], outputs: ["valueChange", "focus", "blur", "inputFocus", "inputBlur", "promptAction", "selectAttachments", "fileRemove", "speechToTextClick", "speechToTextStart", "speechToTextEnd", "speechToTextError", "speechToTextResult"], exportAs: ["kendoPromptBox"] }, { kind: "component", type: PromptBoxCustomMessagesComponent, selector: "kendo-promptbox-messages" }, { kind: "directive", type: PromptBoxHeaderTemplateDirective, selector: "[kendoPromptBoxHeaderTemplate]" }, { kind: "component", type: PromptBoxStartAffixComponent, selector: "kendo-promptbox-start-affix", exportAs: ["kendoPromptBoxStartAffix"] }, { kind: "component", type: PromptBoxTopAffixComponent, selector: "kendo-promptbox-top-affix", exportAs: ["kendoPromptBoxTopAffix"] }, { kind: "component", type: PromptBoxEndAffixComponent, selector: "kendo-promptbox-end-affix", exportAs: ["kendoPromptBoxEndAffix"] }, { kind: "component", type: PromptBoxFileSelectButtonComponent, selector: "kendo-promptbox-fileselect-button", inputs: ["restrictions", "multiple", "accept"], outputs: ["selectAttachments"], exportAs: ["kendoPromptBoxFileSelectButton"] }, { kind: "component", type: MessageReferenceComponent, selector: "chat-message-reference-content", inputs: ["message"] }, { kind: "component", type: SuggestedActionsComponent, selector: "kendo-chat-suggested-actions", inputs: ["actions", "suggestions", "tabbable", "type", "suggestionTemplate"], outputs: ["dispatchAction", "dispatchSuggestion"] }] });
+    `, isInline: true, dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PromptBoxComponent, selector: "kendo-promptbox", inputs: ["disabled", "focusableId", "loading", "placeholder", "readonly", "title", "mode", "rows", "maxTextAreaHeight", "value", "actionButton", "fileSelectButton", "speechToTextButton"], outputs: ["valueChange", "focus", "blur", "inputFocus", "inputBlur", "promptAction", "selectAttachments", "fileRemove", "speechToTextClick", "speechToTextStart", "speechToTextEnd", "speechToTextError", "speechToTextResult"], exportAs: ["kendoPromptBox"] }, { kind: "component", type: PromptBoxCustomMessagesComponent, selector: "kendo-promptbox-messages" }, { kind: "directive", type: PromptBoxHeaderTemplateDirective, selector: "[kendoPromptBoxHeaderTemplate]" }, { kind: "component", type: PromptBoxStartAffixComponent, selector: "kendo-promptbox-start-affix", exportAs: ["kendoPromptBoxStartAffix"] }, { kind: "component", type: PromptBoxTopAffixComponent, selector: "kendo-promptbox-top-affix", exportAs: ["kendoPromptBoxTopAffix"] }, { kind: "component", type: PromptBoxEndAffixComponent, selector: "kendo-promptbox-end-affix", exportAs: ["kendoPromptBoxEndAffix"] }, { kind: "component", type: PromptBoxFileSelectButtonComponent, selector: "kendo-promptbox-fileselect-button", inputs: ["restrictions", "multiple", "accept"], outputs: ["selectAttachments"], exportAs: ["kendoPromptBoxFileSelectButton"] }, { kind: "component", type: MessageReferenceComponent, selector: "chat-message-reference-content", inputs: ["message"] }, { kind: "component", type: SuggestedActionsComponent, selector: "kendo-chat-suggested-actions", inputs: ["actions", "suggestions", "tabbable", "type", "suggestionTemplate"], outputs: ["dispatchAction", "dispatchSuggestion"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: MessageBoxComponent, decorators: [{
             type: Component,
@@ -6653,6 +7148,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                         icon="x"
                         (click)="removeReply()"
                         fillMode="flat"
+                        size="xsmall"
                     ></button>
                 </div>
             </ng-template>
@@ -6763,8 +7259,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;
@@ -6802,7 +7306,7 @@ class MessageComponent extends ChatItem {
     expandIcon = chevronDownIcon;
     collapseIcon = chevronUpIcon;
     downloadIcon = downloadIcon;
-    resendIcon = arrowRotateCwOutlineIcon;
+    resendIcon = arrowRotateCwIcon;
     messageFailedIcon = warningTriangleIcon;
     isMessageExpanded = false;
     showExpandCollapseIcon = false;
@@ -6856,13 +7360,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 +7378,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 +7399,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 +7472,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 +7587,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,
@@ -7094,7 +7613,7 @@ class MessageComponent extends ChatItem {
             </div>
         </div>
         } @if (!message.typing) { @if (useCustomContentTemplate) { @if (message.failed) {
-        <button kendoButton class="k-resend-button" size="small" fillMode="clear" icon="arrow-rotate-cw-outline" [svgIcon]="resendIcon" (click)="onResendMessage($event)"></button>
+        <button kendoButton class="k-resend-button" size="xsmall" fillMode="clear" icon="arrow-rotate-cw" [svgIcon]="resendIcon" (click)="onResendMessage($event)"></button>
         }
         <div
             class="k-chat-bubble k-bubble"
@@ -7130,7 +7649,7 @@ class MessageComponent extends ChatItem {
             }
         </div>
         } @if (!useCustomContentTemplate && hasMessageContent) { @if (message.failed) {
-        <button kendoButton class="k-resend-button" size="small" fillMode="clear" icon="arrow-rotate-cw-outline" [svgIcon]="resendIcon" (click)="onResendMessage($event)"></button>
+        <button kendoButton class="k-resend-button" size="xsmall" fillMode="clear" icon="arrow-rotate-cw" [svgIcon]="resendIcon" (click)="onResendMessage($event)"></button>
         }
         <div
             class="k-chat-bubble k-bubble"
@@ -7159,7 +7678,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 +7691,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 +7705,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"
@@ -7271,8 +7790,8 @@ class MessageComponent extends ChatItem {
             }
         </div>
         } } @if (showToolbar) {
-        <kendo-toolbar class="k-chat-message-toolbar" fillMode="flat">
-            @for (action of toolbarActions; track action) {
+        <kendo-toolbar class="k-chat-message-toolbar" fillMode="flat" size="small">
+            @for (action of toolbarActions; track action.id) {
             <kendo-toolbar-button
                 fillMode="flat"
                 [icon]="action.icon"
@@ -7285,7 +7804,7 @@ class MessageComponent extends ChatItem {
             }
         </kendo-toolbar>
         }
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: i2.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: ChatFileComponent, selector: "li[chatFile]", inputs: ["chatFile", "removable", "fileActions"], outputs: ["remove", "actionClick", "actionsToggle", "actionButtonClick"] }, { kind: "component", type: ToolBarComponent, selector: "kendo-toolbar", inputs: ["overflow", "resizable", "popupSettings", "fillMode", "tabindex", "size", "tabIndex", "showIcon", "showText"], outputs: ["open", "close"], exportAs: ["kendoToolBar"] }, { kind: "component", type: ToolBarButtonComponent, selector: "kendo-toolbar-button", inputs: ["showText", "showIcon", "text", "style", "className", "title", "disabled", "toggleable", "look", "togglable", "selected", "fillMode", "rounded", "themeColor", "icon", "iconClass", "svgIcon", "imageUrl"], outputs: ["click", "pointerdown", "selectedChange"], exportAs: ["kendoToolBarButton"] }, { kind: "component", type: MessageReferenceComponent, selector: "chat-message-reference-content", inputs: ["message"] }] });
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: i2.ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "component", type: ChatFileComponent, selector: "li[chatFile]", inputs: ["chatFile", "removable", "fileActions"], outputs: ["remove", "actionClick", "actionsToggle", "actionButtonClick"] }, { kind: "component", type: ToolBarComponent, selector: "kendo-toolbar", inputs: ["overflow", "resizable", "popupSettings", "fillMode", "tabindex", "size", "tabIndex", "showIcon", "showText"], outputs: ["open", "close"], exportAs: ["kendoToolBar"] }, { kind: "component", type: ToolBarButtonComponent, selector: "kendo-toolbar-button", inputs: ["showText", "showIcon", "text", "style", "className", "title", "disabled", "toggleable", "look", "togglable", "selected", "fillMode", "rounded", "themeColor", "icon", "iconClass", "svgIcon", "imageUrl"], outputs: ["click", "pointerdown", "selectedChange"], exportAs: ["kendoToolBarButton"] }, { kind: "component", type: MessageReferenceComponent, selector: "chat-message-reference-content", inputs: ["message"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: MessageComponent, decorators: [{
             type: Component,
@@ -7311,7 +7830,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
             </div>
         </div>
         } @if (!message.typing) { @if (useCustomContentTemplate) { @if (message.failed) {
-        <button kendoButton class="k-resend-button" size="small" fillMode="clear" icon="arrow-rotate-cw-outline" [svgIcon]="resendIcon" (click)="onResendMessage($event)"></button>
+        <button kendoButton class="k-resend-button" size="xsmall" fillMode="clear" icon="arrow-rotate-cw" [svgIcon]="resendIcon" (click)="onResendMessage($event)"></button>
         }
         <div
             class="k-chat-bubble k-bubble"
@@ -7347,7 +7866,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
             }
         </div>
         } @if (!useCustomContentTemplate && hasMessageContent) { @if (message.failed) {
-        <button kendoButton class="k-resend-button" size="small" fillMode="clear" icon="arrow-rotate-cw-outline" [svgIcon]="resendIcon" (click)="onResendMessage($event)"></button>
+        <button kendoButton class="k-resend-button" size="xsmall" fillMode="clear" icon="arrow-rotate-cw" [svgIcon]="resendIcon" (click)="onResendMessage($event)"></button>
         }
         <div
             class="k-chat-bubble k-bubble"
@@ -7376,7 +7895,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 +7908,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 +7922,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"
@@ -7488,8 +8007,8 @@ 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) {
+        <kendo-toolbar class="k-chat-message-toolbar" fillMode="flat" size="small">
+            @for (action of toolbarActions; track action.id) {
             <kendo-toolbar-button
                 fillMode="flat"
                 [icon]="action.icon"
@@ -7516,7 +8035,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
@@ -7816,7 +8335,7 @@ class MessageAttachmentsComponent extends ChatItem {
             >
           </button>
         }
-        `, isInline: true, dependencies: [{ 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: AttachmentComponent, selector: "kendo-chat-attachment", inputs: ["attachment", "template"] }] });
+        `, isInline: true, dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "component", type: AttachmentComponent, selector: "kendo-chat-attachment", inputs: ["attachment", "template"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: MessageAttachmentsComponent, decorators: [{
             type: Component,
@@ -8074,6 +8593,7 @@ class MessageListComponent {
                 item.selected = true;
                 this.selectedItem = item;
             }
+            this.chatService.layoutChangeInProgress = true;
             this.cdr.detectChanges();
         }
         this.chatService.toggleMessageState = false;
@@ -8238,7 +8758,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 +8866,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 +9186,62 @@ 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 from the top of the visible message area that prevents auto-scrolling when a new receiver message arrives.
+     * Accepts a percentage string (for example, `'30%'`) or a pixel value as a number. Set to `0` to always auto-scroll to new messages.
+     *
+     * Has no effect on author messages, which always scroll to the bottom.
+     *
+     * For more details, refer to the [Auto-Scroll Threshold](slug:scroll_modes_chat#auto-scroll-threshold) article.
+     *
+     * @default '20%'
+     */
+    autoScrollThreshold = '20%';
+    /**
+     * Sets the total number of messages in the conversation when using endless scrolling with remote data source. For more details, refer to the [Endless Scrolling with Remote Data](slug:scroll_modes_chat#remote-data) section in the documentation.
+     */
+    total;
+    /**
+     * Sets the index of the first message in the currently loaded batch within the full conversation.
+     * Used with remote data sources in endless scroll mode to compute the range for the next [`loadMore`](slug:api_conversational-ui_chatcomponent#loadMore) call.
+     * For more details, refer to the [Endless Scrolling with Remote Data](slug:scroll_modes_chat#remote-data) section in the documentation.
+     */
+    startIndex;
+    /**
+     * Sets the exclusive end index of the currently loaded batch within the full conversation.
+     * Used with remote data sources in endless scroll mode to determine whether more messages exist beyond the current batch.
+     * For more details, refer to the [Endless Scrolling with Remote Data](slug:scroll_modes_chat#remote-data) section in the documentation.
+     */
+    endIndex;
+    /**
+     * Sets the full set of pinned messages in the conversation.
+     * Used with remote data sources in endless scroll mode to render the pinned message indicator when the pinned message is outside the currently loaded batch.
+     * For more details, refer to the [Endless Scrolling with Remote Data](slug:scroll_modes_chat#remote-data) section in the documentation.
+     *
+     * @default []
+     */
+    pinnedMessages = [];
+    /**
+     * Sets the messages that serve as reply targets for messages in the currently loaded batch but exist outside it.
+     * Used with remote data sources in endless scroll mode to render reply previews when the replied-to message is not in the current batch.
+     * For more details, refer to the [Endless Scrolling with Remote Data](slug:scroll_modes_chat#remote-data) section in the documentation.
+     *
+     * @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 +9319,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 +9377,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
      */
@@ -8825,7 +9446,7 @@ class ChatComponent {
     /**
      * @hidden
      */
-    pinIcon = pinOutlineIcon;
+    pinIcon = pinIcon;
     /**
      * @hidden
      */
@@ -8837,7 +9458,20 @@ class ChatComponent {
     /**
      * @hidden
      */
-    scrollToBottomIcon = arrowDownOutlineIcon;
+    scrollToBottomIcon = arrowDownIcon;
+    /**
+     * @hidden
+     */
+    endlessState = new EndlessScrollState();
+    /**
+     * @hidden
+     */
+    showLicenseWatermark = false;
+    /**
+     * @hidden
+     */
+    licenseMessage;
+    anchor;
     direction;
     subs = new Subscription();
     _modelFields = defaultModelFields;
@@ -8848,13 +9482,27 @@ class ChatComponent {
     _lastModelFields = null;
     _cachedContextMenuActions = [];
     _lastContextMenuActionsReference = null;
+    _previousMessagesLength = 0;
+    _previousLastMessageId = null;
+    _hasProcessedMessages = false;
+    _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 +9548,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 +9664,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.endIndex });
+            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.startIndex, 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 +9827,219 @@ 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 && !this._hasProcessedMessages;
+        const lastMessage = messages?.length > 0 ? messages[messages.length - 1] : null;
+        const currentLastId = lastMessage?.id ?? null;
+        const isLastMessageReplaced = messages?.length === prevLength
+            && currentLastId !== this._previousLastMessageId
+            && this._previousLastMessageId !== null && currentLastId !== null;
+        if (hasNoMessages || (hasNoNewMessages && !isLastMessageReplaced) || isInitialLoad) {
+            this._pendingScrollAction = null;
+            this._lastNewMessageId = null;
+            return;
+        }
+        this._lastNewMessageId = currentLastId;
+        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 <= Math.max(threshold, scrollButtonThreshold);
+        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') {
+            const msgs = this.processedMessages;
+            this._previousMessagesLength = msgs?.length || 0;
+            this._previousLastMessageId = msgs?.length > 0 ? msgs[msgs.length - 1]?.id ?? null : null;
+            this._hasProcessedMessages = true;
+            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;
+        this._previousLastMessageId = allMessages.length > 0 ? allMessages[allMessages.length - 1]?.id ?? null : null;
+        this._hasProcessedMessages = true;
+    }
+    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._pendingScrollAction) {
+            this.autoScroll = true;
+            this.subs.add(this.zone.onStable.pipe(take(1)).subscribe(() => {
+                this.anchor?.scrollToBottom();
+                this.anchor?.calculateMessageBoxSeparator();
+            }));
+        }
+        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;
+        this._previousLastMessageId = currentLength > 0
+            ? this.processedMessages[currentLength - 1]?.id ?? null
+            : null;
+        if (currentLength > 0) {
+            this._hasProcessedMessages = true;
+        }
+    }
+    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 +10048,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 +10089,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 +10097,8 @@ 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: `
+            { provide: KENDO_WEBMCP_HOST, useExisting: forwardRef(() => ChatComponent) }
+        ], 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 +10168,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 +10187,31 @@ 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"
+                    size="xsmall"
+                ></button>
             </div>
             } @if (processedMessages && processedMessages.length === 0) {
             <div class="k-message-list-content k-message-list-content-empty">
@@ -9163,7 +10219,7 @@ class ChatComponent {
             </div>
             } @else {
             <kendo-chat-message-list
-                [messages]="processedMessages"
+                [messages]="renderedMessages"
                 [authorMessageContentTemplate]="authorMessageContentTemplate"
                 [receiverMessageContentTemplate]="receiverMessageContentTemplate"
                 [messageContentTemplate]="messageContentTemplate"
@@ -9177,7 +10233,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>
@@ -9186,11 +10242,11 @@ class ChatComponent {
                 <kendo-floatingactionbutton
                     positionMode="absolute"
                     [size]="'small'"
-                    [themeColor]="'light'"
+                    [themeColor]="'base'"
                     [align]="{ horizontal: 'center' }"
                     icon="arrow-down-outline"
                     [svgIcon]="scrollToBottomIcon"
-                    (click)="anchor.scrollToBottom()"
+                    (click)="onScrollToBottomClick()"
                 ></kendo-floatingactionbutton>
             </div>
             }
@@ -9227,7 +10283,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"], 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,
@@ -9240,6 +10300,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                             provide: L10N_PREFIX,
                             useValue: 'kendo.chat',
                         },
+                        { provide: KENDO_WEBMCP_HOST, useExisting: forwardRef(() => ChatComponent) }
                     ],
                     selector: 'kendo-chat',
                     template: `
@@ -9312,9 +10373,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 +10392,31 @@ 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"
+                    size="xsmall"
+                ></button>
             </div>
             } @if (processedMessages && processedMessages.length === 0) {
             <div class="k-message-list-content k-message-list-content-empty">
@@ -9352,7 +10424,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 +10438,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>
@@ -9375,11 +10447,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                 <kendo-floatingactionbutton
                     positionMode="absolute"
                     [size]="'small'"
-                    [themeColor]="'light'"
+                    [themeColor]="'base'"
                     [align]="{ horizontal: 'center' }"
                     icon="arrow-down-outline"
                     [svgIcon]="scrollToBottomIcon"
-                    (click)="anchor.scrollToBottom()"
+                    (click)="onScrollToBottomClick()"
                 ></kendo-floatingactionbutton>
             </div>
             }
@@ -9416,6 +10488,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 +10505,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 +10560,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 +10606,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 +10676,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
@@ -9699,7 +10799,7 @@ class HeroCardComponent {
             </span>
           }
         </div>
-        `, isInline: true, dependencies: [{ 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"] }] });
+        `, isInline: true, dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: HeroCardComponent, decorators: [{
             type: Component,
@@ -9855,8 +10955,8 @@ const defaultOutputActions = [{
     {
         name: 'discard',
         type: 'button',
-        icon: 'cancel-outline',
-        svgIcon: cancelOutlineIcon,
+        icon: 'cancel',
+        svgIcon: cancelIcon,
         text: 'Discard',
         fillMode: 'flat',
     }
@@ -9928,7 +11028,7 @@ class InlineAIPromptContentComponent {
     calculateMeasurement = calculateMeasurement;
     commandMenuIcon = menuIcon;
     sendIcon = paperPlaneIcon;
-    stopGenerationIcon = stopSmIcon;
+    stopGenerationIcon = stopIcon;
     isListening = false;
     commandMenuItems = [];
     messages = {};
@@ -10185,7 +11285,7 @@ class InlineAIPromptContentComponent {
                   (click)="handlePromptRequest()"
                   [disabled]="!streaming && (!promptValue?.trim() || isListening)"
                   [svgIcon]="streaming ? stopGenerationIcon : sendIcon"
-                  [icon]="streaming ? 'stop-sm' : 'paper-plane'"
+                  [icon]="streaming ? 'stop' : 'paper-plane'"
                 ></button>
               </kendo-textarea-suffix>
             </kendo-textarea>
@@ -10199,7 +11299,7 @@ class InlineAIPromptContentComponent {
           class="k-hidden"
           (select)="onCommandClick($event)">
         </kendo-contextmenu>
-        `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: LocalizedMessagesDirective, selector: "[kendoInlineAIPromptLocalizedMessages]" }, { kind: "component", type: i2.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: i2.SpeechToTextButtonComponent, selector: "button[kendoSpeechToTextButton]", inputs: ["disabled", "size", "rounded", "fillMode", "themeColor", "integrationMode", "lang", "continuous", "interimResults", "maxAlternatives"], outputs: ["start", "end", "result", "error", "click"], exportAs: ["kendoSpeechToTextButton"] }, { kind: "component", type: i3.TextAreaComponent, selector: "kendo-textarea", inputs: ["focusableId", "flow", "inputAttributes", "adornmentsOrientation", "rows", "cols", "maxlength", "maxResizableRows", "tabindex", "tabIndex", "resizable", "size", "rounded", "fillMode", "showPrefixSeparator", "showSuffixSeparator"], outputs: ["focus", "blur", "valueChange"], exportAs: ["kendoTextArea"] }, { kind: "component", type: i3.TextAreaPrefixComponent, selector: "kendo-textarea-prefix", inputs: ["flow", "orientation"], exportAs: ["kendoTextAreaPrefix"] }, { kind: "component", type: i3.TextAreaSuffixComponent, selector: "kendo-textarea-suffix", inputs: ["flow", "orientation"], exportAs: ["kendoTextAreaSuffix"] }, { kind: "component", type: i4.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: i5.CardComponent, selector: "kendo-card", inputs: ["orientation", "width"] }, { kind: "component", type: i5.CardActionsComponent, selector: "kendo-card-actions", inputs: ["orientation", "layout", "actions"], outputs: ["action"] }, { kind: "component", type: i5.CardBodyComponent, selector: "kendo-card-body" }] });
+        `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: LocalizedMessagesDirective, selector: "[kendoInlineAIPromptLocalizedMessages]" }, { kind: "component", type: i2.ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "component", type: i2.SpeechToTextButtonComponent, selector: "button[kendoSpeechToTextButton]", inputs: ["disabled", "size", "rounded", "fillMode", "themeColor", "integrationMode", "lang", "continuous", "interimResults", "maxAlternatives"], outputs: ["start", "end", "result", "error", "click"], exportAs: ["kendoSpeechToTextButton"] }, { kind: "component", type: i3.TextAreaComponent, selector: "kendo-textarea", inputs: ["focusableId", "flow", "inputAttributes", "adornmentsOrientation", "rows", "cols", "maxlength", "maxResizableRows", "tabindex", "tabIndex", "resizable", "size", "rounded", "fillMode", "showPrefixSeparator", "showSuffixSeparator"], outputs: ["focus", "blur", "valueChange"], exportAs: ["kendoTextArea"] }, { kind: "component", type: i3.TextAreaPrefixComponent, selector: "kendo-textarea-prefix", inputs: ["flow", "orientation"], exportAs: ["kendoTextAreaPrefix"] }, { kind: "component", type: i3.TextAreaSuffixComponent, selector: "kendo-textarea-suffix", inputs: ["flow", "orientation"], exportAs: ["kendoTextAreaSuffix"] }, { kind: "component", type: i4.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: i5.CardComponent, selector: "kendo-card", inputs: ["orientation", "width"] }, { kind: "component", type: i5.CardActionsComponent, selector: "kendo-card-actions", inputs: ["orientation", "layout", "actions"], outputs: ["action"] }, { kind: "component", type: i5.CardBodyComponent, selector: "kendo-card-body" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: InlineAIPromptContentComponent, decorators: [{
             type: Component,
@@ -10306,7 +11406,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                   (click)="handlePromptRequest()"
                   [disabled]="!streaming && (!promptValue?.trim() || isListening)"
                   [svgIcon]="streaming ? stopGenerationIcon : sendIcon"
-                  [icon]="streaming ? 'stop-sm' : 'paper-plane'"
+                  [icon]="streaming ? 'stop' : 'paper-plane'"
                 ></button>
               </kendo-textarea-suffix>
             </kendo-textarea>
@@ -10487,7 +11587,7 @@ class InlineAIPromptComponent {
      * The default actions are `copy`, `retry`, and `discard`.
      * To customize the appearance and order of the default actions, define them with the same `name`.
      *
-     * @default [{ name: 'copy', type: 'button', icon: 'copy', svgIcon: copyIcon, text: 'Copy', fillMode: 'flat', themeColor: 'primary', rounded: 'medium'}, { name: 'retry', type: 'button', icon: 'arrow-rotate-cw', svgIcon: arrowRotateCwIcon, text: 'Retry', fillMode: 'flat', themeColor: 'primary', rounded: 'medium'}, { name: 'discard', type: 'button', icon: 'cancel-outline', svgIcon: cancelOutlineIcon, text: 'Discard', fillMode: 'flat', themeColor: 'base', rounded: 'medium'}]
+     * @default [{ name: 'copy', type: 'button', icon: 'copy', svgIcon: copyIcon, text: 'Copy', fillMode: 'flat', themeColor: 'primary', rounded: 'medium'}, { name: 'retry', type: 'button', icon: 'arrow-rotate-cw', svgIcon: arrowRotateCwIcon, text: 'Retry', fillMode: 'flat', themeColor: 'primary', rounded: 'medium'}, { name: 'discard', type: 'button', icon: 'cancel', svgIcon: cancelIcon, text: 'Discard', fillMode: 'flat', themeColor: 'base', rounded: 'medium'}]
      */
     outputActions = defaultOutputActions;
     /**