@progress/kendo-angular-conversational-ui 20.1.2-develop.2 → 21.0.0-develop.11

package/esm2022/chat/chat.directives.mjs

@@ -0,0 +1,18 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2025 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+export { ChatComponent } from './chat.component';
+export { AttachmentTemplateDirective } from './templates/attachment-template.directive';
+export { MessageContentTemplateDirective } from './templates/message-content-template.directive';
+export { MessageTemplateDirective } from './templates/message-template.directive';
+export { ChatUserStatusTemplateDirective } from './templates/user-status-template.directive';
+export { ChatMessageBoxTemplateDirective } from './templates/message-box.directive';
+export { ChatHeaderTemplateDirective } from './templates/header-template.directive';
+export { NoDataTemplateDirective } from './templates/no-data-template.directive';
+export { ChatTimestampTemplateDirective } from './templates/timestamp-template.directive';
+export { ChatStatusTemplateDirective } from './templates/status-template.directive';
+export { AuthorMessageContentTemplateDirective } from './templates/author-message-content-template.directive';
+export { ReceiverMessageContentTemplateDirective } from './templates/receiver-message-content-template.directive';
+export { ReceiverMessageTemplateDirective } from './templates/receiver-message-template.directive';
+export { AuthorMessageTemplateDirective } from './templates/author-message-template.directive';

package/esm2022/chat/chat.module.mjs

@@ -10,13 +10,20 @@ import * as i0 from "@angular/core";
 import * as i1 from "./chat.component";
 import * as i2 from "./l10n/custom-messages.component";
 import * as i3 from "./templates/attachment-template.directive";
-import * as i4 from "./templates/message-template.directive";
-import * as i5 from "./cards/hero-card.component";
-import * as i6 from "./templates/message-box.directive";
-import * as i7 from "./templates/header-template.directive";
-import * as i8 from "./templates/timestamp-template.directive";
-import * as i9 from "./templates/status-template.directive";
-import * as i10 from "./templates/suggestion-template.directive";
+import * as i4 from "./templates/author-message-content-template.directive";
+import * as i5 from "./templates/receiver-message-content-template.directive";
+import * as i6 from "./templates/message-content-template.directive";
+import * as i7 from "./templates/author-message-template.directive";
+import * as i8 from "./templates/receiver-message-template.directive";
+import * as i9 from "./templates/message-template.directive";
+import * as i10 from "./cards/hero-card.component";
+import * as i11 from "./templates/message-box.directive";
+import * as i12 from "./templates/header-template.directive";
+import * as i13 from "./templates/no-data-template.directive";
+import * as i14 from "./templates/timestamp-template.directive";
+import * as i15 from "./templates/status-template.directive";
+import * as i16 from "./templates/suggestion-template.directive";
+import * as i17 from "./templates/user-status-template.directive";
 // IMPORTANT: NgModule export kept for backwards compatibility
 /**
  * Represents the [`NgModule`](link:site.data.urls.angular['ngmodules']) for the Chat component.
@@ -40,11 +47,11 @@ import * as i10 from "./templates/suggestion-template.directive";
  * ```
  */
 export class ChatModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChatModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: ChatModule, imports: [i1.ChatComponent, i2.CustomMessagesComponent, i3.AttachmentTemplateDirective, i4.MessageTemplateDirective, i5.HeroCardComponent, i6.ChatMessageBoxTemplateDirective, i7.ChatHeaderTemplateDirective, i8.ChatTimestampTemplateDirective, i9.ChatStatusTemplateDirective, i10.ChatSuggestionTemplateDirective], exports: [i1.ChatComponent, i2.CustomMessagesComponent, i3.AttachmentTemplateDirective, i4.MessageTemplateDirective, i5.HeroCardComponent, i6.ChatMessageBoxTemplateDirective, i7.ChatHeaderTemplateDirective, i8.ChatTimestampTemplateDirective, i9.ChatStatusTemplateDirective, i10.ChatSuggestionTemplateDirective] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChatModule, providers: [IconsService, ResizeBatchService], imports: [i1.ChatComponent, i5.HeroCardComponent] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ChatModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: ChatModule, imports: [i1.ChatComponent, i2.CustomMessagesComponent, i3.AttachmentTemplateDirective, i4.AuthorMessageContentTemplateDirective, i5.ReceiverMessageContentTemplateDirective, i6.MessageContentTemplateDirective, i7.AuthorMessageTemplateDirective, i8.ReceiverMessageTemplateDirective, i9.MessageTemplateDirective, i10.HeroCardComponent, i11.ChatMessageBoxTemplateDirective, i12.ChatHeaderTemplateDirective, i13.NoDataTemplateDirective, i14.ChatTimestampTemplateDirective, i15.ChatStatusTemplateDirective, i16.ChatSuggestionTemplateDirective, i17.ChatUserStatusTemplateDirective], exports: [i1.ChatComponent, i2.CustomMessagesComponent, i3.AttachmentTemplateDirective, i4.AuthorMessageContentTemplateDirective, i5.ReceiverMessageContentTemplateDirective, i6.MessageContentTemplateDirective, i7.AuthorMessageTemplateDirective, i8.ReceiverMessageTemplateDirective, i9.MessageTemplateDirective, i10.HeroCardComponent, i11.ChatMessageBoxTemplateDirective, i12.ChatHeaderTemplateDirective, i13.NoDataTemplateDirective, i14.ChatTimestampTemplateDirective, i15.ChatStatusTemplateDirective, i16.ChatSuggestionTemplateDirective, i17.ChatUserStatusTemplateDirective] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ChatModule, providers: [IconsService, ResizeBatchService], imports: [i1.ChatComponent, i10.HeroCardComponent] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChatModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ChatModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [...KENDO_CHAT],

package/esm2022/chat/common/chat.service.mjs

@@ -4,7 +4,7 @@
 *-------------------------------------------------------------------------------------------*/
 import { Injectable } from '@angular/core';
 import { Subject } from 'rxjs';
-import { STB_DEFAULT_SETTINGS, SEND_BTN_DEFAULT_SETTINGS, FILESELECT_DEFAULT_SETTINGS } from './utils';
+import { STB_DEFAULT_SETTINGS, SEND_BTN_DEFAULT_SETTINGS, FILESELECT_DEFAULT_SETTINGS, SUGGESTIONS_LAYOUT_DEFAULT_SETTINGS } from './utils';
 import * as i0 from "@angular/core";
 /**
  * @hidden
@@ -12,26 +12,42 @@ import * as i0 from "@angular/core";
 export class ChatService {
     authorId;
     messageWidthMode;
-    allowMessageCollapse;
     messageToolbarActions = [];
     messageContextMenuActions = [];
+    calculatedContextMenuActions = [];
     fileActions = [];
-    messageToolbarVisibility = 'hidden';
     toggleMessageState = false;
     reply;
     messages = [];
     chatElement;
     messageElementsMap = new Map();
+    messagesContextMenu;
+    activeMessage;
+    activeMessageElement;
+    selectOnMenuClose = false;
+    active = false;
+    messageFilesLayout = 'vertical';
     _enableSpeechToText = STB_DEFAULT_SETTINGS;
     _enableFileSelect = FILESELECT_DEFAULT_SETTINGS;
     _sendButtonSettings = SEND_BTN_DEFAULT_SETTINGS;
+    _suggestionsLayout = SUGGESTIONS_LAYOUT_DEFAULT_SETTINGS;
+    _quickActionsLayout = SUGGESTIONS_LAYOUT_DEFAULT_SETTINGS;
+    _authorMessageSettings;
+    _receiverMessageSettings;
+    _allowMessageCollapse;
     subjects = {
         toolbarAction: new Subject(),
         contextMenuAction: new Subject(),
         fileAction: new Subject(),
         fileDownload: new Subject(),
         replyReferenceClick: new Subject(),
-        inputValueChange: new Subject()
+        inputValueChange: new Subject(),
+        contextMenuVisibilityChange: new Subject(),
+        suggestionsLayoutChange: new Subject(),
+        quickActionsLayoutChange: new Subject(),
+        authorMessageSettingsChange: new Subject(),
+        receiverMessageSettingsChange: new Subject(),
+        allowMessageCollapseChange: new Subject(),
     };
     toolbarAction$ = this.subjects.toolbarAction.asObservable();
     contextMenuAction$ = this.subjects.contextMenuAction.asObservable();
@@ -39,6 +55,32 @@ export class ChatService {
     fileDownload$ = this.subjects.fileDownload.asObservable();
     replyReferenceClick$ = this.subjects.replyReferenceClick.asObservable();
     inputValueChange$ = this.subjects.inputValueChange.asObservable();
+    contextMenuVisibilityChange$ = this.subjects.contextMenuVisibilityChange.asObservable();
+    suggestionsLayoutChange$ = this.subjects.suggestionsLayoutChange.asObservable();
+    quickActionsLayoutChange$ = this.subjects.quickActionsLayoutChange.asObservable();
+    authorMessageSettingsChange$ = this.subjects.authorMessageSettingsChange.asObservable();
+    receiverMessageSettingsChange$ = this.subjects.receiverMessageSettingsChange.asObservable();
+    allowMessageCollapseChange$ = this.subjects.allowMessageCollapseChange.asObservable();
+    set authorMessageSettings(settings) {
+        const previousSettings = this._authorMessageSettings;
+        if (JSON.stringify(previousSettings) !== JSON.stringify(settings)) {
+            this.updateComponentSettings('_authorMessageSettings', settings, null);
+            this.emit('authorMessageSettingsChange', this._authorMessageSettings);
+        }
+    }
+    get authorMessageSettings() {
+        return this._authorMessageSettings;
+    }
+    set receiverMessageSettings(settings) {
+        const previousSettings = this._receiverMessageSettings;
+        if (JSON.stringify(previousSettings) !== JSON.stringify(settings)) {
+            this.updateComponentSettings('_receiverMessageSettings', settings, null);
+            this.emit('receiverMessageSettingsChange', this._receiverMessageSettings);
+        }
+    }
+    get receiverMessageSettings() {
+        return this._receiverMessageSettings;
+    }
     set enableSpeechToText(settings) {
         this.updateComponentSettings('_enableSpeechToText', settings, STB_DEFAULT_SETTINGS);
     }
@@ -57,6 +99,38 @@ export class ChatService {
     get sendButtonSettings() {
         return this._sendButtonSettings;
     }
+    set suggestionsLayout(layoutMode) {
+        this._suggestionsLayout = layoutMode;
+        this.emit('suggestionsLayoutChange', this._suggestionsLayout);
+    }
+    get suggestionsLayout() {
+        return this._suggestionsLayout;
+    }
+    set quickActionsLayout(layoutMode) {
+        this._quickActionsLayout = layoutMode;
+        this.emit('quickActionsLayoutChange', this._quickActionsLayout);
+    }
+    get quickActionsLayout() {
+        return this._quickActionsLayout;
+    }
+    set allowMessageCollapse(value) {
+        const previousValue = this._allowMessageCollapse;
+        if (previousValue !== value) {
+            this._allowMessageCollapse = value;
+            this.emit('allowMessageCollapseChange', this._allowMessageCollapse);
+        }
+    }
+    get allowMessageCollapse() {
+        return this._allowMessageCollapse;
+    }
+    calculateContextMenuActions(isOwn) {
+        const settings = isOwn ? this.authorMessageSettings : this.receiverMessageSettings;
+        if (settings?.messageContextMenuActions) {
+            this.calculatedContextMenuActions = settings.messageContextMenuActions;
+            return;
+        }
+        this.calculatedContextMenuActions = this.messageContextMenuActions || [];
+    }
     emit(subjectKey, value) {
         (this.subjects[subjectKey]).next(value);
     }
@@ -78,6 +152,11 @@ export class ChatService {
             elementRef.nativeElement.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
         }
     }
+    focusActiveMessageElement() {
+        if (this.activeMessageElement) {
+            this.activeMessageElement.element?.nativeElement?.focus();
+        }
+    }
     updateComponentSettings(property, settings, defaultSettings) {
         if (settings === true) {
             this[property] = defaultSettings;
@@ -89,9 +168,9 @@ export class ChatService {
             this[property] = { ...defaultSettings, ...settings };
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChatService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChatService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ChatService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ChatService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChatService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ChatService, decorators: [{
             type: Injectable
         }] });

package/esm2022/chat/common/models/default-model-fields.mjs

@@ -19,7 +19,6 @@ export const defaultModelFields = {
     attachmentLayoutField: 'attachmentLayout',
     suggestedActionsField: 'suggestedActions',
     isPinnedField: 'isPinned',
-    pinnedByField: 'pinnedBy',
     replyToIdField: 'replyToId',
     isDeletedField: 'isDeleted',
     typingField: 'typing'

package/esm2022/chat/common/scroll-anchor.directive.mjs

@@ -60,17 +60,17 @@ export class ScrollAnchorDirective {
         this.scrolling = true;
         this.zone.runOutsideAngular(() => setTimeout(() => this.scrolling = false, 1000));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ScrollAnchorDirective, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ScrollAnchorDirective, isStandalone: true, selector: "[kendoChatScrollAnchor]", inputs: { autoScroll: "autoScroll" }, outputs: { autoScrollChange: "autoScrollChange" }, host: { properties: { "style.overflow-anchor": "this.overflowAnchor" } }, exportAs: ["scrollAnchor"], ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ScrollAnchorDirective, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: ScrollAnchorDirective, isStandalone: true, selector: "[kendoChatScrollAnchor]", inputs: { autoScroll: "autoScroll" }, outputs: { autoScrollChange: "autoScrollChange" }, host: { properties: { "style.overflow-anchor": "this.overflowAnchor" } }, exportAs: ["scrollAnchor"], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ScrollAnchorDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ScrollAnchorDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoChatScrollAnchor]',
                     exportAs: 'scrollAnchor',
                     standalone: true
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.Renderer2 }]; }, propDecorators: { autoScroll: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.Renderer2 }], propDecorators: { autoScroll: [{
                 type: Input
             }], autoScrollChange: [{
                 type: Output

package/esm2022/chat/common/scroll-button.component.mjs

@@ -0,0 +1,81 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2025 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Component, ElementRef, HostBinding, Input, Renderer2, NgZone, Output, EventEmitter, } from '@angular/core';
+import { Subscription } from 'rxjs';
+import { chevronLeftIcon, chevronRightIcon } from '@progress/kendo-svg-icons';
+import { LocalizationService } from '@progress/kendo-angular-l10n';
+import { IconWrapperComponent } from '@progress/kendo-angular-icons';
+import * as i0 from "@angular/core";
+import * as i1 from "@progress/kendo-angular-l10n";
+const DIRECTION_CLASSES = {
+    left: 'chevron-left',
+    right: 'chevron-right',
+};
+/**
+ * @hidden
+ */
+export class ChatScrollableButtonComponent {
+    host;
+    renderer;
+    ngZone;
+    localization;
+    role = 'button';
+    prev = false;
+    onClick = new EventEmitter();
+    get scrollButtonIconClass() {
+        const defaultPrevIcon = !this.localization.rtl ? DIRECTION_CLASSES.left : DIRECTION_CLASSES.right;
+        const defaultNextIcon = !this.localization.rtl ? DIRECTION_CLASSES.right : DIRECTION_CLASSES.left;
+        return this.prev ? defaultPrevIcon : defaultNextIcon;
+    }
+    get scrollButtonSVGIcon() {
+        const defaultPrevSVGIcon = !this.localization.rtl ? this.chevronLeftIcon : this.chevronRightIcon;
+        const defaultNextSVGIcon = !this.localization.rtl ? this.chevronRightIcon : this.chevronLeftIcon;
+        return this.prev ? defaultPrevSVGIcon : defaultNextSVGIcon;
+    }
+    chevronLeftIcon = chevronLeftIcon;
+    chevronRightIcon = chevronRightIcon;
+    subs = new Subscription();
+    constructor(host, renderer, ngZone, localization) {
+        this.host = host;
+        this.renderer = renderer;
+        this.ngZone = ngZone;
+        this.localization = localization;
+    }
+    ngAfterViewInit() {
+        this.ngZone.runOutsideAngular(() => {
+            this.subs.add(this.renderer.listen(this.host.nativeElement, 'click', () => this.clickHandler()));
+        });
+    }
+    ngOnDestroy() {
+        this.subs.unsubscribe();
+    }
+    clickHandler() {
+        const buttonType = this.prev ? 'prev' : 'next';
+        this.onClick.emit(buttonType);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ChatScrollableButtonComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ChatScrollableButtonComponent, isStandalone: true, selector: "[kendoChatScrollableButton]", inputs: { prev: "prev" }, outputs: { onClick: "onClick" }, host: { properties: { "attr.role": "this.role" } }, ngImport: i0, template: `
+        <kendo-icon-wrapper [name]="scrollButtonIconClass" [svgIcon]="scrollButtonSVGIcon" innerCssClass="k-button-icon"> </kendo-icon-wrapper>
+    `, isInline: true, dependencies: [{ kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ChatScrollableButtonComponent, decorators: [{
+            type: Component,
+            args: [{
+                    template: `
+        <kendo-icon-wrapper [name]="scrollButtonIconClass" [svgIcon]="scrollButtonSVGIcon" innerCssClass="k-button-icon"> </kendo-icon-wrapper>
+    `,
+                    // eslint-disable-next-line @angular-eslint/component-selector
+                    selector: '[kendoChatScrollableButton]',
+                    standalone: true,
+                    imports: [IconWrapperComponent],
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i1.LocalizationService }], propDecorators: { role: [{
+                type: HostBinding,
+                args: ['attr.role']
+            }], prev: [{
+                type: Input
+            }], onClick: [{
+                type: Output
+            }] } });

package/esm2022/chat/common/scroll.service.mjs

@@ -0,0 +1,110 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2025 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Injectable, NgZone } from '@angular/core';
+import { isDocumentAvailable } from '@progress/kendo-angular-common';
+import { Subject } from 'rxjs';
+import { LocalizationService } from '@progress/kendo-angular-l10n';
+import * as i0 from "@angular/core";
+import * as i1 from "@progress/kendo-angular-l10n";
+const DEFAULT_SCROLL_BEHAVIOR = 'smooth';
+const DEFAULT_SCROLL_SPEED = 100;
+/**
+ * @hidden
+ */
+export class SuggestionsScrollService {
+    ngZone;
+    localization;
+    owner;
+    position = 0;
+    scrollButtonActiveStateChange = new Subject();
+    get scrollElement() {
+        return this.owner.suggestionsContainer?.nativeElement;
+    }
+    get scrollContainerOverflowSize() {
+        if (!isDocumentAvailable()) {
+            return 0;
+        }
+        if (!this.scrollElement) {
+            return 0;
+        }
+        const overflowSize = Math.floor(this.scrollElement.scrollWidth - this.scrollElement.offsetWidth);
+        return overflowSize < 0 ? 0 : overflowSize;
+    }
+    get suggestionsOverflow() {
+        return this.scrollContainerOverflowSize > 0;
+    }
+    constructor(ngZone, localization) {
+        this.ngZone = ngZone;
+        this.localization = localization;
+    }
+    toggleScrollButtonsState() {
+        const suggestedActions = this.owner;
+        if (!suggestedActions?.hasScrollButtons) {
+            return;
+        }
+        const currentPrevButtonActive = !this.isDisabled('prev');
+        const currentNextButtonActive = !this.isDisabled('next');
+        const defaultOffset = 1;
+        const rtlDelta = this.localization.rtl ? -1 : 1;
+        const calculatedPrevButtonActive = (this.position * rtlDelta) > 0 && this.scrollContainerOverflowSize > 0;
+        const calculatedNextButtonActive = (this.position * rtlDelta) < this.scrollContainerOverflowSize - defaultOffset && this.scrollContainerOverflowSize > 0;
+        if (calculatedPrevButtonActive !== currentPrevButtonActive) {
+            this.ngZone.run(() => this.toggleButtonActiveState('prev', calculatedPrevButtonActive));
+        }
+        if (calculatedNextButtonActive !== currentNextButtonActive) {
+            this.ngZone.run(() => this.toggleButtonActiveState('next', calculatedNextButtonActive));
+        }
+    }
+    onScroll(e) {
+        this.position = e.target.scrollLeft;
+        this.toggleScrollButtonsState();
+    }
+    scrollSuggestions(direction) {
+        this.calculateListPosition(direction, DEFAULT_SCROLL_SPEED);
+        if (this.scrollElement) {
+            this.scrollElement.scrollTo({ left: this.position, behavior: DEFAULT_SCROLL_BEHAVIOR });
+        }
+        this.toggleScrollButtonsState();
+    }
+    updateScrollPosition(element) {
+        this.position = element.scrollLeft;
+    }
+    calculateListPosition(direction, scrollSpeed) {
+        if (direction === 'prev') {
+            if (!this.localization.rtl) {
+                this.position = this.position - scrollSpeed <= 0 ? 0 : this.position - scrollSpeed;
+            }
+            else {
+                this.position = this.position + scrollSpeed >= 0 ? 0 : this.position + scrollSpeed;
+            }
+        }
+        else if (direction === 'next' && this.position < this.scrollContainerOverflowSize) {
+            if (this.position + scrollSpeed > this.scrollContainerOverflowSize) {
+                if (this.localization.rtl) {
+                    this.position = -this.scrollContainerOverflowSize;
+                }
+                else {
+                    this.position = this.scrollContainerOverflowSize;
+                }
+                return;
+            }
+            if (this.localization.rtl) {
+                this.position -= scrollSpeed;
+            }
+            else {
+                this.position += scrollSpeed;
+            }
+        }
+    }
+    toggleButtonActiveState(buttonType, active) {
+        this.scrollButtonActiveStateChange.next({ buttonType, active });
+    }
+    isDisabled = (buttonType) => this.owner[`${buttonType}ScrollButton`]?.nativeElement.classList.contains('k-disabled');
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SuggestionsScrollService, deps: [{ token: i0.NgZone }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SuggestionsScrollService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SuggestionsScrollService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: i0.NgZone }, { type: i1.LocalizationService }] });

package/esm2022/chat/common/utils.mjs

@@ -67,6 +67,10 @@ export const FILESELECT_DEFAULT_SETTINGS = {
     multiple: true,
     disabled: false
 };
+/**
+ * @hidden
+ */
+export const SUGGESTIONS_LAYOUT_DEFAULT_SETTINGS = 'scroll';
 /**
  * @hidden
  */
@@ -119,14 +123,16 @@ export const parseMessage = (message, fields) => {
             id: authorId,
             ...(authorName && { name: authorName }),
             ...(authorImageUrl && { avatarUrl: authorImageUrl }),
-            ...(authorImageAltText && { avatarAltText: authorImageAltText })
+            ...(authorImageAltText && { avatarAltText: authorImageAltText }),
         };
     }
