cax-design-system 2.7.10 → 2.7.12

package/fesm2022/cax-design-system-commentbox.mjs

@@ -22,15 +22,25 @@ import { Sidebar } from 'cax-design-system/sidebar';
 
 class CommentboxComponent {
     sanitizer;
-    comments = [];
+    ngZone;
+    _comments = [];
+    set comments(value) {
+        this._comments = Array.isArray(value) ? value : [];
+        this.recomputeGroupedComments();
+    }
+    get comments() {
+        return this._comments;
+    }
     mentionSuggestions = [];
     hashtagSuggestions = [];
     sidebarHeader;
     isAdmin = true;
+    placeholder = 'Comment or mention others with @, ‘#’ for columns';
     commentAdded = new EventEmitter();
     fileSelected = new EventEmitter();
     fileDownload = new EventEmitter();
     visibleChange = new EventEmitter();
+    onSidebarHide = new EventEmitter();
     newComment = '';
     isMentioning = false;
     isHashtagging = false;
@@ -48,6 +58,7 @@ class CommentboxComponent {
     selectedFiles = [];
     selectedFilesMap = new Map();
     today = new Date();
+    groupedCommentsCache = [];
     overlayVisible = false;
     filesOverlayVisible = false;
     overlayPosition = { top: 0, left: 0 };
@@ -57,23 +68,37 @@ class CommentboxComponent {
     isUserScrolling = false;
     // Add new property for mutation observer
     observer;
-    constructor(sanitizer) {
+    scrollQueued = false;
+    constructor(sanitizer, ngZone) {
         this.sanitizer = sanitizer;
+        this.ngZone = ngZone;
         this.updateCurrentDate();
-        this.dateUpdateInterval = setInterval(() => this.updateCurrentDate(), 60000);
-        // Initialize observer
-        this.observer = new MutationObserver(() => this.forceScrollToBottom());
+        // Run the interval outside Angular to avoid frequent change detection in docs/canvas
+        this.ngZone.runOutsideAngular(() => {
+            this.dateUpdateInterval = setInterval(() => {
+                this.ngZone.run(() => this.updateCurrentDate());
+            }, 60000);
+        });
     }
     ngAfterViewInit() {
         setTimeout(() => {
             this.forceScrollToBottom();
         }, 100);
-        // Set up observer to auto-scroll when content changes
+        // Set up observer to auto-scroll when content changes (outside Angular)
         if (this.commentsList?.nativeElement) {
-            this.observer.observe(this.commentsList.nativeElement, {
-                childList: true,
-                subtree: true,
-                characterData: true
+            this.ngZone.runOutsideAngular(() => {
+                this.observer = new MutationObserver(() => {
+                    if (this.scrollQueued)
+                        return;
+                    this.scrollQueued = true;
+                    requestAnimationFrame(() => {
+                        this.forceScrollToBottom();
+                        this.scrollQueued = false;
+                    });
+                });
+                this.observer.observe(this.commentsList.nativeElement, {
+                    childList: true
+                });
             });
         }
     }
@@ -82,7 +107,8 @@ class CommentboxComponent {
             clearInterval(this.dateUpdateInterval);
         }
         // Disconnect the observer
-        this.observer.disconnect();
+        if (this.observer)
+            this.observer.disconnect();
         // Remove event listeners
         document.removeEventListener('click', this.handleClickOutside);
     }
@@ -132,21 +158,19 @@ class CommentboxComponent {
             }
             // Always scroll to bottom immediately
             this.scrollToBottom(true);
+            this.recomputeGroupedComments();
         }
     }
     forceScrollToBottom() {
         if (!this.commentsList?.nativeElement)
             return;
         const element = this.commentsList.nativeElement;
-        requestAnimationFrame(() => {
-            try {
-                // Force immediate scroll
-                element.scrollTop = element.scrollHeight;
-            }
-            catch (err) {
-                console.error('Scroll error:', err);
-            }
-        });
+        try {
+            element.scrollTop = element.scrollHeight;
+        }
+        catch {
+            // no-op
+        }
     }
     scrollToBottom(force = false) {
         if (force) {
@@ -156,28 +180,20 @@ class CommentboxComponent {
         if (!this.commentsList?.nativeElement)
             return;
         const element = this.commentsList.nativeElement;
-        // Use double RAF for reliable scrolling
+        // Single RAF to avoid nested scheduling overhead in Storybook
         requestAnimationFrame(() => {
-            requestAnimationFrame(() => {
-                try {
-                    // Force immediate scroll for new comments
-                    element.scrollTop = element.scrollHeight;
-                    // Use smooth scrolling after initial jump
-                    element.scrollTo({
-                        top: element.scrollHeight,
-                        behavior: 'smooth'
-                    });
-                }
-                catch (err) {
-                    element.scrollTop = element.scrollHeight;
-                }
-            });
+            try {
+                element.scrollTop = element.scrollHeight;
+                element.scrollTo({ top: element.scrollHeight });
+            }
+            catch {
+                element.scrollTop = element.scrollHeight;
+            }
         });
     }
     set visible(value) {
         if (this._visible !== value) {
             this._visible = value;
-            this.visibleChange.emit(this._visible);
             if (this._visible) {
                 this.shouldAutoScroll = true;
                 setTimeout(() => this.scrollToBottom(true), 300);
@@ -189,11 +205,30 @@ class CommentboxComponent {
     }
     _visible = false;
     toggleComments() {
-        this.visible = !this.visible;
+        if (this._visible) {
+            this.hideComments();
+        }
+        else {
+            this.showComments();
+        }
+    }
+    showComments() {
+        if (!this._visible) {
+            this._visible = true;
+            this.visibleChange.emit(true);
+            this.shouldAutoScroll = true;
+            setTimeout(() => this.scrollToBottom(true), 300);
+        }
+    }
+    hideComments() {
+        if (this._visible) {
+            this._visible = false;
+            this.visibleChange.emit(false);
+            this.onSidebarHide.emit();
+        }
     }
-    onSidebarHide() {
-        this._visible = false;
-        this.visibleChange.emit(false);
+    handleSidebarHide() {
+        this.hideComments();
     }
     onDocumentClick(event) {
         const target = event.target;
@@ -470,12 +505,11 @@ class CommentboxComponent {
     onFileDownload(file) {
         this.fileDownload.emit(file);
     }
-    get groupedComments() {
-        return this.comments
-            .reduce((groups, comment) => {
+    recomputeGroupedComments() {
+        const groups = this._comments.reduce((acc, comment) => {
             const commentDate = new Date(comment.date);
             commentDate.setHours(0, 0, 0, 0);
-            const existingGroup = groups.find((group) => {
+            const existingGroup = acc.find((group) => {
                 const groupDate = new Date(group.date);
                 groupDate.setHours(0, 0, 0, 0);
                 return groupDate.getTime() === commentDate.getTime();
@@ -484,14 +518,11 @@ class CommentboxComponent {
                 existingGroup.items.push(comment);
             }
             else {
-                groups.push({
-                    date: commentDate,
-                    items: [comment]
-                });
+                acc.push({ date: commentDate, items: [comment] });
             }
-            return groups;
-        }, [])
-            .sort((a, b) => a.date.getTime() - b.date.getTime());
+            return acc;
+        }, []);
+        this.groupedCommentsCache = groups.sort((a, b) => a.date.getTime() - b.date.getTime());
     }
     getShortFileName(filename) {
         if (filename.length <= 4)
@@ -503,13 +534,13 @@ class CommentboxComponent {
         const namePart = filename.substring(0, lastDotIndex !== -1 ? lastDotIndex : filename.length);
         return namePart.substring(0, 4) + '..' + extension;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: CommentboxComponent, deps: [{ token: i1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: CommentboxComponent, selector: "cax-comments", inputs: { comments: "comments", mentionSuggestions: "mentionSuggestions", hashtagSuggestions: "hashtagSuggestions", sidebarHeader: "sidebarHeader", isAdmin: "isAdmin", visible: "visible" }, outputs: { commentAdded: "commentAdded", fileSelected: "fileSelected", fileDownload: "fileDownload", visibleChange: "visibleChange" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }, { propertyName: "suggestionPanel", first: true, predicate: ["suggestionPanel"], descendants: true }, { propertyName: "inputText", first: true, predicate: ["inputText"], descendants: true }, { propertyName: "commentsList", first: true, predicate: ["commentsList"], descendants: true }, { propertyName: "countChip", first: true, predicate: ["countChip"], descendants: true }], ngImport: i0, template: "<div *ngIf=\"visible\" class=\"cax-comments-wrapper\">\r\n \r\n    <!-- <ng-template caxTemplate=\"content\"> -->\r\n        <div class=\"cax-comments-container\">\r\n            <div class=\"cax-comments-list\" #commentsList>\r\n                <ng-container *ngFor=\"let group of groupedComments\">\r\n                    <div class=\"cax-date-header\">{{ formatDate(group.date) }}</div>\r\n                    <div\r\n                        class=\"cax-comment-item\"\r\n                        *ngFor=\"let comment of group.items; let i = index\"\r\n                        [ngClass]=\"{\r\n                            'cax-user-comment': !comment.isAdmin,\r\n                            'cax-admin-comment': comment.isAdmin,\r\n                            'consecutive-message': i > 0 && comment.isAdmin === group.items[i-1].isAdmin && comment.sender === group.items[i-1].sender,\r\n                            'new-sender': i > 0 && comment.sender !== group.items[i-1].sender,\r\n                            'new-date': i === 0 && group.items.length > 0\r\n                        }\"\r\n                    >\r\n                        <!-- User Message (Left Aligned) -->\r\n                        <ng-container *ngIf=\"!comment.isAdmin\">\r\n                            <div class=\"cax-commentbox-avatar-container\" *ngIf=\"i === 0 || group.items[i-1].sender !== comment.sender\">\r\n                                <cax-avatar [label]=\"comment.sender?.substring(0, 2).toUpperCase() || 'U'\" [avatarSize]=\"'xs'\" [shape]=\"'circle'\" styleclass=\"cax-commentbox-avatar\"> </cax-avatar>\r\n                            </div>\r\n                            <div class=\"cax-comment-content\" [class.no-avatar]=\"i > 0 && group.items[i-1].sender === comment.sender\">\r\n                                <div class=\"cax-comment-sender\" *ngIf=\"i === 0 || group.items[i-1].sender !== comment.sender\">{{comment.sender}}</div>\r\n                                <div class=\"cax-file-attachment\" *ngIf=\"comment.files?.length\">\r\n                                    <div *ngFor=\"let file of comment.files\" class=\"file-item\">\r\n                                        <div class=\"file-details\">\r\n                                            <span class=\"file-name\">{{ file.name.slice(0, 20) }}{{ file.name.includes('.') ? '.' + file.name.split('.').pop() : '' }}</span>\r\n                                            <span class=\"file-size\">{{file.size}}</span>\r\n                                        </div>\r\n                                        <i class=\"cax cax-download\" (click)=\"onFileDownload(file)\" role=\"button\" tabindex=\"0\"></i>\r\n                                    </div>\r\n                                </div>\r\n                                <div class=\"cax-comment-text\" [innerHTML]=\"formatMessageWithTags(comment.text)\"></div>\r\n                                <span class=\"cax-comment-date\">{{ comment.date | date: 'shortTime' }}</span>\r\n                            </div>\r\n                        </ng-container>\r\n\r\n                        <!-- Admin Message (Right Aligned) -->\r\n                        <ng-container *ngIf=\"comment.isAdmin\">\r\n                            <div class=\"cax-comment-content admin\">\r\n                                <div class=\"cax-file-attachment\" *ngIf=\"comment.files?.length\">\r\n                                    <div *ngFor=\"let file of comment.files\" class=\"file-item\">\r\n                                        <div class=\"file-details\">\r\n                                            <span class=\"file-name\">{{ file.name.slice(0, 20) }}{{ file.name.includes('.') ? '.' + file.name.split('.').pop() : '' }}</span>\r\n                                            <span class=\"file-size\">{{file.size}}</span>\r\n                                        </div>\r\n                                        <i class=\"cax cax-download\" (click)=\"onFileDownload(file)\" role=\"button\" tabindex=\"0\"></i>\r\n                                    </div>\r\n                                </div>\r\n                                <div class=\"cax-comment-text\" [innerHTML]=\"formatMessageWithTags(comment.text)\"></div>\r\n                                <span class=\"cax-comment-date\">{{ comment.date | date: 'shortTime' }}</span>\r\n                            </div>\r\n                        </ng-container>\r\n                    </div>\r\n                </ng-container>\r\n            </div>\r\n        </div>\r\n    <!-- </ng-template> -->\r\n    <cax-overlay #suggestionPanel [(visible)]=\"overlayVisible\" [appendTo]=\"inputText\" (onHide)=\"onSuggestionPanelHide()\" [styleClass]=\"'suggestion-panel'\">\r\n        <div class=\"suggestion-list\">\r\n            <div *ngFor=\"let item of filteredSuggestions; let i = index\" class=\"suggestion-item\" [ngClass]=\"{'selected': selectedSuggestionIndex === i}\" (click)=\"onSuggestionSelect(item)\" (mouseenter)=\"selectedSuggestionIndex = i\">\r\n                <span class=\"suggestion-label\">{{item.name}}</span>\r\n                <small class=\"suggestion-id\" *ngIf=\"currentTokenType === 'mention'\">{{item.id}}</small>\r\n            </div>\r\n        </div>\r\n    </cax-overlay>\r\n    <cax-overlay\r\n        [(visible)]=\"filesOverlayVisible\"\r\n        [appendTo]=\"countChip\"\r\n        [showTransitionOptions]=\"'0.12s ease-out'\"\r\n        [hideTransitionOptions]=\"'0.1s ease-in'\"\r\n        [style]=\"{ width: '224px', right: '5%' }\"\r\n        styleClass=\"files-list-overlay\"\r\n        (onHide)=\"hideFilesOverlay()\"\r\n    >\r\n        <div class=\"files-overlay-content\">\r\n            <div *ngFor=\"let file of selectedFiles.slice(4); let i = index\" class=\"file-item\">\r\n                <span class=\"file-name\">{{getShortFileName(file.name)}}</span>\r\n                <i class=\"cax cax-close-circle\" (click)=\"removeFile(i + 4)\"></i>\r\n            </div>\r\n        </div>\r\n    </cax-overlay>\r\n\r\n    <!-- <ng-template caxTemplate=\"footer\"> -->\r\n        <div class=\"chat-footer\">\r\n            <div class=\"selected-files\" *ngIf=\"selectedFiles.length > 0\">\r\n                <cax-chip *ngFor=\"let file of selectedFiles.slice(0, 4); let i = index\" [label]=\"getShortFileName(file.name)\" [removable]=\"true\" [size]=\"'lg'\" (onRemove)=\"removeFile(i, true)\">\r\n                    <ng-template caxTemplate=\"content\">\r\n                        <i class=\"cax cax-paperclip\"></i>\r\n                    </ng-template>\r\n                </cax-chip>\r\n                <cax-chip #countChip *ngIf=\"selectedFiles.length > 4\" [label]=\"'+' + getOverflowCount()\" [size]=\"'lg'\" (mouseenter)=\"showFilesOverlay($event)\"> </cax-chip>\r\n            </div>\r\n            <div class=\"cax-chat-input-container\">\r\n                <div class=\"input-wrapper\">\r\n                    <cax-inputtext\r\n                        [(ngModel)]=\"newComment\"\r\n                        [size]=\"'lg'\"\r\n                        [rightIcon]=\"true\"\r\n                        [clearIcon]=\"false\"\r\n                        [rightIconClass]=\"'cax cax-paperclip'\"\r\n                        [rightIconClickable]=\"true\"\r\n                        (rightIconClick)=\"onFileIconClick($event)\"\r\n                        placeholder=\"Comment or mention others with @, \u2018#\u2019 for columns\"\r\n                        (keyup)=\"handleKeyUp($event)\"\r\n                        (keydown)=\"onKeyDown($event)\"\r\n                        [class]=\"{'chat-input': true, 'admin-input': isAdminSender}\"\r\n                        [style]=\"{'border-radius': '8px', background: '#ffffff'}\"\r\n                        #inputText\r\n                    >\r\n                    </cax-inputtext>\r\n                </div>\r\n\r\n                <cax-button [icon]=\"'cax cax-plain'\" [severity]=\"'primary'\" [size]=\"'large'\" (click)=\"addComment()\" [disabled]=\"!newComment.trim() && selectedFiles.length === 0\" class=\"send-button\"> </cax-button>\r\n            </div>\r\n\r\n            <input #fileInput type=\"file\" (change)=\"onFileSelect($event)\" style=\"display: none\" accept=\"*/*\" multiple />\r\n        </div>\r\n    <!-- </ng-template> -->\r\n</div>\r\n", styles: ["@layer cax{.cax-comments-wrapper{width:100%;min-height:100%;display:flex;flex-direction:column}.cax-comments-list{display:flex;flex-direction:column;gap:4px;flex:1;overflow-y:auto;overflow-x:hidden;height:100%;padding-bottom:0;will-change:transform;transform:translateZ(0);backface-visibility:hidden;-webkit-backface-visibility:hidden;scrollbar-width:thin;scrollbar-color:rgba(94,92,92,.3) transparent}.cax-comments-list:after{content:\"\";display:block;min-height:20px;scroll-snap-align:end}.cax-comments-list::-webkit-scrollbar-track{background:transparent}.cax-comments-list::-webkit-scrollbar-thumb{background-color:#5553531a;border-radius:4px;border:2px solid transparent;background-clip:padding-box}.cax-comment-item{display:flex;align-items:flex-end;max-width:85%;gap:4px}.cax-comment-item.consecutive-message{margin-top:0}.cax-comment-item.new-sender{margin-top:12px}.cax-comment-item.new-date{margin-top:0}.cax-user-comment{align-self:flex-start;display:flex;flex-direction:row;text-align:left}.cax-user-comment .cax-commentbox-avatar-container{display:flex;align-items:flex-end}.cax-user-comment .cax-comment-content{margin-bottom:0;display:flex;flex-direction:column;border-radius:12px 12px 12px 0}.cax-user-comment .cax-comment-content.no-avatar{border-radius:12px;margin-left:25px}.cax-user-comment .cax-comment-content .cax-comment-sender{font-size:14px;font-weight:600;color:var(--neutral-900);margin-bottom:0;line-height:20px}.cax-user-comment.consecutive-message .cax-comment-content{border-radius:12px}.cax-admin-comment{align-self:flex-end;display:flex;flex-direction:row;justify-content:flex-end;text-align:right}.cax-admin-comment .cax-commentbox-avatar-container{display:flex;align-items:flex-end}.cax-admin-comment .cax-comment-content{margin-bottom:0;display:flex;flex-direction:column;border-radius:12px 12px 0;text-align:left}.cax-admin-comment .cax-comment-content .cax-comment-sender{font-size:14px;font-weight:600;color:var(--neutral-900);margin-bottom:0;line-height:20px}.cax-admin-comment.consecutive-message .cax-comment-content{border-radius:12px}.cax-commentbox-avatar{width:32px;height:32px;border-radius:50%;margin:0 8px}.cax-comment-content{background:var(--white-100);border-radius:12px 12px 12px 0;padding:8px;max-width:100%;word-wrap:break-word;display:flex;flex-direction:column;box-shadow:0 2px 4px #0000000d}.cax-comment-content .cax-comment-text{font-weight:400;font-size:14px;line-height:20px}.cax-comment-content .cax-comment-text ::ng-deep .mention{display:inline-block;font-weight:600;color:var(--primary-500)}.cax-comment-content .cax-comment-text ::ng-deep .hashtag{display:inline-block;font-weight:600;color:var(--primary-500)}.cax-comment-content .cax-comment-sender{font-size:14px;font-weight:600;color:var(--neutral-900);margin-bottom:0;line-height:20px}.cax-file-attachment{margin-bottom:12px}.cax-file-attachment .file-item{display:flex;align-items:center;gap:12px;border-color:1px solid var(--neutral-150);padding:10px 16px;background:var(--neutral-75);border-radius:8px;cursor:pointer;margin-bottom:8px}.cax-file-attachment .file-item .file-details{display:flex;flex:1;align-items:center;gap:12px}.cax-file-attachment .file-item .file-name{color:var(--neutral-900);font-weight:500;font-size:14px;line-height:20px;flex:1;white-space:nowrap;overflow:hidden}.cax-file-attachment .file-item .file-size{color:var(--neutral-600);font-weight:400;font-size:12px;line-height:18px;margin-right:8px}.cax-file-attachment .file-item i{color:var(--neutral-900);font-size:1.1rem;margin-left:auto;order:2}.cax-file-attachment .file-item i.cax-download{cursor:pointer;transition:color .2s ease}.cax-file-attachment .file-item i.cax-download:hover{color:var(--primary-600)}.cax-file-attachment .file-item i.cax-download:active{color:var(--primary-700)}.cax-file-attachment .file-item:last-child{margin-bottom:0}.cax-file-attachment:last-child{margin-bottom:0}.cax-comment-date{font-weight:400;font-size:12px;line-height:18px;color:var(--neutral-600);align-self:flex-end}.cax-chat-input-container{display:flex;gap:.5rem}.cax-chat-input-container .chat-input{flex:1}.cax-chat-input-container .send-button{cursor:pointer}.input-wrapper{position:relative;flex:1;display:flex;flex-direction:column}.cax-date-header{text-align:center;font-size:12px;font-weight:500;line-height:18px;color:var(--neutral-700);background:var(--neutral-100);align-self:center;width:fit-content;padding:4px 12px;border-radius:4px;margin:11px 0;position:relative;z-index:1}.cax-date-header:first-child{margin-top:0}.cax-comments-container{display:flex;flex-direction:column;height:calc(100vh - 200px);overflow:hidden;position:relative;transform:translateZ(0);backface-visibility:hidden}.selected-files{display:flex;flex-wrap:wrap;gap:.5rem;padding:0 0 5px;position:relative}.selected-files .cax-chip{background:var(--neutral-100)}.selected-files .cax-chip i{margin-right:.5rem}.selected-files .files-overlay{position:absolute;background:var(--white-100);border-radius:8px;box-shadow:0 4px 12px #00000026;width:300px;max-height:400px;z-index:1000;overflow:hidden;border:1px solid var(--neutral-200)}.selected-files .files-overlay .files-overlay-header{padding:12px 16px;font-weight:600;font-size:14px;border-bottom:1px solid var(--neutral-100);background:var(--neutral-50)}.selected-files .files-overlay .files-overlay-content{max-height:350px;overflow-y:auto;padding:8px 0}.selected-files .files-overlay .files-overlay-content .file-item{display:flex;align-items:center;padding:8px 16px;transition:background-color .2s ease}.selected-files .files-overlay .files-overlay-content .file-item:hover{background-color:var(--neutral-50)}.selected-files .files-overlay .files-overlay-content .file-item i.cax-paperclip{color:var(--neutral-600);margin-right:8px}.selected-files .files-overlay .files-overlay-content .file-item .file-name{flex:1;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-right:8px}.selected-files .files-overlay .files-overlay-content .file-item .file-size{color:var(--neutral-600);font-size:12px;margin-right:8px}.selected-files .files-overlay .files-overlay-content .file-item i.cax-times{color:var(--neutral-600);cursor:pointer;transition:color .2s ease}.selected-files .files-overlay .files-overlay-content .file-item i.cax-times:hover{color:var --error-500}.selected-files :deep(.file-chip){background:var(--neutral-50);border:1px solid var(--neutral-100)}.selected-files :deep(.file-chip) .file-details{display:flex;align-items:center;gap:8px}.selected-files :deep(.file-chip) i{color:var(--primary-500);margin-right:8px}.selected-files :deep(.file-chip) .file-name{font-weight:500}.selected-files :deep(.file-chip) .file-size{color:var(--neutral-600);font-size:.8rem}:host ::ng-deep .cax-sidebar{width:589px!important;border:1px solid var(--neutral-200)!important}:host ::ng-deep .cax-sidebar .cax-sidebar-content{display:flex;flex-direction:column;background:var(--neutral-25);padding:24px 8px!important}:host ::ng-deep .cax-sidebar .cax-sidebar-footer{padding:12px!important;background:var(--neutral-50);border-top:1px solid var(--neutral-200)}:host ::ng-deep .cax-sidebar .cax-sidebar-header{border-bottom:1px solid var(--neutral-200);background:var(--neutral-50);padding:16px 24px!important}:host ::ng-deep .cax-overlay{position:absolute;bottom:0!important;top:unset!important;left:unset!important}:host ::ng-deep .suggestion-panel{background:var(--white-100);box-shadow:0 2px 8px #0000001a;z-index:9999;padding:12px 4px;margin-left:20px;width:224px;border-radius:8px;border:1px solid var(--neutral-200)}:host ::ng-deep .suggestion-panel .suggestion-list{max-height:200px;overflow-y:auto;will-change:transform;transform:translateZ(0);backface-visibility:hidden;-webkit-backface-visibility:hidden;scrollbar-width:thin;scrollbar-color:rgba(94,92,92,.3) transparent}:host ::ng-deep .suggestion-panel .suggestion-list .suggestion-item{padding:6px 8px;cursor:pointer;display:flex;justify-content:space-between;transition:background-color .2s ease;align-items:center}:host ::ng-deep .suggestion-panel .suggestion-list .suggestion-item:hover{background-color:var(--neutral-50)}:host ::ng-deep .suggestion-panel .suggestion-list .suggestion-item.selected{background-color:var(--neutral-50)}:host ::ng-deep .suggestion-panel .suggestion-list .suggestion-item .suggestion-label{font-weight:500}:host ::ng-deep .suggestion-panel .suggestion-list .suggestion-item .suggestion-id{color:var(--neutral-600);font-size:.85em}:host ::ng-deep .suggestion-panel .suggestion-list:after{content:\"\";display:block;min-height:20px;scroll-snap-align:end}:host ::ng-deep .suggestion-panel .suggestion-list::-webkit-scrollbar-track{background:transparent}:host ::ng-deep .suggestion-panel .suggestion-list::-webkit-scrollbar-thumb{background-color:#5553531a;border-radius:4px;border:2px solid transparent;background-clip:padding-box}:host ::ng-deep .chat-footer{position:sticky;bottom:0;z-index:10}:host ::ng-deep .cax-chat-input-container .chat-input .cax-paperclip{color:var(--neutral-900)!important}:host ::ng-deep .files-list-overlay{border:1px solid var(--neutral-200);background:var(--white-100);box-shadow:0 2px 8px #0000001a;z-index:9999;padding:12px 4px;width:224px;border-radius:8px}:host ::ng-deep .files-list-overlay.cax-overlay{transform-origin:right center!important}:host ::ng-deep .files-list-overlay .files-overlay-content{max-height:200px;overflow-y:auto}:host ::ng-deep .files-list-overlay .files-overlay-content .file-item{transition:background-color .2s ease;padding:6px 8px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;will-change:transform;transform:translateZ(0);backface-visibility:hidden;-webkit-backface-visibility:hidden;scrollbar-width:thin;scrollbar-color:rgba(94,92,92,.3) transparent}:host ::ng-deep .files-list-overlay .files-overlay-content .file-item:hover{background-color:var(--neutral-50)}:host ::ng-deep .files-list-overlay .files-overlay-content .file-item .file-name{flex:1;font-size:14px;font-weight:500;line-height:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-right:8px}:host ::ng-deep .files-list-overlay .files-overlay-content .file-item .file-size{color:var(--neutral-600);font-size:12px;margin-right:8px}:host ::ng-deep .files-list-overlay .files-overlay-content .file-item i.cax-times{color:var(--neutral-600);cursor:pointer;border:1.1rem solid var(--neutral-200);transition:color .2s ease}:host ::ng-deep .files-list-overlay .files-overlay-content .file-item:after{content:\"\";display:block;min-height:20px;scroll-snap-align:end}:host ::ng-deep .files-list-overlay .files-overlay-content .file-item::-webkit-scrollbar-track{background:transparent}:host ::ng-deep .files-list-overlay .files-overlay-content .file-item::-webkit-scrollbar-thumb{background-color:#5553531a;border-radius:4px;border:2px solid transparent;background-clip:padding-box}}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.InputTextComponent, selector: "cax-inputtext", inputs: ["value", "placeholder", "disabled", "maxlength", "successText", "errorText", "showLabel", "leftIcon", "rightIcon", "rightIconClickable", "clearIcon", "label", "iconPath", "disabledIcon", "showIcon", "iconClass", "leftIconClass", "rightIconClass", "invalid", "required", "style", "size", "styleClass"], outputs: ["valueChange", "rightIconClick"] }, { kind: "component", type: i5.Button, selector: "cax-button", inputs: ["type", "iconPos", "icon", "badge", "rightIcon", "leftIcon", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "style", "styleClass", "badgeClass", "ariaLabel", "autofocus"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: i6.CaxTemplate, selector: "[caxTemplate]", inputs: ["type", "caxTemplate"] }, { kind: "component", type: i7.Chip, selector: "cax-chip", inputs: ["label", "icon", "image", "alt", "style", "styleClass", "removable", "removeIcon", "size", "severity"], outputs: ["onRemove", "onImageError"] }, { kind: "component", type: i8.Overlay, selector: "cax-overlay", inputs: ["visible", "mode", "style", "styleClass", "contentStyle", "contentStyleClass", "target", "appendTo", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "listener", "responsive", "options"], outputs: ["visibleChange", "onBeforeShow", "onShow", "onBeforeHide", "onHide", "onAnimationStart", "onAnimationDone"] }, { kind: "component", type: i9.Avatar, selector: "cax-avatar", inputs: ["label", "icon", "image", "avatarSize", "shape", "style", "styleClass", "ariaLabel", "ariaLabelledBy"], outputs: ["onImageError"] }, { kind: "pipe", type: i2.DatePipe, name: "date" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: CommentboxComponent, deps: [{ token: i1.DomSanitizer }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: CommentboxComponent, selector: "cax-comments", inputs: { comments: "comments", mentionSuggestions: "mentionSuggestions", hashtagSuggestions: "hashtagSuggestions", sidebarHeader: "sidebarHeader", isAdmin: "isAdmin", placeholder: "placeholder", visible: "visible" }, outputs: { commentAdded: "commentAdded", fileSelected: "fileSelected", fileDownload: "fileDownload", visibleChange: "visibleChange", onSidebarHide: "onSidebarHide" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }, { propertyName: "suggestionPanel", first: true, predicate: ["suggestionPanel"], descendants: true }, { propertyName: "inputText", first: true, predicate: ["inputText"], descendants: true }, { propertyName: "commentsList", first: true, predicate: ["commentsList"], descendants: true }, { propertyName: "countChip", first: true, predicate: ["countChip"], descendants: true }], ngImport: i0, template: "<div *ngIf=\"visible\" class=\"cax-comments-wrapper\">\r\n    <!-- <ng-template caxTemplate=\"content\"> -->\r\n    <div class=\"cax-comments-container\">\r\n        <div class=\"cax-comments-list\" #commentsList>\r\n            <ng-container *ngFor=\"let group of groupedCommentsCache\">\r\n                <div class=\"cax-date-header\">{{ formatDate(group.date) }}</div>\r\n                <div\r\n                    class=\"cax-comment-item\"\r\n                    *ngFor=\"let comment of group.items; let i = index\"\r\n                    [ngClass]=\"{\r\n                            'cax-user-comment': !comment.isAdmin,\r\n                            'cax-admin-comment': comment.isAdmin,\r\n                            'consecutive-message': i > 0 && comment.isAdmin === group.items[i-1].isAdmin && comment.sender === group.items[i-1].sender,\r\n                            'new-sender': i > 0 && comment.sender !== group.items[i-1].sender,\r\n                            'new-date': i === 0 && group.items.length > 0\r\n                        }\"\r\n                >\r\n                    <!-- User Message (Left Aligned) -->\r\n                    <ng-container *ngIf=\"!comment.isAdmin\">\r\n                        <div class=\"cax-commentbox-avatar-container\" *ngIf=\"i === 0 || group.items[i-1].sender !== comment.sender\">\r\n                            <cax-avatar [label]=\"comment.sender?.substring(0, 2).toUpperCase() || 'U'\" [avatarSize]=\"'xs'\" [shape]=\"'circle'\" styleclass=\"cax-commentbox-avatar\"> </cax-avatar>\r\n                        </div>\r\n                        <div class=\"cax-comment-content\" [class.no-avatar]=\"i > 0 && group.items[i-1].sender === comment.sender\">\r\n                            <div class=\"cax-comment-sender\" *ngIf=\"i === 0 || group.items[i-1].sender !== comment.sender\">{{comment.sender}}</div>\r\n                            <div class=\"cax-file-attachment\" *ngIf=\"comment.files?.length\">\r\n                                <div *ngFor=\"let file of comment.files\" class=\"file-item\">\r\n                                    <div class=\"file-details\">\r\n                                        <span class=\"file-name\">{{ file.name.slice(0, 20) }}{{ file.name.includes('.') ? '.' + file.name.split('.').pop() : '' }}</span>\r\n                                        <span class=\"file-size\">{{file.size}}</span>\r\n                                    </div>\r\n                                    <i class=\"cax cax-download\" (click)=\"onFileDownload(file)\" role=\"button\" tabindex=\"0\"></i>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"cax-comment-text\" [innerHTML]=\"formatMessageWithTags(comment.text)\"></div>\r\n                            <span class=\"cax-comment-date\">{{ comment.date | date: 'shortTime' }}</span>\r\n                        </div>\r\n                    </ng-container>\r\n\r\n                    <!-- Admin Message (Right Aligned) -->\r\n                    <ng-container *ngIf=\"comment.isAdmin\">\r\n                        <div class=\"cax-comment-content admin\">\r\n                            <div class=\"cax-file-attachment\" *ngIf=\"comment.files?.length\">\r\n                                <div *ngFor=\"let file of comment.files\" class=\"file-item\">\r\n                                    <div class=\"file-details\">\r\n                                        <span class=\"file-name\">{{ file.name.slice(0, 20) }}{{ file.name.includes('.') ? '.' + file.name.split('.').pop() : '' }}</span>\r\n                                        <span class=\"file-size\">{{file.size}}</span>\r\n                                    </div>\r\n                                    <i class=\"cax cax-download\" (click)=\"onFileDownload(file)\" role=\"button\" tabindex=\"0\"></i>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"cax-comment-text\" [innerHTML]=\"formatMessageWithTags(comment.text)\"></div>\r\n                            <span class=\"cax-comment-date\">{{ comment.date | date: 'shortTime' }}</span>\r\n                        </div>\r\n                    </ng-container>\r\n                </div>\r\n            </ng-container>\r\n        </div>\r\n    </div>\r\n    <!-- </ng-template> -->\r\n    <cax-overlay #suggestionPanel [(visible)]=\"overlayVisible\" [appendTo]=\"inputText\" (onHide)=\"onSuggestionPanelHide()\" [styleClass]=\"'suggestion-panel'\">\r\n        <div class=\"suggestion-list\">\r\n            <div *ngFor=\"let item of filteredSuggestions; let i = index\" class=\"suggestion-item\" [ngClass]=\"{'selected': selectedSuggestionIndex === i}\" (click)=\"onSuggestionSelect(item)\" (mouseenter)=\"selectedSuggestionIndex = i\">\r\n                <span class=\"suggestion-label\">{{item.name}}</span>\r\n                <small class=\"suggestion-id\" *ngIf=\"currentTokenType === 'mention'\">{{item.id}}</small>\r\n            </div>\r\n        </div>\r\n    </cax-overlay>\r\n    <cax-overlay\r\n        [(visible)]=\"filesOverlayVisible\"\r\n        [appendTo]=\"countChip\"\r\n        [showTransitionOptions]=\"'0.12s ease-out'\"\r\n        [hideTransitionOptions]=\"'0.1s ease-in'\"\r\n        [style]=\"{ width: '224px', right: '5%' }\"\r\n        styleClass=\"files-list-overlay\"\r\n        (onHide)=\"hideFilesOverlay()\"\r\n    >\r\n        <div class=\"files-overlay-content\">\r\n            <div *ngFor=\"let file of selectedFiles.slice(4); let i = index\" class=\"file-item\">\r\n                <span class=\"file-name\">{{getShortFileName(file.name)}}</span>\r\n                <i class=\"cax cax-close-circle\" (click)=\"removeFile(i + 4)\"></i>\r\n            </div>\r\n        </div>\r\n    </cax-overlay>\r\n\r\n    <!-- <ng-template caxTemplate=\"footer\"> -->\r\n    <div class=\"chat-footer\">\r\n        <div class=\"selected-files\" *ngIf=\"selectedFiles.length > 0\">\r\n            <cax-chip *ngFor=\"let file of selectedFiles.slice(0, 4); let i = index\" [label]=\"getShortFileName(file.name)\" [removable]=\"true\" [size]=\"'lg'\" (onRemove)=\"removeFile(i, true)\">\r\n                <ng-template caxTemplate=\"content\">\r\n                    <i class=\"cax cax-paperclip\"></i>\r\n                </ng-template>\r\n            </cax-chip>\r\n            <cax-chip #countChip *ngIf=\"selectedFiles.length > 4\" [label]=\"'+' + getOverflowCount()\" [size]=\"'lg'\" (mouseenter)=\"showFilesOverlay($event)\"> </cax-chip>\r\n        </div>\r\n        <div class=\"cax-chat-input-container\">\r\n            <div class=\"input-wrapper\">\r\n                <cax-inputtext\r\n                    [(ngModel)]=\"newComment\"\r\n                    [size]=\"'lg'\"\r\n                    [rightIcon]=\"true\"\r\n                    [clearIcon]=\"false\"\r\n                    [rightIconClass]=\"'cax cax-paperclip'\"\r\n                    [rightIconClickable]=\"true\"\r\n                    (rightIconClick)=\"onFileIconClick($event)\"\r\n                    [placeholder]=\"placeholder\"\r\n                    (keyup)=\"handleKeyUp($event)\"\r\n                    (keydown)=\"onKeyDown($event)\"\r\n                    [ngClass]=\"{'chat-input': true, 'admin-input': isAdmin}\"\r\n                    [style]=\"{'border-radius': '8px', background: '#ffffff'}\"\r\n                    #inputText\r\n                >\r\n                </cax-inputtext>\r\n            </div>\r\n\r\n            <cax-button [icon]=\"'cax cax-plain'\" [severity]=\"'primary'\" [size]=\"'large'\" (click)=\"addComment()\" [disabled]=\"!newComment.trim() && selectedFiles.length === 0\" class=\"send-button\"> </cax-button>\r\n        </div>\r\n\r\n        <input #fileInput type=\"file\" (change)=\"onFileSelect($event)\" style=\"display: none\" accept=\"*/*\" multiple />\r\n    </div>\r\n    <!-- </ng-template> -->\r\n</div>\r\n", styles: ["@layer cax{.cax-comments-wrapper{width:100%;min-height:100%;display:flex;flex-direction:column}.cax-comments-list{display:flex;flex-direction:column;gap:4px;flex:1;overflow-y:auto;overflow-x:hidden;height:100%;padding-bottom:0;will-change:transform;transform:translateZ(0);backface-visibility:hidden;-webkit-backface-visibility:hidden;scrollbar-width:thin;scrollbar-color:rgba(94,92,92,.3) transparent}.cax-comments-list:after{content:\"\";display:block;min-height:20px;scroll-snap-align:end}.cax-comments-list::-webkit-scrollbar-track{background:transparent}.cax-comments-list::-webkit-scrollbar-thumb{background-color:#5553531a;border-radius:4px;border:2px solid transparent;background-clip:padding-box}.cax-comment-item{display:flex;align-items:flex-end;max-width:85%;gap:4px}.cax-comment-item.consecutive-message{margin-top:0}.cax-comment-item.new-sender{margin-top:12px}.cax-comment-item.new-date{margin-top:0}.cax-user-comment{align-self:flex-start;display:flex;flex-direction:row;text-align:left}.cax-user-comment .cax-commentbox-avatar-container{display:flex;align-items:flex-end}.cax-user-comment .cax-comment-content{margin-bottom:0;display:flex;flex-direction:column;border-radius:12px 12px 12px 0}.cax-user-comment .cax-comment-content.no-avatar{border-radius:12px;margin-left:25px}.cax-user-comment .cax-comment-content .cax-comment-sender{font-size:14px;font-weight:600;color:var(--neutral-900);margin-bottom:0;line-height:20px}.cax-user-comment.consecutive-message .cax-comment-content{border-radius:12px}.cax-admin-comment{align-self:flex-end;display:flex;flex-direction:row;justify-content:flex-end;text-align:right}.cax-admin-comment .cax-commentbox-avatar-container{display:flex;align-items:flex-end}.cax-admin-comment .cax-comment-content{margin-bottom:0;display:flex;flex-direction:column;border-radius:12px 12px 0;text-align:left}.cax-admin-comment .cax-comment-content .cax-comment-sender{font-size:14px;font-weight:600;color:var(--neutral-900);margin-bottom:0;line-height:20px}.cax-admin-comment.consecutive-message .cax-comment-content{border-radius:12px}.cax-commentbox-avatar{width:32px;height:32px;border-radius:50%;margin:0 8px}.cax-comment-content{background:var(--white-100);border-radius:12px 12px 12px 0;padding:8px;max-width:100%;word-wrap:break-word;display:flex;flex-direction:column;box-shadow:0 2px 4px #0000000d}.cax-comment-content .cax-comment-text{font-weight:400;font-size:14px;line-height:20px}.cax-comment-content .cax-comment-text ::ng-deep .mention{display:inline-block;font-weight:600;color:var(--primary-500)}.cax-comment-content .cax-comment-text ::ng-deep .hashtag{display:inline-block;font-weight:600;color:var(--primary-500)}.cax-comment-content .cax-comment-sender{font-size:14px;font-weight:600;color:var(--neutral-900);margin-bottom:0;line-height:20px}.cax-file-attachment{margin-bottom:12px}.cax-file-attachment .file-item{display:flex;align-items:center;gap:12px;border-color:1px solid var(--neutral-150);padding:10px 16px;background:var(--neutral-75);border-radius:8px;cursor:pointer;margin-bottom:8px}.cax-file-attachment .file-item .file-details{display:flex;flex:1;align-items:center;gap:12px}.cax-file-attachment .file-item .file-name{color:var(--neutral-900);font-weight:500;font-size:14px;line-height:20px;flex:1;white-space:nowrap;overflow:hidden}.cax-file-attachment .file-item .file-size{color:var(--neutral-600);font-weight:400;font-size:12px;line-height:18px;margin-right:8px}.cax-file-attachment .file-item i{color:var(--neutral-900);font-size:1.1rem;margin-left:auto;order:2}.cax-file-attachment .file-item i.cax-download{cursor:pointer;transition:color .2s ease}.cax-file-attachment .file-item i.cax-download:hover{color:var(--primary-600)}.cax-file-attachment .file-item i.cax-download:active{color:var(--primary-700)}.cax-file-attachment .file-item:last-child{margin-bottom:0}.cax-file-attachment:last-child{margin-bottom:0}.cax-comment-date{font-weight:400;font-size:12px;line-height:18px;color:var(--neutral-600);align-self:flex-end}.cax-chat-input-container{display:flex;gap:.5rem}.cax-chat-input-container .chat-input{flex:1}.cax-chat-input-container .send-button{cursor:pointer}.input-wrapper{position:relative;flex:1;display:flex;flex-direction:column}.cax-date-header{text-align:center;font-size:12px;font-weight:500;line-height:18px;color:var(--neutral-700);background:var(--neutral-100);align-self:center;width:fit-content;padding:4px 12px;border-radius:4px;margin:11px 0;position:relative;z-index:1}.cax-date-header:first-child{margin-top:0}.cax-comments-container{display:flex;flex-direction:column;height:calc(100vh - 200px);overflow:hidden;position:relative;transform:translateZ(0);backface-visibility:hidden}.selected-files{display:flex;flex-wrap:wrap;gap:.5rem;padding:0 0 5px;position:relative}.selected-files .cax-chip{background:var(--neutral-100)}.selected-files .cax-chip i{margin-right:.5rem}.selected-files .files-overlay{position:absolute;background:var(--white-100);border-radius:8px;box-shadow:0 4px 12px #00000026;width:300px;max-height:400px;z-index:1000;overflow:hidden;border:1px solid var(--neutral-200)}.selected-files .files-overlay .files-overlay-header{padding:12px 16px;font-weight:600;font-size:14px;border-bottom:1px solid var(--neutral-100);background:var(--neutral-50)}.selected-files .files-overlay .files-overlay-content{max-height:350px;overflow-y:auto;padding:8px 0}.selected-files .files-overlay .files-overlay-content .file-item{display:flex;align-items:center;padding:8px 16px;transition:background-color .2s ease}.selected-files .files-overlay .files-overlay-content .file-item:hover{background-color:var(--neutral-50)}.selected-files .files-overlay .files-overlay-content .file-item i.cax-paperclip{color:var(--neutral-600);margin-right:8px}.selected-files .files-overlay .files-overlay-content .file-item .file-name{flex:1;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-right:8px}.selected-files .files-overlay .files-overlay-content .file-item .file-size{color:var(--neutral-600);font-size:12px;margin-right:8px}.selected-files .files-overlay .files-overlay-content .file-item i.cax-times{color:var(--neutral-600);cursor:pointer;transition:color .2s ease}.selected-files .files-overlay .files-overlay-content .file-item i.cax-times:hover{color:var --error-500}.selected-files :deep(.file-chip){background:var(--neutral-50);border:1px solid var(--neutral-100)}.selected-files :deep(.file-chip) .file-details{display:flex;align-items:center;gap:8px}.selected-files :deep(.file-chip) i{color:var(--primary-500);margin-right:8px}.selected-files :deep(.file-chip) .file-name{font-weight:500}.selected-files :deep(.file-chip) .file-size{color:var(--neutral-600);font-size:.8rem}:host ::ng-deep .cax-sidebar{width:589px!important;border:1px solid var(--neutral-200)!important}:host ::ng-deep .cax-sidebar .cax-sidebar-content{display:flex;flex-direction:column;background:var(--neutral-25);padding:24px 8px!important}:host ::ng-deep .cax-sidebar .cax-sidebar-footer{padding:12px!important;background:var(--neutral-50);border-top:1px solid var(--neutral-200)}:host ::ng-deep .cax-sidebar .cax-sidebar-header{border-bottom:1px solid var(--neutral-200);background:var(--neutral-50);padding:16px 24px!important}:host ::ng-deep .cax-overlay{position:absolute;bottom:0!important;top:unset!important;left:unset!important}:host ::ng-deep .suggestion-panel{background:var(--white-100);box-shadow:0 2px 8px #0000001a;z-index:9999;padding:12px 4px;margin-left:20px;width:224px;border-radius:8px;border:1px solid var(--neutral-200)}:host ::ng-deep .suggestion-panel .suggestion-list{max-height:200px;overflow-y:auto;will-change:transform;transform:translateZ(0);backface-visibility:hidden;-webkit-backface-visibility:hidden;scrollbar-width:thin;scrollbar-color:rgba(94,92,92,.3) transparent}:host ::ng-deep .suggestion-panel .suggestion-list .suggestion-item{padding:6px 8px;cursor:pointer;display:flex;justify-content:space-between;transition:background-color .2s ease;align-items:center}:host ::ng-deep .suggestion-panel .suggestion-list .suggestion-item:hover{background-color:var(--neutral-50)}:host ::ng-deep .suggestion-panel .suggestion-list .suggestion-item.selected{background-color:var(--neutral-50)}:host ::ng-deep .suggestion-panel .suggestion-list .suggestion-item .suggestion-label{font-weight:500}:host ::ng-deep .suggestion-panel .suggestion-list .suggestion-item .suggestion-id{color:var(--neutral-600);font-size:.85em}:host ::ng-deep .suggestion-panel .suggestion-list:after{content:\"\";display:block;min-height:20px;scroll-snap-align:end}:host ::ng-deep .suggestion-panel .suggestion-list::-webkit-scrollbar-track{background:transparent}:host ::ng-deep .suggestion-panel .suggestion-list::-webkit-scrollbar-thumb{background-color:#5553531a;border-radius:4px;border:2px solid transparent;background-clip:padding-box}:host ::ng-deep .chat-footer{position:sticky;bottom:0;z-index:10}:host ::ng-deep .cax-chat-input-container .chat-input .cax-paperclip{color:var(--neutral-900)!important}:host ::ng-deep .files-list-overlay{border:1px solid var(--neutral-200);background:var(--white-100);box-shadow:0 2px 8px #0000001a;z-index:9999;padding:12px 4px;width:224px;border-radius:8px}:host ::ng-deep .files-list-overlay.cax-overlay{transform-origin:right center!important}:host ::ng-deep .files-list-overlay .files-overlay-content{max-height:200px;overflow-y:auto}:host ::ng-deep .files-list-overlay .files-overlay-content .file-item{transition:background-color .2s ease;padding:6px 8px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;will-change:transform;transform:translateZ(0);backface-visibility:hidden;-webkit-backface-visibility:hidden;scrollbar-width:thin;scrollbar-color:rgba(94,92,92,.3) transparent}:host ::ng-deep .files-list-overlay .files-overlay-content .file-item:hover{background-color:var(--neutral-50)}:host ::ng-deep .files-list-overlay .files-overlay-content .file-item .file-name{flex:1;font-size:14px;font-weight:500;line-height:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-right:8px}:host ::ng-deep .files-list-overlay .files-overlay-content .file-item .file-size{color:var(--neutral-600);font-size:12px;margin-right:8px}:host ::ng-deep .files-list-overlay .files-overlay-content .file-item i.cax-times{color:var(--neutral-600);cursor:pointer;border:1.1rem solid var(--neutral-200);transition:color .2s ease}:host ::ng-deep .files-list-overlay .files-overlay-content .file-item:after{content:\"\";display:block;min-height:20px;scroll-snap-align:end}:host ::ng-deep .files-list-overlay .files-overlay-content .file-item::-webkit-scrollbar-track{background:transparent}:host ::ng-deep .files-list-overlay .files-overlay-content .file-item::-webkit-scrollbar-thumb{background-color:#5553531a;border-radius:4px;border:2px solid transparent;background-clip:padding-box}}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.InputTextComponent, selector: "cax-inputtext", inputs: ["value", "placeholder", "disabled", "maxlength", "successText", "errorText", "showLabel", "leftIcon", "rightIcon", "rightIconClickable", "clearIcon", "label", "iconPath", "disabledIcon", "showIcon", "iconClass", "leftIconClass", "rightIconClass", "invalid", "required", "style", "size", "styleClass"], outputs: ["valueChange", "rightIconClick"] }, { kind: "component", type: i5.Button, selector: "cax-button", inputs: ["type", "iconPos", "icon", "badge", "rightIcon", "leftIcon", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "style", "styleClass", "badgeClass", "ariaLabel", "autofocus"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: i6.CaxTemplate, selector: "[caxTemplate]", inputs: ["type", "caxTemplate"] }, { kind: "component", type: i7.Chip, selector: "cax-chip", inputs: ["label", "icon", "image", "alt", "style", "styleClass", "removable", "removeIcon", "size", "severity"], outputs: ["onRemove", "onImageError"] }, { kind: "component", type: i8.Overlay, selector: "cax-overlay", inputs: ["visible", "mode", "style", "styleClass", "contentStyle", "contentStyleClass", "target", "appendTo", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "listener", "responsive", "options"], outputs: ["visibleChange", "onBeforeShow", "onShow", "onBeforeHide", "onHide", "onAnimationStart", "onAnimationDone"] }, { kind: "component", type: i9.Avatar, selector: "cax-avatar", inputs: ["label", "icon", "image", "avatarSize", "shape", "style", "styleClass", "ariaLabel", "ariaLabelledBy"], outputs: ["onImageError"] }, { kind: "pipe", type: i2.DatePipe, name: "date" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: CommentboxComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cax-comments', template: "<div *ngIf=\"visible\" class=\"cax-comments-wrapper\">\r\n \r\n    <!-- <ng-template caxTemplate=\"content\"> -->\r\n        <div class=\"cax-comments-container\">\r\n            <div class=\"cax-comments-list\" #commentsList>\r\n                <ng-container *ngFor=\"let group of groupedComments\">\r\n                    <div class=\"cax-date-header\">{{ formatDate(group.date) }}</div>\r\n                    <div\r\n                        class=\"cax-comment-item\"\r\n                        *ngFor=\"let comment of group.items; let i = index\"\r\n                        [ngClass]=\"{\r\n                            'cax-user-comment': !comment.isAdmin,\r\n                            'cax-admin-comment': comment.isAdmin,\r\n                            'consecutive-message': i > 0 && comment.isAdmin === group.items[i-1].isAdmin && comment.sender === group.items[i-1].sender,\r\n                            'new-sender': i > 0 && comment.sender !== group.items[i-1].sender,\r\n                            'new-date': i === 0 && group.items.length > 0\r\n                        }\"\r\n                    >\r\n                        <!-- User Message (Left Aligned) -->\r\n                        <ng-container *ngIf=\"!comment.isAdmin\">\r\n                            <div class=\"cax-commentbox-avatar-container\" *ngIf=\"i === 0 || group.items[i-1].sender !== comment.sender\">\r\n                                <cax-avatar [label]=\"comment.sender?.substring(0, 2).toUpperCase() || 'U'\" [avatarSize]=\"'xs'\" [shape]=\"'circle'\" styleclass=\"cax-commentbox-avatar\"> </cax-avatar>\r\n                            </div>\r\n                            <div class=\"cax-comment-content\" [class.no-avatar]=\"i > 0 && group.items[i-1].sender === comment.sender\">\r\n                                <div class=\"cax-comment-sender\" *ngIf=\"i === 0 || group.items[i-1].sender !== comment.sender\">{{comment.sender}}</div>\r\n                                <div class=\"cax-file-attachment\" *ngIf=\"comment.files?.length\">\r\n                                    <div *ngFor=\"let file of comment.files\" class=\"file-item\">\r\n                                        <div class=\"file-details\">\r\n                                            <span class=\"file-name\">{{ file.name.slice(0, 20) }}{{ file.name.includes('.') ? '.' + file.name.split('.').pop() : '' }}</span>\r\n                                            <span class=\"file-size\">{{file.size}}</span>\r\n                                        </div>\r\n                                        <i class=\"cax cax-download\" (click)=\"onFileDownload(file)\" role=\"button\" tabindex=\"0\"></i>\r\n                                    </div>\r\n                                </div>\r\n                                <div class=\"cax-comment-text\" [innerHTML]=\"formatMessageWithTags(comment.text)\"></div>\r\n                                <span class=\"cax-comment-date\">{{ comment.date | date: 'shortTime' }}</span>\r\n                            </div>\r\n                        </ng-container>\r\n\r\n                        <!-- Admin Message (Right Aligned) -->\r\n                        <ng-container *ngIf=\"comment.isAdmin\">\r\n                            <div class=\"cax-comment-content admin\">\r\n                                <div class=\"cax-file-attachment\" *ngIf=\"comment.files?.length\">\r\n                                    <div *ngFor=\"let file of comment.files\" class=\"file-item\">\r\n                                        <div class=\"file-details\">\r\n                                            <span class=\"file-name\">{{ file.name.slice(0, 20) }}{{ file.name.includes('.') ? '.' + file.name.split('.').pop() : '' }}</span>\r\n                                            <span class=\"file-size\">{{file.size}}</span>\r\n                                        </div>\r\n                                        <i class=\"cax cax-download\" (click)=\"onFileDownload(file)\" role=\"button\" tabindex=\"0\"></i>\r\n                                    </div>\r\n                                </div>\r\n                                <div class=\"cax-comment-text\" [innerHTML]=\"formatMessageWithTags(comment.text)\"></div>\r\n                                <span class=\"cax-comment-date\">{{ comment.date | date: 'shortTime' }}</span>\r\n                            </div>\r\n                        </ng-container>\r\n                    </div>\r\n                </ng-container>\r\n            </div>\r\n        </div>\r\n    <!-- </ng-template> -->\r\n    <cax-overlay #suggestionPanel [(visible)]=\"overlayVisible\" [appendTo]=\"inputText\" (onHide)=\"onSuggestionPanelHide()\" [styleClass]=\"'suggestion-panel'\">\r\n        <div class=\"suggestion-list\">\r\n            <div *ngFor=\"let item of filteredSuggestions; let i = index\" class=\"suggestion-item\" [ngClass]=\"{'selected': selectedSuggestionIndex === i}\" (click)=\"onSuggestionSelect(item)\" (mouseenter)=\"selectedSuggestionIndex = i\">\r\n                <span class=\"suggestion-label\">{{item.name}}</span>\r\n                <small class=\"suggestion-id\" *ngIf=\"currentTokenType === 'mention'\">{{item.id}}</small>\r\n            </div>\r\n        </div>\r\n    </cax-overlay>\r\n    <cax-overlay\r\n        [(visible)]=\"filesOverlayVisible\"\r\n        [appendTo]=\"countChip\"\r\n        [showTransitionOptions]=\"'0.12s ease-out'\"\r\n        [hideTransitionOptions]=\"'0.1s ease-in'\"\r\n        [style]=\"{ width: '224px', right: '5%' }\"\r\n        styleClass=\"files-list-overlay\"\r\n        (onHide)=\"hideFilesOverlay()\"\r\n    >\r\n        <div class=\"files-overlay-content\">\r\n            <div *ngFor=\"let file of selectedFiles.slice(4); let i = index\" class=\"file-item\">\r\n                <span class=\"file-name\">{{getShortFileName(file.name)}}</span>\r\n                <i class=\"cax cax-close-circle\" (click)=\"removeFile(i + 4)\"></i>\r\n            </div>\r\n        </div>\r\n    </cax-overlay>\r\n\r\n    <!-- <ng-template caxTemplate=\"footer\"> -->\r\n        <div class=\"chat-footer\">\r\n            <div class=\"selected-files\" *ngIf=\"selectedFiles.length > 0\">\r\n                <cax-chip *ngFor=\"let file of selectedFiles.slice(0, 4); let i = index\" [label]=\"getShortFileName(file.name)\" [removable]=\"true\" [size]=\"'lg'\" (onRemove)=\"removeFile(i, true)\">\r\n                    <ng-template caxTemplate=\"content\">\r\n                        <i class=\"cax cax-paperclip\"></i>\r\n                    </ng-template>\r\n                </cax-chip>\r\n                <cax-chip #countChip *ngIf=\"selectedFiles.length > 4\" [label]=\"'+' + getOverflowCount()\" [size]=\"'lg'\" (mouseenter)=\"showFilesOverlay($event)\"> </cax-chip>\r\n            </div>\r\n            <div class=\"cax-chat-input-container\">\r\n                <div class=\"input-wrapper\">\r\n                    <cax-inputtext\r\n                        [(ngModel)]=\"newComment\"\r\n                        [size]=\"'lg'\"\r\n                        [rightIcon]=\"true\"\r\n                        [clearIcon]=\"false\"\r\n                        [rightIconClass]=\"'cax cax-paperclip'\"\r\n                        [rightIconClickable]=\"true\"\r\n                        (rightIconClick)=\"onFileIconClick($event)\"\r\n                        placeholder=\"Comment or mention others with @, \u2018#\u2019 for columns\"\r\n                        (keyup)=\"handleKeyUp($event)\"\r\n                        (keydown)=\"onKeyDown($event)\"\r\n                        [class]=\"{'chat-input': true, 'admin-input': isAdminSender}\"\r\n                        [style]=\"{'border-radius': '8px', background: '#ffffff'}\"\r\n                        #inputText\r\n                    >\r\n                    </cax-inputtext>\r\n                </div>\r\n\r\n                <cax-button [icon]=\"'cax cax-plain'\" [severity]=\"'primary'\" [size]=\"'large'\" (click)=\"addComment()\" [disabled]=\"!newComment.trim() && selectedFiles.length === 0\" class=\"send-button\"> </cax-button>\r\n            </div>\r\n\r\n            <input #fileInput type=\"file\" (change)=\"onFileSelect($event)\" style=\"display: none\" accept=\"*/*\" multiple />\r\n        </div>\r\n    <!-- </ng-template> -->\r\n</div>\r\n", styles: ["@layer cax{.cax-comments-wrapper{width:100%;min-height:100%;display:flex;flex-direction:column}.cax-comments-list{display:flex;flex-direction:column;gap:4px;flex:1;overflow-y:auto;overflow-x:hidden;height:100%;padding-bottom:0;will-change:transform;transform:translateZ(0);backface-visibility:hidden;-webkit-backface-visibility:hidden;scrollbar-width:thin;scrollbar-color:rgba(94,92,92,.3) transparent}.cax-comments-list:after{content:\"\";display:block;min-height:20px;scroll-snap-align:end}.cax-comments-list::-webkit-scrollbar-track{background:transparent}.cax-comments-list::-webkit-scrollbar-thumb{background-color:#5553531a;border-radius:4px;border:2px solid transparent;background-clip:padding-box}.cax-comment-item{display:flex;align-items:flex-end;max-width:85%;gap:4px}.cax-comment-item.consecutive-message{margin-top:0}.cax-comment-item.new-sender{margin-top:12px}.cax-comment-item.new-date{margin-top:0}.cax-user-comment{align-self:flex-start;display:flex;flex-direction:row;text-align:left}.cax-user-comment .cax-commentbox-avatar-container{display:flex;align-items:flex-end}.cax-user-comment .cax-comment-content{margin-bottom:0;display:flex;flex-direction:column;border-radius:12px 12px 12px 0}.cax-user-comment .cax-comment-content.no-avatar{border-radius:12px;margin-left:25px}.cax-user-comment .cax-comment-content .cax-comment-sender{font-size:14px;font-weight:600;color:var(--neutral-900);margin-bottom:0;line-height:20px}.cax-user-comment.consecutive-message .cax-comment-content{border-radius:12px}.cax-admin-comment{align-self:flex-end;display:flex;flex-direction:row;justify-content:flex-end;text-align:right}.cax-admin-comment .cax-commentbox-avatar-container{display:flex;align-items:flex-end}.cax-admin-comment .cax-comment-content{margin-bottom:0;display:flex;flex-direction:column;border-radius:12px 12px 0;text-align:left}.cax-admin-comment .cax-comment-content .cax-comment-sender{font-size:14px;font-weight:600;color:var(--neutral-900);margin-bottom:0;line-height:20px}.cax-admin-comment.consecutive-message .cax-comment-content{border-radius:12px}.cax-commentbox-avatar{width:32px;height:32px;border-radius:50%;margin:0 8px}.cax-comment-content{background:var(--white-100);border-radius:12px 12px 12px 0;padding:8px;max-width:100%;word-wrap:break-word;display:flex;flex-direction:column;box-shadow:0 2px 4px #0000000d}.cax-comment-content .cax-comment-text{font-weight:400;font-size:14px;line-height:20px}.cax-comment-content .cax-comment-text ::ng-deep .mention{display:inline-block;font-weight:600;color:var(--primary-500)}.cax-comment-content .cax-comment-text ::ng-deep .hashtag{display:inline-block;font-weight:600;color:var(--primary-500)}.cax-comment-content .cax-comment-sender{font-size:14px;font-weight:600;color:var(--neutral-900);margin-bottom:0;line-height:20px}.cax-file-attachment{margin-bottom:12px}.cax-file-attachment .file-item{display:flex;align-items:center;gap:12px;border-color:1px solid var(--neutral-150);padding:10px 16px;background:var(--neutral-75);border-radius:8px;cursor:pointer;margin-bottom:8px}.cax-file-attachment .file-item .file-details{display:flex;flex:1;align-items:center;gap:12px}.cax-file-attachment .file-item .file-name{color:var(--neutral-900);font-weight:500;font-size:14px;line-height:20px;flex:1;white-space:nowrap;overflow:hidden}.cax-file-attachment .file-item .file-size{color:var(--neutral-600);font-weight:400;font-size:12px;line-height:18px;margin-right:8px}.cax-file-attachment .file-item i{color:var(--neutral-900);font-size:1.1rem;margin-left:auto;order:2}.cax-file-attachment .file-item i.cax-download{cursor:pointer;transition:color .2s ease}.cax-file-attachment .file-item i.cax-download:hover{color:var(--primary-600)}.cax-file-attachment .file-item i.cax-download:active{color:var(--primary-700)}.cax-file-attachment .file-item:last-child{margin-bottom:0}.cax-file-attachment:last-child{margin-bottom:0}.cax-comment-date{font-weight:400;font-size:12px;line-height:18px;color:var(--neutral-600);align-self:flex-end}.cax-chat-input-container{display:flex;gap:.5rem}.cax-chat-input-container .chat-input{flex:1}.cax-chat-input-container .send-button{cursor:pointer}.input-wrapper{position:relative;flex:1;display:flex;flex-direction:column}.cax-date-header{text-align:center;font-size:12px;font-weight:500;line-height:18px;color:var(--neutral-700);background:var(--neutral-100);align-self:center;width:fit-content;padding:4px 12px;border-radius:4px;margin:11px 0;position:relative;z-index:1}.cax-date-header:first-child{margin-top:0}.cax-comments-container{display:flex;flex-direction:column;height:calc(100vh - 200px);overflow:hidden;position:relative;transform:translateZ(0);backface-visibility:hidden}.selected-files{display:flex;flex-wrap:wrap;gap:.5rem;padding:0 0 5px;position:relative}.selected-files .cax-chip{background:var(--neutral-100)}.selected-files .cax-chip i{margin-right:.5rem}.selected-files .files-overlay{position:absolute;background:var(--white-100);border-radius:8px;box-shadow:0 4px 12px #00000026;width:300px;max-height:400px;z-index:1000;overflow:hidden;border:1px solid var(--neutral-200)}.selected-files .files-overlay .files-overlay-header{padding:12px 16px;font-weight:600;font-size:14px;border-bottom:1px solid var(--neutral-100);background:var(--neutral-50)}.selected-files .files-overlay .files-overlay-content{max-height:350px;overflow-y:auto;padding:8px 0}.selected-files .files-overlay .files-overlay-content .file-item{display:flex;align-items:center;padding:8px 16px;transition:background-color .2s ease}.selected-files .files-overlay .files-overlay-content .file-item:hover{background-color:var(--neutral-50)}.selected-files .files-overlay .files-overlay-content .file-item i.cax-paperclip{color:var(--neutral-600);margin-right:8px}.selected-files .files-overlay .files-overlay-content .file-item .file-name{flex:1;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-right:8px}.selected-files .files-overlay .files-overlay-content .file-item .file-size{color:var(--neutral-600);font-size:12px;margin-right:8px}.selected-files .files-overlay .files-overlay-content .file-item i.cax-times{color:var(--neutral-600);cursor:pointer;transition:color .2s ease}.selected-files .files-overlay .files-overlay-content .file-item i.cax-times:hover{color:var --error-500}.selected-files :deep(.file-chip){background:var(--neutral-50);border:1px solid var(--neutral-100)}.selected-files :deep(.file-chip) .file-details{display:flex;align-items:center;gap:8px}.selected-files :deep(.file-chip) i{color:var(--primary-500);margin-right:8px}.selected-files :deep(.file-chip) .file-name{font-weight:500}.selected-files :deep(.file-chip) .file-size{color:var(--neutral-600);font-size:.8rem}:host ::ng-deep .cax-sidebar{width:589px!important;border:1px solid var(--neutral-200)!important}:host ::ng-deep .cax-sidebar .cax-sidebar-content{display:flex;flex-direction:column;background:var(--neutral-25);padding:24px 8px!important}:host ::ng-deep .cax-sidebar .cax-sidebar-footer{padding:12px!important;background:var(--neutral-50);border-top:1px solid var(--neutral-200)}:host ::ng-deep .cax-sidebar .cax-sidebar-header{border-bottom:1px solid var(--neutral-200);background:var(--neutral-50);padding:16px 24px!important}:host ::ng-deep .cax-overlay{position:absolute;bottom:0!important;top:unset!important;left:unset!important}:host ::ng-deep .suggestion-panel{background:var(--white-100);box-shadow:0 2px 8px #0000001a;z-index:9999;padding:12px 4px;margin-left:20px;width:224px;border-radius:8px;border:1px solid var(--neutral-200)}:host ::ng-deep .suggestion-panel .suggestion-list{max-height:200px;overflow-y:auto;will-change:transform;transform:translateZ(0);backface-visibility:hidden;-webkit-backface-visibility:hidden;scrollbar-width:thin;scrollbar-color:rgba(94,92,92,.3) transparent}:host ::ng-deep .suggestion-panel .suggestion-list .suggestion-item{padding:6px 8px;cursor:pointer;display:flex;justify-content:space-between;transition:background-color .2s ease;align-items:center}:host ::ng-deep .suggestion-panel .suggestion-list .suggestion-item:hover{background-color:var(--neutral-50)}:host ::ng-deep .suggestion-panel .suggestion-list .suggestion-item.selected{background-color:var(--neutral-50)}:host ::ng-deep .suggestion-panel .suggestion-list .suggestion-item .suggestion-label{font-weight:500}:host ::ng-deep .suggestion-panel .suggestion-list .suggestion-item .suggestion-id{color:var(--neutral-600);font-size:.85em}:host ::ng-deep .suggestion-panel .suggestion-list:after{content:\"\";display:block;min-height:20px;scroll-snap-align:end}:host ::ng-deep .suggestion-panel .suggestion-list::-webkit-scrollbar-track{background:transparent}:host ::ng-deep .suggestion-panel .suggestion-list::-webkit-scrollbar-thumb{background-color:#5553531a;border-radius:4px;border:2px solid transparent;background-clip:padding-box}:host ::ng-deep .chat-footer{position:sticky;bottom:0;z-index:10}:host ::ng-deep .cax-chat-input-container .chat-input .cax-paperclip{color:var(--neutral-900)!important}:host ::ng-deep .files-list-overlay{border:1px solid var(--neutral-200);background:var(--white-100);box-shadow:0 2px 8px #0000001a;z-index:9999;padding:12px 4px;width:224px;border-radius:8px}:host ::ng-deep .files-list-overlay.cax-overlay{transform-origin:right center!important}:host ::ng-deep .files-list-overlay .files-overlay-content{max-height:200px;overflow-y:auto}:host ::ng-deep .files-list-overlay .files-overlay-content .file-item{transition:background-color .2s ease;padding:6px 8px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;will-change:transform;transform:translateZ(0);backface-visibility:hidden;-webkit-backface-visibility:hidden;scrollbar-width:thin;scrollbar-color:rgba(94,92,92,.3) transparent}:host ::ng-deep .files-list-overlay .files-overlay-content .file-item:hover{background-color:var(--neutral-50)}:host ::ng-deep .files-list-overlay .files-overlay-content .file-item .file-name{flex:1;font-size:14px;font-weight:500;line-height:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-right:8px}:host ::ng-deep .files-list-overlay .files-overlay-content .file-item .file-size{color:var(--neutral-600);font-size:12px;margin-right:8px}:host ::ng-deep .files-list-overlay .files-overlay-content .file-item i.cax-times{color:var(--neutral-600);cursor:pointer;border:1.1rem solid var(--neutral-200);transition:color .2s ease}:host ::ng-deep .files-list-overlay .files-overlay-content .file-item:after{content:\"\";display:block;min-height:20px;scroll-snap-align:end}:host ::ng-deep .files-list-overlay .files-overlay-content .file-item::-webkit-scrollbar-track{background:transparent}:host ::ng-deep .files-list-overlay .files-overlay-content .file-item::-webkit-scrollbar-thumb{background-color:#5553531a;border-radius:4px;border:2px solid transparent;background-clip:padding-box}}\n"] }]
-        }], ctorParameters: () => [{ type: i1.DomSanitizer }], propDecorators: { comments: [{
+            args: [{ selector: 'cax-comments', template: "<div *ngIf=\"visible\" class=\"cax-comments-wrapper\">\r\n    <!-- <ng-template caxTemplate=\"content\"> -->\r\n    <div class=\"cax-comments-container\">\r\n        <div class=\"cax-comments-list\" #commentsList>\r\n            <ng-container *ngFor=\"let group of groupedCommentsCache\">\r\n                <div class=\"cax-date-header\">{{ formatDate(group.date) }}</div>\r\n                <div\r\n                    class=\"cax-comment-item\"\r\n                    *ngFor=\"let comment of group.items; let i = index\"\r\n                    [ngClass]=\"{\r\n                            'cax-user-comment': !comment.isAdmin,\r\n                            'cax-admin-comment': comment.isAdmin,\r\n                            'consecutive-message': i > 0 && comment.isAdmin === group.items[i-1].isAdmin && comment.sender === group.items[i-1].sender,\r\n                            'new-sender': i > 0 && comment.sender !== group.items[i-1].sender,\r\n                            'new-date': i === 0 && group.items.length > 0\r\n                        }\"\r\n                >\r\n                    <!-- User Message (Left Aligned) -->\r\n                    <ng-container *ngIf=\"!comment.isAdmin\">\r\n                        <div class=\"cax-commentbox-avatar-container\" *ngIf=\"i === 0 || group.items[i-1].sender !== comment.sender\">\r\n                            <cax-avatar [label]=\"comment.sender?.substring(0, 2).toUpperCase() || 'U'\" [avatarSize]=\"'xs'\" [shape]=\"'circle'\" styleclass=\"cax-commentbox-avatar\"> </cax-avatar>\r\n                        </div>\r\n                        <div class=\"cax-comment-content\" [class.no-avatar]=\"i > 0 && group.items[i-1].sender === comment.sender\">\r\n                            <div class=\"cax-comment-sender\" *ngIf=\"i === 0 || group.items[i-1].sender !== comment.sender\">{{comment.sender}}</div>\r\n                            <div class=\"cax-file-attachment\" *ngIf=\"comment.files?.length\">\r\n                                <div *ngFor=\"let file of comment.files\" class=\"file-item\">\r\n                                    <div class=\"file-details\">\r\n                                        <span class=\"file-name\">{{ file.name.slice(0, 20) }}{{ file.name.includes('.') ? '.' + file.name.split('.').pop() : '' }}</span>\r\n                                        <span class=\"file-size\">{{file.size}}</span>\r\n                                    </div>\r\n                                    <i class=\"cax cax-download\" (click)=\"onFileDownload(file)\" role=\"button\" tabindex=\"0\"></i>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"cax-comment-text\" [innerHTML]=\"formatMessageWithTags(comment.text)\"></div>\r\n                            <span class=\"cax-comment-date\">{{ comment.date | date: 'shortTime' }}</span>\r\n                        </div>\r\n                    </ng-container>\r\n\r\n                    <!-- Admin Message (Right Aligned) -->\r\n                    <ng-container *ngIf=\"comment.isAdmin\">\r\n                        <div class=\"cax-comment-content admin\">\r\n                            <div class=\"cax-file-attachment\" *ngIf=\"comment.files?.length\">\r\n                                <div *ngFor=\"let file of comment.files\" class=\"file-item\">\r\n                                    <div class=\"file-details\">\r\n                                        <span class=\"file-name\">{{ file.name.slice(0, 20) }}{{ file.name.includes('.') ? '.' + file.name.split('.').pop() : '' }}</span>\r\n                                        <span class=\"file-size\">{{file.size}}</span>\r\n                                    </div>\r\n                                    <i class=\"cax cax-download\" (click)=\"onFileDownload(file)\" role=\"button\" tabindex=\"0\"></i>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"cax-comment-text\" [innerHTML]=\"formatMessageWithTags(comment.text)\"></div>\r\n                            <span class=\"cax-comment-date\">{{ comment.date | date: 'shortTime' }}</span>\r\n                        </div>\r\n                    </ng-container>\r\n                </div>\r\n            </ng-container>\r\n        </div>\r\n    </div>\r\n    <!-- </ng-template> -->\r\n    <cax-overlay #suggestionPanel [(visible)]=\"overlayVisible\" [appendTo]=\"inputText\" (onHide)=\"onSuggestionPanelHide()\" [styleClass]=\"'suggestion-panel'\">\r\n        <div class=\"suggestion-list\">\r\n            <div *ngFor=\"let item of filteredSuggestions; let i = index\" class=\"suggestion-item\" [ngClass]=\"{'selected': selectedSuggestionIndex === i}\" (click)=\"onSuggestionSelect(item)\" (mouseenter)=\"selectedSuggestionIndex = i\">\r\n                <span class=\"suggestion-label\">{{item.name}}</span>\r\n                <small class=\"suggestion-id\" *ngIf=\"currentTokenType === 'mention'\">{{item.id}}</small>\r\n            </div>\r\n        </div>\r\n    </cax-overlay>\r\n    <cax-overlay\r\n        [(visible)]=\"filesOverlayVisible\"\r\n        [appendTo]=\"countChip\"\r\n        [showTransitionOptions]=\"'0.12s ease-out'\"\r\n        [hideTransitionOptions]=\"'0.1s ease-in'\"\r\n        [style]=\"{ width: '224px', right: '5%' }\"\r\n        styleClass=\"files-list-overlay\"\r\n        (onHide)=\"hideFilesOverlay()\"\r\n    >\r\n        <div class=\"files-overlay-content\">\r\n            <div *ngFor=\"let file of selectedFiles.slice(4); let i = index\" class=\"file-item\">\r\n                <span class=\"file-name\">{{getShortFileName(file.name)}}</span>\r\n                <i class=\"cax cax-close-circle\" (click)=\"removeFile(i + 4)\"></i>\r\n            </div>\r\n        </div>\r\n    </cax-overlay>\r\n\r\n    <!-- <ng-template caxTemplate=\"footer\"> -->\r\n    <div class=\"chat-footer\">\r\n        <div class=\"selected-files\" *ngIf=\"selectedFiles.length > 0\">\r\n            <cax-chip *ngFor=\"let file of selectedFiles.slice(0, 4); let i = index\" [label]=\"getShortFileName(file.name)\" [removable]=\"true\" [size]=\"'lg'\" (onRemove)=\"removeFile(i, true)\">\r\n                <ng-template caxTemplate=\"content\">\r\n                    <i class=\"cax cax-paperclip\"></i>\r\n                </ng-template>\r\n            </cax-chip>\r\n            <cax-chip #countChip *ngIf=\"selectedFiles.length > 4\" [label]=\"'+' + getOverflowCount()\" [size]=\"'lg'\" (mouseenter)=\"showFilesOverlay($event)\"> </cax-chip>\r\n        </div>\r\n        <div class=\"cax-chat-input-container\">\r\n            <div class=\"input-wrapper\">\r\n                <cax-inputtext\r\n                    [(ngModel)]=\"newComment\"\r\n                    [size]=\"'lg'\"\r\n                    [rightIcon]=\"true\"\r\n                    [clearIcon]=\"false\"\r\n                    [rightIconClass]=\"'cax cax-paperclip'\"\r\n                    [rightIconClickable]=\"true\"\r\n                    (rightIconClick)=\"onFileIconClick($event)\"\r\n                    [placeholder]=\"placeholder\"\r\n                    (keyup)=\"handleKeyUp($event)\"\r\n                    (keydown)=\"onKeyDown($event)\"\r\n                    [ngClass]=\"{'chat-input': true, 'admin-input': isAdmin}\"\r\n                    [style]=\"{'border-radius': '8px', background: '#ffffff'}\"\r\n                    #inputText\r\n                >\r\n                </cax-inputtext>\r\n            </div>\r\n\r\n            <cax-button [icon]=\"'cax cax-plain'\" [severity]=\"'primary'\" [size]=\"'large'\" (click)=\"addComment()\" [disabled]=\"!newComment.trim() && selectedFiles.length === 0\" class=\"send-button\"> </cax-button>\r\n        </div>\r\n\r\n        <input #fileInput type=\"file\" (change)=\"onFileSelect($event)\" style=\"display: none\" accept=\"*/*\" multiple />\r\n    </div>\r\n    <!-- </ng-template> -->\r\n</div>\r\n", styles: ["@layer cax{.cax-comments-wrapper{width:100%;min-height:100%;display:flex;flex-direction:column}.cax-comments-list{display:flex;flex-direction:column;gap:4px;flex:1;overflow-y:auto;overflow-x:hidden;height:100%;padding-bottom:0;will-change:transform;transform:translateZ(0);backface-visibility:hidden;-webkit-backface-visibility:hidden;scrollbar-width:thin;scrollbar-color:rgba(94,92,92,.3) transparent}.cax-comments-list:after{content:\"\";display:block;min-height:20px;scroll-snap-align:end}.cax-comments-list::-webkit-scrollbar-track{background:transparent}.cax-comments-list::-webkit-scrollbar-thumb{background-color:#5553531a;border-radius:4px;border:2px solid transparent;background-clip:padding-box}.cax-comment-item{display:flex;align-items:flex-end;max-width:85%;gap:4px}.cax-comment-item.consecutive-message{margin-top:0}.cax-comment-item.new-sender{margin-top:12px}.cax-comment-item.new-date{margin-top:0}.cax-user-comment{align-self:flex-start;display:flex;flex-direction:row;text-align:left}.cax-user-comment .cax-commentbox-avatar-container{display:flex;align-items:flex-end}.cax-user-comment .cax-comment-content{margin-bottom:0;display:flex;flex-direction:column;border-radius:12px 12px 12px 0}.cax-user-comment .cax-comment-content.no-avatar{border-radius:12px;margin-left:25px}.cax-user-comment .cax-comment-content .cax-comment-sender{font-size:14px;font-weight:600;color:var(--neutral-900);margin-bottom:0;line-height:20px}.cax-user-comment.consecutive-message .cax-comment-content{border-radius:12px}.cax-admin-comment{align-self:flex-end;display:flex;flex-direction:row;justify-content:flex-end;text-align:right}.cax-admin-comment .cax-commentbox-avatar-container{display:flex;align-items:flex-end}.cax-admin-comment .cax-comment-content{margin-bottom:0;display:flex;flex-direction:column;border-radius:12px 12px 0;text-align:left}.cax-admin-comment .cax-comment-content .cax-comment-sender{font-size:14px;font-weight:600;color:var(--neutral-900);margin-bottom:0;line-height:20px}.cax-admin-comment.consecutive-message .cax-comment-content{border-radius:12px}.cax-commentbox-avatar{width:32px;height:32px;border-radius:50%;margin:0 8px}.cax-comment-content{background:var(--white-100);border-radius:12px 12px 12px 0;padding:8px;max-width:100%;word-wrap:break-word;display:flex;flex-direction:column;box-shadow:0 2px 4px #0000000d}.cax-comment-content .cax-comment-text{font-weight:400;font-size:14px;line-height:20px}.cax-comment-content .cax-comment-text ::ng-deep .mention{display:inline-block;font-weight:600;color:var(--primary-500)}.cax-comment-content .cax-comment-text ::ng-deep .hashtag{display:inline-block;font-weight:600;color:var(--primary-500)}.cax-comment-content .cax-comment-sender{font-size:14px;font-weight:600;color:var(--neutral-900);margin-bottom:0;line-height:20px}.cax-file-attachment{margin-bottom:12px}.cax-file-attachment .file-item{display:flex;align-items:center;gap:12px;border-color:1px solid var(--neutral-150);padding:10px 16px;background:var(--neutral-75);border-radius:8px;cursor:pointer;margin-bottom:8px}.cax-file-attachment .file-item .file-details{display:flex;flex:1;align-items:center;gap:12px}.cax-file-attachment .file-item .file-name{color:var(--neutral-900);font-weight:500;font-size:14px;line-height:20px;flex:1;white-space:nowrap;overflow:hidden}.cax-file-attachment .file-item .file-size{color:var(--neutral-600);font-weight:400;font-size:12px;line-height:18px;margin-right:8px}.cax-file-attachment .file-item i{color:var(--neutral-900);font-size:1.1rem;margin-left:auto;order:2}.cax-file-attachment .file-item i.cax-download{cursor:pointer;transition:color .2s ease}.cax-file-attachment .file-item i.cax-download:hover{color:var(--primary-600)}.cax-file-attachment .file-item i.cax-download:active{color:var(--primary-700)}.cax-file-attachment .file-item:last-child{margin-bottom:0}.cax-file-attachment:last-child{margin-bottom:0}.cax-comment-date{font-weight:400;font-size:12px;line-height:18px;color:var(--neutral-600);align-self:flex-end}.cax-chat-input-container{display:flex;gap:.5rem}.cax-chat-input-container .chat-input{flex:1}.cax-chat-input-container .send-button{cursor:pointer}.input-wrapper{position:relative;flex:1;display:flex;flex-direction:column}.cax-date-header{text-align:center;font-size:12px;font-weight:500;line-height:18px;color:var(--neutral-700);background:var(--neutral-100);align-self:center;width:fit-content;padding:4px 12px;border-radius:4px;margin:11px 0;position:relative;z-index:1}.cax-date-header:first-child{margin-top:0}.cax-comments-container{display:flex;flex-direction:column;height:calc(100vh - 200px);overflow:hidden;position:relative;transform:translateZ(0);backface-visibility:hidden}.selected-files{display:flex;flex-wrap:wrap;gap:.5rem;padding:0 0 5px;position:relative}.selected-files .cax-chip{background:var(--neutral-100)}.selected-files .cax-chip i{margin-right:.5rem}.selected-files .files-overlay{position:absolute;background:var(--white-100);border-radius:8px;box-shadow:0 4px 12px #00000026;width:300px;max-height:400px;z-index:1000;overflow:hidden;border:1px solid var(--neutral-200)}.selected-files .files-overlay .files-overlay-header{padding:12px 16px;font-weight:600;font-size:14px;border-bottom:1px solid var(--neutral-100);background:var(--neutral-50)}.selected-files .files-overlay .files-overlay-content{max-height:350px;overflow-y:auto;padding:8px 0}.selected-files .files-overlay .files-overlay-content .file-item{display:flex;align-items:center;padding:8px 16px;transition:background-color .2s ease}.selected-files .files-overlay .files-overlay-content .file-item:hover{background-color:var(--neutral-50)}.selected-files .files-overlay .files-overlay-content .file-item i.cax-paperclip{color:var(--neutral-600);margin-right:8px}.selected-files .files-overlay .files-overlay-content .file-item .file-name{flex:1;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-right:8px}.selected-files .files-overlay .files-overlay-content .file-item .file-size{color:var(--neutral-600);font-size:12px;margin-right:8px}.selected-files .files-overlay .files-overlay-content .file-item i.cax-times{color:var(--neutral-600);cursor:pointer;transition:color .2s ease}.selected-files .files-overlay .files-overlay-content .file-item i.cax-times:hover{color:var --error-500}.selected-files :deep(.file-chip){background:var(--neutral-50);border:1px solid var(--neutral-100)}.selected-files :deep(.file-chip) .file-details{display:flex;align-items:center;gap:8px}.selected-files :deep(.file-chip) i{color:var(--primary-500);margin-right:8px}.selected-files :deep(.file-chip) .file-name{font-weight:500}.selected-files :deep(.file-chip) .file-size{color:var(--neutral-600);font-size:.8rem}:host ::ng-deep .cax-sidebar{width:589px!important;border:1px solid var(--neutral-200)!important}:host ::ng-deep .cax-sidebar .cax-sidebar-content{display:flex;flex-direction:column;background:var(--neutral-25);padding:24px 8px!important}:host ::ng-deep .cax-sidebar .cax-sidebar-footer{padding:12px!important;background:var(--neutral-50);border-top:1px solid var(--neutral-200)}:host ::ng-deep .cax-sidebar .cax-sidebar-header{border-bottom:1px solid var(--neutral-200);background:var(--neutral-50);padding:16px 24px!important}:host ::ng-deep .cax-overlay{position:absolute;bottom:0!important;top:unset!important;left:unset!important}:host ::ng-deep .suggestion-panel{background:var(--white-100);box-shadow:0 2px 8px #0000001a;z-index:9999;padding:12px 4px;margin-left:20px;width:224px;border-radius:8px;border:1px solid var(--neutral-200)}:host ::ng-deep .suggestion-panel .suggestion-list{max-height:200px;overflow-y:auto;will-change:transform;transform:translateZ(0);backface-visibility:hidden;-webkit-backface-visibility:hidden;scrollbar-width:thin;scrollbar-color:rgba(94,92,92,.3) transparent}:host ::ng-deep .suggestion-panel .suggestion-list .suggestion-item{padding:6px 8px;cursor:pointer;display:flex;justify-content:space-between;transition:background-color .2s ease;align-items:center}:host ::ng-deep .suggestion-panel .suggestion-list .suggestion-item:hover{background-color:var(--neutral-50)}:host ::ng-deep .suggestion-panel .suggestion-list .suggestion-item.selected{background-color:var(--neutral-50)}:host ::ng-deep .suggestion-panel .suggestion-list .suggestion-item .suggestion-label{font-weight:500}:host ::ng-deep .suggestion-panel .suggestion-list .suggestion-item .suggestion-id{color:var(--neutral-600);font-size:.85em}:host ::ng-deep .suggestion-panel .suggestion-list:after{content:\"\";display:block;min-height:20px;scroll-snap-align:end}:host ::ng-deep .suggestion-panel .suggestion-list::-webkit-scrollbar-track{background:transparent}:host ::ng-deep .suggestion-panel .suggestion-list::-webkit-scrollbar-thumb{background-color:#5553531a;border-radius:4px;border:2px solid transparent;background-clip:padding-box}:host ::ng-deep .chat-footer{position:sticky;bottom:0;z-index:10}:host ::ng-deep .cax-chat-input-container .chat-input .cax-paperclip{color:var(--neutral-900)!important}:host ::ng-deep .files-list-overlay{border:1px solid var(--neutral-200);background:var(--white-100);box-shadow:0 2px 8px #0000001a;z-index:9999;padding:12px 4px;width:224px;border-radius:8px}:host ::ng-deep .files-list-overlay.cax-overlay{transform-origin:right center!important}:host ::ng-deep .files-list-overlay .files-overlay-content{max-height:200px;overflow-y:auto}:host ::ng-deep .files-list-overlay .files-overlay-content .file-item{transition:background-color .2s ease;padding:6px 8px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;will-change:transform;transform:translateZ(0);backface-visibility:hidden;-webkit-backface-visibility:hidden;scrollbar-width:thin;scrollbar-color:rgba(94,92,92,.3) transparent}:host ::ng-deep .files-list-overlay .files-overlay-content .file-item:hover{background-color:var(--neutral-50)}:host ::ng-deep .files-list-overlay .files-overlay-content .file-item .file-name{flex:1;font-size:14px;font-weight:500;line-height:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-right:8px}:host ::ng-deep .files-list-overlay .files-overlay-content .file-item .file-size{color:var(--neutral-600);font-size:12px;margin-right:8px}:host ::ng-deep .files-list-overlay .files-overlay-content .file-item i.cax-times{color:var(--neutral-600);cursor:pointer;border:1.1rem solid var(--neutral-200);transition:color .2s ease}:host ::ng-deep .files-list-overlay .files-overlay-content .file-item:after{content:\"\";display:block;min-height:20px;scroll-snap-align:end}:host ::ng-deep .files-list-overlay .files-overlay-content .file-item::-webkit-scrollbar-track{background:transparent}:host ::ng-deep .files-list-overlay .files-overlay-content .file-item::-webkit-scrollbar-thumb{background-color:#5553531a;border-radius:4px;border:2px solid transparent;background-clip:padding-box}}\n"] }]
+        }], ctorParameters: () => [{ type: i1.DomSanitizer }, { type: i0.NgZone }], propDecorators: { comments: [{
                 type: Input
             }], mentionSuggestions: [{
                 type: Input
@@ -519,6 +550,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
                 type: Input
             }], isAdmin: [{
                 type: Input
+            }], placeholder: [{
+                type: Input
             }], commentAdded: [{
                 type: Output
             }], fileSelected: [{
@@ -527,6 +560,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
                 type: Output
             }], visibleChange: [{
                 type: Output
+            }], onSidebarHide: [{
+                type: Output
             }], fileInput: [{
                 type: ViewChild,
                 args: ['fileInput']