@progress/kendo-angular-conversational-ui 20.0.0-develop.4 → 20.0.0-develop.5

package/esm2022/chat/chat.module.mjs

@@ -9,10 +9,14 @@ import { KENDO_CHAT } from '../directives';
 import * as i0 from "@angular/core";
 import * as i1 from "./chat.component";
 import * as i2 from "./l10n/custom-messages.component";
-import * as i3 from "./attachment-template.directive";
-import * as i4 from "./message-template.directive";
+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 "./message-box.directive";
+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";
 // IMPORTANT: NgModule export kept for backwards compatibility
 /**
  * Represents the [`NgModule`](link:site.data.urls.angular['ngmodules']) for the Chat component.
@@ -37,7 +41,7 @@ import * as i6 from "./message-box.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], exports: [i1.ChatComponent, i2.CustomMessagesComponent, i3.AttachmentTemplateDirective, i4.MessageTemplateDirective, i5.HeroCardComponent, i6.ChatMessageBoxTemplateDirective] });
+    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] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChatModule, decorators: [{

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

@@ -0,0 +1,97 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2025 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Injectable } from '@angular/core';
+import { Subject } from 'rxjs';
+import { STB_DEFAULT_SETTINGS, SEND_BTN_DEFAULT_SETTINGS, FILESELECT_DEFAULT_SETTINGS } from './utils';
+import * as i0 from "@angular/core";
+/**
+ * @hidden
+ */
+export class ChatService {
+    authorId;
+    messageWidthMode;
+    allowMessageCollapse;
+    messageToolbarActions = [];
+    messageContextMenuActions = [];
+    fileActions = [];
+    messageToolbarVisibility = 'hidden';
+    toggleMessageState = false;
+    reply;
+    messages = [];
+    chatElement;
+    messageElementsMap = new Map();
+    _enableSpeechToText = STB_DEFAULT_SETTINGS;
+    _enableFileSelect = FILESELECT_DEFAULT_SETTINGS;
+    _sendButtonSettings = SEND_BTN_DEFAULT_SETTINGS;
+    subjects = {
+        toolbarAction: new Subject(),
+        contextMenuAction: new Subject(),
+        fileAction: new Subject(),
+        fileDownload: new Subject(),
+        replyReferenceClick: new Subject(),
+        inputValueChange: new Subject()
+    };
+    toolbarAction$ = this.subjects.toolbarAction.asObservable();
+    contextMenuAction$ = this.subjects.contextMenuAction.asObservable();
+    fileAction$ = this.subjects.fileAction.asObservable();
+    fileDownload$ = this.subjects.fileDownload.asObservable();
+    replyReferenceClick$ = this.subjects.replyReferenceClick.asObservable();
+    inputValueChange$ = this.subjects.inputValueChange.asObservable();
+    set enableSpeechToText(settings) {
+        this.updateComponentSettings('_enableSpeechToText', settings, STB_DEFAULT_SETTINGS);
+    }
+    get enableSpeechToText() {
+        return this._enableSpeechToText;
+    }
+    set enableFileSelect(settings) {
+        this.updateComponentSettings('_enableFileSelect', settings, FILESELECT_DEFAULT_SETTINGS);
+    }
+    get enableFileSelect() {
+        return this._enableFileSelect;
+    }
+    set sendButtonSettings(settings) {
+        this.updateComponentSettings('_sendButtonSettings', settings, SEND_BTN_DEFAULT_SETTINGS);
+    }
+    get sendButtonSettings() {
+        return this._sendButtonSettings;
+    }
+    emit(subjectKey, value) {
+        (this.subjects[subjectKey]).next(value);
+    }
+    getMessageById(id) {
+        return this.messages.find(message => message.id === id);
+    }
+    registerMessageElement(messageId, elementRef) {
+        this.messageElementsMap.set(messageId, elementRef);
+    }
+    unregisterMessageElement(messageId) {
+        this.messageElementsMap.delete(messageId);
+        if (this.reply?.id === messageId) {
+            this.reply = null;
+        }
+    }
+    scrollToMessage(messageId) {
+        const elementRef = this.messageElementsMap.get(messageId);
+        if (elementRef?.nativeElement) {
+            elementRef.nativeElement.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+        }
+    }
+    updateComponentSettings(property, settings, defaultSettings) {
+        if (settings === true) {
+            this[property] = defaultSettings;
+        }
+        else if (settings === false) {
+            this[property] = null;
+        }
+        else {
+            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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChatService, decorators: [{
+            type: Injectable
+        }] });

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

@@ -0,0 +1,26 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2025 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+/**
+ * @hidden
+ */
+export const defaultModelFields = {
+    idField: 'id',
+    textField: 'text',
+    authorIdField: 'authorId',
+    authorNameField: 'authorName',
+    authorImageUrlField: 'authorImageUrl',
+    authorImageAltTextField: 'authorImageAltText',
+    timestampField: 'timestamp',
+    statusField: 'status',
+    filesField: 'files',
+    attachmentsField: 'attachments',
+    attachmentLayoutField: 'attachmentLayout',
+    suggestedActionsField: 'suggestedActions',
+    isPinnedField: 'isPinned',
+    pinnedByField: 'pinnedBy',
+    replyToIdField: 'replyToId',
+    isDeletedField: 'isDeleted',
+    typingField: 'typing'
+};

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

@@ -0,0 +1,5 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2025 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+export {};

package/esm2022/chat/common/utils.mjs

@@ -2,6 +2,10 @@
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
+import { defaultModelFields } from "./models/default-model-fields";
+import { getter } from "@progress/kendo-angular-common";
+import { paperPlaneIcon } from "@progress/kendo-svg-icons";
+import { copyIcon, undoIcon, downloadIcon } from "@progress/kendo-svg-icons";
 /**
  * @hidden
  */
@@ -11,3 +15,126 @@ export const closest = (node, predicate) => {
     }
     return node;
 };
