@trixwell/ngx-parl 4.3.0 → 5.0.1

package/fesm2022/trixwell-ngx-parl.mjs

@@ -1,17 +1,19 @@
 import * as i0 from '@angular/core';
-import { input, inject, model, computed, effect, ViewChild, Component, Injectable, Pipe, signal, Optional, isDevMode } from '@angular/core';
+import { input, inject, model, computed, effect, ViewChild, Component, Injectable, Pipe, signal, ViewEncapsulation, Optional, isDevMode } from '@angular/core';
 import { NgClass, NgOptimizedImage, DatePipe } from '@angular/common';
+import { toSignal } from '@angular/core/rxjs-interop';
+import { filter, map, startWith, of } from 'rxjs';
 import { FormsModule } from '@angular/forms';
 import { MatMenu, MatMenuItem, MatMenuTrigger } from '@angular/material/menu';
 import * as i2 from '@ngneat/transloco';
-import { TranslocoPipe, TranslocoModule, provideTransloco } from '@ngneat/transloco';
+import { TranslocoPipe, TranslocoService, getValue, TranslocoModule, provideTransloco } from '@ngneat/transloco';
 import { FocusTrapFactory } from '@angular/cdk/a11y';
 import * as i1 from '@angular/common/http';
 import { InfiniteScrollDirective } from 'ngx-infinite-scroll';
+import { IonAlert } from '@ionic/angular/standalone';
 import * as i3 from '@angular/material/dialog';
 import { MatDialogContent, MatDialogTitle } from '@angular/material/dialog';
 import { MatProgressSpinner } from '@angular/material/progress-spinner';
