@acorex/modules 20.6.0-next.8 → 20.6.0-next.9

package/fesm2022/acorex-modules-conversation.mjs

@@ -1,72 +1,54 @@
-import * as i2$2 from '@acorex/components/conversation';
-import { AXConversationModule, AXConversationInputComponent } from '@acorex/components/conversation';
+import { AXConversationModule } from '@acorex/components/conversation';
 import { AXPSessionService, AXPAuthGuard, AXP_PERMISSION_DEFINITION_PROVIDER } from '@acorex/platform/auth';
-import { AXMEntityCrudServiceImpl, entityMasterCrudActions, entityMasterRecordActions, AXPEntityDataSelectorService, AXPEntityDefinitionRegistryService, ensureListActions, actionExists, AXP_ENTITY_ACTION_PLUGIN, AXP_ENTITY_DEFINITION_LOADER } from '@acorex/platform/layout/entity';
+import { AXMEntityCrudServiceImpl, entityMasterCrudActions, entityMasterRecordActions, ensureListActions, actionExists, AXP_ENTITY_ACTION_PLUGIN, AXP_ENTITY_DEFINITION_LOADER } from '@acorex/platform/layout/entity';
 import { AXPRootLayoutComponent } from '@acorex/platform/themes/default';
-import * as i1 from '@angular/common';
-import { DatePipe, AsyncPipe, CommonModule } from '@angular/common';
+import * as i3 from '@angular/common';
+import { CommonModule, AsyncPipe, DatePipe } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Injectable, NgModule, inject, input, output, signal, effect, computed, ChangeDetectionStrategy, Component, viewChild, HostListener, afterNextRender, DestroyRef, ViewEncapsulation, Injector, importProvidersFrom } from '@angular/core';
-import * as i2$1 from '@angular/router';
-import { ActivatedRoute, Router, NavigationEnd, RouterModule, ROUTES } from '@angular/router';
-import { createAllQueryView, AXPEntityQueryType, AXPFileStorageService, AXPFilterOperatorMiddlewareService, AXPEntityCommandScope, AXP_MENU_PROVIDER } from '@acorex/platform/common';
-import * as i1$3 from '@acorex/platform/layout/widget-core';
+import { Injectable, NgModule, inject, signal, computed, effect, ChangeDetectionStrategy, Component, input, viewChild, DestroyRef, ViewEncapsulation, output, Injector, importProvidersFrom } from '@angular/core';
+import { Router, ActivatedRoute, RouterModule, ROUTES } from '@angular/router';
+import { createAllQueryView, AXPEntityQueryType, AXPFilterOperatorMiddlewareService, AXPEntityCommandScope, AXP_MENU_PROVIDER } from '@acorex/platform/common';
+import * as i1$2 from '@acorex/platform/layout/widget-core';
 import { AXPWidgetsCatalog, AXPValueWidgetComponent, AXPWidgetGroupEnum, AXPWidgetCoreModule } from '@acorex/platform/layout/widget-core';
-import { AXPUserAvatarComponent, AXPThemeLayoutBlockComponent, AXPThemeLayoutStartSideComponent, AXPThemeLayoutHeaderComponent, AXPThemeLayoutToolbarComponent, AXPStateMessageComponent, AXP_TASK_BADGE_PROVIDERS } from '@acorex/platform/layout/components';
-import * as i2$3 from '@acorex/platform/workflow';
+import { AXPThemeLayoutBlockComponent, AXPThemeLayoutStartSideComponent, AXPThemeLayoutHeaderComponent, AXPUserAvatarComponent, AXP_TASK_BADGE_PROVIDERS } from '@acorex/platform/layout/components';
+import * as i2$1 from '@acorex/platform/workflow';
 import { AXPWorkflowAction, AXPWorkflowModule } from '@acorex/platform/workflow';
 import { AXMNotificationConnectorService, AXP_NOTIFICATION_DEFINITION_PROVIDER } from '@acorex/modules/notification-management';
 import { AXMUsersEntityService } from '@acorex/modules/security-management';
-import { Subject, filter, startWith, debounceTime } from 'rxjs';
-import * as i3 from '@acorex/components/avatar';
-import { AXAvatarModule } from '@acorex/components/avatar';
-import * as i2 from '@acorex/components/badge';
-import { AXBadgeModule } from '@acorex/components/badge';
-import * as i5$1 from '@acorex/components/button';
-import { AXButtonModule } from '@acorex/components/button';
-import * as i4$2 from '@acorex/components/comment';
-import { AXCommentModule } from '@acorex/components/comment';
-import * as i5 from '@acorex/components/decorators';
+import { Subject, filter } from 'rxjs';
+import * as i5 from '@acorex/components/button';
+import { AXButtonComponent, AXButtonModule } from '@acorex/components/button';
+import { AXConversationService, AXConversationContainerDirective, AXSidebarComponent, AXInfoBarComponent, AXMessageListComponent, AXComposerComponent, provideConversation, AX_CONVERSATION_ITEM_MUTE_ACTION, AX_CONVERSATION_ITEM_PIN_ACTION, AX_CONVERSATION_ITEM_MARK_READ_ACTION, AX_CONVERSATION_ITEM_DIVIDER, AX_CONVERSATION_ITEM_DELETE_ACTION, AX_CONVERSATION_ITEM_BLOCK_ACTION, AX_CONVERSATION_INFO_BAR_SEARCH_ACTION, AX_CONVERSATION_INFO_BAR_INFO_ACTION, AX_CONVERSATION_INFO_BAR_MUTE_ACTION, AX_CONVERSATION_INFO_BAR_DIVIDER, AX_CONVERSATION_INFO_BAR_DELETE_ACTION, AX_CONVERSATION_INFO_BAR_BLOCK_ACTION, AX_CONVERSATION_TAB_ALL, AX_CONVERSATION_TAB_PRIVATE, AX_CONVERSATION_TAB_GROUPS, AX_CONVERSATION_TAB_CHANNELS, AX_CONVERSATION_TAB_UNREAD, AX_CONVERSATION_TAB_ARCHIVED, AX_CONVERSATION_COMPOSER_EMOJI_TAB, AX_CONVERSATION_COMPOSER_STICKER_TAB, AX_CONVERSATION_COMPOSER_EMOJI_ACTION, AX_CONVERSATION_COMPOSER_IMAGE_ACTION, AX_CONVERSATION_COMPOSER_VIDEO_ACTION, AX_CONVERSATION_COMPOSER_FILE_ACTION, AX_CONVERSATION_COMPOSER_VOICE_RECORDING_ACTION, AX_CONVERSATION_COMPOSER_AUDIO_ACTION, AX_CONVERSATION_COMPOSER_CONTACT_ACTION, AX_CONVERSATION_COMPOSER_LOCATION_ACTION, AX_CONVERSATION_MESSAGE_REPLY_ACTION, AX_CONVERSATION_MESSAGE_FORWARD_ACTION, AX_CONVERSATION_MESSAGE_EDIT_ACTION, AX_CONVERSATION_MESSAGE_DELETE_ACTION, AX_CONVERSATION_TEXT_RENDERER, AX_CONVERSATION_IMAGE_RENDERER, AX_CONVERSATION_VIDEO_RENDERER, AX_CONVERSATION_AUDIO_RENDERER, AX_CONVERSATION_VOICE_RENDERER, AX_CONVERSATION_FILE_RENDERER, AX_CONVERSATION_LOCATION_RENDERER, AX_CONVERSATION_STICKER_RENDERER, AX_CONVERSATION_CONTACT_RENDERER, AXIndexedDBRealtimeApi, AXIndexedDBMessageAIApi, AXIndexedDBConversationApi, AXIndexedDBUserApi } from '@acorex/components/conversation2';
+import * as i1 from '@acorex/components/decorators';
 import { AXDecoratorModule } from '@acorex/components/decorators';
+import * as i4$1 from '@acorex/core/translation';
+import { AXTranslationModule, AXTranslationService } from '@acorex/core/translation';
+import { AXPPageLayoutComponent } from '@acorex/platform/layout/views';
+import * as i1$1 from '@acorex/components/wysiwyg';
+import { AXWysiwygModule } from '@acorex/components/wysiwyg';
 import { AXDialogService } from '@acorex/components/dialog';
-import * as i7$1 from '@acorex/components/dropdown';
+import { AXToastService } from '@acorex/components/toast';
+import { trigger, transition, style, animate } from '@angular/animations';
+import { DomSanitizer } from '@angular/platform-browser';
+import { AXAvatarModule } from '@acorex/components/avatar';
+import * as i4 from '@acorex/components/comment';
+import { AXCommentModule } from '@acorex/components/comment';
+import * as i7 from '@acorex/components/dropdown';
 import { AXDropdownModule } from '@acorex/components/dropdown';
-import * as i9$1 from '@acorex/components/dropdown-button';
+import * as i9 from '@acorex/components/dropdown-button';
 import { AXDropdownButtonModule } from '@acorex/components/dropdown-button';
 import { AXFormModule } from '@acorex/components/form';
 import { AXImageModule } from '@acorex/components/image';
-import { AXLabelModule } from '@acorex/components/label';
-import * as i3$1 from '@acorex/components/loading';
+import * as i6 from '@acorex/components/loading';
 import { AXLoadingModule } from '@acorex/components/loading';
-import { AXContextMenuComponent } from '@acorex/components/menu';
-import * as i6 from '@acorex/components/search-box';
-import { AXSearchBoxModule } from '@acorex/components/search-box';
-import { AXSelectBoxModule } from '@acorex/components/select-box';
-import * as i9 from '@acorex/components/skeleton';
+import * as i2 from '@acorex/components/skeleton';
 import { AXSkeletonModule } from '@acorex/components/skeleton';
-import * as i4$1 from '@acorex/components/sliding-item';
-import { AXSlidingItemModule } from '@acorex/components/sliding-item';
-import * as i7 from '@acorex/components/tabs';
-import { AXTabsModule } from '@acorex/components/tabs';
-import { AXTextBoxModule } from '@acorex/components/text-box';
 import { AXToolBarModule } from '@acorex/components/toolbar';
-import * as i1$2 from '@acorex/components/wysiwyg';
-import { AXWysiwygModule } from '@acorex/components/wysiwyg';
 import * as i10 from '@acorex/core/format';
 import { AXFormatModule } from '@acorex/core/format';
-import * as i4 from '@acorex/core/translation';
-import { AXTranslationModule, AXTranslationService } from '@acorex/core/translation';
-import { AXUnsubscriber } from '@acorex/core/utils';
-import { AXPLayoutBuilderService } from '@acorex/platform/layout/builder';
-import { AXPPageLayoutBaseComponent, AXPPageLayoutComponent, AXPPageLayoutBase } from '@acorex/platform/layout/views';
-import { trigger, transition, style, animate } from '@angular/animations';
-import * as i1$1 from '@angular/forms';
-import { FormsModule } from '@angular/forms';
-import { AXDomChangeDirective } from '@acorex/cdk/dom';
-import { AXToastService } from '@acorex/components/toast';
-import { AXFileService } from '@acorex/core/file';
-import { DomSanitizer } from '@angular/platform-browser';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import * as i8 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
 import { AXBasePageComponent } from '@acorex/components/page';
 import { AXPopupService } from '@acorex/components/popup';
 
@@ -1487,1719 +1469,180 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
                 }]
         }] });
 
