@acorex/modules 20.2.2 → 20.2.4-next.0

package/fesm2022/acorex-modules-conversation.mjs

@@ -1,7 +1,7 @@
 import * as i2$4 from '@acorex/components/conversation';
 import { AXConversationModule, AXConversationInputComponent } from '@acorex/components/conversation';
 import { AXPSessionService, AXPAuthGuard } from '@acorex/platform/auth';
-import { AXMEntityCrudServiceImpl, AXPEntityService, AXP_ENTITY_DEFINITION_LOADER } from '@acorex/platform/layout/entity';
+import { AXMEntityCrudServiceImpl, AXPEntityService, 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$2 from '@angular/common';
 import { AsyncPipe, CommonModule, DatePipe } from '@angular/common';
@@ -12,6 +12,7 @@ import { Router, ActivatedRoute, NavigationEnd, RouterModule, ROUTES } from '@an
 import { createAllQueryView, AXPEntityCommandScope, AXPEntityQueryType, AXPFilterOperatorMiddlewareService, AXP_MENU_PROVIDER } from '@acorex/platform/common';
 import * as i2$1 from '@acorex/platform/layout/builder';
 import { AXPWidgetsCatalog, AXPLayoutBuilderModule, AXPValueWidgetComponent, AXPWidgetGroupEnum } from '@acorex/platform/layout/builder';
+import { AXPUserAvatarComponent, AXPThemeLayoutBlockComponent, AXPThemeLayoutStartSideComponent, AXPThemeLayoutHeaderComponent, AXPThemeLayoutToolbarComponent, AXP_TASK_BADGE_PROVIDERS } from '@acorex/platform/layout/components';
 import * as i2$5 from '@acorex/platform/workflow';
 import { AXPWorkflowAction, AXPWorkflowModule } from '@acorex/platform/workflow';
 import { AXMUsersEntityService } from '@acorex/modules/security-management';
@@ -56,7 +57,6 @@ import * as i4$1 from '@acorex/core/translation';
 import { AXTranslationModule, AXTranslationService } from '@acorex/core/translation';
 import { AXUnsubscriber } from '@acorex/core/utils';
 import { AXMNotificationConnectorService, AXP_NOTIFICATION_DEFINITION_PROVIDER } from '@acorex/modules/notification-management';
-import { AXPUserAvatarComponent, AXPThemeLayoutBlockComponent, AXPThemeLayoutStartSideComponent, AXPThemeLayoutHeaderComponent, AXPThemeLayoutToolbarComponent } from '@acorex/platform/layout/components';
 import { AXPPageLayoutBaseComponent, AXPPageLayoutComponent, AXPPageLayoutBase } from '@acorex/platform/layout/views';
 import { trigger, transition, style, animate } from '@angular/animations';
 import * as i10 from '@angular/forms';
@@ -929,6 +929,7 @@ class AXMMenuProvider {
                 path: `${this.sessionService.application?.name}/${module.config.route}`,
                 priority: 2,
                 icon: RootConfig.entities.room.icon,
+                badgeKey: 'badge-chat',
             },
         ]);
     }
