@acorex/modules 20.0.6 → 20.0.8

package/fesm2022/acorex-modules-conversation.mjs

@@ -1,75 +1,76 @@
 import * as i2$4 from '@acorex/components/conversation';
-import { AXConversationModule } from '@acorex/components/conversation';
+import { AXConversationModule, AXConversationInputComponent } from '@acorex/components/conversation';
 import { AXPSessionService, AXPAuthGuard } from '@acorex/platform/auth';
-import { AXMEntityCrudServiceImpl, AXP_ENTITY_DEFINITION_LOADER } from '@acorex/platform/layout/entity';
+import { AXMEntityCrudServiceImpl, AXPEntityService, AXP_ENTITY_DEFINITION_LOADER } from '@acorex/platform/layout/entity';
 import { AXPRootLayoutComponent } from '@acorex/platform/themes/default';
-import * as i1$1 from '@angular/common';
-import { AsyncPipe, DatePipe, CommonModule } from '@angular/common';
+import * as i1$2 from '@angular/common';
+import { AsyncPipe, CommonModule, DatePipe } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Injectable, inject, signal, Component, viewChild, computed, ChangeDetectionStrategy, input, output, effect, afterNextRender, importProvidersFrom, NgModule } from '@angular/core';
+import { Injectable, inject, input, signal, viewChild, DestroyRef, ChangeDetectionStrategy, Component, ViewEncapsulation, computed, output, effect, afterNextRender, HostListener, importProvidersFrom, NgModule } from '@angular/core';
 import * as i2$3 from '@angular/router';
 import { ActivatedRoute, Router, NavigationEnd, RouterModule, ROUTES } from '@angular/router';
-import { createAllQueryView, AXPEntityCommandScope, AXPEntityQueryType } from '@acorex/platform/common';
-import * as i2 from '@acorex/platform/layout/builder';
-import { AXPWidgetsCatalog, AXPLayoutBuilderModule, AXPLayoutWidgetComponent, AXPWidgetGroupEnum } from '@acorex/platform/layout/builder';
-import { AXResizableDirective } from '@acorex/cdk/resizable';
-import * as i6 from '@acorex/components/avatar';
+import { createAllQueryView, AXPEntityCommandScope, AXPEntityQueryType, AXPFilterOperatorMiddlewareService, AXP_MENU_PROVIDER } from '@acorex/platform/common';
+import * as i2$1 from '@acorex/platform/layout/builder';
+import { AXPWidgetsCatalog, AXPLayoutBuilderModule, AXPValueWidgetComponent, AXPWidgetGroupEnum } from '@acorex/platform/layout/builder';
+import * as i2$5 from '@acorex/platform/workflow';
+import { AXPWorkflowAction, AXPWorkflowModule } from '@acorex/platform/workflow';
+import * as i3 from '@acorex/components/avatar';
 import { AXAvatarModule } from '@acorex/components/avatar';
 import * as i2$2 from '@acorex/components/badge';
 import { AXBadgeModule } from '@acorex/components/badge';
-import * as i5$1 from '@acorex/components/button';
+import * as i5 from '@acorex/components/button';
 import { AXButtonModule } from '@acorex/components/button';
 import * as i4 from '@acorex/components/comment';
 import { AXCommentModule } from '@acorex/components/comment';
-import * as i5 from '@acorex/components/decorators';
+import * as i1$1 from '@acorex/components/decorators';
 import { AXDecoratorModule } from '@acorex/components/decorators';
-import * as i9 from '@acorex/components/dropdown';
+import { AXDialogService } from '@acorex/components/dialog';
+import * as i7 from '@acorex/components/dropdown';
 import { AXDropdownModule } from '@acorex/components/dropdown';
-import * as i14 from '@acorex/components/dropdown-button';
+import * as i12 from '@acorex/components/dropdown-button';
 import { AXDropdownButtonModule } from '@acorex/components/dropdown-button';
-import * as i11 from '@acorex/components/form';
+import * as i9 from '@acorex/components/form';
 import { AXFormModule } from '@acorex/components/form';
-import * as i7 from '@acorex/components/image';
 import { AXImageModule } from '@acorex/components/image';
 import { AXLabelModule } from '@acorex/components/label';
-import * as i8 from '@acorex/components/loading';
+import * as i6 from '@acorex/components/loading';
 import { AXLoadingModule } from '@acorex/components/loading';
 import { AXPopupService } from '@acorex/components/popup';
 import * as i6$1 from '@acorex/components/search-box';
 import { AXSearchBoxModule } from '@acorex/components/search-box';
 import { AXSelectBoxModule } from '@acorex/components/select-box';
-import * as i2$1 from '@acorex/components/skeleton';
+import * as i2 from '@acorex/components/skeleton';
 import { AXSkeletonModule } from '@acorex/components/skeleton';
 import * as i7$1 from '@acorex/components/tabs';
 import { AXTabsModule } from '@acorex/components/tabs';
 import { AXTextBoxModule } from '@acorex/components/text-box';
-import * as i12 from '@acorex/components/toolbar';
+import * as i10 from '@acorex/components/toolbar';
 import { AXToolBarModule } from '@acorex/components/toolbar';
 import * as i1 from '@acorex/components/wysiwyg';
-import { AXWysiwygModule, AXWysiwygContainerComponent } from '@acorex/components/wysiwyg';
-import * as i10 from '@acorex/core/format';
+import { AXWysiwygModule } from '@acorex/components/wysiwyg';
+import * as i8 from '@acorex/core/format';
 import { AXFormatModule } from '@acorex/core/format';
-import * as i3 from '@acorex/core/translation';
-import { AXTranslationModule } from '@acorex/core/translation';
+import * as i4$1 from '@acorex/core/translation';
+import { AXTranslationModule, AXTranslationService } from '@acorex/core/translation';
 import { AXUnsubscriber } from '@acorex/core/utils';
-import { AXMUsersEntityService } from '@acorex/modules/security-management';
 import { AXPUserAvatarComponent, AXPThemeLayoutBlockComponent, AXPThemeLayoutStartSideComponent, AXPThemeLayoutHeaderComponent, AXPThemeLayoutToolbarComponent } from '@acorex/platform/layout/components';
 import { AXPPageLayoutBaseComponent, AXPPageLayoutComponent, AXPPageLayoutBase } from '@acorex/platform/layout/views';
-import * as i13 from '@angular/forms';
+import { trigger, transition, style, animate } from '@angular/animations';
+import * as i11 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import { Subject, filter, startWith } from 'rxjs';
-import { AXDialogService } from '@acorex/components/dialog';
 import { AXToastService } from '@acorex/components/toast';
-import { AXPlatform } from '@acorex/core/platform';
 import { DomSanitizer } from '@angular/platform-browser';
+import { AXMUsersEntityService } from '@acorex/modules/security-management';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { AXBasePageComponent } from '@acorex/components/page';
 import { AXDomChangeDirective } from '@acorex/cdk/dom';
 import { AXFileService } from '@acorex/core/file';
-import { AXValidationModule } from '@acorex/core/validation';
 
 const config = {
     i18n: 'conversation',
     module: 'Conversation',
+    route: 'chat',
 };
 const RootConfig = {
     config,
@@ -101,10 +102,10 @@ class AXMMessageServiceImpl extends AXMMessageService {
     constructor() {
         super(`${RootConfig.module.name}.${RootConfig.entities.message.name}`);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXMMessageServiceImpl, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXMMessageServiceImpl }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: AXMMessageServiceImpl, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: AXMMessageServiceImpl }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXMMessageServiceImpl, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: AXMMessageServiceImpl, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 
@@ -379,10 +380,10 @@ class AXMRoomServiceImpl extends AXMRoomService {
     constructor() {
         super(`${RootConfig.module.name}.${RootConfig.entities.room.name}`);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXMRoomServiceImpl, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXMRoomServiceImpl }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: AXMRoomServiceImpl, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: AXMRoomServiceImpl }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXMRoomServiceImpl, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: AXMRoomServiceImpl, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 
@@ -670,395 +671,331 @@ class AXMConversationModuleEntityProvider {
                 return null;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXMConversationModuleEntityProvider, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXMConversationModuleEntityProvider }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: AXMConversationModuleEntityProvider, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: AXMConversationModuleEntityProvider }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXMConversationModuleEntityProvider, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: AXMConversationModuleEntityProvider, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: i0.Injector }] });
 
-/**
- * Abstract Comment Service defining the contract for comment functionality
- */
+class AXMMenuProvider {
+    constructor() {
+        this.sessionService = inject(AXPSessionService);
+        this.entityService = inject(AXPEntityService);
+    }
+    async provide(context) {
+        const module = RootConfig;
+        const scope = RootConfig.config.i18n;
+        context.addItems([
+            {
+                text: `t('plural-title', {scope:"${scope}"})`,
+                path: `${this.sessionService.application?.name}/${module.config.route}`,
+                priority: 2,
+                icon: RootConfig.entities.room.icon,
+            },
+        ]);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: AXMMenuProvider, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: AXMMenuProvider }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: AXMMenuProvider, decorators: [{
+            type: Injectable
+        }] });
+
+//#region ----   Abstract Comment Service   ----
 class AXMCommentService {
 }
