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

package/esm2022/chat/suggested-actions.component.mjs

@@ -4,28 +4,79 @@
 *-------------------------------------------------------------------------------------------*/
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable @typescript-eslint/no-empty-function */
-import { Component, EventEmitter, forwardRef, HostBinding, Input, Output, QueryList, ViewChildren } from '@angular/core';
+import { Component, ElementRef, EventEmitter, forwardRef, HostBinding, Input, Output, QueryList, ViewChildren, ViewChild, NgZone, Renderer2 } from '@angular/core';
 import { NgFor, NgIf, NgTemplateOutlet } from '@angular/common';
+import { Subscription } from 'rxjs';
+import { take } from 'rxjs/operators';
 import { Keys, normalizeNumpadKeys } from '@progress/kendo-angular-common';
 import { ChatItem } from './chat-item';
 import { ChatSuggestionTemplateDirective } from './templates/suggestion-template.directive';
+import { ChatService } from './common/chat.service';
+import { ChatScrollableButtonComponent } from './common/scroll-button.component';
+import { LocalizationService } from '@progress/kendo-angular-l10n';
+import { SuggestionsScrollService } from './common/scroll.service';
 import * as i0 from "@angular/core";
+import * as i1 from "./common/chat.service";
+import * as i2 from "@progress/kendo-angular-l10n";
+import * as i3 from "./common/scroll.service";
 /**
  * @hidden
  */
 export class SuggestedActionsComponent extends ChatItem {
+    chatService;
+    localization;
+    scrollService;
+    ngZone;
+    renderer;
+    get defaultClass() {
+        if (this.type === 'suggestion') {
+            return this.chatService.suggestionsLayout === 'wrap' || this.chatService.suggestionsLayout === 'scroll';
+        }
+        else if (this.type === 'action') {
+            return this.chatService.quickActionsLayout === 'wrap' || this.chatService.quickActionsLayout === 'scroll';
+        }
+    }
+    get scrollableClass() {
+        if (this.type === 'suggestion') {
+            return this.chatService.suggestionsLayout === 'scroll';
+        }
+        else if (this.type === 'action') {
+            return this.chatService.quickActionsLayout === 'scroll';
+        }
+    }
+    get scrollButtonsClass() {
+        if (this.type === 'suggestion') {
+            return this.chatService.suggestionsLayout === 'scrollbuttons';
+        }
+        else if (this.type === 'action') {
+            return this.chatService.quickActionsLayout === 'scrollbuttons';
+        }
+    }
+    get role() {
+        if (!this.hasScrollButtons) {
+            return 'group';
+        }
+        return null;
+    }
     actions;
     suggestions;
     tabbable;
+    type;
     suggestionTemplate;
     dispatchAction = new EventEmitter();
     dispatchSuggestion = new EventEmitter();
-    defaultClass = true;
-    role = 'group';
     items;
+    suggestionsContainer;
+    prevScrollButton;
+    nextScrollButton;
     selectedIndex = 0;
     activeIndex = -1;
     active = false;
+    get hasScrollButtons() {
+        return this.type === 'suggestion' ? this.chatService.suggestionsLayout === 'scrollbuttons' : this.chatService.quickActionsLayout === 'scrollbuttons';
+    }
+    subscriptions = new Subscription();
+    resizeObserver = null;
     actionKeyHandlers = {
         [Keys.Tab]: (e) => this.changeSelectedIndex(e),
         [Keys.Enter]: (_, action) => this.actionClick(action),
@@ -36,6 +87,58 @@ export class SuggestedActionsComponent extends ChatItem {
         [Keys.Enter]: (_, suggestion) => this.suggestionClick(suggestion),
         [Keys.Space]: (_, suggestion) => this.suggestionClick(suggestion),
     };
+    constructor(chatService, localization, scrollService, ngZone, renderer) {
+        super();
+        this.chatService = chatService;
+        this.localization = localization;
+        this.scrollService = scrollService;
+        this.ngZone = ngZone;
+        this.renderer = renderer;
+        this.scrollService.owner = this;
+    }
+    ngAfterViewInit() {
+        const layoutChangeObservable = this.type === 'suggestion'
+            ? this.chatService.suggestionsLayoutChange$
+            : this.chatService.quickActionsLayoutChange$;
+        this.subscriptions.add(layoutChangeObservable.subscribe((layoutMode) => {
+            if (layoutMode === 'scrollbuttons') {
+                this.ngZone.onStable.pipe(take(1)).subscribe(() => {
+                    if (this.suggestionsContainer) {
+                        this.scrollService.updateScrollPosition(this.suggestionsContainer.nativeElement);
+                    }
+                    this.scrollService.toggleScrollButtonsState();
+                });
+            }
+        }));
+        this.subscriptions.add(this.scrollService.scrollButtonActiveStateChange.subscribe((change) => {
+            this.toggleScrollButtonState(change.buttonType, change.active);
+        }));
+        if (this.hasScrollButtons && this.suggestionsContainer) {
+            this.ngZone.runOutsideAngular(() => {
+                this.resizeObserver = new ResizeObserver(() => {
+                    this.ngZone.run(() => {
+                        this.scrollService.toggleScrollButtonsState();
+                    });
+                });
+                this.resizeObserver.observe(this.suggestionsContainer.nativeElement);
+            });
+        }
+        if (this.hasScrollButtons) {
+            this.ngZone.onStable.pipe(take(1)).subscribe(() => {
+                this.scrollService.toggleScrollButtonsState();
+            });
+            if (this.suggestionsContainer) {
+                this.scrollService.updateScrollPosition(this.suggestionsContainer.nativeElement);
+            }
+        }
+    }
+    ngOnDestroy() {
+        this.subscriptions.unsubscribe();
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect();
+            this.resizeObserver = null;
+        }
+    }
     isSelected(index) {
         return this.selected && this.selectedIndex === index;
     }
@@ -69,67 +172,130 @@ export class SuggestedActionsComponent extends ChatItem {
             handler(e, suggestion);
         }
     }