@@ -3000,7 +3001,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 ax-mb-2\"\n      >\n        <ax-clear-button></ax-clear-button>\n      </ax-search-box>\n      <ng-container [ngTemplateOutlet]=\"template\"></ng-container>\n    }\n  </axp-page-content>\n</axp-page-layout>\n<ng-template #template>\n  <!-- Tabs -->\n  <div [class]=\"!layoutService.isMobileDevice() ? 'ax-px-4' : ''\">\n    <ax-tabs\n      #tab\n      class=\"ax-text-neutral-400 !ax-overflow-x-hidden\"\n      [look]=\"'with-line'\"\n      [location]=\"'bottom'\"\n      [fitParent]=\"true\"\n      (onActiveTabChanged)=\"activeTabIndex.set($event.index)\"\n    >\n      @for (tab of tabs(); track tab.id; let i = $index) {\n        <ax-tab-item [text]=\"tab.title\" [active]=\"activeTabIndex() === i\">\n          <ax-suffix>\n            <ax-badge\n              [text]=\"getRoomCountForTab(tab).toString()\"\n              [color]=\"activeTabIndex() === i ? 'primary' : 'secondary'\"\n              class=\"ax-min-w-[1.5rem] ax-justify-center\"\n            ></ax-badge>\n          </ax-suffix>\n        </ax-tab-item>\n      }\n    </ax-tabs>\n  </div>\n\n  <!-- Chat List Content -->\n  <div\n    class=\"ax-flex-1 ax-overflow-hidden ax-flex ax-flex-col ax-justify-between ax-min-w-80\"\n    [class.ax-border-t]=\"tabs().length > 0\"\n  >\n    <!-- Loading State -->\n    @if (isLoading()) {\n      <div class=\"ax-p-4 ax-space-y-4\">\n        @for (_ of [1, 2, 3, 4, 5, 6]; track $index) {\n          <div class=\"ax-flex ax-items-center ax-space-x-3\">\n            <ax-skeleton [animated]=\"true\" class=\"ax-w-12 ax-h-12 ax-rounded-full\"></ax-skeleton>\n            <div class=\"ax-flex-1 ax-space-y-2\">\n              <ax-skeleton [animated]=\"true\" class=\"ax-w-3/4 ax-h-4 ax-rounded-md\"></ax-skeleton>\n              <ax-skeleton [animated]=\"true\" class=\"ax-w-1/2 ax-h-3 ax-rounded-md\"></ax-skeleton>\n            </div>\n          </div>\n        }\n      </div>\n    } @else if (error()) {\n      <div class=\"ax-flex ax-flex-col ax-items-center ax-justify-center ax-h-full ax-p-4 ax-text-center\">\n        <ax-icon class=\"ax-text-danger ax-text-5xl ax-mb-3\">\n          <i class=\"fa-light fa-circle-exclamation\"></i>\n        </ax-icon>\n        <p class=\"ax-font-semibold ax-text-lg\">\n          {{ 'chat-error' | translate: { scope: 'conversation' } | async }}\n        </p>\n        <p class=\"ax-font-semibold ax-text-lg\">\n          {{ 'chat-try-again' | translate: { scope: 'conversation' } | async }}\n        </p>\n        <p class=\"ax-text-secondary ax-mb-4\">{{ error() }}</p>\n        <ax-button\n          [text]=\"'try-again' | translate: { scope: 'conversation' } | async\"\n          color=\"primary\"\n          (onClick)=\"refreshChat()\"\n        ></ax-button>\n      </div>\n    } @else {\n      <div class=\"ax-flex-1 ax-overflow-y-auto\">\n        @for (i of filteredRooms(); track i.id) {\n          <axm-chat-item\n            [data]=\"i\"\n            [typing]=\"$any(typingStatus()[i.id])\"\n            [lastMessageReaction]=\"i.lastMessage?.reactions?.[0]?.type ?? null\"\n            [attr.data-id]=\"i.id\"\n            (click)=\"openChat(i.id)\"\n            [class.ax-bg-dark]=\"selectedRoom()?.id === i.id\"\n            class=\"ax-transition-all ax-duration-100 hover:ax-bg-surface\"\n            [@fadeIn]\n            tabindex=\"0\"\n            (keydown.enter)=\"openChat(i.id)\"\n            role=\"button\"\n          ></axm-chat-item>\n        } @empty {\n          <div class=\"ax-p-4 ax-font-medium ax-text-center ax-text-secondary\">\n            @if (isSearching()) {\n              No chats found matching your search.\n            } @else {\n              There are no conversations in this tab.\n            }\n          </div>\n        }\n      </div>\n    }\n\n    <!-- Footer Content -->\n    @if (!layoutService.isMobileDevice()) {\n      <div class=\"ax-border-t ax-border-divider ax-bg-lightest ax-p-4\">\n        <ax-button class=\"ax-w-full\" color=\"primary\" text=\"New Conversation\" (onClick)=\"onNewConversation()\">\n          <ax-prefix>\n            <ax-icon>\n              <i class=\"fa-solid fa-plus\"></i>\n            </ax-icon>\n          </ax-prefix>\n        </ax-button>\n      </div>\n    } @else {\n      <ax-button\n        class=\"ax-fixed ax-bottom-16 ax-right-8 !ax-rounded-full !ax-w-14 !ax-h-14 ax-shadow-lg\"\n        color=\"primary\"\n        (onClick)=\"onNewConversation()\"\n      >\n        <ax-icon class=\"ax-text-2xl\">\n          <i class=\"fa-solid fa-plus\"></i>\n        </ax-icon>\n      </ax-button>\n    }\n  </div>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "component", type: AXMChatItemComponent, selector: "axm-chat-item", inputs: ["data", "typing", "lastMessageReaction"], outputs: ["pressChatItem"] }, { kind: "ngmodule", type: 
+        ], viewQueries: [{ propertyName: "tab", first: true, predicate: ["tab"], descendants: true, isSignal: true }, { propertyName: "container", first: true, predicate: ["container"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<axp-page-layout #container>\n  <axp-layout-start-side class=\"ax-border-e ax-lightest-surface ax-h-full\">\n    <axp-layout-header>\n      <axp-layout-title>{{ 'module-name' | translate: { scope: 'conversation' } | async }}</axp-layout-title>\n      <axp-layout-toolbar>\n        <ax-search-box\n          #searchInput\n          look=\"solid\"\n          [placeholder]=\"placeholder()\"\n          [value]=\"searchQuery()\"\n          (onValueChanged)=\"onSearch($event.value)\"\n          class=\"ax-w-full\"\n        >\n          <ax-clear-button></ax-clear-button>\n        </ax-search-box>\n      </axp-layout-toolbar>\n    </axp-layout-header>\n    <axp-layout-content class=\"ax-flex ax-flex-col ax-min-h-0 ax-max-w-80\">\n      @if (!layoutService.isMobileDevice()) {\n        <ng-container [ngTemplateOutlet]=\"template\"></ng-container>\n      }\n    </axp-layout-content>\n  </axp-layout-start-side>\n\n  <axp-page-content style=\"height: calc(100vh - 22rem)\">\n    @if (selectedRoom()) {\n      <router-outlet></router-outlet>\n    } @else if (layoutService.isMobileDevice()) {\n      <ax-search-box\n        #searchInput\n        look=\"solid\"\n        [placeholder]=\"placeholder()\"\n        [value]=\"searchQuery()\"\n        (onValueChanged)=\"onSearch($event.value)\"\n        class=\"ax-w-full ax-mb-2\"\n      >\n        <ax-clear-button></ax-clear-button>\n      </ax-search-box>\n      <ng-container [ngTemplateOutlet]=\"template\"></ng-container>\n    }\n  </axp-page-content>\n</axp-page-layout>\n<ng-template #template>\n  <!-- Tabs -->\n  <div [class]=\"!layoutService.isMobileDevice() ? 'ax-px-4' : ''\">\n    <ax-tabs\n      #tab\n      class=\"ax-text-neutral-400 !ax-overflow-x-hidden\"\n      [look]=\"'with-line'\"\n      [location]=\"'bottom'\"\n      [fitParent]=\"true\"\n      (onActiveTabChanged)=\"activeTabIndex.set($event.index)\"\n    >\n      @for (tab of tabs(); track tab.id; let i = $index) {\n        <ax-tab-item [text]=\"tab.title\" [active]=\"activeTabIndex() === i\">\n          <ax-suffix>\n            @if (getRoomCountForTab(tab) > 0) {\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            }\n          </ax-suffix>\n        </ax-tab-item>\n      }\n    </ax-tabs>\n  </div>\n\n  <!-- Chat List Content -->\n  <div\n    class=\"ax-flex-1 ax-overflow-hidden ax-flex ax-flex-col ax-justify-between ax-min-w-80\"\n    [class.ax-border-t]=\"tabs().length > 0\"\n  >\n    <!-- Loading State -->\n    @if (isLoading()) {\n      <div class=\"ax-p-4 ax-space-y-4\">\n        @for (_ of [1, 2, 3, 4, 5, 6]; track $index) {\n          <div class=\"ax-flex ax-items-center ax-space-x-3\">\n            <ax-skeleton [animated]=\"true\" class=\"ax-w-12 ax-h-12 ax-rounded-full\"></ax-skeleton>\n            <div class=\"ax-flex-1 ax-space-y-2\">\n              <ax-skeleton [animated]=\"true\" class=\"ax-w-3/4 ax-h-4 ax-rounded-md\"></ax-skeleton>\n              <ax-skeleton [animated]=\"true\" class=\"ax-w-1/2 ax-h-3 ax-rounded-md\"></ax-skeleton>\n            </div>\n          </div>\n        }\n      </div>\n    } @else if (error()) {\n      <div class=\"ax-flex ax-flex-col ax-items-center ax-justify-center ax-h-full ax-p-4 ax-text-center\">\n        <ax-icon class=\"ax-text-danger ax-text-5xl ax-mb-3\">\n          <i class=\"fa-light fa-circle-exclamation\"></i>\n        </ax-icon>\n        <p class=\"ax-font-semibold ax-text-lg\">\n          {{ 'chat-error' | translate: { scope: 'conversation' } | async }}\n        </p>\n        <p class=\"ax-font-semibold ax-text-lg\">\n          {{ 'chat-try-again' | translate: { scope: 'conversation' } | async }}\n        </p>\n        <p class=\"ax-text-secondary ax-mb-4\">{{ error() }}</p>\n        <ax-button\n          [text]=\"'try-again' | translate: { scope: 'conversation' } | async\"\n          color=\"primary\"\n          (onClick)=\"refreshChat()\"\n        ></ax-button>\n      </div>\n    } @else {\n      <div class=\"ax-flex-1 ax-overflow-y-auto\">\n        @for (i of filteredRooms(); track i.id) {\n          <axm-chat-item\n            [data]=\"i\"\n            [typing]=\"$any(typingStatus()[i.id])\"\n            [lastMessageReaction]=\"i.lastMessage?.reactions?.[0]?.type ?? null\"\n            [attr.data-id]=\"i.id\"\n            (click)=\"openChat(i.id)\"\n            [class.ax-bg-dark]=\"selectedRoom()?.id === i.id\"\n            class=\"ax-transition-all ax-duration-100 hover:ax-bg-surface\"\n            [@fadeIn]\n            tabindex=\"0\"\n            (keydown.enter)=\"openChat(i.id)\"\n            role=\"button\"\n          ></axm-chat-item>\n        } @empty {\n          <div class=\"ax-p-4 ax-font-medium ax-text-center ax-text-secondary\">\n            @if (isSearching()) {\n              No chats found matching your search.\n            } @else {\n              There are no conversations in this tab.\n            }\n          </div>\n        }\n      </div>\n    }\n\n    <!-- Footer Content -->\n    @if (!layoutService.isMobileDevice()) {\n      <div class=\"ax-border-t ax-border-divider ax-bg-lightest ax-p-4\">\n        <ax-button class=\"ax-w-full\" color=\"primary\" text=\"New Conversation\" (onClick)=\"onNewConversation()\">\n          <ax-prefix>\n            <ax-icon>\n              <i class=\"fa-solid fa-plus\"></i>\n            </ax-icon>\n          </ax-prefix>\n        </ax-button>\n      </div>\n    } @else {\n      <ax-button\n        class=\"ax-fixed ax-bottom-16 ax-right-8 !ax-rounded-full !ax-w-14 !ax-h-14 ax-shadow-lg\"\n        color=\"primary\"\n        (onClick)=\"onNewConversation()\"\n      >\n        <ax-icon class=\"ax-text-2xl\">\n          <i class=\"fa-solid fa-plus\"></i>\n        </ax-icon>\n      </ax-button>\n    }\n  </div>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "component", type: AXMChatItemComponent, selector: "axm-chat-item", inputs: ["data", "typing", "lastMessageReaction"], outputs: ["pressChatItem"] }, { kind: "ngmodule", type: 
                 // Common Modules
                 CommonModule }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i2$3.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "ngmodule", type: 
                 // Acorex Core Modules
@@ -3066,7 +3067,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
                                 animate('300ms ease-out', style({ opacity: 1, transform: 'translateY(0)' })),
                             ]),
                         ]),
