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

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

@@ -4,24 +4,28 @@
 *-------------------------------------------------------------------------------------------*/
 /* eslint-disable @typescript-eslint/no-unused-vars */
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { Component, ElementRef, EventEmitter, HostBinding, Input, Output, QueryList, Renderer2, ViewChildren } from '@angular/core';
-import { NgFor, NgSwitch, NgSwitchCase, NgIf } from '@angular/common';
+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 { IntlService } from '@progress/kendo-angular-intl';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
-import { closest } from './common/utils';
+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 './attachment-template.directive';
-import { MessageTemplateDirective } from './message-template.directive';
+import { AttachmentTemplateDirective } from './templates/attachment-template.directive';
+import { MessageTemplateDirective } from './templates/message-template.directive';
+import { ChatTimestampTemplateDirective } from './templates/timestamp-template.directive';
 import { Subscription } from 'rxjs';
 import { SuggestedActionsComponent } from './suggested-actions.component';
 import { MessageComponent } from './message.component';
 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 * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-intl";
+import * as i2 from "./common/chat.service";
 /**
  * @hidden
  */
@@ -29,6 +33,8 @@ export class MessageListComponent {
     element;
     intl;
     renderer;
+    chatService;
+    cdr;
     set messages(value) {
         const data = value || [];
         this.view = chatView(data);
@@ -39,8 +45,10 @@ export class MessageListComponent {
     }
     attachmentTemplate;
     messageTemplate;
+    timestampTemplate;
+    statusTemplate;
     localization;
-    user;
+    authorId;
     executeAction = new EventEmitter();
     navigate = new EventEmitter();
     resize = new EventEmitter();
@@ -57,15 +65,20 @@ export class MessageListComponent {
         [Keys.ArrowDown]: (e) => this.navigateTo(e, 1),
         [Keys.Tab]: (e) => this.onTabKeyDown(e),
     };
-    constructor(element, intl, renderer) {
+    constructor(element, intl, renderer, chatService, cdr) {
         this.element = element;
         this.intl = intl;
         this.renderer = renderer;
+        this.chatService = chatService;
+        this.cdr = cdr;
     }
     ngOnInit() {
         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.chatService.replyReferenceClick$.subscribe((messageId) => {
+            this.scrollToAndSelectMessage(messageId);
+        }));
     }
     ngAfterViewInit() {
         this.selectedItem = this.items.last;
@@ -76,6 +89,9 @@ export class MessageListComponent {
     onResize() {
         this.resize.emit();
     }
+    onClick(message, event) {
+        this.select(message, event);
+    }
     formatTimeStamp(date) {
         return this.intl.formatDate(date, { date: 'full' });
     }
@@ -90,12 +106,13 @@ export class MessageListComponent {
     onBlur(args) {
         const next = args.relatedTarget || document.activeElement;
         const outside = !closest(next, (node) => node === this.element.nativeElement);
-        if (outside) {
+        const isActionClick = closest(next, (node) => node?.classList?.contains('k-context-menu-popup')) || closest(next, (node) => node?.classList?.contains('k-menu-popup'));
+        if (outside && !isActionClick) {
             this.select(null);
         }
     }
     isOwnMessage(msg) {
-        return isAuthor(this.user, msg);
+        return isAuthor(this.authorId, msg);
     }
     dispatchAction(action, message) {
         const args = new ExecuteActionEvent(action, message);
@@ -104,21 +121,38 @@ export class MessageListComponent {
     trackGroup(_index, item) {
         return item.trackBy;
     }
-    select(item) {
-        const prevItem = this.selectedItem;
-        if (prevItem) {
-            prevItem.selected = false;
+    select(item, event) {
+        if (event) {
+            const target = event.target;
+            if (target.classList.contains('k-suggestion') || target.closest(DOWNLOAD_ALL_SELECTOR) || target.closest(FILE_ACTION_BTN_SELECTOR)) {
+                return;
+            }
         }
-        if (item) {
-            item.selected = true;
-            this.selectedItem = item;
+        if (!this.chatService.toggleMessageState) {
+            const prevItem = this.selectedItem;
+            if (prevItem) {
+                prevItem.selected = false;
+            }
+            if (item) {
+                item.selected = true;
+                this.selectedItem = item;
+            }
+            this.cdr.detectChanges();
         }
+        this.chatService.toggleMessageState = false;
     }
     last(items) {
         if (!items || items.length === 0) {
             return;
         }
-        return items[items.length - 1];
+        const messageGroups = items.filter((item) => item.type === 'message-group');
+        const lastMessageGroup = messageGroups[messageGroups.length - 1].messages;
+        return lastMessageGroup[lastMessageGroup.length - 1];
+    }
+    handleMenuClose(state) {
+        if (!state) {
+            this.select(null);
+        }
     }
     onHomeOrEndKeyDown(key) {
         const items = this.items.toArray();
@@ -157,29 +191,42 @@ export class MessageListComponent {
             e.preventDefault();
         }
     }
-    /**
-     * @hidden
-     */
+    scrollToAndSelectMessage(messageId) {
+        this.chatService.scrollToMessage(messageId);
+        const message = this.chatService.getMessageById(messageId);
+        const chatItem = this.items.find(item => item instanceof MessageComponent &&
+            item.message === message);
+        if (chatItem) {
+            this.select(chatItem);
+        }
+    }
     textFor(key) {
         return this.localization.get(key);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MessageListComponent, deps: [{ token: i0.ElementRef }, { token: i1.IntlService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MessageListComponent, isStandalone: true, selector: "kendo-chat-message-list", inputs: { messages: "messages", attachmentTemplate: "attachmentTemplate", messageTemplate: "messageTemplate", localization: "localization", user: "user" }, 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 ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", 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: "16.2.12", 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: `
         <ng-container *ngFor="let group of view; last as lastGroup; trackBy: trackGroup">
             <ng-container [ngSwitch]="group.type">
                 <div
                     *ngSwitchCase="'date-marker'"
                     class="k-timestamp"
                 >
-                    {{ formatTimeStamp(group.timestamp) }}
+                    <ng-container
+                        *ngIf="timestampTemplate?.templateRef"
+                        [ngTemplateOutlet]="timestampTemplate.templateRef"
+                        [ngTemplateOutletContext]="{ $implicit: group.timestamp }"
+                    >
+                    </ng-container>
+                    <ng-container *ngIf="!timestampTemplate?.templateRef">{{ formatTimeStamp(group.timestamp) }}</ng-container>
                 </div>
                 <div
                     *ngSwitchCase="'message-group'"
                     class="k-message-group"
-                    [class.k-alt]="isOwnMessage(group.messages[0])"
+                    [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'"
                 >
-                    <p *ngIf="group.author.name" class="k-author">{{ group.author.name }}</p>
                     <div
                         *ngIf="group.author.avatarUrl"
                         class="k-avatar k-avatar-md k-avatar-solid k-avatar-solid-primary k-rounded-full"
@@ -187,40 +234,46 @@ export class MessageListComponent {
                         <span class="k-avatar-image">
                             <img
                                 [attr.src]="group.author.avatarUrl"
-                                [alt]="textFor('messageAvatarAlt')"
+                                [alt]="group.author.avatarAltText"
                             />
                         </span>
                     </div>
-                    <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"
+                    <div class="k-message-group-content">
+                        <p *ngIf="group.author.name" class="k-message-author">{{ group.author.name }}</p>
+                        <ng-container
+                            *ngFor="let msg of group.messages; first as firstMessage; last as lastMessage"
                         >
-                            <span class="k-avatar-image">
-                                <img [src]="msg.user?.avatarUrl">
-                            </span>
-                        </div>
-                        <kendo-chat-message #message
-                            [message]="msg"
-                            [tabbable]="lastGroup && lastMessage"
-                            [template]="messageTemplate"
-                            (click)="select(message)"
-                            (focus)="select(message)"
-                            [class.k-only]="group.messages.length === 1"
-                            [class.k-first]="group.messages.length > 1 && firstMessage"
-                            [class.k-last]="group.messages.length > 1 && lastMessage"
-                        >
-                        </kendo-chat-message>
+                            <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"
+                                [statusTemplate]="statusTemplate"
+                                [authorId]="authorId"
+                                (click)="onClick(message, $event)"
+                                (mouseenter)="message.hovered = true"
+                                (mouseleave)="message.hovered = false"
+                                (contextMenuVisibilityChange)="handleMenuClose($event)"
+                                [class.k-first]="group.messages.length > 1 && firstMessage"
+                                [class.k-last]="group.messages.length > 1 && lastMessage"
+                            >
+                            </kendo-chat-message>
 
-                        <kendo-chat-attachment
-                            *ngIf="msg.attachments && msg.attachments.length === 1"
-                            [attachment]="msg.attachments[0]"
-                            [template]="attachmentTemplate"
-                        >
-                        </kendo-chat-attachment>
-                    </ng-container>
+                            <kendo-chat-attachment
+                                *ngIf="msg.attachments && msg.attachments.length === 1"
+                                [attachment]="msg.attachments[0]"
+                                [template]="attachmentTemplate"
+                            >
+                            </kendo-chat-attachment>
+                        </ng-container>
+                    </div>
                 </div>
 
                 <kendo-chat-message-attachments #attachments
@@ -239,16 +292,16 @@ export class MessageListComponent {
                     *ngSwitchCase="'action-group'"
                     [actions]="group.actions"
                     [tabbable]="lastGroup"
-                    (dispatch)="dispatchAction($event, last(group.messages))"
-                    (click)="select(actions)"
-                    (focus)="select(actions)"
+                    (dispatchAction)="dispatchAction($event, last(view))"
+                    (click)="select(actions, $event)"
+                    (focus)="select(actions, $event)"
                 >
                 </kendo-chat-suggested-actions>
             </ng-container>
         </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: "component", type: MessageComponent, selector: "kendo-chat-message", inputs: ["message", "tabbable", "template"] }, { 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", "tabbable"], outputs: ["dispatch"] }, { 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", "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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MessageListComponent, decorators: [{
             type: Component,
@@ -261,15 +314,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     *ngSwitchCase="'date-marker'"
                     class="k-timestamp"
                 >
-                    {{ formatTimeStamp(group.timestamp) }}
+                    <ng-container
+                        *ngIf="timestampTemplate?.templateRef"
+                        [ngTemplateOutlet]="timestampTemplate.templateRef"
+                        [ngTemplateOutletContext]="{ $implicit: group.timestamp }"
+                    >
+                    </ng-container>
+                    <ng-container *ngIf="!timestampTemplate?.templateRef">{{ formatTimeStamp(group.timestamp) }}</ng-container>
                 </div>
                 <div
                     *ngSwitchCase="'message-group'"
                     class="k-message-group"
-                    [class.k-alt]="isOwnMessage(group.messages[0])"
+                    [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'"
                 >
-                    <p *ngIf="group.author.name" class="k-author">{{ group.author.name }}</p>
                     <div
                         *ngIf="group.author.avatarUrl"
                         class="k-avatar k-avatar-md k-avatar-solid k-avatar-solid-primary k-rounded-full"
@@ -277,40 +337,46 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         <span class="k-avatar-image">
                             <img
                                 [attr.src]="group.author.avatarUrl"
-                                [alt]="textFor('messageAvatarAlt')"
+                                [alt]="group.author.avatarAltText"
                             />
                         </span>
                     </div>
-                    <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"
-                            (click)="select(message)"
-                            (focus)="select(message)"
-                            [class.k-only]="group.messages.length === 1"
-                            [class.k-first]="group.messages.length > 1 && firstMessage"
-                            [class.k-last]="group.messages.length > 1 && lastMessage"
+                    <div class="k-message-group-content">
+                        <p *ngIf="group.author.name" class="k-message-author">{{ group.author.name }}</p>
+                        <ng-container
+                            *ngFor="let msg of group.messages; first as firstMessage; last as lastMessage"
                         >
-                        </kendo-chat-message>
+                            <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"
+                                [statusTemplate]="statusTemplate"
+                                [authorId]="authorId"
+                                (click)="onClick(message, $event)"
+                                (mouseenter)="message.hovered = true"
+                                (mouseleave)="message.hovered = false"
+                                (contextMenuVisibilityChange)="handleMenuClose($event)"
+                                [class.k-first]="group.messages.length > 1 && firstMessage"
+                                [class.k-last]="group.messages.length > 1 && lastMessage"
+                            >
+                            </kendo-chat-message>
 
-                        <kendo-chat-attachment
-                            *ngIf="msg.attachments && msg.attachments.length === 1"
-                            [attachment]="msg.attachments[0]"
-                            [template]="attachmentTemplate"
-                        >
-                        </kendo-chat-attachment>
-                    </ng-container>
+                            <kendo-chat-attachment
+                                *ngIf="msg.attachments && msg.attachments.length === 1"
+                                [attachment]="msg.attachments[0]"
+                                [template]="attachmentTemplate"
+                            >
+                            </kendo-chat-attachment>
+                        </ng-container>
+                    </div>
                 </div>
 
                 <kendo-chat-message-attachments #attachments
@@ -329,9 +395,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     *ngSwitchCase="'action-group'"
                     [actions]="group.actions"
                     [tabbable]="lastGroup"
-                    (dispatch)="dispatchAction($event, last(group.messages))"
-                    (click)="select(actions)"
-                    (focus)="select(actions)"
+                    (dispatchAction)="dispatchAction($event, last(view))"
+                    (click)="select(actions, $event)"
+                    (focus)="select(actions, $event)"
                 >
                 </kendo-chat-suggested-actions>
             </ng-container>
@@ -340,17 +406,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         </kendo-resize-sensor>
     `,
                     standalone: true,
-                    imports: [NgFor, NgSwitch, NgSwitchCase, NgIf, MessageComponent, AttachmentComponent, MessageAttachmentsComponent, SuggestedActionsComponent, ResizeSensorComponent]
+                    imports: [NgFor, NgSwitch, NgSwitchCase, NgIf, NgTemplateOutlet, MessageComponent, AttachmentComponent, MessageAttachmentsComponent, SuggestedActionsComponent, ResizeSensorComponent]
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.IntlService }, { type: i0.Renderer2 }]; }, propDecorators: { messages: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.IntlService }, { type: i0.Renderer2 }, { type: i2.ChatService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { messages: [{
                 type: Input
             }], attachmentTemplate: [{
                 type: Input
             }], messageTemplate: [{
                 type: Input
+            }], timestampTemplate: [{
+                type: Input
+            }], statusTemplate: [{
+                type: Input
             }], localization: [{
                 type: Input
-            }], user: [{
+            }], authorId: [{
                 type: Input
             }], executeAction: [{
                 type: Output

package/esm2022/chat/message-reference-content.component.mjs

@@ -0,0 +1,75 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2025 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+/* eslint-disable @typescript-eslint/no-empty-function */
+import { Component, forwardRef, Input, HostBinding } from '@angular/core';
+import { ChatItem } from './chat-item';
+import { NgIf } from '@angular/common';
+import { ChatFileComponent } from './chat-file.component';
+import { ChatService } from './common/chat.service';
+import { LocalizationService } from '@progress/kendo-angular-l10n';
+import { isAuthor } from './chat-view';
+import * as i0 from "@angular/core";
+import * as i1 from "@progress/kendo-angular-l10n";
+import * as i2 from "./common/chat.service";
+/**
+ * @hidden
+ */
+export class MessageReferenceComponent extends ChatItem {
+    localization;
+    chatService;
+    hostClass = true;
+    message;
+    constructor(localization, chatService) {
+        super();
+        this.localization = localization;
+        this.chatService = chatService;
+    }
+    isOwnMessage(msg) {
+        return isAuthor(this.chatService.authorId, msg);
+    }
+    textFor(key) {
+        return this.localization.get(key);
+    }
+    focus() { }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MessageReferenceComponent, deps: [{ token: i1.LocalizationService }, { token: i2.ChatService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MessageReferenceComponent, isStandalone: true, selector: "chat-message-reference-content", inputs: { message: "message" }, host: { properties: { "class.k-message-reference-content": "this.hostClass" } }, providers: [{
+                provide: ChatItem,
+                useExisting: forwardRef(() => MessageReferenceComponent)
+            }], usesInheritance: true, ngImport: i0, template: `
+        <ng-container *ngIf="message.text && !message.isDeleted">{{message.text}}</ng-container>
+        <ng-container *ngIf="!message.text && !message.isDeleted && message.files && message.files.length > 0">
+            <li class="k-chat-file" [chatFile]="message.files[0]">
+            </li>
+        </ng-container>
+        <ng-container *ngIf="message.isDeleted && isOwnMessage(message)">{{ textFor('deletedMessageSenderText') }}</ng-container>
+        <ng-container *ngIf="message.isDeleted && !isOwnMessage(message)">{{ textFor('deletedMessageReceiverText') }}</ng-container>
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ChatFileComponent, selector: "li[chatFile]", inputs: ["chatFile", "removable", "fileActions"], outputs: ["remove", "actionClick", "actionsToggle", "actionButtonClick"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MessageReferenceComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'chat-message-reference-content',
+                    providers: [{
+                            provide: ChatItem,
+                            useExisting: forwardRef(() => MessageReferenceComponent)
+                        }],
+                    template: `
+        <ng-container *ngIf="message.text && !message.isDeleted">{{message.text}}</ng-container>
+        <ng-container *ngIf="!message.text && !message.isDeleted && message.files && message.files.length > 0">
+            <li class="k-chat-file" [chatFile]="message.files[0]">
+            </li>
+        </ng-container>
+        <ng-container *ngIf="message.isDeleted && isOwnMessage(message)">{{ textFor('deletedMessageSenderText') }}</ng-container>
+        <ng-container *ngIf="message.isDeleted && !isOwnMessage(message)">{{ textFor('deletedMessageReceiverText') }}</ng-container>
+    `,
+                    standalone: true,
+                    imports: [NgIf, ChatFileComponent]
+                }]
+        }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i2.ChatService }]; }, propDecorators: { hostClass: [{
+                type: HostBinding,
+                args: ['class.k-message-reference-content']
+            }], message: [{
+                type: Input
+            }] } });