+/**
+ * @hidden
+ */
+export const URL_REGEX = /(https?:\/\/[^\s]+)/g;
+/**
+ * @hidden
+ */
+export const DOWNLOAD_ALL_SELECTOR = '.k-chat-download-button';
+/**
+ * @hidden
+ */
+export const FILE_ACTION_BTN_SELECTOR = '.k-menu-button';
+/**
+ * @hidden
+ */
+export const MENU_ITEM_SELECTOR = '.k-menu-link';
+/**
+ * @hidden
+ * Default settings for the Speech to Text button.
+ * These settings can be overridden by the user.
+ */
+export const STB_DEFAULT_SETTINGS = {
+    continuous: false,
+    disabled: false,
+    fillMode: 'clear',
+    integrationMode: 'webSpeech',
+    interimResults: false,
+    lang: 'en-US',
+    maxAlternatives: 1,
+    rounded: 'medium',
+    size: 'medium',
+    themeColor: 'base'
+};
+/**
+ * @hidden
+ */
+export const SEND_BTN_DEFAULT_SETTINGS = {
+    fillMode: 'solid',
+    rounded: 'full',
+    size: 'medium',
+    themeColor: 'primary',
+    icon: 'paper-plane',
+    svgIcon: paperPlaneIcon,
+    buttonClass: 'k-chat-send'
+};
+/**
+ * @hidden
+ */
+export const FILESELECT_DEFAULT_SETTINGS = {
+    multiple: true,
+    disabled: false
+};
+/**
+ * @hidden
+ */
+export const CONTEXT_MENU_ACTIONS = [
+    {
+        id: 'copy',
+        label: 'Copy',
+        icon: 'copy',
+        svgIcon: copyIcon,
+        disabled: false
+    }, {
+        id: 'reply',
+        label: 'Reply',
+        icon: 'undo',
+        svgIcon: undoIcon,
+        disabled: false
+    }
+];
+/**
+ * @hidden
+ */
+export const FILE_ACTIONS = [
+    {
+        id: 'download',
+        label: 'Download',
+        icon: 'download',
+        svgIcon: downloadIcon,
+        disabled: false
+    }
+];
+/**
+ * @hidden
+ */
+export const processMessages = (messages, fields) => {
+    const modelFields = { ...defaultModelFields, ...fields };
+    return messages.map((message) => parseMessage(message, modelFields));
+};
+/**
+ * @hidden
+ */
+export const parseMessage = (message, fields) => {
+    const modelFields = { ...defaultModelFields, ...fields };
+    let author;
+    const authorId = getter(modelFields.authorIdField || 'authorId')(message);
+    const authorName = getter(modelFields.authorNameField || 'authorName')(message);
+    const authorImageUrl = getter(modelFields.authorImageUrlField || 'authorImageUrl')(message);
+    const authorImageAltText = getter(modelFields.authorImageAltTextField || 'authorImageAltText')(message);
+    if (authorId !== undefined) {
+        author = {
+            id: authorId,
+            ...(authorName && { name: authorName }),
+            ...(authorImageUrl && { avatarUrl: authorImageUrl }),
+            ...(authorImageAltText && { avatarAltText: authorImageAltText })
+        };
+    }
+    return {
+        id: getter(modelFields.idField)(message),
+        text: getter(modelFields.textField)(message),
+        author: author,
+        timestamp: new Date(getter(modelFields.timestampField)(message)),
+        status: getter(modelFields.statusField)(message),
+        files: getter(modelFields.filesField)(message),
+        attachments: getter(modelFields.attachmentsField)(message),
+        attachmentLayout: getter(modelFields.attachmentLayoutField)(message),
+        suggestedActions: getter(modelFields.suggestedActionsField)(message),
+        isPinned: getter(modelFields.isPinnedField)(message),
+        replyToId: getter(modelFields.replyToIdField)(message),
+        isDeleted: getter(modelFields.isDeletedField)(message),
+        typing: getter(modelFields.typingField)(message)
+    };
+};