-                    ], template: "<axp-page-layout #container>\n  <axp-layout-start-side class=\"ax-border-e ax-lightest-surface ax-h-full\">\n    <axp-layout-header>\n      <axp-layout-title>{{ 'module-name' | translate: { scope: 'conversation' } | async }}</axp-layout-title>\n      <axp-layout-toolbar>\n        <ax-search-box\n          #searchInput\n          look=\"solid\"\n          [placeholder]=\"placeholder()\"\n          [value]=\"searchQuery()\"\n          (onValueChanged)=\"onSearch($event.value)\"\n          class=\"ax-w-full\"\n        >\n          <ax-clear-button></ax-clear-button>\n        </ax-search-box>\n      </axp-layout-toolbar>\n    </axp-layout-header>\n    <axp-layout-content class=\"ax-flex ax-flex-col ax-min-h-0 ax-max-w-80\">\n      @if (!layoutService.isMobileDevice()) {\n        <ng-container [ngTemplateOutlet]=\"template\"></ng-container>\n      }\n    </axp-layout-content>\n  </axp-layout-start-side>\n\n  <axp-page-content style=\"height: calc(100vh - 22rem)\">\n    @if (selectedRoom()) {\n      <router-outlet></router-outlet>\n    } @else if (layoutService.isMobileDevice()) {\n      <ax-search-box\n        #searchInput\n        look=\"solid\"\n        [placeholder]=\"placeholder()\"\n        [value]=\"searchQuery()\"\n        (onValueChanged)=\"onSearch($event.value)\"\n        class=\"ax-w-full ax-mb-2\"\n      >\n        <ax-clear-button></ax-clear-button>\n      </ax-search-box>\n      <ng-container [ngTemplateOutlet]=\"template\"></ng-container>\n    }\n  </axp-page-content>\n</axp-page-layout>\n<ng-template #template>\n  <!-- Tabs -->\n  <div [class]=\"!layoutService.isMobileDevice() ? 'ax-px-4' : ''\">\n    <ax-tabs\n      #tab\n      class=\"ax-text-neutral-400 !ax-overflow-x-hidden\"\n      [look]=\"'with-line'\"\n      [location]=\"'bottom'\"\n      [fitParent]=\"true\"\n      (onActiveTabChanged)=\"activeTabIndex.set($event.index)\"\n    >\n      @for (tab of tabs(); track tab.id; let i = $index) {\n        <ax-tab-item [text]=\"tab.title\" [active]=\"activeTabIndex() === i\">\n          <ax-suffix>\n            <ax-badge\n              [text]=\"getRoomCountForTab(tab).toString()\"\n              [color]=\"activeTabIndex() === i ? 'primary' : 'secondary'\"\n              class=\"ax-min-w-[1.5rem] ax-justify-center\"\n            ></ax-badge>\n          </ax-suffix>\n        </ax-tab-item>\n      }\n    </ax-tabs>\n  </div>\n\n  <!-- Chat List Content -->\n  <div\n    class=\"ax-flex-1 ax-overflow-hidden ax-flex ax-flex-col ax-justify-between ax-min-w-80\"\n    [class.ax-border-t]=\"tabs().length > 0\"\n  >\n    <!-- Loading State -->\n    @if (isLoading()) {\n      <div class=\"ax-p-4 ax-space-y-4\">\n        @for (_ of [1, 2, 3, 4, 5, 6]; track $index) {\n          <div class=\"ax-flex ax-items-center ax-space-x-3\">\n            <ax-skeleton [animated]=\"true\" class=\"ax-w-12 ax-h-12 ax-rounded-full\"></ax-skeleton>\n            <div class=\"ax-flex-1 ax-space-y-2\">\n              <ax-skeleton [animated]=\"true\" class=\"ax-w-3/4 ax-h-4 ax-rounded-md\"></ax-skeleton>\n              <ax-skeleton [animated]=\"true\" class=\"ax-w-1/2 ax-h-3 ax-rounded-md\"></ax-skeleton>\n            </div>\n          </div>\n        }\n      </div>\n    } @else if (error()) {\n      <div class=\"ax-flex ax-flex-col ax-items-center ax-justify-center ax-h-full ax-p-4 ax-text-center\">\n        <ax-icon class=\"ax-text-danger ax-text-5xl ax-mb-3\">\n          <i class=\"fa-light fa-circle-exclamation\"></i>\n        </ax-icon>\n        <p class=\"ax-font-semibold ax-text-lg\">\n          {{ 'chat-error' | translate: { scope: 'conversation' } | async }}\n        </p>\n        <p class=\"ax-font-semibold ax-text-lg\">\n          {{ 'chat-try-again' | translate: { scope: 'conversation' } | async }}\n        </p>\n        <p class=\"ax-text-secondary ax-mb-4\">{{ error() }}</p>\n        <ax-button\n          [text]=\"'try-again' | translate: { scope: 'conversation' } | async\"\n          color=\"primary\"\n          (onClick)=\"refreshChat()\"\n        ></ax-button>\n      </div>\n    } @else {\n      <div class=\"ax-flex-1 ax-overflow-y-auto\">\n        @for (i of filteredRooms(); track i.id) {\n          <axm-chat-item\n            [data]=\"i\"\n            [typing]=\"$any(typingStatus()[i.id])\"\n            [lastMessageReaction]=\"i.lastMessage?.reactions?.[0]?.type ?? null\"\n            [attr.data-id]=\"i.id\"\n            (click)=\"openChat(i.id)\"\n            [class.ax-bg-dark]=\"selectedRoom()?.id === i.id\"\n            class=\"ax-transition-all ax-duration-100 hover:ax-bg-surface\"\n            [@fadeIn]\n            tabindex=\"0\"\n            (keydown.enter)=\"openChat(i.id)\"\n            role=\"button\"\n          ></axm-chat-item>\n        } @empty {\n          <div class=\"ax-p-4 ax-font-medium ax-text-center ax-text-secondary\">\n            @if (isSearching()) {\n              No chats found matching your search.\n            } @else {\n              There are no conversations in this tab.\n            }\n          </div>\n        }\n      </div>\n    }\n\n    <!-- Footer Content -->\n    @if (!layoutService.isMobileDevice()) {\n      <div class=\"ax-border-t ax-border-divider ax-bg-lightest ax-p-4\">\n        <ax-button class=\"ax-w-full\" color=\"primary\" text=\"New Conversation\" (onClick)=\"onNewConversation()\">\n          <ax-prefix>\n            <ax-icon>\n              <i class=\"fa-solid fa-plus\"></i>\n            </ax-icon>\n          </ax-prefix>\n        </ax-button>\n      </div>\n    } @else {\n      <ax-button\n        class=\"ax-fixed ax-bottom-16 ax-right-8 !ax-rounded-full !ax-w-14 !ax-h-14 ax-shadow-lg\"\n        color=\"primary\"\n        (onClick)=\"onNewConversation()\"\n      >\n        <ax-icon class=\"ax-text-2xl\">\n          <i class=\"fa-solid fa-plus\"></i>\n        </ax-icon>\n      </ax-button>\n    }\n  </div>\n</ng-template>\n" }]
+                    ], template: "<axp-page-layout #container>\n  <axp-layout-start-side class=\"ax-border-e ax-lightest-surface ax-h-full\">\n    <axp-layout-header>\n      <axp-layout-title>{{ 'module-name' | translate: { scope: 'conversation' } | async }}</axp-layout-title>\n      <axp-layout-toolbar>\n        <ax-search-box\n          #searchInput\n          look=\"solid\"\n          [placeholder]=\"placeholder()\"\n          [value]=\"searchQuery()\"\n          (onValueChanged)=\"onSearch($event.value)\"\n          class=\"ax-w-full\"\n        >\n          <ax-clear-button></ax-clear-button>\n        </ax-search-box>\n      </axp-layout-toolbar>\n    </axp-layout-header>\n    <axp-layout-content class=\"ax-flex ax-flex-col ax-min-h-0 ax-max-w-80\">\n      @if (!layoutService.isMobileDevice()) {\n        <ng-container [ngTemplateOutlet]=\"template\"></ng-container>\n      }\n    </axp-layout-content>\n  </axp-layout-start-side>\n\n  <axp-page-content style=\"height: calc(100vh - 22rem)\">\n    @if (selectedRoom()) {\n      <router-outlet></router-outlet>\n    } @else if (layoutService.isMobileDevice()) {\n      <ax-search-box\n        #searchInput\n        look=\"solid\"\n        [placeholder]=\"placeholder()\"\n        [value]=\"searchQuery()\"\n        (onValueChanged)=\"onSearch($event.value)\"\n        class=\"ax-w-full ax-mb-2\"\n      >\n        <ax-clear-button></ax-clear-button>\n      </ax-search-box>\n      <ng-container [ngTemplateOutlet]=\"template\"></ng-container>\n    }\n  </axp-page-content>\n</axp-page-layout>\n<ng-template #template>\n  <!-- Tabs -->\n  <div [class]=\"!layoutService.isMobileDevice() ? 'ax-px-4' : ''\">\n    <ax-tabs\n      #tab\n      class=\"ax-text-neutral-400 !ax-overflow-x-hidden\"\n      [look]=\"'with-line'\"\n      [location]=\"'bottom'\"\n      [fitParent]=\"true\"\n      (onActiveTabChanged)=\"activeTabIndex.set($event.index)\"\n    >\n      @for (tab of tabs(); track tab.id; let i = $index) {\n        <ax-tab-item [text]=\"tab.title\" [active]=\"activeTabIndex() === i\">\n          <ax-suffix>\n            @if (getRoomCountForTab(tab) > 0) {\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            }\n          </ax-suffix>\n        </ax-tab-item>\n      }\n    </ax-tabs>\n  </div>\n\n  <!-- Chat List Content -->\n  <div\n    class=\"ax-flex-1 ax-overflow-hidden ax-flex ax-flex-col ax-justify-between ax-min-w-80\"\n    [class.ax-border-t]=\"tabs().length > 0\"\n  >\n    <!-- Loading State -->\n    @if (isLoading()) {\n      <div class=\"ax-p-4 ax-space-y-4\">\n        @for (_ of [1, 2, 3, 4, 5, 6]; track $index) {\n          <div class=\"ax-flex ax-items-center ax-space-x-3\">\n            <ax-skeleton [animated]=\"true\" class=\"ax-w-12 ax-h-12 ax-rounded-full\"></ax-skeleton>\n            <div class=\"ax-flex-1 ax-space-y-2\">\n              <ax-skeleton [animated]=\"true\" class=\"ax-w-3/4 ax-h-4 ax-rounded-md\"></ax-skeleton>\n              <ax-skeleton [animated]=\"true\" class=\"ax-w-1/2 ax-h-3 ax-rounded-md\"></ax-skeleton>\n            </div>\n          </div>\n        }\n      </div>\n    } @else if (error()) {\n      <div class=\"ax-flex ax-flex-col ax-items-center ax-justify-center ax-h-full ax-p-4 ax-text-center\">\n        <ax-icon class=\"ax-text-danger ax-text-5xl ax-mb-3\">\n          <i class=\"fa-light fa-circle-exclamation\"></i>\n        </ax-icon>\n        <p class=\"ax-font-semibold ax-text-lg\">\n          {{ 'chat-error' | translate: { scope: 'conversation' } | async }}\n        </p>\n        <p class=\"ax-font-semibold ax-text-lg\">\n          {{ 'chat-try-again' | translate: { scope: 'conversation' } | async }}\n        </p>\n        <p class=\"ax-text-secondary ax-mb-4\">{{ error() }}</p>\n        <ax-button\n          [text]=\"'try-again' | translate: { scope: 'conversation' } | async\"\n          color=\"primary\"\n          (onClick)=\"refreshChat()\"\n        ></ax-button>\n      </div>\n    } @else {\n      <div class=\"ax-flex-1 ax-overflow-y-auto\">\n        @for (i of filteredRooms(); track i.id) {\n          <axm-chat-item\n            [data]=\"i\"\n            [typing]=\"$any(typingStatus()[i.id])\"\n            [lastMessageReaction]=\"i.lastMessage?.reactions?.[0]?.type ?? null\"\n            [attr.data-id]=\"i.id\"\n            (click)=\"openChat(i.id)\"\n            [class.ax-bg-dark]=\"selectedRoom()?.id === i.id\"\n            class=\"ax-transition-all ax-duration-100 hover:ax-bg-surface\"\n            [@fadeIn]\n            tabindex=\"0\"\n            (keydown.enter)=\"openChat(i.id)\"\n            role=\"button\"\n          ></axm-chat-item>\n        } @empty {\n          <div class=\"ax-p-4 ax-font-medium ax-text-center ax-text-secondary\">\n            @if (isSearching()) {\n              No chats found matching your search.\n            } @else {\n              There are no conversations in this tab.\n            }\n          </div>\n        }\n      </div>\n    }\n\n    <!-- Footer Content -->\n    @if (!layoutService.isMobileDevice()) {\n      <div class=\"ax-border-t ax-border-divider ax-bg-lightest ax-p-4\">\n        <ax-button class=\"ax-w-full\" color=\"primary\" text=\"New Conversation\" (onClick)=\"onNewConversation()\">\n          <ax-prefix>\n            <ax-icon>\n              <i class=\"fa-solid fa-plus\"></i>\n            </ax-icon>\n          </ax-prefix>\n        </ax-button>\n      </div>\n    } @else {\n      <ax-button\n        class=\"ax-fixed ax-bottom-16 ax-right-8 !ax-rounded-full !ax-w-14 !ax-h-14 ax-shadow-lg\"\n        color=\"primary\"\n        (onClick)=\"onNewConversation()\"\n      >\n        <ax-icon class=\"ax-text-2xl\">\n          <i class=\"fa-solid fa-plus\"></i>\n        </ax-icon>\n      </ax-button>\n    }\n  </div>\n</ng-template>\n" }]
         }], propDecorators: { onKeydownHandler: [{
                 type: HostListener,
                 args: ['document:keydown.escape', ['$event']]
@@ -3613,6 +3614,24 @@ var chatPreview_component = /*#__PURE__*/Object.freeze({
     AXMChatPreviewComponent: AXMChatPreviewComponent
 });
 
+class AXMChatBadgeProviderSimple {
+    constructor() {
+        this.chatService = inject(AXMChatManagementService);
+        this.key = 'badge-chat';
+        this.count = signal(0, ...(ngDevMode ? [{ debugName: "count" }] : []));
+        this.#eff = effect(async () => {
+            const response = await this.chatService.listRooms();
+            this.count.set(response.items.filter((i) => i.unreadCount > 0).length);
+        }, ...(ngDevMode ? [{ debugName: "#eff" }] : []));
+    }
+    #eff;
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXMChatBadgeProviderSimple, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXMChatBadgeProviderSimple }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXMChatBadgeProviderSimple, decorators: [{
+            type: Injectable
+        }] });
+
 class AXMChatNotificationContentComponent {
     constructor() {
         this.item = input(...(ngDevMode ? [undefined, { debugName: "item" }] : []));
@@ -3761,6 +3780,82 @@ const AXM_COMMENT_NOTIFICATION_PROVIDERS = [
 ];
 //#endregion
 
+const commentsPlugin = {
+    name: 'comments',
+    order: 50,
+    apply: (ctx) => {
+        // Ensure group exists
+        const groups = ctx.groups.list() ?? [];
+        if (!groups.some((g) => g.id === 'comments')) {
+            ctx.groups.add({ id: 'comments', title: 'Comments' });
+        }
+        // Ensure property exists
+        const props = ctx.properties.list();
+        if (!props.some((p) => p.name === 'comments')) {
+            ctx.properties.add({
+                name: 'comments',
+                title: 'Comments',
+                groupId: 'comments',
+                schema: {
+                    dataType: 'object',
+                    interface: {
+                        type: 'comment',
+                        options: {
+                            refrenceType: `${ctx.entity.module}.${ctx.entity.name}`,
+                            refrenceId: '{{ context.eval("id") }}',
+                            subject: '{{ context.eval("title") }}',
+                        },
+                    },
+                },
+            });
+        }
+        // Ensure single view section and property layout exists
+        ctx.interfaces.master.single.update((single) => {
+            const next = single ?? { title: ctx.entity.title, sections: [], properties: [] };
+            next.sections = next.sections ?? [];
+            if (!next.sections.some((s) => s.id === 'comments')) {
+                next.sections.push({ id: 'comments' });
+            }
+            next.properties = next.properties ?? [];
+            if (!next.properties.some((p) => p.name === 'comments')) {
+                next.properties.push({
+                    name: 'comments',
+                    layout: {
+                        label: { visible: false },
+                        positions: { lg: { colSpan: 12, order: 7 } },
+                    },
+                });
+            }
+            //
+            return next;
+        });
+        // Ensure list action to open comments popup exists
+        ensureListActions(ctx);
+        ctx.interfaces.update((i) => {
+            const actions = i.master.list.actions;
+            const cmdName = 'show-comment-popup';
+            if (!actionExists(actions, cmdName)) {
+                actions.push({
+                    title: '@conversation:actions.show-comment-popup',
+                    command: {
+                        name: cmdName,
+                        options: {
+                            refId: '{{ context.eval("id") }}',
+                            refType: `${ctx.entity.module}.${ctx.entity.name}`,
+                            subject: '{{ context.eval("title") }}',
+                        },
+                    },
+                    priority: 'secondary',
+                    type: 'comments',
+                    separated: true,
+                    scope: AXPEntityCommandScope.Individual,
+                });
+            }
+            return i;
+        });
+    },
+};
+
 function routesFactory() {
     const routes = [
         {
@@ -3858,6 +3953,11 @@ class AXMConversationModule {
                 provide: AXMCommentRealtimeService,
                 useClass: AXMCommentRealtimeServiceImpl,
             },
+            {
+                provide: AXP_ENTITY_ACTION_PLUGIN,
+                useValue: commentsPlugin,
+                multi: true,
+            },
             // Entity Provider
             {
                 provide: AXP_ENTITY_DEFINITION_LOADER,
@@ -3869,6 +3969,11 @@ class AXMConversationModule {
                 useClass: AXMMenuProvider,
                 multi: true,
             },
+            {
+                provide: AXP_TASK_BADGE_PROVIDERS,
+                useClass: AXMChatBadgeProviderSimple,
+                multi: true,
+            },
             {
                 provide: ROUTES,
                 multi: true,
@@ -3951,6 +4056,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
                             provide: AXMCommentRealtimeService,
                             useClass: AXMCommentRealtimeServiceImpl,
                         },
+                        {
+                            provide: AXP_ENTITY_ACTION_PLUGIN,
+                            useValue: commentsPlugin,
+                            multi: true,
+                        },
                         // Entity Provider
                         {
                             provide: AXP_ENTITY_DEFINITION_LOADER,
@@ -3962,6 +4072,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
                             useClass: AXMMenuProvider,
                             multi: true,
                         },
+                        {
+                            provide: AXP_TASK_BADGE_PROVIDERS,
+                            useClass: AXMChatBadgeProviderSimple,
+                            multi: true,
+                        },
                         {
                             provide: ROUTES,
                             multi: true,