@acorex-platform/module-conversation-client 0.0.56 → 0.0.58

package/fesm2022/{acorex-platform-module-conversation-client-acorex-platform-module-conversation-client-MEun4ht1.mjs → acorex-platform-module-conversation-client-acorex-platform-module-conversation-client-CAPi0yn4.mjs}

@@ -1,6 +1,6 @@
 import { AXPSessionService, AXP_PERMISSION_DEFINITION_PROVIDER } from '@acorex-platform/framework-client/auth';
 import { AXPFilterOperatorMiddlewareService, AXPSearchCommandProvider, createEntityCommandOptions, AXP_PROTECTED_ROUTE_GUARDS, AXPBackgroundOperationHandler, AXP_BACKGROUND_OPERATION_HANDLERS, AXPSettingsService, AXPCommonSettings, AXP_IN_APP_NOTIFICATION_SERVICE, AXPFileStorageService, AXP_MENU_PROVIDER, AXP_SETTING_DEFINITION_PROVIDER, AXP_SEARCH_PROVIDER } from '@acorex-platform/framework-client/common';
-import { AXPEntityBroadcastService, AXPTagService, AXPPageContextRegistry, AXPDeviceService, provideAppStartUpTask, AXP_APP_STARTUP_PRIORITY, AXP_HOOK_PROVIDER } from '@acorex-platform/framework-client/core';
+import { AXPEntityBroadcastService, AXPTagService, AXPPageContextRegistry, AXPDialogOpener, AXPDeviceService, provideAppStartUpTask, AXP_APP_STARTUP_PRIORITY, AXP_HOOK_PROVIDER } from '@acorex-platform/framework-client/core';
 import { USER_CARD_ITEMS_HOOK, AXPTaskBadgeProvider, AXPFileViewerService, AXPUserAvatarService, AXPUserAvatarComponent, AXPUserCardDirective, mergeInfiniteScrollPage, AXPThemeLayoutBlockComponent, AXPInfiniteScrollDirective, AXPStateMessageComponent, AXPAvatarComponent, AXPMarkdownViewerComponent, AXPTaskBadgeService, AXPThemeLayoutStartSideComponent, AXP_PAGE_COMPONENT_PROVIDER, AXP_TASK_BADGE_PROVIDERS } from '@acorex-platform/framework-client/layout/components';
 import { AXPEntityService, AXPFileListComponent, AXPEntityDefinitionRegistryService, cloneLayoutArrays, ensureLayoutSection, ensureLayoutPropertyView, resolveEntityPluginDetailPageOrder, ensureListActions, actionExists, AXP_ENTITY_ACTION_PLUGIN } from '@acorex-platform/framework-client/layout/entity';
 import { AXPQueryService, AXPCommandEventsService, AXPCommandService, provideCommandSetups } from '@acorex-platform/framework-client/runtime';
@@ -46,8 +46,8 @@ import { AXPlatform } from '@acorex/core/platform';
 import { AXFabComponent, AXFabItemComponent } from '@acorex/components/fab';
 import { AXPInAppInboxConnectorService, isInAppInboxUnread, AXPCommunicationManagementClient, AXPInAppInboxRealtimeService } from '@acorex-platform/module-communication-management-client';
 import { axpAiChatMessageIsDelegatedReflectionExcluded, axpAiExtractChatWidgetNodeFromUnknown, axpAiDelegatedAgentResultSegments, AXPAiManagerService, AXPAiChatToolRunContextService, AXPAiPlatformRuntimeContextBuilder, AIMANAGEMENT_STRUCTURED_TEXT_COMPLETION_COMMAND_KEY, axpAiChatTextMessage, persistAiChatAttachmentImage, AIMANAGEMENT_CHAT_TRANSCRIBE_SPEECH_COMMAND_KEY, AXPAiAssistChatModelCatalogService } from '@acorex-platform/module-ai-management-client';
-import * as i1$3 from '@acorex/components/wysiwyg';
-import { AXWysiwygModule } from '@acorex/components/wysiwyg';
+import * as i1$3 from '@acorex/components/text-editor';
+import { AXTextEditorModule } from '@acorex/components/text-editor';
 import { trigger, transition, style, animate } from '@angular/animations';
 import { DomSanitizer } from '@angular/platform-browser';
 import { AXAvatarModule } from '@acorex/components/avatar';
@@ -7598,16 +7598,20 @@ async function axmOpenChatConversationInfoPanelDialog(options) {
         return;
     }
     const popupService = options.popupService ?? inject(AXPopupService);
+    const dialogOpener = options.dialogOpener ?? inject(AXPDialogOpener);
     const conversationService = options.conversationService ?? inject(AXConversationService);
-    const comp = (await import('./acorex-platform-module-conversation-client-chat-conversation-info-panel.component-bwT1-lAn.mjs')).AXMChatConversationInfoPanelComponent;
-    await popupService.open(comp, {
-        title: conversation.title,
-        closeButton: true,
-        size: 'sm',
-        data: {
-            conversation,
-            conversationService,
-        },
+    await dialogOpener.openPopup({
+        load: () => import('./acorex-platform-module-conversation-client-chat-conversation-info-panel.component-bwT1-lAn.mjs').then((module) => module.AXMChatConversationInfoPanelComponent),
+        data: { conversationId: conversation.id },
+        show: (component) => popupService.open(component, {
+            title: conversation.title,
+            closeButton: true,
+            size: 'sm',
+            data: {
+                conversation,
+                conversationService,
+            },
+        }),
     });
 }
 //#endregion
@@ -7731,6 +7735,7 @@ class AXMMiniChatComponent {
         //#region ---- Services & Dependencies ----
         this.conversationService = inject(AXConversationService);
         this.popupService = inject(AXPopupService);
+        this.dialogOpener = inject(AXPDialogOpener);
         this.conversationApi = inject(AXMChatConversationApi);
         this.assistResponse = inject(AXM_CONVERSATION_ASSIST_RESPONSE_PORT, { optional: true });
         this.destroyRef = inject(DestroyRef);
@@ -7814,6 +7819,7 @@ class AXMMiniChatComponent {
         void axmOpenChatConversationInfoPanelDialog({
             conversation,
             popupService: this.popupService,
+            dialogOpener: this.dialogOpener,
             conversationService: this.conversationService,
         });
     }
@@ -8395,6 +8401,7 @@ class AXMMiniChatPanelService {
     constructor() {
         //#region ---- Services & Dependencies ----
         this.popupService = inject(AXPopupService);
+        this.dialogOpener = inject(AXPDialogOpener);
         this.settingsService = inject(AXPSettingsService);
         this.document = inject(DOCUMENT);
         this.translation = inject(AXTranslationService);
@@ -8480,104 +8487,113 @@ class AXMMiniChatPanelService {
             this.windowApi.show();
             return;
         }
-        await this.ensurePopupFrameLoaded();
-        this.abandonOpenWindow();
-        this.activeOpenOptions = options;
-        this.boundRouteKey = axmMiniChatPathKey(this.router.url);
-        this.activePageKey = this.currentPageChatKey();
-        const generation = this.windowGeneration;
-        const retainOnClose = options.retainOnClose === true;
-        this.retainOnClose = retainOnClose;
-        this.retainedHidden = false;
-        this.retainedSessionKey = retainOnClose ? entityKey : null;
-        this.captureFocusedConversation();
-        this.captureActiveConversation();
-        const session = this.sessions.get(entityKey);
-        const samePage = session?.pageKey === this.activePageKey;
-        const restoreSession = Boolean(session?.hasOpened) && !options.forceNewChat && samePage;
-        const startWithNewChat = !restoreSession;
-        const initialView = restoreSession ? session.view : 'thread';
-        const initialConversationId = restoreSession ? session.selectedChatId : undefined;
-        const onSessionChange = (state) => {
-            this.sessions.set(entityKey, {
-                view: state.view,
-                selectedChatId: state.selectedChatId,
-                hasOpened: true,
-                pageKey: this.activePageKey,
-            });
-        };
-        const data = {
-            scope,
-            entityId: options.entityId,
-            entityType: options.entityType,
-            assistId: options.assistId,
-            assistSelection: options.assistSelection ?? 'optional',
-            panelTitle: options.title,
-            showInfoBar: options.showInfoBar ?? false,
-            showComposer: options.showComposer ?? true,
-            initialView,
-            initialConversationId,
-            startWithNewChat,
-            launchContext: options.launchContext ? axmSanitizeContextualAssistContext(options.launchContext) : undefined,
-            minimizable: options.minimizable !== false,
-            retainOnClose,
-            onSessionChange,
-            onVisibilityChange: (visible) => {
-                if (!this.retainOnClose || generation !== this.windowGeneration) {
-                    return;
+        await this.dialogOpener.run({
+            load: () => Promise.resolve(AXMMiniChatPopupWindowComponent),
+            data: { window: 'mini-chat', entityKey },
+            present: async (notifyShown, component) => {
+                await this.ensurePopupFrameLoaded();
+                this.abandonOpenWindow();
+                this.activeOpenOptions = options;
+                this.boundRouteKey = axmMiniChatPathKey(this.router.url);
+                this.activePageKey = this.currentPageChatKey();
+                try {
+                    const generation = this.windowGeneration;
+                    const retainOnClose = options.retainOnClose === true;
+                    this.retainOnClose = retainOnClose;
+                    this.retainedHidden = false;
+                    this.retainedSessionKey = retainOnClose ? entityKey : null;
+                    this.captureFocusedConversation();
+                    this.captureActiveConversation();
+                    const session = this.sessions.get(entityKey);
+                    const samePage = session?.pageKey === this.activePageKey;
+                    const restoreSession = Boolean(session?.hasOpened) && !options.forceNewChat && samePage;
+                    const startWithNewChat = !restoreSession;
+                    const initialView = restoreSession ? session.view : 'thread';
+                    const initialConversationId = restoreSession ? session.selectedChatId : undefined;
+                    const onSessionChange = (state) => {
+                        this.sessions.set(entityKey, {
+                            view: state.view,
+                            selectedChatId: state.selectedChatId,
+                            hasOpened: true,
+                            pageKey: this.activePageKey,
+                        });
+                    };
+                    const data = {
+                        scope,
+                        entityId: options.entityId,
+                        entityType: options.entityType,
+                        assistId: options.assistId,
+                        assistSelection: options.assistSelection ?? 'optional',
+                        panelTitle: options.title,
+                        showInfoBar: options.showInfoBar ?? false,
+                        showComposer: options.showComposer ?? true,
+                        initialView,
+                        initialConversationId,
+                        startWithNewChat,
+                        launchContext: options.launchContext ? axmSanitizeContextualAssistContext(options.launchContext) : undefined,
+                        minimizable: options.minimizable !== false,
+                        retainOnClose,
+                        onSessionChange,
+                        onVisibilityChange: (visible) => {
+                            if (!this.retainOnClose || generation !== this.windowGeneration) {
+                                return;
+                            }
+                            this.retainedHidden = !visible;
+                        },
+                        registerWindow: (api) => {
+                            this.windowApi = api;
+                        },
+                    };
+                    const title = await this.resolveWindowTitle(options.title);
+                    const closed = this.popupService.open(component, {
+                        header: false,
+                        footer: false,
+                        draggable: true,
+                        hasBackdrop: false,
+                        closeButton: false,
+                        closeOnBackdropClick: false,
+                        closeOnEscape: true,
+                        size: 'sm',
+                        title,
+                        panelClass: ['axm-mini-chat-popup'],
+                        resizable: {
+                            handles: ['top-end', 'bottom-end', 'top-start', 'bottom-start'],
+                            minWidth: 320,
+                            minHeight: 280,
+                        },
+                        buttons: {
+                            close: false,
+                            maximize: true,
+                            minimize: {
+                                enable: options.minimizable !== false,
+                                position: 'bottom-right',
+                                dock: AXM_MINI_CHAT_POPUP_DOCK,
+                            },
+                        },
+                        data,
+                    });
+                    notifyShown();
+                    this.closePromise = closed;
+                    this.panelOpen.set(true);
+                    this.watchAnchorPlacement(options, generation);
+                    void closed.finally(() => {
+                        if (generation !== this.windowGeneration) {
+                            return;
+                        }
+                        this.closePromise = null;
+                        this.windowApi = null;
+                        this.finishWindowClose();
+                    });
+                    return closed;
                 }
-                this.retainedHidden = !visible;
-            },
-            registerWindow: (api) => {
-                this.windowApi = api;
-            },
-        };
-        const title = await this.resolveWindowTitle(options.title);
-        try {
-            const closed = this.popupService.open(AXMMiniChatPopupWindowComponent, {
-                header: false,
-                footer: false,
-                draggable: true,
-                hasBackdrop: false,
-                closeButton: false,
-                closeOnBackdropClick: false,
-                closeOnEscape: true,
-                size: 'sm',
-                title,
-                panelClass: ['axm-mini-chat-popup'],
-                resizable: {
-                    handles: ['top-end', 'bottom-end', 'top-start', 'bottom-start'],
-                    minWidth: 320,
-                    minHeight: 280,
-                },
-                buttons: {
-                    close: false,
-                    maximize: true,
-                    minimize: {
-                        enable: options.minimizable !== false,
-                        position: 'bottom-right',
-                        dock: AXM_MINI_CHAT_POPUP_DOCK,
-                    },
-                },
-                data,
-            });
-            this.closePromise = closed;
-            this.panelOpen.set(true);
-            this.watchAnchorPlacement(options, generation);
-            void closed.finally(() => {
-                if (generation !== this.windowGeneration) {
-                    return;
+                catch (error) {
+                    this.windowApi = null;
+                    this.closePromise = null;
+                    this.finishWindowClose();
+                    throw error;
                 }
-                this.closePromise = null;
-                this.windowApi = null;
-                this.finishWindowClose();
-            });
-        }
-        catch {
-            this.windowApi = null;
-            this.closePromise = null;
-            this.finishWindowClose();
-        }
+            },
+        });
     }
     //#endregion
     //#region ---- Utility Methods ----
@@ -8968,6 +8984,7 @@ const AXM_CHAT_SIDEBAR_ACTION_PROVIDER = new InjectionToken('AXM_CHAT_SIDEBAR_AC
 class AXMChatSidebarNewActionsComponent {
     constructor() {
         this.popupService = inject(AXPopupService);
+        this.dialogOpener = inject(AXPDialogOpener);
         this.conversationService = inject(AXConversationService);
         this.translationService = inject(AXTranslationService);
         this.contributedActions = inject(AXM_CHAT_SIDEBAR_ACTION_PROVIDER, { optional: true }) ?? [];
@@ -9004,14 +9021,20 @@ class AXMChatSidebarNewActionsComponent {
     }
     async openNewConversation(event) {
         event?.nativeEvent?.stopPropagation();
-        const title = await this.translationService.translateAsync('@conversation:new-conversation.header');
-        const result = await this.popupService.open(AXConversationNewDialogComponent, {
-            title,
-            size: 'sm',
-            closeButton: true,
-            data: {
-                conversationService: this.conversationService,
+        let title = '';
+        const result = await this.dialogOpener.openPopup({
+            load: () => Promise.resolve(AXConversationNewDialogComponent),
+            prepare: async () => {
+                title = await this.translationService.translateAsync('@conversation:new-conversation.header');
             },
+            show: (component) => this.popupService.open(component, {
+                title,
+                size: 'sm',
+                closeButton: true,
+                data: {
+                    conversationService: this.conversationService,
+                },
+            }),
         });
         if (result?.data) {
             return result.data;
@@ -9102,6 +9125,7 @@ class AXMChatComponent extends AXPPageLayoutBaseComponent {
         //#region ----   Services & Dependencies   ----
         this.conversationService = inject(AXConversationService);
         this.popupService = inject(AXPopupService);
+        this.dialogOpener = inject(AXPDialogOpener);
         this.chatConversationApi = inject(AXMChatConversationApi);
         this.assistResponse = inject(AXM_CONVERSATION_ASSIST_RESPONSE_PORT, { optional: true });
         this.miniChatPanelService = inject(AXMMiniChatPanelService);
@@ -9256,6 +9280,7 @@ class AXMChatComponent extends AXPPageLayoutBaseComponent {
         void axmOpenChatConversationInfoPanelDialog({
             conversation,
             popupService: this.popupService,
+            dialogOpener: this.dialogOpener,
             conversationService: this.conversationService,
         });
     }
@@ -12409,14 +12434,14 @@ class AXMCommentComponent {
         ...(ngDevMode ? [{ debugName: "comments" }] : /* istanbul ignore next */ []));
         this.thread = signal(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "thread" }] : /* istanbul ignore next */ []));
-        this.wysiwygOptions = signal({
+        this.editorOptions = signal({
             look: 'solid',
         }, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "wysiwygOptions" }] : /* istanbul ignore next */ []));
+        ...(ngDevMode ? [{ debugName: "editorOptions" }] : /* istanbul ignore next */ []));
         //#endregion
         //#region ---- View Children ----
-        this.wysiwygEditor = viewChild.required('w', /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "wysiwygEditor" }] : /* istanbul ignore next */ []));
+        this.editorRef = viewChild.required('editorRef', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "editorRef" }] : /* istanbul ignore next */ []));
         //#endregion
         //#region ---- Services & Dependencies ----
         this.commentService = inject(AXMCommentManagementService);
@@ -12495,7 +12520,7 @@ class AXMCommentComponent {
         this.isEditingMode.set(true);
         this.activeEditComment.set({ ...target, userName: userName || '' });
         this.commentContent.set(axmExtractTextFromPayload(target.payload));
-        this.wysiwygEditor()
+        this.editorRef()
             .getHostElement()
             .scrollIntoView({ behavior: 'smooth', block: 'start' });
     }
@@ -12509,9 +12534,9 @@ class AXMCommentComponent {
             const mention = `<strong><a data-id="${reply.senderId}">@${userName || reply.senderId}</a></strong> `;
             this.commentContent.set(mention);
             this.setEditorContent(mention);
-            this.wysiwygEditor()?.focus();
+            this.editorRef()?.focus();
         }
-        this.wysiwygEditor()
+        this.editorRef()
             .getHostElement()
             .scrollIntoView({ behavior: 'smooth', block: 'start' });
     }
@@ -12789,17 +12814,11 @@ class AXMCommentComponent {
         });
         this.comments.update((comments) => filterOut(comments));
     }
