@acorex/modules 20.2.0-next.2 → 20.2.0-next.3

package/fesm2022/acorex-modules-conversation.mjs

@@ -6,14 +6,16 @@ import { AXPRootLayoutComponent } from '@acorex/platform/themes/default';
 import * as i1$2 from '@angular/common';
 import { AsyncPipe, CommonModule, DatePipe } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Injectable, inject, input, signal, viewChild, DestroyRef, ChangeDetectionStrategy, Component, ViewEncapsulation, computed, output, effect, HostListener, afterNextRender, importProvidersFrom, NgModule } from '@angular/core';
+import { Injectable, inject, input, signal, viewChild, DestroyRef, ChangeDetectionStrategy, Component, ViewEncapsulation, computed, output, effect, HostListener, afterNextRender, Injector, importProvidersFrom, NgModule } from '@angular/core';
 import * as i2$3 from '@angular/router';
-import { ActivatedRoute, Router, NavigationEnd, RouterModule, ROUTES } from '@angular/router';
+import { Router, ActivatedRoute, NavigationEnd, RouterModule, ROUTES } from '@angular/router';
 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 { AXMUsersEntityService } from '@acorex/modules/security-management';
+import { Subject, filter, startWith, debounceTime } from 'rxjs';
 import * as i3 from '@acorex/components/avatar';
 import { AXAvatarModule } from '@acorex/components/avatar';
 import * as i2$2 from '@acorex/components/badge';
@@ -53,14 +55,12 @@ import { AXFormatModule } from '@acorex/core/format';
 import * as i4$1 from '@acorex/core/translation';
 import { AXTranslationModule, AXTranslationService } from '@acorex/core/translation';
 import { AXUnsubscriber } from '@acorex/core/utils';
-import { AXMOsNotificationService, AXMNotificationConnectorService } from '@acorex/modules/notification-management';
+import { AXMNotificationConnectorService, AXP_NOTIFICATION_DEFINITION_PROVIDER } from '@acorex/modules/notification-management';
 import { AXPUserAvatarComponent, AXPThemeLayoutBlockComponent, AXPThemeLayoutStartSideComponent, AXPThemeLayoutHeaderComponent, AXPThemeLayoutToolbarComponent } from '@acorex/platform/layout/components';
 import { AXPPageLayoutBaseComponent, AXPPageLayoutComponent, AXPPageLayoutBase } from '@acorex/platform/layout/views';
 import { trigger, transition, style, animate } from '@angular/animations';
 import * as i10 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
-import { Subject, filter, startWith } from 'rxjs';
-import { AXMUsersEntityService } from '@acorex/modules/security-management';
 import { AXToastService } from '@acorex/components/toast';
 import { DomSanitizer } from '@angular/platform-browser';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
@@ -109,10 +109,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.1.3", ngImport: i0, type: AXMMessageServiceImpl, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXMMessageServiceImpl }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: AXMMessageServiceImpl, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: AXMMessageServiceImpl }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXMMessageServiceImpl, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: AXMMessageServiceImpl, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 
@@ -387,10 +387,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.1.3", ngImport: i0, type: AXMRoomServiceImpl, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXMRoomServiceImpl }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: AXMRoomServiceImpl, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: AXMRoomServiceImpl }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXMRoomServiceImpl, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: AXMRoomServiceImpl, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 
@@ -663,10 +663,10 @@ class AXMConversationTabServiceImpl extends AXMConversationTabService {
     constructor() {
         super(`${RootConfig.module.name}.${RootConfig.entities.tab.name}`);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXMConversationTabServiceImpl, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXMConversationTabServiceImpl }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: AXMConversationTabServiceImpl, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: AXMConversationTabServiceImpl }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXMConversationTabServiceImpl, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: AXMConversationTabServiceImpl, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 
@@ -908,10 +908,10 @@ class AXMConversationModuleEntityProvider {
                 return null;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXMConversationModuleEntityProvider, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXMConversationModuleEntityProvider }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: AXMConversationModuleEntityProvider, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: AXMConversationModuleEntityProvider }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXMConversationModuleEntityProvider, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: AXMConversationModuleEntityProvider, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: i0.Injector }] });
 
@@ -932,192 +932,189 @@ class AXMMenuProvider {
             },
         ]);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXMMenuProvider, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXMMenuProvider }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: AXMMenuProvider, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: AXMMenuProvider }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXMMenuProvider, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: AXMMenuProvider, decorators: [{
             type: Injectable
         }] });
 
-class AXMCommentRealtimeService {
+class AXMChatRealtimeService {
 }
-class AXMCommentRealtimeServiceImpl extends AXMCommentRealtimeService {
+class AXMChatRealtimeServiceImpl extends AXMChatRealtimeService {
     constructor() {
         super(...arguments);
-        this._comment$ = new Subject();
-        this.comment$ = this._comment$.asObservable();
-        this._thread$ = new Subject();
-        this.thread$ = this._thread$.asObservable();
+        this._room$ = new Subject();
+        this.room$ = this._room$.asObservable();
+        this._message$ = new Subject();
+        this.message$ = this._message$.asObservable();
+        this._tab$ = new Subject();
+        this.tab$ = this._tab$.asObservable();
+        this._typingStatus$ = new Subject();
+        this.typingStatus$ = this._typingStatus$.asObservable();
     }
-    notifyComment(event) {
-        this._comment$.next(event);
+    notifyRoom(event) {
+        this._room$.next(event);
     }
-    notifyThread(event) {
-        this._thread$.next(event);
+    notifyMessage(event) {
+        this._message$.next(event);
+    }
+    notifyTab(event) {
+        this._tab$.next(event);
+    }
+    startTyping(user, roomId) {
+        this._typingStatus$.next({ roomId, user, isTyping: true });
+    }
+    stopTyping(user, roomId) {
+        this._typingStatus$.next({ roomId, user, isTyping: false });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXMCommentRealtimeServiceImpl, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXMCommentRealtimeServiceImpl, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: AXMChatRealtimeServiceImpl, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: AXMChatRealtimeServiceImpl, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXMCommentRealtimeServiceImpl, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: AXMChatRealtimeServiceImpl, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
                 }]
         }] });
 
-//#region ----   Abstract Comment Service   ----
-class AXMCommentService {
+class AXMChatService {
 }
-//#endregion
-class AXMCommentServiceImpl {
+class AXMChatServiceImpl {
     constructor() {
         this.roomService = inject(AXMRoomService);
         this.messageService = inject(AXMMessageService);
-        this.filterService = inject(AXPFilterOperatorMiddlewareService);
+        this.tabService = inject(AXMConversationTabService);
     }
-    async createThread(creatorUser, entityRef, topic, title) {
+    createRoom(members, title, currentUser) {
         const room = {
-            type: 'comment',
-            topic: topic,
-            title: title || `Comments for ${entityRef.type}#${entityRef.id}`,
-            members: [creatorUser],
-            entityRef: entityRef,
-            createdBy: creatorUser.id,
+            members,
+            title: title,
+            topic: members.length > 2 ? 'group' : 'personal',
             createdAt: new Date(),
+            updatedAt: new Date(),
+            type: 'chat',
+            createdBy: currentUser.id,
+            updatedBy: currentUser.id,
         };
-        const newRoomId = await this.roomService.insertOne(room);
-        return this.roomService.getOne(newRoomId);
+        return this.roomService.insertOne(room).then((id) => this.roomService.getOne(id));
     }
-    async getThread(entityRef, topic) {
-        const { items } = await this.roomService.query({
-            skip: 0,
-            take: 1,
-            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'),
-                    },
-                ],
-            },
-        });
-        return items[0] || null;
+    getRoom(roomId) {
+        return this.roomService.getOne(roomId);
     }
-    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'),
-                    },
-                ],
-            },
+    async listRooms(skip = 0, take = 100) {
+        return this.roomService.query({
+            skip,
+            take,
+            filter: { field: 'type', value: 'chat', operator: { type: 'equal' } },
         });
-        return items;
     }
