@acorex/modules 20.0.9 → 20.0.10

package/fesm2022/acorex-modules-conversation.mjs

@@ -1926,7 +1926,7 @@ class AXMChatItemComponent {
     constructor() {
         // Input
         this.data = input.required();
-        this.typing = input(false);
+        this.typing = input(null);
         this.lastMessageReaction = input(null);
         // Output
         this.pressChatItem = output();
@@ -2010,7 +2010,7 @@ class AXMChatItemComponent {
         return '';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: AXMChatItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.7", type: AXMChatItemComponent, isStandalone: true, selector: "axm-chat-item", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, typing: { classPropertyName: "typing", publicName: "typing", isSignal: true, isRequired: false, transformFunction: null }, lastMessageReaction: { classPropertyName: "lastMessageReaction", publicName: "lastMessageReaction", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pressChatItem: "pressChatItem" }, ngImport: i0, template: "<div\n  [id]=\"data().id\"\n  class=\"ax-cursor-pointer ax-p-4 ax-flex ax-items-center ax-justify-between ax-gap-4 ax-border-b ax-border-divider\"\n  (click)=\"onPressChatItem(data().id)\"\n>\n  <!-- Avatar and User Info Section -->\n  <div class=\"ax-flex ax-min-w-0 ax-gap-4 ax-flex-1\">\n    <!-- Avatar with Online Status -->\n    <div class=\"ax-flex-shrink-0\">\n      @if (chatName().isPrivate) {\n        <axp-user-avatar [size]=\"48\" [userId]=\"chatName().id\"></axp-user-avatar>\n      } @else {\n        <ax-avatar [size]=\"48\">\n          <ax-text class=\"ax-primary-lightest\">\n            <small class=\"ax-text-xs ax-font-semibold fas fa-users\"></small>\n          </ax-text>\n        </ax-avatar>\n      }\n      <!--Temp-->\n    </div>\n\n    <!-- User Details and Last Message -->\n    <div class=\"ax-flex ax-flex-col ax-min-w-0 ax-flex-1 ax-gap-1\">\n      <div class=\"ax-flex ax-items-center ax-justify-between ax-gap-2\">\n        <p class=\"ax-font-semibold ax-text-on-surface ax-truncate ax-py-1\" [title]=\"chatName().fullName\">\n          {{ chatName().fullName }}\n        </p>\n        <div class=\"ax-flex ax-items-center ax-gap-1\">\n          @if (messageSeenStatus()) {\n            <ax-icon class=\"ax-icon ax-text-success ax-size-5\" [class]=\"messageSeenStatus()\"></ax-icon>\n          }\n          @if (this.data().lastMessage) {\n            <span class=\"ax-text-xs ax-whitespace-nowrap\">\n              {{ formattedLastMessageDate() }}\n            </span>\n          }\n        </div>\n      </div>\n      <div class=\"ax-flex ax-items-center ax-justify-between ax-gap-2 ax-mt-1 ax-overflow-hidden\">\n        @if (typing()) {\n          <div class=\"ax-pb-1 ax-flex ax-justify-center ax-items-end ax-gap-1\">\n            <span class=\"ax-text-on-surface-light ax-font-semibold ax-capitalize ax-text-sm\">\n              {{ 'is-typing' | translate: { scope: 'conversation' } | async }}\n            </span>\n            <div class=\"typing-indicator\">\n              <span></span>\n              <span></span>\n              <span></span>\n            </div>\n          </div>\n        } @else {\n          <div class=\"ax-flex ax-items-center ax-gap-2 ax-text-sm ax-shrink ax-min-w-0\">\n            @if ((lastMessage().author?.fullName || lastMessage().author?.username) && !chatName().isPrivate) {\n              <span class=\"ax-text-on-surface-light ax-font-semibold ax-capitalize\">\n                {{ (lastMessage().author?.fullName || lastMessage().author?.username) + ': ' }}\n              </span>\n            }\n            @switch (lastMessage().contentType) {\n              @case ('image') {\n                <i class=\"fa-regular fa-image\"></i>\n              }\n              @case ('video') {\n                <i class=\"fa-regular fa-video\"></i>\n              }\n              @case ('file') {\n                <i class=\"fa-regular fa-file\"></i>\n              }\n              @case ('audio') {\n                <i class=\"fa-regular fa-microphone\"></i>\n              }\n              @case ('link') {\n                <i class=\"fa-regular fa-link\"></i>\n              }\n            }\n\n            <span class=\"ax-truncate ax-capitalize\">\n              {{ lastMessage().content }}\n            </span>\n          </div>\n        }\n        <div class=\"ax-flex ax-items-center ax-gap-2\">\n          @if (hasUnread()) {\n            <ax-badge color=\"primary\" [text]=\"unreadCount()\" class=\"ax-flex-shrink-0 ax-ml-auto\"></ax-badge>\n          }\n          <!-- @if (lastMessageReaction()) {\n            <div class=\"ax-flex ax-items-center ax-gap-1 ax-bg-surface ax-rounded-full ax-p-1 ax-px-2\">\n              <span class=\"ax-text-sm\">{{ lastMessageReaction() }}</span>\n              <span class=\"ax-text-xs\">{{ lastMessage().reactions.length }}</span>\n            </div>\n          } -->\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:block;width:100%}.typing-indicator{display:flex;align-items:center;padding-bottom:.3rem}.typing-indicator span{height:6px;width:6px;margin:0 1px;background-color:#9e9ea1;border-radius:50%;display:inline-block;animation:bounce 1.4s infinite ease-in-out both}.typing-indicator span:nth-child(1){animation-delay:-.32s}.typing-indicator span:nth-child(2){animation-delay:-.16s}@keyframes bounce{0%,80%,to{transform:scale(0)}40%{transform:scale(1)}}\n"], dependencies: [{ kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i1$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i2$2.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "component", type: AXPUserAvatarComponent, selector: "axp-user-avatar", inputs: ["size", "userId"] }, { kind: "ngmodule", type: AXAvatarModule }, { kind: "component", type: i3.AXAvatarComponent, selector: "ax-avatar", inputs: ["color", "size", "shape", "look"], outputs: ["sizeChange"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i4$1.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.7", type: AXMChatItemComponent, isStandalone: true, selector: "axm-chat-item", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, typing: { classPropertyName: "typing", publicName: "typing", isSignal: true, isRequired: false, transformFunction: null }, lastMessageReaction: { classPropertyName: "lastMessageReaction", publicName: "lastMessageReaction", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pressChatItem: "pressChatItem" }, ngImport: i0, template: "<div\n  [id]=\"data().id\"\n  class=\"ax-cursor-pointer ax-p-4 ax-flex ax-items-center ax-justify-between ax-gap-4 ax-border-b ax-border-divider\"\n  (click)=\"onPressChatItem(data().id)\"\n>\n  <!-- Avatar and User Info Section -->\n  <div class=\"ax-flex ax-min-w-0 ax-gap-4 ax-flex-1\">\n    <!-- Avatar with Online Status -->\n    <div class=\"ax-flex-shrink-0\">\n      @if (chatName().isPrivate) {\n        <axp-user-avatar [size]=\"48\" [userId]=\"chatName().id\"></axp-user-avatar>\n      } @else {\n        <ax-avatar [size]=\"48\">\n          <ax-text class=\"ax-primary-lightest\">\n            <small class=\"ax-text-xs ax-font-semibold fas fa-users\"></small>\n          </ax-text>\n        </ax-avatar>\n      }\n      <!--Temp-->\n    </div>\n\n    <!-- User Details and Last Message -->\n    <div class=\"ax-flex ax-flex-col ax-min-w-0 ax-flex-1 ax-gap-1\">\n      <div class=\"ax-flex ax-items-center ax-justify-between ax-gap-2\">\n        <p class=\"ax-font-semibold ax-text-on-surface ax-truncate ax-py-1\" [title]=\"chatName().fullName\">\n          {{ chatName().fullName }}\n        </p>\n        <div class=\"ax-flex ax-items-center ax-gap-1\">\n          @if (messageSeenStatus()) {\n            <ax-icon class=\"ax-icon ax-text-success ax-size-5\" [class]=\"messageSeenStatus()\"></ax-icon>\n          }\n          @if (this.data().lastMessage) {\n            <span class=\"ax-text-xs ax-whitespace-nowrap\">\n              {{ formattedLastMessageDate() }}\n            </span>\n          }\n        </div>\n      </div>\n      <div class=\"ax-flex ax-items-center ax-justify-between ax-gap-2 ax-mt-1 ax-overflow-hidden\">\n        @if (typing()?.isTyping) {\n          <div class=\"ax-pb-1 ax-flex ax-justify-center ax-items-end ax-gap-1\">\n            <span class=\"ax-text-on-surface-light ax-font-semibold ax-capitalize ax-whitespace-nowrap ax-text-sm\">\n              @if (!chatName().isPrivate) {\n                {{ typing()?.user }}\n              }\n              {{ 'is-typing' | translate: { scope: 'conversation' } | async }}\n            </span>\n            <div class=\"typing-indicator\">\n              <span></span>\n              <span></span>\n              <span></span>\n            </div>\n          </div>\n        } @else {\n          <div class=\"ax-flex ax-items-center ax-gap-2 ax-text-sm ax-shrink ax-min-w-0\">\n            @if ((lastMessage().author?.fullName || lastMessage().author?.username) && !chatName().isPrivate) {\n              <span class=\"ax-text-on-surface-light ax-font-semibold ax-capitalize ax-whitespace-nowrap\">\n                {{ (lastMessage().author?.fullName || lastMessage().author?.username) + ': ' }}\n              </span>\n            }\n            @switch (lastMessage().contentType) {\n              @case ('image') {\n                <i class=\"fa-regular fa-image\"></i>\n              }\n              @case ('video') {\n                <i class=\"fa-regular fa-video\"></i>\n              }\n              @case ('file') {\n                <i class=\"fa-regular fa-file\"></i>\n              }\n              @case ('audio') {\n                <i class=\"fa-regular fa-microphone\"></i>\n              }\n              @case ('link') {\n                <i class=\"fa-regular fa-link\"></i>\n              }\n            }\n\n            <span class=\"ax-truncate ax-capitalize\">\n              {{ lastMessage().content }}\n            </span>\n          </div>\n        }\n        <div class=\"ax-flex ax-items-center ax-gap-2\">\n          @if (hasUnread()) {\n            <ax-badge color=\"primary\" [text]=\"unreadCount()\" class=\"ax-flex-shrink-0 ax-ml-auto\"></ax-badge>\n          }\n          <!-- @if (lastMessageReaction()) {\n            <div class=\"ax-flex ax-items-center ax-gap-1 ax-bg-surface ax-rounded-full ax-p-1 ax-px-2\">\n              <span class=\"ax-text-sm\">{{ lastMessageReaction() }}</span>\n              <span class=\"ax-text-xs\">{{ lastMessage().reactions.length }}</span>\n            </div>\n          } -->\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:block;width:100%}.typing-indicator{display:flex;align-items:center;padding-bottom:.3rem}.typing-indicator span{height:6px;width:6px;margin:0 1px;background-color:#9e9ea1;border-radius:50%;display:inline-block;animation:bounce 1.4s infinite ease-in-out both}.typing-indicator span:nth-child(1){animation-delay:-.32s}.typing-indicator span:nth-child(2){animation-delay:-.16s}@keyframes bounce{0%,80%,to{transform:scale(0)}40%{transform:scale(1)}}\n"], dependencies: [{ kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i1$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i2$2.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "component", type: AXPUserAvatarComponent, selector: "axp-user-avatar", inputs: ["size", "userId"] }, { kind: "ngmodule", type: AXAvatarModule }, { kind: "component", type: i3.AXAvatarComponent, selector: "ax-avatar", inputs: ["color", "size", "shape", "look"], outputs: ["sizeChange"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i4$1.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: AXMChatItemComponent, decorators: [{
             type: Component,
@@ -2022,7 +2022,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImpor
                         AXDecoratorModule,
                         AXTranslationModule,
                         AsyncPipe,
-                    ], template: "<div\n  [id]=\"data().id\"\n  class=\"ax-cursor-pointer ax-p-4 ax-flex ax-items-center ax-justify-between ax-gap-4 ax-border-b ax-border-divider\"\n  (click)=\"onPressChatItem(data().id)\"\n>\n  <!-- Avatar and User Info Section -->\n  <div class=\"ax-flex ax-min-w-0 ax-gap-4 ax-flex-1\">\n    <!-- Avatar with Online Status -->\n    <div class=\"ax-flex-shrink-0\">\n      @if (chatName().isPrivate) {\n        <axp-user-avatar [size]=\"48\" [userId]=\"chatName().id\"></axp-user-avatar>\n      } @else {\n        <ax-avatar [size]=\"48\">\n          <ax-text class=\"ax-primary-lightest\">\n            <small class=\"ax-text-xs ax-font-semibold fas fa-users\"></small>\n          </ax-text>\n        </ax-avatar>\n      }\n      <!--Temp-->\n    </div>\n\n    <!-- User Details and Last Message -->\n    <div class=\"ax-flex ax-flex-col ax-min-w-0 ax-flex-1 ax-gap-1\">\n      <div class=\"ax-flex ax-items-center ax-justify-between ax-gap-2\">\n        <p class=\"ax-font-semibold ax-text-on-surface ax-truncate ax-py-1\" [title]=\"chatName().fullName\">\n          {{ chatName().fullName }}\n        </p>\n        <div class=\"ax-flex ax-items-center ax-gap-1\">\n          @if (messageSeenStatus()) {\n            <ax-icon class=\"ax-icon ax-text-success ax-size-5\" [class]=\"messageSeenStatus()\"></ax-icon>\n          }\n          @if (this.data().lastMessage) {\n            <span class=\"ax-text-xs ax-whitespace-nowrap\">\n              {{ formattedLastMessageDate() }}\n            </span>\n          }\n        </div>\n      </div>\n      <div class=\"ax-flex ax-items-center ax-justify-between ax-gap-2 ax-mt-1 ax-overflow-hidden\">\n        @if (typing()) {\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-text-sm\">\n              {{ 'is-typing' | translate: { scope: 'conversation' } | async }}\n            </span>\n            <div class=\"typing-indicator\">\n              <span></span>\n              <span></span>\n              <span></span>\n            </div>\n          </div>\n        } @else {\n          <div class=\"ax-flex ax-items-center ax-gap-2 ax-text-sm ax-shrink ax-min-w-0\">\n            @if ((lastMessage().author?.fullName || lastMessage().author?.username) && !chatName().isPrivate) {\n              <span class=\"ax-text-on-surface-light ax-font-semibold ax-capitalize\">\n                {{ (lastMessage().author?.fullName || lastMessage().author?.username) + ': ' }}\n              </span>\n            }\n            @switch (lastMessage().contentType) {\n              @case ('image') {\n                <i class=\"fa-regular fa-image\"></i>\n              }\n              @case ('video') {\n                <i class=\"fa-regular fa-video\"></i>\n              }\n              @case ('file') {\n                <i class=\"fa-regular fa-file\"></i>\n              }\n              @case ('audio') {\n                <i class=\"fa-regular fa-microphone\"></i>\n              }\n              @case ('link') {\n                <i class=\"fa-regular fa-link\"></i>\n              }\n            }\n\n            <span class=\"ax-truncate ax-capitalize\">\n              {{ lastMessage().content }}\n            </span>\n          </div>\n        }\n        <div class=\"ax-flex ax-items-center ax-gap-2\">\n          @if (hasUnread()) {\n            <ax-badge color=\"primary\" [text]=\"unreadCount()\" class=\"ax-flex-shrink-0 ax-ml-auto\"></ax-badge>\n          }\n          <!-- @if (lastMessageReaction()) {\n            <div class=\"ax-flex ax-items-center ax-gap-1 ax-bg-surface ax-rounded-full ax-p-1 ax-px-2\">\n              <span class=\"ax-text-sm\">{{ lastMessageReaction() }}</span>\n              <span class=\"ax-text-xs\">{{ lastMessage().reactions.length }}</span>\n            </div>\n          } -->\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:block;width:100%}.typing-indicator{display:flex;align-items:center;padding-bottom:.3rem}.typing-indicator span{height:6px;width:6px;margin:0 1px;background-color:#9e9ea1;border-radius:50%;display:inline-block;animation:bounce 1.4s infinite ease-in-out both}.typing-indicator span:nth-child(1){animation-delay:-.32s}.typing-indicator span:nth-child(2){animation-delay:-.16s}@keyframes bounce{0%,80%,to{transform:scale(0)}40%{transform:scale(1)}}\n"] }]
+                    ], template: "<div\n  [id]=\"data().id\"\n  class=\"ax-cursor-pointer ax-p-4 ax-flex ax-items-center ax-justify-between ax-gap-4 ax-border-b ax-border-divider\"\n  (click)=\"onPressChatItem(data().id)\"\n>\n  <!-- Avatar and User Info Section -->\n  <div class=\"ax-flex ax-min-w-0 ax-gap-4 ax-flex-1\">\n    <!-- Avatar with Online Status -->\n    <div class=\"ax-flex-shrink-0\">\n      @if (chatName().isPrivate) {\n        <axp-user-avatar [size]=\"48\" [userId]=\"chatName().id\"></axp-user-avatar>\n      } @else {\n        <ax-avatar [size]=\"48\">\n          <ax-text class=\"ax-primary-lightest\">\n            <small class=\"ax-text-xs ax-font-semibold fas fa-users\"></small>\n          </ax-text>\n        </ax-avatar>\n      }\n      <!--Temp-->\n    </div>\n\n    <!-- User Details and Last Message -->\n    <div class=\"ax-flex ax-flex-col ax-min-w-0 ax-flex-1 ax-gap-1\">\n      <div class=\"ax-flex ax-items-center ax-justify-between ax-gap-2\">\n        <p class=\"ax-font-semibold ax-text-on-surface ax-truncate ax-py-1\" [title]=\"chatName().fullName\">\n          {{ chatName().fullName }}\n        </p>\n        <div class=\"ax-flex ax-items-center ax-gap-1\">\n          @if (messageSeenStatus()) {\n            <ax-icon class=\"ax-icon ax-text-success ax-size-5\" [class]=\"messageSeenStatus()\"></ax-icon>\n          }\n          @if (this.data().lastMessage) {\n            <span class=\"ax-text-xs ax-whitespace-nowrap\">\n              {{ formattedLastMessageDate() }}\n            </span>\n          }\n        </div>\n      </div>\n      <div class=\"ax-flex ax-items-center ax-justify-between ax-gap-2 ax-mt-1 ax-overflow-hidden\">\n        @if (typing()?.isTyping) {\n          <div class=\"ax-pb-1 ax-flex ax-justify-center ax-items-end ax-gap-1\">\n            <span class=\"ax-text-on-surface-light ax-font-semibold ax-capitalize ax-whitespace-nowrap ax-text-sm\">\n              @if (!chatName().isPrivate) {\n                {{ typing()?.user }}\n              }\n              {{ 'is-typing' | translate: { scope: 'conversation' } | async }}\n            </span>\n            <div class=\"typing-indicator\">\n              <span></span>\n              <span></span>\n              <span></span>\n            </div>\n          </div>\n        } @else {\n          <div class=\"ax-flex ax-items-center ax-gap-2 ax-text-sm ax-shrink ax-min-w-0\">\n            @if ((lastMessage().author?.fullName || lastMessage().author?.username) && !chatName().isPrivate) {\n              <span class=\"ax-text-on-surface-light ax-font-semibold ax-capitalize ax-whitespace-nowrap\">\n                {{ (lastMessage().author?.fullName || lastMessage().author?.username) + ': ' }}\n              </span>\n            }\n            @switch (lastMessage().contentType) {\n              @case ('image') {\n                <i class=\"fa-regular fa-image\"></i>\n              }\n              @case ('video') {\n                <i class=\"fa-regular fa-video\"></i>\n              }\n              @case ('file') {\n                <i class=\"fa-regular fa-file\"></i>\n              }\n              @case ('audio') {\n                <i class=\"fa-regular fa-microphone\"></i>\n              }\n              @case ('link') {\n                <i class=\"fa-regular fa-link\"></i>\n              }\n            }\n\n            <span class=\"ax-truncate ax-capitalize\">\n              {{ lastMessage().content }}\n            </span>\n          </div>\n        }\n        <div class=\"ax-flex ax-items-center ax-gap-2\">\n          @if (hasUnread()) {\n            <ax-badge color=\"primary\" [text]=\"unreadCount()\" class=\"ax-flex-shrink-0 ax-ml-auto\"></ax-badge>\n          }\n          <!-- @if (lastMessageReaction()) {\n            <div class=\"ax-flex ax-items-center ax-gap-1 ax-bg-surface ax-rounded-full ax-p-1 ax-px-2\">\n              <span class=\"ax-text-sm\">{{ lastMessageReaction() }}</span>\n              <span class=\"ax-text-xs\">{{ lastMessage().reactions.length }}</span>\n            </div>\n          } -->\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:block;width:100%}.typing-indicator{display:flex;align-items:center;padding-bottom:.3rem}.typing-indicator span{height:6px;width:6px;margin:0 1px;background-color:#9e9ea1;border-radius:50%;display:inline-block;animation:bounce 1.4s infinite ease-in-out both}.typing-indicator span:nth-child(1){animation-delay:-.32s}.typing-indicator span:nth-child(2){animation-delay:-.16s}@keyframes bounce{0%,80%,to{transform:scale(0)}40%{transform:scale(1)}}\n"] }]
         }] });
 
 class AXMChatComponent extends AXPPageLayoutBaseComponent {
@@ -2407,7 +2407,7 @@ class AXMChatComponent extends AXPPageLayoutBaseComponent {
                 useExisting: AXMChatComponent,
             },
             AXUnsubscriber,
-        ], viewQueries: [{ propertyName: "tab", first: true, predicate: ["tab"], descendants: true, isSignal: true }, { propertyName: "container", first: true, predicate: ["container"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<axp-page-layout #container>\n  <axp-layout-start-side class=\"ax-border-e ax-lightest-surface ax-h-full\">\n    <axp-layout-header>\n      <axp-layout-title>{{ 'module-name' | translate: { scope: 'conversation' } | async }}</axp-layout-title>\n      <axp-layout-toolbar>\n        <ax-search-box\n          #searchInput\n          look=\"solid\"\n          [placeholder]=\"placeholder()\"\n          [value]=\"searchQuery()\"\n          (onValueChanged)=\"onSearch($event.value)\"\n          class=\"ax-w-full\"\n        >\n          <ax-clear-button></ax-clear-button>\n        </ax-search-box>\n      </axp-layout-toolbar>\n    </axp-layout-header>\n    <axp-layout-content class=\"ax-flex ax-flex-col ax-min-h-0 ax-max-w-80\">\n      @if (!layoutService.isMobileDevice()) {\n        <ng-container [ngTemplateOutlet]=\"template\"></ng-container>\n      }\n    </axp-layout-content>\n  </axp-layout-start-side>\n\n  <axp-page-content style=\"height: calc(100vh - 22rem)\">\n    @if (selectedRoom()) {\n      <router-outlet></router-outlet>\n    } @else if (layoutService.isMobileDevice()) {\n      <ax-search-box\n        #searchInput\n        look=\"solid\"\n        [placeholder]=\"placeholder()\"\n        [value]=\"searchQuery()\"\n        (onValueChanged)=\"onSearch($event.value)\"\n        class=\"ax-w-full\"\n      >\n        <ax-clear-button></ax-clear-button>\n      </ax-search-box>\n      <ng-container [ngTemplateOutlet]=\"template\"></ng-container>\n    }\n  </axp-page-content>\n</axp-page-layout>\n\n<ng-template #template>\n  <!-- Tabs -->\n  <div class=\"ax-px-4\">\n    @if (hasUnread()) {\n      <ax-tabs\n        #tab\n        class=\"ax-text-neutral-400\"\n        [look]=\"'with-line'\"\n        [location]=\"'bottom'\"\n        [fitParent]=\"true\"\n        (onActiveTabChanged)=\"onTabChange($event)\"\n      >\n        <ax-tab-item text=\"All\" [active]=\"activeTab() === 0\">\n          <ax-suffix>\n            <ax-badge\n              [text]=\"totalCount().toString()\"\n              [color]=\"activeTab() === 0 ? 'primary' : 'secondary'\"\n              class=\"ax-min-w-[1.5rem] ax-justify-center\"\n            ></ax-badge>\n          </ax-suffix>\n        </ax-tab-item>\n        <ax-tab-item text=\"Unread\" [active]=\"activeTab() === 1\">\n          <ax-suffix>\n            <ax-badge\n              [text]=\"unreadCount().toString()\"\n              [color]=\"activeTab() === 1 ? 'primary' : 'secondary'\"\n              class=\"ax-min-w-[1.5rem] ax-justify-center\"\n            ></ax-badge>\n          </ax-suffix>\n        </ax-tab-item>\n      </ax-tabs>\n    }\n  </div>\n\n  <!-- Chat List Content -->\n  <div\n    class=\"ax-flex-1 ax-overflow-hidden ax-flex ax-flex-col ax-justify-between ax-min-w-80\"\n    [class.ax-border-t]=\"hasUnread()\"\n  >\n    <!-- Loading State -->\n    @if (isLoading()) {\n      <div class=\"ax-p-4 ax-space-y-4\">\n        @for (_ of [1, 2, 3, 4, 5, 6]; track $index) {\n          <div class=\"ax-flex ax-items-center ax-space-x-3\">\n            <ax-skeleton [animated]=\"true\" class=\"ax-w-12 ax-h-12 ax-rounded-full\"></ax-skeleton>\n            <div class=\"ax-flex-1 ax-space-y-2\">\n              <ax-skeleton [animated]=\"true\" class=\"ax-w-3/4 ax-h-4 ax-rounded-md\"></ax-skeleton>\n              <ax-skeleton [animated]=\"true\" class=\"ax-w-1/2 ax-h-3 ax-rounded-md\"></ax-skeleton>\n            </div>\n          </div>\n        }\n      </div>\n    }\n\n    <!-- Error State -->\n    @if (error()) {\n      <div class=\"ax-flex ax-flex-col ax-items-center ax-justify-center ax-h-full ax-p-4 ax-text-center\">\n        <ax-icon class=\"ax-text-danger ax-text-5xl ax-mb-3\">\n          <i class=\"fa-light fa-circle-exclamation\"></i>\n        </ax-icon>\n        <p class=\"ax-font-semibold ax-text-lg\">\n          {{ 'chat-error' | translate: { scope: 'conversation' } | async }}\n        </p>\n        <p class=\"ax-font-semibold ax-text-lg\">\n          {{ 'chat-try-again' | translate: { scope: 'conversation' } | async }}\n        </p>\n        <p class=\"ax-text-secondary ax-mb-4\">{{ error() }}</p>\n        <ax-button\n          [text]=\"'try-again' | translate: { scope: 'conversation' } | async\"\n          color=\"primary\"\n          (onClick)=\"refreshChat()\"\n        ></ax-button>\n      </div>\n    }\n\n    <!-- Chat List -->\n    @if (!isLoading() && !error()) {\n      <div class=\"ax-flex-1 ax-overflow-y-auto\">\n        @for (i of filteredRooms(); track i.id) {\n          <axm-chat-item\n            [data]=\"i\"\n            [typing]=\"$any(typingStatus()[i.id])?.isTyping || false\"\n            [lastMessageReaction]=\"i.lastMessage?.reactions?.[0]?.type ?? null\"\n            [attr.data-id]=\"i.id\"\n            (click)=\"openChat(i.id)\"\n            [class.ax-bg-dark]=\"selectedRoom()?.id === i.id\"\n            class=\"ax-transition-all ax-duration-100 hover:ax-bg-surface\"\n            [@fadeIn]\n            tabindex=\"0\"\n            (keydown.enter)=\"openChat(i.id)\"\n            role=\"button\"\n          ></axm-chat-item>\n        }\n\n        <!-- Empty State -->\n        @empty {\n          <div class=\"ax-p-4 ax-font-medium ax-text-center ax-text-secondary\">\n            @if (isSearching()) {\n              No chats found matching your search\n            } @else {\n              No chats available\n            }\n          </div>\n        }\n      </div>\n    }\n\n    <!-- Footer Content -->\n    <div class=\"ax-border-t ax-border-divider ax-bg-lightest ax-p-4\">\n      <ax-button class=\"ax-w-full\" color=\"primary\" text=\"New Conversation\" (onClick)=\"onNewConversation()\">\n        <ax-prefix>\n          <ax-icon>\n            <i class=\"fa-solid fa-plus\"></i>\n          </ax-icon>\n        </ax-prefix>\n      </ax-button>\n    </div>\n  </div>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "component", type: AXMChatItemComponent, selector: "axm-chat-item", inputs: ["data", "typing", "lastMessageReaction"], outputs: ["pressChatItem"] }, { kind: "ngmodule", type: 
+        ], viewQueries: [{ propertyName: "tab", first: true, predicate: ["tab"], descendants: true, isSignal: true }, { propertyName: "container", first: true, predicate: ["container"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<axp-page-layout #container>\n  <axp-layout-start-side class=\"ax-border-e ax-lightest-surface ax-h-full\">\n    <axp-layout-header>\n      <axp-layout-title>{{ 'module-name' | translate: { scope: 'conversation' } | async }}</axp-layout-title>\n      <axp-layout-toolbar>\n        <ax-search-box\n          #searchInput\n          look=\"solid\"\n          [placeholder]=\"placeholder()\"\n          [value]=\"searchQuery()\"\n          (onValueChanged)=\"onSearch($event.value)\"\n          class=\"ax-w-full\"\n        >\n          <ax-clear-button></ax-clear-button>\n        </ax-search-box>\n      </axp-layout-toolbar>\n    </axp-layout-header>\n    <axp-layout-content class=\"ax-flex ax-flex-col ax-min-h-0 ax-max-w-80\">\n      @if (!layoutService.isMobileDevice()) {\n        <ng-container [ngTemplateOutlet]=\"template\"></ng-container>\n      }\n    </axp-layout-content>\n  </axp-layout-start-side>\n\n  <axp-page-content style=\"height: calc(100vh - 22rem)\">\n    @if (selectedRoom()) {\n      <router-outlet></router-outlet>\n    } @else if (layoutService.isMobileDevice()) {\n      <ax-search-box\n        #searchInput\n        look=\"solid\"\n        [placeholder]=\"placeholder()\"\n        [value]=\"searchQuery()\"\n        (onValueChanged)=\"onSearch($event.value)\"\n        class=\"ax-w-full\"\n      >\n        <ax-clear-button></ax-clear-button>\n      </ax-search-box>\n      <ng-container [ngTemplateOutlet]=\"template\"></ng-container>\n    }\n  </axp-page-content>\n</axp-page-layout>\n\n<ng-template #template>\n  <!-- Tabs -->\n  <div class=\"ax-px-4\">\n    @if (hasUnread()) {\n      <ax-tabs\n        #tab\n        class=\"ax-text-neutral-400\"\n        [look]=\"'with-line'\"\n        [location]=\"'bottom'\"\n        [fitParent]=\"true\"\n        (onActiveTabChanged)=\"onTabChange($event)\"\n      >\n        <ax-tab-item text=\"All\" [active]=\"activeTab() === 0\">\n          <ax-suffix>\n            <ax-badge\n              [text]=\"totalCount().toString()\"\n              [color]=\"activeTab() === 0 ? 'primary' : 'secondary'\"\n              class=\"ax-min-w-[1.5rem] ax-justify-center\"\n            ></ax-badge>\n          </ax-suffix>\n        </ax-tab-item>\n        <ax-tab-item text=\"Unread\" [active]=\"activeTab() === 1\">\n          <ax-suffix>\n            <ax-badge\n              [text]=\"unreadCount().toString()\"\n              [color]=\"activeTab() === 1 ? 'primary' : 'secondary'\"\n              class=\"ax-min-w-[1.5rem] ax-justify-center\"\n            ></ax-badge>\n          </ax-suffix>\n        </ax-tab-item>\n      </ax-tabs>\n    }\n  </div>\n\n  <!-- Chat List Content -->\n  <div\n    class=\"ax-flex-1 ax-overflow-hidden ax-flex ax-flex-col ax-justify-between ax-min-w-80\"\n    [class.ax-border-t]=\"hasUnread()\"\n  >\n    <!-- Loading State -->\n    @if (isLoading()) {\n      <div class=\"ax-p-4 ax-space-y-4\">\n        @for (_ of [1, 2, 3, 4, 5, 6]; track $index) {\n          <div class=\"ax-flex ax-items-center ax-space-x-3\">\n            <ax-skeleton [animated]=\"true\" class=\"ax-w-12 ax-h-12 ax-rounded-full\"></ax-skeleton>\n            <div class=\"ax-flex-1 ax-space-y-2\">\n              <ax-skeleton [animated]=\"true\" class=\"ax-w-3/4 ax-h-4 ax-rounded-md\"></ax-skeleton>\n              <ax-skeleton [animated]=\"true\" class=\"ax-w-1/2 ax-h-3 ax-rounded-md\"></ax-skeleton>\n            </div>\n          </div>\n        }\n      </div>\n    }\n\n    <!-- Error State -->\n    @if (error()) {\n      <div class=\"ax-flex ax-flex-col ax-items-center ax-justify-center ax-h-full ax-p-4 ax-text-center\">\n        <ax-icon class=\"ax-text-danger ax-text-5xl ax-mb-3\">\n          <i class=\"fa-light fa-circle-exclamation\"></i>\n        </ax-icon>\n        <p class=\"ax-font-semibold ax-text-lg\">\n          {{ 'chat-error' | translate: { scope: 'conversation' } | async }}\n        </p>\n        <p class=\"ax-font-semibold ax-text-lg\">\n          {{ 'chat-try-again' | translate: { scope: 'conversation' } | async }}\n        </p>\n        <p class=\"ax-text-secondary ax-mb-4\">{{ error() }}</p>\n        <ax-button\n          [text]=\"'try-again' | translate: { scope: 'conversation' } | async\"\n          color=\"primary\"\n          (onClick)=\"refreshChat()\"\n        ></ax-button>\n      </div>\n    }\n\n    <!-- Chat List -->\n    @if (!isLoading() && !error()) {\n      <div class=\"ax-flex-1 ax-overflow-y-auto\">\n        @for (i of filteredRooms(); track i.id) {\n          <axm-chat-item\n            [data]=\"i\"\n            [typing]=\"$any(typingStatus()[i.id])\"\n            [lastMessageReaction]=\"i.lastMessage?.reactions?.[0]?.type ?? null\"\n            [attr.data-id]=\"i.id\"\n            (click)=\"openChat(i.id)\"\n            [class.ax-bg-dark]=\"selectedRoom()?.id === i.id\"\n            class=\"ax-transition-all ax-duration-100 hover:ax-bg-surface\"\n            [@fadeIn]\n            tabindex=\"0\"\n            (keydown.enter)=\"openChat(i.id)\"\n            role=\"button\"\n          ></axm-chat-item>\n        }\n\n        <!-- Empty State -->\n        @empty {\n          <div class=\"ax-p-4 ax-font-medium ax-text-center ax-text-secondary\">\n            @if (isSearching()) {\n              No chats found matching your search\n            } @else {\n              No chats available\n            }\n          </div>\n        }\n      </div>\n    }\n\n    <!-- Footer Content -->\n    <div class=\"ax-border-t ax-border-divider ax-bg-lightest ax-p-4\">\n      <ax-button class=\"ax-w-full\" color=\"primary\" text=\"New Conversation\" (onClick)=\"onNewConversation()\">\n        <ax-prefix>\n          <ax-icon>\n            <i class=\"fa-solid fa-plus\"></i>\n          </ax-icon>\n        </ax-prefix>\n      </ax-button>\n    </div>\n  </div>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "component", type: AXMChatItemComponent, selector: "axm-chat-item", inputs: ["data", "typing", "lastMessageReaction"], outputs: ["pressChatItem"] }, { kind: "ngmodule", type: 
                 // Common Modules
                 CommonModule }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i2$3.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "ngmodule", type: 
                 // Acorex Core Modules
@@ -2473,7 +2473,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImpor
                                 animate('300ms ease-out', style({ opacity: 1, transform: 'translateY(0)' })),
                             ]),
                         ]),
