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

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

@@ -5,37 +5,70 @@
 /* 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 { NgFor } from '@angular/common';
+import { NgFor, NgIf, NgTemplateOutlet } from '@angular/common';
 import { Keys, normalizeNumpadKeys } from '@progress/kendo-angular-common';
 import { ChatItem } from './chat-item';
+import { ChatSuggestionTemplateDirective } from './templates/suggestion-template.directive';
 import * as i0 from "@angular/core";
 /**
  * @hidden
  */
 export class SuggestedActionsComponent extends ChatItem {
     actions;
+    suggestions;
     tabbable;
-    dispatch = new EventEmitter();
+    suggestionTemplate;
+    dispatchAction = new EventEmitter();
+    dispatchSuggestion = new EventEmitter();
     defaultClass = true;
+    role = 'group';
     items;
     selectedIndex = 0;
-    keyHandlers = {
+    activeIndex = -1;
+    active = false;
+    actionKeyHandlers = {
         [Keys.Tab]: (e) => this.changeSelectedIndex(e),
         [Keys.Enter]: (_, action) => this.actionClick(action),
         [Keys.Space]: (_, action) => this.actionClick(action),
     };
+    suggestionKeyHandlers = {
+        [Keys.Tab]: (e) => this.changeSelectedIndex(e),
+        [Keys.Enter]: (_, suggestion) => this.suggestionClick(suggestion),
+        [Keys.Space]: (_, suggestion) => this.suggestionClick(suggestion),
+    };
     isSelected(index) {
         return this.selected && this.selectedIndex === index;
     }
-    actionClick(action) {
-        this.dispatch.next(action);
+    isActive(index) {
+        return this.activeIndex === index;
+    }
+    actionClick(action, index) {
+        if (index >= 0) {
+            this.selectedIndex = index;
+        }
+        this.dispatchAction.next(action);
+    }
+    suggestionClick(suggestion, index) {
+        if (index >= 0) {
+            this.selectedIndex = index;
+        }
+        this.dispatchSuggestion.next(suggestion);
+    }
+    toggleActiveState(apply, index) {
+        this.activeIndex = apply ? index : -1;
     }
     actionKeydown(e, action) {
-        const handler = this.keyHandlers[normalizeNumpadKeys(e)];
+        const handler = this.actionKeyHandlers[normalizeNumpadKeys(e)];
         if (handler) {
             handler(e, action);
         }
     }
+    suggestionKeydown(e, suggestion) {
+        const handler = this.suggestionKeyHandlers[normalizeNumpadKeys(e)];
+        if (handler) {
+            handler(e, suggestion);
+        }
+    }
     focus() { }
     changeSelectedIndex(e) {
         const offset = e.shiftKey ? -1 : 1;
@@ -43,26 +76,60 @@ export class SuggestedActionsComponent extends ChatItem {
         this.selectedIndex = Math.max(0, Math.min(prevIndex + offset, this.items.length - 1));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SuggestedActionsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SuggestedActionsComponent, isStandalone: true, selector: "kendo-chat-suggested-actions", inputs: { actions: "actions", tabbable: "tabbable" }, outputs: { dispatch: "dispatch" }, host: { properties: { "class.k-quick-replies": "this.defaultClass" } }, providers: [{
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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: [{
                 provide: ChatItem,
                 useExisting: forwardRef(() => SuggestedActionsComponent)
             }], viewQueries: [{ propertyName: "items", predicate: ["item"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
-        <span
-            #item
-            *ngFor="let action of actions; index as index; first as first; last as last"
-            class="k-quick-reply"
-            role="button"
-            [class.k-selected]="isSelected(index)"
-            [class.k-focus]="isSelected(index)"
-            [class.k-first]="first"
-            [class.k-last]="last"
-            [attr.tabindex]="0"
-            (click)="actionClick(action)"
-            (keydown)="actionKeydown($event, action)"
-        >
-        {{ action.title || action.value }}
-        </span>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+        <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>
+
+        <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)"
+                >
+                    {{ 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>
+    `, 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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SuggestedActionsComponent, decorators: [{
             type: Component,
@@ -73,34 +140,77 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                             useExisting: forwardRef(() => SuggestedActionsComponent)
                         }],
                     template: `
-        <span
-            #item
-            *ngFor="let action of actions; index as index; first as first; last as last"
-            class="k-quick-reply"
-            role="button"
-            [class.k-selected]="isSelected(index)"
-            [class.k-focus]="isSelected(index)"
-            [class.k-first]="first"
-            [class.k-last]="last"
-            [attr.tabindex]="0"
-            (click)="actionClick(action)"
-            (keydown)="actionKeydown($event, action)"
-        >
-        {{ action.title || action.value }}
-        </span>
+        <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>
+
+        <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)"
+                >
+                    {{ 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>
     `,
                     standalone: true,
-                    imports: [NgFor]
+                    imports: [NgFor, NgIf, NgTemplateOutlet]
                 }]
         }], propDecorators: { actions: [{
                 type: Input
+            }], suggestions: [{
+                type: Input
             }], tabbable: [{
                 type: Input
-            }], dispatch: [{
+            }], suggestionTemplate: [{
+                type: Input
+            }], dispatchAction: [{
+                type: Output
+            }], dispatchSuggestion: [{
                 type: Output
             }], defaultClass: [{
                 type: HostBinding,
-                args: ['class.k-quick-replies']
+                args: ['class.k-suggestion-group']
+            }], role: [{
+                type: HostBinding,
+                args: ['attr.role']
             }], items: [{
                 type: ViewChildren,
                 args: ['item']

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

@@ -0,0 +1,33 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2025 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Directive, TemplateRef } from '@angular/core';
+import * as i0 from "@angular/core";
+/**
+ * Represents the template for the header of the Chat component.
+ *
+ * @example
+ * ```html
+ * <kendo-chat>
+ *     <ng-template kendoChatHeaderTemplate>
+ *         Chat Title
+ *     </ng-template>
+ * </kendo-chat>
+ * ```
+ */
+export class ChatHeaderTemplateDirective {
+    templateRef;
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChatHeaderTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ChatHeaderTemplateDirective, isStandalone: true, selector: "[kendoChatHeaderTemplate]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChatHeaderTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoChatHeaderTemplate]',
+                    standalone: true
+                }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });

package/esm2022/chat/{message-box.directive.mjs → templates/message-box.directive.mjs}

@@ -8,7 +8,7 @@ import * as i0 from "@angular/core";
  * Creates a message box area that overrides the default message box of the Chat component.
  *
  * To define a message box template, nest an `<ng-template>` tag with the `kendoChatMessageBoxTemplate` directive inside the `<kendo-chat>` tag.
- * For more information, see [Message Box Template](slug:message_box#toc-message-box-template).
+ * For more information, see [Message Box Template](slug:message_templates_chat#toc-message-box-template).
  *
  * @example
  * ```html

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

@@ -0,0 +1,33 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2025 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Directive, TemplateRef } from '@angular/core';
+import * as i0 from "@angular/core";
+/**
+ * Represents the template for the status of a message.
+ *
+ * @example
+ * ```html
+ * <kendo-chat>
+ *     <ng-template kendoChatStatusTemplate let-status>
+ *         Current status: {{ status }}
+ *     </ng-template>
+ * </kendo-chat>
+ * ```
+ */
+export class ChatStatusTemplateDirective {
+    templateRef;
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChatStatusTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ChatStatusTemplateDirective, isStandalone: true, selector: "[kendoChatStatusTemplate]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChatStatusTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoChatStatusTemplate]',
+                    standalone: true
+                }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });

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

@@ -0,0 +1,33 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2025 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Directive, TemplateRef } from '@angular/core';
+import * as i0 from "@angular/core";
+/**
+ * Represents the template for a suggestion in the Chat component.
+ *
+ * @example
+ * ```html
+ * <kendo-chat>
+ *     <ng-template kendoChatSuggestionTemplate>
+ *         Suggestion Text
+ *     </ng-template>
+ * </kendo-chat>
+ * ```
+ */
+export class ChatSuggestionTemplateDirective {
+    templateRef;
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChatSuggestionTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ChatSuggestionTemplateDirective, isStandalone: true, selector: "[kendoChatSuggestionTemplate]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChatSuggestionTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoChatSuggestionTemplate]',
+                    standalone: true
+                }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });

package/esm2022/chat/templates/timestamp-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 the timestamp of the messages.
+ *
+ * To define a timestamp template, nest an `<ng-template>` tag with the `kendoChatTimestampTemplate` directive inside the `<kendo-chat>` component.
+ * The template context is set to the current timestamp.
+ * For more information, refer to the article on [message templates](slug:message_templates_chat).
+ *
+ * @example
+ * ```html
+ * <kendo-chat>
+ *   <ng-template kendoChatTimestampTemplate let-timestamp>
+ *     <div>Message time: {{ timestamp }}</div>
+ *   </ng-template>
+ * </kendo-chat>
+ * ```
+ */
+export class ChatTimestampTemplateDirective {
+    templateRef;
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChatTimestampTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ChatTimestampTemplateDirective, isStandalone: true, selector: "[kendoChatTimestampTemplate]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChatTimestampTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoChatTimestampTemplate]',
+                    standalone: true
+                }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef, decorators: [{
+                    type: Optional
+                }] }]; } });

package/esm2022/conversational-ui.module.mjs

@@ -21,13 +21,17 @@ import * as i9 from "./ai-prompt/templates/aiprompt-output-template.directive";
 import * as i10 from "./ai-prompt/templates/aiprompt-output-body-template.directive";
 import * as i11 from "./chat/chat.component";
 import * as i12 from "./chat/l10n/custom-messages.component";
-import * as i13 from "./chat/attachment-template.directive";
-import * as i14 from "./chat/message-template.directive";
+import * as i13 from "./chat/templates/attachment-template.directive";
+import * as i14 from "./chat/templates/message-template.directive";
 import * as i15 from "./chat/cards/hero-card.component";
-import * as i16 from "./chat/message-box.directive";
-import * as i17 from "./inline-ai-prompt/inlineaiprompt.component";
-import * as i18 from "./inline-ai-prompt/output-template.directive";
-import * as i19 from "./inline-ai-prompt/localization/custom-messages.component";
+import * as i16 from "./chat/templates/message-box.directive";
+import * as i17 from "./chat/templates/header-template.directive";
+import * as i18 from "./chat/templates/timestamp-template.directive";
+import * as i19 from "./chat/templates/status-template.directive";
+import * as i20 from "./chat/templates/suggestion-template.directive";
+import * as i21 from "./inline-ai-prompt/inlineaiprompt.component";
+import * as i22 from "./inline-ai-prompt/output-template.directive";
+import * as i23 from "./inline-ai-prompt/localization/custom-messages.component";
 // IMPORTANT: NgModule export kept for backwards compatibility
 /**
  * Represents the [`NgModule`](link:site.data.urls.angular['ngmodules']) for the Conversational UI components.
@@ -49,8 +53,8 @@ import * as i19 from "./inline-ai-prompt/localization/custom-messages.component"
  */
 export class ConversationalUIModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ConversationalUIModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: ConversationalUIModule, imports: [i1.AIPromptComponent, i2.PromptViewComponent, i3.OutputViewComponent, i4.CommandViewComponent, i5.CustomViewComponent, i6.AIPromptCustomMessagesComponent, i7.AIPromptToolbarActionsDirective, i8.AIPromptToolbarFocusableDirective, i9.AIPromptOutputTemplateDirective, i10.AIPromptOutputBodyTemplateDirective, i11.ChatComponent, i12.CustomMessagesComponent, i13.AttachmentTemplateDirective, i14.MessageTemplateDirective, i15.HeroCardComponent, i16.ChatMessageBoxTemplateDirective, i17.InlineAIPromptComponent, i18.InlineAIPromptOutputTemplateDirective, i19.InlineAIPromptCustomMessagesComponent], exports: [i1.AIPromptComponent, i2.PromptViewComponent, i3.OutputViewComponent, i4.CommandViewComponent, i5.CustomViewComponent, i6.AIPromptCustomMessagesComponent, i7.AIPromptToolbarActionsDirective, i8.AIPromptToolbarFocusableDirective, i9.AIPromptOutputTemplateDirective, i10.AIPromptOutputBodyTemplateDirective, i11.ChatComponent, i12.CustomMessagesComponent, i13.AttachmentTemplateDirective, i14.MessageTemplateDirective, i15.HeroCardComponent, i16.ChatMessageBoxTemplateDirective, i17.InlineAIPromptComponent, i18.InlineAIPromptOutputTemplateDirective, i19.InlineAIPromptCustomMessagesComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ConversationalUIModule, providers: [IconsService, PopupService, ResizeBatchService, DialogContainerService, DialogService, WindowService, WindowContainerService], imports: [i1.AIPromptComponent, i2.PromptViewComponent, i3.OutputViewComponent, i4.CommandViewComponent, i11.ChatComponent, i15.HeroCardComponent, i17.InlineAIPromptComponent] });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: ConversationalUIModule, imports: [i1.AIPromptComponent, i2.PromptViewComponent, i3.OutputViewComponent, i4.CommandViewComponent, i5.CustomViewComponent, i6.AIPromptCustomMessagesComponent, i7.AIPromptToolbarActionsDirective, i8.AIPromptToolbarFocusableDirective, i9.AIPromptOutputTemplateDirective, i10.AIPromptOutputBodyTemplateDirective, i11.ChatComponent, i12.CustomMessagesComponent, i13.AttachmentTemplateDirective, i14.MessageTemplateDirective, i15.HeroCardComponent, i16.ChatMessageBoxTemplateDirective, i17.ChatHeaderTemplateDirective, i18.ChatTimestampTemplateDirective, i19.ChatStatusTemplateDirective, i20.ChatSuggestionTemplateDirective, i21.InlineAIPromptComponent, i22.InlineAIPromptOutputTemplateDirective, i23.InlineAIPromptCustomMessagesComponent], exports: [i1.AIPromptComponent, i2.PromptViewComponent, i3.OutputViewComponent, i4.CommandViewComponent, i5.CustomViewComponent, i6.AIPromptCustomMessagesComponent, i7.AIPromptToolbarActionsDirective, i8.AIPromptToolbarFocusableDirective, i9.AIPromptOutputTemplateDirective, i10.AIPromptOutputBodyTemplateDirective, i11.ChatComponent, i12.CustomMessagesComponent, i13.AttachmentTemplateDirective, i14.MessageTemplateDirective, i15.HeroCardComponent, i16.ChatMessageBoxTemplateDirective, i17.ChatHeaderTemplateDirective, i18.ChatTimestampTemplateDirective, i19.ChatStatusTemplateDirective, i20.ChatSuggestionTemplateDirective, i21.InlineAIPromptComponent, i22.InlineAIPromptOutputTemplateDirective, i23.InlineAIPromptCustomMessagesComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ConversationalUIModule, providers: [IconsService, PopupService, ResizeBatchService, DialogContainerService, DialogService, WindowService, WindowContainerService], imports: [i1.AIPromptComponent, i2.PromptViewComponent, i3.OutputViewComponent, i4.CommandViewComponent, i11.ChatComponent, i15.HeroCardComponent, i21.InlineAIPromptComponent] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ConversationalUIModule, decorators: [{
             type: NgModule,

package/esm2022/directives.mjs

@@ -11,15 +11,19 @@ import { AIPromptToolbarFocusableDirective } from './ai-prompt/common/toolbar-fo
 import { OutputViewComponent, PromptViewComponent } from "./ai-prompt/views";
 import { ChatComponent } from "./chat/chat.component";
 import { CustomMessagesComponent } from "./chat/l10n/custom-messages.component";
-import { AttachmentTemplateDirective } from "./chat/attachment-template.directive";
-import { MessageTemplateDirective } from "./chat/message-template.directive";
+import { AttachmentTemplateDirective } from "./chat/templates/attachment-template.directive";
+import { MessageTemplateDirective } from "./chat/templates/message-template.directive";
+import { ChatTimestampTemplateDirective } from "./chat/templates/timestamp-template.directive";
 import { HeroCardComponent } from "./chat/cards/hero-card.component";
-import { ChatMessageBoxTemplateDirective } from "./chat/message-box.directive";
+import { ChatMessageBoxTemplateDirective } from "./chat/templates/message-box.directive";
+import { ChatHeaderTemplateDirective } from "./chat/templates/header-template.directive";
 import { AIPromptOutputBodyTemplateDirective } from "./ai-prompt/templates/aiprompt-output-body-template.directive";
 import { AIPromptOutputTemplateDirective } from "./ai-prompt/templates/aiprompt-output-template.directive";
 import { InlineAIPromptComponent } from "./inline-ai-prompt/inlineaiprompt.component";
 import { InlineAIPromptOutputTemplateDirective } from "./inline-ai-prompt/output-template.directive";
 import { InlineAIPromptCustomMessagesComponent } from "./inline-ai-prompt/localization/custom-messages.component";
+import { ChatStatusTemplateDirective } from "./chat/templates/status-template.directive";
+import { ChatSuggestionTemplateDirective } from "./chat/templates/suggestion-template.directive";
 /**
  * Utility array that contains all AIPrompt related components and directives.
  *
@@ -72,7 +76,11 @@ export const KENDO_CHAT = [
     AttachmentTemplateDirective,
     MessageTemplateDirective,
     HeroCardComponent,
-    ChatMessageBoxTemplateDirective
+    ChatMessageBoxTemplateDirective,
+    ChatHeaderTemplateDirective,
+    ChatTimestampTemplateDirective,
+    ChatStatusTemplateDirective,
+    ChatSuggestionTemplateDirective
 ];
 /**
  * Utility array that contains all InlineAIPrompt related components and directives.

package/esm2022/index.mjs

@@ -2,15 +2,21 @@
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-export { ChatComponent, AttachmentTemplateDirective, MessageTemplateDirective } from './chat/chat.directives';
-export { ExecuteActionEvent, SendMessageEvent } from './chat/api';
+export * from './chat/api';
 export { AIPromptModule } from './ai-prompt/aiprompt.module';
 export { ChatModule } from './chat/chat.module';
 export { ConversationalUIModule } from './conversational-ui.module';
 export { InlineAIPromptModule } from './inline-ai-prompt/inlineaiprompt.module';
+export { ChatComponent } from './chat/chat.component';
 export { HeroCardComponent } from './chat/cards/hero-card.component';
 export { CustomMessagesComponent } from './chat/l10n/custom-messages.component';
-export { ChatMessageBoxTemplateDirective } from './chat/message-box.directive';
+export { ChatMessageBoxTemplateDirective } from './chat/templates/message-box.directive';
+export { ChatHeaderTemplateDirective } from './chat/templates/header-template.directive';
+export { ChatTimestampTemplateDirective } from './chat/templates/timestamp-template.directive';
+export { AttachmentTemplateDirective } from './chat/templates/attachment-template.directive';
+export { MessageTemplateDirective } from './chat/templates/message-template.directive';
+export { ChatSuggestionTemplateDirective } from './chat/templates/suggestion-template.directive';
+export { ChatStatusTemplateDirective } from './chat/templates/status-template.directive';
 export { AIPromptComponent } from './ai-prompt/aiprompt.component';
 export { AIPromptCustomMessagesComponent } from './ai-prompt/localization/custom-messages.component';
 export { AIPromptToolbarActionsDirective } from './ai-prompt/templates/toolbar-actions.template';

package/esm2022/package-metadata.mjs

@@ -10,7 +10,7 @@ export const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1755865420,
-    version: '20.0.0-develop.4',
+    publishDate: 1755877913,
+    version: '20.0.0-develop.6',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };