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

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

@@ -7,14 +7,14 @@
 import { ChangeDetectorRef, Component, ElementRef, EventEmitter, HostBinding, Input, Output, QueryList, Renderer2, ViewChildren } from '@angular/core';
 import { NgFor, NgSwitch, NgSwitchCase, NgIf, NgTemplateOutlet } from '@angular/common';
 import { ExecuteActionEvent } from './api';
-import { Keys, normalizeNumpadKeys, ResizeSensorComponent } from '@progress/kendo-angular-common';
+import { isPresent, Keys, normalizeNumpadKeys, ResizeSensorComponent } from '@progress/kendo-angular-common';
 import { IntlService } from '@progress/kendo-angular-intl';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
 import { closest, DOWNLOAD_ALL_SELECTOR, FILE_ACTION_BTN_SELECTOR } from './common/utils';
 import { ChatItem } from './chat-item';
 import { chatView, isAuthor } from './chat-view';
 import { AttachmentTemplateDirective } from './templates/attachment-template.directive';
-import { MessageTemplateDirective } from './templates/message-template.directive';
+import { MessageContentTemplateDirective } from './templates/message-content-template.directive';
 import { ChatTimestampTemplateDirective } from './templates/timestamp-template.directive';
 import { Subscription } from 'rxjs';
 import { SuggestedActionsComponent } from './suggested-actions.component';
@@ -23,6 +23,12 @@ import { MessageAttachmentsComponent } from './message-attachments.component';
 import { AttachmentComponent } from './attachment.component';
 import { ChatService } from './common/chat.service';
 import { ChatStatusTemplateDirective } from './templates/status-template.directive';
+import { ChatUserStatusTemplateDirective } from './templates/user-status-template.directive';
+import { MessageTemplateDirective } from './templates/message-template.directive';
+import { AuthorMessageContentTemplateDirective } from './templates/author-message-content-template.directive';
+import { ReceiverMessageContentTemplateDirective } from './templates/receiver-message-content-template.directive';
+import { AuthorMessageTemplateDirective } from './templates/author-message-template.directive';
+import { ReceiverMessageTemplateDirective } from './templates/receiver-message-template.directive';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-intl";
 import * as i2 from "./common/chat.service";
@@ -44,9 +50,15 @@ export class MessageListComponent {
         return this._messages;
     }
     attachmentTemplate;
+    authorMessageContentTemplate;
+    receiverMessageContentTemplate;
+    messageContentTemplate;
+    authorMessageTemplate;
+    receiverMessageTemplate;
     messageTemplate;
     timestampTemplate;
     statusTemplate;
+    userStatusTemplate;
     localization;
     authorId;
     executeAction = new EventEmitter();