+    getScrollButtonTitle(direction) {
+        let currentButton;
+        if (this.localization.rtl) {
+            currentButton = direction === 'prev' ? 'nextSuggestionsButtonTitle' : 'previousSuggestionsButtonTitle';
+        }
+        else {
+            currentButton = direction === 'prev' ? 'previousSuggestionsButtonTitle' : 'nextSuggestionsButtonTitle';
+        }
+        return this.localization.get(currentButton);
+    }
+    onScroll(event) {
+        this.scrollService.onScroll(event);
+    }
+    scrollSuggestions(direction) {
+        this.scrollService.scrollSuggestions(direction);
+    }
     focus() { }
+    toggleScrollButtonState(buttonType, active) {
+        const button = this[`${buttonType}ScrollButton`];
+        if (button?.nativeElement) {
+            if (active) {
+                this.renderer.removeClass(button.nativeElement, 'k-disabled');
+            }
+            else {
+                this.renderer.addClass(button.nativeElement, 'k-disabled');
+            }
+        }
+    }
     changeSelectedIndex(e) {
         const offset = e.shiftKey ? -1 : 1;
         const prevIndex = this.selectedIndex;
         this.selectedIndex = Math.max(0, Math.min(prevIndex + offset, this.items.length - 1));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SuggestedActionsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: SuggestedActionsComponent, isStandalone: true, selector: "kendo-chat-suggested-actions", inputs: { actions: "actions", suggestions: "suggestions", tabbable: "tabbable", suggestionTemplate: "suggestionTemplate" }, outputs: { dispatchAction: "dispatchAction", dispatchSuggestion: "dispatchSuggestion" }, host: { properties: { "class.k-suggestion-group": "this.defaultClass", "attr.role": "this.role" } }, providers: [{
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SuggestedActionsComponent, deps: [{ token: i1.ChatService }, { token: i2.LocalizationService }, { token: i3.SuggestionsScrollService }, { token: i0.NgZone }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: SuggestedActionsComponent, isStandalone: true, selector: "kendo-chat-suggested-actions", inputs: { actions: "actions", suggestions: "suggestions", tabbable: "tabbable", type: "type", suggestionTemplate: "suggestionTemplate" }, outputs: { dispatchAction: "dispatchAction", dispatchSuggestion: "dispatchSuggestion" }, host: { properties: { "class.k-suggestion-group": "this.defaultClass", "class.k-suggestion-group-scrollable": "this.scrollableClass", "class.k-suggestion-scrollwrap": "this.scrollButtonsClass", "attr.role": "this.role" } }, providers: [{
                 provide: ChatItem,
                 useExisting: forwardRef(() => SuggestedActionsComponent)
-            }], viewQueries: [{ propertyName: "items", predicate: ["item"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
-        <ng-container *ngIf="actions">
-            <span
-                #item
-                *ngFor="let action of actions; index as index; first as first; last as last"
-                class="k-suggestion k-suggestion-primary"
-                role="button"
-                [class.k-selected]="isSelected(index)"
-                [class.k-focus]="isSelected(index)"
-                [class.k-active]="isActive(index)"
-                [attr.tabindex]="0"
-                (click)="actionClick(action, index)"
-                (keydown)="actionKeydown($event, action)"
-                (mousedown)="toggleActiveState(true, index)"
-                (mouseup)="toggleActiveState(false, index)"
-            >
-                {{ action.title || action.value }}
-            </span>
-        </ng-container>
+            },
+            SuggestionsScrollService
+        ], viewQueries: [{ propertyName: "suggestionsContainer", first: true, predicate: ["suggestionsContainer"], descendants: true, read: ElementRef }, { propertyName: "prevScrollButton", first: true, predicate: ["prevScrollButton"], descendants: true, read: ElementRef }, { propertyName: "nextScrollButton", first: true, predicate: ["nextScrollButton"], descendants: true, read: ElementRef }, { propertyName: "items", predicate: ["item"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
+        <span 
+            *ngIf="hasScrollButtons" 
+            #prevScrollButton
+            kendoChatScrollableButton
+            [prev]="true"
+            [title]="getScrollButtonTitle('prev')"
+            class="k-button k-button-md k-button-solid k-button-solid-base k-rounded-md k-icon-button"
+            (onClick)="scrollSuggestions($event)"
+        >
+        </span>
+        <div class="k-suggestion-group" *ngIf="hasScrollButtons; else noScrollButtons" 
+            #suggestionsContainer
+            role="group"
+            (scroll)="onScroll($event)">
+            <ng-container *ngTemplateOutlet="suggestionsContent"></ng-container>
+        </div>
+
+        <ng-template #noScrollButtons>
+            <ng-container *ngTemplateOutlet="suggestionsContent"></ng-container>
+        </ng-template>
 
-        <ng-container *ngIf="suggestions">
-            <ng-container *ngIf="!suggestionTemplate?.templateRef">
+        <ng-template #suggestionsContent>
+            <ng-container *ngIf="actions">
                 <span
                     #item
-                    *ngFor="let suggestion of suggestions; index as index; first as first; last as last"
-                    class="k-suggestion"
+                    *ngFor="let action of actions; index as index; first as first; last as last"
+                    class="k-suggestion k-suggestion-primary"
                     role="button"
                     [class.k-selected]="isSelected(index)"
                     [class.k-focus]="isSelected(index)"
                     [class.k-active]="isActive(index)"
                     [attr.tabindex]="0"
-                    (click)="suggestionClick(suggestion, index)"
-                    (keydown)="suggestionKeydown($event, suggestion)"
+                    (click)="actionClick(action, index)"
+                    (keydown)="actionKeydown($event, action)"
                     (mousedown)="toggleActiveState(true, index)"
                     (mouseup)="toggleActiveState(false, index)"
                 >
-                    {{ suggestion.text }}
+                    {{ action.title || action.value }}
                 </span>
             </ng-container>
 
-            <ng-container *ngIf="suggestionTemplate?.templateRef">
-                <ng-container *ngFor="let suggestion of suggestions">
-                    <ng-template
-                        [ngTemplateOutlet]="suggestionTemplate.templateRef"
-                        [ngTemplateOutletContext]="{ $implicit: suggestion }"
+            <ng-container *ngIf="suggestions">
+                <ng-container *ngIf="!suggestionTemplate?.templateRef">
+                    <span
+                        #item
+                        *ngFor="let suggestion of suggestions; index as index; first as first; last as last"
+                        class="k-suggestion"
+                        role="button"
+                        [class.k-selected]="isSelected(index)"
+                        [class.k-focus]="isSelected(index)"
+                        [class.k-active]="isActive(index)"
+                        [attr.tabindex]="0"
+                        (click)="suggestionClick(suggestion, index)"
+                        (keydown)="suggestionKeydown($event, suggestion)"
+                        (mousedown)="toggleActiveState(true, index)"
+                        (mouseup)="toggleActiveState(false, index)"
                     >
-                    </ng-template>
+                        {{ suggestion.text }}
+                    </span>
+                </ng-container>
+
+                <ng-container *ngIf="suggestionTemplate?.templateRef">
+                    <ng-container *ngFor="let suggestion of suggestions">
+                        <ng-template
+                            [ngTemplateOutlet]="suggestionTemplate.templateRef"
+                            [ngTemplateOutletContext]="{ $implicit: suggestion }"
+                        >
+                        </ng-template>
+                    </ng-container>
                 </ng-container>
             </ng-container>
-        </ng-container>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+        </ng-template>
+
+        <span 
+            *ngIf="hasScrollButtons"
+            #nextScrollButton
+            kendoChatScrollableButton
+            [prev]="false"
+            [title]="getScrollButtonTitle('next')"
+            class="k-button k-button-md k-button-solid k-button-solid-base k-rounded-md k-icon-button"
+            (onClick)="scrollSuggestions($event)"
+        >
+        </span>
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ChatScrollableButtonComponent, selector: "[kendoChatScrollableButton]", inputs: ["prev"], outputs: ["onClick"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SuggestedActionsComponent, decorators: [{
             type: Component,
@@ -138,80 +304,132 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     providers: [{
                             provide: ChatItem,
                             useExisting: forwardRef(() => SuggestedActionsComponent)
-                        }],
+                        },
+                        SuggestionsScrollService],
                     template: `
-        <ng-container *ngIf="actions">
-            <span
-                #item
-                *ngFor="let action of actions; index as index; first as first; last as last"
-                class="k-suggestion k-suggestion-primary"
-                role="button"
-                [class.k-selected]="isSelected(index)"
-                [class.k-focus]="isSelected(index)"
-                [class.k-active]="isActive(index)"
-                [attr.tabindex]="0"
-                (click)="actionClick(action, index)"
-                (keydown)="actionKeydown($event, action)"
-                (mousedown)="toggleActiveState(true, index)"
-                (mouseup)="toggleActiveState(false, index)"
-            >
-                {{ action.title || action.value }}
-            </span>
-        </ng-container>
+        <span 
+            *ngIf="hasScrollButtons" 
+            #prevScrollButton
+            kendoChatScrollableButton
+            [prev]="true"
+            [title]="getScrollButtonTitle('prev')"
+            class="k-button k-button-md k-button-solid k-button-solid-base k-rounded-md k-icon-button"
+            (onClick)="scrollSuggestions($event)"
+        >
+        </span>
+        <div class="k-suggestion-group" *ngIf="hasScrollButtons; else noScrollButtons" 
+            #suggestionsContainer
+            role="group"
+            (scroll)="onScroll($event)">
+            <ng-container *ngTemplateOutlet="suggestionsContent"></ng-container>
+        </div>
 
-        <ng-container *ngIf="suggestions">
-            <ng-container *ngIf="!suggestionTemplate?.templateRef">
+        <ng-template #noScrollButtons>
+            <ng-container *ngTemplateOutlet="suggestionsContent"></ng-container>
+        </ng-template>
+
+        <ng-template #suggestionsContent>
+            <ng-container *ngIf="actions">
                 <span
                     #item
-                    *ngFor="let suggestion of suggestions; index as index; first as first; last as last"
-                    class="k-suggestion"
+                    *ngFor="let action of actions; index as index; first as first; last as last"
+                    class="k-suggestion k-suggestion-primary"
                     role="button"
                     [class.k-selected]="isSelected(index)"
                     [class.k-focus]="isSelected(index)"
                     [class.k-active]="isActive(index)"
                     [attr.tabindex]="0"
-                    (click)="suggestionClick(suggestion, index)"
-                    (keydown)="suggestionKeydown($event, suggestion)"
+                    (click)="actionClick(action, index)"
+                    (keydown)="actionKeydown($event, action)"
                     (mousedown)="toggleActiveState(true, index)"
                     (mouseup)="toggleActiveState(false, index)"
                 >
-                    {{ suggestion.text }}
+                    {{ action.title || action.value }}
                 </span>
             </ng-container>
 
-            <ng-container *ngIf="suggestionTemplate?.templateRef">
-                <ng-container *ngFor="let suggestion of suggestions">
-                    <ng-template
-                        [ngTemplateOutlet]="suggestionTemplate.templateRef"
-                        [ngTemplateOutletContext]="{ $implicit: suggestion }"
+            <ng-container *ngIf="suggestions">
+                <ng-container *ngIf="!suggestionTemplate?.templateRef">
+                    <span
+                        #item
+                        *ngFor="let suggestion of suggestions; index as index; first as first; last as last"
+                        class="k-suggestion"
+                        role="button"
+                        [class.k-selected]="isSelected(index)"
+                        [class.k-focus]="isSelected(index)"
+                        [class.k-active]="isActive(index)"
+                        [attr.tabindex]="0"
+                        (click)="suggestionClick(suggestion, index)"
+                        (keydown)="suggestionKeydown($event, suggestion)"
+                        (mousedown)="toggleActiveState(true, index)"
+                        (mouseup)="toggleActiveState(false, index)"
                     >
-                    </ng-template>
+                        {{ suggestion.text }}
+                    </span>
+                </ng-container>
+
+                <ng-container *ngIf="suggestionTemplate?.templateRef">
+                    <ng-container *ngFor="let suggestion of suggestions">
+                        <ng-template
+                            [ngTemplateOutlet]="suggestionTemplate.templateRef"
+                            [ngTemplateOutletContext]="{ $implicit: suggestion }"
+                        >
+                        </ng-template>
+                    </ng-container>
                 </ng-container>
             </ng-container>
-        </ng-container>
+        </ng-template>
+
+        <span 
+            *ngIf="hasScrollButtons"
+            #nextScrollButton
+            kendoChatScrollableButton
+            [prev]="false"
+            [title]="getScrollButtonTitle('next')"
+            class="k-button k-button-md k-button-solid k-button-solid-base k-rounded-md k-icon-button"
+            (onClick)="scrollSuggestions($event)"
+        >
+        </span>
     `,
                     standalone: true,
-                    imports: [NgFor, NgIf, NgTemplateOutlet]
+                    imports: [NgFor, NgIf, NgTemplateOutlet, ChatScrollableButtonComponent]
                 }]
-        }], propDecorators: { actions: [{
+        }], ctorParameters: () => [{ type: i1.ChatService }, { type: i2.LocalizationService }, { type: i3.SuggestionsScrollService }, { type: i0.NgZone }, { type: i0.Renderer2 }], propDecorators: { defaultClass: [{
+                type: HostBinding,
+                args: ['class.k-suggestion-group']
+            }], scrollableClass: [{
+                type: HostBinding,
+                args: ['class.k-suggestion-group-scrollable']
+            }], scrollButtonsClass: [{
+                type: HostBinding,
+                args: ['class.k-suggestion-scrollwrap']
+            }], role: [{
+                type: HostBinding,
+                args: ['attr.role']
+            }], actions: [{
                 type: Input
             }], suggestions: [{
                 type: Input
             }], tabbable: [{
                 type: Input
+            }], type: [{
+                type: Input
             }], suggestionTemplate: [{
                 type: Input
             }], dispatchAction: [{
                 type: Output
             }], dispatchSuggestion: [{
                 type: Output
-            }], defaultClass: [{
-                type: HostBinding,
-                args: ['class.k-suggestion-group']
-            }], role: [{
-                type: HostBinding,
-                args: ['attr.role']
             }], items: [{
                 type: ViewChildren,
                 args: ['item']
+            }], suggestionsContainer: [{
+                type: ViewChild,
+                args: ['suggestionsContainer', { read: ElementRef, static: false }]
+            }], prevScrollButton: [{
+                type: ViewChild,
+                args: ['prevScrollButton', { read: ElementRef }]
+            }], nextScrollButton: [{
+                type: ViewChild,
+                args: ['nextScrollButton', { read: ElementRef }]
             }] } });

package/esm2022/chat/templates/author-message-content-template.directive.mjs

@@ -0,0 +1,39 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2025 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Directive, Optional, TemplateRef } from "@angular/core";
+import * as i0 from "@angular/core";
+/**
+ * Defines a template for displaying custom content inside the current user's messages in the Chat.
+ *
+ * To define a message template, nest an `<ng-template>` tag with the `kendoChatAuthorMessageContentTemplate` directive inside the `<kendo-chat>` component.
+ * The template context is set to the `message` instance.
+ * For more information, refer to the article on [message templates](slug:message_templates_chat).
+ *
+ * @example
+ * ```html
+ * <kendo-chat>
+ *   <ng-template kendoChatAuthorMessageContentTemplate let-message>
+ *     <div>Message: {{ message.text }}</div>
+ *   </ng-template>
+ * </kendo-chat>
+ * ```
+ */
+export class AuthorMessageContentTemplateDirective {
+    templateRef;
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AuthorMessageContentTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: AuthorMessageContentTemplateDirective, isStandalone: true, selector: "[kendoChatAuthorMessageContentTemplate]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AuthorMessageContentTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoChatAuthorMessageContentTemplate]',
+                    standalone: true
+                }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef, decorators: [{
+                    type: Optional
+                }] }] });