+    const timestampValue = getter(modelFields.timestampField)(message);
+    const timestamp = timestampValue instanceof Date ? timestampValue : new Date(timestampValue);
     return {
         id: getter(modelFields.idField)(message),
         text: getter(modelFields.textField)(message),
         author: author,
-        timestamp: new Date(getter(modelFields.timestampField)(message)),
+        timestamp: timestamp,
         status: getter(modelFields.statusField)(message),
         files: getter(modelFields.filesField)(message),
         attachments: getter(modelFields.attachmentsField)(message),
@@ -135,6 +141,19 @@ export const parseMessage = (message, fields) => {
         isPinned: getter(modelFields.isPinnedField)(message),
         replyToId: getter(modelFields.replyToIdField)(message),
         isDeleted: getter(modelFields.isDeletedField)(message),
-        typing: getter(modelFields.typingField)(message)
+        typing: getter(modelFields.typingField)(message),
+        dataItem: message
     };
 };
+/**
+ * @hidden
+ */
+export const transformActions = (actions) => {
+    return actions.map(action => ({
+        text: action.label,
+        icon: action.icon,
+        svgIcon: action.svgIcon,
+        disabled: action.disabled,
+        originalAction: action
+    }));
+};

package/esm2022/chat/l10n/custom-messages.component.mjs