-                    ], template: "<axp-page-layout #container>\n  <axp-layout-start-side class=\"ax-border-e ax-lightest-surface ax-h-full\">\n    <axp-layout-header>\n      <axp-layout-title>{{ 'module-name' | translate: { scope: 'conversation' } | async }}</axp-layout-title>\n      <axp-layout-toolbar>\n        <ax-search-box\n          #searchInput\n          look=\"solid\"\n          [placeholder]=\"placeholder()\"\n          [value]=\"searchQuery()\"\n          (onValueChanged)=\"onSearch($event.value)\"\n          class=\"ax-w-full\"\n        >\n          <ax-clear-button></ax-clear-button>\n        </ax-search-box>\n      </axp-layout-toolbar>\n    </axp-layout-header>\n    <axp-layout-content class=\"ax-flex ax-flex-col ax-min-h-0 ax-max-w-80\">\n      @if (!layoutService.isMobileDevice()) {\n        <ng-container [ngTemplateOutlet]=\"template\"></ng-container>\n      }\n    </axp-layout-content>\n  </axp-layout-start-side>\n\n  <axp-page-content style=\"height: calc(100vh - 22rem)\">\n    @if (selectedRoom()) {\n      <router-outlet></router-outlet>\n    } @else if (layoutService.isMobileDevice()) {\n      <ax-search-box\n        #searchInput\n        look=\"solid\"\n        [placeholder]=\"placeholder()\"\n        [value]=\"searchQuery()\"\n        (onValueChanged)=\"onSearch($event.value)\"\n        class=\"ax-w-full\"\n      >\n        <ax-clear-button></ax-clear-button>\n      </ax-search-box>\n      <ng-container [ngTemplateOutlet]=\"template\"></ng-container>\n    }\n  </axp-page-content>\n</axp-page-layout>\n\n<ng-template #template>\n  <!-- Tabs -->\n  <div class=\"ax-px-4\">\n    @if (hasUnread()) {\n      <ax-tabs\n        #tab\n        class=\"ax-text-neutral-400\"\n        [look]=\"'with-line'\"\n        [location]=\"'bottom'\"\n        [fitParent]=\"true\"\n        (onActiveTabChanged)=\"onTabChange($event)\"\n      >\n        <ax-tab-item text=\"All\" [active]=\"activeTab() === 0\">\n          <ax-suffix>\n            <ax-badge\n              [text]=\"totalCount().toString()\"\n              [color]=\"activeTab() === 0 ? 'primary' : 'secondary'\"\n              class=\"ax-min-w-[1.5rem] ax-justify-center\"\n            ></ax-badge>\n          </ax-suffix>\n        </ax-tab-item>\n        <ax-tab-item text=\"Unread\" [active]=\"activeTab() === 1\">\n          <ax-suffix>\n            <ax-badge\n              [text]=\"unreadCount().toString()\"\n              [color]=\"activeTab() === 1 ? 'primary' : 'secondary'\"\n              class=\"ax-min-w-[1.5rem] ax-justify-center\"\n            ></ax-badge>\n          </ax-suffix>\n        </ax-tab-item>\n      </ax-tabs>\n    }\n  </div>\n\n  <!-- Chat List Content -->\n  <div\n    class=\"ax-flex-1 ax-overflow-hidden ax-flex ax-flex-col ax-justify-between ax-min-w-80\"\n    [class.ax-border-t]=\"hasUnread()\"\n  >\n    <!-- Loading State -->\n    @if (isLoading()) {\n      <div class=\"ax-p-4 ax-space-y-4\">\n        @for (_ of [1, 2, 3, 4, 5, 6]; track $index) {\n          <div class=\"ax-flex ax-items-center ax-space-x-3\">\n            <ax-skeleton [animated]=\"true\" class=\"ax-w-12 ax-h-12 ax-rounded-full\"></ax-skeleton>\n            <div class=\"ax-flex-1 ax-space-y-2\">\n              <ax-skeleton [animated]=\"true\" class=\"ax-w-3/4 ax-h-4 ax-rounded-md\"></ax-skeleton>\n              <ax-skeleton [animated]=\"true\" class=\"ax-w-1/2 ax-h-3 ax-rounded-md\"></ax-skeleton>\n            </div>\n          </div>\n        }\n      </div>\n    }\n\n    <!-- Error State -->\n    @if (error()) {\n      <div class=\"ax-flex ax-flex-col ax-items-center ax-justify-center ax-h-full ax-p-4 ax-text-center\">\n        <ax-icon class=\"ax-text-danger ax-text-5xl ax-mb-3\">\n          <i class=\"fa-light fa-circle-exclamation\"></i>\n        </ax-icon>\n        <p class=\"ax-font-semibold ax-text-lg\">\n          {{ 'chat-error' | translate: { scope: 'conversation' } | async }}\n        </p>\n        <p class=\"ax-font-semibold ax-text-lg\">\n          {{ 'chat-try-again' | translate: { scope: 'conversation' } | async }}\n        </p>\n        <p class=\"ax-text-secondary ax-mb-4\">{{ error() }}</p>\n        <ax-button\n          [text]=\"'try-again' | translate: { scope: 'conversation' } | async\"\n          color=\"primary\"\n          (onClick)=\"refreshChat()\"\n        ></ax-button>\n      </div>\n    }\n\n    <!-- Chat List -->\n    @if (!isLoading() && !error()) {\n      <div class=\"ax-flex-1 ax-overflow-y-auto\">\n        @for (i of filteredRooms(); track i.id) {\n          <axm-chat-item\n            [data]=\"i\"\n            [typing]=\"$any(typingStatus()[i.id])?.isTyping || false\"\n            [lastMessageReaction]=\"i.lastMessage?.reactions?.[0]?.type ?? null\"\n            [attr.data-id]=\"i.id\"\n            (click)=\"openChat(i.id)\"\n            [class.ax-bg-dark]=\"selectedRoom()?.id === i.id\"\n            class=\"ax-transition-all ax-duration-100 hover:ax-bg-surface\"\n            [@fadeIn]\n            tabindex=\"0\"\n            (keydown.enter)=\"openChat(i.id)\"\n            role=\"button\"\n          ></axm-chat-item>\n        }\n\n        <!-- Empty State -->\n        @empty {\n          <div class=\"ax-p-4 ax-font-medium ax-text-center ax-text-secondary\">\n            @if (isSearching()) {\n              No chats found matching your search\n            } @else {\n              No chats available\n            }\n          </div>\n        }\n      </div>\n    }\n\n    <!-- Footer Content -->\n    <div class=\"ax-border-t ax-border-divider ax-bg-lightest ax-p-4\">\n      <ax-button class=\"ax-w-full\" color=\"primary\" text=\"New Conversation\" (onClick)=\"onNewConversation()\">\n        <ax-prefix>\n          <ax-icon>\n            <i class=\"fa-solid fa-plus\"></i>\n          </ax-icon>\n        </ax-prefix>\n      </ax-button>\n    </div>\n  </div>\n</ng-template>\n" }]
+                    ], template: "<axp-page-layout #container>\n  <axp-layout-start-side class=\"ax-border-e ax-lightest-surface ax-h-full\">\n    <axp-layout-header>\n      <axp-layout-title>{{ 'module-name' | translate: { scope: 'conversation' } | async }}</axp-layout-title>\n      <axp-layout-toolbar>\n        <ax-search-box\n          #searchInput\n          look=\"solid\"\n          [placeholder]=\"placeholder()\"\n          [value]=\"searchQuery()\"\n          (onValueChanged)=\"onSearch($event.value)\"\n          class=\"ax-w-full\"\n        >\n          <ax-clear-button></ax-clear-button>\n        </ax-search-box>\n      </axp-layout-toolbar>\n    </axp-layout-header>\n    <axp-layout-content class=\"ax-flex ax-flex-col ax-min-h-0 ax-max-w-80\">\n      @if (!layoutService.isMobileDevice()) {\n        <ng-container [ngTemplateOutlet]=\"template\"></ng-container>\n      }\n    </axp-layout-content>\n  </axp-layout-start-side>\n\n  <axp-page-content style=\"height: calc(100vh - 22rem)\">\n    @if (selectedRoom()) {\n      <router-outlet></router-outlet>\n    } @else if (layoutService.isMobileDevice()) {\n      <ax-search-box\n        #searchInput\n        look=\"solid\"\n        [placeholder]=\"placeholder()\"\n        [value]=\"searchQuery()\"\n        (onValueChanged)=\"onSearch($event.value)\"\n        class=\"ax-w-full\"\n      >\n        <ax-clear-button></ax-clear-button>\n      </ax-search-box>\n      <ng-container [ngTemplateOutlet]=\"template\"></ng-container>\n    }\n  </axp-page-content>\n</axp-page-layout>\n\n<ng-template #template>\n  <!-- Tabs -->\n  <div class=\"ax-px-4\">\n    @if (hasUnread()) {\n      <ax-tabs\n        #tab\n        class=\"ax-text-neutral-400\"\n        [look]=\"'with-line'\"\n        [location]=\"'bottom'\"\n        [fitParent]=\"true\"\n        (onActiveTabChanged)=\"onTabChange($event)\"\n      >\n        <ax-tab-item text=\"All\" [active]=\"activeTab() === 0\">\n          <ax-suffix>\n            <ax-badge\n              [text]=\"totalCount().toString()\"\n              [color]=\"activeTab() === 0 ? 'primary' : 'secondary'\"\n              class=\"ax-min-w-[1.5rem] ax-justify-center\"\n            ></ax-badge>\n          </ax-suffix>\n        </ax-tab-item>\n        <ax-tab-item text=\"Unread\" [active]=\"activeTab() === 1\">\n          <ax-suffix>\n            <ax-badge\n              [text]=\"unreadCount().toString()\"\n              [color]=\"activeTab() === 1 ? 'primary' : 'secondary'\"\n              class=\"ax-min-w-[1.5rem] ax-justify-center\"\n            ></ax-badge>\n          </ax-suffix>\n        </ax-tab-item>\n      </ax-tabs>\n    }\n  </div>\n\n  <!-- Chat List Content -->\n  <div\n    class=\"ax-flex-1 ax-overflow-hidden ax-flex ax-flex-col ax-justify-between ax-min-w-80\"\n    [class.ax-border-t]=\"hasUnread()\"\n  >\n    <!-- Loading State -->\n    @if (isLoading()) {\n      <div class=\"ax-p-4 ax-space-y-4\">\n        @for (_ of [1, 2, 3, 4, 5, 6]; track $index) {\n          <div class=\"ax-flex ax-items-center ax-space-x-3\">\n            <ax-skeleton [animated]=\"true\" class=\"ax-w-12 ax-h-12 ax-rounded-full\"></ax-skeleton>\n            <div class=\"ax-flex-1 ax-space-y-2\">\n              <ax-skeleton [animated]=\"true\" class=\"ax-w-3/4 ax-h-4 ax-rounded-md\"></ax-skeleton>\n              <ax-skeleton [animated]=\"true\" class=\"ax-w-1/2 ax-h-3 ax-rounded-md\"></ax-skeleton>\n            </div>\n          </div>\n        }\n      </div>\n    }\n\n    <!-- Error State -->\n    @if (error()) {\n      <div class=\"ax-flex ax-flex-col ax-items-center ax-justify-center ax-h-full ax-p-4 ax-text-center\">\n        <ax-icon class=\"ax-text-danger ax-text-5xl ax-mb-3\">\n          <i class=\"fa-light fa-circle-exclamation\"></i>\n        </ax-icon>\n        <p class=\"ax-font-semibold ax-text-lg\">\n          {{ 'chat-error' | translate: { scope: 'conversation' } | async }}\n        </p>\n        <p class=\"ax-font-semibold ax-text-lg\">\n          {{ 'chat-try-again' | translate: { scope: 'conversation' } | async }}\n        </p>\n        <p class=\"ax-text-secondary ax-mb-4\">{{ error() }}</p>\n        <ax-button\n          [text]=\"'try-again' | translate: { scope: 'conversation' } | async\"\n          color=\"primary\"\n          (onClick)=\"refreshChat()\"\n        ></ax-button>\n      </div>\n    }\n\n    <!-- Chat List -->\n    @if (!isLoading() && !error()) {\n      <div class=\"ax-flex-1 ax-overflow-y-auto\">\n        @for (i of filteredRooms(); track i.id) {\n          <axm-chat-item\n            [data]=\"i\"\n            [typing]=\"$any(typingStatus()[i.id])\"\n            [lastMessageReaction]=\"i.lastMessage?.reactions?.[0]?.type ?? null\"\n            [attr.data-id]=\"i.id\"\n            (click)=\"openChat(i.id)\"\n            [class.ax-bg-dark]=\"selectedRoom()?.id === i.id\"\n            class=\"ax-transition-all ax-duration-100 hover:ax-bg-surface\"\n            [@fadeIn]\n            tabindex=\"0\"\n            (keydown.enter)=\"openChat(i.id)\"\n            role=\"button\"\n          ></axm-chat-item>\n        }\n\n        <!-- Empty State -->\n        @empty {\n          <div class=\"ax-p-4 ax-font-medium ax-text-center ax-text-secondary\">\n            @if (isSearching()) {\n              No chats found matching your search\n            } @else {\n              No chats available\n            }\n          </div>\n        }\n      </div>\n    }\n\n    <!-- Footer Content -->\n    <div class=\"ax-border-t ax-border-divider ax-bg-lightest ax-p-4\">\n      <ax-button class=\"ax-w-full\" color=\"primary\" text=\"New Conversation\" (onClick)=\"onNewConversation()\">\n        <ax-prefix>\n          <ax-icon>\n            <i class=\"fa-solid fa-plus\"></i>\n          </ax-icon>\n        </ax-prefix>\n      </ax-button>\n    </div>\n  </div>\n</ng-template>\n" }]
         }], propDecorators: { onKeydownHandler: [{
                 type: HostListener,
                 args: ['document:keydown.escape', ['$event']]
@@ -2982,7 +2982,7 @@ class AXMChatPreviewComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: AXMChatPreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.7", type: AXMChatPreviewComponent, isStandalone: true, selector: "axm-chat-preview", viewQueries: [{ propertyName: "inputRef", first: true, predicate: AXConversationInputComponent, descendants: true, isSignal: true }], ngImport: i0, template: "@if (isLoading()) {\n  <div class=\"ax-h-full ax-w-full ax-flex ax-items-center ax-justify-center\">\n    <ax-loading></ax-loading>\n  </div>\n} @else if (error()) {\n  <div class=\"ax-h-full ax-w-full ax-flex ax-items-center ax-justify-center\">\n    <div class=\"ax-text-center\">\n      <p class=\"ax-text-danger\">{{ error() }}</p>\n      <button (click)=\"loadMessages(roomId)\" class=\"ax-mt-2 ax-button ax-primary\">Retry</button>\n    </div>\n  </div>\n} @else {\n  <div\n    axDomChange\n    (axResizeObserver)=\"setHeight($event[0].contentRect.height)\"\n    class=\"ax-bg-surface-container ax-h-full\"\n  >\n    <!-- Messages Container -->\n    <ax-conversation-container class=\"ax-overflow-hidden\" [chatData]=\"chatData()\">\n      <ax-conversation-view\n        (onActionMenuOpening)=\"addItemHandler($event)\"\n        (onAction)=\"handleOnAction($event)\"\n        (onReplyClick)=\"addInputOverlay('reply', $event.data)\"\n        [chatBoxHeight]=\"height() - 60 + 'px'\"\n      ></ax-conversation-view>\n      @if (!isChannel()) {\n        <ax-conversation-input\n          class=\"ax-p-1\"\n          placeholder=\"Type a message...\"\n          [(ngModel)]=\"options().value\"\n          (ngModelChange)=\"handleTyping($event)\"\n          (onSendClick)=\"handleOnSend($event)\"\n          (onFileChange)=\"handleFileChange($event)\"\n          (onStopRecording)=\"handleEndRecord($event)\"\n          (onCancelRecording)=\"handleCancelRecord($event)\"\n          (onEnterPressed)=\"handleEnter()\"\n        ></ax-conversation-input>\n      }\n    </ax-conversation-container>\n  </div>\n}\n", styles: [":host{display:block;width:100%;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i11.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i11.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: AXDomChangeDirective, selector: "[axDomChange]", outputs: ["axMutationObserver", "axResizeObserver"] }, { kind: "ngmodule", type: AXConversationModule }, { kind: "component", type: i2$4.AXConversationViewComponent, selector: "ax-conversation-view", inputs: ["chatBoxHeight", "isReplyArrowShown", "avatar"], outputs: ["onScrollEnd", "onActionMenuOpening", "onAction", "onReplyClick"] }, { kind: "component", type: i2$4.AXConversationInputComponent, selector: "ax-conversation-input", inputs: ["look", "placeholder", "maxLength", "hasAttachment", "hasVoice", "hasEmoji", "isLoading", "acceptFileType"], outputs: ["onSendClick", "onStartRecording", "onCancelRecording", "onEnterPressed"] }, { kind: "component", type: i2$4.AXConversationContainerComponent, selector: "ax-conversation-container", inputs: ["chatData"] }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "component", type: i6.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.7", type: AXMChatPreviewComponent, isStandalone: true, selector: "axm-chat-preview", viewQueries: [{ propertyName: "inputRef", first: true, predicate: AXConversationInputComponent, descendants: true, isSignal: true }], ngImport: i0, template: "@if (isLoading()) {\n  <div class=\"ax-h-full ax-w-full ax-flex ax-items-center ax-justify-center\">\n    <ax-loading></ax-loading>\n  </div>\n} @else if (error()) {\n  <div class=\"ax-h-full ax-w-full ax-flex ax-items-center ax-justify-center\">\n    <div class=\"ax-text-center\">\n      <p class=\"ax-text-danger\">{{ error() }}</p>\n      <button (click)=\"loadMessages(roomId)\" class=\"ax-mt-2 ax-button ax-primary\">Retry</button>\n    </div>\n  </div>\n} @else {\n  <div\n    axDomChange\n    (axResizeObserver)=\"setHeight($event[0].contentRect.height)\"\n    class=\"ax-bg-surface-container ax-h-full\"\n  >\n    <!-- Messages Container -->\n    <ax-conversation-container class=\"ax-overflow-hidden\" [chatData]=\"chatData()\">\n      <ax-conversation-view\n        (onActionMenuOpening)=\"addItemHandler($event)\"\n        (onAction)=\"handleOnAction($event)\"\n        (onReplyClick)=\"addInputOverlay('reply', $event.data)\"\n        [chatBoxHeight]=\"height() - 60 + 'px'\"\n      ></ax-conversation-view>\n      @if (!isChannel()) {\n        <ax-conversation-input\n          class=\"ax-p-1\"\n          placeholder=\"Type a message...\"\n          [(ngModel)]=\"options().value\"\n          (ngModelChange)=\"handleTyping($event)\"\n          (onSendClick)=\"handleOnSend($event)\"\n          (onFileChange)=\"handleFileChange($event)\"\n          (onStopRecording)=\"handleEndRecord($event)\"\n          (onCancelRecording)=\"handleCancelRecord($event)\"\n          (onEnterPressed)=\"handleEnter()\"\n        ></ax-conversation-input>\n      }\n    </ax-conversation-container>\n  </div>\n}\n", styles: [":host{display:block;width:100%;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i11.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i11.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: AXDomChangeDirective, selector: "[axDomChange]", outputs: ["axMutationObserver", "axResizeObserver"] }, { kind: "ngmodule", type: AXConversationModule }, { kind: "component", type: i2$4.AXConversationViewComponent, selector: "ax-conversation-view", inputs: ["chatBoxHeight", "isReplyArrowShown", "avatar"], outputs: ["onScrollEnd", "onActionMenuOpening", "onAction", "onReplyClick"] }, { kind: "component", type: i2$4.AXConversationInputComponent, selector: "ax-conversation-input", inputs: ["look", "placeholder", "maxLength", "hasAttachment", "hasVoice", "hasEmoji", "isLoading", "acceptFileType"], outputs: ["onActionClose", "onSendClick", "onStartRecording", "onCancelRecording", "onEnterPressed"] }, { kind: "component", type: i2$4.AXConversationContainerComponent, selector: "ax-conversation-container", inputs: ["chatData"] }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "component", type: i6.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: AXMChatPreviewComponent, decorators: [{
             type: Component,