package/esm2022/chat/templates/author-message-template.directive.mjs

@@ -0,0 +1,39 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2025 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Directive, Optional, TemplateRef } from "@angular/core";
+import * as i0 from "@angular/core";
+/**
+ * Defines a template for displaying fully custom Chat message bubbles for the current user.
+ *
+ * To define a message template, nest an `<ng-template>` tag with the `kendoChatAuthorMessageTemplate` directive inside the `<kendo-chat>` component.
+ * The template context is set to the `message` instance.
+ * For more information, refer to the article on [message templates](slug:message_templates_chat).
+ *
+ * @example
+ * ```html
+ * <kendo-chat>
+ *   <ng-template kendoChatAuthorMessageTemplate let-message>
+ *     <div>Message: {{ message.text }}</div>
+ *   </ng-template>
+ * </kendo-chat>
+ * ```
+ */
+export class AuthorMessageTemplateDirective {
+    templateRef;
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AuthorMessageTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: AuthorMessageTemplateDirective, isStandalone: true, selector: "[kendoChatAuthorMessageTemplate]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AuthorMessageTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoChatAuthorMessageTemplate]',
+                    standalone: true
+                }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef, decorators: [{
+                    type: Optional
+                }] }] });

package/esm2022/chat/templates/message-content-template.directive.mjs