@@ -31,15 +31,15 @@ export class CustomMessagesComponent extends Messages {
     get override() {
         return true;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CustomMessagesComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CustomMessagesComponent, isStandalone: true, selector: "kendo-chat-messages", providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CustomMessagesComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: CustomMessagesComponent, isStandalone: true, selector: "kendo-chat-messages", providers: [
             {
                 provide: Messages,
                 useExisting: forwardRef(() => CustomMessagesComponent)
             }
         ], usesInheritance: true, ngImport: i0, template: ``, isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CustomMessagesComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CustomMessagesComponent, decorators: [{
             type: Component,
             args: [{
                     providers: [
@@ -52,4 +52,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     template: ``,
                     standalone: true
                 }]
-        }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; } });
+        }], ctorParameters: () => [{ type: i1.LocalizationService }] });

package/esm2022/chat/l10n/localized-messages.directive.mjs

@@ -17,15 +17,15 @@ export class LocalizedMessagesDirective extends Messages {
         super();
         this.service = service;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LocalizedMessagesDirective, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: LocalizedMessagesDirective, isStandalone: true, selector: "[kendoChatLocalizedMessages]", providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LocalizedMessagesDirective, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: LocalizedMessagesDirective, isStandalone: true, selector: "[kendoChatLocalizedMessages]", providers: [
             {
                 provide: Messages,
                 useExisting: forwardRef(() => LocalizedMessagesDirective)
             }
         ], usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LocalizedMessagesDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LocalizedMessagesDirective, decorators: [{
             type: Directive,
             args: [{
                     providers: [
@@ -37,4 +37,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     selector: '[kendoChatLocalizedMessages]',
                     standalone: true
                 }]
-        }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; } });
+        }], ctorParameters: () => [{ type: i1.LocalizationService }] });