-    async updateThread(threadId, data) {
-        await this.roomService.updateOne(threadId, data);
-        return this.roomService.getOne(threadId);
+    updateRoom(roomId, data, currentUser) {
+        const update = { ...data, updatedAt: new Date(), updatedBy: currentUser.id };
+        return this.roomService.updateOne(roomId, update);
     }
-    async deleteThread(threadId) {
-        await this.roomService.deleteOne(threadId);
+    async deleteRoom(roomId) {
+        await this.roomService.deleteOne(roomId);
         return true;
     }
-    async addComment(threadId, content, author, parentCommentId, contentType = 'text') {
+    createTab(data) {
+        return this.tabService.insertOne(data).then((id) => this.tabService.getOne(id));
+    }
+    getTab(tabId) {
+        return this.tabService.getOne(tabId);
+    }
+    listTabs(skip = 0, take = 100) {
+        return this.tabService.query({ skip, take });
+    }
+    updateTab(tabId, data) {
+        return this.tabService.updateOne(tabId, data);
+    }
+    async deleteTab(tabId) {
+        await this.tabService.deleteOne(tabId);
+        return true;
+    }
+    sendMessage(roomId, content, author, contentType = 'text', replyId) {
         const messageContent = { content, contentType };
         const message = {
-            roomId: threadId,
+            roomId,
             message: messageContent,
             author,
-            replyId: parentCommentId,
+            replyId,
+            createdAt: new Date(),
+            updatedAt: new Date(),
+            createdBy: author.id,
+            updatedBy: author.id,
             reactions: [],
             seen: [],
-            createdBy: author.id,
-            createdAt: new Date(),
         };
-        const messageId = await this.messageService.insertOne(message);
-        return this.messageService.getOne(messageId);
+        return this.messageService.insertOne({ ...message }).then((id) => this.messageService.getOne(id));
     }
-    async getComments(threadId) {
-        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,
+    async getMessages(roomId, skip = 0, take = 99) {
+        return this.messageService.query({
+            skip,
+            take,
+            filter: { field: 'roomId', value: roomId, operator: { type: 'equal' } },
+            sort: [{ field: 'createdAt', dir: 'desc' }],
         });
-        return items;
     }
-    async getComment(commentId) {
-        return this.messageService.getOne(commentId);
+    getMessage(messageId) {
+        return this.messageService.getOne(messageId);
     }
-    async editComment(commentId, content, editor, contentType = 'text') {
+    editMessage(messageId, content, currentUser, contentType = 'text') {
         const messageContent = { content, contentType };
-        await this.messageService.updateOne(commentId, {
+        return this.messageService.updateOne(messageId, {
             message: messageContent,
             updatedAt: new Date(),
-            updatedBy: editor.id,
+            updatedBy: currentUser.id,
         });
-        return this.messageService.getOne(commentId);
     }
-    async deleteComment(commentId) {
-        await this.messageService.deleteOne(commentId);
+    async deleteMessage(messageId) {
+        await this.messageService.deleteOne(messageId);
         return true;
     }
-    async updateReactions(commentId, reactions) {
-        await this.messageService.updateOne(commentId, { reactions });
-        return this.messageService.getOne(commentId);
+    pinMessage(messageId, isPinned, currentUser) {
+        return this.messageService.updateOne(messageId, {
+            isPinned,
+            updatedAt: new Date(),
+            updatedBy: currentUser.id,
+        });
     }
-    async getReactions(commentId) {
-        const comment = await this.messageService.getOne(commentId);
-        return comment.reactions || [];
+    updateReactions(messageId, reactions, currentUser) {
+        return this.messageService.updateOne(messageId, {
+            reactions,
+            updatedAt: new Date(),
+            updatedBy: currentUser.id,
+        });
     }
-    async pinComment(commentId, isPinned) {
-        await this.messageService.updateOne(commentId, { isPinned });
-        return this.messageService.getOne(commentId);
+    getReactions(messageId) {
+        return this.messageService.getOne(messageId).then((m) => m.reactions || []);
+    }
+    updateSeen(messageId, seen, currentUser) {
+        return this.messageService.updateOne(messageId, {
+            seen,
+            updatedAt: new Date(),
+            updatedBy: currentUser.id,
+        });
+    }
+    getSeenBy(messageId) {
+        return this.messageService.getOne(messageId).then((m) => m.seen || []);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXMCommentServiceImpl, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXMCommentServiceImpl, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: AXMChatServiceImpl, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: AXMChatServiceImpl, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXMCommentServiceImpl, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: AXMChatServiceImpl, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
                 }]
         }] });
 
-class AXMCommentManagementService {
+class AXMChatManagementService {
     constructor() {
-        this.commentImplService = inject(AXMCommentServiceImpl);
+        this.chatImplService = inject(AXMChatServiceImpl);
         this.sessionService = inject(AXPSessionService);
         this.usersService = inject(AXMUsersEntityService);
-        this.realtimeService = inject(AXMCommentRealtimeService);
+        this.realtimeService = inject(AXMChatRealtimeService);
     }
     getCurrentUser() {
         const user = this.sessionService.user;
@@ -1127,774 +1124,675 @@ class AXMCommentManagementService {
         return {
             id: user.id,
             type: 'user',
+            fullName: user.title?.trim(),
+            username: user.name?.trim(),
         };
     }
     async getUserInfo(userId) {
         try {
-            await this.usersService.getOne(userId);
-            return { id: userId, type: 'user' };
+            const user = await this.usersService.getOne(userId);
+            return {
+                id: user.id,
+                type: 'user',
+                fullName: `${user.firstName} ${user.lastName}`.trim(),
+                username: user.username?.trim(),
+            };
         }
-        catch {
-            throw new Error(`User with ID ${userId} not found`);
+        catch (error) {
+            console.error(`Failed to get user info for ID: ${userId}`, error);
+            return {
+                id: userId,
+                type: 'user',
+                fullName: 'Unknown User',
+                username: 'Unknown User',
+            };
         }
     }
-    formatComment(message, depth = 0) {
-        return {
-            ...message,
-            depth,
-            replies: [],
-            replyCount: 0,
-        };
+    async formatMessage(message) {
+        if (message.author && !message.author.fullName) {
+            const authorInfo = await this.getUserInfo(message.author.id);
+            return {
+                ...message,
+                author: authorInfo,
+            };
+        }
+        return message;
     }
-    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 ?? 0) + 1;
-            }
-            else {
-                tree.push(comment);
-            }
-        });
-        commentMap.forEach((comment) => {
-            comment.replyCount = comment.replies.length;
+    async getUnreadCount(roomId) {
+        const { items } = await this.chatImplService.getMessages(roomId, 0, 99);
+        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 tree;
+        return unreadMessages.length;
     }
-    async formatThread(room) {
-        const comments = await this.getComments(room.id, true);
+    async formatRoom(room) {
+        const messages = await this.getMessages(room.id, 0, 1);
+        const lastMessage = messages.items.length > 0 ? messages.items[0] : undefined;
+        const unreadCount = await this.getUnreadCount(room.id);
+        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,
-            comments,
-            commentCount: comments.length,
+            lastMessage,
+            unreadCount,
+            members: members.filter((m) => m.id !== currentUserId),
         };
     }
-    async createThread(entityRef, topic, title) {
+    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 newRoom = await this.commentImplService.createThread(currentUser, entityRef, topic, title);
-        const newThread = await this.formatThread(newRoom);
-        this.realtimeService.notifyThread({ type: 'add', payload: newThread });
-        return newThread;
+        const allMemberIds = [...new Set([...memberIds, currentUser.id])];
+        const memberReferences = await Promise.all(allMemberIds.map((id) => this.getUserInfo(id)));
+        const newRoom = await this.chatImplService.createRoom(memberReferences, title, currentUser);
+        const newChatRoom = await this.formatRoom(newRoom);
+        this.realtimeService.notifyRoom({ type: 'add', payload: newChatRoom });
+        return newChatRoom;
     }
-    async getThread(entityRef, topic) {
-        const room = await this.commentImplService.getThread(entityRef, topic);
+    async getRoom(roomId) {
+        const room = await this.chatImplService.getRoom(roomId);
         if (!room) {
-            return null;
+            throw new Error(`Chat room with ID ${roomId} not found.`);
         }
-        return this.formatThread(room);
+        return this.formatRoom(room);
     }
-    async listThreads(entityRef, topic) {
-        const rooms = await this.commentImplService.listThreads(entityRef, topic);
-        return Promise.all(rooms.map((room) => this.formatThread(room)));
+    async listRooms(skip = 0, take = 100) {
+        const { items } = await this.chatImplService.listRooms(skip, take);
+        const settledRooms = await Promise.allSettled(items.map((room) => this.formatRoom(room)));
+        const chatRooms = settledRooms
+            .filter((result) => {
+            if (result.status === 'rejected') {
+                console.error('Failed to fetch room details:', result.reason);
+                return false;
+            }
+            return true;
+        })
+            .map((result) => result.value);
+        return { items: chatRooms, total: chatRooms.length };
     }
-    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.`);
+    async updateRoom(roomId, data) {
+        const currentUser = this.getCurrentUser();
+        return this.chatImplService.updateRoom(roomId, data, currentUser);
+    }
+    async deleteRoom(roomId) {
+        const result = await this.chatImplService.deleteRoom(roomId);
+        if (result) {
+            this.realtimeService.notifyRoom({ type: 'remove', payload: roomId });
         }
-        const updatedRoom = await this.commentImplService.updateThread(thread.id, data);
-        const updatedThread = await this.formatThread(updatedRoom);
-        this.realtimeService.notifyThread({ type: 'update', payload: updatedThread });
-        return updatedThread;
+        return result;
     }
-    async deleteThread(entityRef, topic) {
-        const thread = await this.getThread(entityRef, topic);
-        if (thread) {
-            await this.commentImplService.deleteThread(thread.id);
-            this.realtimeService.notifyThread({ type: 'remove', payload: thread.id });
-            return true;
+    async addParticipant(roomId, userId) {
+        const room = await this.chatImplService.getRoom(roomId);
+        if (room.members.some((m) => m.id === userId))
+            return room;
+        const userRef = await this.getUserInfo(userId);
+        const updatedMembers = [...room.members, userRef];
+        const currentUser = this.getCurrentUser();
+        return this.chatImplService.updateRoom(roomId, { members: updatedMembers }, currentUser);
+    }
+    async removeParticipant(roomId, userId) {
+        const room = await this.chatImplService.getRoom(roomId);
+        const updatedMembers = room.members.filter((member) => member.id !== userId);
+        const currentUser = this.getCurrentUser();
+        return this.chatImplService.updateRoom(roomId, { members: updatedMembers }, currentUser);
+    }
+    async createTab(data) {
+        const newTab = await this.chatImplService.createTab(data);
+        this.realtimeService.notifyTab({ type: 'add', payload: newTab });
+        return newTab;
+    }
+    getTab(tabId) {
+        return this.chatImplService.getTab(tabId);
+    }
+    listTabs(skip, take) {
+        return this.chatImplService.listTabs(skip, take);
+    }
+    updateTab(tabId, data) {
+        return this.chatImplService.updateTab(tabId, data);
+    }
+    async deleteTab(tabId) {
+        const result = await this.chatImplService.deleteTab(tabId);
+        if (result) {
+            this.realtimeService.notifyTab({ type: 'remove', payload: tabId });
         }
-        return false;
+        return result;
     }
-    async addComment(threadId, content, parentCommentId, contentType = 'text', userId) {
-        const author = userId ? await this.getUserInfo(userId) : this.getCurrentUser();
-        const rawComment = await this.commentImplService.addComment(threadId, content, author, parentCommentId, contentType);
-        const formattedComment = this.formatComment(rawComment);
-        this.realtimeService.notifyComment({ type: 'add', payload: formattedComment });
-        return formattedComment;
+    async addIncludeRoomToTab(tabId, roomId) {
+        const tab = await this.getTab(tabId);
+        const room = await this.getRoom(roomId);
+        if (tab && room) {
+            const updatedRooms = [...tab.includeRooms, room];
+            return this.updateTab(tabId, { includeRooms: updatedRooms });
+        }
+        else {
+            throw new Error(`Tab with ID ${tabId} or room with ID ${roomId} not found.`);
+        }
     }
-    async getComments(threadId, nested) {
-        const rawComments = await this.commentImplService.getComments(threadId);
-        const formattedComments = rawComments.map((c) => this.formatComment(c));
-        if (nested) {
-            return this.buildCommentTree(formattedComments);
+    async removeIncludeRoomFromTab(tabId, roomId) {
+        const tab = await this.getTab(tabId);
+        const room = await this.getRoom(roomId);
+        if (tab && room) {
+            if (tab.includeRooms.some((r) => r.id === roomId)) {
+                const updatedRooms = tab.includeRooms.filter((r) => r.id !== roomId);
+                return this.updateTab(tabId, { includeRooms: updatedRooms });
+            }
+            else {
+                throw new Error(`${tabId} tab does not include room with ID ${roomId}.`);
+            }
+        }
+        else {
+            throw new Error(`Tab with ID ${tabId} or room with ID ${roomId} not found.`);
         }
-        return formattedComments;
     }
-    async getComment(commentId) {
-        const rawComment = await this.commentImplService.getComment(commentId);
-        return this.formatComment(rawComment);
+    async addExcludeRoomToTab(tabId, roomId) {
+        const tab = await this.getTab(tabId);
+        const room = await this.getRoom(roomId);
+        if (tab && room) {
+            const updatedRooms = [...tab.excludeRooms, room];
+            return this.updateTab(tabId, { excludeRooms: updatedRooms });
+        }
+        else {
+            throw new Error(`Tab with ID ${tabId} or room with ID ${roomId} not found.`);
+        }
     }
-    async editComment(commentId, content, contentType = 'text') {
-        const editor = this.getCurrentUser();
-        const rawComment = await this.commentImplService.editComment(commentId, content, editor, contentType);
-        const formattedComment = this.formatComment(rawComment);
-        this.realtimeService.notifyComment({ type: 'update', payload: formattedComment });
-        return formattedComment;
+    async removeExcludeRoomFromTab(tabId, roomId) {
+        const tab = await this.getTab(tabId);
+        const room = await this.getRoom(roomId);
+        if (tab && room) {
+            if (tab.excludeRooms.some((r) => r.id === roomId)) {
+                const updatedRooms = tab.excludeRooms.filter((r) => r.id !== roomId);
+                return this.updateTab(tabId, { excludeRooms: updatedRooms });
+            }
+            else {
+                throw new Error(`${tabId} tab does not exclude room with ID ${roomId}.`);
+            }
+        }
+        else {
+            throw new Error(`Tab with ID ${tabId} or room with ID ${roomId} not found.`);
+        }
     }
-    async deleteComment(commentId) {
-        const result = await this.commentImplService.deleteComment(commentId);
+    async sendMessage(roomId, content, contentType = 'text', replyId, userId) {
+        const author = userId ? await this.getUserInfo(userId) : this.getCurrentUser();
+        const newMessage = await this.chatImplService.sendMessage(roomId, content, author, contentType, replyId);
+        const formattedMessage = await this.formatMessage(newMessage);
+        this.realtimeService.notifyMessage({ type: 'add', payload: formattedMessage });
+        return formattedMessage;
+    }
+    async getMessages(roomId, skip, take) {
+        const result = await this.chatImplService.getMessages(roomId, skip, take);
+        const formattedMessages = await Promise.all(result.items.map((m) => this.formatMessage(m)));
+        return { items: formattedMessages, total: result.total };
+    }
+    async getMessage(messageId) {
+        const message = await this.chatImplService.getMessage(messageId);
+        return this.formatMessage(message);
+    }
+    async editMessage(messageId, content, contentType = 'text') {
+        const currentUser = this.getCurrentUser();
+        const updatedMessage = await this.chatImplService.editMessage(messageId, content, currentUser, contentType);
+        this.realtimeService.notifyMessage({ type: 'update', payload: await this.formatMessage(updatedMessage) });
+        return updatedMessage;
+    }
+    async deleteMessage(messageId) {
+        const result = await this.chatImplService.deleteMessage(messageId);
         if (result) {
-            this.realtimeService.notifyComment({ type: 'remove', payload: commentId });
+            this.realtimeService.notifyMessage({ type: 'remove', payload: messageId });
         }
         return result;
     }
-    async addReaction(commentId, type) {
+    async replyMessage(replyToMessageId, content, contentType = 'text') {
+        const originalMessage = await this.chatImplService.getMessage(replyToMessageId);
+        return this.sendMessage(originalMessage.roomId, content, contentType, replyToMessageId);
+    }
+    async pinMessage(messageId) {
+        const currentUser = this.getCurrentUser();
+        return this.chatImplService.pinMessage(messageId, true, currentUser);
+    }
+    async unpinMessage(messageId) {
+        const currentUser = this.getCurrentUser();
+        return this.chatImplService.pinMessage(messageId, false, currentUser);
+    }
+    async addReaction(messageId, type) {
         const author = this.getCurrentUser();
-        const comment = await this.commentImplService.getComment(commentId);
-        const reactions = comment.reactions || [];
+        const message = await this.chatImplService.getMessage(messageId);
+        const reactions = message.reactions || [];
         if (reactions.some((r) => r.author.id === author.id && r.type === type)) {
-            return this.formatComment(comment);
+            return message;
         }
         const updatedReactions = [...reactions, { author, type }];
-        const rawComment = await this.commentImplService.updateReactions(commentId, updatedReactions);
-        const formattedComment = this.formatComment(rawComment);
-        this.realtimeService.notifyComment({ type: 'update', payload: formattedComment });
-        return formattedComment;
+        const res = await this.chatImplService.updateReactions(messageId, updatedReactions, author);
+        this.realtimeService.notifyMessage({ type: 'update', payload: await this.formatMessage(res) });
+        return res;
     }
-    async removeReaction(commentId, type) {
+    async removeReaction(messageId, type) {
         const author = this.getCurrentUser();
-        const comment = await this.commentImplService.getComment(commentId);
-        const updatedReactions = (comment.reactions || []).filter((r) => !(r.author.id === author.id && r.type === type));
-        const rawComment = await this.commentImplService.updateReactions(commentId, updatedReactions);
-        const formattedComment = this.formatComment(rawComment);
-        this.realtimeService.notifyComment({ type: 'update', payload: formattedComment });
-        return formattedComment;
+        const message = await this.chatImplService.getMessage(messageId);
+        const updatedReactions = (message.reactions || []).filter((r) => !(r.author.id === author.id && r.type === type));
+        const res = await this.chatImplService.updateReactions(messageId, updatedReactions, author);
+        this.realtimeService.notifyMessage({ type: 'update', payload: await this.formatMessage(res) });
+        return res;
     }
-    getReactions(commentId) {
-        return this.commentImplService.getReactions(commentId);
+    async getReactions(messageId) {
+        return this.chatImplService.getReactions(messageId);
     }
-    likeComment(commentId) {
-        return this.addReaction(commentId, 'like');
+    async markSeen(messageId) {
+        const author = this.getCurrentUser();
+        const message = await this.chatImplService.getMessage(messageId);
+        const seen = message.seen || [];
+        if (seen.some((s) => s.author.id === author.id)) {
+            return message;
+        }
+        const updatedSeen = [...seen, { author, type: 'read' }];
+        const updatedMessage = await this.chatImplService.updateSeen(messageId, updatedSeen, author);
+        this.realtimeService.notifyRoom({ type: 'seen', payload: updatedMessage.roomId });
+        return updatedMessage;
     }
-    unlikeComment(commentId) {
-        return this.removeReaction(commentId, 'like');
+    async getSeenBy(messageId) {
+        return this.chatImplService.getSeenBy(messageId);
     }
-    async pinComment(commentId) {
-        const rawComment = await this.commentImplService.pinComment(commentId, true);
-        const formattedComment = this.formatComment(rawComment);
-        this.realtimeService.notifyComment({ type: 'update', payload: formattedComment });
-        return formattedComment;
+    async markRoomSeen(roomId) {
+        try {
+            if (!roomId) {
+                return true;
+            }
+            const { items } = await this.getMessages(roomId, 0, 99);
+            const currentUserId = this.getCurrentUser().id;
+            const unreadMessages = items.filter((message) => message.author.id !== currentUserId && !message.seen?.some((s) => s.author.id === currentUserId));
+            if (unreadMessages.length > 0) {
+                await Promise.all(unreadMessages.map((message) => this.markSeen(message.id)));
+            }
+            this.realtimeService.notifyRoom({ type: 'seen', payload: roomId });
+            return true;
+        }
+        catch (error) {
+            console.error(`Error marking room ${roomId} as seen:`, error);
+            return false;
+        }
     }
-    async unpinComment(commentId) {
-        const rawComment = await this.commentImplService.pinComment(commentId, false);
-        const formattedComment = this.formatComment(rawComment);
-        this.realtimeService.notifyComment({ type: 'update', payload: formattedComment });
-        return formattedComment;
+    async startTyping(roomId, userId) {
+        const user = userId ? await this.getUserInfo(userId) : this.getCurrentUser();
+        this.realtimeService.startTyping(user, roomId);
+    }
+    async stopTyping(roomId, userId) {
+        const user = userId ? await this.getUserInfo(userId) : this.getCurrentUser();
+        this.realtimeService.stopTyping(user, roomId);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXMCommentManagementService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXMCommentManagementService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: AXMChatManagementService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: AXMChatManagementService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXMCommentManagementService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: AXMChatManagementService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
                 }]
         }] });
 
-class AXMCommentComponent {
+class AXMCommentRealtimeService {
+}
+class AXMCommentRealtimeServiceImpl extends AXMCommentRealtimeService {
     constructor() {
-        this.refrenceType = input.required(...(ngDevMode ? [{ debugName: "refrenceType" }] : []));
-        this.refrenceId = input.required(...(ngDevMode ? [{ debugName: "refrenceId" }] : []));
-        this.subject = input.required(...(ngDevMode ? [{ debugName: "subject" }] : []));
-        this.hasCooldown = signal(false, ...(ngDevMode ? [{ debugName: "hasCooldown" }] : []));
-        this.commentContent = signal('', ...(ngDevMode ? [{ debugName: "commentContent" }] : []));
-        this.isSubmitting = signal(false, ...(ngDevMode ? [{ debugName: "isSubmitting" }] : []));
-        this.isReplyingMode = signal(false, ...(ngDevMode ? [{ debugName: "isReplyingMode" }] : []));
-        this.isEditingMode = signal(false, ...(ngDevMode ? [{ debugName: "isEditingMode" }] : []));
-        this.isLoading = signal(true, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
-        this.failedImageIds = signal([], ...(ngDevMode ? [{ debugName: "failedImageIds" }] : []));
-        this.activeReplyComment = signal(undefined, ...(ngDevMode ? [{ debugName: "activeReplyComment" }] : []));
-        this.activeEditComment = signal(undefined, ...(ngDevMode ? [{ debugName: "activeEditComment" }] : []));
-        this.highlightedCommentId = signal(null, ...(ngDevMode ? [{ debugName: "highlightedCommentId" }] : []));
-        this.wysiwygEditor = viewChild.required('w');
-        this.commentService = inject(AXMCommentManagementService);
-        this.realtimeService = inject(AXMCommentRealtimeService);
-        this.sessionService = inject(AXPSessionService);
-        this.toastService = inject(AXToastService);
-        this.dialogService = inject(AXDialogService);
-        this.sanitize = inject(DomSanitizer);
-        this.destroyRef = inject(DestroyRef);
-        this.comments = signal([], ...(ngDevMode ? [{ debugName: "comments" }] : []));
-        this.thread = signal(undefined, ...(ngDevMode ? [{ debugName: "thread" }] : []));
-        this.wysiwygOptions = signal({
-            look: 'solid',
-        }, ...(ngDevMode ? [{ debugName: "wysiwygOptions" }] : []));
-        this.avatarConfig = signal({
-            color: 'primary',
-            look: 'rounded',
-            type: 'solid',
-        }, ...(ngDevMode ? [{ debugName: "avatarConfig" }] : []));
-        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,
-            };
+        super(...arguments);
+        this._comment$ = new Subject();
+        this.comment$ = this._comment$.asObservable();
+        this._thread$ = new Subject();
+        this.thread$ = this._thread$.asObservable();
+    }
+    notifyComment(event) {
+        this._comment$.next(event);
+    }
+    notifyThread(event) {
+        this._thread$.next(event);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: AXMCommentRealtimeServiceImpl, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: AXMCommentRealtimeServiceImpl, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: AXMCommentRealtimeServiceImpl, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+//#region ----   Abstract Comment Service   ----
+class AXMCommentService {
+}
+//#endregion
+class AXMCommentServiceImpl {
+    constructor() {
+        this.roomService = inject(AXMRoomService);
+        this.messageService = inject(AXMMessageService);
+        this.filterService = inject(AXPFilterOperatorMiddlewareService);
+    }
+    async createThread(creatorUser, entityRef, topic, title) {
+        const room = {
+            type: 'comment',
+            topic: topic,
+            title: title || `Comments for ${entityRef.type}#${entityRef.id}`,
+            members: [creatorUser],
+            entityRef: entityRef,
+            createdBy: creatorUser.id,
+            createdAt: new Date(),
         };
+        const newRoomId = await this.roomService.insertOne(room);
+        return this.roomService.getOne(newRoomId);
     }
-    ngOnInit() {
-        this.isLoading.set(true);
-        this.loadComments().finally(() => {
-            setTimeout(() => {
-                this.isLoading.set(false);
-            }, 250);
+    async getThread(entityRef, topic) {
+        const { items } = await this.roomService.query({
+            skip: 0,
+            take: 1,
+            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'),
+                    },
+                ],
+            },
         });
-        this.realtimeService.comment$
-            .pipe(takeUntilDestroyed(this.destroyRef), filter((event) => !!event))
-            .subscribe((event) => {
-            switch (event.type) {
-                case 'add':
-                    this.handleAddComment(event.payload);
-                    break;
-                case 'update':
-                    this.handleUpdateComment(event.payload);
-                    break;
-                case 'remove':
-                    this.removeMessageById(event.payload);
-                    break;
-            }
+        return items[0] || null;
+    }
+    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'),
+                    },
+                ],
+            },
         });
+        return items;
     }
-    handleAddComment(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]);
-        }
+    async updateThread(threadId, data) {
+        await this.roomService.updateOne(threadId, data);
+        return this.roomService.getOne(threadId);
     }
-    handleUpdateComment(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));
+    async deleteThread(threadId) {
+        await this.roomService.deleteOne(threadId);
+        return true;
     }
-    getCurrentUser() {
-        const user = this.sessionService.user;
-        return user ? { id: user.id, type: 'user' } : null;
+    async addComment(threadId, content, author, parentCommentId, contentType = 'text') {
+        const messageContent = { content, contentType };
+        const message = {
+            roomId: threadId,
+            message: messageContent,
+            author,
+            replyId: parentCommentId,
+            reactions: [],
+            seen: [],
+            createdBy: author.id,
+            createdAt: new Date(),
+        };
+        const messageId = await this.messageService.insertOne(message);
+        return this.messageService.getOne(messageId);
     }
-    isLikedByUser(comment) {
-        const user = this.getCurrentUser();
-        if (!user)
-            return false;
-        return (comment.reactions || []).some((r) => r.author.id === user.id && r.type === 'like');
+    async getComments(threadId) {
+        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,
+        });
+        return items;
     }
-    getReactionsCount(comment) {
-        return (comment.reactions || []).filter((r) => r.type === 'like').length;
+    async getComment(commentId) {
+        return this.messageService.getOne(commentId);
     }
-    sanitizeHtml(htmlContent) {
-        if (!htmlContent)
-            return this.sanitize.bypassSecurityTrustHtml('');
-        return this.sanitize.bypassSecurityTrustHtml(htmlContent);
+    async editComment(commentId, content, editor, contentType = 'text') {
+        const messageContent = { content, contentType };
+        await this.messageService.updateOne(commentId, {
+            message: messageContent,
+            updatedAt: new Date(),
+            updatedBy: editor.id,
+        });
+        return this.messageService.getOne(commentId);
     }
-    handleImageError(imageId) {
-        this.failedImageIds.update((ids) => [...ids, imageId]);
+    async deleteComment(commentId) {
+        await this.messageService.deleteOne(commentId);
+        return true;
     }
-    checkImageExists(imageId) {
-        return !this.failedImageIds().includes(imageId);
+    async updateReactions(commentId, reactions) {
+        await this.messageService.updateOne(commentId, { reactions });
+        return this.messageService.getOne(commentId);
     }
-    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,
-                timeOutProgress: true,
-            });
-            this.comments.set([]);
-        }
+    async getReactions(commentId) {
+        const comment = await this.messageService.getOne(commentId);
+        return comment.reactions || [];
     }
-    editMessage(comment, reply, userName) {
-        this.isReplyingMode.set(false);
-        this.activeReplyComment.set(undefined);
-        this.isEditingMode.set(true);
-        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' });
+    async pinComment(commentId, isPinned) {
+        await this.messageService.updateOne(commentId, { isPinned });
+        return this.messageService.getOne(commentId);
     }
-    replyMessage(comment, reply, userName) {
-        this.isEditingMode.set(false);
-        this.activeEditComment.set(undefined);
-        this.isReplyingMode.set(true);
-        this.activeReplyComment.set({ ...comment, userName: userName || '' });
-        if (reply) {
-            const author = reply.author.fullName || reply.author.id;
-            const mention = `<strong><a data-id="${reply.author.username}">@${userName || author}</a></strong> `;
-            this.commentContent.set(mention);
-            document.getElementsByClassName('ql-editor')[0].innerHTML = mention;
-            this.wysiwygEditor()?.focus();
-        }
-        this.wysiwygEditor().getHostElement().scrollIntoView({ behavior: 'smooth', block: 'start' });
-    }
-    async deleteComment(commentId) {
-        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 {
-                            await this.commentService.deleteComment(commentId);
-                            this.removeMessageById(commentId);
-                            this.toastService.show({
-                                content: 'Comment deleted successfully.',
-                                color: 'success',
-                                location: 'bottom-center',
-                                closeButton: true,
-                                timeOut: 3000,
-                                timeOutProgress: true,
-                            });
-                            if (this.isEditingMode() && this.activeEditComment()?.id === commentId) {
-                                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,
-        });
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: AXMCommentServiceImpl, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: AXMCommentServiceImpl, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: AXMCommentServiceImpl, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+class AXMCommentManagementService {
+    constructor() {
+        this.commentImplService = inject(AXMCommentServiceImpl);
+        this.sessionService = inject(AXPSessionService);
+        this.usersService = inject(AXMUsersEntityService);
+        this.realtimeService = inject(AXMCommentRealtimeService);
     }
-    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 = '';
+    getCurrentUser() {
+        const user = this.sessionService.user;
+        if (!user) {
+            throw new Error('No authenticated user found.');
+        }
+        return {
+            id: user.id,
+            type: 'user',
+        };
     }
-    async toggleLike(comment) {
-        const isLiked = this.isLikedByUser(comment);
-        this.updateLikeStatus(comment.id, !isLiked);
+    async getUserInfo(userId) {
         try {
-            if (isLiked) {
-                await this.commentService.unlikeComment(comment.id);
-            }
-            else {
-                await this.commentService.likeComment(comment.id);
-            }
+            await this.usersService.getOne(userId);
+            return { id: userId, type: 'user' };
         }
-        catch (error) {
-            console.error('Failed to toggle like:', error);
-            this.updateLikeStatus(comment.id, isLiked); // Revert optimistic update
+        catch {
+            throw new Error(`User with ID ${userId} not found`);
         }
     }
-    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 {
-                        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 c;
-            });
-        };
-        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 c;
-            });
+    formatComment(message, depth = 0) {
+        return {
+            ...message,
+            depth,
+            replies: [],
+            replyCount: 0,
         };
-        this.comments.update((comments) => filterOut(comments));
     }
-    async submitComment() {
-        if (!this.validateContent(this.commentContent()).result) {
-            return;
-        }
-        this.isSubmitting.set(true);
-        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) {
-                await this.commentService.editComment(this.activeEditComment().id, this.commentContent());
-                this.hasCooldown.set(true);
-                this.isEditingMode.set(false);
-                this.activeEditComment.set(undefined);
+    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 ?? 0) + 1;
             }
             else {
-                await this.commentService.addComment(currentThread.id, this.commentContent(), this.activeReplyComment()?.id);
-                this.hasCooldown.set(true);
-                this.isReplyingMode.set(false);
-                this.activeReplyComment.set(undefined);
+                tree.push(comment);
             }
-            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);
+        });
+        commentMap.forEach((comment) => {
+            comment.replyCount = comment.replies.length;
+        });
+        return tree;
+    }
+    async formatThread(room) {
+        const comments = await this.getComments(room.id, true);
+        return {
+            ...room,
+            comments,
+            commentCount: comments.length,
+        };
+    }
+    async createThread(entityRef, topic, title) {
+        const currentUser = this.getCurrentUser();
+        const newRoom = await this.commentImplService.createThread(currentUser, entityRef, topic, title);
+        const newThread = await this.formatThread(newRoom);
+        this.realtimeService.notifyThread({ type: 'add', payload: newThread });
+        return newThread;
+    }
+    async getThread(entityRef, topic) {
+        const room = await this.commentImplService.getThread(entityRef, topic);
+        if (!room) {
+            return null;
         }
+        return this.formatThread(room);
     }
