@acorex/modules 20.0.5 → 20.0.6

package/fesm2022/acorex-modules-conversation.mjs

@@ -1,69 +1,70 @@
-import * as i3$1 from '@acorex/cdk/resizable';
+import * as i2$4 from '@acorex/components/conversation';
+import { AXConversationModule } from '@acorex/components/conversation';
+import { AXPSessionService, AXPAuthGuard } from '@acorex/platform/auth';
+import { AXMEntityCrudServiceImpl, AXP_ENTITY_DEFINITION_LOADER } from '@acorex/platform/layout/entity';
+import { AXPRootLayoutComponent } from '@acorex/platform/themes/default';
+import * as i1$1 from '@angular/common';
+import { AsyncPipe, DatePipe, CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { Injectable, inject, signal, Component, viewChild, computed, ChangeDetectionStrategy, input, output, effect, afterNextRender, importProvidersFrom, NgModule } from '@angular/core';
+import * as i2$3 from '@angular/router';
+import { ActivatedRoute, Router, NavigationEnd, RouterModule, ROUTES } from '@angular/router';
+import { createAllQueryView, AXPEntityCommandScope, AXPEntityQueryType } from '@acorex/platform/common';
+import * as i2 from '@acorex/platform/layout/builder';
+import { AXPWidgetsCatalog, AXPLayoutBuilderModule, AXPLayoutWidgetComponent, AXPWidgetGroupEnum } from '@acorex/platform/layout/builder';
 import { AXResizableDirective } from '@acorex/cdk/resizable';
-import * as i2 from '@acorex/components/avatar';
+import * as i6 from '@acorex/components/avatar';
 import { AXAvatarModule } from '@acorex/components/avatar';
-import * as i3 from '@acorex/components/badge';
+import * as i2$2 from '@acorex/components/badge';
 import { AXBadgeModule } from '@acorex/components/badge';
-import * as i6$1 from '@acorex/components/button';
+import * as i5$1 from '@acorex/components/button';
 import { AXButtonModule } from '@acorex/components/button';
-import * as i2$4 from '@acorex/components/comment';
+import * as i4 from '@acorex/components/comment';
 import { AXCommentModule } from '@acorex/components/comment';
-import * as i2$2 from '@acorex/components/conversation';
-import { AXConversationModule } from '@acorex/components/conversation';
 import * as i5 from '@acorex/components/decorators';
 import { AXDecoratorModule } from '@acorex/components/decorators';
-import * as i11$1 from '@acorex/components/dropdown';
+import * as i9 from '@acorex/components/dropdown';
 import { AXDropdownModule } from '@acorex/components/dropdown';
-import * as i10$1 from '@acorex/components/dropdown-button';
+import * as i14 from '@acorex/components/dropdown-button';
 import { AXDropdownButtonModule } from '@acorex/components/dropdown-button';
-import * as i9 from '@acorex/components/form';
+import * as i11 from '@acorex/components/form';
 import { AXFormModule } from '@acorex/components/form';
-import * as i1 from '@acorex/components/image';
+import * as i7 from '@acorex/components/image';
 import { AXImageModule } from '@acorex/components/image';
 import { AXLabelModule } from '@acorex/components/label';
-import * as i5$1 from '@acorex/components/loading';
+import * as i8 from '@acorex/components/loading';
 import { AXLoadingModule } from '@acorex/components/loading';
-import * as i6 from '@acorex/components/search-box';
+import { AXPopupService } from '@acorex/components/popup';
+import * as i6$1 from '@acorex/components/search-box';
 import { AXSearchBoxModule } from '@acorex/components/search-box';
 import { AXSelectBoxModule } from '@acorex/components/select-box';
-import * as i13 from '@acorex/components/skeleton';
+import * as i2$1 from '@acorex/components/skeleton';
 import { AXSkeletonModule } from '@acorex/components/skeleton';
-import * as i7 from '@acorex/components/tabs';
+import * as i7$1 from '@acorex/components/tabs';
 import { AXTabsModule } from '@acorex/components/tabs';
 import { AXTextBoxModule } from '@acorex/components/text-box';
 import * as i12 from '@acorex/components/toolbar';
 import { AXToolBarModule } from '@acorex/components/toolbar';
-import * as i8 from '@acorex/components/wysiwyg';
-import { AXWysiwygContainerComponent, AXWysiwygModule } from '@acorex/components/wysiwyg';
-import * as i15 from '@acorex/core/format';
+import * as i1 from '@acorex/components/wysiwyg';
+import { AXWysiwygModule, AXWysiwygContainerComponent } from '@acorex/components/wysiwyg';
+import * as i10 from '@acorex/core/format';
 import { AXFormatModule } from '@acorex/core/format';
+import * as i3 from '@acorex/core/translation';
 import { AXTranslationModule } from '@acorex/core/translation';
-import * as i11 from '@acorex/platform/layout/components';
-import { AXPThemeLayoutBlockComponent, AXPThemeLayoutStartSideComponent, AXPThemeLayoutHeaderComponent, AXPThemeLayoutToolbarComponent } from '@acorex/platform/layout/components';
-import { AXMEntityCrudServiceImpl, AXP_ENTITY_DEFINITION_LOADER } from '@acorex/platform/layout/entity';
-import * as i10 from '@acorex/platform/layout/views';
-import { AXPPageLayoutComponent } from '@acorex/platform/layout/views';
-import { AXPRootLayoutComponent } from '@acorex/platform/themes/default';
-import * as i14 from '@angular/common';
-import { AsyncPipe, CommonModule } from '@angular/common';
-import * as i0 from '@angular/core';
-import { Injectable, inject, input, output, computed, ChangeDetectionStrategy, Component, viewChild, signal, afterNextRender, importProvidersFrom, NgModule } from '@angular/core';
-import * as i1$1 from '@angular/forms';
-import { FormsModule } from '@angular/forms';
-import * as i2$1 from '@angular/router';
-import { Router, ActivatedRoute, RouterModule } from '@angular/router';
-import { createAllQueryView, AXPEntityCommandScope, AXPEntityQueryType } from '@acorex/platform/common';
-import * as i2$3 from '@acorex/platform/layout/builder';
-import { AXPWidgetsCatalog, AXPLayoutBuilderModule, AXPLayoutWidgetComponent, AXPWidgetGroupEnum } from '@acorex/platform/layout/builder';
+import { AXUnsubscriber } from '@acorex/core/utils';
 import { AXMUsersEntityService } from '@acorex/modules/security-management';
-import { AXPSessionService } from '@acorex/platform/auth';
-import { AXFileService } from '@acorex/core/file';
+import { AXPUserAvatarComponent, AXPThemeLayoutBlockComponent, AXPThemeLayoutStartSideComponent, AXPThemeLayoutHeaderComponent, AXPThemeLayoutToolbarComponent } from '@acorex/platform/layout/components';
+import { AXPPageLayoutBaseComponent, AXPPageLayoutComponent, AXPPageLayoutBase } from '@acorex/platform/layout/views';
+import * as i13 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import { Subject, filter, startWith } from 'rxjs';
 import { AXDialogService } from '@acorex/components/dialog';
-import { AXPopupService } from '@acorex/components/popup';
 import { AXToastService } from '@acorex/components/toast';
 import { AXPlatform } from '@acorex/core/platform';
 import { DomSanitizer } from '@angular/platform-browser';
 import { AXBasePageComponent } from '@acorex/components/page';
+import { AXDomChangeDirective } from '@acorex/cdk/dom';
+import { AXFileService } from '@acorex/core/file';
 import { AXValidationModule } from '@acorex/core/validation';
 
 const config = {
@@ -677,11 +678,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImpor
         }], ctorParameters: () => [{ type: i0.Injector }] });
 
 /**
- * Abstract Chat Service defining the contract for chat functionality
+ * Abstract Comment Service defining the contract for comment functionality
  */