-import { of } from 'rxjs';
 
 class ChatMessage {
     id;
@@ -25,6 +27,7 @@ class ChatMessage {
     avatar;
     file_path;
     file_list;
+    actions;
     checked;
     edit = false;
     pending = false;
@@ -42,6 +45,7 @@ class ChatMessage {
         this.pending = data.pending ?? false;
         this.file_path = data.file_path ?? null;
         this.file_list = data.file_list ?? null;
+        this.actions = Array.isArray(data.actions) ? data.actions : [];
     }
     get dateSimple() {
         const d = new Date(this.cr_time.replace(' ', 'T'));
@@ -270,7 +274,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
         }], ctorParameters: () => [{ type: i1.HttpClient }] });
 
 class ChatMessageComponent {
-    utils;
+    utils = inject(UtilsService);
     currentMessage = input.required(...(ngDevMode ? [{ debugName: "currentMessage" }] : []));
     edit = model(false, ...(ngDevMode ? [{ debugName: "edit" }] : []));
     previewList = model([], ...(ngDevMode ? [{ debugName: "previewList" }] : []));
@@ -279,9 +283,10 @@ class ChatMessageComponent {
     closePreviewHandler = () => this.closePreview();
     requestEdit = model(null, ...(ngDevMode ? [{ debugName: "requestEdit" }] : []));
     requestDelete = model(null, ...(ngDevMode ? [{ debugName: "requestDelete" }] : []));
-    constructor(utils) {
-        this.utils = utils;
-    }
+    mobileMode = input(false, ...(ngDevMode ? [{ debugName: "mobileMode" }] : []));
+    quickActions = input([], ...(ngDevMode ? [{ debugName: "quickActions" }] : []));
+    quickActionClick = model(null, ...(ngDevMode ? [{ debugName: "quickActionClick" }] : []));
+    messageType = MessageType;
     attachments = computed(() => {
         const message = this.currentMessage();
         const filePath = message.file_path;
@@ -301,7 +306,8 @@ class ChatMessageComponent {
                         .filter(Boolean);
                 }
             }
-            catch { }
+            catch {
+            }
         }
         if (rawFilePath.startsWith('data:')) {
             return [rawFilePath];
@@ -321,7 +327,31 @@ class ChatMessageComponent {
             : 'assets/ngx-parl/icons/avatar_manager.svg';
         return message.avatar || fallback;
     }, ...(ngDevMode ? [{ debugName: "avatarSrc" }] : []));
+    isOutgoingMessage = computed(() => this.currentMessage().type === this.messageType.Outgoing, ...(ngDevMode ? [{ debugName: "isOutgoingMessage" }] : []));
+    hasQuickActionButtons = computed(() => this.isOutgoingMessage() && this.quickActions().length > 0, ...(ngDevMode ? [{ debugName: "hasQuickActionButtons" }] : []));
+    showMessageBubble = computed(() => {
+        const msg = this.currentMessage();
+        if (msg.type !== this.messageType.Outgoing) {
+            return true;
+        }
+        if (!this.hasQuickActionButtons()) {
+            return true;
+        }
+        return !!(msg.content && String(msg.content).trim().length > 0);
+    }, ...(ngDevMode ? [{ debugName: "showMessageBubble" }] : []));
+    showMessageBody = computed(() => this.showMessageBubble() || this.attachments().length > 0, ...(ngDevMode ? [{ debugName: "showMessageBody" }] : []));
+    showAvatar = computed(() => {
+        const isMobile = this.mobileMode();
+        return !(isMobile && this.isOutgoingMessage());
+    }, ...(ngDevMode ? [{ debugName: "showAvatar" }] : []));
+    canOpenContextMenu = computed(() => {
+        const message = this.currentMessage();
+        return message.type === this.messageType.Outgoing && message.pending !== true;
+    }, ...(ngDevMode ? [{ debugName: "canOpenContextMenu" }] : []));
     openContextMenu(event, trigger, triggerElement) {
+        if (!this.canOpenContextMenu()) {
+            return this;
+        }
         event.preventDefault();
         event.stopPropagation();
         if (event instanceof MouseEvent) {
@@ -360,12 +390,20 @@ class ChatMessageComponent {
         queueMicrotask(() => this.requestDelete.set(null));
         return this;
     }
-    canDelete(message) {
-        return message.type === this.messageType.Outgoing;
+    onQuickAction(action) {
+        const title = (action.title ?? '').trim();
+        const value = (action.value ?? '').trim();
+        const content = value || title;
+        if (!content) {
+            return this;
+        }
+        const messageId = this.currentMessage().id;
+        this.quickActionClick.set({ actionId: action.id, messageId, value: content });
+        queueMicrotask(() => this.quickActionClick.set(null));
+        return this;
     }
-    messageType = MessageType;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ChatMessageComponent, deps: [{ token: UtilsService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: ChatMessageComponent, isStandalone: true, selector: "lib-chat-message", inputs: { currentMessage: { classPropertyName: "currentMessage", publicName: "currentMessage", isSignal: true, isRequired: true, transformFunction: null }, edit: { classPropertyName: "edit", publicName: "edit", isSignal: true, isRequired: false, transformFunction: null }, previewList: { classPropertyName: "previewList", publicName: "previewList", isSignal: true, isRequired: false, transformFunction: null }, previewIndex: { classPropertyName: "previewIndex", publicName: "previewIndex", isSignal: true, isRequired: false, transformFunction: null }, previewOpener: { classPropertyName: "previewOpener", publicName: "previewOpener", isSignal: true, isRequired: false, transformFunction: null }, requestEdit: { classPropertyName: "requestEdit", publicName: "requestEdit", isSignal: true, isRequired: false, transformFunction: null }, requestDelete: { classPropertyName: "requestDelete", publicName: "requestDelete", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { edit: "editChange", previewList: "previewListChange", previewIndex: "previewIndexChange", previewOpener: "previewOpenerChange", requestEdit: "requestEditChange", requestDelete: "requestDeleteChange" }, ngImport: i0, template: "<div class=\"message\"\n     [ngClass]=\"{\n       'message--outgoing': currentMessage().type === messageType.Outgoing,\n       'message--incoming': currentMessage().type === messageType.Incoming\n     }\">\n    <div class=\"message__avatar\">\n        <img [ngSrc]=\"avatarSrc()\" width=\"36\" height=\"36\" alt=\"avatar\"/>\n    </div>\n\n    <div class=\"message__body\"\n         (contextmenu)=\"openContextMenu($event, menuTrigger, menuTriggerEl)\"\n         (keydown.shift.F10)=\"$event.preventDefault(); menuTrigger.openMenu()\">\n        <button type=\"button\"\n                class=\"message__menu-trigger\"\n                aria-hidden=\"true\"\n                tabindex=\"-1\"\n                #menuTrigger=\"matMenuTrigger\"\n                #menuTriggerEl\n                [matMenuTriggerFor]=\"messageMenu\"\n        >\n        </button>\n\n        @if (attachments().length) {\n            <div class=\"message__attachments\">\n                @for (file of attachments(); track file; let i = $index) {\n                    <button type=\"button\"\n                            class=\"message__image-button\"\n                            (click)=\"openPreview(i, $event)\"\n                            [attr.aria-label]=\"'chat.photo_preview' | transloco\">\n                        <img [src]=\"file\"\n                             alt=\"attachment\"\n                             class=\"message__image\"\n                             loading=\"lazy\"/>\n                    </button>\n                }\n            </div>\n        }\n\n        <div class=\"message__bubble\" tabindex=\"0\">\n            <div class=\"message__text\">{{ currentMessage().content }}</div>\n\n            <div class=\"message__meta\">\n                <time class=\"message__time\">\n                    {{ currentMessage().cr_time | date:'HH:mm' }}\n                </time>\n                @if (currentMessage().type === messageType.Outgoing) {\n                    @if (currentMessage().pending) {\n                        <span class=\"message__loading\" aria-label=\"Sending\"></span>\n                    } @else if (currentMessage().checked) {\n                        <img ngSrc=\"assets/ngx-parl/icons/checked-message.svg\"\n                             class=\"message__icon\"\n                             width=\"18\" height=\"18\" alt=\"hide\"/>\n                    } @else {\n                        <img ngSrc=\"assets/ngx-parl/icons/no-check.svg\"\n                             class=\"message__icon\"\n                             width=\"18\" height=\"18\" alt=\"hide\"/>\n                    }\n                }\n            </div>\n        </div>\n    </div>\n</div>\n<div class=\"message__user\">\n    @if (currentMessage().type === messageType.Outgoing) {\n        <span class=\"message__user-name\">{{ currentMessage().user }}</span>\n    }\n</div>\n\n@if (previewList().length) {\n    <lib-preview-file\n        [srcList]=\"previewList()\"\n        [startIndex]=\"previewIndex()\"\n        [openerElement]=\"previewOpener()\"\n        [closeHandler]=\"closePreviewHandler\">\n    </lib-preview-file>\n}\n\n<mat-menu #messageMenu=\"matMenu\" yPosition=\"below\" xPosition=\"before\" class=\"message__menu\">\n    @if (currentMessage().type === messageType.Outgoing) {\n        <button mat-menu-item (click)=\"editMessage(currentMessage())\">\n            <img ngSrc=\"assets/ngx-parl/icons/icon-edit.svg\"\n                 class=\"message__icon--menu\"\n                 width=\"20\" height=\"20\" alt=\"hide\"/>\n            <span>{{ 'chat.edit' | transloco }}</span>\n        </button>\n    }\n    @if (canDelete(currentMessage())) {\n        <button mat-menu-item (click)=\"deleteMessage(currentMessage())\">\n            <img ngSrc=\"assets/ngx-parl/icons/trash.svg\"\n                 class=\"message__icon--menu\"\n                 width=\"20\" height=\"20\" alt=\"hide\"/>\n            <span>{{ 'chat.remove' | transloco }}</span>\n        </button>\n    }\n</mat-menu>\n", styles: [".flow-theme-primary ::ng-deep .modal-chat__header{background-color:#5a72d7;color:#fff}.flow-theme-primary ::ng-deep .message--incoming .message__body{background:#e9ecef;color:#343a40}.flow-theme-primary ::ng-deep .message--outgoing .message__body{background:#4656ca;color:#fff}:root{--shadow-sm: 0px 1px 2px 0px rgba(0, 0, 0, .05);--shadow-md: 0px 4px 12px rgba(0, 0, 0, .08);--shadow-lg: 0px 8px 24px rgba(0, 0, 0, .12);--shadow-soft: 0px 0px 6px 0px rgba(46, 46, 46, .12) }.flow-theme-secondary ::ng-deep .modal-chat__header{background-color:#848af5;color:#fefefe}.flow-theme-secondary ::ng-deep .message--incoming .message__body{background:#848af5;color:#fefefe}.flow-theme-secondary ::ng-deep .message--outgoing .message__body{background:#efefef;color:#464646}.message{display:flex;gap:8px;align-items:flex-end;max-width:80%;animation:pop .12s ease-out}.message__avatar img{display:block;border-radius:1000px}.message__body{padding:8px 12px;min-width:0;font:400 16px/20px inter,sans-serif;border-radius:16px;position:relative}.message__bubble{display:grid;grid-template-columns:1fr auto;column-gap:8px;align-items:end;max-width:100%;word-break:break-word;white-space:pre-wrap}.message__text{min-width:0}.message__meta{display:inline-flex;align-items:center;gap:4px;-webkit-user-select:none;user-select:none;line-height:1;margin:0}.message__time{font:400 12px/16px inter,sans-serif}.message__attachments{display:grid;gap:8px;justify-content:start;width:100%;margin-bottom:8px}.message__attachments:has(:only-child){grid-template-columns:repeat(1,minmax(0,140px))}.message__attachments:has(:nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,145px))}.message__attachments:has(:nth-child(3)){grid-template-columns:repeat(3,minmax(0,150px))}.message__body--attachments-1{max-width:164px}.message__body--attachments-2{max-width:312px}.message__body--attachments-3{max-width:460px}.message__body--attachments-1 .message__bubble,.message__body--attachments-2 .message__bubble,.message__body--attachments-3 .message__bubble{grid-template-columns:1fr;row-gap:4px}.message__body--attachments-1 .message__meta,.message__body--attachments-2 .message__meta,.message__body--attachments-3 .message__meta{justify-self:end}.message__image-button{display:block;border:none;padding:0;background:transparent;border-radius:12px;overflow:hidden;cursor:pointer}.message__image-button:focus-visible{outline:2px solid #5A72D7;outline-offset:4px}.message__menu-trigger{position:fixed;left:-9999px;top:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}.message__image{display:block;width:100%;height:140px;object-fit:cover;border-radius:12px;aspect-ratio:1/1}.message__bubble:after{content:\"\";display:block;clear:both}.message__time{font:400 12px/16px inter,sans-serif;min-width:30px}.message__icon{width:14px;height:14px;vertical-align:middle}.message__icon--menu{width:20px;height:20px}.message__loading{display:inline-block;width:10px;height:10px;border:2px solid #E9ECEF;border-top-color:#5a72d7;border-radius:50%;animation:message-loading-spin .8s linear infinite}.message--incoming{margin-right:auto}.message--incoming .message__body{border-bottom-right-radius:16px}.message--incoming .message__bubble{border-top-left-radius:4px}.message--incoming .message__time{color:#adb5bd}.message--outgoing{margin-left:auto;flex-direction:row-reverse}.message--outgoing .message__body{border-bottom-left-radius:16px}.message--outgoing .message__bubble{border-top-right-radius:4px}.message--outgoing .message__time{color:#e9ecef}.message--outgoing .message__menu-trigger{right:auto}.message__user{display:flex;justify-content:flex-end;max-width:80%;margin-left:auto;margin-top:4px;padding-right:46px}.message__user-name{font:400 12px/16px inter,sans-serif;color:#ced4da}@keyframes pop{0%{transform:translateY(2px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes message-loading-spin{to{transform:rotate(360deg)}}::ng-deep .mat-mdc-menu-content{background:#fff;width:160px;border-radius:8px;gap:4px;border:1px solid #E1E7F8;padding:8px 4px;box-shadow:0 2px 4px #0000001a;overflow:hidden;font:400 14px/18px inter,sans-serif}::ng-deep .mat-mdc-menu-item-text{font:400 14px/18px inter,sans-serif!important;font-weight:500!important;color:#343a40!important;display:flex;justify-content:flex-start;align-items:center;gap:4px}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "decoding", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "placeholder", "placeholderConfig", "src", "srcset"] }, { kind: "component", type: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: PreviewFile, selector: "lib-preview-file", inputs: ["srcList", "startIndex", "title", "openerElement", "closeHandler", "activeIndex", "viewReady", "userNavigated", "previousListLength"], outputs: ["activeIndexChange", "viewReadyChange", "userNavigatedChange", "previousListLengthChange"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ChatMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: ChatMessageComponent, isStandalone: true, selector: "lib-chat-message", inputs: { currentMessage: { classPropertyName: "currentMessage", publicName: "currentMessage", isSignal: true, isRequired: true, transformFunction: null }, edit: { classPropertyName: "edit", publicName: "edit", isSignal: true, isRequired: false, transformFunction: null }, previewList: { classPropertyName: "previewList", publicName: "previewList", isSignal: true, isRequired: false, transformFunction: null }, previewIndex: { classPropertyName: "previewIndex", publicName: "previewIndex", isSignal: true, isRequired: false, transformFunction: null }, previewOpener: { classPropertyName: "previewOpener", publicName: "previewOpener", isSignal: true, isRequired: false, transformFunction: null }, requestEdit: { classPropertyName: "requestEdit", publicName: "requestEdit", isSignal: true, isRequired: false, transformFunction: null }, requestDelete: { classPropertyName: "requestDelete", publicName: "requestDelete", isSignal: true, isRequired: false, transformFunction: null }, mobileMode: { classPropertyName: "mobileMode", publicName: "mobileMode", isSignal: true, isRequired: false, transformFunction: null }, quickActions: { classPropertyName: "quickActions", publicName: "quickActions", isSignal: true, isRequired: false, transformFunction: null }, quickActionClick: { classPropertyName: "quickActionClick", publicName: "quickActionClick", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { edit: "editChange", previewList: "previewListChange", previewIndex: "previewIndexChange", previewOpener: "previewOpenerChange", requestEdit: "requestEditChange", requestDelete: "requestDeleteChange", quickActionClick: "quickActionClickChange" }, ngImport: i0, template: "<div class=\"message\"\n     [ngClass]=\"{\n       'message--outgoing': isOutgoingMessage(),\n       'message--incoming': !isOutgoingMessage(),\n       'message--mobile': mobileMode()\n     }\">\n    @if (showAvatar()) {\n        <div class=\"message__avatar\">\n            <img [ngSrc]=\"avatarSrc()\" width=\"36\" height=\"36\" alt=\"avatar\"/>\n        </div>\n    }\n\n    @if (showMessageBody()) {\n        <div class=\"message__body\"\n             (contextmenu)=\"openContextMenu($event, menuTrigger, menuTriggerEl)\"\n             (keydown.shift.F10)=\"openContextMenu($event, menuTrigger, menuTriggerEl)\">\n            <button type=\"button\"\n                    class=\"message__menu-trigger\"\n                    aria-hidden=\"true\"\n                    tabindex=\"-1\"\n                    #menuTrigger=\"matMenuTrigger\"\n                    #menuTriggerEl\n                    [matMenuTriggerFor]=\"messageMenu\">\n            </button>\n\n            @if (attachments().length) {\n                <div class=\"message__attachments\">\n                    @for (file of attachments(); track file; let i = $index) {\n                        <button type=\"button\"\n                                class=\"message__image-button\"\n                                (click)=\"openPreview(i, $event)\"\n                                [attr.aria-label]=\"'chat.photo_preview' | transloco\">\n                            <img [src]=\"file\"\n                                 alt=\"attachment\"\n                                 class=\"message__image\"\n                                 loading=\"lazy\"/>\n                        </button>\n                    }\n                </div>\n            }\n\n            @if (showMessageBubble()) {\n                <div class=\"message__bubble\" tabindex=\"0\">\n                    <div class=\"message__text\">{{ currentMessage().content }}</div>\n\n                    <div class=\"message__meta\">\n                        <time class=\"message__time\">\n                            {{ currentMessage().cr_time | date:'HH:mm' }}\n                        </time>\n                        @if (isOutgoingMessage()) {\n                            @if (currentMessage().pending) {\n                                <span class=\"message__loading\" aria-label=\"Sending\"></span>\n                            } @else if (currentMessage().checked) {\n                                <img ngSrc=\"assets/ngx-parl/icons/checked-message.svg\"\n                                     class=\"message__icon\"\n                                     width=\"18\" height=\"18\" alt=\"hide\"/>\n                            } @else {\n                                <img ngSrc=\"assets/ngx-parl/icons/no-check.svg\"\n                                     class=\"message__icon\"\n                                     width=\"18\" height=\"18\" alt=\"hide\"/>\n                            }\n                        }\n                    </div>\n                </div>\n            }\n\n        </div>\n    }\n\n    @if (hasQuickActionButtons()) {\n        <div class=\"message__quick-actions-wrap\" role=\"group\" [attr.aria-label]=\"'chat.quick_actions' | transloco\">\n            <div class=\"message__quick-actions\">\n                @for (action of quickActions(); track action.id) {\n                    <button\n                        class=\"message__quick-action-button\"\n                        type=\"button\"\n                        [disabled]=\"action.disabled === true\"\n                        (click)=\"onQuickAction(action)\">\n                        {{ action.title }}\n                    </button>\n                }\n            </div>\n        </div>\n    }\n</div>\n@if (!hasQuickActionButtons()) {\n    <div class=\"message__user\" [ngClass]=\"{'message__user--mobile': mobileMode()}\">\n        @if (isOutgoingMessage()) {\n            <span class=\"message__user-name\">{{ currentMessage().user }}</span>\n        }\n    </div>\n}\n\n@if (previewList().length) {\n    <lib-preview-file\n        [srcList]=\"previewList()\"\n        [startIndex]=\"previewIndex()\"\n        [openerElement]=\"previewOpener()\"\n        [closeHandler]=\"closePreviewHandler\">\n    </lib-preview-file>\n}\n\n<mat-menu #messageMenu=\"matMenu\" yPosition=\"below\" xPosition=\"before\" class=\"message__menu\">\n    @if (isOutgoingMessage()) {\n        <button mat-menu-item (click)=\"editMessage(currentMessage())\">\n            <img ngSrc=\"assets/ngx-parl/icons/icon-edit.svg\"\n                 class=\"message__icon--menu\"\n                 width=\"20\" height=\"20\" alt=\"hide\"/>\n            <span>{{ 'chat.edit' | transloco }}</span>\n        </button>\n        <button mat-menu-item (click)=\"deleteMessage(currentMessage())\">\n            <img ngSrc=\"assets/ngx-parl/icons/trash.svg\"\n                 class=\"message__icon--menu\"\n                 width=\"20\" height=\"20\" alt=\"hide\"/>\n            <span>{{ 'chat.remove' | transloco }}</span>\n        </button>\n    }\n</mat-menu>\n", styles: [".flow-theme-primary ::ng-deep .modal-chat__header{background-color:#5a72d7;color:#fff}.flow-theme-primary ::ng-deep .message--incoming .message__body{background:#e9ecef;color:#343a40}.flow-theme-primary ::ng-deep .message--outgoing .message__body{background:#4656ca;color:#fff}:root{--shadow-sm: 0px 1px 2px 0px rgba(0, 0, 0, .05);--shadow-md: 0px 4px 12px rgba(0, 0, 0, .08);--shadow-lg: 0px 8px 24px rgba(0, 0, 0, .12);--shadow-soft: 0px 0px 6px 0px rgba(46, 46, 46, .12) }.flow-theme-secondary ::ng-deep .modal-chat__header{background-color:#848af5;color:#fefefe}.flow-theme-secondary ::ng-deep .message--incoming .message__body{background:#848af5;color:#fefefe}.flow-theme-secondary ::ng-deep .message--outgoing .message__body{background:#efefef;color:#464646}.message{display:flex;gap:8px;align-items:flex-end;max-width:80%;animation:pop .12s ease-out}.message__avatar{flex:0 0 36px;width:36px;height:36px;min-width:36px;align-self:flex-end}.message__avatar img{display:block;width:36px;height:36px;border-radius:1000px;object-fit:cover}.message__body{padding:8px 12px;min-width:0;font:400 16px/20px inter,sans-serif;border-radius:16px;position:relative}.message__bubble{display:grid;grid-template-columns:1fr auto;column-gap:8px;align-items:end;max-width:100%;word-break:break-word;white-space:pre-wrap}.message__quick-actions-wrap{display:flex;margin-top:12px;width:100%;background:transparent}.message__quick-actions{display:grid;gap:8px;width:234px;max-width:100%;background:transparent}.message__quick-action-button{display:inline-flex;width:100%;align-items:center;justify-content:center;border-radius:16px;border:1px solid #2563EB;color:#2563eb;background:transparent;padding:12px 24px;height:48px;text-transform:none;font:500 14px/18px inter,sans-serif;margin:0;cursor:pointer}.message__quick-action-button:disabled{opacity:.6;cursor:not-allowed}.message__quick-action-button:hover:not(:disabled),.message__quick-action-button:focus-visible:not(:disabled){background:#2563eb0f}.message__quick-action-button:focus-visible{outline:2px solid #5A72D7;outline-offset:4px}.message__text{min-width:0}.message__meta{display:inline-flex;align-items:center;gap:4px;-webkit-user-select:none;user-select:none;line-height:1;margin:0}.message__time{font:400 12px/16px inter,sans-serif}.message__attachments{display:grid;gap:8px;justify-content:start;width:100%;margin-bottom:8px}.message__attachments:has(:only-child){grid-template-columns:repeat(1,minmax(0,140px))}.message__attachments:has(:nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,145px))}.message__attachments:has(:nth-child(3)){grid-template-columns:repeat(3,minmax(0,150px))}.message__body--attachments-1{max-width:164px}.message__body--attachments-2{max-width:312px}.message__body--attachments-3{max-width:460px}.message__body--attachments-1 .message__bubble,.message__body--attachments-2 .message__bubble,.message__body--attachments-3 .message__bubble{grid-template-columns:1fr;row-gap:4px}.message__body--attachments-1 .message__meta,.message__body--attachments-2 .message__meta,.message__body--attachments-3 .message__meta{justify-self:end}.message__image-button{display:block;border:none;padding:0;background:transparent;border-radius:12px;overflow:hidden;cursor:pointer}.message__image-button:focus-visible{outline:2px solid #5A72D7;outline-offset:4px}.message__menu-trigger{position:fixed;left:-9999px;top:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}.message__image{display:block;width:100%;height:140px;object-fit:cover;border-radius:12px;aspect-ratio:1/1}.message__bubble:after{content:\"\";display:block;clear:both}.message__time{font:400 12px/16px inter,sans-serif;min-width:30px}.message__icon{width:14px;height:14px;vertical-align:middle}.message__icon--menu{width:20px;height:20px}.message__loading{display:inline-block;width:10px;height:10px;border:2px solid #E9ECEF;border-top-color:#5a72d7;border-radius:50%;animation:message-loading-spin .8s linear infinite}.message--incoming{margin-right:auto}.message--incoming .message__body{border-bottom-right-radius:16px}.message--incoming .message__bubble{border-top-left-radius:4px}.message--incoming .message__time{color:#adb5bd}.message--incoming .message__quick-actions-wrap{justify-content:flex-start}.message--outgoing{margin-left:auto;flex-direction:row-reverse}.message--outgoing .message__body{border-bottom-right-radius:0}.message--outgoing .message__bubble{border-top-right-radius:4px}.message--outgoing .message__time{color:#e9ecef}.message--outgoing .message__menu-trigger{right:auto}.message--outgoing .message__quick-actions-wrap{justify-content:flex-end}.message--mobile .message__user{padding-right:5px!important}.message--mobile.message--outgoing .message__body{border-bottom-right-radius:0}.message__user{display:flex;justify-content:flex-end;max-width:80%;margin-left:auto;margin-top:4px;padding-right:46px}.message__user--mobile{padding-right:5px!important}.message__user-name{font:400 12px/16px inter,sans-serif;color:#ced4da}@keyframes pop{0%{transform:translateY(2px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes message-loading-spin{to{transform:rotate(360deg)}}::ng-deep .mat-mdc-menu-content{background:#fff;width:160px;border-radius:8px;gap:4px;border:1px solid #E1E7F8;padding:8px 4px;box-shadow:0 2px 4px #0000001a;overflow:hidden;font:400 14px/18px inter,sans-serif}::ng-deep .mat-mdc-menu-item-text{font:400 14px/18px inter,sans-serif!important;font-weight:500!important;color:#343a40!important;display:flex;justify-content:flex-start;align-items:center;gap:4px}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "decoding", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "placeholder", "placeholderConfig", "src", "srcset"] }, { kind: "component", type: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: PreviewFile, selector: "lib-preview-file", inputs: ["srcList", "startIndex", "title", "openerElement", "closeHandler", "activeIndex", "viewReady", "userNavigated", "previousListLength"], outputs: ["activeIndexChange", "viewReadyChange", "userNavigatedChange", "previousListLengthChange"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ChatMessageComponent, decorators: [{
             type: Component,
@@ -378,8 +416,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                         MatMenuTrigger,
                         TranslocoPipe,
                         PreviewFile,
-                    ], standalone: true, template: "<div class=\"message\"\n     [ngClass]=\"{\n       'message--outgoing': currentMessage().type === messageType.Outgoing,\n       'message--incoming': currentMessage().type === messageType.Incoming\n     }\">\n    <div class=\"message__avatar\">\n        <img [ngSrc]=\"avatarSrc()\" width=\"36\" height=\"36\" alt=\"avatar\"/>\n    </div>\n\n    <div class=\"message__body\"\n         (contextmenu)=\"openContextMenu($event, menuTrigger, menuTriggerEl)\"\n         (keydown.shift.F10)=\"$event.preventDefault(); menuTrigger.openMenu()\">\n        <button type=\"button\"\n                class=\"message__menu-trigger\"\n                aria-hidden=\"true\"\n                tabindex=\"-1\"\n                #menuTrigger=\"matMenuTrigger\"\n                #menuTriggerEl\n                [matMenuTriggerFor]=\"messageMenu\"\n        >\n        </button>\n\n        @if (attachments().length) {\n            <div class=\"message__attachments\">\n                @for (file of attachments(); track file; let i = $index) {\n                    <button type=\"button\"\n                            class=\"message__image-button\"\n                            (click)=\"openPreview(i, $event)\"\n                            [attr.aria-label]=\"'chat.photo_preview' | transloco\">\n                        <img [src]=\"file\"\n                             alt=\"attachment\"\n                             class=\"message__image\"\n                             loading=\"lazy\"/>\n                    </button>\n                }\n            </div>\n        }\n\n        <div class=\"message__bubble\" tabindex=\"0\">\n            <div class=\"message__text\">{{ currentMessage().content }}</div>\n\n            <div class=\"message__meta\">\n                <time class=\"message__time\">\n                    {{ currentMessage().cr_time | date:'HH:mm' }}\n                </time>\n                @if (currentMessage().type === messageType.Outgoing) {\n                    @if (currentMessage().pending) {\n                        <span class=\"message__loading\" aria-label=\"Sending\"></span>\n                    } @else if (currentMessage().checked) {\n                        <img ngSrc=\"assets/ngx-parl/icons/checked-message.svg\"\n                             class=\"message__icon\"\n                             width=\"18\" height=\"18\" alt=\"hide\"/>\n                    } @else {\n                        <img ngSrc=\"assets/ngx-parl/icons/no-check.svg\"\n                             class=\"message__icon\"\n                             width=\"18\" height=\"18\" alt=\"hide\"/>\n                    }\n                }\n            </div>\n        </div>\n    </div>\n</div>\n<div class=\"message__user\">\n    @if (currentMessage().type === messageType.Outgoing) {\n        <span class=\"message__user-name\">{{ currentMessage().user }}</span>\n    }\n</div>\n\n@if (previewList().length) {\n    <lib-preview-file\n        [srcList]=\"previewList()\"\n        [startIndex]=\"previewIndex()\"\n        [openerElement]=\"previewOpener()\"\n        [closeHandler]=\"closePreviewHandler\">\n    </lib-preview-file>\n}\n\n<mat-menu #messageMenu=\"matMenu\" yPosition=\"below\" xPosition=\"before\" class=\"message__menu\">\n    @if (currentMessage().type === messageType.Outgoing) {\n        <button mat-menu-item (click)=\"editMessage(currentMessage())\">\n            <img ngSrc=\"assets/ngx-parl/icons/icon-edit.svg\"\n                 class=\"message__icon--menu\"\n                 width=\"20\" height=\"20\" alt=\"hide\"/>\n            <span>{{ 'chat.edit' | transloco }}</span>\n        </button>\n    }\n    @if (canDelete(currentMessage())) {\n        <button mat-menu-item (click)=\"deleteMessage(currentMessage())\">\n            <img ngSrc=\"assets/ngx-parl/icons/trash.svg\"\n                 class=\"message__icon--menu\"\n                 width=\"20\" height=\"20\" alt=\"hide\"/>\n            <span>{{ 'chat.remove' | transloco }}</span>\n        </button>\n    }\n</mat-menu>\n", styles: [".flow-theme-primary ::ng-deep .modal-chat__header{background-color:#5a72d7;color:#fff}.flow-theme-primary ::ng-deep .message--incoming .message__body{background:#e9ecef;color:#343a40}.flow-theme-primary ::ng-deep .message--outgoing .message__body{background:#4656ca;color:#fff}:root{--shadow-sm: 0px 1px 2px 0px rgba(0, 0, 0, .05);--shadow-md: 0px 4px 12px rgba(0, 0, 0, .08);--shadow-lg: 0px 8px 24px rgba(0, 0, 0, .12);--shadow-soft: 0px 0px 6px 0px rgba(46, 46, 46, .12) }.flow-theme-secondary ::ng-deep .modal-chat__header{background-color:#848af5;color:#fefefe}.flow-theme-secondary ::ng-deep .message--incoming .message__body{background:#848af5;color:#fefefe}.flow-theme-secondary ::ng-deep .message--outgoing .message__body{background:#efefef;color:#464646}.message{display:flex;gap:8px;align-items:flex-end;max-width:80%;animation:pop .12s ease-out}.message__avatar img{display:block;border-radius:1000px}.message__body{padding:8px 12px;min-width:0;font:400 16px/20px inter,sans-serif;border-radius:16px;position:relative}.message__bubble{display:grid;grid-template-columns:1fr auto;column-gap:8px;align-items:end;max-width:100%;word-break:break-word;white-space:pre-wrap}.message__text{min-width:0}.message__meta{display:inline-flex;align-items:center;gap:4px;-webkit-user-select:none;user-select:none;line-height:1;margin:0}.message__time{font:400 12px/16px inter,sans-serif}.message__attachments{display:grid;gap:8px;justify-content:start;width:100%;margin-bottom:8px}.message__attachments:has(:only-child){grid-template-columns:repeat(1,minmax(0,140px))}.message__attachments:has(:nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,145px))}.message__attachments:has(:nth-child(3)){grid-template-columns:repeat(3,minmax(0,150px))}.message__body--attachments-1{max-width:164px}.message__body--attachments-2{max-width:312px}.message__body--attachments-3{max-width:460px}.message__body--attachments-1 .message__bubble,.message__body--attachments-2 .message__bubble,.message__body--attachments-3 .message__bubble{grid-template-columns:1fr;row-gap:4px}.message__body--attachments-1 .message__meta,.message__body--attachments-2 .message__meta,.message__body--attachments-3 .message__meta{justify-self:end}.message__image-button{display:block;border:none;padding:0;background:transparent;border-radius:12px;overflow:hidden;cursor:pointer}.message__image-button:focus-visible{outline:2px solid #5A72D7;outline-offset:4px}.message__menu-trigger{position:fixed;left:-9999px;top:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}.message__image{display:block;width:100%;height:140px;object-fit:cover;border-radius:12px;aspect-ratio:1/1}.message__bubble:after{content:\"\";display:block;clear:both}.message__time{font:400 12px/16px inter,sans-serif;min-width:30px}.message__icon{width:14px;height:14px;vertical-align:middle}.message__icon--menu{width:20px;height:20px}.message__loading{display:inline-block;width:10px;height:10px;border:2px solid #E9ECEF;border-top-color:#5a72d7;border-radius:50%;animation:message-loading-spin .8s linear infinite}.message--incoming{margin-right:auto}.message--incoming .message__body{border-bottom-right-radius:16px}.message--incoming .message__bubble{border-top-left-radius:4px}.message--incoming .message__time{color:#adb5bd}.message--outgoing{margin-left:auto;flex-direction:row-reverse}.message--outgoing .message__body{border-bottom-left-radius:16px}.message--outgoing .message__bubble{border-top-right-radius:4px}.message--outgoing .message__time{color:#e9ecef}.message--outgoing .message__menu-trigger{right:auto}.message__user{display:flex;justify-content:flex-end;max-width:80%;margin-left:auto;margin-top:4px;padding-right:46px}.message__user-name{font:400 12px/16px inter,sans-serif;color:#ced4da}@keyframes pop{0%{transform:translateY(2px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes message-loading-spin{to{transform:rotate(360deg)}}::ng-deep .mat-mdc-menu-content{background:#fff;width:160px;border-radius:8px;gap:4px;border:1px solid #E1E7F8;padding:8px 4px;box-shadow:0 2px 4px #0000001a;overflow:hidden;font:400 14px/18px inter,sans-serif}::ng-deep .mat-mdc-menu-item-text{font:400 14px/18px inter,sans-serif!important;font-weight:500!important;color:#343a40!important;display:flex;justify-content:flex-start;align-items:center;gap:4px}\n"] }]
-        }], ctorParameters: () => [{ type: UtilsService }], propDecorators: { currentMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentMessage", required: true }] }], edit: [{ type: i0.Input, args: [{ isSignal: true, alias: "edit", required: false }] }, { type: i0.Output, args: ["editChange"] }], previewList: [{ type: i0.Input, args: [{ isSignal: true, alias: "previewList", required: false }] }, { type: i0.Output, args: ["previewListChange"] }], previewIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "previewIndex", required: false }] }, { type: i0.Output, args: ["previewIndexChange"] }], previewOpener: [{ type: i0.Input, args: [{ isSignal: true, alias: "previewOpener", required: false }] }, { type: i0.Output, args: ["previewOpenerChange"] }], requestEdit: [{ type: i0.Input, args: [{ isSignal: true, alias: "requestEdit", required: false }] }, { type: i0.Output, args: ["requestEditChange"] }], requestDelete: [{ type: i0.Input, args: [{ isSignal: true, alias: "requestDelete", required: false }] }, { type: i0.Output, args: ["requestDeleteChange"] }] } });
+                    ], standalone: true, template: "<div class=\"message\"\n     [ngClass]=\"{\n       'message--outgoing': isOutgoingMessage(),\n       'message--incoming': !isOutgoingMessage(),\n       'message--mobile': mobileMode()\n     }\">\n    @if (showAvatar()) {\n        <div class=\"message__avatar\">\n            <img [ngSrc]=\"avatarSrc()\" width=\"36\" height=\"36\" alt=\"avatar\"/>\n        </div>\n    }\n\n    @if (showMessageBody()) {\n        <div class=\"message__body\"\n             (contextmenu)=\"openContextMenu($event, menuTrigger, menuTriggerEl)\"\n             (keydown.shift.F10)=\"openContextMenu($event, menuTrigger, menuTriggerEl)\">\n            <button type=\"button\"\n                    class=\"message__menu-trigger\"\n                    aria-hidden=\"true\"\n                    tabindex=\"-1\"\n                    #menuTrigger=\"matMenuTrigger\"\n                    #menuTriggerEl\n                    [matMenuTriggerFor]=\"messageMenu\">\n            </button>\n\n            @if (attachments().length) {\n                <div class=\"message__attachments\">\n                    @for (file of attachments(); track file; let i = $index) {\n                        <button type=\"button\"\n                                class=\"message__image-button\"\n                                (click)=\"openPreview(i, $event)\"\n                                [attr.aria-label]=\"'chat.photo_preview' | transloco\">\n                            <img [src]=\"file\"\n                                 alt=\"attachment\"\n                                 class=\"message__image\"\n                                 loading=\"lazy\"/>\n                        </button>\n                    }\n                </div>\n            }\n\n            @if (showMessageBubble()) {\n                <div class=\"message__bubble\" tabindex=\"0\">\n                    <div class=\"message__text\">{{ currentMessage().content }}</div>\n\n                    <div class=\"message__meta\">\n                        <time class=\"message__time\">\n                            {{ currentMessage().cr_time | date:'HH:mm' }}\n                        </time>\n                        @if (isOutgoingMessage()) {\n                            @if (currentMessage().pending) {\n                                <span class=\"message__loading\" aria-label=\"Sending\"></span>\n                            } @else if (currentMessage().checked) {\n                                <img ngSrc=\"assets/ngx-parl/icons/checked-message.svg\"\n                                     class=\"message__icon\"\n                                     width=\"18\" height=\"18\" alt=\"hide\"/>\n                            } @else {\n                                <img ngSrc=\"assets/ngx-parl/icons/no-check.svg\"\n                                     class=\"message__icon\"\n                                     width=\"18\" height=\"18\" alt=\"hide\"/>\n                            }\n                        }\n                    </div>\n                </div>\n            }\n\n        </div>\n    }\n\n    @if (hasQuickActionButtons()) {\n        <div class=\"message__quick-actions-wrap\" role=\"group\" [attr.aria-label]=\"'chat.quick_actions' | transloco\">\n            <div class=\"message__quick-actions\">\n                @for (action of quickActions(); track action.id) {\n                    <button\n                        class=\"message__quick-action-button\"\n                        type=\"button\"\n                        [disabled]=\"action.disabled === true\"\n                        (click)=\"onQuickAction(action)\">\n                        {{ action.title }}\n                    </button>\n                }\n            </div>\n        </div>\n    }\n</div>\n@if (!hasQuickActionButtons()) {\n    <div class=\"message__user\" [ngClass]=\"{'message__user--mobile': mobileMode()}\">\n        @if (isOutgoingMessage()) {\n            <span class=\"message__user-name\">{{ currentMessage().user }}</span>\n        }\n    </div>\n}\n\n@if (previewList().length) {\n    <lib-preview-file\n        [srcList]=\"previewList()\"\n        [startIndex]=\"previewIndex()\"\n        [openerElement]=\"previewOpener()\"\n        [closeHandler]=\"closePreviewHandler\">\n    </lib-preview-file>\n}\n\n<mat-menu #messageMenu=\"matMenu\" yPosition=\"below\" xPosition=\"before\" class=\"message__menu\">\n    @if (isOutgoingMessage()) {\n        <button mat-menu-item (click)=\"editMessage(currentMessage())\">\n            <img ngSrc=\"assets/ngx-parl/icons/icon-edit.svg\"\n                 class=\"message__icon--menu\"\n                 width=\"20\" height=\"20\" alt=\"hide\"/>\n            <span>{{ 'chat.edit' | transloco }}</span>\n        </button>\n        <button mat-menu-item (click)=\"deleteMessage(currentMessage())\">\n            <img ngSrc=\"assets/ngx-parl/icons/trash.svg\"\n                 class=\"message__icon--menu\"\n                 width=\"20\" height=\"20\" alt=\"hide\"/>\n            <span>{{ 'chat.remove' | transloco }}</span>\n        </button>\n    }\n</mat-menu>\n", styles: [".flow-theme-primary ::ng-deep .modal-chat__header{background-color:#5a72d7;color:#fff}.flow-theme-primary ::ng-deep .message--incoming .message__body{background:#e9ecef;color:#343a40}.flow-theme-primary ::ng-deep .message--outgoing .message__body{background:#4656ca;color:#fff}:root{--shadow-sm: 0px 1px 2px 0px rgba(0, 0, 0, .05);--shadow-md: 0px 4px 12px rgba(0, 0, 0, .08);--shadow-lg: 0px 8px 24px rgba(0, 0, 0, .12);--shadow-soft: 0px 0px 6px 0px rgba(46, 46, 46, .12) }.flow-theme-secondary ::ng-deep .modal-chat__header{background-color:#848af5;color:#fefefe}.flow-theme-secondary ::ng-deep .message--incoming .message__body{background:#848af5;color:#fefefe}.flow-theme-secondary ::ng-deep .message--outgoing .message__body{background:#efefef;color:#464646}.message{display:flex;gap:8px;align-items:flex-end;max-width:80%;animation:pop .12s ease-out}.message__avatar{flex:0 0 36px;width:36px;height:36px;min-width:36px;align-self:flex-end}.message__avatar img{display:block;width:36px;height:36px;border-radius:1000px;object-fit:cover}.message__body{padding:8px 12px;min-width:0;font:400 16px/20px inter,sans-serif;border-radius:16px;position:relative}.message__bubble{display:grid;grid-template-columns:1fr auto;column-gap:8px;align-items:end;max-width:100%;word-break:break-word;white-space:pre-wrap}.message__quick-actions-wrap{display:flex;margin-top:12px;width:100%;background:transparent}.message__quick-actions{display:grid;gap:8px;width:234px;max-width:100%;background:transparent}.message__quick-action-button{display:inline-flex;width:100%;align-items:center;justify-content:center;border-radius:16px;border:1px solid #2563EB;color:#2563eb;background:transparent;padding:12px 24px;height:48px;text-transform:none;font:500 14px/18px inter,sans-serif;margin:0;cursor:pointer}.message__quick-action-button:disabled{opacity:.6;cursor:not-allowed}.message__quick-action-button:hover:not(:disabled),.message__quick-action-button:focus-visible:not(:disabled){background:#2563eb0f}.message__quick-action-button:focus-visible{outline:2px solid #5A72D7;outline-offset:4px}.message__text{min-width:0}.message__meta{display:inline-flex;align-items:center;gap:4px;-webkit-user-select:none;user-select:none;line-height:1;margin:0}.message__time{font:400 12px/16px inter,sans-serif}.message__attachments{display:grid;gap:8px;justify-content:start;width:100%;margin-bottom:8px}.message__attachments:has(:only-child){grid-template-columns:repeat(1,minmax(0,140px))}.message__attachments:has(:nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,145px))}.message__attachments:has(:nth-child(3)){grid-template-columns:repeat(3,minmax(0,150px))}.message__body--attachments-1{max-width:164px}.message__body--attachments-2{max-width:312px}.message__body--attachments-3{max-width:460px}.message__body--attachments-1 .message__bubble,.message__body--attachments-2 .message__bubble,.message__body--attachments-3 .message__bubble{grid-template-columns:1fr;row-gap:4px}.message__body--attachments-1 .message__meta,.message__body--attachments-2 .message__meta,.message__body--attachments-3 .message__meta{justify-self:end}.message__image-button{display:block;border:none;padding:0;background:transparent;border-radius:12px;overflow:hidden;cursor:pointer}.message__image-button:focus-visible{outline:2px solid #5A72D7;outline-offset:4px}.message__menu-trigger{position:fixed;left:-9999px;top:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}.message__image{display:block;width:100%;height:140px;object-fit:cover;border-radius:12px;aspect-ratio:1/1}.message__bubble:after{content:\"\";display:block;clear:both}.message__time{font:400 12px/16px inter,sans-serif;min-width:30px}.message__icon{width:14px;height:14px;vertical-align:middle}.message__icon--menu{width:20px;height:20px}.message__loading{display:inline-block;width:10px;height:10px;border:2px solid #E9ECEF;border-top-color:#5a72d7;border-radius:50%;animation:message-loading-spin .8s linear infinite}.message--incoming{margin-right:auto}.message--incoming .message__body{border-bottom-right-radius:16px}.message--incoming .message__bubble{border-top-left-radius:4px}.message--incoming .message__time{color:#adb5bd}.message--incoming .message__quick-actions-wrap{justify-content:flex-start}.message--outgoing{margin-left:auto;flex-direction:row-reverse}.message--outgoing .message__body{border-bottom-right-radius:0}.message--outgoing .message__bubble{border-top-right-radius:4px}.message--outgoing .message__time{color:#e9ecef}.message--outgoing .message__menu-trigger{right:auto}.message--outgoing .message__quick-actions-wrap{justify-content:flex-end}.message--mobile .message__user{padding-right:5px!important}.message--mobile.message--outgoing .message__body{border-bottom-right-radius:0}.message__user{display:flex;justify-content:flex-end;max-width:80%;margin-left:auto;margin-top:4px;padding-right:46px}.message__user--mobile{padding-right:5px!important}.message__user-name{font:400 12px/16px inter,sans-serif;color:#ced4da}@keyframes pop{0%{transform:translateY(2px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes message-loading-spin{to{transform:rotate(360deg)}}::ng-deep .mat-mdc-menu-content{background:#fff;width:160px;border-radius:8px;gap:4px;border:1px solid #E1E7F8;padding:8px 4px;box-shadow:0 2px 4px #0000001a;overflow:hidden;font:400 14px/18px inter,sans-serif}::ng-deep .mat-mdc-menu-item-text{font:400 14px/18px inter,sans-serif!important;font-weight:500!important;color:#343a40!important;display:flex;justify-content:flex-start;align-items:center;gap:4px}\n"] }]
+        }], propDecorators: { currentMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentMessage", required: true }] }], edit: [{ type: i0.Input, args: [{ isSignal: true, alias: "edit", required: false }] }, { type: i0.Output, args: ["editChange"] }], previewList: [{ type: i0.Input, args: [{ isSignal: true, alias: "previewList", required: false }] }, { type: i0.Output, args: ["previewListChange"] }], previewIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "previewIndex", required: false }] }, { type: i0.Output, args: ["previewIndexChange"] }], previewOpener: [{ type: i0.Input, args: [{ isSignal: true, alias: "previewOpener", required: false }] }, { type: i0.Output, args: ["previewOpenerChange"] }], requestEdit: [{ type: i0.Input, args: [{ isSignal: true, alias: "requestEdit", required: false }] }, { type: i0.Output, args: ["requestEditChange"] }], requestDelete: [{ type: i0.Input, args: [{ isSignal: true, alias: "requestDelete", required: false }] }, { type: i0.Output, args: ["requestDeleteChange"] }], mobileMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mobileMode", required: false }] }], quickActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "quickActions", required: false }] }], quickActionClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "quickActionClick", required: false }] }, { type: i0.Output, args: ["quickActionClickChange"] }] } });
 
 class ToggleDisplayChatStartDayPipe {
     utils;
@@ -436,14 +474,91 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 }]
         }], ctorParameters: () => [{ type: UtilsService }, { type: i2.TranslocoService }] });
 