-    /** Workaround: Quill editor may not sync immediately with ngModel on clear */
     clearEditorContent() {
-        const editor = this.elementRef.nativeElement.querySelector('.ql-editor');
-        if (editor)
-            editor.innerHTML = '';
+        this.editorRef()?.getEditorService().clearContent();
     }
-    /** Workaround: Quill editor may not sync immediately with ngModel on set */
     setEditorContent(html) {
-        const editor = this.elementRef.nativeElement.querySelector('.ql-editor');
-        if (editor)
-            editor.innerHTML = html;
+        this.editorRef()?.getEditorService().setContent(html || '', false);
     }
     /** Shorthand translator scoped to the comments feature */
     t(key) {
@@ -12823,7 +12842,7 @@ class AXMCommentComponent {
         return axmExtractTextFromPayload(comment.payload);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXMCommentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", 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=\"axm-comment size-full flex flex-col overflow-hidden\">\n  <div class=\"axm-comment__list flex-1 min-h-0 overflow-y-auto\">\n    <ax-comment-container>\n      @if (isLoading()) {\n        <div class=\"axm-comment__skeleton\">\n          <ax-skeleton class=\"size-10 shrink-0 rounded-full\"></ax-skeleton>\n          <div class=\"axm-comment__skeleton-body\">\n            <ax-skeleton class=\"h-4 w-32 rounded\"></ax-skeleton>\n            <ax-skeleton class=\"h-3 w-full rounded-full\"></ax-skeleton>\n            <ax-skeleton class=\"h-3 w-11/12 rounded-full\"></ax-skeleton>\n            <ax-skeleton class=\"h-3 w-4/5 rounded-full\"></ax-skeleton>\n          </div>\n        </div>\n      } @else if (comments().length > 0) {\n        <ax-comment-view class=\"axm-comment__view\">\n          @for (comment of comments(); track comment.id) {\n            <ax-comment-item\n              [id]=\"comment.id!\"\n              [replyCount]=\"comment.replyCount\"\n              [repliesExpanded]=\"isRepliesExpanded(comment.id!)\"\n              (repliesExpandedChange)=\"\n                onRepliesExpandedChange(comment.id!, $event)\n              \"\n              [class.highlighted]=\"highlightedCommentId() === comment.id\"\n              [@fadeIn]\n            >\n              <axp-user-avatar\n                #user\n                [size]=\"36\"\n                [userId]=\"comment.senderId\"\n                [axpUserCard]=\"comment.senderId\"\n                ngProjectAs=\"'ax-avatar'\"\n              ></axp-user-avatar>\n              <ax-title class=\"axm-comment__author\" [axpUserCard]=\"comment.senderId\">{{\n                user.title()\n              }}</ax-title>\n              <ax-comment-date class=\"axm-comment__date\">\n                {{ comment.timestamp | format: 'timeleft' | async }}\n              </ax-comment-date>\n              <ax-comment-menu-options>\n                <ax-button\n                  class=\"axm-comment__menu-btn ax-sm\"\n                  look=\"blank\"\n                  color=\"neutral\"\n                >\n                  <ax-icon icon=\"fa-regular fa-ellipsis\"></ax-icon>\n                </ax-button>\n                <ax-dropdown-panel>\n                  <ax-button-item-list>\n                    <ax-button-item\n                      [text]=\"\n                        ('@conversation:comments.actions.edit.title'\n                          | translate\n                          | async) ?? ''\n                      \"\n                      color=\"neutral\"\n                      (click)=\"editMessage(comment, undefined, user.title())\"\n                    >\n                      <ax-prefix>\n                        <ax-icon icon=\"fa-light fa-pen\"></ax-icon>\n                      </ax-prefix>\n                    </ax-button-item>\n                    <ax-button-item\n                      [text]=\"\n                        ('@conversation:comments.actions.delete.title'\n                          | translate\n                          | async) ?? ''\n                      \"\n                      color=\"danger\"\n                      (click)=\"deleteComment(comment.id!)\"\n                    >\n                      <ax-prefix>\n                        <ax-icon icon=\"fa-light 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\n                [innerHTML]=\"sanitizeHtml(getCommentText(comment))\"\n              ></ax-content>\n              <ax-comment-like\n                (click)=\"toggleLike(comment)\"\n                [like]=\"isLikedByUser(comment)\"\n              >\n                {{ getReactionsCount(comment) }}\n              </ax-comment-like>\n              <ax-comment-reply-text\n                (click)=\"replyMessage(comment, undefined, user.title())\"\n              ></ax-comment-reply-text>\n\n              @for (reply of comment.replies; track reply.id) {\n                <ax-comment-item\n                  [id]=\"reply.id\"\n                  [class.highlighted]=\"highlightedCommentId() === reply.id\"\n                  [@fadeIn]\n                >\n                  <axp-user-avatar\n                    #replyUser\n                    [size]=\"36\"\n                    [userId]=\"reply.senderId\"\n                    [axpUserCard]=\"reply.senderId\"\n                    ngProjectAs=\"'ax-avatar'\"\n                  ></axp-user-avatar>\n                  <ax-title class=\"axm-comment__author\" [axpUserCard]=\"reply.senderId\">{{\n                    replyUser.title()\n                  }}</ax-title>\n                  <ax-comment-date class=\"axm-comment__date\">\n                    {{ reply.timestamp | format: 'timeleft' | async }}\n                  </ax-comment-date>\n                  <ax-comment-menu-options>\n                    <ax-button\n                      class=\"axm-comment__menu-btn ax-sm\"\n                      look=\"blank\"\n                      color=\"neutral\"\n                    >\n                      <ax-icon icon=\"fa-regular fa-ellipsis\"></ax-icon>\n                    </ax-button>\n                    <ax-dropdown-panel>\n                      <ax-button-item-list>\n                        <ax-button-item\n                          [text]=\"\n                            ('@conversation:comments.actions.edit.title'\n                              | translate\n                              | async) ?? ''\n                          \"\n                          color=\"neutral\"\n                          (click)=\"\n                            editMessage(comment, reply, replyUser.title())\n                          \"\n                        >\n                          <ax-prefix>\n                            <ax-icon icon=\"fa-light fa-pen\"></ax-icon>\n                          </ax-prefix>\n                        </ax-button-item>\n                        <ax-button-item\n                          [text]=\"\n                            ('@conversation:comments.actions.delete.title'\n                              | translate\n                              | async) ?? ''\n                          \"\n                          color=\"danger\"\n                          (click)=\"deleteComment(reply.id!)\"\n                        >\n                          <ax-prefix>\n                            <ax-icon icon=\"fa-light 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\n                    [innerHTML]=\"sanitizeHtml(getCommentText(reply))\"\n                  ></ax-content>\n                  <ax-comment-like\n                    (click)=\"toggleLike(reply)\"\n                    [like]=\"isLikedByUser(reply)\"\n                  >\n                    {{ getReactionsCount(reply) }}\n                  </ax-comment-like>\n                  <ax-comment-reply-text\n                    (click)=\"replyMessage(comment, reply, replyUser.title())\"\n                  ></ax-comment-reply-text>\n                </ax-comment-item>\n              }\n            </ax-comment-item>\n          }\n        </ax-comment-view>\n      }\n      <!-- ----- Empty state when no comments exist ----- -->\n      @else {\n        <axp-state-message\n          icon=\"fa-light fa-comments\"\n          [title]=\"\n            '@conversation:comments.components.comment.empty-states.no-comments.title'\n          \"\n          [description]=\"\n            '@conversation:comments.components.comment.empty-states.no-comments.description'\n          \"\n        >\n        </axp-state-message>\n      }\n    </ax-comment-container>\n  </div>\n\n  <div class=\"axm-comment__composer\">\n    @if (isReplyingMode() || isEditingMode()) {\n      <div class=\"axm-comment__context\">\n        <button\n          type=\"button\"\n          class=\"axm-comment__context-main\"\n          (click)=\"scrollMain()\"\n        >\n          <i\n            class=\"fa-light axm-comment__context-icon\"\n            [class.fa-reply]=\"isReplyingMode()\"\n            [class.fa-pen]=\"isEditingMode()\"\n          ></i>\n          <div class=\"axm-comment__context-copy\">\n            <p class=\"axm-comment__context-label\">\n              @if (isReplyingMode()) {\n                {{\n                  '@conversation:comments.actions.reply-to' | translate | async\n                }}\n                <span>{{ activeReplyComment()?.userName }}</span>\n              } @else {\n                {{\n                  '@conversation:comments.actions.edit-message'\n                    | translate\n                    | async\n                }}\n              }\n            </p>\n            <div\n              class=\"axm-comment__context-preview\"\n              [innerHTML]=\"\n                isReplyingMode()\n                  ? sanitizeHtml(getCommentText(activeReplyComment()!))\n                  : sanitizeHtml(getCommentText(activeEditComment()!))\n              \"\n            ></div>\n          </div>\n        </button>\n        <button\n          type=\"button\"\n          class=\"axm-comment__context-close\"\n          (click)=\"resetReplyEditState()\"\n          [attr.aria-label]=\"\n            ('@conversation:comments.actions.cancel.title'\n              | translate\n              | async) ?? 'Cancel'\n          \"\n        >\n          <i class=\"fa-light fa-xmark\"></i>\n        </button>\n      </div>\n    }\n\n    <div class=\"axm-comment__editor\">\n      <ax-wysiwyg-container\n        #w\n        [look]=\"wysiwygOptions().look\"\n        [(ngModel)]=\"commentContent\"\n      >\n        <ax-wysiwyg-view class=\"min-h-24\"></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-button\n              look=\"solid\"\n              color=\"primary\"\n              class=\"ax-sm\"\n              [disabled]=\"hasCooldown() || !commentContent()\"\n              (click)=\"submitComment()\"\n              [text]=\"\n                '@conversation:comments.actions.send.title' | translate | async\n              \"\n            >\n              @if (isSubmitting()) {\n                <ax-loading></ax-loading>\n              }\n            </ax-button>\n          </ax-suffix>\n        </ax-wysiwyg-toolbar>\n      </ax-wysiwyg-container>\n    </div>\n  </div>\n</div>\n", styles: ["@layer properties;:host{display:block;height:100%;min-height:0px;width:100%}.axm-comment{min-height:0px;height:calc(100vh - 210px);background-color:rgb(var(--ax-sys-color-lightest-surface))}.axm-comment .axm-comment__list{min-height:0px}.axm-comment .axm-comment__skeleton{display:flex;align-items:flex-start;gap:.875rem;padding:1.25rem 1.25rem 1.5rem}.axm-comment .axm-comment__skeleton-body{display:flex;min-width:0px;flex:1;flex-direction:column;gap:calc(var(--spacing, .25rem) * 2)}.axm-comment .axm-comment__composer{flex-shrink:0;background-color:rgb(var(--ax-sys-color-surface-surface))}.axm-comment .axm-comment__context{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 3);padding:.625rem .75rem;border:1px solid rgb(var(--ax-sys-color-border-light-surface));border-bottom:none;border-inline-start:3px solid rgb(var(--ax-sys-color-primary-surface));background-color:rgba(var(--ax-sys-color-primary-lightest-surface),.35);font-size:.8125rem;line-height:1.4}.axm-comment .axm-comment__context-main{display:flex;min-width:0px;flex:1;cursor:pointer;align-items:center;gap:.625rem}.axm-comment .axm-comment__context-icon{flex-shrink:0;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));color:rgb(var(--ax-sys-color-primary-surface))}.axm-comment .axm-comment__context-copy{display:flex;min-width:0px;flex-direction:column;gap:.125rem}.axm-comment .axm-comment__context-label{margin:0;--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);color:rgb(var(--ax-sys-color-primary-surface))}.axm-comment .axm-comment__context-preview{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:start;color:rgb(var(--ax-sys-color-neutral-600-surface, 107 114 128))}.axm-comment .axm-comment__context-close{flex-shrink:0;cursor:pointer;border-radius:var(--radius-md, .375rem);--tw-border-style: none;border-style:none;padding:.25rem;background:transparent;color:rgb(var(--ax-sys-color-neutral-500-surface, 107 114 128));font-size:1rem;line-height:1}.axm-comment .axm-comment__context-close:hover{background-color:rgba(var(--ax-sys-color-neutral-100-surface, 243 244 246),.8)}.axm-comment .axm-comment__editor{overflow:hidden;border:1px solid rgb(var(--ax-sys-color-border-light-surface));background-color:rgb(var(--ax-sys-color-lightest-surface));box-shadow:0 1px 2px #0f172a0a}.axm-comment .axm-comment__author{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600)}.axm-comment .axm-comment__date{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));color:rgb(var(--ax-sys-color-neutral-500-surface, 107 114 128))}.axm-comment .axm-comment__menu-btn{opacity:0;transition:opacity .15s ease}ax-comment-item{border-radius:.75rem;transition:background-color .2s ease}ax-comment-item:hover{background-color:rgba(var(--ax-sys-color-neutral-100-surface, 243 244 246),.45)}ax-comment-item:hover .axm-comment__menu-btn{opacity:1}ax-comment-item.highlighted{animation:axm-comment-highlight 2.5s cubic-bezier(.4,0,.2,1) forwards}ax-wysiwyg-container{flex-shrink:0}ax-wysiwyg-container .ax-editor-container{border:none!important;border-radius:0!important;box-shadow:none!important}ax-wysiwyg-container .ax-error-message{padding-inline-start:.75rem}@keyframes axm-comment-highlight{0%{background-color:transparent;box-shadow:inset 3px 0 0 0 transparent}10%{background-color:rgba(var(--ax-sys-color-primary-lightest-surface),.5);box-shadow:inset 3px 0 rgb(var(--ax-sys-color-primary-surface))}35%{background-color:rgba(var(--ax-sys-color-primary-lightest-surface),.3);box-shadow:inset 3px 0 rgba(var(--ax-sys-color-primary-lighter-surface),.8)}60%{background-color:rgba(var(--ax-sys-color-primary-lightest-surface),.4);box-shadow:inset 3px 0 rgba(var(--ax-sys-color-primary-lightest-surface),.6)}to{background-color:transparent;box-shadow:inset 3px 0 0 0 transparent}}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-font-weight: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: AXWysiwygModule }, { kind: "component", type: i1$3.AXWysiwygContainerComponent, selector: "ax-wysiwyg-container", inputs: ["look", "readonly", "disabled", "value", "placeHolder", "initialLine", "mode"], outputs: ["onValueChanged"] }, { kind: "component", type: i1$3.AXWysiwygViewComponent, selector: "ax-wysiwyg-view" }, { kind: "component", type: i1$3.AXWysiwygAlignmentComponent, selector: "ax-wysiwyg-alignment", inputs: ["buttons"] }, { kind: "component", type: i1$3.AXWysiwygColorsComponent, selector: "ax-wysiwyg-colors", inputs: ["buttons"] }, { kind: "component", type: i1$3.AXWysiwygFontStyleComponent, selector: "ax-wysiwyg-font-style", inputs: ["headingLevels", "buttons", "menuItems"] }, { kind: "component", type: i1$3.AXWysiwygHistoryComponent, selector: "ax-wysiwyg-history", inputs: ["buttons"] }, { kind: "component", type: i1$3.AXWysiwygListComponent, selector: "ax-wysiwyg-list", inputs: ["buttons"] }, { kind: "component", type: i1$3.AXWysiwygToolbarComponent, selector: "ax-wysiwyg-toolbar" }, { kind: "ngmodule", type: AXSkeletonModule }, { kind: "component", type: i2$1.AXSkeletonComponent, selector: "ax-skeleton", inputs: ["animated"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2.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", "repliesExpanded"], outputs: ["repliesExpandedChange"] }, { 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: i1$1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: i1$1.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i1$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: 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: AXTranslationModule }, { kind: "ngmodule", type: AXFormModule }, { kind: "ngmodule", type: AXToolBarModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXDropdownButtonModule }, { kind: "component", type: AXPUserAvatarComponent, selector: "axp-user-avatar", inputs: ["size", "userId", "showPresence", "displayName", "displayAvatar"] }, { kind: "directive", type: AXPUserCardDirective, selector: "[axpUserCard]", inputs: ["axpUserCard", "axpUserCardDisabled", "axpUserCardTrigger"] }, { kind: "component", type: AXPStateMessageComponent, selector: "axp-state-message", inputs: ["mode", "icon", "title", "description", "titleParams", "descriptionParams", "look"] }, { kind: "pipe", type: i5.AXFormatPipe, name: "format" }, { kind: "pipe", type: i1$2.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], animations: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", 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: "editorRef", first: true, predicate: ["editorRef"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"axm-comment size-full flex flex-col overflow-hidden\">\n  <div class=\"axm-comment__list flex-1 min-h-0 overflow-y-auto\">\n    <ax-comment-container>\n      @if (isLoading()) {\n        <div class=\"axm-comment__skeleton\">\n          <ax-skeleton class=\"size-10 shrink-0 rounded-full\"></ax-skeleton>\n          <div class=\"axm-comment__skeleton-body\">\n            <ax-skeleton class=\"h-4 w-32 rounded\"></ax-skeleton>\n            <ax-skeleton class=\"h-3 w-full rounded-full\"></ax-skeleton>\n            <ax-skeleton class=\"h-3 w-11/12 rounded-full\"></ax-skeleton>\n            <ax-skeleton class=\"h-3 w-4/5 rounded-full\"></ax-skeleton>\n          </div>\n        </div>\n      } @else if (comments().length > 0) {\n        <ax-comment-view class=\"axm-comment__view\">\n          @for (comment of comments(); track comment.id) {\n            <ax-comment-item\n              [id]=\"comment.id!\"\n              [replyCount]=\"comment.replyCount\"\n              [repliesExpanded]=\"isRepliesExpanded(comment.id!)\"\n              (repliesExpandedChange)=\"\n                onRepliesExpandedChange(comment.id!, $event)\n              \"\n              [class.highlighted]=\"highlightedCommentId() === comment.id\"\n              [@fadeIn]\n            >\n              <axp-user-avatar\n                #user\n                [size]=\"36\"\n                [userId]=\"comment.senderId\"\n                [axpUserCard]=\"comment.senderId\"\n                ngProjectAs=\"'ax-avatar'\"\n              ></axp-user-avatar>\n              <ax-title class=\"axm-comment__author\" [axpUserCard]=\"comment.senderId\">{{\n                user.title()\n              }}</ax-title>\n              <ax-comment-date class=\"axm-comment__date\">\n                {{ comment.timestamp | format: 'timeleft' | async }}\n              </ax-comment-date>\n              <ax-comment-menu-options>\n                <ax-button\n                  class=\"axm-comment__menu-btn ax-sm\"\n                  look=\"blank\"\n                  color=\"neutral\"\n                >\n                  <ax-icon icon=\"fa-regular fa-ellipsis\"></ax-icon>\n                </ax-button>\n                <ax-dropdown-panel>\n                  <ax-button-item-list>\n                    <ax-button-item\n                      [text]=\"\n                        ('@conversation:comments.actions.edit.title'\n                          | translate\n                          | async) ?? ''\n                      \"\n                      color=\"neutral\"\n                      (click)=\"editMessage(comment, undefined, user.title())\"\n                    >\n                      <ax-prefix>\n                        <ax-icon icon=\"fa-light fa-pen\"></ax-icon>\n                      </ax-prefix>\n                    </ax-button-item>\n                    <ax-button-item\n                      [text]=\"\n                        ('@conversation:comments.actions.delete.title'\n                          | translate\n                          | async) ?? ''\n                      \"\n                      color=\"danger\"\n                      (click)=\"deleteComment(comment.id!)\"\n                    >\n                      <ax-prefix>\n                        <ax-icon icon=\"fa-light 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\n                [innerHTML]=\"sanitizeHtml(getCommentText(comment))\"\n              ></ax-content>\n              <ax-comment-like\n                (click)=\"toggleLike(comment)\"\n                [like]=\"isLikedByUser(comment)\"\n              >\n                {{ getReactionsCount(comment) }}\n              </ax-comment-like>\n              <ax-comment-reply-text\n                (click)=\"replyMessage(comment, undefined, user.title())\"\n              ></ax-comment-reply-text>\n\n              @for (reply of comment.replies; track reply.id) {\n                <ax-comment-item\n                  [id]=\"reply.id\"\n                  [class.highlighted]=\"highlightedCommentId() === reply.id\"\n                  [@fadeIn]\n                >\n                  <axp-user-avatar\n                    #replyUser\n                    [size]=\"36\"\n                    [userId]=\"reply.senderId\"\n                    [axpUserCard]=\"reply.senderId\"\n                    ngProjectAs=\"'ax-avatar'\"\n                  ></axp-user-avatar>\n                  <ax-title class=\"axm-comment__author\" [axpUserCard]=\"reply.senderId\">{{\n                    replyUser.title()\n                  }}</ax-title>\n                  <ax-comment-date class=\"axm-comment__date\">\n                    {{ reply.timestamp | format: 'timeleft' | async }}\n                  </ax-comment-date>\n                  <ax-comment-menu-options>\n                    <ax-button\n                      class=\"axm-comment__menu-btn ax-sm\"\n                      look=\"blank\"\n                      color=\"neutral\"\n                    >\n                      <ax-icon icon=\"fa-regular fa-ellipsis\"></ax-icon>\n                    </ax-button>\n                    <ax-dropdown-panel>\n                      <ax-button-item-list>\n                        <ax-button-item\n                          [text]=\"\n                            ('@conversation:comments.actions.edit.title'\n                              | translate\n                              | async) ?? ''\n                          \"\n                          color=\"neutral\"\n                          (click)=\"\n                            editMessage(comment, reply, replyUser.title())\n                          \"\n                        >\n                          <ax-prefix>\n                            <ax-icon icon=\"fa-light fa-pen\"></ax-icon>\n                          </ax-prefix>\n                        </ax-button-item>\n                        <ax-button-item\n                          [text]=\"\n                            ('@conversation:comments.actions.delete.title'\n                              | translate\n                              | async) ?? ''\n                          \"\n                          color=\"danger\"\n                          (click)=\"deleteComment(reply.id!)\"\n                        >\n                          <ax-prefix>\n                            <ax-icon icon=\"fa-light 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\n                    [innerHTML]=\"sanitizeHtml(getCommentText(reply))\"\n                  ></ax-content>\n                  <ax-comment-like\n                    (click)=\"toggleLike(reply)\"\n                    [like]=\"isLikedByUser(reply)\"\n                  >\n                    {{ getReactionsCount(reply) }}\n                  </ax-comment-like>\n                  <ax-comment-reply-text\n                    (click)=\"replyMessage(comment, reply, replyUser.title())\"\n                  ></ax-comment-reply-text>\n                </ax-comment-item>\n              }\n            </ax-comment-item>\n          }\n        </ax-comment-view>\n      }\n      <!-- ----- Empty state when no comments exist ----- -->\n      @else {\n        <axp-state-message\n          icon=\"fa-light fa-comments\"\n          [title]=\"\n            '@conversation:comments.components.comment.empty-states.no-comments.title'\n          \"\n          [description]=\"\n            '@conversation:comments.components.comment.empty-states.no-comments.description'\n          \"\n        >\n        </axp-state-message>\n      }\n    </ax-comment-container>\n  </div>\n\n  <div class=\"axm-comment__composer\">\n    @if (isReplyingMode() || isEditingMode()) {\n      <div class=\"axm-comment__context\">\n        <button\n          type=\"button\"\n          class=\"axm-comment__context-main\"\n          (click)=\"scrollMain()\"\n        >\n          <i\n            class=\"fa-light axm-comment__context-icon\"\n            [class.fa-reply]=\"isReplyingMode()\"\n            [class.fa-pen]=\"isEditingMode()\"\n          ></i>\n          <div class=\"axm-comment__context-copy\">\n            <p class=\"axm-comment__context-label\">\n              @if (isReplyingMode()) {\n                {{\n                  '@conversation:comments.actions.reply-to' | translate | async\n                }}\n                <span>{{ activeReplyComment()?.userName }}</span>\n              } @else {\n                {{\n                  '@conversation:comments.actions.edit-message'\n                    | translate\n                    | async\n                }}\n              }\n            </p>\n            <div\n              class=\"axm-comment__context-preview\"\n              [innerHTML]=\"\n                isReplyingMode()\n                  ? sanitizeHtml(getCommentText(activeReplyComment()!))\n                  : sanitizeHtml(getCommentText(activeEditComment()!))\n              \"\n            ></div>\n          </div>\n        </button>\n        <button\n          type=\"button\"\n          class=\"axm-comment__context-close\"\n          (click)=\"resetReplyEditState()\"\n          [attr.aria-label]=\"\n            ('@conversation:comments.actions.cancel.title'\n              | translate\n              | async) ?? 'Cancel'\n          \"\n        >\n          <i class=\"fa-light fa-xmark\"></i>\n        </button>\n      </div>\n    }\n\n    <div class=\"axm-comment__editor\">\n      <ax-text-editor\n        #editorRef\n        outputFormat=\"html\"\n        [look]=\"editorOptions().look\"\n        [(ngModel)]=\"commentContent\"\n      >\n        <ax-text-editor-content class=\"min-h-24\"></ax-text-editor-content>\n        <ax-text-editor-toolbar>\n          <ax-prefix>\n            <ax-text-editor-history></ax-text-editor-history>\n            <ax-text-editor-font-style></ax-text-editor-font-style>\n            <ax-text-editor-colors></ax-text-editor-colors>\n            <ax-text-editor-list></ax-text-editor-list>\n            <ax-text-editor-alignment></ax-text-editor-alignment>\n          </ax-prefix>\n        </ax-text-editor-toolbar>\n      </ax-text-editor>\n      <!-- ----- Send sits under the editor, aligned to the inline end ----- -->\n      <div class=\"axm-comment__editor-actions\">\n        <ax-button\n          look=\"solid\"\n          color=\"primary\"\n          class=\"ax-sm\"\n          [disabled]=\"hasCooldown() || !commentContent()\"\n          (click)=\"submitComment()\"\n          [text]=\"\n            '@conversation:comments.actions.send.title' | translate | async\n          \"\n        >\n          @if (isSubmitting()) {\n            <ax-loading></ax-loading>\n          }\n        </ax-button>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: ["@layer properties;:host{display:block;height:100%;min-height:0px;width:100%}.axm-comment{min-height:0px;height:calc(100vh - 210px);background-color:rgb(var(--ax-sys-color-lightest-surface))}.axm-comment .axm-comment__list{min-height:0px}.axm-comment .axm-comment__skeleton{display:flex;align-items:flex-start;gap:.875rem;padding:1.25rem 1.25rem 1.5rem}.axm-comment .axm-comment__skeleton-body{display:flex;min-width:0px;flex:1;flex-direction:column;gap:calc(var(--spacing, .25rem) * 2)}.axm-comment .axm-comment__composer{flex-shrink:0;background-color:rgb(var(--ax-sys-color-surface-surface))}.axm-comment .axm-comment__context{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 3);padding:.625rem .75rem;border:1px solid rgb(var(--ax-sys-color-border-light-surface));border-bottom:none;border-inline-start:3px solid rgb(var(--ax-sys-color-primary-surface));background-color:rgba(var(--ax-sys-color-primary-lightest-surface),.35);font-size:.8125rem;line-height:1.4}.axm-comment .axm-comment__context-main{display:flex;min-width:0px;flex:1;cursor:pointer;align-items:center;gap:.625rem}.axm-comment .axm-comment__context-icon{flex-shrink:0;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));color:rgb(var(--ax-sys-color-primary-surface))}.axm-comment .axm-comment__context-copy{display:flex;min-width:0px;flex-direction:column;gap:.125rem}.axm-comment .axm-comment__context-label{margin:0;--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);color:rgb(var(--ax-sys-color-primary-surface))}.axm-comment .axm-comment__context-preview{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:start;color:rgb(var(--ax-sys-color-neutral-600-surface, 107 114 128))}.axm-comment .axm-comment__context-close{flex-shrink:0;cursor:pointer;border-radius:var(--radius-md, .375rem);--tw-border-style: none;border-style:none;padding:.25rem;background:transparent;color:rgb(var(--ax-sys-color-neutral-500-surface, 107 114 128));font-size:1rem;line-height:1}.axm-comment .axm-comment__context-close:hover{background-color:rgba(var(--ax-sys-color-neutral-100-surface, 243 244 246),.8)}.axm-comment .axm-comment__editor{overflow:hidden;border:1px solid rgb(var(--ax-sys-color-border-light-surface));background-color:rgb(var(--ax-sys-color-lightest-surface));box-shadow:0 1px 2px #0f172a0a}.axm-comment .axm-comment__editor-actions{display:flex;justify-content:flex-end;padding:.5rem .75rem;border-top:1px solid rgb(var(--ax-sys-color-border-light-surface))}.axm-comment .axm-comment__author{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600)}.axm-comment .axm-comment__date{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));color:rgb(var(--ax-sys-color-neutral-500-surface, 107 114 128))}.axm-comment .axm-comment__menu-btn{opacity:0;transition:opacity .15s ease}ax-comment-item{border-radius:.75rem;transition:background-color .2s ease}ax-comment-item:hover{background-color:rgba(var(--ax-sys-color-neutral-100-surface, 243 244 246),.45)}ax-comment-item:hover .axm-comment__menu-btn{opacity:1}ax-comment-item.highlighted{animation:axm-comment-highlight 2.5s cubic-bezier(.4,0,.2,1) forwards}ax-text-editor{flex-shrink:0}ax-text-editor .ax-editor-container{border:none!important;border-radius:0!important;box-shadow:none!important}ax-text-editor .ax-error-message{padding-inline-start:.75rem}@keyframes axm-comment-highlight{0%{background-color:transparent;box-shadow:inset 3px 0 0 0 transparent}10%{background-color:rgba(var(--ax-sys-color-primary-lightest-surface),.5);box-shadow:inset 3px 0 rgb(var(--ax-sys-color-primary-surface))}35%{background-color:rgba(var(--ax-sys-color-primary-lightest-surface),.3);box-shadow:inset 3px 0 rgba(var(--ax-sys-color-primary-lighter-surface),.8)}60%{background-color:rgba(var(--ax-sys-color-primary-lightest-surface),.4);box-shadow:inset 3px 0 rgba(var(--ax-sys-color-primary-lightest-surface),.6)}to{background-color:transparent;box-shadow:inset 3px 0 0 0 transparent}}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-font-weight: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: AXTextEditorModule }, { kind: "component", type: i1$3.AXTextEditorComponent, selector: "ax-text-editor", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "look", "placeHolder", "outputFormat", "initialLine"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange"] }, { kind: "component", type: i1$3.AXTextEditorToolbarComponent, selector: "ax-text-editor-toolbar", inputs: ["orientation"] }, { kind: "component", type: i1$3.AXTextEditorContentComponent, selector: "ax-text-editor-content" }, { kind: "component", type: i1$3.AXTextEditorHistoryComponent, selector: "ax-text-editor-history" }, { kind: "component", type: i1$3.AXTextEditorFontStyleComponent, selector: "ax-text-editor-font-style" }, { kind: "component", type: i1$3.AXTextEditorAlignmentComponent, selector: "ax-text-editor-alignment" }, { kind: "component", type: i1$3.AXTextEditorColorsComponent, selector: "ax-text-editor-colors" }, { kind: "component", type: i1$3.AXTextEditorListComponent, selector: "ax-text-editor-list" }, { kind: "ngmodule", type: AXSkeletonModule }, { kind: "component", type: i2$1.AXSkeletonComponent, selector: "ax-skeleton", inputs: ["animated"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2.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", "repliesExpanded"], outputs: ["repliesExpandedChange"] }, { 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: i1$1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: i1$1.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i1$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: 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: AXTranslationModule }, { kind: "ngmodule", type: AXFormModule }, { kind: "ngmodule", type: AXToolBarModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXDropdownButtonModule }, { kind: "component", type: AXPUserAvatarComponent, selector: "axp-user-avatar", inputs: ["size", "userId", "showPresence", "displayName", "displayAvatar"] }, { kind: "directive", type: AXPUserCardDirective, selector: "[axpUserCard]", inputs: ["axpUserCard", "axpUserCardDisabled", "axpUserCardTrigger"] }, { kind: "component", type: AXPStateMessageComponent, selector: "axp-state-message", inputs: ["mode", "icon", "title", "description", "titleParams", "descriptionParams", "look"] }, { kind: "pipe", type: i5.AXFormatPipe, name: "format" }, { kind: "pipe", type: i1$2.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], animations: [
             trigger('fadeIn', [
                 transition(':enter', [
                     style({ opacity: 0, transform: 'translateY(10px)' }),
@@ -12842,7 +12861,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                             ]),
                         ]),
                     ], imports: [
-                        AXWysiwygModule,
+                        AXTextEditorModule,
                         AXSkeletonModule,
                         AXDecoratorModule,
                         AXCommentModule,
@@ -12861,8 +12880,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                         AXPUserAvatarComponent,
                         AXPUserCardDirective,
                         AXPStateMessageComponent,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"axm-comment size-full flex flex-col overflow-hidden\">\n  <div class=\"axm-comment__list flex-1 min-h-0 overflow-y-auto\">\n    <ax-comment-container>\n      @if (isLoading()) {\n        <div class=\"axm-comment__skeleton\">\n          <ax-skeleton class=\"size-10 shrink-0 rounded-full\"></ax-skeleton>\n          <div class=\"axm-comment__skeleton-body\">\n            <ax-skeleton class=\"h-4 w-32 rounded\"></ax-skeleton>\n            <ax-skeleton class=\"h-3 w-full rounded-full\"></ax-skeleton>\n            <ax-skeleton class=\"h-3 w-11/12 rounded-full\"></ax-skeleton>\n            <ax-skeleton class=\"h-3 w-4/5 rounded-full\"></ax-skeleton>\n          </div>\n        </div>\n      } @else if (comments().length > 0) {\n        <ax-comment-view class=\"axm-comment__view\">\n          @for (comment of comments(); track comment.id) {\n            <ax-comment-item\n              [id]=\"comment.id!\"\n              [replyCount]=\"comment.replyCount\"\n              [repliesExpanded]=\"isRepliesExpanded(comment.id!)\"\n              (repliesExpandedChange)=\"\n                onRepliesExpandedChange(comment.id!, $event)\n              \"\n              [class.highlighted]=\"highlightedCommentId() === comment.id\"\n              [@fadeIn]\n            >\n              <axp-user-avatar\n                #user\n                [size]=\"36\"\n                [userId]=\"comment.senderId\"\n                [axpUserCard]=\"comment.senderId\"\n                ngProjectAs=\"'ax-avatar'\"\n              ></axp-user-avatar>\n              <ax-title class=\"axm-comment__author\" [axpUserCard]=\"comment.senderId\">{{\n                user.title()\n              }}</ax-title>\n              <ax-comment-date class=\"axm-comment__date\">\n                {{ comment.timestamp | format: 'timeleft' | async }}\n              </ax-comment-date>\n              <ax-comment-menu-options>\n                <ax-button\n                  class=\"axm-comment__menu-btn ax-sm\"\n                  look=\"blank\"\n                  color=\"neutral\"\n                >\n                  <ax-icon icon=\"fa-regular fa-ellipsis\"></ax-icon>\n                </ax-button>\n                <ax-dropdown-panel>\n                  <ax-button-item-list>\n                    <ax-button-item\n                      [text]=\"\n                        ('@conversation:comments.actions.edit.title'\n                          | translate\n                          | async) ?? ''\n                      \"\n                      color=\"neutral\"\n                      (click)=\"editMessage(comment, undefined, user.title())\"\n                    >\n                      <ax-prefix>\n                        <ax-icon icon=\"fa-light fa-pen\"></ax-icon>\n                      </ax-prefix>\n                    </ax-button-item>\n                    <ax-button-item\n                      [text]=\"\n                        ('@conversation:comments.actions.delete.title'\n                          | translate\n                          | async) ?? ''\n                      \"\n                      color=\"danger\"\n                      (click)=\"deleteComment(comment.id!)\"\n                    >\n                      <ax-prefix>\n                        <ax-icon icon=\"fa-light 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\n                [innerHTML]=\"sanitizeHtml(getCommentText(comment))\"\n              ></ax-content>\n              <ax-comment-like\n                (click)=\"toggleLike(comment)\"\n                [like]=\"isLikedByUser(comment)\"\n              >\n                {{ getReactionsCount(comment) }}\n              </ax-comment-like>\n              <ax-comment-reply-text\n                (click)=\"replyMessage(comment, undefined, user.title())\"\n              ></ax-comment-reply-text>\n\n              @for (reply of comment.replies; track reply.id) {\n                <ax-comment-item\n                  [id]=\"reply.id\"\n                  [class.highlighted]=\"highlightedCommentId() === reply.id\"\n                  [@fadeIn]\n                >\n                  <axp-user-avatar\n                    #replyUser\n                    [size]=\"36\"\n                    [userId]=\"reply.senderId\"\n                    [axpUserCard]=\"reply.senderId\"\n                    ngProjectAs=\"'ax-avatar'\"\n                  ></axp-user-avatar>\n                  <ax-title class=\"axm-comment__author\" [axpUserCard]=\"reply.senderId\">{{\n                    replyUser.title()\n                  }}</ax-title>\n                  <ax-comment-date class=\"axm-comment__date\">\n                    {{ reply.timestamp | format: 'timeleft' | async }}\n                  </ax-comment-date>\n                  <ax-comment-menu-options>\n                    <ax-button\n                      class=\"axm-comment__menu-btn ax-sm\"\n                      look=\"blank\"\n                      color=\"neutral\"\n                    >\n                      <ax-icon icon=\"fa-regular fa-ellipsis\"></ax-icon>\n                    </ax-button>\n                    <ax-dropdown-panel>\n                      <ax-button-item-list>\n                        <ax-button-item\n                          [text]=\"\n                            ('@conversation:comments.actions.edit.title'\n                              | translate\n                              | async) ?? ''\n                          \"\n                          color=\"neutral\"\n                          (click)=\"\n                            editMessage(comment, reply, replyUser.title())\n                          \"\n                        >\n                          <ax-prefix>\n                            <ax-icon icon=\"fa-light fa-pen\"></ax-icon>\n                          </ax-prefix>\n                        </ax-button-item>\n                        <ax-button-item\n                          [text]=\"\n                            ('@conversation:comments.actions.delete.title'\n                              | translate\n                              | async) ?? ''\n                          \"\n                          color=\"danger\"\n                          (click)=\"deleteComment(reply.id!)\"\n                        >\n                          <ax-prefix>\n                            <ax-icon icon=\"fa-light 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\n                    [innerHTML]=\"sanitizeHtml(getCommentText(reply))\"\n                  ></ax-content>\n                  <ax-comment-like\n                    (click)=\"toggleLike(reply)\"\n                    [like]=\"isLikedByUser(reply)\"\n                  >\n                    {{ getReactionsCount(reply) }}\n                  </ax-comment-like>\n                  <ax-comment-reply-text\n                    (click)=\"replyMessage(comment, reply, replyUser.title())\"\n                  ></ax-comment-reply-text>\n                </ax-comment-item>\n              }\n            </ax-comment-item>\n          }\n        </ax-comment-view>\n      }\n      <!-- ----- Empty state when no comments exist ----- -->\n      @else {\n        <axp-state-message\n          icon=\"fa-light fa-comments\"\n          [title]=\"\n            '@conversation:comments.components.comment.empty-states.no-comments.title'\n          \"\n          [description]=\"\n            '@conversation:comments.components.comment.empty-states.no-comments.description'\n          \"\n        >\n        </axp-state-message>\n      }\n    </ax-comment-container>\n  </div>\n\n  <div class=\"axm-comment__composer\">\n    @if (isReplyingMode() || isEditingMode()) {\n      <div class=\"axm-comment__context\">\n        <button\n          type=\"button\"\n          class=\"axm-comment__context-main\"\n          (click)=\"scrollMain()\"\n        >\n          <i\n            class=\"fa-light axm-comment__context-icon\"\n            [class.fa-reply]=\"isReplyingMode()\"\n            [class.fa-pen]=\"isEditingMode()\"\n          ></i>\n          <div class=\"axm-comment__context-copy\">\n            <p class=\"axm-comment__context-label\">\n              @if (isReplyingMode()) {\n                {{\n                  '@conversation:comments.actions.reply-to' | translate | async\n                }}\n                <span>{{ activeReplyComment()?.userName }}</span>\n              } @else {\n                {{\n                  '@conversation:comments.actions.edit-message'\n                    | translate\n                    | async\n                }}\n              }\n            </p>\n            <div\n              class=\"axm-comment__context-preview\"\n              [innerHTML]=\"\n                isReplyingMode()\n                  ? sanitizeHtml(getCommentText(activeReplyComment()!))\n                  : sanitizeHtml(getCommentText(activeEditComment()!))\n              \"\n            ></div>\n          </div>\n        </button>\n        <button\n          type=\"button\"\n          class=\"axm-comment__context-close\"\n          (click)=\"resetReplyEditState()\"\n          [attr.aria-label]=\"\n            ('@conversation:comments.actions.cancel.title'\n              | translate\n              | async) ?? 'Cancel'\n          \"\n        >\n          <i class=\"fa-light fa-xmark\"></i>\n        </button>\n      </div>\n    }\n\n    <div class=\"axm-comment__editor\">\n      <ax-wysiwyg-container\n        #w\n        [look]=\"wysiwygOptions().look\"\n        [(ngModel)]=\"commentContent\"\n      >\n        <ax-wysiwyg-view class=\"min-h-24\"></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-button\n              look=\"solid\"\n              color=\"primary\"\n              class=\"ax-sm\"\n              [disabled]=\"hasCooldown() || !commentContent()\"\n              (click)=\"submitComment()\"\n              [text]=\"\n                '@conversation:comments.actions.send.title' | translate | async\n              \"\n            >\n              @if (isSubmitting()) {\n                <ax-loading></ax-loading>\n              }\n            </ax-button>\n          </ax-suffix>\n        </ax-wysiwyg-toolbar>\n      </ax-wysiwyg-container>\n    </div>\n  </div>\n</div>\n", styles: ["@layer properties;:host{display:block;height:100%;min-height:0px;width:100%}.axm-comment{min-height:0px;height:calc(100vh - 210px);background-color:rgb(var(--ax-sys-color-lightest-surface))}.axm-comment .axm-comment__list{min-height:0px}.axm-comment .axm-comment__skeleton{display:flex;align-items:flex-start;gap:.875rem;padding:1.25rem 1.25rem 1.5rem}.axm-comment .axm-comment__skeleton-body{display:flex;min-width:0px;flex:1;flex-direction:column;gap:calc(var(--spacing, .25rem) * 2)}.axm-comment .axm-comment__composer{flex-shrink:0;background-color:rgb(var(--ax-sys-color-surface-surface))}.axm-comment .axm-comment__context{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 3);padding:.625rem .75rem;border:1px solid rgb(var(--ax-sys-color-border-light-surface));border-bottom:none;border-inline-start:3px solid rgb(var(--ax-sys-color-primary-surface));background-color:rgba(var(--ax-sys-color-primary-lightest-surface),.35);font-size:.8125rem;line-height:1.4}.axm-comment .axm-comment__context-main{display:flex;min-width:0px;flex:1;cursor:pointer;align-items:center;gap:.625rem}.axm-comment .axm-comment__context-icon{flex-shrink:0;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));color:rgb(var(--ax-sys-color-primary-surface))}.axm-comment .axm-comment__context-copy{display:flex;min-width:0px;flex-direction:column;gap:.125rem}.axm-comment .axm-comment__context-label{margin:0;--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);color:rgb(var(--ax-sys-color-primary-surface))}.axm-comment .axm-comment__context-preview{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:start;color:rgb(var(--ax-sys-color-neutral-600-surface, 107 114 128))}.axm-comment .axm-comment__context-close{flex-shrink:0;cursor:pointer;border-radius:var(--radius-md, .375rem);--tw-border-style: none;border-style:none;padding:.25rem;background:transparent;color:rgb(var(--ax-sys-color-neutral-500-surface, 107 114 128));font-size:1rem;line-height:1}.axm-comment .axm-comment__context-close:hover{background-color:rgba(var(--ax-sys-color-neutral-100-surface, 243 244 246),.8)}.axm-comment .axm-comment__editor{overflow:hidden;border:1px solid rgb(var(--ax-sys-color-border-light-surface));background-color:rgb(var(--ax-sys-color-lightest-surface));box-shadow:0 1px 2px #0f172a0a}.axm-comment .axm-comment__author{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600)}.axm-comment .axm-comment__date{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));color:rgb(var(--ax-sys-color-neutral-500-surface, 107 114 128))}.axm-comment .axm-comment__menu-btn{opacity:0;transition:opacity .15s ease}ax-comment-item{border-radius:.75rem;transition:background-color .2s ease}ax-comment-item:hover{background-color:rgba(var(--ax-sys-color-neutral-100-surface, 243 244 246),.45)}ax-comment-item:hover .axm-comment__menu-btn{opacity:1}ax-comment-item.highlighted{animation:axm-comment-highlight 2.5s cubic-bezier(.4,0,.2,1) forwards}ax-wysiwyg-container{flex-shrink:0}ax-wysiwyg-container .ax-editor-container{border:none!important;border-radius:0!important;box-shadow:none!important}ax-wysiwyg-container .ax-error-message{padding-inline-start:.75rem}@keyframes axm-comment-highlight{0%{background-color:transparent;box-shadow:inset 3px 0 0 0 transparent}10%{background-color:rgba(var(--ax-sys-color-primary-lightest-surface),.5);box-shadow:inset 3px 0 rgb(var(--ax-sys-color-primary-surface))}35%{background-color:rgba(var(--ax-sys-color-primary-lightest-surface),.3);box-shadow:inset 3px 0 rgba(var(--ax-sys-color-primary-lighter-surface),.8)}60%{background-color:rgba(var(--ax-sys-color-primary-lightest-surface),.4);box-shadow:inset 3px 0 rgba(var(--ax-sys-color-primary-lightest-surface),.6)}to{background-color:transparent;box-shadow:inset 3px 0 0 0 transparent}}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-font-weight: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
-        }], propDecorators: { refrenceType: [{ type: i0.Input, args: [{ isSignal: true, alias: "refrenceType", required: true }] }], refrenceId: [{ type: i0.Input, args: [{ isSignal: true, alias: "refrenceId", required: true }] }], subject: [{ type: i0.Input, args: [{ isSignal: true, alias: "subject", required: true }] }], wysiwygEditor: [{ type: i0.ViewChild, args: ['w', { isSignal: true }] }] } });
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"axm-comment size-full flex flex-col overflow-hidden\">\n  <div class=\"axm-comment__list flex-1 min-h-0 overflow-y-auto\">\n    <ax-comment-container>\n      @if (isLoading()) {\n        <div class=\"axm-comment__skeleton\">\n          <ax-skeleton class=\"size-10 shrink-0 rounded-full\"></ax-skeleton>\n          <div class=\"axm-comment__skeleton-body\">\n            <ax-skeleton class=\"h-4 w-32 rounded\"></ax-skeleton>\n            <ax-skeleton class=\"h-3 w-full rounded-full\"></ax-skeleton>\n            <ax-skeleton class=\"h-3 w-11/12 rounded-full\"></ax-skeleton>\n            <ax-skeleton class=\"h-3 w-4/5 rounded-full\"></ax-skeleton>\n          </div>\n        </div>\n      } @else if (comments().length > 0) {\n        <ax-comment-view class=\"axm-comment__view\">\n          @for (comment of comments(); track comment.id) {\n            <ax-comment-item\n              [id]=\"comment.id!\"\n              [replyCount]=\"comment.replyCount\"\n              [repliesExpanded]=\"isRepliesExpanded(comment.id!)\"\n              (repliesExpandedChange)=\"\n                onRepliesExpandedChange(comment.id!, $event)\n              \"\n              [class.highlighted]=\"highlightedCommentId() === comment.id\"\n              [@fadeIn]\n            >\n              <axp-user-avatar\n                #user\n                [size]=\"36\"\n                [userId]=\"comment.senderId\"\n                [axpUserCard]=\"comment.senderId\"\n                ngProjectAs=\"'ax-avatar'\"\n              ></axp-user-avatar>\n              <ax-title class=\"axm-comment__author\" [axpUserCard]=\"comment.senderId\">{{\n                user.title()\n              }}</ax-title>\n              <ax-comment-date class=\"axm-comment__date\">\n                {{ comment.timestamp | format: 'timeleft' | async }}\n              </ax-comment-date>\n              <ax-comment-menu-options>\n                <ax-button\n                  class=\"axm-comment__menu-btn ax-sm\"\n                  look=\"blank\"\n                  color=\"neutral\"\n                >\n                  <ax-icon icon=\"fa-regular fa-ellipsis\"></ax-icon>\n                </ax-button>\n                <ax-dropdown-panel>\n                  <ax-button-item-list>\n                    <ax-button-item\n                      [text]=\"\n                        ('@conversation:comments.actions.edit.title'\n                          | translate\n                          | async) ?? ''\n                      \"\n                      color=\"neutral\"\n                      (click)=\"editMessage(comment, undefined, user.title())\"\n                    >\n                      <ax-prefix>\n                        <ax-icon icon=\"fa-light fa-pen\"></ax-icon>\n                      </ax-prefix>\n                    </ax-button-item>\n                    <ax-button-item\n                      [text]=\"\n                        ('@conversation:comments.actions.delete.title'\n                          | translate\n                          | async) ?? ''\n                      \"\n                      color=\"danger\"\n                      (click)=\"deleteComment(comment.id!)\"\n                    >\n                      <ax-prefix>\n                        <ax-icon icon=\"fa-light 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\n                [innerHTML]=\"sanitizeHtml(getCommentText(comment))\"\n              ></ax-content>\n              <ax-comment-like\n                (click)=\"toggleLike(comment)\"\n                [like]=\"isLikedByUser(comment)\"\n              >\n                {{ getReactionsCount(comment) }}\n              </ax-comment-like>\n              <ax-comment-reply-text\n                (click)=\"replyMessage(comment, undefined, user.title())\"\n              ></ax-comment-reply-text>\n\n              @for (reply of comment.replies; track reply.id) {\n                <ax-comment-item\n                  [id]=\"reply.id\"\n                  [class.highlighted]=\"highlightedCommentId() === reply.id\"\n                  [@fadeIn]\n                >\n                  <axp-user-avatar\n                    #replyUser\n                    [size]=\"36\"\n                    [userId]=\"reply.senderId\"\n                    [axpUserCard]=\"reply.senderId\"\n                    ngProjectAs=\"'ax-avatar'\"\n                  ></axp-user-avatar>\n                  <ax-title class=\"axm-comment__author\" [axpUserCard]=\"reply.senderId\">{{\n                    replyUser.title()\n                  }}</ax-title>\n                  <ax-comment-date class=\"axm-comment__date\">\n                    {{ reply.timestamp | format: 'timeleft' | async }}\n                  </ax-comment-date>\n                  <ax-comment-menu-options>\n                    <ax-button\n                      class=\"axm-comment__menu-btn ax-sm\"\n                      look=\"blank\"\n                      color=\"neutral\"\n                    >\n                      <ax-icon icon=\"fa-regular fa-ellipsis\"></ax-icon>\n                    </ax-button>\n                    <ax-dropdown-panel>\n                      <ax-button-item-list>\n                        <ax-button-item\n                          [text]=\"\n                            ('@conversation:comments.actions.edit.title'\n                              | translate\n                              | async) ?? ''\n                          \"\n                          color=\"neutral\"\n                          (click)=\"\n                            editMessage(comment, reply, replyUser.title())\n                          \"\n                        >\n                          <ax-prefix>\n                            <ax-icon icon=\"fa-light fa-pen\"></ax-icon>\n                          </ax-prefix>\n                        </ax-button-item>\n                        <ax-button-item\n                          [text]=\"\n                            ('@conversation:comments.actions.delete.title'\n                              | translate\n                              | async) ?? ''\n                          \"\n                          color=\"danger\"\n                          (click)=\"deleteComment(reply.id!)\"\n                        >\n                          <ax-prefix>\n                            <ax-icon icon=\"fa-light 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\n                    [innerHTML]=\"sanitizeHtml(getCommentText(reply))\"\n                  ></ax-content>\n                  <ax-comment-like\n                    (click)=\"toggleLike(reply)\"\n                    [like]=\"isLikedByUser(reply)\"\n                  >\n                    {{ getReactionsCount(reply) }}\n                  </ax-comment-like>\n                  <ax-comment-reply-text\n                    (click)=\"replyMessage(comment, reply, replyUser.title())\"\n                  ></ax-comment-reply-text>\n                </ax-comment-item>\n              }\n            </ax-comment-item>\n          }\n        </ax-comment-view>\n      }\n      <!-- ----- Empty state when no comments exist ----- -->\n      @else {\n        <axp-state-message\n          icon=\"fa-light fa-comments\"\n          [title]=\"\n            '@conversation:comments.components.comment.empty-states.no-comments.title'\n          \"\n          [description]=\"\n            '@conversation:comments.components.comment.empty-states.no-comments.description'\n          \"\n        >\n        </axp-state-message>\n      }\n    </ax-comment-container>\n  </div>\n\n  <div class=\"axm-comment__composer\">\n    @if (isReplyingMode() || isEditingMode()) {\n      <div class=\"axm-comment__context\">\n        <button\n          type=\"button\"\n          class=\"axm-comment__context-main\"\n          (click)=\"scrollMain()\"\n        >\n          <i\n            class=\"fa-light axm-comment__context-icon\"\n            [class.fa-reply]=\"isReplyingMode()\"\n            [class.fa-pen]=\"isEditingMode()\"\n          ></i>\n          <div class=\"axm-comment__context-copy\">\n            <p class=\"axm-comment__context-label\">\n              @if (isReplyingMode()) {\n                {{\n                  '@conversation:comments.actions.reply-to' | translate | async\n                }}\n                <span>{{ activeReplyComment()?.userName }}</span>\n              } @else {\n                {{\n                  '@conversation:comments.actions.edit-message'\n                    | translate\n                    | async\n                }}\n              }\n            </p>\n            <div\n              class=\"axm-comment__context-preview\"\n              [innerHTML]=\"\n                isReplyingMode()\n                  ? sanitizeHtml(getCommentText(activeReplyComment()!))\n                  : sanitizeHtml(getCommentText(activeEditComment()!))\n              \"\n            ></div>\n          </div>\n        </button>\n        <button\n          type=\"button\"\n          class=\"axm-comment__context-close\"\n          (click)=\"resetReplyEditState()\"\n          [attr.aria-label]=\"\n            ('@conversation:comments.actions.cancel.title'\n              | translate\n              | async) ?? 'Cancel'\n          \"\n        >\n          <i class=\"fa-light fa-xmark\"></i>\n        </button>\n      </div>\n    }\n\n    <div class=\"axm-comment__editor\">\n      <ax-text-editor\n        #editorRef\n        outputFormat=\"html\"\n        [look]=\"editorOptions().look\"\n        [(ngModel)]=\"commentContent\"\n      >\n        <ax-text-editor-content class=\"min-h-24\"></ax-text-editor-content>\n        <ax-text-editor-toolbar>\n          <ax-prefix>\n            <ax-text-editor-history></ax-text-editor-history>\n            <ax-text-editor-font-style></ax-text-editor-font-style>\n            <ax-text-editor-colors></ax-text-editor-colors>\n            <ax-text-editor-list></ax-text-editor-list>\n            <ax-text-editor-alignment></ax-text-editor-alignment>\n          </ax-prefix>\n        </ax-text-editor-toolbar>\n      </ax-text-editor>\n      <!-- ----- Send sits under the editor, aligned to the inline end ----- -->\n      <div class=\"axm-comment__editor-actions\">\n        <ax-button\n          look=\"solid\"\n          color=\"primary\"\n          class=\"ax-sm\"\n          [disabled]=\"hasCooldown() || !commentContent()\"\n          (click)=\"submitComment()\"\n          [text]=\"\n            '@conversation:comments.actions.send.title' | translate | async\n          \"\n        >\n          @if (isSubmitting()) {\n            <ax-loading></ax-loading>\n          }\n        </ax-button>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: ["@layer properties;:host{display:block;height:100%;min-height:0px;width:100%}.axm-comment{min-height:0px;height:calc(100vh - 210px);background-color:rgb(var(--ax-sys-color-lightest-surface))}.axm-comment .axm-comment__list{min-height:0px}.axm-comment .axm-comment__skeleton{display:flex;align-items:flex-start;gap:.875rem;padding:1.25rem 1.25rem 1.5rem}.axm-comment .axm-comment__skeleton-body{display:flex;min-width:0px;flex:1;flex-direction:column;gap:calc(var(--spacing, .25rem) * 2)}.axm-comment .axm-comment__composer{flex-shrink:0;background-color:rgb(var(--ax-sys-color-surface-surface))}.axm-comment .axm-comment__context{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 3);padding:.625rem .75rem;border:1px solid rgb(var(--ax-sys-color-border-light-surface));border-bottom:none;border-inline-start:3px solid rgb(var(--ax-sys-color-primary-surface));background-color:rgba(var(--ax-sys-color-primary-lightest-surface),.35);font-size:.8125rem;line-height:1.4}.axm-comment .axm-comment__context-main{display:flex;min-width:0px;flex:1;cursor:pointer;align-items:center;gap:.625rem}.axm-comment .axm-comment__context-icon{flex-shrink:0;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));color:rgb(var(--ax-sys-color-primary-surface))}.axm-comment .axm-comment__context-copy{display:flex;min-width:0px;flex-direction:column;gap:.125rem}.axm-comment .axm-comment__context-label{margin:0;--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);color:rgb(var(--ax-sys-color-primary-surface))}.axm-comment .axm-comment__context-preview{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:start;color:rgb(var(--ax-sys-color-neutral-600-surface, 107 114 128))}.axm-comment .axm-comment__context-close{flex-shrink:0;cursor:pointer;border-radius:var(--radius-md, .375rem);--tw-border-style: none;border-style:none;padding:.25rem;background:transparent;color:rgb(var(--ax-sys-color-neutral-500-surface, 107 114 128));font-size:1rem;line-height:1}.axm-comment .axm-comment__context-close:hover{background-color:rgba(var(--ax-sys-color-neutral-100-surface, 243 244 246),.8)}.axm-comment .axm-comment__editor{overflow:hidden;border:1px solid rgb(var(--ax-sys-color-border-light-surface));background-color:rgb(var(--ax-sys-color-lightest-surface));box-shadow:0 1px 2px #0f172a0a}.axm-comment .axm-comment__editor-actions{display:flex;justify-content:flex-end;padding:.5rem .75rem;border-top:1px solid rgb(var(--ax-sys-color-border-light-surface))}.axm-comment .axm-comment__author{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600)}.axm-comment .axm-comment__date{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));color:rgb(var(--ax-sys-color-neutral-500-surface, 107 114 128))}.axm-comment .axm-comment__menu-btn{opacity:0;transition:opacity .15s ease}ax-comment-item{border-radius:.75rem;transition:background-color .2s ease}ax-comment-item:hover{background-color:rgba(var(--ax-sys-color-neutral-100-surface, 243 244 246),.45)}ax-comment-item:hover .axm-comment__menu-btn{opacity:1}ax-comment-item.highlighted{animation:axm-comment-highlight 2.5s cubic-bezier(.4,0,.2,1) forwards}ax-text-editor{flex-shrink:0}ax-text-editor .ax-editor-container{border:none!important;border-radius:0!important;box-shadow:none!important}ax-text-editor .ax-error-message{padding-inline-start:.75rem}@keyframes axm-comment-highlight{0%{background-color:transparent;box-shadow:inset 3px 0 0 0 transparent}10%{background-color:rgba(var(--ax-sys-color-primary-lightest-surface),.5);box-shadow:inset 3px 0 rgb(var(--ax-sys-color-primary-surface))}35%{background-color:rgba(var(--ax-sys-color-primary-lightest-surface),.3);box-shadow:inset 3px 0 rgba(var(--ax-sys-color-primary-lighter-surface),.8)}60%{background-color:rgba(var(--ax-sys-color-primary-lightest-surface),.4);box-shadow:inset 3px 0 rgba(var(--ax-sys-color-primary-lightest-surface),.6)}to{background-color:transparent;box-shadow:inset 3px 0 0 0 transparent}}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-font-weight: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
+        }], propDecorators: { refrenceType: [{ type: i0.Input, args: [{ isSignal: true, alias: "refrenceType", required: true }] }], refrenceId: [{ type: i0.Input, args: [{ isSignal: true, alias: "refrenceId", required: true }] }], subject: [{ type: i0.Input, args: [{ isSignal: true, alias: "subject", required: true }] }], editorRef: [{ type: i0.ViewChild, args: ['editorRef', { isSignal: true }] }] } });
 
 var comment_component = /*#__PURE__*/Object.freeze({
     __proto__: null,
@@ -13017,6 +13036,7 @@ function resolveCommentPopupOptions(input = {}) {
 class AXMShowCommentPopupCommand {
     constructor() {
         this.popupService = inject(AXPopupService);
+        this.dialogOpener = inject(AXPDialogOpener);
         this.translate = inject(AXTranslationService);
     }
     async execute(input = {}) {
@@ -13027,15 +13047,22 @@ class AXMShowCommentPopupCommand {
                 message: { text: 'Comment popup requires refType and refId.' },
             };
         }
-        const comp = (await Promise.resolve().then(function () { return commentPopup_component; })).AXMCommentPopupComponent;
-        await this.popupService.open(comp, {
-            title: await this.translate.translateAsync('@conversation:comments.feature.title'),
-            size: 'lg',
-            data: {
-                refrenceType: signal(refType),
-                refrenceId: signal(refId),
-                subject: signal(subject),
+        let title = '';
+        await this.dialogOpener.openPopup({
+            load: () => Promise.resolve().then(function () { return commentPopup_component; }).then((module) => module.AXMCommentPopupComponent),
+            data: { refType, refId },
+            prepare: async () => {
+                title = await this.translate.translateAsync('@conversation:comments.feature.title');
             },
+            show: (component) => this.popupService.open(component, {
+                title,
+                size: 'lg',
+                data: {
+                    refrenceType: signal(refType),
+                    refrenceId: signal(refId),
+                    subject: signal(subject),
+                },
+            }),
         });
         return {
             success: true,
@@ -14285,17 +14312,21 @@ async function axmOpenChatCallStartDialog(options) {
     }
     // Capture DI before any await (dynamic import below).
     const popupService = options.popupService ?? inject(AXPopupService);
-    const comp = (await import('./acorex-platform-module-conversation-client-chat-call-start-popup.component-BAU1EMTz.mjs')).AXMChatCallStartPopupComponent;
+    const dialogOpener = options.dialogOpener ?? inject(AXPDialogOpener);
     const data = { conversation };
-    await popupService.open(comp, {
-        header: false,
-        closeButton: false,
-        footer: false,
-        size: 'sm',
-        closeOnBackdropClick: true,
-        panelClass: ['animate-fadeIn', 'animate-fast', 'axm-chat-call-start-overlay'],
-        contextElement: axmChatCallDarkThemeContextElement(),
-        data,
+    await dialogOpener.openPopup({
+        load: () => import('./acorex-platform-module-conversation-client-chat-call-start-popup.component-D8VXSxog.mjs').then((module) => module.AXMChatCallStartPopupComponent),
+        data: { conversationId: conversation.id },
+        show: (component) => popupService.open(component, {
+            header: false,
+            closeButton: false,
+            footer: false,
+            size: 'sm',
+            closeOnBackdropClick: true,
+            panelClass: ['animate-fadeIn', 'animate-fast', 'axm-chat-call-start-overlay'],
+            contextElement: axmChatCallDarkThemeContextElement(),
+            data,
+        }),
     });
 }
 //#endregion
@@ -14534,6 +14565,7 @@ const AXM_CHAT_INFO_BAR_CALL_ACTION = {
         // Resolve DI synchronously — info-bar runs the handler in runInInjectionContext,
         // but that context is lost after the first await.
         const popupService = inject(AXPopupService);
+        const dialogOpener = inject(AXPDialogOpener);
         const rtc = inject(AXPRtcApiAbstract, { optional: true });
         const translation = inject(AXTranslationService);
         const toast = inject(AXToastService);
@@ -14546,6 +14578,7 @@ const AXM_CHAT_INFO_BAR_CALL_ACTION = {
         await axmOpenChatCallStartDialog({
             conversation: context.conversation,
             popupService,
+            dialogOpener,
         });
     },
 };
@@ -14564,7 +14597,7 @@ const AXM_CHAT_INFO_BAR_CALL_ACTION = {
  */
 const AXM_CONVERSATION_BOT_RENDERER = {
     type: 'assist-response',
-    componentLoader: () => import('./acorex-platform-module-conversation-client-assist-message-renderer.component-34LF22kR.mjs').then(function (n) { return n.b; }).then((m) => m.AXMAssistMessageRendererComponent),
+    componentLoader: () => import('./acorex-platform-module-conversation-client-assist-message-renderer.component-CnMc1kr_.mjs').then(function (n) { return n.b; }).then((m) => m.AXMAssistMessageRendererComponent),
     canHandle: (message) => message.type === 'assist-response' || !!message.metadata?.['isAssistResponse'],
     capabilities: {
         supportsReactions: false,
@@ -14702,31 +14735,49 @@ async function axmOpenChatCallSessionDialog(options) {
         return;
     }
     const popupService = options.popupService ?? inject(AXPopupService);
+    const dialogOpener = options.dialogOpener ?? inject(AXPDialogOpener);
     const activeCallSessions = options.activeCallSessions ?? inject(AXMChatCallActiveSessionService);
-    const comp = (await import('./acorex-platform-module-conversation-client-chat-call-session-page.component-DyepmPqJ.mjs')).AXMChatCallSessionPageComponent;
-    const scopedCallId = options.callId?.trim() || createRandomUuid();
-    activeCallSessions.engage(scopedCallId);
-    const data = {
-        sessionConversation: conversation,
-        sessionMedia: options.media === 'video' ? 'video' : 'voice',
-        sessionPhase: options.phase ?? 'outgoing-waiting',
-        sessionCallId: scopedCallId,
-        sessionInitiatorUserId: options.initiatorUserId?.trim() || undefined,
-    };
+    const sessionMedia = options.media === 'video' ? 'video' : 'voice';
+    let scopedCallId = options.callId?.trim() || '';
     try {
-        await popupService.open(comp, {
-            header: false,
-            closeButton: false,
-            footer: false,
-            size: 'full',
-            closeOnBackdropClick: false,
-            panelClass: ['animate-fadeIn', 'animate-fast'],
-            contextElement: axmChatCallDarkThemeContextElement(),
-            data,
+        const opened = await dialogOpener.openPopup({
+            load: () => import('./acorex-platform-module-conversation-client-chat-call-session-page.component-BCO-UEk3.mjs').then((module) => module.AXMChatCallSessionPageComponent),
+            data: {
+                conversationId: conversation.id,
+                callId: scopedCallId,
+                media: sessionMedia,
+                phase: options.phase ?? 'outgoing-waiting',
+            },
+            show: (component) => {
+                scopedCallId = scopedCallId || createRandomUuid();
+                activeCallSessions.engage(scopedCallId);
+                const data = {
+                    sessionConversation: conversation,
+                    sessionMedia,
+                    sessionPhase: options.phase ?? 'outgoing-waiting',
+                    sessionCallId: scopedCallId,
+                    sessionInitiatorUserId: options.initiatorUserId?.trim() || undefined,
+                };
+                return popupService.open(component, {
+                    header: false,
+                    closeButton: false,
+                    footer: false,
+                    size: 'full',
+                    closeOnBackdropClick: false,
+                    panelClass: ['animate-fadeIn', 'animate-fast'],
+                    contextElement: axmChatCallDarkThemeContextElement(),
+                    data,
+                });
+            },
         });
+        if (opened === undefined) {
+            return;
+        }
     }
     catch (error) {
-        activeCallSessions.release(scopedCallId);
+        if (scopedCallId) {
+            activeCallSessions.release(scopedCallId);
+        }
         throw error;
     }
 }
@@ -14747,6 +14798,7 @@ class AXMChatCallLogMessageRendererComponent {
         this.settings = inject(AXPSettingsService);
         this.conversationService = inject(AXConversationService);
         this.popupService = inject(AXPopupService);
+        this.dialogOpener = inject(AXPDialogOpener);
         this.activeCallSessions = inject(AXMChatCallActiveSessionService);
         this.toastService = inject(AXToastService);
         this.rtcApi = inject(AXPRtcApiAbstract, { optional: true });
@@ -14886,6 +14938,7 @@ class AXMChatCallLogMessageRendererComponent {
                 conversation,
                 media: this.log()?.media === 'video' ? 'video' : 'voice',
                 popupService: this.popupService,
+                dialogOpener: this.dialogOpener,
                 activeCallSessions: this.activeCallSessions,
             });
         }
@@ -16391,6 +16444,7 @@ class AXMChatCallRtcSignalInboxService {
         this.session = inject(AXPSessionService);
         this.store = inject(AXMConversationEntityStoreService);
         this.popupService = inject(AXPopupService);
+        this.dialogOpener = inject(AXPDialogOpener);
         this.translation = inject(AXTranslationService);
         this.toast = inject(AXToastService);
         this.activeSessions = inject(AXMChatCallActiveSessionService);
@@ -16597,6 +16651,7 @@ class AXMChatCallRtcSignalInboxService {
                 callId: ring.callId,
                 initiatorUserId: ring.fromUserId,
                 popupService: this.popupService,
+                dialogOpener: this.dialogOpener,
                 activeCallSessions: this.activeSessions,
             });
         }
@@ -16806,7 +16861,7 @@ class AXMCommentsPageComponentProvider {
         return [
             {
                 key: COMMENTS_PAGE_COMPONENT_KEY,
-                loader: () => import('./acorex-platform-module-conversation-client-comments-page.component-CGE66IMI.mjs').then((m) => m.AXMCommentsPageComponent),
+                loader: () => import('./acorex-platform-module-conversation-client-comments-page.component-C7zC8Cqu.mjs').then((m) => m.AXMCommentsPageComponent),
             },
         ];
     }
@@ -17112,19 +17167,19 @@ class AXMConversationModule {
             provideCommandSetups([
                 {
                     key: CONVERSATION_AFTER_MESSAGE_SENT_COMMAND,
-                    command: () => import('./acorex-platform-module-conversation-client-after-message-sent.command-B5YwswY2.mjs').then((m) => m.AXMConversationAfterMessageSentCommand),
+                    command: () => import('./acorex-platform-module-conversation-client-after-message-sent.command-Bp_2U5HU.mjs').then((m) => m.AXMConversationAfterMessageSentCommand),
                 },
                 {
                     key: CONVERSATION_RETRY_ASSIST_RESPONSE_COMMAND,
-                    command: () => import('./acorex-platform-module-conversation-client-retry-assist-response.command-B183eYcd.mjs').then((m) => m.AXMConversationRetryAssistResponseCommand),
+                    command: () => import('./acorex-platform-module-conversation-client-retry-assist-response.command-BKphfk-P.mjs').then((m) => m.AXMConversationRetryAssistResponseCommand),
                 },
                 {
                     key: CONVERSATION_SYNC_READ_STATE_COMMAND,
-                    command: () => import('./acorex-platform-module-conversation-client-sync-read-state.command-DMi5eCDq.mjs').then((m) => m.AXMConversationSyncReadStateCommand),
+                    command: () => import('./acorex-platform-module-conversation-client-sync-read-state.command-GdaU3JZP.mjs').then((m) => m.AXMConversationSyncReadStateCommand),
                 },
                 {
                     key: CONVERSATION_MARK_CONVERSATION_UNREAD_COMMAND,
-                    command: () => import('./acorex-platform-module-conversation-client-mark-conversation-unread.command-CQOaoc8h.mjs').then((m) => m.AXMConversationMarkConversationUnreadCommand),
+                    command: () => import('./acorex-platform-module-conversation-client-mark-conversation-unread.command-kvOvYsa3.mjs').then((m) => m.AXMConversationMarkConversationUnreadCommand),
                 },
                 {
                     key: CONVERSATION_EMIT_TYPING_INDICATOR_COMMAND,
@@ -17136,7 +17191,7 @@ class AXMConversationModule {
                 },
                 {
                     key: CONVERSATION_OPEN_CHAT_COMMAND,
-                    command: () => import('./acorex-platform-module-conversation-client-open-chat.command-BRUNyQ5f.mjs').then((m) => m.AXMConversationOpenChatCommand),
+                    command: () => import('./acorex-platform-module-conversation-client-open-chat.command-CfzIRObR.mjs').then((m) => m.AXMConversationOpenChatCommand),
                 },
                 {
                     key: 'show-comment-popup',
@@ -17255,19 +17310,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                         provideCommandSetups([
                             {
                                 key: CONVERSATION_AFTER_MESSAGE_SENT_COMMAND,
-                                command: () => import('./acorex-platform-module-conversation-client-after-message-sent.command-B5YwswY2.mjs').then((m) => m.AXMConversationAfterMessageSentCommand),
+                                command: () => import('./acorex-platform-module-conversation-client-after-message-sent.command-Bp_2U5HU.mjs').then((m) => m.AXMConversationAfterMessageSentCommand),
                             },
                             {
                                 key: CONVERSATION_RETRY_ASSIST_RESPONSE_COMMAND,
-                                command: () => import('./acorex-platform-module-conversation-client-retry-assist-response.command-B183eYcd.mjs').then((m) => m.AXMConversationRetryAssistResponseCommand),
+                                command: () => import('./acorex-platform-module-conversation-client-retry-assist-response.command-BKphfk-P.mjs').then((m) => m.AXMConversationRetryAssistResponseCommand),
                             },
                             {
                                 key: CONVERSATION_SYNC_READ_STATE_COMMAND,
-                                command: () => import('./acorex-platform-module-conversation-client-sync-read-state.command-DMi5eCDq.mjs').then((m) => m.AXMConversationSyncReadStateCommand),
+                                command: () => import('./acorex-platform-module-conversation-client-sync-read-state.command-GdaU3JZP.mjs').then((m) => m.AXMConversationSyncReadStateCommand),
                             },
                             {
                                 key: CONVERSATION_MARK_CONVERSATION_UNREAD_COMMAND,
-                                command: () => import('./acorex-platform-module-conversation-client-mark-conversation-unread.command-CQOaoc8h.mjs').then((m) => m.AXMConversationMarkConversationUnreadCommand),
+                                command: () => import('./acorex-platform-module-conversation-client-mark-conversation-unread.command-kvOvYsa3.mjs').then((m) => m.AXMConversationMarkConversationUnreadCommand),
                             },
                             {
                                 key: CONVERSATION_EMIT_TYPING_INDICATOR_COMMAND,
@@ -17279,7 +17334,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                             },
                             {
                                 key: CONVERSATION_OPEN_CHAT_COMMAND,
-                                command: () => import('./acorex-platform-module-conversation-client-open-chat.command-BRUNyQ5f.mjs').then((m) => m.AXMConversationOpenChatCommand),
+                                command: () => import('./acorex-platform-module-conversation-client-open-chat.command-CfzIRObR.mjs').then((m) => m.AXMConversationOpenChatCommand),
                             },
                             {
                                 key: 'show-comment-popup',
@@ -17315,4 +17370,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
  */
 
 export { axmShouldForkPrivateToGroup as $, AXMConversationEntityStoreService as A, axmSanitizeAssistUserAnswerText as B, axmAssistUserVisibleItemsForLine as C, axmReadAssistFollowUpStatus as D, axmReadPlainTextMessagePayload as E, AXMNodeMessageRendererComponent as F, AXMAssistSuggestionChipsComponent as G, AXMChatCallActiveSessionService as H, axmResolveConversationListAvatar as I, axmEnsureChatCallRtcReady as J, axmOpenChatCallSessionDialog as K, axmChatCallMediaRoomName as L, axmResolveChatCallLiveKitServerUrl as M, axmChatCallRoomConnectOptions as N, loadLiveKitClient as O, AXM_CHAT_CALL_RTC_API_PROVIDERS as P, AXMConversationAppearanceSyncService as Q, axmCancelAssistComposerGeneration as R, AXMChatEmptyStateHostComponent as S, AXMChatComposerEnsureAssistConversationDirective as T, AXMChatUserApi as U, AXMChatEntityConversationApi as V, AXMChatConversationApi as W, AXMChatCallRtcSignalInboxService as X, AXMChatCallEventsService as Y, AXMConversationRealtimeBus as Z, axmReadChatCallLog as _, AXM_CONVERSATION_ASSIST_RESPONSE_PORT as a, CONVERSATION_SEND_ASSIST_CHAT_MESSAGE_COMMAND as a$, axmIsConversationParticipant as a0, axmBuildChatCallLogMessage as a1, axmMatchesForkedGroupForCall as a2, axmAssistWidgetNodeFromUnknown as a3, AXMAddReactionCommand as a4, AXMChannelFeedItemComponent as a5, AXMChannelFeedPage as a6, AXMChatAnnouncementChannelService as a7, AXMChatComponent as a8, AXMChatComposerAssistPickerComponent as a9, AXMMiniChatPanelService as aA, AXMMiniChatPopupWindowComponent as aB, AXMShowCommentPopupCommand as aC, AXM_AI_MANAGEMENT_ASSIST_ENTITY_NAME as aD, AXM_ASSIST_DEFAULT_RESOLVER_PORT as aE, AXM_ASSIST_TRANSCRIPT_LINE_PAYLOAD_TYPE as aF, AXM_CHAT_ASSIST_CATALOG_PORT as aG, AXM_CHAT_EMPTY_STATE_COMPONENT as aH, AXM_CHAT_SIDEBAR_ACTION_PROVIDER as aI, AXM_CONVERSATION_ASSIST_BACKGROUND_OPERATION_HANDLERS as aJ, AXM_CONVERSATION_ASSIST_BACKGROUND_OPERATION_KEY as aK, AXM_CONVERSATION_CHAT_ATTACHMENT_CATEGORY as aL, AXM_CONVERSATION_CHAT_ATTACHMENT_REF_TYPE as aM, AXM_CONVERSATION_TAB_BOT as aN, AXM_ENTITY_LIST_CHAT_ID as aO, AXM_MINI_CHAT_INBOX_CONVERSATION_FILTER as aP, AXM_MINI_CHAT_INBOX_SESSION_KEY as aQ, AXM_MINI_CHAT_POPUP_DOCK as aR, AXM_MINI_CHAT_SCOPE_ENTITY as aS, AXM_MINI_CHAT_SCOPE_METADATA_KEY as aT, AXPCommentWidget as aU, COMMENTS_PAGE_COMPONENT_KEY as aV, CONVERSATION_AFTER_MESSAGE_SENT_COMMAND as aW, CONVERSATION_EMIT_TYPING_INDICATOR_COMMAND as aX, CONVERSATION_MARK_CONVERSATION_UNREAD_COMMAND as aY, CONVERSATION_OPEN_CHAT_COMMAND as aZ, CONVERSATION_RETRY_ASSIST_RESPONSE_COMMAND as a_, AXMChatEmptyAssistSessionService as aa, AXMChatEntityConversationFocusHandler as ab, AXMChatEntityConversationRoomQueryService as ac, AXMChatEntityMessageApi as ad, AXMChatEntityRealtimeApi as ae, AXMChatEntityUserApi as af, AXMChatRealtimeApi as ag, AXMCommentManagementService as ah, AXMCommentPopupComponent as ai, AXMCommentRealtimeService as aj, AXMCommentRealtimeServiceImpl as ak, AXMCommentService as al, AXMCommentServiceImpl as am, AXMCommentWidgetViewComponent as an, AXMConversationAssistBackgroundOperationHandler as ao, AXMConversationModule as ap, AXMEntityChatService as aq, AXMMiniChatComponent as ar, AXMMiniChatFileDropService as as, AXMMiniChatFooterDockComponent as at, AXMMiniChatHeaderSlotComponent as au, AXMMiniChatHistoryComponent as av, AXMMiniChatInboxHistoryComponent as aw, AXMMiniChatLauncherComponent as ax, AXMMiniChatPageActionComponent as ay, AXMMiniChatPanelComponent as az, AXM_CONVERSATION_REGULAR_AUTO_REPLY_PORT as b, axmResolveChatAiTargetText as b$, CONVERSATION_START_ASSIST_CHAT_COMMAND as b0, CONVERSATION_START_DIRECT_CHAT_COMMAND as b1, CONVERSATION_SYNC_READ_STATE_COMMAND as b2, axmApplyAnswerTextToAssistPayloadLine as b3, axmAssistFollowUpItemsFromUnknown as b4, axmAssistLastTranscriptLine as b5, axmAssistNormalizeFollowUpItemForConversation as b6, axmAssistNormalizeFollowUpItemsForConversation as b7, axmAssistPersistedMessageLooksComplete as b8, axmAssistResolveFollowUpCommandName as b9, axmExtractAssistSnapshotFromMetadata as bA, axmExtractDirectAgentIdFromMetadata as bB, axmExtractEntityRefFromMetadata as bC, axmExtractModelEntityIdFromMetadata as bD, axmExtractTextFromPayload as bE, axmFilterChatAiTargets as bF, axmFlattenConversationCreateMetadata as bG, axmHydrateRealtimeConversationMessage as bH, axmInboxConversationTab as bI, axmIsAssistBotConversation as bJ, axmIsAssistPeerParticipant as bK, axmIsAssistResponseMessage as bL, axmIsAssistStreamingMessage as bM, axmIsAssistTerminalStatus as bN, axmIsUnsupportedLegacyAgentAssistConversation as bO, axmLoadChatAiTargets as bP, axmMessageEntityToMessage as bQ, axmMiniChatHistoryScopeFromDraft as bR, axmMiniChatHistoryScopeFromOpen as bS, axmMiniChatHistoryScopeKey as bT, axmMiniChatWindowOwnsRoute as bU, axmNormalizeAssistTranscriptForChatUi as bV, axmNormalizeAssistTranscriptLineResponses as bW, axmPreferLocalUnreadCount as bX, axmReadReplyToUserMessageId as bY, axmRemoveMiniChatHistoryItem as bZ, axmResolveAssistFinalAnswerText as b_, axmAssistStarterPromptChipItems as ba, axmAssistSuggestionIconForLabel as bb, axmAssistWidgetNodeDedupeKey as bc, axmBuildAiChatConversationMetadata as bd, axmBuildAssistPeerParticipantFromCreateData as be, axmBuildAssistPeerParticipantFromId as bf, axmBuildAssistTranscriptLinePayload as bg, axmBuildAutoTitleFromUserText as bh, axmBuildEntityChatConversationMetadata as bi, axmBuildEntityChatRoomEntityRef as bj, axmChatAiPeerParticipantId as bk, axmChatAiTargetAvatarUrl as bl, axmChatAiTargetDisplayDescription as bm, axmChatAiTargetDisplayName as bn, axmChatAiTargetShortcutDescriptionKey as bo, axmCoerceDate as bp, axmCoerceTimestampMs as bq, axmComputeConversationUnreadCount as br, axmConversationIsEntityChat as bs, axmConversationIsGlobalChat as bt, axmConversationMatchesEntity as bu, axmConversationMatchesHistoryScope as bv, axmEntityRefForMiniChatPageContext as bw, axmEntityRefFromLaunchContext as bx, axmExcludeEntityChatConversations as by, axmExtractAssistIdFromMetadata as bz, axmConversationHasAiChat$1 as c, axmRoomEntityToConversation as c0, axmRoomIsEntityChat as c1, axmRoomLaunchContext as c2, axmRoomMatchesEntity as c3, axmRoomWithAssistPeerDisplayName as c4, axmShouldPreferPersistedAssistOverLiveCache as c5, axmSortMessagesNewestFirst as c6, axmSyncAssistPeerDisplayName as c7, axmUpsertMiniChatHistoryItem as c8, axmUserRowToParticipant as c9, axpShowCommentPopupCommandDefinition as ca, channelFeedPageRoutes as cb, commentsPlugin as cc, createConversationServiceSessionAdapter as cd, persistChatAttachment as ce, AXMConversationFocusService as d, AXMConversationInAppNotificationSyncService as e, axmMessageCountsTowardUnread as f, buildConversationChatInAppCorrelationPrefix as g, AXMCommentComponent as h, axmResolveI18nLabel as i, axmSyntheticEmbedMessage as j, axmChatRenderableAssistWidgetNode as k, axmPartitionAssistAnswerText as l, axmParseAssistTranscriptTextEnvelope as m, AXMAssistChatDebugModeService as n, AXMChatMessageApi as o, AXM_AI_MANAGEMENT_MODULE_NAME as p, AXM_AI_MANAGEMENT_AGENT_ENTITY_NAME as q, axmReadAssistResponseStatus as r, axmIsAssistRetryableStatus as s, axmReadAssistResponseError as t, axmReadAssistAiTranscript as u, axmParseAssistTranscriptLinePayload as v, axmReadAssistAiTranscriptRaw as w, axmAssistUserFacingPayloadLine as x, axmIsAssistStreamingStatus as y, axmAssistHasFinalizeMetadata as z };
-//# sourceMappingURL=acorex-platform-module-conversation-client-acorex-platform-module-conversation-client-MEun4ht1.mjs.map
+//# sourceMappingURL=acorex-platform-module-conversation-client-acorex-platform-module-conversation-client-CAPi0yn4.mjs.map