-class AXMChatService {
+class AXMCommentService {
 }
-class AXMChatServiceImpl {
+class AXMCommentServiceImpl {
     constructor() {
         this.roomService = inject(AXMRoomService);
         this.messageService = inject(AXMMessageService);
@@ -701,49 +702,92 @@ class AXMChatServiceImpl {
             const user = await this.usersService.getOne(userId);
             return {
                 id: user.id,
-                type: 'user',
+                userName: user.username || user.id,
+                firstName: user.firstName || '',
+                lastName: user.lastName || '',
+                fullName: `${user.firstName || ''} ${user.lastName || ''}`.trim() || 'Unknown User',
+                avatar: '',
             };
         }
         catch (error) {
             console.error(`Failed to get user info for ID: ${userId}`, error);
             return {
                 id: userId,
-                type: 'user',
+                userName: userId,
+                firstName: 'Unknown',
+                lastName: 'User',
+                fullName: 'Unknown User',
+                avatar: '',
             };
         }
     }
-    formatMessage(message) {
+    formatRoomId(entityId, instanceId, roomType = 'default') {
+        return `${roomType}:${entityId}:${instanceId}`;
+    }
+    async formatComment(message) {
         const currentUserId = this.getCurrentUser().id;
+        // Check if the current user has liked this message
+        const isLiked = (message.reactions || []).some((reaction) => reaction.author.id === currentUserId && reaction.type === 'like');
+        // Count total reactions
+        const reactionsCount = (message.reactions || []).filter((r) => r.type === 'like').length;
+        // Get the full user info for the author
+        const userInfo = await this.getUserInfo(message.author.id);
         return {
             ...message,
+            author: {
+                ...message.author,
+                ...userInfo,
+            },
             isFromCurrentUser: message.author.id === currentUserId,
             formattedDate: new Date(message.createdAt || new Date()).toLocaleString(),
-            hasSeen: (message.seen || []).length > 0,
+            isLiked,
+            reactionsCount,
+            replies: [],
         };
     }
-    async formatMember(userRef) {
-        try {
-            const user = await this.usersService.getOne(userRef.id);
-            return {
-                id: user.id,
-                firstName: user.firstName || '',
-                lastName: user.lastName || '',
-                fullName: `${user.firstName || ''} ${user.lastName || ''}`.trim(),
-                avatar: '', // Default empty string since avatar doesn't exist in the model
-                isOnline: Math.random() > 0.5, // Mockup for demo
-            };
+    async buildCommentHierarchy(comments) {
+        // Create a map for quick lookup of comments by ID
+        const commentMap = new Map();
+        const rootComments = [];
+        // First pass: add all comments to the map
+        for (const comment of comments) {
+            commentMap.set(comment.id, comment);
+            // Initialize the replies array if not already present
+            if (!comment.replies) {
+                comment.replies = [];
+            }
+            // If this is a root comment (no replyId), add it to the root comments array
+            if (!comment.replyId) {
+                rootComments.push(comment);
+            }
         }
-        catch (error) {
-            console.error(`Failed to format member for ID: ${userRef.id}`, error);
-            return {
-                id: userRef.id,
-                firstName: 'Unknown',
-                lastName: 'User',
-                fullName: 'Unknown User',
-                avatar: '',
-                isOnline: false,
-            };
+        // Second pass: build the hierarchy by adding replies to their parent comments
+        for (const comment of comments) {
+            if (comment.replyId) {
+                const parentComment = commentMap.get(comment.replyId);
+                if (parentComment && parentComment.replies) {
+                    parentComment.replies.push(comment);
+                }
+                else {
+                    // If parent not found (might be deleted), treat as a root comment
+                    rootComments.push(comment);
+                }
+            }
+        }
+        // Sort the root comments and their replies by creation date (newest first)
+        const sortByDate = (a, b) => {
+            const dateA = a.createdAt ? new Date(a.createdAt).getTime() : 0;
+            const dateB = b.createdAt ? new Date(b.createdAt).getTime() : 0;
+            return dateB - dateA;
+        };
+        rootComments.sort(sortByDate);
+        // Sort the replies within each comment
+        for (const comment of rootComments) {
+            if (comment.replies && comment.replies.length > 0) {
+                comment.replies.sort(sortByDate);
+            }
         }
+        return rootComments;
     }
     // === Room Operations ===
     async getRoomList(skip = 0, take = 100) {
@@ -755,23 +799,41 @@ class AXMChatServiceImpl {
     async createRoom(roomData) {
         return this.roomService.insertOne(roomData);
     }
-    async addRoomMember(roomId, userId) {
-        const room = await this.getRoomDetails(roomId);
-        const userRef = await this.getUserInfo(userId);
-        const updatedMembers = [...room.members, userRef];
-        return this.roomService.updateOne(roomId, { members: updatedMembers });
-    }
-    async removeRoomMember(roomId, memberId) {
-        const room = await this.getRoomDetails(roomId);
-        const updatedMembers = room.members.filter((member) => member.id !== memberId);
-        return this.roomService.updateOne(roomId, { members: updatedMembers });
-    }
-    async deleteRoom(roomId) {
-        return this.roomService.deleteOne(roomId);
+    async ensureRoomExists(entityId, instanceId, roomType = 'default') {
+        const roomId = this.formatRoomId(entityId, instanceId, roomType);
+        try {
+            // Check if room exists
+            await this.getRoomDetails(roomId);
+            return roomId;
+        }
+        catch (error) {
+            // If room doesn't exist, create it
+            const roomData = {
+                id: roomId, // Provide the ID directly for comments
+                title: `Comments for ${entityId}:${instanceId}`,
+                members: [this.getCurrentUser()],
+            };
+            // Create a new room or return the ID if it already exists
+            try {
+                const result = await this.createRoom(roomData);
+                return typeof result === 'string' ? result : roomId;
+            }
+            catch (e) {
+                // If we get a duplicate error, the room was created by another request
+                return roomId;
+            }
+        }
     }
-    // === Message Operations ===
-    async listMessages(roomId, skip = 0, take = 100) {
-        return this.messageService.query({
+    // === Comment Operations ===
+    async query(queryRequest) {
+        const { params, skip = 0, take = 20 } = queryRequest;
+        const { entityId, instanceId, roomType = 'default' } = params || {};
+        if (!entityId || !instanceId) {
+            throw new Error('EntityId and InstanceId are required for querying comments');
+        }
+        const roomId = this.formatRoomId(entityId, instanceId, roomType);
+        // Fetch messages for this room
+        const result = await this.messageService.query({
             skip,
             take,
             filter: {
@@ -780,816 +842,671 @@ class AXMChatServiceImpl {
                 operator: { type: 'equal' },
             },
         });
+        // Transform messages to comments
+        const comments = await Promise.all(result.items.map((message) => this.formatComment(message)));
+        // Build comment hierarchy
+        const hierarchicalComments = await this.buildCommentHierarchy(comments);
+        return {
+            items: hierarchicalComments,
+            total: result.total,
+        };
     }
-    async sendMessage(roomId, content, contentType = 'text', replyId) {
-        const author = this.getCurrentUser();
+    async getOne(id) {
+        const message = await this.messageService.getOne(id);
+        return this.formatComment(message);
+    }
+    async insertOne(commentData) {
+        const { entityId, instanceId, roomType = 'default', content, contentType = 'text', replyId, isPrivate, } = commentData;
+        // Ensure the room exists
+        const roomId = await this.ensureRoomExists(entityId, instanceId, roomType);
+        // Create the message content
         const messageContent = {
             content,
             contentType,
         };
+        // Create the message object
         const message = {
             roomId,
             message: messageContent,
-            author,
-            replyId,
+            author: this.getCurrentUser(),
+            replyId: replyId || null,
+            reactions: [],
+            seen: [],
         };
+        // Insert the message
         const messageId = await this.messageService.insertOne(message);
-        return this.messageService.getOne(messageId);
+        // Fetch the full message to return as a comment entity
+        const insertedMessage = await this.messageService.getOne(messageId);
+        return this.formatComment(insertedMessage);
     }
-    async editMessage(messageId, content, contentType = 'text') {
-        const messageContent = {
-            content,
-            contentType,
-        };
-        return this.messageService.updateOne(messageId, { message: messageContent });
+    async updateOne(id, update) {
+        // If content is being updated, format it correctly
+        let messageUpdate = {};
+        if (update.message?.content) {
+            messageUpdate.message = {
+                content: update.message.content,
+                contentType: update.message.contentType || 'text',
+            };
+        }
+        // Apply the update
+        const result = await this.messageService.updateOne(id, messageUpdate);
+        // Return as a comment entity
+        return this.formatComment(result);
     }
-    async deleteMessage(messageId) {
+    async deleteOne(id) {
         try {
-            await this.messageService.deleteOne(messageId);
+            await this.messageService.deleteOne(id);
             return true;
         }
         catch (error) {
-            console.error('Failed to delete message:', error);
+            console.error('Failed to delete comment:', error);
             return false;
         }
     }
-    async markAsSeen(messageId) {
-        const author = this.getCurrentUser();
-        const message = await this.messageService.getOne(messageId);
-        // Check if this user has already seen the message
-        const alreadySeen = (message.seen || []).some((seen) => seen.author.id === author.id);
-        if (alreadySeen) {
-            return message;
-        }
-        const seen = message.seen || [];
-        const updatedSeen = [...seen, { author, type: 'read' }];
-        return this.messageService.updateOne(messageId, { seen: updatedSeen });
-    }
-    async addReaction(messageId, type) {
+    // === Comment-Specific Operations ===
+    async like(messageId) {
         const author = this.getCurrentUser();
         const message = await this.messageService.getOne(messageId);
-        // Check if this user has already added this reaction
-        const existingReaction = (message.reactions || []).find((reaction) => reaction.author.id === author.id && reaction.type === type);
+        // Check if the user has already liked this message
+        const reactions = message.reactions || [];
+        const existingReaction = reactions.find((r) => r.author.id === author.id && r.type === 'like');
+        let updatedReactions;
         if (existingReaction) {
-            // If the reaction already exists, remove it (toggle behavior)
-            return this.removeReaction(messageId, type);
+            // If the reaction exists, remove it (unlike)
+            updatedReactions = reactions.filter((r) => !(r.author.id === author.id && r.type === 'like'));
         }
-        const reactions = message.reactions || [];
-        const updatedReactions = [...reactions, { author, type }];
-        return this.messageService.updateOne(messageId, { reactions: updatedReactions });
-    }
-    async removeReaction(messageId, type) {
-        const author = this.getCurrentUser();
-        const message = await this.messageService.getOne(messageId);
-        const reactions = message.reactions || [];
-        const updatedReactions = reactions.filter((reaction) => !(reaction.author.id === author.id && reaction.type === type));
-        return this.messageService.updateOne(messageId, { reactions: updatedReactions });
+        else {
+            // If the reaction doesn't exist, add it (like)
+            updatedReactions = [...reactions, { author, type: 'like' }];
+        }
+        // Update the message with the new reactions
+        const updatedMessage = await this.messageService.updateOne(messageId, { reactions: updatedReactions });
+        // Return as a comment entity
+        return this.formatComment(updatedMessage);
     }
-    // === UI-specific Operations ===
-    async markChatAsRead(roomId) {
+    async getCommentCount(entityId, instanceId, roomType = 'default') {
+        const roomId = this.formatRoomId(entityId, instanceId, roomType);
         try {
-            // Get all unread messages for this room
-            const messages = await this.listMessages(roomId);
-            const currentUserId = this.getCurrentUser().id;
-            // Mark each unread message as seen
-            const markPromises = messages.items
-                .filter((message) => {
-                // Only mark messages that are not from the current user and not already seen by them
-                const isFromCurrentUser = message.author.id === currentUserId;
-                const isAlreadySeen = (message.seen || []).some((seen) => seen.author.id === currentUserId);
-                return !isFromCurrentUser && !isAlreadySeen;
-            })
-                .map((message) => this.markAsSeen(message.id));
-            await Promise.all(markPromises);
-            return true;
+            const result = await this.messageService.query({
+                skip: 0,
+                take: 1,
+                filter: {
+                    field: 'roomId',
+                    value: roomId,
+                    operator: { type: 'equal' },
+                },
+            });
+            return result.total;
         }
         catch (error) {
-            console.error('Failed to mark chat as read:', error);
-            return false;
+            console.error('Failed to get comment count:', error);
+            return 0;
         }
     }
-    async getUnreadCount(roomId) {
-        const messages = await this.listMessages(roomId);
-        const currentUserId = this.getCurrentUser().id;
-        return messages.items.filter((message) => {
-            // Count messages that are not from the current user and not already seen by them
-            const isFromCurrentUser = message.author.id === currentUserId;
-            const isAlreadySeen = (message.seen || []).some((seen) => seen.author.id === currentUserId);
-            return !isFromCurrentUser && !isAlreadySeen;
-        }).length;
-    }
-    async getChatRoom(roomId) {
-        const room = await this.getRoomDetails(roomId);
-        const messages = await this.listMessages(roomId, 0, 1);
-        const lastMessage = messages.items.length > 0 ? this.formatMessage(messages.items[0]) : undefined;
-        const unreadCount = await this.getUnreadCount(roomId);
-        const roomMembers = await Promise.all(room.members.map((member) => this.formatMember(member)));
-        return {
-            ...room,
-            lastMessage,
-            unreadCount,
-            roomMembers,
-        };
-    }
-    async getAllChatRooms(skip = 0, take = 100) {
-        const rooms = await this.getRoomList(skip, take);
-        const chatRooms = await Promise.all(rooms.items.map(async (room) => {
-            const messages = await this.listMessages(room.id, 0, 1);
-            const lastMessage = messages.items.length > 0 ? this.formatMessage(messages.items[0]) : undefined;
-            const unreadCount = await this.getUnreadCount(room.id);
-            const roomMembers = await Promise.all(room.members.map((member) => this.formatMember(member)));
-            return {
-                ...room,
-                lastMessage,
-                unreadCount,
-                roomMembers,
-            };
-        }));
-        return {
-            items: chatRooms,
-            total: rooms.total,
-        };
-    }
-    async getChatMessages(roomId, skip = 0, take = 20) {
-        const result = await this.listMessages(roomId, skip, take);
-        const formattedMessages = result.items.map((message) => this.formatMessage(message));
-        return {
-            items: formattedMessages,
-            total: result.total,
+    async getAllCommentsWithReplies(entityId, instanceId, roomType = 'default', skip = 0, take = 100) {
+        const queryRequest = {
+            params: { entityId, instanceId, roomType },
+            skip,
+            take,
         };
+        return this.query(queryRequest);
     }
-    async createNewConversation(memberIds) {
-        // Add current user if not already included
-        const currentUser = this.getCurrentUser();
-        const hasCurrentUser = memberIds.includes(currentUser.id);
-        const allMemberIds = hasCurrentUser ? memberIds : [...memberIds, currentUser.id];
-        try {
-            // Get user info for all members
-            const memberReferences = await Promise.all(allMemberIds.map((id) => this.getUserInfo(id)));
-            // Get user names for title
-            const userNames = await Promise.all(memberReferences.map(async (ref) => {
-                try {
-                    const user = await this.usersService.getOne(ref.id);
-                    return `${user.firstName} ${user.lastName}`.trim();
-                }
-                catch (error) {
-                    return ref.id;
-                }
-            }));
-            // Create a new room - this returns just the ID as a string
-            const roomId = await this.createRoom({
-                members: memberReferences,
-                title: userNames.join(', '),
-            });
-            // Get the full room data with the ID
-            return this.getChatRoom(roomId);
-        }
-        catch (error) {
-            console.error('Failed to create conversation:', error);
-            throw error;
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXMChatServiceImpl, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXMChatServiceImpl, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXMCommentServiceImpl, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXMCommentServiceImpl, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXMChatServiceImpl, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXMCommentServiceImpl, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
                 }]
         }] });
 
-class AXMChatItemComponent {
+class AXMCommentLookupPopup extends AXBasePageComponent {
     constructor() {
-        // Input
-        this.data = input.required();
-        // Output
-        this.pressChatItem = output();
-        // Services
-        this.sessionService = inject(AXPSessionService);
-        this.router = inject(Router);
-        this.activatedRoute = inject(ActivatedRoute);
-        // Computed values
-        this.fullName = computed(() => {
-            const member = this.data().roomMembers?.[0];
-            return member ? member.fullName : 'Unknown User';
-        });
-        this.lastMessage = computed(() => {
-            return this.data().lastMessage?.message?.content || 'No messages yet';
-        });
-        this.lastMessageDate = computed(() => {
-            const message = this.data().lastMessage;
-            if (!message)
-                return '';
-            return message.formattedDate || '';
-        });
-        this.hasUnread = computed(() => {
-            return this.data().unreadCount > 0;
-        });
-        this.unreadCount = computed(() => {
-            return this.data().unreadCount.toString();
-        });
-        this.isOnline = computed(() => {
-            const member = this.data().roomMembers?.[0];
-            return member?.isOnline || false;
-        });
-        this.myId = this.sessionService.user?.id;
-    }
-    // Methods
-    extractInitials(name) {
-        if (!name)
-            return '?';
-        const words = name.split(' ');
-        const initials = words.map((word) => word.charAt(0).toUpperCase());
-        return initials.join('');
+        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({});
     }
-    onPressChatItem(id) {
-        this.pressChatItem.emit(id);
+    handleClose() {
+        this.close({
+            lookup: this.context()?.lookup,
+            title: this.context()?.title,
+        });
     }
-    messageSeenStatus() {
-        const lastMessage = this.data().lastMessage;
-        if (!lastMessage)
-            return '';
-        // Check if current user is the author
-        if (this.myId === lastMessage.author?.id) {
-            // Check if message has been seen by anyone
-            return lastMessage.hasSeen ? 'ax-icon-dobble-check' : 'ax-icon-check';
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXMCommentLookupPopup, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: AXMCommentLookupPopup, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `<axp-widgets-container [context]="context()" (onContextChanged)="context.set($event.data)">
+      <div class="ax-p-4 ax-flex ax-flex-col ax-gap-4">
+        <ng-container axp-widget-renderer [node]="lookupNode" [mode]="'edit'"> </ng-container>
+        @if (context()?.lookup?.length > 1) {
+          <ng-container axp-widget-renderer [node]="titleNode" [mode]="'edit'"> </ng-container>
         }
-        return '';
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXMChatItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: AXMChatItemComponent, isStandalone: false, selector: "axm-chat-item", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { pressChatItem: "pressChatItem" }, ngImport: i0, template: "<div\n  [id]=\"data().id\"\n  class=\"ax-cursor-pointer ax-p-4 ax-flex ax-items-center ax-justify-between ax-gap-4 ax-transition-all ax-duration-200 hover:ax-bg-surface-hover ax-rounded-lg 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      <ax-avatar class=\"ax-relative\" color=\"primary\" shape=\"rounded\" [size]=\"48\">\n        @if (data().roomMembers && data().roomMembers.length > 0 && data().roomMembers[0].avatar) {\n          <ax-image [src]=\"data().roomMembers[0].avatar\" class=\"ax-rounded-lg\">\n            <ax-loading></ax-loading>\n          </ax-image>\n        } @else {\n          <ax-text>\n            <span class=\"ax-text-base ax-font-medium\">{{ extractInitials(fullName()) }}</span>\n          </ax-text>\n        }\n\n        <!-- Online Status Indicator -->\n        @if (isOnline()) {\n          <ax-badge class=\"ax-absolute ax-bottom-1 ax-end-1 !ax-size-3 !ax-border-2 !ax-border-surface\" color=\"success\">\n          </ax-badge>\n        }\n      </ax-avatar>\n    </div>\n\n    <!-- User Details and Last Message -->\n    <div class=\"ax-flex ax-flex-col ax-min-w-0 ax-flex-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\">{{ fullName() }}</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 (lastMessageDate()) {\n            <span class=\"ax-text-xs ax-text-on-surface-variant ax-whitespace-nowrap\">\n              {{ lastMessageDate() }}\n            </span>\n          }\n        </div>\n      </div>\n      <div class=\"ax-flex ax-items-center ax-gap-2 ax-mt-1\">\n        <p class=\"ax-text-sm ax-text-on-surface-variant ax-truncate\">\n          {{ lastMessage() }}\n        </p>\n        @if (hasUnread()) {\n          <ax-badge color=\"primary\" [text]=\"unreadCount()\" class=\"ax-flex-shrink-0 ax-ml-auto\"></ax-badge>\n        }\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: i1.AXImageComponent, selector: "ax-image", inputs: ["width", "height", "overlayMode", "src", "alt", "priority", "lazy"], outputs: ["onLoad", "onError"] }, { kind: "component", type: i2.AXAvatarComponent, selector: "ax-avatar", inputs: ["color", "size", "shape", "look"], outputs: ["sizeChange"] }, { kind: "component", type: i3.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "text", "look"] }, { kind: "component", type: i5.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i5.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "component", type: i5$1.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+      </div>
+    </axp-widgets-container>
+
+    <ax-footer>
+      <ax-suffix>
+        <ax-button
+          text="Accept & Send"
+          color="primary"
+          [disabled]="context()?.lookup?.length > 1 && !context()?.title"
+          (onClick)="handleClose()"
+        ></ax-button>
+      </ax-suffix>
+    </ax-footer>`, isInline: true, dependencies: [{ kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i5.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "component", type: i2.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i2.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged"], exportAs: ["widgetRenderer"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i5$1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXMChatItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXMCommentLookupPopup, decorators: [{
             type: Component,
-            args: [{ selector: 'axm-chat-item', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, 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-transition-all ax-duration-200 hover:ax-bg-surface-hover ax-rounded-lg 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      <ax-avatar class=\"ax-relative\" color=\"primary\" shape=\"rounded\" [size]=\"48\">\n        @if (data().roomMembers && data().roomMembers.length > 0 && data().roomMembers[0].avatar) {\n          <ax-image [src]=\"data().roomMembers[0].avatar\" class=\"ax-rounded-lg\">\n            <ax-loading></ax-loading>\n          </ax-image>\n        } @else {\n          <ax-text>\n            <span class=\"ax-text-base ax-font-medium\">{{ extractInitials(fullName()) }}</span>\n          </ax-text>\n        }\n\n        <!-- Online Status Indicator -->\n        @if (isOnline()) {\n          <ax-badge class=\"ax-absolute ax-bottom-1 ax-end-1 !ax-size-3 !ax-border-2 !ax-border-surface\" color=\"success\">\n          </ax-badge>\n        }\n      </ax-avatar>\n    </div>\n\n    <!-- User Details and Last Message -->\n    <div class=\"ax-flex ax-flex-col ax-min-w-0 ax-flex-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\">{{ fullName() }}</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 (lastMessageDate()) {\n            <span class=\"ax-text-xs ax-text-on-surface-variant ax-whitespace-nowrap\">\n              {{ lastMessageDate() }}\n            </span>\n          }\n        </div>\n      </div>\n      <div class=\"ax-flex ax-items-center ax-gap-2 ax-mt-1\">\n        <p class=\"ax-text-sm ax-text-on-surface-variant ax-truncate\">\n          {{ lastMessage() }}\n        </p>\n        @if (hasUnread()) {\n          <ax-badge color=\"primary\" [text]=\"unreadCount()\" class=\"ax-flex-shrink-0 ax-ml-auto\"></ax-badge>\n        }\n      </div>\n    </div>\n  </div>\n</div>\n" }]
+            args: [{
+                    template: `<axp-widgets-container [context]="context()" (onContextChanged)="context.set($event.data)">
+      <div class="ax-p-4 ax-flex ax-flex-col ax-gap-4">
+        <ng-container axp-widget-renderer [node]="lookupNode" [mode]="'edit'"> </ng-container>
+        @if (context()?.lookup?.length > 1) {
+          <ng-container axp-widget-renderer [node]="titleNode" [mode]="'edit'"> </ng-container>
+        }
+      </div>
+    </axp-widgets-container>
+
+    <ax-footer>
+      <ax-suffix>
+        <ax-button
+          text="Accept & Send"
+          color="primary"
+          [disabled]="context()?.lookup?.length > 1 && !context()?.title"
+          (onClick)="handleClose()"
+        ></ax-button>
+      </ax-suffix>
+    </ax-footer>`,
+                    imports: [AXDecoratorModule, AXPLayoutBuilderModule, AXButtonModule],
+                }]
         }] });
 
-class AXMChatComponent {
+class AXMCommentListViewComponent {
     constructor() {
+        this.hasCooldown = signal(false);
+        this.commentContent = signal('');
+        this.isSubmitting = signal(false);
+        this.isReplyingMode = signal(false);
+        this.isEditingMode = signal(false);
+        this.isLoading = signal(true);
+        this.failedImageIds = signal([]);
+        this.activeReplyComment = signal(undefined);
+        this.activeEditComment = signal(undefined);
+        this.wysiwygEditor = viewChild.required('w');
+        this.commentService = inject(AXMCommentService);
+        this.platform = inject(AXPlatform);
         this.route = inject(ActivatedRoute);
-        this.router = inject(Router);
-        this.chatService = inject(AXMChatService);
-        // View Children
-        this.tab = viewChild('tab');
-        // State signals
-        this.rooms = signal([]);
-        this.allRooms = signal([]);
-        this.selectedRoom = signal(null);
-        this.isLoading = signal(false);
-        this.error = signal(null);
-        this.activeTab = signal(0);
-        this.isSearching = signal(false);
-        this.searchQuery = signal('');
-        this.showSearch = signal(true);
-        this.placeholder = signal('Search chats...');
-        // Computed signals
-        this.filteredRooms = computed(() => {
-            let chatRooms = this.rooms();
-            // Apply search filter
-            if (this.searchQuery()) {
-                const searchText = this.searchQuery().toLowerCase();
-                chatRooms = chatRooms.filter((room) => {
-                    const roomName = room.roomMembers?.[0]?.fullName || '';
-                    const lastMessage = room.lastMessage?.message?.content || '';
-                    return roomName.toLowerCase().includes(searchText) || lastMessage.toLowerCase().includes(searchText);
-                });
-            }
-            // Apply tab filter
-            if (this.activeTab() === 1) {
-                return chatRooms.filter((room) => room.unreadCount > 0);
-            }
-            return chatRooms;
+        this.popupService = inject(AXPopupService);
+        this.toastService = inject(AXToastService);
+        this.dialogService = inject(AXDialogService);
+        this.sanitize = inject(DomSanitizer);
+        this.routeParams = this.route.snapshot;
+        this.getPayload = computed(() => ({
+            params: this.payload(),
+            skip: 0,
+            take: 10,
+        }));
+        this.payload = computed(() => ({
+            roomType: 'default',
+            entityId: this.routeParams.params?.['module'] + '.' + this.routeParams.params?.['entity'],
+            instanceId: this.routeParams.params?.['id'],
+        }));
+        this.comments = signal([]);
+        this.wysiwyg = viewChild('w');
+        this.wysiwygOptions = signal({
+            look: 'solid',
         });
-        this.unreadCount = computed(() => this.allRooms().filter((i) => i.unreadCount > 0).length);
-        this.allCount = computed(() => this.allRooms().length);
-        this.hasUnread = computed(() => this.allRooms().filter((i) => i.unreadCount > 0).length > 0);
-        this.totalCount = computed(() => this.allRooms().length || 0);
-        afterNextRender(() => {
-            const tabComponent = this.tab();
-            if (tabComponent) {
-                tabComponent.onActiveTabChanged.subscribe((i) => {
-                    this.activeTab.set(i.index);
-                });
-            }
+        this.avatarConfig = signal({
+            color: 'primary',
+            look: 'rounded',
+            type: 'solid', // 'image' | 'text' | 'icon' | 'default'
         });
+        this.validateContent = (content) => {
+            let isValid = true;
+            if (!content || content === '<p><br></p>') {
+                isValid = false;
+            }
+            return {
+                rule: 'callback',
+                result: isValid,
+                message: isValid ? '' : 'Please fill the content',
+                value: content,
+            };
+        };
     }
-    async ngOnInit() {
-        await this.loadChats();
+    ngOnInit() {
+        this.loadComments();
     }
-    // Page Interface Implementation
-    getPageTitle() {
-        return this.selectedRoom()
-            ? this.selectedRoom()?.roomMembers?.[0]?.fullName || 'Unknown User'
-            : 'Select A Chat First';
+    sanitizeHtml(htmlContent) {
+        if (!htmlContent)
+            return this.sanitize.bypassSecurityTrustHtml('');
+        return this.sanitize.bypassSecurityTrustHtml(htmlContent);
     }
-    getPageDescription() {
-        return this.selectedRoom() ? this.selectedRoom()?.title || '' : '';
+    handleImageError(imageId) {
+        this.failedImageIds.update((ids) => [...ids, imageId]);
     }
-    getMenuItems() {
-        return [];
+    checkImageExists(imageId) {
+        return !this.failedImageIds().includes(imageId);
     }
-    // Methods
-    async loadChats() {
+    extractInitials(name) {
+        if (!name)
+            return '?';
+        // Handle the case where name is an object with fullName property
+        const nameStr = typeof name === 'object' && name.fullName ? name.fullName : String(name);
+        const words = nameStr.split(' ');
+        const initials = words.map((word) => word.charAt(0).toUpperCase());
+        return initials.join('');
+    }
+    async loadComments() {
+        this.isLoading.set(true);
         try {
-            this.isLoading.set(true);
-            this.error.set(null);
-            // Use the updated service method to get rooms with last messages
-            const response = await this.chatService.getAllChatRooms();
-            this.allRooms.set(response.items);
-            this.rooms.set(response.items);
-            this.isLoading.set(false);
+            const response = await this.commentService.query(this.getPayload());
+            this.comments.set(response.items);
         }
         catch (error) {
-            this.error.set('Failed to load chats. Please try again.');
-            this.isLoading.set(false);
-            console.error('Error loading chats:', error);
+            console.error('Failed to load comments:', error);
+            this.toastService.show({
+                content: 'Failed to load comments. Please try again.',
+                color: 'danger',
+                location: 'bottom-center',
+                closeButton: true,
+                timeOut: 3000,
+                timeOutProgress: true,
+            });
+            this.comments.set([]);
+        }
+        finally {
+            setTimeout(() => {
+                this.isLoading.set(false);
+            }, 250);
         }
     }
-    async refreshChat() {
-        await this.loadChats();
+    editMessage(comment, reply) {
+        this.isReplyingMode.set(false);
+        this.activeReplyComment.set(undefined);
+        this.isEditingMode.set(true);
+        this.activeEditComment.set(comment);
+        const contentToEdit = reply ? reply.message?.content : comment.message?.content;
+        this.commentContent.set(contentToEdit || '');
+        this.wysiwygEditor().getHostElement().scrollIntoView({ behavior: 'smooth', block: 'start' });
     }
-    async markChatAsRead(chatId) {
-        try {
-            // Use the service method to mark chat as read
-            await this.chatService.markChatAsRead(chatId);
-            // Update local state without making another network request
-            const currentRooms = this.allRooms();
-            const updatedRooms = currentRooms.map((room) => {
-                if (room.id === chatId) {
-                    // Reset unread count for the selected room
-                    return { ...room, unreadCount: 0 };
-                }
-                return room;
-            });
-            // Update the rooms signals
-            this.allRooms.set(updatedRooms);
-            this.rooms.set(updatedRooms);
-            // Find the selected room
-            const selectedRoom = updatedRooms.find((room) => room.id === chatId) || null;
-            this.selectedRoom.set(selectedRoom);
-            // Navigate to the chat details
-            this.router.navigate([chatId], { relativeTo: this.route });
-        }
-        catch (error) {
-            console.error('Failed to mark chat as read:', error);
+    replyMessage(comment, reply) {
+        this.isEditingMode.set(false);
+        this.activeEditComment.set(undefined);
+        this.isReplyingMode.set(true);
+        this.activeReplyComment.set(comment);
+        if (reply) {
+            const author = reply.author.fullName || reply.author.id;
+            const mention = `<a data-id="${reply.id}">@${author}</a> `;
+            this.commentContent.set(mention);
+            this.wysiwyg()?.focus();
+            document.getElementsByClassName('ql-editor')[0].innerHTML = mention;
         }
+        this.wysiwygEditor().getHostElement().scrollIntoView({ behavior: 'smooth', block: 'start' });
     }
-    searchChat(query) {
-        this.searchQuery.set(query);
-        this.isSearching.set(!!query);
-    }
-    goBack() {
-        this.selectedRoom.set(null);
-        this.router.navigate(['./'], { relativeTo: this.route });
-    }
-    // Header methods
-    onSearch(query) {
-        this.searchChat(query);
-    }
-    clearSearch() {
-        this.searchQuery.set('');
-        this.isSearching.set(false);
-    }
-    // Footer methods
-    onNewConversation() {
-        // TODO: Implement new conversation logic
-        console.log('New conversation clicked');
+    async deleteComment(comment) {
+        const dialog = this.dialogService.open({
+            icon: 'fa-regular fa-warning',
+            content: 'Are you sure you want to delete this comment?',
+            title: 'Delete Comment',
+            type: 'danger',
+            orientation: 'horizontal',
+            buttons: [
+                {
+                    text: 'Delete',
+                    color: 'danger',
+                    onClick: async (e) => {
+                        e.handled = true;
+                        e.source.text = 'Deleting...';
+                        e.source.disabled = true;
+                        e.source.loading = true;
+                        try {
+                            if (comment.id) {
+                                await this.commentService.deleteOne(comment.id);
+                                this.removeMessageById(comment.id);
+                                this.toastService.show({
+                                    content: 'Comment deleted successfully.',
+                                    color: 'success',
+                                    location: 'bottom-center',
+                                    closeButton: true,
+                                    timeOut: 3000,
+                                    timeOutProgress: true,
+                                });
+                                if (this.isEditingMode() && this.activeEditComment()?.id === comment.id) {
+                                    this.resetReplyEditState();
+                                }
+                                dialog.close();
+                            }
+                        }
+                        catch (error) {
+                            this.toastService.show({
+                                content: typeof error === 'string' ? error : 'Failed to delete comment!',
+                                color: 'danger',
+                                location: 'bottom-center',
+                                closeButton: true,
+                                timeOut: 3000,
+                                timeOutProgress: true,
+                            });
+                        }
+                    },
+                },
+                {
+                    text: 'Cancel',
+                    color: 'default',
+                    autofocus: true,
+                    onClick: (e) => {
+                        dialog.close();
+                    },
+                },
+            ],
+            closeButton: false,
+        });
     }
-    // Preview header methods
-    emitBack() {
-        this.goBack();
+    async deleteReply(comment, reply) {
+        const dialog = this.dialogService.open({
+            icon: 'fa-regular fa-warning',
+            content: 'Are you sure you want to delete this reply?',
+            title: 'Delete Reply',
+            type: 'danger',
+            orientation: 'horizontal',
+            buttons: [
+                {
+                    text: 'Delete',
+                    color: 'danger',
+                    onClick: async (e) => {
+                        e.handled = true;
+                        e.source.text = 'Deleting...';
+                        e.source.disabled = true;
+                        e.source.loading = true;
+                        try {
+                            if (reply.id) {
+                                await this.commentService.deleteOne(reply.id);
+                                this.removeMessageById(comment.id, reply.id);
+                                this.toastService.show({
+                                    content: 'Comment deleted successfully.',
+                                    color: 'success',
+                                    location: 'bottom-center',
+                                    closeButton: true,
+                                    timeOut: 3000,
+                                    timeOutProgress: true,
+                                });
+                                dialog.close();
+                            }
+                        }
+                        catch (error) {
+                            this.toastService.show({
+                                content: typeof error === 'string' ? error : 'Failed to delete comment!',
+                                color: 'danger',
+                                location: 'bottom-center',
+                                closeButton: true,
+                                timeOut: 3000,
+                                timeOutProgress: true,
+                            });
+                        }
+                    },
+                },
+                {
+                    text: 'Cancel',
+                    color: 'default',
+                    autofocus: true,
+                    onClick: (e) => {
+                        dialog.close();
+                    },
+                },
+            ],
+            closeButton: false,
+        });
     }
-    ngOnDestroy() {
-        console.log('ngOnDestroy');
+    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 = '';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXMChatComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: AXMChatComponent, isStandalone: false, selector: "axm-chat", viewQueries: [{ propertyName: "tab", first: true, predicate: ["tab"], descendants: true, isSignal: true }], ngImport: i0, template: "<axp-page-layout>\n  <axp-layout-start-side [axResizable]=\"true\" class=\"ax-border-e ax-lightest-surface ax-h-full\">\n    <axp-layout-header>\n      <axp-layout-title>Conversations</axp-layout-title>\n      <axp-layout-toolbar>\n        <ax-search-box\n          #searchInput\n          look=\"solid\"\n          [placeholder]=\"placeholder()\"\n          [ngModel]=\"searchQuery()\"\n          (onValueChanged)=\"onSearch($event.value)\"\n          class=\"ax-w-full\"\n        >\n          <ax-clear-button></ax-clear-button>\n        </ax-search-box>\n      </axp-layout-toolbar>\n    </axp-layout-header>\n    <axp-layout-content class=\"ax-flex ax-flex-col ax-min-h-0\">\n      <!-- Tabs -->\n      <div class=\"ax-px-4\">\n        <ax-tabs #tab class=\"ax-text-neutral-400\" [look]=\"'with-line'\" [location]=\"'bottom'\" [fitParent]=\"true\">\n          <ax-tab-item text=\"All\" [active]=\"activeTab() === 0\">\n            <ax-suffix>\n              <ax-badge\n                [text]=\"totalCount().toString()\"\n                [color]=\"activeTab() === 0 ? 'primary' : 'secondary'\"\n                class=\"ax-min-w-[1.5rem] ax-justify-center\"\n              ></ax-badge>\n            </ax-suffix>\n          </ax-tab-item>\n          @if (hasUnread()) {\n            <ax-tab-item text=\"Unread\" [active]=\"activeTab() === 1\">\n              <ax-suffix>\n                <ax-badge\n                  [text]=\"unreadCount().toString()\"\n                  [color]=\"activeTab() === 1 ? 'primary' : 'secondary'\"\n                  class=\"ax-min-w-[1.5rem] ax-justify-center\"\n                ></ax-badge>\n              </ax-suffix>\n            </ax-tab-item>\n          }\n        </ax-tabs>\n      </div>\n\n      <!-- Chat List Content -->\n      <div class=\"ax-flex-1 ax-overflow-hidden ax-flex ax-flex-col\">\n        <!-- Loading State -->\n        @if (isLoading()) {\n          <div class=\"ax-flex ax-items-center ax-justify-center ax-p-4\">\n            <ax-loading></ax-loading>\n          </div>\n        }\n\n        <!-- Error State -->\n        @if (error()) {\n          <div class=\"ax-p-4 ax-text-error ax-text-center\">\n            {{ error() }}\n            <button (click)=\"refreshChat()\" class=\"ax-mt-2 ax-text-primary hover:ax-text-primary-dark\">\n              Try Again\n            </button>\n          </div>\n        }\n\n        <!-- Chat List -->\n        @if (!isLoading() && !error()) {\n          <div\n            class=\"ax-flex-1 ax-overflow-y-auto ax-space-y-2 ax-scrollbar-thin ax-scrollbar-thumb-gray-300 ax-scrollbar-track-transparent\"\n          >\n            @for (i of filteredRooms(); track i.id) {\n              <axm-chat-item\n                [data]=\"i\"\n                (click)=\"markChatAsRead(i.id)\"\n                [class.ax-bg-surface]=\"selectedRoom()?.id === i.id\"\n                class=\"ax-transition-all ax-duration-200 hover:ax-bg-surface ax-rounded-lg\"\n              ></axm-chat-item>\n            }\n\n            <!-- Empty State -->\n            @empty {\n              <div class=\"ax-p-4 ax-font-medium ax-text-center ax-text-secondary\">\n                @if (isSearching()) {\n                  No chats found matching your search\n                } @else {\n                  No chats available\n                }\n              </div>\n            }\n          </div>\n        }\n\n        <!-- Footer Content -->\n        <div class=\"ax-border-t ax-border-divider ax-bg-lightest ax-p-4\">\n          <ax-button class=\"ax-w-full\" color=\"primary\" text=\"New Conversation\" (onClick)=\"onNewConversation()\">\n            <ax-prefix>\n              <ax-icon>\n                <i class=\"fa-solid fa-plus\"></i>\n              </ax-icon>\n            </ax-prefix>\n          </ax-button>\n        </div>\n      </div>\n    </axp-layout-content>\n  </axp-layout-start-side>\n\n  <axp-page-content>\n    <!-- Chat Content -->\n    <div class=\"ax-flex-1 ax-overflow-hidden\">\n      <router-outlet></router-outlet>\n    </div>\n  </axp-page-content>\n</axp-page-layout>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$1.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "directive", type: i3$1.AXResizableDirective, selector: "[axResizable]", inputs: ["axResizable", "minWidth", "maxWidth", "dblClickAction", "width", "defaultWidth"], outputs: ["axResizableChange", "minWidthChange", "maxWidthChange", "dblClickActionChange", "widthChange", "defaultWidthChange", "onResizingStarted", "onResizingEnded", "onResizingDblClick"] }, { kind: "component", type: i3.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "text", "look"] }, { kind: "component", type: i5.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i5.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "component", type: i5.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "component", type: i6.AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "component", type: i7.AXTabsComponent, selector: "ax-tabs", inputs: ["look", "location", "fitParent", "minWidth", "content"], outputs: ["onActiveTabChanged"] }, { kind: "component", type: i7.AXTabItemComponent, selector: "ax-tab-item", inputs: ["disabled", "text", "key", "headerTemplate", "active"], outputs: ["disabledChange", "onClick", "onBlur", "onFocus", "activeChange"] }, { kind: "component", type: i6$1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: i5$1.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "component", type: i10.AXPPageLayoutComponent, selector: "axp-page-layout" }, { kind: "component", type: i11.AXPThemeLayoutBlockComponent, selector: "    axp-page-content,     axp-page-footer-container,    axp-page-footer,    axp-page-header,    axp-page-header-container,    axp-page-toolbar,    axp-layout-content,     axp-layout-page-content,     axp-layout-sections,    axp-layout-body,    axp-layout-page-body,    axp-layout-prefix,    axp-layout-suffix,    axp-layout-title-bar,    axp-layout-title,     axp-layout-title-actions,     axp-layout-nav-button,     axp-layout-description,     axp-layout-breadcrumbs,    axp-layout-list-action,    " }, { kind: "component", type: i11.AXPThemeLayoutStartSideComponent, selector: "axp-layout-page-start-side, axp-layout-start-side" }, { kind: "component", type: i11.AXPThemeLayoutHeaderComponent, selector: "axp-layout-header" }, { kind: "component", type: i11.AXPThemeLayoutToolbarComponent, selector: "axp-layout-toolbar" }, { kind: "component", type: AXMChatItemComponent, selector: "axm-chat-item", inputs: ["data"], outputs: ["pressChatItem"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXMChatComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'axm-chat', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<axp-page-layout>\n  <axp-layout-start-side [axResizable]=\"true\" class=\"ax-border-e ax-lightest-surface ax-h-full\">\n    <axp-layout-header>\n      <axp-layout-title>Conversations</axp-layout-title>\n      <axp-layout-toolbar>\n        <ax-search-box\n          #searchInput\n          look=\"solid\"\n          [placeholder]=\"placeholder()\"\n          [ngModel]=\"searchQuery()\"\n          (onValueChanged)=\"onSearch($event.value)\"\n          class=\"ax-w-full\"\n        >\n          <ax-clear-button></ax-clear-button>\n        </ax-search-box>\n      </axp-layout-toolbar>\n    </axp-layout-header>\n    <axp-layout-content class=\"ax-flex ax-flex-col ax-min-h-0\">\n      <!-- Tabs -->\n      <div class=\"ax-px-4\">\n        <ax-tabs #tab class=\"ax-text-neutral-400\" [look]=\"'with-line'\" [location]=\"'bottom'\" [fitParent]=\"true\">\n          <ax-tab-item text=\"All\" [active]=\"activeTab() === 0\">\n            <ax-suffix>\n              <ax-badge\n                [text]=\"totalCount().toString()\"\n                [color]=\"activeTab() === 0 ? 'primary' : 'secondary'\"\n                class=\"ax-min-w-[1.5rem] ax-justify-center\"\n              ></ax-badge>\n            </ax-suffix>\n          </ax-tab-item>\n          @if (hasUnread()) {\n            <ax-tab-item text=\"Unread\" [active]=\"activeTab() === 1\">\n              <ax-suffix>\n                <ax-badge\n                  [text]=\"unreadCount().toString()\"\n                  [color]=\"activeTab() === 1 ? 'primary' : 'secondary'\"\n                  class=\"ax-min-w-[1.5rem] ax-justify-center\"\n                ></ax-badge>\n              </ax-suffix>\n            </ax-tab-item>\n          }\n        </ax-tabs>\n      </div>\n\n      <!-- Chat List Content -->\n      <div class=\"ax-flex-1 ax-overflow-hidden ax-flex ax-flex-col\">\n        <!-- Loading State -->\n        @if (isLoading()) {\n          <div class=\"ax-flex ax-items-center ax-justify-center ax-p-4\">\n            <ax-loading></ax-loading>\n          </div>\n        }\n\n        <!-- Error State -->\n        @if (error()) {\n          <div class=\"ax-p-4 ax-text-error ax-text-center\">\n            {{ error() }}\n            <button (click)=\"refreshChat()\" class=\"ax-mt-2 ax-text-primary hover:ax-text-primary-dark\">\n              Try Again\n            </button>\n          </div>\n        }\n\n        <!-- Chat List -->\n        @if (!isLoading() && !error()) {\n          <div\n            class=\"ax-flex-1 ax-overflow-y-auto ax-space-y-2 ax-scrollbar-thin ax-scrollbar-thumb-gray-300 ax-scrollbar-track-transparent\"\n          >\n            @for (i of filteredRooms(); track i.id) {\n              <axm-chat-item\n                [data]=\"i\"\n                (click)=\"markChatAsRead(i.id)\"\n                [class.ax-bg-surface]=\"selectedRoom()?.id === i.id\"\n                class=\"ax-transition-all ax-duration-200 hover:ax-bg-surface ax-rounded-lg\"\n              ></axm-chat-item>\n            }\n\n            <!-- Empty State -->\n            @empty {\n              <div class=\"ax-p-4 ax-font-medium ax-text-center ax-text-secondary\">\n                @if (isSearching()) {\n                  No chats found matching your search\n                } @else {\n                  No chats available\n                }\n              </div>\n            }\n          </div>\n        }\n\n        <!-- Footer Content -->\n        <div class=\"ax-border-t ax-border-divider ax-bg-lightest ax-p-4\">\n          <ax-button class=\"ax-w-full\" color=\"primary\" text=\"New Conversation\" (onClick)=\"onNewConversation()\">\n            <ax-prefix>\n              <ax-icon>\n                <i class=\"fa-solid fa-plus\"></i>\n              </ax-icon>\n            </ax-prefix>\n          </ax-button>\n        </div>\n      </div>\n    </axp-layout-content>\n  </axp-layout-start-side>\n\n  <axp-page-content>\n    <!-- Chat Content -->\n    <div class=\"ax-flex-1 ax-overflow-hidden\">\n      <router-outlet></router-outlet>\n    </div>\n  </axp-page-content>\n</axp-page-layout>\n" }]
-        }], ctorParameters: () => [] });
-
-/**
- * Converts chat service response to chat preview format
- * @param chatResponse - The response from chat service containing items and total
- * @returns Array of formatted chat preview messages
- */
-function convertToChatPreview(chatResponse) {
-    if (!chatResponse || !chatResponse.items?.length) {
-        return [];
+    async toggleLike(comment, reply) {
+        try {
+            if (reply) {
+                if (reply.id) {
+                    this.updateLikeStatus(comment.id, reply.id);
+                    await this.commentService.like(reply.id);
+                }
+            }
+            else {
+                if (comment.id) {
+                    this.updateLikeStatus(comment.id);
+                    await this.commentService.like(comment.id);
+                }
+            }
+        }
+        catch (error) {
+            console.error('Failed to toggle like:', error);
+            // Revert the optimistic update if the server call fails
+            if (reply && reply.id) {
+                this.updateLikeStatus(comment.id, reply.id);
+            }
+            else if (comment.id) {
+                this.updateLikeStatus(comment.id);
+            }
+        }
     }
-    // Map from AXMChatMessage to ChatPreviewMessage
-    return chatResponse.items.map((message) => {
-        // Determine message type based on content type
-        let messageType = 'text';
-        // Map contentType to preview type
-        if (message.message?.contentType) {
-            switch (message.message.contentType) {
-                case 'text':
-                    messageType = 'text';
-                    break;
-                case 'file':
-                    messageType = 'file';
-                    break;
-                case 'image':
-                    messageType = 'image';
-                    break;
-                case 'video':
-                    messageType = 'video';
-                    break;
-                case 'link':
-                    // Determine if link is for audio or other content
-                    const content = message.message.content || '';
-                    if (content.includes('.mp3') || content.includes('.ogg') || content.includes('audio')) {
-                        messageType = 'audio';
+    updateLikeStatus(commentId, replyId) {
+        this.comments.update((commentsList) => {
+            return commentsList.map((comment) => {
+                if (comment.id === commentId) {
+                    if (replyId && comment.replies) {
+                        const updatedReplies = comment.replies.map((reply) => reply.id === replyId
+                            ? {
+                                ...reply,
+                                isLiked: !reply.isLiked,
+                                reactionsCount: reply.isLiked && reply.reactionsCount !== undefined
+                                    ? reply.reactionsCount - 1
+                                    : (reply.reactionsCount || 0) + 1,
+                            }
+                            : reply);
+                        return {
+                            ...comment,
+                            replies: updatedReplies,
+                        };
                     }
                     else {
-                        messageType = 'text';
+                        return {
+                            ...comment,
+                            isLiked: !comment.isLiked,
+                            reactionsCount: comment.isLiked && comment.reactionsCount !== undefined
+                                ? comment.reactionsCount - 1
+                                : (comment.reactionsCount || 0) + 1,
+                        };
                     }
-                    break;
-                default:
-                    messageType = 'text';
-            }
-        }
-        // Extract author name if available
-        const name = message.author ? message.author.id : 'Unknown';
-        // Create the chat preview message
-        const previewMessage = {
-            id: message.id,
-            sendTime: new Date(message.createdAt || new Date()),
-            readTime: new Date(), // Assuming "read" when converted
-            type: messageType,
-            content: message.message?.content || '',
-            name: name,
-        };
-        // Add fromId if the message is not from current user
-        if (!message.isFromCurrentUser) {
-            previewMessage.fromId = message.author?.id;
-        }
-        // Note: Reply information would need to be looked up from the actual messages
-        // This would typically be done by the service that has access to all messages
-        return previewMessage;
-    });
-}
-/**
- * Creates a ChatPreviewMessage from reply information
- * @param message - The original message that is being referenced
- * @returns A ChatPreviewMessage formatted for use as a replyTo
- */
-function createReplyPreview(message) {
-    if (!message)
-        return undefined;
-    return {
-        id: message.id,
-        sendTime: new Date(message.createdAt || new Date()),
-        readTime: new Date(),
-        type: message.message?.contentType === 'image'
-            ? 'image'
-            : message.message?.contentType === 'video'
-                ? 'video'
-                : message.message?.contentType === 'file'
-                    ? 'file'
-                    : 'text',
-        content: message.message?.content || '',
-        name: message.author?.id || 'Unknown',
-        fromId: !message.isFromCurrentUser ? message.author?.id : undefined,
-    };
-}
-/**
- * Generate demo chat preview data with a variety of message types
- * @returns Array of sample chat preview messages
- */
-function generateDemoChatPreview() {
-    return [
-        {
-            id: '0',
-            sendTime: new Date(),
-            type: 'text',
-            readTime: new Date(),
-            content: 'Hello John, How are you?',
-            name: 'test name',
-        },
-        {
-            id: '1',
-            fromId: '10',
-            sendTime: new Date(),
-            readTime: new Date(),
-            type: 'text',
-            content: 'Hello',
-            name: 'test name',
-            replyTo: {
-                id: '0',
-                sendTime: new Date(),
-                type: 'text',
-                readTime: new Date(),
-                content: 'Hello John, How are you?',
-                name: 'test name',
-            },
-        },
-        {
-            id: '2',
-            fromId: '10',
-            sendTime: new Date(),
-            readTime: new Date(),
-            type: 'voice',
-            name: 'test name',
-            content: `data:audio/webm;codecs=opus;base64,GkXfoEF34fJ`,
-        },
-        {
-            id: '3',
-            sendTime: new Date(),
-            readTime: new Date(),
-            type: 'text',
-            content: 'Can i have your address information?',
-            name: 'test name',
-            replyTo: {
-                id: '1',
-                fromId: '10',
-                sendTime: new Date(),
-                readTime: new Date(),
-                type: 'text',
-                content: 'Hello',
-                name: 'test name',
-            },
-        },
-        {
-            id: '4',
-            fromId: '10',
-            sendTime: new Date(),
-            readTime: new Date(),
-            type: 'file',
-            name: 'test name',
-            content: `data:audio/webm;codecs=opus;base64,GkXfoEF34fJ`,
-        },
-        {
-            id: '5',
-            sendTime: new Date(),
-            readTime: new Date(),
-            type: 'image',
-            name: 'test name',
-            content: `https://picsum.photos/300/200`,
-        },
-        {
-            id: '6',
-            sendTime: new Date(),
-            readTime: new Date(),
-            type: 'video',
-            name: 'test name',
-            content: `https://www.pexels.com/download/video/5495322/?fps=29.97&h=540&w=960`,
-        },
-        {
-            id: '7',
-            sendTime: new Date(),
-            type: 'text',
-            readTime: new Date(),
-            content: 'Hello John, How are you?',
-            name: 'test name',
-        },
-        {
-            id: '8',
-            fromId: '10',
-            sendTime: new Date(),
-            readTime: new Date(),
-            type: 'audio',
-            name: 'kids',
-            content: `https://actions.google.com/sounds/v1/ambiences/kids_playing.ogg`,
-        },
-        {
-            id: '9',
-            fromId: '10',
-            sendTime: new Date(),
-            readTime: new Date(),
-            type: 'image',
-            name: 'test name',
-            content: `https://picsum.photos/300/200`,
-        },
-        {
-            id: '10',
-            fromId: '10',
-            sendTime: new Date(),
-            readTime: new Date(),
-            type: 'image',
-            name: 'test name',
-            content: `https://picsum.photos/200/300`,
-        },
-        {
-            id: '11',
-            fromId: '10',
-            sendTime: new Date(),
-            readTime: new Date(),
-            type: 'video',
-            name: 'test name',
-            content: `https://www.pexels.com/download/video/5495322/?fps=29.97&h=540&w=960`,
-        },
-        {
-            id: '12',
-            sendTime: new Date(),
-            readTime: new Date(),
-            type: 'file',
-            name: 'test name',
-            content: `data:audio/webm;codecs=opus;base64,GkXfo59ChoE+u5BxHVL7ZAS1EF34fJ`,
-        },
-        {
-            id: '13',
-            sendTime: new Date(),
-            readTime: new Date(),
-            type: 'audio',
-            name: 'alarm',
-            content: `https://actions.google.com/sounds/v1/alarms/digital_watch_alarm_long.ogg`,
-        },
-    ];
-}
-/**
- * Usage Examples:
- *
- * Example 1: Converting chat service response to chat preview format
- * ```typescript
- * import { AXMChatService } from '../chat.service';
- * import { convertToChatPreview } from './chat-preview.helper';
- *
- * export class ChatPreviewComponent {
- *   constructor(private chatService: AXMChatService) {}
- *
- *   async loadChatMessages(roomId: string) {
- *     const response = await this.chatService.getChatMessages(roomId);
- *
- *     // Convert to chat preview format
- *     const previewMessages = convertToChatPreview(response);
- *
- *     // Use the converted messages
- *     this.conversationService.chats.set(previewMessages);
- *   }
- * }
- * ```
- *
- * Example 2: Using demo data for development/testing
- * ```typescript
- * import { generateDemoChatPreview } from './chat-preview.helper';
- *
- * export class ChatPreviewDemoComponent {
- *   ngOnInit() {
- *     // Load demo messages
- *     const demoMessages = generateDemoChatPreview();
- *
- *     // Use the demo messages
- *     this.conversationService.chats.set(demoMessages);
- *   }
- * }
- */
-
-class AXMChatPreviewComponent {
-    constructor(elRef) {
-        this.elRef = elRef;
-        // Signal for dynamic max-height (using computed logic for real-time updates)
-        this.activatedRoute = inject(ActivatedRoute);
-        this.fileService = inject(AXFileService);
-        // private conversationService = inject(AXConversationService);
-        this.chatService = inject(AXMChatService);
-        this.options = signal({
-            disabled: false,
-            readonly: false,
-            value: '',
-        });
-        this.conversationViewMaxHeight = signal('');
-        this.initialTextAreaHeight = 0;
-        this.textareaHeight = signal(0);
-        this.dynamicHeight = computed(() => {
-            const baseOffset = 275;
-            const currentHeight = this.textareaHeight();
-            const dynamicOffset = baseOffset + (currentHeight - this.initialTextAreaHeight);
-            return `calc(100vh - ${dynamicOffset}px) !important`;
-        });
-        afterNextRender(() => {
-            const textareaContainer = this.elRef.nativeElement.querySelector('ax-conversation-input > div');
-            if (textareaContainer) {
-                this.initialTextAreaHeight = textareaContainer.offsetHeight;
-                this.resizeObserver = new ResizeObserver((entries) => {
-                    for (const entry of entries) {
-                        if (entry.target === textareaContainer) {
-                            const currentHeight = entry.contentRect.height;
-                            this.textareaHeight.set(currentHeight);
-                        }
-                    }
-                });
-                this.resizeObserver.observe(textareaContainer);
-            }
-            else {
-                console.warn('Textarea Container element not found.');
-            }
-            this.activatedRoute.params.subscribe((params) => {
-                console.log(params['id']);
-                this.messageId = params['id'];
-                this.loadMessages(this.messageId);
+                }
+                return comment;
             });
         });
     }
-    ngOnDestroy() {
-        if (this.resizeObserver) {
-            this.resizeObserver.disconnect();
+    removeMessageById(commentId, replyId) {
+        if (replyId) {
+            // Remove a reply from a comment
+            this.comments.update((commentsList) => commentsList.map((comment) => {
+                if (comment.id === commentId && comment.replies) {
+                    return {
+                        ...comment,
+                        replies: comment.replies.filter((reply) => reply.id !== replyId),
+                    };
+                }
+                return comment;
+            }));
+        }
+        else {
+            // Remove a whole comment
+            this.comments.update((commentsList) => commentsList.filter((comment) => comment.id !== commentId));
         }
     }
-    handleFileChange(event) {
-        console.log('File Changed:', event);
-    }
-    handleCancelRecord(event) {
-        console.log('Recording Cancelled:', event);
-    }
-    handleEndRecord(event) {
-        this.fileService.blobToBase64(event.data.value).then((base64Content) => {
-            // Create a properly formatted chat preview message for voice
-            const newVoiceMessage = {
-                id: `${Math.floor(Math.random() * 10000)}`,
-                content: base64Content,
-                sendTime: new Date(),
-                readTime: new Date(),
-                type: 'voice',
-                name: 'test name',
-            };
-            // this.conversationService.chats.update((values: any) => [...values, newVoiceMessage]);
-        });
-    }
-    handleOnSend(e) {
-        console.log('Message Sent:', e);
-        if (e.data.value) {
-            this.options.update((prev) => ({ ...prev, value: '' }));
-            // Create a properly formatted chat preview message
-            const newMessage = {
-                id: `${Math.floor(Math.random() * 10000)}`,
-                content: e.data.value,
-                sendTime: new Date(),
-                readTime: new Date(),
-                type: e.data.type || 'text',
-                name: 'test name',
-                replyTo: e.data.replyChat,
+    async submitComment(isPrivate = false) {
+        if (!this.validateContent(this.commentContent()).result) {
+            return;
+        }
+        this.isSubmitting.set(true);
+        let memberLookup;
+        if (isPrivate) {
+            const popupConfig = {
+                header: true,
+                size: 'md',
+                draggable: true,
+                hasBackdrop: true,
+                closeButton: true,
+                closeOnBackdropClick: false,
             };
-            // If it's a reply to another message, ensure it has the right format
-            if (newMessage.replyTo) {
-                // Ensure replyTo has the right format if it doesn't already
-                if (!newMessage.replyTo.readTime) {
-                    newMessage.replyTo = {
-                        ...newMessage.replyTo,
-                        readTime: new Date(),
-                    };
-                }
+            const popup = await this.popupService.open(AXMCommentLookupPopup, popupConfig);
+            memberLookup = popup.data?.lookup;
+        }
+        try {
+            if (this.isEditingMode() && this.activeEditComment()?.id) {
+                const payload = {
+                    message: {
+                        content: this.commentContent(),
+                        contentType: 'text',
+                    },
+                };
+                await this.commentService.updateOne(this.activeEditComment().id, payload);
+                this.hasCooldown.set(true);
+                this.isEditingMode.set(false);
+                this.activeEditComment.set(undefined);
+            }
+            else {
+                const payload = {
+                    ...this.payload(),
+                    content: this.commentContent(),
+                    contentType: 'text',
+                    isPrivate: isPrivate,
+                    replyId: this.activeReplyComment()?.id ?? null,
+                };
+                await this.commentService.insertOne(payload);
+                this.hasCooldown.set(true);
+                this.isReplyingMode.set(false);
+                this.activeReplyComment.set(undefined);
             }
-            // this.conversationService.chats.update((values: any) => [...values, newMessage]);
+            // Reload comments to get the updated list with proper hierarchy
+            const response = await this.commentService.query(this.getPayload());
+            this.comments.set(response.items);
+            this.commentContent.set('');
+            document.getElementsByClassName('ql-editor')[0].innerHTML = '';
+            setTimeout(() => {
+                this.hasCooldown.set(false);
+            }, 1000);
         }
-        this.scrollToEnd();
-    }
-    handleOnAction(e) {
-        console.log('Action Triggered:', e);
-    }
-    scrollToEnd() {
-        const conversationView = document.querySelector('ax-conversation-view');
-        if (conversationView) {
-            conversationView.scrollTo({
-                top: conversationView.scrollHeight,
-                behavior: 'smooth',
+        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,
             });
         }
-    }
-    addMockMessage() { }
-    async loadMessages(roomId) {
-        try {
-            // Get messages from the chat service
-            const messageResponse = await this.chatService.getChatMessages(roomId);
-            // Convert to chat preview format
-            const chatPreviewMessages = convertToChatPreview(messageResponse);
-            // Set the messages in the conversation service
-            // this.conversationService.chats.set(chatPreviewMessages);
+        finally {
+            this.isSubmitting.set(false);
         }
-        catch (error) {
-            console.error('Failed to load messages:', error);
-            // Fallback to demo data if there's an error
-            // this.conversationService.chats.set(generateDemoChatPreview());
+    }
+    scrollMain() {
+        const comment = this.isReplyingMode() ? this.activeReplyComment() : this.activeEditComment();
+        if (comment && comment.id) {
+            const el = document.getElementById(comment.id);
+            if (el) {
+                el.scrollIntoView({ behavior: 'smooth', block: 'center' });
+                const content = el?.firstElementChild?.children[1];
+                if (content) {
+                    const prevBg = content.style.background;
+                    content.style.borderRadius = '0.25rem';
+                    content.style.transition = 'background 1s ease-in-out';
+                    content.style.background = `rgba(var(--ax-color-on-surface), var(--tw-bg-opacity))`;
+                    setTimeout(() => {
+                        content.style.background = prevBg || 'rgba(0, 0, 0, 0)';
+                    }, 1000);
+                }
+            }
         }
     }
-    loadDemoMessages() {
-        // this.conversationService.chats.set(generateDemoChatPreview());
+    calcDefrenetTime(date) {
+        return date ? Date.now() - date.getTime() : undefined;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXMChatPreviewComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.4", type: AXMChatPreviewComponent, isStandalone: false, selector: "axm-chat-preview", ngImport: i0, template: "<div class=\"ax-flex ax-flex-col ax-bg-surface-container\">\n  <!-- Messages Container -->\n  <ax-conversation-container class=\"ax-flex-1 ax-overflow-hidden\">\n    <ax-conversation-view (onAction)=\"handleOnAction($event)\" [style.height]=\"dynamicHeight()\"></ax-conversation-view>\n  </ax-conversation-container>\n\n  <!-- Input Area -->\n  <div class=\"ax-p-2\">\n    <ax-conversation-input\n      placeholder=\"Type a message...\"\n      [(ngModel)]=\"options().value\"\n      (onSendClick)=\"handleOnSend($event)\"\n      (onFileChange)=\"handleFileChange($event)\"\n      (onStopRecording)=\"handleEndRecord($event)\"\n      (onCancelRecording)=\"handleCancelRecord($event)\"\n    ></ax-conversation-input>\n  </div>\n</div>\n", styles: [":host{display:flex;flex-direction:column;height:100%;background-color:var(--ax-surface-container)}:host::ng-deep ax-conversation-view>div{height:50rem!important}\n"], dependencies: [{ kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2$2.AXConversationViewComponent, selector: "ax-conversation-view", inputs: ["chatBoxHeight", "isReplyArrowShown"], outputs: ["onScrollEnd", "onAction"] }, { kind: "component", type: i2$2.AXConversationInputComponent, selector: "ax-conversation-input", inputs: ["look", "placeholder", "maxLength", "hasAttachment", "hasVoice", "hasEmoji", "isLoading", "acceptFileType"], outputs: ["onSendClick", "onStartRecording", "onCancelRecording", "onEnterPressed"] }, { kind: "component", type: i2$2.AXConversationContainerComponent, selector: "ax-conversation-container", inputs: ["chatData"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXMCommentListViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: AXMCommentListViewComponent, isStandalone: true, selector: "axm-comment-list-view", viewQueries: [{ propertyName: "wysiwygEditor", first: true, predicate: ["w"], descendants: true, isSignal: true }, { propertyName: "wysiwyg", first: true, predicate: ["w"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ax-mt-2\">\n  <ax-comment-container>\n    @if (isLoading()) {\n      <div class=\"ax-flex ax-items-center ax-py-12 ax-bg-lightest ax-px-5\">\n        <ax-skeleton class=\"ax-min-w-16 ax-h-16 ax-rounded-full ax-me-4\"></ax-skeleton>\n        <div class=\"ax-flex ax-flex-col ax-gap-2 ax-w-full\">\n          <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded\"></ax-skeleton>\n          <ax-skeleton class=\"ax-w-full ax-h-2 ax-rounded-full\"></ax-skeleton>\n          <ax-skeleton class=\"ax-w-full ax-h-2 ax-rounded-full\"></ax-skeleton>\n          <ax-skeleton class=\"ax-w-8/12 ax-h-2 ax-rounded-full\"></ax-skeleton>\n        </div>\n      </div>\n    } @else if (!isLoading() && comments().length > 0) {\n      <ax-comment-view class=\"ax-bg-lightest\">\n        @for (comment of comments(); track comment.id) {\n          <ax-comment-item [id]=\"comment.id!\" [replyCount]=\"comment.replies?.length ?? 0\">\n            <ax-avatar [color]=\"avatarConfig().color\" [shape]=\"avatarConfig().look\">\n              @if (checkImageExists(comment.id!) && comment.author && extractInitials(comment.author) !== '?') {\n                <ax-image (onError)=\"handleImageError(comment.id!)\" [src]=\"''\">\n                  <ax-loading></ax-loading>\n                </ax-image>\n              } @else {\n                <ax-text>\n                  <span class=\"ax-text-base ax-overflow-hidden\">{{ extractInitials(comment.author) }}</span>\n                </ax-text>\n              }\n            </ax-avatar>\n            <ax-title>{{ extractInitials(comment.author) }}</ax-title>\n            <ax-comment-date>{{ calcDefrenetTime(comment.createdAt) | format: 'timeleft' | async }} </ax-comment-date>\n            <ax-comment-menu-options>\n              <ax-button class=\"ax-sm\" look=\"blank\" color=\"neutral\">\n                <ax-icon icon=\"ax-icon ax-icon-solid ax-icon-more-horizontal\"></ax-icon>\n              </ax-button>\n\n              <ax-dropdown-panel>\n                <ax-button-item-list>\n                  <ax-button-item text=\"Edit\" color=\"neutral\" (click)=\"editMessage(comment)\">\n                    <ax-prefix>\n                      <ax-icon icon=\"fa-solid fa-edit\"></ax-icon>\n                    </ax-prefix>\n                  </ax-button-item>\n\n                  <ax-button-item text=\"Delete\" color=\"danger\" (click)=\"deleteComment(comment)\">\n                    <ax-prefix>\n                      <ax-icon icon=\"fa-solid fa-trash-can\"></ax-icon>\n                    </ax-prefix>\n                  </ax-button-item>\n                </ax-button-item-list>\n              </ax-dropdown-panel>\n            </ax-comment-menu-options>\n            <ax-content [innerHTML]=\"sanitizeHtml(comment.message.content)\"></ax-content>\n            <ax-comment-like (click)=\"toggleLike(comment)\" [liked]=\"comment.isLiked!\">\n              {{ comment.reactionsCount }}\n            </ax-comment-like>\n            <ax-comment-reply-text (click)=\"replyMessage(comment)\"></ax-comment-reply-text>\n            @for (reply of comment.replies; track reply.id) {\n              <ax-comment-item [id]=\"reply.id\">\n                <ax-avatar [color]=\"avatarConfig().color\" [shape]=\"avatarConfig().look\">\n                  @if (reply && checkImageExists(reply.id!) && reply.author && extractInitials(reply.author) !== '?') {\n                    <ax-image (onError)=\"handleImageError(reply.id!)\" [src]=\"''\">\n                      <ax-loading></ax-loading>\n                    </ax-image>\n                  } @else {\n                    <ax-text>\n                      <span class=\"ax-text-base ax-overflow-hidden\">{{ extractInitials(reply.author) }}</span>\n                    </ax-text>\n                  }\n                </ax-avatar>\n                <ax-title>{{ extractInitials(reply.author) }}</ax-title>\n                <ax-comment-date>{{ calcDefrenetTime(reply.createdAt) | format: 'timeleft' | async }} </ax-comment-date>\n                <ax-comment-menu-options>\n                  <ax-button class=\"ax-sm\" look=\"blank\" color=\"neutral\">\n                    <ax-icon icon=\"ax-icon ax-icon-solid ax-icon-more-horizontal\"></ax-icon>\n                  </ax-button>\n\n                  <ax-dropdown-panel>\n                    <ax-button-item-list>\n                      <ax-button-item text=\"Edit\" color=\"neutral\" (click)=\"editMessage(comment, reply)\">\n                        <ax-prefix>\n                          <ax-icon icon=\"fa-solid fa-edit\"></ax-icon>\n                        </ax-prefix>\n                      </ax-button-item>\n                      <ax-button-item text=\"Delete\" color=\"danger\" (click)=\"deleteReply(comment, reply)\">\n                        <ax-prefix>\n                          <ax-icon icon=\"fa-solid fa-trash-can\"></ax-icon>\n                        </ax-prefix>\n                      </ax-button-item>\n                    </ax-button-item-list>\n                  </ax-dropdown-panel>\n                </ax-comment-menu-options>\n                <ax-content [innerHTML]=\"sanitizeHtml(reply.message.content)\"></ax-content>\n                <ax-comment-like (click)=\"toggleLike(comment, reply)\" [liked]=\"reply.isLiked!\">\n                  {{ reply.reactionsCount }}\n                </ax-comment-like>\n                <ax-comment-reply-text (click)=\"replyMessage(comment, reply)\"></ax-comment-reply-text>\n              </ax-comment-item>\n            }\n          </ax-comment-item>\n        }\n      </ax-comment-view>\n    } @else {\n      <div>\n        <div class=\"ax-flex ax-flex-col ax-gap-4 ax-justify-center ax-items-center ax-p-10\">\n          <svg\n            class=\"ax-mx-auto\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"154\"\n            height=\"161\"\n            viewBox=\"0 0 154 161\"\n            fill=\"none\"\n          >\n            <path\n              d=\"M0.0616455 84.4268C0.0616455 42.0213 34.435 7.83765 76.6507 7.83765C118.803 7.83765 153.224 42.0055 153.224 84.4268C153.224 102.42 147.026 118.974 136.622 132.034C122.282 150.138 100.367 161 76.6507 161C52.7759 161 30.9882 150.059 16.6633 132.034C6.25961 118.974 0.0616455 102.42 0.0616455 84.4268Z\"\n              fill=\"#EEF2FF\"\n            />\n            <path\n              d=\"M96.8189 0.632498L96.8189 0.632384L96.8083 0.630954C96.2034 0.549581 95.5931 0.5 94.9787 0.5H29.338C22.7112 0.5 17.3394 5.84455 17.3394 12.4473V142.715C17.3394 149.318 22.7112 154.662 29.338 154.662H123.948C130.591 154.662 135.946 149.317 135.946 142.715V38.9309C135.946 38.0244 135.847 37.1334 135.648 36.2586L135.648 36.2584C135.117 33.9309 133.874 31.7686 132.066 30.1333C132.066 30.1331 132.065 30.1329 132.065 30.1327L103.068 3.65203C103.068 3.6519 103.067 3.65177 103.067 3.65164C101.311 2.03526 99.1396 0.995552 96.8189 0.632498Z\"\n              fill=\"white\"\n              stroke=\"#E5E7EB\"\n            />\n            <ellipse cx=\"80.0618\" cy=\"81\" rx=\"28.0342\" ry=\"28.0342\" fill=\"#EEF2FF\" />\n            <path\n              d=\"M99.2393 61.3061L99.2391 61.3058C88.498 50.5808 71.1092 50.5804 60.3835 61.3061C49.6423 72.0316 49.6422 89.4361 60.3832 100.162C71.109 110.903 88.4982 110.903 99.2393 100.162C109.965 89.4363 109.965 72.0317 99.2393 61.3061ZM105.863 54.6832C120.249 69.0695 120.249 92.3985 105.863 106.785C91.4605 121.171 68.1468 121.171 53.7446 106.785C39.3582 92.3987 39.3582 69.0693 53.7446 54.683C68.1468 40.2965 91.4605 40.2966 105.863 54.6832Z\"\n              stroke=\"#E5E7EB\"\n            />\n            <path\n              d=\"M110.782 119.267L102.016 110.492C104.888 108.267 107.476 105.651 109.564 102.955L118.329 111.729L110.782 119.267Z\"\n              stroke=\"#E5E7EB\"\n            />\n            <path\n              d=\"M139.122 125.781L139.122 125.78L123.313 109.988C123.313 109.987 123.313 109.987 123.312 109.986C121.996 108.653 119.849 108.657 118.521 109.985L118.871 110.335L118.521 109.985L109.047 119.459C107.731 120.775 107.735 122.918 109.044 124.247L109.047 124.249L124.858 140.06C128.789 143.992 135.191 143.992 139.122 140.06C143.069 136.113 143.069 129.728 139.122 125.781Z\"\n              fill=\"#A5B4FC\"\n              stroke=\"#818CF8\"\n            />\n            <path\n              d=\"M83.185 87.2285C82.5387 87.2285 82.0027 86.6926 82.0027 86.0305C82.0027 83.3821 77.9987 83.3821 77.9987 86.0305C77.9987 86.6926 77.4627 87.2285 76.8006 87.2285C76.1543 87.2285 75.6183 86.6926 75.6183 86.0305C75.6183 80.2294 84.3831 80.2451 84.3831 86.0305C84.3831 86.6926 83.8471 87.2285 83.185 87.2285Z\"\n              fill=\"#4F46E5\"\n            />\n            <path\n              d=\"M93.3528 77.0926H88.403C87.7409 77.0926 87.2049 76.5567 87.2049 75.8946C87.2049 75.2483 87.7409 74.7123 88.403 74.7123H93.3528C94.0149 74.7123 94.5509 75.2483 94.5509 75.8946C94.5509 76.5567 94.0149 77.0926 93.3528 77.0926Z\"\n              fill=\"#4F46E5\"\n            />\n            <path\n              d=\"M71.5987 77.0925H66.6488C65.9867 77.0925 65.4507 76.5565 65.4507 75.8945C65.4507 75.2481 65.9867 74.7122 66.6488 74.7122H71.5987C72.245 74.7122 72.781 75.2481 72.781 75.8945C72.781 76.5565 72.245 77.0925 71.5987 77.0925Z\"\n              fill=\"#4F46E5\"\n            />\n            <rect x=\"38.3522\" y=\"21.5128\" width=\"41.0256\" height=\"2.73504\" rx=\"1.36752\" fill=\"#4F46E5\" />\n            <rect x=\"38.3522\" y=\"133.65\" width=\"54.7009\" height=\"5.47009\" rx=\"2.73504\" fill=\"#A5B4FC\" />\n            <rect x=\"38.3522\" y=\"29.7179\" width=\"13.6752\" height=\"2.73504\" rx=\"1.36752\" fill=\"#4F46E5\" />\n            <circle cx=\"56.13\" cy=\"31.0854\" r=\"1.36752\" fill=\"#4F46E5\" />\n            <circle cx=\"61.6001\" cy=\"31.0854\" r=\"1.36752\" fill=\"#4F46E5\" />\n            <circle cx=\"67.0702\" cy=\"31.0854\" r=\"1.36752\" fill=\"#4F46E5\" />\n          </svg>\n          <div>\n            <h2 class=\"ax-text-center ax-text-neutral-600 ax-font-semibold ax-leading-loose ax-pb-2\">\n              There is no Comment!\n            </h2>\n          </div>\n        </div>\n      </div>\n    }\n  </ax-comment-container>\n  <ax-form>\n    <ax-form-field>\n      <div>\n        @if (isReplyingMode() || isEditingMode()) {\n          <div\n            class=\"ax-flex ax-justify-between ax-rounded-b-none ax-border ax-border-b-0 ax-rounded-lg ax-bg-on-surface ax-px-6 ax-py-3 ax-w-full ax-items-center ax-overflow-hidden ax-text-sm ax-leading-none\"\n          >\n            <div (click)=\"scrollMain()\" class=\"ax-flex ax-justify-start ax-items-center ax-cursor-pointer\">\n              <i\n                [class]=\"isReplyingMode() ? 'fa-reply' : 'fa-pen'\"\n                class=\"fa-solid ax-text-primary-500 dark:ax-text-primary-300 ax-text-2xl ax-me-4\"\n              ></i>\n              <div\n                class=\"ax-flex ax-flex-col ax-gap-2 ax-justify-between ax-align-middle ax-leading-4 ax-overflow-hidden\"\n              >\n                <p class=\"ax-text-primary-500 dark:ax-text-primary-300\">\n                  {{ isReplyingMode() ? 'Reply to ' : 'Edit Message' }}\n                  <span class=\"ax-font-bold\">\n                    {{ isReplyingMode() ? extractInitials(activeReplyComment()?.author) : '' }}\n                  </span>\n                </p>\n                <div\n                  class=\"ax-truncate\"\n                  [innerHTML]=\"\n                    isReplyingMode()\n                      ? sanitizeHtml(activeReplyComment()?.message?.content ?? '')\n                      : sanitizeHtml(activeEditComment()?.message?.content ?? '')\n                  \"\n                ></div>\n              </div>\n            </div>\n            <div><i (click)=\"resetReplyEditState()\" class=\"fa-solid ax-text-2xl fa-xmark ax-cursor-pointer\"></i></div>\n          </div>\n        }\n        <ax-wysiwyg-container #w [look]=\"wysiwygOptions().look\" [(ngModel)]=\"commentContent\">\n          <ax-wysiwyg-view class=\"ax-min-h-28\"></ax-wysiwyg-view>\n          <ax-toolbar>\n            <ax-content>\n              <ax-wysiwyg-history></ax-wysiwyg-history>\n              <ax-wysiwyg-font-style></ax-wysiwyg-font-style>\n              <ax-wysiwyg-colors></ax-wysiwyg-colors>\n              <ax-wysiwyg-list></ax-wysiwyg-list>\n              <ax-wysiwyg-alignment></ax-wysiwyg-alignment>\n            </ax-content>\n            <ax-suffix>\n              <ax-dropdown-button\n                [disabled]=\"hasCooldown()\"\n                type=\"submit\"\n                color=\"primary\"\n                mode=\"split\"\n                text=\"Send\"\n                (onClick)=\"submitComment()\"\n              >\n                @if (isSubmitting()) {\n                  <ax-loading></ax-loading>\n                }\n                <ax-button-item-list>\n                  <ax-button-item (click)=\"submitComment(true)\" text=\"Send Private ...\" name=\"private\" data=\"private\">\n                    <ax-prefix>\n                      <ax-icon icon=\"fa-regular fa-user-secret\"></ax-icon>\n                    </ax-prefix>\n                  </ax-button-item>\n                </ax-button-item-list>\n              </ax-dropdown-button>\n            </ax-suffix>\n          </ax-toolbar>\n          <ax-validation-rule rule=\"callback\" [options]=\"{ validate: validateContent }\"></ax-validation-rule>\n        </ax-wysiwyg-container>\n      </div>\n    </ax-form-field>\n  </ax-form>\n</div>\n", styles: ["ax-wysiwyg-container .ax-editor-container{border-top-left-radius:0!important;border-top-right-radius:0!important}ax-wysiwyg-container .ax-error-message{padding-left:.5rem}\n"], dependencies: [{ kind: "ngmodule", type: AXWysiwygModule }, { kind: "component", type: i1.AXWysiwygContainerComponent, selector: "ax-wysiwyg-container", inputs: ["look", "placeHolder"], outputs: ["onValueChanged"] }, { kind: "component", type: i1.AXWysiwygViewComponent, selector: "ax-wysiwyg-view", inputs: ["class"] }, { kind: "component", type: i1.AXWysiwygAlignmentComponent, selector: "ax-wysiwyg-alignment" }, { kind: "component", type: i1.AXWysiwygColorsComponent, selector: "ax-wysiwyg-colors" }, { kind: "component", type: i1.AXWysiwygFontStyleComponent, selector: "ax-wysiwyg-font-style" }, { kind: "component", type: i1.AXWysiwygHistoryComponent, selector: "ax-wysiwyg-history" }, { kind: "component", type: i1.AXWysiwygListComponent, selector: "ax-wysiwyg-list" }, { kind: "ngmodule", type: AXConversationModule }, { kind: "ngmodule", type: AXSkeletonModule }, { kind: "component", type: i2$1.AXSkeletonComponent, selector: "ax-skeleton", inputs: ["animated"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i5.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i5.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXCommentModule }, { kind: "component", type: i4.AXCommentViewComponent, selector: "ax-comment-view" }, { kind: "component", type: i4.AXCommentContainerComponent, selector: "ax-comment-container" }, { kind: "component", type: i4.AxCommentItemComponent, selector: "ax-comment-item", inputs: ["replyCount"] }, { kind: "component", type: i4.AXCommentLikeComponent, selector: "ax-comment-like", inputs: ["liked"], outputs: ["likedChange", "onLiked"] }, { kind: "component", type: i4.AXMenuOptionsComponent, selector: "ax-comment-menu-options" }, { kind: "component", type: i4.AXCommentReplyTextComponent, selector: "ax-comment-reply-text" }, { kind: "component", type: i4.AXCommentDateComponent, selector: "ax-comment-date" }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i5$1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: i5$1.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i5$1.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXAvatarModule }, { kind: "component", type: i6.AXAvatarComponent, selector: "ax-avatar", inputs: ["color", "size", "shape", "look"], outputs: ["sizeChange"] }, { kind: "ngmodule", type: AXImageModule }, { kind: "component", type: i7.AXImageComponent, selector: "ax-image", inputs: ["width", "height", "overlayMode", "src", "alt", "priority", "lazy"], outputs: ["onLoad", "onError"] }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "component", type: i8.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "component", type: i9.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "placement", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXFormatModule }, { kind: "pipe", type: i10.AXFormatPipe, name: "format" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: AXFormModule }, { kind: "component", type: i11.AXFormFieldComponent, selector: "ax-form-field", inputs: ["labelMode"] }, { kind: "component", type: i11.AXFormComponent, selector: "ax-form", inputs: ["labelMode", "look", "messageStyle", "updateOn"], outputs: ["onValidate", "updateOnChange"] }, { kind: "directive", type: i11.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }, { kind: "ngmodule", type: AXToolBarModule }, { kind: "component", type: i12.AXToolBarComponent, selector: "ax-toolbar" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i13.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i13.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXDropdownButtonModule }, { kind: "component", type: i14.AXDropdownButtonComponent, selector: "ax-dropdown-button", inputs: ["disabled", "size", "color", "look", "text", "type", "mode"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "lookChange", "colorChange", "disabledChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXMChatPreviewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXMCommentListViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'axm-chat-preview', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div class=\"ax-flex ax-flex-col ax-bg-surface-container\">\n  <!-- Messages Container -->\n  <ax-conversation-container class=\"ax-flex-1 ax-overflow-hidden\">\n    <ax-conversation-view (onAction)=\"handleOnAction($event)\" [style.height]=\"dynamicHeight()\"></ax-conversation-view>\n  </ax-conversation-container>\n\n  <!-- Input Area -->\n  <div class=\"ax-p-2\">\n    <ax-conversation-input\n      placeholder=\"Type a message...\"\n      [(ngModel)]=\"options().value\"\n      (onSendClick)=\"handleOnSend($event)\"\n      (onFileChange)=\"handleFileChange($event)\"\n      (onStopRecording)=\"handleEndRecord($event)\"\n      (onCancelRecording)=\"handleCancelRecord($event)\"\n    ></ax-conversation-input>\n  </div>\n</div>\n", styles: [":host{display:flex;flex-direction:column;height:100%;background-color:var(--ax-surface-container)}:host::ng-deep ax-conversation-view>div{height:50rem!important}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }] });
+            args: [{ selector: 'axm-comment-list-view', imports: [
+                        AXWysiwygModule,
+                        AXConversationModule,
+                        AXSkeletonModule,
+                        AXDecoratorModule,
+                        AXCommentModule,
+                        AXButtonModule,
+                        AXAvatarModule,
+                        AXImageModule,
+                        AXLoadingModule,
+                        AXDropdownModule,
+                        AXFormatModule,
+                        AsyncPipe,
+                        AXFormModule,
+                        AXToolBarModule,
+                        FormsModule,
+                        AXDropdownButtonModule,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ax-mt-2\">\n  <ax-comment-container>\n    @if (isLoading()) {\n      <div class=\"ax-flex ax-items-center ax-py-12 ax-bg-lightest ax-px-5\">\n        <ax-skeleton class=\"ax-min-w-16 ax-h-16 ax-rounded-full ax-me-4\"></ax-skeleton>\n        <div class=\"ax-flex ax-flex-col ax-gap-2 ax-w-full\">\n          <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded\"></ax-skeleton>\n          <ax-skeleton class=\"ax-w-full ax-h-2 ax-rounded-full\"></ax-skeleton>\n          <ax-skeleton class=\"ax-w-full ax-h-2 ax-rounded-full\"></ax-skeleton>\n          <ax-skeleton class=\"ax-w-8/12 ax-h-2 ax-rounded-full\"></ax-skeleton>\n        </div>\n      </div>\n    } @else if (!isLoading() && comments().length > 0) {\n      <ax-comment-view class=\"ax-bg-lightest\">\n        @for (comment of comments(); track comment.id) {\n          <ax-comment-item [id]=\"comment.id!\" [replyCount]=\"comment.replies?.length ?? 0\">\n            <ax-avatar [color]=\"avatarConfig().color\" [shape]=\"avatarConfig().look\">\n              @if (checkImageExists(comment.id!) && comment.author && extractInitials(comment.author) !== '?') {\n                <ax-image (onError)=\"handleImageError(comment.id!)\" [src]=\"''\">\n                  <ax-loading></ax-loading>\n                </ax-image>\n              } @else {\n                <ax-text>\n                  <span class=\"ax-text-base ax-overflow-hidden\">{{ extractInitials(comment.author) }}</span>\n                </ax-text>\n              }\n            </ax-avatar>\n            <ax-title>{{ extractInitials(comment.author) }}</ax-title>\n            <ax-comment-date>{{ calcDefrenetTime(comment.createdAt) | format: 'timeleft' | async }} </ax-comment-date>\n            <ax-comment-menu-options>\n              <ax-button class=\"ax-sm\" look=\"blank\" color=\"neutral\">\n                <ax-icon icon=\"ax-icon ax-icon-solid ax-icon-more-horizontal\"></ax-icon>\n              </ax-button>\n\n              <ax-dropdown-panel>\n                <ax-button-item-list>\n                  <ax-button-item text=\"Edit\" color=\"neutral\" (click)=\"editMessage(comment)\">\n                    <ax-prefix>\n                      <ax-icon icon=\"fa-solid fa-edit\"></ax-icon>\n                    </ax-prefix>\n                  </ax-button-item>\n\n                  <ax-button-item text=\"Delete\" color=\"danger\" (click)=\"deleteComment(comment)\">\n                    <ax-prefix>\n                      <ax-icon icon=\"fa-solid fa-trash-can\"></ax-icon>\n                    </ax-prefix>\n                  </ax-button-item>\n                </ax-button-item-list>\n              </ax-dropdown-panel>\n            </ax-comment-menu-options>\n            <ax-content [innerHTML]=\"sanitizeHtml(comment.message.content)\"></ax-content>\n            <ax-comment-like (click)=\"toggleLike(comment)\" [liked]=\"comment.isLiked!\">\n              {{ comment.reactionsCount }}\n            </ax-comment-like>\n            <ax-comment-reply-text (click)=\"replyMessage(comment)\"></ax-comment-reply-text>\n            @for (reply of comment.replies; track reply.id) {\n              <ax-comment-item [id]=\"reply.id\">\n                <ax-avatar [color]=\"avatarConfig().color\" [shape]=\"avatarConfig().look\">\n                  @if (reply && checkImageExists(reply.id!) && reply.author && extractInitials(reply.author) !== '?') {\n                    <ax-image (onError)=\"handleImageError(reply.id!)\" [src]=\"''\">\n                      <ax-loading></ax-loading>\n                    </ax-image>\n                  } @else {\n                    <ax-text>\n                      <span class=\"ax-text-base ax-overflow-hidden\">{{ extractInitials(reply.author) }}</span>\n                    </ax-text>\n                  }\n                </ax-avatar>\n                <ax-title>{{ extractInitials(reply.author) }}</ax-title>\n                <ax-comment-date>{{ calcDefrenetTime(reply.createdAt) | format: 'timeleft' | async }} </ax-comment-date>\n                <ax-comment-menu-options>\n                  <ax-button class=\"ax-sm\" look=\"blank\" color=\"neutral\">\n                    <ax-icon icon=\"ax-icon ax-icon-solid ax-icon-more-horizontal\"></ax-icon>\n                  </ax-button>\n\n                  <ax-dropdown-panel>\n                    <ax-button-item-list>\n                      <ax-button-item text=\"Edit\" color=\"neutral\" (click)=\"editMessage(comment, reply)\">\n                        <ax-prefix>\n                          <ax-icon icon=\"fa-solid fa-edit\"></ax-icon>\n                        </ax-prefix>\n                      </ax-button-item>\n                      <ax-button-item text=\"Delete\" color=\"danger\" (click)=\"deleteReply(comment, reply)\">\n                        <ax-prefix>\n                          <ax-icon icon=\"fa-solid fa-trash-can\"></ax-icon>\n                        </ax-prefix>\n                      </ax-button-item>\n                    </ax-button-item-list>\n                  </ax-dropdown-panel>\n                </ax-comment-menu-options>\n                <ax-content [innerHTML]=\"sanitizeHtml(reply.message.content)\"></ax-content>\n                <ax-comment-like (click)=\"toggleLike(comment, reply)\" [liked]=\"reply.isLiked!\">\n                  {{ reply.reactionsCount }}\n                </ax-comment-like>\n                <ax-comment-reply-text (click)=\"replyMessage(comment, reply)\"></ax-comment-reply-text>\n              </ax-comment-item>\n            }\n          </ax-comment-item>\n        }\n      </ax-comment-view>\n    } @else {\n      <div>\n        <div class=\"ax-flex ax-flex-col ax-gap-4 ax-justify-center ax-items-center ax-p-10\">\n          <svg\n            class=\"ax-mx-auto\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"154\"\n            height=\"161\"\n            viewBox=\"0 0 154 161\"\n            fill=\"none\"\n          >\n            <path\n              d=\"M0.0616455 84.4268C0.0616455 42.0213 34.435 7.83765 76.6507 7.83765C118.803 7.83765 153.224 42.0055 153.224 84.4268C153.224 102.42 147.026 118.974 136.622 132.034C122.282 150.138 100.367 161 76.6507 161C52.7759 161 30.9882 150.059 16.6633 132.034C6.25961 118.974 0.0616455 102.42 0.0616455 84.4268Z\"\n              fill=\"#EEF2FF\"\n            />\n            <path\n              d=\"M96.8189 0.632498L96.8189 0.632384L96.8083 0.630954C96.2034 0.549581 95.5931 0.5 94.9787 0.5H29.338C22.7112 0.5 17.3394 5.84455 17.3394 12.4473V142.715C17.3394 149.318 22.7112 154.662 29.338 154.662H123.948C130.591 154.662 135.946 149.317 135.946 142.715V38.9309C135.946 38.0244 135.847 37.1334 135.648 36.2586L135.648 36.2584C135.117 33.9309 133.874 31.7686 132.066 30.1333C132.066 30.1331 132.065 30.1329 132.065 30.1327L103.068 3.65203C103.068 3.6519 103.067 3.65177 103.067 3.65164C101.311 2.03526 99.1396 0.995552 96.8189 0.632498Z\"\n              fill=\"white\"\n              stroke=\"#E5E7EB\"\n            />\n            <ellipse cx=\"80.0618\" cy=\"81\" rx=\"28.0342\" ry=\"28.0342\" fill=\"#EEF2FF\" />\n            <path\n              d=\"M99.2393 61.3061L99.2391 61.3058C88.498 50.5808 71.1092 50.5804 60.3835 61.3061C49.6423 72.0316 49.6422 89.4361 60.3832 100.162C71.109 110.903 88.4982 110.903 99.2393 100.162C109.965 89.4363 109.965 72.0317 99.2393 61.3061ZM105.863 54.6832C120.249 69.0695 120.249 92.3985 105.863 106.785C91.4605 121.171 68.1468 121.171 53.7446 106.785C39.3582 92.3987 39.3582 69.0693 53.7446 54.683C68.1468 40.2965 91.4605 40.2966 105.863 54.6832Z\"\n              stroke=\"#E5E7EB\"\n            />\n            <path\n              d=\"M110.782 119.267L102.016 110.492C104.888 108.267 107.476 105.651 109.564 102.955L118.329 111.729L110.782 119.267Z\"\n              stroke=\"#E5E7EB\"\n            />\n            <path\n              d=\"M139.122 125.781L139.122 125.78L123.313 109.988C123.313 109.987 123.313 109.987 123.312 109.986C121.996 108.653 119.849 108.657 118.521 109.985L118.871 110.335L118.521 109.985L109.047 119.459C107.731 120.775 107.735 122.918 109.044 124.247L109.047 124.249L124.858 140.06C128.789 143.992 135.191 143.992 139.122 140.06C143.069 136.113 143.069 129.728 139.122 125.781Z\"\n              fill=\"#A5B4FC\"\n              stroke=\"#818CF8\"\n            />\n            <path\n              d=\"M83.185 87.2285C82.5387 87.2285 82.0027 86.6926 82.0027 86.0305C82.0027 83.3821 77.9987 83.3821 77.9987 86.0305C77.9987 86.6926 77.4627 87.2285 76.8006 87.2285C76.1543 87.2285 75.6183 86.6926 75.6183 86.0305C75.6183 80.2294 84.3831 80.2451 84.3831 86.0305C84.3831 86.6926 83.8471 87.2285 83.185 87.2285Z\"\n              fill=\"#4F46E5\"\n            />\n            <path\n              d=\"M93.3528 77.0926H88.403C87.7409 77.0926 87.2049 76.5567 87.2049 75.8946C87.2049 75.2483 87.7409 74.7123 88.403 74.7123H93.3528C94.0149 74.7123 94.5509 75.2483 94.5509 75.8946C94.5509 76.5567 94.0149 77.0926 93.3528 77.0926Z\"\n              fill=\"#4F46E5\"\n            />\n            <path\n              d=\"M71.5987 77.0925H66.6488C65.9867 77.0925 65.4507 76.5565 65.4507 75.8945C65.4507 75.2481 65.9867 74.7122 66.6488 74.7122H71.5987C72.245 74.7122 72.781 75.2481 72.781 75.8945C72.781 76.5565 72.245 77.0925 71.5987 77.0925Z\"\n              fill=\"#4F46E5\"\n            />\n            <rect x=\"38.3522\" y=\"21.5128\" width=\"41.0256\" height=\"2.73504\" rx=\"1.36752\" fill=\"#4F46E5\" />\n            <rect x=\"38.3522\" y=\"133.65\" width=\"54.7009\" height=\"5.47009\" rx=\"2.73504\" fill=\"#A5B4FC\" />\n            <rect x=\"38.3522\" y=\"29.7179\" width=\"13.6752\" height=\"2.73504\" rx=\"1.36752\" fill=\"#4F46E5\" />\n            <circle cx=\"56.13\" cy=\"31.0854\" r=\"1.36752\" fill=\"#4F46E5\" />\n            <circle cx=\"61.6001\" cy=\"31.0854\" r=\"1.36752\" fill=\"#4F46E5\" />\n            <circle cx=\"67.0702\" cy=\"31.0854\" r=\"1.36752\" fill=\"#4F46E5\" />\n          </svg>\n          <div>\n            <h2 class=\"ax-text-center ax-text-neutral-600 ax-font-semibold ax-leading-loose ax-pb-2\">\n              There is no Comment!\n            </h2>\n          </div>\n        </div>\n      </div>\n    }\n  </ax-comment-container>\n  <ax-form>\n    <ax-form-field>\n      <div>\n        @if (isReplyingMode() || isEditingMode()) {\n          <div\n            class=\"ax-flex ax-justify-between ax-rounded-b-none ax-border ax-border-b-0 ax-rounded-lg ax-bg-on-surface ax-px-6 ax-py-3 ax-w-full ax-items-center ax-overflow-hidden ax-text-sm ax-leading-none\"\n          >\n            <div (click)=\"scrollMain()\" class=\"ax-flex ax-justify-start ax-items-center ax-cursor-pointer\">\n              <i\n                [class]=\"isReplyingMode() ? 'fa-reply' : 'fa-pen'\"\n                class=\"fa-solid ax-text-primary-500 dark:ax-text-primary-300 ax-text-2xl ax-me-4\"\n              ></i>\n              <div\n                class=\"ax-flex ax-flex-col ax-gap-2 ax-justify-between ax-align-middle ax-leading-4 ax-overflow-hidden\"\n              >\n                <p class=\"ax-text-primary-500 dark:ax-text-primary-300\">\n                  {{ isReplyingMode() ? 'Reply to ' : 'Edit Message' }}\n                  <span class=\"ax-font-bold\">\n                    {{ isReplyingMode() ? extractInitials(activeReplyComment()?.author) : '' }}\n                  </span>\n                </p>\n                <div\n                  class=\"ax-truncate\"\n                  [innerHTML]=\"\n                    isReplyingMode()\n                      ? sanitizeHtml(activeReplyComment()?.message?.content ?? '')\n                      : sanitizeHtml(activeEditComment()?.message?.content ?? '')\n                  \"\n                ></div>\n              </div>\n            </div>\n            <div><i (click)=\"resetReplyEditState()\" class=\"fa-solid ax-text-2xl fa-xmark ax-cursor-pointer\"></i></div>\n          </div>\n        }\n        <ax-wysiwyg-container #w [look]=\"wysiwygOptions().look\" [(ngModel)]=\"commentContent\">\n          <ax-wysiwyg-view class=\"ax-min-h-28\"></ax-wysiwyg-view>\n          <ax-toolbar>\n            <ax-content>\n              <ax-wysiwyg-history></ax-wysiwyg-history>\n              <ax-wysiwyg-font-style></ax-wysiwyg-font-style>\n              <ax-wysiwyg-colors></ax-wysiwyg-colors>\n              <ax-wysiwyg-list></ax-wysiwyg-list>\n              <ax-wysiwyg-alignment></ax-wysiwyg-alignment>\n            </ax-content>\n            <ax-suffix>\n              <ax-dropdown-button\n                [disabled]=\"hasCooldown()\"\n                type=\"submit\"\n                color=\"primary\"\n                mode=\"split\"\n                text=\"Send\"\n                (onClick)=\"submitComment()\"\n              >\n                @if (isSubmitting()) {\n                  <ax-loading></ax-loading>\n                }\n                <ax-button-item-list>\n                  <ax-button-item (click)=\"submitComment(true)\" text=\"Send Private ...\" name=\"private\" data=\"private\">\n                    <ax-prefix>\n                      <ax-icon icon=\"fa-regular fa-user-secret\"></ax-icon>\n                    </ax-prefix>\n                  </ax-button-item>\n                </ax-button-item-list>\n              </ax-dropdown-button>\n            </ax-suffix>\n          </ax-toolbar>\n          <ax-validation-rule rule=\"callback\" [options]=\"{ validate: validateContent }\"></ax-validation-rule>\n        </ax-wysiwyg-container>\n      </div>\n    </ax-form-field>\n  </ax-form>\n</div>\n", styles: ["ax-wysiwyg-container .ax-editor-container{border-top-left-radius:0!important;border-top-right-radius:0!important}ax-wysiwyg-container .ax-error-message{padding-left:.5rem}\n"] }]
+        }] });
 
-/**
- * Abstract Comment Service defining the contract for comment functionality
- */
-class AXMCommentService {
+//#region ----   Abstract Chat Service   ----
+class AXMChatService {
 }
-class AXMCommentServiceImpl {
+//#endregion
+class AXMChatServiceImpl {
     constructor() {
         this.roomService = inject(AXMRoomService);
         this.messageService = inject(AXMMessageService);
         this.sessionService = inject(AXPSessionService);
         this.usersService = inject(AXMUsersEntityService);
+        this._messageSent$ = new Subject();
+        this.messageSent$ = this._messageSent$.asObservable();
     }
-    // === Helper Methods ===
+    //#region ----   Helper Methods   ----
     getCurrentUser() {
         const user = this.sessionService.user;
         return {
@@ -1602,740 +1519,1119 @@ class AXMCommentServiceImpl {
             const user = await this.usersService.getOne(userId);
             return {
                 id: user.id,
-                userName: user.username || user.id,
-                firstName: user.firstName || '',
-                lastName: user.lastName || '',
-                fullName: `${user.firstName || ''} ${user.lastName || ''}`.trim() || 'Unknown User',
-                avatar: '',
+                type: 'user',
             };
         }
         catch (error) {
             console.error(`Failed to get user info for ID: ${userId}`, error);
             return {
                 id: userId,
-                userName: userId,
-                firstName: 'Unknown',
-                lastName: 'User',
-                fullName: 'Unknown User',
-                avatar: '',
+                type: 'user',
             };
         }
     }
-    formatRoomId(entityId, instanceId, roomType = 'default') {
-        return `${roomType}:${entityId}:${instanceId}`;
+    formatMessage(message) {
+        return message;
     }
-    async formatComment(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;
-        // Check if the current user has liked this message
-        const isLiked = (message.reactions || []).some((reaction) => reaction.author.id === currentUserId && reaction.type === 'like');
-        // Count total reactions
-        const reactionsCount = (message.reactions || []).filter((r) => r.type === 'like').length;
-        // Get the full user info for the author
-        const userInfo = await this.getUserInfo(message.author.id);
-        return {
-            ...message,
-            author: {
-                ...message.author,
-                ...userInfo,
-            },
-            isFromCurrentUser: message.author.id === currentUserId,
-            formattedDate: new Date(message.createdAt || new Date()).toLocaleString(),
-            isLiked,
-            reactionsCount,
-            replies: [],
-        };
+        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;
     }
-    async buildCommentHierarchy(comments) {
-        // Create a map for quick lookup of comments by ID
-        const commentMap = new Map();
-        const rootComments = [];
-        // First pass: add all comments to the map
-        for (const comment of comments) {
-            commentMap.set(comment.id, comment);
-            // Initialize the replies array if not already present
-            if (!comment.replies) {
-                comment.replies = [];
-            }
-            // If this is a root comment (no replyId), add it to the root comments array
-            if (!comment.replyId) {
-                rootComments.push(comment);
-            }
-        }
-        // Second pass: build the hierarchy by adding replies to their parent comments
-        for (const comment of comments) {
-            if (comment.replyId) {
-                const parentComment = commentMap.get(comment.replyId);
-                if (parentComment && parentComment.replies) {
-                    parentComment.replies.push(comment);
-                }
-                else {
-                    // If parent not found (might be deleted), treat as a root comment
-                    rootComments.push(comment);
-                }
-            }
+    //#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');
         }
-        // Sort the root comments and their replies by creation date (newest first)
-        const sortByDate = (a, b) => {
-            const dateA = a.createdAt ? new Date(a.createdAt).getTime() : 0;
-            const dateB = b.createdAt ? new Date(b.createdAt).getTime() : 0;
-            return dateB - dateA;
+        const currentUser = this.getCurrentUser();
+        const allMemberIds = [...new Set([...memberIds, currentUser.id])];
+        const memberReferences = await Promise.all(allMemberIds.map((id) => this.getUserInfo(id)));
+        const userNames = await Promise.all(memberReferences.map(async (ref) => {
+            const user = await this.usersService.getOne(ref.id);
+            return `${user.firstName} ${user.lastName}`.trim();
+        }));
+        const room = {
+            members: memberReferences,
+            title: title,
+            topic: memberIds.length > 2 ? 'group' : 'personal',
+            createdAt: new Date(),
+            updatedAt: new Date(),
+            createdBy: this.getCurrentUser().id,
+            updatedBy: this.getCurrentUser().id,
         };
-        rootComments.sort(sortByDate);
-        // Sort the replies within each comment
-        for (const comment of rootComments) {
-            if (comment.replies && comment.replies.length > 0) {
-                comment.replies.sort(sortByDate);
-            }
-        }
-        return rootComments;
+        const roomId = await this.roomService.insertOne(room);
+        return this.getRoom(roomId);
     }
-    // === Room Operations ===
-    async getRoomList(skip = 0, take = 100) {
-        return this.roomService.query({ skip, take });
+    async getRoom(roomId) {
+        const room = await this.roomService.getOne(roomId);
+        if (!room) {
+            throw new Error(`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;
+        return {
+            ...room,
+            lastMessage,
+            unreadCount,
+            members: room.members.filter((m) => m.id !== currentUserId),
+        };
     }
-    async getRoomDetails(roomId) {
-        return this.roomService.getOne(roomId);
+    async listRooms(skip = 0, take = 100) {
+        const { items, total } = await this.roomService.query({ skip, take });
+        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 createRoom(roomData) {
-        return this.roomService.insertOne(roomData);
+    async updateRoom(roomId, data) {
+        const update = { ...data, updatedAt: new Date(), updatedBy: this.getCurrentUser().id };
+        return this.roomService.updateOne(roomId, update);
     }
-    async ensureRoomExists(entityId, instanceId, roomType = 'default') {
-        const roomId = this.formatRoomId(entityId, instanceId, roomType);
+    async deleteRoom(roomId) {
         try {
-            // Check if room exists
-            await this.getRoomDetails(roomId);
-            return roomId;
+            await this.roomService.deleteOne(roomId);
+            return true;
         }
         catch (error) {
-            // If room doesn't exist, create it
-            const roomData = {
-                id: roomId, // Provide the ID directly for comments
-                title: `Comments for ${entityId}:${instanceId}`,
-                members: [this.getCurrentUser()],
-            };
-            // Create a new room or return the ID if it already exists
-            try {
-                const result = await this.createRoom(roomData);
-                return typeof result === 'string' ? result : roomId;
-            }
-            catch (e) {
-                // If we get a duplicate error, the room was created by another request
-                return roomId;
-            }
+            return false;
         }
     }
-    // === Comment Operations ===
-    async query(queryRequest) {
-        const { params, skip = 0, take = 20 } = queryRequest;
-        const { entityId, instanceId, roomType = 'default' } = params || {};
-        if (!entityId || !instanceId) {
-            throw new Error('EntityId and InstanceId are required for querying comments');
-        }
-        const roomId = this.formatRoomId(entityId, instanceId, roomType);
-        // Fetch messages for this room
-        const result = await this.messageService.query({
-            skip,
-            take,
-            filter: {
-                field: 'roomId',
-                value: roomId,
-                operator: { type: 'equal' },
-            },
+    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,
         });
-        // Transform messages to comments
-        const comments = await Promise.all(result.items.map((message) => this.formatComment(message)));
-        // Build comment hierarchy
-        const hierarchicalComments = await this.buildCommentHierarchy(comments);
-        return {
-            items: hierarchicalComments,
-            total: result.total,
-        };
     }
-    async getOne(id) {
-        const message = await this.messageService.getOne(id);
-        return this.formatComment(message);
+    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,
+        });
     }
-    async insertOne(commentData) {
-        const { entityId, instanceId, roomType = 'default', content, contentType = 'text', replyId, isPrivate, } = commentData;
-        // Ensure the room exists
-        const roomId = await this.ensureRoomExists(entityId, instanceId, roomType);
-        // Create the message content
-        const messageContent = {
-            content,
-            contentType,
-        };
-        // Create the message object
+    //#endregion
+    //#region ----   ChatMessageService Implementations   ----
+    async sendMessage(roomId, content, contentType = 'text', replyId) {
+        const author = this.getCurrentUser();
+        const messageContent = { content, contentType };
         const message = {
             roomId,
             message: messageContent,
-            author: this.getCurrentUser(),
-            replyId: replyId || null,
+            author,
+            replyId,
+            createdAt: new Date(),
+            updatedAt: new Date(),
+            createdBy: this.getCurrentUser().id,
+            updatedBy: this.getCurrentUser().id,
+            reactions: [],
+            seen: [],
         };
-        // Insert the message
-        const messageId = await this.messageService.insertOne(message);
-        // Fetch the full message to return as a comment entity
-        const insertedMessage = await this.messageService.getOne(messageId);
-        return this.formatComment(insertedMessage);
+        const messageId = await this.messageService.insertOne({ ...message });
+        const newMessage = await this.messageService.getOne(messageId);
+        const formattedMessage = this.formatMessage(newMessage);
+        this._messageSent$.next(formattedMessage);
+        return formattedMessage;
     }
-    async updateOne(id, update) {
-        // If content is being updated, format it correctly
-        let messageUpdate = {};
-        if (update.message?.content) {
-            messageUpdate.message = {
-                content: update.message.content,
-                contentType: update.message.contentType || 'text',
-            };
-        }
-        // Apply the update
-        const result = await this.messageService.updateOne(id, messageUpdate);
-        // Return as a comment entity
-        return this.formatComment(result);
+    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 = result.items.map((m) => this.formatMessage(m));
+        return { items: formattedMessages, total: result.total };
     }
-    async deleteOne(id) {
+    async getMessage(messageId) {
+        const message = await this.messageService.getOne(messageId);
+        return this.formatMessage(message);
+    }
+    async editMessage(messageId, content, contentType = 'text') {
+        const messageContent = { content, contentType };
+        return this.messageService.updateOne(messageId, {
+            message: messageContent,
+            updatedAt: new Date(),
+            updatedBy: this.getCurrentUser().id,
+        });
+    }
+    async deleteMessage(messageId) {
         try {
-            await this.messageService.deleteOne(id);
+            await this.messageService.deleteOne(messageId);
             return true;
         }
         catch (error) {
-            console.error('Failed to delete comment:', error);
             return false;
         }
     }
-    // === Comment-Specific Operations ===
-    async like(messageId) {
+    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);
-        // Check if the user has already liked this message
         const reactions = message.reactions || [];
-        const existingReaction = reactions.find((r) => r.author.id === author.id && r.type === 'like');
-        let updatedReactions;
-        if (existingReaction) {
-            // If the reaction exists, remove it (unlike)
-            updatedReactions = reactions.filter((r) => !(r.author.id === author.id && r.type === 'like'));
+        if (reactions.some((r) => r.author.id === author.id && r.type === type)) {
+            return message;
         }
-        else {
-            // If the reaction doesn't exist, add it (like)
-            updatedReactions = [...reactions, { author, type: 'like' }];
+        const updatedReactions = [...reactions, { author, type }];
+        return this.messageService.updateOne(messageId, {
+            reactions: updatedReactions,
+            updatedAt: new Date(),
+            updatedBy: this.getCurrentUser().id,
+        });
+    }
+    async removeReaction(messageId, type) {
+        const author = this.getCurrentUser();
+        const message = await this.messageService.getOne(messageId);
+        const updatedReactions = (message.reactions || []).filter((r) => !(r.author.id === author.id && r.type === type));
+        return this.messageService.updateOne(messageId, {
+            reactions: updatedReactions,
+            updatedAt: new Date(),
+            updatedBy: this.getCurrentUser().id,
+        });
+    }
+    async getReactions(messageId) {
+        const message = await this.messageService.getOne(messageId);
+        return message.reactions || [];
+    }
+    //#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;
         }
-        // Update the message with the new reactions
-        const updatedMessage = await this.messageService.updateOne(messageId, { reactions: updatedReactions });
-        // Return as a comment entity
-        return this.formatComment(updatedMessage);
+        const updatedSeen = [...seen, { author, type: 'read' }];
+        return this.messageService.updateOne(messageId, {
+            seen: updatedSeen,
+            updatedAt: new Date(),
+            updatedBy: this.getCurrentUser().id,
+        });
     }
-    async getCommentCount(entityId, instanceId, roomType = 'default') {
-        const roomId = this.formatRoomId(entityId, instanceId, roomType);
+    async getSeenBy(messageId) {
+        const message = await this.messageService.getOne(messageId);
+        return message.seen || [];
+    }
+    async markRoomSeen(roomId) {
         try {
-            const result = await this.messageService.query({
-                skip: 0,
-                take: 1,
-                filter: {
-                    field: 'roomId',
-                    value: roomId,
-                    operator: { type: 'equal' },
-                },
-            });
-            return result.total;
+            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)));
+            }
+            return true;
         }
         catch (error) {
-            console.error('Failed to get comment count:', error);
-            return 0;
+            console.error(`Error marking room ${roomId} as seen:`, error);
+            return false;
         }
     }
-    async getAllCommentsWithReplies(entityId, instanceId, roomType = 'default', skip = 0, take = 100) {
-        const queryRequest = {
-            params: { entityId, instanceId, roomType },
-            skip,
-            take,
-        };
-        return this.query(queryRequest);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXMCommentServiceImpl, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXMCommentServiceImpl, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXMChatServiceImpl, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXMChatServiceImpl, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXMCommentServiceImpl, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXMChatServiceImpl, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
                 }]
         }] });
 
-class AXMCommentLookupPopup extends AXBasePageComponent {
+class AXMChatItemComponent {
     constructor() {
-        super(...arguments);
-        this.lookupNode = {
-            name: 'lookup',
-            path: 'lookup',
-            type: 'lookup-editor',
-            options: {
-                entity: 'axoidc.users',
-            },
-        };
-        this.context = {};
-    }
-    handleClose() {
-        this.close({
-            result: true,
-            data: this.context,
+        // Input
+        this.data = input.required();
+        // Output
+        this.pressChatItem = output();
+        // Services
+        this.sessionService = inject(AXPSessionService);
+        this.userService = inject(AXMUsersEntityService);
+        this.datePipe = inject(DatePipe);
+        this.chatName = signal({ fullName: 'Loading...', id: '' });
+        this.#chatInfoEffect = effect(async () => {
+            const { members, title, id } = this.data();
+            if (members.length > 1) {
+                this.chatName.set({
+                    fullName: title || 'Group Chat',
+                    id,
+                });
+                return;
+            }
+            const member = members[0];
+            if (!member) {
+                this.chatName.set({ fullName: 'Unknown User', id: '' });
+                return;
+            }
+            const data = await this.userService.getOne(member.id);
+            this.chatName.set({
+                fullName: `${data.firstName} ${data.lastName}`,
+                id: member.id,
+            });
+        });
+        this.formattedLastMessageDate = computed(() => {
+            const lastMessage = this.data().lastMessage;
+            if (!lastMessage?.createdAt) {
+                return '';
+            }
+            const messageDate = new Date(lastMessage.createdAt);
+            const today = new Date();
+            const isToday = messageDate.getFullYear() === today.getFullYear() &&
+                messageDate.getMonth() === today.getMonth() &&
+                messageDate.getDate() === today.getDate();
+            if (isToday) {
+                return this.datePipe.transform(messageDate, 'shortTime');
+            }
+            else {
+                return this.datePipe.transform(messageDate, 'mediumDate');
+            }
+        });
+        this.lastMessage = computed(() => {
+            const message = this.data().lastMessage?.message;
+            if (!message)
+                return { content: 'No messages yet', contentType: 'text' };
+            return {
+                content: message.contentType === 'text' ? message.content : message.contentType,
+                contentType: message.contentType,
+            };
+        });
+        this.hasUnread = computed(() => {
+            return this.data().unreadCount > 0;
+        });
+        this.unreadCount = computed(() => {
+            return this.data().unreadCount.toString();
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXMCommentLookupPopup, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.4", type: AXMCommentLookupPopup, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `<axp-widgets-container
-      class="ax-flex ax-flex-col ax-gap-2 ax-p-4"
-      [context]="context"
-      (onContextChanged)="context = $event.data"
-    >
-      <div class="ax-m-5">
-        <ng-container axp-widget-renderer [node]="lookupNode" [mode]="'edit'"> </ng-container>
-      </div>
-    </axp-widgets-container>
-
-    <ax-footer>
-      <ax-suffix>
-        <ax-button text="Accept & Send" color="primary" (onClick)="handleClose()"></ax-button>
-      </ax-suffix>
-    </ax-footer>`, isInline: true, dependencies: [{ kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i5.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "component", type: i2$3.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i2$3.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged"], exportAs: ["widgetRenderer"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i6$1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }] }); }
+    #chatInfoEffect;
+    onPressChatItem(id) {
+        this.pressChatItem.emit(id);
+    }
+    messageSeenStatus() {
+        const lastMessage = this.data().lastMessage;
+        if (!lastMessage)
+            return '';
+        // Check if current user is the author
+        if (this.sessionService.user?.id === lastMessage.author?.id) {
+            // Check if message has been seen by anyone
+            return lastMessage.seen.length > 0 ? 'ax-icon-dobble-check' : 'ax-icon-check';
+        }
+        return '';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXMChatItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: AXMChatItemComponent, isStandalone: true, selector: "axm-chat-item", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { pressChatItem: "pressChatItem" }, ngImport: i0, template: "<div\n  [id]=\"data().id\"\n  class=\"ax-cursor-pointer ax-p-4 ax-flex ax-items-center ax-justify-between ax-gap-4 ax-border-b ax-border-divider\"\n  (click)=\"onPressChatItem(data().id)\"\n>\n  <!-- Avatar and User Info Section -->\n  <div class=\"ax-flex ax-min-w-0 ax-gap-4 ax-flex-1\">\n    <!-- Avatar with Online Status -->\n    <div class=\"ax-flex-shrink-0\">\n      <axp-user-avatar [size]=\"48\" [userId]=\"chatName().id\"></axp-user-avatar>\n      <!--Temp-->\n    </div>\n\n    <!-- User Details and Last Message -->\n    <div class=\"ax-flex ax-flex-col ax-min-w-0 ax-flex-1 ax-gap-2\">\n      <div class=\"ax-flex ax-items-center ax-justify-between ax-gap-2\">\n        <p class=\"ax-font-semibold ax-text-on-surface ax-truncate ax-pt-1\" [title]=\"chatName().fullName\">\n          {{ chatName().fullName }}\n        </p>\n        <div class=\"ax-flex ax-items-center ax-gap-1\">\n          @if (messageSeenStatus()) {\n            <ax-icon class=\"ax-icon ax-text-success ax-size-5\" [class]=\"messageSeenStatus()\"></ax-icon>\n          }\n          @if (this.data().lastMessage) {\n            <span class=\"ax-text-xs ax-whitespace-nowrap\">\n              {{ formattedLastMessageDate() }}\n            </span>\n          }\n        </div>\n      </div>\n      <div class=\"ax-flex ax-items-center ax-gap-2 ax-mt-1 ax-overflow-hidden\">\n        <div class=\"ax-flex ax-items-center ax-gap-2 ax-text-sm ax-shrink ax-min-w-0\">\n          @switch (lastMessage().contentType) {\n            @case ('image') {\n              <i class=\"fa-regular fa-image\"></i>\n            }\n            @case ('video') {\n              <i class=\"fa-regular fa-video\"></i>\n            }\n            @case ('file') {\n              <i class=\"fa-regular fa-file\"></i>\n            }\n            @case ('audio') {\n              <i class=\"fa-regular fa-microphone\"></i>\n            }\n            @case ('link') {\n              <i class=\"fa-regular fa-link\"></i>\n            }\n            <!-- @default {\n              <i class=\"fa-regular fa-message\"></i>\n            } -->\n          }\n          <p class=\"ax-truncate ax-capitalize\">\n            {{ lastMessage().content }}\n          </p>\n        </div>\n        @if (hasUnread()) {\n          <ax-badge color=\"primary\" [text]=\"unreadCount()\" class=\"ax-flex-shrink-0 ax-ml-auto\"></ax-badge>\n        }\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:block;width:100%}\n"], dependencies: [{ kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i5.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i2$2.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "component", type: AXPUserAvatarComponent, selector: "axp-user-avatar", inputs: ["size", "userId"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXMCommentLookupPopup, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXMChatItemComponent, decorators: [{
             type: Component,
-            args: [{
-                    template: `<axp-widgets-container
-      class="ax-flex ax-flex-col ax-gap-2 ax-p-4"
-      [context]="context"
-      (onContextChanged)="context = $event.data"
-    >
-      <div class="ax-m-5">
-        <ng-container axp-widget-renderer [node]="lookupNode" [mode]="'edit'"> </ng-container>
-      </div>
-    </axp-widgets-container>
-
-    <ax-footer>
-      <ax-suffix>
-        <ax-button text="Accept & Send" color="primary" (onClick)="handleClose()"></ax-button>
-      </ax-suffix>
-    </ax-footer>`,
-                    imports: [AXDecoratorModule, AXPLayoutBuilderModule, AXButtonModule],
-                }]
+            args: [{ selector: 'axm-chat-item', changeDetection: ChangeDetectionStrategy.OnPush, imports: [AXDecoratorModule, AXBadgeModule, AXPUserAvatarComponent], template: "<div\n  [id]=\"data().id\"\n  class=\"ax-cursor-pointer ax-p-4 ax-flex ax-items-center ax-justify-between ax-gap-4 ax-border-b ax-border-divider\"\n  (click)=\"onPressChatItem(data().id)\"\n>\n  <!-- Avatar and User Info Section -->\n  <div class=\"ax-flex ax-min-w-0 ax-gap-4 ax-flex-1\">\n    <!-- Avatar with Online Status -->\n    <div class=\"ax-flex-shrink-0\">\n      <axp-user-avatar [size]=\"48\" [userId]=\"chatName().id\"></axp-user-avatar>\n      <!--Temp-->\n    </div>\n\n    <!-- User Details and Last Message -->\n    <div class=\"ax-flex ax-flex-col ax-min-w-0 ax-flex-1 ax-gap-2\">\n      <div class=\"ax-flex ax-items-center ax-justify-between ax-gap-2\">\n        <p class=\"ax-font-semibold ax-text-on-surface ax-truncate ax-pt-1\" [title]=\"chatName().fullName\">\n          {{ chatName().fullName }}\n        </p>\n        <div class=\"ax-flex ax-items-center ax-gap-1\">\n          @if (messageSeenStatus()) {\n            <ax-icon class=\"ax-icon ax-text-success ax-size-5\" [class]=\"messageSeenStatus()\"></ax-icon>\n          }\n          @if (this.data().lastMessage) {\n            <span class=\"ax-text-xs ax-whitespace-nowrap\">\n              {{ formattedLastMessageDate() }}\n            </span>\n          }\n        </div>\n      </div>\n      <div class=\"ax-flex ax-items-center ax-gap-2 ax-mt-1 ax-overflow-hidden\">\n        <div class=\"ax-flex ax-items-center ax-gap-2 ax-text-sm ax-shrink ax-min-w-0\">\n          @switch (lastMessage().contentType) {\n            @case ('image') {\n              <i class=\"fa-regular fa-image\"></i>\n            }\n            @case ('video') {\n              <i class=\"fa-regular fa-video\"></i>\n            }\n            @case ('file') {\n              <i class=\"fa-regular fa-file\"></i>\n            }\n            @case ('audio') {\n              <i class=\"fa-regular fa-microphone\"></i>\n            }\n            @case ('link') {\n              <i class=\"fa-regular fa-link\"></i>\n            }\n            <!-- @default {\n              <i class=\"fa-regular fa-message\"></i>\n            } -->\n          }\n          <p class=\"ax-truncate ax-capitalize\">\n            {{ lastMessage().content }}\n          </p>\n        </div>\n        @if (hasUnread()) {\n          <ax-badge color=\"primary\" [text]=\"unreadCount()\" class=\"ax-flex-shrink-0 ax-ml-auto\"></ax-badge>\n        }\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:block;width:100%}\n"] }]
         }] });
 
-class AXMCommentListViewComponent {
+class AXMChatComponent extends AXPPageLayoutBaseComponent {
     constructor() {
-        this.hasCooldown = signal(false);
-        this.commentContent = signal('');
-        this.isSubmitting = signal(false);
-        this.isReplyingMode = signal(false);
-        this.isEditingMode = signal(false);
-        this.isLoading = signal(true);
-        this.failedImageIds = signal([]);
-        this.activeReplyComment = signal(undefined);
-        this.activeEditComment = signal(undefined);
-        this.wysiwygEditor = viewChild.required('w');
-        this.commentService = inject(AXMCommentService);
-        this.platform = inject(AXPlatform);
-        this.route = inject(ActivatedRoute);
+        super(...arguments);
+        this.activatedRoute = inject(ActivatedRoute);
+        this.chatService = inject(AXMChatService);
+        this.userService = inject(AXMUsersEntityService);
         this.popupService = inject(AXPopupService);
-        this.toastService = inject(AXToastService);
-        this.dialogService = inject(AXDialogService);
-        this.sanitize = inject(DomSanitizer);
-        this.routeParams = this.route.snapshot;
-        this.getPayload = computed(() => ({
-            params: this.payload(),
-            skip: 0,
-            take: 10,
-        }));
-        this.payload = computed(() => ({
-            roomType: 'default',
-            entityId: this.routeParams.params?.['module'] + '.' + this.routeParams.params?.['entity'],
-            instanceId: this.routeParams.params?.['id'],
-        }));
-        this.comments = signal([]);
-        this.wysiwyg = viewChild('w');
-        this.wysiwygOptions = signal({
-            look: 'solid',
-        });
-        this.avatarConfig = signal({
-            color: 'primary',
-            look: 'rounded',
-            type: 'solid', // 'image' | 'text' | 'icon' | 'default'
+        this.router = inject(Router);
+        this.unsubscribe = inject(AXUnsubscriber);
+        // View Children
+        this.tab = viewChild('tab');
+        this.container = viewChild('container');
+        // State signals
+        this.rooms = signal([]);
+        this.allRooms = signal([]);
+        this.selectedRoom = signal(null);
+        this.isLoading = signal(false);
+        this.error = signal(null);
+        this.activeTab = signal(0);
+        this.isSearching = signal(false);
+        this.searchQuery = signal('');
+        this.showSearch = signal(true);
+        this.placeholder = signal('Search chats...');
+        // Computed signals
+        // filteredRooms = computed(() => {
+        //   let chatRooms = this.rooms();
+        //   // Apply search filter
+        //   if (this.searchQuery()) {
+        //     const searchText = this.searchQuery().toLowerCase();
+        //     chatRooms = chatRooms.filter(async (room) => {
+        //       const user = await this.userService.getOne(room.members?.[0]?.id);
+        //       const roomName = `${user.firstName} ${user.lastName}` || '';
+        //       const lastMessage = room.lastMessage?.message?.content || '';
+        //       return roomName.toLowerCase().includes(searchText) || lastMessage.toLowerCase().includes(searchText);
+        //     });
+        //   }
+        //   // Apply tab filter
+        //   if (this.activeTab() === 1) {
+        //     return chatRooms.filter((room) => room.unreadCount > 0);
+        //   }
+        //   return chatRooms;
+        // });
+        this.filteredRooms = signal([]);
+        this.searchEffect = effect(async () => {
+            let chatRooms = this.allRooms();
+            // Search filter
+            const query = (this.searchQuery() || '').toLowerCase();
+            if (query) {
+                // Perform async enrichment for names
+                const filtered = [];
+                for (const room of chatRooms) {
+                    try {
+                        let roomName = '';
+                        // Handle group chats vs. single-user chats
+                        if (room.members && room.members.length > 1) {
+                            roomName = room.title || '';
+                        }
+                        else if (room.members && room.members.length === 1) {
+                            const memberId = room.members[0].id;
+                            if (memberId) {
+                                const user = await this.userService.getOne(memberId);
+                                roomName = `${user.firstName} ${user.lastName}` || '';
+                            }
+                        }
+                        const lastMessage = room.lastMessage?.message?.content || '';
+                        if (roomName.toLowerCase().includes(query) || lastMessage.toLowerCase().includes(query)) {
+                            filtered.push(room);
+                        }
+                    }
+                    catch (error) {
+                        console.error(`Failed to process search for room ${room.id}`, error);
+                    }
+                }
+                chatRooms = filtered;
+            }
+            // Tab filter
+            if (this.activeTab() === 1) {
+                chatRooms = chatRooms.filter((room) => room.unreadCount > 0);
+            }
+            this.filteredRooms.set(chatRooms);
         });
-        this.validateContent = (content) => {
-            let isValid = true;
-            if (!content || content === '<p><br></p>') {
-                isValid = false;
+        this.unreadCount = computed(() => this.allRooms().filter((i) => i.unreadCount > 0).length);
+        this.allCount = computed(() => this.allRooms().length);
+        this.hasUnread = computed(() => this.allRooms().filter((i) => i.unreadCount > 0).length > 0);
+        this.totalCount = computed(() => this.allRooms().length || 0);
+        this.af = afterNextRender(() => {
+            const tabComponent = this.tab();
+            if (tabComponent) {
+                tabComponent.onActiveTabChanged.subscribe((i) => {
+                    this.activeTab.set(i.index);
+                });
             }
-            return {
-                rule: 'callback',
-                result: isValid,
-                message: isValid ? '' : 'Please fill the content',
-                value: content,
-            };
-        };
+            //(window as any).a = this.container()?.startSideDrawer();
+        });
     }
-    ngOnInit() {
-        this.loadComments();
+    onTabChange(event) {
+        this.activeTab.set(event.index);
     }
-    sanitizeHtml(htmlContent) {
-        if (!htmlContent)
-            return this.sanitize.bypassSecurityTrustHtml('');
-        return this.sanitize.bypassSecurityTrustHtml(htmlContent);
+    async ngOnInit() {
+        super.ngOnInit();
+        this.isLoading.set(true);
+        this.error.set(null);
+        await this.loadChats();
+        this.isLoading.set(false);
+        //
+        this.router.events
+            .pipe(this.unsubscribe.takeUntilDestroy, filter((event) => event instanceof NavigationEnd), startWith(null))
+            .subscribe(async () => {
+            await this.loadFromRoute();
+        });
+        //
+        this.messageSentSubscription = this.chatService.messageSent$.subscribe(() => {
+            this.refreshChat();
+        });
     }
-    handleImageError(imageId) {
-        this.failedImageIds.update((ids) => [...ids, imageId]);
+    async loadFromRoute() {
+        const chatId = this.activatedRoute.snapshot.firstChild?.paramMap.get('id');
+        if (chatId) {
+            this.markChatAsRead(chatId);
+        }
+        else {
+            this.selectedRoom.set(null);
+        }
     }
-    checkImageExists(imageId) {
-        return !this.failedImageIds().includes(imageId);
+    // Page Interface Implementation
+    async getPageTitle() {
+        const room = this.selectedRoom();
+        if (!room) {
+            return '';
+        }
+        const { members, title, id } = room;
+        if (members.length > 1) {
+            return title || 'Group Chat';
+        }
+        const member = members[0];
+        if (!member) {
+            return 'Unknown User';
+        }
+        const user = await this.userService.getOne(member.id);
+        return `${user.firstName} ${user.lastName}` || 'Unknown User';
     }
-    extractInitials(name) {
-        if (!name)
-            return '?';
-        // Handle the case where name is an object with fullName property
-        const nameStr = typeof name === 'object' && name.fullName ? name.fullName : String(name);
-        const words = nameStr.split(' ');
-        const initials = words.map((word) => word.charAt(0).toUpperCase());
-        return initials.join('');
+    getPageDescription() {
+        const room = this.selectedRoom();
+        return room?.topic || '';
     }
-    async loadComments() {
-        this.isLoading.set(true);
+    async getBackButton() {
+        if (this.selectedRoom()) {
+            return {
+                title: await this.translateService.translateAsync('back-to-chat-list', { scope: 'conversation' }),
+            };
+        }
+        else
+            return null;
+    }
+    onBackButtonClick() {
+        this.selectedRoom.set(null);
+        this.router.navigate(['./'], { relativeTo: this.activatedRoute });
+    }
+    // Methods
+    async loadChats() {
         try {
-            const response = await this.commentService.query(this.getPayload());
-            this.comments.set(response.items);
+            // Use the updated service method to get rooms with last messages
+            const response = await this.chatService.listRooms();
+            // Sort rooms by last message createdAt timestamp in descending order
+            const sortedRooms = response.items.sort((a, b) => {
+                const dateA = a.lastMessage?.createdAt || a.createdAt || 0;
+                const dateB = b.lastMessage?.createdAt || b.createdAt || 0;
+                return new Date(dateB).getTime() - new Date(dateA).getTime();
+            });
+            this.allRooms.set(sortedRooms);
+            this.rooms.set(sortedRooms);
         }
         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.error.set('Failed to load chats. Please try again.');
+            console.error('Error loading chats:', error);
+        }
+    }
+    async refreshChat() {
+        await this.loadChats();
+    }
+    async markChatAsRead(chatId) {
+        try {
+            // Use the service method to mark chat as read
+            await this.chatService.markRoomSeen(chatId);
+            // Update local state without making another network request
+            const currentRooms = this.allRooms();
+            const updatedRooms = currentRooms.map((room) => {
+                if (room.id === chatId) {
+                    // Reset unread count for the selected room
+                    return { ...room, unreadCount: 0 };
+                }
+                return room;
             });
-            this.comments.set([]);
+            // Update the rooms signals
+            this.allRooms.set(updatedRooms);
+            this.rooms.set(updatedRooms);
+            // Find the selected room
+            const selectedRoom = updatedRooms.find((room) => room.id === chatId) || null;
+            this.selectedRoom.set(selectedRoom);
+            // Navigate to the chat details
+            this.router.navigate([chatId], { relativeTo: this.activatedRoute });
         }
-        finally {
-            setTimeout(() => {
-                this.isLoading.set(false);
-            }, 250);
+        catch (error) {
+            console.error('Failed to mark chat as read:', error);
         }
     }
-    editMessage(comment, reply) {
-        this.isReplyingMode.set(false);
-        this.activeReplyComment.set(undefined);
-        this.isEditingMode.set(true);
-        this.activeEditComment.set(comment);
-        const contentToEdit = reply ? reply.message?.content : comment.message?.content;
-        this.commentContent.set(contentToEdit || '');
-        this.wysiwygEditor().getHostElement().scrollIntoView({ behavior: 'smooth', block: 'start' });
+    searchChat(query) {
+        this.searchQuery.set(query);
+        this.isSearching.set(!!query);
     }
-    replyMessage(comment, reply) {
-        this.isEditingMode.set(false);
-        this.activeEditComment.set(undefined);
-        this.isReplyingMode.set(true);
-        this.activeReplyComment.set(comment);
-        if (reply) {
-            const author = reply.author.fullName || reply.author.id;
-            const mention = `<a data-id="${reply.id}">@${author}</a> `;
-            this.commentContent.set(mention);
-            this.wysiwyg()?.focus();
-            document.getElementsByClassName('ql-editor')[0].innerHTML = mention;
+    // Header methods
+    onSearch(query) {
+        this.searchChat(query);
+    }
+    clearSearch() {
+        this.searchQuery.set('');
+        this.isSearching.set(false);
+    }
+    // Footer methods
+    async onNewConversation() {
+        const popupConfig = {
+            header: true,
+            size: 'sm',
+            draggable: true,
+            hasBackdrop: true,
+            closeButton: true,
+            closeOnBackdropClick: false,
+        };
+        const popup = await this.popupService.open(AXMCommentLookupPopup, popupConfig);
+        const members = popup.data?.lookup;
+        try {
+            if (members) {
+                const res = await this.chatService.createRoom(members, popup.data?.title);
+                await this.refreshChat();
+                this.router.navigate([res.id], { relativeTo: this.activatedRoute });
+            }
+        }
+        catch (error) {
+            this.toastService.danger('Failed to create room');
         }
-        this.wysiwygEditor().getHostElement().scrollIntoView({ behavior: 'smooth', block: 'start' });
     }
-    async deleteComment(comment) {
-        const dialog = this.dialogService.open({
-            icon: 'fa-regular fa-warning',
-            content: 'Are you sure you want to delete this comment?',
-            title: 'Delete Comment',
-            type: 'danger',
-            orientation: 'horizontal',
-            buttons: [
-                {
-                    text: 'Delete',
-                    color: 'danger',
-                    onClick: async (e) => {
-                        e.handled = true;
-                        e.source.text = 'Deleting...';
-                        e.source.disabled = true;
-                        e.source.loading = true;
-                        try {
-                            if (comment.id) {
-                                await this.commentService.deleteOne(comment.id);
-                                this.removeMessageById(comment.id);
-                                this.toastService.show({
-                                    content: 'Comment deleted successfully.',
-                                    color: 'success',
-                                    location: 'bottom-center',
-                                    closeButton: true,
-                                    timeOut: 3000,
-                                    timeOutProgress: true,
-                                });
-                                if (this.isEditingMode() && this.activeEditComment()?.id === comment.id) {
-                                    this.resetReplyEditState();
-                                }
-                                dialog.close();
-                            }
-                        }
-                        catch (error) {
-                            this.toastService.show({
-                                content: typeof error === 'string' ? error : 'Failed to delete comment!',
-                                color: 'danger',
-                                location: 'bottom-center',
-                                closeButton: true,
-                                timeOut: 3000,
-                                timeOutProgress: true,
-                            });
-                        }
-                    },
-                },
-                {
-                    text: 'Cancel',
-                    color: 'default',
-                    autofocus: true,
-                    onClick: (e) => {
-                        dialog.close();
-                    },
-                },
-            ],
-            closeButton: false,
-        });
+    ngOnDestroy() {
+        this.messageSentSubscription?.unsubscribe();
     }
-    async deleteReply(comment, reply) {
-        const dialog = this.dialogService.open({
-            icon: 'fa-regular fa-warning',
-            content: 'Are you sure you want to delete this reply?',
-            title: 'Delete Reply',
-            type: 'danger',
-            orientation: 'horizontal',
-            buttons: [
-                {
-                    text: 'Delete',
-                    color: 'danger',
-                    onClick: async (e) => {
-                        e.handled = true;
-                        e.source.text = 'Deleting...';
-                        e.source.disabled = true;
-                        e.source.loading = true;
-                        try {
-                            if (reply.id) {
-                                await this.commentService.deleteOne(reply.id);
-                                this.removeMessageById(comment.id, reply.id);
-                                this.toastService.show({
-                                    content: 'Comment deleted successfully.',
-                                    color: 'success',
-                                    location: 'bottom-center',
-                                    closeButton: true,
-                                    timeOut: 3000,
-                                    timeOutProgress: true,
-                                });
-                                dialog.close();
-                            }
-                        }
-                        catch (error) {
-                            this.toastService.show({
-                                content: typeof error === 'string' ? error : 'Failed to delete comment!',
-                                color: 'danger',
-                                location: 'bottom-center',
-                                closeButton: true,
-                                timeOut: 3000,
-                                timeOutProgress: true,
-                            });
-                        }
-                    },
-                },
-                {
-                    text: 'Cancel',
-                    color: 'default',
-                    autofocus: true,
-                    onClick: (e) => {
-                        dialog.close();
-                    },
-                },
-            ],
-            closeButton: false,
-        });
-    }
-    resetReplyEditState() {
-        this.isEditingMode.set(false);
-        this.activeEditComment.set(undefined);
-        this.isReplyingMode.set(false);
-        this.activeReplyComment.set(undefined);
-        this.commentContent.set('');
-        document.getElementsByClassName('ql-editor')[0].innerHTML = '';
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXMChatComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: AXMChatComponent, isStandalone: true, selector: "axm-chat", providers: [
+            {
+                provide: AXPPageLayoutBase,
+                useExisting: AXMChatComponent,
+            },
+            AXUnsubscriber,
+        ], viewQueries: [{ propertyName: "tab", first: true, predicate: ["tab"], descendants: true, isSignal: true }, { propertyName: "container", first: true, predicate: ["container"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<axp-page-layout #container>\n  <axp-layout-start-side [axResizable]=\"true\" class=\"ax-border-e ax-lightest-surface ax-h-full\">\n    <axp-layout-header>\n      <axp-layout-title>{{ 'module-name' | translate: { scope: 'conversation' } | async }}</axp-layout-title>\n      <axp-layout-toolbar>\n        <ax-search-box\n          #searchInput\n          look=\"solid\"\n          [placeholder]=\"placeholder()\"\n          [value]=\"searchQuery()\"\n          (onValueChanged)=\"onSearch($event.value)\"\n          class=\"ax-w-full\"\n        >\n          <ax-clear-button></ax-clear-button>\n        </ax-search-box>\n      </axp-layout-toolbar>\n    </axp-layout-header>\n    <axp-layout-content class=\"ax-flex ax-flex-col ax-min-h-0\">\n      <ng-container [ngTemplateOutlet]=\"template\"></ng-container>\n    </axp-layout-content>\n  </axp-layout-start-side>\n\n  <axp-page-content style=\"height: calc(100vh - 22rem)\">\n    @if (selectedRoom()) {\n      <router-outlet></router-outlet>\n    } @else if (layoutService.isMobileDevice()) {\n      <ax-search-box\n        #searchInput\n        look=\"solid\"\n        [placeholder]=\"placeholder()\"\n        [value]=\"searchQuery()\"\n        (onValueChanged)=\"onSearch($event.value)\"\n        class=\"ax-w-full\"\n      >\n        <ax-clear-button></ax-clear-button>\n      </ax-search-box>\n      <ng-container [ngTemplateOutlet]=\"template\"></ng-container>\n    }\n  </axp-page-content>\n</axp-page-layout>\n\n<ng-template #template>\n  <!-- Tabs -->\n  <div class=\"ax-px-4\">\n    @if (hasUnread()) {\n      <ax-tabs\n        #tab\n        class=\"ax-text-neutral-400\"\n        [look]=\"'with-line'\"\n        [location]=\"'bottom'\"\n        [fitParent]=\"true\"\n        (onActiveTabChanged)=\"onTabChange($event)\"\n      >\n        <ax-tab-item text=\"All\" [active]=\"activeTab() === 0\">\n          <ax-suffix>\n            <ax-badge\n              [text]=\"totalCount().toString()\"\n              [color]=\"activeTab() === 0 ? 'primary' : 'secondary'\"\n              class=\"ax-min-w-[1.5rem] ax-justify-center\"\n            ></ax-badge>\n          </ax-suffix>\n        </ax-tab-item>\n        <ax-tab-item text=\"Unread\" [active]=\"activeTab() === 1\">\n          <ax-suffix>\n            <ax-badge\n              [text]=\"unreadCount().toString()\"\n              [color]=\"activeTab() === 1 ? 'primary' : 'secondary'\"\n              class=\"ax-min-w-[1.5rem] ax-justify-center\"\n            ></ax-badge>\n          </ax-suffix>\n        </ax-tab-item>\n      </ax-tabs>\n    }\n  </div>\n\n  <!-- Chat List Content -->\n  <div class=\"ax-flex-1 ax-overflow-hidden ax-flex ax-flex-col ax-justify-between\" [class.ax-border-t]=\"hasUnread()\">\n    <!-- Loading State -->\n    @if (isLoading()) {\n      <div class=\"ax-p-4 ax-space-y-4\">\n        @for (_ of [1, 2, 3, 4, 5, 6]; track $index) {\n          <div class=\"ax-flex ax-items-center ax-space-x-3\">\n            <ax-skeleton [animated]=\"true\" class=\"ax-w-12 ax-h-12 ax-rounded-full\"></ax-skeleton>\n            <div class=\"ax-flex-1 ax-space-y-2\">\n              <ax-skeleton [animated]=\"true\" class=\"ax-w-3/4 ax-h-4 ax-rounded-md\"></ax-skeleton>\n              <ax-skeleton [animated]=\"true\" class=\"ax-w-1/2 ax-h-3 ax-rounded-md\"></ax-skeleton>\n            </div>\n          </div>\n        }\n      </div>\n    }\n\n    <!-- Error State -->\n    @if (error()) {\n      <div class=\"ax-flex ax-flex-col ax-items-center ax-justify-center ax-h-full ax-p-4 ax-text-center\">\n        <ax-icon class=\"ax-text-danger ax-text-5xl ax-mb-3\">\n          <i class=\"fa-light fa-circle-exclamation\"></i>\n        </ax-icon>\n        <p class=\"ax-font-semibold ax-text-lg\">\n          {{ 'chat-error' | translate: { scope: 'conversation' } | async }}\n        </p>\n        <p class=\"ax-font-semibold ax-text-lg\">\n          {{ 'chat-try-again' | translate: { scope: 'conversation' } | async }}\n        </p>\n        <p class=\"ax-text-secondary ax-mb-4\">{{ error() }}</p>\n        <ax-button\n          [text]=\"'try-again' | translate: { scope: 'conversation' } | async\"\n          color=\"primary\"\n          (onClick)=\"refreshChat()\"\n        ></ax-button>\n      </div>\n    }\n\n    <!-- Chat List -->\n    @if (!isLoading() && !error()) {\n      <div class=\"ax-flex-1 ax-overflow-y-auto\">\n        @for (i of filteredRooms(); track i.id) {\n          <axm-chat-item\n            [data]=\"i\"\n            [attr.data-id]=\"i.id\"\n            (click)=\"markChatAsRead(i.id)\"\n            [class.ax-bg-dark]=\"selectedRoom()?.id === i.id\"\n            class=\"ax-transition-all ax-duration-100 hover:ax-bg-surface\"\n          ></axm-chat-item>\n        }\n\n        <!-- Empty State -->\n        @empty {\n          <div class=\"ax-p-4 ax-font-medium ax-text-center ax-text-secondary\">\n            @if (isSearching()) {\n              No chats found matching your search\n            } @else {\n              No chats available\n            }\n          </div>\n        }\n      </div>\n    }\n\n    <!-- Footer Content -->\n    <div class=\"ax-border-t ax-border-divider ax-bg-lightest ax-p-4\">\n      <ax-button class=\"ax-w-full\" color=\"primary\" text=\"New Conversation\" (onClick)=\"onNewConversation()\">\n        <ax-prefix>\n          <ax-icon>\n            <i class=\"fa-solid fa-plus\"></i>\n          </ax-icon>\n        </ax-prefix>\n      </ax-button>\n    </div>\n  </div>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "component", type: AXMChatItemComponent, selector: "axm-chat-item", inputs: ["data"], outputs: ["pressChatItem"] }, { kind: "ngmodule", type: 
+                // Common Modules
+                CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i2$3.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "ngmodule", type: 
+                // Acorex Core Modules
+                AXFormatModule }, { kind: "ngmodule", type: AXConversationModule }, { kind: "ngmodule", type: AXCommentModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }, { kind: "directive", type: 
+                // Acorex Component Modules
+                AXResizableDirective, selector: "[axResizable]", inputs: ["axResizable", "minWidth", "maxWidth", "dblClickAction", "width", "defaultWidth"], outputs: ["axResizableChange", "minWidthChange", "maxWidthChange", "dblClickActionChange", "widthChange", "defaultWidthChange", "onResizingStarted", "onResizingEnded", "onResizingDblClick"] }, { kind: "ngmodule", type: AXImageModule }, { kind: "ngmodule", type: AXAvatarModule }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i2$2.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i5.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i5.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "component", type: i5.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXTextBoxModule }, { kind: "ngmodule", type: AXSearchBoxModule }, { kind: "component", type: i6$1.AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXTabsModule }, { kind: "component", type: i7$1.AXTabsComponent, selector: "ax-tabs", inputs: ["look", "location", "fitParent", "minWidth", "content"], outputs: ["onActiveTabChanged"] }, { kind: "component", type: i7$1.AXTabItemComponent, selector: "ax-tab-item", inputs: ["disabled", "text", "key", "headerTemplate", "active"], outputs: ["disabledChange", "onClick", "onBlur", "onFocus", "activeChange"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i5$1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "ngmodule", type: AXWysiwygModule }, { kind: "ngmodule", type: AXLabelModule }, { kind: "ngmodule", type: AXSelectBoxModule }, { kind: "ngmodule", type: AXFormModule }, { kind: "ngmodule", type: AXDropdownButtonModule }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "ngmodule", type: AXToolBarModule }, { kind: "ngmodule", type: AXSkeletonModule }, { kind: "component", type: i2$1.AXSkeletonComponent, selector: "ax-skeleton", inputs: ["animated"] }, { kind: "component", type: AXPPageLayoutComponent, selector: "axp-page-layout" }, { kind: "component", type: AXPThemeLayoutBlockComponent, selector: "    axp-page-content,     axp-page-footer-container,    axp-page-footer,    axp-page-header,    axp-page-header-container,    axp-page-toolbar,    axp-layout-content,     axp-layout-page-content,     axp-layout-sections,    axp-layout-body,    axp-layout-page-body,    axp-layout-prefix,    axp-layout-suffix,    axp-layout-title-bar,    axp-layout-title,     axp-layout-title-actions,     axp-layout-nav-button,     axp-layout-description,     axp-layout-breadcrumbs,    axp-layout-list-action,    " }, { kind: "component", type: AXPThemeLayoutStartSideComponent, selector: "axp-layout-page-start-side, axp-layout-start-side" }, { kind: "component", type: AXPThemeLayoutHeaderComponent, selector: "axp-layout-header" }, { kind: "component", type: AXPThemeLayoutToolbarComponent, selector: "axp-layout-toolbar" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXMChatComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'axm-chat', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: AXPPageLayoutBase,
+                            useExisting: AXMChatComponent,
+                        },
+                        AXUnsubscriber,
+                    ], imports: [
+                        AXMChatItemComponent,
+                        // Common Modules
+                        CommonModule,
+                        FormsModule,
+                        RouterModule,
+                        // Acorex Core Modules
+                        AXFormatModule,
+                        AXConversationModule,
+                        AXCommentModule,
+                        AXTranslationModule,
+                        // Acorex Component Modules
+                        AXResizableDirective,
+                        AXImageModule,
+                        AXAvatarModule,
+                        AXBadgeModule,
+                        AXDecoratorModule,
+                        AXTextBoxModule,
+                        AXSearchBoxModule,
+                        AXTabsModule,
+                        AXButtonModule,
+                        AXLoadingModule,
+                        AXWysiwygModule,
+                        AXLabelModule,
+                        AXSelectBoxModule,
+                        AXFormModule,
+                        AXDropdownButtonModule,
+                        AXDropdownModule,
+                        AXToolBarModule,
+                        AXSkeletonModule,
+                        AXPPageLayoutComponent,
+                        AXPThemeLayoutBlockComponent,
+                        AXPThemeLayoutStartSideComponent,
+                        AXPThemeLayoutHeaderComponent,
+                        AXPThemeLayoutToolbarComponent,
+                    ], template: "<axp-page-layout #container>\n  <axp-layout-start-side [axResizable]=\"true\" class=\"ax-border-e ax-lightest-surface ax-h-full\">\n    <axp-layout-header>\n      <axp-layout-title>{{ 'module-name' | translate: { scope: 'conversation' } | async }}</axp-layout-title>\n      <axp-layout-toolbar>\n        <ax-search-box\n          #searchInput\n          look=\"solid\"\n          [placeholder]=\"placeholder()\"\n          [value]=\"searchQuery()\"\n          (onValueChanged)=\"onSearch($event.value)\"\n          class=\"ax-w-full\"\n        >\n          <ax-clear-button></ax-clear-button>\n        </ax-search-box>\n      </axp-layout-toolbar>\n    </axp-layout-header>\n    <axp-layout-content class=\"ax-flex ax-flex-col ax-min-h-0\">\n      <ng-container [ngTemplateOutlet]=\"template\"></ng-container>\n    </axp-layout-content>\n  </axp-layout-start-side>\n\n  <axp-page-content style=\"height: calc(100vh - 22rem)\">\n    @if (selectedRoom()) {\n      <router-outlet></router-outlet>\n    } @else if (layoutService.isMobileDevice()) {\n      <ax-search-box\n        #searchInput\n        look=\"solid\"\n        [placeholder]=\"placeholder()\"\n        [value]=\"searchQuery()\"\n        (onValueChanged)=\"onSearch($event.value)\"\n        class=\"ax-w-full\"\n      >\n        <ax-clear-button></ax-clear-button>\n      </ax-search-box>\n      <ng-container [ngTemplateOutlet]=\"template\"></ng-container>\n    }\n  </axp-page-content>\n</axp-page-layout>\n\n<ng-template #template>\n  <!-- Tabs -->\n  <div class=\"ax-px-4\">\n    @if (hasUnread()) {\n      <ax-tabs\n        #tab\n        class=\"ax-text-neutral-400\"\n        [look]=\"'with-line'\"\n        [location]=\"'bottom'\"\n        [fitParent]=\"true\"\n        (onActiveTabChanged)=\"onTabChange($event)\"\n      >\n        <ax-tab-item text=\"All\" [active]=\"activeTab() === 0\">\n          <ax-suffix>\n            <ax-badge\n              [text]=\"totalCount().toString()\"\n              [color]=\"activeTab() === 0 ? 'primary' : 'secondary'\"\n              class=\"ax-min-w-[1.5rem] ax-justify-center\"\n            ></ax-badge>\n          </ax-suffix>\n        </ax-tab-item>\n        <ax-tab-item text=\"Unread\" [active]=\"activeTab() === 1\">\n          <ax-suffix>\n            <ax-badge\n              [text]=\"unreadCount().toString()\"\n              [color]=\"activeTab() === 1 ? 'primary' : 'secondary'\"\n              class=\"ax-min-w-[1.5rem] ax-justify-center\"\n            ></ax-badge>\n          </ax-suffix>\n        </ax-tab-item>\n      </ax-tabs>\n    }\n  </div>\n\n  <!-- Chat List Content -->\n  <div class=\"ax-flex-1 ax-overflow-hidden ax-flex ax-flex-col ax-justify-between\" [class.ax-border-t]=\"hasUnread()\">\n    <!-- Loading State -->\n    @if (isLoading()) {\n      <div class=\"ax-p-4 ax-space-y-4\">\n        @for (_ of [1, 2, 3, 4, 5, 6]; track $index) {\n          <div class=\"ax-flex ax-items-center ax-space-x-3\">\n            <ax-skeleton [animated]=\"true\" class=\"ax-w-12 ax-h-12 ax-rounded-full\"></ax-skeleton>\n            <div class=\"ax-flex-1 ax-space-y-2\">\n              <ax-skeleton [animated]=\"true\" class=\"ax-w-3/4 ax-h-4 ax-rounded-md\"></ax-skeleton>\n              <ax-skeleton [animated]=\"true\" class=\"ax-w-1/2 ax-h-3 ax-rounded-md\"></ax-skeleton>\n            </div>\n          </div>\n        }\n      </div>\n    }\n\n    <!-- Error State -->\n    @if (error()) {\n      <div class=\"ax-flex ax-flex-col ax-items-center ax-justify-center ax-h-full ax-p-4 ax-text-center\">\n        <ax-icon class=\"ax-text-danger ax-text-5xl ax-mb-3\">\n          <i class=\"fa-light fa-circle-exclamation\"></i>\n        </ax-icon>\n        <p class=\"ax-font-semibold ax-text-lg\">\n          {{ 'chat-error' | translate: { scope: 'conversation' } | async }}\n        </p>\n        <p class=\"ax-font-semibold ax-text-lg\">\n          {{ 'chat-try-again' | translate: { scope: 'conversation' } | async }}\n        </p>\n        <p class=\"ax-text-secondary ax-mb-4\">{{ error() }}</p>\n        <ax-button\n          [text]=\"'try-again' | translate: { scope: 'conversation' } | async\"\n          color=\"primary\"\n          (onClick)=\"refreshChat()\"\n        ></ax-button>\n      </div>\n    }\n\n    <!-- Chat List -->\n    @if (!isLoading() && !error()) {\n      <div class=\"ax-flex-1 ax-overflow-y-auto\">\n        @for (i of filteredRooms(); track i.id) {\n          <axm-chat-item\n            [data]=\"i\"\n            [attr.data-id]=\"i.id\"\n            (click)=\"markChatAsRead(i.id)\"\n            [class.ax-bg-dark]=\"selectedRoom()?.id === i.id\"\n            class=\"ax-transition-all ax-duration-100 hover:ax-bg-surface\"\n          ></axm-chat-item>\n        }\n\n        <!-- Empty State -->\n        @empty {\n          <div class=\"ax-p-4 ax-font-medium ax-text-center ax-text-secondary\">\n            @if (isSearching()) {\n              No chats found matching your search\n            } @else {\n              No chats available\n            }\n          </div>\n        }\n      </div>\n    }\n\n    <!-- Footer Content -->\n    <div class=\"ax-border-t ax-border-divider ax-bg-lightest ax-p-4\">\n      <ax-button class=\"ax-w-full\" color=\"primary\" text=\"New Conversation\" (onClick)=\"onNewConversation()\">\n        <ax-prefix>\n          <ax-icon>\n            <i class=\"fa-solid fa-plus\"></i>\n          </ax-icon>\n        </ax-prefix>\n      </ax-button>\n    </div>\n  </div>\n</ng-template>\n" }]
+        }] });
+
+var chat_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    AXMChatComponent: AXMChatComponent
+});
+
+/**
+ * Converts chat service response to chat preview format
+ * @param chatResponse - The response from chat service containing items and total
+ * @returns Array of formatted chat preview messages
+ */
+function convertToChatPreview(currentUserId, chatResponse) {
+    if (!chatResponse || !chatResponse.items?.length) {
+        return [];
     }
-    async toggleLike(comment, reply) {
-        try {
-            if (reply) {
-                if (reply.id) {
-                    this.updateLikeStatus(comment.id, reply.id);
-                    await this.commentService.like(reply.id);
-                }
-            }
-            else {
-                if (comment.id) {
-                    this.updateLikeStatus(comment.id);
-                    await this.commentService.like(comment.id);
-                }
+    // Map from AXMChatMessage to ChatPreviewMessage
+    return chatResponse.items.map((message) => {
+        // Determine message type based on content type
+        let messageType = 'text';
+        // Map contentType to preview type
+        if (message.message?.contentType) {
+            switch (message.message.contentType) {
+                case 'text':
+                    messageType = 'text';
+                    break;
+                case 'file':
+                    messageType = 'file';
+                    break;
+                case 'image':
+                    messageType = 'image';
+                    break;
+                case 'video':
+                    messageType = 'video';
+                    break;
+                case 'link':
+                    // Determine if link is for audio or other content
+                    const content = message.message.content || '';
+                    if (content.includes('.mp3') || content.includes('.ogg') || content.includes('audio')) {
+                        messageType = 'audio';
+                    }
+                    else {
+                        messageType = 'text';
+                    }
+                    break;
+                default:
+                    messageType = 'text';
             }
         }
-        catch (error) {
-            console.error('Failed to toggle like:', error);
-            // Revert the optimistic update if the server call fails
-            if (reply && reply.id) {
-                this.updateLikeStatus(comment.id, reply.id);
-            }
-            else if (comment.id) {
-                this.updateLikeStatus(comment.id);
-            }
+        // Extract author name if available
+        const name = message.author ? message.author.id : 'Unknown';
+        // Create the chat preview message
+        const previewMessage = {
+            id: message.id,
+            sendTime: new Date(message.createdAt || new Date()),
+            readTime: new Date(), // Assuming "read" when converted
+            type: messageType,
+            content: message.message?.content || '',
+            name: name,
+        };
+        // Add fromId if the message is not from current user
+        if (currentUserId !== message.author.id) {
+            previewMessage.fromId = message.author?.id;
         }
+        // Note: Reply information would need to be looked up from the actual messages
+        // This would typically be done by the service that has access to all messages
+        return previewMessage;
+    });
+}
+/**
+ * Creates a ChatPreviewMessage from reply information
+ * @param message - The original message that is being referenced
+ * @returns A ChatPreviewMessage formatted for use as a replyTo
+ */
+function createReplyPreview(currentUserId, message) {
+    if (!message)
+        return undefined;
+    return {
+        id: message.id,
+        sendTime: new Date(message.createdAt || new Date()),
+        readTime: new Date(),
+        type: message.message?.contentType === 'image'
+            ? 'image'
+            : message.message?.contentType === 'video'
+                ? 'video'
+                : message.message?.contentType === 'file'
+                    ? 'file'
+                    : 'text',
+        content: message.message?.content || '',
+        name: message.author?.id || 'Unknown',
+        fromId: currentUserId !== message.author.id ? message.author?.id : undefined,
+    };
+}
+/**
+ * Generate demo chat preview data with a variety of message types
+ * @returns Array of sample chat preview messages
+ */
+function generateDemoChatPreview() {
+    return [
+        {
+            id: '0',
+            sendTime: new Date(),
+            type: 'text',
+            readTime: new Date(),
+            content: 'Hello John, How are you?',
+            name: 'test name',
+        },
+        {
+            id: '1',
+            fromId: '10',
+            sendTime: new Date(),
+            readTime: new Date(),
+            type: 'text',
+            content: 'Hello',
+            name: 'test name',
+            replyTo: {
+                id: '0',
+                sendTime: new Date(),
+                type: 'text',
+                readTime: new Date(),
+                content: 'Hello John, How are you?',
+                name: 'test name',
+            },
+        },
+        {
+            id: '2',
+            fromId: '10',
+            sendTime: new Date(),
+            readTime: new Date(),
+            type: 'voice',
+            name: 'test name',
+            content: `data:audio/webm;codecs=opus;base64,GkXfoEF34fJ`,
+        },
+        {
+            id: '3',
+            sendTime: new Date(),
+            readTime: new Date(),
+            type: 'text',
+            content: 'Can i have your address information?',
+            name: 'test name',
+            replyTo: {
+                id: '1',
+                fromId: '10',
+                sendTime: new Date(),
+                readTime: new Date(),
+                type: 'text',
+                content: 'Hello',
+                name: 'test name',
+            },
+        },
+        {
+            id: '4',
+            fromId: '10',
+            sendTime: new Date(),
+            readTime: new Date(),
+            type: 'file',
+            name: 'test name',
+            content: `data:audio/webm;codecs=opus;base64,GkXfoEF34fJ`,
+        },
+        {
+            id: '5',
+            sendTime: new Date(),
+            readTime: new Date(),
+            type: 'image',
+            name: 'test name',
+            content: `https://picsum.photos/300/200`,
+        },
+        {
+            id: '6',
+            sendTime: new Date(),
+            readTime: new Date(),
+            type: 'video',
+            name: 'test name',
+            content: `https://www.pexels.com/download/video/5495322/?fps=29.97&h=540&w=960`,
+        },
+        {
+            id: '7',
+            sendTime: new Date(),
+            type: 'text',
+            readTime: new Date(),
+            content: 'Hello John, How are you?',
+            name: 'test name',
+        },
+        {
+            id: '8',
+            fromId: '10',
+            sendTime: new Date(),
+            readTime: new Date(),
+            type: 'audio',
+            name: 'kids',
+            content: `https://actions.google.com/sounds/v1/ambiences/kids_playing.ogg`,
+        },
+        {
+            id: '9',
+            fromId: '10',
+            sendTime: new Date(),
+            readTime: new Date(),
+            type: 'image',
+            name: 'test name',
+            content: `https://picsum.photos/300/200`,
+        },
+        {
+            id: '10',
+            fromId: '10',
+            sendTime: new Date(),
+            readTime: new Date(),
+            type: 'image',
+            name: 'test name',
+            content: `https://picsum.photos/200/300`,
+        },
+        {
+            id: '11',
+            fromId: '10',
+            sendTime: new Date(),
+            readTime: new Date(),
+            type: 'video',
+            name: 'test name',
+            content: `https://www.pexels.com/download/video/5495322/?fps=29.97&h=540&w=960`,
+        },
+        {
+            id: '12',
+            sendTime: new Date(),
+            readTime: new Date(),
+            type: 'file',
+            name: 'test name',
+            content: `data:audio/webm;codecs=opus;base64,GkXfo59ChoE+u5BxHVL7ZAS1EF34fJ`,
+        },
+        {
+            id: '13',
+            sendTime: new Date(),
+            readTime: new Date(),
+            type: 'audio',
+            name: 'alarm',
+            content: `https://actions.google.com/sounds/v1/alarms/digital_watch_alarm_long.ogg`,
+        },
+    ];
+}
+/**
+ * Usage Examples:
+ *
+ * Example 1: Converting chat service response to chat preview format
+ * ```typescript
+ * import { AXMChatService } from '../chat.service';
+ * import { convertToChatPreview } from './chat-preview.helper';
+ *
+ * export class ChatPreviewComponent {
+ *   constructor(private chatService: AXMChatService) {}
+ *
+ *   async loadChatMessages(roomId: string) {
+ *     const response = await this.chatService.getChatMessages(roomId);
+ *
+ *     // Convert to chat preview format
+ *     const previewMessages = convertToChatPreview(response);
+ *
+ *     // Use the converted messages
+ *     this.conversationService.chats.set(previewMessages);
+ *   }
+ * }
+ * ```
+ *
+ * Example 2: Using demo data for development/testing
+ * ```typescript
+ * import { generateDemoChatPreview } from './chat-preview.helper';
+ *
+ * export class ChatPreviewDemoComponent {
+ *   ngOnInit() {
+ *     // Load demo messages
+ *     const demoMessages = generateDemoChatPreview();
+ *
+ *     // Use the demo messages
+ *     this.conversationService.chats.set(demoMessages);
+ *   }
+ * }
+ */
+
+class AXMChatPreviewComponent {
+    constructor() {
+        this.activatedRoute = inject(ActivatedRoute);
+        this.fileService = inject(AXFileService);
+        this.chatService = inject(AXMChatService);
+        this.sessionService = inject(AXPSessionService);
+        this.toastService = inject(AXToastService);
+        this.chatData = signal([]);
+        this.isEditing = signal(false);
+        this.editId = signal(null);
+        this.height = signal(0);
+        this.isLoading = signal(false);
+        this.error = signal(null);
+        this.options = signal({
+            disabled: false,
+            readonly: false,
+            value: '',
+        });
+        this.roomId = '';
     }
-    updateLikeStatus(commentId, replyId) {
-        this.comments.update((commentsList) => {
-            return commentsList.map((comment) => {
-                if (comment.id === commentId) {
-                    if (replyId && comment.replies) {
-                        const updatedReplies = comment.replies.map((reply) => reply.id === replyId
-                            ? {
-                                ...reply,
-                                isLiked: !reply.isLiked,
-                                reactionsCount: reply.isLiked && reply.reactionsCount !== undefined
-                                    ? reply.reactionsCount - 1
-                                    : (reply.reactionsCount || 0) + 1,
-                            }
-                            : reply);
-                        return {
-                            ...comment,
-                            replies: updatedReplies,
-                        };
-                    }
-                    else {
-                        return {
-                            ...comment,
-                            isLiked: !comment.isLiked,
-                            reactionsCount: comment.isLiked && comment.reactionsCount !== undefined
-                                ? comment.reactionsCount - 1
-                                : (comment.reactionsCount || 0) + 1,
-                        };
-                    }
-                }
-                return comment;
-            });
+    setHeight(height) {
+        this.height.set(height);
+    }
+    ngOnInit() {
+        this.activatedRoute.params.subscribe((params) => {
+            this.roomId = params['id'];
+            this.loadMessages(this.roomId);
+            // setTimeout(() => {
+            //   this.scrollToEnd();
+            // }, 1000);
         });
     }
-    removeMessageById(commentId, replyId) {
-        if (replyId) {
-            // Remove a reply from a comment
-            this.comments.update((commentsList) => commentsList.map((comment) => {
-                if (comment.id === commentId && comment.replies) {
-                    return {
-                        ...comment,
-                        replies: comment.replies.filter((reply) => reply.id !== replyId),
-                    };
-                }
-                return comment;
-            }));
+    handleFileChange(event) {
+        console.log('File Changed:', event);
+    }
+    handleCancelRecord(event) {
+        console.log('Recording Cancelled:', event);
+    }
+    handleEndRecord(event) {
+        this.fileService.blobToBase64(event.data.value).then((base64Content) => {
+            // Create a properly formatted chat preview message for voice
+            const newVoiceMessage = {
+                id: `${Math.floor(Math.random() * 10000)}`,
+                content: base64Content,
+                sendTime: new Date(),
+                readTime: new Date(),
+                type: 'voice',
+                name: 'test name',
+            };
+            this.chatData.update((values) => [...values, newVoiceMessage]);
+        });
+    }
+    handleOnSend(e) {
+        if (this.isEditing() && this.editId()) {
+            this.chatService
+                .editMessage(this.editId(), e.data.value, e.data.type || 'text')
+                .then((newMessage) => {
+                const convertedNewMessage = convertToChatPreview(this.sessionService.user?.id || '', {
+                    items: [newMessage],
+                    total: 1,
+                })[0];
+                this.chatData.update((values) => values.map((item) => (item.id === this.editId() ? { ...convertedNewMessage } : item)));
+                this.editId.set(null);
+                this.options.update((prev) => ({ ...prev, value: '' }));
+                this.isEditing.set(false);
+            })
+                .catch((error) => {
+                this.toastService.danger('Failed to edit message');
+            });
         }
         else {
-            // Remove a whole comment
-            this.comments.update((commentsList) => commentsList.filter((comment) => comment.id !== commentId));
+            if (e.data.value && this.roomId) {
+                const replyId = e.data.replyChat?.id;
+                this.chatService
+                    .sendMessage(this.roomId, e.data.value, e.data.type || 'text', replyId)
+                    .then((newMessage) => {
+                    const convertedNewMessage = convertToChatPreview(this.sessionService.user?.id || '', {
+                        items: [newMessage],
+                        total: 1,
+                    })[0];
+                    this.chatData.update((values) => [...values, { ...convertedNewMessage, replyTo: replyId }]);
+                    this.options.update((prev) => ({ ...prev, value: '' }));
+                    this.scrollToEnd();
+                })
+                    .catch((error) => {
+                    this.toastService.danger('Failed to send message');
+                });
+            }
         }
     }
-    async submitComment(isPrivate = false) {
-        if (!this.validateContent(this.commentContent()).result) {
-            return;
-        }
-        this.isSubmitting.set(true);
-        let memberLookup;
-        if (isPrivate) {
-            const popupConfig = {
-                header: true,
-                size: 'md',
-                draggable: true,
-                hasBackdrop: true,
-                closeButton: true,
-                closeOnBackdropClick: false,
-            };
-            const popup = await this.popupService.open(AXMCommentLookupPopup, popupConfig);
-            memberLookup = popup.data?.data?.lookup;
+    handleOnAction(e) {
+        console.log('Action Triggered:', e);
+    }
+    scrollToEnd() {
+        const conversationView = document.querySelector('ax-conversation-view');
+        if (conversationView) {
+            conversationView.scrollTo({
+                top: conversationView.scrollHeight,
+                behavior: 'smooth',
+            });
         }
+    }
+    async loadMessages(roomId) {
+        this.isLoading.set(true);
+        this.error.set(null);
         try {
-            if (this.isEditingMode() && this.activeEditComment()?.id) {
-                const payload = {
-                    message: {
-                        content: this.commentContent(),
-                        contentType: 'text',
-                    },
-                };
-                await this.commentService.updateOne(this.activeEditComment().id, payload);
-                this.hasCooldown.set(true);
-                this.isEditingMode.set(false);
-                this.activeEditComment.set(undefined);
-            }
-            else {
-                const payload = {
-                    ...this.payload(),
-                    content: this.commentContent(),
-                    contentType: 'text',
-                    isPrivate: isPrivate,
-                    replyId: this.activeReplyComment()?.id ?? null,
-                };
-                await this.commentService.insertOne(payload);
-                this.hasCooldown.set(true);
-                this.isReplyingMode.set(false);
-                this.activeReplyComment.set(undefined);
-            }
-            // Reload comments to get the updated list with proper hierarchy
-            const response = await this.commentService.query(this.getPayload());
-            this.comments.set(response.items);
-            this.commentContent.set('');
-            document.getElementsByClassName('ql-editor')[0].innerHTML = '';
-            setTimeout(() => {
-                this.hasCooldown.set(false);
-            }, 1000);
+            // Get messages from the chat service
+            const messageResponse = await this.chatService.getMessages(roomId);
+            // Convert to chat preview format
+            const chatPreviewMessages = convertToChatPreview(this.sessionService.user?.id || '', messageResponse).sort((a, b) => {
+                return new Date(a.sendTime).getTime() - new Date(b.sendTime).getTime();
+            });
+            // Set the messages in the conversation service
+            this.chatData.set(chatPreviewMessages);
         }
         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,
-            });
+            this.error.set('Failed to load messages. Please try again.');
+            console.error('Failed to load messages:', error);
         }
         finally {
-            this.isSubmitting.set(false);
+            this.isLoading.set(false);
         }
     }
-    scrollMain() {
-        const comment = this.isReplyingMode() ? this.activeReplyComment() : this.activeEditComment();
-        if (comment && comment.id) {
-            const el = document.getElementById(comment.id);
-            if (el) {
-                el.scrollIntoView({ behavior: 'smooth', block: 'center' });
-                const content = el?.firstElementChild?.children[1];
-                if (content) {
-                    const prevBg = content.style.background;
-                    content.style.borderRadius = '0.25rem';
-                    content.style.transition = 'background 1s ease-in-out';
-                    content.style.background = `rgba(var(--ax-color-on-surface), var(--tw-bg-opacity))`;
-                    setTimeout(() => {
-                        content.style.background = prevBg || 'rgba(0, 0, 0, 0)';
-                    }, 1000);
-                }
-            }
+    addItemHandler(e) {
+        if (e.data.fromId) {
+            e.canceled = true;
+            return;
         }
+        const userItem = [];
+        if (e.data.type === 'text') {
+            userItem.push({
+                text: 'Edit',
+                color: 'primary',
+                icon: 'fa-solid fa-pencil',
+                onClick: (id) => {
+                    try {
+                        this.isEditing.set(true);
+                        this.editId.set(e.data.id);
+                        this.options.update((prev) => ({ ...prev, value: e.data.content }));
+                    }
+                    catch (error) {
+                        this.toastService.danger('Failed to edit message');
+                    }
+                },
+            });
+        }
+        if (e.data.type === 'text') {
+            userItem.push({
+                text: 'Delete',
+                color: 'danger',
+                icon: 'fa-solid fa-trash-can',
+                onClick: (id) => {
+                    try {
+                        this.chatService.deleteMessage(id).then((res) => {
+                            this.chatData.update((values) => values.filter((item) => item.id !== id));
+                            if (!res) {
+                                this.toastService.danger('Failed to delete message');
+                            }
+                        });
+                    }
+                    catch (error) {
+                        this.toastService.danger('Failed to delete message');
+                    }
+                },
+            });
+        }
+        e.items.push(...userItem);
     }
-    calcDefrenetTime(date) {
-        return date ? Date.now() - date.getTime() : undefined;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXMCommentListViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: AXMCommentListViewComponent, isStandalone: false, selector: "axm-comment-list-view", viewQueries: [{ propertyName: "wysiwygEditor", first: true, predicate: ["w"], descendants: true, isSignal: true }, { propertyName: "wysiwyg", first: true, predicate: ["w"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ax-mt-2\">\n  <ax-comment-container>\n    @if (isLoading()) {\n      <div class=\"ax-flex ax-items-center ax-py-12 ax-bg-lightest ax-px-5\">\n        <ax-skeleton class=\"ax-min-w-16 ax-h-16 ax-rounded-full ax-me-4\"></ax-skeleton>\n        <div class=\"ax-flex ax-flex-col ax-gap-2 ax-w-full\">\n          <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded\"></ax-skeleton>\n          <ax-skeleton class=\"ax-w-full ax-h-2 ax-rounded-full\"></ax-skeleton>\n          <ax-skeleton class=\"ax-w-full ax-h-2 ax-rounded-full\"></ax-skeleton>\n          <ax-skeleton class=\"ax-w-8/12 ax-h-2 ax-rounded-full\"></ax-skeleton>\n        </div>\n      </div>\n    } @else if (!isLoading() && comments().length > 0) {\n      <ax-comment-view class=\"ax-bg-lightest\">\n        @for (comment of comments(); track comment.id) {\n          <ax-comment-item [id]=\"comment.id!\" [replyCount]=\"comment.replies?.length ?? 0\">\n            <ax-avatar [color]=\"avatarConfig().color\" [shape]=\"avatarConfig().look\">\n              @if (checkImageExists(comment.id!) && comment.author && extractInitials(comment.author) !== '?') {\n                <ax-image (onError)=\"handleImageError(comment.id!)\" [src]=\"''\">\n                  <ax-loading></ax-loading>\n                </ax-image>\n              } @else {\n                <ax-text>\n                  <span class=\"ax-text-base ax-overflow-hidden\">{{ extractInitials(comment.author) }}</span>\n                </ax-text>\n              }\n            </ax-avatar>\n            <ax-title>{{ extractInitials(comment.author) }}</ax-title>\n            <ax-comment-date>{{ calcDefrenetTime(comment.createdAt) | format: 'timeleft' | async }} </ax-comment-date>\n            <ax-comment-menu-options>\n              <ax-button class=\"ax-sm\" look=\"blank\" color=\"neutral\">\n                <ax-icon icon=\"ax-icon ax-icon-solid ax-icon-more-horizontal\"></ax-icon>\n              </ax-button>\n\n              <ax-dropdown-panel>\n                <ax-button-item-list>\n                  <ax-button-item text=\"Edit\" color=\"neutral\" (click)=\"editMessage(comment)\">\n                    <ax-prefix>\n                      <ax-icon icon=\"fa-solid fa-edit\"></ax-icon>\n                    </ax-prefix>\n                  </ax-button-item>\n\n                  <ax-button-item text=\"Delete\" color=\"danger\" (click)=\"deleteComment(comment)\">\n                    <ax-prefix>\n                      <ax-icon icon=\"fa-solid fa-trash-can\"></ax-icon>\n                    </ax-prefix>\n                  </ax-button-item>\n                </ax-button-item-list>\n              </ax-dropdown-panel>\n            </ax-comment-menu-options>\n            <ax-content [innerHTML]=\"sanitizeHtml(comment.message.content)\"></ax-content>\n            <ax-comment-like (click)=\"toggleLike(comment)\" [liked]=\"comment.isLiked!\">\n              {{ comment.reactionsCount }}\n            </ax-comment-like>\n            <ax-comment-reply-text (click)=\"replyMessage(comment)\"></ax-comment-reply-text>\n            @for (reply of comment.replies; track reply.id) {\n              <ax-comment-item [id]=\"reply.id\">\n                <ax-avatar [color]=\"avatarConfig().color\" [shape]=\"avatarConfig().look\">\n                  @if (reply && checkImageExists(reply.id!) && reply.author && extractInitials(reply.author) !== '?') {\n                    <ax-image (onError)=\"handleImageError(reply.id!)\" [src]=\"''\">\n                      <ax-loading></ax-loading>\n                    </ax-image>\n                  } @else {\n                    <ax-text>\n                      <span class=\"ax-text-base ax-overflow-hidden\">{{ extractInitials(reply.author) }}</span>\n                    </ax-text>\n                  }\n                </ax-avatar>\n                <ax-title>{{ extractInitials(reply.author) }}</ax-title>\n                <ax-comment-date>{{ calcDefrenetTime(reply.createdAt) | format: 'timeleft' | async }} </ax-comment-date>\n                <ax-comment-menu-options>\n                  <ax-button class=\"ax-sm\" look=\"blank\" color=\"neutral\">\n                    <ax-icon icon=\"ax-icon ax-icon-solid ax-icon-more-horizontal\"></ax-icon>\n                  </ax-button>\n\n                  <ax-dropdown-panel>\n                    <ax-button-item-list>\n                      <ax-button-item text=\"Edit\" color=\"neutral\" (click)=\"editMessage(comment, reply)\">\n                        <ax-prefix>\n                          <ax-icon icon=\"fa-solid fa-edit\"></ax-icon>\n                        </ax-prefix>\n                      </ax-button-item>\n                      <ax-button-item text=\"Delete\" color=\"danger\" (click)=\"deleteReply(comment, reply)\">\n                        <ax-prefix>\n                          <ax-icon icon=\"fa-solid fa-trash-can\"></ax-icon>\n                        </ax-prefix>\n                      </ax-button-item>\n                    </ax-button-item-list>\n                  </ax-dropdown-panel>\n                </ax-comment-menu-options>\n                <ax-content [innerHTML]=\"sanitizeHtml(reply.message.content)\"></ax-content>\n                <ax-comment-like (click)=\"toggleLike(comment, reply)\" [liked]=\"reply.isLiked!\">\n                  {{ reply.reactionsCount }}\n                </ax-comment-like>\n                <ax-comment-reply-text (click)=\"replyMessage(comment, reply)\"></ax-comment-reply-text>\n              </ax-comment-item>\n            }\n          </ax-comment-item>\n        }\n      </ax-comment-view>\n    } @else {\n      <div>\n        <div class=\"ax-flex ax-flex-col ax-gap-4 ax-justify-center ax-items-center ax-p-10\">\n          <svg\n            class=\"ax-mx-auto\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"154\"\n            height=\"161\"\n            viewBox=\"0 0 154 161\"\n            fill=\"none\"\n          >\n            <path\n              d=\"M0.0616455 84.4268C0.0616455 42.0213 34.435 7.83765 76.6507 7.83765C118.803 7.83765 153.224 42.0055 153.224 84.4268C153.224 102.42 147.026 118.974 136.622 132.034C122.282 150.138 100.367 161 76.6507 161C52.7759 161 30.9882 150.059 16.6633 132.034C6.25961 118.974 0.0616455 102.42 0.0616455 84.4268Z\"\n              fill=\"#EEF2FF\"\n            />\n            <path\n              d=\"M96.8189 0.632498L96.8189 0.632384L96.8083 0.630954C96.2034 0.549581 95.5931 0.5 94.9787 0.5H29.338C22.7112 0.5 17.3394 5.84455 17.3394 12.4473V142.715C17.3394 149.318 22.7112 154.662 29.338 154.662H123.948C130.591 154.662 135.946 149.317 135.946 142.715V38.9309C135.946 38.0244 135.847 37.1334 135.648 36.2586L135.648 36.2584C135.117 33.9309 133.874 31.7686 132.066 30.1333C132.066 30.1331 132.065 30.1329 132.065 30.1327L103.068 3.65203C103.068 3.6519 103.067 3.65177 103.067 3.65164C101.311 2.03526 99.1396 0.995552 96.8189 0.632498Z\"\n              fill=\"white\"\n              stroke=\"#E5E7EB\"\n            />\n            <ellipse cx=\"80.0618\" cy=\"81\" rx=\"28.0342\" ry=\"28.0342\" fill=\"#EEF2FF\" />\n            <path\n              d=\"M99.2393 61.3061L99.2391 61.3058C88.498 50.5808 71.1092 50.5804 60.3835 61.3061C49.6423 72.0316 49.6422 89.4361 60.3832 100.162C71.109 110.903 88.4982 110.903 99.2393 100.162C109.965 89.4363 109.965 72.0317 99.2393 61.3061ZM105.863 54.6832C120.249 69.0695 120.249 92.3985 105.863 106.785C91.4605 121.171 68.1468 121.171 53.7446 106.785C39.3582 92.3987 39.3582 69.0693 53.7446 54.683C68.1468 40.2965 91.4605 40.2966 105.863 54.6832Z\"\n              stroke=\"#E5E7EB\"\n            />\n            <path\n              d=\"M110.782 119.267L102.016 110.492C104.888 108.267 107.476 105.651 109.564 102.955L118.329 111.729L110.782 119.267Z\"\n              stroke=\"#E5E7EB\"\n            />\n            <path\n              d=\"M139.122 125.781L139.122 125.78L123.313 109.988C123.313 109.987 123.313 109.987 123.312 109.986C121.996 108.653 119.849 108.657 118.521 109.985L118.871 110.335L118.521 109.985L109.047 119.459C107.731 120.775 107.735 122.918 109.044 124.247L109.047 124.249L124.858 140.06C128.789 143.992 135.191 143.992 139.122 140.06C143.069 136.113 143.069 129.728 139.122 125.781Z\"\n              fill=\"#A5B4FC\"\n              stroke=\"#818CF8\"\n            />\n            <path\n              d=\"M83.185 87.2285C82.5387 87.2285 82.0027 86.6926 82.0027 86.0305C82.0027 83.3821 77.9987 83.3821 77.9987 86.0305C77.9987 86.6926 77.4627 87.2285 76.8006 87.2285C76.1543 87.2285 75.6183 86.6926 75.6183 86.0305C75.6183 80.2294 84.3831 80.2451 84.3831 86.0305C84.3831 86.6926 83.8471 87.2285 83.185 87.2285Z\"\n              fill=\"#4F46E5\"\n            />\n            <path\n              d=\"M93.3528 77.0926H88.403C87.7409 77.0926 87.2049 76.5567 87.2049 75.8946C87.2049 75.2483 87.7409 74.7123 88.403 74.7123H93.3528C94.0149 74.7123 94.5509 75.2483 94.5509 75.8946C94.5509 76.5567 94.0149 77.0926 93.3528 77.0926Z\"\n              fill=\"#4F46E5\"\n            />\n            <path\n              d=\"M71.5987 77.0925H66.6488C65.9867 77.0925 65.4507 76.5565 65.4507 75.8945C65.4507 75.2481 65.9867 74.7122 66.6488 74.7122H71.5987C72.245 74.7122 72.781 75.2481 72.781 75.8945C72.781 76.5565 72.245 77.0925 71.5987 77.0925Z\"\n              fill=\"#4F46E5\"\n            />\n            <rect x=\"38.3522\" y=\"21.5128\" width=\"41.0256\" height=\"2.73504\" rx=\"1.36752\" fill=\"#4F46E5\" />\n            <rect x=\"38.3522\" y=\"133.65\" width=\"54.7009\" height=\"5.47009\" rx=\"2.73504\" fill=\"#A5B4FC\" />\n            <rect x=\"38.3522\" y=\"29.7179\" width=\"13.6752\" height=\"2.73504\" rx=\"1.36752\" fill=\"#4F46E5\" />\n            <circle cx=\"56.13\" cy=\"31.0854\" r=\"1.36752\" fill=\"#4F46E5\" />\n            <circle cx=\"61.6001\" cy=\"31.0854\" r=\"1.36752\" fill=\"#4F46E5\" />\n            <circle cx=\"67.0702\" cy=\"31.0854\" r=\"1.36752\" fill=\"#4F46E5\" />\n          </svg>\n          <div>\n            <h2 class=\"ax-text-center ax-text-neutral-600 ax-font-semibold ax-leading-loose ax-pb-2\">\n              There is no Comment!\n            </h2>\n          </div>\n        </div>\n      </div>\n    }\n  </ax-comment-container>\n  <ax-form>\n    <ax-form-field>\n      <div>\n        @if (isReplyingMode() || isEditingMode()) {\n          <div\n            class=\"ax-flex ax-justify-between ax-rounded-b-none ax-border ax-border-b-0 ax-rounded-lg ax-bg-on-surface ax-px-6 ax-py-3 ax-w-full ax-items-center ax-overflow-hidden ax-text-sm ax-leading-none\"\n          >\n            <div (click)=\"scrollMain()\" class=\"ax-flex ax-justify-start ax-items-center ax-cursor-pointer\">\n              <i\n                [class]=\"isReplyingMode() ? 'fa-reply' : 'fa-pen'\"\n                class=\"fa-solid ax-text-primary-500 dark:ax-text-primary-300 ax-text-2xl ax-me-4\"\n              ></i>\n              <div\n                class=\"ax-flex ax-flex-col ax-gap-2 ax-justify-between ax-align-middle ax-leading-4 ax-overflow-hidden\"\n              >\n                <p class=\"ax-text-primary-500 dark:ax-text-primary-300\">\n                  {{ isReplyingMode() ? 'Reply to ' : 'Edit Message' }}\n                  <span class=\"ax-font-bold\">\n                    {{ isReplyingMode() ? extractInitials(activeReplyComment()?.author) : '' }}\n                  </span>\n                </p>\n                <div\n                  class=\"ax-truncate\"\n                  [innerHTML]=\"\n                    isReplyingMode()\n                      ? sanitizeHtml(activeReplyComment()?.message?.content ?? '')\n                      : sanitizeHtml(activeEditComment()?.message?.content ?? '')\n                  \"\n                ></div>\n              </div>\n            </div>\n            <div><i (click)=\"resetReplyEditState()\" class=\"fa-solid ax-text-2xl fa-xmark ax-cursor-pointer\"></i></div>\n          </div>\n        }\n        <ax-wysiwyg-container #w [look]=\"wysiwygOptions().look\" [(ngModel)]=\"commentContent\">\n          <ax-wysiwyg-view class=\"ax-min-h-28\"></ax-wysiwyg-view>\n          <ax-toolbar>\n            <ax-content>\n              <ax-wysiwyg-history></ax-wysiwyg-history>\n              <ax-wysiwyg-font-style></ax-wysiwyg-font-style>\n              <ax-wysiwyg-colors></ax-wysiwyg-colors>\n              <ax-wysiwyg-list></ax-wysiwyg-list>\n              <ax-wysiwyg-alignment></ax-wysiwyg-alignment>\n            </ax-content>\n            <ax-suffix>\n              <ax-dropdown-button\n                [disabled]=\"hasCooldown()\"\n                type=\"submit\"\n                color=\"primary\"\n                mode=\"split\"\n                text=\"Send\"\n                (onClick)=\"submitComment()\"\n              >\n                @if (isSubmitting()) {\n                  <ax-loading></ax-loading>\n                }\n                <ax-button-item-list>\n                  <ax-button-item (click)=\"submitComment(true)\" text=\"Send Private ...\" name=\"private\" data=\"private\">\n                    <ax-prefix>\n                      <ax-icon icon=\"fa-regular fa-user-secret\"></ax-icon>\n                    </ax-prefix>\n                  </ax-button-item>\n                </ax-button-item-list>\n              </ax-dropdown-button>\n            </ax-suffix>\n          </ax-toolbar>\n          <ax-validation-rule rule=\"callback\" [options]=\"{ validate: validateContent }\"></ax-validation-rule>\n        </ax-wysiwyg-container>\n      </div>\n    </ax-form-field>\n  </ax-form>\n</div>\n", styles: ["ax-wysiwyg-container .ax-editor-container{border-top-left-radius:0!important;border-top-right-radius:0!important}ax-wysiwyg-container .ax-error-message{padding-left:.5rem}\n"], dependencies: [{ kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2$4.AXCommentViewComponent, selector: "ax-comment-view" }, { kind: "component", type: i2$4.AXCommentContainerComponent, selector: "ax-comment-container" }, { kind: "component", type: i2$4.AxCommentItemComponent, selector: "ax-comment-item", inputs: ["replyCount"] }, { kind: "component", type: i2$4.AXCommentLikeComponent, selector: "ax-comment-like", inputs: ["liked"], outputs: ["likedChange", "onLiked"] }, { kind: "component", type: i2$4.AXMenuOptionsComponent, selector: "ax-comment-menu-options" }, { kind: "component", type: i2$4.AXCommentReplyTextComponent, selector: "ax-comment-reply-text" }, { kind: "component", type: i2$4.AXCommentDateComponent, selector: "ax-comment-date" }, { kind: "component", type: i1.AXImageComponent, selector: "ax-image", inputs: ["width", "height", "overlayMode", "src", "alt", "priority", "lazy"], outputs: ["onLoad", "onError"] }, { kind: "component", type: i2.AXAvatarComponent, selector: "ax-avatar", inputs: ["color", "size", "shape", "look"], outputs: ["sizeChange"] }, { kind: "component", type: i5.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i5.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "component", type: i6$1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: i6$1.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i6$1.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items"], outputs: ["onItemClick"] }, { kind: "component", type: i5$1.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "component", type: i8.AXWysiwygContainerComponent, selector: "ax-wysiwyg-container", inputs: ["look", "placeHolder"], outputs: ["onValueChanged"] }, { kind: "component", type: i8.AXWysiwygViewComponent, selector: "ax-wysiwyg-view", inputs: ["class"] }, { kind: "component", type: i8.AXWysiwygAlignmentComponent, selector: "ax-wysiwyg-alignment" }, { kind: "component", type: i8.AXWysiwygColorsComponent, selector: "ax-wysiwyg-colors" }, { kind: "component", type: i8.AXWysiwygFontStyleComponent, selector: "ax-wysiwyg-font-style" }, { kind: "component", type: i8.AXWysiwygHistoryComponent, selector: "ax-wysiwyg-history" }, { kind: "component", type: i8.AXWysiwygListComponent, selector: "ax-wysiwyg-list" }, { kind: "component", type: i9.AXFormFieldComponent, selector: "ax-form-field", inputs: ["labelMode"] }, { kind: "component", type: i9.AXFormComponent, selector: "ax-form", inputs: ["labelMode", "look", "messageStyle", "updateOn"], outputs: ["onValidate", "updateOnChange"] }, { kind: "directive", type: i9.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }, { kind: "component", type: i10$1.AXDropdownButtonComponent, selector: "ax-dropdown-button", inputs: ["disabled", "size", "color", "look", "text", "type", "mode"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "lookChange", "colorChange", "disabledChange"] }, { kind: "component", type: i11$1.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "placement", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "component", type: i12.AXToolBarComponent, selector: "ax-toolbar" }, { kind: "component", type: i13.AXSkeletonComponent, selector: "ax-skeleton", inputs: ["animated"] }, { kind: "pipe", type: i14.AsyncPipe, name: "async" }, { kind: "pipe", type: i15.AXFormatPipe, name: "format" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXMChatPreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: AXMChatPreviewComponent, isStandalone: true, selector: "axm-chat-preview", ngImport: i0, template: "@if (isLoading()) {\n  <div class=\"ax-h-full ax-w-full ax-flex ax-items-center ax-justify-center\">\n    <ax-loading></ax-loading>\n  </div>\n} @else if (error()) {\n  <div class=\"ax-h-full ax-w-full ax-flex ax-items-center ax-justify-center\">\n    <div class=\"ax-text-center\">\n      <p class=\"ax-text-danger\">{{ error() }}</p>\n      <button (click)=\"loadMessages(roomId)\" class=\"ax-mt-2 ax-button ax-primary\">Retry</button>\n    </div>\n  </div>\n} @else {\n  <div\n    axDomChange\n    (axResizeObserver)=\"setHeight($event[0].contentRect.height)\"\n    class=\"ax-bg-surface-container ax-h-full\"\n  >\n    <!-- Messages Container -->\n    <ax-conversation-container class=\"ax-overflow-hidden\" [chatData]=\"chatData()\">\n      <ax-conversation-view\n        (onActionMenuOpening)=\"addItemHandler($event)\"\n        (onAction)=\"handleOnAction($event)\"\n        [chatBoxHeight]=\"height() - 60 + 'px'\"\n      ></ax-conversation-view>\n      <ax-conversation-input\n        class=\"ax-p-1\"\n        placeholder=\"Type a message...\"\n        [(ngModel)]=\"options().value\"\n        (onSendClick)=\"handleOnSend($event)\"\n        (onFileChange)=\"handleFileChange($event)\"\n        (onStopRecording)=\"handleEndRecord($event)\"\n        (onCancelRecording)=\"handleCancelRecord($event)\"\n      ></ax-conversation-input>\n    </ax-conversation-container>\n  </div>\n}\n", styles: [":host{display:block;width:100%;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i13.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i13.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: AXDomChangeDirective, selector: "[axDomChange]", outputs: ["axMutationObserver", "axResizeObserver"] }, { kind: "ngmodule", type: AXConversationModule }, { kind: "component", type: i2$4.AXConversationViewComponent, selector: "ax-conversation-view", inputs: ["chatBoxHeight", "isReplyArrowShown"], outputs: ["onScrollEnd", "onActionMenuOpening", "onAction"] }, { kind: "component", type: i2$4.AXConversationInputComponent, selector: "ax-conversation-input", inputs: ["look", "placeholder", "maxLength", "hasAttachment", "hasVoice", "hasEmoji", "isLoading", "acceptFileType"], outputs: ["onSendClick", "onStartRecording", "onCancelRecording", "onEnterPressed"] }, { kind: "component", type: i2$4.AXConversationContainerComponent, selector: "ax-conversation-container", inputs: ["chatData"] }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "component", type: i8.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXMCommentListViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXMChatPreviewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'axm-comment-list-view', standalone: false, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ax-mt-2\">\n  <ax-comment-container>\n    @if (isLoading()) {\n      <div class=\"ax-flex ax-items-center ax-py-12 ax-bg-lightest ax-px-5\">\n        <ax-skeleton class=\"ax-min-w-16 ax-h-16 ax-rounded-full ax-me-4\"></ax-skeleton>\n        <div class=\"ax-flex ax-flex-col ax-gap-2 ax-w-full\">\n          <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded\"></ax-skeleton>\n          <ax-skeleton class=\"ax-w-full ax-h-2 ax-rounded-full\"></ax-skeleton>\n          <ax-skeleton class=\"ax-w-full ax-h-2 ax-rounded-full\"></ax-skeleton>\n          <ax-skeleton class=\"ax-w-8/12 ax-h-2 ax-rounded-full\"></ax-skeleton>\n        </div>\n      </div>\n    } @else if (!isLoading() && comments().length > 0) {\n      <ax-comment-view class=\"ax-bg-lightest\">\n        @for (comment of comments(); track comment.id) {\n          <ax-comment-item [id]=\"comment.id!\" [replyCount]=\"comment.replies?.length ?? 0\">\n            <ax-avatar [color]=\"avatarConfig().color\" [shape]=\"avatarConfig().look\">\n              @if (checkImageExists(comment.id!) && comment.author && extractInitials(comment.author) !== '?') {\n                <ax-image (onError)=\"handleImageError(comment.id!)\" [src]=\"''\">\n                  <ax-loading></ax-loading>\n                </ax-image>\n              } @else {\n                <ax-text>\n                  <span class=\"ax-text-base ax-overflow-hidden\">{{ extractInitials(comment.author) }}</span>\n                </ax-text>\n              }\n            </ax-avatar>\n            <ax-title>{{ extractInitials(comment.author) }}</ax-title>\n            <ax-comment-date>{{ calcDefrenetTime(comment.createdAt) | format: 'timeleft' | async }} </ax-comment-date>\n            <ax-comment-menu-options>\n              <ax-button class=\"ax-sm\" look=\"blank\" color=\"neutral\">\n                <ax-icon icon=\"ax-icon ax-icon-solid ax-icon-more-horizontal\"></ax-icon>\n              </ax-button>\n\n              <ax-dropdown-panel>\n                <ax-button-item-list>\n                  <ax-button-item text=\"Edit\" color=\"neutral\" (click)=\"editMessage(comment)\">\n                    <ax-prefix>\n                      <ax-icon icon=\"fa-solid fa-edit\"></ax-icon>\n                    </ax-prefix>\n                  </ax-button-item>\n\n                  <ax-button-item text=\"Delete\" color=\"danger\" (click)=\"deleteComment(comment)\">\n                    <ax-prefix>\n                      <ax-icon icon=\"fa-solid fa-trash-can\"></ax-icon>\n                    </ax-prefix>\n                  </ax-button-item>\n                </ax-button-item-list>\n              </ax-dropdown-panel>\n            </ax-comment-menu-options>\n            <ax-content [innerHTML]=\"sanitizeHtml(comment.message.content)\"></ax-content>\n            <ax-comment-like (click)=\"toggleLike(comment)\" [liked]=\"comment.isLiked!\">\n              {{ comment.reactionsCount }}\n            </ax-comment-like>\n            <ax-comment-reply-text (click)=\"replyMessage(comment)\"></ax-comment-reply-text>\n            @for (reply of comment.replies; track reply.id) {\n              <ax-comment-item [id]=\"reply.id\">\n                <ax-avatar [color]=\"avatarConfig().color\" [shape]=\"avatarConfig().look\">\n                  @if (reply && checkImageExists(reply.id!) && reply.author && extractInitials(reply.author) !== '?') {\n                    <ax-image (onError)=\"handleImageError(reply.id!)\" [src]=\"''\">\n                      <ax-loading></ax-loading>\n                    </ax-image>\n                  } @else {\n                    <ax-text>\n                      <span class=\"ax-text-base ax-overflow-hidden\">{{ extractInitials(reply.author) }}</span>\n                    </ax-text>\n                  }\n                </ax-avatar>\n                <ax-title>{{ extractInitials(reply.author) }}</ax-title>\n                <ax-comment-date>{{ calcDefrenetTime(reply.createdAt) | format: 'timeleft' | async }} </ax-comment-date>\n                <ax-comment-menu-options>\n                  <ax-button class=\"ax-sm\" look=\"blank\" color=\"neutral\">\n                    <ax-icon icon=\"ax-icon ax-icon-solid ax-icon-more-horizontal\"></ax-icon>\n                  </ax-button>\n\n                  <ax-dropdown-panel>\n                    <ax-button-item-list>\n                      <ax-button-item text=\"Edit\" color=\"neutral\" (click)=\"editMessage(comment, reply)\">\n                        <ax-prefix>\n                          <ax-icon icon=\"fa-solid fa-edit\"></ax-icon>\n                        </ax-prefix>\n                      </ax-button-item>\n                      <ax-button-item text=\"Delete\" color=\"danger\" (click)=\"deleteReply(comment, reply)\">\n                        <ax-prefix>\n                          <ax-icon icon=\"fa-solid fa-trash-can\"></ax-icon>\n                        </ax-prefix>\n                      </ax-button-item>\n                    </ax-button-item-list>\n                  </ax-dropdown-panel>\n                </ax-comment-menu-options>\n                <ax-content [innerHTML]=\"sanitizeHtml(reply.message.content)\"></ax-content>\n                <ax-comment-like (click)=\"toggleLike(comment, reply)\" [liked]=\"reply.isLiked!\">\n                  {{ reply.reactionsCount }}\n                </ax-comment-like>\n                <ax-comment-reply-text (click)=\"replyMessage(comment, reply)\"></ax-comment-reply-text>\n              </ax-comment-item>\n            }\n          </ax-comment-item>\n        }\n      </ax-comment-view>\n    } @else {\n      <div>\n        <div class=\"ax-flex ax-flex-col ax-gap-4 ax-justify-center ax-items-center ax-p-10\">\n          <svg\n            class=\"ax-mx-auto\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"154\"\n            height=\"161\"\n            viewBox=\"0 0 154 161\"\n            fill=\"none\"\n          >\n            <path\n              d=\"M0.0616455 84.4268C0.0616455 42.0213 34.435 7.83765 76.6507 7.83765C118.803 7.83765 153.224 42.0055 153.224 84.4268C153.224 102.42 147.026 118.974 136.622 132.034C122.282 150.138 100.367 161 76.6507 161C52.7759 161 30.9882 150.059 16.6633 132.034C6.25961 118.974 0.0616455 102.42 0.0616455 84.4268Z\"\n              fill=\"#EEF2FF\"\n            />\n            <path\n              d=\"M96.8189 0.632498L96.8189 0.632384L96.8083 0.630954C96.2034 0.549581 95.5931 0.5 94.9787 0.5H29.338C22.7112 0.5 17.3394 5.84455 17.3394 12.4473V142.715C17.3394 149.318 22.7112 154.662 29.338 154.662H123.948C130.591 154.662 135.946 149.317 135.946 142.715V38.9309C135.946 38.0244 135.847 37.1334 135.648 36.2586L135.648 36.2584C135.117 33.9309 133.874 31.7686 132.066 30.1333C132.066 30.1331 132.065 30.1329 132.065 30.1327L103.068 3.65203C103.068 3.6519 103.067 3.65177 103.067 3.65164C101.311 2.03526 99.1396 0.995552 96.8189 0.632498Z\"\n              fill=\"white\"\n              stroke=\"#E5E7EB\"\n            />\n            <ellipse cx=\"80.0618\" cy=\"81\" rx=\"28.0342\" ry=\"28.0342\" fill=\"#EEF2FF\" />\n            <path\n              d=\"M99.2393 61.3061L99.2391 61.3058C88.498 50.5808 71.1092 50.5804 60.3835 61.3061C49.6423 72.0316 49.6422 89.4361 60.3832 100.162C71.109 110.903 88.4982 110.903 99.2393 100.162C109.965 89.4363 109.965 72.0317 99.2393 61.3061ZM105.863 54.6832C120.249 69.0695 120.249 92.3985 105.863 106.785C91.4605 121.171 68.1468 121.171 53.7446 106.785C39.3582 92.3987 39.3582 69.0693 53.7446 54.683C68.1468 40.2965 91.4605 40.2966 105.863 54.6832Z\"\n              stroke=\"#E5E7EB\"\n            />\n            <path\n              d=\"M110.782 119.267L102.016 110.492C104.888 108.267 107.476 105.651 109.564 102.955L118.329 111.729L110.782 119.267Z\"\n              stroke=\"#E5E7EB\"\n            />\n            <path\n              d=\"M139.122 125.781L139.122 125.78L123.313 109.988C123.313 109.987 123.313 109.987 123.312 109.986C121.996 108.653 119.849 108.657 118.521 109.985L118.871 110.335L118.521 109.985L109.047 119.459C107.731 120.775 107.735 122.918 109.044 124.247L109.047 124.249L124.858 140.06C128.789 143.992 135.191 143.992 139.122 140.06C143.069 136.113 143.069 129.728 139.122 125.781Z\"\n              fill=\"#A5B4FC\"\n              stroke=\"#818CF8\"\n            />\n            <path\n              d=\"M83.185 87.2285C82.5387 87.2285 82.0027 86.6926 82.0027 86.0305C82.0027 83.3821 77.9987 83.3821 77.9987 86.0305C77.9987 86.6926 77.4627 87.2285 76.8006 87.2285C76.1543 87.2285 75.6183 86.6926 75.6183 86.0305C75.6183 80.2294 84.3831 80.2451 84.3831 86.0305C84.3831 86.6926 83.8471 87.2285 83.185 87.2285Z\"\n              fill=\"#4F46E5\"\n            />\n            <path\n              d=\"M93.3528 77.0926H88.403C87.7409 77.0926 87.2049 76.5567 87.2049 75.8946C87.2049 75.2483 87.7409 74.7123 88.403 74.7123H93.3528C94.0149 74.7123 94.5509 75.2483 94.5509 75.8946C94.5509 76.5567 94.0149 77.0926 93.3528 77.0926Z\"\n              fill=\"#4F46E5\"\n            />\n            <path\n              d=\"M71.5987 77.0925H66.6488C65.9867 77.0925 65.4507 76.5565 65.4507 75.8945C65.4507 75.2481 65.9867 74.7122 66.6488 74.7122H71.5987C72.245 74.7122 72.781 75.2481 72.781 75.8945C72.781 76.5565 72.245 77.0925 71.5987 77.0925Z\"\n              fill=\"#4F46E5\"\n            />\n            <rect x=\"38.3522\" y=\"21.5128\" width=\"41.0256\" height=\"2.73504\" rx=\"1.36752\" fill=\"#4F46E5\" />\n            <rect x=\"38.3522\" y=\"133.65\" width=\"54.7009\" height=\"5.47009\" rx=\"2.73504\" fill=\"#A5B4FC\" />\n            <rect x=\"38.3522\" y=\"29.7179\" width=\"13.6752\" height=\"2.73504\" rx=\"1.36752\" fill=\"#4F46E5\" />\n            <circle cx=\"56.13\" cy=\"31.0854\" r=\"1.36752\" fill=\"#4F46E5\" />\n            <circle cx=\"61.6001\" cy=\"31.0854\" r=\"1.36752\" fill=\"#4F46E5\" />\n            <circle cx=\"67.0702\" cy=\"31.0854\" r=\"1.36752\" fill=\"#4F46E5\" />\n          </svg>\n          <div>\n            <h2 class=\"ax-text-center ax-text-neutral-600 ax-font-semibold ax-leading-loose ax-pb-2\">\n              There is no Comment!\n            </h2>\n          </div>\n        </div>\n      </div>\n    }\n  </ax-comment-container>\n  <ax-form>\n    <ax-form-field>\n      <div>\n        @if (isReplyingMode() || isEditingMode()) {\n          <div\n            class=\"ax-flex ax-justify-between ax-rounded-b-none ax-border ax-border-b-0 ax-rounded-lg ax-bg-on-surface ax-px-6 ax-py-3 ax-w-full ax-items-center ax-overflow-hidden ax-text-sm ax-leading-none\"\n          >\n            <div (click)=\"scrollMain()\" class=\"ax-flex ax-justify-start ax-items-center ax-cursor-pointer\">\n              <i\n                [class]=\"isReplyingMode() ? 'fa-reply' : 'fa-pen'\"\n                class=\"fa-solid ax-text-primary-500 dark:ax-text-primary-300 ax-text-2xl ax-me-4\"\n              ></i>\n              <div\n                class=\"ax-flex ax-flex-col ax-gap-2 ax-justify-between ax-align-middle ax-leading-4 ax-overflow-hidden\"\n              >\n                <p class=\"ax-text-primary-500 dark:ax-text-primary-300\">\n                  {{ isReplyingMode() ? 'Reply to ' : 'Edit Message' }}\n                  <span class=\"ax-font-bold\">\n                    {{ isReplyingMode() ? extractInitials(activeReplyComment()?.author) : '' }}\n                  </span>\n                </p>\n                <div\n                  class=\"ax-truncate\"\n                  [innerHTML]=\"\n                    isReplyingMode()\n                      ? sanitizeHtml(activeReplyComment()?.message?.content ?? '')\n                      : sanitizeHtml(activeEditComment()?.message?.content ?? '')\n                  \"\n                ></div>\n              </div>\n            </div>\n            <div><i (click)=\"resetReplyEditState()\" class=\"fa-solid ax-text-2xl fa-xmark ax-cursor-pointer\"></i></div>\n          </div>\n        }\n        <ax-wysiwyg-container #w [look]=\"wysiwygOptions().look\" [(ngModel)]=\"commentContent\">\n          <ax-wysiwyg-view class=\"ax-min-h-28\"></ax-wysiwyg-view>\n          <ax-toolbar>\n            <ax-content>\n              <ax-wysiwyg-history></ax-wysiwyg-history>\n              <ax-wysiwyg-font-style></ax-wysiwyg-font-style>\n              <ax-wysiwyg-colors></ax-wysiwyg-colors>\n              <ax-wysiwyg-list></ax-wysiwyg-list>\n              <ax-wysiwyg-alignment></ax-wysiwyg-alignment>\n            </ax-content>\n            <ax-suffix>\n              <ax-dropdown-button\n                [disabled]=\"hasCooldown()\"\n                type=\"submit\"\n                color=\"primary\"\n                mode=\"split\"\n                text=\"Send\"\n                (onClick)=\"submitComment()\"\n              >\n                @if (isSubmitting()) {\n                  <ax-loading></ax-loading>\n                }\n                <ax-button-item-list>\n                  <ax-button-item (click)=\"submitComment(true)\" text=\"Send Private ...\" name=\"private\" data=\"private\">\n                    <ax-prefix>\n                      <ax-icon icon=\"fa-regular fa-user-secret\"></ax-icon>\n                    </ax-prefix>\n                  </ax-button-item>\n                </ax-button-item-list>\n              </ax-dropdown-button>\n            </ax-suffix>\n          </ax-toolbar>\n          <ax-validation-rule rule=\"callback\" [options]=\"{ validate: validateContent }\"></ax-validation-rule>\n        </ax-wysiwyg-container>\n      </div>\n    </ax-form-field>\n  </ax-form>\n</div>\n", styles: ["ax-wysiwyg-container .ax-editor-container{border-top-left-radius:0!important;border-top-right-radius:0!important}ax-wysiwyg-container .ax-error-message{padding-left:.5rem}\n"] }]
+            args: [{ selector: 'axm-chat-preview', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule, FormsModule, AXDomChangeDirective, AXConversationModule, AXLoadingModule], template: "@if (isLoading()) {\n  <div class=\"ax-h-full ax-w-full ax-flex ax-items-center ax-justify-center\">\n    <ax-loading></ax-loading>\n  </div>\n} @else if (error()) {\n  <div class=\"ax-h-full ax-w-full ax-flex ax-items-center ax-justify-center\">\n    <div class=\"ax-text-center\">\n      <p class=\"ax-text-danger\">{{ error() }}</p>\n      <button (click)=\"loadMessages(roomId)\" class=\"ax-mt-2 ax-button ax-primary\">Retry</button>\n    </div>\n  </div>\n} @else {\n  <div\n    axDomChange\n    (axResizeObserver)=\"setHeight($event[0].contentRect.height)\"\n    class=\"ax-bg-surface-container ax-h-full\"\n  >\n    <!-- Messages Container -->\n    <ax-conversation-container class=\"ax-overflow-hidden\" [chatData]=\"chatData()\">\n      <ax-conversation-view\n        (onActionMenuOpening)=\"addItemHandler($event)\"\n        (onAction)=\"handleOnAction($event)\"\n        [chatBoxHeight]=\"height() - 60 + 'px'\"\n      ></ax-conversation-view>\n      <ax-conversation-input\n        class=\"ax-p-1\"\n        placeholder=\"Type a message...\"\n        [(ngModel)]=\"options().value\"\n        (onSendClick)=\"handleOnSend($event)\"\n        (onFileChange)=\"handleFileChange($event)\"\n        (onStopRecording)=\"handleEndRecord($event)\"\n        (onCancelRecording)=\"handleCancelRecord($event)\"\n      ></ax-conversation-input>\n    </ax-conversation-container>\n  </div>\n}\n", styles: [":host{display:block;width:100%;height:100%}\n"] }]
         }] });
 
+var chatPreview_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    AXMChatPreviewComponent: AXMChatPreviewComponent
+});
+
 class AXMCommentWidgetViewComponent extends AXPLayoutWidgetComponent {
     constructor() {
         super(...arguments);
@@ -2748,7 +3044,7 @@ class AXMCommentWidgetViewComponent extends AXPLayoutWidgetComponent {
         return date ? Date.now() - date.getTime() : undefined;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXMCommentWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: AXMCommentWidgetViewComponent, isStandalone: true, selector: "axm-comment-widget-view", viewQueries: [{ propertyName: "wysiwygEditor", first: true, predicate: ["w"], descendants: true, isSignal: true }, { propertyName: "wysiwyg", first: true, predicate: ["w"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-mt-2 ax-p-2\">\n  <ax-comment-container>\n    @if (isLoading()) {\n      <div class=\"ax-flex ax-items-center ax-py-12 ax-bg-lightest ax-px-5\">\n        <ax-skeleton class=\"ax-min-w-16 ax-h-16 ax-rounded-full ax-me-4\"></ax-skeleton>\n        <div class=\"ax-flex ax-flex-col ax-gap-2 ax-w-full\">\n          <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded\"></ax-skeleton>\n          <ax-skeleton class=\"ax-w-full ax-h-2 ax-rounded-full\"></ax-skeleton>\n          <ax-skeleton class=\"ax-w-full ax-h-2 ax-rounded-full\"></ax-skeleton>\n          <ax-skeleton class=\"ax-w-8/12 ax-h-2 ax-rounded-full\"></ax-skeleton>\n        </div>\n      </div>\n    } @else if (!isLoading() && comments().length > 0) {\n      <ax-comment-view class=\"ax-bg-lightest\">\n        @for (comment of comments(); track comment.id) {\n          <ax-comment-item [id]=\"comment.id!\" [replyCount]=\"comment.replies?.length ?? 0\">\n            <ax-avatar [color]=\"avatarConfig().color\" [shape]=\"avatarConfig().look\">\n              @if (checkImageExists(comment.id!) && comment.author && extractInitials(comment.author) !== '?') {\n                <ax-image (onError)=\"handleImageError(comment.id!)\" [src]=\"''\">\n                  <ax-loading></ax-loading>\n                </ax-image>\n              } @else {\n                <ax-text>\n                  <span class=\"ax-text-base ax-overflow-hidden\">{{ extractInitials(comment.author) }}</span>\n                </ax-text>\n              }\n            </ax-avatar>\n            <ax-title>{{ extractInitials(comment.author) }}</ax-title>\n            <ax-comment-date>{{ calcDefrenetTime(comment.createdAt) | format: 'timeleft' | async }} </ax-comment-date>\n            <ax-comment-menu-options>\n              <ax-button class=\"ax-sm\" look=\"blank\" color=\"neutral\">\n                <ax-icon icon=\"ax-icon ax-icon-solid ax-icon-more-horizontal\"></ax-icon>\n              </ax-button>\n\n              <ax-dropdown-panel>\n                <ax-button-item-list>\n                  <ax-button-item text=\"Edit\" color=\"neutral\" (click)=\"editMessage(comment)\">\n                    <ax-prefix>\n                      <ax-icon icon=\"fa-solid fa-edit\"></ax-icon>\n                    </ax-prefix>\n                  </ax-button-item>\n\n                  <ax-button-item text=\"Delete\" color=\"danger\" (click)=\"deleteComment(comment)\">\n                    <ax-prefix>\n                      <ax-icon icon=\"fa-solid fa-trash-can\"></ax-icon>\n                    </ax-prefix>\n                  </ax-button-item>\n                </ax-button-item-list>\n              </ax-dropdown-panel>\n            </ax-comment-menu-options>\n            <ax-content [innerHTML]=\"sanitizeHtml(comment.message.content)\"></ax-content>\n            <ax-comment-like (click)=\"toggleLike(comment)\" [liked]=\"comment.isLiked!\">\n              {{ comment.reactionsCount }}\n            </ax-comment-like>\n            <ax-comment-reply-text (click)=\"replyMessage(comment)\"></ax-comment-reply-text>\n            @for (reply of comment.replies; track reply.id) {\n              <ax-comment-item [id]=\"reply.id\">\n                <ax-avatar [color]=\"avatarConfig().color\" [shape]=\"avatarConfig().look\">\n                  @if (reply && checkImageExists(reply.id!) && reply.author && extractInitials(reply.author) !== '?') {\n                    <ax-image (onError)=\"handleImageError(reply.id!)\" [src]=\"''\">\n                      <ax-loading></ax-loading>\n                    </ax-image>\n                  } @else {\n                    <ax-text>\n                      <span class=\"ax-text-base ax-overflow-hidden\">{{ extractInitials(reply.author) }}</span>\n                    </ax-text>\n                  }\n                </ax-avatar>\n                <ax-title>{{ extractInitials(reply.author) }}</ax-title>\n                <ax-comment-date>{{ calcDefrenetTime(reply.createdAt) | format: 'timeleft' | async }} </ax-comment-date>\n                <ax-comment-menu-options>\n                  <ax-button class=\"ax-sm\" look=\"blank\" color=\"neutral\">\n                    <ax-icon icon=\"ax-icon ax-icon-solid ax-icon-more-horizontal\"></ax-icon>\n                  </ax-button>\n\n                  <ax-dropdown-panel>\n                    <ax-button-item-list>\n                      <ax-button-item text=\"Edit\" color=\"neutral\" (click)=\"editMessage(comment, reply)\">\n                        <ax-prefix>\n                          <ax-icon icon=\"fa-solid fa-edit\"></ax-icon>\n                        </ax-prefix>\n                      </ax-button-item>\n                      <ax-button-item text=\"Delete\" color=\"danger\" (click)=\"deleteReply(comment, reply)\">\n                        <ax-prefix>\n                          <ax-icon icon=\"fa-solid fa-trash-can\"></ax-icon>\n                        </ax-prefix>\n                      </ax-button-item>\n                    </ax-button-item-list>\n                  </ax-dropdown-panel>\n                </ax-comment-menu-options>\n                <ax-content [innerHTML]=\"sanitizeHtml(reply.message.content)\"></ax-content>\n                <ax-comment-like (click)=\"toggleLike(comment, reply)\" [liked]=\"reply.isLiked!\">\n                  {{ reply.reactionsCount }}\n                </ax-comment-like>\n                <ax-comment-reply-text (click)=\"replyMessage(comment, reply)\"></ax-comment-reply-text>\n              </ax-comment-item>\n            }\n          </ax-comment-item>\n        }\n      </ax-comment-view>\n    } @else {\n      <div>\n        <div class=\"ax-flex ax-flex-col ax-gap-4 ax-justify-center ax-items-center ax-p-10\">\n          <svg\n            class=\"ax-mx-auto\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"154\"\n            height=\"161\"\n            viewBox=\"0 0 154 161\"\n            fill=\"none\"\n          >\n            <path\n              d=\"M0.0616455 84.4268C0.0616455 42.0213 34.435 7.83765 76.6507 7.83765C118.803 7.83765 153.224 42.0055 153.224 84.4268C153.224 102.42 147.026 118.974 136.622 132.034C122.282 150.138 100.367 161 76.6507 161C52.7759 161 30.9882 150.059 16.6633 132.034C6.25961 118.974 0.0616455 102.42 0.0616455 84.4268Z\"\n              fill=\"#EEF2FF\"\n            />\n            <path\n              d=\"M96.8189 0.632498L96.8189 0.632384L96.8083 0.630954C96.2034 0.549581 95.5931 0.5 94.9787 0.5H29.338C22.7112 0.5 17.3394 5.84455 17.3394 12.4473V142.715C17.3394 149.318 22.7112 154.662 29.338 154.662H123.948C130.591 154.662 135.946 149.317 135.946 142.715V38.9309C135.946 38.0244 135.847 37.1334 135.648 36.2586L135.648 36.2584C135.117 33.9309 133.874 31.7686 132.066 30.1333C132.066 30.1331 132.065 30.1329 132.065 30.1327L103.068 3.65203C103.068 3.6519 103.067 3.65177 103.067 3.65164C101.311 2.03526 99.1396 0.995552 96.8189 0.632498Z\"\n              fill=\"white\"\n              stroke=\"#E5E7EB\"\n            />\n            <ellipse cx=\"80.0618\" cy=\"81\" rx=\"28.0342\" ry=\"28.0342\" fill=\"#EEF2FF\" />\n            <path\n              d=\"M99.2393 61.3061L99.2391 61.3058C88.498 50.5808 71.1092 50.5804 60.3835 61.3061C49.6423 72.0316 49.6422 89.4361 60.3832 100.162C71.109 110.903 88.4982 110.903 99.2393 100.162C109.965 89.4363 109.965 72.0317 99.2393 61.3061ZM105.863 54.6832C120.249 69.0695 120.249 92.3985 105.863 106.785C91.4605 121.171 68.1468 121.171 53.7446 106.785C39.3582 92.3987 39.3582 69.0693 53.7446 54.683C68.1468 40.2965 91.4605 40.2966 105.863 54.6832Z\"\n              stroke=\"#E5E7EB\"\n            />\n            <path\n              d=\"M110.782 119.267L102.016 110.492C104.888 108.267 107.476 105.651 109.564 102.955L118.329 111.729L110.782 119.267Z\"\n              stroke=\"#E5E7EB\"\n            />\n            <path\n              d=\"M139.122 125.781L139.122 125.78L123.313 109.988C123.313 109.987 123.313 109.987 123.312 109.986C121.996 108.653 119.849 108.657 118.521 109.985L118.871 110.335L118.521 109.985L109.047 119.459C107.731 120.775 107.735 122.918 109.044 124.247L109.047 124.249L124.858 140.06C128.789 143.992 135.191 143.992 139.122 140.06C143.069 136.113 143.069 129.728 139.122 125.781Z\"\n              fill=\"#A5B4FC\"\n              stroke=\"#818CF8\"\n            />\n            <path\n              d=\"M83.185 87.2285C82.5387 87.2285 82.0027 86.6926 82.0027 86.0305C82.0027 83.3821 77.9987 83.3821 77.9987 86.0305C77.9987 86.6926 77.4627 87.2285 76.8006 87.2285C76.1543 87.2285 75.6183 86.6926 75.6183 86.0305C75.6183 80.2294 84.3831 80.2451 84.3831 86.0305C84.3831 86.6926 83.8471 87.2285 83.185 87.2285Z\"\n              fill=\"#4F46E5\"\n            />\n            <path\n              d=\"M93.3528 77.0926H88.403C87.7409 77.0926 87.2049 76.5567 87.2049 75.8946C87.2049 75.2483 87.7409 74.7123 88.403 74.7123H93.3528C94.0149 74.7123 94.5509 75.2483 94.5509 75.8946C94.5509 76.5567 94.0149 77.0926 93.3528 77.0926Z\"\n              fill=\"#4F46E5\"\n            />\n            <path\n              d=\"M71.5987 77.0925H66.6488C65.9867 77.0925 65.4507 76.5565 65.4507 75.8945C65.4507 75.2481 65.9867 74.7122 66.6488 74.7122H71.5987C72.245 74.7122 72.781 75.2481 72.781 75.8945C72.781 76.5565 72.245 77.0925 71.5987 77.0925Z\"\n              fill=\"#4F46E5\"\n            />\n            <rect x=\"38.3522\" y=\"21.5128\" width=\"41.0256\" height=\"2.73504\" rx=\"1.36752\" fill=\"#4F46E5\" />\n            <rect x=\"38.3522\" y=\"133.65\" width=\"54.7009\" height=\"5.47009\" rx=\"2.73504\" fill=\"#A5B4FC\" />\n            <rect x=\"38.3522\" y=\"29.7179\" width=\"13.6752\" height=\"2.73504\" rx=\"1.36752\" fill=\"#4F46E5\" />\n            <circle cx=\"56.13\" cy=\"31.0854\" r=\"1.36752\" fill=\"#4F46E5\" />\n            <circle cx=\"61.6001\" cy=\"31.0854\" r=\"1.36752\" fill=\"#4F46E5\" />\n            <circle cx=\"67.0702\" cy=\"31.0854\" r=\"1.36752\" fill=\"#4F46E5\" />\n          </svg>\n          <div>\n            <h2 class=\"ax-text-center ax-text-neutral-600 ax-font-semibold ax-leading-loose ax-pb-2\">\n              There is no Comment!\n            </h2>\n          </div>\n        </div>\n      </div>\n    }\n  </ax-comment-container>\n  <ax-form>\n    <ax-form-field>\n      <div>\n        @if (isReplyingMode() || isEditingMode()) {\n          <div\n            class=\"ax-flex ax-justify-between ax-rounded-b-none ax-border ax-border-b-0 ax-rounded-lg ax-bg-on-surface ax-px-6 ax-py-3 ax-w-full ax-items-center ax-overflow-hidden ax-text-sm ax-leading-none\"\n          >\n            <div (click)=\"scrollMain()\" class=\"ax-flex ax-justify-start ax-items-center ax-cursor-pointer\">\n              <i\n                [class]=\"isReplyingMode() ? 'fa-reply' : 'fa-pen'\"\n                class=\"fa-solid ax-text-primary-500 dark:ax-text-primary-300 ax-text-2xl ax-me-4\"\n              ></i>\n              <div\n                class=\"ax-flex ax-flex-col ax-gap-2 ax-justify-between ax-align-middle ax-leading-4 ax-overflow-hidden\"\n              >\n                <p class=\"ax-text-primary-500 dark:ax-text-primary-300\">\n                  {{ isReplyingMode() ? 'Reply to ' : 'Edit Message' }}\n                  <span class=\"ax-font-bold\">\n                    {{ isReplyingMode() ? extractInitials(activeReplyComment()?.author) : '' }}\n                  </span>\n                </p>\n                <div\n                  class=\"ax-truncate\"\n                  [innerHTML]=\"\n                    isReplyingMode()\n                      ? sanitizeHtml(activeReplyComment()?.message?.content ?? '')\n                      : sanitizeHtml(activeEditComment()?.message?.content ?? '')\n                  \"\n                ></div>\n              </div>\n            </div>\n            <div><i (click)=\"resetReplyEditState()\" class=\"fa-solid ax-text-2xl fa-xmark ax-cursor-pointer\"></i></div>\n          </div>\n        }\n        <ax-wysiwyg-container #w [look]=\"wysiwygOptions().look\" [(ngModel)]=\"commentContent\">\n          <ax-wysiwyg-view class=\"ax-min-h-28\"></ax-wysiwyg-view>\n          <ax-toolbar>\n            <ax-content>\n              <ax-wysiwyg-history></ax-wysiwyg-history>\n              <ax-wysiwyg-font-style></ax-wysiwyg-font-style>\n              <ax-wysiwyg-colors></ax-wysiwyg-colors>\n              <ax-wysiwyg-list></ax-wysiwyg-list>\n              <ax-wysiwyg-alignment></ax-wysiwyg-alignment>\n            </ax-content>\n            <ax-suffix>\n              <ax-dropdown-button\n                [disabled]=\"hasCooldown()\"\n                type=\"submit\"\n                color=\"primary\"\n                mode=\"split\"\n                text=\"Send\"\n                (onClick)=\"submitComment()\"\n              >\n                @if (isSubmitting()) {\n                  <ax-loading></ax-loading>\n                }\n                <ax-button-item-list>\n                  <ax-button-item (click)=\"submitComment(true)\" text=\"Send Private ...\" name=\"private\" data=\"private\">\n                    <ax-prefix>\n                      <ax-icon icon=\"fa-regular fa-user-secret\"></ax-icon>\n                    </ax-prefix>\n                  </ax-button-item>\n                </ax-button-item-list>\n              </ax-dropdown-button>\n            </ax-suffix>\n          </ax-toolbar>\n          <ax-validation-rule rule=\"callback\" [options]=\"{ validate: validateContent }\"></ax-validation-rule>\n        </ax-wysiwyg-container>\n      </div>\n    </ax-form-field>\n  </ax-form>\n</div>\n", styles: ["ax-wysiwyg-container .ax-editor-container{border-top-left-radius:0!important;border-top-right-radius:0!important}ax-wysiwyg-container .ax-error-message{padding-left:.5rem}\n"], dependencies: [{ kind: "component", type: AXWysiwygContainerComponent, selector: "ax-wysiwyg-container", inputs: ["look", "placeHolder"], outputs: ["onValueChanged"] }, { kind: "ngmodule", type: AXAvatarModule }, { kind: "component", type: i2.AXAvatarComponent, selector: "ax-avatar", inputs: ["color", "size", "shape", "look"], outputs: ["sizeChange"] }, { kind: "ngmodule", type: AXConversationModule }, { kind: "ngmodule", type: AXSkeletonModule }, { kind: "component", type: i13.AXSkeletonComponent, selector: "ax-skeleton", inputs: ["animated"] }, { kind: "ngmodule", type: AXCommentModule }, { kind: "component", type: i2$4.AXCommentViewComponent, selector: "ax-comment-view" }, { kind: "component", type: i2$4.AXCommentContainerComponent, selector: "ax-comment-container" }, { kind: "component", type: i2$4.AxCommentItemComponent, selector: "ax-comment-item", inputs: ["replyCount"] }, { kind: "component", type: i2$4.AXCommentLikeComponent, selector: "ax-comment-like", inputs: ["liked"], outputs: ["likedChange", "onLiked"] }, { kind: "component", type: i2$4.AXMenuOptionsComponent, selector: "ax-comment-menu-options" }, { kind: "component", type: i2$4.AXCommentReplyTextComponent, selector: "ax-comment-reply-text" }, { kind: "component", type: i2$4.AXCommentDateComponent, selector: "ax-comment-date" }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i6$1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: i6$1.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i6$1.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXImageModule }, { kind: "component", type: i1.AXImageComponent, selector: "ax-image", inputs: ["width", "height", "overlayMode", "src", "alt", "priority", "lazy"], outputs: ["onLoad", "onError"] }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "component", type: i5$1.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "component", type: i11$1.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "placement", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i5.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i5.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXWysiwygModule }, { kind: "component", type: i8.AXWysiwygViewComponent, selector: "ax-wysiwyg-view", inputs: ["class"] }, { kind: "component", type: i8.AXWysiwygAlignmentComponent, selector: "ax-wysiwyg-alignment" }, { kind: "component", type: i8.AXWysiwygColorsComponent, selector: "ax-wysiwyg-colors" }, { kind: "component", type: i8.AXWysiwygFontStyleComponent, selector: "ax-wysiwyg-font-style" }, { kind: "component", type: i8.AXWysiwygHistoryComponent, selector: "ax-wysiwyg-history" }, { kind: "component", type: i8.AXWysiwygListComponent, selector: "ax-wysiwyg-list" }, { kind: "ngmodule", type: AXToolBarModule }, { kind: "component", type: i12.AXToolBarComponent, selector: "ax-toolbar" }, { kind: "ngmodule", type: AXDropdownButtonModule }, { kind: "component", type: i10$1.AXDropdownButtonComponent, selector: "ax-dropdown-button", inputs: ["disabled", "size", "color", "look", "text", "type", "mode"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "lookChange", "colorChange", "disabledChange"] }, { kind: "ngmodule", type: AXValidationModule }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: AXFormModule }, { kind: "component", type: i9.AXFormFieldComponent, selector: "ax-form-field", inputs: ["labelMode"] }, { kind: "component", type: i9.AXFormComponent, selector: "ax-form", inputs: ["labelMode", "look", "messageStyle", "updateOn"], outputs: ["onValidate", "updateOnChange"] }, { kind: "directive", type: i9.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXFormatModule }, { kind: "pipe", type: i15.AXFormatPipe, name: "format" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: AXMCommentWidgetViewComponent, isStandalone: true, selector: "axm-comment-widget-view", viewQueries: [{ propertyName: "wysiwygEditor", first: true, predicate: ["w"], descendants: true, isSignal: true }, { propertyName: "wysiwyg", first: true, predicate: ["w"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-mt-2 ax-p-2\">\n  <ax-comment-container>\n    @if (isLoading()) {\n      <div class=\"ax-flex ax-items-center ax-py-12 ax-bg-lightest ax-px-5\">\n        <ax-skeleton class=\"ax-min-w-16 ax-h-16 ax-rounded-full ax-me-4\"></ax-skeleton>\n        <div class=\"ax-flex ax-flex-col ax-gap-2 ax-w-full\">\n          <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded\"></ax-skeleton>\n          <ax-skeleton class=\"ax-w-full ax-h-2 ax-rounded-full\"></ax-skeleton>\n          <ax-skeleton class=\"ax-w-full ax-h-2 ax-rounded-full\"></ax-skeleton>\n          <ax-skeleton class=\"ax-w-8/12 ax-h-2 ax-rounded-full\"></ax-skeleton>\n        </div>\n      </div>\n    } @else if (!isLoading() && comments().length > 0) {\n      <ax-comment-view class=\"ax-bg-lightest\">\n        @for (comment of comments(); track comment.id) {\n          <ax-comment-item [id]=\"comment.id!\" [replyCount]=\"comment.replies?.length ?? 0\">\n            <ax-avatar [color]=\"avatarConfig().color\" [shape]=\"avatarConfig().look\">\n              @if (checkImageExists(comment.id!) && comment.author && extractInitials(comment.author) !== '?') {\n                <ax-image (onError)=\"handleImageError(comment.id!)\" [src]=\"''\">\n                  <ax-loading></ax-loading>\n                </ax-image>\n              } @else {\n                <ax-text>\n                  <span class=\"ax-text-base ax-overflow-hidden\">{{ extractInitials(comment.author) }}</span>\n                </ax-text>\n              }\n            </ax-avatar>\n            <ax-title>{{ extractInitials(comment.author) }}</ax-title>\n            <ax-comment-date>{{ calcDefrenetTime(comment.createdAt) | format: 'timeleft' | async }} </ax-comment-date>\n            <ax-comment-menu-options>\n              <ax-button class=\"ax-sm\" look=\"blank\" color=\"neutral\">\n                <ax-icon icon=\"ax-icon ax-icon-solid ax-icon-more-horizontal\"></ax-icon>\n              </ax-button>\n\n              <ax-dropdown-panel>\n                <ax-button-item-list>\n                  <ax-button-item text=\"Edit\" color=\"neutral\" (click)=\"editMessage(comment)\">\n                    <ax-prefix>\n                      <ax-icon icon=\"fa-solid fa-edit\"></ax-icon>\n                    </ax-prefix>\n                  </ax-button-item>\n\n                  <ax-button-item text=\"Delete\" color=\"danger\" (click)=\"deleteComment(comment)\">\n                    <ax-prefix>\n                      <ax-icon icon=\"fa-solid fa-trash-can\"></ax-icon>\n                    </ax-prefix>\n                  </ax-button-item>\n                </ax-button-item-list>\n              </ax-dropdown-panel>\n            </ax-comment-menu-options>\n            <ax-content [innerHTML]=\"sanitizeHtml(comment.message.content)\"></ax-content>\n            <ax-comment-like (click)=\"toggleLike(comment)\" [liked]=\"comment.isLiked!\">\n              {{ comment.reactionsCount }}\n            </ax-comment-like>\n            <ax-comment-reply-text (click)=\"replyMessage(comment)\"></ax-comment-reply-text>\n            @for (reply of comment.replies; track reply.id) {\n              <ax-comment-item [id]=\"reply.id\">\n                <ax-avatar [color]=\"avatarConfig().color\" [shape]=\"avatarConfig().look\">\n                  @if (reply && checkImageExists(reply.id!) && reply.author && extractInitials(reply.author) !== '?') {\n                    <ax-image (onError)=\"handleImageError(reply.id!)\" [src]=\"''\">\n                      <ax-loading></ax-loading>\n                    </ax-image>\n                  } @else {\n                    <ax-text>\n                      <span class=\"ax-text-base ax-overflow-hidden\">{{ extractInitials(reply.author) }}</span>\n                    </ax-text>\n                  }\n                </ax-avatar>\n                <ax-title>{{ extractInitials(reply.author) }}</ax-title>\n                <ax-comment-date>{{ calcDefrenetTime(reply.createdAt) | format: 'timeleft' | async }} </ax-comment-date>\n                <ax-comment-menu-options>\n                  <ax-button class=\"ax-sm\" look=\"blank\" color=\"neutral\">\n                    <ax-icon icon=\"ax-icon ax-icon-solid ax-icon-more-horizontal\"></ax-icon>\n                  </ax-button>\n\n                  <ax-dropdown-panel>\n                    <ax-button-item-list>\n                      <ax-button-item text=\"Edit\" color=\"neutral\" (click)=\"editMessage(comment, reply)\">\n                        <ax-prefix>\n                          <ax-icon icon=\"fa-solid fa-edit\"></ax-icon>\n                        </ax-prefix>\n                      </ax-button-item>\n                      <ax-button-item text=\"Delete\" color=\"danger\" (click)=\"deleteReply(comment, reply)\">\n                        <ax-prefix>\n                          <ax-icon icon=\"fa-solid fa-trash-can\"></ax-icon>\n                        </ax-prefix>\n                      </ax-button-item>\n                    </ax-button-item-list>\n                  </ax-dropdown-panel>\n                </ax-comment-menu-options>\n                <ax-content [innerHTML]=\"sanitizeHtml(reply.message.content)\"></ax-content>\n                <ax-comment-like (click)=\"toggleLike(comment, reply)\" [liked]=\"reply.isLiked!\">\n                  {{ reply.reactionsCount }}\n                </ax-comment-like>\n                <ax-comment-reply-text (click)=\"replyMessage(comment, reply)\"></ax-comment-reply-text>\n              </ax-comment-item>\n            }\n          </ax-comment-item>\n        }\n      </ax-comment-view>\n    } @else {\n      <div>\n        <div class=\"ax-flex ax-flex-col ax-gap-4 ax-justify-center ax-items-center ax-p-10\">\n          <svg\n            class=\"ax-mx-auto\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"154\"\n            height=\"161\"\n            viewBox=\"0 0 154 161\"\n            fill=\"none\"\n          >\n            <path\n              d=\"M0.0616455 84.4268C0.0616455 42.0213 34.435 7.83765 76.6507 7.83765C118.803 7.83765 153.224 42.0055 153.224 84.4268C153.224 102.42 147.026 118.974 136.622 132.034C122.282 150.138 100.367 161 76.6507 161C52.7759 161 30.9882 150.059 16.6633 132.034C6.25961 118.974 0.0616455 102.42 0.0616455 84.4268Z\"\n              fill=\"#EEF2FF\"\n            />\n            <path\n              d=\"M96.8189 0.632498L96.8189 0.632384L96.8083 0.630954C96.2034 0.549581 95.5931 0.5 94.9787 0.5H29.338C22.7112 0.5 17.3394 5.84455 17.3394 12.4473V142.715C17.3394 149.318 22.7112 154.662 29.338 154.662H123.948C130.591 154.662 135.946 149.317 135.946 142.715V38.9309C135.946 38.0244 135.847 37.1334 135.648 36.2586L135.648 36.2584C135.117 33.9309 133.874 31.7686 132.066 30.1333C132.066 30.1331 132.065 30.1329 132.065 30.1327L103.068 3.65203C103.068 3.6519 103.067 3.65177 103.067 3.65164C101.311 2.03526 99.1396 0.995552 96.8189 0.632498Z\"\n              fill=\"white\"\n              stroke=\"#E5E7EB\"\n            />\n            <ellipse cx=\"80.0618\" cy=\"81\" rx=\"28.0342\" ry=\"28.0342\" fill=\"#EEF2FF\" />\n            <path\n              d=\"M99.2393 61.3061L99.2391 61.3058C88.498 50.5808 71.1092 50.5804 60.3835 61.3061C49.6423 72.0316 49.6422 89.4361 60.3832 100.162C71.109 110.903 88.4982 110.903 99.2393 100.162C109.965 89.4363 109.965 72.0317 99.2393 61.3061ZM105.863 54.6832C120.249 69.0695 120.249 92.3985 105.863 106.785C91.4605 121.171 68.1468 121.171 53.7446 106.785C39.3582 92.3987 39.3582 69.0693 53.7446 54.683C68.1468 40.2965 91.4605 40.2966 105.863 54.6832Z\"\n              stroke=\"#E5E7EB\"\n            />\n            <path\n              d=\"M110.782 119.267L102.016 110.492C104.888 108.267 107.476 105.651 109.564 102.955L118.329 111.729L110.782 119.267Z\"\n              stroke=\"#E5E7EB\"\n            />\n            <path\n              d=\"M139.122 125.781L139.122 125.78L123.313 109.988C123.313 109.987 123.313 109.987 123.312 109.986C121.996 108.653 119.849 108.657 118.521 109.985L118.871 110.335L118.521 109.985L109.047 119.459C107.731 120.775 107.735 122.918 109.044 124.247L109.047 124.249L124.858 140.06C128.789 143.992 135.191 143.992 139.122 140.06C143.069 136.113 143.069 129.728 139.122 125.781Z\"\n              fill=\"#A5B4FC\"\n              stroke=\"#818CF8\"\n            />\n            <path\n              d=\"M83.185 87.2285C82.5387 87.2285 82.0027 86.6926 82.0027 86.0305C82.0027 83.3821 77.9987 83.3821 77.9987 86.0305C77.9987 86.6926 77.4627 87.2285 76.8006 87.2285C76.1543 87.2285 75.6183 86.6926 75.6183 86.0305C75.6183 80.2294 84.3831 80.2451 84.3831 86.0305C84.3831 86.6926 83.8471 87.2285 83.185 87.2285Z\"\n              fill=\"#4F46E5\"\n            />\n            <path\n              d=\"M93.3528 77.0926H88.403C87.7409 77.0926 87.2049 76.5567 87.2049 75.8946C87.2049 75.2483 87.7409 74.7123 88.403 74.7123H93.3528C94.0149 74.7123 94.5509 75.2483 94.5509 75.8946C94.5509 76.5567 94.0149 77.0926 93.3528 77.0926Z\"\n              fill=\"#4F46E5\"\n            />\n            <path\n              d=\"M71.5987 77.0925H66.6488C65.9867 77.0925 65.4507 76.5565 65.4507 75.8945C65.4507 75.2481 65.9867 74.7122 66.6488 74.7122H71.5987C72.245 74.7122 72.781 75.2481 72.781 75.8945C72.781 76.5565 72.245 77.0925 71.5987 77.0925Z\"\n              fill=\"#4F46E5\"\n            />\n            <rect x=\"38.3522\" y=\"21.5128\" width=\"41.0256\" height=\"2.73504\" rx=\"1.36752\" fill=\"#4F46E5\" />\n            <rect x=\"38.3522\" y=\"133.65\" width=\"54.7009\" height=\"5.47009\" rx=\"2.73504\" fill=\"#A5B4FC\" />\n            <rect x=\"38.3522\" y=\"29.7179\" width=\"13.6752\" height=\"2.73504\" rx=\"1.36752\" fill=\"#4F46E5\" />\n            <circle cx=\"56.13\" cy=\"31.0854\" r=\"1.36752\" fill=\"#4F46E5\" />\n            <circle cx=\"61.6001\" cy=\"31.0854\" r=\"1.36752\" fill=\"#4F46E5\" />\n            <circle cx=\"67.0702\" cy=\"31.0854\" r=\"1.36752\" fill=\"#4F46E5\" />\n          </svg>\n          <div>\n            <h2 class=\"ax-text-center ax-text-neutral-600 ax-font-semibold ax-leading-loose ax-pb-2\">\n              There is no Comment!\n            </h2>\n          </div>\n        </div>\n      </div>\n    }\n  </ax-comment-container>\n  <ax-form>\n    <ax-form-field>\n      <div>\n        @if (isReplyingMode() || isEditingMode()) {\n          <div\n            class=\"ax-flex ax-justify-between ax-rounded-b-none ax-border ax-border-b-0 ax-rounded-lg ax-bg-on-surface ax-px-6 ax-py-3 ax-w-full ax-items-center ax-overflow-hidden ax-text-sm ax-leading-none\"\n          >\n            <div (click)=\"scrollMain()\" class=\"ax-flex ax-justify-start ax-items-center ax-cursor-pointer\">\n              <i\n                [class]=\"isReplyingMode() ? 'fa-reply' : 'fa-pen'\"\n                class=\"fa-solid ax-text-primary-500 dark:ax-text-primary-300 ax-text-2xl ax-me-4\"\n              ></i>\n              <div\n                class=\"ax-flex ax-flex-col ax-gap-2 ax-justify-between ax-align-middle ax-leading-4 ax-overflow-hidden\"\n              >\n                <p class=\"ax-text-primary-500 dark:ax-text-primary-300\">\n                  {{ isReplyingMode() ? 'Reply to ' : 'Edit Message' }}\n                  <span class=\"ax-font-bold\">\n                    {{ isReplyingMode() ? extractInitials(activeReplyComment()?.author) : '' }}\n                  </span>\n                </p>\n                <div\n                  class=\"ax-truncate\"\n                  [innerHTML]=\"\n                    isReplyingMode()\n                      ? sanitizeHtml(activeReplyComment()?.message?.content ?? '')\n                      : sanitizeHtml(activeEditComment()?.message?.content ?? '')\n                  \"\n                ></div>\n              </div>\n            </div>\n            <div><i (click)=\"resetReplyEditState()\" class=\"fa-solid ax-text-2xl fa-xmark ax-cursor-pointer\"></i></div>\n          </div>\n        }\n        <ax-wysiwyg-container #w [look]=\"wysiwygOptions().look\" [(ngModel)]=\"commentContent\">\n          <ax-wysiwyg-view class=\"ax-min-h-28\"></ax-wysiwyg-view>\n          <ax-toolbar>\n            <ax-content>\n              <ax-wysiwyg-history></ax-wysiwyg-history>\n              <ax-wysiwyg-font-style></ax-wysiwyg-font-style>\n              <ax-wysiwyg-colors></ax-wysiwyg-colors>\n              <ax-wysiwyg-list></ax-wysiwyg-list>\n              <ax-wysiwyg-alignment></ax-wysiwyg-alignment>\n            </ax-content>\n            <ax-suffix>\n              <ax-dropdown-button\n                [disabled]=\"hasCooldown()\"\n                type=\"submit\"\n                color=\"primary\"\n                mode=\"split\"\n                text=\"Send\"\n                (onClick)=\"submitComment()\"\n              >\n                @if (isSubmitting()) {\n                  <ax-loading></ax-loading>\n                }\n                <ax-button-item-list>\n                  <ax-button-item (click)=\"submitComment(true)\" text=\"Send Private ...\" name=\"private\" data=\"private\">\n                    <ax-prefix>\n                      <ax-icon icon=\"fa-regular fa-user-secret\"></ax-icon>\n                    </ax-prefix>\n                  </ax-button-item>\n                </ax-button-item-list>\n              </ax-dropdown-button>\n            </ax-suffix>\n          </ax-toolbar>\n          <ax-validation-rule rule=\"callback\" [options]=\"{ validate: validateContent }\"></ax-validation-rule>\n        </ax-wysiwyg-container>\n      </div>\n    </ax-form-field>\n  </ax-form>\n</div>\n", styles: ["ax-wysiwyg-container .ax-editor-container{border-top-left-radius:0!important;border-top-right-radius:0!important}ax-wysiwyg-container .ax-error-message{padding-left:.5rem}\n"], dependencies: [{ kind: "component", type: AXWysiwygContainerComponent, selector: "ax-wysiwyg-container", inputs: ["look", "placeHolder"], outputs: ["onValueChanged"] }, { kind: "ngmodule", type: AXAvatarModule }, { kind: "component", type: i6.AXAvatarComponent, selector: "ax-avatar", inputs: ["color", "size", "shape", "look"], outputs: ["sizeChange"] }, { kind: "ngmodule", type: AXConversationModule }, { kind: "ngmodule", type: AXSkeletonModule }, { kind: "component", type: i2$1.AXSkeletonComponent, selector: "ax-skeleton", inputs: ["animated"] }, { kind: "ngmodule", type: AXCommentModule }, { kind: "component", type: i4.AXCommentViewComponent, selector: "ax-comment-view" }, { kind: "component", type: i4.AXCommentContainerComponent, selector: "ax-comment-container" }, { kind: "component", type: i4.AxCommentItemComponent, selector: "ax-comment-item", inputs: ["replyCount"] }, { kind: "component", type: i4.AXCommentLikeComponent, selector: "ax-comment-like", inputs: ["liked"], outputs: ["likedChange", "onLiked"] }, { kind: "component", type: i4.AXMenuOptionsComponent, selector: "ax-comment-menu-options" }, { kind: "component", type: i4.AXCommentReplyTextComponent, selector: "ax-comment-reply-text" }, { kind: "component", type: i4.AXCommentDateComponent, selector: "ax-comment-date" }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i5$1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: i5$1.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i5$1.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXImageModule }, { kind: "component", type: i7.AXImageComponent, selector: "ax-image", inputs: ["width", "height", "overlayMode", "src", "alt", "priority", "lazy"], outputs: ["onLoad", "onError"] }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "component", type: i8.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "component", type: i9.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "placement", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i5.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i5.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXWysiwygModule }, { kind: "component", type: i1.AXWysiwygViewComponent, selector: "ax-wysiwyg-view", inputs: ["class"] }, { kind: "component", type: i1.AXWysiwygAlignmentComponent, selector: "ax-wysiwyg-alignment" }, { kind: "component", type: i1.AXWysiwygColorsComponent, selector: "ax-wysiwyg-colors" }, { kind: "component", type: i1.AXWysiwygFontStyleComponent, selector: "ax-wysiwyg-font-style" }, { kind: "component", type: i1.AXWysiwygHistoryComponent, selector: "ax-wysiwyg-history" }, { kind: "component", type: i1.AXWysiwygListComponent, selector: "ax-wysiwyg-list" }, { kind: "ngmodule", type: AXToolBarModule }, { kind: "component", type: i12.AXToolBarComponent, selector: "ax-toolbar" }, { kind: "ngmodule", type: AXDropdownButtonModule }, { kind: "component", type: i14.AXDropdownButtonComponent, selector: "ax-dropdown-button", inputs: ["disabled", "size", "color", "look", "text", "type", "mode"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "lookChange", "colorChange", "disabledChange"] }, { kind: "ngmodule", type: AXValidationModule }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: AXFormModule }, { kind: "component", type: i11.AXFormFieldComponent, selector: "ax-form-field", inputs: ["labelMode"] }, { kind: "component", type: i11.AXFormComponent, selector: "ax-form", inputs: ["labelMode", "look", "messageStyle", "updateOn"], outputs: ["onValidate", "updateOnChange"] }, { kind: "directive", type: i11.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i13.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i13.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXFormatModule }, { kind: "pipe", type: i10.AXFormatPipe, name: "format" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXMCommentWidgetViewComponent, decorators: [{
             type: Component,
@@ -2796,74 +3092,38 @@ const AXPCommentWidget = {
     },
 };
 
-const routes = [
-    {
-        path: 'platform',
-        component: AXPRootLayoutComponent,
-        children: [
-            {
-                path: 'chat',
-                component: AXMChatComponent,
-                children: [
-                    {
-                        path: ':id',
-                        component: AXMChatPreviewComponent,
-                    },
-                ],
-            },
-            {
-                path: 'comments/m/:module/e/:id',
-                component: AXMCommentListViewComponent,
+function routesFactory() {
+    const routes = [
+        {
+            path: ':app/chat',
+            canActivate: [AXPAuthGuard],
+            loadComponent: () => {
+                return AXPRootLayoutComponent;
             },
-        ],
-    },
-];
+            children: [
+                {
+                    path: '',
+                    loadComponent: () => Promise.resolve().then(function () { return chat_component; }).then((c) => c.AXMChatComponent),
+                    data: { reuse: true },
+                    children: [
+                        {
+                            path: ':id',
+                            loadComponent: () => Promise.resolve().then(function () { return chatPreview_component; }).then((c) => c.AXMChatPreviewComponent),
+                        },
+                    ],
+                },
+            ],
+        },
+        {
+            path: ':app/comments/m/:module/e/:id',
+            component: AXMCommentListViewComponent,
+        },
+    ];
+    return routes;
+}
 class AXMConversationModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXMConversationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.4", ngImport: i0, type: AXMConversationModule, declarations: [
-            // Chat Components
-            AXMChatComponent,
-            AXMChatItemComponent,
-            AXMChatPreviewComponent,
-            // Comment Components
-            AXMCommentListViewComponent], imports: [
-            // Common Modules
-            CommonModule,
-            FormsModule, i2$1.RouterModule, 
-            // Acorex Core Modules
-            AXFormatModule,
-            AXConversationModule,
-            AXCommentModule,
-            AXTranslationModule,
-            // Acorex Component Modules
-            AXResizableDirective,
-            AXImageModule,
-            AXAvatarModule,
-            AXBadgeModule,
-            AXDecoratorModule,
-            AXTextBoxModule,
-            AXSearchBoxModule,
-            AXTabsModule,
-            AXButtonModule,
-            AXLoadingModule,
-            AXWysiwygModule,
-            AXLabelModule,
-            AXSelectBoxModule,
-            AXFormModule,
-            AXDropdownButtonModule,
-            AXDropdownModule,
-            AXToolBarModule,
-            AXSkeletonModule,
-            AXPPageLayoutComponent,
-            AXPThemeLayoutBlockComponent,
-            AXPThemeLayoutStartSideComponent,
-            AXPThemeLayoutHeaderComponent,
-            AXPThemeLayoutToolbarComponent], exports: [
-            // Chat Components
-            AXMChatItemComponent,
-            AXMChatPreviewComponent,
-            // Comment Components
-            AXMCommentListViewComponent,
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.4", ngImport: i0, type: AXMConversationModule, exports: [
             // Modules
             RouterModule] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXMConversationModule, providers: [
@@ -2891,6 +3151,11 @@ class AXMConversationModule {
                 useClass: AXMConversationModuleEntityProvider,
                 multi: true,
             },
+            {
+                provide: ROUTES,
+                multi: true,
+                useFactory: routesFactory,
+            },
             // Menu Provider
             // {
             //   provide: AXP_MENU_PROVIDER,
@@ -2899,94 +3164,17 @@ class AXMConversationModule {
             // },
             // Conversation Module
             importProvidersFrom(AXConversationModule.forRoot()),
+            DatePipe,
         ], imports: [
-            // Common Modules
-            CommonModule,
-            FormsModule,
-            RouterModule.forChild(routes),
-            // Acorex Core Modules
-            AXFormatModule,
-            AXConversationModule,
-            AXCommentModule,
-            AXTranslationModule,
-            AXImageModule,
-            AXAvatarModule,
-            AXBadgeModule,
-            AXDecoratorModule,
-            AXTextBoxModule,
-            AXSearchBoxModule,
-            AXTabsModule,
-            AXButtonModule,
-            AXLoadingModule,
-            AXWysiwygModule,
-            AXLabelModule,
-            AXSelectBoxModule,
-            AXFormModule,
-            AXDropdownButtonModule,
-            AXDropdownModule,
-            AXToolBarModule,
-            AXSkeletonModule,
-            AXPPageLayoutComponent,
-            AXPThemeLayoutBlockComponent,
-            AXPThemeLayoutStartSideComponent,
-            AXPThemeLayoutHeaderComponent,
-            AXPThemeLayoutToolbarComponent, 
             // Modules
             RouterModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXMConversationModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [
-                        // Chat Components
-                        AXMChatComponent,
-                        AXMChatItemComponent,
-                        AXMChatPreviewComponent,
-                        // Comment Components
-                        AXMCommentListViewComponent,
-                        // Layout Components
-                    ],
-                    imports: [
-                        // Common Modules
-                        CommonModule,
-                        FormsModule,
-                        RouterModule.forChild(routes),
-                        // Acorex Core Modules
-                        AXFormatModule,
-                        AXConversationModule,
-                        AXCommentModule,
-                        AXTranslationModule,
-                        // Acorex Component Modules
-                        AXResizableDirective,
-                        AXImageModule,
-                        AXAvatarModule,
-                        AXBadgeModule,
-                        AXDecoratorModule,
-                        AXTextBoxModule,
-                        AXSearchBoxModule,
-                        AXTabsModule,
-                        AXButtonModule,
-                        AXLoadingModule,
-                        AXWysiwygModule,
-                        AXLabelModule,
-                        AXSelectBoxModule,
-                        AXFormModule,
-                        AXDropdownButtonModule,
-                        AXDropdownModule,
-                        AXToolBarModule,
-                        AXSkeletonModule,
-                        AXPPageLayoutComponent,
-                        AXPThemeLayoutBlockComponent,
-                        AXPThemeLayoutStartSideComponent,
-                        AXPThemeLayoutHeaderComponent,
-                        AXPThemeLayoutToolbarComponent,
-                    ],
+                    declarations: [],
+                    imports: [],
                     exports: [
-                        // Chat Components
-                        AXMChatItemComponent,
-                        AXMChatPreviewComponent,
-                        // Comment Components
-                        AXMCommentListViewComponent,
                         // Modules
                         RouterModule,
                     ],
@@ -3015,6 +3203,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImpor
                             useClass: AXMConversationModuleEntityProvider,
                             multi: true,
                         },
+                        {
+                            provide: ROUTES,
+                            multi: true,
+                            useFactory: routesFactory,
+                        },
                         // Menu Provider
                         // {
                         //   provide: AXP_MENU_PROVIDER,
@@ -3023,6 +3216,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImpor
                         // },
                         // Conversation Module
                         importProvidersFrom(AXConversationModule.forRoot()),
+                        DatePipe,
                     ],
                 }]
         }] });