package/esm2022/chat/l10n/messages.mjs

@@ -74,10 +74,18 @@ export class Messages extends ComponentMessages {
      * Sets the title of the DropDownButton that opens the File actions.
      */
     fileActionsTitle;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: Messages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: Messages, selector: "kendoConversationalUIMessages", inputs: { deletedMessageSenderText: "deletedMessageSenderText", deletedMessageReceiverText: "deletedMessageReceiverText", downloadAllFilesText: "downloadAllFilesText", messagePlaceholder: "messagePlaceholder", send: "send", messageListLabel: "messageListLabel", messageBoxInputLabel: "messageBoxInputLabel", messageAttachmentLeftArrow: "messageAttachmentLeftArrow", messageAttachmentRightArrow: "messageAttachmentRightArrow", speechToTextButtonTitle: "speechToTextButtonTitle", fileSelectButtonTitle: "fileSelectButtonTitle", removeReplyTitle: "removeReplyTitle", removeFileTitle: "removeFileTitle", expandTitle: "expandTitle", collapseTitle: "collapseTitle", fileActionsTitle: "fileActionsTitle" }, usesInheritance: true, ngImport: i0 });
+    /**
+     * Sets the title of the button that shows the **Scroll right** when the suggestions list is scrollable with buttons.
+     */
+    nextSuggestionsButtonTitle;
+    /**
+     * Sets the title of the button that shows the **Scroll left** when the suggestions list is scrollable with buttons.
+     */
+    previousSuggestionsButtonTitle;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: Messages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: Messages, selector: "kendoConversationalUIMessages", inputs: { deletedMessageSenderText: "deletedMessageSenderText", deletedMessageReceiverText: "deletedMessageReceiverText", downloadAllFilesText: "downloadAllFilesText", messagePlaceholder: "messagePlaceholder", send: "send", messageListLabel: "messageListLabel", messageBoxInputLabel: "messageBoxInputLabel", messageAttachmentLeftArrow: "messageAttachmentLeftArrow", messageAttachmentRightArrow: "messageAttachmentRightArrow", speechToTextButtonTitle: "speechToTextButtonTitle", fileSelectButtonTitle: "fileSelectButtonTitle", removeReplyTitle: "removeReplyTitle", removeFileTitle: "removeFileTitle", expandTitle: "expandTitle", collapseTitle: "collapseTitle", fileActionsTitle: "fileActionsTitle", nextSuggestionsButtonTitle: "nextSuggestionsButtonTitle", previousSuggestionsButtonTitle: "previousSuggestionsButtonTitle" }, usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: Messages, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: Messages, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
@@ -115,4 +123,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], fileActionsTitle: [{
                 type: Input
+            }], nextSuggestionsButtonTitle: [{
+                type: Input
+            }], previousSuggestionsButtonTitle: [{
+                type: Input
             }] } });