package/esm2022/chat/l10n/messages.mjs

@@ -9,6 +9,19 @@ import * as i0 from "@angular/core";
  * @hidden
  */
 export class Messages extends ComponentMessages {
+    /**
+     * Sets the text that is displayed when the sender deletes a message.
+     */
+    deletedMessageSenderText;
+    /**
+     * Sets the text that is displayed when the receiver deletes a message.
+     */
+    deletedMessageReceiverText;
+    /**
+     * Sets the text that is displayed in the download section of the message.
+     * This message is displayed below all files in the message.
+     */
+    downloadAllFilesText;
     /**
      * Sets the placeholder text for the message text input.
      */
@@ -34,11 +47,35 @@ export class Messages extends ComponentMessages {
      */
     messageAttachmentRightArrow;
     /**
-     * Sets the `alt` attribute text for the avatar image.
+     * Sets the Speech to Text button title.
+     */
+    speechToTextButtonTitle;
+    /**
+     * Sets the File Select button title.
+     */
+    fileSelectButtonTitle;
+    /**
+     * Sets the title of the icon which removes the reply reference in the Message Box.
+     */
+    removeReplyTitle;
+    /**
+     * Sets the title of the icon which removes a selected file in the Message Box.
+     */
+    removeFileTitle;
+    /**
+     * Sets the title of the icon which demonstrates that the message can be expanded.
      */
-    messageAvatarAlt;
+    expandTitle;
+    /**
+     * Sets the title of the icon which demonstrates that the message can be collapsed.
+     */
+    collapseTitle;
+    /**
+     * Sets the title of the DropDownButton which 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: { messagePlaceholder: "messagePlaceholder", send: "send", messageListLabel: "messageListLabel", messageBoxInputLabel: "messageBoxInputLabel", messageAttachmentLeftArrow: "messageAttachmentLeftArrow", messageAttachmentRightArrow: "messageAttachmentRightArrow", messageAvatarAlt: "messageAvatarAlt" }, usesInheritance: true, ngImport: i0 });
+    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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: Messages, decorators: [{
             type: Directive,
@@ -46,7 +83,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     // eslint-disable-next-line @angular-eslint/directive-selector
                     selector: 'kendoConversationalUIMessages'
                 }]
-        }], propDecorators: { messagePlaceholder: [{
+        }], propDecorators: { deletedMessageSenderText: [{
+                type: Input
+            }], deletedMessageReceiverText: [{
+                type: Input
+            }], downloadAllFilesText: [{
+                type: Input
+            }], messagePlaceholder: [{
                 type: Input
             }], send: [{
                 type: Input
@@ -58,6 +101,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], messageAttachmentRightArrow: [{
                 type: Input
-            }], messageAvatarAlt: [{
+            }], speechToTextButtonTitle: [{
+                type: Input
+            }], fileSelectButtonTitle: [{
+                type: Input
+            }], removeReplyTitle: [{
+                type: Input
+            }], removeFileTitle: [{
+                type: Input
+            }], expandTitle: [{
+                type: Input
+            }], collapseTitle: [{
+                type: Input
+            }], fileActionsTitle: [{
                 type: Input
             }] } });

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

@@ -12,7 +12,7 @@ import { chevronLeftIcon, chevronRightIcon } from '@progress/kendo-svg-icons';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
 import { ButtonComponent } from '@progress/kendo-angular-buttons';
 import { ChatItem } from './chat-item';
-import { AttachmentTemplateDirective } from './attachment-template.directive';
+import { AttachmentTemplateDirective } from './templates/attachment-template.directive';
 import { AttachmentComponent } from './attachment.component';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-l10n";
@@ -128,9 +128,6 @@ export class MessageAttachmentsComponent extends ChatItem {
             });
         }
     }
-    /**
-     * @hidden
-     */
     textFor(key) {
         return this.localization.get(key);
     }