+//#endregion
 class AXMCommentServiceImpl {
     constructor() {
+        //#region ----   Dependencies   ----
         this.roomService = inject(AXMRoomService);
         this.messageService = inject(AXMMessageService);
         this.sessionService = inject(AXPSessionService);
         this.usersService = inject(AXMUsersEntityService);
+        this.filterService = inject(AXPFilterOperatorMiddlewareService);
+        //#endregion
+        //#region ----   Observables   ----
+        this._commentAdded$ = new Subject();
+        this.commentAdded$ = this._commentAdded$.asObservable();
+        this._commentRemoved$ = new Subject();
+        this.commentRemoved$ = this._commentRemoved$.asObservable();
+        this._commentUpdated$ = new Subject();
+        this.commentUpdated$ = this._commentUpdated$.asObservable();
+        this._threadAdded$ = new Subject();
+        this.threadAdded$ = this._threadAdded$.asObservable();
+        this._threadRemoved$ = new Subject();
+        this.threadRemoved$ = this._threadRemoved$.asObservable();
     }
-    // === Helper Methods ===
+    //#endregion
+    //#region ----   Helper Methods   ----
     getCurrentUser() {
         const user = this.sessionService.user;
+        if (!user) {
+            throw new Error('No authenticated user found.');
+        }
         return {
-            id: user?.id || 'guest-user',
+            id: user.id,
             type: 'user',
         };
     }
     async getUserInfo(userId) {
         try {
-            const user = await this.usersService.getOne(userId);
-            return {
-                id: user.id,
-                userName: user.username || user.id,
-                firstName: user.firstName || '',
-                lastName: user.lastName || '',
-                fullName: `${user.firstName || ''} ${user.lastName || ''}`.trim() || 'Unknown User',
-                avatar: '',
-            };
+            await this.usersService.getOne(userId); // check if user exists
+            return { id: userId, type: 'user' };
         }
-        catch (error) {
-            console.error(`Failed to get user info for ID: ${userId}`, error);
-            return {
-                id: userId,
-                userName: userId,
-                firstName: 'Unknown',
-                lastName: 'User',
-                fullName: 'Unknown User',
-                avatar: '',
-            };
+        catch {
+            throw new Error(`User with ID ${userId} not found`);
         }
     }
-    formatRoomId(entityId, instanceId, roomType = 'default') {
-        return `${roomType}:${entityId}:${instanceId}`;
-    }
-    async formatComment(message) {
-        const currentUserId = this.getCurrentUser().id;
-        // Check if the current user has liked this message
-        const isLiked = (message.reactions || []).some((reaction) => reaction.author.id === currentUserId && reaction.type === 'like');
-        // Count total reactions
-        const reactionsCount = (message.reactions || []).filter((r) => r.type === 'like').length;
-        // Get the full user info for the author
-        const userInfo = await this.getUserInfo(message.author.id);
+    formatComment(message, depth = 0) {
         return {
             ...message,
-            author: {
-                ...message.author,
-                ...userInfo,
-            },
-            isFromCurrentUser: message.author.id === currentUserId,
-            formattedDate: new Date(message.createdAt || new Date()).toLocaleString(),
-            isLiked,
-            reactionsCount,
+            depth,
             replies: [],
+            replyCount: 0,
         };
     }
-    async buildCommentHierarchy(comments) {
-        // Create a map for quick lookup of comments by ID
-        const commentMap = new Map();
-        const rootComments = [];
-        // First pass: add all comments to the map
-        for (const comment of comments) {
-            commentMap.set(comment.id, comment);
-            // Initialize the replies array if not already present
-            if (!comment.replies) {
-                comment.replies = [];
-            }
-            // If this is a root comment (no replyId), add it to the root comments array
-            if (!comment.replyId) {
-                rootComments.push(comment);
-            }
-        }
-        // Second pass: build the hierarchy by adding replies to their parent comments
-        for (const comment of comments) {
-            if (comment.replyId) {
-                const parentComment = commentMap.get(comment.replyId);
-                if (parentComment && parentComment.replies) {
-                    parentComment.replies.push(comment);
-                }
-                else {
-                    // If parent not found (might be deleted), treat as a root comment
-                    rootComments.push(comment);
-                }
+    buildCommentTree(comments) {
+        const commentMap = new Map(comments.map((c) => [c.id, c]));
+        const tree = [];
+        comments.forEach((comment) => {
+            if (comment.replyId && commentMap.has(comment.replyId)) {
+                const parent = commentMap.get(comment.replyId);
+                parent.replies.push(comment);
+                comment.depth = parent.depth + 1;
             }
-        }
-        // Sort the root comments and their replies by creation date (newest first)
-        const sortByDate = (a, b) => {
-            const dateA = a.createdAt ? new Date(a.createdAt).getTime() : 0;
-            const dateB = b.createdAt ? new Date(b.createdAt).getTime() : 0;
-            return dateB - dateA;
-        };
-        rootComments.sort(sortByDate);
-        // Sort the replies within each comment
-        for (const comment of rootComments) {
-            if (comment.replies && comment.replies.length > 0) {
-                comment.replies.sort(sortByDate);
+            else {
+                tree.push(comment);
             }
-        }
-        return rootComments;
-    }
-    // === Room Operations ===
-    async getRoomList(skip = 0, take = 100) {
-        return this.roomService.query({ skip, take });
-    }
-    async getRoomDetails(roomId) {
-        return this.roomService.getOne(roomId);
-    }
-    async createRoom(roomData) {
-        return this.roomService.insertOne(roomData);
+        });
+        commentMap.forEach((comment) => {
+            comment.replyCount = comment.replies.length;
+        });
+        return tree;
     }
-    async ensureRoomExists(entityId, instanceId, roomType = 'default') {
-        const roomId = this.formatRoomId(entityId, instanceId, roomType);
-        try {
-            // Check if room exists
-            await this.getRoomDetails(roomId);
-            return roomId;
-        }
-        catch (error) {
-            // If room doesn't exist, create it
-            const roomData = {
-                id: roomId, // Provide the ID directly for comments
-                title: `Comments for ${entityId}:${instanceId}`,
-                members: [this.getCurrentUser()],
-            };
-            // Create a new room or return the ID if it already exists
-            try {
-                const result = await this.createRoom(roomData);
-                return typeof result === 'string' ? result : roomId;
-            }
-            catch (e) {
-                // If we get a duplicate error, the room was created by another request
-                return roomId;
-            }
+    //#endregion
+    //#region ----   Comment Thread Service Implementation   ----
+    async createThread(entityRef, topic, title) {
+        const currentUser = this.getCurrentUser();
+        const room = {
+            type: 'comment',
+            topic: topic,
+            title: title || `Comments for ${entityRef.type}#${entityRef.id}`,
+            members: [currentUser],
+            entityRef: entityRef,
+            createdBy: currentUser.id,
+            createdAt: new Date(),
+        };
+        await this.roomService.insertOne(room);
+        const newThread = await this.getThread(entityRef, topic);
+        if (!newThread) {
+            throw new Error('Failed to create or retrieve thread after creation.');
         }
+        this._threadAdded$.next(newThread);
+        return newThread;
     }
-    // === Comment Operations ===
-    async query(queryRequest) {
-        const { params, skip = 0, take = 20 } = queryRequest;
-        const { entityId, instanceId, roomType = 'default' } = params || {};
-        if (!entityId || !instanceId) {
-            throw new Error('EntityId and InstanceId are required for querying comments');
-        }
-        const roomId = this.formatRoomId(entityId, instanceId, roomType);
-        // Fetch messages for this room
-        const result = await this.messageService.query({
-            skip,
-            take,
+    async getThread(entityRef, topic) {
+        const { items } = await this.roomService.query({
+            skip: 0,
+            take: 1,
             filter: {
-                field: 'roomId',
-                value: roomId,
-                operator: { type: 'equal' },
+                logic: 'and',
+                filters: [
+                    {
+                        field: 'entityRef.id',
+                        value: entityRef.id,
+                        operator: this.filterService.getOperator('equal'),
+                    },
+                    {
+                        field: 'entityRef.type',
+                        value: entityRef.type,
+                        operator: this.filterService.getOperator('equal'),
+                    },
+                    {
+                        field: 'topic',
+                        value: topic,
+                        operator: this.filterService.getOperator('equal'),
+                    },
+                ],
             },
         });
-        // Transform messages to comments
-        const comments = await Promise.all(result.items.map((message) => this.formatComment(message)));
-        // Build comment hierarchy
-        const hierarchicalComments = await this.buildCommentHierarchy(comments);
+        const room = items[0];
+        if (!room) {
+            return null;
+        }
+        const comments = await this.getComments(room.id, true);
         return {
-            items: hierarchicalComments,
-            total: result.total,
+            ...room,
+            comments,
+            commentCount: comments.length,
         };
     }
-    async getOne(id) {
-        const message = await this.messageService.getOne(id);
-        return this.formatComment(message);
+    async listThreads(entityRef, topic) {
+        const { items } = await this.roomService.query({
+            skip: 0,
+            take: 100,
+            filter: {
+                logic: 'and',
+                filters: [
+                    {
+                        field: 'entityRef.id',
+                        value: entityRef.id,
+                        operator: this.filterService.getOperator('equal'),
+                    },
+                    {
+                        field: 'entityRef.type',
+                        value: entityRef.type,
+                        operator: this.filterService.getOperator('equal'),
+                    },
+                    {
+                        field: 'topic',
+                        value: topic,
+                        operator: this.filterService.getOperator('equal'),
+                    },
+                ],
+            },
+        });
+        const threads = await Promise.all(items.map((room) => this.getThread(room.entityRef, room.topic)));
+        return threads.filter((t) => t !== null);
     }
-    async insertOne(commentData) {
-        const { entityId, instanceId, roomType = 'default', content, contentType = 'text', replyId, isPrivate, } = commentData;
-        // Ensure the room exists
-        const roomId = await this.ensureRoomExists(entityId, instanceId, roomType);
-        // Create the message content
-        const messageContent = {
-            content,
-            contentType,
-        };
-        // Create the message object
+    async updateThread(entityRef, topic, data) {
+        const thread = await this.getThread(entityRef, topic);
+        if (!thread) {
+            throw new Error(`Thread for entity ${entityRef.type}#${entityRef.id} not found.`);
+        }
+        await this.roomService.updateOne(thread.id, data);
+        const updatedThread = await this.getThread(entityRef, topic);
+        if (!updatedThread) {
+            throw new Error('Failed to retrieve thread after update.');
+        }
+        return updatedThread;
+    }
+    async deleteThread(entityRef, topic) {
+        const thread = await this.getThread(entityRef, topic);
+        if (thread) {
+            await this.roomService.deleteOne(thread.id);
+            this._threadRemoved$.next(thread.id);
+        }
+        return true;
+    }
+    //#endregion
+    //#region ----   Comment Service Implementation   ----
+    async addComment(threadId, content, parentCommentId, contentType = 'text', userId) {
+        const author = userId ? await this.getUserInfo(userId) : this.getCurrentUser();
+        const messageContent = { content, contentType };
         const message = {
-            roomId,
+            roomId: threadId,
             message: messageContent,
-            author: this.getCurrentUser(),
-            replyId: replyId || null,
+            author,
+            replyId: parentCommentId,
             reactions: [],
             seen: [],
+            createdBy: author.id,
+            createdAt: new Date(),
         };
-        // Insert the message
         const messageId = await this.messageService.insertOne(message);
-        // Fetch the full message to return as a comment entity
-        const insertedMessage = await this.messageService.getOne(messageId);
-        return this.formatComment(insertedMessage);
-    }
-    async updateOne(id, update) {
-        // If content is being updated, format it correctly
-        let messageUpdate = {};
-        if (update.message?.content) {
-            messageUpdate.message = {
-                content: update.message.content,
-                contentType: update.message.contentType || 'text',
-            };
-        }
-        // Apply the update
-        const result = await this.messageService.updateOne(id, messageUpdate);
-        // Return as a comment entity
-        return this.formatComment(result);
+        const newComment = await this.getComment(messageId);
+        this._commentAdded$.next(newComment);
+        return newComment;
     }
-    async deleteOne(id) {
-        try {
-            await this.messageService.deleteOne(id);
-            return true;
-        }
-        catch (error) {
-            console.error('Failed to delete comment:', error);
-            return false;
+    async getComments(threadId, nested = true) {
+        const { items } = await this.messageService.query({
+            skip: 0,
+            filter: { field: 'roomId', value: threadId, operator: this.filterService.getOperator('equal') },
+            sort: [{ field: 'createdAt', dir: 'asc' }],
+            take: 500, // Assuming a reasonable limit for comments per thread
+        });
+        const formattedComments = items.map((c) => this.formatComment(c));
+        if (nested) {
+            return this.buildCommentTree(formattedComments);
         }
+        return formattedComments;
+    }
+    async getComment(commentId) {
+        const message = await this.messageService.getOne(commentId);
+        return this.formatComment(message);
     }
-    // === Comment-Specific Operations ===
-    async like(messageId) {
+    async editComment(commentId, content, contentType = 'text') {
+        const messageContent = { content, contentType };
+        await this.messageService.updateOne(commentId, {
+            message: messageContent,
+            updatedAt: new Date(),
+            updatedBy: this.getCurrentUser().id,
+        });
+        const updatedComment = await this.getComment(commentId);
+        this._commentUpdated$.next(updatedComment);
+        return updatedComment;
+    }
+    async deleteComment(commentId) {
+        // Note: This is a hard delete. Soft delete might be preferable.
+        await this.messageService.deleteOne(commentId);
+        this._commentRemoved$.next(commentId);
+        return true;
+    }
+    //#endregion
+    //#region ----   Comment Reaction Service Implementation   ----
+    async addReaction(commentId, type) {
         const author = this.getCurrentUser();
-        const message = await this.messageService.getOne(messageId);
-        // Check if the user has already liked this message
-        const reactions = message.reactions || [];
-        const existingReaction = reactions.find((r) => r.author.id === author.id && r.type === 'like');
-        let updatedReactions;
-        if (existingReaction) {
-            // If the reaction exists, remove it (unlike)
-            updatedReactions = reactions.filter((r) => !(r.author.id === author.id && r.type === 'like'));
-        }
-        else {
-            // If the reaction doesn't exist, add it (like)
-            updatedReactions = [...reactions, { author, type: 'like' }];
+        const comment = await this.messageService.getOne(commentId);
+        const reactions = comment.reactions || [];
+        if (reactions.some((r) => r.author.id === author.id && r.type === type)) {
+            return this.formatComment(comment);
         }
-        // Update the message with the new reactions
-        const updatedMessage = await this.messageService.updateOne(messageId, { reactions: updatedReactions });
-        // Return as a comment entity
-        return this.formatComment(updatedMessage);
+        const updatedReactions = [...reactions, { author, type }];
+        await this.messageService.updateOne(commentId, { reactions: updatedReactions });
+        const updatedComment = await this.getComment(commentId);
+        this._commentUpdated$.next(updatedComment);
+        return updatedComment;
     }
-    async getCommentCount(entityId, instanceId, roomType = 'default') {
-        const roomId = this.formatRoomId(entityId, instanceId, roomType);
-        try {
-            const result = await this.messageService.query({
-                skip: 0,
-                take: 1,
-                filter: {
-                    field: 'roomId',
-                    value: roomId,
-                    operator: { type: 'equal' },
-                },
-            });
-            return result.total;
-        }
-        catch (error) {
-            console.error('Failed to get comment count:', error);
-            return 0;
-        }
+    async removeReaction(commentId, type) {
+        const author = this.getCurrentUser();
+        const comment = await this.messageService.getOne(commentId);
+        const updatedReactions = (comment.reactions || []).filter((r) => !(r.author.id === author.id && r.type === type));
+        await this.messageService.updateOne(commentId, { reactions: updatedReactions });
+        const updatedComment = await this.getComment(commentId);
+        this._commentUpdated$.next(updatedComment);
+        return updatedComment;
     }
-    async getAllCommentsWithReplies(entityId, instanceId, roomType = 'default', skip = 0, take = 100) {
-        const queryRequest = {
-            params: { entityId, instanceId, roomType },
-            skip,
-            take,
-        };
-        return this.query(queryRequest);
+    async getReactions(commentId) {
+        const comment = await this.messageService.getOne(commentId);
+        return comment.reactions || [];
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXMCommentServiceImpl, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXMCommentServiceImpl, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXMCommentServiceImpl, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }] });
-
-class AXMCommentLookupPopup extends AXBasePageComponent {
-    constructor() {
-        super(...arguments);
-        this.lookupNode = {
-            name: 'form-field',
-            path: 'form-field',
-            type: 'form-field',
-            children: [
-                {
-                    name: 'lookup',
-                    path: 'lookup',
-                    type: 'lookup-editor',
-                    options: {
-                        entity: 'SecurityManagement.users',
-                        multiple: true,
-                    },
-                },
-            ],
-            options: {
-                label: 'Select users:',
-            },
-        };
-        this.titleNode = {
-            name: 'form-field',
-            path: 'form-field',
-            type: 'form-field',
-            children: [
-                {
-                    name: 'title',
-                    path: 'title',
-                    type: 'text-editor',
-                    options: {
-                        placeholder: 'Enter title',
-                        required: true,
-                    },
-                },
-            ],
-            options: {
-                label: 'Title:',
-            },
-        };
-        this.context = signal({});
+    async likeComment(commentId) {
+        return this.addReaction(commentId, 'like');
     }
-    handleClose() {
-        this.close({
-            lookup: this.context()?.lookup,
-            title: this.context()?.title,
-        });
+    async unlikeComment(commentId) {
+        return this.removeReaction(commentId, 'like');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXMCommentLookupPopup, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: AXMCommentLookupPopup, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `<axp-widgets-container [context]="context()" (onContextChanged)="context.set($event.data)">
-      <div class="ax-p-4 ax-flex ax-flex-col ax-gap-4">
-        <ng-container axp-widget-renderer [node]="lookupNode" [mode]="'edit'"> </ng-container>
-        @if (context()?.lookup?.length > 1) {
-          <ng-container axp-widget-renderer [node]="titleNode" [mode]="'edit'"> </ng-container>
-        }
-      </div>
-    </axp-widgets-container>
-
-    <ax-footer>
-      <ax-suffix>
-        <ax-button
-          text="Accept & Send"
-          color="primary"
-          [disabled]="context()?.lookup?.length > 1 && !context()?.title"
-          (onClick)="handleClose()"
-        ></ax-button>
-      </ax-suffix>
-    </ax-footer>`, isInline: true, dependencies: [{ kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i5.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "component", type: i2.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i2.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged"], exportAs: ["widgetRenderer"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i5$1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }] }); }
+    //#endregion
+    //#region ----   Comment Pin Service Implementation   ----
+    async pinComment(commentId) {
+        await this.messageService.updateOne(commentId, { isPinned: true });
+        const updatedComment = await this.getComment(commentId);
+        this._commentUpdated$.next(updatedComment);
+        return updatedComment;
+    }
+    async unpinComment(commentId) {
+        await this.messageService.updateOne(commentId, { isPinned: false });
+        const updatedComment = await this.getComment(commentId);
+        this._commentUpdated$.next(updatedComment);
+        return updatedComment;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: AXMCommentServiceImpl, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: AXMCommentServiceImpl, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXMCommentLookupPopup, decorators: [{
-            type: Component,
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: AXMCommentServiceImpl, decorators: [{
+            type: Injectable,
             args: [{
-                    template: `<axp-widgets-container [context]="context()" (onContextChanged)="context.set($event.data)">
-      <div class="ax-p-4 ax-flex ax-flex-col ax-gap-4">
-        <ng-container axp-widget-renderer [node]="lookupNode" [mode]="'edit'"> </ng-container>
-        @if (context()?.lookup?.length > 1) {
-          <ng-container axp-widget-renderer [node]="titleNode" [mode]="'edit'"> </ng-container>
-        }
-      </div>
-    </axp-widgets-container>
-
-    <ax-footer>
-      <ax-suffix>
-        <ax-button
-          text="Accept & Send"
-          color="primary"
-          [disabled]="context()?.lookup?.length > 1 && !context()?.title"
-          (onClick)="handleClose()"
-        ></ax-button>
-      </ax-suffix>
-    </ax-footer>`,
-                    imports: [AXDecoratorModule, AXPLayoutBuilderModule, AXButtonModule],
+                    providedIn: 'root',
                 }]
         }] });
 
-class AXMCommentListViewComponent {
+class AXMCommentComponent {
     constructor() {
+        this.refrenceType = input.required();
+        this.refrenceId = input.required();
+        this.subject = input.required();
         this.hasCooldown = signal(false);
         this.commentContent = signal('');
         this.isSubmitting = signal(false);
@@ -1068,34 +1005,23 @@ class AXMCommentListViewComponent {
         this.failedImageIds = signal([]);
         this.activeReplyComment = signal(undefined);
         this.activeEditComment = signal(undefined);
+        this.highlightedCommentId = signal(null);
         this.wysiwygEditor = viewChild.required('w');
         this.commentService = inject(AXMCommentService);
-        this.platform = inject(AXPlatform);
-        this.route = inject(ActivatedRoute);
-        this.popupService = inject(AXPopupService);
+        this.sessionService = inject(AXPSessionService);
         this.toastService = inject(AXToastService);
         this.dialogService = inject(AXDialogService);
         this.sanitize = inject(DomSanitizer);
-        this.routeParams = this.route.snapshot;
-        this.getPayload = computed(() => ({
-            params: this.payload(),
-            skip: 0,
-            take: 10,
-        }));
-        this.payload = computed(() => ({
-            roomType: 'default',
-            entityId: this.routeParams.params?.['module'] + '.' + this.routeParams.params?.['entity'],
-            instanceId: this.routeParams.params?.['id'],
-        }));
+        this.destroyRef = inject(DestroyRef);
         this.comments = signal([]);
-        this.wysiwyg = viewChild('w');
+        this.thread = signal(undefined);
         this.wysiwygOptions = signal({
             look: 'solid',
         });
         this.avatarConfig = signal({
             color: 'primary',
             look: 'rounded',
-            type: 'solid', // 'image' | 'text' | 'icon' | 'default'
+            type: 'solid',
         });
         this.validateContent = (content) => {
             let isValid = true;
@@ -1111,39 +1037,84 @@ class AXMCommentListViewComponent {
         };
     }
     ngOnInit() {
-        this.loadComments();
-    }
-    sanitizeHtml(htmlContent) {
-        if (!htmlContent)
-            return this.sanitize.bypassSecurityTrustHtml('');
-        return this.sanitize.bypassSecurityTrustHtml(htmlContent);
-    }
-    handleImageError(imageId) {
-        this.failedImageIds.update((ids) => [...ids, imageId]);
-    }
-    checkImageExists(imageId) {
-        return !this.failedImageIds().includes(imageId);
-    }
-    extractInitials(name) {
-        if (!name)
-            return '?';
-        // Handle the case where name is an object with fullName property
-        const nameStr = typeof name === 'object' && name.fullName ? name.fullName : String(name);
-        const words = nameStr.split(' ');
-        const initials = words.map((word) => word.charAt(0).toUpperCase());
-        return initials.join('');
-    }
-    async loadComments() {
         this.isLoading.set(true);
-        try {
-            const response = await this.commentService.query(this.getPayload());
-            this.comments.set(response.items);
-        }
-        catch (error) {
-            console.error('Failed to load comments:', error);
-            this.toastService.show({
-                content: 'Failed to load comments. Please try again.',
-                color: 'danger',
+        this.loadComments().finally(() => {
+            setTimeout(() => {
+                this.isLoading.set(false);
+            }, 250);
+        });
+        this.commentService.commentAdded$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((comment) => {
+            if (comment.replyId) {
+                this.comments.update((comments) => {
+                    return comments.map((c) => {
+                        if (c.id === comment.replyId) {
+                            const newReplies = c.replies ? [...c.replies, comment] : [comment];
+                            return { ...c, replies: newReplies, replyCount: newReplies.length };
+                        }
+                        return c;
+                    });
+                });
+            }
+            else {
+                this.comments.update((comments) => [...comments, comment]);
+            }
+        });
+        this.commentService.commentUpdated$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((updatedComment) => {
+            const update = (list) => {
+                return list.map((c) => {
+                    if (c.id === updatedComment.id) {
+                        return { ...c, ...updatedComment, replies: updatedComment.replies || c.replies };
+                    }
+                    if (c.replies && c.replies.length > 0) {
+                        return { ...c, replies: update(c.replies) };
+                    }
+                    return c;
+                });
+            };
+            this.comments.update((comments) => update(comments));
+        });
+    }
+    getCurrentUser() {
+        const user = this.sessionService.user;
+        return user ? { id: user.id, type: 'user' } : null;
+    }
+    isLikedByUser(comment) {
+        const user = this.getCurrentUser();
+        if (!user)
+            return false;
+        return (comment.reactions || []).some((r) => r.author.id === user.id && r.type === 'like');
+    }
+    getReactionsCount(comment) {
+        return (comment.reactions || []).filter((r) => r.type === 'like').length;
+    }
+    sanitizeHtml(htmlContent) {
+        if (!htmlContent)
+            return this.sanitize.bypassSecurityTrustHtml('');
+        return this.sanitize.bypassSecurityTrustHtml(htmlContent);
+    }
+    handleImageError(imageId) {
+        this.failedImageIds.update((ids) => [...ids, imageId]);
+    }
+    checkImageExists(imageId) {
+        return !this.failedImageIds().includes(imageId);
+    }
+    async loadComments() {
+        try {
+            const thread = await this.commentService.getThread({ type: this.refrenceType(), id: this.refrenceId() }, this.subject());
+            if (thread) {
+                this.thread.set(thread);
+                this.comments.set(thread.comments);
+            }
+            else {
+                this.comments.set([]);
+                this.thread.set(undefined);
+            }
+        }
+        catch (error) {
+            console.error('Failed to load comments:', error);
+            this.toastService.show({
+                content: 'Failed to load comments. Please try again.',
+                color: 'danger',
                 location: 'bottom-center',
                 closeButton: true,
                 timeOut: 3000,
@@ -1151,36 +1122,31 @@ class AXMCommentListViewComponent {
             });
             this.comments.set([]);
         }
-        finally {
-            setTimeout(() => {
-                this.isLoading.set(false);
-            }, 250);
-        }
     }
-    editMessage(comment, reply) {
+    editMessage(comment, reply, userName) {
         this.isReplyingMode.set(false);
         this.activeReplyComment.set(undefined);
         this.isEditingMode.set(true);
-        this.activeEditComment.set(comment);
+        this.activeEditComment.set({ ...comment, userName: userName || '' });
         const contentToEdit = reply ? reply.message?.content : comment.message?.content;
         this.commentContent.set(contentToEdit || '');
         this.wysiwygEditor().getHostElement().scrollIntoView({ behavior: 'smooth', block: 'start' });
     }
-    replyMessage(comment, reply) {
+    replyMessage(comment, reply, userName) {
         this.isEditingMode.set(false);
         this.activeEditComment.set(undefined);
         this.isReplyingMode.set(true);
-        this.activeReplyComment.set(comment);
+        this.activeReplyComment.set({ ...comment, userName: userName || '' });
         if (reply) {
             const author = reply.author.fullName || reply.author.id;
             const mention = `<a data-id="${reply.id}">@${author}</a> `;
             this.commentContent.set(mention);
-            this.wysiwyg()?.focus();
             document.getElementsByClassName('ql-editor')[0].innerHTML = mention;
+            this.wysiwygEditor()?.focus();
         }
         this.wysiwygEditor().getHostElement().scrollIntoView({ behavior: 'smooth', block: 'start' });
     }
-    async deleteComment(comment) {
+    async deleteComment(commentId) {
         const dialog = this.dialogService.open({
             icon: 'fa-regular fa-warning',
             content: 'Are you sure you want to delete this comment?',
@@ -1197,77 +1163,20 @@ class AXMCommentListViewComponent {
                         e.source.disabled = true;
                         e.source.loading = true;
                         try {
-                            if (comment.id) {
-                                await this.commentService.deleteOne(comment.id);
-                                this.removeMessageById(comment.id);
-                                this.toastService.show({
-                                    content: 'Comment deleted successfully.',
-                                    color: 'success',
-                                    location: 'bottom-center',
-                                    closeButton: true,
-                                    timeOut: 3000,
-                                    timeOutProgress: true,
-                                });
-                                if (this.isEditingMode() && this.activeEditComment()?.id === comment.id) {
-                                    this.resetReplyEditState();
-                                }
-                                dialog.close();
-                            }
-                        }
-                        catch (error) {
+                            await this.commentService.deleteComment(commentId);
+                            this.removeMessageById(commentId);
                             this.toastService.show({
-                                content: typeof error === 'string' ? error : 'Failed to delete comment!',
-                                color: 'danger',
+                                content: 'Comment deleted successfully.',
+                                color: 'success',
                                 location: 'bottom-center',
                                 closeButton: true,
                                 timeOut: 3000,
                                 timeOutProgress: true,
                             });
-                        }
-                    },
-                },
-                {
-                    text: 'Cancel',
-                    color: 'default',
-                    autofocus: true,
-                    onClick: (e) => {
-                        dialog.close();
-                    },
-                },
-            ],
-            closeButton: false,
-        });
-    }
-    async deleteReply(comment, reply) {
-        const dialog = this.dialogService.open({
-            icon: 'fa-regular fa-warning',
-            content: 'Are you sure you want to delete this reply?',
-            title: 'Delete Reply',
-            type: 'danger',
-            orientation: 'horizontal',
-            buttons: [
-                {
-                    text: 'Delete',
-                    color: 'danger',
-                    onClick: async (e) => {
-                        e.handled = true;
-                        e.source.text = 'Deleting...';
-                        e.source.disabled = true;
-                        e.source.loading = true;
-                        try {
-                            if (reply.id) {
-                                await this.commentService.deleteOne(reply.id);
-                                this.removeMessageById(comment.id, reply.id);
-                                this.toastService.show({
-                                    content: 'Comment deleted successfully.',
-                                    color: 'success',
-                                    location: 'bottom-center',
-                                    closeButton: true,
-                                    timeOut: 3000,
-                                    timeOutProgress: true,
-                                });
-                                dialog.close();
+                            if (this.isEditingMode() && this.activeEditComment()?.id === commentId) {
+                                this.resetReplyEditState();
                             }
+                            dialog.close();
                         }
                         catch (error) {
                             this.toastService.show({
@@ -1301,130 +1210,83 @@ class AXMCommentListViewComponent {
         this.commentContent.set('');
         document.getElementsByClassName('ql-editor')[0].innerHTML = '';
     }
-    async toggleLike(comment, reply) {
+    async toggleLike(comment) {
+        const isLiked = this.isLikedByUser(comment);
+        this.updateLikeStatus(comment.id, !isLiked);
         try {
-            if (reply) {
-                if (reply.id) {
-                    this.updateLikeStatus(comment.id, reply.id);
-                    await this.commentService.like(reply.id);
-                }
+            if (isLiked) {
+                await this.commentService.unlikeComment(comment.id);
             }
             else {
-                if (comment.id) {
-                    this.updateLikeStatus(comment.id);
-                    await this.commentService.like(comment.id);
-                }
+                await this.commentService.likeComment(comment.id);
             }
         }
         catch (error) {
             console.error('Failed to toggle like:', error);
-            // Revert the optimistic update if the server call fails
-            if (reply && reply.id) {
-                this.updateLikeStatus(comment.id, reply.id);
-            }
-            else if (comment.id) {
-                this.updateLikeStatus(comment.id);
-            }
-        }
-    }
-    updateLikeStatus(commentId, replyId) {
-        this.comments.update((commentsList) => {
-            return commentsList.map((comment) => {
-                if (comment.id === commentId) {
-                    if (replyId && comment.replies) {
-                        const updatedReplies = comment.replies.map((reply) => reply.id === replyId
-                            ? {
-                                ...reply,
-                                isLiked: !reply.isLiked,
-                                reactionsCount: reply.isLiked && reply.reactionsCount !== undefined
-                                    ? reply.reactionsCount - 1
-                                    : (reply.reactionsCount || 0) + 1,
-                            }
-                            : reply);
-                        return {
-                            ...comment,
-                            replies: updatedReplies,
-                        };
+            this.updateLikeStatus(comment.id, isLiked); // Revert optimistic update
+        }
+    }
+    updateLikeStatus(commentId, willBeLiked) {
+        const findAndToggle = (comments) => {
+            return comments.map((c) => {
+                if (c.id === commentId) {
+                    const user = this.getCurrentUser();
+                    if (!user)
+                        return c;
+                    let reactions = c.reactions || [];
+                    if (willBeLiked) {
+                        reactions.push({ author: user, type: 'like' });
                     }
                     else {
-                        return {
-                            ...comment,
-                            isLiked: !comment.isLiked,
-                            reactionsCount: comment.isLiked && comment.reactionsCount !== undefined
-                                ? comment.reactionsCount - 1
-                                : (comment.reactionsCount || 0) + 1,
-                        };
+                        reactions = reactions.filter((r) => r.author.id !== user.id || r.type !== 'like');
                     }
+                    return { ...c, reactions };
+                }
+                if (c.replies && c.replies.length > 0) {
+                    c.replies = findAndToggle(c.replies);
                 }
-                return comment;
+                return c;
             });
-        });
-    }
-    removeMessageById(commentId, replyId) {
-        if (replyId) {
-            // Remove a reply from a comment
-            this.comments.update((commentsList) => commentsList.map((comment) => {
-                if (comment.id === commentId && comment.replies) {
-                    return {
-                        ...comment,
-                        replies: comment.replies.filter((reply) => reply.id !== replyId),
-                    };
+        };
+        this.comments.update((comments) => findAndToggle(comments));
+    }
+    removeMessageById(commentId) {
+        const filterOut = (comments) => {
+            return comments
+                .filter((c) => c.id !== commentId)
+                .map((c) => {
+                if (c.replies && c.replies.length > 0) {
+                    c.replies = filterOut(c.replies);
                 }
-                return comment;
-            }));
-        }
-        else {
-            // Remove a whole comment
-            this.comments.update((commentsList) => commentsList.filter((comment) => comment.id !== commentId));
-        }
+                return c;
+            });
+        };
+        this.comments.update((comments) => filterOut(comments));
     }
-    async submitComment(isPrivate = false) {
+    async submitComment() {
         if (!this.validateContent(this.commentContent()).result) {
             return;
         }
         this.isSubmitting.set(true);
-        let memberLookup;
-        if (isPrivate) {
-            const popupConfig = {
-                header: true,
-                size: 'md',
-                draggable: true,
-                hasBackdrop: true,
-                closeButton: true,
-                closeOnBackdropClick: false,
-            };
-            const popup = await this.popupService.open(AXMCommentLookupPopup, popupConfig);
-            memberLookup = popup.data?.lookup;
-        }
+        console.log(this.commentContent());
         try {
+            let currentThread = this.thread();
+            if (!currentThread) {
+                currentThread = await this.commentService.createThread({ type: this.refrenceType(), id: this.refrenceId() }, this.subject());
+                this.thread.set(currentThread);
+            }
             if (this.isEditingMode() && this.activeEditComment()?.id) {
-                const payload = {
-                    message: {
-                        content: this.commentContent(),
-                        contentType: 'text',
-                    },
-                };
-                await this.commentService.updateOne(this.activeEditComment().id, payload);
+                await this.commentService.editComment(this.activeEditComment().id, this.commentContent());
                 this.hasCooldown.set(true);
                 this.isEditingMode.set(false);
                 this.activeEditComment.set(undefined);
             }
             else {
-                const payload = {
-                    ...this.payload(),
-                    content: this.commentContent(),
-                    contentType: 'text',
-                    isPrivate: isPrivate,
-                    replyId: this.activeReplyComment()?.id ?? null,
-                };
-                await this.commentService.insertOne(payload);
+                await this.commentService.addComment(currentThread.id, this.commentContent(), this.activeReplyComment()?.id);
                 this.hasCooldown.set(true);
                 this.isReplyingMode.set(false);
                 this.activeReplyComment.set(undefined);
             }
-            // Reload comments to get the updated list with proper hierarchy
-            const response = await this.commentService.query(this.getPayload());
-            this.comments.set(response.items);
             this.commentContent.set('');
             document.getElementsByClassName('ql-editor')[0].innerHTML = '';
             setTimeout(() => {
@@ -1452,28 +1314,33 @@ class AXMCommentListViewComponent {
             const el = document.getElementById(comment.id);
             if (el) {
                 el.scrollIntoView({ behavior: 'smooth', block: 'center' });
-                const content = el?.firstElementChild?.children[1];
-                if (content) {
-                    const prevBg = content.style.background;
-                    content.style.borderRadius = '0.25rem';
-                    content.style.transition = 'background 1s ease-in-out';
-                    content.style.background = `rgba(var(--ax-color-on-surface), var(--tw-bg-opacity))`;
-                    setTimeout(() => {
-                        content.style.background = prevBg || 'rgba(0, 0, 0, 0)';
-                    }, 1000);
-                }
+                this.highlightedCommentId.set(comment.id);
+                setTimeout(() => {
+                    this.highlightedCommentId.set(null);
+                }, 1000);
             }
         }
     }
-    calcDefrenetTime(date) {
-        return date ? Date.now() - date.getTime() : undefined;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXMCommentListViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: AXMCommentListViewComponent, isStandalone: true, selector: "axm-comment-list-view", viewQueries: [{ propertyName: "wysiwygEditor", first: true, predicate: ["w"], descendants: true, isSignal: true }, { propertyName: "wysiwyg", first: true, predicate: ["w"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ax-mt-2\">\n  <ax-comment-container>\n    @if (isLoading()) {\n      <div class=\"ax-flex ax-items-center ax-py-12 ax-bg-lightest ax-px-5\">\n        <ax-skeleton class=\"ax-min-w-16 ax-h-16 ax-rounded-full ax-me-4\"></ax-skeleton>\n        <div class=\"ax-flex ax-flex-col ax-gap-2 ax-w-full\">\n          <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded\"></ax-skeleton>\n          <ax-skeleton class=\"ax-w-full ax-h-2 ax-rounded-full\"></ax-skeleton>\n          <ax-skeleton class=\"ax-w-full ax-h-2 ax-rounded-full\"></ax-skeleton>\n          <ax-skeleton class=\"ax-w-8/12 ax-h-2 ax-rounded-full\"></ax-skeleton>\n        </div>\n      </div>\n    } @else if (!isLoading() && comments().length > 0) {\n      <ax-comment-view class=\"ax-bg-lightest\">\n        @for (comment of comments(); track comment.id) {\n          <ax-comment-item [id]=\"comment.id!\" [replyCount]=\"comment.replies?.length ?? 0\">\n            <ax-avatar [color]=\"avatarConfig().color\" [shape]=\"avatarConfig().look\">\n              @if (checkImageExists(comment.id!) && comment.author && extractInitials(comment.author) !== '?') {\n                <ax-image (onError)=\"handleImageError(comment.id!)\" [src]=\"''\">\n                  <ax-loading></ax-loading>\n                </ax-image>\n              } @else {\n                <ax-text>\n                  <span class=\"ax-text-base ax-overflow-hidden\">{{ extractInitials(comment.author) }}</span>\n                </ax-text>\n              }\n            </ax-avatar>\n            <ax-title>{{ extractInitials(comment.author) }}</ax-title>\n            <ax-comment-date>{{ calcDefrenetTime(comment.createdAt) | format: 'timeleft' | async }} </ax-comment-date>\n            <ax-comment-menu-options>\n              <ax-button class=\"ax-sm\" look=\"blank\" color=\"neutral\">\n                <ax-icon icon=\"ax-icon ax-icon-solid ax-icon-more-horizontal\"></ax-icon>\n              </ax-button>\n\n              <ax-dropdown-panel>\n                <ax-button-item-list>\n                  <ax-button-item text=\"Edit\" color=\"neutral\" (click)=\"editMessage(comment)\">\n                    <ax-prefix>\n                      <ax-icon icon=\"fa-solid fa-edit\"></ax-icon>\n                    </ax-prefix>\n                  </ax-button-item>\n\n                  <ax-button-item text=\"Delete\" color=\"danger\" (click)=\"deleteComment(comment)\">\n                    <ax-prefix>\n                      <ax-icon icon=\"fa-solid fa-trash-can\"></ax-icon>\n                    </ax-prefix>\n                  </ax-button-item>\n                </ax-button-item-list>\n              </ax-dropdown-panel>\n            </ax-comment-menu-options>\n            <ax-content [innerHTML]=\"sanitizeHtml(comment.message.content)\"></ax-content>\n            <ax-comment-like (click)=\"toggleLike(comment)\" [liked]=\"comment.isLiked!\">\n              {{ comment.reactionsCount }}\n            </ax-comment-like>\n            <ax-comment-reply-text (click)=\"replyMessage(comment)\"></ax-comment-reply-text>\n            @for (reply of comment.replies; track reply.id) {\n              <ax-comment-item [id]=\"reply.id\">\n                <ax-avatar [color]=\"avatarConfig().color\" [shape]=\"avatarConfig().look\">\n                  @if (reply && checkImageExists(reply.id!) && reply.author && extractInitials(reply.author) !== '?') {\n                    <ax-image (onError)=\"handleImageError(reply.id!)\" [src]=\"''\">\n                      <ax-loading></ax-loading>\n                    </ax-image>\n                  } @else {\n                    <ax-text>\n                      <span class=\"ax-text-base ax-overflow-hidden\">{{ extractInitials(reply.author) }}</span>\n                    </ax-text>\n                  }\n                </ax-avatar>\n                <ax-title>{{ extractInitials(reply.author) }}</ax-title>\n                <ax-comment-date>{{ calcDefrenetTime(reply.createdAt) | format: 'timeleft' | async }} </ax-comment-date>\n                <ax-comment-menu-options>\n                  <ax-button class=\"ax-sm\" look=\"blank\" color=\"neutral\">\n                    <ax-icon icon=\"ax-icon ax-icon-solid ax-icon-more-horizontal\"></ax-icon>\n                  </ax-button>\n\n                  <ax-dropdown-panel>\n                    <ax-button-item-list>\n                      <ax-button-item text=\"Edit\" color=\"neutral\" (click)=\"editMessage(comment, reply)\">\n                        <ax-prefix>\n                          <ax-icon icon=\"fa-solid fa-edit\"></ax-icon>\n                        </ax-prefix>\n                      </ax-button-item>\n                      <ax-button-item text=\"Delete\" color=\"danger\" (click)=\"deleteReply(comment, reply)\">\n                        <ax-prefix>\n                          <ax-icon icon=\"fa-solid fa-trash-can\"></ax-icon>\n                        </ax-prefix>\n                      </ax-button-item>\n                    </ax-button-item-list>\n                  </ax-dropdown-panel>\n                </ax-comment-menu-options>\n                <ax-content [innerHTML]=\"sanitizeHtml(reply.message.content)\"></ax-content>\n                <ax-comment-like (click)=\"toggleLike(comment, reply)\" [liked]=\"reply.isLiked!\">\n                  {{ reply.reactionsCount }}\n                </ax-comment-like>\n                <ax-comment-reply-text (click)=\"replyMessage(comment, reply)\"></ax-comment-reply-text>\n              </ax-comment-item>\n            }\n          </ax-comment-item>\n        }\n      </ax-comment-view>\n    } @else {\n      <div>\n        <div class=\"ax-flex ax-flex-col ax-gap-4 ax-justify-center ax-items-center ax-p-10\">\n          <svg\n            class=\"ax-mx-auto\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"154\"\n            height=\"161\"\n            viewBox=\"0 0 154 161\"\n            fill=\"none\"\n          >\n            <path\n              d=\"M0.0616455 84.4268C0.0616455 42.0213 34.435 7.83765 76.6507 7.83765C118.803 7.83765 153.224 42.0055 153.224 84.4268C153.224 102.42 147.026 118.974 136.622 132.034C122.282 150.138 100.367 161 76.6507 161C52.7759 161 30.9882 150.059 16.6633 132.034C6.25961 118.974 0.0616455 102.42 0.0616455 84.4268Z\"\n              fill=\"#EEF2FF\"\n            />\n            <path\n              d=\"M96.8189 0.632498L96.8189 0.632384L96.8083 0.630954C96.2034 0.549581 95.5931 0.5 94.9787 0.5H29.338C22.7112 0.5 17.3394 5.84455 17.3394 12.4473V142.715C17.3394 149.318 22.7112 154.662 29.338 154.662H123.948C130.591 154.662 135.946 149.317 135.946 142.715V38.9309C135.946 38.0244 135.847 37.1334 135.648 36.2586L135.648 36.2584C135.117 33.9309 133.874 31.7686 132.066 30.1333C132.066 30.1331 132.065 30.1329 132.065 30.1327L103.068 3.65203C103.068 3.6519 103.067 3.65177 103.067 3.65164C101.311 2.03526 99.1396 0.995552 96.8189 0.632498Z\"\n              fill=\"white\"\n              stroke=\"#E5E7EB\"\n            />\n            <ellipse cx=\"80.0618\" cy=\"81\" rx=\"28.0342\" ry=\"28.0342\" fill=\"#EEF2FF\" />\n            <path\n              d=\"M99.2393 61.3061L99.2391 61.3058C88.498 50.5808 71.1092 50.5804 60.3835 61.3061C49.6423 72.0316 49.6422 89.4361 60.3832 100.162C71.109 110.903 88.4982 110.903 99.2393 100.162C109.965 89.4363 109.965 72.0317 99.2393 61.3061ZM105.863 54.6832C120.249 69.0695 120.249 92.3985 105.863 106.785C91.4605 121.171 68.1468 121.171 53.7446 106.785C39.3582 92.3987 39.3582 69.0693 53.7446 54.683C68.1468 40.2965 91.4605 40.2966 105.863 54.6832Z\"\n              stroke=\"#E5E7EB\"\n            />\n            <path\n              d=\"M110.782 119.267L102.016 110.492C104.888 108.267 107.476 105.651 109.564 102.955L118.329 111.729L110.782 119.267Z\"\n              stroke=\"#E5E7EB\"\n            />\n            <path\n              d=\"M139.122 125.781L139.122 125.78L123.313 109.988C123.313 109.987 123.313 109.987 123.312 109.986C121.996 108.653 119.849 108.657 118.521 109.985L118.871 110.335L118.521 109.985L109.047 119.459C107.731 120.775 107.735 122.918 109.044 124.247L109.047 124.249L124.858 140.06C128.789 143.992 135.191 143.992 139.122 140.06C143.069 136.113 143.069 129.728 139.122 125.781Z\"\n              fill=\"#A5B4FC\"\n              stroke=\"#818CF8\"\n            />\n            <path\n              d=\"M83.185 87.2285C82.5387 87.2285 82.0027 86.6926 82.0027 86.0305C82.0027 83.3821 77.9987 83.3821 77.9987 86.0305C77.9987 86.6926 77.4627 87.2285 76.8006 87.2285C76.1543 87.2285 75.6183 86.6926 75.6183 86.0305C75.6183 80.2294 84.3831 80.2451 84.3831 86.0305C84.3831 86.6926 83.8471 87.2285 83.185 87.2285Z\"\n              fill=\"#4F46E5\"\n            />\n            <path\n              d=\"M93.3528 77.0926H88.403C87.7409 77.0926 87.2049 76.5567 87.2049 75.8946C87.2049 75.2483 87.7409 74.7123 88.403 74.7123H93.3528C94.0149 74.7123 94.5509 75.2483 94.5509 75.8946C94.5509 76.5567 94.0149 77.0926 93.3528 77.0926Z\"\n              fill=\"#4F46E5\"\n            />\n            <path\n              d=\"M71.5987 77.0925H66.6488C65.9867 77.0925 65.4507 76.5565 65.4507 75.8945C65.4507 75.2481 65.9867 74.7122 66.6488 74.7122H71.5987C72.245 74.7122 72.781 75.2481 72.781 75.8945C72.781 76.5565 72.245 77.0925 71.5987 77.0925Z\"\n              fill=\"#4F46E5\"\n            />\n            <rect x=\"38.3522\" y=\"21.5128\" width=\"41.0256\" height=\"2.73504\" rx=\"1.36752\" fill=\"#4F46E5\" />\n            <rect x=\"38.3522\" y=\"133.65\" width=\"54.7009\" height=\"5.47009\" rx=\"2.73504\" fill=\"#A5B4FC\" />\n            <rect x=\"38.3522\" y=\"29.7179\" width=\"13.6752\" height=\"2.73504\" rx=\"1.36752\" fill=\"#4F46E5\" />\n            <circle cx=\"56.13\" cy=\"31.0854\" r=\"1.36752\" fill=\"#4F46E5\" />\n            <circle cx=\"61.6001\" cy=\"31.0854\" r=\"1.36752\" fill=\"#4F46E5\" />\n            <circle cx=\"67.0702\" cy=\"31.0854\" r=\"1.36752\" fill=\"#4F46E5\" />\n          </svg>\n          <div>\n            <h2 class=\"ax-text-center ax-text-neutral-600 ax-font-semibold ax-leading-loose ax-pb-2\">\n              There is no Comment!\n            </h2>\n          </div>\n        </div>\n      </div>\n    }\n  </ax-comment-container>\n  <ax-form>\n    <ax-form-field>\n      <div>\n        @if (isReplyingMode() || isEditingMode()) {\n          <div\n            class=\"ax-flex ax-justify-between ax-rounded-b-none ax-border ax-border-b-0 ax-rounded-lg ax-bg-on-surface ax-px-6 ax-py-3 ax-w-full ax-items-center ax-overflow-hidden ax-text-sm ax-leading-none\"\n          >\n            <div (click)=\"scrollMain()\" class=\"ax-flex ax-justify-start ax-items-center ax-cursor-pointer\">\n              <i\n                [class]=\"isReplyingMode() ? 'fa-reply' : 'fa-pen'\"\n                class=\"fa-solid ax-text-primary-500 dark:ax-text-primary-300 ax-text-2xl ax-me-4\"\n              ></i>\n              <div\n                class=\"ax-flex ax-flex-col ax-gap-2 ax-justify-between ax-align-middle ax-leading-4 ax-overflow-hidden\"\n              >\n                <p class=\"ax-text-primary-500 dark:ax-text-primary-300\">\n                  {{ isReplyingMode() ? 'Reply to ' : 'Edit Message' }}\n                  <span class=\"ax-font-bold\">\n                    {{ isReplyingMode() ? extractInitials(activeReplyComment()?.author) : '' }}\n                  </span>\n                </p>\n                <div\n                  class=\"ax-truncate\"\n                  [innerHTML]=\"\n                    isReplyingMode()\n                      ? sanitizeHtml(activeReplyComment()?.message?.content ?? '')\n                      : sanitizeHtml(activeEditComment()?.message?.content ?? '')\n                  \"\n                ></div>\n              </div>\n            </div>\n            <div><i (click)=\"resetReplyEditState()\" class=\"fa-solid ax-text-2xl fa-xmark ax-cursor-pointer\"></i></div>\n          </div>\n        }\n        <ax-wysiwyg-container #w [look]=\"wysiwygOptions().look\" [(ngModel)]=\"commentContent\">\n          <ax-wysiwyg-view class=\"ax-min-h-28\"></ax-wysiwyg-view>\n          <ax-toolbar>\n            <ax-content>\n              <ax-wysiwyg-history></ax-wysiwyg-history>\n              <ax-wysiwyg-font-style></ax-wysiwyg-font-style>\n              <ax-wysiwyg-colors></ax-wysiwyg-colors>\n              <ax-wysiwyg-list></ax-wysiwyg-list>\n              <ax-wysiwyg-alignment></ax-wysiwyg-alignment>\n            </ax-content>\n            <ax-suffix>\n              <ax-dropdown-button\n                [disabled]=\"hasCooldown()\"\n                type=\"submit\"\n                color=\"primary\"\n                mode=\"split\"\n                text=\"Send\"\n                (onClick)=\"submitComment()\"\n              >\n                @if (isSubmitting()) {\n                  <ax-loading></ax-loading>\n                }\n                <ax-button-item-list>\n                  <ax-button-item (click)=\"submitComment(true)\" text=\"Send Private ...\" name=\"private\" data=\"private\">\n                    <ax-prefix>\n                      <ax-icon icon=\"fa-regular fa-user-secret\"></ax-icon>\n                    </ax-prefix>\n                  </ax-button-item>\n                </ax-button-item-list>\n              </ax-dropdown-button>\n            </ax-suffix>\n          </ax-toolbar>\n          <ax-validation-rule rule=\"callback\" [options]=\"{ validate: validateContent }\"></ax-validation-rule>\n        </ax-wysiwyg-container>\n      </div>\n    </ax-form-field>\n  </ax-form>\n</div>\n", styles: ["ax-wysiwyg-container .ax-editor-container{border-top-left-radius:0!important;border-top-right-radius:0!important}ax-wysiwyg-container .ax-error-message{padding-left:.5rem}\n"], dependencies: [{ kind: "ngmodule", type: AXWysiwygModule }, { kind: "component", type: i1.AXWysiwygContainerComponent, selector: "ax-wysiwyg-container", inputs: ["look", "placeHolder"], outputs: ["onValueChanged"] }, { kind: "component", type: i1.AXWysiwygViewComponent, selector: "ax-wysiwyg-view", inputs: ["class"] }, { kind: "component", type: i1.AXWysiwygAlignmentComponent, selector: "ax-wysiwyg-alignment" }, { kind: "component", type: i1.AXWysiwygColorsComponent, selector: "ax-wysiwyg-colors" }, { kind: "component", type: i1.AXWysiwygFontStyleComponent, selector: "ax-wysiwyg-font-style" }, { kind: "component", type: i1.AXWysiwygHistoryComponent, selector: "ax-wysiwyg-history" }, { kind: "component", type: i1.AXWysiwygListComponent, selector: "ax-wysiwyg-list" }, { kind: "ngmodule", type: AXConversationModule }, { kind: "ngmodule", type: AXSkeletonModule }, { kind: "component", type: i2$1.AXSkeletonComponent, selector: "ax-skeleton", inputs: ["animated"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i5.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i5.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXCommentModule }, { kind: "component", type: i4.AXCommentViewComponent, selector: "ax-comment-view" }, { kind: "component", type: i4.AXCommentContainerComponent, selector: "ax-comment-container" }, { kind: "component", type: i4.AxCommentItemComponent, selector: "ax-comment-item", inputs: ["replyCount"] }, { kind: "component", type: i4.AXCommentLikeComponent, selector: "ax-comment-like", inputs: ["liked"], outputs: ["likedChange", "onLiked"] }, { kind: "component", type: i4.AXMenuOptionsComponent, selector: "ax-comment-menu-options" }, { kind: "component", type: i4.AXCommentReplyTextComponent, selector: "ax-comment-reply-text" }, { kind: "component", type: i4.AXCommentDateComponent, selector: "ax-comment-date" }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i5$1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: i5$1.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i5$1.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXAvatarModule }, { kind: "component", type: i6.AXAvatarComponent, selector: "ax-avatar", inputs: ["color", "size", "shape", "look"], outputs: ["sizeChange"] }, { kind: "ngmodule", type: AXImageModule }, { kind: "component", type: i7.AXImageComponent, selector: "ax-image", inputs: ["width", "height", "overlayMode", "src", "alt", "priority", "lazy"], outputs: ["onLoad", "onError"] }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "component", type: i8.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "component", type: i9.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "placement", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXFormatModule }, { kind: "pipe", type: i10.AXFormatPipe, name: "format" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: AXFormModule }, { kind: "component", type: i11.AXFormFieldComponent, selector: "ax-form-field", inputs: ["labelMode"] }, { kind: "component", type: i11.AXFormComponent, selector: "ax-form", inputs: ["labelMode", "look", "messageStyle", "updateOn"], outputs: ["onValidate", "updateOnChange"] }, { kind: "directive", type: i11.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }, { kind: "ngmodule", type: AXToolBarModule }, { kind: "component", type: i12.AXToolBarComponent, selector: "ax-toolbar" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i13.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i13.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXDropdownButtonModule }, { kind: "component", type: i14.AXDropdownButtonComponent, selector: "ax-dropdown-button", inputs: ["disabled", "size", "color", "look", "text", "type", "mode"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "lookChange", "colorChange", "disabledChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: AXMCommentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: AXMCommentComponent, isStandalone: true, selector: "axm-comment", inputs: { refrenceType: { classPropertyName: "refrenceType", publicName: "refrenceType", isSignal: true, isRequired: true, transformFunction: null }, refrenceId: { classPropertyName: "refrenceId", publicName: "refrenceId", isSignal: true, isRequired: true, transformFunction: null }, subject: { classPropertyName: "subject", publicName: "subject", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "wysiwygEditor", first: true, predicate: ["w"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ax-size-full ax-flex ax-flex-col ax-justify-between ax-p-4 ax-overflow-hidden\">\n  <ax-comment-container class=\"ax-overflow-auto\">\n    @if (isLoading()) {\n      <div class=\"ax-flex ax-items-center ax-py-12 ax-bg-lightest ax-px-5\">\n        <ax-skeleton class=\"ax-min-w-16 ax-h-16 ax-rounded-full ax-me-4\"></ax-skeleton>\n        <div class=\"ax-flex ax-flex-col ax-gap-2 ax-w-full\">\n          <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded\"></ax-skeleton>\n          <ax-skeleton class=\"ax-w-full ax-h-2 ax-rounded-full\"></ax-skeleton>\n          <ax-skeleton class=\"ax-w-full ax-h-2 ax-rounded-full\"></ax-skeleton>\n          <ax-skeleton class=\"ax-w-8/12 ax-h-2 ax-rounded-full\"></ax-skeleton>\n        </div>\n      </div>\n    } @else if (!isLoading() && comments().length > 0) {\n      <ax-comment-view class=\"ax-bg-lightest\">\n        @for (comment of comments(); track comment.id) {\n          <ax-comment-item\n            [id]=\"comment.id!\"\n            [replyCount]=\"comment.replyCount\"\n            [class.highlighted]=\"highlightedCommentId() === comment.id\"\n            [@fadeIn]\n          >\n            <axp-user-avatar #user [size]=\"48\" [userId]=\"comment.author.id\" ngProjectAs=\"'ax-avatar'\"></axp-user-avatar>\n            <ax-title>{{ user.firstName() + ' ' + user.lastName() }}</ax-title>\n            <ax-comment-date>{{ comment.createdAt | format: 'timeleft' | async }} </ax-comment-date>\n            <ax-comment-menu-options>\n              <ax-button class=\"ax-sm\" look=\"blank\" color=\"neutral\">\n                <ax-icon icon=\"ax-icon ax-icon-solid ax-icon-more-horizontal\"></ax-icon>\n              </ax-button>\n\n              <ax-dropdown-panel>\n                <ax-button-item-list>\n                  <ax-button-item\n                    text=\"Edit\"\n                    color=\"neutral\"\n                    (click)=\"editMessage(comment, undefined, user.firstName() + ' ' + user.lastName())\"\n                  >\n                    <ax-prefix>\n                      <ax-icon icon=\"fa-solid fa-edit\"></ax-icon>\n                    </ax-prefix>\n                  </ax-button-item>\n\n                  <ax-button-item text=\"Delete\" color=\"danger\" (click)=\"deleteComment(comment.id!)\">\n                    <ax-prefix>\n                      <ax-icon icon=\"fa-solid fa-trash-can\"></ax-icon>\n                    </ax-prefix>\n                  </ax-button-item>\n                </ax-button-item-list>\n              </ax-dropdown-panel>\n            </ax-comment-menu-options>\n            <ax-content [innerHTML]=\"sanitizeHtml(comment.message.content)\"></ax-content>\n            <ax-comment-like (click)=\"toggleLike(comment)\" [liked]=\"isLikedByUser(comment)\">\n              {{ getReactionsCount(comment) }}\n            </ax-comment-like>\n            <ax-comment-reply-text\n              (click)=\"replyMessage(comment, undefined, user.firstName() + ' ' + user.lastName())\"\n            ></ax-comment-reply-text>\n            @for (reply of comment.replies; track reply.id) {\n              <ax-comment-item [id]=\"reply.id\" [class.highlighted]=\"highlightedCommentId() === reply.id\" [@fadeIn]>\n                <axp-user-avatar\n                  #user2\n                  [size]=\"48\"\n                  [userId]=\"reply.author.id\"\n                  ngProjectAs=\"'ax-avatar'\"\n                ></axp-user-avatar>\n                <ax-title>{{ user2.firstName() + ' ' + user2.lastName() }}</ax-title>\n                <ax-comment-date>{{ reply.createdAt | format: 'timeleft' | async }} </ax-comment-date>\n                <ax-comment-menu-options>\n                  <ax-button class=\"ax-sm\" look=\"blank\" color=\"neutral\">\n                    <ax-icon icon=\"ax-icon ax-icon-solid ax-icon-more-horizontal\"></ax-icon>\n                  </ax-button>\n\n                  <ax-dropdown-panel>\n                    <ax-button-item-list>\n                      <ax-button-item\n                        text=\"Edit\"\n                        color=\"neutral\"\n                        (click)=\"editMessage(comment, reply, user2.firstName() + ' ' + user2.lastName())\"\n                      >\n                        <ax-prefix>\n                          <ax-icon icon=\"fa-solid fa-edit\"></ax-icon>\n                        </ax-prefix>\n                      </ax-button-item>\n                      <ax-button-item text=\"Delete\" color=\"danger\" (click)=\"deleteComment(reply.id!)\">\n                        <ax-prefix>\n                          <ax-icon icon=\"fa-solid fa-trash-can\"></ax-icon>\n                        </ax-prefix>\n                      </ax-button-item>\n                    </ax-button-item-list>\n                  </ax-dropdown-panel>\n                </ax-comment-menu-options>\n                <ax-content [innerHTML]=\"sanitizeHtml(reply.message.content)\"></ax-content>\n                <ax-comment-like (click)=\"toggleLike(reply)\" [liked]=\"isLikedByUser(reply)\">\n                  {{ getReactionsCount(reply) }}\n                </ax-comment-like>\n                <ax-comment-reply-text\n                  (click)=\"replyMessage(comment, reply, user2.firstName() + ' ' + user2.lastName())\"\n                ></ax-comment-reply-text>\n              </ax-comment-item>\n            }\n          </ax-comment-item>\n        }\n      </ax-comment-view>\n    } @else {\n      <div>\n        <div class=\"ax-flex ax-flex-col ax-gap-4 ax-justify-center ax-items-center ax-p-10\">\n          <svg\n            class=\"ax-mx-auto\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"154\"\n            height=\"161\"\n            viewBox=\"0 0 154 161\"\n            fill=\"none\"\n          >\n            <path\n              d=\"M0.0616455 84.4268C0.0616455 42.0213 34.435 7.83765 76.6507 7.83765C118.803 7.83765 153.224 42.0055 153.224 84.4268C153.224 102.42 147.026 118.974 136.622 132.034C122.282 150.138 100.367 161 76.6507 161C52.7759 161 30.9882 150.059 16.6633 132.034C6.25961 118.974 0.0616455 102.42 0.0616455 84.4268Z\"\n              fill=\"#EEF2FF\"\n            />\n            <path\n              d=\"M96.8189 0.632498L96.8189 0.632384L96.8083 0.630954C96.2034 0.549581 95.5931 0.5 94.9787 0.5H29.338C22.7112 0.5 17.3394 5.84455 17.3394 12.4473V142.715C17.3394 149.318 22.7112 154.662 29.338 154.662H123.948C130.591 154.662 135.946 149.317 135.946 142.715V38.9309C135.946 38.0244 135.847 37.1334 135.648 36.2586L135.648 36.2584C135.117 33.9309 133.874 31.7686 132.066 30.1333C132.066 30.1331 132.065 30.1329 132.065 30.1327L103.068 3.65203C103.068 3.6519 103.067 3.65177 103.067 3.65164C101.311 2.03526 99.1396 0.995552 96.8189 0.632498Z\"\n              fill=\"white\"\n              stroke=\"#E5E7EB\"\n            />\n            <ellipse cx=\"80.0618\" cy=\"81\" rx=\"28.0342\" ry=\"28.0342\" fill=\"#EEF2FF\" />\n            <path\n              d=\"M99.2393 61.3061L99.2391 61.3058C88.498 50.5808 71.1092 50.5804 60.3835 61.3061C49.6423 72.0316 49.6422 89.4361 60.3832 100.162C71.109 110.903 88.4982 110.903 99.2393 100.162C109.965 89.4363 109.965 72.0317 99.2393 61.3061ZM105.863 54.6832C120.249 69.0695 120.249 92.3985 105.863 106.785C91.4605 121.171 68.1468 121.171 53.7446 106.785C39.3582 92.3987 39.3582 69.0693 53.7446 54.683C68.1468 40.2965 91.4605 40.2966 105.863 54.6832Z\"\n              stroke=\"#E5E7EB\"\n            />\n            <path\n              d=\"M110.782 119.267L102.016 110.492C104.888 108.267 107.476 105.651 109.564 102.955L118.329 111.729L110.782 119.267Z\"\n              stroke=\"#E5E7EB\"\n            />\n            <path\n              d=\"M139.122 125.781L139.122 125.78L123.313 109.988C123.313 109.987 123.313 109.987 123.312 109.986C121.996 108.653 119.849 108.657 118.521 109.985L118.871 110.335L118.521 109.985L109.047 119.459C107.731 120.775 107.735 122.918 109.044 124.247L109.047 124.249L124.858 140.06C128.789 143.992 135.191 143.992 139.122 140.06C143.069 136.113 143.069 129.728 139.122 125.781Z\"\n              fill=\"#A5B4FC\"\n              stroke=\"#818CF8\"\n            />\n            <path\n              d=\"M83.185 87.2285C82.5387 87.2285 82.0027 86.6926 82.0027 86.0305C82.0027 83.3821 77.9987 83.3821 77.9987 86.0305C77.9987 86.6926 77.4627 87.2285 76.8006 87.2285C76.1543 87.2285 75.6183 86.6926 75.6183 86.0305C75.6183 80.2294 84.3831 80.2451 84.3831 86.0305C84.3831 86.6926 83.8471 87.2285 83.185 87.2285Z\"\n              fill=\"#4F46E5\"\n            />\n            <path\n              d=\"M93.3528 77.0926H88.403C87.7409 77.0926 87.2049 76.5567 87.2049 75.8946C87.2049 75.2483 87.7409 74.7123 88.403 74.7123H93.3528C94.0149 74.7123 94.5509 75.2483 94.5509 75.8946C94.5509 76.5567 94.0149 77.0926 93.3528 77.0926Z\"\n              fill=\"#4F46E5\"\n            />\n            <path\n              d=\"M71.5987 77.0925H66.6488C65.9867 77.0925 65.4507 76.5565 65.4507 75.8945C65.4507 75.2481 65.9867 74.7122 66.6488 74.7122H71.5987C72.245 74.7122 72.781 75.2481 72.781 75.8945C72.781 76.5565 72.245 77.0925 71.5987 77.0925Z\"\n              fill=\"#4F46E5\"\n            />\n            <rect x=\"38.3522\" y=\"21.5128\" width=\"41.0256\" height=\"2.73504\" rx=\"1.36752\" fill=\"#4F46E5\" />\n            <rect x=\"38.3522\" y=\"133.65\" width=\"54.7009\" height=\"5.47009\" rx=\"2.73504\" fill=\"#A5B4FC\" />\n            <rect x=\"38.3522\" y=\"29.7179\" width=\"13.6752\" height=\"2.73504\" rx=\"1.36752\" fill=\"#4F46E5\" />\n            <circle cx=\"56.13\" cy=\"31.0854\" r=\"1.36752\" fill=\"#4F46E5\" />\n            <circle cx=\"61.6001\" cy=\"31.0854\" r=\"1.36752\" fill=\"#4F46E5\" />\n            <circle cx=\"67.0702\" cy=\"31.0854\" r=\"1.36752\" fill=\"#4F46E5\" />\n          </svg>\n          <div>\n            <h2 class=\"ax-text-center ax-text-neutral-600 ax-font-semibold ax-leading-loose ax-pb-2\">\n              There is no Comment!\n            </h2>\n          </div>\n        </div>\n      </div>\n    }\n  </ax-comment-container>\n  <ax-form>\n    <ax-form-field>\n      <div>\n        @if (isReplyingMode() || isEditingMode()) {\n          <div\n            class=\"ax-flex ax-justify-between ax-rounded-b-none ax-border ax-border-b-0 ax-rounded-lg ax-px-6 ax-py-3 ax-w-full ax-items-center ax-overflow-hidden ax-text-sm ax-leading-none\"\n          >\n            <div (click)=\"scrollMain()\" class=\"ax-flex ax-justify-start ax-items-center ax-cursor-pointer\">\n              <i\n                [class]=\"isReplyingMode() ? 'fa-reply' : 'fa-pen'\"\n                class=\"fa-solid ax-text-primary-500 dark:ax-text-primary-300 ax-text-2xl ax-me-4\"\n              ></i>\n              <div\n                class=\"ax-flex ax-flex-col ax-gap-2 ax-justify-between ax-align-middle ax-leading-4 ax-overflow-hidden\"\n              >\n                <p class=\"ax-text-primary-500 dark:ax-text-primary-300\">\n                  {{ isReplyingMode() ? 'Reply to ' : 'Edit Message' }}\n                  <span class=\"ax-font-bold\">\n                    {{ isReplyingMode() ? activeReplyComment()?.userName : '' }}\n                  </span>\n                </p>\n                <div\n                  class=\"ax-truncate\"\n                  [innerHTML]=\"\n                    isReplyingMode()\n                      ? sanitizeHtml(activeReplyComment()?.message?.content ?? '')\n                      : sanitizeHtml(activeEditComment()?.message?.content ?? '')\n                  \"\n                ></div>\n              </div>\n            </div>\n            <div><i (click)=\"resetReplyEditState()\" class=\"fa-solid ax-text-2xl fa-xmark ax-cursor-pointer\"></i></div>\n          </div>\n        }\n        <ax-wysiwyg-container #w [look]=\"wysiwygOptions().look\" [(ngModel)]=\"commentContent\">\n          <ax-wysiwyg-view class=\"ax-min-h-28\"></ax-wysiwyg-view>\n          <ax-toolbar>\n            <ax-content>\n              <ax-wysiwyg-history></ax-wysiwyg-history>\n              <ax-wysiwyg-font-style></ax-wysiwyg-font-style>\n              <ax-wysiwyg-colors></ax-wysiwyg-colors>\n              <ax-wysiwyg-list></ax-wysiwyg-list>\n              <ax-wysiwyg-alignment></ax-wysiwyg-alignment>\n            </ax-content>\n            <ax-suffix>\n              <ax-dropdown-button\n                [disabled]=\"hasCooldown()\"\n                type=\"submit\"\n                color=\"primary\"\n                mode=\"split\"\n                text=\"Send\"\n                (onClick)=\"submitComment()\"\n              >\n                @if (isSubmitting()) {\n                  <ax-loading></ax-loading>\n                }\n                <ax-button-item-list>\n                  <ax-button-item (click)=\"submitComment()\" text=\"Send Private ...\" name=\"private\" data=\"private\">\n                    <ax-prefix>\n                      <ax-icon icon=\"fa-regular fa-user-secret\"></ax-icon>\n                    </ax-prefix>\n                  </ax-button-item>\n                </ax-button-item-list>\n              </ax-dropdown-button>\n            </ax-suffix>\n          </ax-toolbar>\n          <ax-validation-rule rule=\"callback\" [options]=\"{ validate: validateContent }\"></ax-validation-rule>\n        </ax-wysiwyg-container>\n      </div>\n    </ax-form-field>\n  </ax-form>\n</div>\n", styles: [":host{display:block;width:100%;height:100%}ax-wysiwyg-container .ax-editor-container{border-top-left-radius:0!important;border-top-right-radius:0!important}ax-wysiwyg-container .ax-error-message{padding-left:.5rem}ax-wysiwyg-container .highlighted{background:var(--ax-color-primary-050)!important;border-radius:.25rem;transition:background 1s ease-in-out}\n"], dependencies: [{ kind: "ngmodule", type: AXWysiwygModule }, { kind: "component", type: i1.AXWysiwygContainerComponent, selector: "ax-wysiwyg-container", inputs: ["look", "placeHolder"], outputs: ["onValueChanged"] }, { kind: "component", type: i1.AXWysiwygViewComponent, selector: "ax-wysiwyg-view", inputs: ["class"] }, { kind: "component", type: i1.AXWysiwygAlignmentComponent, selector: "ax-wysiwyg-alignment" }, { kind: "component", type: i1.AXWysiwygColorsComponent, selector: "ax-wysiwyg-colors" }, { kind: "component", type: i1.AXWysiwygFontStyleComponent, selector: "ax-wysiwyg-font-style" }, { kind: "component", type: i1.AXWysiwygHistoryComponent, selector: "ax-wysiwyg-history" }, { kind: "component", type: i1.AXWysiwygListComponent, selector: "ax-wysiwyg-list" }, { kind: "ngmodule", type: AXConversationModule }, { kind: "ngmodule", type: AXSkeletonModule }, { kind: "component", type: i2.AXSkeletonComponent, selector: "ax-skeleton", inputs: ["animated"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i1$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXCommentModule }, { kind: "component", type: i4.AXCommentViewComponent, selector: "ax-comment-view" }, { kind: "component", type: i4.AXCommentContainerComponent, selector: "ax-comment-container" }, { kind: "component", type: i4.AxCommentItemComponent, selector: "ax-comment-item", inputs: ["replyCount"] }, { kind: "component", type: i4.AXCommentLikeComponent, selector: "ax-comment-like", inputs: ["liked"], outputs: ["likedChange", "onLiked"] }, { kind: "component", type: i4.AXMenuOptionsComponent, selector: "ax-comment-menu-options" }, { kind: "component", type: i4.AXCommentReplyTextComponent, selector: "ax-comment-reply-text" }, { kind: "component", type: i4.AXCommentDateComponent, selector: "ax-comment-date" }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i5.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: i5.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i5.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXAvatarModule }, { kind: "ngmodule", type: AXImageModule }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "component", type: i6.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "component", type: i7.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "placement", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXFormatModule }, { kind: "pipe", type: i8.AXFormatPipe, name: "format" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: AXFormModule }, { kind: "component", type: i9.AXFormFieldComponent, selector: "ax-form-field", inputs: ["labelMode"] }, { kind: "component", type: i9.AXFormComponent, selector: "ax-form", inputs: ["labelMode", "look", "messageStyle", "updateOn"], outputs: ["onValidate", "updateOnChange"] }, { kind: "directive", type: i9.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }, { kind: "ngmodule", type: AXToolBarModule }, { kind: "component", type: i10.AXToolBarComponent, selector: "ax-toolbar" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i11.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i11.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXDropdownButtonModule }, { kind: "component", type: i12.AXDropdownButtonComponent, selector: "ax-dropdown-button", inputs: ["disabled", "size", "color", "look", "text", "type", "mode"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "lookChange", "colorChange", "disabledChange"] }, { kind: "component", type: AXPUserAvatarComponent, selector: "axp-user-avatar", inputs: ["size", "userId"] }], animations: [
+            trigger('fadeIn', [
+                transition(':enter', [
+                    style({ opacity: 0, transform: 'translateY(10px)' }),
+                    animate('300ms ease-out', style({ opacity: 1, transform: 'translateY(0)' })),
+                ]),
+            ]),
+        ], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXMCommentListViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: AXMCommentComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'axm-comment-list-view', imports: [
+            args: [{ selector: 'axm-comment', animations: [
+                        trigger('fadeIn', [
+                            transition(':enter', [
+                                style({ opacity: 0, transform: 'translateY(10px)' }),
+                                animate('300ms ease-out', style({ opacity: 1, transform: 'translateY(0)' })),
+                            ]),
+                        ]),
+                    ], imports: [
                         AXWysiwygModule,
                         AXConversationModule,
                         AXSkeletonModule,
@@ -1490,106 +1357,356 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImpor
                         AXToolBarModule,
                         FormsModule,
                         AXDropdownButtonModule,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ax-mt-2\">\n  <ax-comment-container>\n    @if (isLoading()) {\n      <div class=\"ax-flex ax-items-center ax-py-12 ax-bg-lightest ax-px-5\">\n        <ax-skeleton class=\"ax-min-w-16 ax-h-16 ax-rounded-full ax-me-4\"></ax-skeleton>\n        <div class=\"ax-flex ax-flex-col ax-gap-2 ax-w-full\">\n          <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded\"></ax-skeleton>\n          <ax-skeleton class=\"ax-w-full ax-h-2 ax-rounded-full\"></ax-skeleton>\n          <ax-skeleton class=\"ax-w-full ax-h-2 ax-rounded-full\"></ax-skeleton>\n          <ax-skeleton class=\"ax-w-8/12 ax-h-2 ax-rounded-full\"></ax-skeleton>\n        </div>\n      </div>\n    } @else if (!isLoading() && comments().length > 0) {\n      <ax-comment-view class=\"ax-bg-lightest\">\n        @for (comment of comments(); track comment.id) {\n          <ax-comment-item [id]=\"comment.id!\" [replyCount]=\"comment.replies?.length ?? 0\">\n            <ax-avatar [color]=\"avatarConfig().color\" [shape]=\"avatarConfig().look\">\n              @if (checkImageExists(comment.id!) && comment.author && extractInitials(comment.author) !== '?') {\n                <ax-image (onError)=\"handleImageError(comment.id!)\" [src]=\"''\">\n                  <ax-loading></ax-loading>\n                </ax-image>\n              } @else {\n                <ax-text>\n                  <span class=\"ax-text-base ax-overflow-hidden\">{{ extractInitials(comment.author) }}</span>\n                </ax-text>\n              }\n            </ax-avatar>\n            <ax-title>{{ extractInitials(comment.author) }}</ax-title>\n            <ax-comment-date>{{ calcDefrenetTime(comment.createdAt) | format: 'timeleft' | async }} </ax-comment-date>\n            <ax-comment-menu-options>\n              <ax-button class=\"ax-sm\" look=\"blank\" color=\"neutral\">\n                <ax-icon icon=\"ax-icon ax-icon-solid ax-icon-more-horizontal\"></ax-icon>\n              </ax-button>\n\n              <ax-dropdown-panel>\n                <ax-button-item-list>\n                  <ax-button-item text=\"Edit\" color=\"neutral\" (click)=\"editMessage(comment)\">\n                    <ax-prefix>\n                      <ax-icon icon=\"fa-solid fa-edit\"></ax-icon>\n                    </ax-prefix>\n                  </ax-button-item>\n\n                  <ax-button-item text=\"Delete\" color=\"danger\" (click)=\"deleteComment(comment)\">\n                    <ax-prefix>\n                      <ax-icon icon=\"fa-solid fa-trash-can\"></ax-icon>\n                    </ax-prefix>\n                  </ax-button-item>\n                </ax-button-item-list>\n              </ax-dropdown-panel>\n            </ax-comment-menu-options>\n            <ax-content [innerHTML]=\"sanitizeHtml(comment.message.content)\"></ax-content>\n            <ax-comment-like (click)=\"toggleLike(comment)\" [liked]=\"comment.isLiked!\">\n              {{ comment.reactionsCount }}\n            </ax-comment-like>\n            <ax-comment-reply-text (click)=\"replyMessage(comment)\"></ax-comment-reply-text>\n            @for (reply of comment.replies; track reply.id) {\n              <ax-comment-item [id]=\"reply.id\">\n                <ax-avatar [color]=\"avatarConfig().color\" [shape]=\"avatarConfig().look\">\n                  @if (reply && checkImageExists(reply.id!) && reply.author && extractInitials(reply.author) !== '?') {\n                    <ax-image (onError)=\"handleImageError(reply.id!)\" [src]=\"''\">\n                      <ax-loading></ax-loading>\n                    </ax-image>\n                  } @else {\n                    <ax-text>\n                      <span class=\"ax-text-base ax-overflow-hidden\">{{ extractInitials(reply.author) }}</span>\n                    </ax-text>\n                  }\n                </ax-avatar>\n                <ax-title>{{ extractInitials(reply.author) }}</ax-title>\n                <ax-comment-date>{{ calcDefrenetTime(reply.createdAt) | format: 'timeleft' | async }} </ax-comment-date>\n                <ax-comment-menu-options>\n                  <ax-button class=\"ax-sm\" look=\"blank\" color=\"neutral\">\n                    <ax-icon icon=\"ax-icon ax-icon-solid ax-icon-more-horizontal\"></ax-icon>\n                  </ax-button>\n\n                  <ax-dropdown-panel>\n                    <ax-button-item-list>\n                      <ax-button-item text=\"Edit\" color=\"neutral\" (click)=\"editMessage(comment, reply)\">\n                        <ax-prefix>\n                          <ax-icon icon=\"fa-solid fa-edit\"></ax-icon>\n                        </ax-prefix>\n                      </ax-button-item>\n                      <ax-button-item text=\"Delete\" color=\"danger\" (click)=\"deleteReply(comment, reply)\">\n                        <ax-prefix>\n                          <ax-icon icon=\"fa-solid fa-trash-can\"></ax-icon>\n                        </ax-prefix>\n                      </ax-button-item>\n                    </ax-button-item-list>\n                  </ax-dropdown-panel>\n                </ax-comment-menu-options>\n                <ax-content [innerHTML]=\"sanitizeHtml(reply.message.content)\"></ax-content>\n                <ax-comment-like (click)=\"toggleLike(comment, reply)\" [liked]=\"reply.isLiked!\">\n                  {{ reply.reactionsCount }}\n                </ax-comment-like>\n                <ax-comment-reply-text (click)=\"replyMessage(comment, reply)\"></ax-comment-reply-text>\n              </ax-comment-item>\n            }\n          </ax-comment-item>\n        }\n      </ax-comment-view>\n    } @else {\n      <div>\n        <div class=\"ax-flex ax-flex-col ax-gap-4 ax-justify-center ax-items-center ax-p-10\">\n          <svg\n            class=\"ax-mx-auto\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"154\"\n            height=\"161\"\n            viewBox=\"0 0 154 161\"\n            fill=\"none\"\n          >\n            <path\n              d=\"M0.0616455 84.4268C0.0616455 42.0213 34.435 7.83765 76.6507 7.83765C118.803 7.83765 153.224 42.0055 153.224 84.4268C153.224 102.42 147.026 118.974 136.622 132.034C122.282 150.138 100.367 161 76.6507 161C52.7759 161 30.9882 150.059 16.6633 132.034C6.25961 118.974 0.0616455 102.42 0.0616455 84.4268Z\"\n              fill=\"#EEF2FF\"\n            />\n            <path\n              d=\"M96.8189 0.632498L96.8189 0.632384L96.8083 0.630954C96.2034 0.549581 95.5931 0.5 94.9787 0.5H29.338C22.7112 0.5 17.3394 5.84455 17.3394 12.4473V142.715C17.3394 149.318 22.7112 154.662 29.338 154.662H123.948C130.591 154.662 135.946 149.317 135.946 142.715V38.9309C135.946 38.0244 135.847 37.1334 135.648 36.2586L135.648 36.2584C135.117 33.9309 133.874 31.7686 132.066 30.1333C132.066 30.1331 132.065 30.1329 132.065 30.1327L103.068 3.65203C103.068 3.6519 103.067 3.65177 103.067 3.65164C101.311 2.03526 99.1396 0.995552 96.8189 0.632498Z\"\n              fill=\"white\"\n              stroke=\"#E5E7EB\"\n            />\n            <ellipse cx=\"80.0618\" cy=\"81\" rx=\"28.0342\" ry=\"28.0342\" fill=\"#EEF2FF\" />\n            <path\n              d=\"M99.2393 61.3061L99.2391 61.3058C88.498 50.5808 71.1092 50.5804 60.3835 61.3061C49.6423 72.0316 49.6422 89.4361 60.3832 100.162C71.109 110.903 88.4982 110.903 99.2393 100.162C109.965 89.4363 109.965 72.0317 99.2393 61.3061ZM105.863 54.6832C120.249 69.0695 120.249 92.3985 105.863 106.785C91.4605 121.171 68.1468 121.171 53.7446 106.785C39.3582 92.3987 39.3582 69.0693 53.7446 54.683C68.1468 40.2965 91.4605 40.2966 105.863 54.6832Z\"\n              stroke=\"#E5E7EB\"\n            />\n            <path\n              d=\"M110.782 119.267L102.016 110.492C104.888 108.267 107.476 105.651 109.564 102.955L118.329 111.729L110.782 119.267Z\"\n              stroke=\"#E5E7EB\"\n            />\n            <path\n              d=\"M139.122 125.781L139.122 125.78L123.313 109.988C123.313 109.987 123.313 109.987 123.312 109.986C121.996 108.653 119.849 108.657 118.521 109.985L118.871 110.335L118.521 109.985L109.047 119.459C107.731 120.775 107.735 122.918 109.044 124.247L109.047 124.249L124.858 140.06C128.789 143.992 135.191 143.992 139.122 140.06C143.069 136.113 143.069 129.728 139.122 125.781Z\"\n              fill=\"#A5B4FC\"\n              stroke=\"#818CF8\"\n            />\n            <path\n              d=\"M83.185 87.2285C82.5387 87.2285 82.0027 86.6926 82.0027 86.0305C82.0027 83.3821 77.9987 83.3821 77.9987 86.0305C77.9987 86.6926 77.4627 87.2285 76.8006 87.2285C76.1543 87.2285 75.6183 86.6926 75.6183 86.0305C75.6183 80.2294 84.3831 80.2451 84.3831 86.0305C84.3831 86.6926 83.8471 87.2285 83.185 87.2285Z\"\n              fill=\"#4F46E5\"\n            />\n            <path\n              d=\"M93.3528 77.0926H88.403C87.7409 77.0926 87.2049 76.5567 87.2049 75.8946C87.2049 75.2483 87.7409 74.7123 88.403 74.7123H93.3528C94.0149 74.7123 94.5509 75.2483 94.5509 75.8946C94.5509 76.5567 94.0149 77.0926 93.3528 77.0926Z\"\n              fill=\"#4F46E5\"\n            />\n            <path\n              d=\"M71.5987 77.0925H66.6488C65.9867 77.0925 65.4507 76.5565 65.4507 75.8945C65.4507 75.2481 65.9867 74.7122 66.6488 74.7122H71.5987C72.245 74.7122 72.781 75.2481 72.781 75.8945C72.781 76.5565 72.245 77.0925 71.5987 77.0925Z\"\n              fill=\"#4F46E5\"\n            />\n            <rect x=\"38.3522\" y=\"21.5128\" width=\"41.0256\" height=\"2.73504\" rx=\"1.36752\" fill=\"#4F46E5\" />\n            <rect x=\"38.3522\" y=\"133.65\" width=\"54.7009\" height=\"5.47009\" rx=\"2.73504\" fill=\"#A5B4FC\" />\n            <rect x=\"38.3522\" y=\"29.7179\" width=\"13.6752\" height=\"2.73504\" rx=\"1.36752\" fill=\"#4F46E5\" />\n            <circle cx=\"56.13\" cy=\"31.0854\" r=\"1.36752\" fill=\"#4F46E5\" />\n            <circle cx=\"61.6001\" cy=\"31.0854\" r=\"1.36752\" fill=\"#4F46E5\" />\n            <circle cx=\"67.0702\" cy=\"31.0854\" r=\"1.36752\" fill=\"#4F46E5\" />\n          </svg>\n          <div>\n            <h2 class=\"ax-text-center ax-text-neutral-600 ax-font-semibold ax-leading-loose ax-pb-2\">\n              There is no Comment!\n            </h2>\n          </div>\n        </div>\n      </div>\n    }\n  </ax-comment-container>\n  <ax-form>\n    <ax-form-field>\n      <div>\n        @if (isReplyingMode() || isEditingMode()) {\n          <div\n            class=\"ax-flex ax-justify-between ax-rounded-b-none ax-border ax-border-b-0 ax-rounded-lg ax-bg-on-surface ax-px-6 ax-py-3 ax-w-full ax-items-center ax-overflow-hidden ax-text-sm ax-leading-none\"\n          >\n            <div (click)=\"scrollMain()\" class=\"ax-flex ax-justify-start ax-items-center ax-cursor-pointer\">\n              <i\n                [class]=\"isReplyingMode() ? 'fa-reply' : 'fa-pen'\"\n                class=\"fa-solid ax-text-primary-500 dark:ax-text-primary-300 ax-text-2xl ax-me-4\"\n              ></i>\n              <div\n                class=\"ax-flex ax-flex-col ax-gap-2 ax-justify-between ax-align-middle ax-leading-4 ax-overflow-hidden\"\n              >\n                <p class=\"ax-text-primary-500 dark:ax-text-primary-300\">\n                  {{ isReplyingMode() ? 'Reply to ' : 'Edit Message' }}\n                  <span class=\"ax-font-bold\">\n                    {{ isReplyingMode() ? extractInitials(activeReplyComment()?.author) : '' }}\n                  </span>\n                </p>\n                <div\n                  class=\"ax-truncate\"\n                  [innerHTML]=\"\n                    isReplyingMode()\n                      ? sanitizeHtml(activeReplyComment()?.message?.content ?? '')\n                      : sanitizeHtml(activeEditComment()?.message?.content ?? '')\n                  \"\n                ></div>\n              </div>\n            </div>\n            <div><i (click)=\"resetReplyEditState()\" class=\"fa-solid ax-text-2xl fa-xmark ax-cursor-pointer\"></i></div>\n          </div>\n        }\n        <ax-wysiwyg-container #w [look]=\"wysiwygOptions().look\" [(ngModel)]=\"commentContent\">\n          <ax-wysiwyg-view class=\"ax-min-h-28\"></ax-wysiwyg-view>\n          <ax-toolbar>\n            <ax-content>\n              <ax-wysiwyg-history></ax-wysiwyg-history>\n              <ax-wysiwyg-font-style></ax-wysiwyg-font-style>\n              <ax-wysiwyg-colors></ax-wysiwyg-colors>\n              <ax-wysiwyg-list></ax-wysiwyg-list>\n              <ax-wysiwyg-alignment></ax-wysiwyg-alignment>\n            </ax-content>\n            <ax-suffix>\n              <ax-dropdown-button\n                [disabled]=\"hasCooldown()\"\n                type=\"submit\"\n                color=\"primary\"\n                mode=\"split\"\n                text=\"Send\"\n                (onClick)=\"submitComment()\"\n              >\n                @if (isSubmitting()) {\n                  <ax-loading></ax-loading>\n                }\n                <ax-button-item-list>\n                  <ax-button-item (click)=\"submitComment(true)\" text=\"Send Private ...\" name=\"private\" data=\"private\">\n                    <ax-prefix>\n                      <ax-icon icon=\"fa-regular fa-user-secret\"></ax-icon>\n                    </ax-prefix>\n                  </ax-button-item>\n                </ax-button-item-list>\n              </ax-dropdown-button>\n            </ax-suffix>\n          </ax-toolbar>\n          <ax-validation-rule rule=\"callback\" [options]=\"{ validate: validateContent }\"></ax-validation-rule>\n        </ax-wysiwyg-container>\n      </div>\n    </ax-form-field>\n  </ax-form>\n</div>\n", styles: ["ax-wysiwyg-container .ax-editor-container{border-top-left-radius:0!important;border-top-right-radius:0!important}ax-wysiwyg-container .ax-error-message{padding-left:.5rem}\n"] }]
+                        AXPUserAvatarComponent,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ax-size-full ax-flex ax-flex-col ax-justify-between ax-p-4 ax-overflow-hidden\">\n  <ax-comment-container class=\"ax-overflow-auto\">\n    @if (isLoading()) {\n      <div class=\"ax-flex ax-items-center ax-py-12 ax-bg-lightest ax-px-5\">\n        <ax-skeleton class=\"ax-min-w-16 ax-h-16 ax-rounded-full ax-me-4\"></ax-skeleton>\n        <div class=\"ax-flex ax-flex-col ax-gap-2 ax-w-full\">\n          <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded\"></ax-skeleton>\n          <ax-skeleton class=\"ax-w-full ax-h-2 ax-rounded-full\"></ax-skeleton>\n          <ax-skeleton class=\"ax-w-full ax-h-2 ax-rounded-full\"></ax-skeleton>\n          <ax-skeleton class=\"ax-w-8/12 ax-h-2 ax-rounded-full\"></ax-skeleton>\n        </div>\n      </div>\n    } @else if (!isLoading() && comments().length > 0) {\n      <ax-comment-view class=\"ax-bg-lightest\">\n        @for (comment of comments(); track comment.id) {\n          <ax-comment-item\n            [id]=\"comment.id!\"\n            [replyCount]=\"comment.replyCount\"\n            [class.highlighted]=\"highlightedCommentId() === comment.id\"\n            [@fadeIn]\n          >\n            <axp-user-avatar #user [size]=\"48\" [userId]=\"comment.author.id\" ngProjectAs=\"'ax-avatar'\"></axp-user-avatar>\n            <ax-title>{{ user.firstName() + ' ' + user.lastName() }}</ax-title>\n            <ax-comment-date>{{ comment.createdAt | format: 'timeleft' | async }} </ax-comment-date>\n            <ax-comment-menu-options>\n              <ax-button class=\"ax-sm\" look=\"blank\" color=\"neutral\">\n                <ax-icon icon=\"ax-icon ax-icon-solid ax-icon-more-horizontal\"></ax-icon>\n              </ax-button>\n\n              <ax-dropdown-panel>\n                <ax-button-item-list>\n                  <ax-button-item\n                    text=\"Edit\"\n                    color=\"neutral\"\n                    (click)=\"editMessage(comment, undefined, user.firstName() + ' ' + user.lastName())\"\n                  >\n                    <ax-prefix>\n                      <ax-icon icon=\"fa-solid fa-edit\"></ax-icon>\n                    </ax-prefix>\n                  </ax-button-item>\n\n                  <ax-button-item text=\"Delete\" color=\"danger\" (click)=\"deleteComment(comment.id!)\">\n                    <ax-prefix>\n                      <ax-icon icon=\"fa-solid fa-trash-can\"></ax-icon>\n                    </ax-prefix>\n                  </ax-button-item>\n                </ax-button-item-list>\n              </ax-dropdown-panel>\n            </ax-comment-menu-options>\n            <ax-content [innerHTML]=\"sanitizeHtml(comment.message.content)\"></ax-content>\n            <ax-comment-like (click)=\"toggleLike(comment)\" [liked]=\"isLikedByUser(comment)\">\n              {{ getReactionsCount(comment) }}\n            </ax-comment-like>\n            <ax-comment-reply-text\n              (click)=\"replyMessage(comment, undefined, user.firstName() + ' ' + user.lastName())\"\n            ></ax-comment-reply-text>\n            @for (reply of comment.replies; track reply.id) {\n              <ax-comment-item [id]=\"reply.id\" [class.highlighted]=\"highlightedCommentId() === reply.id\" [@fadeIn]>\n                <axp-user-avatar\n                  #user2\n                  [size]=\"48\"\n                  [userId]=\"reply.author.id\"\n                  ngProjectAs=\"'ax-avatar'\"\n                ></axp-user-avatar>\n                <ax-title>{{ user2.firstName() + ' ' + user2.lastName() }}</ax-title>\n                <ax-comment-date>{{ reply.createdAt | format: 'timeleft' | async }} </ax-comment-date>\n                <ax-comment-menu-options>\n                  <ax-button class=\"ax-sm\" look=\"blank\" color=\"neutral\">\n                    <ax-icon icon=\"ax-icon ax-icon-solid ax-icon-more-horizontal\"></ax-icon>\n                  </ax-button>\n\n                  <ax-dropdown-panel>\n                    <ax-button-item-list>\n                      <ax-button-item\n                        text=\"Edit\"\n                        color=\"neutral\"\n                        (click)=\"editMessage(comment, reply, user2.firstName() + ' ' + user2.lastName())\"\n                      >\n                        <ax-prefix>\n                          <ax-icon icon=\"fa-solid fa-edit\"></ax-icon>\n                        </ax-prefix>\n                      </ax-button-item>\n                      <ax-button-item text=\"Delete\" color=\"danger\" (click)=\"deleteComment(reply.id!)\">\n                        <ax-prefix>\n                          <ax-icon icon=\"fa-solid fa-trash-can\"></ax-icon>\n                        </ax-prefix>\n                      </ax-button-item>\n                    </ax-button-item-list>\n                  </ax-dropdown-panel>\n                </ax-comment-menu-options>\n                <ax-content [innerHTML]=\"sanitizeHtml(reply.message.content)\"></ax-content>\n                <ax-comment-like (click)=\"toggleLike(reply)\" [liked]=\"isLikedByUser(reply)\">\n                  {{ getReactionsCount(reply) }}\n                </ax-comment-like>\n                <ax-comment-reply-text\n                  (click)=\"replyMessage(comment, reply, user2.firstName() + ' ' + user2.lastName())\"\n                ></ax-comment-reply-text>\n              </ax-comment-item>\n            }\n          </ax-comment-item>\n        }\n      </ax-comment-view>\n    } @else {\n      <div>\n        <div class=\"ax-flex ax-flex-col ax-gap-4 ax-justify-center ax-items-center ax-p-10\">\n          <svg\n            class=\"ax-mx-auto\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"154\"\n            height=\"161\"\n            viewBox=\"0 0 154 161\"\n            fill=\"none\"\n          >\n            <path\n              d=\"M0.0616455 84.4268C0.0616455 42.0213 34.435 7.83765 76.6507 7.83765C118.803 7.83765 153.224 42.0055 153.224 84.4268C153.224 102.42 147.026 118.974 136.622 132.034C122.282 150.138 100.367 161 76.6507 161C52.7759 161 30.9882 150.059 16.6633 132.034C6.25961 118.974 0.0616455 102.42 0.0616455 84.4268Z\"\n              fill=\"#EEF2FF\"\n            />\n            <path\n              d=\"M96.8189 0.632498L96.8189 0.632384L96.8083 0.630954C96.2034 0.549581 95.5931 0.5 94.9787 0.5H29.338C22.7112 0.5 17.3394 5.84455 17.3394 12.4473V142.715C17.3394 149.318 22.7112 154.662 29.338 154.662H123.948C130.591 154.662 135.946 149.317 135.946 142.715V38.9309C135.946 38.0244 135.847 37.1334 135.648 36.2586L135.648 36.2584C135.117 33.9309 133.874 31.7686 132.066 30.1333C132.066 30.1331 132.065 30.1329 132.065 30.1327L103.068 3.65203C103.068 3.6519 103.067 3.65177 103.067 3.65164C101.311 2.03526 99.1396 0.995552 96.8189 0.632498Z\"\n              fill=\"white\"\n              stroke=\"#E5E7EB\"\n            />\n            <ellipse cx=\"80.0618\" cy=\"81\" rx=\"28.0342\" ry=\"28.0342\" fill=\"#EEF2FF\" />\n            <path\n              d=\"M99.2393 61.3061L99.2391 61.3058C88.498 50.5808 71.1092 50.5804 60.3835 61.3061C49.6423 72.0316 49.6422 89.4361 60.3832 100.162C71.109 110.903 88.4982 110.903 99.2393 100.162C109.965 89.4363 109.965 72.0317 99.2393 61.3061ZM105.863 54.6832C120.249 69.0695 120.249 92.3985 105.863 106.785C91.4605 121.171 68.1468 121.171 53.7446 106.785C39.3582 92.3987 39.3582 69.0693 53.7446 54.683C68.1468 40.2965 91.4605 40.2966 105.863 54.6832Z\"\n              stroke=\"#E5E7EB\"\n            />\n            <path\n              d=\"M110.782 119.267L102.016 110.492C104.888 108.267 107.476 105.651 109.564 102.955L118.329 111.729L110.782 119.267Z\"\n              stroke=\"#E5E7EB\"\n            />\n            <path\n              d=\"M139.122 125.781L139.122 125.78L123.313 109.988C123.313 109.987 123.313 109.987 123.312 109.986C121.996 108.653 119.849 108.657 118.521 109.985L118.871 110.335L118.521 109.985L109.047 119.459C107.731 120.775 107.735 122.918 109.044 124.247L109.047 124.249L124.858 140.06C128.789 143.992 135.191 143.992 139.122 140.06C143.069 136.113 143.069 129.728 139.122 125.781Z\"\n              fill=\"#A5B4FC\"\n              stroke=\"#818CF8\"\n            />\n            <path\n              d=\"M83.185 87.2285C82.5387 87.2285 82.0027 86.6926 82.0027 86.0305C82.0027 83.3821 77.9987 83.3821 77.9987 86.0305C77.9987 86.6926 77.4627 87.2285 76.8006 87.2285C76.1543 87.2285 75.6183 86.6926 75.6183 86.0305C75.6183 80.2294 84.3831 80.2451 84.3831 86.0305C84.3831 86.6926 83.8471 87.2285 83.185 87.2285Z\"\n              fill=\"#4F46E5\"\n            />\n            <path\n              d=\"M93.3528 77.0926H88.403C87.7409 77.0926 87.2049 76.5567 87.2049 75.8946C87.2049 75.2483 87.7409 74.7123 88.403 74.7123H93.3528C94.0149 74.7123 94.5509 75.2483 94.5509 75.8946C94.5509 76.5567 94.0149 77.0926 93.3528 77.0926Z\"\n              fill=\"#4F46E5\"\n            />\n            <path\n              d=\"M71.5987 77.0925H66.6488C65.9867 77.0925 65.4507 76.5565 65.4507 75.8945C65.4507 75.2481 65.9867 74.7122 66.6488 74.7122H71.5987C72.245 74.7122 72.781 75.2481 72.781 75.8945C72.781 76.5565 72.245 77.0925 71.5987 77.0925Z\"\n              fill=\"#4F46E5\"\n            />\n            <rect x=\"38.3522\" y=\"21.5128\" width=\"41.0256\" height=\"2.73504\" rx=\"1.36752\" fill=\"#4F46E5\" />\n            <rect x=\"38.3522\" y=\"133.65\" width=\"54.7009\" height=\"5.47009\" rx=\"2.73504\" fill=\"#A5B4FC\" />\n            <rect x=\"38.3522\" y=\"29.7179\" width=\"13.6752\" height=\"2.73504\" rx=\"1.36752\" fill=\"#4F46E5\" />\n            <circle cx=\"56.13\" cy=\"31.0854\" r=\"1.36752\" fill=\"#4F46E5\" />\n            <circle cx=\"61.6001\" cy=\"31.0854\" r=\"1.36752\" fill=\"#4F46E5\" />\n            <circle cx=\"67.0702\" cy=\"31.0854\" r=\"1.36752\" fill=\"#4F46E5\" />\n          </svg>\n          <div>\n            <h2 class=\"ax-text-center ax-text-neutral-600 ax-font-semibold ax-leading-loose ax-pb-2\">\n              There is no Comment!\n            </h2>\n          </div>\n        </div>\n      </div>\n    }\n  </ax-comment-container>\n  <ax-form>\n    <ax-form-field>\n      <div>\n        @if (isReplyingMode() || isEditingMode()) {\n          <div\n            class=\"ax-flex ax-justify-between ax-rounded-b-none ax-border ax-border-b-0 ax-rounded-lg ax-px-6 ax-py-3 ax-w-full ax-items-center ax-overflow-hidden ax-text-sm ax-leading-none\"\n          >\n            <div (click)=\"scrollMain()\" class=\"ax-flex ax-justify-start ax-items-center ax-cursor-pointer\">\n              <i\n                [class]=\"isReplyingMode() ? 'fa-reply' : 'fa-pen'\"\n                class=\"fa-solid ax-text-primary-500 dark:ax-text-primary-300 ax-text-2xl ax-me-4\"\n              ></i>\n              <div\n                class=\"ax-flex ax-flex-col ax-gap-2 ax-justify-between ax-align-middle ax-leading-4 ax-overflow-hidden\"\n              >\n                <p class=\"ax-text-primary-500 dark:ax-text-primary-300\">\n                  {{ isReplyingMode() ? 'Reply to ' : 'Edit Message' }}\n                  <span class=\"ax-font-bold\">\n                    {{ isReplyingMode() ? activeReplyComment()?.userName : '' }}\n                  </span>\n                </p>\n                <div\n                  class=\"ax-truncate\"\n                  [innerHTML]=\"\n                    isReplyingMode()\n                      ? sanitizeHtml(activeReplyComment()?.message?.content ?? '')\n                      : sanitizeHtml(activeEditComment()?.message?.content ?? '')\n                  \"\n                ></div>\n              </div>\n            </div>\n            <div><i (click)=\"resetReplyEditState()\" class=\"fa-solid ax-text-2xl fa-xmark ax-cursor-pointer\"></i></div>\n          </div>\n        }\n        <ax-wysiwyg-container #w [look]=\"wysiwygOptions().look\" [(ngModel)]=\"commentContent\">\n          <ax-wysiwyg-view class=\"ax-min-h-28\"></ax-wysiwyg-view>\n          <ax-toolbar>\n            <ax-content>\n              <ax-wysiwyg-history></ax-wysiwyg-history>\n              <ax-wysiwyg-font-style></ax-wysiwyg-font-style>\n              <ax-wysiwyg-colors></ax-wysiwyg-colors>\n              <ax-wysiwyg-list></ax-wysiwyg-list>\n              <ax-wysiwyg-alignment></ax-wysiwyg-alignment>\n            </ax-content>\n            <ax-suffix>\n              <ax-dropdown-button\n                [disabled]=\"hasCooldown()\"\n                type=\"submit\"\n                color=\"primary\"\n                mode=\"split\"\n                text=\"Send\"\n                (onClick)=\"submitComment()\"\n              >\n                @if (isSubmitting()) {\n                  <ax-loading></ax-loading>\n                }\n                <ax-button-item-list>\n                  <ax-button-item (click)=\"submitComment()\" text=\"Send Private ...\" name=\"private\" data=\"private\">\n                    <ax-prefix>\n                      <ax-icon icon=\"fa-regular fa-user-secret\"></ax-icon>\n                    </ax-prefix>\n                  </ax-button-item>\n                </ax-button-item-list>\n              </ax-dropdown-button>\n            </ax-suffix>\n          </ax-toolbar>\n          <ax-validation-rule rule=\"callback\" [options]=\"{ validate: validateContent }\"></ax-validation-rule>\n        </ax-wysiwyg-container>\n      </div>\n    </ax-form-field>\n  </ax-form>\n</div>\n", styles: [":host{display:block;width:100%;height:100%}ax-wysiwyg-container .ax-editor-container{border-top-left-radius:0!important;border-top-right-radius:0!important}ax-wysiwyg-container .ax-error-message{padding-left:.5rem}ax-wysiwyg-container .highlighted{background:var(--ax-color-primary-050)!important;border-radius:.25rem;transition:background 1s ease-in-out}\n"] }]
         }] });
 
-//#region ----   Abstract Chat Service   ----
-class AXMChatService {
+var comment_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    AXMCommentComponent: AXMCommentComponent
+});
+
+class AXMCommentPopupComponent extends AXBasePageComponent {
+    constructor() {
+        super(...arguments);
+        this.refrenceType = input.required();
+        this.refrenceId = input.required();
+        this.subject = input.required();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: AXMCommentPopupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.6", type: AXMCommentPopupComponent, isStandalone: true, selector: "axm-comment-popup", inputs: { refrenceType: { classPropertyName: "refrenceType", publicName: "refrenceType", isSignal: true, isRequired: true, transformFunction: null }, refrenceId: { classPropertyName: "refrenceId", publicName: "refrenceId", isSignal: true, isRequired: true, transformFunction: null }, subject: { classPropertyName: "subject", publicName: "subject", isSignal: true, isRequired: true, transformFunction: null } }, providers: [], usesInheritance: true, ngImport: i0, template: "<ax-content>\n  <div class=\"ax-p-6 ax-min-h-[30vh] ax-overflow-y-auto\">\n    <axm-comment [refrenceType]=\"refrenceType()\" [refrenceId]=\"refrenceId()\" [subject]=\"subject()\"></axm-comment>\n  </div>\n</ax-content>\n<ax-footer>\n  <ax-prefix></ax-prefix>\n  <ax-suffix>\n    <ax-button [text]=\"'close' | translate | async\" look=\"solid\" color=\"primary\" (onClick)=\"close()\"> </ax-button>\n  </ax-suffix>\n</ax-footer>\n", dependencies: [{ kind: "ngmodule", type: 
+                // Angular
+                CommonModule }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "ngmodule", type: 
+                // ACoreX
+                AXDecoratorModule }, { kind: "component", type: i1$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i5.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i4$1.AXTranslatorPipe, name: "translate" }, { kind: "component", type: 
+                // Comment
+                AXMCommentComponent, selector: "axm-comment", inputs: ["refrenceType", "refrenceId", "subject"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-//#endregion
-class AXMChatServiceImpl {
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: AXMCommentPopupComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'axm-comment-popup', standalone: true, imports: [
+                        // Angular
+                        CommonModule,
+                        // ACoreX
+                        AXDecoratorModule,
+                        AXButtonModule,
+                        AXTranslationModule,
+                        // Comment
+                        AXMCommentComponent,
+                    ], encapsulation: ViewEncapsulation.None, providers: [], template: "<ax-content>\n  <div class=\"ax-p-6 ax-min-h-[30vh] ax-overflow-y-auto\">\n    <axm-comment [refrenceType]=\"refrenceType()\" [refrenceId]=\"refrenceId()\" [subject]=\"subject()\"></axm-comment>\n  </div>\n</ax-content>\n<ax-footer>\n  <ax-prefix></ax-prefix>\n  <ax-suffix>\n    <ax-button [text]=\"'close' | translate | async\" look=\"solid\" color=\"primary\" (onClick)=\"close()\"> </ax-button>\n  </ax-suffix>\n</ax-footer>\n" }]
+        }] });
+
+var commentPopup_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    AXMCommentPopupComponent: AXMCommentPopupComponent
+});
+
+class AXMUserLookupPopup extends AXBasePageComponent {
     constructor() {
-        this.roomService = inject(AXMRoomService);
-        this.messageService = inject(AXMMessageService);
-        this.sessionService = inject(AXPSessionService);
-        this.usersService = inject(AXMUsersEntityService);
-        this._messageSent$ = new Subject();
-        this.messageSent$ = this._messageSent$.asObservable();
-    }
-    //#region ----   Helper Methods   ----
-    getCurrentUser() {
-        const user = this.sessionService.user;
-        return {
-            id: user?.id || 'guest-user',
-            type: 'user',
+        super(...arguments);
+        this.lookupNode = {
+            name: 'form-field',
+            path: 'form-field',
+            type: 'form-field',
+            children: [
+                {
+                    name: 'lookup',
+                    path: 'lookup',
+                    type: 'lookup-editor',
+                    options: {
+                        entity: 'SecurityManagement.users',
+                        multiple: true,
+                    },
+                },
+            ],
+            options: {
+                label: 'Select users:',
+            },
         };
+        this.titleNode = {
+            name: 'form-field',
+            path: 'form-field',
+            type: 'form-field',
+            children: [
+                {
+                    name: 'title',
+                    path: 'title',
+                    type: 'text-editor',
+                    options: {
+                        placeholder: 'Enter title',
+                        required: true,
+                    },
+                },
+            ],
+            options: {
+                label: 'Title:',
+            },
+        };
+        this.context = signal({});
     }
-    async getUserInfo(userId) {
-        try {
-            const user = await this.usersService.getOne(userId);
-            return {
-                id: user.id,
-                type: 'user',
-            };
-        }
-        catch (error) {
-            console.error(`Failed to get user info for ID: ${userId}`, error);
-            return {
-                id: userId,
-                type: 'user',
-            };
-        }
-    }
-    formatMessage(message) {
-        return message;
-    }
-    async getUnreadCount(roomId) {
-        const { items } = await this.messageService.query({
-            skip: 0,
-            take: 99,
-            filter: { field: 'roomId', value: roomId, operator: { type: 'equal' } },
-        });
-        const currentUserId = this.getCurrentUser().id;
-        const unreadMessages = items.filter((message) => {
-            const isFromCurrentUser = message.author.id === currentUserId;
-            const isReadByCurrentUser = (message.seen || []).some((seen) => seen.author.id === currentUserId);
-            return !isFromCurrentUser && !isReadByCurrentUser;
+    handleClose() {
+        this.close({
+            lookup: this.context()?.lookup,
+            title: this.context()?.title,
         });
-        return unreadMessages.length;
-    }
-    //#endregion
-    //#region ----   ChatRoomService Implementations   ----
-    async createRoom(memberIds, title) {
-        if (memberIds.length === 0) {
-            throw new Error('At least one member is required to create a room');
-        }
-        const currentUser = this.getCurrentUser();
-        const allMemberIds = [...new Set([...memberIds, currentUser.id])];
-        const memberReferences = await Promise.all(allMemberIds.map((id) => this.getUserInfo(id)));
-        const userNames = await Promise.all(memberReferences.map(async (ref) => {
-            const user = await this.usersService.getOne(ref.id);
-            return `${user.firstName} ${user.lastName}`.trim();
-        }));
-        const room = {
-            members: memberReferences,
-            title: title,
-            topic: memberIds.length > 2 ? 'group' : 'personal',
-            createdAt: new Date(),
-            updatedAt: new Date(),
-            createdBy: this.getCurrentUser().id,
-            updatedBy: this.getCurrentUser().id,
-        };
-        const roomId = await this.roomService.insertOne(room);
-        return this.getRoom(roomId);
     }
-    async getRoom(roomId) {
-        const room = await this.roomService.getOne(roomId);
-        if (!room) {
-            throw new Error(`Room with ID ${roomId} not found.`);
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: AXMUserLookupPopup, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: AXMUserLookupPopup, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `<axp-widgets-container [context]="context()" (onContextChanged)="context.set($event.data)">
+      <div class="ax-p-4 ax-flex ax-flex-col ax-gap-4">
+        <ng-container axp-widget-renderer [node]="lookupNode" [mode]="'edit'"> </ng-container>
+        @if (context()?.lookup?.length > 1) {
+          <ng-container axp-widget-renderer [node]="titleNode" [mode]="'edit'"> </ng-container>
         }
-        const messages = await this.getMessages(roomId, 0, 1);
-        const lastMessage = messages.items.length > 0 ? messages.items[0] : undefined;
-        const unreadCount = await this.getUnreadCount(roomId);
-        const currentUserId = this.getCurrentUser().id;
-        return {
-            ...room,
-            lastMessage,
-            unreadCount,
-            members: room.members.filter((m) => m.id !== currentUserId),
-        };
-    }
+      </div>
+    </axp-widgets-container>
+
+    <ax-footer>
+      <ax-suffix>
+        <ax-button
+          text="Accept & Send"
+          color="primary"
+          [disabled]="context()?.lookup?.length > 1 && !context()?.title"
+          (onClick)="handleClose()"
+        ></ax-button>
+      </ax-suffix>
+    </ax-footer>`, isInline: true, dependencies: [{ kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "component", type: i2$1.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i2$1.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged"], exportAs: ["widgetRenderer"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i5.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: AXMUserLookupPopup, decorators: [{
+            type: Component,
+            args: [{
+                    template: `<axp-widgets-container [context]="context()" (onContextChanged)="context.set($event.data)">
+      <div class="ax-p-4 ax-flex ax-flex-col ax-gap-4">
+        <ng-container axp-widget-renderer [node]="lookupNode" [mode]="'edit'"> </ng-container>
+        @if (context()?.lookup?.length > 1) {
+          <ng-container axp-widget-renderer [node]="titleNode" [mode]="'edit'"> </ng-container>
+        }
+      </div>
+    </axp-widgets-container>
+
+    <ax-footer>
+      <ax-suffix>
+        <ax-button
+          text="Accept & Send"
+          color="primary"
+          [disabled]="context()?.lookup?.length > 1 && !context()?.title"
+          (onClick)="handleClose()"
+        ></ax-button>
+      </ax-suffix>
+    </ax-footer>`,
+                    imports: [AXDecoratorModule, AXPLayoutBuilderModule, AXButtonModule],
+                }]
+        }] });
+
+class AXMCommentWidgetViewComponent extends AXPValueWidgetComponent {
+    constructor() {
+        super(...arguments);
+        this.refrenceType = computed(() => this.options().refrenceType);
+        this.refrenceId = computed(() => this.options().refrenceId);
+        this.subject = computed(() => this.options().subject);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: AXMCommentWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.6", type: AXMCommentWidgetViewComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
+    <axm-comment [refrenceId]="refrenceId()" [refrenceType]="refrenceType()" [subject]="subject()"></axm-comment>
+  `, isInline: true, dependencies: [{ kind: "component", type: AXMCommentComponent, selector: "axm-comment", inputs: ["refrenceType", "refrenceId", "subject"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: AXMCommentWidgetViewComponent, decorators: [{
+            type: Component,
+            args: [{
+                    template: `
+    <axm-comment [refrenceId]="refrenceId()" [refrenceType]="refrenceType()" [subject]="subject()"></axm-comment>
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [AXMCommentComponent],
+                }]
+        }] });
+
+var commentWidgetView_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    AXMCommentWidgetViewComponent: AXMCommentWidgetViewComponent
+});
+
+const AXPCommentWidget = {
+    name: 'comment',
+    title: 'Comments',
+    description: 'Display and manage comments for entities',
+    type: 'view',
+    categories: [],
+    groups: [AXPWidgetGroupEnum.FormElement],
+    icon: 'fa-solid fa-comments',
+    properties: [],
+    components: {
+        view: {
+            component: () => Promise.resolve().then(function () { return commentWidgetView_component; }).then((c) => c.AXMCommentWidgetViewComponent),
+        },
+    },
+};
+
+class AXMCommentPopupStartAction extends AXPWorkflowAction {
+    constructor() {
+        super(...arguments);
+        this.popupService = inject(AXPopupService);
+        this.translate = inject(AXTranslationService);
+    }
+    async execute(context) {
+        const comp = (await Promise.resolve().then(function () { return commentPopup_component; })).AXMCommentPopupComponent;
+        this.popupService.open(comp, {
+            title: await this.translate.translateAsync('Comments'),
+            size: 'lg',
+            data: {
+                refrenceType: signal(context.getVariable('options.refType')),
+                refrenceId: signal(context.getVariable('options.refId')),
+                subject: signal(context.getVariable('options.subject')),
+            },
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: AXMCommentPopupStartAction, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: AXMCommentPopupStartAction }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: AXMCommentPopupStartAction, decorators: [{
+            type: Injectable
+        }] });
+const AXMCommentPopupWorkflow = {
+    startStepId: 'start',
+    steps: {
+        start: {
+            action: 'show-comment-popup-action',
+        },
+    },
+};
+
+//#region ----   Abstract Chat Service   ----
+class AXMChatService {
+}
+//#endregion
+class AXMChatServiceImpl {
+    constructor() {
+        this.roomService = inject(AXMRoomService);
+        this.messageService = inject(AXMMessageService);
+        this.sessionService = inject(AXPSessionService);
+        this.usersService = inject(AXMUsersEntityService);
+        this._messageSent$ = new Subject();
+        this.messageSent$ = this._messageSent$.asObservable();
+        this._messageRemoved$ = new Subject();
+        this.messageRemoved$ = this._messageRemoved$.asObservable();
+        this._messageSeen$ = new Subject();
+        this.messageSeen$ = this._messageSeen$.asObservable();
+        this._roomAdded$ = new Subject();
+        this.roomAdded$ = this._roomAdded$.asObservable();
+        this._roomRemoved$ = new Subject();
+        this.roomRemoved$ = this._roomRemoved$.asObservable();
+        this._roomSeen$ = new Subject();
+        this.roomSeen$ = this._roomSeen$.asObservable();
+        this._messageReacted$ = new Subject();
+        this.messageReacted$ = this._messageReacted$.asObservable();
+        this._typingStatus$ = new Subject();
+        this.typingStatus$ = this._typingStatus$.asObservable();
+    }
+    //#region ----   Helper Methods   ----
+    getCurrentUser() {
+        const user = this.sessionService.user;
+        return {
+            id: user?.id || 'guest-user',
+            type: 'user',
+            fullName: user?.title?.trim() || 'Guest User',
+            username: user?.name?.trim() || 'guest-user',
+        };
+    }
+    async getUserInfo(userId) {
+        try {
+            const user = await this.usersService.getOne(userId);
+            return {
+                id: user.id,
+                type: 'user',
+                fullName: `${user.firstName} ${user.lastName}`.trim(),
+                username: user.username?.trim(),
+            };
+        }
+        catch (error) {
+            console.error(`Failed to get user info for ID: ${userId}`, error);
+            return {
+                id: userId,
+                type: 'user',
+                fullName: 'Unknown User',
+                username: 'Unknown User',
+            };
+        }
+    }
+    async formatMessage(message) {
+        if (message.author && !message.author.fullName) {
+            const authorInfo = await this.getUserInfo(message.author.id);
+            return {
+                ...message,
+                author: authorInfo,
+            };
+        }
+        return message;
+    }
+    async getUnreadCount(roomId) {
+        const { items } = await this.messageService.query({
+            skip: 0,
+            take: 99,
+            filter: { field: 'roomId', value: roomId, operator: { type: 'equal' } },
+        });
+        const currentUserId = this.getCurrentUser().id;
+        const unreadMessages = items.filter((message) => {
+            const isFromCurrentUser = message.author.id === currentUserId;
+            const isReadByCurrentUser = (message.seen || []).some((seen) => seen.author.id === currentUserId);
+            return !isFromCurrentUser && !isReadByCurrentUser;
+        });
+        return unreadMessages.length;
+    }
+    //#endregion
+    //#region ----   ChatRoomService Implementations   ----
+    async createRoom(memberIds, title) {
+        if (memberIds.length === 0) {
+            throw new Error('At least one member is required to create a room');
+        }
+        const currentUser = this.getCurrentUser();
+        const allMemberIds = [...new Set([...memberIds, currentUser.id])];
+        const memberReferences = await Promise.all(allMemberIds.map((id) => this.getUserInfo(id)));
+        const room = {
+            members: memberReferences,
+            title: title,
+            topic: memberIds.length > 1 ? 'group' : 'personal',
+            createdAt: new Date(),
+            updatedAt: new Date(),
+            type: 'chat',
+            createdBy: this.getCurrentUser().id,
+            updatedBy: this.getCurrentUser().id,
+        };
+        const roomId = await this.roomService.insertOne(room);
+        const newRoom = await this.getRoom(roomId);
+        this._roomAdded$.next(newRoom);
+        return newRoom;
+    }
+    async getRoom(roomId) {
+        const room = await this.roomService.getOne(roomId);
+        if (!room || room.type !== 'chat') {
+            throw new Error(`Chat room with ID ${roomId} not found.`);
+        }
+        const messages = await this.getMessages(roomId, 0, 1);
+        const lastMessage = messages.items.length > 0 ? messages.items[0] : undefined;
+        const unreadCount = await this.getUnreadCount(roomId);
+        const currentUserId = this.getCurrentUser().id;
+        const members = await Promise.all(room.members.map(async (member) => {
+            if (member.fullName) {
+                return member;
+            }
+            return this.getUserInfo(member.id);
+        }));
+        return {
+            ...room,
+            lastMessage,
+            unreadCount,
+            members: members.filter((m) => m.id !== currentUserId),
+        };
+    }
     async listRooms(skip = 0, take = 100) {
-        const { items, total } = await this.roomService.query({ skip, take });
+        const { items, total } = await this.roomService.query({
+            skip,
+            take,
+            filter: { field: 'type', value: 'chat', operator: { type: 'equal' } },
+        });
         const settledRooms = await Promise.allSettled(items.map((room) => this.getRoom(room.id)));
         const chatRooms = settledRooms
             .filter((result) => {
@@ -1609,6 +1726,7 @@ class AXMChatServiceImpl {
     async deleteRoom(roomId) {
         try {
             await this.roomService.deleteOne(roomId);
+            this._roomRemoved$.next(roomId);
             return true;
         }
         catch (error) {
@@ -1638,8 +1756,8 @@ class AXMChatServiceImpl {
     }
     //#endregion
     //#region ----   ChatMessageService Implementations   ----
-    async sendMessage(roomId, content, contentType = 'text', replyId) {
-        const author = this.getCurrentUser();
+    async sendMessage(roomId, content, contentType = 'text', replyId, userId) {
+        const author = userId ? await this.getUserInfo(userId) : this.getCurrentUser();
         const messageContent = { content, contentType };
         const message = {
             roomId,
@@ -1655,7 +1773,7 @@ class AXMChatServiceImpl {
         };
         const messageId = await this.messageService.insertOne({ ...message });
         const newMessage = await this.messageService.getOne(messageId);
-        const formattedMessage = this.formatMessage(newMessage);
+        const formattedMessage = await this.formatMessage(newMessage);
         this._messageSent$.next(formattedMessage);
         return formattedMessage;
     }
@@ -1666,7 +1784,7 @@ class AXMChatServiceImpl {
             filter: { field: 'roomId', value: roomId, operator: { type: 'equal' } },
             sort: [{ field: 'createdAt', dir: 'desc' }],
         });
-        const formattedMessages = result.items.map((m) => this.formatMessage(m));
+        const formattedMessages = await Promise.all(result.items.map((m) => this.formatMessage(m)));
         return { items: formattedMessages, total: result.total };
     }
     async getMessage(messageId) {
@@ -1684,6 +1802,7 @@ class AXMChatServiceImpl {
     async deleteMessage(messageId) {
         try {
             await this.messageService.deleteOne(messageId);
+            this._messageRemoved$.next(messageId);
             return true;
         }
         catch (error) {
@@ -1718,21 +1837,25 @@ class AXMChatServiceImpl {
             return message;
         }
         const updatedReactions = [...reactions, { author, type }];
-        return this.messageService.updateOne(messageId, {
+        const res = await this.messageService.updateOne(messageId, {
             reactions: updatedReactions,
             updatedAt: new Date(),
             updatedBy: this.getCurrentUser().id,
         });
+        this._messageReacted$.next(res);
+        return res;
     }
     async removeReaction(messageId, type) {
         const author = this.getCurrentUser();
         const message = await this.messageService.getOne(messageId);
         const updatedReactions = (message.reactions || []).filter((r) => !(r.author.id === author.id && r.type === type));
-        return this.messageService.updateOne(messageId, {
+        const res = await this.messageService.updateOne(messageId, {
             reactions: updatedReactions,
             updatedAt: new Date(),
             updatedBy: this.getCurrentUser().id,
         });
+        this._messageReacted$.next(res);
+        return res;
     }
     async getReactions(messageId) {
         const message = await this.messageService.getOne(messageId);
@@ -1748,11 +1871,13 @@ class AXMChatServiceImpl {
             return message;
         }
         const updatedSeen = [...seen, { author, type: 'read' }];
-        return this.messageService.updateOne(messageId, {
+        const updatedMessage = await this.messageService.updateOne(messageId, {
             seen: updatedSeen,
             updatedAt: new Date(),
             updatedBy: this.getCurrentUser().id,
         });
+        this._messageSeen$.next(await this.formatMessage(updatedMessage));
+        return updatedMessage;
     }
     async getSeenBy(messageId) {
         const message = await this.messageService.getOne(messageId);
@@ -1769,6 +1894,7 @@ class AXMChatServiceImpl {
             if (unreadMessages.length > 0) {
                 await Promise.all(unreadMessages.map((message) => this.markSeen(message.id)));
             }
+            this._roomSeen$.next(roomId);
             return true;
         }
         catch (error) {
@@ -1776,10 +1902,20 @@ class AXMChatServiceImpl {
             return false;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXMChatServiceImpl, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXMChatServiceImpl, providedIn: 'root' }); }
+    //#endregion
+    //#region ----   Typing Status Implementations   ----
+    async startTyping(roomId, userId) {
+        const user = userId ? await this.getUserInfo(userId) : this.getCurrentUser();
+        this._typingStatus$.next({ roomId, user, isTyping: true });
+    }
+    async stopTyping(roomId, userId) {
+        const user = userId ? await this.getUserInfo(userId) : this.getCurrentUser();
+        this._typingStatus$.next({ roomId, user, isTyping: false });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: AXMChatServiceImpl, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: AXMChatServiceImpl, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXMChatServiceImpl, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: AXMChatServiceImpl, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -1790,31 +1926,37 @@ class AXMChatItemComponent {
     constructor() {
         // Input
         this.data = input.required();
+        this.typing = input(false);
+        this.lastMessageReaction = input(null);
         // Output
         this.pressChatItem = output();
         // Services
         this.sessionService = inject(AXPSessionService);
-        this.userService = inject(AXMUsersEntityService);
         this.datePipe = inject(DatePipe);
-        this.chatName = signal({ fullName: 'Loading...', id: '' });
+        this.chatName = signal({
+            fullName: 'Loading...',
+            id: '',
+            isPrivate: false,
+        });
         this.#chatInfoEffect = effect(async () => {
             const { members, title, id } = this.data();
             if (members.length > 1) {
                 this.chatName.set({
                     fullName: title || 'Group Chat',
                     id,
+                    isPrivate: false,
                 });
                 return;
             }
             const member = members[0];
             if (!member) {
-                this.chatName.set({ fullName: 'Unknown User', id: '' });
+                this.chatName.set({ fullName: 'Unknown User', id: '', isPrivate: true });
                 return;
             }
-            const data = await this.userService.getOne(member.id);
             this.chatName.set({
-                fullName: `${data.firstName} ${data.lastName}`,
+                fullName: member.fullName || 'Unknown User',
                 id: member.id,
+                isPrivate: true,
             });
         });
         this.formattedLastMessageDate = computed(() => {
@@ -1835,12 +1977,14 @@ class AXMChatItemComponent {
             }
         });
         this.lastMessage = computed(() => {
-            const message = this.data().lastMessage?.message;
+            const message = this.data().lastMessage;
             if (!message)
-                return { content: 'No messages yet', contentType: 'text' };
+                return { content: 'No messages yet', contentType: 'text', reactions: [] };
             return {
-                content: message.contentType === 'text' ? message.content : message.contentType,
-                contentType: message.contentType,
+                content: message.message.contentType === 'text' ? message.message.content : message.message.contentType,
+                contentType: message.message.contentType,
+                reactions: message.reactions || [],
+                author: message.author,
             };
         });
         this.hasUnread = computed(() => {
@@ -1865,12 +2009,12 @@ class AXMChatItemComponent {
         }
         return '';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXMChatItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: AXMChatItemComponent, isStandalone: true, selector: "axm-chat-item", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { pressChatItem: "pressChatItem" }, ngImport: i0, template: "<div\n  [id]=\"data().id\"\n  class=\"ax-cursor-pointer ax-p-4 ax-flex ax-items-center ax-justify-between ax-gap-4 ax-border-b ax-border-divider\"\n  (click)=\"onPressChatItem(data().id)\"\n>\n  <!-- Avatar and User Info Section -->\n  <div class=\"ax-flex ax-min-w-0 ax-gap-4 ax-flex-1\">\n    <!-- Avatar with Online Status -->\n    <div class=\"ax-flex-shrink-0\">\n      <axp-user-avatar [size]=\"48\" [userId]=\"chatName().id\"></axp-user-avatar>\n      <!--Temp-->\n    </div>\n\n    <!-- User Details and Last Message -->\n    <div class=\"ax-flex ax-flex-col ax-min-w-0 ax-flex-1 ax-gap-2\">\n      <div class=\"ax-flex ax-items-center ax-justify-between ax-gap-2\">\n        <p class=\"ax-font-semibold ax-text-on-surface ax-truncate ax-pt-1\" [title]=\"chatName().fullName\">\n          {{ chatName().fullName }}\n        </p>\n        <div class=\"ax-flex ax-items-center ax-gap-1\">\n          @if (messageSeenStatus()) {\n            <ax-icon class=\"ax-icon ax-text-success ax-size-5\" [class]=\"messageSeenStatus()\"></ax-icon>\n          }\n          @if (this.data().lastMessage) {\n            <span class=\"ax-text-xs ax-whitespace-nowrap\">\n              {{ formattedLastMessageDate() }}\n            </span>\n          }\n        </div>\n      </div>\n      <div class=\"ax-flex ax-items-center ax-gap-2 ax-mt-1 ax-overflow-hidden\">\n        <div class=\"ax-flex ax-items-center ax-gap-2 ax-text-sm ax-shrink ax-min-w-0\">\n          @switch (lastMessage().contentType) {\n            @case ('image') {\n              <i class=\"fa-regular fa-image\"></i>\n            }\n            @case ('video') {\n              <i class=\"fa-regular fa-video\"></i>\n            }\n            @case ('file') {\n              <i class=\"fa-regular fa-file\"></i>\n            }\n            @case ('audio') {\n              <i class=\"fa-regular fa-microphone\"></i>\n            }\n            @case ('link') {\n              <i class=\"fa-regular fa-link\"></i>\n            }\n            <!-- @default {\n              <i class=\"fa-regular fa-message\"></i>\n            } -->\n          }\n          <p class=\"ax-truncate ax-capitalize\">\n            {{ lastMessage().content }}\n          </p>\n        </div>\n        @if (hasUnread()) {\n          <ax-badge color=\"primary\" [text]=\"unreadCount()\" class=\"ax-flex-shrink-0 ax-ml-auto\"></ax-badge>\n        }\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:block;width:100%}\n"], dependencies: [{ kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i5.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i2$2.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "component", type: AXPUserAvatarComponent, selector: "axp-user-avatar", inputs: ["size", "userId"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: AXMChatItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: AXMChatItemComponent, isStandalone: true, selector: "axm-chat-item", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, typing: { classPropertyName: "typing", publicName: "typing", isSignal: true, isRequired: false, transformFunction: null }, lastMessageReaction: { classPropertyName: "lastMessageReaction", publicName: "lastMessageReaction", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pressChatItem: "pressChatItem" }, ngImport: i0, template: "<div\n  [id]=\"data().id\"\n  class=\"ax-cursor-pointer ax-p-4 ax-flex ax-items-center ax-justify-between ax-gap-4 ax-border-b ax-border-divider\"\n  (click)=\"onPressChatItem(data().id)\"\n>\n  <!-- Avatar and User Info Section -->\n  <div class=\"ax-flex ax-min-w-0 ax-gap-4 ax-flex-1\">\n    <!-- Avatar with Online Status -->\n    <div class=\"ax-flex-shrink-0\">\n      @if (chatName().isPrivate) {\n        <axp-user-avatar [size]=\"48\" [userId]=\"chatName().id\"></axp-user-avatar>\n      } @else {\n        <ax-avatar [size]=\"48\">\n          <ax-text class=\"ax-primary-lightest\">\n            <small class=\"ax-text-xs ax-font-semibold fas fa-users\"></small>\n          </ax-text>\n        </ax-avatar>\n      }\n      <!--Temp-->\n    </div>\n\n    <!-- User Details and Last Message -->\n    <div class=\"ax-flex ax-flex-col ax-min-w-0 ax-flex-1 ax-gap-1\">\n      <div class=\"ax-flex ax-items-center ax-justify-between ax-gap-2\">\n        <p class=\"ax-font-semibold ax-text-on-surface ax-truncate ax-py-1\" [title]=\"chatName().fullName\">\n          {{ chatName().fullName }}\n        </p>\n        <div class=\"ax-flex ax-items-center ax-gap-1\">\n          @if (messageSeenStatus()) {\n            <ax-icon class=\"ax-icon ax-text-success ax-size-5\" [class]=\"messageSeenStatus()\"></ax-icon>\n          }\n          @if (this.data().lastMessage) {\n            <span class=\"ax-text-xs ax-whitespace-nowrap\">\n              {{ formattedLastMessageDate() }}\n            </span>\n          }\n        </div>\n      </div>\n      <div class=\"ax-flex ax-items-center ax-justify-between ax-gap-2 ax-mt-1 ax-overflow-hidden\">\n        @if (typing()) {\n          <div class=\"ax-pb-1 ax-flex ax-justify-center ax-items-end ax-gap-1\">\n            <span>is typing</span>\n            <div class=\"typing-indicator\">\n              <span></span>\n              <span></span>\n              <span></span>\n            </div>\n          </div>\n        } @else {\n          <div class=\"ax-flex ax-items-center ax-gap-2 ax-text-sm ax-shrink ax-min-w-0\">\n            @if ((lastMessage().author?.fullName || lastMessage().author?.username) && !chatName().isPrivate) {\n              <span class=\"ax-text-on-surface-light ax-font-semibold ax-capitalize\">\n                {{ lastMessage().author?.fullName || lastMessage().author?.username + ': ' }}\n              </span>\n            }\n            @switch (lastMessage().contentType) {\n              @case ('image') {\n                <i class=\"fa-regular fa-image\"></i>\n              }\n              @case ('video') {\n                <i class=\"fa-regular fa-video\"></i>\n              }\n              @case ('file') {\n                <i class=\"fa-regular fa-file\"></i>\n              }\n              @case ('audio') {\n                <i class=\"fa-regular fa-microphone\"></i>\n              }\n              @case ('link') {\n                <i class=\"fa-regular fa-link\"></i>\n              }\n            }\n\n            <span class=\"ax-truncate ax-capitalize\">\n              {{ lastMessage().content }}\n            </span>\n          </div>\n        }\n        <div class=\"ax-flex ax-items-center ax-gap-2\">\n          @if (hasUnread()) {\n            <ax-badge color=\"primary\" [text]=\"unreadCount()\" class=\"ax-flex-shrink-0 ax-ml-auto\"></ax-badge>\n          }\n          <!-- @if (lastMessageReaction()) {\n            <div class=\"ax-flex ax-items-center ax-gap-1 ax-bg-surface ax-rounded-full ax-p-1 ax-px-2\">\n              <span class=\"ax-text-sm\">{{ lastMessageReaction() }}</span>\n              <span class=\"ax-text-xs\">{{ lastMessage().reactions.length }}</span>\n            </div>\n          } -->\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:block;width:100%}.typing-indicator{display:flex;align-items:center;padding-bottom:.1rem}.typing-indicator span{height:6px;width:6px;margin:0 1px;background-color:#9e9ea1;border-radius:50%;display:inline-block;animation:bounce 1.4s infinite ease-in-out both}.typing-indicator span:nth-child(1){animation-delay:-.32s}.typing-indicator span:nth-child(2){animation-delay:-.16s}@keyframes bounce{0%,80%,to{transform:scale(0)}40%{transform:scale(1)}}\n"], dependencies: [{ kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i1$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i2$2.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "component", type: AXPUserAvatarComponent, selector: "axp-user-avatar", inputs: ["size", "userId"] }, { kind: "ngmodule", type: AXAvatarModule }, { kind: "component", type: i3.AXAvatarComponent, selector: "ax-avatar", inputs: ["color", "size", "shape", "look"], outputs: ["sizeChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXMChatItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: AXMChatItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'axm-chat-item', changeDetection: ChangeDetectionStrategy.OnPush, imports: [AXDecoratorModule, AXBadgeModule, AXPUserAvatarComponent], template: "<div\n  [id]=\"data().id\"\n  class=\"ax-cursor-pointer ax-p-4 ax-flex ax-items-center ax-justify-between ax-gap-4 ax-border-b ax-border-divider\"\n  (click)=\"onPressChatItem(data().id)\"\n>\n  <!-- Avatar and User Info Section -->\n  <div class=\"ax-flex ax-min-w-0 ax-gap-4 ax-flex-1\">\n    <!-- Avatar with Online Status -->\n    <div class=\"ax-flex-shrink-0\">\n      <axp-user-avatar [size]=\"48\" [userId]=\"chatName().id\"></axp-user-avatar>\n      <!--Temp-->\n    </div>\n\n    <!-- User Details and Last Message -->\n    <div class=\"ax-flex ax-flex-col ax-min-w-0 ax-flex-1 ax-gap-2\">\n      <div class=\"ax-flex ax-items-center ax-justify-between ax-gap-2\">\n        <p class=\"ax-font-semibold ax-text-on-surface ax-truncate ax-pt-1\" [title]=\"chatName().fullName\">\n          {{ chatName().fullName }}\n        </p>\n        <div class=\"ax-flex ax-items-center ax-gap-1\">\n          @if (messageSeenStatus()) {\n            <ax-icon class=\"ax-icon ax-text-success ax-size-5\" [class]=\"messageSeenStatus()\"></ax-icon>\n          }\n          @if (this.data().lastMessage) {\n            <span class=\"ax-text-xs ax-whitespace-nowrap\">\n              {{ formattedLastMessageDate() }}\n            </span>\n          }\n        </div>\n      </div>\n      <div class=\"ax-flex ax-items-center ax-gap-2 ax-mt-1 ax-overflow-hidden\">\n        <div class=\"ax-flex ax-items-center ax-gap-2 ax-text-sm ax-shrink ax-min-w-0\">\n          @switch (lastMessage().contentType) {\n            @case ('image') {\n              <i class=\"fa-regular fa-image\"></i>\n            }\n            @case ('video') {\n              <i class=\"fa-regular fa-video\"></i>\n            }\n            @case ('file') {\n              <i class=\"fa-regular fa-file\"></i>\n            }\n            @case ('audio') {\n              <i class=\"fa-regular fa-microphone\"></i>\n            }\n            @case ('link') {\n              <i class=\"fa-regular fa-link\"></i>\n            }\n            <!-- @default {\n              <i class=\"fa-regular fa-message\"></i>\n            } -->\n          }\n          <p class=\"ax-truncate ax-capitalize\">\n            {{ lastMessage().content }}\n          </p>\n        </div>\n        @if (hasUnread()) {\n          <ax-badge color=\"primary\" [text]=\"unreadCount()\" class=\"ax-flex-shrink-0 ax-ml-auto\"></ax-badge>\n        }\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:block;width:100%}\n"] }]
+            args: [{ selector: 'axm-chat-item', changeDetection: ChangeDetectionStrategy.OnPush, imports: [AXDecoratorModule, AXBadgeModule, AXPUserAvatarComponent, AXAvatarModule, AXDecoratorModule], template: "<div\n  [id]=\"data().id\"\n  class=\"ax-cursor-pointer ax-p-4 ax-flex ax-items-center ax-justify-between ax-gap-4 ax-border-b ax-border-divider\"\n  (click)=\"onPressChatItem(data().id)\"\n>\n  <!-- Avatar and User Info Section -->\n  <div class=\"ax-flex ax-min-w-0 ax-gap-4 ax-flex-1\">\n    <!-- Avatar with Online Status -->\n    <div class=\"ax-flex-shrink-0\">\n      @if (chatName().isPrivate) {\n        <axp-user-avatar [size]=\"48\" [userId]=\"chatName().id\"></axp-user-avatar>\n      } @else {\n        <ax-avatar [size]=\"48\">\n          <ax-text class=\"ax-primary-lightest\">\n            <small class=\"ax-text-xs ax-font-semibold fas fa-users\"></small>\n          </ax-text>\n        </ax-avatar>\n      }\n      <!--Temp-->\n    </div>\n\n    <!-- User Details and Last Message -->\n    <div class=\"ax-flex ax-flex-col ax-min-w-0 ax-flex-1 ax-gap-1\">\n      <div class=\"ax-flex ax-items-center ax-justify-between ax-gap-2\">\n        <p class=\"ax-font-semibold ax-text-on-surface ax-truncate ax-py-1\" [title]=\"chatName().fullName\">\n          {{ chatName().fullName }}\n        </p>\n        <div class=\"ax-flex ax-items-center ax-gap-1\">\n          @if (messageSeenStatus()) {\n            <ax-icon class=\"ax-icon ax-text-success ax-size-5\" [class]=\"messageSeenStatus()\"></ax-icon>\n          }\n          @if (this.data().lastMessage) {\n            <span class=\"ax-text-xs ax-whitespace-nowrap\">\n              {{ formattedLastMessageDate() }}\n            </span>\n          }\n        </div>\n      </div>\n      <div class=\"ax-flex ax-items-center ax-justify-between ax-gap-2 ax-mt-1 ax-overflow-hidden\">\n        @if (typing()) {\n          <div class=\"ax-pb-1 ax-flex ax-justify-center ax-items-end ax-gap-1\">\n            <span>is typing</span>\n            <div class=\"typing-indicator\">\n              <span></span>\n              <span></span>\n              <span></span>\n            </div>\n          </div>\n        } @else {\n          <div class=\"ax-flex ax-items-center ax-gap-2 ax-text-sm ax-shrink ax-min-w-0\">\n            @if ((lastMessage().author?.fullName || lastMessage().author?.username) && !chatName().isPrivate) {\n              <span class=\"ax-text-on-surface-light ax-font-semibold ax-capitalize\">\n                {{ lastMessage().author?.fullName || lastMessage().author?.username + ': ' }}\n              </span>\n            }\n            @switch (lastMessage().contentType) {\n              @case ('image') {\n                <i class=\"fa-regular fa-image\"></i>\n              }\n              @case ('video') {\n                <i class=\"fa-regular fa-video\"></i>\n              }\n              @case ('file') {\n                <i class=\"fa-regular fa-file\"></i>\n              }\n              @case ('audio') {\n                <i class=\"fa-regular fa-microphone\"></i>\n              }\n              @case ('link') {\n                <i class=\"fa-regular fa-link\"></i>\n              }\n            }\n\n            <span class=\"ax-truncate ax-capitalize\">\n              {{ lastMessage().content }}\n            </span>\n          </div>\n        }\n        <div class=\"ax-flex ax-items-center ax-gap-2\">\n          @if (hasUnread()) {\n            <ax-badge color=\"primary\" [text]=\"unreadCount()\" class=\"ax-flex-shrink-0 ax-ml-auto\"></ax-badge>\n          }\n          <!-- @if (lastMessageReaction()) {\n            <div class=\"ax-flex ax-items-center ax-gap-1 ax-bg-surface ax-rounded-full ax-p-1 ax-px-2\">\n              <span class=\"ax-text-sm\">{{ lastMessageReaction() }}</span>\n              <span class=\"ax-text-xs\">{{ lastMessage().reactions.length }}</span>\n            </div>\n          } -->\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:block;width:100%}.typing-indicator{display:flex;align-items:center;padding-bottom:.1rem}.typing-indicator span{height:6px;width:6px;margin:0 1px;background-color:#9e9ea1;border-radius:50%;display:inline-block;animation:bounce 1.4s infinite ease-in-out both}.typing-indicator span:nth-child(1){animation-delay:-.32s}.typing-indicator span:nth-child(2){animation-delay:-.16s}@keyframes bounce{0%,80%,to{transform:scale(0)}40%{transform:scale(1)}}\n"] }]
         }] });
 
 class AXMChatComponent extends AXPPageLayoutBaseComponent {
@@ -1878,8 +2022,8 @@ class AXMChatComponent extends AXPPageLayoutBaseComponent {
         super(...arguments);
         this.activatedRoute = inject(ActivatedRoute);
         this.chatService = inject(AXMChatService);
-        this.userService = inject(AXMUsersEntityService);
         this.popupService = inject(AXPopupService);
+        this.dialogService = inject(AXDialogService);
         this.router = inject(Router);
         this.unsubscribe = inject(AXUnsubscriber);
         // View Children
@@ -1890,6 +2034,7 @@ class AXMChatComponent extends AXPPageLayoutBaseComponent {
         this.allRooms = signal([]);
         this.selectedRoom = signal(null);
         this.isLoading = signal(false);
+        this.typingStatus = signal({});
         this.error = signal(null);
         this.activeTab = signal(0);
         this.isSearching = signal(false);
@@ -1931,10 +2076,9 @@ class AXMChatComponent extends AXPPageLayoutBaseComponent {
                             roomName = room.title || '';
                         }
                         else if (room.members && room.members.length === 1) {
-                            const memberId = room.members[0].id;
-                            if (memberId) {
-                                const user = await this.userService.getOne(memberId);
-                                roomName = `${user.firstName} ${user.lastName}` || '';
+                            const member = room.members[0];
+                            if (member) {
+                                roomName = member.fullName || '';
                             }
                         }
                         const lastMessage = room.lastMessage?.message?.content || '';
@@ -1958,6 +2102,12 @@ class AXMChatComponent extends AXPPageLayoutBaseComponent {
         this.allCount = computed(() => this.allRooms().length);
         this.hasUnread = computed(() => this.allRooms().filter((i) => i.unreadCount > 0).length > 0);
         this.totalCount = computed(() => this.allRooms().length || 0);
+        //switch tab to unread if there is no unread
+        this.autoSwitchTab = effect(() => {
+            if (this.activeTab() === 1 && !this.hasUnread()) {
+                this.activeTab.set(0);
+            }
+        });
         this.af = afterNextRender(() => {
             const tabComponent = this.tab();
             if (tabComponent) {
@@ -1984,14 +2134,96 @@ class AXMChatComponent extends AXPPageLayoutBaseComponent {
             await this.loadFromRoute();
         });
         //
-        this.messageSentSubscription = this.chatService.messageSent$.subscribe(() => {
-            this.refreshChat();
+        this.chatService.roomRemoved$.pipe(this.unsubscribe.takeUntilDestroy).subscribe((roomId) => {
+            this.allRooms.update((rooms) => rooms.filter((r) => r.id !== roomId));
+            if (roomId === this.selectedRoom()?.id) {
+                this.selectedRoom.set(null);
+                this.router.navigate(['./'], { relativeTo: this.activatedRoute });
+            }
+        });
+        this.chatService.roomSeen$.pipe(this.unsubscribe.takeUntilDestroy).subscribe((roomId) => {
+            const currentRooms = this.allRooms();
+            const updatedRooms = currentRooms.map((room) => {
+                if (room.id === roomId) {
+                    return { ...room, unreadCount: 0 };
+                }
+                return room;
+            });
+            this.allRooms.set(updatedRooms);
+        });
+        this.chatService.messageSeen$.pipe(this.unsubscribe.takeUntilDestroy).subscribe((message) => {
+            const currentRooms = this.allRooms();
+            const updatedRooms = currentRooms.map((room) => {
+                if (room.id === message.roomId) {
+                    return { ...room, unreadCount: room.unreadCount - 1 };
+                }
+                return room;
+            });
+            this.allRooms.set(updatedRooms);
+        });
+        this.chatService.typingStatus$.pipe(this.unsubscribe.takeUntilDestroy).subscribe(async (status) => {
+            const currentUserId = this.sessionService.user?.id;
+            if (status.user.id !== currentUserId) {
+                if (status.isTyping) {
+                    this.typingStatus.update((value) => ({
+                        ...value,
+                        [status.roomId]: { user: status.user.fullName || '', isTyping: true },
+                    }));
+                }
+                else {
+                    this.typingStatus.update((value) => {
+                        const { [status.roomId]: _, ...rest } = value;
+                        return rest;
+                    });
+                }
+            }
+        });
+        this.chatService.messageSent$.pipe(this.unsubscribe.takeUntilDestroy).subscribe((message) => {
+            const rooms = this.allRooms();
+            const roomIndex = rooms.findIndex((r) => r.id === message.roomId);
+            if (roomIndex > -1) {
+                const roomToUpdate = rooms[roomIndex];
+                const updatedRoom = {
+                    ...roomToUpdate,
+                    lastMessage: message,
+                    unreadCount: message.author.id !== this.sessionService.user?.id
+                        ? (roomToUpdate.unreadCount || 0) + 1
+                        : roomToUpdate.unreadCount,
+                };
+                const newRooms = [updatedRoom, ...rooms.filter((r) => r.id !== message.roomId)];
+                this.allRooms.set(newRooms);
+            }
+            else {
+                // New room, fetch it and add it to the top.
+                this.chatService.getRoom(message.roomId).then((newRoom) => {
+                    this.allRooms.update((currentRooms) => {
+                        // Prepending the new room
+                        return [newRoom, ...currentRooms];
+                    });
+                });
+            }
+        });
+        this.chatService.messageReacted$.pipe(this.unsubscribe.takeUntilDestroy).subscribe((message) => {
+            this.allRooms.update((rooms) => {
+                return rooms.map((room) => {
+                    if (room.lastMessage?.id === message.id) {
+                        return {
+                            ...room,
+                            lastMessage: {
+                                ...room.lastMessage,
+                                reactions: message.reactions,
+                            },
+                        };
+                    }
+                    return room;
+                });
+            });
         });
     }
     async loadFromRoute() {
         const chatId = this.activatedRoute.snapshot.firstChild?.paramMap.get('id');
         if (chatId) {
-            this.markChatAsRead(chatId);
+            this.openChat(chatId);
         }
         else {
             this.selectedRoom.set(null);
@@ -2000,6 +2232,9 @@ class AXMChatComponent extends AXPPageLayoutBaseComponent {
     // Page Interface Implementation
     async getPageTitle() {
         const room = this.selectedRoom();
+        if (!room && this.layoutService.isMobileDevice()) {
+            return await this.translateService.translateAsync('plural-title', { scope: 'conversation' });
+        }
         if (!room) {
             return '';
         }
@@ -2011,10 +2246,14 @@ class AXMChatComponent extends AXPPageLayoutBaseComponent {
         if (!member) {
             return 'Unknown User';
         }
-        const user = await this.userService.getOne(member.id);
-        return `${user.firstName} ${user.lastName}` || 'Unknown User';
+        return member.fullName || 'Unknown User';
     }
     getPageDescription() {
+        const typing = this.typingStatus();
+        const selectedRoomId = this.selectedRoom()?.id;
+        if (selectedRoomId && typing[selectedRoomId]?.isTyping) {
+            return `${typing[selectedRoomId].user} is typing...`;
+        }
         const room = this.selectedRoom();
         return room?.topic || '';
     }
@@ -2027,10 +2266,44 @@ class AXMChatComponent extends AXPPageLayoutBaseComponent {
         else
             return null;
     }
+    async getSecondaryMenuItems() {
+        return this.layoutService.isMobileDevice()
+            ? []
+            : [
+                {
+                    title: await this.translateService.translateAsync('remove-chat', { scope: 'conversation' }),
+                    icon: 'fa-light fa-trash-can',
+                    color: 'danger',
+                    command: {
+                        name: 'remove-chat',
+                    },
+                },
+            ];
+    }
+    async execute(command) {
+        switch (command.name) {
+            case 'remove-chat':
+                const result = await this.dialogService.confirm('Remove Chat', 'Are you sure you want to remove this chat?');
+                if (result) {
+                    await this.chatService.deleteRoom(this.selectedRoom()?.id);
+                    this.router.navigate(['./'], { relativeTo: this.activatedRoute });
+                }
+                break;
+        }
+    }
     onBackButtonClick() {
         this.selectedRoom.set(null);
+        this.typingStatus.update((value) => {
+            const { [this.selectedRoom()?.id]: _, ...rest } = value;
+            return rest;
+        });
         this.router.navigate(['./'], { relativeTo: this.activatedRoute });
     }
+    onKeydownHandler(event) {
+        if (this.selectedRoom()) {
+            this.onBackButtonClick();
+        }
+    }
     // Methods
     async loadChats() {
         try {
@@ -2053,8 +2326,12 @@ class AXMChatComponent extends AXPPageLayoutBaseComponent {
     async refreshChat() {
         await this.loadChats();
     }
-    async markChatAsRead(chatId) {
+    async openChat(chatId) {
         try {
+            this.typingStatus.update((value) => {
+                const { [chatId]: _, ...rest } = value;
+                return rest;
+            });
             // Use the service method to mark chat as read
             await this.chatService.markRoomSeen(chatId);
             // Update local state without making another network request
@@ -2101,7 +2378,7 @@ class AXMChatComponent extends AXPPageLayoutBaseComponent {
             closeButton: true,
             closeOnBackdropClick: false,
         };
-        const popup = await this.popupService.open(AXMCommentLookupPopup, popupConfig);
+        const popup = await this.popupService.open(AXMUserLookupPopup, popupConfig);
         const members = popup.data?.lookup;
         try {
             if (members) {
@@ -2114,25 +2391,31 @@ class AXMChatComponent extends AXPPageLayoutBaseComponent {
             this.toastService.danger('Failed to create room');
         }
     }
-    ngOnDestroy() {
-        this.messageSentSubscription?.unsubscribe();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXMChatComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: AXMChatComponent, isStandalone: true, selector: "axm-chat", providers: [
+    ngOnDestroy() { }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: AXMChatComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: AXMChatComponent, isStandalone: true, selector: "axm-chat", host: { listeners: { "document:keydown.escape": "onKeydownHandler($event)" } }, providers: [
             {
                 provide: AXPPageLayoutBase,
                 useExisting: AXMChatComponent,
             },
             AXUnsubscriber,
-        ], viewQueries: [{ propertyName: "tab", first: true, predicate: ["tab"], descendants: true, isSignal: true }, { propertyName: "container", first: true, predicate: ["container"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<axp-page-layout #container>\n  <axp-layout-start-side [axResizable]=\"true\" class=\"ax-border-e ax-lightest-surface ax-h-full\">\n    <axp-layout-header>\n      <axp-layout-title>{{ 'module-name' | translate: { scope: 'conversation' } | async }}</axp-layout-title>\n      <axp-layout-toolbar>\n        <ax-search-box\n          #searchInput\n          look=\"solid\"\n          [placeholder]=\"placeholder()\"\n          [value]=\"searchQuery()\"\n          (onValueChanged)=\"onSearch($event.value)\"\n          class=\"ax-w-full\"\n        >\n          <ax-clear-button></ax-clear-button>\n        </ax-search-box>\n      </axp-layout-toolbar>\n    </axp-layout-header>\n    <axp-layout-content class=\"ax-flex ax-flex-col ax-min-h-0\">\n      <ng-container [ngTemplateOutlet]=\"template\"></ng-container>\n    </axp-layout-content>\n  </axp-layout-start-side>\n\n  <axp-page-content style=\"height: calc(100vh - 22rem)\">\n    @if (selectedRoom()) {\n      <router-outlet></router-outlet>\n    } @else if (layoutService.isMobileDevice()) {\n      <ax-search-box\n        #searchInput\n        look=\"solid\"\n        [placeholder]=\"placeholder()\"\n        [value]=\"searchQuery()\"\n        (onValueChanged)=\"onSearch($event.value)\"\n        class=\"ax-w-full\"\n      >\n        <ax-clear-button></ax-clear-button>\n      </ax-search-box>\n      <ng-container [ngTemplateOutlet]=\"template\"></ng-container>\n    }\n  </axp-page-content>\n</axp-page-layout>\n\n<ng-template #template>\n  <!-- Tabs -->\n  <div class=\"ax-px-4\">\n    @if (hasUnread()) {\n      <ax-tabs\n        #tab\n        class=\"ax-text-neutral-400\"\n        [look]=\"'with-line'\"\n        [location]=\"'bottom'\"\n        [fitParent]=\"true\"\n        (onActiveTabChanged)=\"onTabChange($event)\"\n      >\n        <ax-tab-item text=\"All\" [active]=\"activeTab() === 0\">\n          <ax-suffix>\n            <ax-badge\n              [text]=\"totalCount().toString()\"\n              [color]=\"activeTab() === 0 ? 'primary' : 'secondary'\"\n              class=\"ax-min-w-[1.5rem] ax-justify-center\"\n            ></ax-badge>\n          </ax-suffix>\n        </ax-tab-item>\n        <ax-tab-item text=\"Unread\" [active]=\"activeTab() === 1\">\n          <ax-suffix>\n            <ax-badge\n              [text]=\"unreadCount().toString()\"\n              [color]=\"activeTab() === 1 ? 'primary' : 'secondary'\"\n              class=\"ax-min-w-[1.5rem] ax-justify-center\"\n            ></ax-badge>\n          </ax-suffix>\n        </ax-tab-item>\n      </ax-tabs>\n    }\n  </div>\n\n  <!-- Chat List Content -->\n  <div class=\"ax-flex-1 ax-overflow-hidden ax-flex ax-flex-col ax-justify-between\" [class.ax-border-t]=\"hasUnread()\">\n    <!-- Loading State -->\n    @if (isLoading()) {\n      <div class=\"ax-p-4 ax-space-y-4\">\n        @for (_ of [1, 2, 3, 4, 5, 6]; track $index) {\n          <div class=\"ax-flex ax-items-center ax-space-x-3\">\n            <ax-skeleton [animated]=\"true\" class=\"ax-w-12 ax-h-12 ax-rounded-full\"></ax-skeleton>\n            <div class=\"ax-flex-1 ax-space-y-2\">\n              <ax-skeleton [animated]=\"true\" class=\"ax-w-3/4 ax-h-4 ax-rounded-md\"></ax-skeleton>\n              <ax-skeleton [animated]=\"true\" class=\"ax-w-1/2 ax-h-3 ax-rounded-md\"></ax-skeleton>\n            </div>\n          </div>\n        }\n      </div>\n    }\n\n    <!-- Error State -->\n    @if (error()) {\n      <div class=\"ax-flex ax-flex-col ax-items-center ax-justify-center ax-h-full ax-p-4 ax-text-center\">\n        <ax-icon class=\"ax-text-danger ax-text-5xl ax-mb-3\">\n          <i class=\"fa-light fa-circle-exclamation\"></i>\n        </ax-icon>\n        <p class=\"ax-font-semibold ax-text-lg\">\n          {{ 'chat-error' | translate: { scope: 'conversation' } | async }}\n        </p>\n        <p class=\"ax-font-semibold ax-text-lg\">\n          {{ 'chat-try-again' | translate: { scope: 'conversation' } | async }}\n        </p>\n        <p class=\"ax-text-secondary ax-mb-4\">{{ error() }}</p>\n        <ax-button\n          [text]=\"'try-again' | translate: { scope: 'conversation' } | async\"\n          color=\"primary\"\n          (onClick)=\"refreshChat()\"\n        ></ax-button>\n      </div>\n    }\n\n    <!-- Chat List -->\n    @if (!isLoading() && !error()) {\n      <div class=\"ax-flex-1 ax-overflow-y-auto\">\n        @for (i of filteredRooms(); track i.id) {\n          <axm-chat-item\n            [data]=\"i\"\n            [attr.data-id]=\"i.id\"\n            (click)=\"markChatAsRead(i.id)\"\n            [class.ax-bg-dark]=\"selectedRoom()?.id === i.id\"\n            class=\"ax-transition-all ax-duration-100 hover:ax-bg-surface\"\n          ></axm-chat-item>\n        }\n\n        <!-- Empty State -->\n        @empty {\n          <div class=\"ax-p-4 ax-font-medium ax-text-center ax-text-secondary\">\n            @if (isSearching()) {\n              No chats found matching your search\n            } @else {\n              No chats available\n            }\n          </div>\n        }\n      </div>\n    }\n\n    <!-- Footer Content -->\n    <div class=\"ax-border-t ax-border-divider ax-bg-lightest ax-p-4\">\n      <ax-button class=\"ax-w-full\" color=\"primary\" text=\"New Conversation\" (onClick)=\"onNewConversation()\">\n        <ax-prefix>\n          <ax-icon>\n            <i class=\"fa-solid fa-plus\"></i>\n          </ax-icon>\n        </ax-prefix>\n      </ax-button>\n    </div>\n  </div>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "component", type: AXMChatItemComponent, selector: "axm-chat-item", inputs: ["data"], outputs: ["pressChatItem"] }, { kind: "ngmodule", type: 
+        ], viewQueries: [{ propertyName: "tab", first: true, predicate: ["tab"], descendants: true, isSignal: true }, { propertyName: "container", first: true, predicate: ["container"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<axp-page-layout #container>\n  <axp-layout-start-side class=\"ax-border-e ax-lightest-surface ax-h-full\">\n    <axp-layout-header>\n      <axp-layout-title>{{ 'module-name' | translate: { scope: 'conversation' } | async }}</axp-layout-title>\n      <axp-layout-toolbar>\n        <ax-search-box\n          #searchInput\n          look=\"solid\"\n          [placeholder]=\"placeholder()\"\n          [value]=\"searchQuery()\"\n          (onValueChanged)=\"onSearch($event.value)\"\n          class=\"ax-w-full\"\n        >\n          <ax-clear-button></ax-clear-button>\n        </ax-search-box>\n      </axp-layout-toolbar>\n    </axp-layout-header>\n    <axp-layout-content class=\"ax-flex ax-flex-col ax-min-h-0 ax-max-w-80\">\n      @if (!layoutService.isMobileDevice()) {\n        <ng-container [ngTemplateOutlet]=\"template\"></ng-container>\n      }\n    </axp-layout-content>\n  </axp-layout-start-side>\n\n  <axp-page-content style=\"height: calc(100vh - 22rem)\">\n    @if (selectedRoom()) {\n      <router-outlet></router-outlet>\n    } @else if (layoutService.isMobileDevice()) {\n      <ax-search-box\n        #searchInput\n        look=\"solid\"\n        [placeholder]=\"placeholder()\"\n        [value]=\"searchQuery()\"\n        (onValueChanged)=\"onSearch($event.value)\"\n        class=\"ax-w-full\"\n      >\n        <ax-clear-button></ax-clear-button>\n      </ax-search-box>\n      <ng-container [ngTemplateOutlet]=\"template\"></ng-container>\n    }\n  </axp-page-content>\n</axp-page-layout>\n\n<ng-template #template>\n  <!-- Tabs -->\n  <div class=\"ax-px-4\">\n    @if (hasUnread()) {\n      <ax-tabs\n        #tab\n        class=\"ax-text-neutral-400\"\n        [look]=\"'with-line'\"\n        [location]=\"'bottom'\"\n        [fitParent]=\"true\"\n        (onActiveTabChanged)=\"onTabChange($event)\"\n      >\n        <ax-tab-item text=\"All\" [active]=\"activeTab() === 0\">\n          <ax-suffix>\n            <ax-badge\n              [text]=\"totalCount().toString()\"\n              [color]=\"activeTab() === 0 ? 'primary' : 'secondary'\"\n              class=\"ax-min-w-[1.5rem] ax-justify-center\"\n            ></ax-badge>\n          </ax-suffix>\n        </ax-tab-item>\n        <ax-tab-item text=\"Unread\" [active]=\"activeTab() === 1\">\n          <ax-suffix>\n            <ax-badge\n              [text]=\"unreadCount().toString()\"\n              [color]=\"activeTab() === 1 ? 'primary' : 'secondary'\"\n              class=\"ax-min-w-[1.5rem] ax-justify-center\"\n            ></ax-badge>\n          </ax-suffix>\n        </ax-tab-item>\n      </ax-tabs>\n    }\n  </div>\n\n  <!-- Chat List Content -->\n  <div\n    class=\"ax-flex-1 ax-overflow-hidden ax-flex ax-flex-col ax-justify-between ax-min-w-80\"\n    [class.ax-border-t]=\"hasUnread()\"\n  >\n    <!-- Loading State -->\n    @if (isLoading()) {\n      <div class=\"ax-p-4 ax-space-y-4\">\n        @for (_ of [1, 2, 3, 4, 5, 6]; track $index) {\n          <div class=\"ax-flex ax-items-center ax-space-x-3\">\n            <ax-skeleton [animated]=\"true\" class=\"ax-w-12 ax-h-12 ax-rounded-full\"></ax-skeleton>\n            <div class=\"ax-flex-1 ax-space-y-2\">\n              <ax-skeleton [animated]=\"true\" class=\"ax-w-3/4 ax-h-4 ax-rounded-md\"></ax-skeleton>\n              <ax-skeleton [animated]=\"true\" class=\"ax-w-1/2 ax-h-3 ax-rounded-md\"></ax-skeleton>\n            </div>\n          </div>\n        }\n      </div>\n    }\n\n    <!-- Error State -->\n    @if (error()) {\n      <div class=\"ax-flex ax-flex-col ax-items-center ax-justify-center ax-h-full ax-p-4 ax-text-center\">\n        <ax-icon class=\"ax-text-danger ax-text-5xl ax-mb-3\">\n          <i class=\"fa-light fa-circle-exclamation\"></i>\n        </ax-icon>\n        <p class=\"ax-font-semibold ax-text-lg\">\n          {{ 'chat-error' | translate: { scope: 'conversation' } | async }}\n        </p>\n        <p class=\"ax-font-semibold ax-text-lg\">\n          {{ 'chat-try-again' | translate: { scope: 'conversation' } | async }}\n        </p>\n        <p class=\"ax-text-secondary ax-mb-4\">{{ error() }}</p>\n        <ax-button\n          [text]=\"'try-again' | translate: { scope: 'conversation' } | async\"\n          color=\"primary\"\n          (onClick)=\"refreshChat()\"\n        ></ax-button>\n      </div>\n    }\n\n    <!-- Chat List -->\n    @if (!isLoading() && !error()) {\n      <div class=\"ax-flex-1 ax-overflow-y-auto\">\n        @for (i of filteredRooms(); track i.id) {\n          <axm-chat-item\n            [data]=\"i\"\n            [typing]=\"$any(typingStatus()[i.id])?.isTyping || false\"\n            [lastMessageReaction]=\"i.lastMessage?.reactions?.[0]?.type ?? null\"\n            [attr.data-id]=\"i.id\"\n            (click)=\"openChat(i.id)\"\n            [class.ax-bg-dark]=\"selectedRoom()?.id === i.id\"\n            class=\"ax-transition-all ax-duration-100 hover:ax-bg-surface\"\n            [@fadeIn]\n            tabindex=\"0\"\n            (keydown.enter)=\"openChat(i.id)\"\n            role=\"button\"\n          ></axm-chat-item>\n        }\n\n        <!-- Empty State -->\n        @empty {\n          <div class=\"ax-p-4 ax-font-medium ax-text-center ax-text-secondary\">\n            @if (isSearching()) {\n              No chats found matching your search\n            } @else {\n              No chats available\n            }\n          </div>\n        }\n      </div>\n    }\n\n    <!-- Footer Content -->\n    <div class=\"ax-border-t ax-border-divider ax-bg-lightest ax-p-4\">\n      <ax-button class=\"ax-w-full\" color=\"primary\" text=\"New Conversation\" (onClick)=\"onNewConversation()\">\n        <ax-prefix>\n          <ax-icon>\n            <i class=\"fa-solid fa-plus\"></i>\n          </ax-icon>\n        </ax-prefix>\n      </ax-button>\n    </div>\n  </div>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "component", type: AXMChatItemComponent, selector: "axm-chat-item", inputs: ["data", "typing", "lastMessageReaction"], outputs: ["pressChatItem"] }, { kind: "ngmodule", type: 
                 // Common Modules
-                CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i2$3.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "ngmodule", type: 
+                CommonModule }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i2$3.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "ngmodule", type: 
                 // Acorex Core Modules
-                AXFormatModule }, { kind: "ngmodule", type: AXConversationModule }, { kind: "ngmodule", type: AXCommentModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }, { kind: "directive", type: 
+                AXFormatModule }, { kind: "ngmodule", type: AXConversationModule }, { kind: "ngmodule", type: AXCommentModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i4$1.AXTranslatorPipe, name: "translate" }, { kind: "ngmodule", type: 
                 // Acorex Component Modules
-                AXResizableDirective, selector: "[axResizable]", inputs: ["axResizable", "minWidth", "maxWidth", "dblClickAction", "width", "defaultWidth"], outputs: ["axResizableChange", "minWidthChange", "maxWidthChange", "dblClickActionChange", "widthChange", "defaultWidthChange", "onResizingStarted", "onResizingEnded", "onResizingDblClick"] }, { kind: "ngmodule", type: AXImageModule }, { kind: "ngmodule", type: AXAvatarModule }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i2$2.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i5.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i5.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "component", type: i5.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXTextBoxModule }, { kind: "ngmodule", type: AXSearchBoxModule }, { kind: "component", type: i6$1.AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXTabsModule }, { kind: "component", type: i7$1.AXTabsComponent, selector: "ax-tabs", inputs: ["look", "location", "fitParent", "minWidth", "content"], outputs: ["onActiveTabChanged"] }, { kind: "component", type: i7$1.AXTabItemComponent, selector: "ax-tab-item", inputs: ["disabled", "text", "key", "headerTemplate", "active"], outputs: ["disabledChange", "onClick", "onBlur", "onFocus", "activeChange"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i5$1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "ngmodule", type: AXWysiwygModule }, { kind: "ngmodule", type: AXLabelModule }, { kind: "ngmodule", type: AXSelectBoxModule }, { kind: "ngmodule", type: AXFormModule }, { kind: "ngmodule", type: AXDropdownButtonModule }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "ngmodule", type: AXToolBarModule }, { kind: "ngmodule", type: AXSkeletonModule }, { kind: "component", type: i2$1.AXSkeletonComponent, selector: "ax-skeleton", inputs: ["animated"] }, { kind: "component", type: AXPPageLayoutComponent, selector: "axp-page-layout" }, { kind: "component", type: AXPThemeLayoutBlockComponent, selector: "    axp-page-content,     axp-page-footer-container,    axp-page-footer,    axp-page-header,    axp-page-header-container,    axp-page-toolbar,    axp-layout-content,     axp-layout-page-content,     axp-layout-sections,    axp-layout-body,    axp-layout-page-body,    axp-layout-prefix,    axp-layout-suffix,    axp-layout-title-bar,    axp-layout-title,     axp-layout-title-actions,     axp-layout-nav-button,     axp-layout-description,     axp-layout-breadcrumbs,    axp-layout-list-action,    " }, { kind: "component", type: AXPThemeLayoutStartSideComponent, selector: "axp-layout-page-start-side, axp-layout-start-side" }, { kind: "component", type: AXPThemeLayoutHeaderComponent, selector: "axp-layout-header" }, { kind: "component", type: AXPThemeLayoutToolbarComponent, selector: "axp-layout-toolbar" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+                // AXResizableDirective,
+                AXImageModule }, { kind: "ngmodule", type: AXAvatarModule }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i2$2.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i1$1.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "component", type: i1$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXTextBoxModule }, { kind: "ngmodule", type: AXSearchBoxModule }, { kind: "component", type: i6$1.AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXTabsModule }, { kind: "component", type: i7$1.AXTabsComponent, selector: "ax-tabs", inputs: ["look", "location", "fitParent", "minWidth", "content"], outputs: ["onActiveTabChanged"] }, { kind: "component", type: i7$1.AXTabItemComponent, selector: "ax-tab-item", inputs: ["disabled", "text", "key", "headerTemplate", "active"], outputs: ["disabledChange", "onClick", "onBlur", "onFocus", "activeChange"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i5.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "ngmodule", type: AXWysiwygModule }, { kind: "ngmodule", type: AXLabelModule }, { kind: "ngmodule", type: AXSelectBoxModule }, { kind: "ngmodule", type: AXFormModule }, { kind: "ngmodule", type: AXDropdownButtonModule }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "ngmodule", type: AXToolBarModule }, { kind: "ngmodule", type: AXSkeletonModule }, { kind: "component", type: i2.AXSkeletonComponent, selector: "ax-skeleton", inputs: ["animated"] }, { kind: "component", type: AXPPageLayoutComponent, selector: "axp-page-layout" }, { kind: "component", type: AXPThemeLayoutBlockComponent, selector: "    axp-page-content,     axp-page-footer-container,    axp-page-footer,    axp-page-header,    axp-page-header-container,    axp-page-toolbar,    axp-layout-content,     axp-layout-page-content,     axp-layout-sections,    axp-layout-body,    axp-layout-page-body,    axp-layout-prefix,    axp-layout-suffix,    axp-layout-title-bar,    axp-layout-title,     axp-layout-title-actions,     axp-layout-nav-button,     axp-layout-description,     axp-layout-breadcrumbs,    axp-layout-list-action,    " }, { kind: "component", type: AXPThemeLayoutStartSideComponent, selector: "axp-layout-page-start-side, axp-layout-start-side" }, { kind: "component", type: AXPThemeLayoutHeaderComponent, selector: "axp-layout-header" }, { kind: "component", type: AXPThemeLayoutToolbarComponent, selector: "axp-layout-toolbar" }], animations: [
+            trigger('fadeIn', [
+                transition(':enter', [
+                    style({ opacity: 0, transform: 'translateY(10px)' }),
+                    animate('300ms ease-out', style({ opacity: 1, transform: 'translateY(0)' })),
+                ]),
+            ]),
+        ], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXMChatComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: AXMChatComponent, decorators: [{
             type: Component,
             args: [{ selector: 'axm-chat', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {
@@ -2152,7 +2435,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImpor
                         AXCommentModule,
                         AXTranslationModule,
                         // Acorex Component Modules
-                        AXResizableDirective,
+                        // AXResizableDirective,
                         AXImageModule,
                         AXAvatarModule,
                         AXBadgeModule,
@@ -2175,8 +2458,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImpor
                         AXPThemeLayoutStartSideComponent,
                         AXPThemeLayoutHeaderComponent,
                         AXPThemeLayoutToolbarComponent,
-                    ], template: "<axp-page-layout #container>\n  <axp-layout-start-side [axResizable]=\"true\" class=\"ax-border-e ax-lightest-surface ax-h-full\">\n    <axp-layout-header>\n      <axp-layout-title>{{ 'module-name' | translate: { scope: 'conversation' } | async }}</axp-layout-title>\n      <axp-layout-toolbar>\n        <ax-search-box\n          #searchInput\n          look=\"solid\"\n          [placeholder]=\"placeholder()\"\n          [value]=\"searchQuery()\"\n          (onValueChanged)=\"onSearch($event.value)\"\n          class=\"ax-w-full\"\n        >\n          <ax-clear-button></ax-clear-button>\n        </ax-search-box>\n      </axp-layout-toolbar>\n    </axp-layout-header>\n    <axp-layout-content class=\"ax-flex ax-flex-col ax-min-h-0\">\n      <ng-container [ngTemplateOutlet]=\"template\"></ng-container>\n    </axp-layout-content>\n  </axp-layout-start-side>\n\n  <axp-page-content style=\"height: calc(100vh - 22rem)\">\n    @if (selectedRoom()) {\n      <router-outlet></router-outlet>\n    } @else if (layoutService.isMobileDevice()) {\n      <ax-search-box\n        #searchInput\n        look=\"solid\"\n        [placeholder]=\"placeholder()\"\n        [value]=\"searchQuery()\"\n        (onValueChanged)=\"onSearch($event.value)\"\n        class=\"ax-w-full\"\n      >\n        <ax-clear-button></ax-clear-button>\n      </ax-search-box>\n      <ng-container [ngTemplateOutlet]=\"template\"></ng-container>\n    }\n  </axp-page-content>\n</axp-page-layout>\n\n<ng-template #template>\n  <!-- Tabs -->\n  <div class=\"ax-px-4\">\n    @if (hasUnread()) {\n      <ax-tabs\n        #tab\n        class=\"ax-text-neutral-400\"\n        [look]=\"'with-line'\"\n        [location]=\"'bottom'\"\n        [fitParent]=\"true\"\n        (onActiveTabChanged)=\"onTabChange($event)\"\n      >\n        <ax-tab-item text=\"All\" [active]=\"activeTab() === 0\">\n          <ax-suffix>\n            <ax-badge\n              [text]=\"totalCount().toString()\"\n              [color]=\"activeTab() === 0 ? 'primary' : 'secondary'\"\n              class=\"ax-min-w-[1.5rem] ax-justify-center\"\n            ></ax-badge>\n          </ax-suffix>\n        </ax-tab-item>\n        <ax-tab-item text=\"Unread\" [active]=\"activeTab() === 1\">\n          <ax-suffix>\n            <ax-badge\n              [text]=\"unreadCount().toString()\"\n              [color]=\"activeTab() === 1 ? 'primary' : 'secondary'\"\n              class=\"ax-min-w-[1.5rem] ax-justify-center\"\n            ></ax-badge>\n          </ax-suffix>\n        </ax-tab-item>\n      </ax-tabs>\n    }\n  </div>\n\n  <!-- Chat List Content -->\n  <div class=\"ax-flex-1 ax-overflow-hidden ax-flex ax-flex-col ax-justify-between\" [class.ax-border-t]=\"hasUnread()\">\n    <!-- Loading State -->\n    @if (isLoading()) {\n      <div class=\"ax-p-4 ax-space-y-4\">\n        @for (_ of [1, 2, 3, 4, 5, 6]; track $index) {\n          <div class=\"ax-flex ax-items-center ax-space-x-3\">\n            <ax-skeleton [animated]=\"true\" class=\"ax-w-12 ax-h-12 ax-rounded-full\"></ax-skeleton>\n            <div class=\"ax-flex-1 ax-space-y-2\">\n              <ax-skeleton [animated]=\"true\" class=\"ax-w-3/4 ax-h-4 ax-rounded-md\"></ax-skeleton>\n              <ax-skeleton [animated]=\"true\" class=\"ax-w-1/2 ax-h-3 ax-rounded-md\"></ax-skeleton>\n            </div>\n          </div>\n        }\n      </div>\n    }\n\n    <!-- Error State -->\n    @if (error()) {\n      <div class=\"ax-flex ax-flex-col ax-items-center ax-justify-center ax-h-full ax-p-4 ax-text-center\">\n        <ax-icon class=\"ax-text-danger ax-text-5xl ax-mb-3\">\n          <i class=\"fa-light fa-circle-exclamation\"></i>\n        </ax-icon>\n        <p class=\"ax-font-semibold ax-text-lg\">\n          {{ 'chat-error' | translate: { scope: 'conversation' } | async }}\n        </p>\n        <p class=\"ax-font-semibold ax-text-lg\">\n          {{ 'chat-try-again' | translate: { scope: 'conversation' } | async }}\n        </p>\n        <p class=\"ax-text-secondary ax-mb-4\">{{ error() }}</p>\n        <ax-button\n          [text]=\"'try-again' | translate: { scope: 'conversation' } | async\"\n          color=\"primary\"\n          (onClick)=\"refreshChat()\"\n        ></ax-button>\n      </div>\n    }\n\n    <!-- Chat List -->\n    @if (!isLoading() && !error()) {\n      <div class=\"ax-flex-1 ax-overflow-y-auto\">\n        @for (i of filteredRooms(); track i.id) {\n          <axm-chat-item\n            [data]=\"i\"\n            [attr.data-id]=\"i.id\"\n            (click)=\"markChatAsRead(i.id)\"\n            [class.ax-bg-dark]=\"selectedRoom()?.id === i.id\"\n            class=\"ax-transition-all ax-duration-100 hover:ax-bg-surface\"\n          ></axm-chat-item>\n        }\n\n        <!-- Empty State -->\n        @empty {\n          <div class=\"ax-p-4 ax-font-medium ax-text-center ax-text-secondary\">\n            @if (isSearching()) {\n              No chats found matching your search\n            } @else {\n              No chats available\n            }\n          </div>\n        }\n      </div>\n    }\n\n    <!-- Footer Content -->\n    <div class=\"ax-border-t ax-border-divider ax-bg-lightest ax-p-4\">\n      <ax-button class=\"ax-w-full\" color=\"primary\" text=\"New Conversation\" (onClick)=\"onNewConversation()\">\n        <ax-prefix>\n          <ax-icon>\n            <i class=\"fa-solid fa-plus\"></i>\n          </ax-icon>\n        </ax-prefix>\n      </ax-button>\n    </div>\n  </div>\n</ng-template>\n" }]
-        }] });
+                    ], animations: [
+                        trigger('fadeIn', [
+                            transition(':enter', [
+                                style({ opacity: 0, transform: 'translateY(10px)' }),
+                                animate('300ms ease-out', style({ opacity: 1, transform: 'translateY(0)' })),
+                            ]),
+                        ]),
+                    ], template: "<axp-page-layout #container>\n  <axp-layout-start-side class=\"ax-border-e ax-lightest-surface ax-h-full\">\n    <axp-layout-header>\n      <axp-layout-title>{{ 'module-name' | translate: { scope: 'conversation' } | async }}</axp-layout-title>\n      <axp-layout-toolbar>\n        <ax-search-box\n          #searchInput\n          look=\"solid\"\n          [placeholder]=\"placeholder()\"\n          [value]=\"searchQuery()\"\n          (onValueChanged)=\"onSearch($event.value)\"\n          class=\"ax-w-full\"\n        >\n          <ax-clear-button></ax-clear-button>\n        </ax-search-box>\n      </axp-layout-toolbar>\n    </axp-layout-header>\n    <axp-layout-content class=\"ax-flex ax-flex-col ax-min-h-0 ax-max-w-80\">\n      @if (!layoutService.isMobileDevice()) {\n        <ng-container [ngTemplateOutlet]=\"template\"></ng-container>\n      }\n    </axp-layout-content>\n  </axp-layout-start-side>\n\n  <axp-page-content style=\"height: calc(100vh - 22rem)\">\n    @if (selectedRoom()) {\n      <router-outlet></router-outlet>\n    } @else if (layoutService.isMobileDevice()) {\n      <ax-search-box\n        #searchInput\n        look=\"solid\"\n        [placeholder]=\"placeholder()\"\n        [value]=\"searchQuery()\"\n        (onValueChanged)=\"onSearch($event.value)\"\n        class=\"ax-w-full\"\n      >\n        <ax-clear-button></ax-clear-button>\n      </ax-search-box>\n      <ng-container [ngTemplateOutlet]=\"template\"></ng-container>\n    }\n  </axp-page-content>\n</axp-page-layout>\n\n<ng-template #template>\n  <!-- Tabs -->\n  <div class=\"ax-px-4\">\n    @if (hasUnread()) {\n      <ax-tabs\n        #tab\n        class=\"ax-text-neutral-400\"\n        [look]=\"'with-line'\"\n        [location]=\"'bottom'\"\n        [fitParent]=\"true\"\n        (onActiveTabChanged)=\"onTabChange($event)\"\n      >\n        <ax-tab-item text=\"All\" [active]=\"activeTab() === 0\">\n          <ax-suffix>\n            <ax-badge\n              [text]=\"totalCount().toString()\"\n              [color]=\"activeTab() === 0 ? 'primary' : 'secondary'\"\n              class=\"ax-min-w-[1.5rem] ax-justify-center\"\n            ></ax-badge>\n          </ax-suffix>\n        </ax-tab-item>\n        <ax-tab-item text=\"Unread\" [active]=\"activeTab() === 1\">\n          <ax-suffix>\n            <ax-badge\n              [text]=\"unreadCount().toString()\"\n              [color]=\"activeTab() === 1 ? 'primary' : 'secondary'\"\n              class=\"ax-min-w-[1.5rem] ax-justify-center\"\n            ></ax-badge>\n          </ax-suffix>\n        </ax-tab-item>\n      </ax-tabs>\n    }\n  </div>\n\n  <!-- Chat List Content -->\n  <div\n    class=\"ax-flex-1 ax-overflow-hidden ax-flex ax-flex-col ax-justify-between ax-min-w-80\"\n    [class.ax-border-t]=\"hasUnread()\"\n  >\n    <!-- Loading State -->\n    @if (isLoading()) {\n      <div class=\"ax-p-4 ax-space-y-4\">\n        @for (_ of [1, 2, 3, 4, 5, 6]; track $index) {\n          <div class=\"ax-flex ax-items-center ax-space-x-3\">\n            <ax-skeleton [animated]=\"true\" class=\"ax-w-12 ax-h-12 ax-rounded-full\"></ax-skeleton>\n            <div class=\"ax-flex-1 ax-space-y-2\">\n              <ax-skeleton [animated]=\"true\" class=\"ax-w-3/4 ax-h-4 ax-rounded-md\"></ax-skeleton>\n              <ax-skeleton [animated]=\"true\" class=\"ax-w-1/2 ax-h-3 ax-rounded-md\"></ax-skeleton>\n            </div>\n          </div>\n        }\n      </div>\n    }\n\n    <!-- Error State -->\n    @if (error()) {\n      <div class=\"ax-flex ax-flex-col ax-items-center ax-justify-center ax-h-full ax-p-4 ax-text-center\">\n        <ax-icon class=\"ax-text-danger ax-text-5xl ax-mb-3\">\n          <i class=\"fa-light fa-circle-exclamation\"></i>\n        </ax-icon>\n        <p class=\"ax-font-semibold ax-text-lg\">\n          {{ 'chat-error' | translate: { scope: 'conversation' } | async }}\n        </p>\n        <p class=\"ax-font-semibold ax-text-lg\">\n          {{ 'chat-try-again' | translate: { scope: 'conversation' } | async }}\n        </p>\n        <p class=\"ax-text-secondary ax-mb-4\">{{ error() }}</p>\n        <ax-button\n          [text]=\"'try-again' | translate: { scope: 'conversation' } | async\"\n          color=\"primary\"\n          (onClick)=\"refreshChat()\"\n        ></ax-button>\n      </div>\n    }\n\n    <!-- Chat List -->\n    @if (!isLoading() && !error()) {\n      <div class=\"ax-flex-1 ax-overflow-y-auto\">\n        @for (i of filteredRooms(); track i.id) {\n          <axm-chat-item\n            [data]=\"i\"\n            [typing]=\"$any(typingStatus()[i.id])?.isTyping || false\"\n            [lastMessageReaction]=\"i.lastMessage?.reactions?.[0]?.type ?? null\"\n            [attr.data-id]=\"i.id\"\n            (click)=\"openChat(i.id)\"\n            [class.ax-bg-dark]=\"selectedRoom()?.id === i.id\"\n            class=\"ax-transition-all ax-duration-100 hover:ax-bg-surface\"\n            [@fadeIn]\n            tabindex=\"0\"\n            (keydown.enter)=\"openChat(i.id)\"\n            role=\"button\"\n          ></axm-chat-item>\n        }\n\n        <!-- Empty State -->\n        @empty {\n          <div class=\"ax-p-4 ax-font-medium ax-text-center ax-text-secondary\">\n            @if (isSearching()) {\n              No chats found matching your search\n            } @else {\n              No chats available\n            }\n          </div>\n        }\n      </div>\n    }\n\n    <!-- Footer Content -->\n    <div class=\"ax-border-t ax-border-divider ax-bg-lightest ax-p-4\">\n      <ax-button class=\"ax-w-full\" color=\"primary\" text=\"New Conversation\" (onClick)=\"onNewConversation()\">\n        <ax-prefix>\n          <ax-icon>\n            <i class=\"fa-solid fa-plus\"></i>\n          </ax-icon>\n        </ax-prefix>\n      </ax-button>\n    </div>\n  </div>\n</ng-template>\n" }]
+        }], propDecorators: { onKeydownHandler: [{
+                type: HostListener,
+                args: ['document:keydown.escape', ['$event']]
+            }] } });
 
 var chat_component = /*#__PURE__*/Object.freeze({
     __proto__: null,
@@ -2188,7 +2481,7 @@ var chat_component = /*#__PURE__*/Object.freeze({
  * @param chatResponse - The response from chat service containing items and total
  * @returns Array of formatted chat preview messages
  */
-function convertToChatPreview(currentUserId, chatResponse) {
+function convertToChatPreview(currentUserId, chatResponse, userName) {
     if (!chatResponse || !chatResponse.items?.length) {
         return [];
     }
@@ -2235,11 +2528,15 @@ function convertToChatPreview(currentUserId, chatResponse) {
             type: messageType,
             content: message.message?.content || '',
             name: name,
+            userName,
         };
         // Add fromId if the message is not from current user
         if (currentUserId !== message.author.id) {
             previewMessage.fromId = message.author?.id;
         }
+        else {
+            previewMessage.showActionButton = true;
+        }
         // Note: Reply information would need to be looked up from the actual messages
         // This would typically be done by the service that has access to all messages
         return previewMessage;
@@ -2250,7 +2547,7 @@ function convertToChatPreview(currentUserId, chatResponse) {
  * @param message - The original message that is being referenced
  * @returns A ChatPreviewMessage formatted for use as a replyTo
  */
-function createReplyPreview(currentUserId, message) {
+function createReplyPreview(currentUserId, message, userName) {
     if (!message)
         return undefined;
     return {
@@ -2267,6 +2564,8 @@ function createReplyPreview(currentUserId, message) {
         content: message.message?.content || '',
         name: message.author?.id || 'Unknown',
         fromId: currentUserId !== message.author.id ? message.author?.id : undefined,
+        showActionButton: true,
+        userName,
     };
 }
 /**
@@ -2458,12 +2757,17 @@ class AXMChatPreviewComponent {
         this.chatService = inject(AXMChatService);
         this.sessionService = inject(AXPSessionService);
         this.toastService = inject(AXToastService);
+        this.inputRef = viewChild(AXConversationInputComponent);
+        this.activeMessage = signal(null);
+        this.typing$ = new Subject();
         this.chatData = signal([]);
+        this.room = signal(null);
         this.isEditing = signal(false);
         this.editId = signal(null);
         this.height = signal(0);
         this.isLoading = signal(false);
         this.error = signal(null);
+        this.isChannel = computed(() => this.room()?.topic === 'channel');
         this.options = signal({
             disabled: false,
             readonly: false,
@@ -2477,11 +2781,38 @@ class AXMChatPreviewComponent {
     ngOnInit() {
         this.activatedRoute.params.subscribe((params) => {
             this.roomId = params['id'];
-            this.loadMessages(this.roomId);
-            // setTimeout(() => {
-            //   this.scrollToEnd();
-            // }, 1000);
+            if (this.roomId) {
+                this.loadMessages(this.roomId);
+                this.loadRoomInfo(this.roomId);
+            }
+        });
+        this.chatService.messageSent$.subscribe(async (message) => {
+            // Only add messages that are not from the current user and belong to the current room
+            if (message.author.id !== this.sessionService.user?.id && message.roomId === this.roomId) {
+                await this.chatService.markSeen(message.id);
+                this.chatData.update((values) => {
+                    const newMessage = convertToChatPreview(this.sessionService.user?.id || '', {
+                        items: [message],
+                        total: 1,
+                    })[0];
+                    return [...values, newMessage];
+                });
+            }
         });
+        // this.typingSubscription = this.typing$.pipe(debounceTime(1000)).subscribe(() => {
+        //   if (this.roomId) {
+        //     this.chatService.stopTyping(this.roomId);
+        //   }
+        // });
+    }
+    ngOnDestroy() {
+        this.typingSubscription?.unsubscribe();
+    }
+    handleTyping(event) {
+        if (this.roomId) {
+            this.chatService.startTyping(this.roomId);
+            this.typing$.next();
+        }
     }
     handleFileChange(event) {
         console.log('File Changed:', event);
@@ -2541,6 +2872,11 @@ class AXMChatPreviewComponent {
             }
         }
     }
+    handleEnter() {
+        if (this.options().value && this.roomId) {
+            this.handleOnSend({ data: { value: this.options().value } });
+        }
+    }
     handleOnAction(e) {
         console.log('Action Triggered:', e);
     }
@@ -2574,10 +2910,20 @@ class AXMChatPreviewComponent {
             this.isLoading.set(false);
         }
     }
-    addItemHandler(e) {
-        if (e.data.fromId) {
-            e.canceled = true;
-            return;
+    async loadRoomInfo(roomId) {
+        try {
+            const roomData = await this.chatService.getRoom(roomId);
+            this.room.set(roomData);
+        }
+        catch (error) {
+            console.error('Failed to load room info:', error);
+        }
+    }
+    addItemHandler(e) {
+        this.activeMessage.set(e.data);
+        if (e.data.fromId) {
+            e.canceled = true;
+            return;
         }
         const userItem = [];
         if (e.data.type === 'text') {
@@ -2590,6 +2936,7 @@ class AXMChatPreviewComponent {
                         this.isEditing.set(true);
                         this.editId.set(e.data.id);
                         this.options.update((prev) => ({ ...prev, value: e.data.content }));
+                        this.addInputOverlay('edit', e.data);
                     }
                     catch (error) {
                         this.toastService.danger('Failed to edit message');
@@ -2619,479 +2966,26 @@ class AXMChatPreviewComponent {
         }
         e.items.push(...userItem);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXMChatPreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: AXMChatPreviewComponent, isStandalone: true, selector: "axm-chat-preview", ngImport: i0, template: "@if (isLoading()) {\n  <div class=\"ax-h-full ax-w-full ax-flex ax-items-center ax-justify-center\">\n    <ax-loading></ax-loading>\n  </div>\n} @else if (error()) {\n  <div class=\"ax-h-full ax-w-full ax-flex ax-items-center ax-justify-center\">\n    <div class=\"ax-text-center\">\n      <p class=\"ax-text-danger\">{{ error() }}</p>\n      <button (click)=\"loadMessages(roomId)\" class=\"ax-mt-2 ax-button ax-primary\">Retry</button>\n    </div>\n  </div>\n} @else {\n  <div\n    axDomChange\n    (axResizeObserver)=\"setHeight($event[0].contentRect.height)\"\n    class=\"ax-bg-surface-container ax-h-full\"\n  >\n    <!-- Messages Container -->\n    <ax-conversation-container class=\"ax-overflow-hidden\" [chatData]=\"chatData()\">\n      <ax-conversation-view\n        (onActionMenuOpening)=\"addItemHandler($event)\"\n        (onAction)=\"handleOnAction($event)\"\n        [chatBoxHeight]=\"height() - 60 + 'px'\"\n      ></ax-conversation-view>\n      <ax-conversation-input\n        class=\"ax-p-1\"\n        placeholder=\"Type a message...\"\n        [(ngModel)]=\"options().value\"\n        (onSendClick)=\"handleOnSend($event)\"\n        (onFileChange)=\"handleFileChange($event)\"\n        (onStopRecording)=\"handleEndRecord($event)\"\n        (onCancelRecording)=\"handleCancelRecord($event)\"\n      ></ax-conversation-input>\n    </ax-conversation-container>\n  </div>\n}\n", styles: [":host{display:block;width:100%;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i13.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i13.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: AXDomChangeDirective, selector: "[axDomChange]", outputs: ["axMutationObserver", "axResizeObserver"] }, { kind: "ngmodule", type: AXConversationModule }, { kind: "component", type: i2$4.AXConversationViewComponent, selector: "ax-conversation-view", inputs: ["chatBoxHeight", "isReplyArrowShown"], outputs: ["onScrollEnd", "onActionMenuOpening", "onAction"] }, { kind: "component", type: i2$4.AXConversationInputComponent, selector: "ax-conversation-input", inputs: ["look", "placeholder", "maxLength", "hasAttachment", "hasVoice", "hasEmoji", "isLoading", "acceptFileType"], outputs: ["onSendClick", "onStartRecording", "onCancelRecording", "onEnterPressed"] }, { kind: "component", type: i2$4.AXConversationContainerComponent, selector: "ax-conversation-container", inputs: ["chatData"] }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "component", type: i8.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXMChatPreviewComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'axm-chat-preview', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule, FormsModule, AXDomChangeDirective, AXConversationModule, AXLoadingModule], template: "@if (isLoading()) {\n  <div class=\"ax-h-full ax-w-full ax-flex ax-items-center ax-justify-center\">\n    <ax-loading></ax-loading>\n  </div>\n} @else if (error()) {\n  <div class=\"ax-h-full ax-w-full ax-flex ax-items-center ax-justify-center\">\n    <div class=\"ax-text-center\">\n      <p class=\"ax-text-danger\">{{ error() }}</p>\n      <button (click)=\"loadMessages(roomId)\" class=\"ax-mt-2 ax-button ax-primary\">Retry</button>\n    </div>\n  </div>\n} @else {\n  <div\n    axDomChange\n    (axResizeObserver)=\"setHeight($event[0].contentRect.height)\"\n    class=\"ax-bg-surface-container ax-h-full\"\n  >\n    <!-- Messages Container -->\n    <ax-conversation-container class=\"ax-overflow-hidden\" [chatData]=\"chatData()\">\n      <ax-conversation-view\n        (onActionMenuOpening)=\"addItemHandler($event)\"\n        (onAction)=\"handleOnAction($event)\"\n        [chatBoxHeight]=\"height() - 60 + 'px'\"\n      ></ax-conversation-view>\n      <ax-conversation-input\n        class=\"ax-p-1\"\n        placeholder=\"Type a message...\"\n        [(ngModel)]=\"options().value\"\n        (onSendClick)=\"handleOnSend($event)\"\n        (onFileChange)=\"handleFileChange($event)\"\n        (onStopRecording)=\"handleEndRecord($event)\"\n        (onCancelRecording)=\"handleCancelRecord($event)\"\n      ></ax-conversation-input>\n    </ax-conversation-container>\n  </div>\n}\n", styles: [":host{display:block;width:100%;height:100%}\n"] }]
-        }] });
-
-var chatPreview_component = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    AXMChatPreviewComponent: AXMChatPreviewComponent
-});
-
-class AXMCommentWidgetViewComponent extends AXPLayoutWidgetComponent {
-    constructor() {
-        super(...arguments);
-        this.hasCooldown = signal(false);
-        this.commentContent = signal('');
-        this.isSubmitting = signal(false);
-        this.isReplyingMode = signal(false);
-        this.isEditingMode = signal(false);
-        this.isLoading = signal(true);
-        this.failedImageIds = signal([]);
-        this.activeReplyComment = signal(undefined);
-        this.activeEditComment = signal(undefined);
-        this.wysiwygEditor = viewChild.required('w');
-        this.commentService = inject(AXMCommentService);
-        this.platform = inject(AXPlatform);
-        this.popupService = inject(AXPopupService);
-        this.toastService = inject(AXToastService);
-        this.dialogService = inject(AXDialogService);
-        this.sanitize = inject(DomSanitizer);
-        this.getPayload = computed(() => ({
-            params: this.payload(),
-            skip: 0,
-            take: 10,
-        }));
-        this.payload = computed(() => ({
-            roomType: 'default',
-            entityId: this.options().entityId,
-            instanceId: this.options().instanceId,
-        }));
-        this.comments = signal([]);
-        this.wysiwyg = viewChild('w');
-        this.wysiwygOptions = signal({
-            look: 'solid',
-        });
-        this.avatarConfig = signal({
-            color: 'primary',
-            look: 'rounded',
-            type: 'solid', // 'image' | 'text' | 'icon' | 'default'
-        });
-        this.validateContent = (content) => {
-            let isValid = true;
-            if (!content || content === '<p><br></p>') {
-                isValid = false;
-            }
-            return {
-                rule: 'callback',
-                result: isValid,
-                message: isValid ? '' : 'Please fill the content',
-                value: content,
-            };
-        };
-    }
-    ngOnInit() {
-        super.ngOnInit();
-        this.loadComments();
-    }
-    sanitizeHtml(htmlContent) {
-        if (!htmlContent)
-            return this.sanitize.bypassSecurityTrustHtml('');
-        return this.sanitize.bypassSecurityTrustHtml(htmlContent);
-    }
-    handleImageError(imageId) {
-        this.failedImageIds.update((ids) => [...ids, imageId]);
-    }
-    checkImageExists(imageId) {
-        return !this.failedImageIds().includes(imageId);
-    }
-    extractInitials(name) {
-        if (!name)
-            return '?';
-        // Handle the case where name is an object with fullName property
-        const nameStr = typeof name === 'object' && name.fullName ? name.fullName : String(name);
-        const words = nameStr.split(' ');
-        const initials = words.map((word) => word.charAt(0).toUpperCase());
-        return initials.join('');
-    }
-    async loadComments() {
-        this.isLoading.set(true);
-        try {
-            const response = await this.commentService.query(this.getPayload());
-            this.comments.set(response.items);
-        }
-        catch (error) {
-            console.error('Failed to load comments:', error);
-            this.toastService.show({
-                content: 'Failed to load comments. Please try again.',
-                color: 'danger',
-                location: 'bottom-center',
-                closeButton: true,
-                timeOut: 3000,
-                timeOutProgress: true,
-            });
-            this.comments.set([]);
-        }
-        finally {
-            setTimeout(() => {
-                this.isLoading.set(false);
-            }, 250);
-        }
-    }
-    editMessage(comment, reply) {
-        this.isReplyingMode.set(false);
-        this.activeReplyComment.set(undefined);
-        this.isEditingMode.set(true);
-        this.activeEditComment.set(comment);
-        const contentToEdit = reply ? reply.message?.content : comment.message?.content;
-        this.commentContent.set(contentToEdit || '');
-        this.wysiwygEditor().getHostElement().scrollIntoView({ behavior: 'smooth', block: 'start' });
-    }
-    replyMessage(comment, reply) {
-        this.isEditingMode.set(false);
-        this.activeEditComment.set(undefined);
-        this.isReplyingMode.set(true);
-        this.activeReplyComment.set(comment);
-        if (reply) {
-            const author = reply.author.fullName || reply.author.id;
-            const mention = `<a data-id="${reply.id}">@${author}</a> `;
-            this.commentContent.set(mention);
-            this.wysiwyg()?.focus();
-            document.getElementsByClassName('ql-editor')[0].innerHTML = mention;
-        }
-        this.wysiwygEditor().getHostElement().scrollIntoView({ behavior: 'smooth', block: 'start' });
-    }
-    async deleteComment(comment) {
-        const dialog = this.dialogService.open({
-            icon: 'fa-regular fa-warning',
-            content: 'Are you sure you want to delete this comment?',
-            title: 'Delete Comment',
-            type: 'danger',
-            orientation: 'horizontal',
-            buttons: [
-                {
-                    text: 'Delete',
-                    color: 'danger',
-                    onClick: async (e) => {
-                        e.handled = true;
-                        e.source.text = 'Deleting...';
-                        e.source.disabled = true;
-                        e.source.loading = true;
-                        try {
-                            if (comment.id) {
-                                await this.commentService.deleteOne(comment.id);
-                                this.removeMessageById(comment.id);
-                                this.toastService.show({
-                                    content: 'Comment deleted successfully.',
-                                    color: 'success',
-                                    location: 'bottom-center',
-                                    closeButton: true,
-                                    timeOut: 3000,
-                                    timeOutProgress: true,
-                                });
-                                if (this.isEditingMode() && this.activeEditComment()?.id === comment.id) {
-                                    this.resetReplyEditState();
-                                }
-                                dialog.close();
-                            }
-                        }
-                        catch (error) {
-                            this.toastService.show({
-                                content: typeof error === 'string' ? error : 'Failed to delete comment!',
-                                color: 'danger',
-                                location: 'bottom-center',
-                                closeButton: true,
-                                timeOut: 3000,
-                                timeOutProgress: true,
-                            });
-                        }
-                    },
-                },
-                {
-                    text: 'Cancel',
-                    color: 'default',
-                    autofocus: true,
-                    onClick: (e) => {
-                        dialog.close();
-                    },
-                },
-            ],
-            closeButton: false,
-        });
-    }
-    async deleteReply(comment, reply) {
-        const dialog = this.dialogService.open({
-            icon: 'fa-regular fa-warning',
-            content: 'Are you sure you want to delete this reply?',
-            title: 'Delete Reply',
-            type: 'danger',
-            orientation: 'horizontal',
-            buttons: [
-                {
-                    text: 'Delete',
-                    color: 'danger',
-                    onClick: async (e) => {
-                        e.handled = true;
-                        e.source.text = 'Deleting...';
-                        e.source.disabled = true;
-                        e.source.loading = true;
-                        try {
-                            if (reply.id) {
-                                await this.commentService.deleteOne(reply.id);
-                                this.removeMessageById(comment.id, reply.id);
-                                this.toastService.show({
-                                    content: 'Comment deleted successfully.',
-                                    color: 'success',
-                                    location: 'bottom-center',
-                                    closeButton: true,
-                                    timeOut: 3000,
-                                    timeOutProgress: true,
-                                });
-                                dialog.close();
-                            }
-                        }
-                        catch (error) {
-                            this.toastService.show({
-                                content: typeof error === 'string' ? error : 'Failed to delete comment!',
-                                color: 'danger',
-                                location: 'bottom-center',
-                                closeButton: true,
-                                timeOut: 3000,
-                                timeOutProgress: true,
-                            });
-                        }
-                    },
-                },
-                {
-                    text: 'Cancel',
-                    color: 'default',
-                    autofocus: true,
-                    onClick: (e) => {
-                        dialog.close();
-                    },
-                },
-            ],
-            closeButton: false,
-        });
-    }
-    resetReplyEditState() {
-        this.isEditingMode.set(false);
-        this.activeEditComment.set(undefined);
-        this.isReplyingMode.set(false);
-        this.activeReplyComment.set(undefined);
-        this.commentContent.set('');
-        document.getElementsByClassName('ql-editor')[0].innerHTML = '';
-    }
-    async toggleLike(comment, reply) {
-        try {
-            if (reply) {
-                if (reply.id) {
-                    this.updateLikeStatus(comment.id, reply.id);
-                    await this.commentService.like(reply.id);
-                }
-            }
-            else {
-                if (comment.id) {
-                    this.updateLikeStatus(comment.id);
-                    await this.commentService.like(comment.id);
-                }
-            }
-        }
-        catch (error) {
-            console.error('Failed to toggle like:', error);
-            // Revert the optimistic update if the server call fails
-            if (reply && reply.id) {
-                this.updateLikeStatus(comment.id, reply.id);
-            }
-            else if (comment.id) {
-                this.updateLikeStatus(comment.id);
-            }
-        }
-    }
-    updateLikeStatus(commentId, replyId) {
-        this.comments.update((commentsList) => {
-            return commentsList.map((comment) => {
-                if (comment.id === commentId) {
-                    if (replyId && comment.replies) {
-                        const updatedReplies = comment.replies.map((reply) => reply.id === replyId
-                            ? {
-                                ...reply,
-                                isLiked: !reply.isLiked,
-                                reactionsCount: reply.isLiked && reply.reactionsCount !== undefined
-                                    ? reply.reactionsCount - 1
-                                    : (reply.reactionsCount || 0) + 1,
-                            }
-                            : reply);
-                        return {
-                            ...comment,
-                            replies: updatedReplies,
-                        };
-                    }
-                    else {
-                        return {
-                            ...comment,
-                            isLiked: !comment.isLiked,
-                            reactionsCount: comment.isLiked && comment.reactionsCount !== undefined
-                                ? comment.reactionsCount - 1
-                                : (comment.reactionsCount || 0) + 1,
-                        };
-                    }
-                }
-                return comment;
-            });
-        });
-    }
-    removeMessageById(commentId, replyId) {
-        if (replyId) {
-            // Remove a reply from a comment
-            this.comments.update((commentsList) => commentsList.map((comment) => {
-                if (comment.id === commentId && comment.replies) {
-                    return {
-                        ...comment,
-                        replies: comment.replies.filter((reply) => reply.id !== replyId),
-                    };
-                }
-                return comment;
-            }));
-        }
-        else {
-            // Remove a whole comment
-            this.comments.update((commentsList) => commentsList.filter((comment) => comment.id !== commentId));
+    addInputOverlay(type, message) {
+        const input = this.inputRef();
+        const icon = type === 'reply' ? 'fa-solid fa-reply' : 'fa-solid fa-pencil';
+        if (input) {
+            input.setActionBoxContainer(icon, message?.content || this.activeMessage()?.content || '');
         }
     }
-    async submitComment(isPrivate = false) {
-        if (!this.validateContent(this.commentContent()).result) {
-            return;
-        }
-        this.isSubmitting.set(true);
-        let memberLookup;
-        if (isPrivate) {
-            const popupConfig = {
-                header: true,
-                size: 'md',
-                draggable: true,
-                hasBackdrop: true,
-                closeButton: true,
-                closeOnBackdropClick: false,
-            };
-            const popup = await this.popupService.open(AXMCommentLookupPopup, popupConfig);
-            memberLookup = popup.data?.data?.lookup;
-        }
-        try {
-            if (this.isEditingMode() && this.activeEditComment()?.id) {
-                const payload = {
-                    message: {
-                        content: this.commentContent(),
-                        contentType: 'text',
-                    },
-                };
-                await this.commentService.updateOne(this.activeEditComment().id, payload);
-                this.hasCooldown.set(true);
-                this.isEditingMode.set(false);
-                this.activeEditComment.set(undefined);
-            }
-            else {
-                const payload = {
-                    ...this.payload(),
-                    content: this.commentContent(),
-                    contentType: 'text',
-                    isPrivate: isPrivate,
-                    replyId: this.activeReplyComment()?.id ?? null,
-                };
-                await this.commentService.insertOne(payload);
-                this.hasCooldown.set(true);
-                this.isReplyingMode.set(false);
-                this.activeReplyComment.set(undefined);
-            }
-            // Reload comments to get the updated list with proper hierarchy
-            const response = await this.commentService.query(this.getPayload());
-            this.comments.set(response.items);
-            this.commentContent.set('');
-            document.getElementsByClassName('ql-editor')[0].innerHTML = '';
-            setTimeout(() => {
-                this.hasCooldown.set(false);
-            }, 1000);
-        }
-        catch (error) {
-            console.error('Error submitting comment:', error);
-            this.toastService.show({
-                content: typeof error === 'string' ? error : 'Failed to submit comment. Please try again.',
-                color: 'danger',
-                location: 'bottom-center',
-                closeButton: true,
-                timeOut: 3000,
-                timeOutProgress: true,
-            });
-        }
-        finally {
-            this.isSubmitting.set(false);
-        }
-    }
-    scrollMain() {
-        const comment = this.isReplyingMode() ? this.activeReplyComment() : this.activeEditComment();
-        if (comment && comment.id) {
-            const el = document.getElementById(comment.id);
-            if (el) {
-                el.scrollIntoView({ behavior: 'smooth', block: 'center' });
-                const content = el?.firstElementChild?.children[1];
-                if (content) {
-                    const prevBg = content.style.background;
-                    content.style.borderRadius = '0.25rem';
-                    content.style.transition = 'background 1s ease-in-out';
-                    content.style.background = `rgba(var(--ax-color-on-surface), var(--tw-bg-opacity))`;
-                    setTimeout(() => {
-                        content.style.background = prevBg || 'rgba(0, 0, 0, 0)';
-                    }, 1000);
-                }
-            }
-        }
-    }
-    calcDefrenetTime(date) {
-        return date ? Date.now() - date.getTime() : undefined;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXMCommentWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: AXMCommentWidgetViewComponent, isStandalone: true, selector: "axm-comment-widget-view", viewQueries: [{ propertyName: "wysiwygEditor", first: true, predicate: ["w"], descendants: true, isSignal: true }, { propertyName: "wysiwyg", first: true, predicate: ["w"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-mt-2 ax-p-2\">\n  <ax-comment-container>\n    @if (isLoading()) {\n      <div class=\"ax-flex ax-items-center ax-py-12 ax-bg-lightest ax-px-5\">\n        <ax-skeleton class=\"ax-min-w-16 ax-h-16 ax-rounded-full ax-me-4\"></ax-skeleton>\n        <div class=\"ax-flex ax-flex-col ax-gap-2 ax-w-full\">\n          <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded\"></ax-skeleton>\n          <ax-skeleton class=\"ax-w-full ax-h-2 ax-rounded-full\"></ax-skeleton>\n          <ax-skeleton class=\"ax-w-full ax-h-2 ax-rounded-full\"></ax-skeleton>\n          <ax-skeleton class=\"ax-w-8/12 ax-h-2 ax-rounded-full\"></ax-skeleton>\n        </div>\n      </div>\n    } @else if (!isLoading() && comments().length > 0) {\n      <ax-comment-view class=\"ax-bg-lightest\">\n        @for (comment of comments(); track comment.id) {\n          <ax-comment-item [id]=\"comment.id!\" [replyCount]=\"comment.replies?.length ?? 0\">\n            <ax-avatar [color]=\"avatarConfig().color\" [shape]=\"avatarConfig().look\">\n              @if (checkImageExists(comment.id!) && comment.author && extractInitials(comment.author) !== '?') {\n                <ax-image (onError)=\"handleImageError(comment.id!)\" [src]=\"''\">\n                  <ax-loading></ax-loading>\n                </ax-image>\n              } @else {\n                <ax-text>\n                  <span class=\"ax-text-base ax-overflow-hidden\">{{ extractInitials(comment.author) }}</span>\n                </ax-text>\n              }\n            </ax-avatar>\n            <ax-title>{{ extractInitials(comment.author) }}</ax-title>\n            <ax-comment-date>{{ calcDefrenetTime(comment.createdAt) | format: 'timeleft' | async }} </ax-comment-date>\n            <ax-comment-menu-options>\n              <ax-button class=\"ax-sm\" look=\"blank\" color=\"neutral\">\n                <ax-icon icon=\"ax-icon ax-icon-solid ax-icon-more-horizontal\"></ax-icon>\n              </ax-button>\n\n              <ax-dropdown-panel>\n                <ax-button-item-list>\n                  <ax-button-item text=\"Edit\" color=\"neutral\" (click)=\"editMessage(comment)\">\n                    <ax-prefix>\n                      <ax-icon icon=\"fa-solid fa-edit\"></ax-icon>\n                    </ax-prefix>\n                  </ax-button-item>\n\n                  <ax-button-item text=\"Delete\" color=\"danger\" (click)=\"deleteComment(comment)\">\n                    <ax-prefix>\n                      <ax-icon icon=\"fa-solid fa-trash-can\"></ax-icon>\n                    </ax-prefix>\n                  </ax-button-item>\n                </ax-button-item-list>\n              </ax-dropdown-panel>\n            </ax-comment-menu-options>\n            <ax-content [innerHTML]=\"sanitizeHtml(comment.message.content)\"></ax-content>\n            <ax-comment-like (click)=\"toggleLike(comment)\" [liked]=\"comment.isLiked!\">\n              {{ comment.reactionsCount }}\n            </ax-comment-like>\n            <ax-comment-reply-text (click)=\"replyMessage(comment)\"></ax-comment-reply-text>\n            @for (reply of comment.replies; track reply.id) {\n              <ax-comment-item [id]=\"reply.id\">\n                <ax-avatar [color]=\"avatarConfig().color\" [shape]=\"avatarConfig().look\">\n                  @if (reply && checkImageExists(reply.id!) && reply.author && extractInitials(reply.author) !== '?') {\n                    <ax-image (onError)=\"handleImageError(reply.id!)\" [src]=\"''\">\n                      <ax-loading></ax-loading>\n                    </ax-image>\n                  } @else {\n                    <ax-text>\n                      <span class=\"ax-text-base ax-overflow-hidden\">{{ extractInitials(reply.author) }}</span>\n                    </ax-text>\n                  }\n                </ax-avatar>\n                <ax-title>{{ extractInitials(reply.author) }}</ax-title>\n                <ax-comment-date>{{ calcDefrenetTime(reply.createdAt) | format: 'timeleft' | async }} </ax-comment-date>\n                <ax-comment-menu-options>\n                  <ax-button class=\"ax-sm\" look=\"blank\" color=\"neutral\">\n                    <ax-icon icon=\"ax-icon ax-icon-solid ax-icon-more-horizontal\"></ax-icon>\n                  </ax-button>\n\n                  <ax-dropdown-panel>\n                    <ax-button-item-list>\n                      <ax-button-item text=\"Edit\" color=\"neutral\" (click)=\"editMessage(comment, reply)\">\n                        <ax-prefix>\n                          <ax-icon icon=\"fa-solid fa-edit\"></ax-icon>\n                        </ax-prefix>\n                      </ax-button-item>\n                      <ax-button-item text=\"Delete\" color=\"danger\" (click)=\"deleteReply(comment, reply)\">\n                        <ax-prefix>\n                          <ax-icon icon=\"fa-solid fa-trash-can\"></ax-icon>\n                        </ax-prefix>\n                      </ax-button-item>\n                    </ax-button-item-list>\n                  </ax-dropdown-panel>\n                </ax-comment-menu-options>\n                <ax-content [innerHTML]=\"sanitizeHtml(reply.message.content)\"></ax-content>\n                <ax-comment-like (click)=\"toggleLike(comment, reply)\" [liked]=\"reply.isLiked!\">\n                  {{ reply.reactionsCount }}\n                </ax-comment-like>\n                <ax-comment-reply-text (click)=\"replyMessage(comment, reply)\"></ax-comment-reply-text>\n              </ax-comment-item>\n            }\n          </ax-comment-item>\n        }\n      </ax-comment-view>\n    } @else {\n      <div>\n        <div class=\"ax-flex ax-flex-col ax-gap-4 ax-justify-center ax-items-center ax-p-10\">\n          <svg\n            class=\"ax-mx-auto\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"154\"\n            height=\"161\"\n            viewBox=\"0 0 154 161\"\n            fill=\"none\"\n          >\n            <path\n              d=\"M0.0616455 84.4268C0.0616455 42.0213 34.435 7.83765 76.6507 7.83765C118.803 7.83765 153.224 42.0055 153.224 84.4268C153.224 102.42 147.026 118.974 136.622 132.034C122.282 150.138 100.367 161 76.6507 161C52.7759 161 30.9882 150.059 16.6633 132.034C6.25961 118.974 0.0616455 102.42 0.0616455 84.4268Z\"\n              fill=\"#EEF2FF\"\n            />\n            <path\n              d=\"M96.8189 0.632498L96.8189 0.632384L96.8083 0.630954C96.2034 0.549581 95.5931 0.5 94.9787 0.5H29.338C22.7112 0.5 17.3394 5.84455 17.3394 12.4473V142.715C17.3394 149.318 22.7112 154.662 29.338 154.662H123.948C130.591 154.662 135.946 149.317 135.946 142.715V38.9309C135.946 38.0244 135.847 37.1334 135.648 36.2586L135.648 36.2584C135.117 33.9309 133.874 31.7686 132.066 30.1333C132.066 30.1331 132.065 30.1329 132.065 30.1327L103.068 3.65203C103.068 3.6519 103.067 3.65177 103.067 3.65164C101.311 2.03526 99.1396 0.995552 96.8189 0.632498Z\"\n              fill=\"white\"\n              stroke=\"#E5E7EB\"\n            />\n            <ellipse cx=\"80.0618\" cy=\"81\" rx=\"28.0342\" ry=\"28.0342\" fill=\"#EEF2FF\" />\n            <path\n              d=\"M99.2393 61.3061L99.2391 61.3058C88.498 50.5808 71.1092 50.5804 60.3835 61.3061C49.6423 72.0316 49.6422 89.4361 60.3832 100.162C71.109 110.903 88.4982 110.903 99.2393 100.162C109.965 89.4363 109.965 72.0317 99.2393 61.3061ZM105.863 54.6832C120.249 69.0695 120.249 92.3985 105.863 106.785C91.4605 121.171 68.1468 121.171 53.7446 106.785C39.3582 92.3987 39.3582 69.0693 53.7446 54.683C68.1468 40.2965 91.4605 40.2966 105.863 54.6832Z\"\n              stroke=\"#E5E7EB\"\n            />\n            <path\n              d=\"M110.782 119.267L102.016 110.492C104.888 108.267 107.476 105.651 109.564 102.955L118.329 111.729L110.782 119.267Z\"\n              stroke=\"#E5E7EB\"\n            />\n            <path\n              d=\"M139.122 125.781L139.122 125.78L123.313 109.988C123.313 109.987 123.313 109.987 123.312 109.986C121.996 108.653 119.849 108.657 118.521 109.985L118.871 110.335L118.521 109.985L109.047 119.459C107.731 120.775 107.735 122.918 109.044 124.247L109.047 124.249L124.858 140.06C128.789 143.992 135.191 143.992 139.122 140.06C143.069 136.113 143.069 129.728 139.122 125.781Z\"\n              fill=\"#A5B4FC\"\n              stroke=\"#818CF8\"\n            />\n            <path\n              d=\"M83.185 87.2285C82.5387 87.2285 82.0027 86.6926 82.0027 86.0305C82.0027 83.3821 77.9987 83.3821 77.9987 86.0305C77.9987 86.6926 77.4627 87.2285 76.8006 87.2285C76.1543 87.2285 75.6183 86.6926 75.6183 86.0305C75.6183 80.2294 84.3831 80.2451 84.3831 86.0305C84.3831 86.6926 83.8471 87.2285 83.185 87.2285Z\"\n              fill=\"#4F46E5\"\n            />\n            <path\n              d=\"M93.3528 77.0926H88.403C87.7409 77.0926 87.2049 76.5567 87.2049 75.8946C87.2049 75.2483 87.7409 74.7123 88.403 74.7123H93.3528C94.0149 74.7123 94.5509 75.2483 94.5509 75.8946C94.5509 76.5567 94.0149 77.0926 93.3528 77.0926Z\"\n              fill=\"#4F46E5\"\n            />\n            <path\n              d=\"M71.5987 77.0925H66.6488C65.9867 77.0925 65.4507 76.5565 65.4507 75.8945C65.4507 75.2481 65.9867 74.7122 66.6488 74.7122H71.5987C72.245 74.7122 72.781 75.2481 72.781 75.8945C72.781 76.5565 72.245 77.0925 71.5987 77.0925Z\"\n              fill=\"#4F46E5\"\n            />\n            <rect x=\"38.3522\" y=\"21.5128\" width=\"41.0256\" height=\"2.73504\" rx=\"1.36752\" fill=\"#4F46E5\" />\n            <rect x=\"38.3522\" y=\"133.65\" width=\"54.7009\" height=\"5.47009\" rx=\"2.73504\" fill=\"#A5B4FC\" />\n            <rect x=\"38.3522\" y=\"29.7179\" width=\"13.6752\" height=\"2.73504\" rx=\"1.36752\" fill=\"#4F46E5\" />\n            <circle cx=\"56.13\" cy=\"31.0854\" r=\"1.36752\" fill=\"#4F46E5\" />\n            <circle cx=\"61.6001\" cy=\"31.0854\" r=\"1.36752\" fill=\"#4F46E5\" />\n            <circle cx=\"67.0702\" cy=\"31.0854\" r=\"1.36752\" fill=\"#4F46E5\" />\n          </svg>\n          <div>\n            <h2 class=\"ax-text-center ax-text-neutral-600 ax-font-semibold ax-leading-loose ax-pb-2\">\n              There is no Comment!\n            </h2>\n          </div>\n        </div>\n      </div>\n    }\n  </ax-comment-container>\n  <ax-form>\n    <ax-form-field>\n      <div>\n        @if (isReplyingMode() || isEditingMode()) {\n          <div\n            class=\"ax-flex ax-justify-between ax-rounded-b-none ax-border ax-border-b-0 ax-rounded-lg ax-bg-on-surface ax-px-6 ax-py-3 ax-w-full ax-items-center ax-overflow-hidden ax-text-sm ax-leading-none\"\n          >\n            <div (click)=\"scrollMain()\" class=\"ax-flex ax-justify-start ax-items-center ax-cursor-pointer\">\n              <i\n                [class]=\"isReplyingMode() ? 'fa-reply' : 'fa-pen'\"\n                class=\"fa-solid ax-text-primary-500 dark:ax-text-primary-300 ax-text-2xl ax-me-4\"\n              ></i>\n              <div\n                class=\"ax-flex ax-flex-col ax-gap-2 ax-justify-between ax-align-middle ax-leading-4 ax-overflow-hidden\"\n              >\n                <p class=\"ax-text-primary-500 dark:ax-text-primary-300\">\n                  {{ isReplyingMode() ? 'Reply to ' : 'Edit Message' }}\n                  <span class=\"ax-font-bold\">\n                    {{ isReplyingMode() ? extractInitials(activeReplyComment()?.author) : '' }}\n                  </span>\n                </p>\n                <div\n                  class=\"ax-truncate\"\n                  [innerHTML]=\"\n                    isReplyingMode()\n                      ? sanitizeHtml(activeReplyComment()?.message?.content ?? '')\n                      : sanitizeHtml(activeEditComment()?.message?.content ?? '')\n                  \"\n                ></div>\n              </div>\n            </div>\n            <div><i (click)=\"resetReplyEditState()\" class=\"fa-solid ax-text-2xl fa-xmark ax-cursor-pointer\"></i></div>\n          </div>\n        }\n        <ax-wysiwyg-container #w [look]=\"wysiwygOptions().look\" [(ngModel)]=\"commentContent\">\n          <ax-wysiwyg-view class=\"ax-min-h-28\"></ax-wysiwyg-view>\n          <ax-toolbar>\n            <ax-content>\n              <ax-wysiwyg-history></ax-wysiwyg-history>\n              <ax-wysiwyg-font-style></ax-wysiwyg-font-style>\n              <ax-wysiwyg-colors></ax-wysiwyg-colors>\n              <ax-wysiwyg-list></ax-wysiwyg-list>\n              <ax-wysiwyg-alignment></ax-wysiwyg-alignment>\n            </ax-content>\n            <ax-suffix>\n              <ax-dropdown-button\n                [disabled]=\"hasCooldown()\"\n                type=\"submit\"\n                color=\"primary\"\n                mode=\"split\"\n                text=\"Send\"\n                (onClick)=\"submitComment()\"\n              >\n                @if (isSubmitting()) {\n                  <ax-loading></ax-loading>\n                }\n                <ax-button-item-list>\n                  <ax-button-item (click)=\"submitComment(true)\" text=\"Send Private ...\" name=\"private\" data=\"private\">\n                    <ax-prefix>\n                      <ax-icon icon=\"fa-regular fa-user-secret\"></ax-icon>\n                    </ax-prefix>\n                  </ax-button-item>\n                </ax-button-item-list>\n              </ax-dropdown-button>\n            </ax-suffix>\n          </ax-toolbar>\n          <ax-validation-rule rule=\"callback\" [options]=\"{ validate: validateContent }\"></ax-validation-rule>\n        </ax-wysiwyg-container>\n      </div>\n    </ax-form-field>\n  </ax-form>\n</div>\n", styles: ["ax-wysiwyg-container .ax-editor-container{border-top-left-radius:0!important;border-top-right-radius:0!important}ax-wysiwyg-container .ax-error-message{padding-left:.5rem}\n"], dependencies: [{ kind: "component", type: AXWysiwygContainerComponent, selector: "ax-wysiwyg-container", inputs: ["look", "placeHolder"], outputs: ["onValueChanged"] }, { kind: "ngmodule", type: AXAvatarModule }, { kind: "component", type: i6.AXAvatarComponent, selector: "ax-avatar", inputs: ["color", "size", "shape", "look"], outputs: ["sizeChange"] }, { kind: "ngmodule", type: AXConversationModule }, { kind: "ngmodule", type: AXSkeletonModule }, { kind: "component", type: i2$1.AXSkeletonComponent, selector: "ax-skeleton", inputs: ["animated"] }, { kind: "ngmodule", type: AXCommentModule }, { kind: "component", type: i4.AXCommentViewComponent, selector: "ax-comment-view" }, { kind: "component", type: i4.AXCommentContainerComponent, selector: "ax-comment-container" }, { kind: "component", type: i4.AxCommentItemComponent, selector: "ax-comment-item", inputs: ["replyCount"] }, { kind: "component", type: i4.AXCommentLikeComponent, selector: "ax-comment-like", inputs: ["liked"], outputs: ["likedChange", "onLiked"] }, { kind: "component", type: i4.AXMenuOptionsComponent, selector: "ax-comment-menu-options" }, { kind: "component", type: i4.AXCommentReplyTextComponent, selector: "ax-comment-reply-text" }, { kind: "component", type: i4.AXCommentDateComponent, selector: "ax-comment-date" }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i5$1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: i5$1.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i5$1.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXImageModule }, { kind: "component", type: i7.AXImageComponent, selector: "ax-image", inputs: ["width", "height", "overlayMode", "src", "alt", "priority", "lazy"], outputs: ["onLoad", "onError"] }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "component", type: i8.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "component", type: i9.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "placement", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i5.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i5.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXWysiwygModule }, { kind: "component", type: i1.AXWysiwygViewComponent, selector: "ax-wysiwyg-view", inputs: ["class"] }, { kind: "component", type: i1.AXWysiwygAlignmentComponent, selector: "ax-wysiwyg-alignment" }, { kind: "component", type: i1.AXWysiwygColorsComponent, selector: "ax-wysiwyg-colors" }, { kind: "component", type: i1.AXWysiwygFontStyleComponent, selector: "ax-wysiwyg-font-style" }, { kind: "component", type: i1.AXWysiwygHistoryComponent, selector: "ax-wysiwyg-history" }, { kind: "component", type: i1.AXWysiwygListComponent, selector: "ax-wysiwyg-list" }, { kind: "ngmodule", type: AXToolBarModule }, { kind: "component", type: i12.AXToolBarComponent, selector: "ax-toolbar" }, { kind: "ngmodule", type: AXDropdownButtonModule }, { kind: "component", type: i14.AXDropdownButtonComponent, selector: "ax-dropdown-button", inputs: ["disabled", "size", "color", "look", "text", "type", "mode"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "lookChange", "colorChange", "disabledChange"] }, { kind: "ngmodule", type: AXValidationModule }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: AXFormModule }, { kind: "component", type: i11.AXFormFieldComponent, selector: "ax-form-field", inputs: ["labelMode"] }, { kind: "component", type: i11.AXFormComponent, selector: "ax-form", inputs: ["labelMode", "look", "messageStyle", "updateOn"], outputs: ["onValidate", "updateOnChange"] }, { kind: "directive", type: i11.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i13.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i13.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXFormatModule }, { kind: "pipe", type: i10.AXFormatPipe, name: "format" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: AXMChatPreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: AXMChatPreviewComponent, isStandalone: true, selector: "axm-chat-preview", viewQueries: [{ propertyName: "inputRef", first: true, predicate: AXConversationInputComponent, descendants: true, isSignal: true }], ngImport: i0, template: "@if (isLoading()) {\n  <div class=\"ax-h-full ax-w-full ax-flex ax-items-center ax-justify-center\">\n    <ax-loading></ax-loading>\n  </div>\n} @else if (error()) {\n  <div class=\"ax-h-full ax-w-full ax-flex ax-items-center ax-justify-center\">\n    <div class=\"ax-text-center\">\n      <p class=\"ax-text-danger\">{{ error() }}</p>\n      <button (click)=\"loadMessages(roomId)\" class=\"ax-mt-2 ax-button ax-primary\">Retry</button>\n    </div>\n  </div>\n} @else {\n  <div\n    axDomChange\n    (axResizeObserver)=\"setHeight($event[0].contentRect.height)\"\n    class=\"ax-bg-surface-container ax-h-full\"\n  >\n    <!-- Messages Container -->\n    <ax-conversation-container class=\"ax-overflow-hidden\" [chatData]=\"chatData()\">\n      <ax-conversation-view\n        (onActionMenuOpening)=\"addItemHandler($event)\"\n        (onAction)=\"handleOnAction($event)\"\n        (onReplyClick)=\"addInputOverlay('reply', $event.data)\"\n        [chatBoxHeight]=\"height() - 60 + 'px'\"\n      ></ax-conversation-view>\n      @if (!isChannel()) {\n        <ax-conversation-input\n          class=\"ax-p-1\"\n          placeholder=\"Type a message...\"\n          [(ngModel)]=\"options().value\"\n          (ngModelChange)=\"handleTyping($event)\"\n          (onSendClick)=\"handleOnSend($event)\"\n          (onFileChange)=\"handleFileChange($event)\"\n          (onStopRecording)=\"handleEndRecord($event)\"\n          (onCancelRecording)=\"handleCancelRecord($event)\"\n          (onEnterPressed)=\"handleEnter()\"\n        ></ax-conversation-input>\n      }\n    </ax-conversation-container>\n  </div>\n}\n", styles: [":host{display:block;width:100%;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i11.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i11.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: AXDomChangeDirective, selector: "[axDomChange]", outputs: ["axMutationObserver", "axResizeObserver"] }, { kind: "ngmodule", type: AXConversationModule }, { kind: "component", type: i2$4.AXConversationViewComponent, selector: "ax-conversation-view", inputs: ["chatBoxHeight", "isReplyArrowShown", "avatar"], outputs: ["onScrollEnd", "onActionMenuOpening", "onAction", "onReplyClick"] }, { kind: "component", type: i2$4.AXConversationInputComponent, selector: "ax-conversation-input", inputs: ["look", "placeholder", "maxLength", "hasAttachment", "hasVoice", "hasEmoji", "isLoading", "acceptFileType"], outputs: ["onSendClick", "onStartRecording", "onCancelRecording", "onEnterPressed"] }, { kind: "component", type: i2$4.AXConversationContainerComponent, selector: "ax-conversation-container", inputs: ["chatData"] }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "component", type: i6.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXMCommentWidgetViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: AXMChatPreviewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'axm-comment-widget-view', imports: [
-                        AXWysiwygContainerComponent,
-                        AXAvatarModule,
-                        AXConversationModule,
-                        AXSkeletonModule,
-                        AXCommentModule,
-                        AXButtonModule,
-                        AXImageModule,
-                        AXLoadingModule,
-                        AXDropdownModule,
-                        AXDecoratorModule,
-                        AXWysiwygModule,
-                        AXToolBarModule,
-                        AXDropdownModule,
-                        AXDropdownButtonModule,
-                        AXValidationModule,
-                        AsyncPipe,
-                        AXFormModule,
-                        FormsModule,
-                        AXFormatModule,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ax-mt-2 ax-p-2\">\n  <ax-comment-container>\n    @if (isLoading()) {\n      <div class=\"ax-flex ax-items-center ax-py-12 ax-bg-lightest ax-px-5\">\n        <ax-skeleton class=\"ax-min-w-16 ax-h-16 ax-rounded-full ax-me-4\"></ax-skeleton>\n        <div class=\"ax-flex ax-flex-col ax-gap-2 ax-w-full\">\n          <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded\"></ax-skeleton>\n          <ax-skeleton class=\"ax-w-full ax-h-2 ax-rounded-full\"></ax-skeleton>\n          <ax-skeleton class=\"ax-w-full ax-h-2 ax-rounded-full\"></ax-skeleton>\n          <ax-skeleton class=\"ax-w-8/12 ax-h-2 ax-rounded-full\"></ax-skeleton>\n        </div>\n      </div>\n    } @else if (!isLoading() && comments().length > 0) {\n      <ax-comment-view class=\"ax-bg-lightest\">\n        @for (comment of comments(); track comment.id) {\n          <ax-comment-item [id]=\"comment.id!\" [replyCount]=\"comment.replies?.length ?? 0\">\n            <ax-avatar [color]=\"avatarConfig().color\" [shape]=\"avatarConfig().look\">\n              @if (checkImageExists(comment.id!) && comment.author && extractInitials(comment.author) !== '?') {\n                <ax-image (onError)=\"handleImageError(comment.id!)\" [src]=\"''\">\n                  <ax-loading></ax-loading>\n                </ax-image>\n              } @else {\n                <ax-text>\n                  <span class=\"ax-text-base ax-overflow-hidden\">{{ extractInitials(comment.author) }}</span>\n                </ax-text>\n              }\n            </ax-avatar>\n            <ax-title>{{ extractInitials(comment.author) }}</ax-title>\n            <ax-comment-date>{{ calcDefrenetTime(comment.createdAt) | format: 'timeleft' | async }} </ax-comment-date>\n            <ax-comment-menu-options>\n              <ax-button class=\"ax-sm\" look=\"blank\" color=\"neutral\">\n                <ax-icon icon=\"ax-icon ax-icon-solid ax-icon-more-horizontal\"></ax-icon>\n              </ax-button>\n\n              <ax-dropdown-panel>\n                <ax-button-item-list>\n                  <ax-button-item text=\"Edit\" color=\"neutral\" (click)=\"editMessage(comment)\">\n                    <ax-prefix>\n                      <ax-icon icon=\"fa-solid fa-edit\"></ax-icon>\n                    </ax-prefix>\n                  </ax-button-item>\n\n                  <ax-button-item text=\"Delete\" color=\"danger\" (click)=\"deleteComment(comment)\">\n                    <ax-prefix>\n                      <ax-icon icon=\"fa-solid fa-trash-can\"></ax-icon>\n                    </ax-prefix>\n                  </ax-button-item>\n                </ax-button-item-list>\n              </ax-dropdown-panel>\n            </ax-comment-menu-options>\n            <ax-content [innerHTML]=\"sanitizeHtml(comment.message.content)\"></ax-content>\n            <ax-comment-like (click)=\"toggleLike(comment)\" [liked]=\"comment.isLiked!\">\n              {{ comment.reactionsCount }}\n            </ax-comment-like>\n            <ax-comment-reply-text (click)=\"replyMessage(comment)\"></ax-comment-reply-text>\n            @for (reply of comment.replies; track reply.id) {\n              <ax-comment-item [id]=\"reply.id\">\n                <ax-avatar [color]=\"avatarConfig().color\" [shape]=\"avatarConfig().look\">\n                  @if (reply && checkImageExists(reply.id!) && reply.author && extractInitials(reply.author) !== '?') {\n                    <ax-image (onError)=\"handleImageError(reply.id!)\" [src]=\"''\">\n                      <ax-loading></ax-loading>\n                    </ax-image>\n                  } @else {\n                    <ax-text>\n                      <span class=\"ax-text-base ax-overflow-hidden\">{{ extractInitials(reply.author) }}</span>\n                    </ax-text>\n                  }\n                </ax-avatar>\n                <ax-title>{{ extractInitials(reply.author) }}</ax-title>\n                <ax-comment-date>{{ calcDefrenetTime(reply.createdAt) | format: 'timeleft' | async }} </ax-comment-date>\n                <ax-comment-menu-options>\n                  <ax-button class=\"ax-sm\" look=\"blank\" color=\"neutral\">\n                    <ax-icon icon=\"ax-icon ax-icon-solid ax-icon-more-horizontal\"></ax-icon>\n                  </ax-button>\n\n                  <ax-dropdown-panel>\n                    <ax-button-item-list>\n                      <ax-button-item text=\"Edit\" color=\"neutral\" (click)=\"editMessage(comment, reply)\">\n                        <ax-prefix>\n                          <ax-icon icon=\"fa-solid fa-edit\"></ax-icon>\n                        </ax-prefix>\n                      </ax-button-item>\n                      <ax-button-item text=\"Delete\" color=\"danger\" (click)=\"deleteReply(comment, reply)\">\n                        <ax-prefix>\n                          <ax-icon icon=\"fa-solid fa-trash-can\"></ax-icon>\n                        </ax-prefix>\n                      </ax-button-item>\n                    </ax-button-item-list>\n                  </ax-dropdown-panel>\n                </ax-comment-menu-options>\n                <ax-content [innerHTML]=\"sanitizeHtml(reply.message.content)\"></ax-content>\n                <ax-comment-like (click)=\"toggleLike(comment, reply)\" [liked]=\"reply.isLiked!\">\n                  {{ reply.reactionsCount }}\n                </ax-comment-like>\n                <ax-comment-reply-text (click)=\"replyMessage(comment, reply)\"></ax-comment-reply-text>\n              </ax-comment-item>\n            }\n          </ax-comment-item>\n        }\n      </ax-comment-view>\n    } @else {\n      <div>\n        <div class=\"ax-flex ax-flex-col ax-gap-4 ax-justify-center ax-items-center ax-p-10\">\n          <svg\n            class=\"ax-mx-auto\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"154\"\n            height=\"161\"\n            viewBox=\"0 0 154 161\"\n            fill=\"none\"\n          >\n            <path\n              d=\"M0.0616455 84.4268C0.0616455 42.0213 34.435 7.83765 76.6507 7.83765C118.803 7.83765 153.224 42.0055 153.224 84.4268C153.224 102.42 147.026 118.974 136.622 132.034C122.282 150.138 100.367 161 76.6507 161C52.7759 161 30.9882 150.059 16.6633 132.034C6.25961 118.974 0.0616455 102.42 0.0616455 84.4268Z\"\n              fill=\"#EEF2FF\"\n            />\n            <path\n              d=\"M96.8189 0.632498L96.8189 0.632384L96.8083 0.630954C96.2034 0.549581 95.5931 0.5 94.9787 0.5H29.338C22.7112 0.5 17.3394 5.84455 17.3394 12.4473V142.715C17.3394 149.318 22.7112 154.662 29.338 154.662H123.948C130.591 154.662 135.946 149.317 135.946 142.715V38.9309C135.946 38.0244 135.847 37.1334 135.648 36.2586L135.648 36.2584C135.117 33.9309 133.874 31.7686 132.066 30.1333C132.066 30.1331 132.065 30.1329 132.065 30.1327L103.068 3.65203C103.068 3.6519 103.067 3.65177 103.067 3.65164C101.311 2.03526 99.1396 0.995552 96.8189 0.632498Z\"\n              fill=\"white\"\n              stroke=\"#E5E7EB\"\n            />\n            <ellipse cx=\"80.0618\" cy=\"81\" rx=\"28.0342\" ry=\"28.0342\" fill=\"#EEF2FF\" />\n            <path\n              d=\"M99.2393 61.3061L99.2391 61.3058C88.498 50.5808 71.1092 50.5804 60.3835 61.3061C49.6423 72.0316 49.6422 89.4361 60.3832 100.162C71.109 110.903 88.4982 110.903 99.2393 100.162C109.965 89.4363 109.965 72.0317 99.2393 61.3061ZM105.863 54.6832C120.249 69.0695 120.249 92.3985 105.863 106.785C91.4605 121.171 68.1468 121.171 53.7446 106.785C39.3582 92.3987 39.3582 69.0693 53.7446 54.683C68.1468 40.2965 91.4605 40.2966 105.863 54.6832Z\"\n              stroke=\"#E5E7EB\"\n            />\n            <path\n              d=\"M110.782 119.267L102.016 110.492C104.888 108.267 107.476 105.651 109.564 102.955L118.329 111.729L110.782 119.267Z\"\n              stroke=\"#E5E7EB\"\n            />\n            <path\n              d=\"M139.122 125.781L139.122 125.78L123.313 109.988C123.313 109.987 123.313 109.987 123.312 109.986C121.996 108.653 119.849 108.657 118.521 109.985L118.871 110.335L118.521 109.985L109.047 119.459C107.731 120.775 107.735 122.918 109.044 124.247L109.047 124.249L124.858 140.06C128.789 143.992 135.191 143.992 139.122 140.06C143.069 136.113 143.069 129.728 139.122 125.781Z\"\n              fill=\"#A5B4FC\"\n              stroke=\"#818CF8\"\n            />\n            <path\n              d=\"M83.185 87.2285C82.5387 87.2285 82.0027 86.6926 82.0027 86.0305C82.0027 83.3821 77.9987 83.3821 77.9987 86.0305C77.9987 86.6926 77.4627 87.2285 76.8006 87.2285C76.1543 87.2285 75.6183 86.6926 75.6183 86.0305C75.6183 80.2294 84.3831 80.2451 84.3831 86.0305C84.3831 86.6926 83.8471 87.2285 83.185 87.2285Z\"\n              fill=\"#4F46E5\"\n            />\n            <path\n              d=\"M93.3528 77.0926H88.403C87.7409 77.0926 87.2049 76.5567 87.2049 75.8946C87.2049 75.2483 87.7409 74.7123 88.403 74.7123H93.3528C94.0149 74.7123 94.5509 75.2483 94.5509 75.8946C94.5509 76.5567 94.0149 77.0926 93.3528 77.0926Z\"\n              fill=\"#4F46E5\"\n            />\n            <path\n              d=\"M71.5987 77.0925H66.6488C65.9867 77.0925 65.4507 76.5565 65.4507 75.8945C65.4507 75.2481 65.9867 74.7122 66.6488 74.7122H71.5987C72.245 74.7122 72.781 75.2481 72.781 75.8945C72.781 76.5565 72.245 77.0925 71.5987 77.0925Z\"\n              fill=\"#4F46E5\"\n            />\n            <rect x=\"38.3522\" y=\"21.5128\" width=\"41.0256\" height=\"2.73504\" rx=\"1.36752\" fill=\"#4F46E5\" />\n            <rect x=\"38.3522\" y=\"133.65\" width=\"54.7009\" height=\"5.47009\" rx=\"2.73504\" fill=\"#A5B4FC\" />\n            <rect x=\"38.3522\" y=\"29.7179\" width=\"13.6752\" height=\"2.73504\" rx=\"1.36752\" fill=\"#4F46E5\" />\n            <circle cx=\"56.13\" cy=\"31.0854\" r=\"1.36752\" fill=\"#4F46E5\" />\n            <circle cx=\"61.6001\" cy=\"31.0854\" r=\"1.36752\" fill=\"#4F46E5\" />\n            <circle cx=\"67.0702\" cy=\"31.0854\" r=\"1.36752\" fill=\"#4F46E5\" />\n          </svg>\n          <div>\n            <h2 class=\"ax-text-center ax-text-neutral-600 ax-font-semibold ax-leading-loose ax-pb-2\">\n              There is no Comment!\n            </h2>\n          </div>\n        </div>\n      </div>\n    }\n  </ax-comment-container>\n  <ax-form>\n    <ax-form-field>\n      <div>\n        @if (isReplyingMode() || isEditingMode()) {\n          <div\n            class=\"ax-flex ax-justify-between ax-rounded-b-none ax-border ax-border-b-0 ax-rounded-lg ax-bg-on-surface ax-px-6 ax-py-3 ax-w-full ax-items-center ax-overflow-hidden ax-text-sm ax-leading-none\"\n          >\n            <div (click)=\"scrollMain()\" class=\"ax-flex ax-justify-start ax-items-center ax-cursor-pointer\">\n              <i\n                [class]=\"isReplyingMode() ? 'fa-reply' : 'fa-pen'\"\n                class=\"fa-solid ax-text-primary-500 dark:ax-text-primary-300 ax-text-2xl ax-me-4\"\n              ></i>\n              <div\n                class=\"ax-flex ax-flex-col ax-gap-2 ax-justify-between ax-align-middle ax-leading-4 ax-overflow-hidden\"\n              >\n                <p class=\"ax-text-primary-500 dark:ax-text-primary-300\">\n                  {{ isReplyingMode() ? 'Reply to ' : 'Edit Message' }}\n                  <span class=\"ax-font-bold\">\n                    {{ isReplyingMode() ? extractInitials(activeReplyComment()?.author) : '' }}\n                  </span>\n                </p>\n                <div\n                  class=\"ax-truncate\"\n                  [innerHTML]=\"\n                    isReplyingMode()\n                      ? sanitizeHtml(activeReplyComment()?.message?.content ?? '')\n                      : sanitizeHtml(activeEditComment()?.message?.content ?? '')\n                  \"\n                ></div>\n              </div>\n            </div>\n            <div><i (click)=\"resetReplyEditState()\" class=\"fa-solid ax-text-2xl fa-xmark ax-cursor-pointer\"></i></div>\n          </div>\n        }\n        <ax-wysiwyg-container #w [look]=\"wysiwygOptions().look\" [(ngModel)]=\"commentContent\">\n          <ax-wysiwyg-view class=\"ax-min-h-28\"></ax-wysiwyg-view>\n          <ax-toolbar>\n            <ax-content>\n              <ax-wysiwyg-history></ax-wysiwyg-history>\n              <ax-wysiwyg-font-style></ax-wysiwyg-font-style>\n              <ax-wysiwyg-colors></ax-wysiwyg-colors>\n              <ax-wysiwyg-list></ax-wysiwyg-list>\n              <ax-wysiwyg-alignment></ax-wysiwyg-alignment>\n            </ax-content>\n            <ax-suffix>\n              <ax-dropdown-button\n                [disabled]=\"hasCooldown()\"\n                type=\"submit\"\n                color=\"primary\"\n                mode=\"split\"\n                text=\"Send\"\n                (onClick)=\"submitComment()\"\n              >\n                @if (isSubmitting()) {\n                  <ax-loading></ax-loading>\n                }\n                <ax-button-item-list>\n                  <ax-button-item (click)=\"submitComment(true)\" text=\"Send Private ...\" name=\"private\" data=\"private\">\n                    <ax-prefix>\n                      <ax-icon icon=\"fa-regular fa-user-secret\"></ax-icon>\n                    </ax-prefix>\n                  </ax-button-item>\n                </ax-button-item-list>\n              </ax-dropdown-button>\n            </ax-suffix>\n          </ax-toolbar>\n          <ax-validation-rule rule=\"callback\" [options]=\"{ validate: validateContent }\"></ax-validation-rule>\n        </ax-wysiwyg-container>\n      </div>\n    </ax-form-field>\n  </ax-form>\n</div>\n", styles: ["ax-wysiwyg-container .ax-editor-container{border-top-left-radius:0!important;border-top-right-radius:0!important}ax-wysiwyg-container .ax-error-message{padding-left:.5rem}\n"] }]
+            args: [{ selector: 'axm-chat-preview', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule, FormsModule, AXDomChangeDirective, AXConversationModule, AXLoadingModule], template: "@if (isLoading()) {\n  <div class=\"ax-h-full ax-w-full ax-flex ax-items-center ax-justify-center\">\n    <ax-loading></ax-loading>\n  </div>\n} @else if (error()) {\n  <div class=\"ax-h-full ax-w-full ax-flex ax-items-center ax-justify-center\">\n    <div class=\"ax-text-center\">\n      <p class=\"ax-text-danger\">{{ error() }}</p>\n      <button (click)=\"loadMessages(roomId)\" class=\"ax-mt-2 ax-button ax-primary\">Retry</button>\n    </div>\n  </div>\n} @else {\n  <div\n    axDomChange\n    (axResizeObserver)=\"setHeight($event[0].contentRect.height)\"\n    class=\"ax-bg-surface-container ax-h-full\"\n  >\n    <!-- Messages Container -->\n    <ax-conversation-container class=\"ax-overflow-hidden\" [chatData]=\"chatData()\">\n      <ax-conversation-view\n        (onActionMenuOpening)=\"addItemHandler($event)\"\n        (onAction)=\"handleOnAction($event)\"\n        (onReplyClick)=\"addInputOverlay('reply', $event.data)\"\n        [chatBoxHeight]=\"height() - 60 + 'px'\"\n      ></ax-conversation-view>\n      @if (!isChannel()) {\n        <ax-conversation-input\n          class=\"ax-p-1\"\n          placeholder=\"Type a message...\"\n          [(ngModel)]=\"options().value\"\n          (ngModelChange)=\"handleTyping($event)\"\n          (onSendClick)=\"handleOnSend($event)\"\n          (onFileChange)=\"handleFileChange($event)\"\n          (onStopRecording)=\"handleEndRecord($event)\"\n          (onCancelRecording)=\"handleCancelRecord($event)\"\n          (onEnterPressed)=\"handleEnter()\"\n        ></ax-conversation-input>\n      }\n    </ax-conversation-container>\n  </div>\n}\n", styles: [":host{display:block;width:100%;height:100%}\n"] }]
         }] });
 
-var commentWidgetView_component = /*#__PURE__*/Object.freeze({
+var chatPreview_component = /*#__PURE__*/Object.freeze({
     __proto__: null,
-    AXMCommentWidgetViewComponent: AXMCommentWidgetViewComponent
+    AXMChatPreviewComponent: AXMChatPreviewComponent
 });
 
-const AXPCommentWidget = {
-    name: 'comment',
-    title: 'Comments',
-    description: 'Display and manage comments for entities',
-    type: 'view',
-    categories: [],
-    groups: [AXPWidgetGroupEnum.FormElement],
-    icon: 'fa-solid fa-comments',
-    properties: [],
-    components: {
-        view: {
-            component: () => Promise.resolve().then(function () { return commentWidgetView_component; }).then((c) => c.AXMCommentWidgetViewComponent),
-        },
-    },
-};
-
 function routesFactory() {
     const routes = [
         {
@@ -3100,6 +2994,7 @@ function routesFactory() {
             loadComponent: () => {
                 return AXPRootLayoutComponent;
             },
+            title: 'Chat',
             children: [
                 {
                     path: '',
@@ -3115,18 +3010,49 @@ function routesFactory() {
             ],
         },
         {
-            path: ':app/comments/m/:module/e/:id',
-            component: AXMCommentListViewComponent,
+            path: ':app/comments/t/:refrenceType/i/:refrenceId/s/:subject',
+            title: 'Comments',
+            canActivate: [AXPAuthGuard],
+            loadComponent: () => AXPRootLayoutComponent,
+            // resolve: {
+            //   refrenceType: {
+            //     resolve: refrenceTypeResolver,
+            //   },
+            //   refrenceId: {
+            //     resolve: refrenceIdResolver,
+            //   },
+            //   subject: {
+            //     resolve: subjectResolver,
+            //   },
+            // },
+            children: [
+                {
+                    path: '',
+                    loadComponent: () => Promise.resolve().then(function () { return comment_component; }).then((c) => c.AXMCommentComponent),
+                },
+            ],
+        },
+        {
+            path: ':app/comments/',
+            title: 'Comments',
+            canActivate: [AXPAuthGuard],
+            loadComponent: () => AXPRootLayoutComponent,
+            children: [
+                {
+                    path: '',
+                    loadComponent: () => Promise.resolve().then(function () { return comment_component; }).then((c) => c.AXMCommentComponent),
+                },
+            ],
         },
     ];
     return routes;
 }
 class AXMConversationModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXMConversationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.4", ngImport: i0, type: AXMConversationModule, exports: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: AXMConversationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.6", ngImport: i0, type: AXMConversationModule, imports: [i2$1.AXPLayoutBuilderModule, i2$5.AXPWorkflowModule], exports: [
             // Modules
             RouterModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXMConversationModule, providers: [
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: AXMConversationModule, providers: [
             // Services
             {
                 provide: AXMMessageService,
@@ -3151,6 +3077,11 @@ class AXMConversationModule {
                 useClass: AXMConversationModuleEntityProvider,
                 multi: true,
             },
+            {
+                provide: AXP_MENU_PROVIDER,
+                useClass: AXMMenuProvider,
+                multi: true,
+            },
             {
                 provide: ROUTES,
                 multi: true,
@@ -3165,15 +3096,37 @@ class AXMConversationModule {
             // Conversation Module
             importProvidersFrom(AXConversationModule.forRoot()),
             DatePipe,
-        ], imports: [
+        ], imports: [AXPLayoutBuilderModule.forChild({
+                widgets: [AXPCommentWidget],
+            }),
+            AXPWorkflowModule.forChild({
+                actions: {
+                    'show-comment-popup-action': AXMCommentPopupStartAction,
+                },
+                workflows: {
+                    'show-comment-popup': AXMCommentPopupWorkflow,
+                },
+            }), 
             // Modules
             RouterModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXMConversationModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: AXMConversationModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [],
-                    imports: [],
+                    imports: [
+                        AXPLayoutBuilderModule.forChild({
+                            widgets: [AXPCommentWidget],
+                        }),
+                        AXPWorkflowModule.forChild({
+                            actions: {
+                                'show-comment-popup-action': AXMCommentPopupStartAction,
+                            },
+                            workflows: {
+                                'show-comment-popup': AXMCommentPopupWorkflow,
+                            },
+                        }),
+                    ],
                     exports: [
                         // Modules
                         RouterModule,
@@ -3203,6 +3156,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImpor
                             useClass: AXMConversationModuleEntityProvider,
                             multi: true,
                         },
+                        {
+                            provide: AXP_MENU_PROVIDER,
+                            useClass: AXMMenuProvider,
+                            multi: true,
+                        },
                         {
                             provide: ROUTES,
                             multi: true,
@@ -3225,5 +3183,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AXMChatComponent, AXMChatItemComponent, AXMChatPreviewComponent, AXMChatService, AXMChatServiceImpl, AXMCommentListViewComponent, AXMCommentLookupPopup, AXMCommentService, AXMCommentServiceImpl, AXMCommentWidgetViewComponent, AXMConversationModule, AXMMessageService, AXMMessageServiceImpl, AXMRoomService, AXMRoomServiceImpl, AXPCommentWidget, RootConfig, messageFactory, roomFactory };
+export { AXMChatComponent, AXMChatItemComponent, AXMChatPreviewComponent, AXMChatService, AXMChatServiceImpl, AXMCommentComponent, AXMCommentPopupComponent, AXMCommentPopupStartAction, AXMCommentPopupWorkflow, AXMCommentService, AXMCommentServiceImpl, AXMCommentWidgetViewComponent, AXMConversationModule, AXMMessageService, AXMMessageServiceImpl, AXMRoomService, AXMRoomServiceImpl, AXMUserLookupPopup, AXPCommentWidget, RootConfig, messageFactory, roomFactory };
 //# sourceMappingURL=acorex-modules-conversation.mjs.map