package/esm2022/chat/message-attachments.component.mjs

@@ -46,10 +46,10 @@ export class MessageAttachmentsComponent extends ChatItem {
     scrollSubscription;
     direction;
     get showLeftArrow() {
-        return this.carousel && this.direction === 'rtl' ? this.scrollPosition > -1 : this.scrollPosition > 0;
+        return this.carousel && (this.direction === 'rtl' ? this.scrollPosition > -1 : this.scrollPosition > 0);
     }
     get showRightArrow() {
-        return this.carousel && this.direction === 'rtl' ? this.scrollPosition < 0 : this.scrollPosition < 1;
+        return this.carousel && (this.direction === 'rtl' ? this.scrollPosition < 0 : this.scrollPosition < 1);
     }
     carouselKeyHandlers = {
         [Keys.ArrowLeft]: (e) => this.navigateTo(e, this.direction === 'rtl' ? 1 : -1),
@@ -131,8 +131,8 @@ export class MessageAttachmentsComponent extends ChatItem {
     textFor(key) {
         return this.localization.get(key);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MessageAttachmentsComponent, deps: [{ token: i0.NgZone }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MessageAttachmentsComponent, isStandalone: true, selector: "kendo-chat-message-attachments", inputs: { attachments: "attachments", layout: "layout", tabbable: "tabbable", template: "template", localization: "localization" }, host: { properties: { "class.k-card-deck-scrollwrap": "this.carousel" } }, providers: [{
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MessageAttachmentsComponent, deps: [{ token: i0.NgZone }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: MessageAttachmentsComponent, isStandalone: true, selector: "kendo-chat-message-attachments", inputs: { attachments: "attachments", layout: "layout", tabbable: "tabbable", template: "template", localization: "localization" }, host: { properties: { "class.k-card-deck-scrollwrap": "this.carousel" } }, providers: [{
                 provide: ChatItem,
                 useExisting: forwardRef(() => MessageAttachmentsComponent)
             }], viewQueries: [{ propertyName: "deck", first: true, predicate: ["deck"], descendants: true, read: ElementRef, static: true }, { propertyName: "items", predicate: ["item"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: `
@@ -178,7 +178,7 @@ export class MessageAttachmentsComponent extends ChatItem {
         </button>
     `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: AttachmentComponent, selector: "kendo-chat-attachment", inputs: ["attachment", "template"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MessageAttachmentsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MessageAttachmentsComponent, decorators: [{
             type: Component,
             args: [{
                     providers: [{
@@ -231,7 +231,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     standalone: true,
                     imports: [NgIf, ButtonComponent, NgFor, AttachmentComponent]
                 }]
-        }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i1.LocalizationService }]; }, propDecorators: { attachments: [{
+        }], ctorParameters: () => [{ type: i0.NgZone }, { type: i1.LocalizationService }], propDecorators: { attachments: [{
                 type: Input
             }], layout: [{
                 type: Input