-class AXMChatItemComponent {
+class AXMChatComponent {
     constructor() {
-        // Input
-        this.data = input.required(...(ngDevMode ? [{ debugName: "data" }] : []));
-        this.typing = input(null, ...(ngDevMode ? [{ debugName: "typing" }] : []));
-        this.lastMessageReaction = input(null, ...(ngDevMode ? [{ debugName: "lastMessageReaction" }] : []));
-        // Output
-        this.pressChatItem = output();
-        // Services
-        this.sessionService = inject(AXPSessionService);
-        this.datePipe = inject(DatePipe);
-        this.fileStorage = inject(AXPFileStorageService);
-        this.chatName = signal({
-            fullName: 'Loading...',
-            id: '',
-            isPrivate: false,
-        }, ...(ngDevMode ? [{ debugName: "chatName" }] : []));
-        this.#chatInfoEffect = effect(async () => {
-            const { members, title, id } = this.data();
-            if (members.length > 1) {
-                this.chatName.set({
-                    fullName: title || 'Group Chat',
-                    id,
-                    isPrivate: false,
-                });
-                return;
-            }
-            const member = members[0];
-            if (!member) {
-                this.chatName.set({ fullName: 'Unknown User', id: '', isPrivate: true });
-                return;
-            }
-            this.chatName.set({
-                fullName: member.fullName || 'Unknown User',
-                id: member.id,
-                isPrivate: true,
-            });
-        }, ...(ngDevMode ? [{ debugName: "#chatInfoEffect" }] : []));
-        // Group avatar preview handling
-        this.groupAvatarUrl = signal(null, ...(ngDevMode ? [{ debugName: "groupAvatarUrl" }] : []));
-        this.groupBlobUrl = signal(null, ...(ngDevMode ? [{ debugName: "groupBlobUrl" }] : []));
-        this.isGroupAvatarLoading = signal(true, ...(ngDevMode ? [{ debugName: "isGroupAvatarLoading" }] : []));
-        this.#groupAvatarEffect = effect(async () => {
-            const room = this.data();
-            // Only for group chats
-            if (!room || (room.members?.length ?? 0) <= 1) {
-                this.groupAvatarUrl.set(null);
-                this.isGroupAvatarLoading.set(false);
-                return;
-            }
-            const avatar = room.avatar;
-            if (!avatar) {
-                this.groupAvatarUrl.set(null);
-                this.isGroupAvatarLoading.set(false);
-                return;
+        this.conversationService = inject(AXConversationService);
+        this.mobileView = signal('list', ...(ngDevMode ? [{ debugName: "mobileView" }] : []));
+        this.hasActiveConversation = computed(() => {
+            return this.conversationService.activeConversationId() !== null;
+        }, ...(ngDevMode ? [{ debugName: "hasActiveConversation" }] : []));
+        effect(() => {
+            const activeId = this.conversationService.activeConversationId();
+            if (activeId && this.isMobile()) {
+                this.mobileView.set('chat');
             }
-            if (typeof avatar === 'string') {
-                const val = avatar.trim();
-                // Resolve stored file identifiers like "file:<id>" or bare file IDs
-                if (val.startsWith('file:')) {
-                    try {
-                        const fileId = val.substring(5);
-                        const info = await this.fileStorage.getInfo(fileId);
-                        const url = info?.url ? String(info.url) : null;
-                        if (url) {
-                            await this.preloadAndSetGroupAvatar(url);
-                        }
-                        else {
-                            this.groupAvatarUrl.set(null);
-                            this.isGroupAvatarLoading.set(false);
-                        }
-                    }
-                    catch {
-                        this.groupAvatarUrl.set(null);
-                        this.isGroupAvatarLoading.set(false);
-                    }
-                    return;
-                }
-                // If it's a full URL or data URI, use as-is; otherwise treat as a fileId
-                if (/^(https?:)?\/\//i.test(val) || val.startsWith('data:')) {
-                    await this.preloadAndSetGroupAvatar(val);
-                    return;
-                }
-                try {
-                    const info = await this.fileStorage.getInfo(val);
-                    const url = info?.url ? String(info.url) : null;
-                    if (url) {
-                        await this.preloadAndSetGroupAvatar(url);
-                    }
-                    else {
-                        this.groupAvatarUrl.set(null);
-                        this.isGroupAvatarLoading.set(false);
-                    }
-                }
-                catch {
-                    this.groupAvatarUrl.set(null);
-                    this.isGroupAvatarLoading.set(false);
-                }
-                return;
-            }
-            const source = avatar.source;
-            if (!source) {
-                this.groupAvatarUrl.set(null);
-                this.isGroupAvatarLoading.set(false);
-                return;
-            }
-            switch (source.kind) {
-                case 'url':
-                    await this.preloadAndSetGroupAvatar(String(source.value));
-                    return;
-                case 'blob': {
-                    const prev = this.groupBlobUrl();
-                    if (prev)
-                        URL.revokeObjectURL(prev);
-                    const blob = source.value;
-                    const next = URL.createObjectURL(blob);
-                    this.groupBlobUrl.set(next);
-                    await this.preloadAndSetGroupAvatar(next);
-                    return;
-                }
-                case 'fileId': {
-                    try {
-                        const info = await this.fileStorage.getInfo(String(source.value));
-                        const url = info?.url ? String(info.url) : null;
-                        if (url) {
-                            await this.preloadAndSetGroupAvatar(url);
-                        }
-                        else {
-                            this.groupAvatarUrl.set(null);
-                            this.isGroupAvatarLoading.set(false);
-                        }
-                    }
-                    catch {
-                        this.groupAvatarUrl.set(null);
-                        this.isGroupAvatarLoading.set(false);
-                    }
-                    return;
-                }
-                default:
-                    this.groupAvatarUrl.set(null);
-                    this.isGroupAvatarLoading.set(false);
-                    return;
-            }
-        }, ...(ngDevMode ? [{ debugName: "#groupAvatarEffect" }] : []));
-        this.formattedLastMessageDate = computed(() => {
-            const lastMessage = this.data().lastMessage;
-            const createdAt = lastMessage?.auditInfo?.created?.at;
-            if (!createdAt) {
-                return '';
-            }
-            const messageDate = new Date(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');
-            }
-        }, ...(ngDevMode ? [{ debugName: "formattedLastMessageDate" }] : []));
-        this.lastMessage = computed(() => {
-            const message = this.data().lastMessage;
-            if (!message)
-                return { content: 'No messages yet', contentType: 'text', reactions: [] };
-            return {
-                content: message.message.contentType === 'text' ? message.message.content : message.message.contentType,
-                contentType: message.message.contentType,
-                reactions: message.reactions || [],
-                author: message.author,
-            };
-        }, ...(ngDevMode ? [{ debugName: "lastMessage" }] : []));
-        this.hasUnread = computed(() => {
-            return this.data().unreadCount > 0;
-        }, ...(ngDevMode ? [{ debugName: "hasUnread" }] : []));
-        this.unreadCount = computed(() => {
-            return this.data().unreadCount.toString();
-        }, ...(ngDevMode ? [{ debugName: "unreadCount" }] : []));
-    }
-    #chatInfoEffect;
-    async preloadAndSetGroupAvatar(url) {
-        this.isGroupAvatarLoading.set(true);
-        await new Promise((resolve) => {
-            const img = new Image();
-            img.onload = () => {
-                this.groupAvatarUrl.set(url);
-                this.isGroupAvatarLoading.set(false);
-                resolve();
-            };
-            img.onerror = () => {
-                this.groupAvatarUrl.set(null);
-                this.isGroupAvatarLoading.set(false);
-                resolve();
-            };
-            img.src = url;
         });
     }
-    #groupAvatarEffect;
-    ngOnDestroy() {
-        const prev = this.groupBlobUrl();
-        if (prev)
-            URL.revokeObjectURL(prev);
-    }
-    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.3.12", ngImport: i0, type: AXMChatItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: AXMChatItemComponent, isStandalone: true, selector: "axm-chat-item", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, typing: { classPropertyName: "typing", publicName: "typing", isSignal: true, isRequired: false, transformFunction: null }, lastMessageReaction: { classPropertyName: "lastMessageReaction", publicName: "lastMessageReaction", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pressChatItem: "pressChatItem" }, ngImport: i0, template: "<div\n  [id]=\"data().id\"\n  class=\"ax-cursor-pointer ax-p-4 ax-flex ax-items-center ax-justify-between ax-gap-4 ax-border-b ax-border-divider\"\n  (click)=\"onPressChatItem(data().id)\"\n>\n  <!-- Avatar and User Info Section -->\n  <div class=\"ax-flex ax-min-w-0 ax-gap-4 ax-flex-1\">\n    <!-- Avatar with Online Status -->\n    <div class=\"ax-flex-shrink-0\">\n      @if (chatName().isPrivate) {\n        <axp-user-avatar [size]=\"48\" [userId]=\"chatName().id\"></axp-user-avatar>\n      } @else {\n        @if (isGroupAvatarLoading()) {\n          <div class=\"ax-w-12 ax-h-12 ax-rounded-full ax-flex ax-items-center ax-justify-center ax-bg-surface\">\n            <i class=\"fa-solid fa-spinner-third fa-spin\"></i>\n          </div>\n        } @else if (groupAvatarUrl()) {\n          <div\n            class=\"ax-w-12 ax-h-12 ax-rounded-full ax-bg-center ax-bg-cover\"\n            [style.backgroundImage]=\"'url(' + groupAvatarUrl() + ')'\"\n          ></div>\n        } @else {\n          <ax-avatar [size]=\"48\">\n            <ax-text class=\"ax-primary-lightest\">\n              <small class=\"ax-text-xs ax-font-semibold fas fa-users\"></small>\n            </ax-text>\n          </ax-avatar>\n        }\n      }\n      <!--Temp-->\n    </div>\n\n    <!-- User Details and Last Message -->\n    <div class=\"ax-flex ax-flex-col ax-min-w-0 ax-flex-1 ax-gap-1\">\n      <div class=\"ax-flex ax-items-center ax-justify-between ax-gap-2\">\n        <p class=\"ax-font-semibold ax-text-on-surface ax-truncate ax-py-1\" [title]=\"chatName().fullName\">\n          {{ chatName().fullName }}\n        </p>\n        <div class=\"ax-flex ax-items-center ax-gap-1\">\n          @if (messageSeenStatus()) {\n            <ax-icon class=\"ax-icon ax-text-success ax-size-5\" [class]=\"messageSeenStatus()\"></ax-icon>\n          }\n          @if (this.data().lastMessage) {\n            <span class=\"ax-text-xs ax-whitespace-nowrap\">\n              {{ formattedLastMessageDate() }}\n            </span>\n          }\n        </div>\n      </div>\n      <div class=\"ax-flex ax-items-center ax-justify-between ax-gap-2 ax-mt-1 ax-overflow-hidden\">\n        @if (typing()?.isTyping) {\n          <div class=\"ax-pb-1 ax-flex ax-justify-center ax-items-end ax-gap-1\">\n            <span class=\"ax-text-on-surface-light ax-font-semibold ax-capitalize ax-whitespace-nowrap ax-text-sm\">\n              @if (!chatName().isPrivate) {\n                {{ typing()?.user }}\n              }\n              {{ '@conversation:is-typing' | translate | async }}\n            </span>\n            <div class=\"typing-indicator\">\n              <span></span>\n              <span></span>\n              <span></span>\n            </div>\n          </div>\n        } @else {\n          <div class=\"ax-flex ax-items-center ax-gap-2 ax-text-sm ax-shrink ax-min-w-0\">\n            @if ((lastMessage().author?.fullName || lastMessage().author?.username) && !chatName().isPrivate) {\n              <span class=\"ax-text-on-surface-light ax-font-semibold ax-capitalize ax-whitespace-nowrap\">\n                {{ (lastMessage().author?.fullName || lastMessage().author?.username) + ': ' }}\n              </span>\n            }\n            @switch (lastMessage().contentType) {\n              @case ('image') {\n                <i class=\"fa-regular fa-image\"></i>\n              }\n              @case ('video') {\n                <i class=\"fa-regular fa-video\"></i>\n              }\n              @case ('file') {\n                <i class=\"fa-regular fa-file\"></i>\n              }\n              @case ('audio') {\n                <i class=\"fa-regular fa-microphone\"></i>\n              }\n              @case ('link') {\n                <i class=\"fa-regular fa-link\"></i>\n              }\n            }\n\n            <span class=\"ax-truncate ax-capitalize\">\n              {{ lastMessage().content }}\n            </span>\n          </div>\n        }\n        <div class=\"ax-flex ax-items-center ax-gap-2\">\n          @if (hasUnread()) {\n            <ax-badge color=\"primary\" [text]=\"unreadCount()\" class=\"ax-flex-shrink-0 ax-ml-auto\"></ax-badge>\n          }\n          <!-- @if (lastMessageReaction()) {\n            <div class=\"ax-flex ax-items-center ax-gap-1 ax-bg-surface ax-rounded-full ax-p-1 ax-px-2\">\n              <span class=\"ax-text-sm\">{{ lastMessageReaction() }}</span>\n              <span class=\"ax-text-xs\">{{ lastMessage().reactions.length }}</span>\n            </div>\n          } -->\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:block;width:100%}.typing-indicator{display:flex;align-items:center;padding-bottom:.4rem}.typing-indicator span{height:4px;width:4px;margin:0 1px;background-color:#9e9ea1;border-radius:50%;display:inline-block;animation:bounce 1.4s infinite ease-in-out both}.typing-indicator span:nth-child(1){animation-delay:-.32s}.typing-indicator span:nth-child(2){animation-delay:-.16s}@keyframes bounce{0%,80%,to{transform:scale(0)}40%{transform:scale(1)}}\n"], dependencies: [{ kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: 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: AXBadgeModule }, { kind: "component", type: i2.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "component", type: AXPUserAvatarComponent, selector: "axp-user-avatar", inputs: ["size", "userId"] }, { kind: "ngmodule", type: AXAvatarModule }, { kind: "component", type: i3.AXAvatarComponent, selector: "ax-avatar", inputs: ["color", "size", "shape", "look"], outputs: ["sizeChange"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i4.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXMChatItemComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'axm-chat-item', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
-                        AXDecoratorModule,
-                        AXBadgeModule,
-                        AXPUserAvatarComponent,
-                        AXAvatarModule,
-                        AXDecoratorModule,
-                        AXTranslationModule,
-                        AsyncPipe,
-                    ], template: "<div\n  [id]=\"data().id\"\n  class=\"ax-cursor-pointer ax-p-4 ax-flex ax-items-center ax-justify-between ax-gap-4 ax-border-b ax-border-divider\"\n  (click)=\"onPressChatItem(data().id)\"\n>\n  <!-- Avatar and User Info Section -->\n  <div class=\"ax-flex ax-min-w-0 ax-gap-4 ax-flex-1\">\n    <!-- Avatar with Online Status -->\n    <div class=\"ax-flex-shrink-0\">\n      @if (chatName().isPrivate) {\n        <axp-user-avatar [size]=\"48\" [userId]=\"chatName().id\"></axp-user-avatar>\n      } @else {\n        @if (isGroupAvatarLoading()) {\n          <div class=\"ax-w-12 ax-h-12 ax-rounded-full ax-flex ax-items-center ax-justify-center ax-bg-surface\">\n            <i class=\"fa-solid fa-spinner-third fa-spin\"></i>\n          </div>\n        } @else if (groupAvatarUrl()) {\n          <div\n            class=\"ax-w-12 ax-h-12 ax-rounded-full ax-bg-center ax-bg-cover\"\n            [style.backgroundImage]=\"'url(' + groupAvatarUrl() + ')'\"\n          ></div>\n        } @else {\n          <ax-avatar [size]=\"48\">\n            <ax-text class=\"ax-primary-lightest\">\n              <small class=\"ax-text-xs ax-font-semibold fas fa-users\"></small>\n            </ax-text>\n          </ax-avatar>\n        }\n      }\n      <!--Temp-->\n    </div>\n\n    <!-- User Details and Last Message -->\n    <div class=\"ax-flex ax-flex-col ax-min-w-0 ax-flex-1 ax-gap-1\">\n      <div class=\"ax-flex ax-items-center ax-justify-between ax-gap-2\">\n        <p class=\"ax-font-semibold ax-text-on-surface ax-truncate ax-py-1\" [title]=\"chatName().fullName\">\n          {{ chatName().fullName }}\n        </p>\n        <div class=\"ax-flex ax-items-center ax-gap-1\">\n          @if (messageSeenStatus()) {\n            <ax-icon class=\"ax-icon ax-text-success ax-size-5\" [class]=\"messageSeenStatus()\"></ax-icon>\n          }\n          @if (this.data().lastMessage) {\n            <span class=\"ax-text-xs ax-whitespace-nowrap\">\n              {{ formattedLastMessageDate() }}\n            </span>\n          }\n        </div>\n      </div>\n      <div class=\"ax-flex ax-items-center ax-justify-between ax-gap-2 ax-mt-1 ax-overflow-hidden\">\n        @if (typing()?.isTyping) {\n          <div class=\"ax-pb-1 ax-flex ax-justify-center ax-items-end ax-gap-1\">\n            <span class=\"ax-text-on-surface-light ax-font-semibold ax-capitalize ax-whitespace-nowrap ax-text-sm\">\n              @if (!chatName().isPrivate) {\n                {{ typing()?.user }}\n              }\n              {{ '@conversation:is-typing' | translate | async }}\n            </span>\n            <div class=\"typing-indicator\">\n              <span></span>\n              <span></span>\n              <span></span>\n            </div>\n          </div>\n        } @else {\n          <div class=\"ax-flex ax-items-center ax-gap-2 ax-text-sm ax-shrink ax-min-w-0\">\n            @if ((lastMessage().author?.fullName || lastMessage().author?.username) && !chatName().isPrivate) {\n              <span class=\"ax-text-on-surface-light ax-font-semibold ax-capitalize ax-whitespace-nowrap\">\n                {{ (lastMessage().author?.fullName || lastMessage().author?.username) + ': ' }}\n              </span>\n            }\n            @switch (lastMessage().contentType) {\n              @case ('image') {\n                <i class=\"fa-regular fa-image\"></i>\n              }\n              @case ('video') {\n                <i class=\"fa-regular fa-video\"></i>\n              }\n              @case ('file') {\n                <i class=\"fa-regular fa-file\"></i>\n              }\n              @case ('audio') {\n                <i class=\"fa-regular fa-microphone\"></i>\n              }\n              @case ('link') {\n                <i class=\"fa-regular fa-link\"></i>\n              }\n            }\n\n            <span class=\"ax-truncate ax-capitalize\">\n              {{ lastMessage().content }}\n            </span>\n          </div>\n        }\n        <div class=\"ax-flex ax-items-center ax-gap-2\">\n          @if (hasUnread()) {\n            <ax-badge color=\"primary\" [text]=\"unreadCount()\" class=\"ax-flex-shrink-0 ax-ml-auto\"></ax-badge>\n          }\n          <!-- @if (lastMessageReaction()) {\n            <div class=\"ax-flex ax-items-center ax-gap-1 ax-bg-surface ax-rounded-full ax-p-1 ax-px-2\">\n              <span class=\"ax-text-sm\">{{ lastMessageReaction() }}</span>\n              <span class=\"ax-text-xs\">{{ lastMessage().reactions.length }}</span>\n            </div>\n          } -->\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:block;width:100%}.typing-indicator{display:flex;align-items:center;padding-bottom:.4rem}.typing-indicator span{height:4px;width:4px;margin:0 1px;background-color:#9e9ea1;border-radius:50%;display:inline-block;animation:bounce 1.4s infinite ease-in-out both}.typing-indicator span:nth-child(1){animation-delay:-.32s}.typing-indicator span:nth-child(2){animation-delay:-.16s}@keyframes bounce{0%,80%,to{transform:scale(0)}40%{transform:scale(1)}}\n"] }]
-        }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], typing: [{ type: i0.Input, args: [{ isSignal: true, alias: "typing", required: false }] }], lastMessageReaction: [{ type: i0.Input, args: [{ isSignal: true, alias: "lastMessageReaction", required: false }] }], pressChatItem: [{ type: i0.Output, args: ["pressChatItem"] }] } });
-
-class AXMChatComponent extends AXPPageLayoutBaseComponent {
-    constructor() {
-        super(...arguments);
-        this.activatedRoute = inject(ActivatedRoute);
-        this.chatService = inject(AXMChatManagementService);
-        this.realtimeService = inject(AXMChatRealtimeService);
-        this.dialogService = inject(AXDialogService);
-        this.layoutBuilder = inject(AXPLayoutBuilderService);
-        this.router = inject(Router);
-        this.unsubscribe = inject(AXUnsubscriber);
-        this.notificationConnectorService = inject(AXMNotificationConnectorService);
-        this.dataSelectorService = inject(AXPEntityDataSelectorService);
-        this.entityRegistry = inject(AXPEntityDefinitionRegistryService);
-        // View Children
-        this.tab = viewChild('tab', ...(ngDevMode ? [{ debugName: "tab" }] : []));
-        this.container = viewChild('container', ...(ngDevMode ? [{ debugName: "container" }] : []));
-        this.chatContext = viewChild('chatContext', ...(ngDevMode ? [{ debugName: "chatContext" }] : []));
-        this.tabContext = viewChild('tabContext', ...(ngDevMode ? [{ debugName: "tabContext" }] : []));
-        // State signals
-        this.rooms = signal([], ...(ngDevMode ? [{ debugName: "rooms" }] : []));
-        this.allRooms = signal([], ...(ngDevMode ? [{ debugName: "allRooms" }] : []));
-        this.tabs = signal([], ...(ngDevMode ? [{ debugName: "tabs" }] : []));
-        this.selectedRoom = signal(null, ...(ngDevMode ? [{ debugName: "selectedRoom" }] : []));
-        this.isLoading = signal(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
-        this.typingStatus = signal({}, ...(ngDevMode ? [{ debugName: "typingStatus" }] : []));
-        this.error = signal(null, ...(ngDevMode ? [{ debugName: "error" }] : []));
-        this.activeTabIndex = signal(0, ...(ngDevMode ? [{ debugName: "activeTabIndex" }] : []));
-        this.isSearching = signal(false, ...(ngDevMode ? [{ debugName: "isSearching" }] : []));
-        this.searchQuery = signal('', ...(ngDevMode ? [{ debugName: "searchQuery" }] : []));
-        this.showSearch = signal(true, ...(ngDevMode ? [{ debugName: "showSearch" }] : []));
-        this.placeholder = signal('@conversation:search.placeholder', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
-        // Localized labels (preloaded for sync menu building)
-        this.tOpen = signal('Open', ...(ngDevMode ? [{ debugName: "tOpen" }] : []));
-        this.tMarkSeen = signal('Mark as seen', ...(ngDevMode ? [{ debugName: "tMarkSeen" }] : []));
-        this.tTab = signal('Tab', ...(ngDevMode ? [{ debugName: "tTab" }] : []));
-        this.tRemoveFromTab = signal('Remove from tab', ...(ngDevMode ? [{ debugName: "tRemoveFromTab" }] : []));
-        this.tDelete = signal('Delete', ...(ngDevMode ? [{ debugName: "tDelete" }] : []));
-        this.tRemoveChat = signal('Remove Chat', ...(ngDevMode ? [{ debugName: "tRemoveChat" }] : []));
-        // Computed signals
-        this.activeTab = computed(() => {
-            const tabs = this.tabs();
-            const index = this.activeTabIndex();
-            if (tabs.length > 0 && index >= 0 && index < tabs.length) {
-                return tabs[index];
-            }
-            return undefined;
-        }, ...(ngDevMode ? [{ debugName: "activeTab" }] : []));
-        this.filteredRooms = signal([], ...(ngDevMode ? [{ debugName: "filteredRooms" }] : []));
-        this.searchEffect = effect(() => {
-            const allRooms = this.allRooms();
-            let chatRooms = [...allRooms]; // Start with all rooms
-            // Tab filter
-            const activeTab = this.activeTab();
-            if (activeTab) {
-                if (activeTab.name === 'unread') {
-                    // Special local state for unread
-                    chatRooms = allRooms.filter((room) => room.unreadCount > 0);
-                }
-                else if (activeTab.name === 'all') {
-                    // Local state for all
-                    chatRooms = allRooms;
-                }
-                else {
-                    // For other tabs defined by the service
-                    const includedIds = new Set(activeTab.includeRooms.map((r) => r.id));
-                    chatRooms = allRooms.filter((room) => includedIds.has(room.id));
-                }
-            }
-            // Search filter (applies on top of tab filter)
-            const query = (this.searchQuery() || '').toLowerCase();
-            if (query) {
-                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 member = room.members[0];
-                            if (member) {
-                                roomName = member.fullName || '';
-                            }
-                        }
-                        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;
-            }
-            this.filteredRooms.set(chatRooms);
-        }, ...(ngDevMode ? [{ debugName: "searchEffect" }] : []));
-        this.unreadCount = computed(() => this.allRooms().filter((i) => i.unreadCount > 0).length, ...(ngDevMode ? [{ debugName: "unreadCount" }] : []));
-        this.allCount = computed(() => this.allRooms().length, ...(ngDevMode ? [{ debugName: "allCount" }] : []));
-        this.hasUnread = computed(() => this.allRooms().some((i) => i.unreadCount > 0), ...(ngDevMode ? [{ debugName: "hasUnread" }] : []));
-        this.totalCount = computed(() => this.allRooms().length || 0, ...(ngDevMode ? [{ debugName: "totalCount" }] : []));
-        // Context menus (desktop)
-        this.contextRoom = null;
-        this.contextTab = null;
-        this.contextTabIndex = -1;
-    }
-    async deleteTab(tab) {
-        const result = await this.dialogService.confirm(await this.translateService.translateAsync('@conversation:confirmations.delete-tab.title'), await this.translateService.translateAsync('@conversation:confirmations.delete-tab.message', {
-            params: { title: tab.title },
-        }));
-        if (result.result) {
-            await this.chatService.deleteTab(tab.id);
-            await this.loadTabs();
-        }
-    }
-    async ngOnInit() {
-        super.ngOnInit();
-        this.isLoading.set(true);
-        this.error.set(null);
-        const [openText, markSeenText, tabText, removeFromTabText, deleteText, removeChatText] = await Promise.all([
-            this.translateService.translateAsync('@conversation:actions.open'),
-            this.translateService.translateAsync('@conversation:actions.mark-seen'),
-            this.translateService.translateAsync('@conversation:actions.tab'),
-            this.translateService.translateAsync('@conversation:actions.remove-from-tab'),
-            this.translateService.translateAsync('@conversation:actions.delete'),
-            this.translateService.translateAsync('@conversation:remove-chat'),
-        ]);
-        this.tOpen.set(openText);
-        this.tMarkSeen.set(markSeenText);
-        this.tTab.set(tabText);
-        this.tRemoveFromTab.set(removeFromTabText);
-        this.tDelete.set(deleteText);
-        this.tRemoveChat.set(removeChatText);
-        await Promise.all([this.loadChats(), this.loadTabs()]);
-        this.isLoading.set(false);
-        //
-        this.router.events
-            .pipe(this.unsubscribe.takeUntilDestroy, filter((event) => event instanceof NavigationEnd), startWith(null))
-            .subscribe(async () => {
-            await this.loadFromRoute();
-        });
-        //
-        this.realtimeService.room$.pipe(this.unsubscribe.takeUntilDestroy).subscribe((event) => {
-            switch (event.type) {
-                case 'add':
-                    this.allRooms.update((rooms) => [event.payload, ...rooms.filter((r) => r.id !== event.payload.id)]);
-                    break;
-                case 'remove':
-                    this.allRooms.update((rooms) => rooms.filter((r) => r.id !== event.payload));
-                    if (event.payload === this.selectedRoom()?.id) {
-                        this.selectedRoom.set(null);
-                        this.router.navigate(['./'], { relativeTo: this.activatedRoute });
-                    }
-                    break;
-                case 'update':
-                    this.allRooms.update((rooms) => rooms.map((r) => (r.id === event.payload.id ? event.payload : r)));
-                    break;
-                case 'seen':
-                    this.allRooms.update((rooms) => rooms.map((room) => (room.id === event.payload ? { ...room, unreadCount: 0 } : room)));
-                    break;
-            }
-        });
-        this.realtimeService.message$.pipe(this.unsubscribe.takeUntilDestroy).subscribe((event) => {
-            switch (event.type) {
-                case 'add': {
-                    const message = event.payload;
-                    const rooms = this.allRooms();
-                    const roomIndex = rooms.findIndex((r) => r.id === message.roomId);
-                    if (roomIndex > -1) {
-                        const roomToUpdate = rooms[roomIndex];
-                        const isCurrentUser = message.author.id === this.sessionService.user?.id;
-                        const updatedRoom = {
-                            ...roomToUpdate,
-                            lastMessage: message,
-                            unreadCount: !isCurrentUser ? (roomToUpdate.unreadCount || 0) + 1 : roomToUpdate.unreadCount,
-                        };
-                        const newRooms = [updatedRoom, ...rooms.filter((r) => r.id !== message.roomId)];
-                        this.allRooms.set(newRooms);
-                        if (!isCurrentUser && (this.selectedRoom()?.id !== message.roomId || document.hidden)) {
-                            const notification = convertChatMessageToNotification(roomToUpdate, message, this.sessionService.user);
-                            this.notificationConnectorService.create({
-                                ...notification,
-                                id: message.id,
-                                entityName: 'notifications',
-                                createAt: new Date(),
-                            }, {
-                                onClick: () => {
-                                    this.router.navigate([roomToUpdate.id], { relativeTo: this.activatedRoute });
-                                },
-                                activeWindow: true,
-                            });
-                        }
-                    }
-                    else {
-                        this.chatService.getRoom(message.roomId).then((newRoom) => {
-                            this.allRooms.update((currentRooms) => [newRoom, ...currentRooms]);
-                        });
-                    }
-                    break;
-                }
-                case 'update': {
-                    const message = event.payload;
-                    this.allRooms.update((rooms) => {
-                        return rooms.map((room) => {
-                            if (room.lastMessage?.id === message.id) {
-                                return {
-                                    ...room,
-                                    lastMessage: {
-                                        ...room.lastMessage,
-                                        ...message,
-                                    },
-                                };
-                            }
-                            return room;
-                        });
-                    });
-                    break;
-                }
-            }
-        });
-        this.realtimeService.typingStatus$.pipe(this.unsubscribe.takeUntilDestroy).subscribe(async (status) => {
-            const currentUserId = this.sessionService.user?.id;
-            if (status.user.id !== currentUserId) {
-                if (status.isTyping) {
-                    this.typingStatus.update((value) => ({
-                        ...value,
-                        [status.roomId]: { user: status.user.fullName || '', isTyping: true },
-                    }));
-                }
-                else {
-                    this.typingStatus.update((value) => {
-                        const { [status.roomId]: _, ...rest } = value;
-                        return rest;
-                    });
-                }
-            }
-        });
-    }
-    async loadFromRoute() {
-        const chatId = this.activatedRoute.snapshot.firstChild?.paramMap.get('id');
-        if (chatId) {
-            this.openChat(chatId);
-        }
-        else {
-            this.selectedRoom.set(null);
-        }
-    }
-    // Page Interface Implementation
-    async getPageTitle() {
-        const room = this.selectedRoom();
-        if (!room && this.layoutService.isMobileDevice()) {
-            return await this.translateService.translateAsync('@conversation:plural-title');
-        }
-        if (!room) {
-            return '';
-        }
-        const { members, title, id } = room;
-        if (members.length > 1) {
-            return title || (await this.translateService.translateAsync('@conversation:labels.group-chat'));
-        }
-        const member = members[0];
-        if (!member) {
-            return await this.translateService.translateAsync('@conversation:labels.unknown-user');
-        }
-        return member.fullName || (await this.translateService.translateAsync('@conversation:labels.unknown-user'));
-    }
-    getPageDescription() {
-        const typing = this.typingStatus();
-        const selectedRoomId = this.selectedRoom()?.id;
-        if (selectedRoomId && typing[selectedRoomId]?.isTyping) {
-            return `${typing[selectedRoomId].user} is typing...`;
-        }
-        const room = this.selectedRoom();
-        return room?.topic || '';
-    }
-    async getBackButton() {
-        if (this.selectedRoom()) {
-            return {
-                title: await this.translateService.translateAsync('@conversation:back-to-chat-list'),
-            };
-        }
-        else
-            return null;
-    }
-    async getSecondaryMenuItems() {
-        const items = [];
-        const hasRoom = !!this.selectedRoom();
-        if (hasRoom) {
-            const room = this.selectedRoom();
-            const currentUserId = this.sessionService.user?.id;
-            const creatorId = room.auditInfo?.created?.by?.id;
-            const isCreator = !!currentUserId && !!creatorId && currentUserId === creatorId;
-            const isGroup = (room.members?.length ?? 0) > 1;
-            const isChannel = room.topic === 'channel';
-            const kindKey = isGroup ? '@conversation:labels.group-chat' : '@conversation:room.individual-title';
-            const kindText = await this.translateService.translateAsync(kindKey);
-            const deleteText = await this.translateService.translateAsync('@conversation:actions.delete');
-            const removeChatText = await this.translateService.translateAsync('@conversation:remove-chat');
-            items.push({
-                title: 'Edit Room',
-                icon: 'fa-light fa-pen-to-square',
-                command: { name: 'edit-room' },
-            }, {
-                title: isCreator ? `${deleteText} ${kindText}` : removeChatText,
-                icon: 'fa-light fa-trash-can',
-                color: 'danger',
-                command: { name: isCreator ? 'delete-room' : 'leave-room' },
-            });
-        }
-        return items;
-    }
-    async execute(command) {
-        switch (command.name) {
-            case 'remove-chat':
-                const response = await this.dialogService.confirm(await this.translateService.translateAsync('@conversation:confirmations.remove-chat.title'), await this.translateService.translateAsync('@conversation:confirmations.remove-chat.message'));
-                if (response.result) {
-                    await this.chatService.deleteRoom(this.selectedRoom()?.id);
-                    this.router.navigate(['./'], { relativeTo: this.activatedRoute });
-                }
-                break;
-            case 'edit-room': {
-                const room = await this.chatService.getRoom(this.selectedRoom()?.id);
-                if (!room)
-                    return;
-                const currentMemberIds = (room.members || []).map((m) => m.id);
-                const dialogRef = await this.layoutBuilder
-                    .create()
-                    .dialog(dialog => {
-                    dialog
-                        .setTitle('Edit Room')
-                        .setSize('sm')
-                        .setContext({ title: room.title || '', members: currentMemberIds, avatar: room.avatar })
-                        .content(layoutBuilder => {
-                        layoutBuilder.flex(flex => {
-                            flex
-                                .setDirection('column')
-                                .formField('@conversation:new-conversation.title.label', field => {
-                                field.path('title');
-                                field.textBox({ placeholder: '@conversation:new-conversation.title.placeholder' });
-                            })
-                                .formField('@conversation:new-conversation.lookup.label', field => {
-                                field.path('members');
-                                field.lookupBox({
-                                    entity: 'SecurityManagement.User',
-                                    multiple: true,
-                                    customFilter: {
-                                        field: 'id',
-                                        operator: { type: 'notEqual' },
-                                        value: this.sessionService.user?.id,
-                                    },
-                                });
-                            })
-                                .formField('Avatar', field => {
-                                field.path('avatar');
-                                field.customWidget('avatar', {});
-                            });
-                        });
-                    })
-                        .setActions(actions => {
-                        actions.cancel('@general:actions.cancel.title').submit('Save');
-                    });
-                })
-                    .show();
-                const ctx = dialogRef.context();
-                const action = dialogRef.action();
-                dialogRef.close();
-                if (action === 'cancel')
-                    return;
-                const selectedIds = Array.isArray(ctx.members) ? ctx.members : [];
-                const toAdd = selectedIds.filter((id) => !currentMemberIds.includes(id));
-                const toRemove = currentMemberIds.filter((id) => !selectedIds.includes(id));
-                const trimmedTitle = typeof ctx.title === 'string' ? ctx.title.trim() : undefined;
-                const titleChanged = typeof trimmedTitle === 'string' && trimmedTitle !== (room.title || '').trim();
-                const avatarChanged = (ctx.avatar ?? null) !== (room.avatar ?? null);
-                const updatePayload = {};
-                if (titleChanged) {
-                    updatePayload.title = trimmedTitle;
-                }
-                if (avatarChanged) {
-                    updatePayload.avatar = ctx.avatar ?? null;
-                }
-                const ops = [];
-                if (Object.keys(updatePayload).length > 0) {
-                    ops.push(this.chatService.updateRoom(room.id, updatePayload));
-                }
-                toAdd.forEach((id) => ops.push(this.chatService.addParticipant(room.id, id)));
-                toRemove.forEach((id) => ops.push(this.chatService.removeParticipant(room.id, id)));
-                try {
-                    if (ops.length) {
-                        await Promise.all(ops);
-                        await this.loadChats();
-                    }
-                }
-                catch (e) {
-                    this.toastService.danger('Failed to update room');
-                }
-                break;
-            }
-            case 'delete-room': {
-                const room = this.selectedRoom();
-                if (!room)
-                    return;
-                const response = await this.dialogService.confirm(await this.translateService.translateAsync('@conversation:confirmations.delete-room.title'), await this.translateService.translateAsync('@conversation:confirmations.delete-room.message'));
-                if (response.result) {
-                    await this.chatService.deleteRoom(room.id);
-                    this.router.navigate(['./'], { relativeTo: this.activatedRoute });
-                }
-                break;
-            }
-            case 'leave-room': {
-                const room = this.selectedRoom();
-                if (!room)
-                    return;
-                const currentUserId = this.sessionService.user?.id;
-                const response = await this.dialogService.confirm(await this.translateService.translateAsync('@conversation:confirmations.remove-chat.title'), await this.translateService.translateAsync('@conversation:confirmations.remove-chat.message'));
-                if (response.result) {
-                    await this.chatService.removeParticipant(room.id, currentUserId);
-                    this.router.navigate(['./'], { relativeTo: this.activatedRoute });
-                }
-                break;
-            }
-        }
-    }
-    onBackButtonClick() {
-        this.selectedRoom.set(null);
-        this.typingStatus.update((value) => {
-            const { [this.selectedRoom()?.id]: _, ...rest } = value;
-            return rest;
-        });
-        this.router.navigate(['./'], { relativeTo: this.activatedRoute });
-    }
-    // Methods
-    getRoomCountForTab(tab) {
-        const allRooms = this.allRooms();
-        // For all tab types, only count rooms that have unread messages
-        if (tab.name === 'all' || tab.name === 'unread') {
-            return allRooms.filter((room) => room.unreadCount > 0).length;
-        }
-        const includedIds = new Set(tab.includeRooms.map((r) => r.id));
-        return allRooms.filter((room) => includedIds.has(room.id) && room.unreadCount > 0).length;
-    }
-    async loadTabs() {
-        const localTabs = [
-            {
-                id: 'all-local',
-                name: 'all',
-                title: 'All',
-                excludeRooms: [],
-                includeRooms: [],
-            },
-            {
-                id: 'unread-local',
-                name: 'unread',
-                title: 'Unread',
-                excludeRooms: [],
-                includeRooms: [],
-            },
-        ];
-        try {
-            const result = await this.chatService.listTabs();
-            this.tabs.set([...localTabs, ...result.items]);
-        }
-        catch (error) {
-            console.error('Failed to load tabs:', error);
-            this.tabs.set(localTabs);
-        }
-    }
-    async loadChats() {
-        try {
-            // Use the updated service method to get rooms with last messages
-            const response = await this.chatService.listRooms();
-            // Sort rooms by last message created.at timestamp in descending order
-            const sortedRooms = response.items.sort((a, b) => {
-                const dateA = a.lastMessage?.auditInfo?.created?.at || a.auditInfo?.created?.at || 0;
-                const dateB = b.lastMessage?.auditInfo?.created?.at || b.auditInfo?.created?.at || 0;
-                return new Date(dateB).getTime() - new Date(dateA).getTime();
-            });
-            this.allRooms.set(sortedRooms);
-            this.rooms.set(sortedRooms);
-        }
-        catch (error) {
-            this.error.set('Failed to load chats. Please try again.');
-            console.error('Error loading chats:', error);
-        }
-    }
-    async refreshChat() {
-        await this.loadChats();
-    }
-    async openChat(chatId) {
-        try {
-            this.typingStatus.update((value) => {
-                const { [chatId]: _, ...rest } = value;
-                return rest;
-            });
-            // Use the service method to mark chat as read
-            await this.chatService.markRoomSeen(chatId);
-            // Update local state without making another network request
-            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.activatedRoute });
-        }
-        catch (error) {
-            console.error('Failed to mark chat as read:', error);
-        }
-    }
-    searchChat(query) {
-        this.searchQuery.set(query);
-        this.isSearching.set(!!query);
-    }
-    // Header methods
-    onSearch(query) {
-        this.searchChat(query);
-    }
-    clearSearch() {
-        this.searchQuery.set('');
-        this.isSearching.set(false);
-    }
-    async openSelector() {
-        try {
-            const entity = await this.entityRegistry.resolve('SecurityManagement', 'User');
-            const result = await this.dataSelectorService.open({
-                entity,
-                title: 'Select Users',
-                allowMultiple: true,
-                columns: ['username', 'displayName', 'roleIds'],
-                filters: {
-                    field: 'id',
-                    operator: { type: 'equal' },
-                    // value: this.sessionService.user?.id,
-                    value: '{{ session.currentUser().id }}',
+    goBackToList() {
+        this.mobileView.set('list');
+    }
+    isMobile() {
+        return window.innerWidth < 768;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXMChatComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.12", type: AXMChatComponent, isStandalone: true, selector: "axm-chat", providers: [
+            ...provideConversation({
+                userApi: AXIndexedDBUserApi,
+                conversationApi: AXIndexedDBConversationApi,
+                messageApi: AXIndexedDBMessageAIApi,
+                realtimeApi: AXIndexedDBRealtimeApi,
+                config: {},
+                registry: {
+                    messageRenderers: [
+                        AX_CONVERSATION_TEXT_RENDERER,
+                        AX_CONVERSATION_IMAGE_RENDERER,
+                        AX_CONVERSATION_VIDEO_RENDERER,
+                        AX_CONVERSATION_AUDIO_RENDERER,
+                        AX_CONVERSATION_VOICE_RENDERER,
+                        AX_CONVERSATION_FILE_RENDERER,
+                        AX_CONVERSATION_LOCATION_RENDERER,
+                        AX_CONVERSATION_STICKER_RENDERER,
+                        AX_CONVERSATION_CONTACT_RENDERER,
+                    ],
+                    messageActions: [
+                        AX_CONVERSATION_MESSAGE_REPLY_ACTION,
+                        AX_CONVERSATION_MESSAGE_FORWARD_ACTION,
+                        AX_CONVERSATION_MESSAGE_EDIT_ACTION,
+                        AX_CONVERSATION_MESSAGE_DELETE_ACTION,
+                    ],
+                    composerActions: [
+                        AX_CONVERSATION_COMPOSER_EMOJI_ACTION,
+                        AX_CONVERSATION_COMPOSER_IMAGE_ACTION,
+                        AX_CONVERSATION_COMPOSER_VIDEO_ACTION,
+                        AX_CONVERSATION_COMPOSER_FILE_ACTION,
+                        AX_CONVERSATION_COMPOSER_VOICE_RECORDING_ACTION,
+                        AX_CONVERSATION_COMPOSER_AUDIO_ACTION,
+                        AX_CONVERSATION_COMPOSER_CONTACT_ACTION,
+                        AX_CONVERSATION_COMPOSER_LOCATION_ACTION,
+                    ],
+                    composerTabs: [AX_CONVERSATION_COMPOSER_EMOJI_TAB, AX_CONVERSATION_COMPOSER_STICKER_TAB],
+                    conversationTabs: [
+                        AX_CONVERSATION_TAB_ALL,
+                        AX_CONVERSATION_TAB_PRIVATE,
+                        AX_CONVERSATION_TAB_GROUPS,
+                        AX_CONVERSATION_TAB_CHANNELS,
+                        AX_CONVERSATION_TAB_UNREAD,
+                        AX_CONVERSATION_TAB_ARCHIVED,
+                    ],
+                    infoBarActions: [
+                        AX_CONVERSATION_INFO_BAR_SEARCH_ACTION,
+                        AX_CONVERSATION_INFO_BAR_INFO_ACTION,
+                        AX_CONVERSATION_INFO_BAR_MUTE_ACTION,
+                        AX_CONVERSATION_INFO_BAR_DIVIDER,
+                        AX_CONVERSATION_INFO_BAR_DELETE_ACTION,
+                        AX_CONVERSATION_INFO_BAR_BLOCK_ACTION,
+                    ],
+                    conversationItemActions: [
+                        AX_CONVERSATION_ITEM_MUTE_ACTION,
+                        AX_CONVERSATION_ITEM_PIN_ACTION,
+                        AX_CONVERSATION_ITEM_MARK_READ_ACTION,
+                        AX_CONVERSATION_ITEM_DIVIDER,
+                        AX_CONVERSATION_ITEM_DELETE_ACTION,
+                        AX_CONVERSATION_ITEM_BLOCK_ACTION,
+                    ],
                 },
-            });
-            return Array.isArray(result?.items)
-                ? result.items
-                    .map((u) => u?.id)
-                    .filter((id) => typeof id === 'string' && id.length > 0)
-                : [];
-        }
-        catch {
-            return [];
-        }
-    }
-    // Footer methods
-    async onNewConversation() {
-        const preselectedUserIds = await this.openSelector();
-        if (!preselectedUserIds.length) {
-            return;
-        }
-        let members = preselectedUserIds;
-        let title;
-        let avatar;
-        if (preselectedUserIds.length > 1) {
-            const dialogRef = await this.layoutBuilder
-                .create()
-                .dialog(dialog => {
-                dialog
-                    .setTitle('@conversation:new-conversation.header')
-                    .setSize('sm')
-                    .setContext({ lookup: preselectedUserIds, title: '', avatar: null })
-                    .content(layoutBuilder => {
-                    layoutBuilder.flex(flex => {
-                        flex
-                            .setDirection('column')
-                            .formField('@conversation:new-conversation.lookup.label', field => {
-                            field.path('lookup');
-                            field.lookupBox({ entity: 'SecurityManagement.User', multiple: true });
-                        })
-                            .formField('@conversation:new-conversation.title.label', field => {
-                            field.path('title');
-                            field.visible(`{{!(context.eval('lookup')?.length > 1) }}`);
-                            field.textBox({
-                                placeholder: '@conversation:new-conversation.title.placeholder',
-                            });
-                        })
-                            .formField('Avatar', field => {
-                            field.path('avatar');
-                            field.customWidget('avatar', { refId: 'group', refType: 'group' });
-                        });
-                    });
-                })
-                    .setActions(actions => {
-                    actions.cancel('@general:actions.cancel.title').submit('@conversation:new-conversation.actions.accept-send');
-                });
-            })
-                .show();
-            const ctx = dialogRef.context();
-            const action = dialogRef.action();
-            dialogRef.close();
-            const selected = ctx?.lookup ?? [];
-            if (action === 'cancel' || !selected.length) {
-                return;
-            }
-            members = selected;
-            title = ctx?.title;
-            avatar = ctx?.avatar;
-        }
-        try {
-            const res = await this.chatService.createRoom(members, title, avatar || undefined);
-            await this.refreshChat();
-            this.router.navigate([res.id], { relativeTo: this.activatedRoute });
-        }
-        catch (error) {
-            this.toastService.danger('Failed to create room');
-        }
-    }
-    // Sliding item actions (mobile)
-    onSlideAction(room, action) {
-        switch (action) {
-            // case 'mute':
-            //   this.toastService.warning('Mute not implemented yet');
-            //   break;
-            case 'delete':
-                this.deleteRoom(room.id);
-                break;
-        }
-    }
-    async deleteRoom(roomId) {
-        try {
-            const dialogResult = await this.dialogService.confirm('Delete Room', 'Are you sure you want to delete Room?', 'danger', 'horizontal');
-            if (dialogResult.result) {
-                this.chatService.deleteRoom(roomId);
-            }
-        }
-        catch (error) {
-            console.error(`Error Deleting Room with Room id: ${roomId}`, error);
-        }
-    }
-    openContextMenu(ev, room) {
-        ev.preventDefault();
-        this.contextRoom = room;
-        this.chatContext()?.showAt({ x: ev.clientX, y: ev.clientY });
-    }
-    openTabContextMenu(ev, tab, index) {
-        ev.preventDefault();
-        this.contextTab = tab;
-        this.contextTabIndex = index;
-        this.tabContext()?.showAt({ x: ev.clientX, y: ev.clientY });
-    }
-    onContextOpening(e) {
-        const items = [];
-        // General Items
-        items.push({ name: 'open', text: this.tOpen(), icon: 'fa-light fa-message-lines' });
-        // Resolve context room once
-        const contextRoom = this.contextRoom;
-        // Mark as seen (only if the room has unread messages)
-        if (contextRoom && (contextRoom.unreadCount || 0) > 0) {
-            items.push({ name: 'mark-seen', text: this.tMarkSeen(), icon: 'fa-light fa-envelope-open' });
-        }
-        // Tab submenu behavior (Telegram-like)
-        const allTabs = this.tabs();
-        const activeTab = this.activeTab();
-        const customTabs = allTabs.filter((t) => t.name !== 'all' && t.name !== 'unread');
-        if (contextRoom && customTabs.length > 0) {
-            if (activeTab?.name === 'all') {
-                const tabMenuItems = customTabs.map((t) => {
-                    const isIncluded = (t.includeRooms || []).some((r) => r.id === contextRoom.id);
-                    return {
-                        name: `tab.toggle:${t.id}`,
-                        text: t.title,
-                        icon: isIncluded ? 'fa-light fa-check' : undefined,
-                    };
-                });
-                items.push({ name: 'tab', text: this.tTab(), icon: 'fa-light fa-folder-tree', items: tabMenuItems });
-            }
-            else if (activeTab?.name === 'unread') {
-                // No tab submenu in unread
-            }
-            else {
-                // Only remove from current custom tab
-                items.push({
-                    name: 'tab.remove-current',
-                    text: this.tRemoveFromTab(),
-                    icon: 'fa-light fa-square-minus',
-                    color: 'warning',
-                });
-            }
-        }
-        // Dangerous action at the end
-        if (contextRoom) {
-            const currentUserId = this.sessionService.user?.id;
-            const creatorId = contextRoom.auditInfo?.created?.by?.id;
-            const isCreator = !!currentUserId && !!creatorId && currentUserId === creatorId;
-            const text = isCreator ? this.tDelete() : this.tRemoveChat();
-            const name = isCreator ? 'delete-room' : 'leave-room';
-            items.push({ name, text, icon: 'fa-light fa-trash-can', color: 'danger' });
-        }
-        e.items = items;
-    }
-    // Tab header context menu (synchronous build)
-    onTabContextOpening(e) {
-        const items = [];
-        const tab = this.contextTab;
-        if (!tab) {
-            e.items = items;
-            return;
-        }
-        if (tab.name === 'all' || tab.name === 'unread') {
-            items.push({ name: 'tab.add', text: 'Add tab', icon: 'fa-light fa-square-plus' });
-        }
-        else {
-            items.push({ name: 'tab.remove', text: 'Remove tab', icon: 'fa-light fa-trash-can', color: 'danger' });
-        }
-        e.items = items;
-    }
-    async onTabContextItemClick(e) {
-        if (!this.contextTab)
-            return;
-        switch (e.item.name) {
-            case 'tab.add': {
-                // Build dialog for creating a new custom tab
-                const rooms = this.allRooms();
-                const roomOptions = rooms.map((r) => ({
-                    id: r.id,
-                    title: (r.members?.length ?? 0) > 1 ? r.title || '' : r.members?.[0]?.fullName || '',
-                }));
-                const dialogRef = await this.layoutBuilder
-                    .create()
-                    .dialog(dialog => {
-                    dialog
-                        .setTitle('New Tab')
-                        .setSize('sm')
-                        .setContext({ title: '', rooms: [] })
-                        .content(layoutBuilder => {
-                        layoutBuilder.flex(flex => {
-                            flex
-                                .setDirection('column')
-                                .formField('Title', field => {
-                                field.path('title');
-                                field.textBox({ placeholder: 'Enter tab title' });
-                            })
-                                .formField('Chats', field => {
-                                field.path('rooms');
-                                field.selectBox({ valueField: 'id', textField: 'title', dataSource: roomOptions, multiple: true });
-                            });
-                        });
-                    })
-                        .setActions(actions => {
-                        actions.cancel('Cancel').submit('Create');
-                    });
-                })
-                    .show();
-                const action = dialogRef.action();
-                const ctx = dialogRef.context();
-                dialogRef.close();
-                if (action === 'cancel' || !ctx?.title)
-                    return;
-                try {
-                    const name = ctx.title.trim().toLowerCase().replace(/\s+/g, '-').slice(0, 64);
-                    const selected = Array.isArray(ctx.rooms) ? ctx.rooms : [];
-                    const selectedIds = selected
-                        .map((v) => (typeof v === 'string' ? v : v?.id))
-                        .filter((v) => typeof v === 'string' && v.length > 0);
-                    const includeRooms = rooms.filter((r) => selectedIds.includes(r.id));
-                    await this.chatService.createTab({ name, title: ctx.title.trim(), includeRooms, excludeRooms: [] });
-                    await this.loadTabs();
-                }
-                catch (err) {
-                    console.error('Failed to create tab', err);
-                }
-                break;
-            }
-            case 'tab.remove': {
-                await this.deleteTab(this.contextTab);
-                break;
-            }
-        }
-        // (this.tab() as any).setIndicatorPosition(this.activeTab());
-    }
-    onContextItemClick(e) {
-        if (!this.contextRoom)
-            return;
-        const roomId = this.contextRoom.id;
-        switch (e.item.name) {
-            case 'open':
-                this.openChat(roomId);
-                break;
-            case 'mark-seen':
-                this.chatService
-                    .markRoomSeen(roomId)
-                    .catch(async () => this.toastService.danger(await this.translateService.translateAsync('@conversation:messages.mark-seen-failed')));
-                break;
-            // case 'mute':
-            //   this.toastService.warning('Mute not implemented yet');
-            //   break;
-            default: {
-                // Toggle tab inclusion: names are in the form 'tab.toggle:<tabId>'
-                if (typeof e.item.name === 'string' && e.item.name.startsWith('tab.toggle:')) {
-                    const tabId = e.item.name.split(':')[1];
-                    const currentTabs = this.tabs();
-                    const foundTab = currentTabs.find((t) => t.id === tabId);
-                    if (!foundTab) {
-                        this.toastService.danger('@conversation:messages.tab-not-found');
-                        return;
-                    }
-                    const isIncluded = (foundTab.includeRooms || []).some((r) => r.id === roomId);
-                    const op = isIncluded
-                        ? this.chatService.removeIncludeRoomFromTab(tabId, roomId)
-                        : this.chatService.addIncludeRoomToTab(tabId, roomId);
-                    op.then(async (updatedTab) => {
-                        this.tabs.update((tabs) => tabs.map((t) => (t.id === updatedTab.id ? updatedTab : t)));
-                        this.toastService.success(await this.translateService.translateAsync(isIncluded ? '@conversation:messages.tab-removed' : '@conversation:messages.tab-added'));
-                    }).catch(async () => this.toastService.danger(await this.translateService.translateAsync('@conversation:messages.tab-update-failed')));
-                    return;
-                }
-                break;
-            }
-            case 'tab.remove-current': {
-                const at = this.activeTab();
-                if (!at || at.name === 'all' || at.name === 'unread') {
-                    return;
-                }
-                this.chatService
-                    .removeIncludeRoomFromTab(at.id, roomId)
-                    .then(async (updatedTab) => {
-                    this.tabs.update((tabs) => tabs.map((t) => (t.id === updatedTab.id ? updatedTab : t)));
-                    this.toastService.success(await this.translateService.translateAsync('@conversation:messages.tab-removed'));
-                })
-                    .catch(async () => this.toastService.danger(await this.translateService.translateAsync('@conversation:messages.tab-remove-failed')));
-                break;
-            }
-            case 'delete-room':
-                this.deleteRoom(roomId);
-                break;
-            case 'leave-room': {
-                const currentUserId = this.sessionService.user?.id;
-                this.chatService
-                    .removeParticipant(roomId, currentUserId)
-                    .then(() => {
-                    if (this.selectedRoom()?.id === roomId) {
-                        this.router.navigate(['./'], { relativeTo: this.activatedRoute });
-                    }
-                })
-                    .catch(async () => this.toastService.danger('Failed to leave'));
-                break;
-            }
-        }
-    }
-    onKeydownHandler(event) {
-        if (this.selectedRoom()) {
-            this.onBackButtonClick();
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXMChatComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: AXMChatComponent, isStandalone: true, selector: "axm-chat", host: { listeners: { "document:keydown.escape": "onKeydownHandler($event)" } }, providers: [
-            {
-                provide: AXPPageLayoutBase,
-                useExisting: AXMChatComponent,
-            },
-            AXUnsubscriber,
-        ], viewQueries: [{ propertyName: "tab", first: true, predicate: ["tab"], descendants: true, isSignal: true }, { propertyName: "container", first: true, predicate: ["container"], descendants: true, isSignal: true }, { propertyName: "chatContext", first: true, predicate: ["chatContext"], descendants: true, isSignal: true }, { propertyName: "tabContext", first: true, predicate: ["tabContext"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<axp-page-layout #container>\n  <axp-layout-start-side class=\"ax-border-e ax-lightest-surface ax-h-full\">\n    <axp-layout-header>\n      <axp-layout-title>{{ '@conversation:module-name' | translate | async }}</axp-layout-title>\n      <axp-layout-toolbar>\n        <ax-search-box\n          #searchInput\n          look=\"solid\"\n          [placeholder]=\"'@conversation:search.placeholder' | translate | async\"\n          [value]=\"searchQuery()\"\n          (onValueChanged)=\"onSearch($event.value)\"\n          class=\"ax-w-full\"\n        >\n          <ax-clear-button></ax-clear-button>\n        </ax-search-box>\n      </axp-layout-toolbar>\n    </axp-layout-header>\n    <axp-layout-content class=\"ax-flex ax-flex-col ax-min-h-0 ax-max-w-80\">\n      @if (!layoutService.isMobileDevice()) {\n        <ng-container [ngTemplateOutlet]=\"template\"></ng-container>\n      }\n    </axp-layout-content>\n  </axp-layout-start-side>\n\n  <axp-page-content\n    style=\"height: calc(100vh - 22rem)\"\n    [style.padding]=\"layoutService.isMobileDevice() ? '1rem !important' : '0 !important'\"\n  >\n    @if (selectedRoom()) {\n      <router-outlet></router-outlet>\n    } @else if (layoutService.isMobileDevice()) {\n      <ax-search-box\n        #searchInput\n        look=\"solid\"\n        [placeholder]=\"'@conversation:search.placeholder' | translate | async\"\n        [value]=\"searchQuery()\"\n        (onValueChanged)=\"onSearch($event.value)\"\n        class=\"ax-w-full ax-mb-2\"\n      >\n        <ax-clear-button></ax-clear-button>\n      </ax-search-box>\n      <ng-container [ngTemplateOutlet]=\"template\"></ng-container>\n    }\n  </axp-page-content>\n</axp-page-layout>\n<ng-template #template>\n  <!-- Tabs -->\n  <div [class]=\"!layoutService.isMobileDevice() ? 'ax-px-4' : ''\">\n    <ax-tabs\n      #tab\n      class=\"ax-text-neutral-400 !ax-overflow-x-hidden\"\n      [look]=\"'with-line'\"\n      [location]=\"'bottom'\"\n      [fitParent]=\"true\"\n      (onActiveTabChanged)=\"activeTabIndex.set($event.index)\"\n    >\n      @for (tab of tabs(); track tab.id; let i = $index) {\n        <ax-tab-item\n          [text]=\"tab.title\"\n          [active]=\"activeTabIndex() === i\"\n          (contextmenu)=\"openTabContextMenu($event, tab, i)\"\n        >\n          @if (getRoomCountForTab(tab) > 0) {\n            <ax-suffix>\n              <ax-badge\n                [text]=\"getRoomCountForTab(tab).toString()\"\n                [color]=\"activeTabIndex() === i ? 'primary' : 'secondary'\"\n                class=\"ax-min-w-[1.5rem] ax-justify-center\"\n              ></ax-badge>\n            </ax-suffix>\n          }\n        </ax-tab-item>\n      }\n    </ax-tabs>\n  </div>\n\n  <!-- Chat List Content -->\n  <div\n    class=\"ax-flex-1 ax-overflow-hidden ax-flex ax-flex-col ax-justify-between ax-min-w-80\"\n    [class.ax-border-t]=\"tabs().length > 0\"\n  >\n    <!-- Loading State -->\n    @if (isLoading()) {\n      <div class=\"ax-p-4 ax-space-y-4\">\n        @for (_ of [1, 2, 3, 4, 5, 6]; track $index) {\n          <div class=\"ax-flex ax-items-center ax-space-x-3\">\n            <ax-skeleton [animated]=\"true\" class=\"ax-w-12 ax-h-12 ax-rounded-full\"></ax-skeleton>\n            <div class=\"ax-flex-1 ax-space-y-2\">\n              <ax-skeleton [animated]=\"true\" class=\"ax-w-3/4 ax-h-4 ax-rounded-md\"></ax-skeleton>\n              <ax-skeleton [animated]=\"true\" class=\"ax-w-1/2 ax-h-3 ax-rounded-md\"></ax-skeleton>\n            </div>\n          </div>\n        }\n      </div>\n    } @else if (error()) {\n      <axp-state-message\n        mode=\"error\"\n        icon=\"fa-light fa-circle-exclamation\"\n        [title]=\"'@conversation:chat-error'\"\n        [description]=\"error() || '@conversation:state-message.error.description'\"\n      >\n        <ax-button\n          slot=\"actions\"\n          [text]=\"'@conversation:try-again' | translate | async\"\n          color=\"primary\"\n          (onClick)=\"refreshChat()\"\n        ></ax-button>\n      </axp-state-message>\n    } @else {\n      <div class=\"ax-flex-1 ax-overflow-y-auto ax-pt-1\">\n        @for (i of filteredRooms(); track i.id) {\n          @if (layoutService.isMobileDevice()) {\n            <ax-sliding-item class=\"ax-h-20\">\n              <ax-content class=\"!ax-p-0\">\n                <axm-chat-item\n                  [data]=\"i\"\n                  [typing]=\"$any(typingStatus()[i.id])\"\n                  [lastMessageReaction]=\"i.lastMessage?.reactions?.[0]?.type ?? null\"\n                  [attr.data-id]=\"i.id\"\n                  (click)=\"openChat(i.id)\"\n                  [class.ax-bg-dark]=\"selectedRoom()?.id === i.id\"\n                  class=\"ax-transition-all ax-duration-100 hover:ax-bg-surface ax-block\"\n                  [@fadeIn]\n                  tabindex=\"0\"\n                  (keydown.enter)=\"openChat(i.id)\"\n                  role=\"button\"\n                  (contextmenu)=\"openContextMenu($event, i)\"\n                ></axm-chat-item>\n              </ax-content>\n\n              <!-- <ax-sliding-item-suffix (onClick)=\"onSlideAction(i, 'mute')\" color=\"warning\">\n          <ax-icon class=\"fa-light fa-bell-slash fa-lg\"></ax-icon>\n        </ax-sliding-item-suffix> -->\n              <ax-sliding-item-suffix (onClick)=\"onSlideAction(i, 'delete')\" color=\"danger\">\n                <ax-icon class=\"fa-light fa-trash-can fa-lg\"></ax-icon>\n              </ax-sliding-item-suffix>\n            </ax-sliding-item>\n          } @else {\n            <axm-chat-item\n              [data]=\"i\"\n              [typing]=\"$any(typingStatus()[i.id])\"\n              [lastMessageReaction]=\"i.lastMessage?.reactions?.[0]?.type ?? null\"\n              [attr.data-id]=\"i.id\"\n              (click)=\"openChat(i.id)\"\n              [class.ax-bg-dark]=\"selectedRoom()?.id === i.id\"\n              class=\"ax-transition-all ax-duration-100 hover:ax-bg-surface\"\n              [@fadeIn]\n              tabindex=\"0\"\n              (keydown.enter)=\"openChat(i.id)\"\n              role=\"button\"\n              (contextmenu)=\"openContextMenu($event, i)\"\n            ></axm-chat-item>\n          }\n        } @empty {\n          <axp-state-message\n            icon=\"fa-light fa-comments\"\n            [title]=\"'@conversation:no-chats-found.title'\"\n            [description]=\"'@conversation:no-chats-found.description'\"\n          >\n          </axp-state-message>\n        }\n      </div>\n    }\n\n    <!-- Footer Content -->\n    @if (!layoutService.isMobileDevice()) {\n      <div class=\"ax-border-t ax-border-divider ax-bg-lightest ax-p-4\">\n        <ax-button\n          class=\"ax-w-full\"\n          color=\"primary\"\n          [text]=\"'@conversation:new-conversation.button' | translate | async\"\n          (onClick)=\"onNewConversation()\"\n        >\n          <ax-prefix>\n            <ax-icon>\n              <i class=\"fa-solid fa-plus\"></i>\n            </ax-icon>\n          </ax-prefix>\n        </ax-button>\n      </div>\n    } @else {\n      <ax-button\n        class=\"ax-fixed ax-bottom-16 ax-right-8 !ax-rounded-full !ax-w-14 !ax-h-14 ax-shadow-lg\"\n        color=\"primary\"\n        (onClick)=\"onNewConversation()\"\n      >\n        <ax-icon class=\"ax-text-2xl\">\n          <i class=\"fa-solid fa-plus\"></i>\n        </ax-icon>\n      </ax-button>\n    }\n  </div>\n</ng-template>\n\n<ax-context-menu\n  #chatContext\n  [openOn]=\"'click'\"\n  [closeOn]=\"'click'\"\n  [orientation]=\"'vertical'\"\n  (onOpening)=\"onContextOpening($event)\"\n  (onItemClick)=\"onContextItemClick($event)\"\n></ax-context-menu>\n\n<ax-context-menu\n  #tabContext\n  [openOn]=\"'click'\"\n  [closeOn]=\"'click'\"\n  [orientation]=\"'vertical'\"\n  (onOpening)=\"onTabContextOpening($event)\"\n  (onItemClick)=\"onTabContextItemClick($event)\"\n></ax-context-menu>\n", styles: [""], dependencies: [{ kind: "component", type: AXMChatItemComponent, selector: "axm-chat-item", inputs: ["data", "typing", "lastMessageReaction"], outputs: ["pressChatItem"] }, { kind: "ngmodule", type: 
-                // Common Modules
-                CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i2$1.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: "ngmodule", type: 
-                // Acorex Component Modules
-                // AXResizableDirective,
-                AXImageModule }, { kind: "ngmodule", type: AXAvatarModule }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i2.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "ngmodule", type: AXSlidingItemModule }, { kind: "component", type: i4$1.AXSlidingItemComponent, selector: "ax-sliding-item" }, { kind: "component", type: i4$1.AXSlidingItemSuffixComponent, selector: "ax-sliding-item-suffix", inputs: ["color", "text"], outputs: ["onClick"] }, { 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.AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type", "autoSearch"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXTabsModule }, { 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: "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: i9.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" }, { kind: "component", type: AXContextMenuComponent, selector: "ax-context-menu", inputs: ["orientation", "openOn", "closeOn", "items", "target"], outputs: ["onItemClick", "onOpening"] }, { kind: "component", type: AXPStateMessageComponent, selector: "axp-state-message", inputs: ["mode", "icon", "title", "description", "variant"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.AXTranslatorPipe, name: "translate" }], animations: [
-            trigger('fadeIn', [
-                transition(':enter', [
-                    style({ opacity: 0, transform: 'translateY(10px)' }),
-                    animate('300ms ease-out', style({ opacity: 1, transform: 'translateY(0)' })),
-                ]),
-            ]),
-        ], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+            }),
+        ], ngImport: i0, template: "<axp-page-layout #container axConversationContainer>\n  <axp-layout-start-side class=\"ax-border-e ax-lightest-surface ax-h-full\">\n    <axp-layout-header> </axp-layout-header>\n    <axp-layout-content class=\"ax-flex ax-flex-col ax-min-h-0 ax-max-w-80\">\n      <div class=\"ax-h-full ax-flex ax-flex-col ax-shrink-0 md:ax-flex\" [class.ax-hidden]=\"mobileView() === 'chat'\">\n        <ax-conversation-sidebar></ax-conversation-sidebar>\n      </div>\n    </axp-layout-content>\n  </axp-layout-start-side>\n  <axp-page-header> </axp-page-header>\n\n  <axp-page-content class=\"ax-h-full ax-overflow-hidden ax-p-0\">\n    <ax-conversation-info-bar>\n      <ax-prefix>\n        <ax-button look=\"blank\" class=\"md:ax-hidden\" (onClick)=\"goBackToList()\">\n          <ax-icon icon=\"fa-solid fa-arrow-left\"></ax-icon>\n        </ax-button>\n      </ax-prefix>\n    </ax-conversation-info-bar>\n    <ax-conversation-message-list class=\"ax-flex-1 ax-overflow-hidden\"></ax-conversation-message-list>\n  </axp-page-content>\n\n  <axp-page-footer class=\"ax-block\">\n    <ax-conversation-composer></ax-conversation-composer>\n  </axp-page-footer>\n</axp-page-layout>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: AXConversationContainerDirective, selector: "[axConversationContainer]" }, { kind: "component", type: AXSidebarComponent, selector: "ax-conversation-sidebar", outputs: ["conversationSelected"] }, { kind: "component", type: AXInfoBarComponent, selector: "ax-conversation-info-bar", outputs: ["avatarClick", "searchClick", "searchQuery", "menuItemAction"] }, { kind: "component", type: AXMessageListComponent, selector: "ax-conversation-message-list", inputs: ["avatarTemplate"], outputs: ["messageAction"] }, { kind: "component", type: AXComposerComponent, selector: "ax-conversation-composer", outputs: ["messageSent", "emojiClick", "attachClick", "voiceClick"] }, { kind: "component", type: 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: AXDecoratorModule }, { kind: "component", type: i1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i1.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: AXTranslationModule }, { kind: "component", type: 
+                // AXP Layout
+                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" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXMChatComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'axm-chat', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
-                        {
-                            provide: AXPPageLayoutBase,
-                            useExisting: AXMChatComponent,
-                        },
-                        AXUnsubscriber,
-                    ], imports: [
-                        AXMChatItemComponent,
-                        // Common Modules
+            args: [{ selector: 'axm-chat', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         CommonModule,
-                        FormsModule,
-                        RouterModule,
-                        // Acorex Core Modules
-                        AXFormatModule,
-                        AXConversationModule,
-                        AXCommentModule,
-                        AXTranslationModule,
-                        // Acorex Component Modules
-                        // AXResizableDirective,
-                        AXImageModule,
-                        AXAvatarModule,
-                        AXBadgeModule,
-                        AXSlidingItemModule,
+                        AXConversationContainerDirective,
+                        AXSidebarComponent,
+                        AXInfoBarComponent,
+                        AXMessageListComponent,
+                        AXComposerComponent,
+                        AXButtonComponent,
                         AXDecoratorModule,
-                        AXTextBoxModule,
-                        AXSearchBoxModule,
-                        AXTabsModule,
-                        AXButtonModule,
-                        AXLoadingModule,
-                        AXWysiwygModule,
-                        AXLabelModule,
-                        AXSelectBoxModule,
-                        AXFormModule,
-                        AXDropdownButtonModule,
-                        AXDropdownModule,
-                        AXToolBarModule,
-                        AXSkeletonModule,
+                        AXTranslationModule,
+                        // AXP Layout
                         AXPPageLayoutComponent,
                         AXPThemeLayoutBlockComponent,
                         AXPThemeLayoutStartSideComponent,
-                        AXPThemeLayoutHeaderComponent,
-                        AXPThemeLayoutToolbarComponent,
-                        AXContextMenuComponent,
-                        AXPStateMessageComponent,
-                    ], animations: [
-                        trigger('fadeIn', [
-                            transition(':enter', [
-                                style({ opacity: 0, transform: 'translateY(10px)' }),
-                                animate('300ms ease-out', style({ opacity: 1, transform: 'translateY(0)' })),
-                            ]),
-                        ]),
-                    ], template: "<axp-page-layout #container>\n  <axp-layout-start-side class=\"ax-border-e ax-lightest-surface ax-h-full\">\n    <axp-layout-header>\n      <axp-layout-title>{{ '@conversation:module-name' | translate | async }}</axp-layout-title>\n      <axp-layout-toolbar>\n        <ax-search-box\n          #searchInput\n          look=\"solid\"\n          [placeholder]=\"'@conversation:search.placeholder' | translate | async\"\n          [value]=\"searchQuery()\"\n          (onValueChanged)=\"onSearch($event.value)\"\n          class=\"ax-w-full\"\n        >\n          <ax-clear-button></ax-clear-button>\n        </ax-search-box>\n      </axp-layout-toolbar>\n    </axp-layout-header>\n    <axp-layout-content class=\"ax-flex ax-flex-col ax-min-h-0 ax-max-w-80\">\n      @if (!layoutService.isMobileDevice()) {\n        <ng-container [ngTemplateOutlet]=\"template\"></ng-container>\n      }\n    </axp-layout-content>\n  </axp-layout-start-side>\n\n  <axp-page-content\n    style=\"height: calc(100vh - 22rem)\"\n    [style.padding]=\"layoutService.isMobileDevice() ? '1rem !important' : '0 !important'\"\n  >\n    @if (selectedRoom()) {\n      <router-outlet></router-outlet>\n    } @else if (layoutService.isMobileDevice()) {\n      <ax-search-box\n        #searchInput\n        look=\"solid\"\n        [placeholder]=\"'@conversation:search.placeholder' | translate | async\"\n        [value]=\"searchQuery()\"\n        (onValueChanged)=\"onSearch($event.value)\"\n        class=\"ax-w-full ax-mb-2\"\n      >\n        <ax-clear-button></ax-clear-button>\n      </ax-search-box>\n      <ng-container [ngTemplateOutlet]=\"template\"></ng-container>\n    }\n  </axp-page-content>\n</axp-page-layout>\n<ng-template #template>\n  <!-- Tabs -->\n  <div [class]=\"!layoutService.isMobileDevice() ? 'ax-px-4' : ''\">\n    <ax-tabs\n      #tab\n      class=\"ax-text-neutral-400 !ax-overflow-x-hidden\"\n      [look]=\"'with-line'\"\n      [location]=\"'bottom'\"\n      [fitParent]=\"true\"\n      (onActiveTabChanged)=\"activeTabIndex.set($event.index)\"\n    >\n      @for (tab of tabs(); track tab.id; let i = $index) {\n        <ax-tab-item\n          [text]=\"tab.title\"\n          [active]=\"activeTabIndex() === i\"\n          (contextmenu)=\"openTabContextMenu($event, tab, i)\"\n        >\n          @if (getRoomCountForTab(tab) > 0) {\n            <ax-suffix>\n              <ax-badge\n                [text]=\"getRoomCountForTab(tab).toString()\"\n                [color]=\"activeTabIndex() === i ? 'primary' : 'secondary'\"\n                class=\"ax-min-w-[1.5rem] ax-justify-center\"\n              ></ax-badge>\n            </ax-suffix>\n          }\n        </ax-tab-item>\n      }\n    </ax-tabs>\n  </div>\n\n  <!-- Chat List Content -->\n  <div\n    class=\"ax-flex-1 ax-overflow-hidden ax-flex ax-flex-col ax-justify-between ax-min-w-80\"\n    [class.ax-border-t]=\"tabs().length > 0\"\n  >\n    <!-- Loading State -->\n    @if (isLoading()) {\n      <div class=\"ax-p-4 ax-space-y-4\">\n        @for (_ of [1, 2, 3, 4, 5, 6]; track $index) {\n          <div class=\"ax-flex ax-items-center ax-space-x-3\">\n            <ax-skeleton [animated]=\"true\" class=\"ax-w-12 ax-h-12 ax-rounded-full\"></ax-skeleton>\n            <div class=\"ax-flex-1 ax-space-y-2\">\n              <ax-skeleton [animated]=\"true\" class=\"ax-w-3/4 ax-h-4 ax-rounded-md\"></ax-skeleton>\n              <ax-skeleton [animated]=\"true\" class=\"ax-w-1/2 ax-h-3 ax-rounded-md\"></ax-skeleton>\n            </div>\n          </div>\n        }\n      </div>\n    } @else if (error()) {\n      <axp-state-message\n        mode=\"error\"\n        icon=\"fa-light fa-circle-exclamation\"\n        [title]=\"'@conversation:chat-error'\"\n        [description]=\"error() || '@conversation:state-message.error.description'\"\n      >\n        <ax-button\n          slot=\"actions\"\n          [text]=\"'@conversation:try-again' | translate | async\"\n          color=\"primary\"\n          (onClick)=\"refreshChat()\"\n        ></ax-button>\n      </axp-state-message>\n    } @else {\n      <div class=\"ax-flex-1 ax-overflow-y-auto ax-pt-1\">\n        @for (i of filteredRooms(); track i.id) {\n          @if (layoutService.isMobileDevice()) {\n            <ax-sliding-item class=\"ax-h-20\">\n              <ax-content class=\"!ax-p-0\">\n                <axm-chat-item\n                  [data]=\"i\"\n                  [typing]=\"$any(typingStatus()[i.id])\"\n                  [lastMessageReaction]=\"i.lastMessage?.reactions?.[0]?.type ?? null\"\n                  [attr.data-id]=\"i.id\"\n                  (click)=\"openChat(i.id)\"\n                  [class.ax-bg-dark]=\"selectedRoom()?.id === i.id\"\n                  class=\"ax-transition-all ax-duration-100 hover:ax-bg-surface ax-block\"\n                  [@fadeIn]\n                  tabindex=\"0\"\n                  (keydown.enter)=\"openChat(i.id)\"\n                  role=\"button\"\n                  (contextmenu)=\"openContextMenu($event, i)\"\n                ></axm-chat-item>\n              </ax-content>\n\n              <!-- <ax-sliding-item-suffix (onClick)=\"onSlideAction(i, 'mute')\" color=\"warning\">\n          <ax-icon class=\"fa-light fa-bell-slash fa-lg\"></ax-icon>\n        </ax-sliding-item-suffix> -->\n              <ax-sliding-item-suffix (onClick)=\"onSlideAction(i, 'delete')\" color=\"danger\">\n                <ax-icon class=\"fa-light fa-trash-can fa-lg\"></ax-icon>\n              </ax-sliding-item-suffix>\n            </ax-sliding-item>\n          } @else {\n            <axm-chat-item\n              [data]=\"i\"\n              [typing]=\"$any(typingStatus()[i.id])\"\n              [lastMessageReaction]=\"i.lastMessage?.reactions?.[0]?.type ?? null\"\n              [attr.data-id]=\"i.id\"\n              (click)=\"openChat(i.id)\"\n              [class.ax-bg-dark]=\"selectedRoom()?.id === i.id\"\n              class=\"ax-transition-all ax-duration-100 hover:ax-bg-surface\"\n              [@fadeIn]\n              tabindex=\"0\"\n              (keydown.enter)=\"openChat(i.id)\"\n              role=\"button\"\n              (contextmenu)=\"openContextMenu($event, i)\"\n            ></axm-chat-item>\n          }\n        } @empty {\n          <axp-state-message\n            icon=\"fa-light fa-comments\"\n            [title]=\"'@conversation:no-chats-found.title'\"\n            [description]=\"'@conversation:no-chats-found.description'\"\n          >\n          </axp-state-message>\n        }\n      </div>\n    }\n\n    <!-- Footer Content -->\n    @if (!layoutService.isMobileDevice()) {\n      <div class=\"ax-border-t ax-border-divider ax-bg-lightest ax-p-4\">\n        <ax-button\n          class=\"ax-w-full\"\n          color=\"primary\"\n          [text]=\"'@conversation:new-conversation.button' | translate | async\"\n          (onClick)=\"onNewConversation()\"\n        >\n          <ax-prefix>\n            <ax-icon>\n              <i class=\"fa-solid fa-plus\"></i>\n            </ax-icon>\n          </ax-prefix>\n        </ax-button>\n      </div>\n    } @else {\n      <ax-button\n        class=\"ax-fixed ax-bottom-16 ax-right-8 !ax-rounded-full !ax-w-14 !ax-h-14 ax-shadow-lg\"\n        color=\"primary\"\n        (onClick)=\"onNewConversation()\"\n      >\n        <ax-icon class=\"ax-text-2xl\">\n          <i class=\"fa-solid fa-plus\"></i>\n        </ax-icon>\n      </ax-button>\n    }\n  </div>\n</ng-template>\n\n<ax-context-menu\n  #chatContext\n  [openOn]=\"'click'\"\n  [closeOn]=\"'click'\"\n  [orientation]=\"'vertical'\"\n  (onOpening)=\"onContextOpening($event)\"\n  (onItemClick)=\"onContextItemClick($event)\"\n></ax-context-menu>\n\n<ax-context-menu\n  #tabContext\n  [openOn]=\"'click'\"\n  [closeOn]=\"'click'\"\n  [orientation]=\"'vertical'\"\n  (onOpening)=\"onTabContextOpening($event)\"\n  (onItemClick)=\"onTabContextItemClick($event)\"\n></ax-context-menu>\n" }]
-        }], propDecorators: { tab: [{ type: i0.ViewChild, args: ['tab', { isSignal: true }] }], container: [{ type: i0.ViewChild, args: ['container', { isSignal: true }] }], chatContext: [{ type: i0.ViewChild, args: ['chatContext', { isSignal: true }] }], tabContext: [{ type: i0.ViewChild, args: ['tabContext', { isSignal: true }] }], onKeydownHandler: [{
-                type: HostListener,
-                args: ['document:keydown.escape', ['$event']]
-            }] } });
+                        AXPThemeLayoutHeaderComponent
+                    ], providers: [
+                        ...provideConversation({
+                            userApi: AXIndexedDBUserApi,
+                            conversationApi: AXIndexedDBConversationApi,
+                            messageApi: AXIndexedDBMessageAIApi,
+                            realtimeApi: AXIndexedDBRealtimeApi,
+                            config: {},
+                            registry: {
+                                messageRenderers: [
+                                    AX_CONVERSATION_TEXT_RENDERER,
+                                    AX_CONVERSATION_IMAGE_RENDERER,
+                                    AX_CONVERSATION_VIDEO_RENDERER,
+                                    AX_CONVERSATION_AUDIO_RENDERER,
+                                    AX_CONVERSATION_VOICE_RENDERER,
+                                    AX_CONVERSATION_FILE_RENDERER,
+                                    AX_CONVERSATION_LOCATION_RENDERER,
+                                    AX_CONVERSATION_STICKER_RENDERER,
+                                    AX_CONVERSATION_CONTACT_RENDERER,
+                                ],
+                                messageActions: [
+                                    AX_CONVERSATION_MESSAGE_REPLY_ACTION,
+                                    AX_CONVERSATION_MESSAGE_FORWARD_ACTION,
+                                    AX_CONVERSATION_MESSAGE_EDIT_ACTION,
+                                    AX_CONVERSATION_MESSAGE_DELETE_ACTION,
+                                ],
+                                composerActions: [
+                                    AX_CONVERSATION_COMPOSER_EMOJI_ACTION,
+                                    AX_CONVERSATION_COMPOSER_IMAGE_ACTION,
+                                    AX_CONVERSATION_COMPOSER_VIDEO_ACTION,
+                                    AX_CONVERSATION_COMPOSER_FILE_ACTION,
+                                    AX_CONVERSATION_COMPOSER_VOICE_RECORDING_ACTION,
+                                    AX_CONVERSATION_COMPOSER_AUDIO_ACTION,
+                                    AX_CONVERSATION_COMPOSER_CONTACT_ACTION,
+                                    AX_CONVERSATION_COMPOSER_LOCATION_ACTION,
+                                ],
+                                composerTabs: [AX_CONVERSATION_COMPOSER_EMOJI_TAB, AX_CONVERSATION_COMPOSER_STICKER_TAB],
+                                conversationTabs: [
+                                    AX_CONVERSATION_TAB_ALL,
+                                    AX_CONVERSATION_TAB_PRIVATE,
+                                    AX_CONVERSATION_TAB_GROUPS,
+                                    AX_CONVERSATION_TAB_CHANNELS,
+                                    AX_CONVERSATION_TAB_UNREAD,
+                                    AX_CONVERSATION_TAB_ARCHIVED,
+                                ],
+                                infoBarActions: [
+                                    AX_CONVERSATION_INFO_BAR_SEARCH_ACTION,
+                                    AX_CONVERSATION_INFO_BAR_INFO_ACTION,
+                                    AX_CONVERSATION_INFO_BAR_MUTE_ACTION,
+                                    AX_CONVERSATION_INFO_BAR_DIVIDER,
+                                    AX_CONVERSATION_INFO_BAR_DELETE_ACTION,
+                                    AX_CONVERSATION_INFO_BAR_BLOCK_ACTION,
+                                ],
+                                conversationItemActions: [
+                                    AX_CONVERSATION_ITEM_MUTE_ACTION,
+                                    AX_CONVERSATION_ITEM_PIN_ACTION,
+                                    AX_CONVERSATION_ITEM_MARK_READ_ACTION,
+                                    AX_CONVERSATION_ITEM_DIVIDER,
+                                    AX_CONVERSATION_ITEM_DELETE_ACTION,
+                                    AX_CONVERSATION_ITEM_BLOCK_ACTION,
+                                ],
+                            },
+                        }),
+                    ], template: "<axp-page-layout #container axConversationContainer>\n  <axp-layout-start-side class=\"ax-border-e ax-lightest-surface ax-h-full\">\n    <axp-layout-header> </axp-layout-header>\n    <axp-layout-content class=\"ax-flex ax-flex-col ax-min-h-0 ax-max-w-80\">\n      <div class=\"ax-h-full ax-flex ax-flex-col ax-shrink-0 md:ax-flex\" [class.ax-hidden]=\"mobileView() === 'chat'\">\n        <ax-conversation-sidebar></ax-conversation-sidebar>\n      </div>\n    </axp-layout-content>\n  </axp-layout-start-side>\n  <axp-page-header> </axp-page-header>\n\n  <axp-page-content class=\"ax-h-full ax-overflow-hidden ax-p-0\">\n    <ax-conversation-info-bar>\n      <ax-prefix>\n        <ax-button look=\"blank\" class=\"md:ax-hidden\" (onClick)=\"goBackToList()\">\n          <ax-icon icon=\"fa-solid fa-arrow-left\"></ax-icon>\n        </ax-button>\n      </ax-prefix>\n    </ax-conversation-info-bar>\n    <ax-conversation-message-list class=\"ax-flex-1 ax-overflow-hidden\"></ax-conversation-message-list>\n  </axp-page-content>\n\n  <axp-page-footer class=\"ax-block\">\n    <ax-conversation-composer></ax-conversation-composer>\n  </axp-page-footer>\n</axp-page-layout>\n" }]
+        }], ctorParameters: () => [] });
 
 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, userName) {
-    if (!chatResponse || !chatResponse.items?.length) {
-        return [];
-    }
-    // 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';
-            }
-        }
-        // 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.auditInfo?.created?.at || new Date()),
-            readTime: new Date(), // Assuming "read" when converted
-            type: messageType,
-            content: message.message?.content || '',
-            name: name,
-            userName,
-        };
-        // Add fromId if the message is not from current user
-        if (currentUserId !== message.author.id) {
-            previewMessage.fromId = message.author?.id;
-        }
-        else {
-            previewMessage.showActionButton = true;
-        }
-        // Note: Reply information would need to be looked up from the actual messages
-        // This would typically be done by the service that has access to all messages
-        return previewMessage;
-    });
-}
-/**
- * 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, userName) {
-    if (!message)
-        return undefined;
-    return {
-        id: message.id,
-        sendTime: new Date(message.auditInfo?.created?.at || 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,
-        showActionButton: true,
-        userName,
-    };
-}
-/**
- * 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(AXMChatManagementService);
-        this.realtimeService = inject(AXMChatRealtimeService);
-        this.sessionService = inject(AXPSessionService);
-        this.toastService = inject(AXToastService);
-        this.unsubscribe = inject(AXUnsubscriber);
-        this.inputRef = viewChild(AXConversationInputComponent, ...(ngDevMode ? [{ debugName: "inputRef" }] : []));
-        this.activeMessage = signal(null, ...(ngDevMode ? [{ debugName: "activeMessage" }] : []));
-        this.typing$ = new Subject();
-        this.chatData = signal([], ...(ngDevMode ? [{ debugName: "chatData" }] : []));
-        this.room = signal(null, ...(ngDevMode ? [{ debugName: "room" }] : []));
-        this.isEditing = signal(false, ...(ngDevMode ? [{ debugName: "isEditing" }] : []));
-        this.editId = signal(null, ...(ngDevMode ? [{ debugName: "editId" }] : []));
-        this.height = signal(0, ...(ngDevMode ? [{ debugName: "height" }] : []));
-        this.isLoading = signal(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
-        this.error = signal(null, ...(ngDevMode ? [{ debugName: "error" }] : []));
-        this.isChannel = computed(() => this.room()?.topic === 'channel', ...(ngDevMode ? [{ debugName: "isChannel" }] : []));
-        this.options = signal({
-            disabled: false,
-            readonly: false,
-            value: '',
-        }, ...(ngDevMode ? [{ debugName: "options" }] : []));
-        this.roomId = '';
-        //GO TO LAST MESSAGE EFFECT.
-        this.#af = afterNextRender(() => {
-            setTimeout(() => {
-                const div = document.querySelector('ax-conversation-view > div');
-                if (div) {
-                    div.scrollTo({ top: div.scrollHeight, behavior: 'smooth' });
-                }
-            }, 500);
-        });
-    }
-    setHeight(height) {
-        this.height.set(height);
-    }
-    ngOnInit() {
-        this.activatedRoute.params.subscribe((params) => {
-            this.roomId = params['id'];
-            if (this.roomId) {
-                this.loadMessages(this.roomId);
-                this.loadRoomInfo(this.roomId);
-            }
-        });
-        this.realtimeService.message$.pipe(this.unsubscribe.takeUntilDestroy).subscribe(async (event) => {
-            if (event.type === 'add') {
-                const message = event.payload;
-                if (message.author.id !== this.sessionService.user?.id && message.roomId === this.roomId) {
-                    await this.chatService.markSeen(message.id);
-                    this.chatData.update((values) => {
-                        const newMessage = convertToChatPreview(this.sessionService.user?.id || '', {
-                            items: [message],
-                            total: 1,
-                        })[0];
-                        return [...values, newMessage];
-                    });
-                }
-            }
-            else if (event.type === 'remove') {
-                this.chatData.update((values) => values.filter((item) => item.id !== event.payload));
-            }
-            else if (event.type === 'update') {
-                const message = event.payload;
-                const convertedNewMessage = convertToChatPreview(this.sessionService.user?.id || '', {
-                    items: [message],
-                    total: 1,
-                })[0];
-                this.chatData.update((values) => values.map((item) => (item.id === message.id ? { ...convertedNewMessage, ...item } : item)));
-            }
-        });
-        this.typingSubscription = this.typing$.pipe(debounceTime(1000)).subscribe(() => {
-            if (this.roomId) {
-                this.chatService.stopTyping(this.roomId);
-            }
-        });
-    }
-    //GO TO LAST MESSAGE EFFECT.
-    #af;
-    ngOnDestroy() {
-        this.typingSubscription?.unsubscribe();
-    }
-    handleTyping(event) {
-        if (this.roomId) {
-            this.chatService.startTyping(this.roomId);
-            this.typing$.next();
-        }
-    }
-    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 {
-            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');
-                });
-            }
-        }
-    }
-    handleEnter() {
-        if (this.options().value && this.roomId) {
-            this.handleOnSend({ data: { value: this.options().value } });
-        }
-    }
-    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 {
-            // 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) {
-            this.error.set('Failed to load messages. Please try again.');
-            console.error('Failed to load messages:', error);
-        }
-        finally {
-            this.isLoading.set(false);
-        }
-    }
-    async loadRoomInfo(roomId) {
-        try {
-            const roomData = await this.chatService.getRoom(roomId);
-            this.room.set(roomData);
-        }
-        catch (error) {
-            console.error('Failed to load room info:', error);
-        }
-    }
-    addItemHandler(e) {
-        this.activeMessage.set(e.data);
-        if (e.data.fromId) {
-            e.canceled = true;
-            return;
-        }
-        const userItem = [];
-        if (e.data.type === 'text') {
-            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 }));
-                        this.addInputOverlay('edit', e.data);
-                    }
-                    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);
-    }
-    addInputOverlay(type, message) {
-        const input = this.inputRef();
-        const icon = type === 'reply' ? 'fa-solid fa-reply' : 'fa-solid fa-pencil';
-        if (input) {
-            input.setActionBoxContainer(icon, message?.content || this.activeMessage()?.content || '');
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXMChatPreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: AXMChatPreviewComponent, isStandalone: true, selector: "axm-chat-preview", viewQueries: [{ propertyName: "inputRef", first: true, predicate: AXConversationInputComponent, descendants: true, isSignal: true }], ngImport: i0, template: "@if (isLoading()) {\n  <div class=\"ax-h-full ax-w-full ax-flex ax-items-center ax-justify-center\">\n    <ax-loading></ax-loading>\n  </div>\n} @else if (error()) {\n  <div class=\"ax-h-full ax-w-full ax-flex ax-items-center ax-justify-center\">\n    <div class=\"ax-text-center\">\n      <p class=\"ax-text-danger\">{{ error() }}</p>\n      <button (click)=\"loadMessages(roomId)\" class=\"ax-mt-2 ax-button ax-primary\">Retry</button>\n    </div>\n  </div>\n} @else {\n  <div\n    axDomChange\n    (axResizeObserver)=\"setHeight($event[0].contentRect.height)\"\n    class=\"ax-bg-surface-container ax-h-full\"\n  >\n    <!-- Messages Container -->\n    <ax-conversation-container class=\"ax-overflow-hidden\" [chatData]=\"chatData()\">\n      <ax-conversation-view\n        (onActionMenuOpening)=\"addItemHandler($event)\"\n        (onAction)=\"handleOnAction($event)\"\n        (onReplyClick)=\"addInputOverlay('reply', $event.data)\"\n        [chatBoxHeight]=\"height() - (isChannel() ? 5 : 68) + 'px'\"\n      ></ax-conversation-view>\n      @if (!isChannel()) {\n        <ax-conversation-input\n          class=\"ax-px-2\"\n          placeholder=\"Type a message...\"\n          [(ngModel)]=\"options().value\"\n          (ngModelChange)=\"handleTyping($event)\"\n          (onSendClick)=\"handleOnSend($event)\"\n          (onFileChange)=\"handleFileChange($event)\"\n          (onStopRecording)=\"handleEndRecord($event)\"\n          (onCancelRecording)=\"handleCancelRecord($event)\"\n          (onEnterPressed)=\"handleEnter()\"\n        ></ax-conversation-input>\n      }\n    </ax-conversation-container>\n  </div>\n}\n", styles: [":host{display:block;width:100%;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: 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: AXDomChangeDirective, selector: "[axDomChange]", outputs: ["axMutationObserver", "axResizeObserver"] }, { kind: "ngmodule", type: AXConversationModule }, { kind: "component", type: i2$2.AXConversationViewComponent, selector: "ax-conversation-view", inputs: ["chatBoxHeight", "isReplyArrowShown", "avatar"], outputs: ["onActionMenuOpening", "onAction", "onReplyClick", "onScrollEnd"] }, { kind: "component", type: i2$2.AXConversationInputComponent, selector: "ax-conversation-input", inputs: ["look", "placeholder", "maxLength", "hasAttachment", "hasVoice", "hasEmoji", "isLoading", "acceptFileType"], outputs: ["onActionClose", "onSendClick", "onStartRecording", "onCancelRecording", "onEnterPressed"] }, { kind: "component", type: i2$2.AXConversationContainerComponent, selector: "ax-conversation-container", inputs: ["chatData"] }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "component", type: i3$1.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXMChatPreviewComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'axm-chat-preview', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule, FormsModule, AXDomChangeDirective, AXConversationModule, AXLoadingModule], template: "@if (isLoading()) {\n  <div class=\"ax-h-full ax-w-full ax-flex ax-items-center ax-justify-center\">\n    <ax-loading></ax-loading>\n  </div>\n} @else if (error()) {\n  <div class=\"ax-h-full ax-w-full ax-flex ax-items-center ax-justify-center\">\n    <div class=\"ax-text-center\">\n      <p class=\"ax-text-danger\">{{ error() }}</p>\n      <button (click)=\"loadMessages(roomId)\" class=\"ax-mt-2 ax-button ax-primary\">Retry</button>\n    </div>\n  </div>\n} @else {\n  <div\n    axDomChange\n    (axResizeObserver)=\"setHeight($event[0].contentRect.height)\"\n    class=\"ax-bg-surface-container ax-h-full\"\n  >\n    <!-- Messages Container -->\n    <ax-conversation-container class=\"ax-overflow-hidden\" [chatData]=\"chatData()\">\n      <ax-conversation-view\n        (onActionMenuOpening)=\"addItemHandler($event)\"\n        (onAction)=\"handleOnAction($event)\"\n        (onReplyClick)=\"addInputOverlay('reply', $event.data)\"\n        [chatBoxHeight]=\"height() - (isChannel() ? 5 : 68) + 'px'\"\n      ></ax-conversation-view>\n      @if (!isChannel()) {\n        <ax-conversation-input\n          class=\"ax-px-2\"\n          placeholder=\"Type a message...\"\n          [(ngModel)]=\"options().value\"\n          (ngModelChange)=\"handleTyping($event)\"\n          (onSendClick)=\"handleOnSend($event)\"\n          (onFileChange)=\"handleFileChange($event)\"\n          (onStopRecording)=\"handleEndRecord($event)\"\n          (onCancelRecording)=\"handleCancelRecord($event)\"\n          (onEnterPressed)=\"handleEnter()\"\n        ></ax-conversation-input>\n      }\n    </ax-conversation-container>\n  </div>\n}\n", styles: [":host{display:block;width:100%;height:100%}\n"] }]
-        }], propDecorators: { inputRef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => AXConversationInputComponent), { isSignal: true }] }] } });
-
-var chatPreview_component = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    AXMChatPreviewComponent: AXMChatPreviewComponent
-});
-
 class AXMCommentRealtimeService {
 }
 class AXMCommentRealtimeServiceImpl extends AXMCommentRealtimeService {
@@ -3951,7 +2394,7 @@ class AXMCommentComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXMCommentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: AXMCommentComponent, isStandalone: true, selector: "axm-comment", inputs: { refrenceType: { classPropertyName: "refrenceType", publicName: "refrenceType", isSignal: true, isRequired: true, transformFunction: null }, refrenceId: { classPropertyName: "refrenceId", publicName: "refrenceId", isSignal: true, isRequired: true, transformFunction: null }, subject: { classPropertyName: "subject", publicName: "subject", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "wysiwygEditor", first: true, predicate: ["w"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ax-size-full ax-flex ax-flex-col ax-justify-between ax-p-4 ax-overflow-hidden\">\n  <ax-comment-container class=\"ax-overflow-auto\">\n    @if (isLoading()) {\n      <div class=\"ax-flex ax-items-center ax-py-12 ax-bg-lightest ax-px-5\">\n        <ax-skeleton class=\"ax-min-w-16 ax-h-16 ax-rounded-full ax-me-4\"></ax-skeleton>\n        <div class=\"ax-flex ax-flex-col ax-gap-2 ax-w-full\">\n          <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded\"></ax-skeleton>\n          <ax-skeleton class=\"ax-w-full ax-h-2 ax-rounded-full\"></ax-skeleton>\n          <ax-skeleton class=\"ax-w-full ax-h-2 ax-rounded-full\"></ax-skeleton>\n          <ax-skeleton class=\"ax-w-8/12 ax-h-2 ax-rounded-full\"></ax-skeleton>\n        </div>\n      </div>\n    } @else if (!isLoading() && comments().length > 0) {\n      <ax-comment-view class=\"ax-bg-lightest\">\n        @for (comment of comments(); track comment.id) {\n          <ax-comment-item\n            [id]=\"comment.id!\"\n            [replyCount]=\"comment.replyCount\"\n            [class.highlighted]=\"highlightedCommentId() === comment.id\"\n            [@fadeIn]\n          >\n            <axp-user-avatar #user [size]=\"48\" [userId]=\"comment.author.id\" ngProjectAs=\"'ax-avatar'\"></axp-user-avatar>\n            <ax-title>{{ user.firstName() + ' ' + user.lastName() }}</ax-title>\n            <ax-comment-date>{{ comment.auditInfo?.created?.at! | format: 'timeleft' | async }} </ax-comment-date>\n            <ax-comment-menu-options>\n              <ax-button class=\"ax-sm\" look=\"blank\" color=\"neutral\">\n                <ax-icon icon=\"ax-icon ax-icon-solid ax-icon-more-horizontal\"></ax-icon>\n              </ax-button>\n\n              <ax-dropdown-panel>\n                <ax-button-item-list>\n                  <ax-button-item\n                    text=\"Edit\"\n                    color=\"neutral\"\n                    (click)=\"editMessage(comment, undefined, user.firstName() + ' ' + user.lastName())\"\n                  >\n                    <ax-prefix>\n                      <ax-icon icon=\"fa-solid fa-edit\"></ax-icon>\n                    </ax-prefix>\n                  </ax-button-item>\n\n                  <ax-button-item text=\"Delete\" color=\"danger\" (click)=\"deleteComment(comment.id!)\">\n                    <ax-prefix>\n                      <ax-icon icon=\"fa-solid fa-trash-can\"></ax-icon>\n                    </ax-prefix>\n                  </ax-button-item>\n                </ax-button-item-list>\n              </ax-dropdown-panel>\n            </ax-comment-menu-options>\n            <ax-content [innerHTML]=\"sanitizeHtml(comment.message.content)\"></ax-content>\n            <ax-comment-like (click)=\"toggleLike(comment)\" [like]=\"isLikedByUser(comment)\">\n              {{ getReactionsCount(comment) }}\n            </ax-comment-like>\n            <ax-comment-reply-text\n              (click)=\"replyMessage(comment, undefined, user.firstName() + ' ' + user.lastName())\"\n            ></ax-comment-reply-text>\n            @for (reply of comment.replies; track reply.id) {\n              <ax-comment-item [id]=\"reply.id\" [class.highlighted]=\"highlightedCommentId() === reply.id\" [@fadeIn]>\n                <axp-user-avatar\n                  #user2\n                  [size]=\"48\"\n                  [userId]=\"reply.author.id\"\n                  ngProjectAs=\"'ax-avatar'\"\n                ></axp-user-avatar>\n                <ax-title>{{ user2.firstName() + ' ' + user2.lastName() }}</ax-title>\n                <ax-comment-date>{{ reply.auditInfo?.created?.at! | format: 'timeleft' | async }} </ax-comment-date>\n                <ax-comment-menu-options>\n                  <ax-button class=\"ax-sm\" look=\"blank\" color=\"neutral\">\n                    <ax-icon icon=\"ax-icon ax-icon-solid ax-icon-more-horizontal\"></ax-icon>\n                  </ax-button>\n\n                  <ax-dropdown-panel>\n                    <ax-button-item-list>\n                      <ax-button-item\n                        text=\"Edit\"\n                        color=\"neutral\"\n                        (click)=\"editMessage(comment, reply, user2.firstName() + ' ' + user2.lastName())\"\n                      >\n                        <ax-prefix>\n                          <ax-icon icon=\"fa-solid fa-edit\"></ax-icon>\n                        </ax-prefix>\n                      </ax-button-item>\n                      <ax-button-item text=\"Delete\" color=\"danger\" (click)=\"deleteComment(reply.id!)\">\n                        <ax-prefix>\n                          <ax-icon icon=\"fa-solid fa-trash-can\"></ax-icon>\n                        </ax-prefix>\n                      </ax-button-item>\n                    </ax-button-item-list>\n                  </ax-dropdown-panel>\n                </ax-comment-menu-options>\n                <ax-content [innerHTML]=\"sanitizeHtml(reply.message.content)\"></ax-content>\n                <ax-comment-like (click)=\"toggleLike(reply)\" [like]=\"isLikedByUser(reply)\">\n                  {{ getReactionsCount(reply) }}\n                </ax-comment-like>\n                <ax-comment-reply-text\n                  (click)=\"replyMessage(comment, reply, user2.firstName() + ' ' + user2.lastName())\"\n                ></ax-comment-reply-text>\n              </ax-comment-item>\n            }\n          </ax-comment-item>\n        }\n      </ax-comment-view>\n    } @else {\n      <div>\n        <div class=\"ax-flex ax-flex-col ax-gap-4 ax-justify-center ax-items-center ax-p-10\">\n          <svg\n            class=\"ax-mx-auto\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"154\"\n            height=\"161\"\n            viewBox=\"0 0 154 161\"\n            fill=\"none\"\n          >\n            <path\n              d=\"M0.0616455 84.4268C0.0616455 42.0213 34.435 7.83765 76.6507 7.83765C118.803 7.83765 153.224 42.0055 153.224 84.4268C153.224 102.42 147.026 118.974 136.622 132.034C122.282 150.138 100.367 161 76.6507 161C52.7759 161 30.9882 150.059 16.6633 132.034C6.25961 118.974 0.0616455 102.42 0.0616455 84.4268Z\"\n              fill=\"#EEF2FF\"\n            />\n            <path\n              d=\"M96.8189 0.632498L96.8189 0.632384L96.8083 0.630954C96.2034 0.549581 95.5931 0.5 94.9787 0.5H29.338C22.7112 0.5 17.3394 5.84455 17.3394 12.4473V142.715C17.3394 149.318 22.7112 154.662 29.338 154.662H123.948C130.591 154.662 135.946 149.317 135.946 142.715V38.9309C135.946 38.0244 135.847 37.1334 135.648 36.2586L135.648 36.2584C135.117 33.9309 133.874 31.7686 132.066 30.1333C132.066 30.1331 132.065 30.1329 132.065 30.1327L103.068 3.65203C103.068 3.6519 103.067 3.65177 103.067 3.65164C101.311 2.03526 99.1396 0.995552 96.8189 0.632498Z\"\n              fill=\"white\"\n              stroke=\"#E5E7EB\"\n            />\n            <ellipse cx=\"80.0618\" cy=\"81\" rx=\"28.0342\" ry=\"28.0342\" fill=\"#EEF2FF\" />\n            <path\n              d=\"M99.2393 61.3061L99.2391 61.3058C88.498 50.5808 71.1092 50.5804 60.3835 61.3061C49.6423 72.0316 49.6422 89.4361 60.3832 100.162C71.109 110.903 88.4982 110.903 99.2393 100.162C109.965 89.4363 109.965 72.0317 99.2393 61.3061ZM105.863 54.6832C120.249 69.0695 120.249 92.3985 105.863 106.785C91.4605 121.171 68.1468 121.171 53.7446 106.785C39.3582 92.3987 39.3582 69.0693 53.7446 54.683C68.1468 40.2965 91.4605 40.2966 105.863 54.6832Z\"\n              stroke=\"#E5E7EB\"\n            />\n            <path\n              d=\"M110.782 119.267L102.016 110.492C104.888 108.267 107.476 105.651 109.564 102.955L118.329 111.729L110.782 119.267Z\"\n              stroke=\"#E5E7EB\"\n            />\n            <path\n              d=\"M139.122 125.781L139.122 125.78L123.313 109.988C123.313 109.987 123.313 109.987 123.312 109.986C121.996 108.653 119.849 108.657 118.521 109.985L118.871 110.335L118.521 109.985L109.047 119.459C107.731 120.775 107.735 122.918 109.044 124.247L109.047 124.249L124.858 140.06C128.789 143.992 135.191 143.992 139.122 140.06C143.069 136.113 143.069 129.728 139.122 125.781Z\"\n              fill=\"#A5B4FC\"\n              stroke=\"#818CF8\"\n            />\n            <path\n              d=\"M83.185 87.2285C82.5387 87.2285 82.0027 86.6926 82.0027 86.0305C82.0027 83.3821 77.9987 83.3821 77.9987 86.0305C77.9987 86.6926 77.4627 87.2285 76.8006 87.2285C76.1543 87.2285 75.6183 86.6926 75.6183 86.0305C75.6183 80.2294 84.3831 80.2451 84.3831 86.0305C84.3831 86.6926 83.8471 87.2285 83.185 87.2285Z\"\n              fill=\"#4F46E5\"\n            />\n            <path\n              d=\"M93.3528 77.0926H88.403C87.7409 77.0926 87.2049 76.5567 87.2049 75.8946C87.2049 75.2483 87.7409 74.7123 88.403 74.7123H93.3528C94.0149 74.7123 94.5509 75.2483 94.5509 75.8946C94.5509 76.5567 94.0149 77.0926 93.3528 77.0926Z\"\n              fill=\"#4F46E5\"\n            />\n            <path\n              d=\"M71.5987 77.0925H66.6488C65.9867 77.0925 65.4507 76.5565 65.4507 75.8945C65.4507 75.2481 65.9867 74.7122 66.6488 74.7122H71.5987C72.245 74.7122 72.781 75.2481 72.781 75.8945C72.781 76.5565 72.245 77.0925 71.5987 77.0925Z\"\n              fill=\"#4F46E5\"\n            />\n            <rect x=\"38.3522\" y=\"21.5128\" width=\"41.0256\" height=\"2.73504\" rx=\"1.36752\" fill=\"#4F46E5\" />\n            <rect x=\"38.3522\" y=\"133.65\" width=\"54.7009\" height=\"5.47009\" rx=\"2.73504\" fill=\"#A5B4FC\" />\n            <rect x=\"38.3522\" y=\"29.7179\" width=\"13.6752\" height=\"2.73504\" rx=\"1.36752\" fill=\"#4F46E5\" />\n            <circle cx=\"56.13\" cy=\"31.0854\" r=\"1.36752\" fill=\"#4F46E5\" />\n            <circle cx=\"61.6001\" cy=\"31.0854\" r=\"1.36752\" fill=\"#4F46E5\" />\n            <circle cx=\"67.0702\" cy=\"31.0854\" r=\"1.36752\" fill=\"#4F46E5\" />\n          </svg>\n          <div>\n            <h2 class=\"ax-text-center ax-text-neutral-600 ax-font-semibold ax-leading-loose ax-pb-2\">\n              There is no Comment!\n            </h2>\n          </div>\n        </div>\n      </div>\n    }\n  </ax-comment-container>\n  <div>\n    @if (isReplyingMode() || isEditingMode()) {\n      <div\n        class=\"ax-flex ax-justify-between ax-rounded-b-none ax-border ax-border-b-0 ax-rounded-lg ax-px-6 ax-py-3 ax-w-full ax-items-center ax-overflow-hidden ax-text-sm ax-leading-none\"\n      >\n        <div (click)=\"scrollMain()\" class=\"ax-flex ax-justify-start ax-items-center ax-cursor-pointer\">\n          <i\n            [class]=\"isReplyingMode() ? 'fa-reply' : 'fa-pen'\"\n            class=\"fa-solid ax-text-primary-500 dark:ax-text-primary-300 ax-text-2xl ax-me-4\"\n          ></i>\n          <div class=\"ax-flex ax-flex-col ax-gap-2 ax-justify-between ax-align-middle ax-leading-4 ax-overflow-hidden\">\n            <p class=\"ax-text-primary-500 dark:ax-text-primary-300\">\n              {{ isReplyingMode() ? 'Reply to ' : 'Edit Message' }}\n              <span class=\"ax-font-bold\">\n                {{ isReplyingMode() ? activeReplyComment()?.userName : '' }}\n              </span>\n            </p>\n            <div\n              class=\"ax-truncate\"\n              [innerHTML]=\"\n                isReplyingMode()\n                  ? sanitizeHtml(activeReplyComment()?.message?.content ?? '')\n                  : sanitizeHtml(activeEditComment()?.message?.content ?? '')\n              \"\n            ></div>\n          </div>\n        </div>\n        <div><i (click)=\"resetReplyEditState()\" class=\"fa-solid ax-text-2xl fa-xmark ax-cursor-pointer\"></i></div>\n      </div>\n    }\n    <ax-wysiwyg-container #w [look]=\"wysiwygOptions().look\" [(ngModel)]=\"commentContent\">\n      <ax-wysiwyg-view class=\"ax-min-h-28\"></ax-wysiwyg-view>\n      <ax-wysiwyg-toolbar>\n        <ax-prefix>\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-prefix>\n        <ax-suffix>\n          <ax-dropdown-button\n            [disabled]=\"hasCooldown() || !this.commentContent()\"\n            type=\"submit\"\n            color=\"primary\"\n            mode=\"split\"\n            text=\"Send\"\n            (onClick)=\"submitComment()\"\n          >\n            @if (isSubmitting()) {\n              <ax-loading></ax-loading>\n            }\n            <!-- <ax-button-item-list>\n                  <ax-button-item (click)=\"submitComment()\" text=\"Send Private ...\" name=\"private\" data=\"private\">\n                    <ax-prefix>\n                      <ax-icon icon=\"fa-regular fa-user-secret\"></ax-icon>\n                    </ax-prefix>\n                  </ax-button-item>\n                </ax-button-item-list> -->\n          </ax-dropdown-button>\n        </ax-suffix>\n      </ax-wysiwyg-toolbar>\n    </ax-wysiwyg-container>\n  </div>\n</div>\n", styles: [":host{display:block;width:100%;height:100%}ax-wysiwyg-container .ax-editor-container{border-top-left-radius:0!important;border-top-right-radius:0!important}ax-wysiwyg-container .ax-error-message{padding-left:.5rem}ax-wysiwyg-container .highlighted{background:var(--ax-color-primary-050)!important;border-radius:.25rem;transition:background 1s ease-in-out}\n"], dependencies: [{ kind: "ngmodule", type: AXWysiwygModule }, { kind: "component", type: i1$2.AXWysiwygContainerComponent, selector: "ax-wysiwyg-container", inputs: ["look", "readonly", "disabled", "placeHolder"], outputs: ["onValueChanged"] }, { kind: "component", type: i1$2.AXWysiwygViewComponent, selector: "ax-wysiwyg-view" }, { kind: "component", type: i1$2.AXWysiwygAlignmentComponent, selector: "ax-wysiwyg-alignment" }, { kind: "component", type: i1$2.AXWysiwygColorsComponent, selector: "ax-wysiwyg-colors" }, { kind: "component", type: i1$2.AXWysiwygFontStyleComponent, selector: "ax-wysiwyg-font-style" }, { kind: "component", type: i1$2.AXWysiwygHistoryComponent, selector: "ax-wysiwyg-history" }, { kind: "component", type: i1$2.AXWysiwygListComponent, selector: "ax-wysiwyg-list" }, { kind: "component", type: i1$2.AXWysiwygToolbarComponent, selector: "ax-wysiwyg-toolbar" }, { kind: "ngmodule", type: AXConversationModule }, { kind: "ngmodule", type: AXSkeletonModule }, { kind: "component", type: i9.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$2.AXCommentViewComponent, selector: "ax-comment-view" }, { kind: "component", type: i4$2.AXCommentContainerComponent, selector: "ax-comment-container" }, { kind: "component", type: i4$2.AXCommentItemComponent, selector: "ax-comment-item", inputs: ["replyCount"] }, { kind: "component", type: i4$2.AXCommentLikeComponent, selector: "ax-comment-like", inputs: ["like"], outputs: ["likeChange"] }, { kind: "component", type: i4$2.AXMenuOptionsComponent, selector: "ax-comment-menu-options" }, { kind: "component", type: i4$2.AXCommentReplyTextComponent, selector: "ax-comment-reply-text" }, { kind: "component", type: i4$2.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", "closeParentOnClick", "lockOnLoading"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXAvatarModule }, { kind: "ngmodule", type: AXImageModule }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "component", type: i3$1.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "component", type: i7$1.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "placement", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXFormatModule }, { kind: "ngmodule", type: AXFormModule }, { kind: "ngmodule", type: AXToolBarModule }, { 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: AXDropdownButtonModule }, { kind: "component", type: i9$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: AXPUserAvatarComponent, selector: "axp-user-avatar", inputs: ["size", "userId"] }, { kind: "pipe", type: i10.AXFormatPipe, name: "format" }, { kind: "pipe", type: AsyncPipe, name: "async" }], animations: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: AXMCommentComponent, isStandalone: true, selector: "axm-comment", inputs: { refrenceType: { classPropertyName: "refrenceType", publicName: "refrenceType", isSignal: true, isRequired: true, transformFunction: null }, refrenceId: { classPropertyName: "refrenceId", publicName: "refrenceId", isSignal: true, isRequired: true, transformFunction: null }, subject: { classPropertyName: "subject", publicName: "subject", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "wysiwygEditor", first: true, predicate: ["w"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ax-size-full ax-flex ax-flex-col ax-justify-between ax-p-4 ax-overflow-hidden\">\n  <ax-comment-container class=\"ax-overflow-auto\">\n    @if (isLoading()) {\n      <div class=\"ax-flex ax-items-center ax-py-12 ax-bg-lightest ax-px-5\">\n        <ax-skeleton class=\"ax-min-w-16 ax-h-16 ax-rounded-full ax-me-4\"></ax-skeleton>\n        <div class=\"ax-flex ax-flex-col ax-gap-2 ax-w-full\">\n          <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded\"></ax-skeleton>\n          <ax-skeleton class=\"ax-w-full ax-h-2 ax-rounded-full\"></ax-skeleton>\n          <ax-skeleton class=\"ax-w-full ax-h-2 ax-rounded-full\"></ax-skeleton>\n          <ax-skeleton class=\"ax-w-8/12 ax-h-2 ax-rounded-full\"></ax-skeleton>\n        </div>\n      </div>\n    } @else if (!isLoading() && comments().length > 0) {\n      <ax-comment-view class=\"ax-bg-lightest\">\n        @for (comment of comments(); track comment.id) {\n          <ax-comment-item\n            [id]=\"comment.id!\"\n            [replyCount]=\"comment.replyCount\"\n            [class.highlighted]=\"highlightedCommentId() === comment.id\"\n            [@fadeIn]\n          >\n            <axp-user-avatar #user [size]=\"48\" [userId]=\"comment.author.id\" ngProjectAs=\"'ax-avatar'\"></axp-user-avatar>\n            <ax-title>{{ user.firstName() + ' ' + user.lastName() }}</ax-title>\n            <ax-comment-date>{{ comment.auditInfo?.created?.at! | format: 'timeleft' | async }} </ax-comment-date>\n            <ax-comment-menu-options>\n              <ax-button class=\"ax-sm\" look=\"blank\" color=\"neutral\">\n                <ax-icon icon=\"ax-icon ax-icon-solid ax-icon-more-horizontal\"></ax-icon>\n              </ax-button>\n\n              <ax-dropdown-panel>\n                <ax-button-item-list>\n                  <ax-button-item\n                    text=\"Edit\"\n                    color=\"neutral\"\n                    (click)=\"editMessage(comment, undefined, user.firstName() + ' ' + user.lastName())\"\n                  >\n                    <ax-prefix>\n                      <ax-icon icon=\"fa-solid fa-edit\"></ax-icon>\n                    </ax-prefix>\n                  </ax-button-item>\n\n                  <ax-button-item text=\"Delete\" color=\"danger\" (click)=\"deleteComment(comment.id!)\">\n                    <ax-prefix>\n                      <ax-icon icon=\"fa-solid fa-trash-can\"></ax-icon>\n                    </ax-prefix>\n                  </ax-button-item>\n                </ax-button-item-list>\n              </ax-dropdown-panel>\n            </ax-comment-menu-options>\n            <ax-content [innerHTML]=\"sanitizeHtml(comment.message.content)\"></ax-content>\n            <ax-comment-like (click)=\"toggleLike(comment)\" [like]=\"isLikedByUser(comment)\">\n              {{ getReactionsCount(comment) }}\n            </ax-comment-like>\n            <ax-comment-reply-text\n              (click)=\"replyMessage(comment, undefined, user.firstName() + ' ' + user.lastName())\"\n            ></ax-comment-reply-text>\n            @for (reply of comment.replies; track reply.id) {\n              <ax-comment-item [id]=\"reply.id\" [class.highlighted]=\"highlightedCommentId() === reply.id\" [@fadeIn]>\n                <axp-user-avatar\n                  #user2\n                  [size]=\"48\"\n                  [userId]=\"reply.author.id\"\n                  ngProjectAs=\"'ax-avatar'\"\n                ></axp-user-avatar>\n                <ax-title>{{ user2.firstName() + ' ' + user2.lastName() }}</ax-title>\n                <ax-comment-date>{{ reply.auditInfo?.created?.at! | format: 'timeleft' | async }} </ax-comment-date>\n                <ax-comment-menu-options>\n                  <ax-button class=\"ax-sm\" look=\"blank\" color=\"neutral\">\n                    <ax-icon icon=\"ax-icon ax-icon-solid ax-icon-more-horizontal\"></ax-icon>\n                  </ax-button>\n\n                  <ax-dropdown-panel>\n                    <ax-button-item-list>\n                      <ax-button-item\n                        text=\"Edit\"\n                        color=\"neutral\"\n                        (click)=\"editMessage(comment, reply, user2.firstName() + ' ' + user2.lastName())\"\n                      >\n                        <ax-prefix>\n                          <ax-icon icon=\"fa-solid fa-edit\"></ax-icon>\n                        </ax-prefix>\n                      </ax-button-item>\n                      <ax-button-item text=\"Delete\" color=\"danger\" (click)=\"deleteComment(reply.id!)\">\n                        <ax-prefix>\n                          <ax-icon icon=\"fa-solid fa-trash-can\"></ax-icon>\n                        </ax-prefix>\n                      </ax-button-item>\n                    </ax-button-item-list>\n                  </ax-dropdown-panel>\n                </ax-comment-menu-options>\n                <ax-content [innerHTML]=\"sanitizeHtml(reply.message.content)\"></ax-content>\n                <ax-comment-like (click)=\"toggleLike(reply)\" [like]=\"isLikedByUser(reply)\">\n                  {{ getReactionsCount(reply) }}\n                </ax-comment-like>\n                <ax-comment-reply-text\n                  (click)=\"replyMessage(comment, reply, user2.firstName() + ' ' + user2.lastName())\"\n                ></ax-comment-reply-text>\n              </ax-comment-item>\n            }\n          </ax-comment-item>\n        }\n      </ax-comment-view>\n    } @else {\n      <div>\n        <div class=\"ax-flex ax-flex-col ax-gap-4 ax-justify-center ax-items-center ax-p-10\">\n          <svg\n            class=\"ax-mx-auto\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"154\"\n            height=\"161\"\n            viewBox=\"0 0 154 161\"\n            fill=\"none\"\n          >\n            <path\n              d=\"M0.0616455 84.4268C0.0616455 42.0213 34.435 7.83765 76.6507 7.83765C118.803 7.83765 153.224 42.0055 153.224 84.4268C153.224 102.42 147.026 118.974 136.622 132.034C122.282 150.138 100.367 161 76.6507 161C52.7759 161 30.9882 150.059 16.6633 132.034C6.25961 118.974 0.0616455 102.42 0.0616455 84.4268Z\"\n              fill=\"#EEF2FF\"\n            />\n            <path\n              d=\"M96.8189 0.632498L96.8189 0.632384L96.8083 0.630954C96.2034 0.549581 95.5931 0.5 94.9787 0.5H29.338C22.7112 0.5 17.3394 5.84455 17.3394 12.4473V142.715C17.3394 149.318 22.7112 154.662 29.338 154.662H123.948C130.591 154.662 135.946 149.317 135.946 142.715V38.9309C135.946 38.0244 135.847 37.1334 135.648 36.2586L135.648 36.2584C135.117 33.9309 133.874 31.7686 132.066 30.1333C132.066 30.1331 132.065 30.1329 132.065 30.1327L103.068 3.65203C103.068 3.6519 103.067 3.65177 103.067 3.65164C101.311 2.03526 99.1396 0.995552 96.8189 0.632498Z\"\n              fill=\"white\"\n              stroke=\"#E5E7EB\"\n            />\n            <ellipse cx=\"80.0618\" cy=\"81\" rx=\"28.0342\" ry=\"28.0342\" fill=\"#EEF2FF\" />\n            <path\n              d=\"M99.2393 61.3061L99.2391 61.3058C88.498 50.5808 71.1092 50.5804 60.3835 61.3061C49.6423 72.0316 49.6422 89.4361 60.3832 100.162C71.109 110.903 88.4982 110.903 99.2393 100.162C109.965 89.4363 109.965 72.0317 99.2393 61.3061ZM105.863 54.6832C120.249 69.0695 120.249 92.3985 105.863 106.785C91.4605 121.171 68.1468 121.171 53.7446 106.785C39.3582 92.3987 39.3582 69.0693 53.7446 54.683C68.1468 40.2965 91.4605 40.2966 105.863 54.6832Z\"\n              stroke=\"#E5E7EB\"\n            />\n            <path\n              d=\"M110.782 119.267L102.016 110.492C104.888 108.267 107.476 105.651 109.564 102.955L118.329 111.729L110.782 119.267Z\"\n              stroke=\"#E5E7EB\"\n            />\n            <path\n              d=\"M139.122 125.781L139.122 125.78L123.313 109.988C123.313 109.987 123.313 109.987 123.312 109.986C121.996 108.653 119.849 108.657 118.521 109.985L118.871 110.335L118.521 109.985L109.047 119.459C107.731 120.775 107.735 122.918 109.044 124.247L109.047 124.249L124.858 140.06C128.789 143.992 135.191 143.992 139.122 140.06C143.069 136.113 143.069 129.728 139.122 125.781Z\"\n              fill=\"#A5B4FC\"\n              stroke=\"#818CF8\"\n            />\n            <path\n              d=\"M83.185 87.2285C82.5387 87.2285 82.0027 86.6926 82.0027 86.0305C82.0027 83.3821 77.9987 83.3821 77.9987 86.0305C77.9987 86.6926 77.4627 87.2285 76.8006 87.2285C76.1543 87.2285 75.6183 86.6926 75.6183 86.0305C75.6183 80.2294 84.3831 80.2451 84.3831 86.0305C84.3831 86.6926 83.8471 87.2285 83.185 87.2285Z\"\n              fill=\"#4F46E5\"\n            />\n            <path\n              d=\"M93.3528 77.0926H88.403C87.7409 77.0926 87.2049 76.5567 87.2049 75.8946C87.2049 75.2483 87.7409 74.7123 88.403 74.7123H93.3528C94.0149 74.7123 94.5509 75.2483 94.5509 75.8946C94.5509 76.5567 94.0149 77.0926 93.3528 77.0926Z\"\n              fill=\"#4F46E5\"\n            />\n            <path\n              d=\"M71.5987 77.0925H66.6488C65.9867 77.0925 65.4507 76.5565 65.4507 75.8945C65.4507 75.2481 65.9867 74.7122 66.6488 74.7122H71.5987C72.245 74.7122 72.781 75.2481 72.781 75.8945C72.781 76.5565 72.245 77.0925 71.5987 77.0925Z\"\n              fill=\"#4F46E5\"\n            />\n            <rect x=\"38.3522\" y=\"21.5128\" width=\"41.0256\" height=\"2.73504\" rx=\"1.36752\" fill=\"#4F46E5\" />\n            <rect x=\"38.3522\" y=\"133.65\" width=\"54.7009\" height=\"5.47009\" rx=\"2.73504\" fill=\"#A5B4FC\" />\n            <rect x=\"38.3522\" y=\"29.7179\" width=\"13.6752\" height=\"2.73504\" rx=\"1.36752\" fill=\"#4F46E5\" />\n            <circle cx=\"56.13\" cy=\"31.0854\" r=\"1.36752\" fill=\"#4F46E5\" />\n            <circle cx=\"61.6001\" cy=\"31.0854\" r=\"1.36752\" fill=\"#4F46E5\" />\n            <circle cx=\"67.0702\" cy=\"31.0854\" r=\"1.36752\" fill=\"#4F46E5\" />\n          </svg>\n          <div>\n            <h2 class=\"ax-text-center ax-text-neutral-600 ax-font-semibold ax-leading-loose ax-pb-2\">\n              There is no Comment!\n            </h2>\n          </div>\n        </div>\n      </div>\n    }\n  </ax-comment-container>\n  <div>\n    @if (isReplyingMode() || isEditingMode()) {\n      <div\n        class=\"ax-flex ax-justify-between ax-rounded-b-none ax-border ax-border-b-0 ax-rounded-lg ax-px-6 ax-py-3 ax-w-full ax-items-center ax-overflow-hidden ax-text-sm ax-leading-none\"\n      >\n        <div (click)=\"scrollMain()\" class=\"ax-flex ax-justify-start ax-items-center ax-cursor-pointer\">\n          <i\n            [class]=\"isReplyingMode() ? 'fa-reply' : 'fa-pen'\"\n            class=\"fa-solid ax-text-primary-500 dark:ax-text-primary-300 ax-text-2xl ax-me-4\"\n          ></i>\n          <div class=\"ax-flex ax-flex-col ax-gap-2 ax-justify-between ax-align-middle ax-leading-4 ax-overflow-hidden\">\n            <p class=\"ax-text-primary-500 dark:ax-text-primary-300\">\n              {{ isReplyingMode() ? 'Reply to ' : 'Edit Message' }}\n              <span class=\"ax-font-bold\">\n                {{ isReplyingMode() ? activeReplyComment()?.userName : '' }}\n              </span>\n            </p>\n            <div\n              class=\"ax-truncate\"\n              [innerHTML]=\"\n                isReplyingMode()\n                  ? sanitizeHtml(activeReplyComment()?.message?.content ?? '')\n                  : sanitizeHtml(activeEditComment()?.message?.content ?? '')\n              \"\n            ></div>\n          </div>\n        </div>\n        <div><i (click)=\"resetReplyEditState()\" class=\"fa-solid ax-text-2xl fa-xmark ax-cursor-pointer\"></i></div>\n      </div>\n    }\n    <ax-wysiwyg-container #w [look]=\"wysiwygOptions().look\" [(ngModel)]=\"commentContent\">\n      <ax-wysiwyg-view class=\"ax-min-h-28\"></ax-wysiwyg-view>\n      <ax-wysiwyg-toolbar>\n        <ax-prefix>\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-prefix>\n        <ax-suffix>\n          <ax-dropdown-button\n            [disabled]=\"hasCooldown() || !this.commentContent()\"\n            type=\"submit\"\n            color=\"primary\"\n            mode=\"split\"\n            text=\"Send\"\n            (onClick)=\"submitComment()\"\n          >\n            @if (isSubmitting()) {\n              <ax-loading></ax-loading>\n            }\n            <!-- <ax-button-item-list>\n                  <ax-button-item (click)=\"submitComment()\" text=\"Send Private ...\" name=\"private\" data=\"private\">\n                    <ax-prefix>\n                      <ax-icon icon=\"fa-regular fa-user-secret\"></ax-icon>\n                    </ax-prefix>\n                  </ax-button-item>\n                </ax-button-item-list> -->\n          </ax-dropdown-button>\n        </ax-suffix>\n      </ax-wysiwyg-toolbar>\n    </ax-wysiwyg-container>\n  </div>\n</div>\n", styles: [":host{display:block;width:100%;height:100%}ax-wysiwyg-container .ax-editor-container{border-top-left-radius:0!important;border-top-right-radius:0!important}ax-wysiwyg-container .ax-error-message{padding-left:.5rem}ax-wysiwyg-container .highlighted{background:var(--ax-color-primary-050)!important;border-radius:.25rem;transition:background 1s ease-in-out}\n"], dependencies: [{ kind: "ngmodule", type: AXWysiwygModule }, { kind: "component", type: i1$1.AXWysiwygContainerComponent, selector: "ax-wysiwyg-container", inputs: ["look", "readonly", "disabled", "placeHolder"], outputs: ["onValueChanged"] }, { kind: "component", type: i1$1.AXWysiwygViewComponent, selector: "ax-wysiwyg-view" }, { kind: "component", type: i1$1.AXWysiwygAlignmentComponent, selector: "ax-wysiwyg-alignment" }, { kind: "component", type: i1$1.AXWysiwygColorsComponent, selector: "ax-wysiwyg-colors" }, { kind: "component", type: i1$1.AXWysiwygFontStyleComponent, selector: "ax-wysiwyg-font-style" }, { kind: "component", type: i1$1.AXWysiwygHistoryComponent, selector: "ax-wysiwyg-history" }, { kind: "component", type: i1$1.AXWysiwygListComponent, selector: "ax-wysiwyg-list" }, { kind: "component", type: i1$1.AXWysiwygToolbarComponent, selector: "ax-wysiwyg-toolbar" }, { kind: "ngmodule", type: AXConversationModule }, { kind: "ngmodule", type: AXSkeletonModule }, { kind: "component", type: i2.AXSkeletonComponent, selector: "ax-skeleton", inputs: ["animated"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i1.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: ["like"], outputs: ["likeChange"] }, { kind: "component", type: i4.AXMenuOptionsComponent, selector: "ax-comment-menu-options" }, { kind: "component", type: i4.AXCommentReplyTextComponent, selector: "ax-comment-reply-text" }, { kind: "component", type: i4.AXCommentDateComponent, selector: "ax-comment-date" }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i5.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: i5.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i5.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items", "closeParentOnClick", "lockOnLoading"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXAvatarModule }, { kind: "ngmodule", type: AXImageModule }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "component", type: i6.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "component", type: i7.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "placement", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXFormatModule }, { kind: "ngmodule", type: AXFormModule }, { kind: "ngmodule", type: AXToolBarModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXDropdownButtonModule }, { kind: "component", type: i9.AXDropdownButtonComponent, selector: "ax-dropdown-button", inputs: ["disabled", "size", "color", "look", "text", "type", "mode"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "lookChange", "colorChange", "disabledChange"] }, { kind: "component", type: AXPUserAvatarComponent, selector: "axp-user-avatar", inputs: ["size", "userId"] }, { kind: "pipe", type: i10.AXFormatPipe, name: "format" }, { kind: "pipe", type: AsyncPipe, name: "async" }], animations: [
             trigger('fadeIn', [
                 transition(':enter', [
                     style({ opacity: 0, transform: 'translateY(10px)' }),
@@ -4007,9 +2450,9 @@ class AXMCommentPopupComponent extends AXBasePageComponent {
                 // Angular
                 CommonModule }, { kind: "ngmodule", type: 
                 // ACoreX
-                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: 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: AXTranslationModule }, { kind: "component", type: 
+                AXDecoratorModule }, { kind: "component", type: i1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i5.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "component", type: 
                 // Comment
-                AXMCommentComponent, selector: "axm-comment", inputs: ["refrenceType", "refrenceId", "subject"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.AXTranslatorPipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
+                AXMCommentComponent, selector: "axm-comment", inputs: ["refrenceType", "refrenceId", "subject"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i4$1.AXTranslatorPipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXMCommentPopupComponent, decorators: [{
             type: Component,
@@ -4369,7 +2812,7 @@ function routesFactory() {
                     children: [
                         {
                             path: ':id',
-                            loadComponent: () => Promise.resolve().then(function () { return chatPreview_component; }).then((c) => c.AXMChatPreviewComponent),
+                            loadComponent: () => Promise.resolve().then(function () { return chat_component; }).then((c) => c.AXMChatComponent),
                         },
                     ],
                 },
@@ -4415,7 +2858,7 @@ function routesFactory() {
 }
 class AXMConversationModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXMConversationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.12", ngImport: i0, type: AXMConversationModule, imports: [i1$3.AXPWidgetCoreModule, i2$3.AXPWorkflowModule, 
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.12", ngImport: i0, type: AXMConversationModule, imports: [i1$2.AXPWidgetCoreModule, i2$1.AXPWorkflowModule, 
             // Entity Modules
             AXMConversationTabEntityModule,
             AXMRoomEntityModule,
@@ -4599,5 +3042,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AXMChatComponent, AXMChatItemComponent, AXMChatManagementService, AXMChatPreviewComponent, AXMChatRealtimeService, AXMChatRealtimeServiceImpl, AXMChatService, AXMChatServiceImpl, AXMCommentComponent, AXMCommentManagementService, AXMCommentPopupComponent, AXMCommentPopupStartAction, AXMCommentPopupWorkflow, AXMCommentRealtimeService, AXMCommentRealtimeServiceImpl, AXMCommentService, AXMCommentServiceImpl, AXMCommentWidgetViewComponent, AXMConversationModule, AXMConversationTabEntityModule, AXMConversationTabService, AXMConversationTabServiceImpl, AXMMessageEntityModule, AXMMessageService, AXMMessageServiceImpl, AXMRoomEntityModule, AXMRoomService, AXMRoomServiceImpl, AXPCommentWidget, RootConfig, messageFactory, roomFactory, tabFactory };
+export { AXMChatComponent, AXMChatManagementService, AXMChatRealtimeService, AXMChatRealtimeServiceImpl, AXMChatService, AXMChatServiceImpl, AXMCommentComponent, AXMCommentManagementService, AXMCommentPopupComponent, AXMCommentPopupStartAction, AXMCommentPopupWorkflow, AXMCommentRealtimeService, AXMCommentRealtimeServiceImpl, AXMCommentService, AXMCommentServiceImpl, AXMCommentWidgetViewComponent, AXMConversationModule, AXMConversationTabEntityModule, AXMConversationTabService, AXMConversationTabServiceImpl, AXMMessageEntityModule, AXMMessageService, AXMMessageServiceImpl, AXMRoomEntityModule, AXMRoomService, AXMRoomServiceImpl, AXPCommentWidget, RootConfig, messageFactory, roomFactory, tabFactory };
 //# sourceMappingURL=acorex-modules-conversation.mjs.map