@@ -64,6 +76,7 @@ export class MessageListComponent {
         [Keys.ArrowUp]: (e) => this.navigateTo(e, -1),
         [Keys.ArrowDown]: (e) => this.navigateTo(e, 1),
         [Keys.Tab]: (e) => this.onTabKeyDown(e),
+        [Keys.F10]: (e) => e.shiftKey && this.openContextMenu(e),
     };
     constructor(element, intl, renderer, chatService, cdr) {
         this.element = element;
@@ -76,9 +89,25 @@ export class MessageListComponent {
         const elRef = this.element.nativeElement;
         this.subs.add(this.renderer.listen(elRef, 'keydown', event => this.onKeydown(event)));
         this.subs.add(this.renderer.listen(elRef, 'focusout', event => this.onBlur(event)));
+        this.subs.add(this.renderer.listen(elRef, 'click', event => {
+            const messageComponent = this.findMessageComponentFromEvent(event);
+            if (messageComponent) {
+                this.select(messageComponent, event);
+            }
+        }));
+        this.subs.add(this.renderer.listen(elRef, 'contextmenu', event => {
+            event.preventDefault();
+            const messageComponent = this.findMessageComponentFromEvent(event);
+            if (messageComponent) {
+                this.onContextMenuClick(messageComponent.message, event, messageComponent);
+            }
+        }));
         this.subs.add(this.chatService.replyReferenceClick$.subscribe((messageId) => {
             this.scrollToAndSelectMessage(messageId);
         }));
+        this.subs.add(this.chatService.contextMenuVisibilityChange$.subscribe((isVisible) => {
+            this.handleMenuClose(isVisible);
+        }));
     }
     ngAfterViewInit() {
         this.selectedItem = this.items.last;
@@ -92,9 +121,45 @@ export class MessageListComponent {
     onClick(message, event) {
         this.select(message, event);
     }
+    showGroupAuthor(group) {
+        const messageSettings = this.isOwnMessage(group.messages[0]) ? this.chatService.authorMessageSettings : this.chatService.receiverMessageSettings;
+        if (isPresent(messageSettings?.showUsername)) {
+            return messageSettings.showUsername && group.author.name;
+        }
+        return this.chatService.showUsername && group.author.name;
+    }
+    showGroupAvatar(group) {
+        const messageSettings = this.isOwnMessage(group.messages[0]) ? this.chatService.authorMessageSettings : this.chatService.receiverMessageSettings;
+        if (isPresent(messageSettings?.showAvatar)) {
+            return messageSettings.showAvatar && group.author.avatarUrl;
+        }
+        return this.chatService.showAvatar && group.author.avatarUrl;
+    }
+    onContextMenuClick(message, event, messageElement) {
+        this.chatService.calculateContextMenuActions(this.isOwnMessage(message));
+        if (this.chatService.calculatedContextMenuActions.length > 0) {
+            this.chatService.messagesContextMenu.show({
+                left: event.pageX,
+                top: event.pageY,
+            });
+            this.chatService.activeMessageElement = messageElement;
+            this.chatService.activeMessage = message;
+            this.chatService.active = true;
+            this.chatService.selectOnMenuClose = this.chatService.activeMessageElement?.selected;
+            this.chatService.emit('contextMenuVisibilityChange', true);
+        }
+    }
     formatTimeStamp(date) {
         return this.intl.formatDate(date, { date: 'full' });
     }
+    calculateMessageWidthMode(message) {
+        const isOwn = this.isOwnMessage(message);
+        const messageSettings = isOwn ? this.chatService.authorMessageSettings : this.chatService.receiverMessageSettings;
+        if (messageSettings?.messageWidthMode) {
+            return messageSettings.messageWidthMode === 'full';
+        }
+        return this.chatService.messageWidthMode === 'full';
+    }
     onKeydown(e) {
         // On some keyboards Numpad keys are used for Home/End/PageUp/PageDown.
         const code = normalizeNumpadKeys(e);
@@ -154,6 +219,9 @@ export class MessageListComponent {
             this.select(null);
         }
     }
+    textFor(key) {
+        return this.localization.get(key);
+    }
     onHomeOrEndKeyDown(key) {
         const items = this.items.toArray();
         if (key === 'home') {
@@ -200,11 +268,49 @@ export class MessageListComponent {
             this.select(chatItem);
         }
     }
-    textFor(key) {
-        return this.localization.get(key);
+    openContextMenu(event) {
+        event.preventDefault();
+        const messageComponent = this.findMessageComponentFromActiveElement();
+        if (messageComponent) {
+            const messageContentElement = messageComponent.element.nativeElement.querySelector('.k-chat-bubble');
+            if (messageContentElement) {
+                const rect = messageContentElement?.getBoundingClientRect();
+                this.onContextMenuClick(messageComponent.message, {
+                    pageX: rect.left + (rect.width / 2) + window.scrollX,
+                    pageY: rect.top + (rect.height / 2) + window.scrollY
+                }, messageComponent);
+            }
+            else {
+                const messageElement = messageComponent.element.nativeElement;
+                const rect = messageElement?.getBoundingClientRect();
+                this.onContextMenuClick(messageComponent.message, {
+                    pageX: rect.left + (rect.width / 2) + window.scrollX,
+                    pageY: rect.top + (rect.height / 2) + window.scrollY
+                }, messageComponent);
+            }
+        }
+    }
+    findMessageComponentFromActiveElement() {
+        const activeElement = document.activeElement;
+        const messageComponents = this.items.filter(item => item instanceof MessageComponent);
+        return messageComponents.find(component => {
+            const componentElement = component.element?.nativeElement;
+            return componentElement && (componentElement === activeElement || componentElement.contains(activeElement));
+        });
+    }
+    findMessageComponentFromEvent(event) {
+        const target = event.target;
+        const clickedElement = target?.closest('.k-message');
+        if (!clickedElement)
+            return undefined;
+        const messageComponents = this.items.filter(item => item instanceof MessageComponent);
+        return messageComponents.find(component => {
+            const componentElement = component.element?.nativeElement;
+            return componentElement && (componentElement === clickedElement || componentElement.contains(clickedElement));
+        });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MessageListComponent, deps: [{ token: i0.ElementRef }, { token: i1.IntlService }, { token: i0.Renderer2 }, { token: i2.ChatService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: MessageListComponent, isStandalone: true, selector: "kendo-chat-message-list", inputs: { messages: "messages", attachmentTemplate: "attachmentTemplate", messageTemplate: "messageTemplate", timestampTemplate: "timestampTemplate", statusTemplate: "statusTemplate", localization: "localization", authorId: "authorId" }, outputs: { executeAction: "executeAction", navigate: "navigate", resize: "resize" }, host: { properties: { "class.k-message-list-content": "this.cssClass" } }, viewQueries: [{ propertyName: "items", predicate: ChatItem, descendants: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: MessageListComponent, isStandalone: true, selector: "kendo-chat-message-list", inputs: { messages: "messages", attachmentTemplate: "attachmentTemplate", authorMessageContentTemplate: "authorMessageContentTemplate", receiverMessageContentTemplate: "receiverMessageContentTemplate", messageContentTemplate: "messageContentTemplate", authorMessageTemplate: "authorMessageTemplate", receiverMessageTemplate: "receiverMessageTemplate", messageTemplate: "messageTemplate", timestampTemplate: "timestampTemplate", statusTemplate: "statusTemplate", userStatusTemplate: "userStatusTemplate", localization: "localization", authorId: "authorId" }, outputs: { executeAction: "executeAction", navigate: "navigate", resize: "resize" }, host: { properties: { "class.k-message-list-content": "this.cssClass" } }, viewQueries: [{ propertyName: "items", predicate: ChatItem, descendants: true }], ngImport: i0, template: `
         <ng-container *ngFor="let group of view; last as lastGroup; trackBy: trackGroup">
             <ng-container [ngSwitch]="group.type">
                 <div
@@ -224,11 +330,11 @@ export class MessageListComponent {
                     class="k-message-group"
                     [class.k-message-group-sender]="isOwnMessage(group.messages[0])"
                     [class.k-message-group-receiver]="!isOwnMessage(group.messages[0])"
-                    [class.k-no-avatar]="!group.author.avatarUrl"
-                    [class.k-message-group-full-width]="chatService.messageWidthMode === 'full'"
+                    [class.k-no-avatar]="!showGroupAvatar(group)"
+                    [class.k-message-group-full-width]="calculateMessageWidthMode(group.messages[0])"
                 >
                     <div
-                        *ngIf="group.author.avatarUrl"
+                        *ngIf="!userStatusTemplate?.templateRef && showGroupAvatar(group)"
                         class="k-avatar k-avatar-md k-avatar-solid k-avatar-solid-primary k-rounded-full"
                     >
                         <span class="k-avatar-image">
@@ -238,29 +344,41 @@ export class MessageListComponent {
                             />
                         </span>
                     </div>
+                    <div class="k-chat-user-status-wrapper" *ngIf="userStatusTemplate?.templateRef && showGroupAvatar(group)">
+                        <div
+                            class="k-avatar k-avatar-md k-avatar-solid k-avatar-solid-primary k-rounded-full"
+                        >
+                            <span class="k-avatar-image">
+                                <img
+                                    [attr.src]="group.author.avatarUrl"
+                                    [alt]="group.author.avatarAltText"
+                                />
+                            </span>
+                        </div>
+                        <div class="k-chat-user-status" *ngIf="userStatusTemplate?.templateRef">
+                            <ng-template
+                                [ngTemplateOutlet]="userStatusTemplate.templateRef"
+                                [ngTemplateOutletContext]="{ $implicit: group.messages.at(-1) }"
+                            >
+                            </ng-template>
+                        </div>
+                    </div>
                     <div class="k-message-group-content">
-                        <p *ngIf="group.author.name" class="k-message-author">{{ group.author.name }}</p>
+                        <p *ngIf="showGroupAuthor(group)" class="k-message-author">{{ group.author.name }}</p>
                         <ng-container
                             *ngFor="let msg of group.messages; first as firstMessage; last as lastMessage"
                         >
-                            <div
-                                *ngIf="msg.user?.avatarUrl"
-                                class="k-avatar k-avatar-md k-avatar-solid k-avatar-solid-primary k-rounded-full"
-                            >
-                                <span class="k-avatar-image">
-                                    <img [src]="msg.user?.avatarUrl">
-                                </span>
-                            </div>
                             <kendo-chat-message #message
                                 [message]="msg"
                                 [tabbable]="lastGroup && lastMessage"
-                                [template]="messageTemplate"
+                                [authorMessageContentTemplate]="authorMessageContentTemplate"
+                                [receiverMessageContentTemplate]="receiverMessageContentTemplate"
+                                [messageContentTemplate]="messageContentTemplate"
+                                [authorMessageTemplate]="authorMessageTemplate"
+                                [receiverMessageTemplate]="receiverMessageTemplate"
+                                [messageTemplate]="messageTemplate"
                                 [statusTemplate]="statusTemplate"
                                 [authorId]="authorId"
-                                (click)="onClick(message, $event)"
-                                (contextMenuVisibilityChange)="handleMenuClose($event)"
-                                [class.k-first]="group.messages.length > 1 && firstMessage"
-                                [class.k-last]="group.messages.length > 1 && lastMessage"
                             >
                             </kendo-chat-message>
 
@@ -289,6 +407,7 @@ export class MessageListComponent {
                 <kendo-chat-suggested-actions #actions
                     *ngSwitchCase="'action-group'"
                     [actions]="group.actions"
+                    type="action"
                     [tabbable]="lastGroup"
                     (dispatchAction)="dispatchAction($event, last(view))"
                     (click)="select(actions, $event)"
@@ -299,7 +418,7 @@ export class MessageListComponent {
         </ng-container>
         <kendo-resize-sensor (resize)="onResize()">
         </kendo-resize-sensor>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MessageComponent, selector: "kendo-chat-message", inputs: ["message", "tabbable", "template", "statusTemplate", "showMessageTime", "authorId"], outputs: ["contextMenuVisibilityChange"] }, { kind: "component", type: AttachmentComponent, selector: "kendo-chat-attachment", inputs: ["attachment", "template"] }, { kind: "component", type: MessageAttachmentsComponent, selector: "kendo-chat-message-attachments", inputs: ["attachments", "layout", "tabbable", "template", "localization"] }, { kind: "component", type: SuggestedActionsComponent, selector: "kendo-chat-suggested-actions", inputs: ["actions", "suggestions", "tabbable", "suggestionTemplate"], outputs: ["dispatchAction", "dispatchSuggestion"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }] });
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MessageComponent, selector: "kendo-chat-message", inputs: ["message", "tabbable", "authorMessageContentTemplate", "receiverMessageContentTemplate", "messageContentTemplate", "authorMessageTemplate", "receiverMessageTemplate", "messageTemplate", "statusTemplate", "showMessageTime", "authorId"] }, { kind: "component", type: AttachmentComponent, selector: "kendo-chat-attachment", inputs: ["attachment", "template"] }, { kind: "component", type: MessageAttachmentsComponent, selector: "kendo-chat-message-attachments", inputs: ["attachments", "layout", "tabbable", "template", "localization"] }, { kind: "component", type: SuggestedActionsComponent, selector: "kendo-chat-suggested-actions", inputs: ["actions", "suggestions", "tabbable", "type", "suggestionTemplate"], outputs: ["dispatchAction", "dispatchSuggestion"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MessageListComponent, decorators: [{
             type: Component,
@@ -325,11 +444,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     class="k-message-group"
                     [class.k-message-group-sender]="isOwnMessage(group.messages[0])"
                     [class.k-message-group-receiver]="!isOwnMessage(group.messages[0])"
-                    [class.k-no-avatar]="!group.author.avatarUrl"
-                    [class.k-message-group-full-width]="chatService.messageWidthMode === 'full'"
+                    [class.k-no-avatar]="!showGroupAvatar(group)"
+                    [class.k-message-group-full-width]="calculateMessageWidthMode(group.messages[0])"
                 >
                     <div
-                        *ngIf="group.author.avatarUrl"
+                        *ngIf="!userStatusTemplate?.templateRef && showGroupAvatar(group)"
                         class="k-avatar k-avatar-md k-avatar-solid k-avatar-solid-primary k-rounded-full"
                     >
                         <span class="k-avatar-image">
@@ -339,29 +458,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                             />
                         </span>
                     </div>
+                    <div class="k-chat-user-status-wrapper" *ngIf="userStatusTemplate?.templateRef && showGroupAvatar(group)">
+                        <div
+                            class="k-avatar k-avatar-md k-avatar-solid k-avatar-solid-primary k-rounded-full"
+                        >
+                            <span class="k-avatar-image">
+                                <img
+                                    [attr.src]="group.author.avatarUrl"
+                                    [alt]="group.author.avatarAltText"
+                                />
+                            </span>
+                        </div>
+                        <div class="k-chat-user-status" *ngIf="userStatusTemplate?.templateRef">
+                            <ng-template
+                                [ngTemplateOutlet]="userStatusTemplate.templateRef"
+                                [ngTemplateOutletContext]="{ $implicit: group.messages.at(-1) }"
+                            >
+                            </ng-template>
+                        </div>
+                    </div>
                     <div class="k-message-group-content">
-                        <p *ngIf="group.author.name" class="k-message-author">{{ group.author.name }}</p>
+                        <p *ngIf="showGroupAuthor(group)" class="k-message-author">{{ group.author.name }}</p>
                         <ng-container
                             *ngFor="let msg of group.messages; first as firstMessage; last as lastMessage"
                         >
-                            <div
-                                *ngIf="msg.user?.avatarUrl"
-                                class="k-avatar k-avatar-md k-avatar-solid k-avatar-solid-primary k-rounded-full"
-                            >
-                                <span class="k-avatar-image">
-                                    <img [src]="msg.user?.avatarUrl">
-                                </span>
-                            </div>
                             <kendo-chat-message #message
                                 [message]="msg"
                                 [tabbable]="lastGroup && lastMessage"
-                                [template]="messageTemplate"
+                                [authorMessageContentTemplate]="authorMessageContentTemplate"
+                                [receiverMessageContentTemplate]="receiverMessageContentTemplate"
+                                [messageContentTemplate]="messageContentTemplate"
+                                [authorMessageTemplate]="authorMessageTemplate"
+                                [receiverMessageTemplate]="receiverMessageTemplate"
+                                [messageTemplate]="messageTemplate"
                                 [statusTemplate]="statusTemplate"
                                 [authorId]="authorId"
-                                (click)="onClick(message, $event)"
-                                (contextMenuVisibilityChange)="handleMenuClose($event)"
-                                [class.k-first]="group.messages.length > 1 && firstMessage"
-                                [class.k-last]="group.messages.length > 1 && lastMessage"
                             >
                             </kendo-chat-message>
 
@@ -390,6 +521,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 <kendo-chat-suggested-actions #actions
                     *ngSwitchCase="'action-group'"
                     [actions]="group.actions"
+                    type="action"
                     [tabbable]="lastGroup"
                     (dispatchAction)="dispatchAction($event, last(view))"
                     (click)="select(actions, $event)"
@@ -408,12 +540,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 type: Input
             }], attachmentTemplate: [{
                 type: Input
+            }], authorMessageContentTemplate: [{
+                type: Input
+            }], receiverMessageContentTemplate: [{
+                type: Input
+            }], messageContentTemplate: [{
+                type: Input
+            }], authorMessageTemplate: [{
+                type: Input
+            }], receiverMessageTemplate: [{
+                type: Input
             }], messageTemplate: [{
                 type: Input
             }], timestampTemplate: [{
                 type: Input
             }], statusTemplate: [{
                 type: Input
+            }], userStatusTemplate: [{
+                type: Input
             }], localization: [{
                 type: Input
             }], authorId: [{