@@ -0,0 +1,39 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2025 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Directive, Optional, TemplateRef } from "@angular/core";
+import * as i0 from "@angular/core";
+/**
+ * Defines a template for displaying custom content inside the Chat messages.
+ *
+ * To define a message template, nest an `<ng-template>` tag with the `kendoChatMessageContentTemplate` directive inside the `<kendo-chat>` component.
+ * The template context is set to the `message` instance.
+ * For more information, refer to the article on [message templates](slug:message_templates_chat).
+ *
+ * @example
+ * ```html
+ * <kendo-chat>
+ *   <ng-template kendoChatMessageContentTemplate let-message>
+ *     <div>Message: {{ message.text }}</div>
+ *   </ng-template>
+ * </kendo-chat>
+ * ```
+ */
+export class MessageContentTemplateDirective {
+    templateRef;
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MessageContentTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: MessageContentTemplateDirective, isStandalone: true, selector: "[kendoChatMessageContentTemplate]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MessageContentTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoChatMessageContentTemplate]',
+                    standalone: true
+                }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef, decorators: [{
+                    type: Optional
+                }] }] });

package/esm2022/chat/templates/message-template.directive.mjs

@@ -5,7 +5,7 @@
 import { Directive, Optional, TemplateRef } from "@angular/core";
 import * as i0 from "@angular/core";
 /**
- * Defines a template for displaying Chat messages.
+ * Defines a template for displaying fully custom Chat message bubbles.
  *
  * To define a message template, nest an `<ng-template>` tag with the `kendoChatMessageTemplate` directive inside the `<kendo-chat>` component.
  * The template context is set to the `message` instance.

package/esm2022/chat/templates/no-data-template.directive.mjs

@@ -0,0 +1,38 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2025 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Directive, Optional, TemplateRef } from "@angular/core";
+import * as i0 from "@angular/core";
+/**
+ * Defines a template for displaying custom content when there are no messages in the Chat.
+ *
+ * To define an empty Chat template, nest an `<ng-template>` tag with the `kendoChatNoDataTemplate` directive inside the `<kendo-chat>` component.
+ * For more information, refer to the article on [message templates](slug:message_templates_chat).
+ *
+ * @example
+ * ```html
+ * <kendo-chat>
+ *   <ng-template kendoChatNoDataTemplate>
+ *     <div>No messages.</div>
+ *   </ng-template>
+ * </kendo-chat>
+ * ```
+ */
+export class NoDataTemplateDirective {
+    templateRef;
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NoDataTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: NoDataTemplateDirective, isStandalone: true, selector: "[kendoChatNoDataTemplate]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NoDataTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoChatNoDataTemplate]',
+                    standalone: true
+                }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef, decorators: [{
+                    type: Optional
+                }] }] });