+/**
+ * Maps `message.actions` to quick action buttons for outgoing messages.
+ * Used when `[quickActionsResolver]` is not provided. Independent of `mobileMode`.
+ */
+function messageHasActionButtons(message) {
+    const t = message.type;
+    const outgoing = t === MessageType.Outgoing ||
+        (typeof t === 'string' && t.toLowerCase() === MessageType.Outgoing);
+    if (!outgoing) {
+        return false;
+    }
+    return Array.isArray(message.actions) && message.actions.length > 0;
+}
+function defaultParlQuickActionsResolver(context) {
+    const message = context.message;
+    if (!messageHasActionButtons(message)) {
+        return [];
+    }
+    const raw = message.actions;
+    return raw.map((a) => ({
+        id: String(a.id),
+        title: a.title,
+        value: a.value,
+    }));
+}
+function resolveParlQuickActions(context, resolver) {
+    if (!resolver) {
+        const actions = defaultParlQuickActionsResolver(context);
+        return Array.isArray(actions) && actions.length > 0 ? actions : [];
+    }
+    const resolved = resolver(context);
+    if (resolved == null || !Array.isArray(resolved)) {
+        return [];
+    }
+    return resolved;
+}
+
 class ChatFlowComponent {
     flowRef;
+    transloco = inject(TranslocoService);
+    translocoLang = toSignal(this.transloco.langChanges$, {
+        initialValue: this.transloco.getActiveLang(),
+    });
+    translocoTranslationTick = toSignal(this.transloco.events$.pipe(filter((e) => e.type === 'translationLoadSuccess'), map(() => Date.now()), startWith(0)), { initialValue: 0 });
     scrollToBottomTrigger = model(0, ...(ngDevMode ? [{ debugName: "scrollToBottomTrigger" }] : []));
     loadHistory = model(false, ...(ngDevMode ? [{ debugName: "loadHistory" }] : []));
     messageListInput = model.required(...(ngDevMode ? [{ debugName: "messageListInput" }] : []));
     messageList = computed(() => this.messageListInput(), ...(ngDevMode ? [{ debugName: "messageList" }] : []));
     selectedForEdit = model.required(...(ngDevMode ? [{ debugName: "selectedForEdit" }] : []));
     requestDelete = model(null, ...(ngDevMode ? [{ debugName: "requestDelete" }] : []));
+    mobileMode = input(false, ...(ngDevMode ? [{ debugName: "mobileMode" }] : []));
+    quickActionsResolver = input(null, ...(ngDevMode ? [{ debugName: "quickActionsResolver" }] : []));
+    quickActionClick = model(null, ...(ngDevMode ? [{ debugName: "quickActionClick" }] : []));
+    deleteConfirmOpen = signal(false, ...(ngDevMode ? [{ debugName: "deleteConfirmOpen" }] : []));
+    pendingDeleteMessageId = signal(null, ...(ngDevMode ? [{ debugName: "pendingDeleteMessageId" }] : []));
+    deleteAlertButtons = computed(() => {
+        this.translocoLang();
+        this.translocoTranslationTick();
+        return [
+            {
+                text: this.translateChatKey('chat.cancel', 'Cancel'),
+                role: 'cancel',
+                handler: () => this.closeDeleteConfirm(),
+            },
+            {
+                text: this.translateChatKey('chat.remove', 'Delete'),
+                role: 'destructive',
+                cssClass: 'chat__delete-alert-destructive',
+                handler: () => this.confirmDelete(),
+            },
+        ];
+    }, ...(ngDevMode ? [{ debugName: "deleteAlertButtons" }] : []));
+    quickActionsByMessageId = computed(() => {
+        const messages = this.messageList();
+        const resolver = this.quickActionsResolver();
+        const isMobile = this.mobileMode();
+        const map = new Map();
+        for (const message of messages) {
+            const actions = resolveParlQuickActions({ message, isMobile }, resolver);
+            if (actions.length > 0) {
+                map.set(message.id, actions);
+            }
+        }
+        return map;
+    }, ...(ngDevMode ? [{ debugName: "quickActionsByMessageId" }] : []));
     viewInitialized = false;
     previousMessageCount = 0;
     previousFirstMessageId = null;
@@ -625,16 +740,40 @@ class ChatFlowComponent {
             return this;
         }
         this.selectedForEdit.set(null);
+        this.pendingDeleteMessageId.set(messageId);
+        this.deleteConfirmOpen.set(true);
+        return this;
+    }
+    closeDeleteConfirm() {
+        this.deleteConfirmOpen.set(false);
+        this.pendingDeleteMessageId.set(null);
+        return this;
+    }
+    confirmDelete() {
+        const messageId = this.pendingDeleteMessageId();
+        if (messageId == null) {
+            return this.closeDeleteConfirm();
+        }
+        this.closeDeleteConfirm();
         this.requestDelete.set(messageId);
         queueMicrotask(() => this.requestDelete.set(null));
         return this;
     }
