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

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.
@@ -41,8 +48,8 @@ import * as i10 from "./templates/suggestion-template.directive";
  */
 export class ChatModule {
     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.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: "18.2.14", ngImport: i0, type: ChatModule, providers: [IconsService, ResizeBatchService], imports: [i1.ChatComponent, i5.HeroCardComponent] });
+    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: "18.2.14", ngImport: i0, type: ChatModule, decorators: [{
             type: NgModule,

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;

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-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/messages.mjs

@@ -74,8 +74,16 @@ export class Messages extends ComponentMessages {
      * Sets the title of the DropDownButton that opens the File actions.
      */
     fileActionsTitle;
+    /**
+     * 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" }, usesInheritance: true, ngImport: i0 });
+    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: "18.2.14", ngImport: i0, type: Messages, decorators: [{
             type: Directive,
@@ -115,4 +123,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", 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),

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

@@ -5,7 +5,7 @@
 import { ChangeDetectorRef, Component, ElementRef, EventEmitter, HostBinding, Input, Output, Renderer2, ViewChild } from '@angular/core';
 import { NgIf, NgFor, NgTemplateOutlet } from '@angular/common';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
-import { closest, isPresent, Keys } from '@progress/kendo-angular-common';
+import { closest, guid, isPresent, Keys } from '@progress/kendo-angular-common';
 import { paperPlaneIcon, paperclipIcon, fileIcon, xIcon } from '@progress/kendo-svg-icons';
 import { ButtonComponent, SpeechToTextButtonComponent } from '@progress/kendo-angular-buttons';
 import { SendMessageEvent } from './api/post-message-event';
@@ -84,6 +84,7 @@ export class MessageBoxComponent {
             return;
         }
         const message = {
+            id: guid(),
             text: this.inputValue,
             timestamp: new Date(),
             author: { id: this.authorId },
@@ -221,6 +222,7 @@ export class MessageBoxComponent {
         *ngIf="suggestions?.length > 0"
         #suggestedActions
         [suggestions]="suggestions"
+        type="suggestion"
         [suggestionTemplate]="suggestionTemplate"
         [tabbable]="true"
         (dispatchSuggestion)="dispatchSuggestion($event)"
@@ -321,7 +323,7 @@ export class MessageBoxComponent {
         [showFileList]="false"
         (select)="handleFileSelect($event)"
     ></kendo-fileselect>
-`, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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: "ngmodule", type: FormsModule }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: MessageReferenceComponent, selector: "chat-message-reference-content", inputs: ["message"] }, { kind: "component", type: TextAreaSuffixComponent, selector: "kendo-textarea-suffix", inputs: ["flow", "orientation"], exportAs: ["kendoTextAreaSuffix"] }, { kind: "component", type: TextAreaPrefixComponent, selector: "kendo-textarea-prefix", inputs: ["flow", "orientation"], exportAs: ["kendoTextAreaPrefix"] }, { 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"] }, { kind: "component", type: InputSpacerComponent, selector: "kendo-input-spacer, kendo-textbox-spacer", inputs: ["width"] }, { kind: "component", type: FileSelectComponent, selector: "kendo-fileselect", inputs: ["name"], outputs: ["valueChange"], exportAs: ["kendoFileSelect"] }, { kind: "component", type: SuggestedActionsComponent, selector: "kendo-chat-suggested-actions", inputs: ["actions", "suggestions", "tabbable", "suggestionTemplate"], outputs: ["dispatchAction", "dispatchSuggestion"] }, { kind: "component", type: ChatFileComponent, selector: "li[chatFile]", inputs: ["chatFile", "removable", "fileActions"], outputs: ["remove", "actionClick", "actionsToggle", "actionButtonClick"] }] });
+`, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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: "ngmodule", type: FormsModule }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: MessageReferenceComponent, selector: "chat-message-reference-content", inputs: ["message"] }, { kind: "component", type: TextAreaSuffixComponent, selector: "kendo-textarea-suffix", inputs: ["flow", "orientation"], exportAs: ["kendoTextAreaSuffix"] }, { kind: "component", type: TextAreaPrefixComponent, selector: "kendo-textarea-prefix", inputs: ["flow", "orientation"], exportAs: ["kendoTextAreaPrefix"] }, { 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"] }, { kind: "component", type: InputSpacerComponent, selector: "kendo-input-spacer, kendo-textbox-spacer", inputs: ["width"] }, { kind: "component", type: FileSelectComponent, selector: "kendo-fileselect", inputs: ["name"], outputs: ["valueChange"], exportAs: ["kendoFileSelect"] }, { kind: "component", type: SuggestedActionsComponent, selector: "kendo-chat-suggested-actions", inputs: ["actions", "suggestions", "tabbable", "type", "suggestionTemplate"], outputs: ["dispatchAction", "dispatchSuggestion"] }, { kind: "component", type: ChatFileComponent, selector: "li[chatFile]", inputs: ["chatFile", "removable", "fileActions"], outputs: ["remove", "actionClick", "actionsToggle", "actionButtonClick"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MessageBoxComponent, decorators: [{
             type: Component,
@@ -332,6 +334,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
         *ngIf="suggestions?.length > 0"
         #suggestedActions
         [suggestions]="suggestions"
+        type="suggestion"
         [suggestionTemplate]="suggestionTemplate"
         [tabbable]="true"
         (dispatchSuggestion)="dispatchSuggestion($event)"