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

package/chat/chat.component.d.ts

@@ -244,68 +244,44 @@ export declare class ChatComponent implements OnInit, AfterViewInit, OnDestroy {
      */
     pageSize: number;
     /**
-     * Sets the minimum distance between a new receiver message and the top of the visible
-     * message area when auto-scrolling. Keeps older messages partially visible instead of
-     * scrolling them out of view.
-     *
-     * Accepts a percentage string relative to the visible area height (for example, `'30%'`)
-     * or a pixel value as a number. Negative values scroll the message fully to the bottom.
+     * 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: number | string;
     /**
-     * Sets the total number of messages in the conversation.
-     *
-     * When `messages.length` equals `total` (or `total` is not set), the Chat operates in
-     * **built-in mode** and manages rendering internally. When `messages.length < total`,
-     * the Chat operates in **remote mode** — the consumer manages data via
-     * [`loadMore`](slug:api_conversational-ui_chatcomponent#loadMore) events.
-     *
-     * Only relevant when [`scrollMode`](slug:api_conversational-ui_chatcomponent#scrollMode)
-     * is `'endless'`.
+     * 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: number;
     /**
-     * Sets the index in the full conversation that `messages[0]` corresponds to.
-     *
-     * Only relevant in remote mode (`messages.length < total`). As the user scrolls up
-     * and the consumer prepends messages, `startIndex` decreases. The Chat uses this to
-     * compute the correct range for the next
-     * [`loadMore`](slug:api_conversational-ui_chatcomponent#loadMore) call.
-     *
-     * Ignored in built-in mode.
+     * 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: number;
     /**
-     * Sets the exclusive end index of the current batch in the full conversation.
-     *
-     * Only relevant in remote mode (`messages.length < total`). As the user scrolls down
-     * and the consumer appends messages, `endIndex` increases. The Chat uses this to know
-     * whether more messages exist below the current batch.
-     *
-     * Ignored in built-in mode.
+     * 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: number;
     /**
      * Sets the full set of pinned messages in the conversation.
-     *
-     * Only needed in remote mode (`messages.length < total`). The Chat uses this to
-     * render the pinned message indicator when the pinned message is outside the current
-     * batch. In built-in mode, the Chat has all messages and can look them up directly.
+     * 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: Message[];
     /**
-     * Sets the reply targets that live outside the current batch.
-     *
-     * Only needed in remote mode (`messages.length < total`). The Chat uses this to
-     * render reply previews when the replied-to message is not in the current batch.
-     * The consumer resolves this after each data fetch by finding which `replyToId`
-     * targets are missing from the batch and fetching only those.
+     * 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 []
      */
@@ -491,6 +467,8 @@ export declare class ChatComponent implements OnInit, AfterViewInit, OnDestroy {
     private _cachedContextMenuActions;
     private _lastContextMenuActionsReference;
     private _previousMessagesLength;
+    private _previousLastMessageId;
+    private _hasProcessedMessages;
     private _pendingScrollAction;
     private _scrollHandledBeforePaint;
     private _lastNewMessageId;

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

@@ -215,8 +215,8 @@ const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1777541333,
-    version: '24.0.0-develop.15',
+    publishDate: 1777964883,
+    version: '24.0.0-develop.17',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -3050,7 +3050,7 @@ class ScrollAnchorDirective {
         const bottomScrollTop = Math.max(0, container.scrollHeight - container.clientHeight);
         const finalScrollTop = Math.min(targetScrollTop, bottomScrollTop);
         if (finalScrollTop > container.scrollTop) {
-            container.scrollTo({ top: finalScrollTop, behavior: 'smooth' });
+            container.scrollTo({ top: finalScrollTop, behavior: this._endlessMode ? 'auto' : 'smooth' });
         }
         this._thresholdScrollCap = targetScrollTop;
         this._streamingFollow = true;
@@ -9190,68 +9190,44 @@ class ChatComponent {
      */
     pageSize = 50;
     /**
-     * Sets the minimum distance between a new receiver message and the top of the visible
-     * message area when auto-scrolling. Keeps older messages partially visible instead of
-     * scrolling them out of view.
-     *
-     * Accepts a percentage string relative to the visible area height (for example, `'30%'`)
-     * or a pixel value as a number. Negative values scroll the message fully to the bottom.
+     * 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 `messages.length` equals `total` (or `total` is not set), the Chat operates in
-     * **built-in mode** and manages rendering internally. When `messages.length < total`,
-     * the Chat operates in **remote mode** — the consumer manages data via
-     * [`loadMore`](slug:api_conversational-ui_chatcomponent#loadMore) events.
-     *
-     * Only relevant when [`scrollMode`](slug:api_conversational-ui_chatcomponent#scrollMode)
-     * is `'endless'`.
+     * 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 in the full conversation that `messages[0]` corresponds to.
-     *
-     * Only relevant in remote mode (`messages.length < total`). As the user scrolls up
-     * and the consumer prepends messages, `startIndex` decreases. The Chat uses this to
-     * compute the correct range for the next
-     * [`loadMore`](slug:api_conversational-ui_chatcomponent#loadMore) call.
-     *
-     * Ignored in built-in mode.
+     * 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 current batch in the full conversation.
-     *
-     * Only relevant in remote mode (`messages.length < total`). As the user scrolls down
-     * and the consumer appends messages, `endIndex` increases. The Chat uses this to know
-     * whether more messages exist below the current batch.
-     *
-     * Ignored in built-in mode.
+     * 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.
-     *
-     * Only needed in remote mode (`messages.length < total`). The Chat uses this to
-     * render the pinned message indicator when the pinned message is outside the current
-     * batch. In built-in mode, the Chat has all messages and can look them up directly.
+     * 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 reply targets that live outside the current batch.
-     *
-     * Only needed in remote mode (`messages.length < total`). The Chat uses this to
-     * render reply previews when the replied-to message is not in the current batch.
-     * The consumer resolves this after each data fetch by finding which `replyToId`
-     * targets are missing from the batch and fetching only those.
+     * 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 []
      */
@@ -9497,6 +9473,8 @@ class ChatComponent {
     _cachedContextMenuActions = [];
     _lastContextMenuActionsReference = null;
     _previousMessagesLength = 0;
+    _previousLastMessageId = null;
+    _hasProcessedMessages = false;
     _pendingScrollAction = null;
     _scrollHandledBeforePaint = false;
     _lastNewMessageId = null;
@@ -9699,7 +9677,7 @@ class ChatComponent {
             this.anchor?.recordScrollHeight();
             this.anchor?.setAriaLive('off');
             const reqStart = Math.max(0, this.startIndex - this.pageSize);
-            this.loadMore.emit({ startIndex: reqStart, endIndex: this.startIndex });
+            this.loadMore.emit({ startIndex: reqStart, endIndex: this.endIndex });
             return;
         }
         const range = this.endlessState.extendUp();
@@ -9729,7 +9707,7 @@ class ChatComponent {
             this.endlessState.isLoading = true;
             this.anchor?.setAriaLive('off');
             const reqEnd = Math.min(this.total, this.endIndex + this.pageSize);
-            this.loadMore.emit({ startIndex: this.endIndex, endIndex: reqEnd });
+            this.loadMore.emit({ startIndex: this.startIndex, endIndex: reqEnd });
             return;
         }
         const range = this.endlessState.extendDown();
@@ -9895,14 +9873,18 @@ class ChatComponent {
         const prevLength = this._previousMessagesLength;
         const hasNoMessages = !messages;
         const hasNoNewMessages = messages && messages.length <= prevLength;
-        const isInitialLoad = prevLength === 0;
-        if (hasNoMessages || hasNoNewMessages || isInitialLoad) {
+        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;
         }
-        const lastMessage = messages[messages.length - 1];
-        this._lastNewMessageId = lastMessage?.id ?? null;
+        this._lastNewMessageId = currentLastId;
         const isAuthor = this.isOwnMessage(lastMessage);
         if (isAuthor) {
             this._pendingScrollAction = 'author';
@@ -9914,7 +9896,7 @@ class ChatComponent {
         }
         const distance = this.anchor.getDistanceFromBottom();
         const threshold = this.anchor.getAutoScrollThresholdPx();
-        const isNearBottom = distance <= threshold || this.anchor.isFollowingThreshold;
+        const isNearBottom = distance <= Math.max(threshold, scrollButtonThreshold);
         this._pendingScrollAction = isNearBottom ? 'receiver' : null;
     }
     getLastNewMessageElement() {
@@ -9952,7 +9934,10 @@ class ChatComponent {
     }
     handleMessagesChange() {
         if (this.scrollMode !== 'endless') {
-            this._previousMessagesLength = this.processedMessages?.length || 0;
+            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 || [];
@@ -9976,6 +9961,8 @@ class ChatComponent {
             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;
@@ -9999,7 +9986,7 @@ class ChatComponent {
                 }));
             }
         }
-        else if (isInitialBatch) {
+        else if (isInitialBatch && !this._pendingScrollAction) {
             this.autoScroll = true;
             this.subs.add(this.zone.onStable.pipe(take(1)).subscribe(() => {
                 this.anchor?.scrollToBottom();
@@ -10013,6 +10000,12 @@ class ChatComponent {
             }
         }
         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);

package/package-metadata.mjs

@@ -7,7 +7,7 @@ export const packageMetadata = {
   "productCodes": [
     "KENDOUIANGULAR"
   ],
-  "publishDate": 1777541333,
-  "version": "24.0.0-develop.15",
+  "publishDate": 1777964883,
+  "version": "24.0.0-develop.17",
   "licensingDocsUrl": "https://www.telerik.com/kendo-angular-ui/my-license/"
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-conversational-ui",
-  "version": "24.0.0-develop.15",
+  "version": "24.0.0-develop.17",
   "description": "Kendo UI for Angular Conversational UI components",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Progress",
@@ -91,7 +91,7 @@
     "package": {
       "productName": "Kendo UI for Angular",
       "productCode": "KENDOUIANGULAR",
-      "publishDate": 1777541333,
+      "publishDate": 1777964883,
       "licensingDocsUrl": "https://www.telerik.com/kendo-angular-ui/my-license/"
     }
   },
@@ -101,22 +101,22 @@
     "@angular/core": "19 - 21",
     "@angular/platform-browser": "19 - 21",
     "@progress/kendo-licensing": "^1.11.0",
-    "@progress/kendo-angular-buttons": "24.0.0-develop.15",
-    "@progress/kendo-angular-inputs": "24.0.0-develop.15",
-    "@progress/kendo-angular-layout": "24.0.0-develop.15",
-    "@progress/kendo-angular-icons": "24.0.0-develop.15",
-    "@progress/kendo-angular-common": "24.0.0-develop.15",
-    "@progress/kendo-angular-intl": "24.0.0-develop.15",
-    "@progress/kendo-angular-l10n": "24.0.0-develop.15",
-    "@progress/kendo-angular-menu": "24.0.0-develop.15",
-    "@progress/kendo-angular-popup": "24.0.0-develop.15",
-    "@progress/kendo-angular-toolbar": "24.0.0-develop.15",
-    "@progress/kendo-angular-upload": "24.0.0-develop.15",
+    "@progress/kendo-angular-buttons": "24.0.0-develop.17",
+    "@progress/kendo-angular-inputs": "24.0.0-develop.17",
+    "@progress/kendo-angular-layout": "24.0.0-develop.17",
+    "@progress/kendo-angular-icons": "24.0.0-develop.17",
+    "@progress/kendo-angular-common": "24.0.0-develop.17",
+    "@progress/kendo-angular-intl": "24.0.0-develop.17",
+    "@progress/kendo-angular-l10n": "24.0.0-develop.17",
+    "@progress/kendo-angular-menu": "24.0.0-develop.17",
+    "@progress/kendo-angular-popup": "24.0.0-develop.17",
+    "@progress/kendo-angular-toolbar": "24.0.0-develop.17",
+    "@progress/kendo-angular-upload": "24.0.0-develop.17",
     "rxjs": "^6.5.3 || ^7.0.0"
   },
   "dependencies": {
     "tslib": "^2.3.1",
-    "@progress/kendo-angular-schematics": "24.0.0-develop.15"
+    "@progress/kendo-angular-schematics": "24.0.0-develop.17"
   },
   "schematics": "./schematics/collection.json",
   "module": "fesm2022/progress-kendo-angular-conversational-ui.mjs",