+    translateChatKey(key, fallbackEn) {
+        const lang = this.transloco.getActiveLang();
+        const translation = this.transloco.getTranslation(lang);
+        const value = getValue(translation, key);
+        if (typeof value === 'string' && value.trim().length > 0) {
+            return value;
+        }
+        return fallbackEn;
+    }
     trackByMessageId(index, message) {
         return `${message.chat_id}-${message.type}-${message.id}-${index}`;
     }
     Math = Math;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ChatFlowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: ChatFlowComponent, isStandalone: true, selector: "app-chat-flow", inputs: { scrollToBottomTrigger: { classPropertyName: "scrollToBottomTrigger", publicName: "scrollToBottomTrigger", isSignal: true, isRequired: false, transformFunction: null }, loadHistory: { classPropertyName: "loadHistory", publicName: "loadHistory", isSignal: true, isRequired: false, transformFunction: null }, messageListInput: { classPropertyName: "messageListInput", publicName: "messageListInput", isSignal: true, isRequired: true, transformFunction: null }, selectedForEdit: { classPropertyName: "selectedForEdit", publicName: "selectedForEdit", isSignal: true, isRequired: true, transformFunction: null }, requestDelete: { classPropertyName: "requestDelete", publicName: "requestDelete", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { scrollToBottomTrigger: "scrollToBottomTriggerChange", loadHistory: "loadHistoryChange", messageListInput: "messageListInputChange", selectedForEdit: "selectedForEditChange", requestDelete: "requestDeleteChange" }, viewQueries: [{ propertyName: "flowRef", first: true, predicate: ["chatFlowRef"], descendants: true }], ngImport: i0, template: "<div class=\"chat\">\n    @if (messageList()) {\n        <div #chatFlowRef\n             class=\"chat__flow\"\n             infiniteScroll\n             [scrollWindow]=\"false\"\n             [infiniteScrollUpDistance]=\"Math.max(historyLoadThreshold(), 2)\"\n             [infiniteScrollThrottle]=\"100\"\n             (scrolledUp)=\"onScrollUp()\"\n        >\n            @for (message of messageList(); track trackByMessageId(i, message); let i = $index) {\n                @if (message | toggleDisplayChatStartDay: messageList() : i) {\n                    <span class=\"chat__start-day\">\n                        {{ message.cr_time | chatStartDay:'d MMMM' }}\n                    </span>\n                }\n\n                <div class=\"chat__message\" [attr.data-message-id]=\"message.id\">\n                    <lib-chat-message\n                        [currentMessage]=\"message\"\n                        [edit]=\"message.edit\"\n                        (editChange)=\"onEditChange(message.id, $event)\"\n                        (requestEditChange)=\"onRequestEdit($event)\"\n                        (requestDeleteChange)=\"onRequestDelete($event)\">\n                    </lib-chat-message>\n                </div>\n            }\n        </div>\n\n        @if (showScrollToBottom()) {\n            <button class=\"chat__scroll-button\"\n                    type=\"button\"\n                    (click)=\"scrollToBottomSmooth()\"\n                    aria-label=\"Scroll to bottom\">\n                <img ngSrc=\"assets/ngx-parl/icons/bottom-scroll.svg\"\n                     alt=\"\"\n                     width=\"14\"\n                     height=\"14\"/>\n            </button>\n        }\n    } @else {\n        <div class=\"chat__flow__empty\">\n            <img ngSrc=\"assets/ngx-parl/icons/lucide_send.svg\"\n                 class=\"message__icon\"\n                 width=\"18\" height=\"24\" alt=\"hide\"/>\n\n\n            <div class=\"chat__flow__empty--header\">\n                <h3 class=\"chat__flow__empty--title\">{{ 'chat.chat_empty_title' | transloco }}</h3>\n                <p class=\"chat__flow__empty--subscription\">{{ 'chat.chat_empty_subscription' | transloco }}</p>\n            </div>\n        </div>\n    }\n</div>\n\n", styles: [":host{display:block;height:100%;min-height:0}.chat{background:#fff;height:100%;display:flex;flex-direction:column;min-height:0;width:100%;position:relative}.chat__flow{flex:1 1 auto;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:12px;padding:12px 16px;overscroll-behavior:contain}.chat__flow__empty{display:flex;gap:16px;flex-direction:column;align-items:center;justify-content:center;padding:72px 16px;height:100%}.chat__flow__empty .message__icon{width:56px;height:56px}.chat__flow__empty--header{width:285px;display:flex;gap:12px;flex-direction:column;align-items:center}.chat__flow__empty--title{margin:0;font:600 16px/20px inter,sans-serif;color:#212529}.chat__flow__empty--subscription{margin:0;font:400 16px/20px inter,sans-serif;color:#495057}.chat__start-day{display:flex;justify-content:center;background:#f8f9fa;color:#6c757d;font:400 12px/16px inter,sans-serif;width:80px;height:22px;margin:0 auto;border-radius:1000px;gap:8px;padding:4px 8px}.chat__scroll-button{position:absolute;right:8px;bottom:8px;width:35px;height:35px;display:inline-flex;align-items:center;justify-content:center;padding:8px;border:none;border-radius:1000px;background:#c9d4f4;box-shadow:0 2px 4px #0000001a;opacity:.6;cursor:pointer;transition:background-color .15s ease,opacity .15s ease}.chat__scroll-button:hover,.chat__scroll-button:focus-visible{background:#dee2e6;opacity:1}.chat__scroll-button img{display:block}.chat ::-webkit-scrollbar{width:6px}.chat ::-webkit-scrollbar-track{background:transparent}.chat ::-webkit-scrollbar-thumb{background-color:#e9ecef;border-radius:4px;border:1px solid #E9ECEF}.chat ::-webkit-scrollbar-button{display:none}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "component", type: ChatMessageComponent, selector: "lib-chat-message", inputs: ["currentMessage", "edit", "previewList", "previewIndex", "previewOpener", "requestEdit", "requestDelete"], outputs: ["editChange", "previewListChange", "previewIndexChange", "previewOpenerChange", "requestEditChange", "requestDeleteChange"] }, { kind: "directive", type: NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "decoding", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "placeholder", "placeholderConfig", "src", "srcset"] }, { kind: "directive", type: InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }, { kind: "pipe", type: ToggleDisplayChatStartDayPipe, name: "toggleDisplayChatStartDay" }, { kind: "pipe", type: ChatStartDayPipe, name: "chatStartDay" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: ChatFlowComponent, isStandalone: true, selector: "app-chat-flow", inputs: { scrollToBottomTrigger: { classPropertyName: "scrollToBottomTrigger", publicName: "scrollToBottomTrigger", isSignal: true, isRequired: false, transformFunction: null }, loadHistory: { classPropertyName: "loadHistory", publicName: "loadHistory", isSignal: true, isRequired: false, transformFunction: null }, messageListInput: { classPropertyName: "messageListInput", publicName: "messageListInput", isSignal: true, isRequired: true, transformFunction: null }, selectedForEdit: { classPropertyName: "selectedForEdit", publicName: "selectedForEdit", isSignal: true, isRequired: true, transformFunction: null }, requestDelete: { classPropertyName: "requestDelete", publicName: "requestDelete", isSignal: true, isRequired: false, transformFunction: null }, mobileMode: { classPropertyName: "mobileMode", publicName: "mobileMode", isSignal: true, isRequired: false, transformFunction: null }, quickActionsResolver: { classPropertyName: "quickActionsResolver", publicName: "quickActionsResolver", isSignal: true, isRequired: false, transformFunction: null }, quickActionClick: { classPropertyName: "quickActionClick", publicName: "quickActionClick", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { scrollToBottomTrigger: "scrollToBottomTriggerChange", loadHistory: "loadHistoryChange", messageListInput: "messageListInputChange", selectedForEdit: "selectedForEditChange", requestDelete: "requestDeleteChange", quickActionClick: "quickActionClickChange" }, viewQueries: [{ propertyName: "flowRef", first: true, predicate: ["chatFlowRef"], descendants: true }], ngImport: i0, template: "<div class=\"chat\">\n    @if (messageList()) {\n        <div #chatFlowRef\n             class=\"chat__flow\"\n             infiniteScroll\n             [scrollWindow]=\"false\"\n             [infiniteScrollUpDistance]=\"Math.max(historyLoadThreshold(), 2)\"\n             [infiniteScrollThrottle]=\"100\"\n             (scrolledUp)=\"onScrollUp()\"\n        >\n            <div class=\"chat__manager-header\" aria-hidden=\"true\">\n                <div class=\"chat__manager-icon\">\n                    <img ngSrc=\"assets/ngx-parl/icons/avatar_manager.svg\"\n                         alt=\"manager\"\n                         width=\"72\"\n                         height=\"72\"/>\n                </div>\n            </div>\n\n            @for (message of messageList(); track trackByMessageId(i, message); let i = $index) {\n                @if (message | toggleDisplayChatStartDay: messageList() : i) {\n                    <span class=\"chat__start-day\">\n                        {{ message.cr_time | chatStartDay:'d MMMM' }}\n                    </span>\n                }\n\n                <div class=\"chat__message\" [attr.data-message-id]=\"message.id\">\n                    <lib-chat-message\n                        [currentMessage]=\"message\"\n                        [edit]=\"message.edit\"\n                        [mobileMode]=\"mobileMode()\"\n                        [quickActions]=\"quickActionsByMessageId().get(message.id) ?? []\"\n                        [quickActionClick]=\"quickActionClick()\"\n                        (quickActionClickChange)=\"quickActionClick.set($event)\"\n                        (editChange)=\"onEditChange(message.id, $event)\"\n                        (requestEditChange)=\"onRequestEdit($event)\"\n                        (requestDeleteChange)=\"onRequestDelete($event)\">\n                    </lib-chat-message>\n                </div>\n            }\n        </div>\n\n        <ion-alert mode=\"md\"\n                   [header]=\"'chat.delete_message_title' | transloco\"\n                   cssClass=\"chat__delete-alert\"\n                   [isOpen]=\"deleteConfirmOpen()\"\n                   [buttons]=\"deleteAlertButtons()\"\n                   (didDismiss)=\"closeDeleteConfirm()\"\n                   [backdropDismiss]=\"false\">\n        </ion-alert>\n\n        @if (showScrollToBottom()) {\n            <button class=\"chat__scroll-button\"\n                    type=\"button\"\n                    (click)=\"scrollToBottomSmooth()\"\n                    aria-label=\"Scroll to bottom\">\n                <img ngSrc=\"assets/ngx-parl/icons/bottom-scroll.svg\"\n                     alt=\"\"\n                     width=\"14\"\n                     height=\"14\"/>\n            </button>\n        }\n    } @else {\n        <div class=\"chat__flow__empty\">\n            <img ngSrc=\"assets/ngx-parl/icons/lucide_send.svg\"\n                 class=\"message__icon\"\n                 width=\"18\" height=\"24\" alt=\"hide\"/>\n\n\n            <div class=\"chat__flow__empty--header\">\n                <h3 class=\"chat__flow__empty--title\">{{ 'chat.chat_empty_title' | transloco }}</h3>\n                <p class=\"chat__flow__empty--subscription\">{{ 'chat.chat_empty_subscription' | transloco }}</p>\n            </div>\n        </div>\n    }\n</div>\n\n", styles: [":host{display:block;height:100%;min-height:0}.chat{background:#fff;height:100%;display:flex;flex-direction:column;min-height:0;width:100%;position:relative}.chat__flow{flex:1 1 auto;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:12px;padding:12px 16px;overscroll-behavior:contain}.chat__flow__empty{display:flex;gap:16px;flex-direction:column;align-items:center;justify-content:center;padding:72px 16px;height:100%}.chat__flow__empty .message__icon{width:56px;height:56px}.chat__flow__empty--header{width:285px;display:flex;gap:12px;flex-direction:column;align-items:center}.chat__flow__empty--title{margin:0;font:600 16px/20px inter,sans-serif;color:#212529}.chat__flow__empty--subscription{margin:0;font:400 16px/20px inter,sans-serif;color:#495057}.chat__manager-header{display:flex;justify-content:center;padding:24px 16px 8px}.chat__manager-icon{width:132px;height:132px;border-radius:1000px;display:grid;place-items:center}.chat__manager-icon img{display:block;border-radius:1000px}.chat__start-day{display:flex;justify-content:center;background:#f8f9fa;color:#6c757d;font:400 12px/16px inter,sans-serif;width:98px;height:22px;margin:0 auto;border-radius:1000px;gap:8px;padding:4px 8px}.chat__scroll-button{position:absolute;right:8px;bottom:8px;width:35px;height:35px;display:inline-flex;align-items:center;justify-content:center;padding:8px;border:none;border-radius:1000px;background:#c9d4f4;box-shadow:0 2px 4px #0000001a;opacity:.6;cursor:pointer;transition:background-color .15s ease,opacity .15s ease}.chat__scroll-button:hover,.chat__scroll-button:focus-visible{background:#dee2e6;opacity:1}.chat__scroll-button img{display:block}.chat ::-webkit-scrollbar{width:6px}.chat ::-webkit-scrollbar-track{background:transparent}.chat ::-webkit-scrollbar-thumb{background-color:#e9ecef;border-radius:4px;border:1px solid #E9ECEF}.chat ::-webkit-scrollbar-button{display:none}.chat__delete-alert{--background: #ffffff;--backdrop-opacity: .32;--max-width: 520px}.chat__delete-alert .alert-wrapper{border-radius:16px;box-shadow:0 10px 30px #00000026}.chat__delete-alert .alert-head{padding-top:18px}.chat__delete-alert .alert-title{color:#0f172a;font-weight:500}.chat__delete-alert .alert-button-group{padding:8px 12px 12px}.chat__delete-alert .alert-button{color:#2563eb;font-weight:500}.chat__delete-alert .alert-button-role-destructive,.chat__delete-alert .alert-button-role-destructive .alert-button-inner{color:#dc2626!important}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "component", type: ChatMessageComponent, selector: "lib-chat-message", inputs: ["currentMessage", "edit", "previewList", "previewIndex", "previewOpener", "requestEdit", "requestDelete", "mobileMode", "quickActions", "quickActionClick"], outputs: ["editChange", "previewListChange", "previewIndexChange", "previewOpenerChange", "requestEditChange", "requestDeleteChange", "quickActionClickChange"] }, { kind: "directive", type: NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "decoding", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "placeholder", "placeholderConfig", "src", "srcset"] }, { kind: "directive", type: InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "component", type: IonAlert, selector: "ion-alert", inputs: ["animated", "backdropDismiss", "buttons", "cssClass", "enterAnimation", "header", "htmlAttributes", "inputs", "isOpen", "keyboardClose", "leaveAnimation", "message", "mode", "subHeader", "translucent", "trigger"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }, { kind: "pipe", type: ToggleDisplayChatStartDayPipe, name: "toggleDisplayChatStartDay" }, { kind: "pipe", type: ChatStartDayPipe, name: "chatStartDay" }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ChatFlowComponent, decorators: [{
             type: Component,
@@ -645,12 +784,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                         NgOptimizedImage,
                         InfiniteScrollDirective,
                         ToggleDisplayChatStartDayPipe,
-                        ChatStartDayPipe
-                    ], standalone: true, template: "<div class=\"chat\">\n    @if (messageList()) {\n        <div #chatFlowRef\n             class=\"chat__flow\"\n             infiniteScroll\n             [scrollWindow]=\"false\"\n             [infiniteScrollUpDistance]=\"Math.max(historyLoadThreshold(), 2)\"\n             [infiniteScrollThrottle]=\"100\"\n             (scrolledUp)=\"onScrollUp()\"\n        >\n            @for (message of messageList(); track trackByMessageId(i, message); let i = $index) {\n                @if (message | toggleDisplayChatStartDay: messageList() : i) {\n                    <span class=\"chat__start-day\">\n                        {{ message.cr_time | chatStartDay:'d MMMM' }}\n                    </span>\n                }\n\n                <div class=\"chat__message\" [attr.data-message-id]=\"message.id\">\n                    <lib-chat-message\n                        [currentMessage]=\"message\"\n                        [edit]=\"message.edit\"\n                        (editChange)=\"onEditChange(message.id, $event)\"\n                        (requestEditChange)=\"onRequestEdit($event)\"\n                        (requestDeleteChange)=\"onRequestDelete($event)\">\n                    </lib-chat-message>\n                </div>\n            }\n        </div>\n\n        @if (showScrollToBottom()) {\n            <button class=\"chat__scroll-button\"\n                    type=\"button\"\n                    (click)=\"scrollToBottomSmooth()\"\n                    aria-label=\"Scroll to bottom\">\n                <img ngSrc=\"assets/ngx-parl/icons/bottom-scroll.svg\"\n                     alt=\"\"\n                     width=\"14\"\n                     height=\"14\"/>\n            </button>\n        }\n    } @else {\n        <div class=\"chat__flow__empty\">\n            <img ngSrc=\"assets/ngx-parl/icons/lucide_send.svg\"\n                 class=\"message__icon\"\n                 width=\"18\" height=\"24\" alt=\"hide\"/>\n\n\n            <div class=\"chat__flow__empty--header\">\n                <h3 class=\"chat__flow__empty--title\">{{ 'chat.chat_empty_title' | transloco }}</h3>\n                <p class=\"chat__flow__empty--subscription\">{{ 'chat.chat_empty_subscription' | transloco }}</p>\n            </div>\n        </div>\n    }\n</div>\n\n", styles: [":host{display:block;height:100%;min-height:0}.chat{background:#fff;height:100%;display:flex;flex-direction:column;min-height:0;width:100%;position:relative}.chat__flow{flex:1 1 auto;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:12px;padding:12px 16px;overscroll-behavior:contain}.chat__flow__empty{display:flex;gap:16px;flex-direction:column;align-items:center;justify-content:center;padding:72px 16px;height:100%}.chat__flow__empty .message__icon{width:56px;height:56px}.chat__flow__empty--header{width:285px;display:flex;gap:12px;flex-direction:column;align-items:center}.chat__flow__empty--title{margin:0;font:600 16px/20px inter,sans-serif;color:#212529}.chat__flow__empty--subscription{margin:0;font:400 16px/20px inter,sans-serif;color:#495057}.chat__start-day{display:flex;justify-content:center;background:#f8f9fa;color:#6c757d;font:400 12px/16px inter,sans-serif;width:80px;height:22px;margin:0 auto;border-radius:1000px;gap:8px;padding:4px 8px}.chat__scroll-button{position:absolute;right:8px;bottom:8px;width:35px;height:35px;display:inline-flex;align-items:center;justify-content:center;padding:8px;border:none;border-radius:1000px;background:#c9d4f4;box-shadow:0 2px 4px #0000001a;opacity:.6;cursor:pointer;transition:background-color .15s ease,opacity .15s ease}.chat__scroll-button:hover,.chat__scroll-button:focus-visible{background:#dee2e6;opacity:1}.chat__scroll-button img{display:block}.chat ::-webkit-scrollbar{width:6px}.chat ::-webkit-scrollbar-track{background:transparent}.chat ::-webkit-scrollbar-thumb{background-color:#e9ecef;border-radius:4px;border:1px solid #E9ECEF}.chat ::-webkit-scrollbar-button{display:none}\n"] }]
+                        ChatStartDayPipe,
+                        IonAlert,
+                    ], standalone: true, encapsulation: ViewEncapsulation.None, template: "<div class=\"chat\">\n    @if (messageList()) {\n        <div #chatFlowRef\n             class=\"chat__flow\"\n             infiniteScroll\n             [scrollWindow]=\"false\"\n             [infiniteScrollUpDistance]=\"Math.max(historyLoadThreshold(), 2)\"\n             [infiniteScrollThrottle]=\"100\"\n             (scrolledUp)=\"onScrollUp()\"\n        >\n            <div class=\"chat__manager-header\" aria-hidden=\"true\">\n                <div class=\"chat__manager-icon\">\n                    <img ngSrc=\"assets/ngx-parl/icons/avatar_manager.svg\"\n                         alt=\"manager\"\n                         width=\"72\"\n                         height=\"72\"/>\n                </div>\n            </div>\n\n            @for (message of messageList(); track trackByMessageId(i, message); let i = $index) {\n                @if (message | toggleDisplayChatStartDay: messageList() : i) {\n                    <span class=\"chat__start-day\">\n                        {{ message.cr_time | chatStartDay:'d MMMM' }}\n                    </span>\n                }\n\n                <div class=\"chat__message\" [attr.data-message-id]=\"message.id\">\n                    <lib-chat-message\n                        [currentMessage]=\"message\"\n                        [edit]=\"message.edit\"\n                        [mobileMode]=\"mobileMode()\"\n                        [quickActions]=\"quickActionsByMessageId().get(message.id) ?? []\"\n                        [quickActionClick]=\"quickActionClick()\"\n                        (quickActionClickChange)=\"quickActionClick.set($event)\"\n                        (editChange)=\"onEditChange(message.id, $event)\"\n                        (requestEditChange)=\"onRequestEdit($event)\"\n                        (requestDeleteChange)=\"onRequestDelete($event)\">\n                    </lib-chat-message>\n                </div>\n            }\n        </div>\n\n        <ion-alert mode=\"md\"\n                   [header]=\"'chat.delete_message_title' | transloco\"\n                   cssClass=\"chat__delete-alert\"\n                   [isOpen]=\"deleteConfirmOpen()\"\n                   [buttons]=\"deleteAlertButtons()\"\n                   (didDismiss)=\"closeDeleteConfirm()\"\n                   [backdropDismiss]=\"false\">\n        </ion-alert>\n\n        @if (showScrollToBottom()) {\n            <button class=\"chat__scroll-button\"\n                    type=\"button\"\n                    (click)=\"scrollToBottomSmooth()\"\n                    aria-label=\"Scroll to bottom\">\n                <img ngSrc=\"assets/ngx-parl/icons/bottom-scroll.svg\"\n                     alt=\"\"\n                     width=\"14\"\n                     height=\"14\"/>\n            </button>\n        }\n    } @else {\n        <div class=\"chat__flow__empty\">\n            <img ngSrc=\"assets/ngx-parl/icons/lucide_send.svg\"\n                 class=\"message__icon\"\n                 width=\"18\" height=\"24\" alt=\"hide\"/>\n\n\n            <div class=\"chat__flow__empty--header\">\n                <h3 class=\"chat__flow__empty--title\">{{ 'chat.chat_empty_title' | transloco }}</h3>\n                <p class=\"chat__flow__empty--subscription\">{{ 'chat.chat_empty_subscription' | transloco }}</p>\n            </div>\n        </div>\n    }\n</div>\n\n", styles: [":host{display:block;height:100%;min-height:0}.chat{background:#fff;height:100%;display:flex;flex-direction:column;min-height:0;width:100%;position:relative}.chat__flow{flex:1 1 auto;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:12px;padding:12px 16px;overscroll-behavior:contain}.chat__flow__empty{display:flex;gap:16px;flex-direction:column;align-items:center;justify-content:center;padding:72px 16px;height:100%}.chat__flow__empty .message__icon{width:56px;height:56px}.chat__flow__empty--header{width:285px;display:flex;gap:12px;flex-direction:column;align-items:center}.chat__flow__empty--title{margin:0;font:600 16px/20px inter,sans-serif;color:#212529}.chat__flow__empty--subscription{margin:0;font:400 16px/20px inter,sans-serif;color:#495057}.chat__manager-header{display:flex;justify-content:center;padding:24px 16px 8px}.chat__manager-icon{width:132px;height:132px;border-radius:1000px;display:grid;place-items:center}.chat__manager-icon img{display:block;border-radius:1000px}.chat__start-day{display:flex;justify-content:center;background:#f8f9fa;color:#6c757d;font:400 12px/16px inter,sans-serif;width:98px;height:22px;margin:0 auto;border-radius:1000px;gap:8px;padding:4px 8px}.chat__scroll-button{position:absolute;right:8px;bottom:8px;width:35px;height:35px;display:inline-flex;align-items:center;justify-content:center;padding:8px;border:none;border-radius:1000px;background:#c9d4f4;box-shadow:0 2px 4px #0000001a;opacity:.6;cursor:pointer;transition:background-color .15s ease,opacity .15s ease}.chat__scroll-button:hover,.chat__scroll-button:focus-visible{background:#dee2e6;opacity:1}.chat__scroll-button img{display:block}.chat ::-webkit-scrollbar{width:6px}.chat ::-webkit-scrollbar-track{background:transparent}.chat ::-webkit-scrollbar-thumb{background-color:#e9ecef;border-radius:4px;border:1px solid #E9ECEF}.chat ::-webkit-scrollbar-button{display:none}.chat__delete-alert{--background: #ffffff;--backdrop-opacity: .32;--max-width: 520px}.chat__delete-alert .alert-wrapper{border-radius:16px;box-shadow:0 10px 30px #00000026}.chat__delete-alert .alert-head{padding-top:18px}.chat__delete-alert .alert-title{color:#0f172a;font-weight:500}.chat__delete-alert .alert-button-group{padding:8px 12px 12px}.chat__delete-alert .alert-button{color:#2563eb;font-weight:500}.chat__delete-alert .alert-button-role-destructive,.chat__delete-alert .alert-button-role-destructive .alert-button-inner{color:#dc2626!important}\n"] }]
         }], ctorParameters: () => [], propDecorators: { flowRef: [{
                 type: ViewChild,
                 args: ['chatFlowRef']
-            }], scrollToBottomTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollToBottomTrigger", required: false }] }, { type: i0.Output, args: ["scrollToBottomTriggerChange"] }], loadHistory: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadHistory", required: false }] }, { type: i0.Output, args: ["loadHistoryChange"] }], messageListInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "messageListInput", required: true }] }, { type: i0.Output, args: ["messageListInputChange"] }], selectedForEdit: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedForEdit", required: true }] }, { type: i0.Output, args: ["selectedForEditChange"] }], requestDelete: [{ type: i0.Input, args: [{ isSignal: true, alias: "requestDelete", required: false }] }, { type: i0.Output, args: ["requestDeleteChange"] }] } });
+            }], scrollToBottomTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollToBottomTrigger", required: false }] }, { type: i0.Output, args: ["scrollToBottomTriggerChange"] }], loadHistory: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadHistory", required: false }] }, { type: i0.Output, args: ["loadHistoryChange"] }], messageListInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "messageListInput", required: true }] }, { type: i0.Output, args: ["messageListInputChange"] }], selectedForEdit: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedForEdit", required: true }] }, { type: i0.Output, args: ["selectedForEditChange"] }], requestDelete: [{ type: i0.Input, args: [{ isSignal: true, alias: "requestDelete", required: false }] }, { type: i0.Output, args: ["requestDeleteChange"] }], mobileMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mobileMode", required: false }] }], quickActionsResolver: [{ type: i0.Input, args: [{ isSignal: true, alias: "quickActionsResolver", required: false }] }], quickActionClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "quickActionClick", required: false }] }, { type: i0.Output, args: ["quickActionClickChange"] }] } });
 
 class ImageFile {
     id;
@@ -1064,6 +1204,10 @@ class NgxParlComponent {
     transportType = input('', ...(ngDevMode ? [{ debugName: "transportType" }] : []));
     transportTypeIcon = input('', ...(ngDevMode ? [{ debugName: "transportTypeIcon" }] : []));
     transportTypeIconSrc = computed(() => this.utils.normalizeSourcePath(this.transportTypeIcon()), ...(ngDevMode ? [{ debugName: "transportTypeIconSrc" }] : []));
+    mobileMode = input(false, ...(ngDevMode ? [{ debugName: "mobileMode" }] : []));
+    quickActionsResolver = input(null, ...(ngDevMode ? [{ debugName: "quickActionsResolver" }] : []));
+    quickActionClick = model(null, ...(ngDevMode ? [{ debugName: "quickActionClick" }] : []));
+    quickActionsAutoSend = input(true, ...(ngDevMode ? [{ debugName: "quickActionsAutoSend" }] : []));
     hideHandler = input(null, ...(ngDevMode ? [{ debugName: "hideHandler" }] : []));
     closeHandler = input(null, ...(ngDevMode ? [{ debugName: "closeHandler" }] : []));
     scrollToBottomTrigger = model(0, ...(ngDevMode ? [{ debugName: "scrollToBottomTrigger" }] : []));
@@ -1098,6 +1242,40 @@ class NgxParlComponent {
             });
             this.scrollToBottom();
         });