-    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' });
-                this.highlightedCommentId.set(comment.id);
-                setTimeout(() => {
-                    this.highlightedCommentId.set(null);
-                }, 1000);
-            }
+    async listThreads(entityRef, topic) {
+        const rooms = await this.commentImplService.listThreads(entityRef, topic);
+        return Promise.all(rooms.map((room) => this.formatThread(room)));
+    }
+    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.`);
         }
+        const updatedRoom = await this.commentImplService.updateThread(thread.id, data);
+        const updatedThread = await this.formatThread(updatedRoom);
+        this.realtimeService.notifyThread({ type: 'update', payload: updatedThread });
+        return updatedThread;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXMCommentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", 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: "ngmodule", type: AXFormModule }, { kind: "component", type: i8.AXFormFieldComponent, selector: "ax-form-field", inputs: ["labelMode"] }, { kind: "component", type: i8.AXFormComponent, selector: "ax-form", inputs: ["labelMode", "look", "messageStyle", "updateOn"], outputs: ["onValidate", "updateOnChange"] }, { kind: "directive", type: i8.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }, { kind: "ngmodule", type: AXToolBarModule }, { kind: "component", type: i9.AXToolBarComponent, selector: "ax-toolbar" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i10.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i10.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXDropdownButtonModule }, { kind: "component", type: i11.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"] }, { kind: "pipe", type: i12.AXFormatPipe, name: "format" }, { kind: "pipe", type: AsyncPipe, name: "async" }], 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.1.3", ngImport: i0, type: AXMCommentComponent, decorators: [{
-            type: Component,
-            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,
-                        AXDecoratorModule,
-                        AXCommentModule,
-                        AXButtonModule,
-                        AXAvatarModule,
-                        AXImageModule,
-                        AXLoadingModule,
-                        AXDropdownModule,
-                        AXFormatModule,
-                        AsyncPipe,
-                        AXFormModule,
-                        AXToolBarModule,
-                        FormsModule,
-                        AXDropdownButtonModule,
-                        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"] }]
-        }] });
-
-var comment_component = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    AXMCommentComponent: AXMCommentComponent
-});
-
-class AXMCommentPopupComponent extends AXBasePageComponent {
-    constructor() {
-        super(...arguments);
-        this.refrenceType = input.required(...(ngDevMode ? [{ debugName: "refrenceType" }] : []));
-        this.refrenceId = input.required(...(ngDevMode ? [{ debugName: "refrenceId" }] : []));
-        this.subject = input.required(...(ngDevMode ? [{ debugName: "subject" }] : []));
+    async deleteThread(entityRef, topic) {
+        const thread = await this.getThread(entityRef, topic);
+        if (thread) {
+            await this.commentImplService.deleteThread(thread.id);
+            this.realtimeService.notifyThread({ type: 'remove', payload: thread.id });
+            return true;
+        }
+        return false;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXMCommentPopupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.3", 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: "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: "component", type: 
-                // Comment
-                AXMCommentComponent, selector: "axm-comment", inputs: ["refrenceType", "refrenceId", "subject"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i4$1.AXTranslatorPipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", 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() {
-        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({}, ...(ngDevMode ? [{ debugName: "context" }] : []));
+    async addComment(threadId, content, parentCommentId, contentType = 'text', userId) {
+        const author = userId ? await this.getUserInfo(userId) : this.getCurrentUser();
+        const rawComment = await this.commentImplService.addComment(threadId, content, author, parentCommentId, contentType);
+        const formattedComment = this.formatComment(rawComment);
+        this.realtimeService.notifyComment({ type: 'add', payload: formattedComment });
+        return formattedComment;
     }
-    handleClose() {
-        this.close({
-            lookup: this.context()?.lookup,
-            title: this.context()?.title,
-        });
+    async getComments(threadId, nested) {
+        const rawComments = await this.commentImplService.getComments(threadId);
+        const formattedComments = rawComments.map((c) => this.formatComment(c));
+        if (nested) {
+            return this.buildCommentTree(formattedComments);
+        }
+        return formattedComments;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXMUserLookupPopup, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", 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>
+    async getComment(commentId) {
+        const rawComment = await this.commentImplService.getComment(commentId);
+        return this.formatComment(rawComment);
+    }
+    async editComment(commentId, content, contentType = 'text') {
+        const editor = this.getCurrentUser();
+        const rawComment = await this.commentImplService.editComment(commentId, content, editor, contentType);
+        const formattedComment = this.formatComment(rawComment);
+        this.realtimeService.notifyComment({ type: 'update', payload: formattedComment });
+        return formattedComment;
+    }
+    async deleteComment(commentId) {
+        const result = await this.commentImplService.deleteComment(commentId);
+        if (result) {
+            this.realtimeService.notifyComment({ type: 'remove', payload: commentId });
         }
-      </div>
-    </axp-widgets-container>
-
-    <ax-footer>
-      <ax-suffix>
-        <ax-button
-          text="Accept & Send"
-          color="primary"
-          [disabled]="(context()?.lookup?.length > 1 && !context()?.title) || !context()?.lookup?.length"
-          (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.1.3", 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>
+        return result;
+    }
+    async addReaction(commentId, type) {
+        const author = this.getCurrentUser();
+        const comment = await this.commentImplService.getComment(commentId);
+        const reactions = comment.reactions || [];
+        if (reactions.some((r) => r.author.id === author.id && r.type === type)) {
+            return this.formatComment(comment);
         }
-      </div>
-    </axp-widgets-container>
-
-    <ax-footer>
-      <ax-suffix>
-        <ax-button
-          text="Accept & Send"
-          color="primary"
-          [disabled]="(context()?.lookup?.length > 1 && !context()?.title) || !context()?.lookup?.length"
-          (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, ...(ngDevMode ? [{ debugName: "refrenceType" }] : []));
-        this.refrenceId = computed(() => this.options().refrenceId, ...(ngDevMode ? [{ debugName: "refrenceId" }] : []));
-        this.subject = computed(() => this.options().subject, ...(ngDevMode ? [{ debugName: "subject" }] : []));
+        const updatedReactions = [...reactions, { author, type }];
+        const rawComment = await this.commentImplService.updateReactions(commentId, updatedReactions);
+        const formattedComment = this.formatComment(rawComment);
+        this.realtimeService.notifyComment({ type: 'update', payload: formattedComment });
+        return formattedComment;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXMCommentWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.3", 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.1.3", 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 removeReaction(commentId, type) {
+        const author = this.getCurrentUser();
+        const comment = await this.commentImplService.getComment(commentId);
+        const updatedReactions = (comment.reactions || []).filter((r) => !(r.author.id === author.id && r.type === type));
+        const rawComment = await this.commentImplService.updateReactions(commentId, updatedReactions);
+        const formattedComment = this.formatComment(rawComment);
+        this.realtimeService.notifyComment({ type: 'update', payload: formattedComment });
+        return formattedComment;
     }
-    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')),
-            },
-        });
+    getReactions(commentId) {
+        return this.commentImplService.getReactions(commentId);
+    }
+    likeComment(commentId) {
+        return this.addReaction(commentId, 'like');
+    }
+    unlikeComment(commentId) {
+        return this.removeReaction(commentId, 'like');
+    }
+    async pinComment(commentId) {
+        const rawComment = await this.commentImplService.pinComment(commentId, true);
+        const formattedComment = this.formatComment(rawComment);
+        this.realtimeService.notifyComment({ type: 'update', payload: formattedComment });
+        return formattedComment;
+    }
+    async unpinComment(commentId) {
+        const rawComment = await this.commentImplService.pinComment(commentId, false);
+        const formattedComment = this.formatComment(rawComment);
+        this.realtimeService.notifyComment({ type: 'update', payload: formattedComment });
+        return formattedComment;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXMCommentPopupStartAction, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXMCommentPopupStartAction }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: AXMCommentManagementService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: AXMCommentManagementService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXMCommentPopupStartAction, decorators: [{
-            type: Injectable
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: AXMCommentManagementService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
         }] });
-const AXMCommentPopupWorkflow = {
-    startStepId: 'start',
-    steps: {
-        start: {
-            action: 'show-comment-popup-action',
-        },
-    },
-};
 
-function convertChatMessageToNotification(room, message, currentUser) {
+function convertCommentToNotification(thread, comment, currentUser) {
     return {
         channel: 'InApp',
         template: {
@@ -1903,451 +1801,658 @@ function convertChatMessageToNotification(room, message, currentUser) {
             icon: 'fa-light fa-comment',
             isPinned: false,
         },
-        title: room.title || 'New Message',
-        body: message.message.content,
-        sender: message.author,
+        title: thread.title || 'New Comment',
+        body: comment.message.content,
+        sender: comment.author,
         receiver: currentUser,
-        content: message.message,
+        content: comment.message,
         readAt: null,
-        type: 'Chat',
+        type: 'Comment',
+        data: {
+            threadId: thread.id,
+            refrenceType: thread.entityRef?.type,
+            refrenceId: thread.entityRef?.id,
+        },
     };
 }
 
-//#region ----   Abstract Chat Service   ----
-class AXMChatService {
-}
-//#endregion
-class AXMChatServiceImpl {
+class AXMCommentComponent {
     constructor() {
-        this.roomService = inject(AXMRoomService);
-        this.messageService = inject(AXMMessageService);
-        this.tabService = inject(AXMConversationTabService);
+        this.refrenceType = input.required(...(ngDevMode ? [{ debugName: "refrenceType" }] : []));
+        this.refrenceId = input.required(...(ngDevMode ? [{ debugName: "refrenceId" }] : []));
+        this.subject = input.required(...(ngDevMode ? [{ debugName: "subject" }] : []));
+        this.hasCooldown = signal(false, ...(ngDevMode ? [{ debugName: "hasCooldown" }] : []));
+        this.commentContent = signal('', ...(ngDevMode ? [{ debugName: "commentContent" }] : []));
+        this.isSubmitting = signal(false, ...(ngDevMode ? [{ debugName: "isSubmitting" }] : []));
+        this.isReplyingMode = signal(false, ...(ngDevMode ? [{ debugName: "isReplyingMode" }] : []));
+        this.isEditingMode = signal(false, ...(ngDevMode ? [{ debugName: "isEditingMode" }] : []));
+        this.isLoading = signal(true, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
+        this.failedImageIds = signal([], ...(ngDevMode ? [{ debugName: "failedImageIds" }] : []));
+        this.activeReplyComment = signal(undefined, ...(ngDevMode ? [{ debugName: "activeReplyComment" }] : []));
+        this.activeEditComment = signal(undefined, ...(ngDevMode ? [{ debugName: "activeEditComment" }] : []));
+        this.highlightedCommentId = signal(null, ...(ngDevMode ? [{ debugName: "highlightedCommentId" }] : []));
+        this.wysiwygEditor = viewChild.required('w');
+        this.commentService = inject(AXMCommentManagementService);
+        this.realtimeService = inject(AXMCommentRealtimeService);
         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._tabAdded$ = new Subject();
-        this.tabAdded$ = this._tabAdded$.asObservable();
-        this._tabRemoved$ = new Subject();
-        this.tabRemoved$ = this._tabRemoved$.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);
+        this.toastService = inject(AXToastService);
+        this.dialogService = inject(AXDialogService);
+        this.notificationConnectorService = inject(AXMNotificationConnectorService);
+        this.router = inject(Router);
+        this.sanitize = inject(DomSanitizer);
+        this.destroyRef = inject(DestroyRef);
+        this.comments = signal([], ...(ngDevMode ? [{ debugName: "comments" }] : []));
+        this.thread = signal(undefined, ...(ngDevMode ? [{ debugName: "thread" }] : []));
+        this.wysiwygOptions = signal({
+            look: 'solid',
+        }, ...(ngDevMode ? [{ debugName: "wysiwygOptions" }] : []));
+        this.avatarConfig = signal({
+            color: 'primary',
+            look: 'rounded',
+            type: 'solid',
+        }, ...(ngDevMode ? [{ debugName: "avatarConfig" }] : []));
+        this.validateContent = (content) => {
+            let isValid = true;
+            if (!content || content === '<p><br></p>') {
+                isValid = false;
+            }
             return {
-                ...message,
-                author: authorInfo,
+                rule: 'callback',
+                result: isValid,
+                message: isValid ? '' : 'Please fill the content',
+                value: content,
             };
-        }
-        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,
-            filter: { field: 'type', value: 'chat', operator: { type: 'equal' } },
+    ngOnInit() {
+        this.isLoading.set(true);
+        this.loadComments().finally(() => {
+            setTimeout(() => {
+                this.isLoading.set(false);
+            }, 250);
+        });
+        this.realtimeService.comment$
+            .pipe(takeUntilDestroyed(this.destroyRef), filter((event) => !!event))
+            .subscribe((event) => {
+            switch (event.type) {
+                case 'add':
+                    this.handleAddComment(event.payload);
+                    break;
+                case 'update':
+                    this.handleUpdateComment(event.payload);
+                    break;
+                case 'remove':
+                    this.removeMessageById(event.payload);
+                    break;
+            }
         });
-        const settledRooms = await Promise.allSettled(items.map((room) => this.getRoom(room.id)));
-        const chatRooms = settledRooms
-            .filter((result) => {
-            if (result.status === 'rejected') {
-                console.error('Failed to fetch room details:', result.reason);
-                return false;
-            }
-            return true;
-        })
-            .map((result) => result.value);
-        return { items: chatRooms, total: chatRooms.length };
-    }
-    async updateRoom(roomId, data) {
-        const update = { ...data, updatedAt: new Date(), updatedBy: this.getCurrentUser().id };
-        return this.roomService.updateOne(roomId, update);
     }
-    async deleteRoom(roomId) {
-        try {
-            await this.roomService.deleteOne(roomId);
-            this._roomRemoved$.next(roomId);
-            return true;
+    handleAddComment(comment) {
+        if (comment.author.id !== this.getCurrentUser()?.id) {
+            const notification = convertCommentToNotification(this.thread(), comment, this.sessionService.user);
+            this.notificationConnectorService.create({
+                ...notification,
+                id: comment.id,
+                entityName: 'notifications',
+                createAt: new Date(),
+            }, {
+                onClick: () => {
+                    this.router.navigate([this.refrenceType(), 't', this.refrenceType(), 'i', this.refrenceId()]);
+                },
+                activeWindow: true,
+            });
         }
-        catch (error) {
-            return false;
+        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]);
         }
     }
-    async addParticipant(roomId, userId) {
-        const room = await this.roomService.getOne(roomId);
-        if (room.members.some((m) => m.id === userId))
-            return room;
-        const userRef = await this.getUserInfo(userId);
-        const updatedMembers = [...room.members, userRef];
-        return this.roomService.updateOne(roomId, {
-            members: updatedMembers,
-            updatedAt: new Date(),
-            updatedBy: this.getCurrentUser().id,
-        });
-    }
-    async removeParticipant(roomId, userId) {
-        const room = await this.roomService.getOne(roomId);
-        const updatedMembers = room.members.filter((member) => member.id !== userId);
-        return this.roomService.updateOne(roomId, {
-            members: updatedMembers,
-            updatedAt: new Date(),
-            updatedBy: this.getCurrentUser().id,
-        });
+    handleUpdateComment(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));
     }
-    //#endregion
-    //#region ----   ChatTabService Implementations   ----
-    async createTab(data) {
-        const tabId = await this.tabService.insertOne(data);
-        const newTab = await this.getTab(tabId);
-        this._tabAdded$.next(newTab);
-        return newTab;
+    getCurrentUser() {
+        const user = this.sessionService.user;
+        return user ? { id: user.id, type: 'user' } : null;
     }
-    async getTab(tabId) {
-        return this.tabService.getOne(tabId);
+    isLikedByUser(comment) {
+        const user = this.getCurrentUser();
+        if (!user)
+            return false;
+        return (comment.reactions || []).some((r) => r.author.id === user.id && r.type === 'like');
     }
-    async listTabs(skip = 0, take = 100) {
-        return this.tabService.query({ skip, take });
+    getReactionsCount(comment) {
+        return (comment.reactions || []).filter((r) => r.type === 'like').length;
     }
-    async updateTab(tabId, data) {
-        return this.tabService.updateOne(tabId, data);
+    sanitizeHtml(htmlContent) {
+        if (!htmlContent)
+            return this.sanitize.bypassSecurityTrustHtml('');
+        return this.sanitize.bypassSecurityTrustHtml(htmlContent);
     }
-    async deleteTab(tabId) {
-        try {
-            await this.tabService.deleteOne(tabId);
-            this._tabRemoved$.next(tabId);
-            return true;
-        }
-        catch (error) {
-            console.error(`Error deleting tab ${tabId}:`, error);
-            return false;
-        }
+    handleImageError(imageId) {
+        this.failedImageIds.update((ids) => [...ids, imageId]);
     }
-    async addIncludeRoomToTab(tabId, roomId) {
-        const tab = await this.getTab(tabId);
-        const room = await this.getRoom(roomId);
-        if (tab && room) {
-            const updatedRooms = [...tab.includeRooms, room];
-            return this.updateTab(tabId, { includeRooms: updatedRooms });
-        }
-        else {
-            throw new Error(`Tab with ID ${tabId} or room with ID ${roomId} not found.`);
-        }
+    checkImageExists(imageId) {
+        return !this.failedImageIds().includes(imageId);
     }
-    async removeIncludeRoomFromTab(tabId, roomId) {
-        const tab = await this.getTab(tabId);
-        const room = await this.getRoom(roomId);
-        if (tab && room) {
-            if (tab.includeRooms.some((r) => r.id === roomId)) {
-                const updatedRooms = tab.includeRooms.filter((r) => r.id !== roomId);
-                return this.updateTab(tabId, { includeRooms: updatedRooms });
+    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 {
-                throw new Error(`${tabId} tab does not include room with ID ${roomId}.`);
+                this.comments.set([]);
+                this.thread.set(undefined);
             }
         }
-        else {
-            throw new Error(`Tab with ID ${tabId} or room with ID ${roomId} not found.`);
+        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([]);
         }
     }
-    async addExcludeRoomToTab(tabId, roomId) {
-        const tab = await this.getTab(tabId);
-        const room = await this.getRoom(roomId);
-        if (tab && room) {
-            const updatedRooms = [...tab.excludeRooms, room];
-            return this.updateTab(tabId, { excludeRooms: updatedRooms });
-        }
-        else {
-            throw new Error(`Tab with ID ${tabId} or room with ID ${roomId} not found.`);
+    editMessage(comment, reply, userName) {
+        this.isReplyingMode.set(false);
+        this.activeReplyComment.set(undefined);
+        this.isEditingMode.set(true);
+        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, userName) {
+        this.isEditingMode.set(false);
+        this.activeEditComment.set(undefined);
+        this.isReplyingMode.set(true);
+        this.activeReplyComment.set({ ...comment, userName: userName || '' });
+        if (reply) {
+            const author = reply.author.fullName || reply.author.id;
+            const mention = `<strong><a data-id="${reply.author.username}">@${userName || author}</a></strong> `;
+            this.commentContent.set(mention);
+            document.getElementsByClassName('ql-editor')[0].innerHTML = mention;
+            this.wysiwygEditor()?.focus();
         }
+        this.wysiwygEditor().getHostElement().scrollIntoView({ behavior: 'smooth', block: 'start' });
     }
-    async removeExcludeRoomFromTab(tabId, roomId) {
-        const tab = await this.getTab(tabId);
-        const room = await this.getRoom(roomId);
-        if (tab && room) {
-            if (tab.excludeRooms.some((r) => r.id === roomId)) {
-                const updatedRooms = tab.excludeRooms.filter((r) => r.id !== roomId);
-                return this.updateTab(tabId, { excludeRooms: updatedRooms });
+    async deleteComment(commentId) {
+        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 {
+                            await this.commentService.deleteComment(commentId);
+                            this.removeMessageById(commentId);
+                            this.toastService.show({
+                                content: 'Comment deleted successfully.',
+                                color: 'success',
+                                location: 'bottom-center',
+                                closeButton: true,
+                                timeOut: 3000,
+                                timeOutProgress: true,
+                            });
+                            if (this.isEditingMode() && this.activeEditComment()?.id === commentId) {
+                                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,
+        });
+    }
+    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) {
+        const isLiked = this.isLikedByUser(comment);
+        this.updateLikeStatus(comment.id, !isLiked);
+        try {
+            if (isLiked) {
+                await this.commentService.unlikeComment(comment.id);
             }
             else {
-                throw new Error(`${tabId} tab does not exclude room with ID ${roomId}.`);
+                await this.commentService.likeComment(comment.id);
             }
         }
-        else {
-            throw new Error(`Tab with ID ${tabId} or room with ID ${roomId} not found.`);
+        catch (error) {
+            console.error('Failed to toggle like:', error);
+            this.updateLikeStatus(comment.id, isLiked); // Revert optimistic update
         }
     }
-    //#endregion
-    //#region ----   ChatMessageService Implementations   ----
-    async sendMessage(roomId, content, contentType = 'text', replyId, userId) {
-        const author = userId ? await this.getUserInfo(userId) : this.getCurrentUser();
-        const messageContent = { content, contentType };
-        const message = {
-            roomId,
-            message: messageContent,
-            author,
-            replyId,
-            createdAt: new Date(),
-            updatedAt: new Date(),
-            createdBy: this.getCurrentUser().id,
-            updatedBy: this.getCurrentUser().id,
-            reactions: [],
-            seen: [],
+    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 {
+                        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 c;
+            });
         };
-        const messageId = await this.messageService.insertOne({ ...message });
-        const newMessage = await this.messageService.getOne(messageId);
-        const formattedMessage = await this.formatMessage(newMessage);
-        this._messageSent$.next(formattedMessage);
-        return formattedMessage;
-    }
-    async getMessages(roomId, skip = 0, take = 99) {
-        const result = await this.messageService.query({
-            skip,
-            take,
-            filter: { field: 'roomId', value: roomId, operator: { type: 'equal' } },
-            sort: [{ field: 'createdAt', dir: 'desc' }],
-        });
-        const formattedMessages = await Promise.all(result.items.map((m) => this.formatMessage(m)));
-        return { items: formattedMessages, total: result.total };
-    }
-    async getMessage(messageId) {
-        const message = await this.messageService.getOne(messageId);
-        return this.formatMessage(message);
+        this.comments.update((comments) => findAndToggle(comments));
     }
-    async editMessage(messageId, content, contentType = 'text') {
-        const messageContent = { content, contentType };
-        return this.messageService.updateOne(messageId, {
-            message: messageContent,
-            updatedAt: new Date(),
-            updatedBy: this.getCurrentUser().id,
-        });
+    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 c;
+            });
+        };
+        this.comments.update((comments) => filterOut(comments));
     }
-    async deleteMessage(messageId) {
+    async submitComment() {
+        if (!this.validateContent(this.commentContent()).result) {
+            return;
+        }
+        this.isSubmitting.set(true);
+        console.log(this.commentContent());
         try {
-            await this.messageService.deleteOne(messageId);
-            this._messageRemoved$.next(messageId);
-            return true;
+            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) {
+                await this.commentService.editComment(this.activeEditComment().id, this.commentContent());
+                this.hasCooldown.set(true);
+                this.isEditingMode.set(false);
+                this.activeEditComment.set(undefined);
+            }
+            else {
+                await this.commentService.addComment(currentThread.id, this.commentContent(), this.activeReplyComment()?.id);
+                this.hasCooldown.set(true);
+                this.isReplyingMode.set(false);
+                this.activeReplyComment.set(undefined);
+            }
+            this.commentContent.set('');
+            document.getElementsByClassName('ql-editor')[0].innerHTML = '';
+            setTimeout(() => {
+                this.hasCooldown.set(false);
+            }, 1000);
         }
         catch (error) {
-            return false;
+            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);
         }
     }
-    async replyMessage(replyToMessageId, content, contentType = 'text') {
-        const originalMessage = await this.messageService.getOne(replyToMessageId);
-        return this.sendMessage(originalMessage.roomId, content, contentType, replyToMessageId);
-    }
-    async pinMessage(messageId) {
-        return this.messageService.updateOne(messageId, {
-            isPinned: true,
-            updatedAt: new Date(),
-            updatedBy: this.getCurrentUser().id,
-        });
-    }
-    async unpinMessage(messageId) {
-        return this.messageService.updateOne(messageId, {
-            isPinned: false,
-            updatedAt: new Date(),
-            updatedBy: this.getCurrentUser().id,
-        });
-    }
-    //#endregion
-    //#region ----   ChatReactionService Implementations   ----
-    async addReaction(messageId, type) {
-        const author = this.getCurrentUser();
-        const message = await this.messageService.getOne(messageId);
-        const reactions = message.reactions || [];
-        if (reactions.some((r) => r.author.id === author.id && r.type === type)) {
-            return message;
+    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' });
+                this.highlightedCommentId.set(comment.id);
+                setTimeout(() => {
+                    this.highlightedCommentId.set(null);
+                }, 1000);
+            }
         }
-        const updatedReactions = [...reactions, { author, type }];
-        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));
-        const res = await this.messageService.updateOne(messageId, {
-            reactions: updatedReactions,
-            updatedAt: new Date(),
-            updatedBy: this.getCurrentUser().id,
-        });
-        this._messageReacted$.next(res);
-        return res;
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: AXMCommentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", 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: "ngmodule", type: AXFormModule }, { kind: "component", type: i8.AXFormFieldComponent, selector: "ax-form-field", inputs: ["labelMode"] }, { kind: "component", type: i8.AXFormComponent, selector: "ax-form", inputs: ["labelMode", "look", "messageStyle", "updateOn"], outputs: ["onValidate", "updateOnChange"] }, { kind: "directive", type: i8.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }, { kind: "ngmodule", type: AXToolBarModule }, { kind: "component", type: i9.AXToolBarComponent, selector: "ax-toolbar" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i10.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i10.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXDropdownButtonModule }, { kind: "component", type: i11.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"] }, { kind: "pipe", type: i12.AXFormatPipe, name: "format" }, { kind: "pipe", type: AsyncPipe, name: "async" }], 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.1.4", ngImport: i0, type: AXMCommentComponent, decorators: [{
+            type: Component,
+            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,
+                        AXDecoratorModule,
+                        AXCommentModule,
+                        AXButtonModule,
+                        AXAvatarModule,
+                        AXImageModule,
+                        AXLoadingModule,
+                        AXDropdownModule,
+                        AXFormatModule,
+                        AsyncPipe,
+                        AXFormModule,
+                        AXToolBarModule,
+                        FormsModule,
+                        AXDropdownButtonModule,
+                        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"] }]
+        }] });
+
+var comment_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    AXMCommentComponent: AXMCommentComponent
+});
+
+class AXMCommentPopupComponent extends AXBasePageComponent {
+    constructor() {
+        super(...arguments);
+        this.refrenceType = input.required(...(ngDevMode ? [{ debugName: "refrenceType" }] : []));
+        this.refrenceId = input.required(...(ngDevMode ? [{ debugName: "refrenceId" }] : []));
+        this.subject = input.required(...(ngDevMode ? [{ debugName: "subject" }] : []));
     }
-    async getReactions(messageId) {
-        const message = await this.messageService.getOne(messageId);
-        return message.reactions || [];
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: AXMCommentPopupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.4", 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: "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: "component", type: 
+                // Comment
+                AXMCommentComponent, selector: "axm-comment", inputs: ["refrenceType", "refrenceId", "subject"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i4$1.AXTranslatorPipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", 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() {
+        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({}, ...(ngDevMode ? [{ debugName: "context" }] : []));
     }
-    //#endregion
-    //#region ----   ChatSeenService Implementations   ----
-    async markSeen(messageId) {
-        const author = this.getCurrentUser();
-        const message = await this.messageService.getOne(messageId);
-        const seen = message.seen || [];
-        if (seen.some((s) => s.author.id === author.id)) {
-            return message;
-        }
-        const updatedSeen = [...seen, { author, type: 'read' }];
-        const updatedMessage = await this.messageService.updateOne(messageId, {
-            seen: updatedSeen,
-            updatedAt: new Date(),
-            updatedBy: this.getCurrentUser().id,
+    handleClose() {
+        this.close({
+            lookup: this.context()?.lookup,
+            title: this.context()?.title,
         });
-        this._messageSeen$.next(await this.formatMessage(updatedMessage));
-        return updatedMessage;
-    }
-    async getSeenBy(messageId) {
-        const message = await this.messageService.getOne(messageId);
-        return message.seen || [];
     }
-    async markRoomSeen(roomId) {
-        try {
-            if (!roomId) {
-                return true;
-            }
-            const { items } = await this.getMessages(roomId, 0, 99);
-            const currentUserId = this.getCurrentUser().id;
-            const unreadMessages = items.filter((message) => message.author.id !== currentUserId && !message.seen?.some((s) => s.author.id === currentUserId));
-            if (unreadMessages.length > 0) {
-                await Promise.all(unreadMessages.map((message) => this.markSeen(message.id)));
-            }
-            this._roomSeen$.next(roomId);
-            return true;
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: AXMUserLookupPopup, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", 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>
         }
-        catch (error) {
-            console.error(`Error marking room ${roomId} as seen:`, error);
-            return false;
+      </div>
+    </axp-widgets-container>
+
+    <ax-footer>
+      <ax-suffix>
+        <ax-button
+          text="Accept & Send"
+          color="primary"
+          [disabled]="(context()?.lookup?.length > 1 && !context()?.title) || !context()?.lookup?.length"
+          (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.1.4", 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) || !context()?.lookup?.length"
+          (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, ...(ngDevMode ? [{ debugName: "refrenceType" }] : []));
+        this.refrenceId = computed(() => this.options().refrenceId, ...(ngDevMode ? [{ debugName: "refrenceId" }] : []));
+        this.subject = computed(() => this.options().subject, ...(ngDevMode ? [{ debugName: "subject" }] : []));
     }
-    //#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.1.3", ngImport: i0, type: AXMChatServiceImpl, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXMChatServiceImpl, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: AXMCommentWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.4", 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.1.3", ngImport: i0, type: AXMChatServiceImpl, decorators: [{
-            type: Injectable,
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: AXMCommentWidgetViewComponent, decorators: [{
+            type: Component,
             args: [{
-                    providedIn: 'root',
+                    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.1.4", ngImport: i0, type: AXMCommentPopupStartAction, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: AXMCommentPopupStartAction }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: AXMCommentPopupStartAction, decorators: [{
+            type: Injectable
+        }] });
+const AXMCommentPopupWorkflow = {
+    startStepId: 'start',
+    steps: {
+        start: {
+            action: 'show-comment-popup-action',
+        },
+    },
+};
+
+function convertChatMessageToNotification(room, message, currentUser) {
+    return {
+        channel: 'InApp',
+        template: {
+            category: 'Inbox',
+            prority: 'Notice',
+            icon: 'fa-light fa-comment',
+            isPinned: false,
+        },
+        title: room.title || 'New Message',
+        body: message.message.content,
+        sender: message.author,
+        receiver: currentUser,
+        content: message.message,
+        readAt: null,
+        type: 'Chat',
+        data: {
+            roomId: room.id,
+        },
+    };
+}
+
 class AXMChatItemComponent {
     constructor() {
         // Input
@@ -2435,10 +2540,10 @@ class AXMChatItemComponent {
         }
         return '';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXMChatItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", 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()?.isTyping) {\n          <div class=\"ax-pb-1 ax-flex ax-justify-center ax-items-end ax-gap-1\">\n            <span class=\"ax-text-on-surface-light ax-font-semibold ax-capitalize ax-whitespace-nowrap ax-text-sm\">\n              @if (!chatName().isPrivate) {\n                {{ typing()?.user }}\n              }\n              {{ 'is-typing' | translate: { scope: 'conversation' } | async }}\n            </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 ax-whitespace-nowrap\">\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:.3rem}.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"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i4$1.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: AXMChatItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", 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()?.isTyping) {\n          <div class=\"ax-pb-1 ax-flex ax-justify-center ax-items-end ax-gap-1\">\n            <span class=\"ax-text-on-surface-light ax-font-semibold ax-capitalize ax-whitespace-nowrap ax-text-sm\">\n              @if (!chatName().isPrivate) {\n                {{ typing()?.user }}\n              }\n              {{ 'is-typing' | translate: { scope: 'conversation' } | async }}\n            </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 ax-whitespace-nowrap\">\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:.4rem}.typing-indicator span{height:4px;width:4px;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"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i4$1.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXMChatItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: AXMChatItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'axm-chat-item', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         AXDecoratorModule,
@@ -2448,19 +2553,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
                         AXDecoratorModule,
                         AXTranslationModule,
                         AsyncPipe,
-                    ], 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()?.isTyping) {\n          <div class=\"ax-pb-1 ax-flex ax-justify-center ax-items-end ax-gap-1\">\n            <span class=\"ax-text-on-surface-light ax-font-semibold ax-capitalize ax-whitespace-nowrap ax-text-sm\">\n              @if (!chatName().isPrivate) {\n                {{ typing()?.user }}\n              }\n              {{ 'is-typing' | translate: { scope: 'conversation' } | async }}\n            </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 ax-whitespace-nowrap\">\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:.3rem}.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"] }]
+                    ], 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()?.isTyping) {\n          <div class=\"ax-pb-1 ax-flex ax-justify-center ax-items-end ax-gap-1\">\n            <span class=\"ax-text-on-surface-light ax-font-semibold ax-capitalize ax-whitespace-nowrap ax-text-sm\">\n              @if (!chatName().isPrivate) {\n                {{ typing()?.user }}\n              }\n              {{ 'is-typing' | translate: { scope: 'conversation' } | async }}\n            </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 ax-whitespace-nowrap\">\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:.4rem}.typing-indicator span{height:4px;width:4px;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 {
     constructor() {
         super(...arguments);
         this.activatedRoute = inject(ActivatedRoute);
-        this.chatService = inject(AXMChatService);
+        this.chatService = inject(AXMChatManagementService);
+        this.realtimeService = inject(AXMChatRealtimeService);
         this.popupService = inject(AXPopupService);
         this.dialogService = inject(AXDialogService);
         this.router = inject(Router);
         this.unsubscribe = inject(AXUnsubscriber);
-        this.osNotificationService = inject(AXMOsNotificationService);
         this.notificationConnectorService = inject(AXMNotificationConnectorService);
         // View Children
         this.tab = viewChild('tab', ...(ngDevMode ? [{ debugName: "tab" }] : []));
@@ -2554,7 +2659,7 @@ class AXMChatComponent extends AXPPageLayoutBaseComponent {
         super.ngOnInit();
         this.isLoading.set(true);
         this.error.set(null);
-        await Promise.all([this.loadChats(), this.loadTabs(), this.osNotificationService.requestPermission()]);
+        await Promise.all([this.loadChats(), this.loadTabs()]);
         this.isLoading.set(false);
         //
         this.router.events
@@ -2563,34 +2668,85 @@ class AXMChatComponent extends AXPPageLayoutBaseComponent {
             await this.loadFromRoute();
         });
         //
-        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.realtimeService.room$.pipe(this.unsubscribe.takeUntilDestroy).subscribe((event) => {
+            switch (event.type) {
+                case 'add':
+                    this.allRooms.update((rooms) => [event.payload, ...rooms.filter((r) => r.id !== event.payload.id)]);
+                    break;
+                case 'remove':
+                    this.allRooms.update((rooms) => rooms.filter((r) => r.id !== event.payload));
+                    if (event.payload === this.selectedRoom()?.id) {
+                        this.selectedRoom.set(null);
+                        this.router.navigate(['./'], { relativeTo: this.activatedRoute });
+                    }
+                    break;
+                case 'update':
+                    this.allRooms.update((rooms) => rooms.map((r) => (r.id === event.payload.id ? event.payload : r)));
+                    break;
+                case 'seen':
+                    this.allRooms.update((rooms) => rooms.map((room) => (room.id === event.payload ? { ...room, unreadCount: 0 } : room)));
+                    break;
             }
         });
-        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 };
+        this.realtimeService.message$.pipe(this.unsubscribe.takeUntilDestroy).subscribe((event) => {
+            switch (event.type) {
+                case 'add': {
+                    const message = event.payload;
+                    const rooms = this.allRooms();
+                    const roomIndex = rooms.findIndex((r) => r.id === message.roomId);
+                    if (roomIndex > -1) {
+                        const roomToUpdate = rooms[roomIndex];
+                        const isCurrentUser = message.author.id === this.sessionService.user?.id;
+                        const updatedRoom = {
+                            ...roomToUpdate,
+                            lastMessage: message,
+                            unreadCount: !isCurrentUser ? (roomToUpdate.unreadCount || 0) + 1 : roomToUpdate.unreadCount,
+                        };
+                        const newRooms = [updatedRoom, ...rooms.filter((r) => r.id !== message.roomId)];
+                        this.allRooms.set(newRooms);
+                        if (!isCurrentUser && (this.selectedRoom()?.id !== message.roomId || document.hidden)) {
+                            const notification = convertChatMessageToNotification(roomToUpdate, message, this.sessionService.user);
+                            this.notificationConnectorService.create({
+                                ...notification,
+                                id: message.id,
+                                entityName: 'notifications',
+                                createAt: new Date(),
+                            }, {
+                                onClick: () => {
+                                    this.router.navigate([roomToUpdate.id], { relativeTo: this.activatedRoute });
+                                },
+                                activeWindow: true,
+                            });
+                        }
+                    }
+                    else {
+                        this.chatService.getRoom(message.roomId).then((newRoom) => {
+                            this.allRooms.update((currentRooms) => [newRoom, ...currentRooms]);
+                        });
+                    }
+                    break;
                 }
-                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 };
+                case 'update': {
+                    const message = event.payload;
+                    this.allRooms.update((rooms) => {
+                        return rooms.map((room) => {
+                            if (room.lastMessage?.id === message.id) {
+                                return {
+                                    ...room,
+                                    lastMessage: {
+                                        ...room.lastMessage,
+                                        ...message,
+                                    },
+                                };
+                            }
+                            return room;
+                        });
+                    });
+                    break;
                 }
-                return room;
-            });
-            this.allRooms.set(updatedRooms);
+            }
         });
-        this.chatService.typingStatus$.pipe(this.unsubscribe.takeUntilDestroy).subscribe(async (status) => {
+        this.realtimeService.typingStatus$.pipe(this.unsubscribe.takeUntilDestroy).subscribe(async (status) => {
             const currentUserId = this.sessionService.user?.id;
             if (status.user.id !== currentUserId) {
                 if (status.isTyping) {
@@ -2607,70 +2763,6 @@ class AXMChatComponent extends AXPPageLayoutBaseComponent {
                 }
             }
         });
-        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 isCurrentUser = message.author.id === this.sessionService.user?.id;
-                const updatedRoom = {
-                    ...roomToUpdate,
-                    lastMessage: message,
-                    unreadCount: !isCurrentUser ? (roomToUpdate.unreadCount || 0) + 1 : roomToUpdate.unreadCount,
-                };
-                const newRooms = [updatedRoom, ...rooms.filter((r) => r.id !== message.roomId)];
-                this.allRooms.set(newRooms);
-                //
-                if (!isCurrentUser && this.selectedRoom()?.id !== message.roomId) {
-                    const notification = convertChatMessageToNotification(roomToUpdate, message, this.sessionService.user);
-                    this.notificationConnectorService.create({
-                        ...notification,
-                        id: message.id,
-                        entityName: 'notifications',
-                        createAt: new Date(),
-                    }, {
-                        onClick: () => {
-                            this.router.navigate([roomToUpdate.id], { relativeTo: this.activatedRoute });
-                        },
-                        activeWindow: true,
-                    });
-                    // this.osNotificationService.show(notification.title || 'Notification', {
-                    //   body: notification.body || 'No body',
-                    //   icon: notification.user.image || '',
-                    //   onClick: () => {
-                    //     this.router.navigate([roomToUpdate.id], { relativeTo: this.activatedRoute });
-                    //   },
-                    //   activeWindow: true,
-                    // });
-                }
-                //
-            }
-            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');
@@ -2881,14 +2973,14 @@ class AXMChatComponent extends AXPPageLayoutBaseComponent {
             this.toastService.danger('Failed to create room');
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXMChatComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: AXMChatComponent, isStandalone: true, selector: "axm-chat", host: { listeners: { "document:keydown.escape": "onKeydownHandler($event)" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: AXMChatComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", 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 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 ax-mb-2\"\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<ng-template #template>\n  <!-- Tabs -->\n  <div [class]=\"!layoutService.isMobileDevice() ? 'ax-px-4': ''\">\n    <ax-tabs\n      #tab\n      class=\"ax-text-neutral-400\"\n      [look]=\"'with-line'\"\n      [location]=\"'bottom'\"\n      [fitParent]=\"true\"\n      (onActiveTabChanged)=\"activeTabIndex.set($event.index)\"\n    >\n      @for (tab of tabs(); track tab.id; let i = $index) {\n        <ax-tab-item [text]=\"tab.title\" [active]=\"activeTabIndex() === i\">\n          <ax-suffix>\n            <ax-badge\n              [text]=\"getRoomCountForTab(tab).toString()\"\n              [color]=\"activeTabIndex() === i ? 'primary' : 'secondary'\"\n              class=\"ax-min-w-[1.5rem] ax-justify-center\"\n            ></ax-badge>\n          </ax-suffix>\n        </ax-tab-item>\n      }\n    </ax-tabs>\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]=\"tabs().length > 0\"\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    } @else 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    } @else {\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])\"\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        } @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              There are no conversations in this tab.\n            }\n          </div>\n        }\n      </div>\n    }\n\n    <!-- Footer Content -->\n    @if (!layoutService.isMobileDevice()) {\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    } @else {\n      <ax-button\n        class=\"ax-fixed ax-bottom-16 ax-right-8 !ax-rounded-full !ax-w-14 !ax-h-14 ax-shadow-lg\"\n        color=\"primary\"\n        (onClick)=\"onNewConversation()\"\n      >\n        <ax-icon class=\"ax-text-2xl\">\n          <i class=\"fa-solid fa-plus\"></i>\n        </ax-icon>\n      </ax-button>\n    }\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: 
+        ], 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 ax-mb-2\"\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<ng-template #template>\n  <!-- Tabs -->\n  <div [class]=\"!layoutService.isMobileDevice() ? 'ax-px-4' : ''\">\n    <ax-tabs\n      #tab\n      class=\"ax-text-neutral-400 !ax-overflow-x-hidden\"\n      [look]=\"'with-line'\"\n      [location]=\"'bottom'\"\n      [fitParent]=\"true\"\n      (onActiveTabChanged)=\"activeTabIndex.set($event.index)\"\n    >\n      @for (tab of tabs(); track tab.id; let i = $index) {\n        <ax-tab-item [text]=\"tab.title\" [active]=\"activeTabIndex() === i\">\n          <ax-suffix>\n            <ax-badge\n              [text]=\"getRoomCountForTab(tab).toString()\"\n              [color]=\"activeTabIndex() === i ? 'primary' : 'secondary'\"\n              class=\"ax-min-w-[1.5rem] ax-justify-center\"\n            ></ax-badge>\n          </ax-suffix>\n        </ax-tab-item>\n      }\n    </ax-tabs>\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]=\"tabs().length > 0\"\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    } @else 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    } @else {\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])\"\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        } @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              There are no conversations in this tab.\n            }\n          </div>\n        }\n      </div>\n    }\n\n    <!-- Footer Content -->\n    @if (!layoutService.isMobileDevice()) {\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    } @else {\n      <ax-button\n        class=\"ax-fixed ax-bottom-16 ax-right-8 !ax-rounded-full !ax-w-14 !ax-h-14 ax-shadow-lg\"\n        color=\"primary\"\n        (onClick)=\"onNewConversation()\"\n      >\n        <ax-icon class=\"ax-text-2xl\">\n          <i class=\"fa-solid fa-plus\"></i>\n        </ax-icon>\n      </ax-button>\n    }\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$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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
@@ -2904,7 +2996,7 @@ class AXMChatComponent extends AXPPageLayoutBaseComponent {
             ]),
         ], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXMChatComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: AXMChatComponent, decorators: [{
             type: Component,
             args: [{ selector: 'axm-chat', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {
@@ -2954,7 +3046,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
                                 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 ax-mb-2\"\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<ng-template #template>\n  <!-- Tabs -->\n  <div [class]=\"!layoutService.isMobileDevice() ? 'ax-px-4': ''\">\n    <ax-tabs\n      #tab\n      class=\"ax-text-neutral-400\"\n      [look]=\"'with-line'\"\n      [location]=\"'bottom'\"\n      [fitParent]=\"true\"\n      (onActiveTabChanged)=\"activeTabIndex.set($event.index)\"\n    >\n      @for (tab of tabs(); track tab.id; let i = $index) {\n        <ax-tab-item [text]=\"tab.title\" [active]=\"activeTabIndex() === i\">\n          <ax-suffix>\n            <ax-badge\n              [text]=\"getRoomCountForTab(tab).toString()\"\n              [color]=\"activeTabIndex() === i ? 'primary' : 'secondary'\"\n              class=\"ax-min-w-[1.5rem] ax-justify-center\"\n            ></ax-badge>\n          </ax-suffix>\n        </ax-tab-item>\n      }\n    </ax-tabs>\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]=\"tabs().length > 0\"\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    } @else 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    } @else {\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])\"\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        } @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              There are no conversations in this tab.\n            }\n          </div>\n        }\n      </div>\n    }\n\n    <!-- Footer Content -->\n    @if (!layoutService.isMobileDevice()) {\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    } @else {\n      <ax-button\n        class=\"ax-fixed ax-bottom-16 ax-right-8 !ax-rounded-full !ax-w-14 !ax-h-14 ax-shadow-lg\"\n        color=\"primary\"\n        (onClick)=\"onNewConversation()\"\n      >\n        <ax-icon class=\"ax-text-2xl\">\n          <i class=\"fa-solid fa-plus\"></i>\n        </ax-icon>\n      </ax-button>\n    }\n  </div>\n</ng-template>\n" }]
+                    ], 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 ax-mb-2\"\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<ng-template #template>\n  <!-- Tabs -->\n  <div [class]=\"!layoutService.isMobileDevice() ? 'ax-px-4' : ''\">\n    <ax-tabs\n      #tab\n      class=\"ax-text-neutral-400 !ax-overflow-x-hidden\"\n      [look]=\"'with-line'\"\n      [location]=\"'bottom'\"\n      [fitParent]=\"true\"\n      (onActiveTabChanged)=\"activeTabIndex.set($event.index)\"\n    >\n      @for (tab of tabs(); track tab.id; let i = $index) {\n        <ax-tab-item [text]=\"tab.title\" [active]=\"activeTabIndex() === i\">\n          <ax-suffix>\n            <ax-badge\n              [text]=\"getRoomCountForTab(tab).toString()\"\n              [color]=\"activeTabIndex() === i ? 'primary' : 'secondary'\"\n              class=\"ax-min-w-[1.5rem] ax-justify-center\"\n            ></ax-badge>\n          </ax-suffix>\n        </ax-tab-item>\n      }\n    </ax-tabs>\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]=\"tabs().length > 0\"\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    } @else 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    } @else {\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])\"\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        } @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              There are no conversations in this tab.\n            }\n          </div>\n        }\n      </div>\n    }\n\n    <!-- Footer Content -->\n    @if (!layoutService.isMobileDevice()) {\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    } @else {\n      <ax-button\n        class=\"ax-fixed ax-bottom-16 ax-right-8 !ax-rounded-full !ax-w-14 !ax-h-14 ax-shadow-lg\"\n        color=\"primary\"\n        (onClick)=\"onNewConversation()\"\n      >\n        <ax-icon class=\"ax-text-2xl\">\n          <i class=\"fa-solid fa-plus\"></i>\n        </ax-icon>\n      </ax-button>\n    }\n  </div>\n</ng-template>\n" }]
         }], propDecorators: { onKeydownHandler: [{
                 type: HostListener,
                 args: ['document:keydown.escape', ['$event']]
@@ -3243,9 +3335,11 @@ class AXMChatPreviewComponent {
     constructor() {
         this.activatedRoute = inject(ActivatedRoute);
         this.fileService = inject(AXFileService);
-        this.chatService = inject(AXMChatService);
+        this.chatService = inject(AXMChatManagementService);
+        this.realtimeService = inject(AXMChatRealtimeService);
         this.sessionService = inject(AXPSessionService);
         this.toastService = inject(AXToastService);
+        this.unsubscribe = inject(AXUnsubscriber);
         this.inputRef = viewChild(AXConversationInputComponent, ...(ngDevMode ? [{ debugName: "inputRef" }] : []));
         this.activeMessage = signal(null, ...(ngDevMode ? [{ debugName: "activeMessage" }] : []));
         this.typing$ = new Subject();
@@ -3284,24 +3378,37 @@ class AXMChatPreviewComponent {
                 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.realtimeService.message$.pipe(this.unsubscribe.takeUntilDestroy).subscribe(async (event) => {
+            if (event.type === 'add') {
+                const message = event.payload;
+                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];
+                    });
+                }
+            }
+            else if (event.type === 'remove') {
+                this.chatData.update((values) => values.filter((item) => item.id !== event.payload));
+            }
+            else if (event.type === 'update') {
+                const message = event.payload;
+                const convertedNewMessage = convertToChatPreview(this.sessionService.user?.id || '', {
+                    items: [message],
+                    total: 1,
+                })[0];
+                this.chatData.update((values) => values.map((item) => (item.id === message.id ? { ...convertedNewMessage, ...item } : item)));
+            }
+        });
+        this.typingSubscription = this.typing$.pipe(debounceTime(1000)).subscribe(() => {
+            if (this.roomId) {
+                this.chatService.stopTyping(this.roomId);
             }
         });
-        // this.typingSubscription = this.typing$.pipe(debounceTime(1000)).subscribe(() => {
-        //   if (this.roomId) {
-        //     this.chatService.stopTyping(this.roomId);
-        //   }
-        // });
     }
     //GO TO LAST MESSAGE EFFECT.
     #af;
@@ -3473,10 +3580,10 @@ class AXMChatPreviewComponent {
             input.setActionBoxContainer(icon, message?.content || this.activeMessage()?.content || '');
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXMChatPreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", 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: i10.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i10.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: ["onActionClose", "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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: AXMChatPreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", 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: i10.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i10.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: ["onActionClose", "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.1.3", ngImport: i0, type: AXMChatPreviewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.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        (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"] }]
         }] });
@@ -3486,6 +3593,114 @@ var chatPreview_component = /*#__PURE__*/Object.freeze({
     AXMChatPreviewComponent: AXMChatPreviewComponent
 });
 
+class AXMChatNotificationContentComponent {
+    constructor() {
+        this.item = input(...(ngDevMode ? [undefined, { debugName: "item" }] : []));
+        this.execute = output();
+    }
+    onMarkAsSeen(e) {
+        e.nativeEvent.stopPropagation();
+        this.execute.emit({ name: 'mark-as-seen' });
+    }
+    goToChat(e) {
+        e.nativeEvent.stopPropagation();
+        this.execute.emit({ name: 'go-to-chat' });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: AXMChatNotificationContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.4", type: AXMChatNotificationContentComponent, isStandalone: true, selector: "axm-chat-notification-content", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { execute: "execute" }, ngImport: i0, template: `
+    <div class="ax-text-sm ax-mt-1 ax-line-clamp-2">
+      <p>{{ item()?.body || 'You have a new message.' }}</p>
+      <div class="ax-flex ax-gap-2 ax-pt-2">
+        <!-- <ax-button (onClick)="onMarkAsSeen($event)" [text]="'Mark as Seen'"></ax-button>
+        <ax-button (onClick)="goToChat($event)" [text]="'Go to Chat'"></ax-button> -->
+      </div>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXButtonModule }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: AXMChatNotificationContentComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'axm-chat-notification-content',
+                    template: `
+    <div class="ax-text-sm ax-mt-1 ax-line-clamp-2">
+      <p>{{ item()?.body || 'You have a new message.' }}</p>
+      <div class="ax-flex ax-gap-2 ax-pt-2">
+        <!-- <ax-button (onClick)="onMarkAsSeen($event)" [text]="'Mark as Seen'"></ax-button>
+        <ax-button (onClick)="goToChat($event)" [text]="'Go to Chat'"></ax-button> -->
+      </div>
+    </div>
+  `,
+                    standalone: true,
+                    imports: [CommonModule, AXButtonModule],
+                }]
+        }] });
+
+class AXMChatNotificationProvider {
+    constructor(injector) {
+        this.injector = injector;
+        this.name = 'Chat';
+        this.title = 'Chat';
+        this.icon = 'fa-solid fa-comment-sms';
+    }
+    content() {
+        return Promise.resolve(AXMChatNotificationContentComponent);
+    }
+    async execute(command, item) {
+        const router = this.injector.get(Router);
+        const chatService = this.injector.get(AXMChatManagementService);
+        const activatedRoute = this.injector.get(ActivatedRoute);
+        const roomId = item.data?.['roomId'];
+        if (!roomId) {
+            console.error('Room ID is missing from notification item.');
+            return;
+        }
+        const app = activatedRoute.snapshot.firstChild?.paramMap.get('app') || 'platform';
+        switch (command.name) {
+            case 'mark-as-seen':
+                await chatService.markRoomSeen(roomId);
+                break;
+            case 'go-to-chat':
+                router.navigate([app, 'chat', roomId]);
+                break;
+            case 'click':
+                router.navigate([app, 'chat', roomId]);
+                break;
+            default:
+                break;
+        }
+    }
+}
+class AXMCommentNotificationProvider {
+    constructor(injector) {
+        this.injector = injector;
+        this.name = 'Comment';
+        this.title = 'Comment';
+        this.icon = 'fa-solid fa-comment';
+    }
+    async execute(command, item) {
+        console.log('Comment notification clicked', item);
+        // Placeholder for comment execution logic
+    }
+}
+const AXM_CONVERSATION_NOTIFICATION_PROVIDERS = [
+    {
+        provide: AXP_NOTIFICATION_DEFINITION_PROVIDER,
+        useFactory: (injector) => {
+            return new AXMChatNotificationProvider(injector);
+        },
+        deps: [Injector],
+        multi: true,
+    },
+    {
+        provide: AXP_NOTIFICATION_DEFINITION_PROVIDER,
+        useFactory: (injector) => {
+            return new AXMCommentNotificationProvider(injector);
+        },
+        deps: [Injector],
+        multi: true,
+    },
+];
+
 function routesFactory() {
     const routes = [
         {
@@ -3548,11 +3763,11 @@ function routesFactory() {
     return routes;
 }
 class AXMConversationModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXMConversationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.1.3", ngImport: i0, type: AXMConversationModule, imports: [i2$1.AXPLayoutBuilderModule, i2$5.AXPWorkflowModule], exports: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: AXMConversationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.1.4", 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.1.3", ngImport: i0, type: AXMConversationModule, providers: [
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: AXMConversationModule, providers: [
             // Services
             {
                 provide: AXMMessageService,
@@ -3571,6 +3786,10 @@ class AXMConversationModule {
                 provide: AXMChatService,
                 useClass: AXMChatServiceImpl,
             },
+            {
+                provide: AXMChatRealtimeService,
+                useClass: AXMChatRealtimeServiceImpl,
+            },
             {
                 provide: AXMCommentService,
                 useClass: AXMCommentServiceImpl,
@@ -3604,6 +3823,7 @@ class AXMConversationModule {
             // Conversation Module
             importProvidersFrom(AXConversationModule.forRoot()),
             DatePipe,
+            ...AXM_CONVERSATION_NOTIFICATION_PROVIDERS,
         ], imports: [AXPLayoutBuilderModule.forChild({
                 widgets: [AXPCommentWidget],
             }),
@@ -3618,7 +3838,7 @@ class AXMConversationModule {
             // Modules
             RouterModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXMConversationModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: AXMConversationModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [],
@@ -3658,6 +3878,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
                             provide: AXMChatService,
                             useClass: AXMChatServiceImpl,
                         },
+                        {
+                            provide: AXMChatRealtimeService,
+                            useClass: AXMChatRealtimeServiceImpl,
+                        },
                         {
                             provide: AXMCommentService,
                             useClass: AXMCommentServiceImpl,
@@ -3691,6 +3915,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
                         // Conversation Module
                         importProvidersFrom(AXConversationModule.forRoot()),
                         DatePipe,
+                        ...AXM_CONVERSATION_NOTIFICATION_PROVIDERS,
                     ],
                 }]
         }] });
@@ -3699,5 +3924,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AXMChatComponent, AXMChatItemComponent, AXMChatPreviewComponent, AXMChatService, AXMChatServiceImpl, AXMCommentComponent, AXMCommentManagementService, AXMCommentPopupComponent, AXMCommentPopupStartAction, AXMCommentPopupWorkflow, AXMCommentRealtimeService, AXMCommentRealtimeServiceImpl, AXMCommentService, AXMCommentServiceImpl, AXMCommentWidgetViewComponent, AXMConversationModule, AXMConversationTabService, AXMConversationTabServiceImpl, AXMMessageService, AXMMessageServiceImpl, AXMRoomService, AXMRoomServiceImpl, AXMUserLookupPopup, AXPCommentWidget, RootConfig, messageFactory, roomFactory, tabFactory };
+export { AXMChatComponent, AXMChatItemComponent, AXMChatManagementService, AXMChatPreviewComponent, AXMChatRealtimeService, AXMChatRealtimeServiceImpl, AXMChatService, AXMChatServiceImpl, AXMCommentComponent, AXMCommentManagementService, AXMCommentPopupComponent, AXMCommentPopupStartAction, AXMCommentPopupWorkflow, AXMCommentRealtimeService, AXMCommentRealtimeServiceImpl, AXMCommentService, AXMCommentServiceImpl, AXMCommentWidgetViewComponent, AXMConversationModule, AXMConversationTabService, AXMConversationTabServiceImpl, AXMMessageService, AXMMessageServiceImpl, AXMRoomService, AXMRoomServiceImpl, AXMUserLookupPopup, AXPCommentWidget, RootConfig, messageFactory, roomFactory, tabFactory };
 //# sourceMappingURL=acorex-modules-conversation.mjs.map