+        effect(() => {
+            const event = this.quickActionClick();
+            if (!event || !this.quickActionsAutoSend()) {
+                return;
+            }
+            const content = (event.value ?? '').trim();
+            if (!content) {
+                return;
+            }
+            setTimeout(() => {
+                try {
+                    this.sendMessage({ content });
+                }
+                catch (error) {
+                    console.error('Quick action send failed', error);
+                }
+            }, 0);
+        });
+    }
+    onQuickActionClick(event) {
+        this.quickActionClick.set(event);
+        if (!event) {
+            return this;
+        }
+        const content = (event.value ?? '').trim();
+        if (this.quickActionsAutoSend() && content) {
+            try {
+                this.sendMessage({ content });
+            }
+            catch (error) {
+                console.error('Quick action send failed', error);
+            }
+        }
+        return this;
     }
     ngAfterViewInit() {
         if (this.dialogRef) {
@@ -1230,6 +1408,7 @@ class NgxParlComponent {
                     file_list: [],
                     checked: true,
                     pending: true,
+                    actions: [],
                 };
                 this.messageList.update((list) => [...list, new ChatMessage(dto)]);
                 this.scrollToBottomTrigger.update(v => v + 1);
@@ -1277,6 +1456,7 @@ class NgxParlComponent {
             file_list: hasFileList ? file_list : [],
             checked: true,
             pending: true,
+            actions: [],
         };
         this.messageList.update((list) => [...list, new ChatMessage(dto)]);
         this.scrollToBottomTrigger.update(v => v + 1);
@@ -1358,7 +1538,7 @@ class NgxParlComponent {
     }
     FlowTheme = FlowTheme;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: NgxParlComponent, deps: [{ token: UtilsService }, { token: i2.TranslocoService }, { token: i3.MatDialogRef, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: NgxParlComponent, isStandalone: true, selector: "ngx-parl", inputs: { dragActive: { classPropertyName: "dragActive", publicName: "dragActive", isSignal: true, isRequired: false, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null }, header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, language: { classPropertyName: "language", publicName: "language", isSignal: true, isRequired: false, transformFunction: null }, messageList: { classPropertyName: "messageList", publicName: "messageList", isSignal: true, isRequired: false, transformFunction: null }, messageUpdate: { classPropertyName: "messageUpdate", publicName: "messageUpdate", isSignal: true, isRequired: false, transformFunction: null }, selectedForEdit: { classPropertyName: "selectedForEdit", publicName: "selectedForEdit", isSignal: true, isRequired: false, transformFunction: null }, messageAction: { classPropertyName: "messageAction", publicName: "messageAction", isSignal: true, isRequired: false, transformFunction: null }, incomingUser: { classPropertyName: "incomingUser", publicName: "incomingUser", isSignal: true, isRequired: false, transformFunction: null }, transportType: { classPropertyName: "transportType", publicName: "transportType", isSignal: true, isRequired: false, transformFunction: null }, transportTypeIcon: { classPropertyName: "transportTypeIcon", publicName: "transportTypeIcon", isSignal: true, isRequired: false, transformFunction: null }, hideHandler: { classPropertyName: "hideHandler", publicName: "hideHandler", isSignal: true, isRequired: false, transformFunction: null }, closeHandler: { classPropertyName: "closeHandler", publicName: "closeHandler", isSignal: true, isRequired: false, transformFunction: null }, scrollToBottomTrigger: { classPropertyName: "scrollToBottomTrigger", publicName: "scrollToBottomTrigger", isSignal: true, isRequired: false, transformFunction: null }, loadHistory: { classPropertyName: "loadHistory", publicName: "loadHistory", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dragActive: "dragActiveChange", messageList: "messageListChange", messageUpdate: "messageUpdateChange", selectedForEdit: "selectedForEditChange", messageAction: "messageActionChange", scrollToBottomTrigger: "scrollToBottomTriggerChange", loadHistory: "loadHistoryChange" }, providers: [], viewQueries: [{ propertyName: "chatFlow", first: true, predicate: ChatFlowComponent, descendants: true }, { propertyName: "inputMessage", first: true, predicate: InputMessageComponent, descendants: true }], ngImport: i0, template: "<div class=\"modal-chat\" [ngClass]=\"'flow-theme-' + theme()\">\n    <div class=\"modal-chat__body\">\n        @if (header()) {\n            <header class=\"modal-chat__header\" mat-dialog-title>\n                <div class=\"modal-chat__hide-block\"></div>\n\n                <div class=\"modal-chat__title\">\n                    <h1 class=\"modal-chat__heading\" id=\"modal-chat__heading\">\n                        @if (transportTypeIconSrc()) {\n                            <img [ngSrc]=\"transportTypeIconSrc()\"\n                                 class=\"modal-chat__heading-icon\"\n                                 width=\"20\"\n                                 height=\"20\"\n                                 [attr.alt]=\"transportType() || 'transport icon'\"/>\n                        }\n                        <span class=\"modal-chat__heading-text\">\n                            {{ transportType() }} {{ incomingUser() }}\n                        </span>\n                    </h1>\n                </div>\n\n                <div class=\"modal-chat__actions\">\n                    <img ngSrc=\"assets/ngx-parl/icons/hide.svg\" class=\"modal-chat__icon modal-chat__icon--hide\"\n                         width=\"24\" height=\"24\" alt=\"hide\"\n                         (click)=\"onHideClick()\"/>\n                    <img ngSrc=\"assets/ngx-parl/icons/close.svg\" class=\"modal-chat__icon modal-chat__icon--close\"\n                         width=\"24\" height=\"24\" alt=\"close\"\n                         (click)=\"onCloseClick()\"/>\n                </div>\n            </header>\n        }\n\n        <mat-dialog-content class=\"modal-chat__content\"\n                            [class.modal-chat__content--header]=\"header() === false\"\n                            [class.modal-chat__content--dragover]=\"dragActive()\"\n                            (dragenter)=\"onDragEnter($event)\"\n                            (dragover)=\"onDragOver($event)\"\n                            (dragleave)=\"onDragLeave($event)\"\n                            (drop)=\"onDrop($event)\">\n            @if (dragActive()) {\n                <div class=\"modal-chat__drag-overlay\"\n                     role=\"status\"\n                     aria-live=\"polite\"\n                     [attr.aria-label]=\"'chat.drag_title' | transloco\">\n                    <div class=\"modal-chat__drag-card\">\n                        <img ngSrc=\"assets/ngx-parl/icons/attach-filled.svg\"\n                             class=\"modal-chat__drag-icon\"\n                             alt=\"\"\n                             width=\"56\"\n                             height=\"56\"/>\n\n                        <div class=\"modal-chat__drag-title\">\n                            {{ 'chat.drag_title' | transloco }}\n                        </div>\n                        <div class=\"modal-chat__drag-subtitle\">\n                            {{ 'chat.drag_subtitle' | transloco }}\n                        </div>\n                    </div>\n                </div>\n            }\n            <app-chat-flow [messageListInput]=\"messageList()\"\n                           [(selectedForEdit)]=\"selectedForEdit\"\n                           (requestDeleteChange)=\"onRequestDelete($event)\"\n                           [(scrollToBottomTrigger)]=\"scrollToBottomTrigger\"\n                           [(loadHistory)]=\"loadHistory\">\n            </app-chat-flow>\n\n            <app-input-message [editMessage]=\"selectedForEdit()\"\n                               (cancelEditChange)=\"onCancelEdit($event)\"\n                               (input_textChange)=\"sendMessage($event)\">\n                @if (ai_run_in_progress) {\n                    <mat-spinner [diameter]=\"30\"></mat-spinner>\n                }\n            </app-input-message>\n        </mat-dialog-content>\n    </div>\n</div>\n", styles: [".flow-theme-primary ::ng-deep .modal-chat__header{background-color:#5a72d7;color:#fff}.flow-theme-primary ::ng-deep .message--incoming .message__body{background:#e9ecef;color:#343a40}.flow-theme-primary ::ng-deep .message--outgoing .message__body{background:#4656ca;color:#fff}:root{--shadow-sm: 0px 1px 2px 0px rgba(0, 0, 0, .05);--shadow-md: 0px 4px 12px rgba(0, 0, 0, .08);--shadow-lg: 0px 8px 24px rgba(0, 0, 0, .12);--shadow-soft: 0px 0px 6px 0px rgba(46, 46, 46, .12) }.flow-theme-secondary ::ng-deep .modal-chat__header{background-color:#848af5;color:#fefefe}.flow-theme-secondary ::ng-deep .message--incoming .message__body{background:#848af5;color:#fefefe}.flow-theme-secondary ::ng-deep .message--outgoing .message__body{background:#efefef;color:#464646}.modal-chat{width:800px;height:600px;border-radius:16px}.modal-chat__body{display:flex;flex-direction:column;height:100%}.modal-chat__header{height:56px;min-height:56px;max-height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;gap:12px;border-top-left-radius:16px;border-top-right-radius:16px;flex-direction:row}.modal-chat__hide-block{width:48px;color:#5a72d7}.modal-chat__title #modal-chat__heading{color:#fff;font:600 16px/20px inter,sans-serif;display:inline-flex;align-items:center;gap:8px}.modal-chat__heading-icon{width:20px;height:20px;border-radius:1000px;flex:0 0 auto}.modal-chat__actions{display:flex;gap:8px}.modal-chat__content{flex:1 1 auto;display:flex;flex-direction:column;background:#fff;border-bottom-left-radius:16px;border-bottom-right-radius:16px;transition:background-color .16s ease,box-shadow .16s ease;position:relative}.modal-chat__content--header{border-top-left-radius:16px;border-top-right-radius:16px}.modal-chat__content--dragover:after{content:\"\";position:absolute;inset:0;border-radius:inherit;box-shadow:0 0 0 2px #e9ecef inset;background:#fff0;pointer-events:none;z-index:1000}.modal-chat__content app-chat-flow{flex:1 1 auto;min-height:0px;overflow:auto;display:flex;align-items:flex-end}.modal-chat__drag-overlay{position:absolute;inset:16px;display:flex;align-items:center;justify-content:center;border-radius:16px;border:2px dashed #7A95E0;background:#ffffffeb;z-index:1000;pointer-events:none}.modal-chat__drag-card{display:flex;flex-direction:column;align-items:center;gap:8px;padding:20px 24px;border-radius:16px;background:#fff;box-shadow:0 2px 4px #0000001a;text-align:center}.modal-chat__drag-icon{filter:drop-shadow(0 2px 4px rgba(0,0,0,.2))}.modal-chat__drag-title{font:600 20px/24px inter,sans-serif;color:#4656ca}.modal-chat__drag-subtitle{font:400 14px/18px inter,sans-serif;color:#6c757d}.modal-chat__input{flex:0px 0px auto;border-bottom-left-radius:16px;border-bottom-right-radius:16px}:host ::ng-deep .mat-mdc-dialog-content.modal-chat__content{flex:1 1 auto;display:flex;flex-direction:column;padding:0;max-height:none;overflow:hidden}img{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "decoding", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "placeholder", "placeholderConfig", "src", "srcset"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: ChatFlowComponent, selector: "app-chat-flow", inputs: ["scrollToBottomTrigger", "loadHistory", "messageListInput", "selectedForEdit", "requestDelete"], outputs: ["scrollToBottomTriggerChange", "loadHistoryChange", "messageListInputChange", "selectedForEditChange", "requestDeleteChange"] }, { kind: "component", type: InputMessageComponent, selector: "app-input-message", inputs: ["editMessage", "cancelEdit", "input_text", "files", "previews", "messageEvent"], outputs: ["cancelEditChange", "input_textChange", "filesChange", "previewsChange", "messageEventChange"] }, { kind: "ngmodule", type: TranslocoModule }, { kind: "pipe", type: i2.TranslocoPipe, name: "transloco" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: NgxParlComponent, isStandalone: true, selector: "ngx-parl", inputs: { dragActive: { classPropertyName: "dragActive", publicName: "dragActive", isSignal: true, isRequired: false, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null }, header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, language: { classPropertyName: "language", publicName: "language", isSignal: true, isRequired: false, transformFunction: null }, messageList: { classPropertyName: "messageList", publicName: "messageList", isSignal: true, isRequired: false, transformFunction: null }, messageUpdate: { classPropertyName: "messageUpdate", publicName: "messageUpdate", isSignal: true, isRequired: false, transformFunction: null }, selectedForEdit: { classPropertyName: "selectedForEdit", publicName: "selectedForEdit", isSignal: true, isRequired: false, transformFunction: null }, messageAction: { classPropertyName: "messageAction", publicName: "messageAction", isSignal: true, isRequired: false, transformFunction: null }, incomingUser: { classPropertyName: "incomingUser", publicName: "incomingUser", isSignal: true, isRequired: false, transformFunction: null }, transportType: { classPropertyName: "transportType", publicName: "transportType", isSignal: true, isRequired: false, transformFunction: null }, transportTypeIcon: { classPropertyName: "transportTypeIcon", publicName: "transportTypeIcon", isSignal: true, isRequired: false, transformFunction: null }, mobileMode: { classPropertyName: "mobileMode", publicName: "mobileMode", isSignal: true, isRequired: false, transformFunction: null }, quickActionsResolver: { classPropertyName: "quickActionsResolver", publicName: "quickActionsResolver", isSignal: true, isRequired: false, transformFunction: null }, quickActionClick: { classPropertyName: "quickActionClick", publicName: "quickActionClick", isSignal: true, isRequired: false, transformFunction: null }, quickActionsAutoSend: { classPropertyName: "quickActionsAutoSend", publicName: "quickActionsAutoSend", isSignal: true, isRequired: false, transformFunction: null }, hideHandler: { classPropertyName: "hideHandler", publicName: "hideHandler", isSignal: true, isRequired: false, transformFunction: null }, closeHandler: { classPropertyName: "closeHandler", publicName: "closeHandler", isSignal: true, isRequired: false, transformFunction: null }, scrollToBottomTrigger: { classPropertyName: "scrollToBottomTrigger", publicName: "scrollToBottomTrigger", isSignal: true, isRequired: false, transformFunction: null }, loadHistory: { classPropertyName: "loadHistory", publicName: "loadHistory", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dragActive: "dragActiveChange", messageList: "messageListChange", messageUpdate: "messageUpdateChange", selectedForEdit: "selectedForEditChange", messageAction: "messageActionChange", quickActionClick: "quickActionClickChange", scrollToBottomTrigger: "scrollToBottomTriggerChange", loadHistory: "loadHistoryChange" }, providers: [], viewQueries: [{ propertyName: "chatFlow", first: true, predicate: ChatFlowComponent, descendants: true }, { propertyName: "inputMessage", first: true, predicate: InputMessageComponent, descendants: true }], ngImport: i0, template: "<div class=\"modal-chat\" [ngClass]=\"'flow-theme-' + theme()\">\r\n    <div class=\"modal-chat__body\">\r\n        @if (header()) {\r\n            <header class=\"modal-chat__header\" mat-dialog-title>\r\n                <div class=\"modal-chat__hide-block\"></div>\r\n\r\n                <div class=\"modal-chat__title\">\r\n                    <h1 class=\"modal-chat__heading\" id=\"modal-chat__heading\">\r\n                        @if (transportTypeIconSrc()) {\r\n                            <img [ngSrc]=\"transportTypeIconSrc()\"\r\n                                 class=\"modal-chat__heading-icon\"\r\n                                 width=\"20\"\r\n                                 height=\"20\"\r\n                                 [attr.alt]=\"transportType() || 'transport icon'\"/>\r\n                        }\r\n                        <span class=\"modal-chat__heading-text\">\r\n                            {{ transportType() }} {{ incomingUser() }}\r\n                        </span>\r\n                    </h1>\r\n                </div>\r\n\r\n                <div class=\"modal-chat__actions\">\r\n                    <img ngSrc=\"assets/ngx-parl/icons/hide.svg\" class=\"modal-chat__icon modal-chat__icon--hide\"\r\n                         width=\"24\" height=\"24\" alt=\"hide\"\r\n                         (click)=\"onHideClick()\"/>\r\n                    <img ngSrc=\"assets/ngx-parl/icons/close.svg\" class=\"modal-chat__icon modal-chat__icon--close\"\r\n                         width=\"24\" height=\"24\" alt=\"close\"\r\n                         (click)=\"onCloseClick()\"/>\r\n                </div>\r\n            </header>\r\n        }\r\n\r\n        <mat-dialog-content class=\"modal-chat__content\"\r\n                            [class.modal-chat__content--header]=\"header() === false\"\r\n                            [class.modal-chat__content--dragover]=\"dragActive()\"\r\n                            (dragenter)=\"onDragEnter($event)\"\r\n                            (dragover)=\"onDragOver($event)\"\r\n                            (dragleave)=\"onDragLeave($event)\"\r\n                            (drop)=\"onDrop($event)\">\r\n            @if (dragActive()) {\r\n                <div class=\"modal-chat__drag-overlay\"\r\n                     role=\"status\"\r\n                     aria-live=\"polite\"\r\n                     [attr.aria-label]=\"'chat.drag_title' | transloco\">\r\n                    <div class=\"modal-chat__drag-card\">\r\n                        <img ngSrc=\"assets/ngx-parl/icons/attach-filled.svg\"\r\n                             class=\"modal-chat__drag-icon\"\r\n                             alt=\"\"\r\n                             width=\"56\"\r\n                             height=\"56\"/>\r\n\r\n                        <div class=\"modal-chat__drag-title\">\r\n                            {{ 'chat.drag_title' | transloco }}\r\n                        </div>\r\n                        <div class=\"modal-chat__drag-subtitle\">\r\n                            {{ 'chat.drag_subtitle' | transloco }}\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            }\r\n            <app-chat-flow [messageListInput]=\"messageList()\"\r\n                           [(selectedForEdit)]=\"selectedForEdit\"\r\n                           (requestDeleteChange)=\"onRequestDelete($event)\"\r\n                           [mobileMode]=\"mobileMode()\"\r\n                           [quickActionsResolver]=\"quickActionsResolver()\"\r\n                           [quickActionClick]=\"quickActionClick()\"\r\n                           (quickActionClickChange)=\"onQuickActionClick($event)\"\r\n                           [(scrollToBottomTrigger)]=\"scrollToBottomTrigger\"\r\n                           [(loadHistory)]=\"loadHistory\">\r\n            </app-chat-flow>\r\n\r\n            <app-input-message [editMessage]=\"selectedForEdit()\"\r\n                               (cancelEditChange)=\"onCancelEdit($event)\"\r\n                               (input_textChange)=\"sendMessage($event)\">\r\n                @if (ai_run_in_progress) {\r\n                    <mat-spinner [diameter]=\"30\"></mat-spinner>\r\n                }\r\n            </app-input-message>\r\n        </mat-dialog-content>\r\n    </div>\r\n</div>\r\n", styles: [".flow-theme-primary ::ng-deep .modal-chat__header{background-color:#5a72d7;color:#fff}.flow-theme-primary ::ng-deep .message--incoming .message__body{background:#e9ecef;color:#343a40}.flow-theme-primary ::ng-deep .message--outgoing .message__body{background:#4656ca;color:#fff}:root{--shadow-sm: 0px 1px 2px 0px rgba(0, 0, 0, .05);--shadow-md: 0px 4px 12px rgba(0, 0, 0, .08);--shadow-lg: 0px 8px 24px rgba(0, 0, 0, .12);--shadow-soft: 0px 0px 6px 0px rgba(46, 46, 46, .12) }.flow-theme-secondary ::ng-deep .modal-chat__header{background-color:#848af5;color:#fefefe}.flow-theme-secondary ::ng-deep .message--incoming .message__body{background:#848af5;color:#fefefe}.flow-theme-secondary ::ng-deep .message--outgoing .message__body{background:#efefef;color:#464646}.modal-chat{width:800px;height:600px;border-radius:16px}.modal-chat__body{display:flex;flex-direction:column;height:100%}.modal-chat__header{height:56px;min-height:56px;max-height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;gap:12px;border-top-left-radius:16px;border-top-right-radius:16px;flex-direction:row}.modal-chat__hide-block{width:48px;color:#5a72d7}.modal-chat__title #modal-chat__heading{color:#fff;font:600 16px/20px inter,sans-serif;display:inline-flex;align-items:center;gap:8px}.modal-chat__heading-icon{width:20px;height:20px;border-radius:1000px;flex:0 0 auto}.modal-chat__actions{display:flex;gap:8px}.modal-chat__content{flex:1 1 auto;display:flex;flex-direction:column;background:#fff;border-bottom-left-radius:16px;border-bottom-right-radius:16px;transition:background-color .16s ease,box-shadow .16s ease;position:relative}.modal-chat__content--header{border-top-left-radius:16px;border-top-right-radius:16px}.modal-chat__content--dragover:after{content:\"\";position:absolute;inset:0;border-radius:inherit;box-shadow:0 0 0 2px #e9ecef inset;background:#fff0;pointer-events:none;z-index:1000}.modal-chat__content app-chat-flow{flex:1 1 auto;min-height:0px;overflow:auto;display:flex;align-items:flex-end}.modal-chat__drag-overlay{position:absolute;inset:16px;display:flex;align-items:center;justify-content:center;border-radius:16px;border:2px dashed #7A95E0;background:#ffffffeb;z-index:1000;pointer-events:none}.modal-chat__drag-card{display:flex;flex-direction:column;align-items:center;gap:8px;padding:20px 24px;border-radius:16px;background:#fff;box-shadow:0 2px 4px #0000001a;text-align:center}.modal-chat__drag-icon{filter:drop-shadow(0 2px 4px rgba(0,0,0,.2))}.modal-chat__drag-title{font:600 20px/24px inter,sans-serif;color:#4656ca}.modal-chat__drag-subtitle{font:400 14px/18px inter,sans-serif;color:#6c757d}.modal-chat__input{flex:0px 0px auto;border-bottom-left-radius:16px;border-bottom-right-radius:16px}:host ::ng-deep .mat-mdc-dialog-content.modal-chat__content{flex:1 1 auto;display:flex;flex-direction:column;padding:0;max-height:none;overflow:hidden}img{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "decoding", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "placeholder", "placeholderConfig", "src", "srcset"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: ChatFlowComponent, selector: "app-chat-flow", inputs: ["scrollToBottomTrigger", "loadHistory", "messageListInput", "selectedForEdit", "requestDelete", "mobileMode", "quickActionsResolver", "quickActionClick"], outputs: ["scrollToBottomTriggerChange", "loadHistoryChange", "messageListInputChange", "selectedForEditChange", "requestDeleteChange", "quickActionClickChange"] }, { kind: "component", type: InputMessageComponent, selector: "app-input-message", inputs: ["editMessage", "cancelEdit", "input_text", "files", "previews", "messageEvent"], outputs: ["cancelEditChange", "input_textChange", "filesChange", "previewsChange", "messageEventChange"] }, { kind: "ngmodule", type: TranslocoModule }, { kind: "pipe", type: i2.TranslocoPipe, name: "transloco" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: NgxParlComponent, decorators: [{
             type: Component,
@@ -1366,7 +1546,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                         NgOptimizedImage, NgClass, MatDialogContent, MatDialogTitle, MatProgressSpinner, ChatFlowComponent, InputMessageComponent,
                         TranslocoModule,
                         TranslocoPipe
-                    ], providers: [], template: "<div class=\"modal-chat\" [ngClass]=\"'flow-theme-' + theme()\">\n    <div class=\"modal-chat__body\">\n        @if (header()) {\n            <header class=\"modal-chat__header\" mat-dialog-title>\n                <div class=\"modal-chat__hide-block\"></div>\n\n                <div class=\"modal-chat__title\">\n                    <h1 class=\"modal-chat__heading\" id=\"modal-chat__heading\">\n                        @if (transportTypeIconSrc()) {\n                            <img [ngSrc]=\"transportTypeIconSrc()\"\n                                 class=\"modal-chat__heading-icon\"\n                                 width=\"20\"\n                                 height=\"20\"\n                                 [attr.alt]=\"transportType() || 'transport icon'\"/>\n                        }\n                        <span class=\"modal-chat__heading-text\">\n                            {{ transportType() }} {{ incomingUser() }}\n                        </span>\n                    </h1>\n                </div>\n\n                <div class=\"modal-chat__actions\">\n                    <img ngSrc=\"assets/ngx-parl/icons/hide.svg\" class=\"modal-chat__icon modal-chat__icon--hide\"\n                         width=\"24\" height=\"24\" alt=\"hide\"\n                         (click)=\"onHideClick()\"/>\n                    <img ngSrc=\"assets/ngx-parl/icons/close.svg\" class=\"modal-chat__icon modal-chat__icon--close\"\n                         width=\"24\" height=\"24\" alt=\"close\"\n                         (click)=\"onCloseClick()\"/>\n                </div>\n            </header>\n        }\n\n        <mat-dialog-content class=\"modal-chat__content\"\n                            [class.modal-chat__content--header]=\"header() === false\"\n                            [class.modal-chat__content--dragover]=\"dragActive()\"\n                            (dragenter)=\"onDragEnter($event)\"\n                            (dragover)=\"onDragOver($event)\"\n                            (dragleave)=\"onDragLeave($event)\"\n                            (drop)=\"onDrop($event)\">\n            @if (dragActive()) {\n                <div class=\"modal-chat__drag-overlay\"\n                     role=\"status\"\n                     aria-live=\"polite\"\n                     [attr.aria-label]=\"'chat.drag_title' | transloco\">\n                    <div class=\"modal-chat__drag-card\">\n                        <img ngSrc=\"assets/ngx-parl/icons/attach-filled.svg\"\n                             class=\"modal-chat__drag-icon\"\n                             alt=\"\"\n                             width=\"56\"\n                             height=\"56\"/>\n\n                        <div class=\"modal-chat__drag-title\">\n                            {{ 'chat.drag_title' | transloco }}\n                        </div>\n                        <div class=\"modal-chat__drag-subtitle\">\n                            {{ 'chat.drag_subtitle' | transloco }}\n                        </div>\n                    </div>\n                </div>\n            }\n            <app-chat-flow [messageListInput]=\"messageList()\"\n                           [(selectedForEdit)]=\"selectedForEdit\"\n                           (requestDeleteChange)=\"onRequestDelete($event)\"\n                           [(scrollToBottomTrigger)]=\"scrollToBottomTrigger\"\n                           [(loadHistory)]=\"loadHistory\">\n            </app-chat-flow>\n\n            <app-input-message [editMessage]=\"selectedForEdit()\"\n                               (cancelEditChange)=\"onCancelEdit($event)\"\n                               (input_textChange)=\"sendMessage($event)\">\n                @if (ai_run_in_progress) {\n                    <mat-spinner [diameter]=\"30\"></mat-spinner>\n                }\n            </app-input-message>\n        </mat-dialog-content>\n    </div>\n</div>\n", styles: [".flow-theme-primary ::ng-deep .modal-chat__header{background-color:#5a72d7;color:#fff}.flow-theme-primary ::ng-deep .message--incoming .message__body{background:#e9ecef;color:#343a40}.flow-theme-primary ::ng-deep .message--outgoing .message__body{background:#4656ca;color:#fff}:root{--shadow-sm: 0px 1px 2px 0px rgba(0, 0, 0, .05);--shadow-md: 0px 4px 12px rgba(0, 0, 0, .08);--shadow-lg: 0px 8px 24px rgba(0, 0, 0, .12);--shadow-soft: 0px 0px 6px 0px rgba(46, 46, 46, .12) }.flow-theme-secondary ::ng-deep .modal-chat__header{background-color:#848af5;color:#fefefe}.flow-theme-secondary ::ng-deep .message--incoming .message__body{background:#848af5;color:#fefefe}.flow-theme-secondary ::ng-deep .message--outgoing .message__body{background:#efefef;color:#464646}.modal-chat{width:800px;height:600px;border-radius:16px}.modal-chat__body{display:flex;flex-direction:column;height:100%}.modal-chat__header{height:56px;min-height:56px;max-height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;gap:12px;border-top-left-radius:16px;border-top-right-radius:16px;flex-direction:row}.modal-chat__hide-block{width:48px;color:#5a72d7}.modal-chat__title #modal-chat__heading{color:#fff;font:600 16px/20px inter,sans-serif;display:inline-flex;align-items:center;gap:8px}.modal-chat__heading-icon{width:20px;height:20px;border-radius:1000px;flex:0 0 auto}.modal-chat__actions{display:flex;gap:8px}.modal-chat__content{flex:1 1 auto;display:flex;flex-direction:column;background:#fff;border-bottom-left-radius:16px;border-bottom-right-radius:16px;transition:background-color .16s ease,box-shadow .16s ease;position:relative}.modal-chat__content--header{border-top-left-radius:16px;border-top-right-radius:16px}.modal-chat__content--dragover:after{content:\"\";position:absolute;inset:0;border-radius:inherit;box-shadow:0 0 0 2px #e9ecef inset;background:#fff0;pointer-events:none;z-index:1000}.modal-chat__content app-chat-flow{flex:1 1 auto;min-height:0px;overflow:auto;display:flex;align-items:flex-end}.modal-chat__drag-overlay{position:absolute;inset:16px;display:flex;align-items:center;justify-content:center;border-radius:16px;border:2px dashed #7A95E0;background:#ffffffeb;z-index:1000;pointer-events:none}.modal-chat__drag-card{display:flex;flex-direction:column;align-items:center;gap:8px;padding:20px 24px;border-radius:16px;background:#fff;box-shadow:0 2px 4px #0000001a;text-align:center}.modal-chat__drag-icon{filter:drop-shadow(0 2px 4px rgba(0,0,0,.2))}.modal-chat__drag-title{font:600 20px/24px inter,sans-serif;color:#4656ca}.modal-chat__drag-subtitle{font:400 14px/18px inter,sans-serif;color:#6c757d}.modal-chat__input{flex:0px 0px auto;border-bottom-left-radius:16px;border-bottom-right-radius:16px}:host ::ng-deep .mat-mdc-dialog-content.modal-chat__content{flex:1 1 auto;display:flex;flex-direction:column;padding:0;max-height:none;overflow:hidden}img{cursor:pointer}\n"] }]
+                    ], providers: [], template: "<div class=\"modal-chat\" [ngClass]=\"'flow-theme-' + theme()\">\r\n    <div class=\"modal-chat__body\">\r\n        @if (header()) {\r\n            <header class=\"modal-chat__header\" mat-dialog-title>\r\n                <div class=\"modal-chat__hide-block\"></div>\r\n\r\n                <div class=\"modal-chat__title\">\r\n                    <h1 class=\"modal-chat__heading\" id=\"modal-chat__heading\">\r\n                        @if (transportTypeIconSrc()) {\r\n                            <img [ngSrc]=\"transportTypeIconSrc()\"\r\n                                 class=\"modal-chat__heading-icon\"\r\n                                 width=\"20\"\r\n                                 height=\"20\"\r\n                                 [attr.alt]=\"transportType() || 'transport icon'\"/>\r\n                        }\r\n                        <span class=\"modal-chat__heading-text\">\r\n                            {{ transportType() }} {{ incomingUser() }}\r\n                        </span>\r\n                    </h1>\r\n                </div>\r\n\r\n                <div class=\"modal-chat__actions\">\r\n                    <img ngSrc=\"assets/ngx-parl/icons/hide.svg\" class=\"modal-chat__icon modal-chat__icon--hide\"\r\n                         width=\"24\" height=\"24\" alt=\"hide\"\r\n                         (click)=\"onHideClick()\"/>\r\n                    <img ngSrc=\"assets/ngx-parl/icons/close.svg\" class=\"modal-chat__icon modal-chat__icon--close\"\r\n                         width=\"24\" height=\"24\" alt=\"close\"\r\n                         (click)=\"onCloseClick()\"/>\r\n                </div>\r\n            </header>\r\n        }\r\n\r\n        <mat-dialog-content class=\"modal-chat__content\"\r\n                            [class.modal-chat__content--header]=\"header() === false\"\r\n                            [class.modal-chat__content--dragover]=\"dragActive()\"\r\n                            (dragenter)=\"onDragEnter($event)\"\r\n                            (dragover)=\"onDragOver($event)\"\r\n                            (dragleave)=\"onDragLeave($event)\"\r\n                            (drop)=\"onDrop($event)\">\r\n            @if (dragActive()) {\r\n                <div class=\"modal-chat__drag-overlay\"\r\n                     role=\"status\"\r\n                     aria-live=\"polite\"\r\n                     [attr.aria-label]=\"'chat.drag_title' | transloco\">\r\n                    <div class=\"modal-chat__drag-card\">\r\n                        <img ngSrc=\"assets/ngx-parl/icons/attach-filled.svg\"\r\n                             class=\"modal-chat__drag-icon\"\r\n                             alt=\"\"\r\n                             width=\"56\"\r\n                             height=\"56\"/>\r\n\r\n                        <div class=\"modal-chat__drag-title\">\r\n                            {{ 'chat.drag_title' | transloco }}\r\n                        </div>\r\n                        <div class=\"modal-chat__drag-subtitle\">\r\n                            {{ 'chat.drag_subtitle' | transloco }}\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            }\r\n            <app-chat-flow [messageListInput]=\"messageList()\"\r\n                           [(selectedForEdit)]=\"selectedForEdit\"\r\n                           (requestDeleteChange)=\"onRequestDelete($event)\"\r\n                           [mobileMode]=\"mobileMode()\"\r\n                           [quickActionsResolver]=\"quickActionsResolver()\"\r\n                           [quickActionClick]=\"quickActionClick()\"\r\n                           (quickActionClickChange)=\"onQuickActionClick($event)\"\r\n                           [(scrollToBottomTrigger)]=\"scrollToBottomTrigger\"\r\n                           [(loadHistory)]=\"loadHistory\">\r\n            </app-chat-flow>\r\n\r\n            <app-input-message [editMessage]=\"selectedForEdit()\"\r\n                               (cancelEditChange)=\"onCancelEdit($event)\"\r\n                               (input_textChange)=\"sendMessage($event)\">\r\n                @if (ai_run_in_progress) {\r\n                    <mat-spinner [diameter]=\"30\"></mat-spinner>\r\n                }\r\n            </app-input-message>\r\n        </mat-dialog-content>\r\n    </div>\r\n</div>\r\n", styles: [".flow-theme-primary ::ng-deep .modal-chat__header{background-color:#5a72d7;color:#fff}.flow-theme-primary ::ng-deep .message--incoming .message__body{background:#e9ecef;color:#343a40}.flow-theme-primary ::ng-deep .message--outgoing .message__body{background:#4656ca;color:#fff}:root{--shadow-sm: 0px 1px 2px 0px rgba(0, 0, 0, .05);--shadow-md: 0px 4px 12px rgba(0, 0, 0, .08);--shadow-lg: 0px 8px 24px rgba(0, 0, 0, .12);--shadow-soft: 0px 0px 6px 0px rgba(46, 46, 46, .12) }.flow-theme-secondary ::ng-deep .modal-chat__header{background-color:#848af5;color:#fefefe}.flow-theme-secondary ::ng-deep .message--incoming .message__body{background:#848af5;color:#fefefe}.flow-theme-secondary ::ng-deep .message--outgoing .message__body{background:#efefef;color:#464646}.modal-chat{width:800px;height:600px;border-radius:16px}.modal-chat__body{display:flex;flex-direction:column;height:100%}.modal-chat__header{height:56px;min-height:56px;max-height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;gap:12px;border-top-left-radius:16px;border-top-right-radius:16px;flex-direction:row}.modal-chat__hide-block{width:48px;color:#5a72d7}.modal-chat__title #modal-chat__heading{color:#fff;font:600 16px/20px inter,sans-serif;display:inline-flex;align-items:center;gap:8px}.modal-chat__heading-icon{width:20px;height:20px;border-radius:1000px;flex:0 0 auto}.modal-chat__actions{display:flex;gap:8px}.modal-chat__content{flex:1 1 auto;display:flex;flex-direction:column;background:#fff;border-bottom-left-radius:16px;border-bottom-right-radius:16px;transition:background-color .16s ease,box-shadow .16s ease;position:relative}.modal-chat__content--header{border-top-left-radius:16px;border-top-right-radius:16px}.modal-chat__content--dragover:after{content:\"\";position:absolute;inset:0;border-radius:inherit;box-shadow:0 0 0 2px #e9ecef inset;background:#fff0;pointer-events:none;z-index:1000}.modal-chat__content app-chat-flow{flex:1 1 auto;min-height:0px;overflow:auto;display:flex;align-items:flex-end}.modal-chat__drag-overlay{position:absolute;inset:16px;display:flex;align-items:center;justify-content:center;border-radius:16px;border:2px dashed #7A95E0;background:#ffffffeb;z-index:1000;pointer-events:none}.modal-chat__drag-card{display:flex;flex-direction:column;align-items:center;gap:8px;padding:20px 24px;border-radius:16px;background:#fff;box-shadow:0 2px 4px #0000001a;text-align:center}.modal-chat__drag-icon{filter:drop-shadow(0 2px 4px rgba(0,0,0,.2))}.modal-chat__drag-title{font:600 20px/24px inter,sans-serif;color:#4656ca}.modal-chat__drag-subtitle{font:400 14px/18px inter,sans-serif;color:#6c757d}.modal-chat__input{flex:0px 0px auto;border-bottom-left-radius:16px;border-bottom-right-radius:16px}:host ::ng-deep .mat-mdc-dialog-content.modal-chat__content{flex:1 1 auto;display:flex;flex-direction:column;padding:0;max-height:none;overflow:hidden}img{cursor:pointer}\n"] }]
         }], ctorParameters: () => [{ type: UtilsService }, { type: i2.TranslocoService }, { type: i3.MatDialogRef, decorators: [{
                     type: Optional
                 }] }], propDecorators: { chatFlow: [{
@@ -1375,7 +1555,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
             }], inputMessage: [{
                 type: ViewChild,
                 args: [InputMessageComponent]
-            }], dragActive: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragActive", required: false }] }, { type: i0.Output, args: ["dragActiveChange"] }], theme: [{ type: i0.Input, args: [{ isSignal: true, alias: "theme", required: false }] }], header: [{ type: i0.Input, args: [{ isSignal: true, alias: "header", required: false }] }], language: [{ type: i0.Input, args: [{ isSignal: true, alias: "language", required: false }] }], messageList: [{ type: i0.Input, args: [{ isSignal: true, alias: "messageList", required: false }] }, { type: i0.Output, args: ["messageListChange"] }], messageUpdate: [{ type: i0.Input, args: [{ isSignal: true, alias: "messageUpdate", required: false }] }, { type: i0.Output, args: ["messageUpdateChange"] }], selectedForEdit: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedForEdit", required: false }] }, { type: i0.Output, args: ["selectedForEditChange"] }], messageAction: [{ type: i0.Input, args: [{ isSignal: true, alias: "messageAction", required: false }] }, { type: i0.Output, args: ["messageActionChange"] }], incomingUser: [{ type: i0.Input, args: [{ isSignal: true, alias: "incomingUser", required: false }] }], transportType: [{ type: i0.Input, args: [{ isSignal: true, alias: "transportType", required: false }] }], transportTypeIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "transportTypeIcon", required: false }] }], hideHandler: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideHandler", required: false }] }], closeHandler: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeHandler", required: false }] }], scrollToBottomTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollToBottomTrigger", required: false }] }, { type: i0.Output, args: ["scrollToBottomTriggerChange"] }], loadHistory: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadHistory", required: false }] }, { type: i0.Output, args: ["loadHistoryChange"] }] } });
+            }], dragActive: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragActive", required: false }] }, { type: i0.Output, args: ["dragActiveChange"] }], theme: [{ type: i0.Input, args: [{ isSignal: true, alias: "theme", required: false }] }], header: [{ type: i0.Input, args: [{ isSignal: true, alias: "header", required: false }] }], language: [{ type: i0.Input, args: [{ isSignal: true, alias: "language", required: false }] }], messageList: [{ type: i0.Input, args: [{ isSignal: true, alias: "messageList", required: false }] }, { type: i0.Output, args: ["messageListChange"] }], messageUpdate: [{ type: i0.Input, args: [{ isSignal: true, alias: "messageUpdate", required: false }] }, { type: i0.Output, args: ["messageUpdateChange"] }], selectedForEdit: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedForEdit", required: false }] }, { type: i0.Output, args: ["selectedForEditChange"] }], messageAction: [{ type: i0.Input, args: [{ isSignal: true, alias: "messageAction", required: false }] }, { type: i0.Output, args: ["messageActionChange"] }], incomingUser: [{ type: i0.Input, args: [{ isSignal: true, alias: "incomingUser", required: false }] }], transportType: [{ type: i0.Input, args: [{ isSignal: true, alias: "transportType", required: false }] }], transportTypeIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "transportTypeIcon", required: false }] }], mobileMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mobileMode", required: false }] }], quickActionsResolver: [{ type: i0.Input, args: [{ isSignal: true, alias: "quickActionsResolver", required: false }] }], quickActionClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "quickActionClick", required: false }] }, { type: i0.Output, args: ["quickActionClickChange"] }], quickActionsAutoSend: [{ type: i0.Input, args: [{ isSignal: true, alias: "quickActionsAutoSend", required: false }] }], hideHandler: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideHandler", required: false }] }], closeHandler: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeHandler", required: false }] }], scrollToBottomTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollToBottomTrigger", required: false }] }, { type: i0.Output, args: ["scrollToBottomTriggerChange"] }], loadHistory: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadHistory", required: false }] }, { type: i0.Output, args: ["loadHistoryChange"] }] } });
 
 var chat$1 = {
 	title: "Telegram",
@@ -1390,6 +1570,8 @@ var chat$1 = {
 	video: "Video",
 	edit: "Edit",
 	remove: "Delete",
+	cancel: "Cancel",
+	delete_message_title: "Delete this message?",
 	chat_empty_title: "No messages",
 	chat_empty_subscription: "Your chat history will be displayed here. Write your first message to get started!",
 	photo_preview: "Photo preview",
@@ -1417,6 +1599,8 @@ var chat = {
 	video: "Відео",
 	edit: "Редагувати",
 	remove: "Видалити",
+	cancel: "Скасувати",
+	delete_message_title: "Видалити це повідомлення?",
 	chat_empty_title: "Повідомлень ще немає",
 	chat_empty_subscription: "Тут буде відображатись ваша історія спілкування. Напишіть перше повідомлення, щоб почати!",
 	photo_preview: "Перегляд фото",
@@ -1464,5 +1648,5 @@ function provideNgxParl() {
  * Generated bundle index. Do not edit.
  */
 
-export { NgxParlComponent, provideNgxParl };
+export { ChatMessage, MessageType, NgxParlComponent, defaultParlQuickActionsResolver, messageHasActionButtons, provideNgxParl, resolveParlQuickActions };
 //# sourceMappingURL=trixwell-ngx-parl.mjs.map